/* The barnyard II (M13, track AB): the hutch's, the stable's and the dovecote's panels (and the
   coop's geese and the barn's alpacas in theirs), braiding ribbons, Hazel's horses, the dove's
   letter and its sticker home, the treehouse's club sign. */

.mg-panel h4 { margin: 10px 0 4px; }
.mg-panel .list { gap: 6px; }
.mg-row { gap: 8px; align-items: center; flex-wrap: wrap; }
.mg-row .grow { flex: 1; min-width: 150px; }
.mg-row .btn.tiny { min-width: 34px; }
.mg-row .hearts { color: #d23a5a; letter-spacing: 1px; font-size: 13px; }

/* braiding ribbons: a round swatch in each colour, a ring round the one it's wearing */
.mg-ribbons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
.mg-ribbons b { width: 100%; font-size: 13px; margin-top: 4px; }
.mg-ribbon { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(0, 0, 0, 0.2); background: var(--c); cursor: pointer; }
.mg-ribbon.on { border-color: #3a2a1a; box-shadow: 0 0 0 2px #fff6d8; }
.mg-ribbon:disabled { opacity: 0.45; cursor: default; }

/* Hazel's horses: a little picture of each coat */
.mg-coats { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.mg-coat { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 78px; padding: 4px 2px; font-size: 11px; border-radius: 8px; border: 2px solid transparent; background: #f8f0e4; cursor: pointer; }
.mg-coat.on { border-color: #e2445c; background: #fff0f0; }
.mg-horse { width: 60px; height: 52px; image-rendering: pixelated; }

/* the dovecote's letter, and the one a dove brings */
.mg-send { display: flex; flex-direction: column; gap: 6px; }
.mg-send textarea { width: 100%; font-size: 15px; resize: vertical; }
.mg-send select, .mg-send label { font-size: 14px; }
.mg-dove .letter { margin-bottom: 6px; }
.mg-dove input { width: 100%; margin: 6px 0; font-size: 15px; }

/* the club sign */
.mg-initials { font-size: 22px; letter-spacing: 6px; font-weight: 700; color: #5a3a24; }

@media (max-width: 520px) {
  .mg-coat { width: 70px; }
  .mg-horse { width: 52px; height: 45px; }
  .mg-row .grow { min-width: 120px; }
}

/* each animal's own picture in its row */
.mg-pic { width: 56px; height: 49px; flex: none; image-rendering: pixelated; border-radius: 10px; background: radial-gradient(circle at 50% 75%, #e8f4d0 35%, #f6f0dc 75%); }
@media (max-width: 520px) { .mg-pic { width: 44px; height: 38px; } }