/* aquarium.css — animations + chrome styling */

/* ─── Fonts ───────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bowlby+One&family=Outfit:wght@400;500;600;700&family=VT323&family=Press+Start+2P&display=swap');

:root {
  --water-deep: #031b3a;
  --water-mid: #0d6ba6;
  --water-light: #3db7d4;
  --sand: #c4a878;
  --coral-pink: #ff7eb6;
  --coral-orange: #ff9966;
  --anem-purple: #a25cd9;
  --clown: #ff7a1a;
  --ink: #1a0a02;
  --chrome-dark: #2a2d34;
  --chrome-mid: #3a3d44;
  --chrome-light: #5c6470;
  --chrome-edge: #1a1c20;
  --display-bg: #0a3d52;
  --display-bg-2: #052838;
  --neon-green: #7eff8c;
  --neon-amber: #ffcb47;
  --retro-yellow: #facc15;
  --retro-magenta: #ff3399;
}

body, html { margin: 0; padding: 0; background: #1a1a1a; font-family: 'Outfit', sans-serif; }

/* ─── Tank base ───────────────────────────────────────────────────────── */
.tank {
  font-family: 'Outfit', sans-serif;
  color: #fff;
  isolation: isolate;
}

.glass-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0,0,0,0.35) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 8%, transparent 92%, rgba(0,0,0,0.25) 100%);
  box-shadow:
    inset 0 0 0 6px rgba(255,255,255,0.04),
    inset 0 0 40px rgba(0,0,0,0.4);
}

.caustics {
  position: absolute; inset: 0; pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(180,230,255,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 20%, rgba(180,230,255,0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 45% 60%, rgba(180,230,255,0.1) 0%, transparent 60%);
  mix-blend-mode: screen;
  animation: caustic-drift 20s ease-in-out infinite alternate;
}
.caustics-night {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(120,160,255,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 40%, rgba(100,200,220,0.08) 0%, transparent 50%);
  opacity: 0.7;
}

@keyframes caustic-drift {
  0%   { transform: translate(0,0)    scale(1); }
  50%  { transform: translate(2%,1%)  scale(1.03); }
  100% { transform: translate(-1%,2%) scale(1.02); }
}

@keyframes ray-shimmer {
  0%   { opacity: 0.55; transform: translateX(-4px) rotate(-8deg); }
  100% { opacity: 0.95; transform: translateX(4px) rotate(-6deg); }
}

/* ─── Bubbles ─────────────────────────────────────────────────────────── */
@keyframes bubble-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.55; }
  100% { transform: translateY(-120vh) translateX(var(--sway, 20px)); opacity: 0; }
}

/* ─── Anemone sway ────────────────────────────────────────────────────── */
@keyframes anem-sway {
  0%   { transform: translateX(-50%) rotate(var(--rot, 0deg)) translateY(0); }
  100% { transform: translateX(-50%) rotate(calc(var(--rot, 0deg) + 6deg)) translateY(-2px); }
}
.anem-t {
  --rot: 0deg;
}
@keyframes tent-sway {
  0%   { transform: rotate(calc(-1 * var(--amp, 6deg))); }
  100% { transform: rotate(var(--amp, 6deg)); }
}
.anem-tent {
  transform-origin: 0 0;
  transform-box: fill-box;
  will-change: transform;
}

/* ─── Sea fan sway ───────────────────────────────────────────────────── */
@keyframes seafan-sway {
  0%   { transform: rotate(-2.5deg) skewX(-1deg); }
  100% { transform: rotate(2.5deg)  skewX(1deg); }
}

/* ─── Logo drop ──────────────────────────────────────────────────────── */
@keyframes logo-fall {
  0%   { transform: translateX(-50%) translateY(-120vh) rotate(-4deg); opacity: 0.7; }
  70%  { transform: translateX(-50%) translateY(0)       rotate(0deg);  opacity: 1; }
  78%  { transform: translateX(-50%) translateY(-12px)   rotate(0.5deg); }
  85%  { transform: translateX(-50%) translateY(0)       rotate(0deg); }
  92%  { transform: translateX(-50%) translateY(-4px)    rotate(0deg); }
  100% { transform: translateX(-50%) translateY(0)       rotate(0deg); }
}
@keyframes logo-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}
.logo-ornament {
  transform: translateX(-50%);
}
.logo-drop {
  animation: logo-fall 1.7s cubic-bezier(.4,.7,.3,1) both;
}
.logo-rest {
  animation: logo-bob 5.5s ease-in-out infinite;
}

.logo-img-wrap {
  position: relative;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,0.55));
}

.logo-shadow {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -22px;
  height: 28px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, transparent 70%);
  z-index: -1;
  filter: blur(8px);
}
.logo-deepshadow {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: -8%;
  height: 14%;
  background: radial-gradient(ellipse at 50% 80%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 35%, transparent 75%);
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
}

