:root {
  --bg: #000000;          /* the page */
  --deep: #0a2747;        /* the deep blue at the bottom of the tank */
  --water: #146f93;       /* the blue in the middle of the water */
  --turq: #2ec4c6;        /* the turquoise near the surface */
  --coral: #ff6b57;       /* coral: the clownfish, the chosen tag */
  --sun: #ffc93c;         /* sun yellow: the yellow tang, the lit tag */
  --blue: #3f7df0;        /* the blue tang */
  --sand: #ecca8e;        /* the sand */
  --sand-dark: #b88b4f;   /* the shade in the sand */
  --plant: #2a9466;       /* the water plants */
  --plant-light: #86d9a1; /* the light on the plants */
  --rock: #6b8196;        /* the stones */
  --lid: #10233a;         /* the lid and the frame of the tank */
  --tag: #fff4dc;         /* the paper of the tags */
  --ink: #0b1f33;         /* the words on the tags */
  --glass: #d6f3f6;       /* the glass and its reflections */
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--tag);
  font-family: 'Fredoka Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow: hidden;
}

/* the whole menu: the bowl button on top, the tank under it (its place is kept even when it is closed, so nothing
   jumps when it opens) */
.acquario {
  --tank-w: min(620px, calc(100vw - 28px));
  --tank-h: max(200px, min(380px, calc(100vh - 140px)));
  width: var(--tank-w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ---- the bowl button ---- */
.bowl {
  height: 60px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px 0 8px;
  border: 1.5px solid color-mix(in srgb, var(--turq) 55%, transparent);
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lid) 70%, var(--water)), var(--lid));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass) 25%, transparent), 0 8px 22px -10px var(--turq);
  color: var(--tag);
  font: inherit;
  font-size: 18px;
  font-weight: 560;
  font-stretch: 100%;
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s cubic-bezier(.3, 1.6, .5, 1), font-stretch 0.3s ease, border-color 0.2s ease;
}

.bowl:active { transform: scale(0.96); }

.bowl:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: 4px;
}

@media (hover: hover) {
  .bowl:hover { border-color: var(--turq); font-stretch: 112%; }
  .bowl:hover .bowl__slosh { animation: slosh 0.9s ease-in-out; }
}

.bowl__glass {
  width: 46px;
  height: 46px;
  flex: none;
  overflow: visible;
}

.stop-turq { stop-color: var(--turq); }
.stop-deep { stop-color: var(--deep); }

.bowl__water { fill: url(#bowl-water); }
.bowl__sand { fill: var(--sand); }
.bowl__rim { fill: color-mix(in srgb, var(--glass) 8%, transparent); stroke: var(--glass); stroke-width: 1.4; stroke-opacity: 0.85; }
.bowl__neck { stroke: var(--glass); stroke-width: 1.4; stroke-linecap: round; stroke-opacity: 0.85; }
.bowl__shine { fill: none; stroke: #ffffff; stroke-width: 1.6; stroke-linecap: round; stroke-opacity: 0.55; }
.bowl__fish-body { fill: var(--coral); }
.bowl__fish-tail { fill: var(--coral); filter: brightness(0.85); }
.bowl__fish-stripe { fill: none; stroke: #ffffff; stroke-width: 1.2; }
.bowl__fish-eye { fill: var(--ink); }

.bowl__slosh { transform-origin: 24px 30px; transform-box: view-box; }

/* the little fish in the bowl goes back and forth, turning at each end */
.bowl__fish {
  transform-box: view-box;
  animation: bowl-swim 6s ease-in-out infinite;
}

@keyframes bowl-swim {
  0%   { transform: translate(16px, 28px) scale(1, 1); }
  42%  { transform: translate(32px, 26px) scale(1, 1); }
  50%  { transform: translate(33px, 27px) scale(-1, 1); }
  92%  { transform: translate(17px, 29px) scale(-1, 1); }
  100% { transform: translate(16px, 28px) scale(1, 1); }
}

@keyframes slosh {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(7deg); }
  60% { transform: rotate(-5deg); }
  85% { transform: rotate(2deg); }
}

.bowl[aria-expanded="true"] .bowl__fish { animation-play-state: paused; opacity: 0; transition: opacity 0.2s; }

.bowl__word { min-width: 3.2em; text-align: left; }

/* ---- the tank ---- */
.tank {
  position: relative;
  width: 100%;
  height: var(--tank-h);
  visibility: hidden;
  opacity: 0;
}

.tank__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.tank__items {
  position: absolute;
  inset: 0;
  list-style: none;
  padding: 0;
  pointer-events: none;
}

/* every menu item is a paper tag with a hole, held by its fish on a string drawn in the canvas */
.tag {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 7px 9px 9px 7px;
  background: linear-gradient(180deg, #ffffff 0%, var(--tag) 70%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 6px 14px -6px rgba(0, 10, 30, 0.75), 0 0 0 1px color-mix(in srgb, var(--sand-dark) 45%, transparent);
  color: var(--ink);
  font-size: 17px;
  font-weight: 540;
  font-stretch: 100%;
  white-space: nowrap;
  text-decoration: none;
  pointer-events: auto;
  opacity: 0;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s ease, color 0.25s ease, font-weight 0.3s ease, font-stretch 0.3s ease;
}

/* no round hole before the word (it read as a list bullet): the string reaches the edge of the tag */
.tag__hole {
  display: none;
}

.tag.is-hot,
.tag:focus-visible {
  background: linear-gradient(180deg, color-mix(in srgb, var(--turq) 35%, #ffffff), color-mix(in srgb, var(--turq) 70%, var(--tag)));
  font-weight: 620;
  font-stretch: 110%;
}

@media (hover: hover) {
  .tag:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--turq) 35%, #ffffff), color-mix(in srgb, var(--turq) 70%, var(--tag)));
    font-weight: 620;
    font-stretch: 110%;
  }
}

.tag:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

.tag[aria-current="page"] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sun) 55%, #ffffff), var(--sun));
  color: var(--ink);
  font-weight: 680;
  font-stretch: 112%;
}

@media (max-width: 420px), (max-height: 520px) {
  .tag { height: 26px; font-size: 14px; padding: 0 10px 0 6px; gap: 6px; }
  .bowl { height: 56px; font-size: 17px; }
  .bowl__glass { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .bowl__fish { animation: none; transform: translate(24px, 28px); }
  .bowl:hover .bowl__slosh { animation: none; }
  .bowl, .tag { transition: none; }
}