/* ==========================================================================
   ZooBreak — design system & component styles
   Static site, zero dependencies. Mobile-first.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* surfaces
     The whole site is a deep, desaturated green. A player can stare at
     a board for a long time, and a dark ground with light type on it
     is far easier on the eyes than white-on-white. The greens stay
     close together in tone so the page reads as one surface rather
     than as a set of panels. */
  --bg: #0f1f19;
  --surface: #162c24;
  --surface-2: #1b352b;
  --surface-soft: #132720;
  --surface-sunk: #0b1914;

  /* ink */
  --ink: #eef4f0;
  --ink-2: #c3d4cb;
  --ink-3: #82988e;

  /* brand */
  --brand: #3ec38d;
  --brand-2: #2ba173;
  --brand-soft: #14332a;
  --brand-line: rgba(62, 195, 141, 0.34);

  /* accents */
  --gold: #e8b45c;
  --gold-soft: #2c2415;
  --gold-line: rgba(232, 180, 92, 0.32);
  --coral: #f07a4f;
  --coral-soft: #33201a;
  --coral-line: rgba(240, 122, 79, 0.3);
  --sky: #6fb0e8;
  --sky-soft: #16283a;

  /* lines */
  --line: rgba(214, 232, 222, 0.12);
  --line-2: rgba(214, 232, 222, 0.2);
  --line-3: rgba(214, 232, 222, 0.36);

  /* geometry */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.28), 0 10px 26px -14px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.3), 0 24px 50px -22px rgba(0, 0, 0, 0.7);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1120px;
  --header-h: 60px;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.22;
  letter-spacing: -0.015em;
  font-weight: 600;
}

h1 {
  font-size: clamp(1.9rem, 5.2vw, 2.9rem);
}
h2 {
  font-size: clamp(1.4rem, 3.4vw, 1.95rem);
}
h3 {
  font-size: clamp(1.08rem, 2.4vw, 1.25rem);
}
h4 {
  font-size: 1rem;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--brand-2);
  text-decoration-color: var(--brand-line);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--brand);
}

img,
svg {
  max-width: 100%;
}

ul,
ol {
  margin: 0 0 1em;
  padding-left: 1.25em;
}

li {
  margin-bottom: 0.4em;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2rem 0;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 18px;
}

.wrap-narrow {
  max-width: 760px;
}

main {
  padding: 28px 0 56px;
}

main#game {
  padding: 12px 0 26px;
}

.section {
  padding: 34px 0;
}

.section + .section {
  border-top: 1px solid var(--line);
}

.stack > * + * {
  margin-top: 14px;
}

.center {
  text-align: center;
}

.lede {
  font-size: clamp(1.02rem, 2.6vw, 1.16rem);
  color: var(--ink-2);
  max-width: 62ch;
}

.muted {
  color: var(--ink-3);
  font-size: 0.9rem;
}

