/* Count the Chicks */
.cc-pen {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 14px 8px; min-height: 180px; align-content: center;
  background: #e8d3a0; border: 6px solid #9c6b3a; border-radius: 24px; box-shadow: inset 0 0 0 4px #c89a5c, var(--shadow);
}
.cc-chick {
  position: relative; width: 66px; height: 66px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); cursor: pointer;
  font-size: 44px; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; touch-action: manipulation;
}
.cc-chick:active { transform: scale(.94); }
.cc-chick.is-counted { background: #fff8dc; box-shadow: 0 0 0 3px var(--straw); }
.cc-badge { position: absolute; right: -4px; top: -4px; min-width: 30px; height: 30px; border-radius: 999px; background: var(--barn); color: #fff; font-size: 18px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.cc-tally { text-align: center; font-size: 48px; font-weight: 900; color: var(--barn); min-height: 60px; line-height: 1.2; }
.cc-num { font-size: clamp(56px, 16vw, 84px); font-weight: 900; color: var(--ink); }
.cc-pens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cc-bigpen {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 220px; padding: 12px 6px; cursor: pointer;
  background: #e8d3a0; border: 6px solid #9c6b3a; border-radius: 24px; box-shadow: var(--shadow); touch-action: manipulation;
}
.cc-bigpen__chicks { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; font-size: clamp(30px, 8.5vw, 44px); line-height: 1.1; }
.cc-bigpen.is-right { border-color: var(--green); box-shadow: 0 0 0 5px rgba(46, 139, 62, .35), var(--shadow); }
.cc-bigpen.is-tried { opacity: .55; }
.cc-pencount { font-size: 40px; font-weight: 900; color: var(--barn); background: #fff; border-radius: 999px; min-width: 64px; line-height: 64px; }