@font-face{font-family:"Yunofish Brand";src:url(/assets/fonts/yunofish-brand.woff2) format("woff2");font-weight:900;font-display:block}
:root{
  /* deep-water dark theme, chartreuse as the bioluminescent accent (glenmore.store lineage) */
  --bg:#06171b; --bg-2:#0b2227; --bg-3:#041013; --surface:#0e262b;
  --ink:#eaf3f0; --ink-2:#9fb4b1; --ink-3:#6d8380;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.15);
  --lime:#c7e52e; --lime-deep:#b2cf22; --on-lime:#0c1206;
  --glass:rgba(8,26,29,.62);
  --r-surface:16px; --r-inner:8px; --r-pill:999px;
  --ease-out:cubic-bezier(0.23,1,0.32,1);--r:16px;
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --z-tank:0; --z-scrim:1; --z-overlay:3; --z-nav:100;
}
*{box-sizing:border-box; margin:0}
html,body{height:100%}
body{
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"cv11","ss01"; line-height:1.5;
}
a{color:inherit}
/* submerged depth: faint light from the surface + darkness at the floor, fixed behind content */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(120,200,188,.10), transparent 55%),
    radial-gradient(100% 60% at 50% 120%, rgba(4,14,17,.9), transparent 60%);
}

/* ---------- motion scaffolding (JS-gated so content ships visible) ---------- */
.reveal{opacity:1}
html.motion .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out)}
html.motion .reveal.in{opacity:1; transform:none}
html.motion .reveal[data-d="1"]{transition-delay:.07s}
html.motion .reveal[data-d="2"]{transition-delay:.14s}
html.motion .reveal[data-d="3"]{transition-delay:.21s}
html.motion .reveal[data-d="4"]{transition-delay:.28s}
@media (prefers-reduced-motion:reduce){ html.motion .reveal{opacity:1; transform:none; transition:none} }

/* ---------- buttons ---------- */
.btn{
  font:inherit; font-size:13px; font-weight:600; letter-spacing:.01em;
  text-decoration:none; display:inline-block; text-align:center;
  border-radius:var(--r-pill); cursor:pointer;
  transition:transform .16s var(--ease-out), background-color .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out), color .2s var(--ease-out);
}
.btn:active{transform:scale(0.97)}
.btn-lime{background:var(--lime); color:var(--on-lime); border:1px solid var(--lime); padding:9px 17px}
.btn-outline{background:transparent; color:var(--lime); border:1px solid var(--lime); padding:7px 16px}
.btn-glass{color:var(--ink); border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.1); backdrop-filter:blur(8px) saturate(140%); padding:9px 18px}
@media (hover:hover) and (pointer:fine){
  .btn-lime:hover{background:var(--lime-deep); border-color:var(--lime-deep); box-shadow:0 10px 26px -14px rgba(0,0,0,.7)}
  .btn-outline:hover{background:rgba(199,229,46,.12)}
  .btn-glass:hover{background:rgba(255,255,255,.2); border-color:#fff}
}

/* ---------- header (transparent over tank, dark glass on scroll) ---------- */
header.top{
  position:fixed; top:0; left:0; right:0; z-index:calc(var(--z-nav) + 20);
  display:flex; align-items:center; gap:11px; padding:clamp(11px,1.6vw,16px) clamp(14px,3vw,26px);
  color:var(--ink); background:transparent; border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease-out), backdrop-filter .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
/* scrolled past the hero: the tank HUD goes away, a glass nav bar fades in */
body.scrolled header.top{
  background:linear-gradient(140deg, rgba(255,255,255,.12), rgba(255,255,255,.045) 60%, rgba(255,255,255,.09));
  -webkit-backdrop-filter:blur(12px) saturate(180%) brightness(1.04);
  backdrop-filter:blur(12px) saturate(180%) brightness(1.04) url(#liquid-glass);
  border-bottom:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 30px -16px rgba(0,0,0,.55);
}
.top-nav{display:flex; align-items:center; gap:22px; margin-left:auto; font-size:14px; font-weight:500;
  opacity:0; transform:translateY(-5px); pointer-events:none; transition:opacity .3s var(--ease-out), transform .3s var(--ease-out)}
.top-nav a{color:#e9f2ef; text-decoration:none; text-shadow:0 1px 8px rgba(0,0,0,.35)} .top-nav a:hover{color:var(--lime)}
.top-cta{display:inline-flex; align-items:center; height:32px; box-sizing:border-box; text-decoration:none; font-size:13px; font-weight:600; border-radius:999px; padding:0 17px;
  background:var(--lime); color:var(--on-lime); opacity:0; transform:translateY(-5px); pointer-events:none;
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out), background-color .2s var(--ease-out)}
.top-cta:hover{background:var(--lime-deep)}
body.scrolled .top-nav, body.scrolled .top-cta{opacity:1; transform:none; pointer-events:auto}
body.scrolled .tankhud{opacity:0; visibility:hidden; pointer-events:none}
@media (max-width:820px){ .top-nav{display:none} }
.hero.entered header.top .hero-brand{opacity:0; transform:translateX(-6px); transition:opacity .3s var(--ease-out), transform .3s var(--ease-out)}
/* drawer trigger: a plain hamburger. The wordmark is the only logo in the header (Guido 2026-09-18:
   the Y mark is for social and the favicon only) */
.fish-toggle{
  width:36px; height:36px; border-radius:50%; border:0; cursor:pointer; padding:0; flex:none;
  display:flex; align-items:center; justify-content:center; color:#fff; background:transparent;
  transition:transform .2s var(--ease-out), background-color .2s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){ .fish-toggle:hover{background:rgba(255,255,255,.1)} }
.fish-toggle:active{transform:scale(.94)}
.hero-brand{font-family:"Yunofish Brand","Nunito",system-ui,sans-serif; font-size:17px; font-weight:900; letter-spacing:.024em; color:#fff; text-shadow:0 1px 14px rgba(0,0,0,.6); user-select:none}
.hero-brand .dot{color:var(--lime)}
.menu-ico{display:block; width:20px; height:20px}
@media (max-width:820px){
  .top-cta{margin-left:auto}                       /* right-align the header CTA (the top-nav that used to push it is hidden on mobile) */
}
/* (the "rotate your phone" nudge is gone: portrait is a first-class builder layout now — the bar is one
   row of pills and the catalog opens as a full-width grid sheet, so landscape is no longer required) */

/* frosted-glass tank status HUD (top-right): pause + live readings */
.tankhud{
  position:fixed; z-index:calc(var(--z-nav) + 20); top:clamp(13px,2.6vw,20px); right:clamp(13px,2.6vw,22px);
  display:flex; align-items:center; gap:9px; padding:5px 11px 5px 6px;
  background:rgba(18,32,30,.42); backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.12); border-radius:13px;
  box-shadow:0 10px 34px -14px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.16);
  transition:opacity .3s var(--ease-out), visibility .3s var(--ease-out);
}
.hud-pause{
  width:28px; height:28px; flex:none; border-radius:50%; padding:0; cursor:pointer; color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.15);
  transition:background-color .18s var(--ease-out), transform .15s var(--ease-out);
}
.hud-pause:active{transform:scale(.93)}
@media (hover:hover) and (pointer:fine){ .hud-pause:hover{background:rgba(255,255,255,.18)} }
.hud-pause .ic{width:13px; height:13px}
.hud-pause .ic-play{display:none; margin-left:1px}
.hud-pause.is-paused .ic-pause{display:none}
.hud-pause.is-paused .ic-play{display:block}
.hud-div{width:1px; height:20px; background:rgba(255,255,255,.13)}
.hud-metrics{display:flex; gap:13px}
.hud-m{display:flex; flex-direction:column; align-items:center; gap:1px; line-height:1.05}
.hud-v{font-size:12.5px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.hud-k{font-size:8px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3)}
@media (max-width:560px){ .tankhud{gap:7px; padding:4px 9px 4px 5px} .hud-metrics{gap:10px} .hud-pause{width:25px; height:25px} .hud-pause .ic{width:12px; height:12px} .hud-v{font-size:11.5px} .hud-div{height:18px} }

/* slide-out drawer */
.drawer-backdrop{position:fixed; inset:0; z-index:calc(var(--z-nav) + 10); background:rgba(3,10,12,.5);
  backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .3s var(--ease-out), visibility .3s}
body.drawer-open .drawer-backdrop{opacity:1; visibility:visible}
.drawer{
  position:fixed; top:0; left:0; bottom:0; width:min(346px, 88vw); z-index:calc(var(--z-nav) + 15);
  display:flex; flex-direction:column; gap:14px; padding:84px 18px 22px; overflow-y:auto;
  background:color-mix(in srgb, var(--bg) 93%, transparent); backdrop-filter:blur(22px) saturate(150%);
  border-right:1px solid var(--line-2); box-shadow:44px 0 90px -40px rgba(0,0,0,.85);
  transform:translateX(-102%); transition:transform .36s cubic-bezier(0.32,0.72,0,1);
}
body.drawer-open .drawer{transform:none}
@media (prefers-reduced-motion:reduce){ .drawer{transition:transform .001s} }
.drawer-nav{display:flex; flex-direction:column}
.drawer-nav a{color:var(--ink-2); text-decoration:none; font-size:15px; font-weight:500; padding:11px 6px;
  border-bottom:1px solid var(--line); transition:color .18s var(--ease-out), transform .18s var(--ease-out)}
.drawer-nav a:first-child{border-top:1px solid var(--line)}
/* the hover nudge slides on TRANSFORM, not padding-left — padding is a layout property, so animating it
   reflowed the row on every hover for the same visual result */
@media (hover:hover) and (pointer:fine){ .drawer-nav a:hover{color:var(--lime); transform:translateX(6px)} }
.drawer-cta{width:100%; padding:11px; font-size:14px; margin:2px 0 4px}
.drawer .panel{background:rgba(255,255,255,.03); backdrop-filter:none; box-shadow:none; border-color:var(--line)}
.brand{display:flex; align-items:center; gap:2px; font-family:"Yunofish Brand","Nunito",system-ui,sans-serif; font-size:19px; font-weight:900; letter-spacing:.024em; color:var(--ink)}
.brand .dot{color:var(--lime)}
nav.top-links{display:flex; align-items:center; gap:clamp(16px,2.4vw,30px); font-size:14px}
nav.top-links a{color:rgba(234,243,240,.78); text-decoration:none; transition:color .2s var(--ease-out)}
nav.top-links a.btn-lime{color:var(--on-lime)}   /* keep the chartreuse button's dark text (nav rule was overriding) */
@media (hover:hover) and (pointer:fine){ nav.top-links a:hover{color:var(--lime)} }
/* mega-menu */
.nav-item{position:static}
.nav-item > a{cursor:pointer}
.mega{
  position:fixed; left:0; right:0; top:66px; z-index:99;
  background:color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter:blur(16px) saturate(150%);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  box-shadow:0 34px 66px -34px rgba(0,0,0,.85);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility .2s;
  padding:30px clamp(18px,4vw,48px) 36px;
}
.nav-item:hover .mega, .mega:hover{opacity:1; visibility:visible; transform:none}
.mega-inner{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px}
.mega-col h5{font-size:11px; letter-spacing:.16em; color:var(--ink-3); font-weight:600; margin-bottom:12px}
.mega-col > a{display:block; color:var(--ink-2); font-size:14px; padding:6px 0}
.mega-col > a:hover{color:var(--lime)}
.mega-fish{display:grid; grid-template-columns:repeat(2,1fr); gap:2px 18px}
.mega-fish a{display:flex; align-items:center; gap:10px; color:var(--ink-2); font-size:14px; padding:6px 0}
.mega-fish a:hover{color:var(--lime)}
.mega-fish img{width:34px; height:34px; object-fit:contain; flex:none; border-radius:7px}
.mega-col > a.mega-all{display:inline-block; margin-top:12px; color:var(--lime); font-size:13px; font-weight:600}
.mega-feat{border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--bg-2); align-self:start; transition:border-color .2s var(--ease-out)}
.mega-feat:hover{border-color:rgba(199,229,46,.45)}
.mega-feat img{width:100%; aspect-ratio:1/1; height:auto; object-fit:cover; display:block}
.mega-feat .fl{padding:12px 14px; font-size:14px; font-weight:600; display:flex; justify-content:space-between}
.mega-feat .fl span{color:var(--lime)}
/* header stays a bare floating toggle; no solid bar needed */

