/* One More, One Less Pens */
.op-card { display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow); min-height: 90px; }
.op-sign { font-size: 34px; font-weight: 900; flex: none; }
.op-numeral { font-size: 72px; font-weight: 900; color: var(--barn); line-height: 1; }
.op-lambs { display: grid; grid-template-columns: repeat(5, auto); gap: 2px 6px; justify-content: center; font-size: 34px; line-height: 1.1; }
.op-lambs--ref { font-size: 28px; }
.op-pen {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 150px; padding: 14px 8px 30px;
  background: #e8d3a0; border: 6px solid var(--wood); border-radius: 24px; box-shadow: inset 0 0 0 4px #c89a5c, var(--shadow);
}
.op-empty { font-size: 48px; opacity: .6; }
.op-count { position: absolute; right: 10px; bottom: 6px; font-size: 22px; font-weight: 900; background: #fff; border-radius: 999px; min-width: 40px; text-align: center; padding: 0 8px; }
.op-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.op-btn { min-height: 84px; border-radius: 24px; border: 4px solid #fff; background: var(--straw); font-size: 40px; cursor: pointer; box-shadow: var(--shadow); touch-action: manipulation; }
.op-btn--ok { background: #bfe3b6; }
.op-btn:active { transform: translateY(3px); }