:root {
  color-scheme: dark;
  --background: #09110f;
  --surface: #14201c;
  --surface-hover: #24352c;
  --text: #eeeede;
  --text-muted: #afbbad;
  --border: #526254;
  --focus: #d8e5b4;
  --scrim: #030906cc;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --text-small: 12px;
  --text-body: 14px;
  --text-brand: 21px;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --control-height: 44px;
  --stroke: 1px;
  --focus-stroke: 2px;
  --motion-duration: 360ms;
  --motion-ease: cubic-bezier(.2,.65,.3,1);
  font-family: var(--font-body);
  font-synthesis: none;
  background: var(--background);
  color: var(--text);
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; color: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
a:focus-visible, button:focus-visible, select:focus-visible, canvas:focus-visible {
  outline: var(--focus-stroke) solid var(--focus);
  outline-offset: var(--space-1);
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
html, body { width: 100%; height: 100%; overflow: hidden; }
body { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
#habitat { position: relative; min-width: 0; min-height: 0; width: 100%; height: 100svh; }
#scene { display: block; width: 100%; height: 100%; touch-action: manipulation; }
#scene:focus-visible { outline-offset: calc(-1 * var(--space-1)); }
.chrome { position: fixed; z-index: 2; left: var(--space-8); right: var(--space-8); display: flex; align-items: center; font-size: var(--text-small); }
nav.chrome { top: var(--space-6); justify-content: space-between; }
.home-link { font-size: var(--text-brand); letter-spacing: -.04em; }
.scene-nav { display: flex; gap: var(--space-6); align-items: center; }
.chrome a, .scene-nav span { min-height: var(--control-height); display: inline-flex; align-items: center; }
.chrome a, .scene-nav span, .home-link { text-shadow: 0 2px 12px var(--background); }
.scene-nav [aria-current] { text-decoration: underline; text-underline-offset: var(--space-2); }
.scene-nav a { color: var(--text-muted); }
.scene-nav a:hover { color: var(--text); }
footer.chrome { bottom: var(--space-6); justify-content: space-between; gap: var(--space-4); }
.buttons, .preferences { display: flex; gap: var(--space-1); align-items: center; background: var(--scrim); padding: var(--space-1); }
.chrome button, .chrome select, #show-controls { min-height: var(--control-height); padding: 0 var(--space-4); border: 0; border-radius: 0; background: transparent; font-size: var(--text-small); }
.chrome .icon-button { width: var(--control-height); padding: 0; display: inline-grid; place-items: center; }
.icon-button svg { width: 20px; height: 20px; }
.chrome button:hover, .chrome select:hover, #show-controls:hover { background: var(--surface-hover); }
.chrome button:active, #show-controls:active { background: var(--surface); }
.chrome select { cursor: pointer; }
.chrome select option { background: var(--background); }
#show-controls { display: none; position: fixed; z-index: 3; bottom: var(--space-6); right: var(--space-8); background: var(--scrim); }
.clean .chrome { visibility: hidden; pointer-events: none; }
.clean #show-controls { display: block; }
.capture #show-controls { display: none; }
[data-motion="host"] .chrome, [data-motion="host"] #show-controls { display: none; }
#loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--background); pointer-events: none; z-index: 1; transition: opacity var(--motion-duration) var(--motion-ease); }
#loading p { font: 400 var(--text-body)/1.5 var(--font-body); color: var(--text-muted); }
#error { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; width: min(440px, calc(100% - var(--space-12))); padding: var(--space-8); background: var(--surface); border: var(--stroke) solid var(--border); font-size: var(--text-body); line-height: 1.6; }
#error a { text-decoration: underline; text-underline-offset: var(--space-1); }
@media (max-width: 600px) {
  .chrome { left: var(--space-4); right: var(--space-4); }
  nav.chrome { top: var(--space-3); }
  .scene-nav { gap: var(--space-4); }
  footer.chrome { left: 50%; right: auto; width: max-content; max-width: calc(100% - var(--space-8)); transform: translateX(-50%); bottom: var(--space-4); align-items: center; flex-direction: column; gap: 0; background: var(--scrim); padding: var(--space-1); }
  .buttons, .preferences { background: transparent; padding: 0; }
  #show-controls { bottom: var(--space-4); right: var(--space-4); }
}
#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 title card: what the game is, how to play it, and the button that starts the swim.
   On a phone it only says the game wants a computer. */
#intro {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(ellipse at 50% 35%, rgba(8, 40, 46, 0.55), rgba(2, 10, 14, 0.88));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: #eef8f4;
  font-family: var(--hud-font);
  transition: opacity 500ms ease;
}
#intro[hidden] { display: none; }
#intro.leaving { opacity: 0; pointer-events: none; }
#intro .card {
  width: min(560px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 30px 32px 26px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(14, 52, 60, 0.92), rgba(5, 24, 30, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 20px 60px rgba(0, 0, 0, 0.45);
  text-align: center;
}
#intro .kicker { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #8fe3c0; }
#intro h1 { margin: 6px 0 10px; font-size: clamp(34px, 7vw, 52px); font-weight: 900; letter-spacing: 0.01em; line-height: 1.05; text-shadow: 0 2px 20px rgba(120, 230, 200, 0.25); }
#intro .lead { margin: 0 auto 18px; max-width: 30em; font-size: 16px; font-weight: 600; line-height: 1.5; opacity: 0.9; }
#intro .keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin: 0 0 22px; padding: 0; list-style: none; font-size: 14px; font-weight: 700; }
#intro .keys li { display: flex; align-items: center; gap: 6px; }
#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 .mouse { width: 12px; height: 18px; border: 2px solid currentColor; border-radius: 7px; position: relative; opacity: 0.9; }
#intro .mouse::after { content: ""; position: absolute; left: 50%; top: 3px; width: 2px; height: 4px; margin-left: -1px; border-radius: 1px; background: currentColor; }
#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); }
#intro button.quiet { display: block; min-width: 0; margin: 10px auto 0; padding: 4px 10px; font: 600 12.5px/1.3 var(--hud-font); border: 0; background: none; box-shadow: none; color: inherit; font-size: 12.5px; font-weight: 600; opacity: 0.6; text-decoration: underline; text-underline-offset: 3px; }
#intro button.quiet:hover { opacity: 0.95; transform: none; }
#intro button.quiet[hidden] { display: none; }
#intro .status { min-height: 1.2em; margin: 12px 0 0; font-size: 13px; font-weight: 700; color: #ffd98a; }
#intro .note { margin: 10px auto 0; max-width: 28em; font-size: 13px; line-height: 1.5; opacity: 0.7; }
/* Vegan mode: a switch on the card, above the start button. */
#intro .vegan { display: flex; align-items: center; gap: 12px; max-width: 30em; margin: 0 auto 18px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); text-align: left; cursor: pointer; font-size: 13px; line-height: 1.4; }
#intro .vegan:hover { background: rgba(255, 255, 255, 0.1); }
#intro .vegan input { position: absolute; opacity: 0; pointer-events: none; }
#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 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; }
#intro .vegan .text span { opacity: 0.75; }
.touch #intro .vegan { margin-bottom: 12px; padding: 8px 12px; font-size: 12px; }
#intro .version { margin: 12px 0 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; opacity: 0.45; }
#intro .for-phone { display: none; }
#intro.phone .for-desktop { display: none; }
#intro.phone .for-phone { display: block; }
#intro .phone-note { margin: 4px auto 20px; font-size: 16px; font-weight: 700; line-height: 1.5; }

/* 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.dim { opacity: 0.55; transition-duration: 400ms; }
#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 language picker on the start card. */
#intro .langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 14px 0 0; }
#intro .langs button { min-width: 0; padding: 5px 12px; border-radius: 999px; font: 700 12px/1 var(--hud-font); color: inherit; background: rgba(255, 255, 255, 0.08); box-shadow: none; opacity: 0.7; }
#intro .langs button[aria-pressed="true"] { background: rgba(160, 235, 200, 0.22); opacity: 1; box-shadow: inset 0 0 0 1px rgba(160, 235, 200, 0.55); }
#intro .langs button:hover { opacity: 1; transform: none; }
/* Where to contribute and give feedback. */
#intro .links { margin: 12px 0 0; font-size: 12.5px; }
#intro .links a { display: inline-flex; align-items: center; gap: 6px; color: inherit; opacity: 0.75; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.25); padding-bottom: 1px; }
#intro .links a:hover { opacity: 1; border-bottom-color: rgba(255, 255, 255, 0.7); }
#intro .links svg { width: 14px; height: 14px; fill: currentColor; }

/* 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. */
#intro .touch-keys,
#intro .touch-note { display: none; }
.touch #intro .keys:not(.touch-keys),
.touch #intro .note:not(.touch-note) { display: none; }
.touch #intro .touch-keys { display: flex; }
.touch #intro .touch-note { display: block; }
.touch #intro .card { max-height: calc(100dvh - 24px); overflow-y: auto; padding-top: 18px; padding-bottom: 18px; }
.touch #intro h1 { font-size: clamp(26px, 6vw, 40px); margin-bottom: 6px; }
.touch #intro .lead { margin-bottom: 10px; font-size: 14px; }
.touch #intro .keys { margin-bottom: 12px; font-size: 12.5px; }

/* 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 in the pause, as on the computer. */
.touch:not(.paused) #sound-toggle,
.touch:not(.paused) #logbook-toggle,
.touch:not(.paused) #map-toggle,
.touch:not(.paused) #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; }
.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: 0 auto 12px;
  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). */
#life-toggle {
  position: fixed;
  top: 224px;
  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(.paused) #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; }
#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; }