@font-face { font-family: "Press Start 2P"; src: url('./PressStart2P.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }

:root { color-scheme: light; --background: #0877d6; --foreground: #fff5cc; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body { background: #0877d6; font-family: ui-monospace, Menlo, Consolas, monospace; }
button, a { font: inherit; }
.scene { position: relative; width: 100%; height: 100vh; height: 100dvh; min-height: 480px; overflow: hidden; isolation: isolate; background: #007be2; }
.seascape, .frontwater { position: absolute; inset: 0; background: url('./ocean.png') center center / 100% 100% no-repeat; image-rendering: pixelated; }
.seascape { z-index: -1; }
.frontwater { z-index: 3; clip-path: inset(74% 0 0 0); pointer-events: none; }
h1 { position: absolute; z-index: 5; top: clamp(52px, 10vh, 110px); left: 50%; width: max-content; max-width: calc(100% - 24px); margin: 0; transform: translateX(-50%); color: #ff9b2d; font-family: "Press Start 2P", monospace; font-size: clamp(1.25rem, 3.25vw, 3rem); font-weight: 400; line-height: 1.45; letter-spacing: .015em; text-transform: uppercase; text-align: center; -webkit-text-stroke: 1px #9f3d20; text-shadow: 3px 3px 0 #7f2b20, 6px 6px 0 #092f75, 8px 8px 0 #031c55; white-space: nowrap; }
.shark { position: absolute; z-index: 2; left: 20%; top: 67%; width: clamp(150px, 16vw, 250px); height: auto; opacity: 0; image-rendering: pixelated; transform-origin: center; will-change: left, top, transform; pointer-events: none; user-select: none; }
.splash { position: absolute; z-index: 4; top: 55.5%; left: 20%; width: clamp(70px, 10vw, 150px); height: 10px; border-top: 5px solid #d8ffff; border-bottom: 3px solid #55d6ff; box-shadow: 0 4px 0 #0760b3; opacity: 0; image-rendering: pixelated; pointer-events: none; }
.splash span { position: absolute; left: 50%; bottom: 1px; width: 5px; height: 5px; background: #e8ffff; opacity: 0; box-shadow: 3px 3px 0 #51cfff; }
.splash span:nth-child(1) { --dx: -70px; --dy: -24px; }
.splash span:nth-child(2) { --dx: -55px; --dy: -43px; }
.splash span:nth-child(3) { --dx: -41px; --dy: -63px; }
.splash span:nth-child(4) { --dx: -25px; --dy: -38px; }
.splash span:nth-child(5) { --dx: -13px; --dy: -56px; }
.splash span:nth-child(6) { --dx: -34px; --dy: -18px; }
.splash span:nth-child(7) { --dx: 18px; --dy: -51px; }
.splash span:nth-child(8) { --dx: 35px; --dy: -33px; }
.splash span:nth-child(9) { --dx: 49px; --dy: -64px; }
.splash span:nth-child(10) { --dx: 65px; --dy: -28px; }
.splash span:nth-child(11) { --dx: 27px; --dy: -18px; }
.splash span:nth-child(12) { --dx: 75px; --dy: -45px; }
.splash.active span { animation: droplet .65s steps(8, end) forwards; }
@keyframes droplet { 0% { opacity: 1; transform: translate(0, 0); } 55% { opacity: 1; transform: translate(var(--dx), var(--dy)); } 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.4), 10px); } }
.bottom-nav { position: absolute; z-index: 6; left: 50%; bottom: clamp(18px, 5vh, 48px); transform: translateX(-50%); display: flex; gap: 6px; padding: 7px; background: #061b43; border: 3px solid #a7eaff; box-shadow: 5px 5px 0 #03215d; white-space: nowrap; }
.bottom-nav a, .bottom-nav button { display: grid; place-items: center; min-width: 66px; min-height: 43px; padding: 7px 18px; border: 2px solid #4597cb; border-radius: 0; color: #fff4d0; background: #0e4b88; text-decoration: none; text-transform: uppercase; font-size: clamp(.82rem, 1.15vw, 1rem); font-weight: 900; letter-spacing: .03em; cursor: pointer; box-shadow: inset -3px -3px 0 #073365, inset 2px 2px 0 #3485bd; }
.bottom-nav a:hover, .bottom-nav button:hover { background: #1767ab; color: #fff; }
.bottom-nav a:focus-visible, .bottom-nav button:focus-visible { outline: 3px solid #ffae3e; outline-offset: 3px; }
.bottom-nav a:active, .bottom-nav button:active { transform: translate(2px, 2px); box-shadow: none; }
@media (max-width: 600px) { h1 { top: 14%; font-size: clamp(.78rem, 4.05vw, 1.3rem); text-shadow: 2px 2px 0 #7f2b20, 4px 4px 0 #092f75; } .bottom-nav { bottom: 22px; gap: 4px; padding: 5px; } .bottom-nav a, .bottom-nav button { min-width: 42px; min-height: 42px; padding: 6px 9px; font-size: .75rem; } }