/* ---------- full-bleed living hero ---------- */
.hero{position:relative; width:100%; height:100svh; min-height:560px; overflow:hidden; background:#06181c}
/* ---------- build mode is its own screen ----------
   Browsing, the tank is the hero of a homepage you scroll past. Building, it TAKES OVER: the hero goes
   fixed full-viewport, the page beneath is locked, and the site chrome steps out of the way. So there
   is a real entry ("Build a tank") and a real exit ("Done") instead of a half-scrolled page behind the
   tank. Scroll position is remembered on entry and restored on exit. */
/* SCROLL LOCK. `overflow:hidden` on html/body is NOT honoured by mobile Safari — the document keeps
   scrolling underneath and you can reach the homepage from inside the builder. The only lock that
   holds everywhere is taking the body OUT OF FLOW: a fixed, viewport-sized body has no scroll range at
   all, so there is nothing to scroll. The page position is saved on entry and restored on exit, which
   is what makes this safe (a fixed body otherwise loses your place).
   NOTE: do NOT add touch-action:none here. Effective touch-action is the INTERSECTION with every
   ancestor, so a descendant cannot re-enable it — it would kill the sheet's scrolling and the pill
   row's horizontal scroll. A fixed body already has no scroll range; overscroll-behavior handles the
   rubber-band. */
html.building{overflow:hidden; overscroll-behavior:none}
body.building{position:fixed; inset:0; width:100%; overflow:hidden; overscroll-behavior:none}
/* height:auto is LOAD-BEARING. `inset:0` + `height:100svh` over-constrains a fixed box and the height
   wins, so the hero covered only the top 100svh — and on a phone svh is the viewport WITH the browser
   chrome showing, while the pills bar is fixed to the real viewport bottom. That left homepage you
   could scroll to below the hero, and a band of page background between the hero and the bar. Letting
   top:0/bottom:0 size it means the hero and the bar share one containing block and cannot disagree. */
body.building .hero{position:fixed; inset:0; width:auto; height:auto; min-height:0; z-index:calc(var(--z-nav) + 5)}
/* the scrim's bottom fade exists to blend the hero INTO the page below it. In build mode there is no
   page below, so on a short screen it just amputates the bottom of the tank. Keep the top vignette. */
body.building .hero-scrim{
  background:
    linear-gradient(180deg, rgba(3,14,17,.6) 0%, rgba(3,14,17,0) 20%, rgba(3,14,17,0) 78%, rgba(4,17,20,.28) 100%),
    radial-gradient(130% 80% at 12% 100%, rgba(3,14,17,.42), rgba(3,14,17,0) 58%);
}
body.building header.top,
body.building .scroll-cue{opacity:0; visibility:hidden; pointer-events:none; transition:opacity .25s var(--ease-out), visibility .25s}
/* the plant resize grip is a fixed DOM overlay living OUTSIDE the hero — keep it above the takeover */
body.building .resize-grip{z-index:calc(var(--z-nav) + 30)}
/* PIXI sets touch-action:none inline on the canvas -> !important to override it.
   Browsing: a vertical swipe scrolls the page instead of being trapped. Building: full touch for drag-and-place. */
#tank{position:absolute; inset:0; display:block; z-index:var(--z-tank); touch-action:pan-y !important}
.hero.building #tank{touch-action:none !important}
.hero-scrim{
  position:absolute; inset:0; z-index:var(--z-scrim); pointer-events:none;
  background:
    linear-gradient(180deg, rgba(3,14,17,.6) 0%, rgba(3,14,17,0) 18%, rgba(3,14,17,0) 44%, rgba(6,23,27,.45) 72%, var(--bg) 100%),
    radial-gradient(130% 80% at 12% 100%, rgba(3,14,17,.6), rgba(3,14,17,0) 55%);
}
.stage-loading{
  position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:radial-gradient(120% 85% at 50% 42%, #0c2b31, #06181c 72%); transition:opacity .6s var(--ease-out);
}
.ldr{position:relative; display:flex; flex-direction:column; align-items:center; gap:22px}
/* loader: the Yunofish mark swims a calm patrol with a gentle bob + glow (replaces the old rising bubbles) */
.ldr-fish{position:relative; width:186px; height:60px}
.lf-swim{position:absolute; top:50%; left:50%; animation:lf-patrol 3.6s ease-in-out infinite}
.lf-body{display:block; width:46px; height:46px; color:var(--lime); filter:drop-shadow(0 0 10px rgba(199,229,46,.5)); animation:lf-bob 1.05s ease-in-out infinite}
@keyframes lf-patrol{
  0%  {transform:translate(calc(-50% - 66px),-50%) scaleX(1)}
  44% {transform:translate(calc(-50% + 66px),-50%) scaleX(1)}
  50% {transform:translate(calc(-50% + 66px),-50%) scaleX(-1)}
  94% {transform:translate(calc(-50% - 66px),-50%) scaleX(-1)}
  100%{transform:translate(calc(-50% - 66px),-50%) scaleX(1)}}
@keyframes lf-bob{0%,100%{transform:translateY(-3px) rotate(-4deg)} 50%{transform:translateY(3px) rotate(4deg)}}
.ldr-txt{font-size:12px; letter-spacing:.24em; text-transform:uppercase; font-weight:500;
  background:linear-gradient(90deg, rgba(191,228,221,.35), #c7e52e 50%, rgba(191,228,221,.35)); background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  animation:ldr-shimmer 2.4s linear infinite}
@keyframes ldr-shimmer{0%{background-position:200% 0} 100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){ .lf-swim,.lf-body{animation:none} .lf-swim{transform:translate(-50%,-50%)} .ldr-txt{animation:none; -webkit-text-fill-color:#c7e52e; color:#c7e52e} }
.hero-copy{position:absolute; z-index:var(--z-overlay); left:clamp(14px,3vw,24px); bottom:clamp(20px,5vh,32px);
  max-width:min(560px,88vw); padding:clamp(20px,2vw,26px) clamp(22px,2.2vw,30px); border:1px solid rgba(255,255,255,.18); border-radius:22px; overflow:hidden;
  background:linear-gradient(140deg, rgba(22,42,46,.5), rgba(9,22,26,.42));
  -webkit-backdrop-filter:blur(11px) saturate(165%) brightness(1.05);
  backdrop-filter:blur(11px) saturate(165%) brightness(1.05) url(#liquid-glass);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.42), inset 0 0 30px rgba(255,255,255,.05), 0 30px 60px -30px rgba(0,0,0,.72)}
.hero-copy::before{content:''; position:absolute; left:0; right:0; top:0; height:46%; pointer-events:none; border-radius:inherit; background:linear-gradient(180deg, rgba(255,255,255,.16), transparent); opacity:.75}
.hero-copy > *{position:relative; z-index:1}
.hero-copy h1{
  font-size:clamp(26px,3.2vw,38px); line-height:1.1; letter-spacing:-.02em; font-weight:600;
  color:#fff; text-wrap:balance; text-shadow:0 2px 34px rgba(0,0,0,.4);
}
.hero-copy .sub{
  margin-top:13px; font-size:13.5px; color:rgba(234,243,240,.9);
  line-height:1.5; text-wrap:pretty; text-shadow:0 1px 22px rgba(0,0,0,.4);
}
.hero-copy .hero-cta{margin-top:22px; font-size:14px}
/* macOS liquid-glass scroll cue — signals there's a whole site below the tank */
.scroll-cue{position:absolute; right:clamp(16px,3vw,30px); bottom:clamp(18px,4vh,30px); z-index:var(--z-overlay);
  display:inline-flex; align-items:center; gap:9px; cursor:pointer; border:1px solid rgba(255,255,255,.28); border-radius:999px;
  padding:9px 17px; color:#fff; font-size:12.5px; font-weight:500; letter-spacing:.02em; overflow:hidden;
  background:linear-gradient(140deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 55%, rgba(255,255,255,.11));
  -webkit-backdrop-filter:blur(6px) saturate(180%) brightness(1.1);
  backdrop-filter:blur(6px) saturate(180%) brightness(1.1) url(#liquid-glass);
  box-shadow:inset 0 1px 1.5px rgba(255,255,255,.6), inset 0 -1px 3px rgba(255,255,255,.14), inset 0 0 18px rgba(255,255,255,.08), 0 10px 30px -10px rgba(0,0,0,.5);
  text-shadow:0 1px 10px rgba(0,0,0,.5); transition:opacity .3s var(--ease-out), border-color .2s var(--ease-out)}
.scroll-cue::before{content:''; position:absolute; left:0; right:0; top:0; height:52%; pointer-events:none; border-radius:inherit; background:linear-gradient(180deg, rgba(255,255,255,.3), transparent); opacity:.8}
.scroll-cue span, .scroll-cue .sc-chev{position:relative; z-index:1}
.scroll-cue .sc-chev{width:15px; height:15px; opacity:.92; animation:cue-bob 2.4s ease-in-out infinite}
@media (hover:hover) and (pointer:fine){ .scroll-cue:hover{border-color:rgba(255,255,255,.5)} }
@keyframes cue-bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)}}
.hero.entered .scroll-cue{opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s var(--ease-out), visibility .3s}
@media (prefers-reduced-motion:reduce){ .scroll-cue .sc-chev{animation:none} }
@media (max-width:700px){ .scroll-cue{display:none} }   /* redundant on phones — drop it */

/* right-side stack: build sheet + a discreet control panel, same width, over the aquascape */
.hero-right{position:absolute; z-index:var(--z-overlay); top:88px; right:clamp(16px,3vw,28px); width:252px; display:flex; flex-direction:column; gap:12px}
.panel{
  background:var(--glass); backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--line-2); border-radius:14px; color:var(--ink);
  box-shadow:0 26px 54px -22px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
}
.sheet{padding:15px 16px}
.sheet h3{font-size:11px; font-weight:600; letter-spacing:.16em; color:var(--lime); margin-bottom:11px}
.sheet .row{display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:13px; color:var(--ink-2); padding:6px 0; border-top:1px solid var(--line)}
.sheet .row:first-of-type{border-top:0}
.sheet .row .n{color:var(--ink)}
.sheet .row a.slink{text-decoration:none; cursor:pointer}
@media (hover:hover) and (pointer:fine){ .sheet .row a.slink:hover{color:var(--lime)} }
.sheet .row a.slink::after{content:"›"; margin-left:5px; color:var(--ink-3); font-size:12px}
.sheet .row .p{color:var(--ink-3); font-size:12px; font-variant-numeric:tabular-nums}
.sheet .total{display:flex; justify-content:space-between; align-items:baseline; margin-top:11px; padding-top:11px; border-top:1px solid var(--line-2); font-size:14px; color:var(--ink)}
.sheet .total b{font-weight:600; font-size:16px; color:var(--lime); font-variant-numeric:tabular-nums}
.sheet .buy{margin-top:13px; width:100%; padding:7px}
.sheet .fine{margin-top:9px; font-size:10.5px; color:var(--ink-3); line-height:1.45}

/* discreet control panel: spec-table rows (label left, control right), small + quiet */
.controls{padding:11px 16px 12px}
.controls h3{font-size:10.5px; font-weight:600; letter-spacing:.16em; color:var(--ink-3); margin-bottom:5px}
.crow{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; border-top:1px solid var(--line); font-size:12.5px}
.crow:first-of-type{border-top:0}
.crow .ck{color:var(--ink-2)}
.crow .cv{color:var(--ink-3); font-variant-numeric:tabular-nums}
.cbtn{
  font:inherit; font-size:12.5px; font-weight:500; color:var(--ink); background:none; border:0; padding:0; margin:0;
  cursor:pointer; letter-spacing:.01em; transition:color .18s var(--ease-out), transform .16s var(--ease-out);
}
.cbtn:active{transform:scale(0.96)}
@media (hover:hover) and (pointer:fine){ .cbtn:hover{color:var(--lime)} }

/* ---------- My Tanks modal (save / load builds) ---------- */
.pal-act--save{color:var(--on-lime); background:var(--lime); border-color:var(--lime)}
@media (hover:hover) and (pointer:fine){ .pal-act--save:hover{color:var(--on-lime); background:var(--lime-deep); border-color:var(--lime-deep)} }
.tk-modal-bg{position:fixed; inset:0; z-index:9999; background:rgba(3,10,12,.66); backdrop-filter:blur(7px);
  display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .25s var(--ease-out)}
.tk-modal-bg.open{opacity:1; visibility:visible}
.tk-modal{position:relative; width:100%; max-width:580px; max-height:88vh; overflow-y:auto;
  background:linear-gradient(162deg,rgba(120,200,188,.10),transparent 42%),var(--bg-2); border:1px solid var(--line-2);
  border-radius:22px; padding:30px 28px 26px; box-shadow:0 40px 90px -30px rgba(0,0,0,.75);
  transform:translateY(14px) scale(.985); transition:transform .3s var(--ease-out)}
.tk-modal-bg.open .tk-modal{transform:none}
.tk-modal::before{content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 55% at 50% -6%,rgba(120,200,188,.13),transparent 60%)}
.tk-modal > *{position:relative}
.tk-close{position:absolute; top:15px; right:15px; width:32px; height:32px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,.04); color:var(--ink-2); font-size:13px; cursor:pointer; display:grid; place-items:center; z-index:2;
  transition:color .16s var(--ease-out), border-color .16s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .tk-close:hover{color:var(--ink); border-color:var(--line-2)} }
.tk-head h2{font-size:24px; font-weight:600; letter-spacing:-.015em; color:var(--ink)}
.tk-head p{color:var(--ink-2); font-size:13.5px; margin-top:6px}
.tk-save{display:flex; gap:16px; margin:20px 0 4px; align-items:stretch}
.tk-preview{position:relative; flex:none; width:210px; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(180deg,#0d2a2f,#071a1e)}
.tk-preview img{width:100%; height:100%; object-fit:cover; display:block}
.tk-prev-tag{position:absolute; bottom:7px; left:7px; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:var(--on-lime); background:var(--lime); border-radius:999px; padding:3px 9px}
.tk-save-form{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:10px}
.tk-save-form input{width:100%; font:inherit; font-size:15px; color:var(--ink); background:rgba(255,255,255,.05);
  border:1px solid var(--line-2); border-radius:11px; padding:12px 14px; outline:none; transition:border-color .18s var(--ease-out)}
.tk-save-form input::placeholder{color:var(--ink-3)}
.tk-save-form input:focus{border-color:rgba(199,229,46,.55)}
.tk-savebtn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:14px; font-weight:600;
  color:var(--on-lime); background:var(--lime); border:0; border-radius:11px; padding:12px; cursor:pointer;
  transition:background-color .2s var(--ease-out), transform .14s var(--ease-out)}
.tk-savebtn:hover{background:var(--lime-deep)} .tk-savebtn:active{transform:scale(.98)}
.tk-list-head{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
  margin:20px 0 13px; padding-top:18px; border-top:1px solid var(--line)}
.tk-list{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.tk-empty{grid-column:1/-1; font-size:13px; color:var(--ink-3); line-height:1.6; text-align:center; padding:24px 12px}
.tk-card{border:1px solid var(--line); border-radius:13px; overflow:hidden; background:rgba(255,255,255,.02);
  display:flex; flex-direction:column; transition:border-color .18s var(--ease-out), transform .18s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .tk-card:hover{border-color:rgba(199,229,46,.4); transform:translateY(-2px)} }
.tk-card-img{aspect-ratio:16/9; background:linear-gradient(180deg,#0d2a2f,#071a1e); position:relative; overflow:hidden}
.tk-card-img img{width:100%; height:100%; object-fit:cover; display:block}
.tk-card-del{position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%; border:0;
  background:rgba(3,10,12,.62); color:#fff; font-size:12px; line-height:1; cursor:pointer; display:grid; place-items:center;
  opacity:0; transition:opacity .16s var(--ease-out), background-color .16s var(--ease-out)}
.tk-card:hover .tk-card-del{opacity:1} .tk-card-del:hover{background:#c0392b}
.tk-card-body{padding:9px 12px 11px; display:flex; align-items:center; justify-content:space-between; gap:8px}
.tk-card-info{min-width:0}
.tk-card-nm{font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tk-card-meta{font-size:10.5px; color:var(--ink-3); margin-top:1px}
.tk-load{flex:none; font:inherit; font-size:11.5px; font-weight:600; color:var(--lime); background:none;
  border:1px solid rgba(199,229,46,.4); border-radius:999px; padding:5px 13px; cursor:pointer; transition:background-color .16s var(--ease-out)}
.tk-load:hover{background:rgba(199,229,46,.14)}
@media (max-width:560px){ .tk-save{flex-direction:column} .tk-preview{width:100%} .tk-list{grid-template-columns:1fr} }

/* ---------- accounts + credits (monetization) ---------- */
/* the chartreuse credit gem, used everywhere a balance appears */
.cr{display:inline-block; color:var(--lime); font-weight:700; transform:translateY(.5px)}
/* nav account cluster: fades in with the rest of the scrolled nav */
.nav-acct{display:flex; align-items:center; gap:10px; opacity:0; transform:translateY(-5px); pointer-events:none;
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out)}
body.scrolled .nav-acct{opacity:1; transform:none; pointer-events:auto}
@media (max-width:820px){ .nav-acct{display:none} }
.acct-signin{font:inherit; font-size:13px; font-weight:500; color:#e9f2ef; background:none; border:0; cursor:pointer;
  text-shadow:0 1px 8px rgba(0,0,0,.35); padding:6px 2px; transition:color .2s var(--ease-out)}
.acct-signin:hover{color:var(--lime)}
.cr-pill{display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700; color:var(--ink);
  background:rgba(199,229,46,.13); border:1px solid rgba(199,229,46,.4); border-radius:999px; height:32px; box-sizing:border-box; padding:0 13px; cursor:pointer;
  font-variant-numeric:tabular-nums; transition:background-color .18s var(--ease-out), border-color .18s var(--ease-out)}
.cr-pill:hover{background:rgba(199,229,46,.2); border-color:rgba(199,229,46,.6)}
/* account = just the avatar circle; email + menu live in the dropdown (menu is a SIBLING, never nested in the button) */
.acct-wrap{position:relative; display:inline-flex}
.acct-chip{display:grid; place-items:center; padding:0; border:0; background:none; cursor:pointer; border-radius:50%;
  outline-offset:2px; -webkit-tap-highlight-color:transparent}
.acct-av{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700;
  color:var(--on-lime); background:var(--lime); text-transform:uppercase; box-shadow:0 0 0 0 rgba(199,229,46,.45);
  transition:box-shadow .18s var(--ease-out), transform .14s var(--ease-out)}
.acct-chip:hover .acct-av{box-shadow:0 0 0 3px rgba(199,229,46,.28)}
.acct-chip:active .acct-av{transform:scale(.94)}
/* account dropdown */
.acct-menu{position:absolute; top:calc(100% + 9px); right:0; width:230px; z-index:60;
  background:linear-gradient(162deg,rgba(120,200,188,.10),transparent 42%),var(--bg-2); border:1px solid var(--line-2);
  border-radius:16px; padding:14px; box-shadow:0 26px 60px -24px rgba(0,0,0,.75);
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98); transform-origin:top right;
  transition:opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility .18s}
.acct-menu.open{opacity:1; visibility:visible; transform:none}
.acct-menu .am-email{font-size:12px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:11px}
.acct-menu .am-bal{display:flex; align-items:baseline; gap:6px; padding:11px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.acct-menu .am-bal b{font-size:22px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums}
.acct-menu .am-bal span{font-size:12px; color:var(--ink-3)}
.acct-menu .am-buy{width:100%; margin-top:12px; font:inherit; font-size:13px; font-weight:600; color:var(--on-lime);
  background:var(--lime); border:0; border-radius:10px; padding:10px; cursor:pointer; transition:background-color .18s var(--ease-out)}
.acct-menu .am-buy:hover{background:var(--lime-deep)}
.acct-menu .am-links{display:flex; flex-direction:column; margin-top:6px}
.acct-menu .am-links button{text-align:left; font:inherit; font-size:13px; color:var(--ink-2); background:none; border:0; cursor:pointer;
  padding:9px 4px; border-radius:8px; transition:color .16s var(--ease-out), background-color .16s var(--ease-out)}
.acct-menu .am-links button:hover{color:var(--ink); background:rgba(255,255,255,.05)}

/* palette-footer account/credits chip — visible while building */
.pal-cr{display:inline-flex; align-items:center; gap:5px; font:inherit; font-size:12px; font-weight:700; color:var(--ink);
  background:rgba(199,229,46,.12); border:1px solid rgba(199,229,46,.38); border-radius:999px; padding:5px 11px; cursor:pointer;
  font-variant-numeric:tabular-nums; transition:background-color .16s var(--ease-out), border-color .16s var(--ease-out)}
.pal-cr:hover{background:rgba(199,229,46,.2); border-color:rgba(199,229,46,.6)}
.pal-cr.signin{color:var(--ink-2); background:rgba(255,255,255,.05); border-color:var(--line-2); font-weight:600}
.pal-cr.signin:hover{color:var(--ink); border-color:var(--line-2); background:rgba(255,255,255,.09)}

/* locked palette chips: a lock corner + cost pill; the whole chip stays tappable (opens the unlock sheet) */
.chip{position:relative}
.chip--locked .cm img{opacity:.62; filter:drop-shadow(0 6px 11px rgba(0,0,0,.55)) grayscale(.28)}
.chip--locked::after{content:''; position:absolute; inset:0; border-radius:12px; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,23,27,.16), rgba(6,23,27,.5)); border:1px solid rgba(199,229,46,.22)}
.chip-lock{position:absolute; top:6px; right:6px; z-index:2; display:inline-flex; align-items:center; gap:3px;
  font-size:9.5px; font-weight:700; color:var(--lime); background:rgba(6,23,27,.82); border:1px solid rgba(199,229,46,.4);
  border-radius:999px; padding:2px 6px 2px 5px; font-variant-numeric:tabular-nums; backdrop-filter:blur(3px)}
.chip-lock svg{width:9px; height:9px}
.chip--owned .chip-lock{display:none}

/* inline unlock sheet + packs (reuse the .tk-modal shell for glass/animation) */
.uz-modal{max-width:400px; text-align:center}
.uz-thumb{width:120px; height:120px; margin:6px auto 4px; display:grid; place-items:center}
.uz-thumb img{max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(0,0,0,.6))}
.uz-name{font-size:20px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.uz-tier{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:4px}
.uz-cost{margin:16px 0 4px; font-size:15px; color:var(--ink-2)}
.uz-cost b{color:var(--ink); font-size:19px; font-weight:700}
.uz-bal{font-size:13px; color:var(--ink-3)}
.uz-bal.short{color:#ffb877}
.uz-btn{width:100%; margin-top:18px; font:inherit; font-size:15px; font-weight:600; color:var(--on-lime);
  background:var(--lime); border:0; border-radius:12px; padding:13px; cursor:pointer; transition:background-color .18s var(--ease-out), transform .14s var(--ease-out)}
.uz-btn:hover{background:var(--lime-deep)} .uz-btn:active{transform:scale(.98)}
.uz-btn[disabled]{opacity:.55; cursor:default} .uz-btn.ghost{color:var(--ink); background:rgba(255,255,255,.06); border:1px solid var(--line-2)}
.uz-sub{margin-top:12px; font-size:12.5px; color:var(--ink-3)} .uz-sub button{font:inherit; color:var(--lime); background:none; border:0; cursor:pointer; text-decoration:underline; text-underline-offset:2px}

/* sign-in modal */
.si-modal{max-width:420px}
.si-modal .tk-head h2{font-size:22px}
.si-form{margin-top:20px; display:flex; flex-direction:column; gap:11px}
.si-form input{width:100%; font:inherit; font-size:15px; color:var(--ink); background:rgba(255,255,255,.05);
  border:1px solid var(--line-2); border-radius:11px; padding:13px 14px; outline:none; transition:border-color .18s var(--ease-out)}
.si-form input::placeholder{color:var(--ink-3)} .si-form input:focus{border-color:rgba(199,229,46,.55)}
.si-form button{font:inherit; font-size:15px; font-weight:600; color:var(--on-lime); background:var(--lime); border:0;
  border-radius:11px; padding:13px; cursor:pointer; transition:background-color .18s var(--ease-out)}
.si-form button:hover{background:var(--lime-deep)} .si-form button[disabled]{opacity:.6; cursor:default}
.si-fine{margin-top:13px; font-size:11.5px; color:var(--ink-3); line-height:1.5}
.si-sent{margin-top:18px; text-align:center; padding:8px 0}
.si-sent .si-mailico{width:44px; height:44px; margin:0 auto 12px; display:grid; place-items:center; border-radius:50%;
  background:rgba(199,229,46,.14); color:var(--lime)}
.si-sent h3{font-size:17px; font-weight:600; color:var(--ink)} .si-sent p{font-size:13.5px; color:var(--ink-2); margin-top:7px; line-height:1.55}
.si-sent p b{color:var(--ink)}

/* credit packs */
.pk-modal{max-width:560px}
.pk-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px}
.pk-card{position:relative; border:1px solid var(--line-2); border-radius:16px; padding:20px 14px 16px; text-align:center;
  background:rgba(255,255,255,.02); cursor:pointer; transition:border-color .18s var(--ease-out), transform .18s var(--ease-out), background-color .18s var(--ease-out)}
.pk-card:hover{border-color:rgba(199,229,46,.55); transform:translateY(-3px); background:rgba(199,229,46,.05)}
.pk-card.best{border-color:rgba(199,229,46,.45)}
.pk-tag{position:absolute; top:-10px; left:50%; transform:translateX(-50%); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:var(--on-lime); background:var(--lime); border-radius:999px; padding:3px 10px; white-space:nowrap}
.pk-cr{font-size:30px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1}
.pk-cr .cr{font-size:22px}
.pk-lbl{font-size:12px; color:var(--ink-3); margin-top:4px}
.pk-price{margin-top:12px; font-size:16px; font-weight:700; color:var(--lime)}
.pk-fine{margin-top:16px; font-size:11.5px; color:var(--ink-3); text-align:center; line-height:1.5}
@media (max-width:520px){ .pk-grid{grid-template-columns:1fr} }

/* toast */
.yf-toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(16px); z-index:10001;
  font-size:13.5px; font-weight:500; color:var(--ink); background:linear-gradient(162deg,rgba(120,200,188,.14),transparent 50%),var(--bg-2);
  border:1px solid var(--line-2); border-radius:12px; padding:12px 18px; box-shadow:0 20px 44px -18px rgba(0,0,0,.7);
  opacity:0; visibility:hidden; transition:opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility .25s; max-width:88vw}
.yf-toast.show{opacity:1; visibility:visible; transform:translateX(-50%)}
.yf-toast .cr{margin:0 1px}

/* ---------- live build sheet (dynamic rows) ---------- */
.sheet-body{max-height:236px; overflow-y:auto; margin:0 -4px; padding:0 4px}
.sheet-body::-webkit-scrollbar{width:5px}
.sheet-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13); border-radius:3px}
.sheet-empty{font-size:12px; color:var(--ink-3); line-height:1.5; padding:8px 0 4px}
.sheet .row .n .qty{color:var(--ink-3); font-size:11px; font-weight:500}
.sheet .row .p{display:inline-flex; align-items:center; gap:2px}
.rx{font:inherit; font-size:14px; line-height:1; color:var(--ink-3); background:none; border:0; cursor:pointer; padding:0 0 0 7px; transition:color .16s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .rx:hover{color:#ff7a7a} }

/* ---------- builder palette (revealed in build mode) ---------- */
.palette{
  position:absolute; z-index:var(--z-overlay); left:50%; bottom:clamp(22px,3.4vh,34px);
  width:min(680px, 90vw);
  background:var(--glass); backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--line-2); border-radius:16px; padding:12px 13px 14px;
  box-shadow:0 26px 54px -22px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08);
  opacity:0; visibility:hidden; transform-origin:bottom center; transform:translateX(-50%) translateY(10px) scale(.77);
  transition:opacity .32s var(--ease-out), transform .32s var(--ease-out), visibility .32s;
}
.hero.building .palette{opacity:1; visibility:visible; transform:translateX(-50%) scale(.72)}
/* while placing a layered item, fade the palette so the 5 depth-guides show through */
body.layering .palette{opacity:.14}
/* once building has been entered, the marketing hero copy is spent and never returns */
.hero.entered .hero-copy{opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out)}
@media (prefers-reduced-motion:reduce){ .palette{transition:opacity .2s} .hero.building .palette{transform:translateX(-50%) scale(.72)} }

/* ---------- collapsed-editor "Resume building" pill (shares the palette's anchor) ---------- */
.resume-pill{
  position:absolute; z-index:var(--z-overlay); left:50%; bottom:clamp(46px,6vh,58px);
  display:inline-flex; align-items:center; gap:8px;
  font:inherit; font-size:13px; font-weight:600; letter-spacing:.01em;
  color:var(--on-lime); background:var(--lime); border:1px solid var(--lime);
  border-radius:var(--r-pill); padding:10px 18px 10px 16px; cursor:pointer;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.16);
  opacity:0; visibility:hidden; transform:translateX(-50%) scale(.82);
  transition:opacity .3s var(--ease-out), transform .42s cubic-bezier(.34,1.56,.64,1),
             visibility .3s, background-color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.hero.entered:not(.building) .resume-pill{opacity:1; visibility:visible; transform:translateX(-50%) scale(1)}
.resume-pill .rp-ico{width:14px; height:14px; transition:transform .2s var(--ease-out)}
.resume-pill:active{transform:translateX(-50%) scale(.96)}
@media (hover:hover) and (pointer:fine){
  .resume-pill:hover{background:var(--lime-deep); border-color:var(--lime-deep)}
  .resume-pill:hover .rp-ico{transform:translateX(2px)}
}
@media (prefers-reduced-motion:reduce){ .resume-pill{transition:opacity .2s, visibility .2s} .hero.entered:not(.building) .resume-pill{transform:translateX(-50%)} }
/* phones: pin it to the VIEWPORT like the bottom bar it replaces. Absolute-in-.hero put it below the
   fold in landscape (the hero keeps a 560px min-height), so tapping Done left no way back in. */
body.is-mobile .resume-pill{position:fixed; bottom:calc(14px + env(safe-area-inset-bottom, 0px))}
/* ...but a fixed pill would then follow you down the whole page: drop it once the hero is scrolled past */
body.is-mobile.scrolled .hero .resume-pill{opacity:0; visibility:hidden; pointer-events:none}

/* ---------- drag-to-resize grip (DOM overlay, positioned at the selected plant's apex) ---------- */
.resize-grip{
  position:fixed; z-index:90; left:0; top:0; transform:translate(-50%,-50%);
  width:34px; height:26px; padding:0; display:none; align-items:center; justify-content:center;
  color:var(--on-lime); background:var(--lime); border:1px solid var(--lime-deep);
  border-radius:13px; cursor:ns-resize; touch-action:none;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18);
  transition:background-color .16s var(--ease-out);
}
.resize-grip.on{ display:inline-flex; }
/* live real-world readout while an object is selected or being scaled. It turns amber at a
   species limit, so hitting the end of the range reads as a fact about the plant rather than
   as the drag having jammed. */
.size-badge{
  position:fixed; z-index:calc(var(--z-nav) + 30); left:0; top:0; transform:translate(-50%,-50%);
  display:none; padding:4px 9px; border-radius:var(--r-pill); pointer-events:none;
  font-size:11px; font-weight:700; letter-spacing:.01em; font-variant-numeric:tabular-nums;
  color:var(--lime); background:rgba(9,22,26,.86);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line-2); box-shadow:0 8px 20px -10px rgba(0,0,0,.7);
  transition:color .16s var(--ease-out), border-color .16s var(--ease-out)}
