.coast-celebration { position:absolute; inset:0; z-index:12; overflow:hidden; isolation:isolate; background:#17ccec; color:#101616; text-align:center; pointer-events:auto; }
.coast-win-scenery { position:absolute; inset:0; width:100%; height:100%; }
.coast-win-copy { position:absolute; z-index:2; top:8%; left:4%; right:4%; display:flex; flex-direction:column; align-items:center; gap:9px; }
.coast-win-badge { display:grid; place-items:center; width:48px; height:48px; background:#dfff4f; border:3px solid #101616; border-radius:50%; font-size:32px; box-shadow:0 4px 0 #101616; }
.coast-win-copy h2 { margin:3px 0 0; font-size:clamp(24px,5vw,42px); font-weight:900; line-height:1.04; letter-spacing:-1px; color:#101616; text-shadow:0 2px #fffdf5; }
.coast-win-copy p { margin:0; font-weight:800; line-height:1.2; }
.coast-win-bonus { background:#dfff4f; border:2px solid #101616; border-radius:99px; padding:9px 16px; font-size:clamp(14px,3vw,20px); box-shadow:0 3px 0 #101616; }
.coast-win-next { background:#fffdf5e8; border-radius:99px; padding:7px 13px; font-size:clamp(13px,2.8vw,18px); }
.coast-win-character { position:absolute; z-index:2; left:12%; bottom:8%; width:43%; height:43%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 5px 0 #10161633); animation:coast-win-bounce .5s ease-in-out 2; }
.coast-win-character.coast-win-portrait { left:13%; bottom:14%; width:37%; height:auto; aspect-ratio:1; border:3px solid #101616; border-radius:50%; background-repeat:no-repeat; background-color:#fffdf5; }
.coast-win-confetti { position:absolute; z-index:1; inset:0; pointer-events:none; }
.coast-win-confetti i { position:absolute; top:-8%; left:calc(4% + var(--piece)*6%); width:8px; height:16px; background:#ff5db4; border:1px solid #101616; transform:rotate(calc(var(--piece)*33deg)); animation:coast-win-confetti 1.35s ease-out both; animation-delay:calc(var(--piece)*-18ms); }
.coast-win-confetti i:nth-child(3n) { background:#dfff4f; }.coast-win-confetti i:nth-child(3n + 1) { background:#fffdf5; }
.coast-win-progress { position:absolute; z-index:3; left:12%; right:12%; bottom:3%; height:8px; overflow:hidden; border:2px solid #101616; border-radius:99px; background:#fffdf5; }
.coast-win-progress i { display:block; height:100%; background:#ff5db4; transform-origin:left; animation:coast-win-countdown 1.4s linear both; }
@keyframes coast-win-bounce { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-12px) rotate(3deg); } }
@keyframes coast-win-confetti { from { translate:0 -12px; rotate:0deg; } to { translate:0 570px; rotate:250deg; } }
@keyframes coast-win-countdown { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media(max-height:720px) { .coast-win-copy { top:5%; gap:5px; }.coast-win-badge { width:35px; height:35px; font-size:24px; }.coast-win-copy h2 { font-size:25px; }.coast-win-bonus { padding:6px 10px; font-size:14px; }.coast-win-next { padding:5px 9px; font-size:13px; } }
@media(max-width:650px) and (max-height:620px) { .coast-win-copy { top:4%; gap:4px; }.coast-win-badge { display:none; }.coast-win-copy h2 { font-size:22px; }.coast-win-bonus { padding:5px 9px; font-size:12px; }.coast-win-next { padding:4px 8px; font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .coast-win-character,.coast-win-confetti i,.coast-win-progress i { animation:none; }.coast-win-confetti i { top:calc(10% + var(--piece)*4%); }.coast-win-progress i { transform:none; } }