@keyframes sand-puff {
  0%   { opacity: 0; transform: scale(0.3); }
  30%  { opacity: 0.7; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.8) translateY(8px); }
}
.sand-puff {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 40px;
  background: radial-gradient(ellipse at center, rgba(212,184,150,0.7) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.sand-puff-anim {
  animation: sand-puff 1.4s ease-out 1.4s both;
}

/* ─── Fish swim paths ─────────────────────────────────────────────────── */
.cf-swim {
  top: 30%;
  left: 0;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.cf-bob {
  animation: bob 1.7s ease-in-out infinite alternate;
}
.cf-tail {
  transform-origin: 0 0;
  animation: tail-wag 0.35s ease-in-out infinite alternate;
}
@keyframes tail-wag {
  0%   { transform: rotate(-7deg); }
  100% { transform: rotate(7deg);  }
}
@keyframes bob {
  0%   { transform: translateY(-3px); }
  100% { transform: translateY(3px); }
}

/* Swim paths — each is one direction only. Paths a/c/e/g go LTR;
   b/d/f/h go RTL. Direction lookup in fish.jsx sets inline scaleX. */
@keyframes path-a { /* LTR mid-tank, gentle wave */
  0%   { top: 30%; left: -12%; }
  25%  { top: 36%; left: 25%; }
  50%  { top: 32%; left: 50%; }
  75%  { top: 38%; left: 75%; }
  100% { top: 30%; left: 112%; }
}
@keyframes path-b { /* RTL mid, opposite wave */
  0%   { top: 50%; left: 112%; }
  25%  { top: 44%; left: 75%; }
  50%  { top: 50%; left: 50%; }
  75%  { top: 44%; left: 25%; }
  100% { top: 50%; left: -12%; }
}
@keyframes path-c { /* LTR upper */
  0%   { top: 22%; left: -10%; }
  50%  { top: 18%; left: 50%; }
  100% { top: 24%; left: 110%; }
}
@keyframes path-d { /* RTL lower */
  0%   { top: 62%; left: 110%; }
  50%  { top: 58%; left: 50%; }
  100% { top: 64%; left: -10%; }
}
@keyframes path-e { /* LTR upper-arc */
  0%   { top: 40%; left: -10%; }
  30%  { top: 22%; left: 30%; }
  70%  { top: 22%; left: 70%; }
  100% { top: 40%; left: 110%; }
}
@keyframes path-f { /* RTL deep arc */
  0%   { top: 30%; left: 110%; }
  35%  { top: 55%; left: 70%; }
  65%  { top: 55%; left: 30%; }
  100% { top: 30%; left: -10%; }
}
@keyframes path-g { /* LTR bottom */
  0%   { top: 70%; left: -10%; }
  50%  { top: 66%; left: 50%; }
  100% { top: 72%; left: 110%; }
}
@keyframes path-h { /* RTL upper */
  0%   { top: 25%; left: 110%; }
  40%  { top: 32%; left: 60%; }
  70%  { top: 28%; left: 30%; }
  100% { top: 25%; left: -10%; }
}

.cf-swim-a { animation-name: path-a; }
.cf-swim-b { animation-name: path-b; }
.cf-swim-c { animation-name: path-c; }
.cf-swim-d { animation-name: path-d; }
.cf-swim-e { animation-name: path-e; }
.cf-swim-f { animation-name: path-f; }
.cf-swim-g { animation-name: path-g; }
.cf-swim-h { animation-name: path-h; }

/* The flip is baked into the path keyframes — but we still allow inner flip via .cf-bob */

/* ─── Food pellets ───────────────────────────────────────────────────── */
@keyframes food-fall {
  0%   { transform: translateY(0)   translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(70vh) translateX(var(--sway, 12px)); opacity: 0.5; }
}
.food-pellet {
  animation: food-fall 7s ease-in forwards;
}

/* ─── Pixel mode overlay ─────────────────────────────────────────────── */
.pixel-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 60;
  animation: pixel-fade 8s ease-in-out both;
}
.pixel-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,0.18) 0,
    rgba(0,0,0,0.18) 2px,
    transparent 2px,
    transparent 4px);
  mix-blend-mode: multiply;
}
@keyframes pixel-fade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; }
}
.pixel-banner {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: #7eff8c;
  text-shadow: 0 0 12px #7eff8c, 2px 2px 0 #000;
  letter-spacing: 0.04em;
  background: rgba(0,0,0,0.5);
  padding: 8px 16px;
  border: 2px solid #7eff8c;
  border-radius: 3px;
}

/* ─── Night-mode bioluminescence ─────────────────────────────────────── */
.biolum {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 31;
}
.biolum span {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #6ee5ff 0%, rgba(110,229,255,0.4) 40%, transparent 70%);
  box-shadow: 0 0 12px #6ee5ff, 0 0 24px rgba(110,229,255,0.6);
  animation: biolum-pulse 3.5s ease-in-out infinite alternate;
}
@keyframes biolum-pulse {
  0%   { opacity: 0.2; transform: scale(0.6); }
  100% { opacity: 1;   transform: scale(1.4); }
}

/* ─── UI layer ────────────────────────────────────────────────────────── */
.ui-layer {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 90;
}
.ui-layer > * { pointer-events: auto; }
.ui-tl { position: absolute; top: 16px; left: 16px; }
.ui-tr { position: absolute; top: 16px; right: 16px; }
.ui-bc { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); width: min(820px, 90%); }
.ui-br { position: absolute; bottom: 50px; right: 16px; }
.tweaks-hint {
  position: absolute; top: 50%; right: 16px;
  transform: translateY(-50%) rotate(90deg);
  font-family: 'VT323', monospace;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  letter-spacing: 0.08em;
}

