@import url("../../ui/scene.css");
#habitat { height: 100dvh; cursor: default; }
#habitat.locked { cursor: none; }

/* What is on screen besides the river: a little card with the fish's life -- which stage
   of six it is in, its strength, its growth and what is in its stomach. Rounded, bubbly,
   easy to read at a glance. */
:root { --hud-font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", var(--font-body, system-ui), sans-serif; }
#hud {
  position: fixed;
  z-index: 2;
  inset: 16px auto auto 16px;
  pointer-events: none;
  font-family: var(--hud-font);
  color: #f3fbf7;
}
#status {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  width: min(268px, 70vw);
  box-sizing: border-box;
  padding: 11px 14px 13px 11px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(10, 40, 48, 0.62), rgba(4, 20, 26, 0.5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 24px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.stage { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 8px; padding: 0 2px 2px 4px; min-width: 0; }
.stage-name { font-weight: 800; font-size: 15px; letter-spacing: 0.01em; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); min-width: 0; overflow-wrap: anywhere; }
/* Six stages of a life, the one it is in swelling like a bubble. */
.life { display: flex; flex-shrink: 0; gap: 3px; margin: 0 0 0 auto; padding: 0 2px 0 0; list-style: none; }
.meter { min-width: 0; }
.life li.phase { margin-left: 3px; }
.life li {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(220, 245, 240, 0.45);
  transition: transform 500ms cubic-bezier(0.3, 1.8, 0.5, 1), background 500ms ease;
}
.life li.done { background: rgba(160, 235, 200, 0.75); box-shadow: none; }
.life li.now {
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, #8ff0c0 40%, #2fbf8f 100%);
  box-shadow: 0 0 8px rgba(140, 240, 190, 0.8);
  transform: scale(1.45);
}

.meter { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto 12px; column-gap: 8px; row-gap: 3px; align-items: center; }
.meter .icon {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tone-deep);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
}
.meter .icon svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#energy .icon svg { fill: #fff; stroke: none; }
.meter .label { font-size: 12px; font-weight: 700; letter-spacing: 0.03em; line-height: 1; opacity: 0.92; }
.meter .label em { font-style: normal; font-weight: 600; opacity: 0.7; margin-left: 3px; }
.meter .label em.wait { color: #ffd98a; opacity: 1; font-weight: 800; animation: wait-glow 1.8s ease-in-out infinite; }
.meter .label em.wait::before { content: "· "; }
#growth.waiting .label em.next { display: none; }
@keyframes wait-glow { 50% { opacity: 0.55; } }
.meter .bar {
  position: relative;
  display: block;
  height: 12px;
  border-radius: 999px;
  background: rgba(0, 12, 16, 0.5);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.meter .fill, .meter .pending {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 300ms ease-out, filter 400ms ease;
}
/* Glossy fill with a stream of little bubbles running through it. */
.meter .fill {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.55) 0 1.4px, transparent 2px) 0 0 / 14px 12px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%),
    linear-gradient(90deg, var(--tone-a), var(--tone-b));
  animation: bubbles 2.6s linear infinite;
}
@keyframes bubbles { to { background-position: 14px 0, 0 0, 0 0; } }
.meter .pending { background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.34) 0 4px, rgba(255, 255, 255, 0.16) 4px 8px); }

#energy { --tone-a: #ffe27a; --tone-b: #ffa53d; --tone-deep: #f59a1f; }
/* The strength bar has two layers: the bright fill is what the fish can call on now (a
   burst spends it, drifting brings it back), the striped part behind it how far it can come
   back to -- its strength from food, which only eating raises. */
#energy .pending { background: repeating-linear-gradient(115deg, rgba(255, 200, 110, 0.4) 0 4px, rgba(255, 200, 110, 0.18) 4px 8px); }
#energy .winded { display: none; color: #ff9a8a; opacity: 1; }
#energy.winded .fill { filter: saturate(1.4) hue-rotate(-25deg); }
#energy.winded .winded { display: inline; }
#energy.winded .icon { animation: pant 700ms ease-in-out infinite; }
#energy.winded .bar { animation: blink 900ms ease-in-out infinite; }
#energy.short .icon { animation: shake 350ms ease-in-out; }
@keyframes pant { 50% { transform: scale(1.18); } }
@keyframes shake { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
/* Out of breath: the edges of the view darken and pulse with the gills. */
#winded {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(20, 0, 8, 0.55) 100%);
  opacity: 0;
  transition: opacity 600ms ease;
}
#winded.on { opacity: 1; animation: gasp 700ms ease-in-out infinite; }
@keyframes gasp { 50% { opacity: 0.6; } }
/* The calendar: the month and the time of day, and how warm the water is here. */
#season {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 1px;
  padding: 5px 4px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.88;
}
#season .when { display: flex; align-items: center; gap: 6px; }
#season .glyph { font-size: 14px; line-height: 1; filter: saturate(0.85); }
#season .temperature { display: flex; align-items: center; gap: 2px; transition: color 600ms ease; }
#season svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#season.cold .temperature { color: #a9d8ff; }
#season.warm .temperature { color: #ffcf7a; }
#season.hot .temperature { color: #ff8a6b; animation: throb 1.1s ease-in-out infinite; }
@keyframes throb { 50% { opacity: 0.5; } }
#growth { --tone-a: #a6f07a; --tone-b: #2fc59a; --tone-deep: #22a57c; }
#stomach { --tone-a: #ffc6a8; --tone-b: #ff7d8a; --tone-deep: #ec6378; }
/* The alevin's stomach is its yolk. */
#stomach.yolk { --tone-a: #ffd07a; --tone-b: #ff8a3d; --tone-deep: #f07a2a; }
#stomach[hidden] { display: none; }
#energy.low { --tone-a: #ffb36b; --tone-b: #ff6b4a; --tone-deep: #e8573a; }
#energy.low .icon { animation: wobble 900ms ease-in-out infinite; }
#energy.empty .bar { animation: blink 700ms ease-in-out infinite; }
/* At the last stage the bar is fat, not food. */
#energy.reserve { --tone-a: #ffb08a; --tone-b: #e2566a; --tone-deep: #c9455a; }
#energy.fed .icon, #stomach.fed .icon { animation: pop 450ms cubic-bezier(0.3, 1.8, 0.5, 1); }
#stomach.fed .bar { animation: glow-pink 600ms ease-out; }
#growth.grew .icon { animation: pop 700ms cubic-bezier(0.3, 1.8, 0.5, 1); }
#growth.grew .bar { animation: glow-green 1200ms ease-out; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@keyframes blink { 50% { box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 110, 90, 0.8); } }
@keyframes glow-pink { from { box-shadow: 0 0 12px 2px rgba(255, 150, 160, 0.9); } }
@keyframes glow-green { from { box-shadow: 0 0 16px 3px rgba(150, 250, 190, 0.95); } }

/* What was just eaten, floating up and away. */
#pops { position: absolute; left: calc(100% + 10px); bottom: 10px; width: 0; height: 0; }
#pops span {
  position: absolute;
  left: 0;
  bottom: 0;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  color: #fff4e0;
  text-shadow: 0 1px 4px rgba(120, 40, 30, 0.6), 0 0 10px rgba(255, 170, 120, 0.6);
  animation: float-up 1600ms ease-out forwards;
}
#pops span.note { color: #e8f4ff; text-shadow: 0 1px 4px rgba(20, 40, 80, 0.7), 0 0 10px rgba(120, 180, 255, 0.5); }
@keyframes float-up {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  15% { transform: translate(4px, -10px) scale(1.1); opacity: 1; }
  100% { transform: translate(14px, -46px) scale(1); opacity: 0; }
}