.size-badge.on{display:block}
.size-badge.lim{color:#ffc36b; border-color:rgba(255,195,107,.5)}
/* depth dots for a selected fish: back (left) to front (right), sized for a thumb */
.depth-dots{
  position:fixed; z-index:calc(var(--z-nav) + 30); left:0; top:0; transform:translate(-50%,-50%);
  display:none; align-items:center; gap:7px; padding:7px 10px; border-radius:var(--r-pill);
  background:rgba(9,22,26,.86); -webkit-backdrop-filter:blur(12px) saturate(150%); backdrop-filter:blur(12px) saturate(150%);
  border:1px solid var(--line-2); box-shadow:0 10px 26px -12px rgba(0,0,0,.7);
  touch-action:none;
}
.depth-dots.on{display:inline-flex}
.depth-dots .dd{
  width:13px; height:13px; padding:0; border-radius:50%; cursor:pointer; flex:none;
  background:rgba(255,255,255,.16); border:1px solid var(--line-2);
  transition:background-color .16s var(--ease-out), border-color .16s var(--ease-out), transform .16s var(--ease-out);
}
.depth-dots .dd.on{background:var(--lime); border-color:var(--lime); transform:scale(1.22)}
.depth-dots .dd:active{transform:scale(.88)}
@media (hover:hover) and (pointer:fine){ .depth-dots .dd:not(.on):hover{background:rgba(255,255,255,.3); border-color:var(--lime)} }
/* phones: bigger targets, the dots are the only way to set depth there */
body.is-mobile .depth-dots{gap:10px; padding:9px 13px}
body.is-mobile .depth-dots .dd{width:17px; height:17px}
.resize-grip svg{ width:15px; height:15px; }
.resize-grip:active{ transform:translate(-50%,-50%) scale(.9); }
@media (hover:hover) and (pointer:fine){ .resize-grip:hover{ background:var(--lime-deep); } }
.pal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px}
/* eight ordered steps do not fit the 680px palette on desktop either, so the rail scrolls
   everywhere and fades its right edge, and goStep keeps the active step in view. */
.pal-tabs{display:flex; gap:6px; min-width:0; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent)}
.pal-tabs::-webkit-scrollbar{display:none}
.pal-tab{flex:none}
/* standalone caption row, sits just below the palette (outside the editor), revealed with build mode */
.pal-hint{position:absolute; z-index:var(--z-overlay); left:50%; bottom:clamp(18px,2.8vh,24px);
  transform:translateX(-50%) translateY(6px); white-space:nowrap; text-align:center;
  font-size:11.5px; color:var(--ink-3); pointer-events:none;
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility .3s}
.hero.building .pal-hint{opacity:1; visibility:visible; transform:translateX(-50%)}
@media (prefers-reduced-motion:reduce){ .hero.building .pal-hint{transform:translateX(-50%)} }
.pal-tab{font:inherit; font-size:12px; font-weight:600; letter-spacing:.01em; color:var(--ink-2);
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 14px; cursor:pointer;
  transition:color .18s var(--ease-out), background-color .18s var(--ease-out), border-color .18s var(--ease-out)}
.pal-tab.on{color:var(--on-lime); background:var(--lime); border-color:var(--lime)}
/* ---------- sequential build: the step rail ----------
   The tabs row now carries ORDERED steps (Tank -> Water -> Substrate -> Hardscape ->
   Plants|Coral -> Décor -> Fish -> Review) rather than free categories. It is a rail,
   not a prison: every step stays clickable, so nothing the flat tabs could do is lost.
   A step you have satisfied gets a chartreuse tick; the current one is filled. */
.pal-tab--step{display:inline-flex; align-items:center; gap:7px; padding-left:9px}
.pal-tab .sn{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; border-radius:50%; font-size:10px; font-weight:700; line-height:1;
  color:var(--ink-3); background:rgba(255,255,255,.07); border:1px solid var(--line);
  transition:color .18s var(--ease-out), background-color .18s var(--ease-out), border-color .18s var(--ease-out)}
.pal-tab.on .sn{color:var(--lime); background:rgba(12,18,6,.34); border-color:transparent}
.pal-tab.done .sn{color:var(--on-lime); background:var(--lime); border-color:var(--lime)}
.pal-tab.done:not(.on){color:var(--ink)}
.pal-tab .sn svg{width:10px; height:10px}
/* a step whose content is not a catalog strip (Tank, Water, Review) renders in here instead */
.pal-panel{display:none; padding:3px 2px 8px; min-height:130px}
.pal-panel.on{display:block}
.pal-panel .pp-lead{margin:0 0 10px; font-size:12px; color:var(--ink-3)}
.pal-opts{display:flex; gap:9px; flex-wrap:wrap}
.pal-opt{
  flex:1 1 0; min-width:132px; text-align:left; font:inherit; cursor:pointer;
  padding:11px 13px; border-radius:14px; color:var(--ink);
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  transition:color .18s var(--ease-out), background-color .18s var(--ease-out), border-color .18s var(--ease-out)}
.pal-opt .po-n{display:block; font-size:13px; font-weight:700; letter-spacing:-.01em}
.pal-opt .po-d{display:block; margin-top:3px; font-size:11.5px; color:var(--ink-3)}
.pal-opt.on{background:rgba(199,229,46,.11); border-color:var(--lime)}
.pal-opt.on .po-n{color:var(--lime)}
@media (hover:hover) and (pointer:fine){ .pal-opt:not(.on):hover{border-color:var(--line-2)} }
/* Back / Next, pinned under whatever the step is showing */
.pal-nav{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px}
.pal-nav .pn-side{display:flex; gap:8px}
.pal-step-btn{font:inherit; font-size:12px; font-weight:600; cursor:pointer; padding:8px 15px; border-radius:var(--r-pill);
  color:var(--ink-2); background:rgba(255,255,255,.05); border:1px solid var(--line);
  transition:color .18s var(--ease-out), background-color .18s var(--ease-out), border-color .18s var(--ease-out)}
