/* ==========================================================================
   FishyHam Studios — game layer
   Sits on top of style.css. Same black + rose palette; adds the arcade
   bits: HUD, bubbles, the app tank, stat bars, level map, toasts.
   ========================================================================== */

:root {
  --pixel: "Press Start 2P", var(--mono);
  --glow: 0 0 18px rgba(201, 119, 109, 0.45);
  --pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* faint CRT scanlines over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px);
}

/* ---------- chunky game buttons --------------------------------------- */
.btn--game {
  font-family: var(--pixel);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  background: var(--rose);
  border-color: var(--rose);
  color: var(--abyss);
  border-radius: 6px;
  box-shadow: 0 5px 0 var(--rose-deep), var(--glow);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease;
}
.btn--game:hover { background: var(--rose-light); border-color: var(--rose-light); transform: translateY(-2px); box-shadow: 0 7px 0 var(--rose-deep), var(--glow); }
.btn--game:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--rose-deep); }

/* ---------- HUD -------------------------------------------------------- */
.hud {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
  margin-bottom: clamp(24px, 4vw, 48px);
  font-family: var(--pixel);
  font-size: 0.62rem;
  color: var(--muted);
  letter-spacing: 0.08em;
}
.hud-item b { color: var(--rose-light); font-weight: 400; text-shadow: var(--glow); }
.hud-hi { margin-left: auto; }
.hud-lives { display: inline-flex; gap: 6px; }
.hud-lives i {
  width: 14px; height: 12px;
  background: var(--rose);
  clip-path: polygon(0 50%, 30% 0, 75% 0, 100% 50%, 75% 100%, 30% 100%);
  position: relative;
}
.hud-lives i::after { content: ""; position: absolute; left: -5px; top: 2px; width: 6px; height: 8px; background: var(--rose-deep); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.score-bump { animation: bump 0.35s var(--pop); display: inline-block; }
@keyframes bump { 50% { transform: scale(1.4); } }

.insert-coin { font-family: var(--pixel); font-size: 0.6rem; color: var(--muted); letter-spacing: 0.08em; }
.blink { animation: blink 1s steps(1) infinite; color: var(--rose-light); }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- hero fish + speech bubble ---------------------------------- */
.fish-btn {
  display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 24px;
  transition: transform 0.2s var(--pop);
}
.fish-btn:hover { transform: scale(1.03) rotate(-2deg); }
.fish-btn:active { transform: scale(0.94) rotate(3deg); }
.fish-btn.is-hit img { animation: wobble 0.5s ease; }
@keyframes wobble {
  20% { transform: rotate(-8deg) scale(1.05); }
  45% { transform: rotate(6deg); }
  70% { transform: rotate(-3deg); }
}

.speech {
  /* sits over the top edge of the fish video, where the jump gets
     clipped (13.5% down, roughly 20-42% across), so the cut hides behind it */
  position: absolute;
  top: 13.5%; left: 14%;
  margin-top: -26px;
  min-width: 34%;
  max-width: 260px;
  z-index: 2;
  text-align: center;
  padding: 12px 16px;
  background: var(--cream);
  color: var(--abyss);
  font-family: var(--pixel);
  font-size: 0.6rem;
  line-height: 1.7;
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--rose);
  animation: floaty 4s ease-in-out infinite;
}
.speech::after {
  content: ""; position: absolute; bottom: -10px; left: 28px;
  border: 10px solid transparent; border-top-color: var(--cream); border-bottom: 0;
}
@keyframes floaty { 50% { transform: translateY(-6px); } }

/* ---------- rising bubbles -------------------------------------------- */
/* bubbles are confined to the section that holds the field (hero, tank) */
.bubble-field { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
#tank { position: relative; overflow: hidden; }
.hero.is-playing .bubble-field .bubble { opacity: 0 !important; transition: opacity 0.3s; }
.bubble {
  position: absolute;
  bottom: -40px;
  border-radius: 50%;
  border: 1.5px solid rgba(227, 167, 155, 0.7);
  box-shadow: 0 0 10px rgba(201, 119, 109, 0.35);
  background: radial-gradient(circle at 32% 30%, rgba(243, 241, 236, 0.7) 0 12%, rgba(201, 119, 109, 0.12) 13% 60%, transparent 70%);
  animation: rise-bubble linear forwards;
}
@keyframes rise-bubble {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translate(var(--sway, 18px), -60vh); }
  100% { transform: translate(0, -120vh); opacity: 0; }
}
.cursor-bubble {
  position: fixed; z-index: 90; pointer-events: none;
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--rose-light);
  animation: cursor-pop 0.9s ease-out forwards;
}
@keyframes cursor-pop { to { transform: translateY(-40px) scale(1.8); opacity: 0; } }