/* The logbook button, under the sound button. */
#logbook-toggle {
  position: fixed;
  top: 68px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #f3fbf7;
  background: linear-gradient(160deg, rgba(10, 40, 48, 0.62), rgba(4, 20, 26, 0.5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
  cursor: pointer;
  transition: transform 150ms ease;
}
#logbook-toggle:hover { transform: scale(1.08); }
#logbook-toggle:focus-visible { outline: 3px solid #ffd98a; outline-offset: 3px; }
#logbook-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.locked #logbook-toggle { opacity: 0.55; }

/* Whether a hunter has the fish in sight: an open eye, glowing, when one does; a shut one
   when one is about but the fish is hidden from it. Under the card. */
#watch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(160deg, rgba(10, 40, 48, 0.62), rgba(4, 20, 26, 0.5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color 250ms ease, opacity 400ms ease;
}
#watch[hidden] { display: none; }
#watch svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#watch .shut { display: none; }
#watch.seen { color: #ffb08a; }
#watch.seen svg { filter: drop-shadow(0 0 5px rgba(255, 120, 80, 0.8)); animation: stare 1.2s ease-in-out infinite; }
#watch.unseen { color: #9ff0b8; }
#watch.unseen .open { display: none; }
#watch.unseen .shut { display: inline; }
#watch.fading { opacity: 0; }
@keyframes stare { 50% { transform: scale(1.12); } }

/* Badges: medals sliding in at the right, under the buttons, stacked. */
#badges {
  position: fixed;
  z-index: 3;
  top: 180px;
  right: 16px;
  display: grid;
  gap: 8px;
  justify-items: end;
  pointer-events: none;
  font-family: var(--hud-font);
  color: #f3fbf7;
}
#badges .badge {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
  max-width: 290px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(14, 48, 56, 0.9), rgba(6, 26, 32, 0.85));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 26px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: badge-in 520ms cubic-bezier(0.25, 1.5, 0.45, 1) both;
}
#badges .badge.leaving { animation: badge-out 520ms ease-in forwards; }
#badges .words { display: grid; line-height: 1.2; }
#badges em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
#badges b { font-size: 15px; font-weight: 800; }
#badges .line { font-size: 11.5px; font-weight: 600; opacity: 0.8; }
#badges .gold { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 22px rgba(255, 200, 80, 0.45), 0 8px 26px rgba(0, 0, 0, 0.35); }
@keyframes badge-in { from { transform: translateX(120%) scale(0.8); opacity: 0; } }
@keyframes badge-out { to { transform: translateX(120%); opacity: 0; } }
/* The medal itself: a round coin in bronze, silver or gold with the picture pressed in. */
.medal {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #3b2410;
  background: radial-gradient(circle at 35% 30%, #ffe0bf 0 12%, #d99a5c 45%, #9a5a26 100%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22), inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 0 0 2px rgba(255, 255, 255, 0.12);
}
.medal svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.medal.silver { color: #26343a; background: radial-gradient(circle at 35% 30%, #ffffff 0 14%, #cfdde2 45%, #7f9399 100%); }
.medal.gold { color: #4a3000; background: radial-gradient(circle at 35% 30%, #fff6c8 0 14%, #ffd24a 45%, #c48a0c 100%); }
.medal.locked { color: rgba(243, 251, 247, 0.35); background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1); }
#badges .medal { animation: medal-spin 900ms ease-out 200ms; }
@keyframes medal-spin { from { transform: rotateY(360deg) scale(1.3); } }
/* In the logbook: the whole collection. */
#logbook .badges { margin-top: 14px; }
#logbook .badges h3 { margin: 0 0 8px; font-size: 16px; }
#logbook .badges .tally { margin-left: 6px; opacity: 0.75; font-size: 13px; }
#logbook .badges .group h4 { margin: 10px 0 6px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
#logbook .badges ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
#logbook .badges li { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); font-size: 11px; font-weight: 700; text-align: center; line-height: 1.2; }
#logbook .badges li.locked { opacity: 0.55; letter-spacing: 0.15em; }

/* The map button, under the logbook's. */
#map-toggle {
  position: fixed;
  top: 120px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #f3fbf7;
  background: linear-gradient(160deg, rgba(10, 40, 48, 0.62), rgba(4, 20, 26, 0.5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
  cursor: pointer;
  transition: transform 150ms ease, color 200ms ease;
}
#map-toggle:hover { transform: scale(1.08); }
#map-toggle:focus-visible { outline: 3px solid #ffd98a; outline-offset: 3px; }
#map-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#map-toggle[aria-pressed="true"] { color: #ffd98a; }
.locked #map-toggle { opacity: 0.55; }

/* The minimap, bottom right: the river round the fish, and the whole river in small. */
#minimap {
  position: fixed;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 10px 10px 8px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(10, 40, 48, 0.62), rgba(4, 20, 26, 0.5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 24px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  font-family: var(--hud-font);
  color: #f3fbf7;
  animation: map-in 260ms cubic-bezier(0.3, 1.5, 0.5, 1);
}
#minimap[hidden] { display: none; }
#minimap canvas { display: block; }
#minimap .where { display: flex; align-items: center; justify-content: space-between; gap: 8px; box-sizing: border-box; width: 100%; margin: 2px 0 0; padding: 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
#minimap .scale { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; opacity: 0.85; }
#minimap .scale i { display: block; height: 4px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 2px 2px; }
#minimap .scale b { font-weight: 700; white-space: nowrap; }
@keyframes map-in { from { transform: scale(0.85); opacity: 0; } }
@media (max-height: 560px) { #minimap .strip { display: none; } }

/* The logbook: a map of the river and the list of everything met on the way. */
#logbook {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(2, 12, 16, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  font-family: var(--hud-font);
  color: #f3fbf7;
}
#logbook[hidden] { display: none; }
#logbook .book {
  width: min(1040px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 18px 22px 14px;
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(14, 48, 56, 0.96), rgba(6, 26, 32, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 20px 60px rgba(0, 0, 0, 0.45);
}
#logbook header { display: flex; align-items: baseline; gap: 12px; }
#logbook h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: 0.01em; }
#logbook .gen { opacity: 0.7; font-weight: 700; font-size: 13px; }
#logbook .close {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}
#logbook .close:hover { background: rgba(255, 255, 255, 0.16); }
#logbook .pages { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; margin-top: 12px; }
@media (max-width: 820px) { #logbook .pages { grid-template-columns: 1fr; } }
#logbook .map svg { width: 100%; height: auto; display: block; border-radius: 16px; background: radial-gradient(ellipse at 40% 40%, rgba(60, 90, 60, 0.35), rgba(20, 40, 30, 0.35)); }
#logbook .river line { stroke-linecap: round; }
#logbook .river line.visited { stroke: #6fd3e8; }
#logbook .river line.unknown { stroke: rgba(111, 211, 232, 0.28); }
#logbook .stations text { font-size: 12px; font-weight: 700; fill: #f3fbf7; paint-order: stroke; stroke: rgba(0, 20, 24, 0.8); stroke-width: 3px; }
#logbook .stations circle { fill: #f3fbf7; stroke: rgba(0, 20, 24, 0.8); stroke-width: 2; }
#logbook .stations .fall circle { fill: #9fb4bb; }
#logbook .stations .fall.done circle { fill: #8ff0c0; }
#logbook .stations .redd circle { fill: #ffb070; }
#logbook .spots rect { fill: #ffd98a; stroke: rgba(40, 24, 0, 0.85); stroke-width: 1.5; }
#logbook .you circle { fill: #ffd24a; stroke: #3a2600; stroke-width: 1.5; }
#logbook .you .pulse { fill: rgba(255, 210, 74, 0.25); stroke: none; animation: you 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes you { 50% { transform: scale(1.6); opacity: 0.4; } }
#logbook .regions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 12px; font-weight: 700; }
#logbook .regions li { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); opacity: 0.5; }
#logbook .regions li.visited { background: rgba(111, 211, 232, 0.25); opacity: 1; }
#logbook .species h3 { margin: 0 0 8px; font-size: 16px; }
#logbook .species .tally { margin-left: 6px; opacity: 0.75; font-size: 13px; }
#logbook .group h4 { margin: 10px 0 5px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
#logbook .group ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; }
#logbook .group li { display: flex; flex-direction: column; padding: 6px 9px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); font-size: 12.5px; font-weight: 700; }
#logbook .group li .count { font-size: 11px; font-weight: 600; opacity: 0.65; }
#logbook .group li.unknown { opacity: 0.35; letter-spacing: 0.2em; }
#logbook .keys { margin: 12px 0 0; font-size: 12px; opacity: 0.65; }
#logbook kbd { font-family: inherit; font-weight: 800; padding: 0 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.14); }

/* Sound on and off, top right: a round glass button like the HUD's badges. */
#sound-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #f3fbf7;
  background: linear-gradient(160deg, rgba(10, 40, 48, 0.62), rgba(4, 20, 26, 0.5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
  cursor: pointer;
  transition: transform 150ms ease, background 200ms ease;
}
#sound-toggle:hover { transform: scale(1.08); }
#sound-toggle:focus-visible { outline: 3px solid #ffd98a; outline-offset: 3px; }
#sound-toggle svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#sound-toggle .speaker { fill: currentColor; stroke: none; }
#sound-toggle .muted { display: none; }
#sound-toggle[aria-pressed="false"] { color: #ffb4a2; }
#sound-toggle[aria-pressed="false"] .waves { display: none; }
#sound-toggle[aria-pressed="false"] .muted { display: inline; }
.locked #sound-toggle { opacity: 0.55; }

#toast {
  position: fixed;
  z-index: 2;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1200ms ease;
  color: #eef6f2;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
#toast.shown { opacity: 1; }

/* The fish being fought: its name and its strength over it, the same two-part bar as the
   salmon's own -- the bright part its breath, the striped part its strength. */
#foe {
  position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  column-gap: 6px;
  row-gap: 3px;
  padding: 5px 9px 7px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(40, 14, 10, 0.62), rgba(20, 6, 4, 0.5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 14px rgba(0, 0, 0, 0.3);
  color: #fff1ea;
  font: 800 11.5px/1 var(--hud-font);
  letter-spacing: 0.02em;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  transition: opacity 400ms ease;
}
#foe[hidden] { display: none; }
#foe.fading { opacity: 0; }
#foe .state { font-style: normal; font-weight: 700; color: #ffd08a; }
#foe.beaten .state { color: #9ff0b8; }
#foe .bar {
  grid-column: 1 / 3;
  position: relative;
  display: block;
  width: 96px;
  height: 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
#foe .fill, #foe .pending { position: absolute; inset: 0; border-radius: inherit; transform-origin: left center; transition: transform 200ms ease-out; }
#foe .fill { background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%), linear-gradient(90deg, #ffb86b, #ff5a4a); }
#foe .pending { background: repeating-linear-gradient(115deg, rgba(255, 150, 120, 0.45) 0 3px, rgba(255, 150, 120, 0.18) 3px 6px); }
#foe.winded .fill { filter: saturate(0.6); }
#foe.winded .bar { animation: blink 800ms ease-in-out infinite; }
#foe.hit { animation: foe-hit 300ms ease-out; }
@keyframes foe-hit { 30% { transform: translate(-50%, -100%) scale(1.18); } }

/* A new stage of life: a banner with rays of light behind it, the stage's name coming up
   big, the row of stages with the new one lighting up. */
#milestone {
  position: fixed;
  z-index: 3;
  left: 50%;
  top: 24%;
  width: min(620px, calc(100vw - 32px));
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  color: #fff8e8;
  font-family: var(--hud-font);
  text-shadow: 0 2px 18px rgba(40, 20, 0, 0.55);
}
#milestone[hidden] { display: none; }
#milestone .rays {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 46% 26% at 50% 50%, rgba(6, 18, 20, 0.55), rgba(6, 18, 20, 0.25) 60%, transparent 100%),
    radial-gradient(circle, rgba(255, 210, 120, 0.2) 0 20%, rgba(255, 200, 110, 0.08) 38%, transparent 62%),
    repeating-conic-gradient(from 0deg, rgba(255, 226, 150, 0.2) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 66%);
  mask: radial-gradient(circle, #000 0 30%, transparent 66%);
  z-index: -1;
  animation: rays-in 900ms cubic-bezier(0.2, 1.4, 0.4, 1) both, rays-turn 14s linear infinite;
}
#milestone .kicker {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffd98a;
  animation: rise-in 700ms ease-out 150ms both;
}
#milestone .title {
  margin: 4px 0 0;
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, #fffbe6 15%, #ffcf5c 60%, #f08a1a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 3px rgba(50, 20, 0, 0.85)) drop-shadow(0 0 18px rgba(255, 170, 60, 0.5));
  animation: pop-in 900ms cubic-bezier(0.2, 1.6, 0.35, 1) 250ms both;
}
#milestone .size { margin: 6px 0 0; font-size: 15px; font-weight: 700; opacity: 0.85; animation: rise-in 700ms ease-out 650ms both; }
#milestone .dots { display: flex; justify-content: center; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; animation: rise-in 700ms ease-out 800ms both; }
#milestone .dots li { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255, 240, 210, 0.5); }
#milestone .dots li.phase { margin-left: 6px; }
#milestone .dots li.done { background: rgba(255, 220, 150, 0.8); box-shadow: none; }
#milestone .dots li.now {
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, #ffe08a 45%, #f59a1f 100%);
  box-shadow: 0 0 14px rgba(255, 200, 90, 0.95);
  animation: dot-pop 800ms cubic-bezier(0.2, 1.8, 0.4, 1) 1100ms both;
}
#milestone .line { margin: 14px auto 0; max-width: 32em; font-size: 16px; font-weight: 600; line-height: 1.5; opacity: 0.92; animation: rise-in 700ms ease-out 1300ms both; }
#milestone.leaving { transition: opacity 1200ms ease, transform 1200ms ease; opacity: 0; transform: translate(-50%, -58%); }
@keyframes pop-in { 0% { transform: scale(0.3); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes rise-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rays-in { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rays-turn { to { rotate: 360deg; } }
@keyframes dot-pop { 0% { transform: scale(0.2); } 100% { transform: scale(1.5); } }
/* The edges of the view glow warm for a moment. */
#glow {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, rgba(255, 230, 170, 0.12) 0 25%, transparent 45%, rgba(255, 180, 80, 0.32) 100%);
  opacity: 0;
  transition: opacity 2.4s ease;
}
#glow.on { opacity: 1; transition-duration: 300ms; }
#toast .title { font: 800 clamp(28px, 4.4vw, 48px)/1.1 var(--hud-font); letter-spacing: 0.02em; margin: 0; }
#toast .line { font: 600 16px/1.5 var(--hud-font); margin: 10px auto 0; max-width: 34em; opacity: 0.9; }

#hint {
  position: fixed;
  z-index: 2;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  max-width: min(640px, calc(100vw - 32px));
  padding: 10px 18px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(10, 40, 48, 0.7), rgba(4, 20, 26, 0.6));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 24px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #eef8f4;
  font: 600 14px/1.55 var(--hud-font);
  text-align: center;
  pointer-events: none;
  transition: opacity 900ms ease;
}
#hint.fading { opacity: 0; }
/* A story or a fact: set apart from the tips by a small kicker and a warmer, quieter tone. */
#hint.lore {
  max-width: min(600px, calc(100vw - 32px));
  padding: 12px 20px 13px;
  background: linear-gradient(160deg, rgba(38, 32, 16, 0.66), rgba(14, 22, 20, 0.62));
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.16), 0 6px 24px rgba(0, 0, 0, 0.25);
  color: #f7f1e3;
  font-weight: 500;
  font-size: 14.5px;
}
#hint.lore .kicker {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffd98a;
}
#hint kbd { font: inherit; font-weight: 800; padding: 1px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25); }
#hint .glow { color: #ffd98a; font-weight: 800; text-shadow: 0 0 8px rgba(255, 190, 90, 0.7); }

