/* Hearth & Home: the set book, the farmhouse's look, dyes in the wardrobe */

/* the set book: a chip for each set (how many pieces are in this room), then the set's pieces */
.hh-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 2px 0 8px; }
.hh-chips .hs-chip-n { font-size: 11px; white-space: nowrap; }
.hs-chip.hh-done { border-color: #e8b030; background: #fff2c0; opacity: 1; }
.hh-sethead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px; font-size: 16px; }
.hh-sethead.done b::after { content: ' ✨'; }
.hh-bonus { padding: 7px 10px; margin: 6px 0 8px; border-radius: 8px; background: #fffaf0; border: 2px dashed var(--paper2); font-size: 13.5px; }
.hh-bonus.on { border: 2px solid #e8b030; background: #fff6d8; }
.hh-piece { align-items: flex-start; }
.hh-piece .ico { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.hh-piece.placed { background: #f4fbe8; }
.hh-tick { color: #3f8a34; font-weight: 700; font-size: 12px; }
.hh-src { color: #8a6038; margin-top: 2px; }
.hh-roomsets { margin-top: 10px; }

/* the farmhouse from outside: a live picture of the look, then a row of swatches for each part */
.hh-house-top { display: flex; gap: 12px; align-items: flex-start; }
.hh-preview { width: 144px; height: 162px; image-rendering: pixelated; flex: none; background: linear-gradient(#bfe3f6, #e8f4d8 78%, #9ccc6a 78%); border-radius: 10px; border: 2px solid var(--wood2); }
.hh-house-top .hint { margin-top: 0; }
.hh-opt { margin: 8px 0 2px; }
.hh-opt .swatches { gap: 6px; }
.hh-opt .swatch { width: 40px; height: 30px; }
.hh-optname { margin-top: 3px; font-size: 12.5px; }
.hh-prop { padding: 8px 10px; margin: 8px 0; border-radius: 8px; background: #fff6d8; border: 2px solid #f2c94c; }
.hh-prop .btns { margin-top: 6px; flex-wrap: wrap; }

/* dyes in the wardrobe */
.wd-dye { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wd-dye .swatch { width: 30px; height: 24px; border-width: 2px; }

@media (max-width: 520px) {
  .hh-chips { grid-template-columns: repeat(3, 1fr); }
  .hh-house-top { flex-direction: column; align-items: center; }
  .hh-preview { width: 120px; height: 135px; }
  .hh-opt .swatch { width: 34px; height: 28px; }
}
/* the fish tank (issue #50): the water three times the size, in whole pixels */
.hh-tankp .hint { margin-top: 0; }
.hh-tank { display: block; width: min(312px, 100%); aspect-ratio: 104 / 62; margin: 4px auto 8px; image-rendering: pixelated; border: 3px solid #2a4a58; border-top: 6px solid #5a3c26; border-radius: 4px; background: #2a7496; }
.hh-tankp h4 { margin: 8px 0 4px; }
.hh-tankp .ico { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }