/* Aquarium on the pencil-puzzle kit (games/static/games/puzzles/kit/puzzles.css
   and kit.css, loaded before this): its accent, a sea-glass green beside Star
   Battle's indigo, Fillomino's terracotta, Hashi's teal, Yin-Yang's plum and
   Galaxies' night sky; and its board, calm water standing level in tanks on
   the kit's paper. Cell units: one cell is 1 wide. */
:root {
  --accent: #2c705a;         /* the one filled button: 5.9:1 with white */
  --accent-ink: #ffffff;
  --water-shallow: #bfe6dc;  /* water at its surface */
  --water-deep: #6db8a6;     /* and at the bottom of a tall tank */
  --water: #93cfc0;          /* water in a small picture */
  --water-edge: #256050;     /* a number that has its water: its ring and digits */
}

/* ── the emblem ─────────────────────────────────────────────────────────── */
.mark { display: block; overflow: visible; }
.mark-paper { fill: var(--paper-2); }
.mark-water { fill: var(--water); }
.mark-surface { fill: none; stroke: #ffffff; stroke-opacity: .8; stroke-width: .07; transform: translateY(.05px); }
.mark-glass { fill: none; stroke: var(--ink); stroke-width: .12; stroke-linejoin: miter; }
.mark-wall { fill: none; stroke: var(--ink); stroke-width: .1; }

/* ── the board ──────────────────────────────────────────────────────────── */
.aquarium .aq-shallow { stop-color: var(--water-shallow); }
.aquarium .aq-deep { stop-color: var(--water-deep); }
.aquarium .aq-tank { pointer-events: none; }
/* The surface catches the light: a bright line along the top of the water. */
.aquarium .aq-surface { fill: #ffffff; opacity: .65; }
/* The cell lines show through the water, so rows can still be counted. */
.aquarium .layer-lines .cell-lines { stroke: color-mix(in srgb, var(--ink) 20%, transparent); }

/* Crosses: the player's in graphite, the helper's fainter and smaller. */
.aquarium .aq-x { fill: none; stroke: var(--ink); stroke-width: .065; stroke-linecap: round; pointer-events: none; }
.aquarium .aq-x.auto { stroke: var(--soft); stroke-width: .05; opacity: .55; }

/* Where a click would put the water (a mouse only). */
.aquarium .aq-preview { fill: color-mix(in srgb, var(--water-deep) 22%, transparent); stroke: var(--accent); stroke-width: .045; stroke-dasharray: .12 .08; pointer-events: none; }
.aquarium .aq-preview.drain { fill: none; stroke: var(--soft); }

/* The numbers: graphite; with exactly their water, a ring of water round
   them; red when there's too much, or too little room left. */
.aquarium .aq-clue { pointer-events: none; }
.aquarium .aq-num { font: 700 .46px/1 var(--ui); font-variant-numeric: proportional-nums lining-nums; fill: var(--ink); text-anchor: middle; dominant-baseline: alphabetic; }
.aquarium .aq-disc { fill: transparent; stroke: transparent; stroke-width: .05; transition: fill var(--m-quick, 150ms) ease, stroke var(--m-quick, 150ms) ease; }
.aquarium .aq-clue.met .aq-disc { fill: var(--water-shallow); stroke: var(--water-deep); }
.aquarium .aq-clue.met .aq-num { fill: var(--water-edge); }
.aquarium .aq-clue.bad .aq-disc { fill: color-mix(in srgb, var(--bad) 10%, transparent); stroke: var(--bad); stroke-dasharray: .12 .07; }
.aquarium .aq-clue.bad .aq-num { fill: var(--bad); }

.aquarium.done .frame { stroke: var(--good); }
/* Solved, the crosses step back and leave the water. */
.aquarium.done .aq-x { opacity: .25; transition: opacity .6s ease; }

@media (prefers-reduced-motion: no-preference) {
  /* The water rises and falls to its level, gently. */
  .aquarium .aq-body { transition: transform calc(var(--m-glide, 250ms) * 1.4) cubic-bezier(.3, .7, .3, 1); }
  .aquarium .aq-clue.lit .aq-disc { animation: aq-lit var(--m-arrive, 350ms) ease-out; transform-box: fill-box; transform-origin: center; }
  /* Solved: the water bobs and its surface glints, tank after tank. */
  .aquarium.win .aq-body { animation: aq-bob .7s ease-in-out var(--d, 0ms) both; }
  .aquarium.win .aq-surface { animation: aq-glint .7s ease-in-out var(--d, 0ms) both; }
}
@keyframes aq-lit { 40% { scale: 1.35; } }
@keyframes aq-bob { 35% { translate: 0 -.09px; } 70% { translate: 0 .03px; } }
@keyframes aq-glint { 35% { opacity: 1; } }

/* ── a small grid: a daily's card, How to play ──────────────────────────── */
.mini { display: block; overflow: visible; }
.aquarium-mini .mini-paper { fill: var(--paper-2); }
.aquarium-mini .mini-water { fill: var(--water); }
.aquarium-mini .mini-cross { fill: none; stroke: var(--soft); stroke-width: .07; stroke-linecap: round; }
.aquarium-mini .mini-clue { font: 700 .52px/1 var(--ui); fill: var(--ink); text-anchor: middle; dominant-baseline: alphabetic; }
.aquarium-mini.solved .frame { stroke: var(--good); }