:root { --bg:#120a1f; --panel:#1d1230; --edge:#3a2a5c; --ink:#f2e9ff; --mute:#a897c8; --neon:#2ff3e0; --pink:#ff4fa3; --amber:#ffb454; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin:0; background: radial-gradient(1200px 500px at 50% -100px, #3b1a5e 0%, var(--bg) 60%); color:var(--ink); font:15px/1.5 ui-monospace, Menlo, Consolas, monospace; min-height:100vh; }
.wrap { max-width: 880px; margin: 0 auto; padding: 14px; }
header h1 { margin:0; font-size: 26px; letter-spacing: .08em; color: var(--neon); text-shadow: 0 0 12px #2ff3e099; }
header p { margin: 2px 0 10px; color: var(--mute); }
.skyline { height: 54px; background: linear-gradient(#0000, #120a1f) , repeating-linear-gradient(90deg, #1d1230 0 28px, #2a1948 28px 44px, #1a0f2c 44px 70px); border-bottom: 2px solid var(--pink); box-shadow: 0 6px 18px -8px var(--pink); margin-bottom: 10px; border-radius: 6px; }
.hud { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.chip { background: var(--panel); border:1px solid var(--edge); border-radius: 999px; padding: 3px 12px; }
.chip b { color: var(--amber); }
nav { display:flex; flex-wrap:wrap; gap:6px; margin-bottom: 10px; }
button { font: inherit; color: var(--ink); background: var(--panel); border:1px solid var(--edge); border-radius: 8px; padding: 6px 12px; cursor:pointer; }
button:hover:not(:disabled) { border-color: var(--neon); box-shadow: 0 0 8px #2ff3e055; }
button:disabled { opacity:.45; cursor:default; }
button.on { border-color: var(--neon); color: var(--neon); }
button.go { border-color: var(--pink); color: var(--pink); }
.panel { background: var(--panel); border:1px solid var(--edge); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.panel h2 { margin: 0 0 6px; font-size: 16px; color: var(--pink); }
.tools { display:flex; flex-wrap:wrap; gap:6px; margin-bottom: 10px; }
.grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 460px; }
.plot { aspect-ratio: 1; font-size: 30px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#2a1a12; border:2px dashed #55402f; border-radius:10px; padding:0; position:relative; }
.plot.tilled { background:#3a2418; border-style: solid; border-color:#6b4a30; }
.plot.wet { box-shadow: inset 0 0 0 2px #2ff3e0aa; }
.plot.ripe { border-color: var(--amber); box-shadow: 0 0 10px #ffb45466; }
.plot small { font-size: 10px; color: var(--mute); }
.npc { display:flex; gap:12px; align-items:flex-start; margin-bottom: 10px; }
.npc .face { font-size: 38px; }
.hearts { color: var(--pink); letter-spacing: 2px; }
.say { margin: 4px 0 6px; }
.row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin: 4px 0; }
#log { color: var(--mute); max-height: 120px; overflow:auto; font-size: 13px; }
#log div:first-child { color: var(--ink); }
.cult { border-color: #5a1f4a; box-shadow: 0 0 18px -6px var(--pink); }
footer { color: var(--mute); font-size: 12px; margin: 18px 0; display:flex; gap:14px; flex-wrap:wrap; }
footer a { color: var(--mute); }
@media (max-width: 480px) { .grid { grid-template-columns: repeat(4, 1fr); gap:5px; } .plot { font-size: 22px; } }