/* ─── Retro Badge (top-left) ─────────────────────────────────────────── */
.retro-badge {
  background: linear-gradient(180deg, #fff8d6 0%, #ffe5a0 100%);
  border: 2px solid #1a1a1a;
  border-radius: 4px;
  padding: 8px 14px 6px;
  font-family: 'VT323', monospace;
  color: #2a1a05;
  box-shadow:
    3px 3px 0 #1a1a1a,
    inset 0 -2px 0 rgba(0,0,0,0.1);
  transform: rotate(-2deg);
  width: 270px;
  max-width: 280px;
  line-height: 1;
}
.retro-badge-line1 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #c92a4a;
  white-space: nowrap;
}
.retro-star { color: #1a8a4a; font-size: 13px; }
.retro-badge-sub {
  font-size: 14px;
  line-height: 1.1;
  color: #4a3520;
  margin-top: 4px;
  text-align: center;
  white-space: nowrap;
}
.retro-badge-foot {
  font-size: 12px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #2a1a05;
  border-top: 1px dashed #8a7250;
  padding-top: 4px;
  white-space: nowrap;
}

/* ─── CFAV Reef Radio ────────────────────────────────────────────────── */
.cfav {
  width: 320px;
  font-family: 'VT323', monospace;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
}
.cfav-chassis {
  background:
    linear-gradient(180deg, var(--chrome-light) 0%, var(--chrome-mid) 8%, var(--chrome-dark) 100%);
  border: 1px solid var(--chrome-edge);
  border-radius: 6px;
  padding: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(255,255,255,0.06),
    inset -1px 0 0 rgba(0,0,0,0.3);
}
.cfav-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 8px 4px;
  background: linear-gradient(180deg, #4a525e 0%, #2a2d34 100%);
  border-radius: 3px 3px 0 0;
  border: 1px solid #15171b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.cfav-title {
  font-family: 'VT323', monospace;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: #d4e8f5;
  text-shadow: 0 1px 0 #000;
}
.cfav-titlebar-right {
  display: flex; align-items: center; gap: 6px;
}
.cfav-led {
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #5a2020, #1a0808);
  box-shadow: inset 0 0 2px rgba(0,0,0,0.6);
}
.cfav-led[data-on="1"] {
  background: radial-gradient(circle at 30% 30%, #ff7060, #b81a1a);
  box-shadow: 0 0 8px #ff5050, inset 0 0 2px rgba(255,255,255,0.4);
  animation: led-pulse 1.6s ease-in-out infinite alternate;
}
@keyframes led-pulse {
  0%   { opacity: 0.7; }
  100% { opacity: 1; }
}

.cfav-display {
  margin: 4px 0;
  background: var(--display-bg);
  border: 1px solid #000;
  border-radius: 2px;
  padding: 6px 8px;
  box-shadow:
    inset 0 0 12px rgba(0,0,0,0.6),
    inset 0 0 0 1px rgba(0,255,180,0.05);
}
.cfav-display-inner {
  background: linear-gradient(180deg, var(--display-bg) 0%, var(--display-bg-2) 100%);
  padding: 4px 6px;
  border-radius: 2px;
  position: relative;
}
.cfav-display-inner::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg,
    transparent 0, transparent 2px,
    rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 3px);
  pointer-events: none;
}
.cfav-marquee-wrap {
  overflow: hidden;
  height: 18px;
}
.cfav-marquee {
  display: inline-block;
  white-space: nowrap;
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: var(--neon-green);
  text-shadow: 0 0 4px rgba(126,255,140,0.7);
  letter-spacing: 0.04em;
  animation: marquee 12s linear infinite;
}
.cfav-marquee-still {
  color: var(--neon-amber);
  text-shadow: 0 0 4px rgba(255,203,71,0.7);
  animation: marquee 16s linear infinite;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.cfav-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  gap: 8px;
}
.cfav-eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}
.cfav-eq-bar {
  width: 3px;
  background: linear-gradient(180deg, #ff7060 0%, var(--neon-amber) 50%, var(--neon-green) 100%);
  height: 6px;
  box-shadow: 0 0 3px rgba(126,255,140,0.5);
}
.cfav-eq-bar[data-on="1"] {
  animation: eq-jump 0.5s ease-in-out infinite alternate;
}
.cfav-eq-bar[data-on="0"] {
  height: 2px;
  background: #1a3a44;
  box-shadow: none;
}
@keyframes eq-jump {
  0%   { height: 3px; }
  100% { height: 16px; }
}
.cfav-kbps {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: 'VT323', monospace;
  font-size: 12px;
  color: var(--neon-green);
  text-shadow: 0 0 3px rgba(126,255,140,0.5);
  letter-spacing: 0.04em;
}
.cfav-kbps b {
  background: #02181f;
  padding: 0 3px;
  border: 1px solid #044050;
  color: var(--neon-amber);
  text-shadow: 0 0 4px rgba(255,203,71,0.6);
  font-weight: 400;
}

.cfav-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 0;
}
.cfav-btn {
  width: 32px;
  height: 26px;
  background: linear-gradient(180deg, #5c6470 0%, #2a2d34 100%);
  border: 1px solid #15171b;
  border-radius: 3px;
  color: #d4e8f5;
  cursor: pointer;
  font-size: 14px;
  font-family: 'VT323', monospace;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.3);
  transition: transform 0.06s;
}
.cfav-btn:hover { background: linear-gradient(180deg, #6c7480 0%, #3a3d44 100%); }
.cfav-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(0,0,0,0.5); }
.cfav-btn.on {
  background: linear-gradient(180deg, #1a8a4a 0%, #0a4a25 100%);
  color: var(--neon-green);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 0 8px rgba(126,255,140,0.4);
}
.cfav-power.on {
  background: linear-gradient(180deg, #c92a4a 0%, #6a0a20 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 0 8px rgba(255,80,80,0.5);
}

.cfav-vol {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--display-bg-2);
  border: 1px solid #000;
  border-radius: 2px;
  padding: 2px 6px;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.cfav-vol-lbl {
  font-family: 'VT323', monospace;
  font-size: 11px;
  color: var(--neon-green);
  text-shadow: 0 0 2px rgba(126,255,140,0.5);
  letter-spacing: 0.05em;
}
.cfav-vol input[type=range] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: linear-gradient(90deg, var(--neon-green) 0%, var(--neon-amber) 60%, #c92a4a 100%);
  border-radius: 2px;
  outline: none;
}
.cfav-vol input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px; height: 14px;
  background: linear-gradient(180deg, #d4d8e0 0%, #6c7480 100%);
  border: 1px solid #000;
  border-radius: 1px;
  cursor: pointer;
}

.cfav-legend {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  padding: 2px 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.05em;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}

/* ─── Visitor counter ────────────────────────────────────────────────── */
.vcb {
  background: linear-gradient(180deg, #d4d4d8 0%, #71717a 100%);
  border: 2px solid #1a1a1a;
  border-radius: 4px;
  padding: 6px 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    3px 3px 0 rgba(0,0,0,0.5);
  width: 200px;
  text-align: center;
}
.vcb-label {
  font-family: 'VT323', monospace;
  font-size: 13px;
  color: #2a1a05;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.vcb-display {
  background: #0a0a0a;
  border: 1px inset #444;
  margin: 4px 0;
  padding: 4px 6px;
  display: flex;
  justify-content: center;
  gap: 2px;
}
.vcb-digit {
  background: linear-gradient(180deg, #1a0606 0%, #100303 100%);
  color: #ff3050;
  font-family: 'VT323', monospace;
  font-size: 22px;
  line-height: 1;
  padding: 2px 4px;
  border: 1px solid #000;
  text-shadow: 0 0 6px #ff3050, 0 0 2px #ff3050;
  letter-spacing: 0;
  min-width: 14px;
  text-align: center;
}
.vcb-foot {
  font-family: 'VT323', monospace;
  font-size: 12px;
  color: #2a1a05;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.vcb-blink {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #1a8a4a;
  box-shadow: 0 0 4px #4aff7a;
  animation: blink 1.4s steps(2) infinite;
}
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.2; }
}

/* ─── Controls (bottom center) ──────────────────────────────────────── */
.ctrls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.ctrls-msg {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(8,18,38,0.78);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 6px 16px 6px 6px;
  color: #fff;
}
.ctrls-counter {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #ff9a3d 0%, #c44508 100%);
  border-radius: 999px;
  padding: 4px 14px 4px 12px;
  border: 1px solid #1a0a02;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.ctrls-counter-num {
  font-family: 'Bowlby One', sans-serif;
  font-size: 18px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  line-height: 1;
}
.ctrls-counter-lbl {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ctrls-msg-text {
  font-size: 13px;
  color: #d4e8f5;
  letter-spacing: 0.01em;
}

.ctrls-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.ctrls-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.08s, background 0.12s, border-color 0.12s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  white-space: nowrap;
}
.ctrls-btn:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.32);
}
.ctrls-btn:active { transform: translateY(1px); }
.ctrls-btn.active {
  background: linear-gradient(180deg, #ffae40 0%, #ff7a1a 100%);
  border-color: #c44508;
  color: #1a0a02;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
.ctrls-btn.primary {
  background: linear-gradient(180deg, #ff9a3d 0%, #e25a0a 100%);
  border-color: #c44508;
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.ctrls-btn.primary:hover {
  background: linear-gradient(180deg, #ffae50 0%, #ff7a1a 100%);
}
.ctrls-btn.ghost { background: transparent; border-color: rgba(255,255,255,0.2); }
.ctrls-btn-icon { font-size: 16px; line-height: 1; }
.ctrls-btn:disabled { opacity: 0.65; cursor: default; }

/* ─── Tank chaos / night mood tweaks ─────────────────────────────────── */
.tank-night .retro-badge { filter: brightness(0.85); }
.tank-night .glass-vignette {
  background:
    radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0,0,0,0.6) 100%),
    linear-gradient(180deg, rgba(20,40,80,0.15) 0%, transparent 8%, transparent 92%, rgba(0,0,0,0.5) 100%);
}

/* ─── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cf-swim, .cf-bob, .cf-tail, .bubble, .anem-t, .biolum span, .lightray, .caustics, .cfav-eq-bar, .vcb-blink, .cfav-marquee { animation-duration: 12s !important; animation-iteration-count: 1 !important; }
  .logo-drop { animation: none; }
}

/* ─── Food chase paths ─────────────────────────────────────────────────
   Fish converge on the top-center zone where pellets fall.
   'l' approaches from the left, 'r' from the right, 'm' from below.
   The first 15% of each keyframe is the dart — fast and deliberate.
   The remainder mills around the food zone until feeding ends.
─────────────────────────────────────────────────────────────────────── */
@keyframes path-feed-l {
  0%   { top: 44%; left: 12%; }
  14%  { top: 9%;  left: 30%; }
  32%  { top: 5%;  left: 44%; }
  50%  { top: 8%;  left: 52%; }
  68%  { top: 4%;  left: 40%; }
  84%  { top: 7%;  left: 48%; }
  100% { top: 44%; left: 12%; }
}
@keyframes path-feed-r {
  0%   { top: 40%; left: 88%; }
  14%  { top: 9%;  left: 70%; }
  32%  { top: 5%;  left: 56%; }
  50%  { top: 8%;  left: 48%; }
  68%  { top: 4%;  left: 60%; }
  84%  { top: 7%;  left: 52%; }
  100% { top: 40%; left: 88%; }
}
@keyframes path-feed-m {
  0%   { top: 58%; left: 50%; }
  14%  { top: 11%; left: 49%; }
  32%  { top: 5%;  left: 53%; }
  50%  { top: 8%;  left: 46%; }
  68%  { top: 4%;  left: 54%; }
  84%  { top: 7%;  left: 48%; }
  100% { top: 58%; left: 50%; }
}
.cf-swim-feed-l { animation-name: path-feed-l; animation-timing-function: ease-in-out; }
.cf-swim-feed-r { animation-name: path-feed-r; animation-timing-function: ease-in-out; }
.cf-swim-feed-m { animation-name: path-feed-m; animation-timing-function: ease-in-out; }

/* ─── Click ripple ─────────────────────────────────────────────────────
   Concentric rings expanding outward from the click point.
─────────────────────────────────────────────────────────────────────── */
@keyframes ripple-expand {
  0%   { transform: scale(0); opacity: 0.8; }
  100% { transform: scale(1); opacity: 0; }
}
.tank-ripple-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(180, 230, 255, 0.75);
  animation: ripple-expand ease-out forwards;
  pointer-events: none;
}

/* ─── Cursor attraction ────────────────────────────────────────────────
   A requestAnimationFrame spring in aquarium.jsx smoothly updates --cx
   and --cy at 60 fps — no mousemove jitter, no CSS transition fighting.
   --attract-sign: 1 = drift toward cursor  |  -1 = scatter away.
─────────────────────────────────────────────────────────────────────── */
.cf-swim {
  /* No CSS transition — the RAF spring provides all the smoothing */
  transform: translate(
    calc(var(--attract-sign, 1) * (var(--cx, 0.5) - 0.5) * var(--ax, 0px)),
    calc(var(--attract-sign, 1) * (var(--cy, 0.5) - 0.5) * var(--ay, 0px))
  );
}
.tank { cursor: crosshair; }
.cf-swim { cursor: pointer; }

/* ─── Fish-attached speech bubbles ───────────────────────────────────── */
@keyframes fish-bubble-rise {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.82); }
  12%  { opacity: 1; transform: translateX(-50%) translateY(-5px) scale(1); }
  78%  { opacity: 1; transform: translateX(-50%) translateY(-18px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-30px); }
}
.fish-speech-bubble {
  position: absolute;
  bottom: 108%;
  left: 50%;
  white-space: nowrap;
  z-index: 50;
  pointer-events: none;
  background: rgba(255, 252, 238, 0.97);
  color: #1a2a3a;
  border-radius: 10px;
  padding: 5px 11px 6px;
  font-family: 'VT323', monospace;
  font-size: 17px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.2);
  border: 1px solid rgba(0,0,0,0.06);
  animation: fish-bubble-rise 5s ease-out forwards;
}
.fish-speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 16px;
  border: 7px solid transparent;
  border-top-color: rgba(255,252,238,0.97);
  border-bottom: 0;
}