.pal-step-btn--next{color:var(--on-lime); background:var(--lime); border-color:var(--lime)}
.pal-step-btn[disabled]{opacity:.38; cursor:default}
@media (hover:hover) and (pointer:fine){ .pal-step-btn:not([disabled]):not(.pal-step-btn--next):hover{color:var(--ink); border-color:var(--line-2)} }
/* review step: stocking read-out + the compatibility notes for what is actually in the tank */
.pp-stock{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:2px 0 7px}
.pp-stock .ps-n{font-size:13px; font-weight:700; color:var(--ink)}
.pp-stock .ps-v{font-size:11.5px; color:var(--ink-3)}
.pp-bar{height:6px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden}
.pp-bar i{display:block; height:100%; width:0; border-radius:3px; background:var(--lime); transition:width .3s var(--ease-out), background-color .3s var(--ease-out)}
.pp-bar.warn i{background:#ffc36b}
.pp-bar.over i{background:#ff8a7a}
.pp-notes{list-style:none; margin:11px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; max-height:112px; overflow-y:auto}
.pp-note{display:flex; gap:8px; align-items:flex-start; font-size:11.5px; line-height:1.45; color:var(--ink-2)}
.pp-note .nd{flex:none; width:7px; height:7px; margin-top:4px; border-radius:50%; background:var(--lime)}
.pp-note.caution .nd{background:#ffc36b}
.pp-note.no .nd{background:#ff8a7a}
/* phones: the panels and Back/Next travel into the category sheet, like the chip strip does */
body.is-mobile .palette .pal-panel, body.is-mobile .palette .pal-nav{display:none}
.msheet .pal-panel{display:block; padding:0}
.msheet .pal-opts{flex-direction:column}
.msheet .pal-opt{min-width:0}
.msheet .pal-nav{margin-top:14px}
.msheet-body--panel{display:block; padding:4px 16px 18px}
/* ---------- LAYERS: a per-OBJECT list of everything placed ----------
   The build sheet answers "what species are in my tank". This answers "what objects are
   in my tank, in what order, and which one am I editing". Rows stay clean: eye + lock
   only, and the actions act on the selected row from the bar at the foot, so a row never
   grows six icons. */
.layers{
  position:absolute; z-index:var(--z-overlay); right:clamp(12px,1.6vw,22px); top:50%;
  width:min(268px, 26vw); max-height:min(58vh, 520px); display:flex; flex-direction:column;
  background:rgba(9,22,26,.78); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--line-2); border-radius:16px; box-shadow:0 18px 44px -18px rgba(0,0,0,.75);
  opacity:0; visibility:hidden; transform:translateY(-50%) translateX(10px);
  transition:opacity .26s var(--ease-out), transform .26s var(--ease-out), visibility .26s}
.hero.building .layers.on{opacity:1; visibility:visible; transform:translateY(-50%) translateX(0)}
@media (prefers-reduced-motion:reduce){ .layers{transition:opacity .2s, visibility .2s} .hero.building .layers.on{transform:translateY(-50%)} }
.ly-head{flex:none; display:flex; align-items:center; gap:8px; padding:11px 13px 9px; border-bottom:1px solid var(--line)}
.ly-head h3{margin:0; flex:1; font-size:12.5px; font-weight:700; letter-spacing:-.01em; color:var(--ink)}
.ly-head .ly-n{font-size:11px; color:var(--ink-3)}
.ly-x{font:inherit; font-size:12px; color:var(--ink-3); background:none; border:0; cursor:pointer; padding:2px 0 2px 6px}
.ly-list{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:6px}
.ly-row{display:flex; align-items:center; gap:9px; width:100%; padding:6px 7px; border-radius:11px;
  background:none; border:1px solid transparent; cursor:pointer; text-align:left;
  transition:background-color .16s var(--ease-out), border-color .16s var(--ease-out)}
.ly-row.on{background:rgba(199,229,46,.1); border-color:rgba(199,229,46,.42)}
.ly-row.hid{opacity:.42}
@media (hover:hover) and (pointer:fine){ .ly-row:not(.on):hover{background:rgba(255,255,255,.05)} }
.ly-thumb{flex:none; width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.05);
  display:flex; align-items:center; justify-content:center; overflow:hidden}
.ly-thumb img{max-width:100%; max-height:100%; object-fit:contain}
.ly-name{flex:1; min-width:0; font-size:11.5px; font-weight:600; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ly-depth{flex:none; font-size:9.5px; font-weight:700; color:var(--ink-3); letter-spacing:.04em}
.ly-btn{flex:none; display:inline-flex; align-items:center; justify-content:center; width:23px; height:23px;
  padding:0; border-radius:7px; cursor:pointer; color:var(--ink-3);
  background:none; border:1px solid transparent; transition:color .16s var(--ease-out), background-color .16s var(--ease-out)}
.ly-btn svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.ly-btn.act{color:var(--lime); background:rgba(199,229,46,.12)}
@media (hover:hover) and (pointer:fine){ .ly-btn:hover{color:var(--ink); background:rgba(255,255,255,.08)} }
/* the action bar: everything here acts on the SELECTED row, like a real layers panel */
.ly-acts{flex:none; display:flex; align-items:center; justify-content:space-between; gap:3px;
  padding:8px 9px; border-top:1px solid var(--line)}
.ly-acts .ly-btn{width:28px; height:28px; border-color:var(--line)}
.ly-acts .ly-btn[disabled]{opacity:.3; cursor:default}
.ly-acts .ly-btn svg{width:15px; height:15px}
.ly-acts .ly-btn--del{color:#ff8a7a}
.ly-empty{padding:20px 14px; font-size:11.5px; line-height:1.5; color:var(--ink-3); text-align:center}
/* the toggle lives with the step rail so build-mode chrome stays in one place */
.pal-layers{flex:none; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  padding:0; cursor:pointer; color:var(--ink-2); background:rgba(255,255,255,.05);
  border:1px solid var(--line); border-radius:9px;
  transition:color .18s var(--ease-out), background-color .18s var(--ease-out), border-color .18s var(--ease-out)}
.pal-layers svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.pal-layers.on{color:var(--on-lime); background:var(--lime); border-color:var(--lime)}
@media (hover:hover) and (pointer:fine){ .pal-layers:not(.on):hover{color:var(--ink); border-color:var(--line-2)} }
/* phones: the tank is the whole screen and there is no room beside it, so the panel
   becomes a bottom sheet using the same geometry as .msheet */
body.is-mobile .layers{right:0; left:0; top:auto; bottom:0; width:auto; max-height:58svh;
  border-radius:18px 18px 0 0; border-bottom:0; transform:translateY(100%)}
body.is-mobile .hero.building .layers.on{transform:translateY(0)}
.pal-exit{font:inherit; font-size:12px; font-weight:600; color:var(--ink-2); background:none; border:0; cursor:pointer; transition:color .18s var(--ease-out)}
/* overflow button: phones only — the tank commands (lights/Feed/Empty/My Tanks) live behind it */
.pal-more{display:none}
@media (hover:hover) and (pointer:fine){ .pal-exit:hover{color:var(--lime)} .pal-tab:not(.on):hover{color:var(--ink); border-color:var(--line-2)} }
.pal-strip{display:flex; align-items:flex-start; gap:9px; overflow-x:auto; padding:3px 2px 8px; scroll-snap-type:x proximity; min-height:130px}
.pal-strip::-webkit-scrollbar{height:6px}
.pal-strip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:3px}
/* palette footer: tank commands under the carousel — light-hue dots (left), Feed/Reset pills (right) */
.pal-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; padding-top:11px; border-top:1px solid var(--line)}
.pal-drag{flex:1; min-width:0; text-align:center; font-size:11.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none}
.pal-lights{display:flex; align-items:center; gap:8px}
.light-dot{width:17px; height:17px; padding:0; border-radius:50%; cursor:pointer; background:var(--h);
  border:1.5px solid rgba(255,255,255,.20); box-shadow:inset 0 1px 1.5px rgba(255,255,255,.32);
  transition:transform .16s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out)}
.light-dot.on{border-color:var(--lime); box-shadow:0 0 0 2px rgba(199,229,46,.32), inset 0 1px 1.5px rgba(255,255,255,.4)}
.light-dot:active{transform:scale(.88)}
@media (hover:hover) and (pointer:fine){ .light-dot:hover{transform:scale(1.14)} }
.pal-acts{display:flex; align-items:center; gap:7px}
.pal-act{font:inherit; font-size:12px; font-weight:600; color:var(--ink-2); background:rgba(255,255,255,.05);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 15px; cursor:pointer;
  transition:color .18s var(--ease-out), background-color .18s var(--ease-out), border-color .18s var(--ease-out), transform .12s var(--ease-out)}
.pal-act:active{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){ .pal-act:hover{color:var(--ink); border-color:var(--line-2); background:rgba(255,255,255,.08)} }
.chip{flex:none; width:94px; scroll-snap-align:start; cursor:grab; border:1px solid var(--line); border-radius:12px;
  background:rgba(255,255,255,.03); padding:9px 8px 8px; text-align:center;
  transition:transform .16s var(--ease-out), border-color .16s var(--ease-out), background-color .16s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .chip:hover{transform:translateY(-3px); border-color:rgba(199,229,46,.5); background:rgba(199,229,46,.06)} }
.chip:active{cursor:grabbing; transform:scale(.97)}
.chip.pulse{animation:chipPulse .45s var(--ease-out)}
@keyframes chipPulse{from{box-shadow:0 0 0 0 rgba(199,229,46,.55)} to{box-shadow:0 0 0 15px rgba(199,229,46,0)}}
.chip .cm{width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; margin-bottom:6px}
.chip img{max-width:100%; max-height:66px; object-fit:contain; pointer-events:none; filter:drop-shadow(0 6px 11px rgba(0,0,0,.55))}
.chip .cn{font-size:10.5px; color:var(--ink-2); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chip .cp{font-size:10px; color:var(--ink-3); font-variant-numeric:tabular-nums; margin-top:1px}
/* substrate swatches (Substrate tab): tap to swap the whole bed */
.sub-swatch{flex:none; width:94px; scroll-snap-align:start; cursor:pointer; border:1px solid var(--line); border-radius:12px;
  background:rgba(255,255,255,.03); padding:9px 8px 8px; display:flex; flex-direction:column; gap:6px;
  transition:transform .2s var(--ease-out), border-color .2s var(--ease-out), background-color .2s var(--ease-out)}
.sub-swatch .ss-tex{display:block; width:100%; aspect-ratio:1/1; border-radius:8px; background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), inset 0 10px 18px -10px rgba(0,0,0,.75)}
.sub-swatch .ss-n{font-size:10.5px; color:var(--ink-2); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sub-swatch .ss-p{font-size:10px; color:var(--ink-3); font-variant-numeric:tabular-nums; text-align:center}
.sub-swatch.on{border-color:var(--lime); background:rgba(199,229,46,.08)}
.sub-swatch.on .ss-n{color:var(--lime)}
.sub-swatch:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){ .sub-swatch:hover{transform:translateY(-3px); border-color:rgba(199,229,46,.5); background:rgba(199,229,46,.06)} }
/* substrate stack widget (Top / Mid / Base) — layer up to 3 substrates */
.sub-stack{flex:none; width:138px; scroll-snap-align:start; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:2px 12px 2px 2px; margin-right:8px; border-right:1px solid var(--line)}
.sub-slot{position:relative; display:flex; align-items:center; gap:8px; padding:5px 7px; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.03); cursor:pointer; transition:border-color .16s var(--ease-out), background-color .16s var(--ease-out)}
.sub-slot.on{border-color:var(--lime); background:rgba(199,229,46,.09)}
.sub-slot.disabled{opacity:.4; pointer-events:none}
.sub-slot .sl-lbl{font-size:9.5px; letter-spacing:.02em; color:var(--ink-3); width:24px; flex:none; text-transform:uppercase}
.sub-slot.on .sl-lbl{color:var(--lime)}
.sub-slot .sl-tex{width:32px; height:21px; border-radius:5px; background-size:cover; background-position:center; flex:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.sub-slot .sl-tex.add{display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:15px; line-height:1; background:rgba(255,255,255,.03); border:1px dashed var(--line-2)}
.sub-slot .sl-x{position:absolute; top:-6px; right:-6px; width:16px; height:16px; border-radius:50%; border:none; background:rgba(16,26,24,.95); color:var(--ink-2); font-size:12px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.5)}
@media (hover:hover) and (pointer:fine){ .sub-slot:hover{border-color:var(--line-2)} .sub-slot .sl-x:hover{color:#ff7a7a} }
@media (max-width:720px){ .palette{width:94vw; bottom:14px} }

/* ================= MOBILE BUILDER: pills bar + category sheet =================
   One horizontally-scrolling strip used to serve BOTH browsing and placing, so every touch on it was
   ambiguous (scroll? drag out? tap to add?). On phones the palette is now ONE row of category pills;
   tapping a pill opens .msheet over the tank with that category's full catalog as a real grid, and
   tapping an item drops it in. Nothing else competes with the tank for touches.
   Driven by the JS-set body.is-mobile class (touch device + short screen side) so it holds in ANY
   orientation — media queries alone miss landscape phones and hid the panel on rotate. */
body.is-mobile .palette{
  position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
  width:auto !important; max-width:none !important; box-sizing:border-box;
  z-index:calc(var(--z-overlay) + 2);             /* the bar rides ON TOP of the sheet */
  border-radius:16px 16px 0 0; border-bottom:0;
  padding:7px 10px calc(7px + env(safe-area-inset-bottom, 0px));
  background:rgba(9,22,26,.94); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  transform:translateY(100%) !important;          /* hidden: slid down out of view (!important beats the desktop translateX/scale) */
  transform-origin:bottom center;
}
body.is-mobile.building .palette{transform:translateY(0) !important}   /* shown: slides up as a bottom bar */
/* the bar is the pills row and nothing else — strip + commands live in the sheet */
body.is-mobile .palette .pal-strip, body.is-mobile .palette .pal-foot{display:none}
body.is-mobile .pal-head{align-items:center; gap:6px; margin-bottom:0}
body.is-mobile .pal-tabs{overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; min-width:0;
  /* the tab row scrolls on phones: fade its right edge so cut-off tabs read as "more", not as broken */
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent)}
body.is-mobile .pal-tabs::-webkit-scrollbar{display:none}
body.is-mobile .pal-tab{font-size:12.5px; padding:8px 15px}     /* ~34px tall: a comfortable thumb target */
body.is-mobile .pal-exit{flex:none; font-size:12.5px; padding:8px 4px 8px 6px}
body.is-mobile .pal-more{flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0; cursor:pointer; color:var(--ink-2);
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:50%;
  transition:color .18s var(--ease-out), background-color .18s var(--ease-out), border-color .18s var(--ease-out)}
body.is-mobile .pal-more svg{width:16px; height:16px}
body.is-mobile .pal-more[aria-expanded="true"]{color:var(--on-lime); background:var(--lime); border-color:var(--lime)}
body.is-mobile .pal-more:active{transform:scale(.94)}

/* ---------- the category sheet (phones) ---------- */
.msheet{
  position:fixed; z-index:calc(var(--z-overlay) + 1); left:0; right:0; bottom:0;
  display:flex; flex-direction:column; box-sizing:border-box;
  max-height:min(58svh, 430px);
  background:rgba(8,20,24,.97); -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%);
  border-top:1px solid var(--line-2); border-radius:20px 20px 0 0;
  box-shadow:0 -26px 64px -30px rgba(0,0,0,.9);
  padding-bottom:calc(var(--palh, 52px) + 8px);  /* clear the pills bar sitting on top of us, plus air */
  transform:translateY(101%); visibility:hidden;
  transition:transform .3s var(--ease-out), visibility .3s;
}
.msheet.open{transform:translateY(0); visibility:visible}
@media (prefers-reduced-motion:reduce){ .msheet{transition:visibility .2s} }
.msheet-grab{flex:none; width:34px; height:4px; border-radius:2px; background:rgba(255,255,255,.18); margin:9px auto 0}
.msheet-head{flex:none; display:flex; align-items:center; gap:10px; padding:9px 14px 8px}
.msheet-title{margin:0; font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--ink)}
.msheet-added{flex:1; min-width:0; font-size:11.5px; color:var(--lime); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  opacity:0; transition:opacity .2s var(--ease-out)}
.msheet-added.on{opacity:1}
.msheet-x{flex:none; font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-2); background:none; border:0; cursor:pointer; padding:6px 2px 6px 8px}
.msheet-body{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:2px 12px 14px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:8px; align-content:start}
/* the sheet's tiles are the palette chips, given room to breathe (this is the whole point) */
.msheet .chip, .msheet .sub-swatch{width:auto; flex:initial; scroll-snap-align:none}
.msheet .chip{padding:9px 6px 8px; border-radius:13px}
.msheet .chip .cm{aspect-ratio:auto; height:56px; margin-bottom:6px}
.msheet .chip img{max-height:56px}
.msheet .chip .cn{font-size:10.5px}
.msheet .chip .cp{display:none}                 /* prices live in the build sheet on phones */
.msheet .sub-swatch{padding:8px 6px 7px}
.msheet .sub-swatch .ss-tex{aspect-ratio:auto; height:52px}
.msheet .sub-swatch .ss-p{display:none}
/* commands sheet: the live .pal-foot node is MOVED in here (never cloned — it keeps its listeners) */
.msheet-body--cmd{display:block; padding:4px 16px 18px}
.msheet .pal-foot{flex-direction:column; align-items:stretch; gap:14px; margin:0; padding:0; border-top:0}
.msheet .pal-lights{justify-content:center; gap:18px; padding:4px 0 2px}
.msheet .light-dot{width:26px; height:26px}
.msheet .pal-drag{display:none}
.msheet .pal-acts{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.msheet .pal-act, .msheet .pal-cr{font-size:13px; padding:12px 14px; text-align:center; justify-content:center}
/* SHORT LANDSCAPE: the hero's 560px min-height is TALLER than the viewport, which pushed the hero
   copy, the "Build a tank" CTA and the Resume pill below the fold. Let the hero be exactly one screen.
   The pills bar is one row in BOTH orientations now, so no palette grid-collapse is needed here. */
@media (orientation:landscape) and (max-height:560px){
  .hero{min-height:0}
  .hero-copy{bottom:12px; left:12px; max-width:min(430px,72vw); padding:14px 16px; border-radius:16px}
  .hero-copy h1{font-size:21px}
  .hero-copy .sub{margin-top:8px; font-size:12.5px; line-height:1.45}
  .hero-copy .hero-cta{margin-top:13px; font-size:13px; padding:9px 16px}
  body.is-mobile .palette{padding:5px 10px calc(5px + env(safe-area-inset-bottom, 0px))}
  body.is-mobile .pal-tab{font-size:12px; padding:7px 13px}
  .msheet{max-height:66svh}      /* keep a real slice of tank visible above it on a short screen */
  .msheet-grab{margin-top:6px}
  .msheet-head{padding:6px 14px 6px}
  .msheet-body{grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:7px; padding:2px 12px 10px}
  .msheet .chip .cm{height:44px}
  .msheet .chip img{max-height:44px}
  .msheet .sub-swatch .ss-tex{height:42px}
  .msheet .pal-foot{flex-direction:row; align-items:center; justify-content:space-between; gap:14px}
  .msheet .pal-acts{grid-template-columns:repeat(4, auto)}
  .msheet .pal-act, .msheet .pal-cr{font-size:12px; padding:9px 12px}
}

/* ---------- drag-to-remove trash zone ---------- */
.trash{
  position:absolute; z-index:var(--z-overlay); left:50%; top:82px; transform:translate(-50%,-10px);
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--r-pill);
  background:rgba(38,10,10,.6); border:1px solid rgba(255,95,95,.55); color:#ffb0b0; font-size:13px; font-weight:600;
  backdrop-filter:blur(10px) saturate(140%); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);
}
.trash svg{width:15px; height:15px}
body.dragging .trash{opacity:1; visibility:visible; transform:translate(-50%,0)}
body.dragging, body.dragging #tank{cursor:grabbing !important}