/* The loading number, on the loading line and on the title card's button (intro.js): its
   figures all equally wide, and room kept after it for "100 %", so the words before it stand
   still while it counts. */
.percent { display: inline-grid; font-variant-numeric: tabular-nums; }
.percent > * { grid-area: 1 / 1; text-align: left; }
.percent .room { visibility: hidden; }

/* The title card, which is also the pause (intro.js): the title; the start, with the saved
   stage and "new game" in one quiet line under it; the settings, each row a label and its
   control; the keys, small; GitHub and the version at the foot. At the start as in the
   pause the river stays in sight behind it, neither blurred nor darkened, and the buttons in
   the corner can be used; only the card itself takes clicks. On a phone (?phone) it only
   says the game wants a computer. All of it is laid out here, in the page, so the card goes
   up as it is meant to look from its first frame. */
#intro {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 16px;
  pointer-events: none;
  color: #eef8f4;
  font-family: var(--hud-font);
  transition: opacity 500ms ease;
}
#intro[hidden] { display: none; }
#intro.leaving { opacity: 0; pointer-events: none; }
#intro .card {
  box-sizing: border-box;
  width: min(34em, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 28px 24px 20px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgb(14, 52, 60), rgb(5, 24, 30));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 20px 60px rgba(0, 0, 0, 0.45);
  text-align: center;
  pointer-events: auto;
}
/* The kicker only in the pause, and then the title in one smaller line; the line about the
   game only on the card the game opens with. */
