/* Bass Attack! — the ocean coat of paint.
 *
 * v2: BRIGHT. The first pass was a midnight deep-sea built from gradients,
 * and every panel had to fight the darkness — pale slabs, glow lines, dark
 * cards. Rob's call: keep the vibe of the ORIGINAL Treble Trouble (sunny,
 * light, readable) and use his painted shallows instead. So this file got
 * SMALLER, not bigger: the painting does the theming, the base stylesheet's
 * light chrome works as designed, and the skin is now just
 *
 *   1. the painted field,
 *   2. the fish invader,
 *   3. a few rising bubbles.
 *
 * Everything here is scoped to `.is-ocean` so the base game cannot be
 * touched by accident. Notes stay ink until answered — the game is note
 * reading, and a pre-coloured note hands a Prodigies child the answer.
 */

.is-ocean {
  /* Sampled from the painting: sky at the surface, sand at the floor. */
  --sky-top: #dceef6;
  --sky-mid: #c2e0ec;
  --sky-low: #cfe7dd;
}

/* ── The water ────────────────────────────────────────────────────────────
   Rob's painted shallows, same treatment as the Piano Field in the base
   game: cover, anchored to the sea floor so the kelp and sand stay under
   the bell row at every aspect ratio. One request, no gradients. */
.is-ocean .ti-field {
  background-image: url("./ocean-field.jpg");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color: var(--sky-mid);
}

/* ── Bubbles ──────────────────────────────────────────────────────────────
   Ambient, slow, and few — they rise behind the staff and must read on a
   LIGHT field now, so they are outlined in water-blue rather than lit from
   inside. */
.is-ocean .ti-bubbles {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.is-ocean .ti-bubbles i {
  position: absolute;
  bottom: -8%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.18) 62%, transparent 72%);
  border: 1.5px solid rgba(96, 152, 180, 0.38);
  animation: ba-rise linear infinite;
}
@keyframes ba-rise {
  from { transform: translateY(0) translateX(0); opacity: 0; }
  12%  { opacity: 0.9; }
  88%  { opacity: 0.65; }
  to   { transform: translateY(-118vh) translateX(14px); opacity: 0; }
}

/* ── The invader, as a fish ───────────────────────────────────────────────
   Rob's reference art: a round notehead that is also a little fish — eyes
   and brows on the leading (left) edge, a pectoral fin, a tail on the right,
   and the stem still rising off the tail side.

   Built entirely from the markup the engine already emits (head + two eyes +
   two brows + stem) using pseudo-elements, so the shared shell needs no
   fish-specific code. No flag — same call as the base game, where the flag
   read as a filled capital D and came off. Same ink as the base invader, so
   it reads exactly like notation until it is answered. */
.is-ocean .ti-invader-head {
  border-radius: 52% 48% 50% 50%;
  /* Upright, not the notehead's -20deg lean: a tilted fish reads as a dying
     fish. The stem alongside keeps it legible as a note. */
  transform: rotate(0deg);
  overflow: visible;
}

/* Pectoral fin — the lighter patch on the flank. */
.is-ocean .ti-invader-head::before {
  content: "";
  position: absolute;
  right: 18%;
  top: 46%;
  width: 30%;
  height: 40%;
  border-radius: 60% 40% 55% 45%;
  background: var(--invader-face);
  opacity: 0.55;
}

/* Tail — a wedge off the back, pointing the way it came from. */
.is-ocean .ti-invader-head::after {
  content: "";
  position: absolute;
  right: -30%;
  top: 16%;
  width: 42%;
  height: 68%;
  background: var(--c);
  clip-path: polygon(0% 50%, 100% 0%, 74% 50%, 100% 100%);
}

.is-ocean .ti-invader-stem {
  /* The stem leaves from just inboard of the tail so the two do not collide. */
  right: 0.06em;
}

/* ── Title accent ─────────────────────────────────────────────────────────
   The one splash of identity on the otherwise-stock light chrome: the
   second word of the logo goes water-blue instead of the base green. */
.is-ocean .ti-logo span { color: #1e7fc3; }

@media (prefers-reduced-motion: reduce) {
  .is-ocean .ti-bubbles i { animation: none; }
}