/* The meadow and the garden (M13, track AA): the Bug Book, the terrarium, Wren's catalogue. See public/js/meadow.ts. */

/* the Bug Book: a grid of little cards, shadows until caught */
.md-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; margin: 6px 0 10px; }
.md-card { position: relative; aspect-ratio: 1; padding: 0; border-radius: 8px; background: #f0f6e8; border: 2px solid #a8c890; display: flex; align-items: center; justify-content: center; }
.md-card .ico { width: 82%; height: 82%; image-rendering: pixelated; pointer-events: none; }
.md-card .n { position: absolute; right: 2px; bottom: 0; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 1px 1px 0 #2a3a2a, -1px -1px 0 #2a3a2a; }
.md-card.unknown { background: #ece8f0; border-color: #c0b8cc; }
.md-card.unknown .ico { opacity: .55; }
.md-card.rare { background: #fff6d8; border-color: #f2c94c; box-shadow: inset 0 0 0 1px #fff; }
.md-card.rare.unknown { background: #e8e4f4; border-color: #b8a8e0; }
.md-card.sel { border-color: #f2a83a; box-shadow: 0 0 0 2px #f2a83a; }
.md-pick { border-color: #a8c890; background: #f8fcf4; align-items: flex-start; }
.md-big canvas { width: 64px; height: 64px; image-rendering: pixelated; display: block; flex: none; }
.md-now { color: #2a7a4a; font-weight: 700; }
.md-book h4 { margin: 10px 0 4px; }
.md-wood { align-items: flex-start; }
.md-pieces { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0 2px; }
.md-piece .ico { width: 28px; height: 28px; image-rendering: pixelated; background: #f6efe0; border-radius: 4px; padding: 1px; }

/* the terrarium */
.md-jarp .hint { margin-top: 0; }
.md-jarcv { display: block; width: min(256px, 100%); aspect-ratio: 32 / 26; margin: 4px auto 8px; image-rendering: pixelated; }
.md-jarp .ico { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }

/* Wren's seed catalogue: the four seasons side by side (two by two on a phone) */
.md-cat { margin-top: 8px; }
.md-catgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.md-catcol { padding: 6px; border-radius: 8px; background: #fbf6ec; border: 2px solid #eadcc0; min-width: 0; }
.md-catcol.now { background: #f2fae8; border-color: #9ac870; }
.md-catcol b { display: block; font-size: 13px; margin-bottom: 3px; }
.md-catrow { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1.2; margin: 2px 0; min-width: 0; }
.md-catrow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-catrow .ico { width: 20px; height: 20px; image-rendering: pixelated; flex: none; }
@media (max-width: 520px) { .md-catgrid { grid-template-columns: 1fr 1fr; } }