/* Floating UI (owner D2). Tokens only: every colour, font, space and curve comes from :root in index.html.
   Rules of the house: transform/opacity are the only animated properties, every curve is --ease-out or --ease-io.
   #ui-root gets NO stacking context of its own, so the loader can sit above the nav and the tags below the text. */
#ui-root { pointer-events: none; }
#ui-root [hidden], .u-fish-panel[hidden], .u-mychip[hidden] { display: none !important; }
.u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.u-lab { font: 400 11px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sand-dim); margin: 0; }
.u-addr { text-transform: none !important; letter-spacing: .06em !important; }
.u-glass { background: var(--glass); border: 1px solid var(--line); border-radius: var(--s2); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.u-stripe { display: block; width: 96px; height: 2px; background: var(--stripe); transform-origin: left; }
@keyframes u-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
@keyframes u-draw { from { transform: scaleX(0); } }
@keyframes u-sweep { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 50.01% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
@keyframes u-ping { from { opacity: .95; transform: scale(.55); } to { opacity: 0; transform: scale(1.55); } }

/* ---- loader ------------------------------------------------------------------------------------------ */
.u-loader { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: var(--s2); background: var(--abyss); color: var(--sand-dim);
  font: 400 11px/1.4 var(--f-mono); letter-spacing: .3em; text-transform: uppercase; text-align: center; padding: var(--s3); pointer-events: auto; transition: opacity 1s var(--ease-out); }
.u-loader .u-stripe { animation: u-sweep 2.4s var(--ease-io) infinite; }
.u-loader.off { opacity: 0; pointer-events: none; }
/* still waiting after 8 s: the loader steps back to a status line and the page underneath is usable */
.u-loader.mini { inset: auto 0 var(--s5) 0; background: none; pointer-events: none; color: var(--sand); text-shadow: 0 1px 16px var(--abyss); }
/* no tank (no WebGL 2, assets failed) or no data yet: the narrative page stands on --abyss without the dead canvas and its chrome */
body.notank #c, body.waiting #c { visibility: hidden; }
body.notank .u-stage, body.notank .u-tags, body.notank .u-card, body.waiting .u-stage, body.waiting .u-tags { display: none; }
body.waiting .hero-close, body.notank .hero-close, body.notank .cue i { visibility: hidden; }

/* ---- watermark: survives watch mode ------------------------------------------------------------------ */
.u-mark { position: fixed; right: var(--s3); bottom: var(--s2); z-index: 25; font: 400 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sand-faint); transition: opacity .6s var(--ease-out); }
body.covered:not(.watch) .u-mark { opacity: 0; }      /* it has a job over the tank (hero, watch mode); over body copy it only printed on top of the text */
/* the carrot, when the HUD is not there to carry it: page scrolled under, watch mode, landscape phones. One mono line, no neon. */
.u-next { position: fixed; left: var(--s3); bottom: var(--s2); z-index: 25; max-width: calc(100vw - 2*var(--s3)); padding: var(--s1) var(--s2); border: 1px solid var(--line); border-radius: 999px; background: rgba(6,18,15,.94);      /* --abyss, nearly solid: it rides over body copy */
  font: 400 11px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sand-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
body.booted.covered .u-next, body.booted.watch .u-next { opacity: 1; transform: none; }
body.notank .u-next, body.waiting .u-next, .u-next:empty { display: none; }

/* ---- hero foot: feed left, HUD right; fades as the page goes under ------------------------------------- */
.u-stage { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s3);
  padding: 0 var(--s3) var(--s5); opacity: calc(1 - var(--under, 0) * 1.6); transition: opacity .4s var(--ease-out); }
body:not(.booted) .u-stage { visibility: hidden; }
body.booted .u-left { animation: u-rise 1.2s var(--ease-out) 1.5s both; }
body.booted .u-hud { animation: u-rise 1.2s var(--ease-out) 1.62s both; }
body.booted .u-demo { animation: u-rise 1.2s var(--ease-out) 1.74s both; }
body.covered .u-stage, body.covered .u-stage * { pointer-events: none !important; }

.u-left { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); width: min(360px, 44vw); }
.u-feed { display: flex; flex-direction: column; gap: var(--s1); width: 100%; }
.u-feed > div { max-width: 100%; padding: var(--s1) var(--s2); border: 1px solid var(--line); border-radius: 999px; background: var(--glass); color: var(--sand-dim); font: 400 11px/1.3 var(--f-mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: flex-start; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: u-rise .7s var(--ease-out) both; transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.u-feed > div.out { opacity: 0; transform: translate3d(0, -6px, 0); }
.u-feed i { font-style: normal; margin-right: var(--s1); color: var(--leaf); }
.u-feed .sell i, .u-feed .out i, .u-feed .bad i { color: var(--ember); }
.u-feed .big, .u-feed .bad { border-color: var(--line-strong); color: var(--sand); }

.u-mychip { pointer-events: auto; display: inline-flex; align-items: center; gap: var(--s1); min-height: 36px; padding: 0 var(--s2); border-radius: 999px; border-color: var(--line-strong); color: var(--sand);
  font: 400 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: transform .5s var(--ease-out), border-color .5s var(--ease-out); }
.u-mychip b { font-weight: 400; color: var(--sand); padding-right: var(--s1); border-right: 1px solid var(--line-strong); }
.u-mychip:hover { transform: translate3d(0, -2px, 0); border-color: var(--sand); }

.u-hud { width: 296px; padding: var(--s2); display: grid; gap: var(--s1); pointer-events: auto; }
.u-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s1); }
.u-row > span:first-child { white-space: nowrap; }      /* TANK 6/7 · THE FLOOR stays one phrase */
.u-row b { font-weight: 400; color: var(--sand); }
.u-num { font: 300 40px/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.u-bar, .u-meter { position: relative; height: 2px; background: var(--line); }
.u-bar i { display: block; width: 100%; height: 100%; background: var(--stripe); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out); }
.u-meter::before { content: ''; position: absolute; left: 50%; top: -3px; width: 1px; height: 8px; background: var(--line-strong); }
.u-meter i { display: block; width: 100%; height: 100%; transform: translateX(50%); transition: transform 1.6s var(--ease-out); }
/* the carrot: next tank, veiled (it is locked), and the count to it */
.u-carrot { display: flex; align-items: center; gap: var(--s2); margin: 2px 0; color: var(--sand); min-width: 0; }
.u-carrot img { flex: none; width: 64px; height: 36px; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; opacity: .5; background: var(--abyss); }
.u-carrot-t { min-width: 0; display: grid; gap: 2px; color: var(--sand-dim); }      /* two lines beside the thumbnail, never an orphan dot: the name, then the count in full sand */
.u-carrot-t b { font-weight: 400; font-size: 13px; letter-spacing: .1em; color: var(--sand); font-variant-numeric: tabular-nums; } .u-carrot-t b:empty { display: none; }
.u-carrot.last { color: var(--sand-dim); }
.u-meter i::after { content: ''; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--sand); }

