:root{--bg: #0d1f12;--sky: #1b3a4b;--jungle: #14532d;--ground: #6b4423;--under: #2a1a0e;--gold: #ffd34e;--text: #e8f5e9;--accent: #4ade80}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--bg);color:var(--text);font-family:Trebuchet MS,system-ui,sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none}#app{display:flex;flex-direction:column;align-items:center;height:100%;padding:8px;gap:8px}.hud{display:flex;gap:14px;align-items:center;width:100%;max-width:920px;flex-wrap:wrap;font-size:15px;font-weight:700}.hud .item{display:flex;gap:5px;align-items:center}.hud .val{color:var(--gold)}.hud .spacer{flex:1}.hud button{background:#1f3d2a;color:var(--text);border:1px solid var(--accent);border-radius:6px;padding:4px 10px;cursor:pointer;font-weight:700}.hud button:hover{background:#2a5238}canvas{background:var(--sky);border:2px solid #0a160d;border-radius:8px;max-width:100%;image-rendering:auto;touch-action:none}.hint{font-size:13px;opacity:.8;text-align:center}.overlay{position:fixed;inset:0;background:#050c08d9;display:flex;align-items:center;justify-content:center;z-index:10}.panel{background:#12281a;border:2px solid var(--accent);border-radius:12px;padding:24px 28px;max-width:460px;text-align:center}.panel h1{color:var(--gold);margin-bottom:10px}.panel p{margin:8px 0;line-height:1.5}.panel button{margin-top:14px;background:var(--accent);color:#06200f;border:none;border-radius:8px;padding:10px 22px;font-size:16px;font-weight:700;cursor:pointer}.panel button:hover{filter:brightness(1.1)}.touch{display:none;gap:10px;width:100%;max-width:920px;justify-content:space-between}.touch button{flex:1;padding:16px;font-size:20px;background:#1f3d2a;color:var(--text);border:1px solid var(--accent);border-radius:8px}@media(pointer:coarse){.touch{display:flex}}