.kicker {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-2);
  margin-bottom: 10px;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.spread {
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   4. Header & navigation (pure CSS mobile menu, no JS)
   -------------------------------------------------------------------------- */
.site-header {
  /* The header used to be pinned to the top of the window. On a phone
     that ate a strip of the screen the whole time, and on the game page
     it pushed the board down every time it reappeared. It sits in the
     normal flow now and scrolls away like any other content. */
  position: relative;
  z-index: 60;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  padding-top: var(--safe-t);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.brand-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
}

.nav-toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.nav-burger {
  margin-left: auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  background: var(--surface);
}

.nav-burger span {
  display: block;
  width: 17px;
  height: 1.8px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav-links a {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}

.nav-links a:hover {
  background: var(--surface);
  color: var(--ink);
}

.nav-links a[aria-current="page"] {
  color: var(--brand);
  background: var(--brand-soft);
}

/* The nav's own link rule is more specific than the shared button rule,
   so the call to action needs a rule of its own to keep its white
   type on the green fill. */
.nav-links a.nav-cta {
  margin-left: 6px;
  color: #fff;
}

.nav-links a.nav-cta:hover {
  background: #1a6b4b;
  border-color: #1a6b4b;
  color: #fff;
}

@media (max-width: 860px) {
  .nav-burger {
    display: flex;
  }
  .nav-links {
    position: absolute;
    top: calc(var(--header-h) + var(--safe-t));
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 10px 18px 16px;
    box-shadow: var(--shadow);
    display: none;
  }
  .nav-links a {
    padding: 11px 12px;
    font-size: 1rem;
  }
  .nav-links .btn {
    margin-top: 8px;
    text-align: center;
  }
  .nav-toggle:checked ~ .nav-links {
    display: flex;
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) {
    transform: translateY(5.8px) rotate(45deg);
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) {
    transform: translateY(-5.8px) rotate(-45deg);
  }
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover {
  background: var(--surface-soft);
  border-color: var(--line-3);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: #1f7d57;
  border-color: #1f7d57;
  color: #fff;
}

.btn-primary:hover {
  background: #1a6b4b;
  border-color: #1a6b4b;
  color: #fff;
}

.btn-gold {
  background: #a8700f;
  border-color: #a8700f;
  color: #fff;
}

.btn-gold:hover {
  background: #9c640a;
  border-color: #9c640a;
  color: #fff;
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-2);
}

.btn-ghost:hover {
  background: var(--surface);
  color: var(--ink);
}

.btn-sm {
  padding: 8px 14px;
  font-size: 0.87rem;
  border-radius: var(--r-sm);
}

.btn-lg {
  padding: 14px 26px;
  font-size: 1.02rem;
}

.btn-block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   6. Cards, badges, chips
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px 22px;
}

.card-tight {
  padding: 15px 16px;
}

.card h3 {
  margin-bottom: 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--surface-sunk);
  color: var(--ink-2);
  white-space: nowrap;
}

.badge-brand {
  background: var(--brand-soft);
  color: var(--brand-2);
}

.badge-gold {
  background: var(--gold-soft);
  color: var(--gold);
}

.badge-coral {
  background: var(--coral-soft);
  color: var(--coral);
}

.badge-sky {
  background: var(--sky-soft);
  color: var(--sky);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  padding: 40px 0 34px;
}

.hero-grid {
  display: grid;
  gap: 34px;
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 52px;
  }
  .hero {
    padding: 64px 0 54px;
  }
}

.hero h1 {
  margin-bottom: 14px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 18px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 0.88rem;
  color: var(--ink-3);
}

.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   8. Steps / features
   -------------------------------------------------------------------------- */
.step {
  position: relative;
  padding-top: 4px;
}

.step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 11px;
}