.u-demo { position: fixed; right: var(--s3); top: calc(50% - 96px); display: grid; gap: var(--s1); padding: var(--s1); pointer-events: auto; justify-items: stretch; }
.u-demo-body { display: none; gap: var(--s1); }
.u-demo.open .u-demo-body { display: grid; animation: u-rise .6s var(--ease-out) both; }
.u-speed { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s1); }
.u-demo button, .u-card button, .u-x { font: 400 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sand-dim); background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: var(--s1) var(--s2); cursor: pointer; transition: color .4s var(--ease-out), border-color .4s var(--ease-out), transform .4s var(--ease-out); }
.u-demo button:hover, .u-card button:hover, .u-x:hover { color: var(--sand); border-color: var(--line-strong); transform: translate3d(0, -1px, 0); }
.u-demo button.on, .u-demo-tog { color: var(--sand); border-color: var(--line-strong); }

/* ---- fish card ------------------------------------------------------------------------------------------ */
.u-card { position: fixed; left: 0; top: 0; z-index: 30; min-width: 208px; max-width: 280px; padding: var(--s2); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-out); will-change: transform; }
.u-card.on { opacity: 1; } .u-card.pinned { pointer-events: auto; border-color: var(--line-strong); }
.u-card h4 { margin: 0 0 2px; font: 300 24px/1.1 var(--f-display); color: var(--sand); }
.u-card p { margin: 4px 0 0; font: 400 14px/1.45 var(--f-body); color: var(--sand-dim); }
.u-card-btns { display: none; gap: var(--s1); margin-top: var(--s2); } .u-card.pinned .u-card-btns { display: flex; }

