/* How Many Do You See? */
.mf-lvsA { --lv: 4; }
.mf-lvA__num { font-size: 20px; white-space: nowrap; }
.hm-hero { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 3vw, 16px); }
.hm-hero__img { width: clamp(84px, 25vw, 124px); height: clamp(84px, 25vw, 124px); border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: var(--shadow); background: #fff; }
.hm-hero__img--mid { width: clamp(96px, 29vw, 144px); height: clamp(96px, 29vw, 144px); }
.hm-hero__cow { font-size: clamp(64px, 20vw, 100px); line-height: 1; }

.hm-scene { border-radius: 24px; padding: 10px; box-shadow: var(--shadow); position: relative; }
.hm-scene--coop { background: linear-gradient(180deg, #c9733f 0 18px, #8a4b25 18px 24px, #f3d98b 24px); border: 6px solid #9c6b3a; padding-top: 30px; }
.hm-scene--aviary { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .25) 0 2px, transparent 2px 14px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .25) 0 2px, transparent 2px 14px), #b9de94; border: 6px solid #7d6a55; }
.hm-scene--paddock { background: linear-gradient(180deg, transparent 0 8px, #9c6b3a 8px 14px, transparent 14px 26px, #9c6b3a 26px 32px, transparent 32px), linear-gradient(180deg, #dff3ff 0 34px, #8fcf6a 34px); border: 6px solid #5f8f3e; padding-top: 42px; }
.hm-field { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 84px; gap: 4px; max-width: 520px; margin: 0 auto; }
.hm-cell { display: flex; align-items: center; justify-content: center; }
.hm-deco { font-size: 22px; opacity: .55; }
.hm-animal {
  position: relative; width: 72px; height: 72px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; touch-action: manipulation; transform: translate(var(--dx, 0), var(--dy, 0));
  transition: background .15s;
}
.hm-animal:active { transform: translate(var(--dx, 0), var(--dy, 0)) scale(.93); }
.hm-animal.is-counted { background: #fff8dc; box-shadow: 0 0 0 4px var(--straw); }
.hm-animal.is-small { width: 64px; height: 64px; }
.hm-animal.is-static { cursor: inherit; background: rgba(255, 255, 255, .6); }
.hm-emoji { font-size: 46px; line-height: 1; }
.hm-animal.is-small .hm-emoji { font-size: 40px; }
.hm-quail { width: 56px; height: 56px; }
.hm-animal.is-small .hm-quail { width: 50px; height: 50px; }
.hm-badge { position: absolute; right: -6px; top: -6px; min-width: 32px; height: 32px; border-radius: 999px; background: var(--barn); color: #fff; font-size: 19px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; animation: hm-pop .3s ease; }
@keyframes hm-pop { from { transform: scale(.2); } to { transform: none; } }
.hm-tally { text-align: center; font-size: 44px; font-weight: 900; color: var(--barn); min-height: 56px; line-height: 1.2; }

/* quick look */
.hm-lookwrap { position: relative; max-width: 300px; margin: 0 auto; }
.hm-dice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: rgba(255, 255, 255, .5); border-radius: 22px; padding: 10px; }
.hm-dcell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.hm-dtok { display: flex; align-items: center; justify-content: center; }
.hm-dtok .hm-emoji { font-size: 52px; }
.hm-dtok .hm-quail { width: 66px; height: 66px; }
.hm-cover {
  position: absolute; inset: 0; border: 0; border-radius: 22px; cursor: pointer; font: inherit; font-size: 30px; font-weight: 900; color: #5b3b12;
  background: repeating-linear-gradient(90deg, #f2cf63 0 10px, #e5bb45 10px 20px); box-shadow: inset 0 0 0 5px #c9962c; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.hm-cover span { font-size: 44px; }

/* groups */
.hm-pens { display: grid; gap: 10px; justify-content: center; }
.hm-pens--3 { grid-template-columns: repeat(2, auto); }
.hm-pens--5 { grid-template-columns: 1fr; }
.hm-pen { position: relative; display: grid; gap: 4px; padding: 8px; border-radius: 18px; background: rgba(255, 255, 255, .35); border: 4px dashed #8a6a45; justify-items: center; }
.hm-pen--3 { grid-template-columns: repeat(2, 64px); }
.hm-pen--3 > .hm-animal:nth-child(3) { grid-column: 1 / span 2; }
.hm-pen--5 { grid-template-columns: repeat(5, 64px); }
@media (max-width: 380px) { .hm-pen--5 { grid-template-columns: repeat(5, 58px); } .hm-pen--5 .hm-animal.is-small { width: 58px; height: 58px; } }
.hm-pen--btn { cursor: pointer; font: inherit; touch-action: manipulation; }
.hm-pen--btn:active { transform: scale(.97); }
.hm-pen.is-full { border-style: solid; border-color: var(--green); background: rgba(234, 247, 230, .85); }
.hm-penbadge { position: absolute; right: -10px; top: -12px; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 999px; background: var(--green); color: #fff; font-size: 22px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; animation: hm-pop .3s ease; }