:root{
  --bg:#101b14; --panel:#18261c; --ink:#eef5ea; --dim:#9fb3a3;
  --line:#2a3d30; --accent:#e8c750; --owl:#9b7a4d;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:15px/1.45 "Segoe UI",system-ui,-apple-system,sans-serif;
  background:radial-gradient(120% 120% at 50% 0%, #16271b 0%, #0c140e 70%);
  color:var(--ink); min-height:100vh;
  transition:background .8s ease;
}
body[data-season="spring"]{background:radial-gradient(120% 120% at 50% 0%, #1a2d1d 0%, #0c140e 70%)}
body[data-season="summer"]{background:radial-gradient(120% 120% at 50% 0%, #1d2e18 0%, #0c140e 70%)}
body[data-season="fall"]{background:radial-gradient(120% 120% at 50% 0%, #2a2412 0%, #0e0d08 70%)}
body[data-season="winter"]{background:radial-gradient(120% 120% at 50% 0%, #1b2630 0%, #0b0f12 70%)}

#topbar{
  display:flex; align-items:center; gap:16px; padding:12px 22px;
  border-bottom:1px solid var(--line);
}
#topbar h1{font-size:22px; margin:0; letter-spacing:.3px}
.when{display:flex; gap:10px; align-items:center; margin-left:6px}
.season{background:var(--accent); color:#3a2c00; font-weight:700; padding:3px 12px; border-radius:20px; font-size:13px}
.day{color:var(--dim); font-size:13px}
.clock{font-size:13px}
.credit{margin-left:auto; color:var(--dim); font-size:12px}
.credit a{color:var(--owl); text-decoration:none}

main{display:flex; gap:20px; padding:18px 22px; align-items:flex-start; flex-wrap:wrap}
.field-col{flex:1 1 640px; min-width:320px}
#stage{border-radius:14px; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.45); line-height:0;
  border:1px solid var(--line); background:#0c140e}
#stage canvas{display:block; margin:0 auto}

.ticker{height:22px; color:var(--accent); font-size:13px; margin-top:8px; text-align:center; transition:opacity .3s}
.playbar{display:flex; gap:10px; align-items:center; margin-top:8px; justify-content:center}
.pbtn{background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:10px;
  padding:8px 14px; cursor:pointer; font-size:15px}
.pbtn.big{font-size:18px; width:48px}
.pbtn:hover{border-color:var(--accent)}
.speeds{display:flex; gap:4px}
.speeds button{background:var(--panel); color:var(--dim); border:1px solid var(--line); border-radius:8px;
  padding:6px 12px; cursor:pointer}
.speeds button.active{background:var(--accent); color:#3a2c00; font-weight:700; border-color:var(--accent)}

.side{flex:0 0 320px; display:flex; flex-direction:column; gap:14px}
.tools{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.tool{display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 6px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; cursor:pointer; color:var(--ink);
  transition:transform .08s, border-color .15s}
.tool:hover{transform:translateY(-2px); border-color:var(--accent)}
.tool.active{border-color:var(--accent); background:#23341f; box-shadow:0 0 0 2px rgba(232,199,80,.25)}
.tool .em{font-size:24px} .tool .lb{font-size:12px; color:var(--dim)}
.hint{min-height:34px; color:var(--dim); font-size:13px; padding:0 2px}

.stats{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.stat{display:flex; justify-content:space-between; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:8px 12px}
.stat .k{color:var(--dim); font-size:13px} .stat b{font-size:16px}

.graph-wrap{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px}
.graph-legend{display:flex; gap:12px; font-size:11px; margin-bottom:6px}
#graph{width:100%; height:120px; display:block}

.harvest{background:#23341f; border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  text-align:center; font-weight:600; color:var(--accent)}

.how{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 14px; color:var(--dim)}
.how summary{cursor:pointer; color:var(--ink); font-weight:600}
.how p{font-size:13px; margin:8px 0}
.how b{color:var(--ink)}

/* ============ iteration 4: wood / straw theme + title splash ============ */
:root{ --accent:#f0bf4d; --owl:#caa86a; --wline:#5e431f; }
body{ background:radial-gradient(125% 125% at 50% -10%, #2c1f12 0%, #140d07 74%); color:#f6efe2; }
body[data-season="spring"]{ background:radial-gradient(125% 125% at 50% -10%, #2b2913 0%, #140d07 74%) }
body[data-season="summer"]{ background:radial-gradient(125% 125% at 50% -10%, #2e2911 0%, #140d07 74%) }
body[data-season="fall"]{ background:radial-gradient(125% 125% at 50% -10%, #34230f 0%, #140b05 74%) }
body[data-season="winter"]{ background:radial-gradient(125% 125% at 50% -10%, #232a30 0%, #0e1114 74%) }

#topbar{ background:linear-gradient(#2c1d10,#20140a); border-bottom:2px solid var(--wline) }
.credit a{ color:var(--owl) }
.tool,.stat,.pbtn,.speeds button,.graph-wrap,.how{
  background:linear-gradient(#3a2817,#291b0f); border:1px solid var(--wline); color:#f6efe2;
}
.graph-wrap,.how{ background-image:repeating-linear-gradient(91deg, rgba(0,0,0,.05) 0 2px, transparent 2px 7px), linear-gradient(#3a2817,#291b0f) }
.tool:hover,.pbtn:hover{ border-color:var(--accent) }
.tool.active{ background:linear-gradient(#5d4022,#3a2817); border-color:var(--accent); box-shadow:0 0 0 2px rgba(240,191,77,.35) }
.tool .lb,.stat .k,.hint,.how{ color:#c8b292 }
.speeds button.active,.season{ background:var(--accent); color:#3a2c00 }
.harvest{ background:linear-gradient(#4c3614,#33240d); border:1px solid var(--wline); color:var(--accent) }
.how summary,.how b,.stat b{ color:#f6efe2 }

/* title splash — non-blocking, fades out (field runs behind it) */
#splash{ position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 38%, rgba(22,14,7,.5), rgba(9,6,3,.86)); transition:opacity .8s ease }
#splash.gone{ opacity:0; pointer-events:none }
.splash-card{ text-align:center; max-width:460px; padding:36px 42px; border-radius:20px;
  background:linear-gradient(#3c2918,#231708); border:2px solid #6b4a26; box-shadow:0 26px 80px rgba(0,0,0,.65);
  animation:rise .6s ease both }
@keyframes rise{ from{ transform:translateY(14px); opacity:0 } to{ transform:none; opacity:1 } }
.splash-title{ font-size:44px; font-weight:800; color:#f0bf4d; text-shadow:0 2px 0 #6b4a13 }
.splash-sub{ color:#ecdfc6; margin:14px 4px 22px; font-size:16px; line-height:1.5 }
#splash-go{ font-size:18px; font-weight:700; color:#3a2c00; cursor:pointer; border:none; border-radius:12px;
  padding:12px 28px; background:linear-gradient(#f5cb59,#d89a2f); box-shadow:0 6px 0 #a9741f; transition:transform .08s }
#splash-go:hover{ transform:translateY(-2px) } #splash-go:active{ transform:translateY(2px); box-shadow:0 2px 0 #a9741f }
.splash-tip{ margin-top:16px; font-size:13px; color:#b59b76 }
@media (prefers-reduced-motion: reduce){ .splash-card{ animation:none } #splash{ transition:none } }

/* de-emphasized, two-click reset (avoid accidental wipe by a kid) */
#reset{ font-size:12px; opacity:.6; padding:6px 10px } #reset:hover{ opacity:1 }
#reset.armed{ opacity:1; background:linear-gradient(#7a2f2f,#5a2020); border-color:#b95a5a; color:#ffe1e1 }

.graph-axis{ display:flex; justify-content:space-between; font-size:10px; color:#9b8568; margin-top:3px }