/* ---- specimen tags + the "show me" ring -------------------------------------------------------------------- */
.u-tags { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; transition: opacity .5s var(--ease-out); contain: strict; }
.u-tags.off { opacity: 0; }
.u-tag { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform; transition: opacity .6s var(--ease-out); }
.u-tag:not(.on) { opacity: 0 !important; }
.u-tag i { position: absolute; left: 0; top: -8px; width: 36px; height: 1px; background: var(--line-strong); transform-origin: left center; transform: rotate(-90deg); }
.u-tag span { position: absolute; left: -1px; top: -66px; padding: 4px 8px; white-space: nowrap; border: 1px solid var(--line-strong); background: rgba(6,18,15,.82); color: var(--sand);      /* --abyss at 82%: over bright marble and cyan water --glass-2 read as a rendering glitch */
  font: 400 11px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.u-tag.you i { height: 2px; background: var(--stripe); }
.u-tag.you span { color: var(--sand); border-color: var(--line-strong); }
.u-ring { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .6s var(--ease-out); will-change: transform; }
.u-ring.on { opacity: 1; }
.u-ring i { position: absolute; inset: 0; border: 2px solid var(--neon); border-radius: 50%; opacity: 0; }
.u-ring.on i { animation: u-ping 1.8s var(--ease-out) infinite; } .u-ring.on i + i { animation-delay: .9s; }

/* ---- banner: one element, queue in JS ------------------------------------------------------------------------ */
.u-banner { position: fixed; left: 50%; top: 50%; z-index: 40; width: min(92vw, 1100px); display: grid; justify-items: center; gap: var(--s2); text-align: center; pointer-events: none;
  opacity: 0; transform: translate3d(-50%, -46%, 0) scale(.985); transition: opacity .7s var(--ease-out), transform 1.1s var(--ease-out); text-shadow: 0 2px 40px var(--abyss), 0 0 8px var(--abyss); }
/* the banner is centred, the hero copy is left: they cross on narrow windows, so the copy steps back for 4 s */
#tank .hero-copy { transition: opacity .9s var(--ease-out); } body.bannering #tank .hero-copy { opacity: 0; }      /* a 10% ghost under the banner title was double type */
/* level-up: the copy stays back for the whole migration, not only the 4 s of the banner */
body.migrating #tank .hero-copy { opacity: 0; transition-duration: 1.6s; }
body.covered .u-banner { opacity: 0 !important; }
/* its own pool of dark water: the title and the sub line must read over white marble and a full school */
.u-banner::before { content: ''; position: absolute; z-index: -1; inset: -56px -8%; background: radial-gradient(closest-side, rgba(6,18,15,.72), rgba(6,18,15,.4) 60%, rgba(6,18,15,0)); }
.u-banner.on { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); }
.u-banner small { font: 400 11px/1 var(--f-mono); letter-spacing: .4em; text-transform: uppercase; color: var(--sand-dim); }
.u-banner[data-kind=level] b { font-size: clamp(56px, 11vw, 176px); }      /* the new tank's name at headline scale */
.u-banner b { font: 300 clamp(40px, 7.6vw, 124px)/.95 var(--f-display); letter-spacing: -.01em; color: var(--sand); text-wrap: balance; }
.u-banner p { margin: 0; font: 400 13px/1.5 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sand); }
.u-banner .u-stripe { transform: scaleX(0); transition: transform 1.4s var(--ease-out) .15s; transform-origin: center; }
.u-banner.on .u-stripe { transform: scaleX(1); }

