/* ANGRY FISH — REEF WALL
   Bright, loud, flat. The page borrows the art's own language: pale
   seafoam ground, thick black pixel outlines, hard offset shadows.
   No gradients, no glow, no transparency, no blur. */

:root{
  --foam:#dff4ee;        /* page ground, picked from the art */
  --foam-2:#cfece4;      /* a half-step down, for rails */
  --ink:#14161c;         /* near-black: text, borders, shadows */
  --paper:#ffffff;       /* cards */
  --coral:#ff7a6b;
  --lemon:#ffd84d;
  --lagoon:#4fc6e0;
  --bubblegum:#ff8fc6;
  --kelp:#2fa46a;

  --heavy:"Arial Black","Arial Bold","Helvetica Neue",Impact,"Segoe UI Black",Arial,sans-serif;
  --body:Arial,"Helvetica Neue",Helvetica,"Segoe UI",sans-serif;

  --b:4px;               /* the pixel outline */
  --sh:6px;              /* the hard shadow offset */
  --bar-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--foam)}
body{
  background:var(--foam);
  color:var(--ink);
  font-family:var(--body);
  font-size:14px;
  line-height:1.5;
  overflow-x:hidden;
}
img{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
code{font-family:ui-monospace,Consolas,"Courier New",monospace;font-weight:700}

:focus-visible{outline:4px solid var(--ink);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:30;
  background:var(--lemon);color:var(--ink);padding:12px 18px;
  font-family:var(--heavy);border:var(--b) solid var(--ink);
}
.skip:focus{left:0}
.sep{opacity:.45;padding:0 .15em}

/* ============ TOP BAR ============ */
.bar{
  height:var(--bar-h);
  display:flex;align-items:center;gap:18px;
  padding:0 20px;
  background:var(--foam);
  border-bottom:var(--b) solid var(--ink);
}
.mark{margin:0;color:var(--ink);line-height:0}
.mark svg{display:block}
.bar-meta{
  margin:0;font-family:var(--heavy);font-size:12px;letter-spacing:.14em;
  padding-left:18px;border-left:var(--b) solid var(--ink);
}
.bar-net{
  margin:0 0 0 auto;min-width:0;display:flex;align-items:center;gap:8px;
  font-family:var(--heavy);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
}
.bar-net span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lamp{flex:0 0 auto;width:12px;height:12px;background:var(--ink);border:2px solid var(--ink)}
.lamp.on{background:var(--kelp)}
.lamp.warn{background:var(--lemon)}
.lamp.bad{background:var(--coral)}

/* ============ THE WALL ============ */
.stage{position:relative}

.wall{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  background:var(--ink);
  gap:0;
}
.wall .tile{margin:0;position:relative;line-height:0}
.wall .tile img{width:100%;height:auto;aspect-ratio:1/1}
.tile figcaption{
  position:absolute;left:0;bottom:0;
  font-family:var(--heavy);font-size:10px;letter-spacing:.08em;
  background:var(--ink);color:var(--foam);
  padding:3px 6px;line-height:1.2;
}
.tile.flip img{opacity:0}

/* the console sits ON the wall */
.console{
  position:absolute;right:36px;top:34px;width:430px;
  background:var(--paper);
  border:var(--b) solid var(--ink);
  box-shadow:var(--sh) var(--sh) 0 var(--ink);
  padding:20px;
  display:flex;flex-direction:column;
}
.con-head{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--heavy);font-size:11px;letter-spacing:.22em;
  padding-bottom:12px;border-bottom:var(--b) solid var(--ink);
}
.stale{background:var(--coral);padding:2px 6px;letter-spacing:.12em}

