.duck-game { max-width: 1180px; margin-inline: auto; }
.duck-cabinet { overflow: hidden; border: 2px solid #a58b53; border-radius: 20px; background: #142a25; box-shadow: 0 24px 90px #0008, inset 0 0 0 6px #081b19; }
.duck-marquee { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 32px; border-bottom: 4px solid #6e7142; background: radial-gradient(ellipse at 50% 120%, #a2b35e66, transparent 65%), #233a2f; }
.duck-marquee h2 { margin: 0; color: #f5e6b0; text-shadow: 3px 4px #091f19; font: 900 clamp(22px, 4vw, 46px)/.95 'Orbitron', sans-serif; letter-spacing: -.06em; transform: rotate(-3deg); }
.duck-marquee h2 strong { color: #e4a442; }
.duck-title { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.duck-beta { padding: 3px 10px; border: 1px solid #e4a44288; border-radius: 999px; color: #f2c879; background: #0b1c1acc; font: 700 11px 'Orbitron', sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.duck-pop { position: absolute; z-index: 7; transform: translate(-50%, -50%); color: #ffe7a6; font: 900 clamp(18px, 2.4vw, 30px) 'Orbitron', sans-serif; text-shadow: 0 0 10px #000, 2px 3px 0 #3a2508; pointer-events: none; animation: duck-pop 1.3s ease-out forwards; }
@keyframes duck-pop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } 30% { transform: translate(-50%, -55%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -140%) scale(1); } }
.duck-cell-multi.is-up { animation: duck-multi .5s ease-out; }
@keyframes duck-multi { 0% { transform: scale(1); } 40% { transform: scale(1.8); color: #fff; background: #c9862c; } 100% { transform: scale(1); } }
.duck-scope { position: absolute; inset: 0; z-index: 8; overflow: hidden; pointer-events: none; --scope-x: 50%; --scope-y: 50%; --scope-r: 110px; animation: duck-scope-in .25s ease-out; }
.duck-scope-ring, .duck-scope-cross { position: absolute; left: var(--scope-x); top: var(--scope-y); width: calc(var(--scope-r) * 2); height: calc(var(--scope-r) * 2); transform: translate(-50%, -50%); border-radius: 50%; transition: left .6s ease-in-out, top .6s ease-in-out; }
.duck-scope-ring { border: 4px solid #0a0f0e; box-shadow: 0 0 0 100vmax #06140c88, inset 0 0 0 2px #e4a44299, inset 0 0 35px #0006; }
.duck-scope-cross { background: linear-gradient(#e7b04f, #e7b04f) center / 2px 100% no-repeat, linear-gradient(#e7b04f, #e7b04f) center / 100% 2px no-repeat; -webkit-mask: radial-gradient(circle, transparent 8px, #000 9px, #000 calc(var(--scope-r) - 20px), transparent calc(var(--scope-r) - 19px)); mask: radial-gradient(circle, transparent 8px, #000 9px, #000 calc(var(--scope-r) - 20px), transparent calc(var(--scope-r) - 19px)); }
.duck-scope.is-fired::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--scope-x) var(--scope-y), #fff8d6 0, #f3b04f88 60px, transparent 220px); animation: duck-flash .35s ease-out forwards; }
.duck-scope.is-fired .duck-scope-ring { animation: duck-recoil .3s ease-out; }
@keyframes duck-recoil { 30% { transform: translate(-50%, -54%) scale(1.06); } }
@keyframes duck-scope-in { from { opacity: 0; } }
@property --scope-x { syntax: '<length-percentage>'; inherits: true; initial-value: 50%; }
@property --scope-y { syntax: '<length-percentage>'; inherits: true; initial-value: 50%; }
.duck-banner { position: absolute; inset: 0; z-index: 9; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; background: radial-gradient(circle at 50% 50%, #0b1c1a99 0, #050c0bf2 70%); animation: duck-scope-in .3s ease-out; }
.duck-banner[hidden] { display: none; }
.duck-banner-scope { position: absolute; left: 50%; top: 50%; width: min(70vmin, 520px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 5px solid #0a0f0e; box-shadow: inset 0 0 0 2px #e4a44277, 0 0 0 100vmax #050c0b88; background: linear-gradient(#e7b04f55, #e7b04f55) center / 2px 100% no-repeat, linear-gradient(#e7b04f55, #e7b04f55) center / 100% 2px no-repeat; animation: duck-banner-scope 1.2s ease-out; pointer-events: none; }
@keyframes duck-banner-scope { from { transform: translate(-50%, -50%) scale(1.6) rotate(-20deg); opacity: 0; } }
.duck-banner-kicker { position: relative; color: #c4cead; font: 700 14px 'Orbitron', sans-serif; letter-spacing: .3em; }
.duck-banner-title { position: relative; color: #f5e6b0; font: 900 clamp(34px, 7vw, 86px)/1 'Orbitron', sans-serif; text-shadow: 4px 5px #091f19, 0 0 30px #e4a44266; transform: rotate(-3deg); animation: duck-banner-title .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes duck-banner-title { from { transform: rotate(-3deg) scale(.3); opacity: 0; } }
.duck-banner-sub { position: relative; color: #efbb64; font: 800 clamp(20px, 3.4vw, 40px) 'Orbitron', sans-serif; text-shadow: 2px 3px #091f19; }
.duck-stamp, .duck-tag { color: #c4cead; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.duck-tag { border: 1px solid #a1b27266; padding: 8px 12px; border-radius: 5px; transform: rotate(5deg); }
.duck-stage { position: relative; isolation: isolate; padding: clamp(14px, 3vw, 40px); border-radius: 26px; overflow: hidden; background: linear-gradient(#05101000, #05101066), url('/img/duck/sumpf.svg') center 58% / cover no-repeat, #142a25; box-shadow: 0 24px 90px #0008; }
.duck-stage > .duck-cabinet { position: relative; z-index: 1; background: transparent; box-shadow: 0 18px 60px #000b, inset 0 0 0 6px #081b1999; }
.duck-sky { position: absolute; inset: 0 0 50% 0; z-index: 0; pointer-events: none; }
.duck-playfield { display: grid; grid-template-columns: 140px minmax(0, 1fr) 140px; gap: 18px; align-items: center; padding: 28px 24px 20px; background: linear-gradient(#08161626, #0a1a1859); }
.duck-side { padding: 14px 6px; border-radius: 12px; background: #0a1a18b3; }
.duck-flyer { position: absolute; left: -90px; width: 64px; height: auto; opacity: .75; animation: duck-fly 22s linear infinite; }
.duck-flyer:nth-child(1) { top: 12%; animation-delay: -4s; }
.duck-flyer:nth-child(2) { top: 22%; width: 48px; animation-duration: 27s; animation-delay: -15s; opacity: .55; }
.duck-flyer:nth-child(3) { top: 7%; width: 40px; animation-duration: 31s; animation-delay: -23s; opacity: .45; }
@keyframes duck-fly { 0% { transform: translate(0, 0); } 25% { transform: translate(30vw, -10px); } 50% { transform: translate(60vw, 6px); } 75% { transform: translate(90vw, -8px); } 100% { transform: translate(calc(120vw + 180px), 0); } }
.duck-side { text-shadow: 0 2px 4px #000c; }
.duck-side { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; color: #b5c8aa; font-size: 14px; line-height: 1.35; }
.duck-side > strong { color: #f5df9b; font-size: 23px; }
.duck-side-right > strong { color: #efbb64; font: 800 42px 'Orbitron', sans-serif; }
.duck-side img { filter: drop-shadow(0 7px 5px #0007); }
.duck-side-bonus { margin-top: 20px; padding: 13px 10px; width: 100%; border: 1px solid #b6a25b77; border-radius: 8px; background: #142a23; color: #e2c174; }
.duck-side-bonus b { color: #f5e8c7; }
.duck-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; padding: 9px; border: 5px solid #716441; border-radius: 12px; background: #061b1be6; box-shadow: 0 0 0 2px #b8a47866, 0 10px 30px #000a; }
.duck-cell { position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: 1; border: 1px solid #5b7d6855; border-radius: 7px; background: linear-gradient(145deg, #344e40, #172e2b); transition: opacity .3s, transform .3s, background .3s; }
.duck-cell img { width: 90%; height: 90%; object-fit: contain; filter: drop-shadow(0 4px 2px #0006); }
.duck-cell-multi { position: absolute; inset: 3px 5px auto auto; font-size: clamp(10px, 1vw, 13px); font-weight: 800; color: #ffe6a1; text-shadow: 1px 1px 2px #000; background: #0006; border-radius: 3px; }
.duck-cell.is-bonus { background: #aa742b; border-color: #f2d36c; box-shadow: inset 0 0 20px #ffdf6666; }
.duck-cell.is-bomb { background: #57402f; }
.duck-cell.is-clearing img { opacity: 0; transform: scale(.5); }
.duck-cell.is-hit::after { content: ''; position: absolute; inset: -10%; border-radius: 50%; background: radial-gradient(circle, #fff3c4 0%, #f2b45588 35%, transparent 70%); animation: duck-flash .32s ease-out forwards; pointer-events: none; }
@keyframes duck-flash { from { opacity: 1; transform: scale(.5); } to { opacity: 0; transform: scale(1.3); } }
.duck-cabinet { position: relative; }
.duck-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.duck-feather { position: absolute; width: 14px; height: 28px; background: url('/img/duck/feder.svg') center / contain no-repeat; animation: duck-feather var(--feather-time, 1.4s) ease-out forwards; }
@keyframes duck-feather { 0% { opacity: 1; transform: translate(0, 0) rotate(0deg); } 35% { opacity: 1; transform: translate(calc(var(--feather-x) * .7), calc(var(--feather-y) - 40px)) rotate(calc(var(--feather-spin) * .5)); } 100% { opacity: 0; transform: translate(var(--feather-x), calc(var(--feather-y) + 60px)) rotate(var(--feather-spin)); } }
.duck-round { display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid #8d9b70; border-radius: 50%; color: #f4e7c4; background: #1d3430; font: 800 13px 'Orbitron', sans-serif; cursor: pointer; }
.duck-round svg { width: 22px; height: 22px; fill: currentColor; }
.duck-round[aria-pressed="true"] { border-color: #f5d277; color: #16201b; background: linear-gradient(#f5d277, #ce973b); }
.duck-round:disabled { opacity: .45; cursor: default; }
.duck-auto-wrap { position: relative; }
.duck-auto-menu { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid #8d9b70; border-radius: 10px; background: #10211e; z-index: 6; box-shadow: 0 10px 25px #000a; }
.duck-auto-menu button { min-width: 64px; padding: 8px 12px; border: 0; border-radius: 6px; color: #f4e7c4; background: #1d3430; font: 700 15px 'Orbitron', sans-serif; cursor: pointer; }
.duck-auto-menu button:hover, .duck-auto-menu button:focus-visible { background: #3a5a45; }
.duck-footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; padding: 12px 16px 16px; background: #0c1b19; border-top: 1px solid #74845633; }
.duck-stage:fullscreen, .duck-stage.is-fullscreen { display: grid; place-items: center; padding: 12px; overflow: auto; border-radius: 0; }
.duck-stage.is-fullscreen { position: fixed; inset: 0; z-index: 200; }
.duck-stage:fullscreen .duck-cabinet, .duck-stage.is-fullscreen .duck-cabinet { margin-inline: auto; }
.duck-stage:fullscreen .duck-marquee, .duck-stage.is-fullscreen .duck-marquee { padding: 12px 24px; }
.duck-stage:fullscreen .duck-marquee h2, .duck-stage.is-fullscreen .duck-marquee h2 { font-size: clamp(22px, 3vw, 36px); }
.duck-stage:fullscreen .duck-title, .duck-stage.is-fullscreen .duck-title { gap: 6px; }
.duck-stage:fullscreen .duck-playfield, .duck-stage.is-fullscreen .duck-playfield { padding: 12px 20px; }
.duck-stage:fullscreen .duck-controls, .duck-stage.is-fullscreen .duck-controls { padding: 12px; gap: 18px; }
.duck-stage:fullscreen .duck-announcement, .duck-stage.is-fullscreen .duck-announcement { min-height: 38px; padding: 6px 12px; font-size: 15px; }
.duck-stage:fullscreen .duck-footer, .duck-stage.is-fullscreen .duck-footer { padding-block: 8px; }
.duck-grid.is-spinning .duck-cell img { animation: duck-shuffle .4s ease-in-out infinite alternate; }
.duck-grid.is-spinning .duck-cell:nth-child(3n) img { animation-delay: -.2s; }
@keyframes duck-shuffle { to { transform: translateY(4px); opacity: .45; } }
.duck-announcement { min-height: 54px; display: grid; place-items: center; padding: 12px; color: #fae6b4; text-align: center; font-size: 18px; font-weight: 700; background: #091e1d; border-block: 1px solid #74845666; }
.duck-controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 24px; padding: 22px; background: #10211e; }
.duck-meter { display: flex; flex-direction: column; gap: 4px; min-width: 100px; }
.duck-meter > span, .duck-bet { color: #b2c3a8; font-size: 11px; letter-spacing: .1em; }
.duck-meter > strong { color: #fff1c3; font: 700 23px 'Orbitron', sans-serif; }
.duck-bet { display: flex; flex-direction: column; gap: 4px; }
.duck-bet select, .leaderboard-filters select { color: #f7ebd1; background: #1d3430; border: 1px solid #8d9b70; border-radius: 6px; padding: 10px; font: inherit; font-size: 15px; letter-spacing: normal; }
.duck-spin { display: flex; align-items: center; gap: 15px; border: 2px solid #ffe4a7; border-radius: 12px; color: #16201b; background: linear-gradient(#f5d277, #ce973b); padding: 15px 27px; font-size: 18px; font-weight: 900; cursor: pointer; box-shadow: 0 5px #765725; }
.duck-spin span { font-size: 29px; line-height: 1; }
.duck-spin:disabled { filter: saturate(.2); opacity: .55; cursor: default; }
.duck-spin:enabled:active { transform: translateY(3px); box-shadow: 0 2px #765725; }
.duck-rules { margin-top: 25px; }
.duck-rules summary { cursor: pointer; font-weight: 700; padding: 8px 0; }
.duck-paytable { display: flex; flex-wrap: wrap; gap: 18px; margin-block: 20px; }
.duck-paytable span { display: flex; align-items: center; gap: 8px; }
.duck-game > .account-small { margin-block: 18px; }
.leaderboard-filters { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 25px; }
.leaderboard-filters label { display: flex; flex-direction: column; gap: 8px; }
.leaderboard-scroll { overflow-x: auto; }
.leaderboard-table { width: 100%; border-collapse: collapse; margin-block: 20px; }
.leaderboard-table th, .leaderboard-table td { padding: 14px 12px; text-align: left; border-bottom: 1px solid #8b6cff33; white-space: nowrap; }
.leaderboard-table th { color: #bfb0ec; font-size: 14px; }
.leaderboard-table tr:first-child td { color: #f4dc92; }
@media (max-width: 800px) { .duck-playfield { grid-template-columns: minmax(0, 1fr); padding: 16px 12px; } .duck-side { display: none; } .duck-stamp { display: none; } .duck-marquee { padding: 24px 18px; } .duck-controls { gap: 18px; padding: 18px 12px; } .duck-meter { min-width: 75px; } .duck-meter > strong { font-size: 17px; } .duck-spin { padding: 12px 20px; } }
@media (max-width: 800px) { .duck-round { width: 44px; height: 44px; } .duck-footer { gap: 6px 16px; } }
@media (prefers-reduced-motion: reduce) { .duck-cell { transition: none; } .duck-grid.is-spinning .duck-cell { animation: none; } .duck-flyer { animation: none; display: none; } .duck-cell.is-hit::after { animation: none; display: none; } .duck-pop, .duck-banner, .duck-banner-scope, .duck-banner-title { animation: none; } }
.duck-grid { overflow: hidden; background: repeating-linear-gradient(90deg, #382820 0, #4c3829 15.7%, #221b17 16.7%); }
.duck-cell { border-color: #b2935c33; border-radius: 4px; background: #362b2188; }
.duck-cell.has-multiplier { background: linear-gradient(145deg, rgb(156 72 38 / calc(.3 + var(--field-power) * .65)), #3f2522); border-color: #e9b45b88; }
.duck-cell img { position: relative; z-index: 1; transition: opacity .24s, transform .24s; }
.duck-cell-multi { z-index: 2; padding: 1px 3px; background: #281a10dd; }
.duck-cell.is-clearing .duck-cell-multi { inset: 50% auto auto 50%; transform: translate(-50%, -50%); font-size: clamp(14px, 2vw, 26px); background: transparent; color: #ffdc85; }
.duck-cell.is-charged { box-shadow: inset 0 0 25px #96ffc7aa; outline: 2px solid #b5f8a9; z-index: 2; }
.duck-cell.is-targeted::before { content: ''; position: absolute; z-index: 3; inset: 4%; border: 2px solid #fbe6a4; border-radius: 50%; background: linear-gradient(#ffe6a4, #ffe6a4) center / 1px 100% no-repeat, linear-gradient(#ffe6a4, #ffe6a4) center / 100% 1px no-repeat; box-shadow: 0 0 12px #f4c17688; animation: duck-lock .25s ease-out; pointer-events: none; }
@keyframes duck-lock { from { transform: scale(1.4) rotate(-35deg); opacity: 0; } }
.duck-hunt-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 64px; padding: 12px 22px; border-bottom: 1px solid #c9a35355; background: #101e19eb; }
.duck-hunt-bar > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.duck-hunt-bar [data-duck-phase] { color: #a9b99d; font-size: 10px; letter-spacing: .18em; }
.duck-hunt-bar [data-duck-remaining] { color: #f3d394; font-size: 15px; }
.duck-bonus-meter { display: flex; gap: 8px; color: #8d947c; font-size: 23px; line-height: 1; }
.duck-bonus-meter .is-collected { color: #f6c55f; text-shadow: 0 0 8px #ffbe45; }
.duck-upgrades, .duck-banner-features { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.duck-upgrades span, .duck-banner-features span { padding: 5px 8px; color: #fae5b7; border: 1px solid #b7a06088; border-radius: 4px; background: #34513b; font-size: 11px; }
.duck-banner-features { position: relative; margin-block: 8px; }
.duck-banner-features span { font-size: clamp(12px, 2vw, 18px); padding: 9px 14px; }
.duck-banner-continue { position: relative; border: 1px solid #e1bd6b; background: #172d25; color: #f5dfab; padding: 10px 24px; border-radius: 6px; font: 700 14px inherit; cursor: pointer; }
.duck-banner-continue:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.duck-cinematic { position: absolute; inset: 0; z-index: 10; overflow: hidden; background: #122e26; }
.duck-cinematic[hidden] { display: none; }
.duck-cinematic-landscape { position: absolute; inset: 0; background: linear-gradient(#142b1d11, #0c251a66), url('/img/duck/sumpf.svg') center / cover; transform: scale(1.1); }
.duck-cinematic-label { position: absolute; left: 20px; top: 22px; z-index: 2; color: #fff2c4; font: 800 clamp(15px, 3vw, 28px) 'Orbitron', sans-serif; letter-spacing: .12em; text-shadow: 2px 3px #15241c; }
.duck-target { position: absolute; width: clamp(190px, 36%, 460px); transform: translate(-50%, -50%); z-index: 1; }
.duck-target img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 12px #0007); animation: duck-flutter .35s ease-in-out infinite alternate; }
@keyframes duck-flutter { from { transform: rotate(-7deg) scaleY(.94); } to { transform: rotate(5deg) scaleY(1.04); } }
.duck-hunt-scope { position: absolute; z-index: 3; width: clamp(220px, 45%, 580px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 9px solid #111a16; box-shadow: 0 0 0 100vmax #020b07c4, inset 0 0 0 2px #e4d08e99, inset 0 0 45px #000a; background: linear-gradient(#f0e0b0, #f0e0b0) center / 2px 100% no-repeat, linear-gradient(#f0e0b0, #f0e0b0) center / 100% 2px no-repeat; pointer-events: none; }
.duck-hunt-scope span { position: absolute; inset: 38%; border: 1px solid #f5e8bf; border-radius: 50%; box-shadow: 0 0 12px #ead9a35c; }
.duck-cinematic .duck-banner-continue { position: absolute; bottom: 18px; right: 18px; z-index: 6; }
.duck-cinematic.is-fired .duck-target img { animation: duck-tumble .8s ease-in forwards; }
@keyframes duck-tumble { 0% { transform: rotate(-8deg); } 25% { transform: translate(10px, -25px) rotate(20deg) scale(1.06); } 100% { transform: translate(35px, 65vh) rotate(160deg) scale(.65); opacity: 0; } }
.duck-cinematic.is-fired .duck-hunt-scope { animation: duck-recoil .3s ease-out; }
.duck-cinematic.is-fired::after { content: ''; position: absolute; z-index: 4; inset: 0; background: #fff3ba; animation: duck-flash .3s ease-out forwards; pointer-events: none; }
.duck-cinematic-hit { position: absolute; left: 50%; top: 72%; transform: translate(-50%, -50%) rotate(-7deg); color: #ffe29b; z-index: 5; font: 900 clamp(26px, 6vw, 72px) 'Orbitron', sans-serif; text-shadow: 3px 5px #19271d; }
.duck-cinematic-hit[hidden] { display: none; }
.is-hunting .duck-hunt-bar { box-shadow: inset 0 0 25px #af85232b; border-color: #f4c56b; }
@media (max-width: 600px) { .duck-hunt-bar { padding: 10px 12px; gap: 8px; } .duck-upgrades { width: 100%; justify-content: flex-start; } .duck-hunt-scope { border-width: 5px; } .duck-banner { padding: 20px 12px; } .duck-banner-title { font-size: clamp(25px, 7vw, 42px); } }
@media (max-width: 600px) { .duck-stage:fullscreen .duck-hunt-bar, .duck-stage.is-fullscreen .duck-hunt-bar { min-height: 95px; } }
@media (prefers-reduced-motion: reduce) { .duck-grid.is-spinning .duck-cell img, .duck-cell-multi.is-up, .duck-cell.is-targeted::before { animation: none; } .duck-cell img { transition: none; } }