:root{
  --bg: #eaf6ff;
  --highlight: #fff;
  /* two palette variables; can be swapped per fish */
  --colA: #ebe727; /* will be used for front + tail-bottom in "final" look */
  --colB: #3eb87b; /* will be used for middle + tail-top in "final" look */
  --outline: rgba(0,0,0,0.12);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg)}
#aquarium {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background-image: linear-gradient(0deg, #182848, #2980b9);
  background-size: cover;
}

/* slow, large-scale subtle flow (moves the base gradient) */
#aquarium::before{
  content: '';
  position: absolute;
  inset: 0;
  background: transparent; 
  z-index: 0;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform, background-position;
  background-size: 0 0;
  animation: none;
  opacity: 0;
}

/* thin moving streaks / caustics layer */
#aquarium::after{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.03) 0 1px, rgba(255,255,255,0) 1px 40px),
    radial-gradient(800px 200px at 30% 10%, rgba(255,255,255,0.04), transparent 25%);
  mix-blend-mode: screen;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
  transform: translateZ(0);
  animation: streaksMove 18s linear infinite;
}

/* animations (respect reduced motion) */
@keyframes waterFlow {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 50% 100%; }
  100% { background-position: 0% 0%; }
}
@keyframes streaksMove {
  0%   { transform: translateX(0) translateY(0); opacity:0.7; }
  50%  { transform: translateX(-6%) translateY(1.2%); opacity:0.8; }
  100% { transform: translateX(0) translateY(0); opacity:0.7; }
}

/* Minecraft-like tall seagrass variant (performance-friendly) */
.seagrass-mc {
  position: absolute;
  bottom: 0;
  width: 42px; /* base width, scaled per-instance */
  height: 62vh; /* very tall, reaches near surface */
  pointer-events: none;
  transform-origin: bottom center;
  z-index: 1; /* sits on seabed but below fishes */
}
.seagrass-mc .blade {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 18px;
  height: 100%;
  margin-left: -9px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), #2fb873);
  box-shadow: inset -2px -1px 6px rgba(0,0,0,0.04);
  opacity: 0.98;
  will-change: transform;
}

