@font-face{font-family:"Pixel Operator";src:url("assets/PixelOperator.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Pixel Operator";src:url("assets/PixelOperator-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
:root{--ink:#F4FBFF;--quiet:#CFE6EE;--navy:#081828;--aqua:#7FDDE0;--warm:#FFB27A;--gold:#FFD35C;--top:#1B6C86;--bottom:#082A44}
*{box-sizing:border-box}
html{background:var(--bottom)}
body{margin:0;min-height:100vh;color:var(--ink);font:20px/1.5 "Pixel Operator",system-ui,sans-serif;display:flex;flex-direction:column;position:relative}
body::before{content:"";position:absolute;z-index:-1;inset:0 0 auto 0;height:max(100vh,700px);
  background:linear-gradient(rgba(8,42,68,0) 45%,var(--bottom) 100%),url("assets/water.jpg") top center/cover no-repeat}
a{color:var(--aqua)}a:hover{color:var(--gold)}
header,footer{padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
header .studio img{height:28px;width:auto;display:block}
nav a{margin-left:20px;text-decoration:none;color:var(--quiet)}nav a:hover,nav a[aria-current]{color:var(--ink);text-decoration:underline}
main{flex:1;width:100%;max-width:780px;margin:0 auto;padding:24px}
h1,h2,h3{font-weight:700;line-height:1.2;text-shadow:2px 2px 0 var(--navy)}
h1{font-size:40px}h2{font-size:28px;margin-top:40px;color:var(--warm)}h3{font-size:22px;margin-bottom:4px}
.hero{text-align:center;padding:40px 0 8px}
.hero img{width:min(560px,90%);height:auto;image-rendering:pixelated}
.tagline{font-size:26px;color:var(--quiet);text-shadow:2px 2px 0 var(--navy);margin:16px 0 32px}
.card{background:rgba(8,24,40,.72);border:2px solid rgba(127,221,224,.35);border-radius:8px;padding:20px 24px;margin:20px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.grid .card{margin:0}
.soon{margin:0 0 12px;color:var(--quiet);font-size:18px;text-shadow:2px 2px 0 var(--navy)}
.badges{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap}
.badges>img{height:56px;width:auto;display:block}
.steam-badge{height:56px;display:flex;align-items:center;padding:0 18px;background:#000;border:1px solid #A6A6A6;border-radius:9px;box-sizing:border-box}
.steam-badge img{height:34px;width:auto;display:block}
.small{font-size:16px;color:var(--quiet)}
footer{font-size:16px;color:var(--quiet);border-top:2px solid rgba(127,221,224,.2)}
footer a{color:var(--quiet)}
ul{padding-left:22px}li{margin:6px 0}
.todo{background:var(--gold);color:var(--navy);padding:0 4px}
code{font-family:inherit;color:var(--gold)}
nav a:first-child{margin-left:0}
.social{display:inline-flex;align-items:center;gap:10px;vertical-align:middle;text-decoration:none}
.socials{display:flex;gap:16px;flex-wrap:wrap}
.social.big{color:var(--ink);background:rgba(8,24,40,.72);border:2px solid rgba(127,221,224,.35);border-radius:8px;padding:10px 18px}
.social.big:hover{color:var(--gold);border-color:var(--gold)}
footer .social{margin-left:6px}
/* The ocean behind the page (ocean.js) */
/* Absolute over the whole page, not fixed: the fish and bubbles stay where they are as you scroll. */
.ocean{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.bubble{position:absolute;top:100%;border-radius:50%;border:2px solid rgba(196,232,240,.55);background:rgba(196,232,240,.12);
  animation:rise linear infinite,wobble ease-in-out infinite alternate}
@keyframes rise{to{top:-20px}}
@keyframes wobble{from{margin-left:-6px}to{margin-left:6px}}
.swim{position:absolute;left:0;animation:swim-right linear infinite;opacity:.85}
.swim.left{animation-name:swim-left}
.swim.left .fish{transform:scaleX(-1)}
.fish{position:relative;animation:bob ease-in-out infinite alternate}
.fish img{display:block;width:100%;height:auto;image-rendering:pixelated}
.fish .tail{position:absolute;inset:0;animation:beat ease-in-out infinite alternate}
.fish .body{position:relative}
@keyframes beat{from{transform:scaleX(1)}to{transform:scaleX(.74)}}
@keyframes swim-right{from{transform:translateX(-160px)}to{transform:translateX(calc(100vw + 40px))}}
@keyframes swim-left{from{transform:translateX(calc(100vw + 40px))}to{transform:translateX(-160px)}}
@keyframes bob{from{margin-top:-6px}to{margin-top:6px}}
.quiet .swim{opacity:.35}.quiet .bubble{opacity:.6}
/* Music button (music.js) */
.music-toggle{position:static;min-height:44px;margin-left:8px;font:inherit;font-size:16px;color:var(--ink);cursor:pointer;
  background:rgba(8,24,40,.85);border:2px solid rgba(127,221,224,.45);border-radius:8px;padding:8px 14px}
.music-toggle:hover,.music-toggle:focus-visible{border-color:var(--gold);color:var(--gold)}
.music-toggle .small{font-size:14px}

/* Bubbles rising inside the title's letters (ocean.js), clipped to the water inside TIDELINE.
   The mask is inlined so it also works when the page is opened as a file. */
.logo{position:relative;display:inline-block;width:min(560px,90%)}
.hero .logo img{width:100%}
.logo-bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAADYCAYAAAAdzxFzAAAFPElEQVR42u3dy27bQAwFUNPQ//8ys0+RwpL1GJLnAN0UTRONhrxD2a1fLwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYK448DVpzU6RD37vu+9jNLjvOXivfrsGMeiex0L7LqzlrBqOxgvR9TAUjTZ2hUafg/fravu20j2PhfZcWMsZ9fsW5rdtlFykQHKxNcyF91gO3q+r7Vv3vN41pXty71qGxbzl5JQPfd+K97H6Y8JO65vN7++0Og1r2bt+3wMXxOnXepoKcL9pt0/f1mdEo8iCa5bWq+WeyWE1mgutTQ7aOyNrWKBruoIdQKCDYAcQ6LA/2AE1hEBHQwIQ6CDUQf0g0EFTAhDoINRB7SDQ0ZgABDoIdQCBDkId1AwCHTSoc4QlgNL1+9WHs6BJCnWABhO6sAIHT6BA/ZrQNUlTOqgVGuTMtuMvc+OF+er3Iu0ZYGr9bjsvRqhrzHvX4Y49k3/8nvsEn9ePeilu2/nn4+INJYBNzwAc4DV0VprmARDoFAl1wQ5r8hRNoMOy03pqUoBAhx6hDiDQQajDKJ5oCXT4KtQFO4BABwAEOhN4jAgIdLiJx+7gAIxAR6hrUoBAB6EOINABaMbhV6DD8lM6INQFOgBCHYEOGhSAQAcABDrV+C9hAQQ6ACfxMpVABwAEOgAg0AFAoENvXhMENSPQAQCBDnv5p2tgSkegg0MECHWBDgAUsVkCuG0KOfvv9SQBaveFU2vYhA4aDNCghgU61G8Igp1PJsE4cc+xYKgLdABoEOoCHYAjAWRSX4xAB5jDGykFOgAg0AEAgQ7AkryOLtABAIEOwFHeGCfQAeAfHrsLdABAoANwlMfuAh0AEOgAwCV8HjrU5/EpR/fNWW9o88Y4EzogzEEdC3QAEOYCnRI8ygP4gNfQwckee8jBuUH9CnQQwkCD+vXIHTQDoEH9CnQAaECgA+DpkUAHAAQ6/C1f173z1jQC6kKgAwACHQAQ6ACAQKcK/2sVPMPr6AIdABDoYAIBEOjCCUBfEehUlq4JAIHuJA2AQMdhAgCBzhk8ngYc2BHojDugaFKgXgQ6aE4AAh2enM6FOagdgQ7FwxxAoAMAAh1WmM49MgQ1JNCheJgDCHQQ5oApXaAjkP/3dXeFuSYECHQwlQMIdPrbO/0Kc+wFEOgUb8pPNHCP20FNCXT4Mqjz1y+Nx2RqLbBnL7a5R2jMbdcrBq6FKZJO/W7XfjahQ+/m89RTkqevmZmHxNH7WaADJiloQKDTbXowQQg4oa7ORu5lgU6nJoOAc82M3csCHQAaEOgAINABAIEO3/MGHXiu9hDooKEACHQAHKoR6GgkAAIdhDnAcnw4C4IcwIQOgIM2JnTQMABM6IwIRGEO6hSBjiYBINBBmAMIdATk4Z8zrNXj1+VABevJKkV71ecWR9Nri8XWuWOIdvos7Ri6BlGsTrNBba3SyzvV70fX331CDz/H8j/Lyh+uYkpV/3d//7CH1WK3RUrXdfm1pb3W/rQfg68/itdpNqi5XGgfV53Wd12719BN6ndM307X9q7J3P2yHhd7N1z8aLyxrngcF4qn5TVp6LVrNNTM6eughgEAAAAAAAAAAAAAAAAAAAAAqOUHiIPECTFjU8EAAAAASUVORK5CYII=");mask-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAADYCAYAAAAdzxFzAAAFPElEQVR42u3dy27bQAwFUNPQ//8ys0+RwpL1GJLnAN0UTRONhrxD2a1fLwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAYK448DVpzU6RD37vu+9jNLjvOXivfrsGMeiex0L7LqzlrBqOxgvR9TAUjTZ2hUafg/fravu20j2PhfZcWMsZ9fsW5rdtlFykQHKxNcyF91gO3q+r7Vv3vN41pXty71qGxbzl5JQPfd+K97H6Y8JO65vN7++0Og1r2bt+3wMXxOnXepoKcL9pt0/f1mdEo8iCa5bWq+WeyWE1mgutTQ7aOyNrWKBruoIdQKCDYAcQ6LA/2AE1hEBHQwIQ6CDUQf0g0EFTAhDoINRB7SDQ0ZgABDoIdQCBDkId1AwCHTSoc4QlgNL1+9WHs6BJCnWABhO6sAIHT6BA/ZrQNUlTOqgVGuTMtuMvc+OF+er3Iu0ZYGr9bjsvRqhrzHvX4Y49k3/8nvsEn9ePeilu2/nn4+INJYBNzwAc4DV0VprmARDoFAl1wQ5r8hRNoMOy03pqUoBAhx6hDiDQQajDKJ5oCXT4KtQFO4BABwAEOhN4jAgIdLiJx+7gAIxAR6hrUoBAB6EOINABaMbhV6DD8lM6INQFOgBCHYEOGhSAQAcABDrV+C9hAQQ6ACfxMpVABwAEOgAg0AFAoENvXhMENSPQAQCBDnv5p2tgSkegg0MECHWBDgAUsVkCuG0KOfvv9SQBaveFU2vYhA4aDNCghgU61G8Igp1PJsE4cc+xYKgLdABoEOoCHYAjAWRSX4xAB5jDGykFOgAg0AEAgQ7AkryOLtABAIEOwFHeGCfQAeAfHrsLdABAoANwlMfuAh0AEOgAwCV8HjrU5/EpR/fNWW9o88Y4EzogzEEdC3QAEOYCnRI8ygP4gNfQwckee8jBuUH9CnQQwkCD+vXIHTQDoEH9CnQAaECgA+DpkUAHAAQ6/C1f173z1jQC6kKgAwACHQAQ6ACAQKcK/2sVPMPr6AIdABDoYAIBEOjCCUBfEehUlq4JAIHuJA2AQMdhAgCBzhk8ngYc2BHojDugaFKgXgQ6aE4AAh2enM6FOagdgQ7FwxxAoAMAAh1WmM49MgQ1JNCheJgDCHQQ5oApXaAjkP/3dXeFuSYECHQwlQMIdPrbO/0Kc+wFEOgUb8pPNHCP20FNCXT4Mqjz1y+Nx2RqLbBnL7a5R2jMbdcrBq6FKZJO/W7XfjahQ+/m89RTkqevmZmHxNH7WaADJiloQKDTbXowQQg4oa7ORu5lgU6nJoOAc82M3csCHQAaEOgAINABAIEO3/MGHXiu9hDooKEACHQAHKoR6GgkAAIdhDnAcnw4C4IcwIQOgIM2JnTQMABM6IwIRGEO6hSBjiYBINBBmAMIdATk4Z8zrNXj1+VABevJKkV71ecWR9Nri8XWuWOIdvos7Ri6BlGsTrNBba3SyzvV70fX331CDz/H8j/Lyh+uYkpV/3d//7CH1WK3RUrXdfm1pb3W/rQfg68/itdpNqi5XGgfV53Wd12719BN6ndM307X9q7J3P2yHhd7N1z8aLyxrngcF4qn5TVp6LVrNNTM6eughgEAAAAAAAAAAAAAAAAAAAAAqOUHiIPECTFjU8EAAAAASUVORK5CYII=");
  -webkit-mask-size:100% 100%;mask-size:100% 100%}
.logo-bubble{position:absolute;bottom:16%;border-radius:50%;border:2px solid rgba(220,250,245,.85);background:rgba(220,250,245,.25);
  animation:logo-rise ease-in infinite}
@keyframes logo-rise{0%{bottom:16%;opacity:0;transform:scale(.2)}15%{opacity:1;transform:scale(1)}80%{opacity:1}100%{bottom:54%;opacity:0;transform:scale(1)}}
/* Phones and tablets */
nav a,footer a{display:inline-block;padding:10px 4px}  /* taps of at least 40 px */
footer .social{padding:10px 6px}
/* Where the page (1100 px wide on computers) leaves no room beside it, the music button sits in the header
   instead of floating over the text, and scrolls away with the page. */
@media (max-width:1420px){
  .music-toggle{position:static;min-height:44px;padding:8px 12px}
  header nav{margin-left:auto}
  footer{padding-bottom:16px}
}
@media (max-width:700px){
  header .studio{order:1}
  .music-toggle{order:2;margin-left:auto}
  header nav{order:3;width:100%}
  header{padding:12px 16px}
  nav a{margin:0 14px 0 0;font-size:18px}
  .music-toggle .title,.music-toggle .small{display:none}
  .tagline{font-size:22px}
  main{padding:16px}
}

/* Review fixes, 2026-10-31 */
.logo-heading{margin:0;font-size:inherit;line-height:0;text-shadow:none}
.what{margin:-16px 0 28px;color:var(--ink);font-size:20px;text-shadow:2px 2px 0 var(--navy)}
.grid .card h2{font-size:22px;margin:0 0 4px;color:var(--ink)}
/* A darker band behind the header keeps the menu readable over the bright light rays. */
header{background:linear-gradient(rgba(8,24,40,.6),rgba(8,24,40,0))}
nav a{color:var(--ink);text-shadow:1px 1px 0 var(--navy)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:10;background:var(--navy);color:var(--ink);padding:10px 14px;border:2px solid var(--gold);border-radius:6px}
.skip:focus{top:12px}
.tagline-2{color:var(--warm)}
/* Tap a fish (ocean.js) */
.fish-tip{position:absolute;z-index:15;max-width:260px;padding:10px 14px;font-size:16px;line-height:1.35;color:var(--navy);
  background:#F4FBFF;border:2px solid var(--navy);border-radius:14px;box-shadow:3px 3px 0 rgba(8,24,40,.6);
  opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;pointer-events:none}
.fish-tip.shown{opacity:1;transform:none}
.fish-tip::after{content:"";position:absolute;left:50%;bottom:-9px;width:12px;height:12px;margin-left:-6px;background:#F4FBFF;
  border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg)}
.tap-hint{margin:-18px 0 26px;font-size:16px;color:var(--quiet);text-shadow:1px 1px 0 var(--navy)}
/* The egg with the ! (egg.js): small, resting on the top edge of the "Hidden genes" card it
   belongs to, like an egg on the sand. Its line opens above it, aligned to the card's right edge. */
.card-egg{position:relative}
.egg-hint{position:absolute;right:14px;top:-26px;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit}
.egg-hint .egg{position:absolute;left:12px;bottom:4px;width:20px;height:auto;image-rendering:pixelated;transform-origin:50% 100%}
.egg-hint .egg-badge{position:absolute;right:4px;top:6px;width:12px;height:12px;image-rendering:pixelated;transition:opacity .2s}
.egg-hint.speaking .egg-badge{opacity:0}
.egg-hint.rock .egg{animation:egg-rock .9s ease-out}
@keyframes egg-rock{0%{transform:rotate(0)}20%{transform:rotate(7deg)}40%{transform:rotate(-5deg)}60%{transform:rotate(3deg)}80%{transform:rotate(-1deg)}100%{transform:rotate(0)}}
.egg-say{position:absolute;z-index:3;right:0;bottom:calc(100% + 4px);width:max-content;max-width:200px;padding:6px 10px;
  font-size:15px;line-height:1.3;text-align:left;color:var(--navy);background:#F4FBFF;border:2px solid var(--navy);border-radius:10px;
  box-shadow:3px 3px 0 rgba(8,24,40,.6);opacity:0;transition:opacity .2s;pointer-events:none}
.egg-hint.speaking .egg-say{opacity:1}
@media (prefers-reduced-motion: reduce){.egg-hint.rock .egg{animation:none}}
/* How your aquarium grows: a real sequence, so an ordered list, marked by the game's own icons */
.journey{list-style:none;padding:0;margin:8px 0 32px;position:relative}
.journey::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;border-left:2px dashed rgba(127,221,224,.35)}
.journey li{position:relative;display:flex;gap:18px;align-items:flex-start;margin:0 0 18px}
.journey img{flex:none;width:32px;height:32px;padding:6px;box-sizing:content-box;image-rendering:pixelated;background:var(--navy);border:2px solid rgba(127,221,224,.45);border-radius:10px}
.journey h3{margin:2px 0 2px;font-size:20px;color:var(--ink)}
.journey p{margin:0;color:var(--quiet)}
/* The shine hint: one quiet line in soft gold under the steps. The word "shine" is the bright
   gold of the game's star, a slow glint crosses it, and four small four-pointed sparkles twinkle
   around it in turn. Still, with the sparkles shown faintly, for reduced motion. */
.shine-hint{margin:-12px 0 36px 66px;color:#E8C27A;text-shadow:1px 1px 0 var(--navy)}
.shine-word{position:relative;display:inline-block;font-weight:700;color:var(--gold);text-shadow:none;
  background:linear-gradient(100deg,var(--gold) 35%,#FFFBEA 50%,var(--gold) 65%) 0 0/300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 6px rgba(255,211,92,.8));animation:glint 4s ease-in-out infinite}
@keyframes glint{0%,60%{background-position:100% 0}100%{background-position:0 0}}
.shine-word i{position:absolute;width:16px;height:16px;background:#FFF6D0;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  opacity:0;transform:scale(.3);animation:twinkle 2.4s ease-in-out infinite;filter:drop-shadow(0 0 4px #FFD35C) drop-shadow(0 0 2px #FFF)}
.shine-word i:nth-of-type(1){left:-14px;top:-10px;animation-delay:0s}
.shine-word i:nth-of-type(2){right:-14px;top:-12px;width:13px;height:13px;animation-delay:.6s}
.shine-word i:nth-of-type(3){right:-10px;bottom:-6px;width:11px;height:11px;animation-delay:1.2s}
.shine-word i:nth-of-type(4){left:40%;top:-16px;width:10px;height:10px;animation-delay:1.8s}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}40%{opacity:1;transform:scale(1) rotate(45deg)}70%{opacity:0;transform:scale(.4) rotate(90deg)}}
@media (max-width:700px){.shine-hint{margin-left:0}}
@media (prefers-reduced-motion: reduce){.shine-word{animation:none}.shine-word i{animation:none;opacity:.7;transform:none}}
/* Clips from the Instagram posts (posts.js) */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 24px}
.post{margin:0;background:rgba(8,24,40,.72);border:2px solid rgba(127,221,224,.35);border-radius:8px;overflow:hidden}
.post video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--navy);cursor:pointer}
.post figcaption{padding:10px 12px 12px;font-size:16px;line-height:1.35;color:var(--ink)}
.post figcaption a{display:inline-block;margin-top:4px;font-size:15px}
@media (max-width:700px){
  .posts{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .post{scroll-snap-align:start}
}
.posts-one{grid-template-columns:minmax(0,320px);justify-content:start}
@media (max-width:700px){.posts-one{grid-auto-columns:80%}}

/* Layout pass, 2026-10-31: a wider page on computers and two-column sections, so the home page
   uses the width instead of stacking everything in one narrow column. */
.hero{padding:24px 0 0}
.tagline{margin:12px 0 18px}
.what{margin:-6px 0 10px}
.tap-hint{margin:0 0 18px}
.soon{margin:0 0 10px}
.grow,.follow{margin:40px 0}
.grow h2,.follow h2{margin-top:0}
.journey{margin:8px 0 0}
.journey li{margin:0 0 14px}
.grow-aside{position:relative;margin:0}
.grow-aside p{margin:0 0 14px}
.grow-aside .shine-hint{margin:0}
.grow-aside .calm{margin:0;color:var(--quiet)}
.follow-text p{margin:0 0 18px}
@media (min-width:1000px){
  main{max-width:1100px}
  .hero{padding-top:8px}
  .grow{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;align-items:start}
  .grow-aside{margin-top:56px}
  .follow{display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;align-items:center}
  .follow .posts{margin:0}
  .posts-one{grid-template-columns:1fr}
}
/* The clips are vertical reels whose gameplay is a wide band in the middle, above and below it a
   blurred fill: the site shows the band, 16:9. */
.post video{aspect-ratio:16/9;object-fit:cover;object-position:50% 50%}
@media (min-width:1000px){.follow{grid-template-columns:460px minmax(0,1fr)}}
.posts-one{grid-template-columns:minmax(0,460px)}
@media (max-width:700px){.posts-one{grid-template-columns:1fr;grid-auto-flow:row;overflow:visible}}
/* "Coming soon to" in the logo's warm orange, bold, so the launch line reads as news, not a caption */
.hero .soon{color:var(--warm);font-weight:700;font-size:20px;text-shadow:2px 2px 0 var(--navy);margin:0 0 12px}
/* Phones: the three badges smaller and side by side in one row, rather than stacked. Apple and
   Google allow no icon-only badge, so each keeps its full artwork, just smaller (36 px tall). */
@media (max-width:480px){
  .badges{gap:6px;flex-wrap:nowrap}
  .badges>img{height:36px}
  .steam-badge{height:36px;padding:0 10px;border-radius:7px}
  .steam-badge img{height:21px}
}
@media (max-width:345px){.badges{flex-wrap:wrap}}
header .lang{margin-left:4px;padding:6px 10px;border:2px solid rgba(127,221,224,.45);border-radius:8px}

header .lang{text-decoration:none;color:var(--ink)}
header .lang .short{display:none}
@media (max-width:700px){
  nav a{margin:0 10px 0 0;font-size:17px}
  header .lang .full{display:none}
  header .lang .short{display:inline}
  header .lang{order:2;margin-left:auto;padding:8px 10px;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center}
  header .lang + .music-toggle,.music-toggle{margin-left:8px}
}
header nav{margin-left:auto}
/* Phones: the footer's links on their own centred line under the copyright, so none wraps alone */
@media (max-width:480px){footer{flex-direction:column;align-items:center;text-align:center;gap:4px;font-size:15px}footer a{padding:10px 2px}footer .social{margin-left:0;padding:10px 4px}}
.foot-right{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
@media (max-width:480px){.foot-right{flex-direction:column;gap:0}}
/* The launch mailing list (newsletter.js) */
.news{margin:40px 0;padding:24px;background:rgba(8,24,40,.72);border:2px solid rgba(255,178,122,.55);border-radius:8px}
.news h2{margin:0 0 6px}
.news p{margin:0 0 14px}
.news label{display:block;margin-bottom:6px;font-weight:700}
.news-row{display:flex;gap:10px;flex-wrap:wrap}
.news input{flex:1 1 220px;min-height:44px;padding:8px 12px;font:inherit;color:var(--navy);background:#F4FBFF;border:2px solid var(--navy);border-radius:8px}
.news button{min-height:44px;padding:8px 18px;font:inherit;font-weight:700;color:var(--navy);background:var(--warm);border:2px solid var(--navy);border-radius:8px;cursor:pointer;box-shadow:3px 3px 0 rgba(8,24,40,.6)}
.news button:hover{background:#FFC79D}
.news button:disabled{opacity:.6;cursor:default}
.news-consent{margin:10px 0 0;color:var(--quiet)}
.news-status{margin:8px 0 0;min-height:1.5em;color:var(--gold)}
.news-form.sent .news-row,.news-form.sent label{display:none}
.news-link{margin:14px 0 0;font-size:18px}
.news-link a{color:var(--warm)}
/* The EmailOctopus form, drawn inside .news-box once the visitor asks for it: matched to the site */
.news-open{min-height:44px;padding:8px 22px;font:inherit;font-weight:700;color:var(--navy);background:var(--warm);border:2px solid var(--navy);border-radius:8px;cursor:pointer;box-shadow:3px 3px 0 rgba(8,24,40,.6)}
.news-open:hover{background:#FFC79D}
.news-box .emailoctopus-form-wrapper,.news-box [data-form]{background:transparent!important;padding:0!important;margin:0!important;max-width:none!important;box-shadow:none!important;border:0!important}
.news-box .emailoctopus-form input[type=email]{min-height:44px;font-family:"Pixel Operator",system-ui,sans-serif!important;font-size:18px!important;color:var(--navy)!important;background:#F4FBFF!important;border:2px solid var(--navy)!important;border-radius:8px!important}
.news-box .emailoctopus-form input[type=submit]{min-height:44px;font-family:"Pixel Operator",system-ui,sans-serif!important;font-size:18px!important;font-weight:700!important;color:var(--navy)!important;background:var(--warm)!important;border:2px solid var(--navy)!important;border-radius:8px!important}
.news-box .emailoctopus-success-message,.news-box .emailoctopus-error-message,.news-box .emailoctopus-form label,.news-box .emailoctopus-form p{color:var(--ink)!important;font-family:"Pixel Operator",system-ui,sans-serif!important}
.notfound{text-align:center;padding-top:60px}.notfound .news-open{display:inline-block;text-decoration:none;margin:12px 0}
/* EmailOctopus colours its messages with var(--text-colour) through a stronger rule than ours, which
   left "Please check your inbox…" dark on dark. Its variables are overridden at a higher specificity. */
#news .news-box [data-form]{--text-colour:#F4FBFF!important;--label-colour:#F4FBFF!important}
#news .news-box [data-form] .emailoctopus-success-message,#news .news-box [data-form] .emailoctopus-error-message{color:#F4FBFF!important;font-family:"Pixel Operator",system-ui,sans-serif!important;font-size:18px!important}
#news .news-box [data-form] .emailoctopus-error-message{color:var(--gold)!important}
/* Language switch: the other language's flag and its code. Flags are drawn images, not emoji,
   which Windows shows as letters. */
header .lang{display:inline-flex;align-items:center;gap:8px;min-height:44px;box-sizing:border-box}
header .lang .flag{width:24px;height:16px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(244,251,255,.5)}
header .lang .code{font-weight:700}
header .lang .full,header .lang .short{display:none!important}
.music-next{min-height:44px;min-width:44px;margin-left:6px;font:inherit;font-size:18px;line-height:1;color:var(--ink);cursor:pointer;
  background:rgba(8,24,40,.85);border:2px solid rgba(127,221,224,.45);border-radius:8px;padding:6px 10px}
.music-next:hover,.music-next:focus-visible{border-color:var(--gold);color:var(--gold)}
@media (max-width:700px){.music-next{order:2;margin-left:6px}}
.music-next span{font-size:20px}
@media (max-width:480px){
  header .lang .code{display:none}
  header .lang{padding:6px 8px;min-width:44px;justify-content:center}
  .music-toggle{padding:6px 10px;margin-left:6px}
  .music-next{padding:6px 8px;margin-left:6px}
}
.music-toggle .ico{display:none}
@media (max-width:480px){
  /* Phones: the music button is icons only (the words stay for screen readers via aria-label). */
  .music-toggle .txt,.music-toggle .small,.music-toggle .title{display:none!important}
  .music-toggle .ico{display:inline}
  .music-toggle{min-width:44px}
}
@media (max-width:345px){header .studio img{height:22px}header{padding:12px 10px}header .lang,.music-toggle,.music-next{padding:4px 6px;margin-left:4px}}
/* Language switch: both flags, the current one highlighted. */
.langs{display:inline-flex;margin-left:12px;border:2px solid rgba(127,221,224,.45);border-radius:8px;overflow:hidden}
.lang-opt{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:4px 10px;color:var(--quiet);text-decoration:none;opacity:.7}
.lang-opt:hover{opacity:1;color:var(--ink)}
.lang-opt.on{background:rgba(127,221,224,.22);color:var(--ink);opacity:1}
.lang-opt .flag{width:22px;height:15px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(244,251,255,.5)}
.lang-opt .code{font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:700px){.langs{order:2;margin-left:auto}}
@media (max-width:480px){.lang-opt .code{display:none}.lang-opt{padding:4px 8px}}
@media (max-width:345px){.lang-opt{padding:4px 5px}}
/* Player: drawn play / pause / next icons */
.music-toggle,.music-next{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.music-toggle .icon,.music-next .icon{width:16px;height:16px;flex:none}
.music-toggle .title{display:inline}
@media (max-width:480px){.music-toggle .title{display:none!important}.music-toggle{padding:6px 12px}}
/* The fish bubble keeps its natural width at the window's edge (it was squeezed narrow there),
   and its tail follows the fish. */
.fish-tip{width:max-content;max-width:min(260px,calc(100vw - 16px));box-sizing:border-box}
.fish-tip::after{left:var(--arrow-x,50%)}