#intro .kicker { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8fe3c0; }
#intro h1 { margin: 0; font-size: clamp(32px, 6vw, 44px); font-weight: 900; letter-spacing: 0.01em; line-height: 1.05; text-shadow: 0 2px 20px rgba(120, 230, 200, 0.25); }
#intro.paused h1 { font-size: clamp(24px, 4.5vw, 30px); }
#intro .lead { max-width: 28em; margin: 12px auto 0; font-size: 15px; font-weight: 600; line-height: 1.45; opacity: 0.85; text-wrap: balance; }
#intro.paused .lead { display: none; }
#intro kbd { font: inherit; font-weight: 800; font-size: 12px; padding: 2px 8px; border-radius: 7px; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.3); }
#intro button {
  min-width: 220px;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  font: 800 18px/1 var(--hud-font);
  color: #06232a;
  background: linear-gradient(180deg, #b6f7a0, #3fd0a0);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.5), 0 8px 24px rgba(60, 210, 160, 0.35);
  cursor: pointer;
  transition: transform 150ms ease, filter 200ms ease;
}
#intro button:hover:not(:disabled) { transform: translateY(-1px) scale(1.03); }
#intro button:focus-visible { outline: 3px solid #ffd98a; outline-offset: 3px; }
#intro button:disabled { cursor: progress; filter: grayscale(0.7) brightness(0.8); }

/* The start, as wide as the card; under it the saved stage and the way to start afresh, one
   quiet line (two only while "new game" asks to be sure). */
#intro .primary { margin-top: 24px; }
#intro #intro-start { position: relative; width: 100%; min-width: 0; height: 52px; padding: 0 24px; }
/* (Its size fixed, the button is laid out on its own: a new number costs the page no layout
   beyond it, while the load pauses to show it.) */
#intro-start.loading { contain: strict; }
#intro #intro-start:hover:not(:disabled) { transform: translateY(-1px); }
/* While the river is built (intro.js): how far it has come, and a thin line along the foot of
   the button filling up with it. The line glides from one number to the next on its own, as
   the page may be busy in between. */
#intro-start .rail { position: absolute; left: 30px; right: 30px; bottom: 8px; height: 3px; border-radius: 2px; background: rgba(6, 35, 42, 0.18); overflow: hidden; }
#intro-start .rail i { display: block; height: 100%; border-radius: inherit; background: rgba(6, 35, 42, 0.62); transform: scaleX(0); transform-origin: left; transition: transform 400ms linear; }
#intro-start kbd { margin-left: 4px; vertical-align: 2px; background: rgba(6, 35, 42, 0.14); box-shadow: inset 0 -2px 0 rgba(6, 35, 42, 0.2); }
#intro .sub { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 16px; margin: 0; font-size: 12.5px; font-weight: 600; }
#intro .sub > * { margin: 8px 0 0; }
#intro .status { opacity: 0.65; }
#intro .status:empty { display: none; }
#intro button.quiet { min-width: 0; padding: 0; font: inherit; color: inherit; background: none; box-shadow: none; opacity: 0.65; text-decoration: underline; text-underline-offset: 3px; }
#intro button.quiet:hover { opacity: 1; transform: none; }
#intro button.quiet[hidden] { display: none; }
/* An extension's panel under the start (index.html); with none, the place takes no room. */
#intro .extension { margin-top: 16px; }
#intro .extension:empty { display: none; }

/* The settings: a label on the left, its control on the right, every row as high as a row
   of buttons. The rows themselves take no box (each is only its label and its control), so
   the labels line up in one column however many rows there are. */
#intro .settings { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 8px 16px; margin-top: 24px; text-align: left; }
#intro .settings .row { display: contents; }
#intro .settings .label { margin: 0; font-size: 12px; font-weight: 700; opacity: 0.6; }
#intro .settings label.label { cursor: pointer; }
/* The rows of buttons: the graphics steps (intro.js builds them, the same control as in the
   panel at G, only named here), the languages, and any row an extension adds (.seg). */
#intro .settings :is(.seg, .quality-picker .options) { display: flex; gap: 2px; margin: 0; padding: 3px; border-radius: 11px; background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
#intro .settings :is(.seg, .quality-picker .options) button { position: relative; display: flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: max-content; height: 30px; margin: 0; padding: 0 8px; border: 0; border-radius: 8px; font: 700 12.5px/1 var(--hud-font); color: inherit; background: none; box-shadow: none; opacity: 0.7; transform: none; filter: none; white-space: nowrap; cursor: pointer; }
#intro .settings :is(.seg, .quality-picker .options) button b { font: inherit; }
#intro .settings :is(.seg, .quality-picker .options) button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); opacity: 1; transform: none; }
#intro .settings :is(.seg, .quality-picker .options) button:focus-visible { outline: 2px solid #ffd98a; outline-offset: 1px; }
#intro .settings :is(.seg, .quality-picker .options) button[aria-pressed="true"] { background: rgba(160, 235, 200, 0.2); box-shadow: inset 0 0 0 1px rgba(160, 235, 200, 0.55); opacity: 1; cursor: default; }
/* The graphics steps by name only: what each does, and that a switch reloads, is in its
   tooltip. The step recommended for this kind of device has a small star in its corner
   (the word stays for a screen reader). */
#intro .quality-picker .head,
#intro .quality-picker .about,
#intro .quality-picker .option small { display: none; }
#intro .quality-picker .tag { position: absolute; top: 3px; right: 4px; left: auto; padding: 0; font-size: 0; line-height: 1; background: none; box-shadow: none; transform: none; }
#intro .quality-picker .tag::after { content: "★"; font-size: 8px; color: #ffd98a; }
/* Picked, a step loads the game afresh: it lights up, the others wait. */
#intro .settings .quality-picker.busy .option:not(.picked) { opacity: 0.35; cursor: progress; }
#intro .settings .quality-picker.busy .option.picked { opacity: 1; color: #06232a; background: linear-gradient(180deg, #b6f7a0, #3fd0a0); box-shadow: none; animation: intro-busy 700ms ease-in-out infinite alternate; }
@keyframes intro-busy { to { filter: brightness(1.15); } }
/* Vegan mode: its switch, as high as the other rows; what it means is the row's tooltip. The
   checkbox itself lies over the switch, unseen, and takes the clicks. */
#intro .vegan { position: relative; display: flex; align-items: center; justify-self: start; height: 36px; cursor: pointer; }
#intro .vegan input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#intro .vegan .switch { flex: none; position: relative; width: 40px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); transition: background 200ms ease; }
#intro .vegan .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #f3fbf7; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transition: transform 200ms ease; }
#intro .vegan:hover .switch { background: rgba(255, 255, 255, 0.28); }
#intro .vegan input:checked + .switch { background: #5fcf8c; }
#intro .vegan input:checked + .switch::after { transform: translateX(18px); }
#intro .vegan input:focus-visible + .switch { outline: 2px solid #ffd98a; outline-offset: 2px; }

/* The keys: small and quiet, at the bottom; the touch controls instead on a phone or a
   tablet. */
#intro .keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 24px 0 0; padding: 0; list-style: none; font-size: 12px; font-weight: 600; opacity: 0.6; }
#intro .keys li { display: flex; align-items: center; gap: 5px; }
#intro .keys kbd:not(.touch-key) { padding: 1px 5px; border-radius: 5px; font-size: 10.5px; }
#intro .mouse { position: relative; width: 9px; height: 13px; border: 1.5px solid currentColor; border-radius: 5px; }
#intro .mouse::after { content: ""; position: absolute; left: 50%; top: 2px; width: 2px; height: 3px; margin-left: -1px; border-radius: 1px; background: currentColor; }
#habitat #intro .keys kbd.touch-key { width: 18px; height: 18px; vertical-align: 0; background-size: 12px 12px; }
#habitat #intro .keys kbd.touch-key.bite { background-size: 14px 14px; }
#intro .touch-keys { display: none; }
.touch #intro .keys:not(.touch-keys) { display: none; }
.touch #intro .touch-keys { display: flex; }

