@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Mono:wght@400;700&display=swap');

*{box-sizing:border-box}
body.iab-aquarium-page{min-height:100vh;margin:0;background:var(--retro-desktop,#181530);color:var(--retro-ink,#100c1c);font-family:"Space Mono",monospace;background-image:radial-gradient(color-mix(in srgb,var(--retro-title,#39275d) 72%,transparent) 1px,transparent 1px);background-size:7px 7px}
.aquarium-shell{width:min(920px,calc(100% - 28px));margin:clamp(22px,6vh,70px) auto;background:var(--retro-tint,#e1cef6);border:3px solid;border-color:var(--edge-light,#fff) var(--edge-dark,#332744) var(--edge-dark,#332744) var(--edge-light,#fff);box-shadow:10px 10px 0 #09070f}
.aquarium-shell>.window-titlebar{background:var(--retro-title,#39275d);color:var(--retro-title-text,#fff);padding:9px 12px;font:700 12px/1.3 "Space Mono",monospace}
.aquarium-heading{padding:25px clamp(18px,5vw,44px) 20px}
.aquarium-heading p{margin:0;color:var(--retro-muted,#625773);font:700 12px/1.5 "Space Mono",monospace;letter-spacing:.07em;text-transform:uppercase}
.aquarium-heading p:last-child{margin-top:7px;color:var(--retro-ink,#100c1c);font-weight:400;letter-spacing:0;text-transform:none}
.aquarium-heading h1{margin:3px 0 0;font:900 clamp(36px,8vw,70px)/1 Georgia,serif;letter-spacing:-3px;text-transform:uppercase}
.aquarium-tank{position:relative;isolation:isolate;height:clamp(360px,58vw,520px);margin:0 clamp(14px,4vw,38px) 18px;overflow:hidden;background:#2d86a8;border:12px solid #24202c;box-shadow:inset 0 0 0 5px #78c9d4,5px 5px 0 #0005}
.aquarium-tank:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 19px,rgba(255,255,255,.025) 19px 20px);pointer-events:none}
.water-line{position:absolute;left:0;right:0;top:0;height:11px;background:repeating-linear-gradient(90deg,#9ce3e2 0 28px,#60bdc8 28px 48px)}
.gravel{position:absolute;z-index:5;left:0;right:0;bottom:0;height:48px;background:repeating-linear-gradient(135deg,#d1a15e 0 8px,#a86d43 8px 14px,#e6c27d 14px 21px);border-top:5px solid #76503d}
.fish{position:absolute;z-index:4;left:-140px;width:112px;height:65px;animation:swim-right 23s linear infinite}
.fish-sprite{display:block;width:100%;height:100%;background:url("../../iab/aquarium-fish.png") center/contain no-repeat;image-rendering:pixelated;filter:drop-shadow(3px 3px 0 rgba(16,12,28,.55))}
.fish-two,.fish-four{left:auto;right:-140px;animation-name:swim-left}.fish-two .fish-sprite,.fish-four .fish-sprite{transform:scaleX(-1)}
.fish-one{top:27%;animation-duration:25s;animation-delay:-3s}
.fish-two{top:53%;animation-duration:31s;animation-delay:-12s}.fish-two .fish-sprite{filter:hue-rotate(335deg) saturate(.88) drop-shadow(3px 3px 0 rgba(16,12,28,.55))}
.fish-three{top:67%;animation-duration:28s;animation-delay:-7s}.fish-three .fish-sprite{filter:hue-rotate(105deg) saturate(.72) drop-shadow(3px 3px 0 rgba(16,12,28,.55))}
.fish-four{top:30%;animation-duration:35s;animation-delay:-21s}.fish-four .fish-sprite{filter:hue-rotate(255deg) saturate(.7) drop-shadow(3px 3px 0 rgba(16,12,28,.55))}
.fish-five{top:74%;animation-duration:38s;animation-delay:-16s}.fish-five .fish-sprite{filter:grayscale(.75) brightness(1.12) drop-shadow(3px 3px 0 rgba(16,12,28,.55))}
@keyframes swim-right{from{left:-140px}to{left:calc(100% + 140px)}}
@keyframes swim-left{from{right:-140px}to{right:calc(100% + 140px)}}
.plant{position:absolute;z-index:3;bottom:43px;display:flex;align-items:flex-end;gap:3px}
.plant-one{left:9%}.plant-two{right:12%}.plant i{display:block;width:12px;background:#287858;border:3px solid #153c32;border-bottom:0;transform-origin:bottom}.plant i:nth-child(1){height:70px;transform:rotate(-7deg)}.plant i:nth-child(2){height:100px}.plant i:nth-child(3){height:58px;transform:rotate(8deg)}
.bubble{position:absolute;z-index:2;bottom:45px;width:10px;height:10px;border:3px solid #b7f2f1;background:#4fa7be;animation:bubble-up 8s linear infinite}
.bubble-one{left:17%}.bubble-two{left:18%;width:7px;height:7px;animation-delay:-4s;animation-duration:10s}.bubble-three{right:19%;animation-delay:-6s;animation-duration:12s}
@keyframes bubble-up{from{transform:translateY(0);opacity:0}10%{opacity:.8}to{transform:translateY(-380px);opacity:0}}
.fish-speech{position:absolute;z-index:8;bottom:calc(100% + 10px);width:max-content;max-width:260px;padding:8px 10px;color:#16131f;background:#fff;border:3px solid #16131f;box-shadow:4px 4px 0 rgba(16,12,28,.35);font:700 12px/1.35 "Courier New",monospace;white-space:normal}
.fish-speech:after{content:"";position:absolute;top:100%;border:8px solid transparent;border-top-color:#16131f}.fish-one .fish-speech{left:18px}.fish-one .fish-speech:after{left:20px}.fish-two .fish-speech{right:18px}.fish-two .fish-speech:after{right:20px}
.fish-dialogue{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.aquarium-return{margin:0;padding:4px 24px 23px;text-align:center;font-size:12px}.aquarium-return a{color:var(--retro-ink,#100c1c);text-underline-offset:3px}
@media(max-width:520px){.aquarium-shell{width:calc(100% - 16px);margin:10px auto;box-shadow:5px 5px 0 #09070f}.aquarium-shell>.window-titlebar{font-size:10px}.aquarium-heading{padding:19px 15px 16px}.aquarium-heading h1{font-size:42px;letter-spacing:-2px}.aquarium-tank{height:460px;margin:0 8px 15px;border-width:8px}.fish{width:86px;height:50px}.fish-speech{max-width:190px;padding:7px 8px;font-size:11px}.fish-one .fish-speech{left:8px}.fish-two .fish-speech{right:8px}.gravel{height:42px}.plant{bottom:38px}}
@media(prefers-reduced-motion:reduce){.fish,.bubble{animation:none!important}.fish-one{left:12%}.fish-two{right:15%}.fish-three{left:50%}.fish-four{right:48%}.fish-five{left:70%}.bubble{display:none}}