/* 参加型の発光クラゲ水槽をまとめる。
   content.css の後に読み込む。 */
/* Aquarium */
.aquarium {
  padding-bottom: var(--section-space);
  overflow: clip;
  background:
    radial-gradient(circle at 50% 22%, rgb(77 232 255 / 0.1), transparent 36%),
    var(--abyss);
}
.aquarium-head {
  padding: var(--section-space) var(--gutter) 0;
}
.tank-shell {
  position: relative;
  isolation: isolate;
  margin-top: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
  border-block: 1px solid rgb(77 232 255 / 0.28);
  background:
    radial-gradient(circle at 50% 12%, rgb(77 232 255 / 0.14), transparent 32%),
    linear-gradient(180deg, #091a3b, #030817);
}
.tank-shell::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(5 11 24 / 0.48), transparent 12% 88%, rgb(5 11 24 / 0.48)),
    linear-gradient(0deg, rgb(5 11 24 / 0.6), transparent 22%);
  pointer-events: none;
}
.tank-canvas {
  display: none;
  width: 100%;
  height: 60svh;
  touch-action: pan-y;
  cursor: crosshair;
}
.motion .tank-canvas { display: block; }
.static-tank {
  position: relative;
  min-height: 60svh;
  overflow: hidden;
}
.motion .static-tank { display: none; }
.static-tank::before {
  content: "";
  position: absolute;
  top: 8%;
  left: 50%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.16;
  background: radial-gradient(circle, var(--glow-cyan), transparent 68%);
  transform: translateX(-50%);
}
.css-jelly {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  aspect-ratio: 0.84;
  border: 1px solid rgb(77 232 255 / 0.72);
  border-radius: 52% 52% 34% 34%;
  background: radial-gradient(circle at 50% 20%, rgb(242 250 255 / 0.52), rgb(77 232 255 / 0.16) 48%, rgb(167 139 250 / 0.08));
  box-shadow: 0 0 12px rgb(77 232 255 / 0.42), 0 0 28px rgb(77 232 255 / 0.24), inset 0 0 1.5rem rgb(77 232 255 / 0.16);
  transform: translate(-50%, -50%);
  animation: static-float var(--d) ease-in-out infinite alternate;
}
.css-jelly::before,
.css-jelly::after {
  content: "";
  position: absolute;
  top: 72%;
  bottom: -52%;
  width: 26%;
  border-right: 1px solid rgb(77 232 255 / 0.72);
  border-left: 1px solid rgb(77 232 255 / 0.72);
  border-radius: 0 0 50% 50%;
}
.css-jelly::before { left: 14%; }
.css-jelly::after { right: 14%; }
@keyframes static-float {
  from { transform: translate(-50%, -50%) rotate(-2deg); }
  to { transform: translate(-50%, calc(-50% - 1.1rem)) rotate(2deg); }
}
.fallback-note {
  position: absolute;
  z-index: 5;
  right: var(--gutter);
  bottom: 2rem;
  left: var(--gutter);
  color: rgb(242 250 255 / 0.64);
  font-size: 0.78rem;
  text-align: center;
}
.tank-meta {
  position: absolute;
  z-index: 5;
  top: 1.2rem;
  right: var(--gutter);
  left: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  pointer-events: none;
}
.tank-badge {
  padding: 0.45rem 0.7rem;
  border: 1px solid rgb(77 232 255 / 0.26);
  border-radius: 99rem;
  background: rgb(5 11 24 / 0.72);
  color: rgb(242 250 255 / 0.68);
  font-family: var(--mono);
  font-size: 0.56rem;
  line-height: 1.4;
  letter-spacing: 0.12em;
}
.tank-counter {
  display: none;
  color: var(--foam);
  font-family: var(--mono);
  font-size: clamp(0.68rem, 2vw, 0.84rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px var(--glow-cyan), 0 0 28px rgb(77 232 255 / 0.25);
}
.motion .tank-counter { display: block; }
.tank-instruction {
  margin: 1.4rem var(--gutter) 0;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
  text-wrap: pretty;
}
.live-only { display: none; }
.motion .live-only { display: inline; }
.motion .static-only { display: none; }