/* ---------- shop-your-build modal ---------- */
.bmodal{border:0; padding:0; margin:auto; background:transparent; max-width:min(680px,94vw); width:100%; color:var(--ink); overflow:visible}
.bmodal::backdrop{background:rgba(3,10,12,.66); backdrop-filter:blur(5px)}
.bmodal-inner{
  background:color-mix(in srgb, var(--bg) 93%, transparent); border:1px solid var(--line-2); border-radius:20px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06); overflow:hidden;
}
.bmodal[open]{animation:bmIn .28s var(--ease-out)}
@keyframes bmIn{from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .bmodal[open]{animation:none} }
.bm-head{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:20px 22px 18px; border-bottom:1px solid var(--line)}
.bm-head h3{font-size:19px; font-weight:600; letter-spacing:-.01em}
.bm-head p{margin-top:7px; font-size:13px; color:var(--ink-2); line-height:1.5; max-width:54ch; text-wrap:pretty}
.bm-close{font:inherit; font-size:22px; line-height:1; color:var(--ink-3); background:none; border:0; cursor:pointer; padding:2px 4px; transition:color .16s var(--ease-out)}
@media (hover:hover){ .bm-close:hover{color:var(--ink)} }
.bm-list{max-height:52vh; overflow-y:auto; padding:4px 22px}
.bm-list::-webkit-scrollbar{width:6px}
.bm-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13); border-radius:3px}
.bm-row{display:grid; grid-template-columns:44px 1fr auto; gap:15px; align-items:center; padding:14px 0; border-top:1px solid var(--line)}
.bm-row:first-child{border-top:0}
.bm-thumb{width:44px; height:44px; border-radius:10px; border:1px solid var(--line); background:radial-gradient(90% 80% at 50% 30%,rgba(120,200,188,.14),transparent 62%),linear-gradient(180deg,#0d2a2f,#071a1e); display:flex; align-items:center; justify-content:center; overflow:hidden}
.bm-thumb img{max-width:82%; max-height:82%; object-fit:contain}
.bm-name{font-size:14px; font-weight:600; color:var(--ink)}
.bm-name .q{color:var(--ink-3); font-weight:500; font-size:12px}
.bm-sub{font-size:12px; color:var(--ink-3); margin-top:2px; font-variant-numeric:tabular-nums}
.bm-stores{display:flex; gap:7px}
.rpill{display:inline-flex; align-items:center; justify-content:center; min-width:72px; height:36px; padding:0 12px;
  border:1px solid var(--line-2); border-radius:10px; background:rgba(255,255,255,.03); color:var(--ink);
  text-decoration:none; transition:transform .15s var(--ease-out), border-color .15s var(--ease-out), background-color .15s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .rpill:hover{transform:translateY(-2px); border-color:rgba(199,229,46,.55); background:rgba(199,229,46,.07)} }
.rpill:active{transform:scale(.97)}
.rl{font-weight:700; font-size:13.5px; letter-spacing:-.02em; line-height:1}
.rl-img{height:16px; width:auto; max-width:64px; object-fit:contain; opacity:.92; display:block}
.rl-amazon{display:inline-flex; flex-direction:column; align-items:center; gap:2px}
.rl-amazon .sm{width:54px; height:7px; display:block; overflow:visible}
.rl-amazon .sm path{stroke:var(--lime); fill:none}
.rl-amazon .sm .head{fill:var(--lime); stroke:none}
.bm-foot{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 22px; border-top:1px solid var(--line); flex-wrap:wrap}
.bm-total{font-size:14px; color:var(--ink-2)}
.bm-total b{font-size:18px; color:var(--lime); font-weight:600; font-variant-numeric:tabular-nums; margin-left:6px}
.bm-fine{font-size:11px; color:var(--ink-3); line-height:1.5; max-width:44ch; text-align:right; margin-left:auto}
.bm-empty{padding:30px 0 34px; text-align:center; color:var(--ink-3); font-size:13.5px}
@media (max-width:560px){
  .bm-row{grid-template-columns:40px 1fr; row-gap:11px}
  .bm-stores{grid-column:1 / -1}
  .bm-fine{text-align:left}
}

/* ---------- fish of the week (editorial hub feature) ---------- */
.fotw{padding:clamp(52px,7vw,88px) 0}
.fotw-hero{
  display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  border:1px solid var(--line-2); border-radius:22px; overflow:hidden;
  background:linear-gradient(180deg, var(--bg-2), var(--bg-3)); box-shadow:0 44px 96px -44px rgba(0,0,0,.85);
}
@media(max-width:820px){ .fotw-hero{grid-template-columns:1fr} }
.fotw-media{
  position:relative; min-height:300px; border-right:1px solid var(--line);
  background:
    radial-gradient(78% 68% at 42% 40%, rgba(120,200,188,.22), transparent 60%),
    radial-gradient(120% 120% at 82% 92%, rgba(199,229,46,.10), transparent 55%),
    linear-gradient(160deg,#0e2a30,#05161a);
  overflow:hidden;
}
@media(max-width:820px){ .fotw-media{border-right:0; border-bottom:1px solid var(--line); min-height:340px} }
.fotw-media::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 120px 22px rgba(2,12,15,.6); pointer-events:none}
/* image is ABSOLUTE so it never forces the card height — content drives it, card adapts per tab */
.fotw-media img{position:absolute; inset:0; margin:auto; z-index:1; max-width:84%; max-height:82%; width:auto; height:auto; object-fit:contain;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.6)); animation:fotwFloat 7s var(--ease-in-out) infinite}
@keyframes fotwFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){ .fotw-media img{animation:none} }
.fotw-ribbon{position:absolute; top:16px; left:16px; z-index:2; font-size:10px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--on-lime); background:var(--lime); padding:5px 11px; border-radius:var(--r-pill)}
.fotw-body{position:relative; padding:clamp(22px,2.6vw,34px); display:flex; flex-direction:column; justify-content:center; gap:16px}
.fotw-titles{display:flex; flex-direction:column; gap:6px}
.fotw-titles .fw-tag{position:absolute; top:clamp(22px,2.6vw,34px); right:clamp(22px,2.6vw,34px); margin:0}
@media(max-width:520px){ .fotw-titles .fw-tag{position:static; margin-top:4px} }
.fotw-kicker{font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3)}
.fotw-name{font-size:clamp(28px,3.4vw,42px); font-weight:600; letter-spacing:-.022em; line-height:1; color:var(--ink)}
.fotw-latin{font-style:italic; color:var(--ink-2); font-size:15px; margin-top:-4px}
.fw-tag{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-size:12px; font-weight:600;
  padding:6px 12px; border-radius:var(--r-pill); border:1px solid}