.icon-tile {
  width: 44px;
  height: 44px;
  border-radius: var(--r);
  background: var(--brand-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.icon-tile svg {
  width: 24px;
  height: 24px;
}

.icon-tile.gold {
  background: var(--gold-soft);
}

.icon-tile.coral {
  background: var(--coral-soft);
}

.icon-tile.sky {
  background: var(--sky-soft);
}

/* --------------------------------------------------------------------------
   9. Biome showcase
   -------------------------------------------------------------------------- */
.biome {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.biome-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.biome-head h3 {
  margin: 0 0 2px;
  font-size: 1.02rem;
}

.biome-animals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 12px;
  background: var(--surface-sunk);
}

.biome-animals svg {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  max-width: 54px;
}

/* --------------------------------------------------------------------------
   10. Game page
   -------------------------------------------------------------------------- */
.game-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.game-topbar {
  width: 100%;
  max-width: 620px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}

.game-topbar .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.game-topbar .spacer {
  margin-left: auto;
}

/* --- compact header row --- */
.game-head {
  width: 100%;
  max-width: 620px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.game-head h1 {
  font-size: 1.05rem;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

.game-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.meta-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.7rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.meta-pill b {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}

.meta-exit {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--line);
  text-decoration: none;
}

.meta-exit:hover {
  color: var(--ink);
  border-color: var(--line-3);
}

.meta-exit svg {
  width: 13px;
  height: 13px;
}

/* --- board --- */
.board-frame {
  position: relative;
  width: var(--board-size, 380px);
  height: var(--board-size, 380px);
  flex: 0 0 auto;
}

/* The board is a cage: a dark frame with bars over a straw floor. The
   animals inside are plain tiles, so the cage reads as the container
   rather than competing with the animals for attention. */
.board {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--r-lg);
  /* The inside of the cage is dark, the way the rest of the site is.
     The animals on it are pale cards, so they read as lit objects
     standing out of the dark rather than as part of the floor. */
  background: linear-gradient(170deg, #1c3830 0%, #112720 100%);
  border: 2px solid #3c6152;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.45),
    inset 0 -2px 0 rgba(214, 232, 222, 0.12),
    0 3px 0 #24453a,
    0 10px 22px -12px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* Cage bars drawn over the floor, behind the animals. */
.board::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(214, 232, 222, 0.1) 0 2px,
    transparent 2px 44px
  );
}

.board::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(
    rgba(214, 232, 222, 0.06) 1px,
    transparent 1px
  );
  background-size: 15px 15px;
}

/* Tiles are small wooden cards. The lighting is what tells the player
   what they can reach: a tile with nothing on top of it catches the light,
   while a buried tile sits in shadow. That contrast is the whole reason
   the pile feels three-dimensional. */
/* Every tile casts a shadow, and the deeper ones cast a bigger one, so
   the pile reads as a stack with real height rather than a flat collage. */
.tile {
  position: absolute;
  /* Tiles are positioned as a percentage of the board so they always track
     the board size exactly, with no JS synchronisation to get out of step. */
  width: calc(var(--sx) * 100%);
  height: calc(var(--sy) * 100%);
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100%);
  border-radius: 14%;
  /* The tile face is painted with a background-image layer so the animal
     artwork can share the same property without the shorthand wiping it
     out. The layer order puts the artwork on top of the face. */
  background-color: #f1eee4;
  background-image:
    var(--animal, none),
    linear-gradient(168deg, #ffffff 0%, #f4f1e9 58%, #e7e2d5 100%);
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: 74% 74%, auto;
  border: 1px solid rgba(120, 104, 78, 0.55);
  /* The drop shadow deepens with the tile's height in the pile, so a
     tall stack reads as a tall stack. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 3px rgba(120, 104, 78, 0.16),
    0 2px 3px rgba(48, 38, 24, 0.3),
    0 calc(2px + var(--lift, 1) * 0.35px)
      calc(6px + var(--lift, 1) * 0.75px)
      calc(-3px - var(--lift, 1) * 0.25px)
      rgba(40, 32, 20, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  /* The paint order comes from the pile: a tile that rests on top of
     another is drawn above it. It arrives as a custom property so the
     hover and hint states can still lift a tile above its neighbours. */
  z-index: var(--z, 1);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, opacity 0.15s ease, filter 0.2s ease,
    box-shadow 0.2s ease;
}

/* A soft dark disc behind the animal. Pale species — a white rabbit, a
   grey koala, a cream bird — disappear against the pale tile face without
   it, and the disc gives every animal a readable silhouette without
   changing the artwork itself. */
.tile::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 42%,
    rgba(38, 30, 20, 0.18) 0%,
    rgba(38, 30, 20, 0.1) 56%,
    rgba(38, 30, 20, 0) 76%
  );
  pointer-events: none;
  z-index: 1;
}

/* A free tile catches the light: brighter, with a warm rim and a soft
   glow, so the tappable ones are obvious at a glance even on a deep
   pile where most tiles are buried. */
.tile:not(.locked) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 3px rgba(120, 104, 78, 0.14),
    0 2px 3px rgba(48, 38, 24, 0.28),
    0 0 0 2px rgba(255, 255, 255, 0.98),
    0 0 16px -1px rgba(255, 252, 235, 0.95),
    0 8px 18px -5px rgba(48, 38, 24, 0.45);
  filter: brightness(1.22) saturate(1.14);
}

/* A buried tile is dimmed rather than greyed out, so the animal is still
   recognisable but clearly out of reach. */
/* A buried tile is dimmed but never blacked out. The player still has to
   be able to recognise which animal is down there, because that is what
   tells them what to dig for. */
.tile.locked {
  filter: brightness(0.62) saturate(0.5);
  opacity: 0.95;
  cursor: not-allowed;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(48, 38, 24, 0.32);
}

