:root{
  --deep:#01121c;
  --mid:#032b40;
  --shallow:#064b63;
  --ink:#cdeef7;
  --dim:#5d93a8;
  --live:#7bffd4;
  --hot:#ffe27a;
  --cold:#4b7fa3;
  --dead:#54697a;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,"DejaVu Sans Mono",monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--deep);color:var(--ink);
  font-family:var(--mono);font-size:14px;
  overflow:hidden;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
}

/* ---------- top bar ---------- */
.bar{
  display:flex;align-items:center;gap:12px;flex:0 0 auto;
  padding:10px 16px;border-bottom:1px solid rgba(123,255,212,.18);
  background:#010d15;z-index:5;
}
.logo{font-weight:700;letter-spacing:.22em;color:var(--live);
  text-shadow:0 0 12px rgba(123,255,212,.45)}
.ticker{color:var(--hot);font-size:12px;font-weight:700;letter-spacing:.06em}
.tagline{color:var(--dim);font-size:12px}
.spacer{flex:1}
.status{color:var(--dim);font-size:12px}
.btn{
  font:inherit;font-size:12px;cursor:pointer;background:transparent;
  color:var(--live);border:1px solid rgba(123,255,212,.4);padding:2px 10px;
}
.btn:hover{background:var(--live);color:#01121c}

/* ---------- the tank ---------- */
.tank{
  position:relative;flex:1 1 auto;overflow:hidden;
  background:linear-gradient(to bottom,var(--shallow) 0%,var(--mid) 45%,var(--deep) 100%);
}

.surface{
  position:absolute;top:0;left:0;right:0;height:34px;
  border-bottom:1px solid rgba(123,255,212,.55);
  background:linear-gradient(to bottom,rgba(123,255,212,.22),rgba(123,255,212,0));
  animation:shimmer 6s ease-in-out infinite;
}
@keyframes shimmer{0%,100%{opacity:.75}50%{opacity:1}}
.surfacelabel{
  position:absolute;right:12px;bottom:4px;font-size:11px;
  letter-spacing:.18em;color:var(--live);opacity:.85;
}

.scale{position:absolute;inset:0;pointer-events:none}
.scale span{
  position:absolute;left:10px;font-size:10px;color:var(--dim);opacity:.55;
  border-top:1px dashed rgba(93,147,168,.28);width:calc(100% - 20px);padding-top:2px;
}

.fishlayer{position:absolute;inset:0}

/* ---------- fish ---------- */
.fish{
  position:absolute;top:0;left:0;
  white-space:nowrap;cursor:pointer;
  transform:translate3d(0,0,0);
  will-change:transform;
  line-height:1;
}
.fish .body{color:var(--cold);text-shadow:0 0 10px rgba(75,127,163,.5);transition:color .6s}
.fish.live .body{color:var(--live);text-shadow:0 0 12px rgba(123,255,212,.55)}
.fish.blazing .body{color:var(--hot);text-shadow:0 0 14px rgba(255,226,122,.6)}
.fish .tag{
  display:block;font-size:10px;color:var(--ink);opacity:.75;
  margin-top:2px;letter-spacing:.04em;
}
.fish:hover .tag{opacity:1}
.fish.escaping{transition:transform 2.6s cubic-bezier(.4,0,.9,.2);opacity:.9}
.fish.gone{opacity:0;transition:opacity .8s}

/* ---------- seafloor ---------- */
.floor{position:absolute;left:0;right:0;bottom:0;height:74px}
.sand{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(2,20,30,0),rgba(1,8,12,.95));
  border-top:1px solid rgba(93,147,168,.25);
}
.bones{
  position:absolute;left:0;right:0;bottom:6px;
  display:flex;gap:22px;padding:0 16px;overflow:hidden;align-items:flex-end;
}
.bone{color:var(--dead);font-size:12px;line-height:1.2;cursor:pointer;flex:0 0 auto}
.bone:hover{color:var(--ink)}
.bone .tag{display:block;font-size:9px;opacity:.7}