.count{
  margin:16px 0 10px;font-family:var(--heavy);
  font-size:56px;line-height:.92;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.count .slash{color:var(--coral);margin:0 .1em}
.count .capn{font-size:28px}

.depthbar{height:18px;background:var(--foam-2);border:var(--b) solid var(--ink);position:relative}
.depthbar span{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:var(--kelp);transition:width .3s steps(10,end);
}

.price{
  margin:14px 0 0;font-family:var(--heavy);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;
}
.price b{background:var(--lemon);padding:2px 6px;border:2px solid var(--ink)}
.usd{opacity:.55}

.zonerow{
  margin:14px 0 0;padding:10px 12px;
  background:var(--foam);border:var(--b) solid var(--ink);
  display:flex;flex-direction:column;gap:3px;
}
.zonelabel{font-family:var(--heavy);font-size:10px;letter-spacing:.2em}
.zonebody{font-size:13px}
.zonerow.contact{background:var(--lemon)}

.stepper{display:flex;gap:8px;margin:16px 0 0}
.step{
  height:56px;min-width:56px;padding:0;
  background:var(--paper);color:var(--ink);
  border:var(--b) solid var(--ink);
  box-shadow:var(--sh) var(--sh) 0 var(--ink);
  font-family:var(--heavy);font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.step:hover:not(:disabled){background:var(--lagoon);transform:translate(2px,2px);box-shadow:4px 4px 0 var(--ink)}
.step:active:not(:disabled){transform:translate(var(--sh),var(--sh));box-shadow:0 0 0 var(--ink)}
.step:disabled{background:var(--foam-2);opacity:.5;cursor:not-allowed;box-shadow:var(--sh) var(--sh) 0 var(--ink)}
.step.max{font-size:13px;letter-spacing:.1em;padding:0 12px}
.qty{
  height:56px;flex:1 1 auto;min-width:0;
  background:var(--paper);color:var(--ink);
  border:var(--b) solid var(--ink);
  box-shadow:var(--sh) var(--sh) 0 var(--ink);
  font-family:var(--heavy);font-size:26px;text-align:center;
  font-variant-numeric:tabular-nums;
}

.due{margin:20px 0 0;display:flex;align-items:baseline;gap:10px}
.duelab{font-family:var(--heavy);font-size:10px;letter-spacing:.2em}
.dueval{font-family:var(--heavy);font-size:22px;font-variant-numeric:tabular-nums}
.split{margin:4px 0 0;font-size:12px;opacity:.6;min-height:18px}

.safe{
  margin-top:16px;padding:10px 12px;
  background:var(--foam);border:var(--b) solid var(--ink);
  display:flex;flex-direction:column;gap:4px;
}
.safe-k{font-family:var(--heavy);font-size:9.5px;letter-spacing:.18em}
.safe-v{font-size:12px;line-height:1.45}
.safe-v b{font-family:var(--heavy)}

.primary{
  margin-top:16px;height:72px;width:100%;
  background:var(--lemon);color:var(--ink);
  border:var(--b) solid var(--ink);
  box-shadow:var(--sh) var(--sh) 0 var(--ink);
  font-family:var(--heavy);font-size:18px;letter-spacing:.1em;cursor:pointer;
}
.primary:hover:not(:disabled){transform:translate(2px,2px);box-shadow:4px 4px 0 var(--ink)}
.primary:active:not(:disabled){transform:translate(var(--sh),var(--sh));box-shadow:0 0 0 var(--ink)}
.primary:disabled{background:var(--foam-2);opacity:.6;cursor:not-allowed}
.primary.busy{background:var(--lagoon);cursor:progress}

.secondary{
  margin-top:10px;height:52px;width:100%;
  background:var(--lagoon);color:var(--ink);
  border:var(--b) solid var(--ink);
  box-shadow:var(--sh) var(--sh) 0 var(--ink);
  font-family:var(--heavy);font-size:13px;letter-spacing:.1em;cursor:pointer;
}
.secondary:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--ink)}

.status{margin:14px 0 0;font-size:12.5px;line-height:1.5;min-height:36px}
.status.bad{background:var(--coral);padding:8px;border:2px solid var(--ink)}
.status.good{background:var(--kelp);color:var(--paper);padding:8px;border:2px solid var(--ink)}
.status.warn{background:var(--lemon);padding:8px;border:2px solid var(--ink)}

/* ============ THE DESCENT STRIP ============ */
.strip-sec{background:var(--foam);border-top:var(--b) solid var(--ink);padding:9px 20px 13px}
.strip-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font-family:var(--heavy);font-size:11px;letter-spacing:.18em;padding-bottom:6px;
}
.strip-v{opacity:.55}

.strip-rail{position:relative;padding-top:22px}
.zblocks{display:grid;grid-template-columns:repeat(13,1fr);gap:4px}
.zblock{
  background:var(--c,var(--coral));
  border:var(--b) solid var(--ink);
  height:44px;padding:4px 6px;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
}
.zblock .zn{font-family:var(--heavy);font-size:13px;line-height:1}
.zblock .zr{font-size:9.5px;letter-spacing:.02em;opacity:.7;white-space:nowrap}
.zblock.passed{background:var(--foam-2)}
.zblock.contact{box-shadow:inset 0 0 0 4px var(--ink)}
.zblock .zfish{position:absolute;right:2px;bottom:2px;width:28px;height:28px;border:2px solid var(--ink)}

.diver{
  position:absolute;left:var(--p,0%);top:0;
  transform:translateX(-50%);
  display:flex;flex-direction:row;align-items:center;gap:4px;
  color:var(--ink);
  transition:left .3s steps(10,end);
  pointer-events:none;
}
.diver-tag{
  font-family:var(--heavy);font-size:10px;letter-spacing:.06em;
  background:var(--ink);color:var(--foam);padding:1px 5px;
  white-space:nowrap;
}

