#personal-garden { margin: 16px 0; }
.layout-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin:12px 0; }
.layout-toolbar button, .layout-toolbar input { min-height:44px; }
.layout-toolbar label { display:grid; gap:6px; }
.layout-toolbar input { box-sizing:border-box; width: min(100%,160px); font:inherit; }
#garden-layout-editor { box-sizing:border-box; width: min(780px,calc(100% - 24px)); max-height:calc(100dvh - 32px); overflow:auto; padding:20px; color:#e4f1e9; background:#101e1b; border:1px solid #6b8b78; border-radius:16px; }
#garden-layout-editor::backdrop { background:#000b; }
#layout-deed { width:90px; }
#layout-load { flex:1; }
#garden-layout-editor p { line-height:1.55; }
#garden-layout-editor input { background:#07130f; color:#e4f1e9; border:1px solid #789286; padding:8px; border-radius:8px; }
#garden-layout-editor :focus-visible, #personal-garden :focus-visible { outline:3px solid #f6d78b; outline-offset:3px; }
.layout-canvas { position:relative; width:100%; max-width:720px; margin:auto; isolation:isolate; }
.layout-canvas > img { display:block; width:100%; height:auto; }
.layout-canvas[aria-busy="true"] { opacity:.55; }
.layout-spot { position:absolute; width:44px; height:44px; min-height:44px; padding:0; transform:translate(-50%,-50%); border:2px solid #e0ecd6; border-radius:50%; background:#10231ddd; color:white; overflow:visible; }
.layout-spot[aria-pressed="true"] { border-color:#ffdc84; box-shadow:0 0 0 3px #152b24; }
.layout-spot > .crop-portrait { position:absolute; width:52px; height:65px; max-width:none; left:50%; bottom:14px; transform:translateX(-50%); pointer-events:none; }
.layout-spot > span { position:relative; display:block; padding-top:12px; font-size:14px; font-weight:bold; pointer-events:none; }
html[data-garden-land="chosen"] #world-camera, html[data-garden-land="chosen"] #world-presentation, html[data-garden-land="chosen"] #cloudfall-caption { display:none!important; }
@media(max-width:400px){ #garden-layout-editor { padding:12px; } .layout-toolbar { gap:10px; } }
/* Planted crops remain touch targets; placement guides belong to empty spaces and the editor. */
#chosen-land-spots .layout-spot:not([data-art^="empty/"]) { background:transparent; border-color:transparent; box-shadow:none; }
#chosen-land-spots .layout-spot:not([data-art^="empty/"]) > span { display:none; }

/* Placement targets stay usable without opaque circles covering the crop artwork. */
.layout-spot, .layout-spot:hover, .layout-spot[aria-pressed="true"] { background:transparent; border-color:transparent; box-shadow:none; }
.layout-spot > span { position:absolute; top:100%; left:50%; transform:translateX(-50%); padding:0 5px; min-width:16px; line-height:22px; border-radius:4px; background:#10231d; color:#e4f1e9; }
.layout-spot[aria-pressed="true"] > span { background:#ffdc84; color:#17241c; }
#layout-confirm-status { border-left:3px solid #87b99a; padding:8px 12px; }
#layout-confirm-status.error { border-color:#f4b2a5; color:#ffd8ce; }