/* Trough Top-Up */
.tt-scene { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 10px; background: #e8f6df; border-radius: 22px; padding: 12px; box-shadow: var(--shadow); }
.tt-animal { font-size: 64px; line-height: 1; }
.tt-trough { position: relative; height: 170px; border: 6px solid #6b7784; border-top: 0; border-radius: 0 0 26px 26px; background: rgba(255, 255, 255, .7); overflow: hidden; }
.tt-water { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(180deg, #8fd3ff, #2f8fd8); transition: height .25s ease; }
.tt-trough.is-over .tt-water { background: linear-gradient(180deg, #ffb74d, #2f8fd8); }
.tt-line { position: absolute; left: 0; right: 0; border-top: 4px dashed var(--barn); }
.tt-line span { position: absolute; right: 4px; top: -18px; font-size: 22px; color: var(--barn); font-weight: 900; }
.tt-count { font-size: 34px; font-weight: 900; background: #fff; border-radius: 16px; min-width: 56px; text-align: center; padding: 4px 8px; }
.tt-controls { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 12px; }
.tt-btn { min-height: 88px; border-radius: 24px; border: 4px solid #fff; background: #bfe6ff; font-size: 44px; cursor: pointer; box-shadow: var(--shadow); touch-action: manipulation; }
.tt-btn--tip { background: #f3ece0; font-size: 34px; }
.tt-btn--ok { background: #bfe3b6; }
.tt-btn:active { transform: translateY(3px); }