/* ---------- World ---------- */
#world { position: fixed; inset: 0; overflow: hidden; touch-action: manipulation; }
#world.shake { animation: shake .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
	10%, 90% { transform: translate(-2px, 1px); }
	20%, 80% { transform: translate(4px, -2px); }
	30%, 50%, 70% { transform: translate(-8px, 3px) rotate(-.3deg); }
	40%, 60% { transform: translate(8px, -3px) rotate(.3deg); }
}
#world canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#bg { z-index: 0; }
#fg { z-index: 2; pointer-events: none; }
#yacht-wrap { position: absolute; left: 0; top: 0; z-index: 1; transform-origin: 50% 82%; will-change: transform; pointer-events: none; }
#yacht-inner { width: 100%; height: 100%; transform-origin: 50% 82%; }
#yacht-inner.squish { animation: squish .18s ease-out; }
#yacht-inner.pop { animation: ypop .9s cubic-bezier(.2,1.6,.4,1); }
#yacht-inner.grow { animation: ygrow .7s cubic-bezier(.2,1.6,.4,1); }
@keyframes squish { 50% { transform: scale(1.045, .95); } }
@keyframes ygrow { 0% { transform: scale(.9); } 45% { transform: scale(1.1, 1.06); } 100% { transform: scale(1); } }
@keyframes ypop { 0% { transform: scale(.55); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

#yacht { width: 100%; height: 100%; overflow: visible; display: block; filter: drop-shadow(0 14px 10px rgba(0,0,0,.3)); transition: filter .6s; }
#yacht.golden { filter: sepia(1) saturate(3.4) hue-rotate(-12deg) brightness(1.06) drop-shadow(0 0 14px rgba(255,212,59,.75)); }
#yacht .win { fill: #1e3a5f; transition: fill 1.2s; }
#yacht.night .win { fill: #ffd86b; }
.wave-hand { transform-box: fill-box; transform-origin: 70% 90%; animation: wave 1.6s ease-in-out infinite; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(18deg); } 20%, 40% { transform: rotate(-12deg); } }
.rotor { transform-box: fill-box; transform-origin: center; animation: rotor .14s linear infinite; }
.radar { transform-box: fill-box; transform-origin: center; animation: rotor 1.8s linear infinite; }
@keyframes rotor { 50% { transform: scaleX(.08); } }
.heli { animation: hover 2.4s ease-in-out infinite; }
@keyframes hover { 50% { transform: translateY(-6px); } }
.bub { animation: bub 1.4s ease-in infinite; }
.bub:nth-child(2) { animation-delay: .45s; } .bub:nth-child(3) { animation-delay: .9s; }
@keyframes bub { from { transform: translateY(0); opacity: .9; } to { transform: translateY(-16px); opacity: 0; } }
.flame { transform-box: fill-box; transform-origin: 50% 0; animation: flame .08s ease-in-out infinite alternate; }
@keyframes flame { to { transform: scale(.82, 1.4); } }
.appear { transform-box: fill-box; transform-origin: 50% 100%; animation: appear .8s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes appear { from { transform: scale(0); opacity: 0; } }

#vignette { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .6s; box-shadow: inset 0 0 160px 40px rgba(255,190,40,.55); }
#vignette.on { opacity: 1; animation: vig .8s ease-in-out infinite alternate; }
@keyframes vig { to { box-shadow: inset 0 0 240px 70px rgba(255,120,40,.6); } }
#flash { position: fixed; inset: 0; z-index: 34; background: #fff; opacity: 0; pointer-events: none; }
#flash.go { animation: flash .7s ease-out; }
@keyframes flash { from { opacity: .85; } to { opacity: 0; } }

/* Endgame yacht parts */
.galaxy { transform-box: view-box; transform-origin: 205px 120px; animation: rays 90s linear infinite; }
.ring-spin { transform-box: fill-box; transform-origin: center; animation: rays 40s linear infinite; }
.glow-pulse { animation: glowpulse 1.6s ease-in-out infinite alternate; }
@keyframes glowpulse { from { opacity: .55; } to { opacity: 1; } }
.moon-bob { animation: hover 5s ease-in-out infinite; }

/* Mark visuals */
.holo { transform-box: fill-box; transform-origin: center; animation: holo 3s linear infinite; }
@keyframes holo { 0% { transform: scaleX(1); } 25% { transform: scaleX(.05); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(.05); } 100% { transform: scaleX(1); } }
#yacht-wrap.aura { animation: aura 6s linear infinite; }
@keyframes aura {
	0%, 100% { filter: drop-shadow(0 0 14px rgba(255,77,210,.55)); }
	33% { filter: drop-shadow(0 0 14px rgba(127,227,255,.6)); }
	66% { filter: drop-shadow(0 0 14px rgba(255,212,59,.6)); }
}

.sweep { animation: sweep 7s ease-in-out infinite alternate; }
.sweep.rev { animation-delay: -3.5s; }
@keyframes sweep { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.disco { transform-box: fill-box; transform-origin: center; animation: rays 4s linear infinite; }
.blink-txt { animation: blink 1.2s steps(2) infinite; }