.duckhunt-game { width: 100%; max-width: 920px; margin: 0 auto; user-select: none; }
.duckhunt-status { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; font-weight: 700; color: #24324a; }
.duckhunt-field { position: relative; height: clamp(360px, 62vh, 620px); overflow: hidden; border-radius: 22px; cursor: crosshair; background: linear-gradient(#75c9ff 0%, #dff5ff 68%, #8bd05a 69%, #4e9e3a 100%); box-shadow: inset 0 0 0 4px rgba(255,255,255,.65), 0 12px 30px rgba(35,72,110,.18); }
.duckhunt-sun { position: absolute; top: 34px; right: 8%; width: 76px; height: 76px; border-radius: 50%; background: #ffe676; box-shadow: 0 0 35px #fff2a8; }
.duckhunt-cloud { position: absolute; color: rgba(255,255,255,.88); font-size: 80px; line-height: 1; }
.duckhunt-cloud-one { top: 30px; left: 8%; }
.duckhunt-cloud-two { top: 105px; left: 52%; transform: scale(.7); opacity: .78; }
.duckhunt-grass { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 20%; pointer-events: none; background: linear-gradient(175deg, transparent 0 20%, #65bb46 21% 42%, #3f8e32 43% 100%); }
.duckhunt-duck { position: absolute; z-index: 5; left: 0; top: 0; width: 78px; height: 62px; padding: 0; border: 0; background: transparent; cursor: crosshair; touch-action: manipulation; animation: duckhunt-flight var(--flight-time) linear forwards; filter: drop-shadow(0 4px 3px rgba(0,0,0,.2)); }
.duckhunt-duck-body { display: block; font-size: 58px; line-height: 1; transform: scale(var(--duck-scale)); animation: duckhunt-flap .28s ease-in-out infinite alternate; }
.duckhunt-duck-dark { filter: grayscale(.7) brightness(.65) drop-shadow(0 4px 3px rgba(0,0,0,.25)); }
.duckhunt-duck:focus-visible { outline: 4px solid #ffef62; outline-offset: 3px; border-radius: 50%; }
.duckhunt-complete { position: absolute; z-index: 10; inset: 0; display: grid; place-items: center; color: #fff; font-size: clamp(32px, 6vw, 68px); font-weight: 900; text-shadow: 0 4px 12px rgba(0,0,0,.35); background: rgba(50,130,70,.2); }
@keyframes duckhunt-flight { from { transform: translate(var(--start-x), var(--start-y)); left: var(--start-x); top: var(--start-y); } to { transform: translate(0,-30px); left: var(--end-x); top: var(--end-y); } }
@keyframes duckhunt-flap { from { transform: scale(var(--duck-scale)) rotate(-8deg) translateY(0); } to { transform: scale(var(--duck-scale)) rotate(7deg) translateY(-7px); } }
@media (max-width: 600px) { .duckhunt-field { height: 440px; border-radius: 14px; } .duckhunt-status { font-size: 14px; } .duckhunt-duck { width: 68px; height: 56px; } .duckhunt-duck-body { font-size: 50px; } }
@media (prefers-reduced-motion: reduce) { .duckhunt-duck-body { animation: none; } }