*{margin:0;padding:0;box-sizing:border-box}:root{--surface: rgba(16, 19, 26, .88);--surface-strong: rgba(14, 22, 14, .94);--border: rgba(255, 255, 255, .14);--border-warm: rgba(230, 220, 180, .55);--accent: #4d7c3a;--accent-hover: #5c923f;--accent-gold: #ffd34d;--water: #5db1e8;--text: #e8f0e0;--text-warm: #f2ecd8;--radius-s: 6px;--radius-m: 10px;--radius-pill: 999px;--shadow: 0 6px 20px rgba(0, 0, 0, .45)}html,body{width:100%;height:100%;overflow:hidden;background:#10131a;font-family:ui-monospace,Cascadia Code,Consolas,monospace}#app{position:relative;width:100%;height:100%;overflow:auto}#garden-canvas,#ui-overlay{min-width:1100px;min-height:760px}#garden-canvas{position:relative;width:100%;height:100%}#garden-canvas canvas{display:block;width:100%;height:100%}#ui-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}#ui-overlay>*{pointer-events:auto}.header{position:fixed;top:12px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);color:var(--text);font-size:14px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 4px 16px #00000059;white-space:nowrap}.header .charges{font-weight:600}.header a{color:#8fd0ff;text-decoration:none;border-bottom:1px dotted rgba(143,208,255,.6)}.header a:hover{color:#bfe4ff}.header button{background:var(--accent);border:none;border-radius:var(--radius-s);color:#f2fbe9;min-height:40px;padding:8px 14px;font:inherit;cursor:pointer}.header button:disabled{opacity:.45;cursor:default}.header button:not(:disabled):hover{background:var(--accent-hover)}.header .help-button{padding:4px 10px;border-radius:var(--radius-pill);min-width:40px;font-weight:700}.header .water-button{border:2px solid transparent}.header .water-button.active{border-color:var(--accent-gold);box-shadow:0 0 0 2px #ffd34d40}@media (max-width: 560px){.header{gap:8px;padding:6px 10px;font-size:13px}.header .btn-label{display:none}.header button{padding:8px 10px}}.hover-hint{position:absolute;padding:3px 8px;background:var(--surface);border:1px solid var(--border);border-radius:5px;color:var(--text);font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:12px;pointer-events:none;white-space:nowrap;z-index:15}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%) translateY(8px);padding:8px 16px;background:#141820eb;border:1px solid rgba(255,120,120,.5);border-radius:8px;color:#ffd9d9;font-size:13px;opacity:0;transition:opacity .2s ease,transform .2s ease;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.popover{position:absolute;transform:translate(-50%,-110%);display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 14px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);color:var(--text);font-size:13px;box-shadow:var(--shadow);z-index:10}.popover-title{font-size:13px;text-align:center;padding-right:18px}.popover .planter{font-size:11px;opacity:.55}.popover input[type=range]{width:100%;accent-color:var(--accent)}.popover button{background:var(--accent);border:none;border-radius:var(--radius-s);color:#f2fbe9;padding:6px 16px;font:inherit;cursor:pointer}.popover button:hover{background:var(--accent-hover)}.species-row{display:flex;gap:6px}.popover button.species-option{width:44px;height:80px;display:flex;align-items:flex-end;justify-content:center;background:#ffffff0f;border:2px solid var(--border);border-radius:8px;color:var(--text);font-size:9px;cursor:pointer;padding:2px}.popover button.species-option:hover{background:var(--border)}.species-option img{width:36px;height:78px;image-rendering:pixelated}.popover button.species-option.selected{border-color:var(--accent-gold);background:#ffd34d1a}.species-legend{font-size:11px;opacity:.6;text-align:center}.popover .sow-toggle{display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer}.popover-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;margin-top:2px}.mode-pill{position:fixed;top:64px;left:50%;transform:translate(-50%);padding:6px 14px;background:#4d7c3aeb;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-pill);color:#f2fbe9;font-size:13px;cursor:pointer;z-index:12}.npc-dialog{position:fixed;bottom:28px;left:50%;transform:translate(-50%);display:flex;align-items:stretch;gap:18px;width:min(720px,92vw);min-height:170px;padding:16px 20px;background:var(--surface-strong);border:2px solid var(--border-warm);border-radius:var(--radius-m);color:var(--text-warm);box-shadow:var(--shadow);cursor:pointer;z-index:20}.npc-portrait{flex:0 0 132px;display:flex;align-items:flex-end;justify-content:center;background:#ffffff0f;border:1px solid var(--border);border-radius:var(--radius-m);padding:8px}.npc-portrait img{width:108px;image-rendering:pixelated}.npc-body{flex:1;display:flex;flex-direction:column;gap:8px;padding-top:4px}.npc-name{color:#ffe9a8;font-size:16px;font-weight:700}.npc-line{font-size:15px;line-height:1.5}.npc-hint{margin-top:auto;align-self:flex-end;font-size:11px;opacity:.55}.msg-form{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:10px;width:min(420px,92vw);padding:20px 22px;background:var(--surface-strong);border:2px solid var(--border-warm);border-radius:var(--radius-m);color:var(--text-warm);box-shadow:var(--shadow);z-index:30}.msg-form .msg-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--text-warm);font-size:18px;line-height:1;cursor:pointer;opacity:.65}.msg-form .msg-close:hover{opacity:1}.msg-intro{font-size:13px;opacity:.8;padding-right:20px}.msg-name{background:#ffffff14;border:1px solid var(--border);border-radius:var(--radius-s);color:var(--text-warm);padding:6px 10px;font:inherit}.avatar-row{display:flex;flex-wrap:wrap;gap:8px}.avatar-option{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:#ffffff0f;border:2px solid var(--border);border-radius:8px;color:var(--text-warm);font-size:13px;cursor:pointer;padding:0}.avatar-option img{width:100%;height:100%;image-rendering:pixelated}.avatar-option.selected{border-color:var(--accent-gold)}.msg-text{background:#ffffff14;border:1px solid var(--border);border-radius:var(--radius-s);color:var(--text-warm);padding:8px 10px;font:inherit;resize:vertical;min-height:64px}.msg-count{align-self:flex-end;font-size:11px;opacity:.55}.msg-send{background:var(--accent);border:none;border-radius:var(--radius-s);color:#f2fbe9;padding:8px 16px;font:inherit;cursor:pointer}.msg-send:hover:not(:disabled){background:var(--accent-hover)}.msg-send:disabled{opacity:.55;cursor:default}.welcome{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px;width:min(420px,92vw);padding:28px 26px;background:var(--surface-strong);border:2px solid var(--border-warm);border-radius:var(--radius-m);color:var(--text-warm);font-size:15px;line-height:1.5;text-align:center;box-shadow:var(--shadow);cursor:pointer;z-index:40}.welcome p{margin:0}.welcome button{margin-top:6px;background:var(--accent);border:none;border-radius:var(--radius-s);color:#f2fbe9;padding:8px 22px;font:inherit;font-weight:600;cursor:pointer}.welcome button:hover{background:var(--accent-hover)}.welcome-title{font-size:17px;font-weight:700;color:#ffe9a8}.welcome-art img{height:84px;image-rendering:pixelated}.welcome-art span{font-size:44px;line-height:1}.welcome-line{margin:0}.welcome-dots{display:flex;gap:6px}.welcome-dots .dot{width:8px;height:8px;border-radius:50%;background:var(--border)}.welcome-dots .dot.active{background:var(--accent-gold)}.welcome-nav{display:flex;gap:10px;margin-top:4px}.welcome-nav .welcome-back{background:none;border:1px solid var(--border)}.charges{display:inline-flex;align-items:center;gap:4px}.charges .pip{width:10px;height:10px;border-radius:50%;background:#ffffff26;border:1px solid rgba(255,255,255,.25)}.charges .pip.filled{background:var(--water);border-color:var(--water)}.popover button.popover-close{position:absolute;top:4px;right:6px;background:none;border:none;color:var(--text);font-size:16px;line-height:1;padding:2px 6px;opacity:.65;cursor:pointer}.popover button.popover-close:hover{opacity:1;background:none}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--spotlight, rgba(6, 8, 12, .4));z-index:18}.notes-button{position:relative}.notes-badge{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--accent-gold)}.notes-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:18px;width:min(440px,92vw);max-height:80vh;overflow-y:auto;padding:20px 22px;background:var(--surface-strong);border:2px solid var(--border-warm);border-radius:var(--radius-m);color:var(--text-warm);box-shadow:var(--shadow);z-index:30}.notes-heading{font-size:16px;font-weight:700;color:#ffe9a8}.note-entry{display:flex;flex-direction:column;gap:6px;padding-bottom:16px;border-bottom:1px solid var(--border)}.note-entry:last-of-type{padding-bottom:0;border-bottom:none}.note-date{font-size:11px;opacity:.55;letter-spacing:.04em}.note-title{font-weight:700;font-size:14px;color:#ffe9a8}.note-line{margin:0;font-size:13px;line-height:1.5}.notes-close{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--text-warm);font-size:18px;line-height:1;cursor:pointer;opacity:.65}.notes-close:hover{opacity:1}