/* ============ SECTIONS ============ */
.sec{padding:52px 20px;border-top:var(--b) solid var(--ink);max-width:1440px;margin:0 auto}
.h{margin:0;font-family:var(--heavy);font-size:26px;letter-spacing:.14em;text-transform:uppercase}
.sub{margin:14px 0 0;max-width:80ch;font-size:15px;line-height:1.65}

.zonegrid{margin-top:26px;display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:8px}
.zc{
  background:var(--c,var(--coral));
  border:var(--b) solid var(--ink);
  box-shadow:var(--sh) var(--sh) 0 var(--ink);
  padding:10px 9px;min-height:132px;
  display:flex;flex-direction:column;gap:6px;
}
.zc-n{font-family:var(--heavy);font-size:15px;line-height:1}
.zc-r{font-size:11px;line-height:1.3}
.zc-id{font-family:var(--heavy);font-size:14px}
.zc-h{font-size:9.5px;word-break:break-all;opacity:.7}
.zc-s{
  margin-top:auto;font-family:var(--heavy);font-size:9px;letter-spacing:.12em;
  background:var(--ink);color:var(--foam);padding:2px 5px;align-self:flex-start;
}
.zc.passed{background:var(--foam-2)}

.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.lines{margin:22px 0 0;padding:0;list-style:none}
.lines li{
  display:flex;gap:14px;padding:14px 0;
  border-top:var(--b) solid var(--ink);font-size:15px;line-height:1.6;
}
.lines li:last-child{border-bottom:var(--b) solid var(--ink)}
.lines .n{
  font-family:var(--heavy);font-size:12px;
  background:var(--ink);color:var(--foam);padding:3px 6px;height:22px;
  flex:0 0 auto;line-height:1.3;
}

/* ---- SHOAL: a second wall, edge to edge ---- */
.shoal-sec{padding:52px 0 0;border-top:var(--b) solid var(--ink)}
.shoal-h{padding:0 20px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.shoal-note{font-family:var(--body);font-size:13px;letter-spacing:0;text-transform:none;opacity:.6}
.shoal{
  margin-top:26px;display:grid;grid-template-columns:repeat(8,1fr);
  background:var(--ink);border-top:var(--b) solid var(--ink);
}
.shoal .tile{margin:0;position:relative;line-height:0}
.shoal .tile img{width:100%;height:auto;aspect-ratio:1/1}

/* ============ FOOTER ============ */
.foot{background:var(--ink);color:var(--foam);padding:40px 20px 52px}
.foot-grid{display:flex;flex-wrap:wrap;gap:16px 44px}
.foot-col{display:flex;flex-direction:column;gap:4px}
.foot-k{font-family:var(--heavy);font-size:9.5px;letter-spacing:.2em;color:var(--lemon)}
.foot-v{font-size:13px;color:var(--foam);text-decoration:none;word-break:break-all}
a.foot-v{border-bottom:2px solid var(--lemon)}
a.foot-v:hover{color:var(--lemon)}
.foot-note{margin:30px 0 0;max-width:86ch;font-size:12.5px;line-height:1.7;opacity:.75}
.foot code{color:var(--lemon)}

/* ============ NARROW ============ */
@media (max-width:1280px){
  .console{width:400px;right:24px;top:24px}
  .wall{grid-template-columns:repeat(6,1fr)}
  .shoal{grid-template-columns:repeat(6,1fr)}
  .zonegrid{grid-template-columns:repeat(7,minmax(0,1fr))}
}
@media (max-width:900px){
  .stage{display:flex;flex-direction:column}
  .console{position:static;order:-1;width:auto;margin:18px 16px 0;right:auto;top:auto}
  .wall{grid-template-columns:repeat(4,1fr);margin-top:18px}
  .shoal{grid-template-columns:repeat(4,1fr)}
  .two{grid-template-columns:minmax(0,1fr);gap:36px}
  .zonegrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .h{font-size:22px}
}
@media (max-width:560px){
  .bar{gap:10px;padding:0 12px}
  .bar-meta{display:none}
  .mark svg{width:150px;height:23px}
  .bar-net{font-size:9px;letter-spacing:.04em}
  .console{margin:14px 12px 0;padding:14px}
  .count{font-size:44px}
  .count .capn{font-size:22px}
  .sec{padding:38px 12px}
  .shoal-h{padding:0 12px}
  .strip-sec{padding:12px 12px 16px}
  .zonegrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .zblocks{gap:2px}
  .zblock{height:40px;padding:3px;border-width:2px}
  .zblock .zr{display:none}
  .zblock .zn{font-size:11px}
  .zblock .zfish{width:16px;height:16px}
  .strip-v{display:none}
  .wall{grid-template-columns:repeat(3,1fr)}
  .shoal{grid-template-columns:repeat(3,1fr)}
  .foot{padding:30px 12px 40px}
  .primary{height:64px;font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .step:hover,.primary:hover,.secondary:hover,.step:active,.primary:active{transform:none}
}