/* My Garden -- the decoration meta-layer. Reuses the house tokens (--bg/--panel/--ink/--muted/--line/
   --cyan/--violet/--pink/--mint from game.css's body selector) and the same card/eyebrow/shop-row look
   the shop modal already uses (play.css's .wm rules) so this never looks like a bolted-on feature. */
.garden-screen{max-width:760px}
.gd-top{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;margin-bottom:4px}
.gd-top h1{font-size:1.8rem;letter-spacing:-.03em;margin:0}
.gd-coins{display:flex;align-items:center;height:38px;padding:0 14px;border:1px solid rgba(255,212,71,.35);border-radius:14px;background:rgba(255,212,71,.08);color:#ffd447;font-weight:900;font-size:.9rem;white-space:nowrap}
.gd-sub{color:var(--muted);font-size:.85rem;margin:10px 0 18px;line-height:1.5}

.gd-grid{display:grid;gap:8px;padding:14px;border:1px solid var(--line);border-radius:26px;background:radial-gradient(circle at 20% 10%,rgba(0,230,184,.1),transparent 40%),linear-gradient(160deg,rgba(16,36,30,.75),rgba(9,16,32,.92));box-shadow:inset 0 1px rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.35)}
.gd-plot{aspect-ratio:1;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03);display:grid;place-items:center;padding:4px;transition:.2s transform,.2s border-color,.2s background}
.gd-plot.filled{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.gd-plot.filled:active{transform:scale(.93)}
.gd-plot.targetable{border-color:var(--mint);background:rgba(0,230,184,.1);animation:gdPulse 1s ease-in-out infinite}
.gd-plot.targetable:active{transform:scale(.93)}
@keyframes gdPulse{50%{box-shadow:0 0 0 3px rgba(0,230,184,.35)}}
.gd-piece{width:100%;height:100%;display:block}
.gd-piece svg{width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}

/* Collection/shop modal (lives inside the real .wm > .card already styled in play.css --
   #modal/#modalCard are shared with the rest of the game, so only the content classes below are new). */
.gd-collection{max-height:52vh;overflow-y:auto;margin:4px -6px 18px;padding:0 6px;text-align:left}
.gd-world-group{margin-bottom:16px}
.gd-world-group h3{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin:0 0 8px}
.gd-item-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gd-item{display:grid;justify-items:center;gap:4px;padding:10px 4px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;text-align:center}
.gd-item-art{width:42px;height:42px}
.gd-item-art svg{width:100%;height:100%}
.gd-item b{font-size:.62rem;font-weight:800;line-height:1.15}
.gd-item small{font-size:.58rem;color:var(--muted)}
.gd-item.buy small{color:#ffd447;font-weight:900}
.gd-item.owned{border-color:rgba(0,230,184,.4);background:rgba(0,230,184,.08)}
.gd-item.owned small{color:var(--mint);font-weight:900}
.gd-item.placed{opacity:.6}
.gd-item.locked,.gd-item.cant{opacity:.45}
.gd-item:disabled{cursor:default}

@media(max-width:560px){
  .gd-grid{grid-template-columns:repeat(5,1fr)!important;padding:10px;gap:6px;border-radius:20px}
  .gd-item-row{grid-template-columns:repeat(4,1fr)}
}