/* Little Haven: 8-bit garden look using CSS only. Sprites are inline SVG drawn by script. */
.sun-count { font-size: 1.4rem; font-weight: 700; }
.hint { color: var(--muted); font-size: .95rem; }
.plain-list { margin: 0; padding-left: 1.2rem; }
.notice { padding: .5rem .75rem; border: 3px dashed var(--border); background: var(--note); }

.garden-grid { display: grid; gap: 0; width: min(100%, 34rem); margin: 0 auto; border: 4px solid var(--border); background: var(--border); }
.garden-row { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); }
.garden-cell { min-width: 0; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%; aspect-ratio: 1; min-height: 44px; padding: 2px; border: 1px solid var(--border); border-radius: 0; box-shadow: none; background: var(--tile-a); font-size: .65rem; line-height: 1; }
.garden-row:nth-child(odd) .garden-cell:nth-child(even) .tile,
.garden-row:nth-child(even) .garden-cell:nth-child(odd) .tile { background: var(--tile-b); }
.tile .px { flex: 1; min-height: 0; }
.tile-label { display: block; min-height: .7rem; color: var(--ink); font-weight: 700; }
.tile.is-selected { outline: 4px solid var(--ink); outline-offset: -4px; }
.tile.is-moving { border-style: dashed; border-width: 3px; }
.tile:focus-visible { outline: 4px solid var(--focus); outline-offset: -4px; z-index: 1; }
.tile:active { transform: none; }

.goto { margin-top: .75rem; }
#tile-actions button, #expansions button { text-align: left; }
#expansions li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.confirm { margin-top: .75rem; padding: .6rem .8rem; border: 3px solid var(--border); background: var(--note); }
.game-footer { margin-top: 1.5rem; }
details > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; }