.qu-field { position: relative; height: 230px; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #e8f5d0, #bfe39a); border: 3px solid #86b95a; margin: 6px 0; }
.qu-bird { position: absolute; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; transition: opacity .25s, transform .25s; }
.qu-grass { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 46px; opacity: 0; pointer-events: none; transition: opacity .25s; background: linear-gradient(180deg, #cfe8a8, #9ccc6a); }
.qu-field.is-hidden .qu-grass { opacity: 1; }
.qu-field.is-hidden .qu-bird { opacity: 0; transform: translateY(8px); }
@media (min-width: 700px) { .qu-field { height: 300px; } .qu-bird { width: 40px; height: 40px; } }