/* ---- while you were away -------------------------------------------------------------------------------------- */
.u-away { position: fixed; right: var(--s3); top: 96px; z-index: 42; width: min(360px, calc(100vw - var(--s4))); padding: var(--s3); display: grid; gap: var(--s2); background: var(--glass-2);
  pointer-events: auto; opacity: 0; transform: translate3d(0, -12px, 0); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.u-away.on { opacity: 1; transform: none; }
.u-away dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s2); align-items: baseline; }
.u-away dd { margin: 0; font: 400 14px/1.4 var(--f-body); color: var(--sand); text-align: right; }
.u-x { position: absolute; right: var(--s1); top: var(--s1); width: 32px; height: 32px; padding: 0; font-size: 16px; letter-spacing: 0; border-color: transparent; }

.u-toast { position: fixed; left: 50%; bottom: var(--s5); z-index: 45; max-width: calc(100vw - var(--s4)); padding: var(--s2) var(--s3); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--glass-2); color: var(--sand);
  font: 400 11px/1.3 var(--f-mono); letter-spacing: .08em; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transform: translate3d(-50%, 12px, 0);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); pointer-events: none; }
.u-toast.on { opacity: 1; transform: translate3d(-50%, 0, 0); pointer-events: auto; }
.u-toast a { margin-left: var(--s2); color: var(--sand); text-underline-offset: 4px; }

/* ---- action bars + buttons (mounted into D1's #heroActions / #enterActions / #youMount) ---------------------------- */
.u-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1); pointer-events: auto; }
.u-btn, .u-ca { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s3); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--glass);
  color: var(--sand); font: 400 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform .5s var(--ease-out), border-color .5s var(--ease-out), opacity .5s var(--ease-out); }
.u-btn:hover, button.u-ca:hover { transform: translate3d(0, -2px, 0); border-color: var(--sand); }
.u-btn:active, button.u-ca:active { transform: translate3d(0, 0, 0) scale(.98); }
.u-btn.primary { background: var(--neon); border-color: var(--neon); color: var(--abyss); }
.u-btn.quiet { border-color: transparent; background: none; color: var(--sand-dim); -webkit-backdrop-filter: none; backdrop-filter: none; }
.u-ca { text-transform: none; letter-spacing: .06em; }
.u-ca small { padding-left: var(--s2); border-left: 1px solid var(--line-strong); font: inherit; letter-spacing: .16em; color: var(--sand-dim); transition: opacity .4s var(--ease-out); }
.u-ca.ok { border-color: var(--leaf); } .u-ca.ok small { color: var(--leaf); } .u-ca.fail small { color: var(--ember); }
.u-ca.off { border-style: dashed; border-color: var(--line-strong); color: var(--sand-dim); cursor: default; letter-spacing: .16em; text-transform: uppercase; }
:is(.u-btn, .u-ca, .u-mychip, .u-demo button, .u-card button, .u-x, .u-fish-form input, .u-toast a):focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }

/* ---- find my fish ------------------------------------------------------------------------------------------------------ */
.u-fish-form { display: flex; flex-wrap: wrap; gap: var(--s1); max-width: 680px; }
.u-fish-form input { flex: 1 1 280px; min-width: 0; min-height: 56px; padding: 0 var(--s3); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--glass-2); color: var(--sand);
  font: 400 16px/1 var(--f-mono); letter-spacing: .02em; transition: border-color .5s var(--ease-out); }   /* under 16px iOS Safari zooms the page on focus and never zooms back */