/* ─── Critters: Starfish ──────────────────────────────────────────────── */
@keyframes starfish-spin {
  0%   { transform: rotate(0deg)   translate(0, 0); }
  50%  { transform: rotate(8deg)   translate(2px, -1px); }
  100% { transform: rotate(-7deg)  translate(-2px, 1px); }
}

/* ─── Critters: Crab scuttle ─────────────────────────────────────────────
   Crabs walk along the sand floor. They scuttle one way, pause, reverse.
   The 'crab-step' inner element bobs vertically to suggest legged motion.
─────────────────────────────────────────────────────────────────────── */
@keyframes crab-walk-l {
  0%   { left: -8%;  transform: scaleX(1);  }
  46%  { left: 96%;  transform: scaleX(1);  }
  50%  { left: 96%;  transform: scaleX(-1); }
  96%  { left: -8%;  transform: scaleX(-1); }
  100% { left: -8%;  transform: scaleX(1);  }
}
@keyframes crab-walk-r {
  0%   { left: 96%;  transform: scaleX(-1); }
  46%  { left: -8%;  transform: scaleX(-1); }
  50%  { left: -8%;  transform: scaleX(1);  }
  96%  { left: 96%;  transform: scaleX(1);  }
  100% { left: 96%;  transform: scaleX(-1); }
}
.crab-scuttle-l { animation: crab-walk-l ease-in-out infinite; }
.crab-scuttle-r { animation: crab-walk-r ease-in-out infinite; }