/* GitHub and the version, one line at the foot. */
#intro .foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 8px; margin: 16px 0 0; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; opacity: 0.5; }
#intro .links a { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
#intro .links a:hover { text-decoration: underline; }
#intro .links svg { width: 12px; height: 12px; fill: currentColor; }
#intro .version::before { content: "·"; margin-right: 8px; }
#intro .version:empty { display: none; }

/* On a phone (?phone): the note and a way to copy the link, the languages, the foot. */
#intro .for-phone { display: none; }
#habitat #intro.phone .for-desktop { display: none; }
#intro.phone .for-phone { display: block; margin-top: 20px; }
#intro .phone-note { margin: 0 auto 20px; font-size: 16px; font-weight: 700; line-height: 1.5; }

/* Narrow: each label over its row, and the buttons in a row as wide as their words need
   (five languages side by side leave no room for equal widths). */
@media (max-width: 560px) {
  #intro .card { padding: 20px 16px 16px; }
  #intro .settings { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  #intro .settings .row:not(:first-child) > .label { margin-top: 8px; }
  #intro .settings :is(.seg, .quality-picker .options) button { flex: 1 1 auto; min-width: 0; padding: 0 6px; }
}
/* Touch: sideways on a phone the card is short, so everything sits a little closer, and the
   title keeps to one line. */
.touch #intro .card { max-height: calc(100dvh - 24px); padding: 18px 20px 14px; }
.touch #intro h1 { font-size: clamp(24px, 4vw, 32px); }
.touch #intro.paused h1 { font-size: 24px; }
.touch #intro .lead { margin-top: 8px; font-size: 14px; }
.touch #intro .primary,
.touch #intro .settings,
.touch #intro .keys { margin-top: 16px; }
.touch #intro #intro-start { height: 46px; }
/* Sideways on a phone the corner buttons' labels reach in from the right: the card keeps
   clear of them as far as the screen allows, its buttons as wide as their words. And it is
   only as high as the screen: tighter still, so that the whole card fits without scrolling
   (the rows a little lower, all of them alike). */
@media (max-height: 500px) {
  .touch #intro .card { width: clamp(400px, 100vw - 392px, 34em); padding: 14px 18px 12px; }
  .touch #intro .kicker { margin-bottom: 4px; }
  .touch #intro h1 { font-size: 28px; }
  .touch #intro .lead { margin-top: 6px; font-size: 13.5px; line-height: 1.4; }
  .touch #intro .homescreen { margin-top: 10px; padding: 7px 12px; }
  .touch #intro .primary,
  .touch #intro .settings,
  .touch #intro .keys { margin-top: 12px; }
  .touch #intro #intro-start { height: 44px; }
  .touch #intro .sub > * { margin-top: 6px; }
  .touch #intro .settings { row-gap: 6px; }
  .touch #intro .settings :is(.seg, .quality-picker .options) { padding: 2px; }
  .touch #intro .settings :is(.seg, .quality-picker .options) button { flex: 1 1 auto; min-width: 0; height: 28px; padding: 0 6px; }
  .touch #intro .vegan { height: 32px; }
  .touch #intro .keys { row-gap: 4px; }
  .touch #intro .foot { margin-top: 10px; }
}

/* Fades: a death, a new generation. */
#veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: #020607;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1400ms ease;
}
#veil.dark { opacity: 1; }
#veil.white { background: #e8f4f2; }

/* ?fps: a small frame-rate readout for testing. */
#fps {
  position: fixed;
  right: 10px;
  bottom: 8px;
  z-index: 50;
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.35);
  padding: 4px 7px;
  border-radius: 6px;
  pointer-events: none;
}


/* The spotlight on something found for the first time: a pulsing ring round it and its
   name, following it across the screen (main.js). */
#spot { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 4; transition: opacity 0.2s; }
#spot .ring { position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%; border: 2px solid rgba(255, 236, 170, 0.95); box-shadow: 0 0 18px rgba(255, 220, 130, 0.7), inset 0 0 14px rgba(255, 220, 130, 0.45); animation: spot-pulse 1.1s ease-in-out infinite; }
#spot .label { position: absolute; left: 0; top: 52px; transform: translateX(-50%); white-space: nowrap; font: 600 13px/1.2 system-ui, sans-serif; color: #fff4d6; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); letter-spacing: 0.02em; }
@keyframes spot-pulse { 0%, 100% { transform: scale(0.85); opacity: 0.85; } 50% { transform: scale(1.08); opacity: 1; } }

/* Stories and facts on or off, under the map button. */
#lore-toggle {
  position: fixed;
  top: 172px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #ffd98a;
  background: linear-gradient(160deg, rgba(10, 40, 48, 0.62), rgba(4, 20, 26, 0.5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
  cursor: pointer;
}
#lore-toggle:hover { transform: scale(1.08); }
#lore-toggle:focus-visible { outline: 3px solid #ffd98a; outline-offset: 3px; }
#lore-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#lore-toggle .muted { display: none; }
#lore-toggle[aria-pressed="false"] { color: #b9c7c4; }
#lore-toggle[aria-pressed="false"] .muted { display: inline; }

/* The buttons on the right only while the pointer is free -- paused, or before the swim
   starts; while swimming they cannot be clicked anyway. Each with its name and key beside it. */
#sound-toggle,
#logbook-toggle,
#map-toggle,
#lore-toggle {
  transition: transform 150ms ease, color 200ms ease, opacity 250ms ease, visibility 0s;
}
.locked #sound-toggle,
.locked #logbook-toggle,
.locked #map-toggle,
.locked #lore-toggle {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 250ms ease, visibility 0s linear 250ms;
}
#sound-toggle .label,
#logbook-toggle .label,
#map-toggle .label,
#lore-toggle .label {
  position: absolute;
  right: 54px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 10px;
  background: rgba(4, 20, 26, 0.66);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  color: #eef8f4;
  font: 700 12px/1.3 var(--hud-font);
  pointer-events: none;
}
#sound-toggle .label kbd,
#logbook-toggle .label kbd,
#map-toggle .label kbd,
#lore-toggle .label kbd {
  font: inherit;
  font-weight: 800;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.14);
}

/* ---------------------------------------------------------------------------------------
   Phones and tablets, held sideways (#habitat.touch): the swim and dash buttons, the map
   coming in from the right, the HUD as three rings, the tips up top out of the way. */

/* The touch keys, drawn as the controls they stand for (in the tips and on the card). */
#habitat kbd.touch-key {
  display: inline-block;
  width: 22px;
  height: 22px;
  padding: 0 !important;
  vertical-align: -6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16) center / 15px 15px no-repeat;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5) !important;
}
#habitat kbd.touch-key.bite { background-color: rgba(255, 190, 90, 0.5); background-size: 17px 17px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Cpath fill='white' d='M9 10c2.5-3.8 6.5-5.2 10.2-5.1 2.8.1 5 1.4 6.6 3.3L22 10l3.8 1.8c-1.6 1.9-3.8 3.2-6.6 3.3-3.7.1-7.7-1.3-10.2-5.1ZM9.8 10 5.2 5.8l1.1 4.2-1.1 4.2ZM15 5.7l2.4-2.9 1.6 2.3Z'/%3E%3Ccircle cx='20.8' cy='7.9' r='1.1' fill='%23a0561c'/%3E%3Cpath d='M.8 7.6h2.8M.2 10h3.6M.8 12.4h2.8' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
#habitat kbd.touch-key.look { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v17M8.5 7 12 3.5 15.5 7M8.5 17l3.5 3.5 3.5-3.5'/%3E%3C/svg%3E"); }
#habitat kbd.touch-key.go { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 14.5 12 8.5l6 6'/%3E%3C/svg%3E"); }
#habitat kbd.touch-key.map { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3.5 6.5 9 4l6 2.5 5.5-2.5v13.5L15 20l-6-2.5-5.5 2.5ZM9 4v13.5M15 6.5V20'/%3E%3C/svg%3E"); }
#habitat kbd.touch-key.pause { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8.5 6v12M15.5 6v12'/%3E%3C/svg%3E"); }