.u-fish-form input::placeholder { color: var(--sand-dim); }
.u-fish-form.bad input { border-color: var(--ember); }
.u-fish-form .u-btn { min-height: 56px; }
.u-fish-msg { min-height: 1.65em; margin: var(--s2) 0 0; max-width: 58ch; font: 400 14px/1.65 var(--f-body); color: var(--sand-dim); }
.u-fish-panel { position: relative; margin-top: var(--s3); max-width: 760px; padding: var(--s4); display: grid; gap: var(--s2); border: 1px solid var(--line); border-radius: var(--s2); background: var(--glass-2);      /* no backdrop blur on a 760px panel over a canvas that repaints every frame */
  animation: u-rise 1s var(--ease-out) both; }
.u-fish-panel .u-stripe { animation: u-draw 1.4s var(--ease-out) .2s both; }
.u-fish-panel h3 { margin: 0; font: 300 clamp(40px, 5.4vw, 80px)/.95 var(--f-display); letter-spacing: -.01em; color: var(--sand); }
.u-fish-tags { display: flex; flex-wrap: wrap; gap: var(--s1); }
.u-pin { padding: var(--s1); border: 1px solid var(--line); font: 400 11px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sand-dim); }
.u-pin.you { border-color: var(--neon); color: var(--sand); }
.u-fish-lines p { margin: 0; max-width: 58ch; font: 400 17px/1.65 var(--f-body); color: var(--sand-dim); }
.u-fish-panel .u-actions { margin-top: var(--s1); }

/* ---- watch mode: the tank alone. Banners and the watermark stay, they are the show ------------------------------------------ */
html:has(body.watch) { overflow: hidden; }
.u-chrome { transition: opacity .6s var(--ease-out); }
body.watch .u-chrome { opacity: 0 !important; pointer-events: none !important; }
body.watch .u-chrome * { pointer-events: none !important; }
body.watch .u-tag:not(.you) { opacity: 0 !important; }

@media (max-width: 720px) {
  /* phones: D1's hero reserves the last 208px for this dock (its closing line ends above it), so the stage sits at the very bottom and stays small */
  .u-stage { flex-direction: column; align-items: stretch; gap: var(--s1); padding: 0 var(--s2) calc(var(--s5) + env(safe-area-inset-bottom)); }
  .u-left { width: 100%; }
  .u-hud { width: 100%; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--s2); row-gap: var(--s1); padding: var(--s1) var(--s2); }
  .u-hud > :first-child { grid-row: span 2; flex-direction: column; align-items: flex-start; gap: 2px; } .u-num { font-size: 28px; }
  .u-hud > :nth-child(n+5) { display: none; }
  .u-hud .u-row.u-lab { flex-wrap: wrap; row-gap: 2px; } .u-hud > :first-child .u-lab { white-space: nowrap; }      /* TANK 5/7 · ATLANTIS + 1,012/2,500 is wider than a phone: the count drops to its own line, nothing overflows */
  .u-carrot { grid-column: 1 / -1; margin: 0; } .u-carrot img { width: 40px; height: 22px; }             /* water lives in the WEATHER section on phones */
  .u-demo { right: var(--s2); top: 72px; } .u-mark { right: var(--s2); bottom: var(--s2); } .u-next { left: var(--s2); bottom: calc(var(--s2) + env(safe-area-inset-bottom)); max-width: calc(100vw - 2*var(--s2)); }
  body.watch .u-mark { bottom: calc(var(--s6) + env(safe-area-inset-bottom)); }      /* watch mode on a phone: the mark sits above the carrot line, they do not share a row */
  .u-away { right: var(--s2); top: 72px; } .u-fish-panel { padding: var(--s3); }
  .u-fish-form .u-btn { flex: 1 1 100%; }
  body:has(.u-mychip:not([hidden])) .u-feed { display: none; }      /* the dock has room for ONE row above the HUD on a phone: MY FISH wins it, or the chip climbs into the closing line */
}
/* short desktop windows: the hero copy owns the left side, so the feed moves above the HUD */
@media (max-height: 760px) and (min-width: 721px) {
  .u-stage { flex-direction: column; align-items: flex-end; gap: var(--s1); padding-bottom: var(--s4); }
  .u-left { align-items: flex-end; } .u-feed > div { align-self: flex-end; }
  .u-demo { top: 88px; }
}
/* landscape phones / slivers of a window: no room for chrome, the tank and the headline are enough */
@media (max-height: 480px) { .u-feed, .u-hud, .u-demo { display: none; } body.booted .u-next { opacity: 1; transform: none; } .u-banner b, .u-banner[data-kind=level] b { font-size: clamp(28px, 14vh, 64px); } .u-banner { gap: var(--s1); } }
@media (pointer: coarse) { .u-demo button, .u-card button, .u-mychip { min-height: 44px; } .u-x { width: 44px; height: 44px; }
  .u-toast a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; } }