/* A buried animal needs contrast, not blackness, to stay readable. The
   shadow is cool rather than black, which reads as depth rather than as
   a disabled control. */
.tile.locked::after {
  background: radial-gradient(
    circle at 50% 42%,
    rgba(38, 48, 60, 0.3) 0%,
    rgba(38, 48, 60, 0.18) 58%,
    rgba(38, 48, 60, 0) 78%
  );
}

.tile:hover:not(.locked) {
  transform: translateY(-3px) scale(1.03);
  z-index: calc(var(--z, 1) + 400);
}

.tile.hint {
  animation: hintPulse 1s ease-in-out infinite;
  z-index: calc(var(--z, 1) + 500);
}

.tile.hint svg {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.95));
}

@keyframes hintPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(29, 158, 117, 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(29, 158, 117, 0);
  }
}

.tile.matched {
  animation: tileFree 0.42s cubic-bezier(0.3, 0.9, 0.4, 1) forwards;
}

@keyframes tileFree {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.22);
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

.tile.gone {
  display: none;
}

.escape-flyer {
  position: absolute;
  z-index: 999;
  pointer-events: none;
  width: 11%;
  height: 11%;
  margin-left: -5.5%;
  margin-top: -5.5%;
  will-change: transform, opacity;
}

.escape-flyer {
  background-image: var(--animal, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* --- blind cages --- */
.blind-row {
  display: flex;
  gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* The deep cage: a small barred box. The animal at the front is the one
   that comes out next, and the badge shows how many are still down
   there. The bars are what make it read as a cage rather than as another
   tile. */
.blind-cage {
  width: 40px;
  height: 46px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(214, 232, 222, 0.12) 0 1.5px,
      transparent 1.5px 9px
    ),
    linear-gradient(168deg, #1e3b32 0%, #132a23 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 3px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.blind-cage:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.5);
}

.blind-cage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 6px,
    rgba(21, 37, 32, 0.16) 6px 7px
  );
  opacity: 0.85;
}

.blind-cage .blind-animal {
  background-image: var(--animal, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 76% 76%;
  width: 29px;
  height: 29px;
  position: relative;
  z-index: 1;
}

.blind-cage .blind-depth {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: rgba(21, 37, 32, 0.72);
  color: #f6f4ee;
  font-size: 0.58rem;
  line-height: 14px;
  font-weight: 700;
  text-align: center;
  z-index: 3;
}

/* --- slot (holding pen) --- */
.pen {
  width: 100%;
  max-width: 620px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 8px 10px;
  box-shadow: var(--shadow-sm);
}

/* The holding pen and the deep cages sit side by side. Both are places
   animals wait outside the pile, so they belong together, and keeping
   them on one row saves the vertical space the board needs. */
.pen-slots {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.pen-slot {
  flex: 1 1 0;
  min-width: 0;
  max-width: 62px;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-3);
  /* The long form of background is used throughout, because the shorthand
     resets background-image and would wipe the animal artwork out. */
  background-color: var(--surface-sunk);
  background-image: var(--animal, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 74% 74%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.pen-slot.filled {
  border-style: solid;
  border-color: var(--line-2);
  background-color: var(--surface);
  /* The artwork has to be restated here, or the animal vanishes from the
     pen the moment it lands in it. */
  background-image: var(--animal, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 74% 74%;
}

.pen-slot .pair-flag {
  position: absolute;
  top: -6px;
  right: -4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pen-slot.danger {
  border-color: var(--coral);
  /* The long form again: the shorthand would reset background-image and
     wipe the animal artwork out of every filled slot the moment the pen
     got close to full — which is exactly when the player most needs to
     see what is in it. */
  background-color: var(--coral-soft);
}

/* --- toolbar --- */
/* Seven tools on one row. On a narrow phone that means each button is
   about forty pixels wide, which is still a comfortable tap target, and
   keeping the row single keeps the whole game on one screen. */
.toolbar {
  width: 100%;
  max-width: 620px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 7px 2px;
  min-width: 0;
  border-radius: var(--r);
  border: 1px solid var(--line-2);
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-2);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
  min-width: 0;
}

.tool > span:not(.tool-count) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool:hover:not(:disabled) {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  color: var(--brand-2);
}

.tool:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.tool svg {
  width: 21px;
  height: 21px;
}

.tool .tool-count {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ink-3);
}

.tool .tool-count.warn {
  color: var(--coral);
}

/* --- progress bar --- */
.progress {
  width: 100%;
  max-width: 620px;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-sunk);
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--brand);
  transition: width 0.35s ease;
}

/* --------------------------------------------------------------------------
   11. Overlay / modal
   -------------------------------------------------------------------------- */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(21, 37, 32, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.overlay[hidden] {
  display: none;
}

.modal {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 26px 24px 22px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: modalIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
}

.modal-art {
  width: 84px;
  height: 84px;
  margin: 0 auto 12px;
}

.modal h2 {
  margin-bottom: 6px;
}

.modal p {
  color: var(--ink-2);
  font-size: 0.95rem;
}

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 18px;
}

.stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 10px;
}

.star {
  width: 30px;
  height: 30px;
}

/* --------------------------------------------------------------------------
   12. Toast
   -------------------------------------------------------------------------- */
.toast-wrap {
  position: fixed;
  left: 50%;
  bottom: calc(20px + var(--safe-b));
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  width: min(92vw, 420px);
}

.toast {
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  animation: toastIn 0.25s ease;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
}

.toast svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.toast.good {
  background: var(--brand-2);
}

.toast.warn {
  background: var(--coral);
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* --------------------------------------------------------------------------
   13. Collection / level cards
   -------------------------------------------------------------------------- */
.animal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 14px;
  text-align: center;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.animal-card:hover {
  border-color: var(--line-3);
  transform: translateY(-2px);
}

.animal-card.locked {
  background: var(--surface-sunk);
}

.animal-card.locked svg {
  filter: grayscale(1);
  opacity: 0.3;
}

.animal-art {
  width: 66px;
  height: 66px;
  margin: 0 auto 9px;
  display: block;
}

.animal-name {
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 2px;
}

.animal-sci {
  font-size: 0.76rem;
  font-style: italic;
  color: var(--ink-3);
  margin: 0 0 8px;
  min-height: 1.2em;
}

.animal-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand-2);
  background: var(--brand-soft);
  padding: 3px 10px;
  border-radius: 999px;
}