@keyframes crab-step-bob {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  25%      { transform: translateY(-2px) rotate(-2deg); }
  50%      { transform: translateY(0)    rotate(0deg); }
  75%      { transform: translateY(-2px) rotate(2deg); }
}
.crab-step {
  animation: crab-step-bob 0.5s steps(4, end) infinite;
  transform-origin: center bottom;
}

/* ─── Critters: Sea turtle drift ─────────────────────────────────────── */
@keyframes turtle-ltr {
  0%   { left: -15%; }
  100% { left: 115%; }
}
@keyframes turtle-rtl {
  0%   { left: 115%; }
  100% { left: -15%; }
}
.turtle-drift-ltr { animation: turtle-ltr linear forwards; }
.turtle-drift-rtl { animation: turtle-rtl linear forwards; }

/* ─── Stats widget ───────────────────────────────────────────────────────
   Retro Windows-9x style system info panel.
─────────────────────────────────────────────────────────────────────── */
.stats-widget {
  background: #c5c5c5;
  border: 2px solid;
  border-color: #f5f5f5 #5a5a5a #5a5a5a #f5f5f5;
  box-shadow: 1px 1px 0 #000, inset 1px 1px 0 #ededed;
  font-family: 'VT323', monospace;
  color: #1a1a1a;
  min-width: 184px;
  user-select: none;
}
.sw-titlebar {
  background: linear-gradient(180deg, #000080 0%, #1058c0 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 2px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sw-titlebar-buttons { display: flex; gap: 2px; }
.sw-titlebar-buttons span {
  width: 16px; height: 14px;
  background: #c5c5c5;
  border: 1px solid;
  border-color: #f5f5f5 #5a5a5a #5a5a5a #f5f5f5;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  color: #1a1a1a;
}
.sw-body {
  padding: 6px 8px 8px;
  font-size: 15px;
  line-height: 1.25;
}
.sw-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 1px 0;
}
.sw-label { color: #1a1a1a; }
.sw-val   { color: #007030; font-weight: 700; font-family: 'VT323', monospace; }
.sw-val-warn { color: #c92a4a; }
.sw-sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, #888 30%, #888 70%, transparent);
  margin: 4px 0;
}
.sw-uptime {
  font-size: 13px;
  color: #4a4a4a;
  font-style: italic;
  text-align: center;
  padding-top: 2px;
}
.sw-bar-track {
  flex: 1;
  height: 9px;
  background: #1a1a1a;
  border: 1px solid;
  border-color: #5a5a5a #f5f5f5 #f5f5f5 #5a5a5a;
  margin: 2px 0 1px;
  position: relative;
  overflow: hidden;
  min-width: 60px;
}
.sw-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00b050 0%, #50e070 100%);
  transition: width 0.4s ease-out;
}
.sw-bar-fill.warn { background: linear-gradient(90deg, #d97720 0%, #ffaa30 100%); }
.sw-bar-fill.crit { background: linear-gradient(90deg, #c92a4a 0%, #ff6688 100%); }
.sw-flicker { animation: sw-flick 4.5s infinite; }
@keyframes sw-flick {
  0%, 96%, 100% { opacity: 1; }
  97%           { opacity: 0.55; }
  98%           { opacity: 1; }
  99%           { opacity: 0.7; }
}

/* Position the stats widget in the previously-empty bottom-left,
   above the guestbook button */
.ui-bl-stats {
  position: absolute;
  bottom: 90px;
  left: 16px;
  pointer-events: auto;
  z-index: 89;
}

/* ─── Fish nameplate & hover hint ─────────────────────────────────────── */
.cf-nameplate {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 252, 240, 0.93);
  color: #1a0a02;
  font-family: 'VT323', monospace;
  font-size: 15px;
  line-height: 1.2;
  padding: 1px 8px 2px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,220,150,0.5);
}
.cf-nameplate-heart {
  color: #e0476a;
  margin-right: 3px;
  font-size: 12px;
  vertical-align: 1px;
}
/* Adopt-me tag — gently bobs to invite a click; brightens on hover */
@keyframes adopt-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}
.cf-adopt-tag {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #ffe96b 0%, #ffb43a 100%);
  color: #5a2a00;
  font-family: 'VT323', monospace;
  font-size: 13px;
  font-weight: 700;
  padding: 1px 7px 2px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  border: 1px solid #d8842a;
  box-shadow: 0 2px 5px rgba(0,0,0,0.35);
  opacity: 0.62;
  animation: adopt-bob 1.6s ease-in-out infinite;
}
.cf-swim:hover .cf-adopt-tag {
  opacity: 1;
  box-shadow: 0 0 10px rgba(255,200,80,0.9);
}

/* ─── Speech bubbles ──────────────────────────────────────────────────── */
@keyframes speech-rise {
  0%   { opacity: 0; transform: translateX(-50%) translateY(0)    scale(0.82); }
  12%  { opacity: 1; transform: translateX(-50%) translateY(-7px)  scale(1);   }
  78%  { opacity: 1; transform: translateX(-50%) translateY(-20px) scale(1);   }
  100% { opacity: 0; transform: translateX(-50%) translateY(-32px) scale(0.95);}
}
.speech-bubble {
  position: absolute;
  background: rgba(255, 252, 238, 0.97);
  color: #1a2a3a;
  border-radius: 12px;
  padding: 5px 11px 6px;
  font-family: 'VT323', monospace;
  font-size: 18px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 33;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
  border: 1px solid rgba(0,0,0,0.07);
  animation: speech-rise 4.8s ease-out forwards;
  transform-origin: bottom center;
}
.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 18px;
  border: 7px solid transparent;
  border-top-color: rgba(255, 252, 238, 0.97);
  border-bottom: 0;
}

/* ─── Keyboard shortcut toast ─────────────────────────────────────────── */
@keyframes toast-pop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(10px); }
  14%  { opacity: 1; transform: translateX(-50%) translateY(0);    }
  72%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-5px); }
}
.kbd-toast {
  position: absolute;
  bottom: 110px;
  left: 50%;
  background: rgba(8, 18, 38, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.15);
  color: #d4e8f5;
  font-family: 'VT323', monospace;
  font-size: 16px;
  padding: 6px 16px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 96;
  animation: toast-pop 2.2s ease-in-out forwards;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
}
.kbd-toast kbd {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 4px;
  padding: 0 6px;
  font-family: 'VT323', monospace;
  font-size: 15px;
  color: #fff;
}