#touch { position: fixed; inset: 0; z-index: 3; pointer-events: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#touch[hidden] { display: none; }
#touch .look { position: absolute; inset: 0; pointer-events: auto; touch-action: none; }
#touch button {
  position: absolute;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #f3fbf7;
  background: linear-gradient(160deg, rgba(10, 40, 48, 0.55), rgba(4, 20, 26, 0.45));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 2px rgba(230, 250, 245, 0.22), 0 6px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
#touch button svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#touch button.pressed { transform: scale(0.92); filter: brightness(1.4); }
#touch .go { right: max(22px, env(safe-area-inset-right)); bottom: 22px; width: 70px; height: 70px; }
#touch .go svg { stroke-width: 2.6; }
#touch .bite { right: calc(max(22px, env(safe-area-inset-right)) + 82px); bottom: 30px; width: 56px; height: 56px; background: linear-gradient(160deg, rgba(255, 180, 80, 0.5), rgba(200, 110, 40, 0.4)); }
#touch .bite svg { width: 68%; height: 68%; }
#touch .bite svg .body { fill: currentColor; stroke: none; }
#touch .bite svg .eye { fill: #8a4514; stroke: none; }
#touch .bite svg .wake { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
#touch .pause { top: 14px; right: max(14px, env(safe-area-inset-right)); width: 42px; height: 42px; }
/* Paused: the controls give way to the buttons and a tap anywhere swims on. The map
   stays out of their way (its tab and the swipe are the way to it). */
.touch.paused #touch { display: none; }

/* The corner buttons only while the card is up (at the start or in the pause), as on the
   computer. */
.touch:not(.menu) #sound-toggle,
.touch:not(.menu) #logbook-toggle,
.touch:not(.menu) #map-toggle,
.touch:not(.menu) #lore-toggle { opacity: 0 !important; visibility: hidden; pointer-events: none; }

/* The HUD smaller, the tips at the top, the map half see-through coming in from the right. */
.touch #hud { inset: 10px auto auto max(10px, env(safe-area-inset-left)); }
.touch #watch { zoom: 0.78; }
/* The card as just the three rings; a tap on them opens the full card, as on a computer
   (with the controls under it, so the HUD sits above them), another tap closes it. */
