*{margin:0;padding:0;box-sizing:border-box}html,body,#app{width:100%;height:100%;overflow:hidden;background:#10131a;font-family:ui-monospace,Cascadia Code,Consolas,monospace}#app{position:relative}#garden-canvas{position:absolute;top:0;right:0;bottom:0;left:0}#garden-canvas canvas{display:block;width:100%;height:100%}#ui-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}#ui-overlay>*{pointer-events:auto}.header{position:absolute;top:12px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:14px;padding:8px 16px;background:#10131ab8;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:#e8f0e0;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:#4d7c3a;border:none;border-radius:6px;color:#f2fbe9;padding:4px 12px;font:inherit;cursor:pointer}.header button:disabled{opacity:.45;cursor:default}.header button:not(:disabled):hover{background:#5c923f}.header .help-button{padding:4px 10px;border-radius:999px;font-weight:700}.header .water-button{border:2px solid transparent}.header .water-button.active{border-color:#ffd34d}.hover-hint{position:absolute;padding:3px 8px;background:#10131ad9;border:1px solid rgba(255,255,255,.14);border-radius:5px;color:#e8f0e0;font-family:ui-monospace,Cascadia Code,Consolas,monospace;font-size:12px;pointer-events:none;white-space:nowrap;z-index:15}.toast{position:absolute;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:10px;padding:10px 12px;background:#10131af0;border:1px solid rgba(255,255,255,.16);border-radius:10px;color:#e8f0e0;font-size:13px;box-shadow:0 6px 20px #00000073;z-index:10}.popover-title{font-size:13px;text-align:center}.popover .planter{font-size:11px;opacity:.55}.popover input[type=range]{width:100%;accent-color:#4d7c3a}.popover button{background:#4d7c3a;border:none;border-radius:6px;color:#f2fbe9;padding:6px 16px;font:inherit;cursor:pointer}.popover button:hover{background:#5c923f}.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 rgba(255,255,255,.14);border-radius:8px;color:#e8f0e0;font-size:9px;cursor:pointer;padding:2px}.popover button.species-option:hover{background:#ffffff24}.species-option img{width:36px;height:78px;image-rendering:pixelated}.popover button.species-option.selected{border-color:#ffd34d;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%}.mode-pill{position:absolute;top:64px;left:50%;transform:translate(-50%);padding:6px 14px;background:#4d7c3aeb;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#f2fbe9;font-size:13px;cursor:pointer;z-index:12}.npc-dialog{position:absolute;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:#0e160ef0;border:2px solid rgba(230,220,180,.55);border-radius:12px;color:#f2ecd8;box-shadow:0 10px 32px #0000008c;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 rgba(255,255,255,.14);border-radius:10px;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:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:10px;width:min(420px,92vw);padding:20px 22px;background:#0e160ef0;border:2px solid rgba(230,220,180,.55);border-radius:12px;color:#f2ecd8;box-shadow:0 10px 32px #0000008c;z-index:30}.msg-form .msg-close{position:absolute;top:10px;right:12px;background:none;border:none;color:#f2ecd8;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 rgba(255,255,255,.18);border-radius:6px;color:#f2ecd8;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 rgba(255,255,255,.14);border-radius:8px;color:#f2ecd8;font-size:13px;cursor:pointer;padding:0}.avatar-option img{width:100%;height:100%;image-rendering:pixelated}.avatar-option.selected{border-color:#ffd34d}.msg-text{background:#ffffff14;border:1px solid rgba(255,255,255,.18);border-radius:6px;color:#f2ecd8;padding:8px 10px;font:inherit;resize:vertical;min-height:64px}.msg-count{align-self:flex-end;font-size:11px;opacity:.55}.msg-send{background:#4d7c3a;border:none;border-radius:6px;color:#f2fbe9;padding:8px 16px;font:inherit;cursor:pointer}.msg-send:hover:not(:disabled){background:#5c923f}.msg-send:disabled{opacity:.55;cursor:default}.welcome{position:absolute;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:#0e160ef0;border:2px solid rgba(230,220,180,.55);border-radius:12px;color:#f2ecd8;font-size:15px;line-height:1.5;text-align:center;box-shadow:0 10px 32px #0000008c;cursor:pointer;z-index:40}.welcome p{margin:0}.welcome button{margin-top:6px;background:#4d7c3a;border:none;border-radius:6px;color:#f2fbe9;padding:8px 22px;font:inherit;font-weight:600;cursor:pointer}.welcome button:hover{background:#5c923f}