/* ─── Guestbook ───────────────────────────────────────────────────────── */
/* ─── Corner buttons (residents + guestbook) ──────────────────────────── */
.corner-btns {
  position: absolute;
  bottom: 50px;
  left: 16px;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.corner-btn {
  position: relative;
  background: linear-gradient(180deg, #fff8d6 0%, #ffe5a0 100%);
  border: 2px solid #1a1a1a;
  border-radius: 4px;
  color: #2a1a05;
  font-family: 'VT323', monospace;
  font-size: 15px;
  padding: 4px 10px;
  cursor: pointer;
  box-shadow: 2px 2px 0 #1a1a1a;
  white-space: nowrap;
  line-height: 1.4;
}
.corner-btn:hover { background: linear-gradient(180deg, #fffae0 0%, #ffecb0 100%); }
.corner-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #1a1a1a; }
.corner-badge {
  display: inline-block;
  margin-left: 6px;
  background: #d8442a;
  color: #fff;
  border-radius: 9px;
  padding: 0 6px;
  font-size: 12px;
  vertical-align: 1px;
}
.guestbook-btn {
  position: static;
  background: linear-gradient(180deg, #fff8d6 0%, #ffe5a0 100%);
  border: 2px solid #1a1a1a;
  border-radius: 4px;
  color: #2a1a05;
  font-family: 'VT323', monospace;
  font-size: 15px;
  padding: 4px 10px;
  cursor: pointer;
  box-shadow: 2px 2px 0 #1a1a1a;
  white-space: nowrap;
  pointer-events: auto;
  line-height: 1.4;
}
.guestbook-btn:hover { background: linear-gradient(180deg, #fffae0 0%, #ffecb0 100%); }
.guestbook-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #1a1a1a; }

@keyframes gb-open {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.guestbook-modal {
  position: absolute;
  bottom: 52px;
  left: 16px;
  width: 284px;
  max-height: 370px;
  background: linear-gradient(180deg, #fff8d6 0%, #fffae8 100%);
  border: 2px solid #1a1a1a;
  border-radius: 4px;
  box-shadow: 4px 4px 0 #1a1a1a;
  z-index: 92;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: gb-open 0.16s ease-out both;
  pointer-events: auto;
}
.gb-titlebar {
  background: linear-gradient(180deg, #4a525e, #2a2d34);
  color: #d4e8f5;
  font-family: 'VT323', monospace;
  font-size: 15px;
  padding: 4px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  flex-shrink: 0;
}
.gb-titlebar button {
  background: none; border: none; color: #9bb3c4;
  cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1;
}
.gb-titlebar button:hover { color: #fff; }
.gb-entries {
  flex: 1;
  overflow-y: auto;
  padding: 6px 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gb-entry {
  border-bottom: 1px dashed rgba(0,0,0,0.14);
  padding-bottom: 5px;
  font-family: 'VT323', monospace;
  font-size: 15px;
  color: #2a1a05;
}
.gb-entry-header { display: flex; gap: 5px; align-items: baseline; }
.gb-entry-name { font-weight: 700; color: #c92a4a; font-size: 16px; }
.gb-entry-ts   { font-size: 12px; color: #9a8060; }
.gb-entry-msg  { color: #3a2a10; margin-top: 1px; }
.gb-empty {
  text-align: center; color: #8a7250;
  font-family: 'VT323', monospace; font-size: 15px;
  font-style: italic; padding: 14px 0;
}
.gb-form {
  border-top: 2px solid #1a1a1a;
  padding: 6px 9px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.gb-form input, .gb-form textarea {
  font-family: 'VT323', monospace;
  font-size: 15px;
  background: rgba(255,255,255,0.8);
  border: 1px solid #8a7250;
  border-radius: 2px;
  padding: 2px 6px;
  color: #2a1a05;
  outline: none;
  resize: none;
}
.gb-form input:focus, .gb-form textarea:focus { border-color: #c92a4a; }
.gb-form-row { display: flex; gap: 5px; align-items: flex-end; justify-content: flex-end; }
.gb-form button {
  background: linear-gradient(180deg, #c92a4a 0%, #7a1020 100%);
  color: #fff;
  font-family: 'VT323', monospace;
  font-size: 14px;
  border: 1px solid #1a1a1a;
  border-radius: 2px;
  padding: 2px 12px;
  cursor: pointer;
  box-shadow: 1px 1px 0 #1a1a1a;
}
.gb-form button:hover { filter: brightness(1.12); }
.gb-form button:active { transform: translate(1px,1px); box-shadow: none; }

/* ══════════════════════════════════════════════════════════════════════════
   THROWBACK CHROME — webring ribbon, retro badges, bubble trail, residents
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Reef Webring + under-construction ribbon (very bottom) ───────────── */
.reef-webring {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34px;
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg, #2b3550 0%, #131a2c 100%);
  border-top: 2px solid #4e75ff;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  font-family: 'VT323', monospace;
  pointer-events: auto;
  z-index: 95;
  overflow: hidden;
}
.rw-ring {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  white-space: nowrap;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, #34406088, #10182a88);
}
.rw-nav {
  background: linear-gradient(180deg, #ffe96b 0%, #ffb43a 100%);
  color: #4a2400;
  border: 1px solid #1a1a1a;
  border-radius: 3px;
  font-family: 'VT323', monospace;
  font-size: 14px;
  padding: 1px 8px 2px;
  cursor: pointer;
  box-shadow: 1px 1px 0 #0d0d0d;
}
.rw-nav:hover { filter: brightness(1.1); }
.rw-nav:active { transform: translate(1px,1px); box-shadow: none; }
.rw-hub {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffe07a;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-shadow: 0 0 6px rgba(255,200,80,0.5);
}
.rw-hub-name { font-weight: 700; }
.rw-star {
  color: #7effe0;
  display: inline-block;
  animation: rw-spin 3.4s linear infinite;
}
@keyframes rw-spin { to { transform: rotate(360deg); } }
.rw-site {
  color: #9fb6e0;
  font-size: 14px;
  margin-left: 2px;
}
.rw-marquee {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-width: 0;
}
.rw-marquee-track {
  white-space: nowrap;
  color: #ffd86a;
  font-size: 15px;
  letter-spacing: 0.04em;
  will-change: transform;
  animation: rw-scroll 34s linear infinite;
  padding-left: 100%;
}
@keyframes rw-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── 88×31 retro web-badge cluster (right edge, under the radio) ─────── */
.ui-ml {
  position: absolute;
  right: 16px;
  top: 188px;
  pointer-events: auto;
  z-index: 88;
}
.retro-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rbtn {
  width: 88px;
  height: 31px;
  border: 1px solid #000;
  border-radius: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: 'VT323', monospace;
  padding: 0;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.6), inset 1px 1px 0 rgba(255,255,255,0.18);
  overflow: hidden;
  text-align: center;
}
.rbtn:hover { filter: brightness(1.12); }
.rbtn:active { transform: translate(1px,1px); }
.rbtn-a { font-size: 11px; }
.rbtn-b { font-size: 14px; font-weight: 700; }
/* Netscape-style green/black */
.rb-netscape { background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%); color: #7dff5a; }
.rb-netscape .rbtn-b { color: #c0ff8a; }
/* Best viewed in 800x600 — blue */
.rb-res { background: linear-gradient(180deg, #2452c8 0%, #14276a 100%); color: #d8e4ff; }
.rb-res .rbtn-b { color: #fff; }
/* Made with Notepad — classic gray */
.rb-notepad { background: linear-gradient(180deg, #ededed 0%, #c4c4c4 100%); color: #202020; }
.rb-notepad .rbtn-b { color: #000; }
/* Email me — teal with blink */
.rb-email { background: linear-gradient(180deg, #1f9d8f 0%, #0c5a52 100%); color: #d7fff8; }
.rb-email .rbtn-a { font-size: 15px; }
.rb-email .rbtn-b { color: #fff; font-size: 13px; }
/* Y2K Ready — hot magenta */
.rb-y2k { background: linear-gradient(180deg, #d8447f 0%, #7a1448 100%); color: #ffd9ec; }
.rb-y2k .rbtn-b { color: #fff; }
@keyframes rbtn-blink { 50% { opacity: 0.45; } }
.rbtn-blink { animation: rbtn-blink 1s steps(1) infinite; }

/* ─── Bubble cursor trail ─────────────────────────────────────────────── */
.cursor-bubble-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 34;
  overflow: hidden;
}
.cursor-bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.95) 0%, rgba(200,235,255,0.55) 38%, rgba(140,200,240,0.12) 70%, rgba(140,200,240,0) 100%);
  border: 1px solid rgba(255,255,255,0.45);
  pointer-events: none;
  animation: cursor-bubble-rise 1.1s ease-out forwards;
}
@keyframes cursor-bubble-rise {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.4); }
  18%  { opacity: 0.9; }
  100% { opacity: 0;   transform: translate(var(--drift, 0), -60px) scale(1); }
}

/* ─── Tank Residents roster ───────────────────────────────────────────── */
.residents-modal {
  position: absolute;
  bottom: 90px;
  left: 16px;
  width: 280px;
  max-height: 56vh;
  display: flex;
  flex-direction: column;
  background: #0d1830;
  border: 2px solid #4e75ff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  font-family: 'VT323', monospace;
  pointer-events: auto;
  z-index: 96;
  animation: gb-open 0.22s ease-out;
  overflow: hidden;
}
.res-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  background: linear-gradient(180deg, #4e75ff 0%, #2a4ad0 100%);
  color: #fff;
  font-size: 17px;
}
.res-titlebar button {
  background: #ffd86a;
  border: 1px solid #1a1a1a;
  color: #2a1a05;
  border-radius: 2px;
  cursor: pointer;
  font-family: 'VT323', monospace;
  font-size: 13px;
  padding: 0 6px;
  box-shadow: 1px 1px 0 #1a1a1a;
}
.res-sub {
  padding: 4px 10px;
  color: #9fd0ff;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.res-list { overflow-y: auto; padding: 4px 6px; }
.res-empty {
  color: #8aa6cc;
  text-align: center;
  padding: 22px 10px;
  font-size: 15px;
  line-height: 1.5;
}
.res-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 6px;
  border-radius: 4px;
}
.res-row:nth-child(odd) { background: rgba(255,255,255,0.04); }
.res-num { color: #6f86b0; font-size: 13px; width: 18px; }
.res-heart { color: #e0476a; font-size: 12px; }
.res-name { color: #fff6dd; font-size: 16px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-actions { display: flex; gap: 4px; }
.res-actions button {
  background: #243355;
  border: 1px solid #4e75ff;
  color: #cfe0ff;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  padding: 0 6px;
  line-height: 1.5;
}
.res-actions button:hover { background: #2f4570; }
.res-foot {
  padding: 4px 10px;
  font-size: 13px;
  color: #7e9ac0;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: 6px;
}
.res-blink { color: #7eff8c; animation: vcb-blink 1.1s steps(1) infinite; }

/* ─── Visitor counter odometer roll ───────────────────────────────────── */
.vcb-digit {
  display: inline-block;
  animation: vcb-roll 0.4s ease-out;
}
@keyframes vcb-roll {
  0%   { transform: translateY(-40%); opacity: 0.3; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* Narrow screens: drop the badge stack and tighten the ribbon */
@media (max-width: 720px) {
  .ui-ml { display: none; }
  .rw-site { display: none; }
}