.fw-tag--ok{color:var(--lime); border-color:rgba(199,229,46,.5); background:rgba(199,229,46,.08)}
.fw-tag--adv{color:#f4c15a; border-color:rgba(244,193,90,.5); background:rgba(244,193,90,.10)}
.fw-tag--marine{color:#6fd0e0; border-color:rgba(111,208,224,.5); background:rgba(111,208,224,.10)}
.fw-tag--wild{color:#ff9a8b; border-color:rgba(255,140,120,.5); background:rgba(255,140,120,.10)}
/* signature tabs — clean underline indicator */
.ftab-nav{display:flex; gap:2px; border-bottom:1px solid var(--line)}
.ftab{font:inherit; font-size:12.5px; font-weight:600; letter-spacing:.01em; color:var(--ink-3); cursor:pointer;
  background:none; border:0; padding:9px 2px; margin:0 16px -1px 0; border-bottom:2px solid transparent;
  transition:color .18s var(--ease-out), border-color .18s var(--ease-out)}
@media (hover:hover){ .ftab:hover{color:var(--ink-2)} }
.ftab.on{color:var(--lime); border-bottom-color:var(--lime)}
.ftab-body{padding:16px 0 0; min-height:336px}   /* fixed to the tallest tab so the card never resizes between tabs */
.ftab-body p{font-size:14.5px; color:var(--ink-2); line-height:1.62; text-wrap:pretty}
.ftab-body p + p{margin-top:11px}
.ftab-panel{display:none}
.ftab-panel.on{display:block; animation:ftabin .24s var(--ease-out)}
@keyframes ftabin{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .ftab-panel.on{animation:none} }
.fw-facts{display:flex; flex-direction:column}
.fw-facts > div{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--line)}
.fw-facts > div:last-child{border-bottom:0}
.fw-facts dt{font-size:12.5px; color:var(--ink-3)}
.fw-facts dd{font-size:14px; color:var(--ink); font-weight:500; text-align:right; font-variant-numeric:tabular-nums}
.fw-facts-list{display:flex; flex-direction:column; gap:11px; margin:0; padding:0; list-style:none}
.fw-facts-list li{position:relative; padding-left:19px; font-size:13.5px; color:var(--ink-2); line-height:1.5; text-wrap:pretty}
.fw-facts-list li::before{content:""; position:absolute; left:2px; top:7px; width:6px; height:6px; border-radius:50%; background:var(--lime)}
.fotw-cta{align-self:flex-start; font-size:14px}
.fotw-more{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:18px}
@media(max-width:860px){ .fotw-more{grid-template-columns:repeat(2,1fr)} }
@media(max-width:520px){ .fotw-more{grid-template-columns:1fr} }
.fw-mini{display:block; text-decoration:none; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:var(--bg-2); transition:transform .2s var(--ease-out), border-color .2s var(--ease-out)}
@media(hover:hover) and (pointer:fine){ .fw-mini:hover{transform:translateY(-4px); border-color:rgba(199,229,46,.4)} }
.fw-mini-media{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:18px;
  background:radial-gradient(70% 68% at 50% 44%, rgba(120,200,188,.15), transparent 60%), linear-gradient(160deg,#0d2a30,#06181c)}
.fw-mini-media img{max-width:90%; max-height:78%; object-fit:contain; filter:drop-shadow(0 14px 20px rgba(0,0,0,.5)); transition:transform .3s var(--ease-out)}
@media(hover:hover) and (pointer:fine){ .fw-mini:hover .fw-mini-media img{transform:scale(1.06)} }
.fw-mini-body{padding:13px 15px 16px}
.fw-mini-name{font-size:15px; font-weight:600; color:var(--ink)}
.fw-mini-latin{font-style:italic; font-size:12px; color:var(--ink-3); margin-top:1px}
.fw-mini .fw-tag{margin:10px 0 0; font-size:10.5px; padding:4px 9px}
.fw-mini-hook{font-size:12.5px; color:var(--ink-2); line-height:1.45; margin-top:9px; text-wrap:pretty}

/* ---------- shared section chrome ---------- */
.wrap{max-width:1480px; margin:0 auto; padding:0 clamp(18px,4vw,44px)}
section{scroll-margin-top:80px}
.section-head{max-width:27rem; margin-bottom:clamp(28px,4vw,44px)}
.section-head h2{font-size:clamp(25px,3vw,35px); font-weight:600; letter-spacing:-.018em; line-height:1.1; text-wrap:balance; color:var(--ink)}
.section-head p{margin-top:12px; max-width:38ch; font-size:16px; color:var(--ink-2); text-wrap:pretty}

/* light-from-above tint shared by dark sections */
.lit{background:radial-gradient(120% 60% at 50% -12%, rgba(120,200,188,.07), transparent 60%)}
/* plankton drifts behind all the dark content below the hero (glenmore-style) */
#plankton{position:fixed; inset:0; z-index:0; pointer-events:none}
main,footer{position:relative; z-index:1}
.hero{z-index:1}

/* ---------- how it works ---------- */
.steps{padding:clamp(48px,7vw,84px) 0}
.step-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:760px){ .step-grid{grid-template-columns:1fr} }
/* Deep-water cards: drifting caustics + rising plankton + cursor "light in the abyss" glow + depth parallax */
.step{position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; gap:13px; padding:26px 24px 28px; border-radius:18px; border:1px solid rgba(120,200,188,.20); background:linear-gradient(155deg,rgba(120,200,188,.12),rgba(120,200,188,.02) 46%,rgba(11,34,39,.5)),var(--bg-2); transition:border-color .3s var(--ease-out),transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.step > *{position:relative; z-index:2}
.step::before{content:''; position:absolute; inset:-45%; z-index:0; pointer-events:none; background:radial-gradient(42% 55% at 25% 30%,rgba(120,200,188,.24),transparent 60%),radial-gradient(38% 46% at 78% 68%,rgba(150,230,215,.16),transparent 60%),radial-gradient(50% 60% at 62% 18%,rgba(120,200,188,.10),transparent 55%); filter:blur(8px); opacity:.5; animation:step-caustics 15s ease-in-out infinite alternate; transition:opacity .45s var(--ease-out)}
.step::after{content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(160,240,224,.28),rgba(120,200,188,.10) 38%,transparent 66%); opacity:0; transition:opacity .35s var(--ease-out)}
.step:hover{transform:translateY(-4px); border-color:rgba(150,230,215,.5); box-shadow:0 22px 55px -22px rgba(53,176,166,.45)}
.step:hover::before{opacity:1}
.step:hover::after{opacity:1}
.step .num{position:absolute; top:20px; right:22px; z-index:2; font-size:13px; font-weight:700; color:var(--lime); font-variant-numeric:tabular-nums; letter-spacing:.1em; opacity:.85}
.step .si{width:50px; height:50px; border-radius:14px; display:grid; place-items:center; color:#8fd9cb; background:linear-gradient(145deg,rgba(120,200,188,.28),rgba(120,200,188,.06)); border:1px solid rgba(120,200,188,.42); transition:box-shadow .35s var(--ease-out),border-color .35s var(--ease-out),color .35s var(--ease-out),transform .35s var(--ease-out)}
.step .si svg{stroke-width:1.5}
.step:hover .si{border-color:rgba(160,240,224,.72); color:#a7f0e2; box-shadow:0 0 26px rgba(120,200,188,.4); transform:translate3d(calc(var(--px,0)*15px),calc(var(--py,0)*15px - 2px),0)}
.step h3{font-size:19px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.step p{font-size:14.5px; color:var(--ink-2); line-height:1.55; max-width:36ch}
.step h3,.step p{transition:transform .3s var(--ease-out); will-change:transform}
.step:hover h3{transform:translate3d(calc(var(--px,0)*9px),calc(var(--py,0)*9px),0)}
.step:hover p{transform:translate3d(calc(var(--px,0)*5px),calc(var(--py,0)*5px),0)}
/* rising plankton + hover sheen sweep */
.step-fx{position:absolute; inset:0; pointer-events:none; border-radius:inherit; overflow:hidden}
.step > .step-motes{z-index:0; -webkit-mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent); mask:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.step-motes::before,.step-motes::after{content:''; position:absolute; left:0; top:0; width:100%; height:200%; background-repeat:repeat; background-size:100% 50%; background-image:radial-gradient(3px 3px at 15% 12%,rgba(150,240,225,.6),transparent 62%),radial-gradient(3.5px 3.5px at 45% 32%,rgba(120,220,205,.45),transparent 62%),radial-gradient(2.5px 2.5px at 72% 22%,rgba(160,245,230,.55),transparent 62%),radial-gradient(3px 3px at 88% 44%,rgba(120,220,205,.48),transparent 62%),radial-gradient(3.5px 3.5px at 30% 62%,rgba(150,240,225,.55),transparent 62%),radial-gradient(2.5px 2.5px at 60% 84%,rgba(160,245,230,.5),transparent 62%); animation:step-rise 12s linear infinite; opacity:.7}
.step-motes::after{animation-duration:19s; opacity:.4; background-position:9% 0}
.step > .step-sheen{z-index:1}
.step-sheen::before{content:''; position:absolute; top:-30%; height:160%; left:-60%; width:45%; background:linear-gradient(100deg,transparent,rgba(190,250,238,.14),transparent); transform:skewX(-16deg); opacity:0}
.step:hover .step-sheen::before{animation:step-sweep 1.15s var(--ease-out) .05s}
@keyframes step-rise{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes step-sweep{0%{left:-60%;opacity:0}15%{opacity:1}100%{left:135%;opacity:0}}
@keyframes step-caustics{0%{transform:translate3d(-4%,-3%,0) scale(1.06) rotate(0deg)}50%{transform:translate3d(3%,3%,0) scale(1.14) rotate(2.5deg)}100%{transform:translate3d(-2%,4%,0) scale(1.07) rotate(-1.5deg)}}
@media (prefers-reduced-motion:reduce){ .step::before,.step-motes::before,.step-motes::after,.step-sheen::before{animation:none} .step-motes{display:none} .step,.step::after,.step .si{transition:none} .step:hover .si,.step:hover h3,.step:hover p{transform:none !important} }

/* ---------- collection hub ---------- */
.collections{padding:clamp(48px,7vw,84px) 0; border-top:1px solid var(--line)}
.cat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width:900px){ .cat-grid{grid-template-columns:repeat(2,1fr)} }
.cat-card{
  display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-surface);
  overflow:hidden; background:var(--bg-2); text-decoration:none;
  transition:transform .22s var(--ease-out), border-color .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.cat-media{aspect-ratio:1/1; overflow:hidden; border-bottom:1px solid var(--line)}
.cat-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s var(--ease-out)}
.cat-body{padding:15px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.cat-name{font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.cat-count{display:none}   /* compact: title only */
.cat-body::after{content:"\2192"; color:var(--ink-3); font-size:18px; transition:transform .2s var(--ease-out), color .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .cat-card:hover{transform:translateY(-4px); border-color:rgba(199,229,46,.45); box-shadow:0 24px 44px -26px rgba(0,0,0,.8)}
  .cat-card:hover .cat-media img{transform:scale(1.05)}
  .cat-card:hover .cat-name{color:var(--lime)}
  .cat-card:hover .cat-body::after{color:var(--lime); transform:translateX(3px)}
}

/* ---------- care guides ---------- */
.guides{padding:clamp(48px,7vw,84px) 0; border-top:1px solid var(--line)}
.guide-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:820px){.guide-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.guide-grid{grid-template-columns:1fr}}
.guide-card{display:flex; align-items:center; gap:14px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--bg-2); transition:transform .2s var(--ease-out),border-color .2s var(--ease-out)}
.guide-card:hover{transform:translateY(-3px); border-color:rgba(199,229,46,.4)}
.guide-card .gm{width:72px; height:72px; flex:none; border-radius:10px; overflow:hidden; border:1px solid var(--line)}
.guide-card .gm img{width:100%; height:100%; object-fit:cover; display:block}
.guide-card .gt{font-size:15px; font-weight:600; color:var(--ink)}
.guide-card .gtag{display:block; margin-top:3px; font-size:12px; color:var(--ink-3)}
.guide-card:hover .gt{color:var(--lime)}
.guide-more{display:inline-block; margin-top:20px; color:var(--lime); font-size:14px; font-weight:600}
/* ---------- networks: three stores ---------- */
.networks{padding:clamp(48px,7vw,84px) 0; border-top:1px solid var(--line)}
.stores{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(26px,3.4vw,40px)}
@media(max-width:640px){ .stores{grid-template-columns:1fr} }
.store{
  display:flex; align-items:center; justify-content:center; min-height:132px; padding:24px;
  border:1px solid var(--line); border-radius:18px; background:var(--bg-2);
  transition:transform .22s var(--ease-out), border-color .22s var(--ease-out), background-color .22s var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .store:hover{transform:translateY(-4px); border-color:rgba(199,229,46,.45); background:color-mix(in srgb, var(--bg-2) 85%, var(--lime) 7%)}
}
.store-logo{height:clamp(24px,2.4vw,30px); width:auto; max-width:74%; object-fit:contain; opacity:.9; transition:opacity .22s var(--ease-out), filter .22s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .store:hover .store-logo{opacity:1; filter:drop-shadow(0 0 14px rgba(199,229,46,.35))} }
.wm-amazon{display:inline-flex; flex-direction:column; align-items:center; gap:6px}
.wm-amazon .smile{width:106px; height:13px; display:block; overflow:visible}
.wm-amazon .smile path{stroke:var(--lime); fill:none; transition:stroke .22s var(--ease-out)}
.wm-amazon .smile .head{fill:var(--lime); stroke:none; transition:fill .22s var(--ease-out)}

/* ---------- final cta ---------- */
.cta-band{
  padding:clamp(64px,9vw,120px) 0; border-top:1px solid var(--line);
  background:radial-gradient(90% 130% at 50% 130%, rgba(199,229,46,.12), transparent 58%), linear-gradient(180deg, var(--bg) 0%, var(--bg-3) 100%);
}
.cta-inner{display:flex; align-items:center; justify-content:space-between; gap:clamp(28px,5vw,72px); max-width:1040px; margin:0 auto; text-align:left}
.cta-copy{max-width:40ch}
.cta-inner h2{font-size:clamp(28px,3.6vw,42px); font-weight:600; letter-spacing:-.022em; line-height:1.05; text-wrap:balance; color:var(--ink)}
.cta-inner p{margin-top:12px; font-size:16px; color:var(--ink-2); text-wrap:pretty}
.cta-inner .btn-lime{flex:none; white-space:nowrap; font-size:14px}
@media (max-width:720px){ .cta-inner{flex-direction:column; align-items:center; text-align:center} }

footer{color:var(--ink-3); font-size:12.5px; padding:26px clamp(18px,4vw,32px) 34px; border-top:1px solid var(--line); text-align:center; background:var(--bg-3)}
footer a{color:var(--ink-2); text-decoration:none}
@media (hover:hover) and (pointer:fine){ footer a:hover{color:var(--lime)} }

@media (max-width:720px){
  .hero-right{display:none}
  nav.top-links a.hide-sm{display:none}
  .hero-copy{bottom:40px}
}

/* ===== edutainment sections ===== */
.explore, .tankmates, .quiz, .biomes, .rankings, .rare{padding:clamp(56px,8vw,100px) 0; border-top:1px solid var(--line)}
.xp-filters{display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 22px}
.xp-chip{font-size:13px; color:var(--ink-2); border:1px solid var(--line-2); border-radius:999px; padding:8px 15px; cursor:pointer; background:transparent; transition:color .2s var(--ease-out),background-color .2s var(--ease-out),border-color .2s var(--ease-out)}
.xp-chip.on{color:var(--on-lime); background:var(--lime); border-color:var(--lime)}
.xp-grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px}
@media (max-width:900px){ .xp-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .xp-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.xp-card{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--bg-2); position:relative; text-decoration:none; transition:transform .2s var(--ease-out),border-color .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .xp-card:hover{transform:translateY(-3px); border-color:rgba(199,229,46,.4)} }
.xp-card .m{position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#0d2a2f,#071a1e); border-bottom:1px solid var(--line)}
.xp-card .m img{max-width:82%; max-height:82%; object-fit:contain}
.xp-card .b{padding:10px 12px}
.xp-card .n{font-size:14px; font-weight:600; color:var(--ink)}
.xp-card .t{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.xp-wild{position:absolute; top:8px; left:8px; font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; background:rgba(199,229,46,.16); color:var(--lime); border:1px solid rgba(199,229,46,.3); border-radius:999px; padding:2px 7px; font-weight:600}
.xp-empty{color:var(--ink-3); font-size:14px; padding:20px 0}

.tm-pickers{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; margin:6px 0 20px}
.tm-pick{min-width:0; border:1px solid var(--line-2); border-radius:var(--r); background:var(--bg-2); padding:16px 16px 8px}
.tm-search{width:100%; max-width:230px; margin-bottom:10px; background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:999px; color:var(--ink); font-size:13px; padding:8px 15px; outline:none; transition:border-color .2s var(--ease-out)}
.tm-search::placeholder{color:var(--ink-3)}
.tm-search:focus{border-color:rgba(199,229,46,.5)}
.tm-none{color:var(--ink-3); font-size:13px; padding:22px 4px}
.tm-lbl{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px}
.tm-sel{display:flex; gap:8px; overflow-x:auto; min-width:0; padding:4px 2px 10px; transition:-webkit-mask-image .2s var(--ease-out), mask-image .2s var(--ease-out)}
.tm-sel::-webkit-scrollbar{height:5px}.tm-sel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.13); border-radius:3px}
.tm-sel.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 68%,transparent 97%); mask-image:linear-gradient(90deg,#000 68%,transparent 97%)}
.tm-sel.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent 3%,#000 20%); mask-image:linear-gradient(90deg,transparent 3%,#000 20%)}
.tm-sel.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent 3%,#000 18%,#000 68%,transparent 97%); mask-image:linear-gradient(90deg,transparent 3%,#000 18%,#000 68%,transparent 97%)}
.tm-fish{flex:0 0 auto; width:66px; text-align:center; cursor:pointer; opacity:.6; transition:opacity .2s var(--ease-out)}
.tm-fish.on{opacity:1}
.tm-fish .tf-m{width:66px; height:66px; border-radius:50%; background:linear-gradient(180deg,#0d2a2f,#071a1e); border:2px solid var(--line-2); display:flex; align-items:center; justify-content:center; transition:border-color .2s var(--ease-out)}
.tm-fish.on .tf-m{border-color:var(--lime)}
.tm-fish .tf-m img{max-width:80%; max-height:80%; object-fit:contain}
.tm-fish .tf-n{font-size:10.5px; color:var(--ink-2); margin-top:5px; line-height:1.2}
.tm-verdict{border-radius:var(--r); border:1px solid var(--line-2); background:var(--bg-2); padding:18px 22px; min-height:60px; display:flex; align-items:center; gap:14px; font-size:16px; color:var(--ink-2); text-wrap:pretty}
.tm-verdict .vd-dot{width:12px; height:12px; border-radius:50%; flex:none; background:var(--ink-3)}
.tm-verdict.good{border-color:rgba(120,220,120,.4)} .tm-verdict.good .vd-dot{background:#6fdc6f}
.tm-verdict.caution{border-color:rgba(240,200,90,.4)} .tm-verdict.caution .vd-dot{background:#f0c85a}
.tm-verdict.no{border-color:rgba(240,110,110,.4)} .tm-verdict.no .vd-dot{background:#f06e6e}
@media (max-width:640px){ .tm-pickers{grid-template-columns:1fr; gap:12px} }

.quiz-card{border:1px solid var(--line-2); border-radius:var(--r); background:var(--bg-2); padding:clamp(20px,3vw,32px); max-width:640px}
.quiz-prog{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.quiz-q{font-size:clamp(18px,2.4vw,23px); font-weight:600; color:var(--ink); margin:10px 0 18px; line-height:1.3; text-wrap:balance}
.quiz-opts{display:grid; gap:10px}
.quiz-opt{text-align:left; font-size:15px; color:var(--ink); background:rgba(255,255,255,.03); border:1px solid var(--line-2); border-radius:12px; padding:13px 16px; cursor:pointer; transition:border-color .15s var(--ease-out),background-color .15s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .quiz-opt:hover:enabled{border-color:rgba(199,229,46,.45)} }
.quiz-opt.correct{background:rgba(120,220,120,.14); border-color:#6fdc6f; color:#eafbe8}
.quiz-opt.wrong{background:rgba(240,110,110,.12); border-color:#f06e6e}
.quiz-opt:disabled{cursor:default}
.quiz-next{margin-top:18px; display:flex; justify-content:space-between; align-items:center; gap:12px}
.quiz-score{font-size:14px; color:var(--ink-2)}
.quiz-result{text-align:center; padding:8px 0}
.quiz-result .big{font-size:42px; font-weight:600; color:var(--lime); letter-spacing:-.02em}
/* quiz: centered glass card floating over a living underwater background */
.quiz{position:relative; overflow:hidden}
.quiz .wrap{position:relative; z-index:2}
.quiz .section-head{text-align:center; margin-left:auto; margin-right:auto}
.quiz-card{margin:0 auto; background:color-mix(in srgb, var(--bg-2) 56%, transparent); -webkit-backdrop-filter:blur(16px) saturate(1.35); backdrop-filter:blur(16px) saturate(1.35); border-color:rgba(255,255,255,.16); box-shadow:0 24px 60px rgba(0,0,0,.4)}
.quiz-bg{position:absolute; inset:0; z-index:0; overflow:hidden; background:radial-gradient(120% 85% at 50% -10%, rgba(28,111,116,.42), transparent 62%), linear-gradient(180deg,#0a2327,#06171b)}
.quiz-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,20,24,.42), rgba(6,20,24,.66))}
.qf{position:absolute; height:auto; opacity:.5; will-change:transform; pointer-events:none}
.qf1{width:132px; top:9%; animation:qswimR 40s linear infinite}
.qf2{width:104px; top:60%; animation:qswimL 32s linear infinite; animation-delay:-6s; filter:blur(.6px)}
.qf3{width:120px; top:70%; animation:qswimR 46s linear infinite; animation-delay:-20s}
.qf4{width:70px; top:26%; animation:qswimL 26s linear infinite; animation-delay:-12s; filter:blur(1px); opacity:.4}
.qf5{width:86px; top:44%; animation:qswimR 36s linear infinite; animation-delay:-28s}
.qf6{width:112px; top:80%; animation:qswimL 42s linear infinite; animation-delay:-4s; filter:blur(.8px); opacity:.42}
@keyframes qswimR{from{transform:translateX(-22vw) scaleX(-1)} to{transform:translateX(124vw) scaleX(-1)}}
@keyframes qswimL{from{transform:translateX(124vw)} to{transform:translateX(-22vw)}}
@media (prefers-reduced-motion:reduce){ .qf{display:none} }

.biome-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px}
.biome-card{border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2); padding:22px; display:flex; flex-direction:column; text-decoration:none; transition:transform .2s var(--ease-out),border-color .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .biome-card:hover{transform:translateY(-3px); border-color:rgba(199,229,46,.4)} }
.biome-card h3{font-size:19px; font-weight:600; color:var(--ink)}
.biome-card p{font-size:13.5px; color:var(--ink-2); margin-top:8px; line-height:1.5; text-wrap:pretty}
.biome-card .bc-fish{margin-top:14px; display:flex; gap:6px; flex-wrap:wrap}
.biome-card .bc-fish img{width:38px; height:38px; object-fit:contain; background:linear-gradient(180deg,#0d2a2f,#071a1e); border:1px solid var(--line); border-radius:8px; padding:3px}
.biome-card .bc-more{font-size:13px; color:var(--lime); margin-top:auto; padding-top:14px; display:inline-block}

/* ===== FAQ (centered, over a living tank background) ===== */
.faq-sec{position:relative; overflow:hidden; padding:clamp(56px,8vw,100px) 0; border-top:1px solid var(--line)}
.faq-sec .wrap{position:relative; z-index:2}
.faq-sec .section-head{text-align:center; margin-left:auto; margin-right:auto}
.faq-list{max-width:780px; margin:8px auto 0; background:color-mix(in srgb, var(--bg-2) 56%, transparent); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); border:1px solid rgba(255,255,255,.13); border-radius:var(--r); padding:6px 26px; box-shadow:0 24px 60px rgba(0,0,0,.36)}
.faq-list details{border-top:1px solid var(--line); padding:17px 2px}
.faq-list details:first-child{border-top:0}
.faq-list summary{cursor:pointer; list-style:none; font-size:16.5px; font-weight:600; color:var(--ink-2); display:flex; justify-content:space-between; gap:18px; align-items:center; transition:color .2s var(--ease-out)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+"; color:var(--lime); font-size:22px; line-height:1; flex:none}
.faq-list details[open] summary{color:var(--ink)}
.faq-list details[open] summary::after{content:"\2212"}
@media (hover:hover) and (pointer:fine){ .faq-list summary:hover{color:var(--ink)} }
.faq-list p{color:var(--ink-2); margin-top:12px; max-width:68ch; line-height:1.65; font-size:15px}

/* ===== footer ===== */
.site-footer{border-top:1px solid var(--line); background:var(--bg-3); padding:clamp(44px,6vw,68px) 0 30px; text-align:left}
.foot-top{display:grid; grid-template-columns:1.3fr 2fr; gap:clamp(28px,5vw,64px)}
.foot-brand .brand{font-size:20px; font-weight:900; letter-spacing:.024em; color:var(--ink)}
.foot-brand .brand .dot{color:var(--lime)}
.foot-brand p{color:var(--ink-3); font-size:14px; margin-top:14px; max-width:40ch; line-height:1.65}
.foot-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.foot-col h4{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; font-weight:600}
.foot-col a{display:block; color:var(--ink-2); text-decoration:none; font-size:14px; padding:6px 0; transition:color .18s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .foot-col a:hover{color:var(--lime)} }
.foot-bottom{margin-top:clamp(34px,5vw,54px); padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; color:var(--ink-3); font-size:12.5px}
.foot-fine{color:var(--ink-3); opacity:.8}
@media (max-width:760px){ .foot-top{grid-template-columns:1fr; gap:28px} }
@media (max-width:520px){ .foot-cols{grid-template-columns:1fr 1fr} }
/* mobile: pull the whole type scale down a notch (headlines feel oversized on phones) */
@media (max-width:600px){
  body{font-size:15px}
  .hero-copy h1{font-size:23px}
  .hero-copy p{font-size:14.5px}
  .section-head h2{font-size:22px}
  .section-head p{font-size:14px}
  .fotw-name{font-size:24px}
  .cta-inner h2{font-size:24px}
  .cta-inner p{font-size:14.5px}
  .quiz-q{font-size:17px}
  .foot-brand p{font-size:13.5px}
}

/* ---------- Rare & exotic showcase (premium collection) ---------- */
.rare-grid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px}
@media (max-width:900px){ .rare-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .rare-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px} }
.rare-card{position:relative; border-radius:16px; overflow:hidden; cursor:pointer; text-align:left;
  border:1px solid rgba(199,229,46,.24); background:
    radial-gradient(120% 80% at 50% 0%, rgba(199,229,46,.09), transparent 60%),
    linear-gradient(180deg, #0e2429, #081b1f);
  transition:transform .22s var(--ease-out), border-color .22s var(--ease-out), box-shadow .22s var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .rare-card:hover{transform:translateY(-4px); border-color:rgba(199,229,46,.55);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.8)} }
.rare-card:active{transform:scale(.985)}
.rare-tier{position:absolute; top:9px; left:9px; z-index:2; display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:700; letter-spacing:.04em; border-radius:999px; padding:3px 8px; backdrop-filter:blur(3px)}
.rare-tier.exotic{color:#ffd76a; background:rgba(40,30,6,.7); border:1px solid rgba(255,215,106,.45)}
.rare-tier.premium{color:var(--lime); background:rgba(6,23,27,.72); border:1px solid rgba(199,229,46,.42)}
.rare-cost{position:absolute; top:9px; right:9px; z-index:2; display:inline-flex; align-items:center; gap:3px;
  font-size:11px; font-weight:700; color:var(--ink); background:rgba(6,23,27,.72); border:1px solid var(--line-2);
  border-radius:999px; padding:3px 8px 3px 7px; font-variant-numeric:tabular-nums; backdrop-filter:blur(3px)}
.rare-card.owned .rare-cost{color:var(--lime); border-color:rgba(199,229,46,.5)}
.rare-card.owned .rare-cost .cr{display:none}
.rare-media{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(80% 70% at 50% 42%, rgba(120,200,188,.14), transparent 66%)}
/* cap HEIGHT lower than width so a TALL subject (seahorse) doesn't tower to fill the card;
   wide fish are width-limited so they're unaffected -> consistent visual size across aspect ratios */
.rare-media img{max-width:82%; max-height:64%; object-fit:contain; filter:drop-shadow(0 12px 20px rgba(0,0,0,.6))}
.rare-body{padding:0 14px 14px; display:flex; flex-direction:column; gap:2px}
.rare-name{display:block; font-size:14.5px; font-weight:600; color:var(--ink); letter-spacing:-.01em; line-height:1.2}
.rare-sub{display:block; font-size:11.5px; color:var(--ink-3); text-transform:capitalize}
.rare-cta{margin-top:clamp(26px,3.4vw,38px); display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; text-align:center}
.rare-cta .rc-line{font-size:15px; color:var(--ink-2)}
.rare-cta .rc-line b{color:var(--ink)}
.rare-cta button{font:inherit; font-size:14px; font-weight:600; color:var(--on-lime); background:var(--lime); border:0;
  border-radius:999px; padding:12px 24px; cursor:pointer; transition:background-color .18s var(--ease-out), transform .14s var(--ease-out)}
.rare-cta button:hover{background:var(--lime-deep)} .rare-cta button:active{transform:scale(.97)}