@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:wght@500;700;900&display=swap');

:root{--ink:#062f3a;--pink:#ff3e74;--yellow:#ffe34f;--foam:#f5ffff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#063d5b;color:var(--foam);font-family:'DM Sans',sans-serif;overflow-x:hidden}button,a{font:inherit}.game{height:100svh;min-height:680px;position:relative;overflow:hidden;background:linear-gradient(#45d9ed 0 24%,#079cc2 55%,#056082);isolation:isolate}.ocean,.sunbeams,.objects{position:absolute;inset:0}.sunbeams{background:repeating-linear-gradient(105deg,transparent 0 15%,rgba(255,255,255,.13) 17%,transparent 27%);animation:beams 9s ease-in-out infinite alternate}.ocean:after{content:'';position:absolute;left:-10%;right:-10%;top:21%;height:55px;background:radial-gradient(ellipse at center,#c8fbff 0 22%,transparent 24%) 0 0/90px 42px;opacity:.35;animation:drift 8s linear infinite}.sea-floor{position:absolute;bottom:-5px;width:200%;font-size:48px;white-space:nowrap;filter:saturate(1.3);animation:floor 20s linear infinite}.bubble{position:absolute;border:2px solid rgba(255,255,255,.55);border-radius:50%;animation:rise linear infinite}header{position:absolute;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;gap:18px;padding:18px 25px}.logo{font-family:Anton,sans-serif;font-size:36px;letter-spacing:1px;transform:rotate(-2deg);text-shadow:3px 3px 0 var(--pink)}.tag{font-weight:900;font-size:11px;letter-spacing:2px;border-left:2px solid white;padding-left:18px}header a,.contract a{margin-left:auto;color:var(--ink);background:var(--yellow);text-decoration:none;font-weight:900;padding:13px 18px;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(1deg)}.story{position:absolute;z-index:15;left:7vw;top:50%;transform:translateY(-45%);max-width:700px}.story>span,.game-over>span,.kicker{display:inline-block;background:var(--pink);padding:7px 11px;font-size:12px;font-weight:900;letter-spacing:2px;transform:rotate(-2deg)}h1,.game-over h2,.lore h2{font-family:Anton,sans-serif;text-transform:uppercase;line-height:.86;margin:18px 0;font-weight:400}.story h1{font-size:clamp(62px,9vw,132px);text-shadow:6px 7px 0 var(--ink)}.story p{font-size:clamp(18px,2vw,28px);font-weight:900;text-shadow:2px 2px 0 var(--ink)}button{cursor:pointer;border:3px solid var(--ink);background:var(--yellow);color:var(--ink);padding:16px 22px;font-weight:900;box-shadow:5px 5px 0 var(--ink);transition:.15s transform,.15s box-shadow}button:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}.hud{position:absolute;z-index:12;top:88px;left:24px;right:24px;display:none;justify-content:space-between;pointer-events:none}.playing .hud{display:flex}.hud div{background:rgba(2,49,65,.82);border:2px solid rgba(255,255,255,.5);padding:8px 12px;min-width:170px}.hud span{font-size:9px;letter-spacing:1.5px;display:block}.hud b{font-family:Anton,sans-serif;font-size:22px;color:var(--yellow)}.hero{display:none;position:absolute;z-index:8;left:14%;top:48%;width:clamp(190px,28vw,390px);height:auto;filter:drop-shadow(8px 10px 0 rgba(2,49,65,.28));transform:translateY(-50%);user-select:none;pointer-events:none}.playing .hero{display:block;animation:squirm .7s ease-in-out infinite alternate}.speech{display:none;position:absolute;z-index:9;left:36%;top:32%;background:white;color:var(--ink);border:4px solid var(--ink);padding:13px 16px;border-radius:22px 22px 22px 4px;font-weight:900;max-width:280px;box-shadow:5px 5px 0 var(--ink)}.playing .speech{display:block}.speech small{display:block;color:var(--pink);margin-top:3px}.mission{display:none;position:absolute;z-index:13;bottom:70px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:900;letter-spacing:2px;background:rgba(2,49,65,.8);padding:8px 13px}.playing .mission{display:block}.sound{position:absolute;z-index:20;right:20px;bottom:20px;font-size:10px;padding:8px 10px;box-shadow:3px 3px 0 var(--ink)}.object{position:absolute;z-index:7;right:-150px;font-size:62px;filter:drop-shadow(4px 5px 0 rgba(0,40,60,.25));will-change:transform}.object .label{display:block;background:white;color:var(--ink);border:2px solid var(--ink);font-size:9px;padding:4px 6px;text-align:center;font-weight:900;transform:rotate(-4deg)}.toast{position:absolute;z-index:30;left:50%;top:20%;transform:translate(-50%,-20px) rotate(-2deg);opacity:0;background:var(--pink);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);padding:13px 18px;font-weight:900;text-align:center;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0) rotate(-2deg)}.game-over{position:absolute;z-index:40;inset:0;background:rgba(4,47,60,.9);display:none;place-content:center;text-align:center;padding:30px}.game-over.show{display:grid}.game-over h2{font-size:clamp(80px,13vw,180px);color:var(--yellow);text-shadow:7px 8px 0 var(--pink)}.game-over p{font-size:20px;font-weight:900}.game-over a{color:white;margin-top:22px;font-weight:900}.lore{background:var(--foam);color:var(--ink);padding:90px 6vw}.lore h2{font-size:clamp(70px,10vw,150px)}.lore-grid{display:grid;grid-template-columns:repeat(4,1fr);border:3px solid var(--ink)}.lore-grid article{padding:25px;min-height:240px;border-right:3px solid var(--ink)}.lore-grid article:last-child{border:0}.lore-grid span{font-family:Anton,sans-serif;color:var(--pink);font-size:44px}.lore-grid b{display:block;font-family:Anton,sans-serif;font-size:28px}.lore-grid p{line-height:1.55}.contract{margin-top:45px;background:#13bfcf;border:3px solid var(--ink);box-shadow:9px 9px 0 var(--ink);padding:22px;display:flex;align-items:center;gap:20px}.contract span{display:block;font-size:10px;letter-spacing:2px;font-weight:900}.contract code{font-size:clamp(10px,1.4vw,17px);font-weight:900;word-break:break-all}.contract a{margin-left:0}.fine{font-size:11px;opacity:.7;max-width:850px;margin-top:35px;line-height:1.5}
@keyframes squirm{to{transform:translateY(-50%) rotate(3deg) scale(1.03)}}@keyframes beams{to{transform:translateX(5%)}}@keyframes drift{to{transform:translateX(90px)}}@keyframes floor{to{transform:translateX(-50%)}}@keyframes rise{from{transform:translateY(20vh)}to{transform:translateY(-115vh)}}
@media(max-width:760px){.game{min-height:620px}header{padding:13px}.logo{font-size:28px}.tag{display:none}header a{font-size:9px;padding:9px}.story{left:20px;right:20px}.story h1{font-size:62px}.story button{font-size:12px}.hud{top:72px;left:10px;right:10px;gap:5px}.hud div{min-width:0;flex:1;padding:6px}.hud span{font-size:7px}.hud b{font-size:15px}.hero{left:4%;width:220px}.speech{left:44%;top:27%;font-size:11px;max-width:155px}.object{font-size:45px}.lore{padding:70px 20px}.lore-grid{grid-template-columns:1fr}.lore-grid article{border-right:0;border-bottom:3px solid var(--ink);min-height:0}.contract{display:block}.contract button,.contract a{display:inline-block;margin:18px 8px 0 0;font-size:10px}.sound{bottom:12px}.mission{bottom:55px;width:max-content;max-width:80%;text-align:center}.sea-floor{font-size:38px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}