/* Astral Lagoon: the third machine. It shares the machine screen (top
   bar, reels, console) with the others; its view (js/machines/koi/
   render.js) puts `koi` on #app and `at-koi` on the body while it is on
   screen, and `holding` on #app during Hold & Spin. A luminous lagoon in
   space inside the violet and gold shell: cream and teal water, koi,
   lotus and lanterns, gold trim; its jackpot sign where the pagoda's
   tower stands, its Star Pearls, and the Hold & Spin screens. */

/* ---------- The lagoon ---------- */

.app.koi,
body.at-koi {
  --lagoon-deep: #031a26;
  --lagoon: #0a4656;
  --lagoon-teal: #36dcc4;
  --lagoon-aqua: #8af2e6;
  --lagoon-cream: #f6eed6;
  --lotus: #ff7ac8;
}

/* Only on the machine: the lobby (body.in-lobby) keeps the nebula. */
body.at-koi:not(.in-lobby) {
  background:
    radial-gradient(60% 30% at 50% 18%, rgba(54, 220, 196, 0.22), transparent 70%),
    radial-gradient(50% 30% at 15% 40%, rgba(150, 90, 255, 0.25), transparent 70%),
    radial-gradient(120% 60% at 50% 100%, #021018, transparent 70%),
    linear-gradient(180deg, #1c0f4a, #0b2f48 45%, #03121c) fixed;
}

/* In place of the pagoda's lit palace: violet nebula over still water,
   stars above and their reflections below. */
.app.koi::before {
  background:
    radial-gradient(circle at 12% 18%, #fff2cf99 0 0.55px, transparent 1px) 0 0 / 97px 131px,
    radial-gradient(circle at 70% 36%, #bff8ff88 0 0.5px, transparent 1px) 0 0 / 151px 113px,
    radial-gradient(ellipse at 50% 30%, rgba(54, 220, 196, 0.32), transparent 46%),
    radial-gradient(ellipse at 18% 22%, rgba(170, 70, 230, 0.45), transparent 50%),
    radial-gradient(ellipse at 85% 30%, rgba(239, 52, 201, 0.28), transparent 45%),
    linear-gradient(180deg, #1a0b3d, #182a5e 38%, #0a3a4c 62%, #03141e);
}

/* The reel window: a cream and gold frame between two teal pillars set
   with pearls, under a gold eave with a band of lagoon water. */
.app.koi .grid {
  background: linear-gradient(180deg, #06303c, #021219);
  border-color: #fff0c0;
  box-shadow: 0 0 0 1px var(--gold-deep), 0 0 6px 1px var(--gold), 0 0 22px 4px rgba(54, 220, 196, 0.45), inset 0 0 18px rgba(0, 0, 0, 0.8);
}

.app.koi .grid::before {
  background:
    radial-gradient(circle at 40% 35%, #ffffff 0 1.5px, #dff6ff 2.5px, #8fd8e8 4.5px, #2a7a90 6px, transparent 6.5px) left 0 top 14px / 18px 40px repeat-y,
    radial-gradient(circle at 40% 35%, #ffffff 0 1.5px, #dff6ff 2.5px, #8fd8e8 4.5px, #2a7a90 6px, transparent 6.5px) right 0 top 14px / 18px 40px repeat-y,
    var(--gold-bevel) left top / 18px 8px no-repeat,
    var(--gold-bevel) right top / 18px 8px no-repeat,
    var(--gold-bevel) left bottom / 18px 8px no-repeat,
    var(--gold-bevel) right bottom / 18px 8px no-repeat,
    linear-gradient(90deg, #04222c, #0f6a72 35%, #7ae8d8 50%, #0d5a66 70%, #031820) left top / 18px 100% no-repeat,
    linear-gradient(90deg, #04222c, #0f6a72 35%, #7ae8d8 50%, #0d5a66 70%, #031820) right top / 18px 100% no-repeat;
}

.app.koi .grid::after {
  background:
    linear-gradient(180deg, transparent 55%, rgba(10, 90, 100, 0.95) 55% 66%, transparent 66%),
    var(--gold-bevel);
}

/* Each reel is deep lagoon water, lit from the middle, with soft
   caustics drifting over it. */
.app.koi .reel {
  box-shadow: 0 0 0 1px rgba(138, 242, 230, 0.35), inset 1px 0 0 rgba(255, 255, 255, 0.08), inset -1px 0 0 rgba(0, 0, 0, 0.5);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 22%, rgba(255, 255, 255, 0.05) 50%, transparent 78%, rgba(0, 0, 0, 0.55)),
    radial-gradient(40% 18% at 30% 30%, rgba(138, 242, 230, 0.12), transparent 70%),
    radial-gradient(40% 18% at 70% 72%, rgba(138, 242, 230, 0.1), transparent 70%),
    radial-gradient(ellipse at 50% 50%, #0d4a5c, #031a24 82%);
}

/* During Hold & Spin the water darkens and the frame glows teal. */
.app.koi.holding .grid {
  box-shadow: 0 0 0 1px var(--gold-deep), 0 0 8px 2px var(--lagoon-teal), 0 0 26px 6px rgba(54, 220, 196, 0.6), inset 0 0 18px rgba(0, 0, 0, 0.8);
}

.app.koi.holding .reel {
  background: radial-gradient(ellipse at 50% 50%, #062a36, #010a10 85%);
}

.app.koi .win-plate {
  background: linear-gradient(180deg, #0a3a46, #02141a);
  border-color: var(--gold-light);
  box-shadow: 0 0 0 1px #0a4656, 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 12px rgba(54, 220, 196, 0.55);
  color: var(--lagoon-cream);
}

/* The wilds line sits just over the reels: the streak chip comes down
   onto the frame to stay clear of it. */
.app.koi .streak-chip {
  top: -2px;
}

/* Over the reels: which symbol is wild, and on which reels. */
.lagoon-wilds {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 0;
  font-family: var(--display);
  font-size: clamp(0.75rem, 3.6vw, 0.9rem);
  letter-spacing: 0.05em;
  color: var(--gold-light);
  text-shadow: 0 1px 0 #3a2a00, 0 2px 3px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

.lagoon-wild {
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 230, 140, 0.7), transparent 70%);
  line-height: 1;
}

.lagoon-wild .sym-img {
  width: 1.4em;
  height: 1.4em;
}

/* ---------- The jackpot sign (where the pagoda's tower stands) ---------- */

.lagoon {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2px, 0.6vh, 6px);
  /* The foot reserves the reel roof, which projects above the reel
     window, so the wild guide never slips behind it. */
  padding: 2px 0 16px;
  overflow: hidden;
  /* It takes the height the reels and console leave, and the compact
     rules below fit it to that (the safe areas make the room smaller
     than the viewport height says). */
  container: lagoon / size;
}

.lagoon[hidden] {
  display: none;
}

/* The lagoon scene above the sign, sized by the height it gets: the
   Cosmic Koi swimming between lily pads, a lantern either side, stars
   over the water. */
.lagoon-sky {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  max-height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3%;
  container-type: size;
}

/* The water's surface: a cream and teal shimmer across the bottom. */
.lagoon-sky::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 4%;
  height: 34%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(ellipse at 50% 50%, rgba(246, 238, 214, 0.22) 0 2px, transparent 2px 9px),
    radial-gradient(ellipse at 50% 50%, rgba(54, 220, 196, 0.5), rgba(10, 70, 86, 0.2) 60%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse, #000 40%, transparent 72%);
  mask-image: radial-gradient(ellipse, #000 40%, transparent 72%);
}

/* A scatter of constellation stars, joined by faint lines. */
.lagoon-stars {
  position: absolute;
  inset: 0 6% 40%;
  background:
    radial-gradient(circle at 8% 30%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 18% 12%, #fff6d0 0 1px, transparent 1.8px),
    radial-gradient(circle at 29% 40%, #bff8ff 0 1px, transparent 1.8px),
    radial-gradient(circle at 74% 14%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 86% 36%, #fff6d0 0 1px, transparent 1.8px),
    radial-gradient(circle at 94% 10%, #bff8ff 0 1px, transparent 1.8px),
    linear-gradient(-63deg, transparent calc(50% - 0.5px), rgba(191, 248, 255, 0.25) 50%, transparent calc(50% + 0.5px)) 8% 10% / 22% 30% no-repeat,
    linear-gradient(60deg, transparent calc(50% - 0.5px), rgba(191, 248, 255, 0.25) 50%, transparent calc(50% + 0.5px)) 74% 10% / 21% 28% no-repeat;
  animation: lagoon-twinkle 3.6s ease-in-out infinite alternate;
}

.lagoon-koi {
  position: relative;
  width: min(92cqh, 34cqw);
  height: min(92cqh, 34cqw);
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(255, 140, 220, 0.55)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.6));
  animation: lagoon-swim 3.2s ease-in-out infinite alternate;
}

.lagoon-lantern {
  position: relative;
  width: min(46cqh, 13cqw);
  height: min(46cqh, 13cqw);
  align-self: flex-start;
  margin-top: 4%;
  filter: drop-shadow(0 0 10px rgba(255, 120, 60, 0.75));
  animation: lagoon-bob 2.6s ease-in-out infinite alternate;
}

.lagoon-lantern.right {
  animation-delay: -1.3s;
}

/* Lily pads floating on the water, one bearing a lotus. */
.lagoon-pad {
  position: relative;
  align-self: flex-end;
  display: grid;
  place-items: center;
  width: min(44cqh, 15cqw);
  height: min(18cqh, 6cqw);
  margin-bottom: 6%;
  border-radius: 50%;
  background:
    conic-gradient(from 80deg, transparent 0 14deg, #1f9a6a 14deg 360deg);
  box-shadow: inset 0 -2px 3px rgba(0, 30, 20, 0.6), 0 0 8px rgba(54, 220, 196, 0.35);
}

.lagoon-pad img {
  width: min(52cqh, 16cqw);
  height: min(52cqh, 16cqw);
  margin-bottom: 60%;
  filter: drop-shadow(0 0 8px rgba(255, 122, 200, 0.7));
}

/* Too little height for the scene to read: leave it out. */
@container (max-height: 46px) {
  .lagoon-koi,
  .lagoon-lantern,
  .lagoon-pad {
    display: none;
  }
}

.lagoon-sign {
  flex: none;
  display: flex;
  justify-content: center;
}

/* A slanted title: upright lettering in a slanted box, as in
   css/style.css, so the last letter isn't cut off. */
.lagoon-title,
.koi-show-title {
  display: inline-block;
  transform: skewX(-12deg);
}

.lagoon-title {
  font-family: var(--display);
  font-size: clamp(1.5rem, min(9vw, 4.4vh), 2.4rem);
  letter-spacing: 0.04em;
  line-height: 1.05;
  white-space: nowrap;
  background-image: var(--gold-bevel);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 var(--gold-deep)) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 12px rgba(54, 220, 196, 0.6));
}

/* The four jackpots: the GRAND across the top, then MAJOR, MINOR and
   MINI, each a lit plaque in its own colour. */
.lagoon-jackpots {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.lagoon-jackpot {
  --j: #2fd4a8;
  --j-dark: #04362c;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 1px 4px 2px;
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 45%),
    linear-gradient(180deg, var(--j), var(--j-dark));
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 3px 6px rgba(0, 0, 0, 0.5);
}

.lagoon-jackpot.grand {
  --j: #b02cc8;
  --j-dark: #2a0640;
  grid-column: 1 / -1;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  padding: 1px 10px 2px;
  box-shadow: 0 0 0 1px var(--gold-deep), 0 0 14px rgba(239, 52, 201, 0.55), 0 3px 6px rgba(0, 0, 0, 0.5);
}

.lagoon-jackpot.major { --j: #e0367a; --j-dark: #4a0622; }
.lagoon-jackpot.minor { --j: #3a6af0; --j-dark: #0a1a5a; }
.lagoon-jackpot.mini { --j: #18b890; --j-dark: #04362c; }

.lagoon-jackpot-name {
  font-family: var(--display);
  font-size: clamp(0.62rem, min(3vw, 1.6vh), 0.8rem);
  letter-spacing: 0.12em;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}

.lagoon-jackpot.grand .lagoon-jackpot-name {
  font-size: clamp(1rem, min(5vw, 2.8vh), 1.35rem);
  color: var(--gold-light);
}

.lagoon-jackpot-amount {
  display: block;
  max-width: 100%;
  overflow: hidden;
  font-family: var(--display);
  font-size: clamp(0.9rem, min(4.4vw, 2.5vh), 1.15rem);
  line-height: 1.1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background-image: var(--gold-bevel);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 var(--gold-deep)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.7));
}

.lagoon-jackpot.grand .lagoon-jackpot-amount {
  min-width: 0;
  font-size: clamp(1.15rem, min(6.4vw, 3.4vh), 1.7rem);
}

/* Little room (a short phone with the safe areas): a smaller title, and
   every plaque on one line, its name before its amount. */
@container lagoon (max-height: 190px) {
  .lagoon {
    gap: 1px;
    padding: 0 0 15px;
  }

  .lagoon-title {
    font-size: 1.1rem;
  }

  /* All four jackpots on one row, GRAND among them. */
  .lagoon-jackpots {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
  }

  .lagoon-jackpot.grand {
    grid-column: auto;
    gap: 4px;
    padding: 1px 4px 2px;
  }

  .lagoon-hint {
    font-size: 0.6rem;
  }

  .lagoon-board {
    padding: 1px 10px;
  }

  .lagoon-wilds {
    font-size: 0.7rem;
  }

  .lagoon-jackpot {
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    gap: 5px;
  }

  .lagoon-jackpot-name {
    flex: none;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }

  .lagoon-jackpot-amount {
    min-width: 0;
    font-size: 0.95rem;
  }

  .lagoon-jackpot.grand .lagoon-jackpot-name {
    font-size: 0.7rem;
  }

  .lagoon-jackpot.grand .lagoon-jackpot-amount {
    font-size: 0.95rem;
  }
}

/* A jackpot paying: its plaque flares. */
.lagoon-jackpot.hit {
  animation: lagoon-jackpot-hit 900ms ease-out;
}

.lagoon-hint {
  flex: none;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(0.68rem, 3.3vw, 0.85rem);
  letter-spacing: 0.07em;
  white-space: nowrap;
  color: var(--lagoon-aqua);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* A little Star Pearl before the hint. */
.lagoon-hint::before {
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.35em;
  vertical-align: -0.12em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #e8fbff 22%, #9fe8f0 48%, #2a7a98 80%);
  box-shadow: 0 0 6px rgba(138, 242, 230, 0.9);
}

/* Lines and line bet, or during Hold & Spin the respins left (lamps
   too) and the pearls held. */
.lagoon-board {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(2, 18, 26, 0.75);
  border: 1px solid rgba(138, 242, 230, 0.5);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}

.lagoon-status {
  font-family: var(--display);
  font-size: clamp(0.95rem, 4.4vw, 1.15rem);
  letter-spacing: 0.04em;
  color: var(--lagoon-cream);
}

.lagoon-detail {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(0.7rem, 3.3vw, 0.85rem);
  font-weight: 800;
  color: var(--lagoon-aqua);
}

.lagoon-pips {
  display: none;
  gap: 4px;
}

.lagoon-pip {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4a5a66, #10161c);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
}

.lagoon-pip.lit {
  background: radial-gradient(circle at 35% 30%, #fff, #8af2e6 35%, #1a9a8a 80%);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 0 8px rgba(138, 242, 230, 0.9);
}

.lagoon-pip.reset {
  animation: lagoon-pip-reset 420ms ease-out;
}

.lagoon.hold .lagoon-pips {
  display: flex;
}

.lagoon.hold .lagoon-board {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(6, 70, 80, 0.85), rgba(2, 20, 28, 0.9));
  box-shadow: 0 0 14px rgba(54, 220, 196, 0.6), inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

.lagoon.hold .lagoon-status {
  color: var(--gold);
}

.lagoon.hold .lagoon-hint {
  color: var(--gold-light);
}

/* ---------- Symbols ---------- */

/* Picture symbols over a glow of their own colour. */
body.at-koi .cell.ksym-koi { --glow: rgba(255, 120, 210, 0.6); }
body.at-koi .cell.ksym-planet { --glow: rgba(255, 90, 200, 0.5); }
body.at-koi .cell.ksym-lantern { --glow: rgba(255, 120, 50, 0.55); }
body.at-koi .cell.ksym-lotus { --glow: rgba(255, 140, 210, 0.5); }
body.at-koi .cell.ksym-moon { --glow: rgba(255, 220, 90, 0.5); }
body.at-koi .cell.ksym-crystal { --glow: rgba(255, 215, 80, 0.9); }

body.at-koi .cell.ksym-koi .sym-face,
body.at-koi .cell.ksym-planet .sym-face,
body.at-koi .cell.ksym-crystal .sym-face {
  font-size: calc(var(--cell) * 0.86);
}

body.at-koi .cell.ksym-lantern .sym-face,
body.at-koi .cell.ksym-lotus .sym-face,
body.at-koi .cell.ksym-moon .sym-face {
  font-size: calc(var(--cell) * 0.62);
}

/* The WILD's tag in lagoon teal. */
body.at-koi .cell.wild .wild-tag {
  background: linear-gradient(180deg, #12857a, #03323a);
  color: var(--gold-light);
}

/* Card letters in lagoon glass: teal, aqua, pearl pink, lotus violet and
   sunrise gold, set in the gold edge. */
body.at-koi .letter-A { --l1: #ffe2f2; --l2: #ff5ab4; --l3: #6a0a40; }
body.at-koi .letter-K { --l1: #d8fff8; --l2: #1fc8b0; --l3: #04443e; }
body.at-koi .letter-Q { --l1: #e8e0ff; --l2: #9a6aff; --l3: #2a0a6a; }
body.at-koi .letter-J { --l1: #dff4ff; --l2: #38a8f0; --l3: #08305a; }
body.at-koi .letter-10 { --l1: #fff4d0; --l2: #f0b030; --l3: #6a3a00; }

/* The Star Pearl: a luminous pearl filling the cell, its prize across it
   in heavy lettering. Jackpot pearls glow in their jackpot's colour. */
.cell.koi-pearl {
  --p1: #ffffff;
  --p2: #c8f6fa;
  --p3: #3fb0c8;
  --p4: #0a3058;
  --p-glow: rgba(138, 242, 230, 0.8);
  isolation: isolate;
}

.koi-pearl-orb {
  position: absolute;
  inset: 9%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, var(--p1) 0 7%, transparent 20%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(255, 190, 240, 0.35) 70%, rgba(190, 255, 245, 0.4) 80%, transparent 92%),
    radial-gradient(circle at 38% 30%, var(--p2), var(--p3) 40%, var(--p4) 88%);
  box-shadow: 0 0 10px 1px var(--p-glow), inset 0 -3px 6px rgba(0, 20, 40, 0.45);
}

.koi-pearl-value {
  position: relative;
  max-width: 96%;
  overflow: hidden;
  color: #fffbea;
  font-family: var(--display);
  font-size: calc(var(--cell) * 0.28);
  line-height: 1;
  white-space: nowrap;
  -webkit-text-stroke: calc(var(--cell) * 0.06) #04182a;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7);
}

.cell.koi-pearl.jp .koi-pearl-value {
  font-size: calc(var(--cell) * 0.21);
  letter-spacing: 0.03em;
  color: var(--gold-light);
}

.cell.koi-pearl.jp-mini { --p2: #c8ffe8; --p3: #22b888; --p4: #043a2c; --p-glow: rgba(47, 212, 168, 0.9); }
.cell.koi-pearl.jp-minor { --p2: #d0dcff; --p3: #4a6af0; --p4: #0a1450; --p-glow: rgba(90, 130, 255, 0.9); }
.cell.koi-pearl.jp-major { --p2: #ffd0e8; --p3: #e83a8a; --p4: #4a0628; --p-glow: rgba(255, 90, 170, 0.95); }
.cell.koi-pearl.jp-grand { --p2: #fff0b0; --p3: #e0a010; --p4: #5a3000; --p-glow: rgba(255, 211, 77, 0.95); }

/* Winning and locked pearls never dim with the rest of the grid. */
.app.koi .grid.has-win .cell.koi-pearl,
.app.koi .grid.cycling .cell.koi-pearl {
  opacity: 1;
}

/* Pearls that start Hold & Spin pulse. */
.cell.koi-pearl.hit .koi-pearl-orb {
  animation: koi-pearl-glow 600ms ease-in-out infinite alternate;
}

/* A pearl locked in Hold & Spin sits in a gold frame. */
.cell.koi-pearl.locked::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 8px;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-deep), inset 0 0 8px rgba(255, 211, 77, 0.4);
  pointer-events: none;
}

/* A new pearl pops in on a respin. */
.cell.koi-pearl.landed {
  animation: koi-pearl-land 480ms cubic-bezier(0.3, 1.6, 0.5, 1);
}

/* Collected at the end: a flash as it pays, then it rests a little dimmer. */
.cell.koi-pearl.collected {
  animation: koi-pearl-collect 420ms ease-out;
  filter: saturate(0.75) brightness(0.85);
}

/* A dark cell during Hold & Spin: still water, and a shimmer of lagoon
   light streaming down it while it turns on a respin. */
.cell.koi-dark {
  border-radius: 6px;
  background:
    radial-gradient(60% 40% at 50% 50%, rgba(54, 220, 196, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.1));
  box-shadow: inset 0 0 0 1px rgba(138, 242, 230, 0.12);
}

.cell.koi-dark.koi-spin {
  background:
    repeating-linear-gradient(180deg, transparent 0 14%, rgba(138, 242, 230, 0.28) 18%, transparent 24%) 0 0 / 100% 200%,
    linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.1));
  animation: koi-spin 260ms linear infinite;
}

/* ---------- Hold & Spin screens ---------- */

.koi-show {
  position: fixed;
  inset: 0;
  z-index: 44;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--safe-top) 16px var(--safe-bottom);
  background: radial-gradient(circle at 50% 45%, rgba(20, 150, 150, 0.7), rgba(2, 14, 22, 0.94) 70%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
  touch-action: manipulation;
}

.koi-show.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease;
}

.koi-show-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(100%, 340px);
  padding: 18px 16px 16px;
  border-radius: 18px;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(138, 242, 230, 0.35), transparent 70%),
    linear-gradient(180deg, #0f5a68, #2a1050 75%, #120830);
  border: 4px solid var(--gold);
  box-shadow: 0 0 0 2px var(--gold-deep), inset 0 0 0 2px var(--gold-deep), 0 0 30px rgba(54, 220, 196, 0.6), 0 12px 30px rgba(0, 0, 0, 0.7);
  text-align: center;
}

.koi-show.show .koi-show-panel {
  animation: winner-in 420ms cubic-bezier(0.3, 1.6, 0.5, 1) both;
}

/* Three Star Pearls over the title. */
.koi-show-pearls {
  display: flex;
  gap: 10px;
}

.koi-show-pearls i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fff 0 8%, transparent 22%),
    radial-gradient(circle at 40% 35%, #e6fbff, #9fe8f0 45%, #2a7a98 85%);
  box-shadow: 0 0 12px rgba(138, 242, 230, 0.9);
  animation: lagoon-bob 1.4s ease-in-out infinite alternate;
}

.koi-show-pearls i:nth-child(2) {
  width: 38px;
  height: 38px;
  animation-delay: -0.5s;
}

.koi-show-pearls i:nth-child(3) {
  animation-delay: -1s;
}

.koi-show-title {
  font-family: var(--display);
  font-size: clamp(1.8rem, 9vw, 2.6rem);
  line-height: 1.05;
  white-space: nowrap;
  background-image: var(--gold-bevel);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 var(--gold-deep)) drop-shadow(0 0 12px rgba(54, 220, 196, 0.8));
}

.koi-show-main {
  max-width: 100%;
  overflow: hidden;
  /* Room for the glow, which the clip would otherwise cut square. */
  padding: 10px 16px;
  margin: -10px 0;
  font-family: var(--display);
  font-size: clamp(2.6rem, 16vw, 4.4rem);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 0 #000, 0 0 16px var(--lagoon-teal, #36dcc4);
}

.koi-show.end .koi-show-main {
  font-size: clamp(2rem, 11vw, 3.2rem);
  text-shadow: 0 3px 0 #000, 0 0 16px var(--gold);
}

.koi-show-sub {
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: var(--gold-light);
}

.koi-show-jackpots {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: #ff9ad8;
  text-shadow: 0 0 8px rgba(255, 90, 170, 0.8);
}

.koi-show-jackpots:empty {
  display: none;
}

.koi-show-tap {
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #bff8ff;
  animation: blink 1.2s ease-in-out infinite;
}

/* ---------- Paytable ---------- */

.pt-koi-jackpots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.pt-koi-jackpot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px;
  border-radius: 10px;
  border: 2px solid var(--gold);
  background: linear-gradient(180deg, #18b890, #04362c);
}

.pt-koi-jackpot.grand { background: linear-gradient(180deg, #b02cc8, #2a0640); }
.pt-koi-jackpot.major { background: linear-gradient(180deg, #e0367a, #4a0622); }
.pt-koi-jackpot.minor { background: linear-gradient(180deg, #3a6af0, #0a1a5a); }

.pt-koi-jackpot-name {
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: #fff;
}

.pt-koi-jackpot-amount {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--gold-light);
}

.pt-koi-pearls {
  flex-wrap: wrap;
  --cell: 46px;
}

/* ---------- Animations ---------- */

@keyframes lagoon-swim {
  from { transform: translateX(-4%) rotate(-4deg); }
  to { transform: translateX(4%) rotate(3deg); }
}

@keyframes lagoon-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-4px); }
}

@keyframes lagoon-twinkle {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

@keyframes lagoon-jackpot-hit {
  0% { transform: scale(1); filter: brightness(1); }
  30% { transform: scale(1.08); filter: brightness(1.6); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes lagoon-pip-reset {
  0% { transform: scale(1.6); }
  100% { transform: scale(1); }
}

@keyframes koi-pearl-glow {
  from { filter: brightness(1); }
  to { filter: brightness(1.3); }
}

@keyframes koi-pearl-land {
  0% { transform: scale(0.2); opacity: 0.2; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes koi-pearl-collect {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.15); filter: brightness(1.8); }
  100% { transform: scale(1); filter: saturate(0.75) brightness(0.85); }
}

@keyframes koi-spin {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 100%, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lagoon-stars,
  .lagoon-koi,
  .lagoon-lantern,
  .lagoon-jackpot.hit,
  .lagoon-pip.reset,
  .cell.koi-pearl.hit .koi-pearl-orb,
  .cell.koi-pearl.landed,
  .cell.koi-pearl.collected,
  .cell.koi-dark.koi-spin,
  .koi-show-pearls i,
  .koi-show.show .koi-show-panel {
    animation: none;
  }
}