#status .rings { display: none; }
.touch #hud { z-index: 4; }
/* With the card up, the corner buttons and their names over it (there is no pointer to hover). */
.touch.menu #hud { z-index: 6; }
.touch #status { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.touch #status:not(.expanded) { display: block; width: 60px; height: 60px; padding: 3px; border-radius: 50%; }
.touch #status:not(.expanded) > :not(.rings):not(#pops) { display: none; }
.touch #status:not(.expanded) .rings { display: block; width: 54px; height: 54px; overflow: visible; }
.touch #status.expanded { transform-origin: 30px 30px; animation: card-open 220ms ease-out; }
@keyframes card-open { from { opacity: 0; transform: scale(0.5); } }
/* With the card open the tips move over to its right. */
.touch.stats-open #hint { left: calc(max(10px, env(safe-area-inset-left)) + 290px); transform: none; max-width: calc(100vw - max(10px, env(safe-area-inset-left)) - max(14px, env(safe-area-inset-right)) - 360px); }
.touch #pops { left: calc(100% + 6px); bottom: 4px; }
.rings .track { fill: none; stroke: rgba(0, 12, 16, 0.55); stroke-width: 5.5; }
.rings .ring { fill: none; stroke-width: 5.5; stroke-linecap: round; transition: stroke-dasharray 300ms ease-out, stroke 400ms ease; }
.rings .ring.none { stroke-linecap: butt; }
.rings .energy-now { stroke: #ffc24d; }
.rings .energy-reach { stroke: rgba(255, 200, 110, 0.38); }
.rings .growth-now { stroke: #5fdc9c; }
.rings .growth-pending { stroke: rgba(160, 240, 190, 0.35); }
.rings .stomach-now { stroke: #ff8095; }
.rings.yolk .stomach-now { stroke: #ffab52; }
.rings.low .energy-now { stroke: #ff7a4a; }
.rings.reserve .energy-now { stroke: #e2566a; }
.rings.winded .energy-now { animation: ring-blink 900ms ease-in-out infinite; }
@keyframes ring-blink { 50% { stroke: #ff5a4a; opacity: 0.45; } }
.rings.waiting .growth-now { stroke: #ffd98a; animation: wait-glow 1.8s ease-in-out infinite; }
.rings .stage-number { fill: #f3fbf7; font: 800 10px/1 var(--hud-font); text-anchor: middle; dominant-baseline: central; }
.touch #badges { top: 82px; zoom: 0.8; }
.touch #sound-toggle .label kbd, .touch #logbook-toggle .label kbd, .touch #map-toggle .label kbd, .touch #lore-toggle .label kbd { display: none; }
.touch #hint { bottom: auto; top: 10px; max-width: min(46vw, 440px); padding: 7px 12px; font-size: 12px; line-height: 1.45; }
.touch #hint.lore { font-size: 12.5px; }
.touch #hint { z-index: 5; pointer-events: auto; touch-action: none; transition: opacity 900ms ease, translate 250ms ease; -webkit-user-select: none; user-select: none; }
.touch #hint::after { content: ""; display: block; width: 34px; height: 4px; margin: 5px auto -2px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); }
.touch #status { touch-action: manipulation; }
.touch #minimap {
  top: auto;
  right: auto;
  bottom: max(8px, env(safe-area-inset-bottom));
  left: max(8px, env(safe-area-inset-left));
  transform: scale(0.58);
  transform-origin: bottom left;
  opacity: 0.55;
  pointer-events: none;
  animation: none;
}
.touch #scene:focus, .touch #scene:focus-visible { outline: none; }
.touch #toast .title { font-size: clamp(22px, 4vw, 34px); }
.touch #toast .line { font-size: 13px; }

/* Held upright: ask for it sideways. */
#rotate { display: none; }
@media (orientation: portrait) {
  .touch #rotate {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 18px;
    background: #06141a;
    color: #eef8f4;
    font: 700 16px/1.4 var(--hud-font);
    text-align: center;
  }
  .touch #rotate .phone { width: 46px; height: 80px; border: 3px solid currentColor; border-radius: 10px; animation: turn-phone 2.2s ease-in-out infinite; }
}
@keyframes turn-phone { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }

/* On an iPhone or iPad, until it is opened from the home screen: how to get it there. */
#intro .homescreen {
  margin: 16px auto 0;
  max-width: 34em;
  padding: 9px 14px;
  border-radius: 14px;
  background: rgba(255, 217, 138, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 217, 138, 0.3);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}
#intro .homescreen[hidden] { display: none; }
#intro .homescreen b { color: #ffd98a; }
#intro .homescreen svg { width: 16px; height: 16px; vertical-align: -3px; fill: none; stroke: #ffd98a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The brood: which sibling this is and how many of them live, under the stage's name. */
#status .brood { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 8px; margin: -3px 2px 1px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; opacity: 0.85; }
#status .brood[hidden] { display: none; }
#status .brood span { white-space: nowrap; }
#status .brood .who:empty { display: none; }
#status .brood .left { color: #ffd98a; }
#status .brood.fell .left { animation: brood-fell 900ms ease-out; }
@keyframes brood-fell { 0% { color: #ff9a8a; transform: translateY(-2px); } 100% { color: #ffd98a; transform: none; } }
#milestone .siblings { margin: 8px auto 0; font-size: 14px; font-weight: 700; color: #ffd98a; opacity: 0.9; animation: rise-in 700ms ease-out 1500ms both; }
#milestone .siblings:empty { display: none; }

/* The card at the end of a life. */
#lifecard {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 12px;
  background: radial-gradient(ellipse at 50% 40%, rgba(6, 30, 36, 0.55), rgba(2, 8, 10, 0.85));
  color: #eef8f4;
  font-family: var(--hud-font);
  animation: card-in 500ms ease-out;
}
#lifecard[hidden] { display: none; }
#lifecard.leaving { opacity: 0; transition: opacity 350ms ease; }
@keyframes card-in { from { opacity: 0; transform: scale(0.97); } }
#lifecard .card {
  width: min(560px, 100%);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 24px 26px 18px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(17, 63, 74, 0.96), rgba(6, 20, 26, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 24px 70px rgba(0, 0, 0, 0.5);
}
#lifecard .head { display: flex; gap: 16px; align-items: center; }
#lifecard .icon { width: 76px; height: 76px; border-radius: 18px; flex: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }
#lifecard .kicker { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #8fe3c0; }
#lifecard .name { margin: 2px 0 4px; font-size: clamp(24px, 4.5vw, 34px); font-weight: 900; line-height: 1.05; }
#lifecard .cause { margin: 0; font-size: 16px; font-weight: 800; color: #ffb08a; line-height: 1.3; }
#lifecard .cause.home { color: #ffd98a; }
#lifecard .where { margin: 3px 0 0; font-size: 13px; font-weight: 700; opacity: 0.65; }
#lifecard .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; margin: 18px 0 12px; }
#lifecard .stats div { padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); }
#lifecard dt { font-size: 11px; font-weight: 700; opacity: 0.65; }
#lifecard dd { margin: 2px 0 0; font-size: 18px; font-weight: 900; }
#lifecard .siblings { margin: 0 0 14px; font-size: 14px; font-weight: 800; color: #ffd98a; line-height: 1.4; }
#lifecard .go {
  display: block;
  width: 100%;
  padding: 13px 18px;
  border: 0;
  border-radius: 999px;
  font: 800 17px/1.2 var(--hud-font);
  color: #06241c;
  background: linear-gradient(180deg, #b6f5c9, #5fdc9c);
  box-shadow: 0 6px 18px rgba(60, 200, 140, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.15);
  cursor: pointer;
}
#lifecard .go:focus-visible { outline: 3px solid #ffd98a; outline-offset: 3px; }
#lifecard .more { display: flex; gap: 8px; margin-top: 10px; }
#lifecard .more button {
  flex: 1;
  padding: 9px 10px;
  border: 0;
  border-radius: 999px;
  font: 700 13.5px/1.2 var(--hud-font);
  color: #eef8f4;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  cursor: pointer;
}
#lifecard .more button.x { flex: 0 0 48px; font-size: 16px; }
#lifecard .more button:hover { background: rgba(255, 255, 255, 0.16); }
#lifecard .status { min-height: 1em; margin: 8px 0 0; font-size: 12px; font-weight: 700; text-align: center; color: #8fe3c0; }
/* Sideways on a phone: the numbers beside the head, all on one screen. */
@media (max-height: 520px) {
  #lifecard .card { width: min(760px, 100%); padding: 14px 18px 12px; display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 18px; align-items: start; }
  #lifecard .head { grid-column: 1; }
  #lifecard .icon { width: 56px; height: 56px; border-radius: 14px; }
  #lifecard .stats { grid-column: 2; grid-row: 1 / 4; grid-template-columns: repeat(2, 1fr); gap: 6px 8px; margin: 0; }
  #lifecard dd { font-size: 16px; }
  #lifecard .siblings { grid-column: 1; margin: 10px 0 8px; font-size: 13px; }
  #lifecard .go, #lifecard .more, #lifecard .status { grid-column: 1 / 3; }
  #lifecard .go { padding: 10px 16px; margin-top: 8px; }
}

/* Hunters after the fish: arrows on a ring round the middle of the screen. */
#threats { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
#threats .threat {
  position: absolute;
  left: 0;
  top: 0;
  width: 46px;
  margin: -16px 0 0 -23px;
  display: grid;
  justify-items: center;
  opacity: 0;
  color: #ffc24d;
  transition: opacity 250ms ease;
  will-change: transform;
}
#threats .threat:not(.on) { opacity: 0 !important; }
#threats .threat svg { width: 46px; height: 30px; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 10px currentColor); }
#threats .threat .name { margin-top: 2px; font: 800 11px/1 var(--hud-font); letter-spacing: 0.03em; color: #fff4e6; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85); white-space: nowrap; opacity: 0; transition: opacity 300ms ease; }
#threats .threat.hunt { color: #ff5a4a; }
#threats .threat.hunt .name { opacity: 1; }
#threats .threat.coil svg { animation: threat-pulse 260ms ease-in-out infinite alternate; }
@keyframes threat-pulse { from { scale: 1; } to { scale: 1.35; } }

/* The last life's card, from the pause menu (under the other buttons). */
/* Graphics quality (G): opens the panel with the four steps (below). */
#quality-toggle {
  position: fixed;
  top: 224px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #cfe7f0;
  background: linear-gradient(160deg, rgba(10, 40, 48, 0.62), rgba(4, 20, 26, 0.5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
  cursor: pointer;
  transition: transform 150ms ease, opacity 250ms ease, visibility 0s;
}
#quality-toggle:hover { transform: scale(1.08); }
#quality-toggle:focus-visible { outline: 3px solid #ffd98a; outline-offset: 3px; }
#quality-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#quality-toggle .label { position: absolute; right: 54px; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 4px 10px; border-radius: 10px; background: rgba(4, 20, 26, 0.66); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); color: #eef8f4; font: 700 12px/1.3 var(--hud-font); pointer-events: none; }
#quality-toggle .label .value { color: #ffd98a; font-weight: 800; }
#quality-toggle .label kbd { margin-left: 4px; }
.locked #quality-toggle, .touch:not(.menu) #quality-toggle { opacity: 0 !important; visibility: hidden; pointer-events: none; }
.touch #quality-toggle .label kbd { display: none; }
#quality-toggle[aria-expanded="true"] { color: #ffd98a; }
#quality-toggle[aria-expanded="true"] .label { opacity: 0; }

/* While the river is still being built only the card is up: the fish's card, the corner
   buttons and the map come in once they are filled in and work. */
.building #hud,
.building #minimap { opacity: 0 !important; visibility: hidden; pointer-events: none; }

/* The graphics quality (intro.js): the four steps side by side, each with a word on what it
   is for; the one in use lit like the language in use, the one for this kind of device
   tagged "empfohlen"; under them what the step under the pointer or the focus does. So in
   the panel at the graphics button; the card shows the same control by name only (above). */
.quality-picker { text-align: left; font-family: var(--hud-font); }
.quality-picker .head { margin: 0 0 4px; font-size: 12.5px; line-height: 1.4; }
.quality-picker .head b { font-weight: 800; }
.quality-picker .hint { opacity: 0.72; }
.quality-picker .options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding-top: 8px; }
.quality-picker .option {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 3px;
  min-width: 0;
  margin: 0;
  padding: 9px 4px 8px;
  border: 0;
  border-radius: 12px;
  font: 700 13px/1.1 var(--hud-font);
  color: #eef8f4;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transform: none;
  filter: none;
  transition: background 150ms ease, box-shadow 150ms ease, opacity 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.quality-picker .option b { font-size: 13.5px; font-weight: 800; }
.quality-picker .option small { max-width: 100%; font-size: 10.5px; font-weight: 600; line-height: 1.15; text-align: center; overflow-wrap: anywhere; opacity: 0.72; }
.quality-picker .option:hover:not(:disabled) { background: rgba(255, 255, 255, 0.15); transform: none; }
.quality-picker .option:focus-visible { outline: 3px solid #ffd98a; outline-offset: 2px; }
.quality-picker .option[aria-pressed="true"] { background: rgba(160, 235, 200, 0.22); box-shadow: inset 0 0 0 1.5px rgba(160, 235, 200, 0.7); cursor: default; }
.quality-picker .option[aria-pressed="true"] small { opacity: 0.95; }
.quality-picker .tag { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 1px 6px; border-radius: 999px; font: 800 8.5px/1.45 var(--hud-font); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: #ffd98a; background: rgb(11, 42, 50); box-shadow: inset 0 0 0 1px rgba(255, 217, 138, 0.5); }
.quality-picker .about { min-height: 2.8em; margin: 7px 0 0; font-size: 12px; line-height: 1.4; opacity: 0.88; }
.quality-picker.busy .option { cursor: progress; filter: none; opacity: 0.5; }
.quality-picker.busy .option.picked { opacity: 1; color: #06232a; background: linear-gradient(180deg, #b6f7a0, #3fd0a0); box-shadow: none; }
.quality-picker.busy .option.picked small { opacity: 0.9; }
/* The panel, beside the graphics button (placed by main.js). */
#quality-panel {
  position: fixed;
  z-index: 7;
  top: 218px;
  right: 70px;
  width: min(380px, calc(100vw - 88px));
  box-sizing: border-box;
  padding: 10px 14px 10px;
  border-radius: 18px;
  color: #eef8f4;
  font-family: var(--hud-font);
  background: linear-gradient(160deg, rgb(14, 52, 60), rgb(5, 24, 30));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 16px 44px rgba(0, 0, 0, 0.45);
  transform-origin: right top;
  animation: quality-in 160ms ease-out;
}
#quality-panel[hidden] { display: none; }
#quality-panel header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
#quality-panel h2 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #8fe3c0; }
#quality-panel h2 kbd { margin-left: 4px; padding: 1px 6px; border-radius: 5px; font: 800 11px/1.3 var(--hud-font); letter-spacing: 0; color: #eef8f4; background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.3); }
.touch #quality-panel h2 kbd { display: none; }
#quality-panel .close { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; font: 700 18px/1 var(--hud-font); color: inherit; background: rgba(255, 255, 255, 0.08); cursor: pointer; }
#quality-panel .close:hover { background: rgba(255, 255, 255, 0.16); }
#quality-panel .close:focus-visible { outline: 3px solid #ffd98a; outline-offset: 2px; }
@keyframes quality-in { from { opacity: 0; transform: translateX(8px) scale(0.97); } }

#life-toggle {
  position: fixed;
  top: 276px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #ffd98a;
  background: linear-gradient(160deg, rgba(10, 40, 48, 0.62), rgba(4, 20, 26, 0.5));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: auto;
  cursor: pointer;
  transition: transform 150ms ease, opacity 250ms ease, visibility 0s;
}
#life-toggle[hidden] { display: none; }
#life-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#life-toggle .label { position: absolute; right: 54px; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 4px 10px; border-radius: 10px; background: rgba(4, 20, 26, 0.66); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); color: #eef8f4; font: 700 12px/1.3 var(--hud-font); pointer-events: none; }
.locked #life-toggle, .touch:not(.menu) #life-toggle { opacity: 0 !important; visibility: hidden; pointer-events: none; }

/* The salmon fall's leap: a bar beside the fish that swells and slackens while the leap is
   held; let go in the gold at the top. */
#leapmeter { position: fixed; z-index: 3; left: calc(50% + 90px); top: 42%; display: grid; justify-items: center; gap: 6px; pointer-events: none; font: 800 11px/1 var(--hud-font); color: #f3fbf7; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); }
#leapmeter[hidden] { display: none; }
#leapmeter .track { position: relative; width: 16px; height: 120px; border-radius: 10px; overflow: hidden; background: rgba(0, 12, 16, 0.55); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 4px 16px rgba(0, 0, 0, 0.35); }
#leapmeter .sweet { position: absolute; left: 0; right: 0; top: 0; height: 18%; background: rgba(255, 217, 138, 0.45); }
#leapmeter .fill { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform-origin: bottom; transform: scaleY(0); background: linear-gradient(0deg, #5fdc9c, #b6f5c9); }
#leapmeter.sweet .fill { background: linear-gradient(0deg, #ffc24d, #ffe9a8); }
#leapmeter.sweet .track { box-shadow: inset 0 0 0 2px #ffd98a, 0 0 18px rgba(255, 217, 138, 0.7); }
/* The drive: how far to the rapids, and how many are left in the school. */
/* Going on with the run (a spawner on the long way home). */
#journey { position: fixed; z-index: 4; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 999px; background: rgba(0, 14, 18, 0.62); box-shadow: 0 0 0 1.5px rgba(255, 217, 138, 0.55), 0 4px 18px rgba(0, 0, 0, 0.3); color: #fff4dd; font: 800 13px/1 var(--hud-font); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); cursor: pointer; white-space: nowrap; animation: journey-in 400ms ease-out; }
#journey[hidden] { display: none; }
#journey:hover { background: rgba(10, 34, 40, 0.75); }
#journey kbd { font: 800 11px/1 var(--hud-font); padding: 3px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.16); color: #fff; }
#habitat.touch #journey { bottom: max(12px, env(safe-area-inset-bottom)); padding: 11px 16px; font-size: 12px; }
#habitat.touch #journey kbd { display: none; }
@keyframes journey-in { from { opacity: 0; transform: translate(-50%, 8px); } }
/* The scent of home: how strong, and whether it grows the way the fish swims. */
#scentbar { position: fixed; z-index: 3; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(0, 14, 18, 0.55); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3); pointer-events: none; font: 800 12px/1 var(--hud-font); color: #f3fbf7; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); white-space: nowrap; }
#scentbar[hidden] { display: none; }
#scentbar .track { position: relative; width: min(200px, 26vw); height: 8px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.16); }
#scentbar .fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #d9b56a, #fff0b8); transition: transform 300ms linear; }
#scentbar .way { min-width: 70px; color: #d8e6e2; }
#scentbar.warmer .way { color: #ffe29a; }
#scentbar.warmer { box-shadow: 0 0 0 1.5px rgba(255, 217, 138, 0.55), 0 4px 18px rgba(0, 0, 0, 0.3); }
#scentbar.strange .fill { background: linear-gradient(90deg, #8a7fa6, #b9b0cf); }
#scentbar.strange .way { color: #c9bde8; }
#habitat.touch #scentbar { bottom: max(12px, env(safe-area-inset-bottom)); padding: 6px 12px; font-size: 11px; }
/* The finale: by her side until she is ready. */
#reddbar { position: fixed; z-index: 3; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(0, 14, 18, 0.55); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3); pointer-events: none; font: 800 12px/1 var(--hud-font); color: #f3fbf7; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); white-space: nowrap; }
#reddbar[hidden] { display: none; }
#reddbar .track { position: relative; width: min(200px, 26vw); height: 8px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.16); }
#reddbar .fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #ff9a6b, #ffd3b0); }
#reddbar .way { min-width: 90px; color: #ffe6d6; }
#reddbar.rival { background: rgba(80, 8, 8, 0.6); box-shadow: 0 0 0 2px rgba(255, 110, 90, 0.7), 0 4px 18px rgba(0, 0, 0, 0.3); }
#habitat.touch #reddbar { bottom: max(12px, env(safe-area-inset-bottom)); padding: 6px 12px; font-size: 11px; }
/* The bait ball's bar is the drive's; its arrow is green. */
#huntbar { position: fixed; z-index: 3; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(0, 14, 18, 0.55); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3); pointer-events: none; font: 800 12px/1 var(--hud-font); color: #f3fbf7; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); white-space: nowrap; }
#huntbar[hidden] { display: none; }
#huntbar .track { position: relative; width: min(220px, 30vw); height: 8px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.16); }
#huntbar .fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(1); background: linear-gradient(90deg, #ffc86b, #fff0c4); }
#huntbar .count b { font-size: 14px; }
#habitat.touch #huntbar { bottom: max(12px, env(safe-area-inset-bottom)); padding: 6px 12px; font-size: 11px; }
#threats .threat.goal { color: #7fe6a8; }
/* (The hunters' arrows get their opacity from how near the danger is; the way to the ball is always plain.) */
#threats .threat.goal.on { opacity: 1; }
#threats .threat.goal .name { opacity: 1; }
#drivebar { position: fixed; z-index: 3; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(0, 14, 18, 0.55); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3); pointer-events: none; font: 800 12px/1 var(--hud-font); color: #f3fbf7; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); white-space: nowrap; }
#drivebar[hidden] { display: none; }
#drivebar .track { position: relative; width: min(220px, 30vw); height: 8px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.16); }
#drivebar .fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #7fd7ff, #d9f6ff); }
#drivebar .count b { font-size: 14px; }
#drivebar.alone { background: rgba(80, 8, 8, 0.6); box-shadow: 0 0 0 2px rgba(255, 110, 90, 0.7), 0 4px 18px rgba(0, 0, 0, 0.3); }
#habitat.touch #drivebar { bottom: max(12px, env(safe-area-inset-bottom)); padding: 6px 12px; font-size: 11px; }