.coast-loss-scene { position:absolute; inset:0; z-index:13; overflow:hidden; isolation:isolate; background:#17ccec; color:#101616; text-align:center; pointer-events:auto; }
.coast-loss-scenery { position:absolute; inset:0; width:100%; height:100%; }
.coast-loss-copy { position:absolute; z-index:3; top:9%; left:4%; right:4%; display:flex; flex-direction:column; align-items:center; gap:9px; }
.coast-loss-copy h2 { margin:0; font-size:clamp(27px,5vw,43px); line-height:1.04; font-weight:900; letter-spacing:-1px; color:#101616; text-shadow:0 2px #fffdf5; }
.coast-loss-copy p { margin:0; font-weight:800; line-height:1.2; }
.coast-loss-reason { font-size:clamp(16px,3vw,22px); }
.coast-loss-heart { background:#ff5db4; border:2px solid #101616; border-radius:99px; padding:8px 16px; font-size:clamp(15px,3vw,20px); box-shadow:0 3px 0 #101616; }
.coast-loss-next { padding:7px 11px; border-radius:99px; background:#fffdf5ed; font-size:clamp(12px,2.8vw,16px); }
.coast-loss-character { position:absolute; z-index:2; left:5%; bottom:8%; width:49%; height:43%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 5px 0 #10161633); animation:coast-loss-recoil .48s ease-out both; }
.coast-loss-character.coast-loss-portrait { left:9%; bottom:15%; width:37%; height:auto; aspect-ratio:1; border:3px solid #101616; border-radius:50%; background-repeat:no-repeat; background-color:#fffdf5; }
.coast-loss-hazard { position:absolute; z-index:1; right:1%; bottom:10%; width:53%; height:40%; overflow:visible; animation:coast-loss-pop .35s ease-out both; }
.coast-loss-scene[data-cause="water"] .coast-loss-hazard { z-index:3; width:72%; right:18%; bottom:4%; height:25%; }
.coast-loss-progress { position:absolute; z-index:4; left:12%; right:12%; bottom:3%; height:8px; overflow:hidden; border:2px solid #101616; border-radius:99px; background:#fffdf5; }
.coast-loss-progress i { display:block; height:100%; background:#ff5db4; transform-origin:left; animation:coast-loss-countdown 1.25s linear both; }
@keyframes coast-loss-recoil { 0% { transform:translateX(8px) rotate(5deg); } 40% { transform:translateX(-12px) rotate(-9deg); } 100% { transform:translateX(-4px) rotate(-4deg); } }
@keyframes coast-loss-pop { from { transform:scale(.65); } to { transform:scale(1); } }
@keyframes coast-loss-countdown { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media(max-height:720px) { .coast-loss-copy { top:6%; gap:5px; }.coast-loss-copy h2 { font-size:27px; }.coast-loss-reason { font-size:16px; }.coast-loss-heart { padding:5px 12px; font-size:15px; }.coast-loss-next { padding:5px 9px; font-size:12px; } }
@media(max-width:650px) and (max-height:620px) { .coast-loss-copy { top:4%; gap:4px; }.coast-loss-copy h2 { font-size:24px; }.coast-loss-reason { font-size:14px; }.coast-loss-heart { padding:4px 10px; font-size:13px; }.coast-loss-next { padding:4px 8px; font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .coast-loss-character,.coast-loss-hazard,.coast-loss-progress i { animation:none; }.coast-loss-progress i { transform:none; } }