/* ---------- ticker ------------------------------------------------------ */
.ticker {
  overflow: hidden;
  border-block: 2px solid var(--rose-deep);
  background: var(--abyss);
  padding-block: 14px;
}
.ticker-track {
  display: flex; gap: 32px; width: max-content;
  font-family: var(--pixel); font-size: 0.62rem; letter-spacing: 0.1em;
  color: var(--rose-light); text-transform: uppercase; white-space: nowrap;
  animation: ticker 36s linear infinite;
}
.ticker-track span:nth-child(even) { color: var(--muted); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- "currently up to" bubbles ---------------------------------- */
.now-tank {
  position: relative;
  height: 440px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(201, 119, 109, 0.18), transparent 60%),
    linear-gradient(var(--ground), var(--abyss));
  overflow: hidden;
}
.now-bubble {
  position: absolute;
  left: var(--x);
  bottom: 0;
  width: var(--s); height: var(--s);
  margin-left: calc(var(--s) / -2 + 40px);
  border-radius: 50%;
  border: 1.5px solid rgba(227, 167, 155, 0.6);
  background: radial-gradient(circle at 30% 28%, rgba(243, 241, 236, 0.35) 0 10%, rgba(201, 119, 109, 0.18) 11% 55%, rgba(126, 67, 64, 0.25) 100%);
  color: var(--cream);
  font-family: var(--pixel);
  font-size: 0.56rem;
  line-height: 1.6;
  padding: 12px;
  cursor: pointer;
  box-shadow: inset 0 0 24px rgba(227, 167, 155, 0.2), var(--glow);
  animation: bob-up 12s ease-in-out var(--d) infinite;
  transition: filter 0.2s ease;
}
.now-bubble:hover, .now-bubble:focus-visible { filter: brightness(1.35); animation-play-state: paused; }
.now-bubble.is-popped { animation: popped 0.45s ease-out forwards; pointer-events: none; }
@keyframes bob-up {
  0%   { transform: translate(0, 60px); }
  25%  { transform: translate(14px, -80px); }
  50%  { transform: translate(-10px, -200px); }
  75%  { transform: translate(12px, -110px); }
  100% { transform: translate(0, 60px); }
}
@keyframes popped {
  40%  { transform: scale(1.3); opacity: 0.8; }
  100% { transform: scale(0); opacity: 0; }
}
.pop-bit {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--rose-light); pointer-events: none;
  animation: bit 0.6s ease-out forwards;
}
@keyframes bit { to { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; } }

.now-note {
  position: absolute;
  top: 20px; left: 20px; right: 20px;
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  padding: 14px 18px;
  background: rgba(5, 5, 7, 0.85);
  border: 2px solid var(--rose-deep);
  border-radius: 10px;
  font-family: var(--mono); font-size: 0.88rem; color: var(--cream);
  z-index: 3;
}
.now-note-k { font-family: var(--pixel); font-size: 0.6rem; color: var(--rose-light); }
.now-note.is-new { animation: bump 0.35s var(--pop); }

