body, html { margin: 0; padding: 0; overflow: hidden; background: #000; image-rendering: pixelated; font-family: monospace; }
.world-container { width: 100vw; height: 100vh; position: relative; overflow: hidden; }
.pixel-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255,0,0,0.02), rgba(0,255,0,0.01), rgba(0,0,255,0.02)); background-size: 100% 3px, 4px 100%; z-index: 100; pointer-events: none; }

.sky-layer { position: absolute; top: 0; width: 100%; height: 65%; transition: background 1s linear; }
.ocean { position: absolute; bottom: 0; width: 100%; height: 40%; background: #0077be; overflow: hidden; }
.beach { position: absolute; bottom: 0; width: 100%; height: 15%; background: #f3e5ab; z-index: 20; }

/* Creatures & Items */
.dolphin, .crab, .eagle, .fish, .coconut, .shark { position: absolute; font-size: 30px; transition: opacity 0.5s, filter 0.3s; pointer-events: none; }
.shark { font-size: 50px; z-index: 50; filter: drop-shadow(0 0 10px red); }
.fish { font-size: 20px; }
.coconut { font-size: 20px; }

/* Status Effects */
.desperate { filter: saturate(2) contrast(1.5); }
.crab.sleeping { filter: grayscale(0.8) opacity(0.7); }
.crab.sleeping::after { content: 'Zzz'; position: absolute; top: -15px; font-size: 10px; color: white; }

/* Environment */
.palm-tree { position: absolute; bottom: 10px; font-size: 70px; transform-origin: bottom; animation: sway 4s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-2deg); } to { transform: rotate(3deg); } }

.star { position: absolute; width: 2px; height: 2px; background: white; animation: twinkle var(--duration) steps(2) infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; box-shadow: 0 0 4px #fff; } }

/* UI */
#time-display { position: absolute; top: 20px; left: 20px; font-size: 24px; z-index: 1000; color: white; background: linear-gradient(120deg, transparent 30%, #fff 50%, transparent 70%); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: clock-shimmer 3s infinite linear; }
@keyframes clock-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
#eco-stats { position: absolute; bottom: 20px; left: 20px; color: white; z-index: 1000; background: rgba(0,0,0,0.7); padding: 8px; border: 1px solid #555; }

.waves { position: absolute; top: -15px; width: 200%; height: 40px; background-image: radial-gradient(circle at 50% 100%, rgba(255,255,255,0.4) 20%, transparent 25%); background-size: 80px 40px; }
.back-waves { opacity: 0.3; animation: crawl 6s steps(8) infinite; }
.front-waves { top: -10px; animation: crawl 4s steps(6) infinite reverse; }
@keyframes crawl { 0% { transform: translateX(0); } 100% { transform: translateX(-80px); } }

.celestial { position: absolute; width: 80px; height: 80px; border-radius: 50%; left: 50%; transform: translateX(-50%); bottom: -100px; }
.sun { background: #ffd700; box-shadow: 0 0 40px #ffae00; }
.moon { background: #fdfdfd; box-shadow: 0 0 20px #fff; }