.animal-count.zero {
  color: var(--ink-3);
  background: var(--surface-sunk);
}

.level-card {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 13px 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.level-card:hover {
  border-color: var(--brand-line);
  transform: translateY(-2px);
  color: inherit;
}

.level-card.locked {
  opacity: 0.55;
}

.level-num {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: var(--r);
  background: var(--brand-soft);
  color: var(--brand-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}

.level-card.locked .level-num {
  background: var(--surface-sunk);
  color: var(--ink-3);
}

.level-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.level-meta strong {
  display: block;
  font-size: 0.98rem;
}

.level-meta span {
  font-size: 0.82rem;
  color: var(--ink-3);
}

.level-stars {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}

.level-stars svg {
  width: 15px;
  height: 15px;
}

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.faq {
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-q {
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 4px;
}

.faq-a {
  color: var(--ink-2);
  font-size: 0.95rem;
  margin: 0 0 14px;
}

.faq-item:last-child .faq-a {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   15. Tables
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  min-width: 460px;
}

th,
td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: 700;
}

tr:last-child td {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 34px 0 calc(30px + var(--safe-b));
  margin-top: 30px;
}

.footer-grid {
  display: grid;
  gap: 26px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr;
  }
}

.footer-grid h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
  margin-bottom: 10px;
}

.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-grid li {
  margin-bottom: 7px;
}

.footer-grid a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.92rem;
}

.footer-grid a:hover {
  color: var(--brand-2);
  text-decoration: underline;
}

.footer-bottom {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  font-size: 0.84rem;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   17. Utilities
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--surface);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 0 0 var(--r-sm) 0;
}

.skip-link:focus {
  left: 0;
}

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

/* Keyboard hints are desktop-only; on a phone they are just noise. */
.keyboard-note {
  display: none;
}

@media (min-width: 900px) and (min-height: 700px) {
  .keyboard-note {
    display: block;
  }
}

kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.78em;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   18. Compact layout (short viewports)
   -------------------------------------------------------------------------- */
body.compact main {
  padding: 14px 0 30px;
}

body.compact .game-shell {
  gap: 9px;
}

body.compact h1#levelName {
  font-size: 1.1rem;
}

body.compact .game-topbar {
  font-size: 0.82rem;
}

body.compact .game-topbar .pill {
  padding: 4px 10px;
}

body.compact .pen {
  padding: 7px 9px;
}

body.compact .pen-head {
  margin-bottom: 6px;
  font-size: 0.7rem;
}

body.compact .pen-slot {
  max-width: 50px;
}

body.compact .tool {
  padding: 6px 4px;
  font-size: 0.7rem;
}

body.compact .tool svg {
  width: 18px;
  height: 18px;
}

body.compact .toolbar {
  gap: 6px;
}

body.compact .blind-cage {
  width: 42px;
  height: 48px;
}

body.compact .blind-cage .blind-animal {
  background-image: var(--animal, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 76% 76%;
  width: 30px;
  height: 30px;
}

body.compact .site-header {
  position: static;
}

body.compact .blind-cage {
  width: 38px;
  height: 42px;
}

body.compact .blind-cage .blind-animal {
  background-image: var(--animal, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 76% 76%;
  width: 26px;
  height: 26px;
}

/* Very short viewports: trim the chrome so the board, the pen and the
   tools all fit on one screen. */
@media (max-height: 700px) {
  body.compact main {
    padding: 6px 0 14px;
  }

  body.compact .breadcrumb-line {
    display: none;
  }

  body.compact .game-shell {
    gap: 6px;
  }

  body.compact .game-head h1 {
    font-size: 0.95rem;
  }

  body.compact .pen {
    padding: 4px 7px;
  }

  body.compact .pen-head {
    display: none;
  }

  body.compact .pen-slot {
    max-width: 42px;
  }

  body.compact .tool {
    padding: 4px 2px;
    gap: 1px;
  }

  body.compact .tool svg {
    width: 16px;
    height: 16px;
  }

  body.compact .tool .tool-count {
    font-size: 0.62rem;
  }

  body.compact .keyboard-note {
    display: none;
  }

  body.compact .site-footer {
    margin-top: 12px;
    padding: 12px 0 14px;
  }
}

/* --------------------------------------------------------------------------
   19. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header,
  .site-footer,
  .toolbar,
  .nav-burger {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   19. Tools, the full pen and the light
   -------------------------------------------------------------------------- */

/* Unlimited tools are marked with a sign rather than a number. */
.tool-count.unlimited {
  color: var(--brand);
  font-weight: 700;
}

/* The light is armed and waiting for the next tap. */
.tool.armed {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--ink);
  animation: toolArmed 1.1s ease-in-out infinite;
}

@keyframes toolArmed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 158, 117, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(29, 158, 117, 0); }
}

/* While the light is armed the whole board lifts slightly, so the player
   can see that any animal may be tapped. */
.board.lit {
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.45),
    inset 0 -2px 0 rgba(255, 255, 255, 0.35),
    0 3px 0 #4a3d2e,
    0 0 0 3px rgba(29, 158, 117, 0.55),
    0 10px 26px -12px rgba(21, 37, 32, 0.5);
}

.board.lit .tile.locked {
  filter: brightness(0.62) saturate(0.6);
  cursor: pointer;
}

/* A full pen is a warning, not a defeat. */
.pen.full {
  border-color: var(--coral);
  box-shadow: 0 0 0 2px var(--coral-soft), var(--shadow-sm);
}

.pen.full .pen-slot.filled {
  border-color: var(--coral);
}

.pen.full .pen-head {
  color: var(--coral);
}

/* The break tool frees three animals at once. */
.tile.breaking {
  animation: tileBreak 0.5s ease-out forwards;
}

@keyframes tileBreak {
  0% { transform: scale(1); filter: brightness(1.6) saturate(0.4); }
  40% { transform: scale(1.18); filter: brightness(2.2) saturate(0.2); }
  100% { transform: scale(0.2); opacity: 0; filter: brightness(2.6); }
}