/* ---------- the tank (apps) -------------------------------------------- */
.tank {
  position: relative;
  height: 560px;
  margin-top: 16px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(227, 167, 155, 0.08), transparent 50%),
    linear-gradient(var(--abyss), #0d0b10 70%, var(--ground));
  border-block: 1px solid var(--line);
}
/* light rays */
.tank::before {
  content: ""; position: absolute; inset: -20% 0 0;
  background: repeating-linear-gradient(100deg, transparent 0 80px, rgba(227, 167, 155, 0.035) 80px 120px);
  animation: rays 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes rays { to { transform: translateX(-60px); } }

.tank-sand {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
  background:
    radial-gradient(circle at 10% 0, var(--surface-2) 0 30px, transparent 31px),
    radial-gradient(circle at 45% 10%, var(--surface-2) 0 40px, transparent 41px),
    radial-gradient(circle at 80% 0, var(--surface-2) 0 34px, transparent 35px),
    var(--surface);
}
.tank-weed {
  position: absolute; bottom: 30px; width: 18px; height: 140px;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(var(--rose-deep), transparent);
  transform-origin: bottom center;
  animation: sway 5s ease-in-out infinite;
  opacity: 0.6;
}
.tank-weed--a { left: 12%; }
.tank-weed--b { right: 18%; height: 190px; animation-delay: -2s; }
@keyframes sway { 50% { transform: skewX(12deg); } }

.swimmer {
  position: absolute;
  top: calc(40px + var(--row) * 140px);
  left: 0;
  animation: swim-lr var(--speed) linear var(--delay) infinite;
  outline: none;
  z-index: 2;
}
.swimmer--rev { animation-name: swim-rl; }
.swimmer:hover, .swimmer:focus-visible, .swimmer.is-held { animation-play-state: paused; z-index: 4; }
.swimmer:hover .swim-card, .swimmer:focus-visible .swim-card, .swimmer.is-held .swim-card {
  border-color: var(--rose); transform: scale(1.06); box-shadow: 6px 6px 0 var(--rose-deep), var(--glow);
}
@keyframes swim-lr { from { transform: translateX(-340px); } to { transform: translateX(calc(100vw + 20px)); } }
@keyframes swim-rl { from { transform: translateX(calc(100vw + 20px)); } to { transform: translateX(-340px); } }

.swim-card {
  display: flex; gap: 14px; align-items: center;
  width: 300px;
  padding: 14px;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 18px 40px 40px 18px;
  box-shadow: 4px 4px 0 var(--abyss);
  animation: bob 3s ease-in-out infinite;
  transition: transform 0.25s var(--pop), border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
/* a little tail so the cards read as fish */
.swim-card::before {
  content: ""; position: absolute; left: -22px; top: 50%;
  width: 24px; height: 34px; margin-top: -17px;
  background: var(--rose-deep);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  animation: tail 0.6s ease-in-out infinite alternate;
  transform-origin: right center;
}
.swimmer--rev .swim-card { border-radius: 40px 18px 18px 40px; }
.swimmer--rev .swim-card::before { left: auto; right: -22px; clip-path: polygon(100% 0, 0 50%, 100% 100%); transform-origin: left center; }
@keyframes bob { 50% { transform: translateY(-10px); } }
@keyframes tail { to { transform: scaleX(0.6); } }

.swim-art {
  flex: none; width: 64px; height: 64px; border-radius: 14px;
  display: grid; place-items: center;
  font-family: var(--pixel); font-size: 0.6rem; color: var(--abyss);
}
.swim-art--a { background: linear-gradient(135deg, var(--rose-light), var(--rose)); }
.swim-art--b { background: repeating-linear-gradient(45deg, var(--rose) 0 8px, var(--rose-deep) 8px 16px); color: var(--cream); }
.swim-art--c { background: radial-gradient(circle, var(--cream) 0 30%, var(--rose) 31%); }
.swim-art--d { background: var(--rose-deep); color: var(--cream); font-size: 1.2rem; }
.swim-body { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.swim-body h3 { font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; }
.swim-body p { font-size: 0.8rem; color: var(--muted); line-height: 1.4; }

.tank-open {
  position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-family: var(--pixel); font-size: 0.58rem; color: var(--muted); letter-spacing: 0.08em;
  z-index: 3; text-align: center;
}

/* ---------- character-select divisions -------------------------------- */
.division { transition: transform 0.25s var(--pop), background 0.2s ease; }
.division:hover { transform: translateY(-6px); }
.stats { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.stats li { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; font-family: var(--pixel); font-size: 0.5rem; color: var(--muted); }
.stats i { height: 8px; background: var(--abyss); border: 1px solid var(--line); position: relative; overflow: hidden; }
.stats i::after {
  content: ""; position: absolute; inset: 0; width: var(--v);
  background: repeating-linear-gradient(90deg, var(--rose) 0 6px, transparent 6px 8px);
  transform-origin: left; transform: scaleX(0);
  transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.is-seen .stats i::after { transform: scaleX(1); }

/* ---------- pipeline as level map ------------------------------------- */
.level-map .stage { position: relative; transition: transform 0.25s var(--pop); }
.level-map .stage:hover { transform: translateY(-6px); }


/* ---------- toast / easter egg --------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 95;
  transform: translate(-50%, calc(100% + 40px));
  visibility: hidden;
  padding: 14px 20px;
  background: var(--abyss); color: var(--cream);
  border: 2px solid var(--rose);
  border-radius: 10px;
  font-family: var(--pixel); font-size: 0.6rem; line-height: 1.6;
  box-shadow: 4px 4px 0 var(--rose-deep);
  transition: transform 0.35s var(--pop), visibility 0.35s;
  max-width: calc(100vw - 32px);
}
.toast.is-on { transform: translate(-50%, 0); visibility: visible; }
.fish-rain {
  position: fixed; top: -80px; z-index: 96; width: 64px; pointer-events: none;
  animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(calc(100vh + 160px)) rotate(540deg); } }

/* ---------- responsive + reduced motion ------------------------------- */
@media (max-width: 700px) {
  .hud { gap: 10px 18px; font-size: 0.52rem; }
  .hud-hi { margin-left: 0; }
  .now-tank { height: 520px; }
  .now-bubble { --s: 100px !important; font-size: 0.48rem; }
  .tank { height: 520px; }
  .swim-card { width: 250px; }
  .swimmer { top: calc(30px + var(--row) * 120px); }
}

@media (prefers-reduced-motion: reduce) {
  /* The owners want the tank, ticker and bubbles moving for everyone.
     Only the small decorative loops calm down. */
  .blink, .speech, .tank::before, .tank-weed { animation: none; }
  .stats i::after { transition: none; transform: scaleX(1); }
}

/* ---------- press-start mini game (plays inside the hero) ------------- */
.play-field { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.hero.is-playing .play-field { pointer-events: auto; cursor: crosshair; }
.hero.is-playing .hero-inner { opacity: 0.18; filter: blur(2px); pointer-events: none; transition: opacity 0.3s, filter 0.3s; }
.hero .hero-inner { transition: opacity 0.3s, filter 0.3s; }
.hero.is-playing .hud { z-index: 7; }
.hud-time b { color: var(--cream); }
.hud-time.is-low b { color: var(--rose); animation: blink 0.5s steps(1) infinite; }

.target {
  position: absolute; bottom: -90px;
  border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid var(--rose-light);
  background: radial-gradient(circle at 32% 28%, rgba(243,241,236,0.6) 0 12%, rgba(201,119,109,0.3) 13% 60%, rgba(126,67,64,0.4));
  box-shadow: var(--glow);
  animation: target-rise linear forwards;
}
.target--gold {
  border: 0; background: none; box-shadow: none;
  filter: drop-shadow(0 0 12px #E3A79B) saturate(1.4) brightness(1.2);
}
.target--gold img { width: 100%; pointer-events: none; }
@keyframes target-rise {
  0% { transform: translate(0, 0); }
  50% { transform: translate(var(--sway), -55vh); }
  100% { transform: translate(0, -120vh); }
}
.float-score {
  position: absolute; z-index: 8; pointer-events: none;
  font-family: var(--pixel); font-size: 0.7rem; color: var(--rose-light); text-shadow: var(--glow);
  animation: float-up 0.8s ease-out forwards;
}
@keyframes float-up { to { transform: translateY(-50px); opacity: 0; } }

.game-overlay { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; pointer-events: none; }
.game-overlay[hidden] { display: none; }
.game-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; pointer-events: auto; }
.game-big { font-family: var(--pixel); font-size: clamp(2rem, 8vw, 4.5rem); color: var(--rose-light); text-shadow: 4px 4px 0 var(--rose-deep), var(--glow); animation: bump 0.4s var(--pop); }
.game-sub { font-family: var(--pixel); font-size: 0.7rem; color: var(--cream); line-height: 1.8; }
.game-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.game-actions[hidden] { display: none; }

/* ---------- contact --------------------------------------------------- */
.contact-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.contact-mail { font-size: 0.72rem; text-transform: none; }
.contact-links { display: flex; gap: 28px; font-family: var(--pixel); font-size: 0.6rem; }
.contact-links a { color: var(--rose-light); }
.contact-links a:hover { color: var(--cream); }


/* real app icons are images, not coloured tiles */
img.swim-art { object-fit: cover; }

/* hero fish is a transparent video now */
.fish-video { display: block; width: 100%; height: auto; pointer-events: none; }

/* ---------- socials: brand icons filled with the rose gradient -------- */
.socials { display: flex; flex-wrap: wrap; gap: 12px; }
.socials--big { justify-content: center; gap: 16px; margin-top: 8px; }
.social {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 4px 0 var(--abyss);
  transition: transform 0.2s var(--pop), border-color 0.2s ease, box-shadow 0.2s ease;
}
.socials--big .social { width: 60px; height: 60px; border-radius: 16px; }
.social-ico {
  /* the icon shape is a mask; the gradient shows through it. --ico is set
     in the markup but resolves relative to this file, hence ../img/ */
  width: 50%; height: 50%;
  background: linear-gradient(135deg, var(--cream) 0%, var(--rose-light) 30%, var(--rose) 65%, var(--rose-deep) 100%);
  background-size: 200% 200%;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
  transition: background-position 0.4s ease;
}
.social:hover, .social:focus-visible {
  transform: translateY(-4px) rotate(-4deg);
  border-color: var(--rose);
  box-shadow: 0 6px 0 var(--rose-deep), var(--glow);
}
.social:hover .social-ico, .social:focus-visible .social-ico { background-position: 100% 100%; }
/* footer column links are styled as a text list; undo that for the icons */
.foot-col .socials { display: grid; grid-template-columns: repeat(3, 40px); gap: 10px; }
.foot-col a.social { display: grid; width: 40px; height: 40px; padding: 0; flex: none; }

/* HUD goal counter turns bright once the level target is reached */
.hud-goal b { color: var(--cream); }
.hud-goal.is-met b { color: var(--rose-light); }

/* ---------- touch: no blue tap box / long-press select on phones ----- */
html { -webkit-tap-highlight-color: transparent; }
.fish-btn, .fish-video, .hero-fish, .play-field, .target, .swimmer,
.social, .btn, .hud, .speech {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.fish-btn img, .fish-video, .target img, .swim-art { -webkit-user-drag: none; pointer-events: none; }
.play-field, .target { touch-action: manipulation; }

/* ---------- store badges on the tank cards ---------------------------
   White = the app is on that store, grey = not on it. */
.plats { display: flex; gap: 10px; margin-top: 2px; }
.plat {
  width: 16px; height: 16px;
  background: var(--cream);
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}
.plat.is-off { background: var(--muted); opacity: 0.35; }
/* cards grew a store row: give each swim lane more room */
.tank { height: 680px; }
.swimmer { top: calc(30px + var(--row) * 196px); }
@media (max-width: 700px) {
  .tank { height: 600px; }
  .swimmer { top: calc(24px + var(--row) * 170px); }
}

/* ---------- app details popup (a big bubble in the middle) ---------- */
.app-dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 32px 28px 28px;
  border: 2px solid var(--rose);
  border-radius: 32px;
  background:
    radial-gradient(circle at 18% 12%, rgba(243, 241, 236, 0.10), transparent 40%),
    var(--surface);
  color: var(--cream);
  box-shadow: 8px 8px 0 var(--rose-deep), 0 0 60px rgba(201, 119, 109, 0.35);
}
.app-dialog[open] { animation: dlg-pop 0.35s var(--pop); }
.app-dialog::backdrop { background: rgba(5, 5, 7, 0.72); backdrop-filter: blur(3px); }
@keyframes dlg-pop { from { transform: scale(0.6); opacity: 0; } }
.app-dlg-close {
  position: absolute; top: 14px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--abyss); color: var(--cream);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.app-dlg-close:hover, .app-dlg-close:focus-visible { border-color: var(--rose); color: var(--rose-light); }
.app-dlg-head { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.app-dlg-head img { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 5px 0 var(--rose-deep); }
.app-dlg-head h3 { font-family: var(--display); font-size: 1.4rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.app-dialog p { color: #C8C0BD; line-height: 1.6; margin-bottom: 22px; }
.app-dlg-stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 12px;
  background: var(--cream); color: var(--abyss);
  font-family: var(--display); font-size: 0.95rem;
  box-shadow: 0 4px 0 var(--rose-deep);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.store-btn small { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.store-btn i {
  width: 22px; height: 22px; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}
a.store-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--rose-deep), var(--glow); }
.store-btn.is-soon { background: var(--abyss); color: var(--muted); border: 1px dashed var(--line); box-shadow: none; }
.swimmer { cursor: pointer; }

/* ---------- what's new: retro patch-notes feed ----------------------- */
.news-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.news-item {
  position: relative;
  display: grid;
  grid-template-columns: 120px 90px 1fr;
  gap: 8px 24px;
  align-items: baseline;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--abyss);
  transition: transform 0.2s var(--pop), border-color 0.2s ease;
}
.news-item:hover { transform: translateX(6px); border-color: var(--rose-deep); }
.news-item:first-child { border-color: var(--rose); box-shadow: 4px 4px 0 var(--rose-deep), var(--glow); }
.news-item:first-child::before {
  content: "NEW!";
  position: absolute; top: -10px; left: 16px;
  padding: 4px 8px; border-radius: 6px;
  background: var(--rose); color: var(--abyss);
  font-family: var(--pixel); font-size: 0.5rem;
  animation: blink 1.4s steps(1) infinite;
}
.news-item time { font-family: var(--pixel); font-size: 0.55rem; color: var(--muted); letter-spacing: 0.06em; }
.news-tag {
  justify-self: start;
  font-family: var(--pixel); font-size: 0.5rem; letter-spacing: 0.06em;
  padding: 5px 8px; border-radius: 6px; border: 1px solid currentColor;
}
.tag--studio  { color: var(--rose-light); }
.tag--app     { color: #8FC7A6; }
.tag--game    { color: #D8B87C; }
.tag--content { color: var(--cream); }
.news-body h3 { font-family: var(--display); font-size: 1.1rem; font-weight: 400; letter-spacing: 0.04em; margin-bottom: 6px; }
.news-body p { color: #B8B0AD; font-size: 0.95rem; }
@media (max-width: 700px) {
  .news-item { grid-template-columns: auto 1fr; }
  .news-body { grid-column: 1 / -1; }
}

/* footer: just the centred wordmark + slogan above the legal line */
.site-foot .foot-top { display: flex; justify-content: center; text-align: center; }
.site-foot .foot-brand { display: flex; flex-direction: column; align-items: center; }
.site-foot .foot-bottom { justify-content: center; text-align: center; }

/* ---------- legal pages (privacy / terms / data-deletion) ------------ */
.legal-wrap { max-width: 760px; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 14px 0 10px; }
.legal-meta { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); }
.legal-draft {
  margin: 18px 0 8px; padding: 12px 16px; border-radius: 10px;
  border: 1px dashed var(--rose-deep); color: var(--rose-light); font-size: 0.9rem;
}
.legal section { padding-top: 32px; }
.legal h2 { font-size: 1.35rem; margin-bottom: 12px; }
.legal h3 { font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 22px 0 8px; color: var(--rose-light); }
.legal p, .legal li { color: #C8C0BD; line-height: 1.7; }
.legal p + p { margin-top: 12px; }
.legal ul, .legal ol { padding-left: 22px; margin: 10px 0; display: grid; gap: 6px; }
.legal a { color: var(--rose-light); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--cream); }
.legal-facts { list-style: none; padding: 0 !important; border-top: 1px solid var(--line-soft); }
.legal-facts li { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.legal-facts span { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
@media (max-width: 560px) { .legal-facts li { grid-template-columns: 1fr; gap: 2px; } }

/* footer legal links */
.foot-legal { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.foot-legal a { color: var(--muted); }
.foot-legal a:hover { color: var(--rose-light); }
.site-foot .foot-bottom { flex-direction: column; align-items: center; gap: 10px; }

/* fourth swim lane (7+ apps) */
.tank { height: 900px; }
@media (max-width: 700px) { .tank { height: 810px; } }

/* ---------- touch screens: no "sticky hover" ------------------------
   Phones keep :hover after a tap, which left the social icons and the
   email button glowing red until you tapped elsewhere. On devices with
   no real hover, hover styles snap back to each element's normal look.
   (Keyboard :focus-visible styles are untouched.) */
@media (hover: none) {
  .social:hover {
    transform: none;
    border-color: var(--line);
    box-shadow: 0 4px 0 var(--abyss);
  }
  .social:hover .social-ico { background-position: 0 0; }
  .btn:hover { background: transparent; border-color: var(--rose-deep); color: var(--rose-light); }
  .btn--solid:hover { background: var(--rose); border-color: var(--rose); color: var(--abyss); }
  .btn--ghost:hover { background: transparent; border-color: var(--line); color: #C8C0BD; }
  .btn--game:hover {
    background: var(--rose); border-color: var(--rose); color: var(--abyss);
    transform: none; box-shadow: 0 5px 0 var(--rose-deep), var(--glow);
  }
  a.store-btn:hover { transform: none; box-shadow: 0 4px 0 var(--rose-deep); }
  .news-item:hover { transform: none; border-color: var(--line); }
  .news-item:first-child:hover { border-color: var(--rose); }
  .fish-btn:hover, .division:hover, .level-map .stage:hover { transform: none; }
}