@media (prefers-reduced-motion: reduce) {
  #ui-root *, [class^="u-"], [class*=" u-"] { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .u-ring.on i { animation: none; opacity: .9; } .u-ring.on i + i { opacity: 0; }
  .u-loader .u-stripe { animation: none; }
}

/* specimen tags step back while a banner speaks, or its sub line collides with them */
body.bannering .u-tags { opacity: 0; transition: opacity .5s var(--ease-out); }
body.migrating .u-tags { opacity: 0; transition: opacity 1.2s var(--ease-out); }      /* tags fade out until the school is back */

/* the creator's disclosed fish: same weight as YOU, no stripe (the stripe is the visitor's) */
.u-tag.keeper i { background: var(--line-strong); }
.u-tag.keeper span { color: var(--sand); border-color: var(--line-strong); }

/* ---- weather + deaths: a quiet caption under the nav, not a headline. The tank shows the event; this only names it. ---- */
.u-banner:not([data-kind=level]) { top: 88px; width: auto; max-width: min(92vw, 560px); gap: 6px; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--s2);
  background: var(--glass-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); text-shadow: none; transform: translate3d(-50%, -8px, 0); transition: opacity .6s var(--ease-out), transform .9s var(--ease-out); }
.u-banner.on:not([data-kind=level]) { transform: translate3d(-50%, 0, 0); }
.u-banner:not([data-kind=level])::before { content: none; }
.u-banner:not([data-kind=level]) small, .u-banner:not([data-kind=level]) .u-stripe { display: none; }
.u-banner:not([data-kind=level]) b { font: 400 11px/1.2 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--sand); }
.u-banner:not([data-kind=level]) p { font-size: 11px; letter-spacing: .12em; color: var(--sand-dim); }
.u-banner[data-kind=predator] b, .u-banner[data-kind=death] b { color: var(--ember); }
@media (max-width: 720px) { .u-banner:not([data-kind=level]) { top: 76px; padding: var(--s1) var(--s2); } }

/* ---- V9 retention pack. Calm first: everything below is a caption, a line or a small control ------------------------------------ */
/* a ghost's card is read only */
.u-card.ghost .u-card-btns { display: none !important; } .u-card.ghost h4 { color: var(--sand-dim); }
.u-feed .school i { color: var(--sand-dim); }

/* REPLAY in the hero dock: the smallest control on the page */
.u-hud-foot { display: flex; justify-content: flex-end; margin-top: 2px; }
.u-replay-go { display: inline-flex; align-items: center; gap: var(--s1); min-height: 28px; padding: 0 var(--s1); margin-right: calc(-1 * var(--s1)); border: 0; background: none; cursor: pointer; color: var(--sand-dim);
  font: 400 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; transition: color .4s var(--ease-out), transform .4s var(--ease-out); }
.u-replay-go i { width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent currentColor; }
.u-replay-go:hover { color: var(--sand); transform: translate3d(2px, 0, 0); }

