/* Public game page; playtest account styles remain in portal.css. */
:root{color-scheme:dark;--tank-line:#31515b;--tank-text:#b8d2d2;--tank-light:#e7f8e2;--tank-accent:#9ed9d5}
html{scroll-behavior:smooth;scroll-padding-top:28px}
body{line-height:1.75;background:#041923}
.reef{background:linear-gradient(180deg,#04192390,#041923f2 800px,#041923 1500px),url('/assets/reef.png') center top/cover;opacity:.5}
header.game-header{max-width:1200px;padding:26px 36px;border-bottom:1px solid var(--tank-line);gap:24px}
.game-header nav{align-items:center;gap:25px;font-size:14px}
.game-header nav a{text-decoration:none}
.signin-link{border:1px solid #618785;border-radius:6px;padding:10px 15px;white-space:nowrap}
main{display:block;max-width:1200px;padding:0 36px;margin:0 auto 65px}
.game-hero{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:35px;padding:72px 0 52px}
.game-hero h1{font-size:clamp(52px,6vw,84px);letter-spacing:1px;margin:24px 0}
.hero-line{font-size:clamp(24px,2.7vw,33px);line-height:1.4;margin:0 0 22px;color:var(--tank-light)}
.hero-description{max-width:43ch;color:var(--tank-text);font-size:17px;margin:0 0 26px}
.hero-actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.game-button{display:inline-flex;justify-content:center;align-items:center;gap:22px;background:var(--tank-accent);color:#123530;border:1px solid #b5e9df;border-radius:6px;padding:12px 20px;font-size:16px;font-weight:600;text-decoration:none;min-height:50px}
.game-button:hover{background:#bceae4}
.quiet-link{font-size:16px;text-underline-offset:5px}
.development-note{color:#9ebec2;font-size:14px;margin:21px 0 0}
.hero-resident{text-align:center}
.hero-resident .fish-wrap{height:255px;max-width:360px;margin:0 auto;position:relative}
.hero-resident .fish{width:360px;height:255px;max-width:100%}
.hero-resident .fish-note{font-size:14px;margin:0;color:var(--tank-text)}
.fish-note span{color:#8babac;font-size:12px}
.pip-button{display:block;width:100%;height:100%;padding:0;background:transparent;border:0;box-shadow:none;letter-spacing:0;border-radius:50%}
.pip-button:hover{background:transparent}
.pip-button:hover .fish{filter:drop-shadow(0 0 16px #a5cddd28)}
.pip-reply{position:absolute;top:-15px;left:50%;transform:translateX(-50%);width:max-content;max-width:100%;margin:0;padding:9px 14px;border:1px solid #668e8a;border-radius:9px;background:#183a40;color:var(--tank-light);font-size:14px;pointer-events:none}
.pip-reply:empty{display:none}
.tank-preview{margin:0;border:1px solid #4b6d70;border-radius:9px;overflow:hidden;background:#07232c;box-shadow:0 16px 45px #0003}
.tank-preview img{display:block;width:100%;height:auto}
.tank-preview .media-slot{aspect-ratio:2127/993;border:0;border-radius:0}
.tank-preview .media-slot>span{font-size:64px;opacity:.5}
.tank-preview figcaption{display:flex;justify-content:space-between;gap:16px;padding:14px 20px;font-size:13px;color:var(--tank-text)}
.glass-invitation{display:flex;align-items:center;gap:12px;margin:18px 0 0;color:#8fb2b5;font-size:13px;flex-wrap:wrap}
.little-button{display:inline-block;width:auto;padding:3px 0;background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--tank-accent);font-size:13px;font-weight:400;letter-spacing:0;text-decoration:underline;text-underline-offset:4px}
.little-button:hover{background:transparent;color:var(--tank-light)}
.game-section{padding:64px 0;border-bottom:1px solid var(--tank-line);scroll-margin-top:24px}
.section-heading{max-width:660px;margin:0 0 44px}
.eyebrow{font-size:12px;line-height:1.7;margin:0 0 18px;letter-spacing:1.7px}
.game-section h2,.access-intro h2{font:600 clamp(28px,3.3vw,39px)/1.25 'Segoe UI',Arial,sans-serif;letter-spacing:-1px;margin:0 0 20px}
.section-heading>p:last-child{font-size:18px;line-height:1.7;color:var(--tank-text);margin:0}
.fish-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 30px}
.media-frame{position:relative;isolation:isolate;margin:0 0 24px}
.media-slot{position:relative;z-index:1;display:grid;place-items:center;aspect-ratio:16/10;overflow:hidden;background:radial-gradient(ellipse at 35% 10%,#183a46,#0c2732 70%);border:1px solid #3b606a;border-radius:8px;box-shadow:inset 0 0 35px #0002;color:#739799}
.media-slot>span{font:normal 47px/1 TankHeading,'Segoe UI',sans-serif;opacity:.65}
.media-slot>img,.media-slot>video{display:block;width:100%;height:100%;object-fit:cover}
.slot-peeker{position:absolute;z-index:0;right:23px;top:-45px;width:88px;height:70px;overflow:hidden;transform:translateY(26px);transition:transform .6s ease;pointer-events:none}
.slot-peeker img{position:absolute;left:-67px;top:0;width:300px;height:auto;max-width:none;image-rendering:pixelated}
.peeker-left{left:27px;right:auto}
.has-peeker.is-visible .slot-peeker,.has-peeker:hover .slot-peeker{transform:translateY(0)}
.has-peeker.is-startled .slot-peeker{transform:translateY(34px);transition-duration:.12s}
.feature-label{font-size:11px;letter-spacing:1.5px;color:var(--tank-accent);margin:0 0 10px}
.game-section h3{font-size:21px;line-height:1.4;letter-spacing:-.4px;font-weight:600;margin:0 0 12px}
.fish-highlights article>p:not(.feature-label),.stream-features p,.stream-controls p,.connected-section article>p:not(.eyebrow){color:var(--tank-text);font-size:16px;margin:0 0 16px}
.fish-highlights article>p:last-child{margin-bottom:0}
.feature-status{display:inline-block;border:1px solid #556967;border-radius:4px;color:#d6d3af;font-size:10px;letter-spacing:.8px;padding:3px 8px;margin-left:10px;vertical-align:middle}
.feature-status.available{color:#b9e2bd;border-color:#41665b}
.stream-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:45px;align-items:start}
.stream-media{margin-bottom:0}
.stream-media .media-slot{aspect-ratio:4/3}
.art-aside{color:#8fb2b5;font-size:12px;margin:10px 0 0}
.stream-features{display:grid;gap:21px}
.stream-features article{border-left:2px solid #5e9691;padding-left:20px}
.stream-features h3{font-size:19px;margin-bottom:7px}
.stream-features p{font-size:15px;margin:0}
.stream-controls{margin-top:27px;padding:20px 24px;background:#102d35;border:1px solid var(--tank-line);border-radius:7px}
.stream-controls p:last-child{margin-bottom:0}
.stream-controls .release-note{font-size:14px;color:#d6d3af}
.connected-section{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:60px}
.connected-section h2{font-size:29px}
.connected-section article>p:last-child{margin-bottom:0}
.connected-section article>.platform-note{font-size:14px;color:#a5babb}
.connected-section .media-frame{margin-bottom:28px}
.glass-life{position:fixed;inset:0;z-index:5;overflow:hidden;pointer-events:none;contain:layout paint}
.glass-fish{position:absolute;top:0;left:0;width:112px;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility 0s linear .18s;will-change:transform}
.glass-fish.is-visiting{opacity:1;visibility:visible;transition:opacity .18s ease}
.scroll-fish{position:absolute;top:0;left:0;width:112px;opacity:0;visibility:hidden;transform-origin:0 0;will-change:transform,opacity}
.scroll-fish img{display:block;width:100%;height:auto;image-rendering:pixelated;transform:translate(-50%,-50%) scaleX(var(--fish-facing,1));filter:drop-shadow(0 3px 5px #0003)}
.glass-fish img{display:block;width:100%;height:auto;image-rendering:pixelated;transform:scaleX(-1);filter:drop-shadow(0 3px 5px #0003)}
.fish-curiosity{display:none;position:absolute;left:45%;top:-7px;color:#d8eadc;font:normal 22px/1 TankHeading,'Segoe UI',sans-serif;text-shadow:0 1px 3px #041923}
.glass-fish.is-curious .fish-curiosity{display:block}
.glass-ring{position:absolute;top:0;left:0;width:80px;height:80px;margin:-40px;border:1px solid #e0f7ff;border-radius:50%;opacity:0;box-shadow:0 0 2px #c6e7ef44,inset 0 0 2px #c6e7ef33;animation:glass-tap 1.35s ease-out forwards}
@keyframes glass-tap{0%{transform:scale(.12);opacity:0}15%{opacity:.38}100%{transform:scale(1.65);opacity:0}}
.access-section{display:grid;grid-template-columns:1fr 470px;gap:70px;align-items:start;padding-top:65px;scroll-margin-top:28px}
.access-intro{padding-top:15px}
.access-intro p:not(.eyebrow){max-width:42ch;font-size:17px;color:var(--tank-text);margin:0 0 20px}
.access-intro .access-note{font-size:15px!important}
.access-intro a{text-underline-offset:4px}
.portal-card{scroll-margin-top:28px;color-scheme:light}
.paper .small{font-size:13px}
.paper label{font-size:14px}
.paper .card-footer{font-size:12px}
.paper h2{font-size:30px}
footer{max-width:1200px;font-size:13px;border-top:1px solid var(--tank-line);padding-top:28px;padding-bottom:30px;align-items:center;flex-wrap:wrap}
footer nav{flex-wrap:wrap;gap:18px}
.skip-link{position:absolute;top:-100px;left:18px;z-index:10;background:#bceae4;color:#123530;padding:10px 16px;border-radius:4px}
.skip-link:focus{top:12px}
a:focus-visible,button:focus-visible{outline:3px solid #9ed9d5;outline-offset:5px}
@media(max-width:950px){.game-header nav{gap:16px}.nav-features{display:none}.fish-highlights{gap:40px 24px}.access-section{grid-template-columns:1fr 430px;gap:35px}.connected-section{gap:35px}.game-section h3{font-size:19px}.stream-layout{gap:30px}}
@media(max-width:840px){main{max-width:1200px}.hello{text-align:left}.game-hero{grid-template-columns:1.3fr .7fr;gap:15px;padding-top:55px}.hero-resident .fish-wrap{height:190px}.hero-resident .fish{height:190px}.fish-highlights{grid-template-columns:repeat(2,minmax(0,1fr))}.connected-section{gap:30px}.stream-layout{grid-template-columns:1fr}.stream-media .media-slot{aspect-ratio:16/9}.stream-features{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}.access-section{grid-template-columns:1fr;gap:25px;max-width:640px;margin:auto}.access-intro p:not(.eyebrow){max-width:none}.connected-section h2{font-size:26px}}
@media(max-width:600px){header.game-header{padding:20px 22px;gap:15px;align-items:center}.studio{font-size:11px;gap:8px;letter-spacing:2px}.studio img{width:32px;height:32px}.studio small{font-size:9px}.game-header .nav-apply{display:none}.game-header nav{font-size:12px;gap:0}.signin-link{padding:10px 11px}main{padding:0 22px;margin-bottom:40px}.game-hero{grid-template-columns:1fr;padding:39px 0 30px;gap:25px}.game-hero h1{font-size:clamp(40px,12vw,65px);margin:20px 0}.hero-line{font-size:25px}.hero-description{font-size:16px}.hero-actions{gap:19px}.game-button{font-size:15px;padding:12px 16px;gap:15px}.hero-resident .fish-wrap{height:150px;max-width:230px}.hero-resident .fish{height:150px;width:230px}.hero-resident .fish-note{font-size:12px}.pip-reply{font-size:12px;padding:7px 10px;top:-4px}.tank-preview{border-radius:6px}.tank-preview figcaption{padding:11px 13px;font-size:11px;gap:10px}.glass-invitation{gap:5px 12px;font-size:12px}.game-section{padding:44px 0}.section-heading{margin-bottom:36px}.section-heading>p:last-child{font-size:16px}.game-section h2,.access-intro h2{font-size:29px;letter-spacing:-.6px}.fish-highlights{grid-template-columns:1fr;gap:38px}.game-section h3{font-size:20px}.fish-highlights article>p:not(.feature-label),.stream-features p,.stream-controls p,.connected-section article>p:not(.eyebrow){font-size:15px}.media-frame{margin-bottom:21px}.stream-features{grid-template-columns:1fr;gap:23px}.stream-features article{padding-left:17px}.stream-controls{padding:19px;margin-top:26px}.connected-section{grid-template-columns:1fr;gap:55px}.connected-section h2{font-size:27px}.access-section{padding-top:38px;gap:23px}.access-intro{padding-top:0}.access-intro p:not(.eyebrow){font-size:16px}.paper{border-width:5px;padding:21px 19px 0}.paper h2{font-size:28px}.paper .card-footer{margin-left:-19px;margin-right:-19px;padding-left:19px;padding-right:19px}.portal-tabs{gap:6px}.portal-tabs .portal-tab{padding:11px 12px}.feature-status{margin-left:7px;font-size:9px}.eyebrow{font-size:11px}footer{padding:22px;gap:13px;font-size:12px}footer nav{gap:17px}.glass-fish{width:88px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.slot-peeker,.glass-fish{transition:none}.scroll-fish{display:none}.glass-ring{animation:none;opacity:.3;transform:scale(.65)}}

/* Alternating feature scenes. One visual and one short idea per section. */
body{background:#031720}
.reef{inset:-65px 0;opacity:.3;transform:translate3d(0,var(--reef-drift,0px),0);background:linear-gradient(180deg,#03172044,#031720d9 1100px,#031720e8),url('/assets/reef.png') center top/cover;will-change:transform}
main{max-width:1280px;padding:0 48px}
header.game-header,footer{max-width:1280px;padding-left:48px;padding-right:48px}
.game-hero{padding:82px 0 58px;min-height:490px}
.game-hero h1{font-size:clamp(52px,7vw,91px)}
.hero-resident .fish-wrap{max-width:400px;height:280px}
.hero-resident .fish{width:400px;height:280px}
.tank-preview{border-radius:3px;box-shadow:0 25px 75px #0004;border-color:#45676b}
.fish-section{padding-top:135px;scroll-margin-top:45px}
.fish-intro{text-align:center;max-width:720px;margin:0 auto 70px}
.fish-intro h2{font:600 clamp(38px,5vw,64px)/1.16 'Segoe UI',Arial,sans-serif;letter-spacing:-2px;margin:0 0 24px}
.fish-intro>p:last-child{max-width:51ch;margin:auto;font-size:19px;color:#b9d4d1}
.fish-intro .eyebrow{letter-spacing:3px;font-size:11px;margin-bottom:22px}
.pillar{--scene-tint:#4ac7c318;--reveal-x:35px;display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);grid-template-areas:'copy art';align-items:center;gap:82px;position:relative;isolation:isolate;padding:83px 0;scroll-margin-top:50px}
.pillar::before{content:'';position:absolute;inset:-25px -4%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 72% 45%,var(--scene-tint),transparent 66%);transform:translateY(var(--scene-drift,0px))}
.pillar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;opacity:.28;background:linear-gradient(90deg,transparent,#4a8083,transparent)}
.pillar--reverse{--reveal-x:-35px;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);grid-template-areas:'art copy'}
.pillar--reverse::before{background:radial-gradient(ellipse at 28% 45%,var(--scene-tint),transparent 66%)}
.pillar--territory{--scene-tint:#b6985121}
.pillar--garden{--scene-tint:#77a95f22}
.pillar--discover{--scene-tint:#638ab628}
.pillar--twitch{--scene-tint:#926ad629;padding-top:120px;padding-bottom:100px}
.pillar--discord{--scene-tint:#7486e826}
.pillar--platforms{--scene-tint:#3c9b9925}
.pillar-copy{grid-area:copy;position:relative;z-index:2;max-width:440px;transition:opacity .7s ease,transform .8s cubic-bezier(.22,.8,.25,1)}
.pillar h2,.pillar h3{font:600 clamp(32px,3.9vw,50px)/1.14 'Segoe UI',Arial,sans-serif;letter-spacing:-1.6px;margin:0 0 25px;color:#eaf6e7}
.pillar-copy>p:not(.eyebrow):not(.feature-label){font-size:17px;line-height:1.8;color:var(--tank-text);max-width:40ch;margin:0}
.pillar-copy .feature-label,.pillar-copy .eyebrow{font-size:11px;letter-spacing:2.4px;line-height:1.8;margin-bottom:23px}
.pillar-copy>.pillar-small{font-size:14px!important;margin-top:18px!important;color:#97b9b8!important}
.pillar-media{grid-area:art;width:100%;margin:0;transition:opacity .8s ease,transform 1s cubic-bezier(.22,.8,.25,1)}
.pillar-media::after{content:'';position:absolute;inset:12px -12px -12px 12px;z-index:0;border-right:1px solid #60959630;border-bottom:1px solid #60959630;pointer-events:none}
.pillar-media .media-slot{aspect-ratio:16/10;border-radius:3px;border-color:#43656c90;background:radial-gradient(ellipse at 70% 20%,var(--scene-tint),transparent 70%),linear-gradient(140deg,#12303e,#09212d 60%,#0e2933);box-shadow:0 25px 55px #0003,inset 0 0 60px #0002}
.pillar-media .media-slot::before{content:'';position:absolute;inset:-30%;pointer-events:none;background:linear-gradient(115deg,transparent 35%,#c8edee05 48%,transparent 62%);transform:translateX(var(--scene-drift,0px))}
.pillar-media .media-slot>span{font-size:64px;opacity:.5}
.pillar--twitch .media-slot{aspect-ratio:4/3}
.pillar .feature-status{font-size:9px;letter-spacing:.7px;margin-left:8px;white-space:nowrap}
.stream-actions{list-style:none;margin:25px 0 22px;padding:0;border-top:1px solid #718a952b}
.stream-actions li{color:var(--tank-text);font-size:14px;line-height:1.75;border-bottom:1px solid #718a952b;padding:11px 0}
.stream-actions strong{color:#e0e7e6;font-weight:600}
.pillar-copy>.stream-permissions{font-size:14px!important;line-height:1.7!important}
.pillar-copy>.release-note{font-size:13px!important;line-height:1.7!important;color:#b9bc9b!important;margin-top:18px!important}
.slot-peeker{top:-48px;right:35px;transform:translateY(26px)}
.peeker-left{left:35px;right:auto}
.access-section{padding-top:110px;padding-bottom:30px;border-top:1px solid #31515b80;margin-top:55px;gap:95px}
.access-intro h2{font-size:clamp(34px,3.7vw,48px);line-height:1.16}
.motion-ready .pillar:not(.is-revealed) .pillar-copy{opacity:0;transform:translateY(24px)}
.motion-ready .pillar:not(.is-revealed) .pillar-media{opacity:0;transform:translateX(var(--reveal-x))}
@media(max-width:1050px){main,header.game-header,footer{padding-left:36px;padding-right:36px}.pillar{gap:48px;padding:70px 0}.pillar h2,.pillar h3{font-size:39px}.access-section{gap:45px}.pillar-copy>p:not(.eyebrow):not(.feature-label){font-size:16px}.pillar-copy .eyebrow{letter-spacing:1.4px}}
@media(max-width:840px){.pillar{gap:32px;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}.pillar--reverse{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}.pillar h2,.pillar h3{font-size:32px;letter-spacing:-1px}.pillar-copy>p:not(.eyebrow):not(.feature-label){font-size:15px}.pillar--twitch{grid-template-columns:1fr;grid-template-areas:'copy' 'art';gap:38px}.pillar--twitch .pillar-copy{max-width:620px}.pillar--twitch .media-slot{aspect-ratio:16/9}.pillar-copy .eyebrow .feature-status{display:table;margin:9px 0 0}.fish-intro{margin-bottom:30px}.fish-section{padding-top:90px}.hero-resident .fish-wrap{height:210px}.hero-resident .fish{height:210px}.game-hero{min-height:410px;padding-top:60px}.access-section{padding-top:75px;gap:25px}}
@media(max-width:640px){main,header.game-header,footer{padding-left:22px;padding-right:22px}.game-hero{min-height:0;padding:43px 0 36px;grid-template-columns:1fr}.game-hero h1{font-size:clamp(40px,12vw,65px)}.hero-resident .fish-wrap{height:160px;max-width:250px}.hero-resident .fish{height:160px;width:250px}.fish-section{padding-top:75px}.fish-intro{text-align:left;margin:0 0 20px}.fish-intro h2{font-size:39px;letter-spacing:-1.5px}.fish-intro>p:last-child{font-size:16px;max-width:none}.pillar,.pillar--reverse{grid-template-columns:1fr;grid-template-areas:'copy' 'art';gap:34px;padding:58px 0}.pillar h2,.pillar h3{font-size:clamp(32px,8vw,42px);margin-bottom:19px}.pillar-copy{max-width:none}.pillar-copy>p:not(.eyebrow):not(.feature-label){font-size:16px;max-width:40ch}.pillar-copy .feature-label,.pillar-copy .eyebrow{font-size:10px;letter-spacing:2px;margin-bottom:17px}.pillar-copy .eyebrow .feature-status{display:inline-block;margin:0 0 0 6px;letter-spacing:.5px}.pillar-media .media-slot{aspect-ratio:16/11}.pillar-media .media-slot>span{font-size:52px}.pillar-media::after{inset:8px -8px -8px 8px}.pillar--twitch{padding-top:75px}.pillar--twitch .media-slot{aspect-ratio:16/11}.slot-peeker{right:20px}.peeker-left{left:20px;right:auto}.access-section{padding-top:60px;margin-top:32px}.access-intro h2{font-size:35px}.glass-invitation{font-size:12px}.pillar::before{inset:-10px -15px}.motion-ready .pillar:not(.is-revealed) .pillar-media{transform:translateY(24px)}}
@media(prefers-reduced-motion:reduce){.reef{transform:none;will-change:auto}.pillar::before,.pillar-media .media-slot::before{transform:none}.pillar-copy,.pillar-media{transition:none}.motion-ready .pillar:not(.is-revealed) .pillar-copy,.motion-ready .pillar:not(.is-revealed) .pillar-media{opacity:1;transform:none}}