/* Watch Your Grass. Warmer and brighter than the first, gloomy pass (#060e0c → #0b1510). */
:root { --bg: #0b1510; --bg2: #11211a; --tile: #1c3a28; --tile2: #22452f; --ink: #d6eed6; --dim: #8fb79a; --mute: #5d806a; --line: rgba(214,238,214,.1); --sun: #ffd36a; --bad: #ff6b6b; --ok: #7dff8c; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(120% 80% at 50% 0%, #143222, var(--bg) 60%); color: var(--ink); font: 15px/1.45 ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; }
.hud { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: rgba(11,21,16,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.logo { font-size: 18px; letter-spacing: .01em; } .logo span { color: var(--ok); }
.stats { flex: 1; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-variant-numeric: tabular-nums; } .stats b { font-weight: 700; }
.ctl { display: flex; gap: 8px; }
.ctl button, .card button { height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg2); font-weight: 600; }
.pri { background: linear-gradient(135deg, #7dff8c, #ffd36a) !important; color: #0b1510; border-color: transparent !important; }
.pri:disabled { opacity: .45; cursor: default; }
main { display: grid; grid-template-columns: 220px minmax(0, 1fr) 280px; gap: 16px; padding: 16px; max-width: 1240px; margin: 0 auto; }
.shop { display: grid; gap: 8px; align-content: start; }
.buy { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 2px 10px; text-align: left; padding: 9px 11px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg2); transition: border-color .2s, transform .2s; }
.buy .i { font-size: 24px; grid-row: 1 / 3; text-align: center; } .buy b { font-size: 14px; } .buy small { grid-column: 2; color: var(--dim); font-size: 11.5px; line-height: 1.3; } .buy .c { grid-row: 1; grid-column: 3; color: var(--sun); font-weight: 700; font-size: 13px; }
.buy.on { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok) inset; } .buy:disabled { opacity: .45; cursor: not-allowed; } .buy:not(:disabled):hover { transform: translateX(2px); }
.field { display: grid; gap: 12px; align-content: start; justify-items: center; }
.board { --n: 6; position: relative; width: min(100%, 560px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; padding: 8px; border-radius: 22px; background: #0e2016; border: 1px solid var(--line); box-shadow: 0 30px 80px -40px #000; user-select: none; -webkit-user-select: none; }
.t { position: relative; border-radius: 12px; background: linear-gradient(160deg, var(--tile2), var(--tile)); display: grid; place-items: center; font-size: clamp(22px, 5vw, 38px); transition: background .3s; cursor: pointer; }
.t:hover { background: linear-gradient(160deg, #2b5a3c, #234a32); }
.t.gate { background: linear-gradient(160deg, #3a3020, #2a2318); cursor: default; } .t.home { background: linear-gradient(160deg, #3a2a35, #2a1f28); cursor: default; }
.t.path::after { content: ""; position: absolute; inset: 40%; border-radius: 50%; background: rgba(255,211,106,.2); }
.t.bad { animation: no .35s; } @keyframes no { 30% { transform: translateX(-4px); } 60% { transform: translateX(4px); } }
.t .p { transition: transform .3s; } .t .p.hit { animation: hit .7s; } @keyframes hit { 30% { transform: scale(1.25); filter: brightness(1.6); } }
.t .p.low { opacity: .55; }
.u { position: absolute; z-index: 2; display: grid; place-items: center; font-size: clamp(20px, 4.4vw, 32px); pointer-events: none; transition: left var(--d, .7s) linear, top var(--d, .7s) linear; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.u .hp { position: absolute; bottom: -2px; left: 18%; right: 18%; height: 4px; border-radius: 2px; background: rgba(0,0,0,.5); overflow: hidden; } .u .hp i { display: block; height: 100%; background: var(--ok); }
.u.slow { filter: drop-shadow(0 0 6px #7fc8ff) drop-shadow(0 4px 6px rgba(0,0,0,.5)); } .u.pois .hp i { background: #c084fc; }
.fx { position: absolute; z-index: 3; pointer-events: none; font: 700 14px/1 ui-sans-serif, system-ui; color: #ffb3b3; animation: up .9s forwards; } @keyframes up { to { transform: translateY(-26px); opacity: 0; } }
.tip { color: var(--dim); font-size: 14px; text-align: center; min-height: 2.9em; max-width: 560px; }
.tip .warn { color: var(--bad); }
.side { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.filters { display: flex; gap: 6px; } .filters button { flex: 1; height: 32px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--dim); font-size: 12.5px; } .filters button.on { color: var(--ink); background: var(--bg2); }
.log { height: min(560px, 60vh); overflow-y: auto; padding: 10px 12px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--line); font: 12.5px/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--dim); }
.log p { margin: 0 0 4px; } .log .fight { color: #ffd0a0; } .log .spawn { color: var(--mute); } .log .round { color: var(--sun); font-weight: 700; } .log .bad { color: var(--bad); } .log .fix { color: #7fc8ff; }
.log.fights p:not(.fight):not(.round):not(.bad) { display: none; } .log.mute p.spawn { display: none; }
.over { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(0,0,0,.6); padding: 16px; } .over[hidden] { display: none; }
.card { width: min(420px, 100%); padding: 26px; border-radius: 22px; background: #12241a; border: 1px solid var(--line); text-align: center; } .card h2 { margin: 0 0 8px; } .card p { color: var(--dim); margin: 0 0 18px; }
@media (max-width: 1000px) { main { grid-template-columns: 1fr; } .shop { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); order: 2; } .field { order: 1; } .side { order: 3; } .log { height: 220px; } }
@media (max-width: 560px) { .hud { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; } .stats { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 6px; font-size: 14px; } .logo { font-size: 16px; } .ctl button { padding: 0 12px; } .buy small { display: none; } .shop { grid-template-columns: repeat(2, 1fr); } }