/* the film's caption: tiny, mono, top-left; the stripe is the progress. It is not .u-chrome: the replay IS watch mode */
.u-replay { position: fixed; left: var(--s3); top: var(--s3); z-index: 44; display: grid; gap: var(--s1); min-width: 240px; pointer-events: none; opacity: 0; transform: translate3d(0, -8px, 0);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); font: 400 11px/1.2 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sand); text-shadow: 0 1px 16px var(--abyss), 0 0 6px var(--abyss); }
.u-replay.on { opacity: 1; transform: none; }
.u-replay-row { display: flex; align-items: center; gap: var(--s2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.u-replay-row span { margin-right: auto; }
.u-replay button { position: relative; pointer-events: auto; min-height: 28px; padding: 0 var(--s2); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--glass-2); color: var(--sand); font: inherit; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-out), opacity .4s var(--ease-out); }
.u-replay button:hover { border-color: var(--sand); transform: translate3d(0, -1px, 0); } .u-replay button:disabled { opacity: .6; cursor: default; transform: none; }
.u-replay:not(.on) button { pointer-events: none; }
.u-replay .u-bar i { transition: none; }      /* written every frame by the film's own clock */
body.replaying .u-next, body.replaying .u-tags { opacity: 0 !important; }
:is(.u-replay button, .u-replay-go, .u-fish-ping):focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }

/* MY FISH: the school block and the Telegram line */
.u-fish-school { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
.u-fish-school[hidden] { display: none; }
.u-fish-school .u-lab { color: var(--sand); margin-right: auto; } .u-fish-school .u-lab[hidden] { display: none; }
.u-fish-school .u-btn { padding: 0 var(--s2); }
.u-fish-ping { display: inline-flex; align-items: center; justify-self: start; font: 400 14px/1.5 var(--f-body); color: var(--sand-dim); text-underline-offset: 4px; transition: color .4s var(--ease-out); } .u-fish-ping:hover { color: var(--sand); }
/* only when an older index.html has no #schoolInvite of its own */
.u-school-invite { max-width: 58ch; margin: 0 0 var(--s3); padding-left: var(--s3); border-left: 1px solid var(--line-strong); font: 400 17px/1.65 var(--f-body); color: var(--sand); } .u-school-invite[hidden] { display: none; }

/* ?card=daily: a fixed 1200x675 canvas over everything, for the daily poster's camera */
#cardShot { position: fixed; left: 0; top: 0; z-index: 200; width: 100vw; height: 100vh; object-fit: cover; background: var(--abyss); opacity: 0; pointer-events: none; }
#cardShot.on { opacity: 1; }
body.carding { overflow: hidden; } body.carding .u-toast, body.carding .u-away { display: none; }

/* ?wallpaper=1: watch mode, forced and locked. The watermark and the carrot line stay, nothing else can appear */
body.wallpaper .u-toast, body.wallpaper .u-away, body.wallpaper .u-banner, body.wallpaper .u-replay, body.wallpaper .u-next { display: none !important; }      /* a wallpaper carries the watermark and nothing else */
/* a phone: the caption and LIVE share one row. Save video is a 1280x720 webm, a desktop action: not offered here. The pills keep their 28px look, the hit area grows to 44px around them */
@media (max-width: 720px) { .u-replay { left: var(--s2); top: var(--s2); right: var(--s2); min-width: 0; } .u-replay-row span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .u-replay button + button { display: none; }
  /* the carrot pill rides over body copy: it steps aside where it covered the Schools lede (#you) and the monitor's foot (#wallpaper) */
  body[data-sec=you] .u-next, body[data-sec=wallpaper] .u-next { opacity: 0 !important; } }
@media (pointer: coarse) { .u-replay button::after { content: ''; position: absolute; inset: -8px -4px; } .u-replay-go, .u-fish-ping { min-height: 44px; } }