/* ---------- bubbles ---------- */
.bubbles{position:absolute;inset:0;pointer-events:none}
.bubble{
  position:absolute;bottom:-20px;color:rgba(205,238,247,.28);font-size:10px;
  animation:rise linear forwards;
}
@keyframes rise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  10%{opacity:.7}
  100%{transform:translateY(-100vh) translateX(14px);opacity:0}
}

/* ---------- escaped feed ---------- */
.feed{
  position:absolute;top:56px;right:12px;width:210px;z-index:4;
  background:rgba(1,13,21,.82);border:1px solid rgba(123,255,212,.22);
  padding:8px 10px;max-height:40vh;overflow:auto;
}
.feedhead{font-size:10px;letter-spacing:.16em;color:var(--live);margin-bottom:6px}
.feedrow{font-size:11px;padding:3px 0;border-bottom:1px dashed rgba(93,147,168,.2);cursor:pointer}
.feedrow:last-child{border-bottom:0}
.feedrow:hover{color:var(--live)}
.feedrow .sub{color:var(--dim);font-size:10px}

/* ---------- how it works ---------- */
.howto{
  position:absolute;top:56px;left:16px;width:380px;max-width:calc(100% - 32px);
  max-height:calc(100% - 100px);overflow:auto;z-index:7;
  background:rgba(1,13,21,.94);border:1px solid rgba(123,255,212,.3);
  padding:16px 18px 14px;
}
.howto[hidden]{display:none}
.howto h1{font-size:15px;margin:0 0 4px;color:var(--live);letter-spacing:.02em}
.howto .lead{margin:0 0 14px;font-size:12px;color:var(--ink);opacity:.85;line-height:1.5}
.legend{margin:0;font-size:12px;line-height:1.5}
.legend dt{color:var(--live);margin-top:10px;font-weight:700;display:flex;align-items:center;gap:7px}
.legend dt:first-child{margin-top:0}
.legend dd{margin:2px 0 0 25px;color:var(--ink);opacity:.82}
.legend b{color:var(--ink);opacity:1}
.swatch{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;flex:0 0 18px;font-size:11px;
  border:1px solid rgba(123,255,212,.45);color:var(--live);
}
.swatch.blazing{color:var(--hot);border-color:rgba(255,226,122,.5)}
.swatch.dead{color:var(--dead);border-color:rgba(84,105,122,.6)}
.fine{
  margin:14px 0 0;padding-top:10px;border-top:1px dashed rgba(93,147,168,.3);
  font-size:11px;color:var(--dim);line-height:1.55;
}
.fine b{color:var(--ink)}

/* ---------- inspector ---------- */
.inspector{
  position:absolute;left:16px;bottom:16px;width:340px;max-width:calc(100% - 32px);
  background:rgba(1,13,21,.95);border:1px solid rgba(123,255,212,.35);
  padding:14px;z-index:6;
}
.close{
  position:absolute;top:6px;right:8px;background:none;border:0;
  color:var(--dim);font-size:18px;cursor:pointer;line-height:1;
}
.close:hover{color:var(--ink)}
.ihead{display:flex;gap:10px;align-items:flex-start}
.ipfp{width:52px;height:52px;flex:0 0 52px;object-fit:cover;
  border:1px solid rgba(123,255,212,.3);background:#02202e}
.iname{font-size:15px;font-weight:700;color:var(--live)}
.isym{color:var(--ink);font-size:13px}
.istats{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;margin:10px 0;font-size:12px}
.istats .k{color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.ica{
  font-size:11px;color:var(--dim);word-break:break-all;
  border-top:1px dashed rgba(93,147,168,.3);padding-top:8px;margin-top:4px;
}
.ilinks{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ilinks a,.ilinks button{
  font:inherit;font-size:11px;text-decoration:none;cursor:pointer;
  color:var(--ink);background:transparent;
  border:1px solid rgba(93,147,168,.5);padding:2px 8px;
}
.ilinks a:hover,.ilinks button:hover{background:var(--ink);color:#01121c}
.ilinks button.ok{background:var(--live);border-color:var(--live);color:#01121c}

@media (max-width:720px){
  .tagline{display:none}
  .feed{width:150px;top:52px}
  .inspector{left:8px;right:8px;bottom:8px;width:auto}
}
@media (prefers-reduced-motion:reduce){
  .surface{animation:none}
  .bubble{display:none}
}