/* per-blade slight base offsets (positioned via left to keep bottom anchored) */
.seagrass-mc .blade.b1{ left: 48%; transform-origin: bottom center; background: linear-gradient(180deg,#6fe1a1,#2fb873); }
.seagrass-mc .blade.b2{ left: 56%; transform-origin: bottom center; background: linear-gradient(180deg,#65d486,#1fa76b); }
.seagrass-mc .blade.b3{ left: 40%; transform-origin: bottom center; background: linear-gradient(180deg,#54c98b,#16a65f); }

/* subtle sway for tall seagrass (pivot at bottom so base stays still) */
@keyframes seagrassSway {
  0%  { transform: rotate(-2deg); }
  50% { transform: rotate(3deg); }
 100% { transform: rotate(-2deg); }
}
.seagrass-mc .blade { animation: seagrassSway 4.2s ease-in-out infinite; transform-origin: bottom center; }

/* small variation helpers */
.seagrass-mc.small { width: 30px; height: 48vh; }
.seagrass-mc.large { width: 56px; height: 72vh; }

/* honor prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #aquarium::before,
  #aquarium::after {
    animation: none;
    transition: none;
  }
}

/* --- subtle moving water background --- */
#aquarium::before {
  /* already exists — we keep it but add size + animation for flow */
  background-size: 200% 200%;
  animation: bgFlow 30s linear infinite;
  will-change: background-position;
}

/* slow background gradient shift to simulate large water movement */
@keyframes bgFlow {
  0%   { background-position: 10% 20%; }
  50%  { background-position: 90% 80%; }
  100% { background-position: 10% 20%; }
}

/* fish base - cleaned: removed pointer-events:none here (UI rules later control pointer behavior) */
.fish{
  position:absolute;
  width:220px;
  height:120px;
  transform-origin:50% 50%;
  will-change:transform,left,top;
  /* pointer-events controlled later where needed */
  filter:drop-shadow(0 6px 8px rgba(0,0,0,0.08));
  z-index:2; /* above background/bubbles */
}

/* each part is absolutely positioned inside .fish */
/* visual helpers: parts named p1..p5 match your image segmentation */
.fish .p1, .fish .p2, .fish .p3, .fish .p4, .fish .p5{
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  outline: 1px solid transparent;
  /* subtle rounded appearance on edges */
  backface-visibility: hidden;
}

/* front (head) — more trapezoidal, slightly rounded look */
.fish .p1{
  z-index:6;
  clip-path: polygon(0% 50%, 24% 18%, 60% 20%, 72% 50%, 60% 82%, 24% 78%);
  background: linear-gradient(120deg, rgba(255,255,255,0.04), var(--p1, #2bbdb3));
  box-shadow: inset -6px 0 12px rgba(0,0,0,0.06);
  border-radius: 4px;
}

/* belly triangle (small front-lower triangle) */
.fish .p2{
  z-index:4;
  clip-path: polygon(24% 78%, 60% 20%, 60% 80%);
  background: linear-gradient(120deg, rgba(255,255,255,0.05), var(--p2, #9fe3e3));
  transform-origin: left center;
  box-shadow: inset 0 -6px 8px rgba(0,0,0,0.03);
}

/* mid-body large facet */
.fish .p3{
  z-index:5;
  clip-path: polygon(60% 20%, 96% 40%, 74% 50%, 60% 20%);
  background: linear-gradient(120deg, rgba(255,255,255,0.02), var(--p3, #19a6a0));
  box-shadow: inset -8px -2px 12px rgba(0,0,0,0.04);
  border-radius: 2px;
}

/* tail-top (upper fin) */
.fish .p4{
  z-index:3;
  clip-path: polygon(72% 50%, 94% 18%, 100% 12%, 100% 50%);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), var(--p4, #17a287));
  transform-origin: 76% 50%;
  box-shadow: inset -4px 0 6px rgba(0,0,0,0.03);
}

/* tail-bottom (lower fin) */
.fish .p5{
  z-index:2;
  clip-path: polygon(72% 50%, 100% 50%, 94% 82%);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), var(--p5, #12a694));
  transform-origin: 76% 50%;
  box-shadow: inset 0 4px 6px rgba(0,0,0,0.03);
}

/* small seam accent between facets (subtle line) */
.fish::before{
  content:'';
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  pointer-events:none;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.02) 46%, rgba(0,0,0,0.02) 54%, transparent 55%);
  mix-blend-mode: multiply;
  z-index:7;
  opacity:0.6;
  border-radius:4px;
}

/* eye (moved slightly down/left to match reference) */
.fish::after{
  content:'';
  position:absolute;
  width:20px;height:20px;border-radius:50%;
  left:14%; top:40%;
  background: radial-gradient(circle at 34% 34%, #fff8 0 28%, #000 34%);
  z-index:8;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset;
}

/* unified color scheme: set CSS variables, keep existing gradients so die feinen Verläufe bleiben */
.fish.scheme-uni .p1,
.fish.scheme-uni .p5 { --p1: var(--colA); --p5: var(--colA); }
.fish.scheme-uni .p2,
.fish.scheme-uni .p3,
.fish.scheme-uni .p4 { --p2: var(--colB); --p3: var(--colB); --p4: var(--colB); }

/* small size variations */
.fish.small{width:160px;height:86px}
.fish.large{width:260px;height:140px}

/* (removed .fish.simple / #aquarium.edge-mode branches - restoring uniform styling) */
/* keep rendering hints */
.fish {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Background gradient layer behind everything (send behind seabed) */
#aquarium::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(230,249,255,1) 0%, rgba(223,242,247,1) 28%, var(--bg) 100%);
  z-index: -1; /* behind seabed */
  pointer-events: none;
}

/* Seabed container (rocks & plants) */
.seabed {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 22vh;
  pointer-events: none;
  z-index: 0; /* below bubbles (1) and fishes (2) */
  overflow: visible;
}

/* thin sand layer at the very bottom that fades upward */
.seabed::before{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 10vh; /* thinner but stronger strip */
  pointer-events: none;
  z-index: 0; /* keep behind rocks/plants which have higher z-index */
  background: linear-gradient(180deg,
    rgba(238,224,196,0.0) 0%,
    rgba(238,224,196,0.10) 28%,
    rgba(238,224,196,0.28) 60%,
    rgba(238,224,196,0.44) 100%);
  mix-blend-mode: overlay;
  /* slightly stronger inset shadow for depth */
  box-shadow: inset 0 12px 30px rgba(0,0,0,0.08);
}

/* generic seabed item base */
.seabed .item {
  position: absolute;
  bottom: 0;
  transform-origin: bottom center;
  pointer-events: none;
}

/* Origami rock variants — more 3D by using pseudo facets */
.rock {
  position: absolute;
  width: 140px;
  height: 78px;
  left: 0;
  bottom: 0;
  transform-origin: bottom center;
  clip-path: polygon(6% 60%, 26% 34%, 56% 22%, 82% 38%, 94% 66%, 60% 86%, 24% 82%);
  background: linear-gradient(135deg, #68aeb0 0%, #3fa6a1 60%);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  border-radius: 3px;
  overflow: visible;
}

/* add two extra facets to simulate folds (use pseudo elements for lighting) */
.rock::before,
.rock::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  border-radius: 3px;
}

/* lighter top facet */
.rock::before {
  clip-path: polygon(6% 60%, 36% 36%, 56% 26%, 60% 24%, 36% 52%, 24% 78%);
  background: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  mix-blend-mode: overlay;
  transform: translateY(-2px) skewY(-1deg);
  opacity: 0.95;
}

/* darker lower facet / shadow */
.rock::after {
  clip-path: polygon(36% 52%, 56% 26%, 82% 38%, 94% 66%, 60% 86%, 36% 84%);
  background: linear-gradient(160deg, rgba(0,0,0,0.06), rgba(0,0,0,0.02));
  transform: translateY(2px);
  opacity: 0.9;
}

/* color variants remain (slightly shifted) */
.rock.variant-1{ background: linear-gradient(135deg,#6fb7b2,#3ea6a1); }
.rock.variant-2{ background: linear-gradient(135deg,#8aa9c6,#5f88b0); }
.rock.variant-3{ background: linear-gradient(135deg,#caa87a,#b88557); }

.rock.small{ width: 90px; height:48px; }
.rock.large{ width:180px; height:98px; }

/* Seagrass: tall, thin blades with staggered sway */
.plant {
  position: relative;
  width: 48px;
  height: 160px;
  bottom: 0;
  transform-origin: bottom center;
  pointer-events: none;
  display: block;
}

/* each blade is a narrow, slightly curved triangle */
.plant .blade {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform-origin: bottom center;
  width: 18px;
  height: 100%;
  margin-left: -9px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), #2fb873);
  box-shadow: inset -3px -1px 8px rgba(0,0,0,0.06);
  opacity: 0.98;
}

/* create subtle variety per blade */
.plant .blade.b1{ transform: rotate(-12deg) translateX(-6px) scaleY(0.98); background: linear-gradient(180deg,#6fe1a1,#2fb873); }
.plant .blade.b2{ transform: rotate(-4deg) translateX(-2px) scaleY(1.02); background: linear-gradient(180deg,#63d19a,#1fa76b); }
.plant .blade.b3{ transform: rotate(4deg) translateX(2px) scaleY(1.05); background: linear-gradient(180deg,#54c98b,#16a65f); }
.plant .blade.b4{ transform: rotate(12deg) translateX(6px) scaleY(0.95); background: linear-gradient(180deg,#7be6b4,#29c987); }

/* sway animation with per-blade delay */
@keyframes grassSway {
  0%   { transform-origin: bottom center; transform: rotate(var(--r,0deg)) translateX(var(--tx,0px)) scaleY(var(--sy,1)); }
  50%  { transform-origin: bottom center; transform: rotate(calc(var(--r,0deg) * -1)) translateX(calc(var(--tx,0px) * -1)) scaleY(var(--sy,1)); }
  100% { transform-origin: bottom center; transform: rotate(var(--r,0deg)) translateX(var(--tx,0px)) scaleY(var(--sy,1)); }
}
.plant .blade { animation: grassSway 3.6s ease-in-out infinite; }

/* per-blade custom duration & delay to avoid uniform motion (set inline via JS too) */
.plant.sway .blade { animation-duration: 3.2s; }

/* depth ordering helpers */
.seabed { z-index: 0; }
.rock { z-index: 1; }
.plant { z-index: 2; }

/* Bubbles (sichtbarer, aber dezent) */
.bubble {
  position: absolute;
  bottom: -10vh;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);        /* heller */
  border: 1px solid rgba(255,255,255,0.45);  /* feine Kante */
  box-shadow: 0 6px 18px rgba(0,0,0,0.12), inset 0 2px 8px rgba(255,255,255,0.6);
  z-index: 1;
  pointer-events: none;
  animation-name: rise;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  mix-blend-mode: normal;                    /* vermeidet Ausblenden auf hellem BG */
  transform: translateZ(0);
  opacity: 0.95;
}

/* Bubble animation: schneller sichtbar werden, dann langsam ausblenden */
@keyframes rise {
  0%   { transform: translateY(0) scale(0.7);  opacity: 0.6; }
  10%  { opacity: 0.9; transform: translateY(-10vh) scale(0.85); }
  70%  { opacity: 0.65; transform: translateY(-80vh) scale(1); }
  100% { transform: translateY(-120vh) scale(1.05); opacity: 0; }
}

/* debug helper — temporär noch stärker sichtbar machen */
.bubble.debug {
  background: rgba(0,0,0,0.28) !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  z-index: 9999 !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.28) !important;
  border-color: rgba(255,255,255,0.85) !important;
}

/* parallax helpers - elements we move from JS */
.seabed { will-change: transform; }
.seabed .item { will-change: transform, opacity; }
.bubble { will-change: transform, opacity; }
.fish { will-change: transform, left, top; }

/* small visual depth: further things slightly blur/less contrast */
.seabed.depth-far { filter: blur(0.6px) saturate(0.9); opacity: 0.95; }
.seabed.depth-mid { filter: blur(0.2px) saturate(0.98); opacity: 0.98; }
.seabed.depth-near { filter: none; opacity: 1; }

/* Edge / degraded mode reduces expensive effects */
#aquarium.edge-mode .fish {
  filter: none !important;
  box-shadow: none !important;
  transition: none !important;
}

/* hide bubbles in edge-mode to save CPU */
#aquarium.edge-mode .bubble { display: none !important; }
/* avoid blend-mode pressure */
#aquarium.edge-mode::after { display: none !important; }

/* rendering hints for crisper transforms */
.fish {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}


/* 1. FISCH: Schatten (außen & innen) + Naht deaktivieren 
*/
#aquarium.edge-mode .fish {
 filter: none !important;
 box-shadow: none !important;
}

#aquarium.edge-mode .fish .p1,
#aquarium.edge-mode .fish .p2,
#aquarium.edge-mode .fish .p3,
#aquarium.edge-mode .fish .p4,
#aquarium.edge-mode .fish .p5,
#aquarium.edge-mode .fish::after {
  box-shadow: none !important; /* Alle inset-Schatten bleiben aus! */
}
#aquarium.edge-mode .fish::before {
  mix-blend-mode: normal !important;
  display: none !important; /* Naht bleibt aus */
}

/* 2. HINTERGRUND: Blasen, Streifen & Seegras-Animation stoppen
*/
#aquarium.edge-mode .plant .blade {
  animation: none !important;
}
#aquarium.edge-mode .bubble,
#aquarium.edge-mode::after {
  animation: none !important;
  display: none !important;
}
/* Den langsamen Wasser-Flow (::before) stoppen wir auch */
#aquarium.edge-mode::before {
   animation: none !important;
}

/* Score UI */
/* Target UI (left) — ensure high z-index and visible swatch */
#target{
  position: fixed !important;
  top: 14px !important;
  left: 18px !important;
  right: auto !important;
  z-index: 10010 !important;
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  pointer-events: none;
  transform: none;
}

#target .swatch{
  width:30px;
  height:22px;
  border-radius:4px;
  background: transparent;
}

/* Score: always anchored to right */
#score{
  position: fixed !important;
  top: 14px !important;
  right: 18px !important;
  left: auto !important;
  z-index: 10011 !important;
  margin: 0;
}

/* UI pills: readable framed background for target + score */
#target, #score {
  position: fixed !important;
  top: 14px !important;
  z-index: 10010 !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 14px;
  color: #fff;
  font-weight: 600;
  font-family: system-ui, Arial, sans-serif;
  pointer-events: none;
  /* subtle dark glass to separate text from background */
  background: linear-gradient(180deg, rgba(10,16,24,0.54), rgba(8,12,18,0.42));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(6px) saturate(1.06);
}

/* place target left, score right (keep previous positions) */
#target { left: 18px !important; right: auto !important; z-index:10010; }
#score  { right: 18px !important; left: auto !important; z-index:10011; }

/* swatch: stronger border + slight inner padding for visibility */
#target .swatch{
  width:28px;
  height:20px;
  border-radius:6px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.03);
  background: transparent;
}

/* small label style */
#target .label { font-size:12px; opacity:0.95; color: #e8f0ff; }

/* responsive: if viewport narrow, stack UI pills centered */
@media (max-width:520px){
  #target { left: 50% !important; transform: translateX(-50%) !important; top: 10px !important; }
  #score  { right: 50% !important; transform: translateX(50%) !important; top: 56px !important; }
}

/* restore normal arrow cursor and ensure clicks hit the .fish container */
.fish {
  pointer-events: auto;
  cursor: default; /* normal pointer instead of hand */
}

/* let clicks land on the .fish container instead of its internal facets */
.fish * {
  pointer-events: none;
}

/* UI elements must not block clicks */
#target, #score, .wrong-flash, .pop {
  pointer-events: none !important;
}

/* pop effect when fish is clicked (bubble) */
#aquarium .pop{
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0.18) 60%, transparent 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12), inset 0 2px 6px rgba(255,255,255,0.6);
  transform: translate(-50%,-50%) scale(0.6);
  opacity: 1;
  z-index: 10005;
  pointer-events: none;
  animation: popRise .65s cubic-bezier(.22,.9,.27,1) forwards;
}

/* small pop animation: rise and fade */
@keyframes popRise {
  0%   { transform: translate(-50%,-50%) scale(0.6); opacity: 1; }
  60%  { transform: translate(-50%,-90%) scale(1.05); opacity: 0.85; }
  100% { transform: translate(-50%,-140%) scale(1.25); opacity: 0; }
}