:root {
  --page-bg: #74c995;
  --panel-bg: #f2f8df;
  --panel-border: #27572a;
  --panel-shadow: rgba(23, 58, 23, 0.18);
  --title-fill: #ffe83d;
  --title-stroke: #2a5717;
  --title-shadow: rgba(36, 72, 20, 0.2);
  --header-font: "Titan One", "Trebuchet MS", sans-serif;
  --body-text: #1f3a1d;
  --muted-text: #355933;
  --button-bg: #ffe26d;
  --button-border: #2b5d19;
  --button-text: #26471f;
  --button-hover: #ffd23a;
  --territory-border: #27552c;
  --cell-grid-line: rgba(39, 85, 44, 0.88);
  --tile-base: #f8fce9;
  --tile-conflict: #ff8e86;
  --tile-mark: #355933;
  --tile-auto-mark: #6f8f63;
  --tile-highlight: rgba(255, 244, 172, 0.84);
  --win-bg: #fff0a8;
  --win-border: #2c5b23;
  --ppb-grid-line: rgba(59, 102, 118, 0.36);
  --ppb-grid-border: #396d7a;
  --ppb-ice-base: #eefbff;
  --ppb-ice-stripe: rgba(255, 255, 255, 0.64);
  --ppb-ice-groove: rgba(173, 214, 233, 0.42);
  --ppb-ice-glow: rgba(255, 255, 255, 0.72);
  --ppb-ocean-solid: #1f78ad;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--body-text);
  font-family: "Trebuchet MS", "Avenir Next", "Gill Sans", sans-serif;
  background: var(--page-bg);
}

button,
img {
  user-select: none;
  -webkit-user-drag: none;
}

.appShell {
  width: min(100%, 900px);
  margin: 0 auto;
  padding: 28px 18px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hero {
  text-align: center;
}

.hero h1 {
  margin: 0;
  font-family: var(--header-font);
  font-size: clamp(3rem, 10vw, 5.5rem);
  letter-spacing: 0.12em;
  line-height: 0.94;
  text-transform: uppercase;
  font-weight: 900;
  color: var(--title-fill);
  -webkit-text-stroke: 4px var(--title-stroke);
  text-shadow: 0 6px 16px var(--title-shadow);
}

.subtitle {
  margin: 8px 0 0;
  font-size: clamp(0.94rem, 2.4vw, 1.18rem);
  color: #f4ffe3;
  text-shadow: 0 2px 10px rgba(31, 65, 25, 0.22);
}

a,
a:visited,
a:hover,
a:active {
  color: inherit;
  font-weight: 900;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.14em;
}

.contentColumn {
  width: min(100%, 540px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.appView {
  width: min(100%, 760px);
  margin: 0 auto;
}

.homeView,
.aboutView,
.zooView {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.doctorPanel {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
}

.doctorIcon {
  width: clamp(92px, 20vw, 132px);
  height: clamp(92px, 20vw, 132px);
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 8px 16px rgba(37, 79, 30, 0.18));
}

.doctorCopy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.doctorBlurb {
  margin: 0;
  font-size: clamp(0.98rem, 2.4vw, 1.24rem);
  font-weight: 600;
  line-height: 1.24;
  color: var(--muted-text);
}

.doctorBlurb strong {
  font-weight: 900;
}

.dayLabel {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #2e6428;
}

.dailyPuzzleList,
.zooStatsGrid {
  display: grid;
  gap: 14px;
}

.dailyPuzzleList {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dailyPuzzleButton {
  width: 100%;
  border: 4px solid var(--panel-border);
  border-radius: 24px;
  background: #fbf5df;
  box-shadow: 0 12px 28px var(--panel-shadow);
  padding: 16px 16px;
  color: var(--body-text);
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 14px;
  align-items: center;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.dailyPuzzleButton:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(23, 58, 23, 0.2);
  background: #fff8e7;
}

.dailyPuzzleIconWrap {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: var(--card-icon-bg, rgba(255, 255, 255, 0.55));
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 0 0 2px rgba(79, 114, 56, 0.16),
    0 6px 14px rgba(35, 70, 24, 0.12);
}

.dailyPuzzleIcon {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.dailyPuzzleButton[data-puzzle-id="love-birds"] .dailyPuzzleIcon {
  width: 74%;
  transform: translateX(-4px);
}

.dailyPuzzleCopy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.dailyPuzzleTitle {
  margin: 0;
  font-family: var(--header-font);
  font-size: clamp(1.2rem, 3.2vw, 1.65rem);
  color: #255320;
  line-height: 1;
}

.dailyPuzzleFlavor {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--muted-text);
}

.dailyPuzzleStatus {
  display: flex;
  align-items: center;
  grid-column: 2;
  justify-self: end;
  align-self: end;
  padding: 4px 0 0;
}

.dailyPuzzleSolvedLabel {
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #58755a;
}

.dailyPuzzleStatus.solved .dailyPuzzleSolvedLabel {
  color: #2c6627;
}

.homeFooterNav,
.modalActions {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.puzzleBottomNav {
  justify-content: center;
}

.navButton {
  border: 4px solid var(--button-border);
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-text);
  font-family: var(--header-font);
  font-size: 1rem;
  line-height: 1;
  padding: 12px 18px;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(35, 70, 24, 0.18);
  transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.navButton:hover {
  background: var(--button-hover);
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(35, 70, 24, 0.22);
}

.backButton {
  align-self: center;
}

.infoPanel {
  text-align: center;
  padding: 22px 24px;
}

.infoPanel h2 {
  margin: 0 0 12px;
  font-family: var(--header-font);
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: #255320;
}

.infoPanel p {
  margin: 10px 0;
  color: var(--muted-text);
  line-height: 1.5;
  font-size: 1rem;
}

.aboutPanel {
  text-align: left;
}

.aboutPanel h2 {
  text-align: left;
  font-size: clamp(2.1rem, 6vw, 3rem);
}

.aboutPanel p {
  font-size: 1.5rem;
  line-height: 1.45;
}

.zooSummary {
  gap: 8px;
}

.zooTotals {
  margin: 0;
  font-family: var(--header-font);
  font-size: clamp(1.3rem, 4vw, 1.9rem);
  color: #245320;
}

.zooStatCard {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  background: #fbf5df;
}

.zooStatCard h3 {
  margin: 0 0 6px;
  font-family: var(--header-font);
  font-size: 1.2rem;
  color: #255320;
}

.zooStatCard p {
  margin: 2px 0;
  color: var(--muted-text);
  font-size: 0.98rem;
}

.panel {
  background: var(--panel-bg);
  border: 4px solid var(--panel-border);
  border-radius: 22px;
  box-shadow: 0 12px 28px var(--panel-shadow);
  padding: 14px 16px;
}

.cell:focus-visible {
  outline: 3px solid rgba(252, 186, 43, 0.96);
  outline-offset: 2px;
}

.boardArea {
  width: 100%;
  display: flex;
  justify-content: center;
}

.boardFrame {
  width: 100%;
  padding: 10px;
  border-radius: 3px;
  background: rgba(228, 245, 224, 0.26);
  box-shadow: 0 12px 22px rgba(32, 75, 37, 0.18);
}

.boardStack {
  position: relative;
  width: 100%;
}

.celebrationLayer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.celebrationTile {
  position: absolute;
  border-radius: 18px;
  opacity: 0;
  transform: scale(0.58);
  background:
    radial-gradient(
      circle at 50% 50%,
      hsla(var(--celebrate-hue, 0), 95%, 72%, 0.88) 0%,
      hsla(calc(var(--celebrate-hue, 0) + 42), 96%, 67%, 0.74) 42%,
      hsla(calc(var(--celebrate-hue, 0) + 98), 100%, 60%, 0.2) 72%,
      transparent 100%
    );
  animation: rainbowBurst 820ms cubic-bezier(0.2, 0.9, 0.22, 1.06) forwards;
  animation-delay: var(--celebrate-delay, 0ms);
}

.boardStack.is-celebrating .cell {
  animation: celebrateBulge 720ms cubic-bezier(0.2, 0.9, 0.22, 1.06) both;
  animation-delay: var(--celebrate-delay, 0ms);
  z-index: 3;
}

.boardStack.is-celebrating .territoryOverlay {
  filter: saturate(1.15);
}

.board {
  --board-size: 5;
  display: grid;
  grid-template-columns: repeat(var(--board-size), minmax(0, 1fr));
  width: 100%;
  gap: 0;
  background: transparent;
  touch-action: none;
}

.territoryOverlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.boardStack.overlayAboveCelebration .territoryOverlay {
  z-index: 4;
}

.board.is-locked .cell {
  cursor: default;
}

.cell {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 0;
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  background: var(--tile-base);
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: transform 100ms ease, background-color 120ms ease, box-shadow 120ms ease;
  touch-action: none;
}

.cell:disabled {
  opacity: 1;
  color: inherit;
}

.cell:hover {
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.13);
}

.cell[data-tone="0"] {
  background-color: #edf8d6;
}

.cell[data-tone="1"] {
  background-color: #dff0bf;
}

.cell[data-tone="2"] {
  background-color: #cce8a9;
}

.cell[data-tone="3"] {
  background-color: #badc93;
}

.cell[data-tone="4"] {
  background-color: #a7d07d;
}

.cell[data-tone="5"] {
  background-color: #93c567;
}

.cell[data-tone="6"] {
  background-color: #7bb854;
}

.cell[data-tone="7"] {
  background-color: #63aa46;
}

.cell[data-tone="8"] {
  background-color: #4f943b;
}

.cell[data-tone="9"] {
  background-color: #3c7b31;
}

.cell[data-tone] {
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0) 0 11px,
      rgba(255, 255, 255, 0.14) 11px 11.8px,
      rgba(255, 255, 255, 0) 11.8px 24px
    ),
    repeating-linear-gradient(
      135deg,
      rgba(22, 75, 29, 0) 0 11px,
      rgba(22, 75, 29, 0.12) 11px 11.8px,
      rgba(22, 75, 29, 0) 11.8px 24px
    );
  background-size: 24px 24px, 24px 24px;
}

.cell.hasLeopard {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 241, 173, 0.95), transparent 62%),
    var(--tile-highlight);
}

.cell.conflict {
  background: linear-gradient(180deg, #ffb0ab 0%, var(--tile-conflict) 100%);
  box-shadow: inset 0 0 0 3px rgba(175, 45, 33, 0.28);
}

.cellContent {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
}

.leopardIcon {
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px rgba(45, 64, 27, 0.16));
}

.leopardIcon.growIn {
  animation: leopardGrowIn 250ms cubic-bezier(0.22, 0.9, 0.28, 1.18);
}

.xMark {
  font-size: clamp(1.1rem, 4vw, 2rem);
  font-weight: 900;
  line-height: 1;
  color: #17321b;
  text-transform: uppercase;
  opacity: 1;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 1px rgba(12, 24, 11, 0.65);
}

.xMark.auto {
  color: #234228;
}

.xMark.flowIn {
  opacity: 0;
  animation: autoMarkFlow 180ms ease-out forwards;
  animation-delay: var(--flow-delay, 0ms);
}

.winBanner {
  background: var(--win-bg);
  border-color: var(--win-border);
  font-weight: 800;
  text-align: center;
}

.modalScrim {
  position: fixed;
  inset: 0;
  background: rgba(18, 38, 19, 0.42);
  display: grid;
  place-items: center;
  padding: 22px;
  z-index: 30;
}

.modalCard {
  width: min(100%, 460px);
  text-align: center;
  padding: 22px 24px;
}

.modalCard h2 {
  margin: 0 0 10px;
  font-family: var(--header-font);
  font-size: clamp(1.6rem, 5vw, 2.3rem);
  color: #255320;
}

.modalCard p {
  margin: 0 0 18px;
  color: var(--muted-text);
  line-height: 1.45;
  font-size: 1rem;
}

.modalButton {
  min-width: 140px;
}

.puzzleInfo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.puzzleInfo h2 {
  margin: 0;
  font-family: var(--header-font);
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: #245320;
  font-weight: 900;
}

.puzzleInfo p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--muted-text);
}

.puzzleInfo p strong {
  font-weight: 900;
}

.puzzleInfoDate {
  margin-top: 6px;
  text-align: center;
}

.penguinsPolarBearsCell {
  transition: background 120ms ease, box-shadow 120ms ease;
  transform-origin: 50% 50%;
}

.penguinsPolarBearsCell.ppbIce {
  background-color: var(--ppb-ice-base);
  background-image:
    linear-gradient(135deg, transparent 0%, var(--ppb-ice-glow) 48%, transparent 100%),
    repeating-linear-gradient(
      135deg,
      transparent 0 12px,
      var(--ppb-ice-stripe) 12px 15px,
      transparent 15px 28px
    ),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0) 0 5px,
      var(--ppb-ice-groove) 5px 6px,
      rgba(255, 255, 255, 0) 6px 18px
    );
}

.penguinsPolarBearsCell.ppbOcean {
  background: var(--ppb-ocean-solid);
}

.penguinsPolarBearsCell.ppbPopIn {
  animation: ppbTilePopIn 180ms cubic-bezier(0.22, 0.9, 0.28, 1.12);
}

.penguinsPolarBearsCell.hasClue.ppbOcean {
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.06);
}

.penguinsPolarBearsCell.fixedIceClue {
  cursor: default;
}

.penguinIcon,
.penguinMini,
.polarBearIcon {
  object-fit: contain;
  filter: drop-shadow(0 2px 1px rgba(38, 64, 84, 0.12));
}

.penguinIcon {
  width: 58%;
  height: 58%;
}

.penguinCluster {
  position: relative;
  width: 72%;
  height: 72%;
}

.penguinCluster.count-1 {
  width: 68%;
  height: 68%;
}

.penguinMini {
  position: absolute;
  width: 50%;
  height: 50%;
}

.penguinCluster.count-1 .penguinMini {
  inset: 0;
  width: 100%;
  height: 100%;
  margin: auto;
}

.penguinCluster.count-2 {
  width: 94%;
  height: 84%;
}

.penguinCluster.count-2 .penguinMini {
  width: 75%;
  height: 75%;
}

.penguinCluster.count-2 .penguinMini:nth-child(1) {
  left: -1%;
  top: 6%;
  transform: rotate(-5deg);
}

.penguinCluster.count-2 .penguinMini:nth-child(2) {
  right: -1%;
  top: 6%;
  transform: rotate(5deg);
}

.penguinCluster.count-2.front-left .penguinMini:nth-child(1) {
  z-index: 2;
}

.penguinCluster.count-2.front-left .penguinMini:nth-child(2) {
  z-index: 1;
}

.penguinCluster.count-2.front-right .penguinMini:nth-child(1) {
  z-index: 1;
}

.penguinCluster.count-2.front-right .penguinMini:nth-child(2) {
  z-index: 2;
}

.penguinCluster.count-3 {
  width: 92%;
  height: 88%;
}

.penguinCluster.count-3 .penguinMini {
  width: 62%;
  height: 62%;
}

.penguinCluster.count-3 .penguinMini:nth-child(1) {
  left: -2%;
  top: 0;
  z-index: 1;
}

.penguinCluster.count-3 .penguinMini:nth-child(2) {
  left: 19%;
  top: 28%;
  z-index: 3;
}

.penguinCluster.count-3 .penguinMini:nth-child(3) {
  right: -2%;
  top: 0;
  z-index: 2;
}

.penguinCluster.count-4 {
  width: 90%;
  height: 88%;
}

.penguinCluster.count-4 .penguinMini {
  width: 54%;
  height: 54%;
}

.penguinCluster.count-4 .penguinMini:nth-child(1) {
  left: 8%;
  top: 8%;
  z-index: 1;
}

.penguinCluster.count-4 .penguinMini:nth-child(2) {
  right: 8%;
  top: 8%;
  z-index: 2;
}

.penguinCluster.count-4 .penguinMini:nth-child(3) {
  left: 12%;
  bottom: 4%;
  z-index: 3;
}

.penguinCluster.count-4 .penguinMini:nth-child(4) {
  right: 12%;
  bottom: 4%;
  z-index: 4;
}

.polarBearIcon {
  width: 60%;
  height: 60%;
}

.loveBirdsCell {
  background: #d8ecff;
}

.loveBirdsCell.hasPathSegment {
  box-shadow: inset 0 0 0 999px rgba(255, 255, 255, 0.08);
}

.loveBirdEndpoint {
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.95), transparent 54%),
    linear-gradient(180deg, #edf8ff 0%, #d8ecff 100%);
}

.loveBirdEndpointContent {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
}

.loveBirdHeart {
  position: absolute;
  width: 74%;
  height: 74%;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(154, 63, 92, 0.14));
  opacity: 0.92;
  z-index: 1;
}

.loveBirdIcon {
  position: relative;
  width: 66%;
  height: 66%;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(65, 60, 28, 0.18));
  z-index: 2;
}

.loveBirdIcon.mirrored {
  transform: scaleX(-1);
}

.kangarooBoxingCell {
  background-color: #f5e6ca;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='rgba(186,143,88,0.05)'/%3E%3Cpath d='M0 7h64M0 21h64M0 35h64M0 49h64M0 63h64' stroke='rgba(133,93,50,0.13)' stroke-width='1'/%3E%3Cpath d='M7 0v64M21 0v64M35 0v64M49 0v64M63 0v64' stroke='rgba(255,255,255,0.12)' stroke-width='1'/%3E%3Cpath d='M0 0l64 64M-16 16l32 32M16 -16l32 32' stroke='rgba(123,82,42,0.06)' stroke-width='1'/%3E%3Cpath d='M64 0 0 64M48 -16 16 16M80 16 48 48' stroke='rgba(255,255,255,0.04)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 64px 64px;
}

.kangarooBoxingCell.hasBox {
  background-color: #f5e6ca;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' fill='rgba(186,143,88,0.05)'/%3E%3Cpath d='M0 7h64M0 21h64M0 35h64M0 49h64M0 63h64' stroke='rgba(133,93,50,0.13)' stroke-width='1'/%3E%3Cpath d='M7 0v64M21 0v64M35 0v64M49 0v64M63 0v64' stroke='rgba(255,255,255,0.12)' stroke-width='1'/%3E%3Cpath d='M0 0l64 64M-16 16l32 32M16 -16l32 32' stroke='rgba(123,82,42,0.06)' stroke-width='1'/%3E%3Cpath d='M64 0 0 64M48 -16 16 16M80 16 48 48' stroke='rgba(255,255,255,0.04)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 64px 64px;
}

.kangarooIcon {
  width: 68%;
  height: 68%;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(88, 63, 33, 0.18));
}

.kangarooIcon.facingLeft {
  transform: scaleX(-1);
}

.caterpillarBrunchCell {
  background-color: #f3f6e2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 18L18 0M6 24L24 6' stroke='rgba(255,255,255,0.34)' stroke-width='1.2'/%3E%3Ccircle cx='6' cy='7' r='1.2' fill='rgba(219,233,196,0.55)'/%3E%3Ccircle cx='17' cy='15' r='1.1' fill='rgba(255,255,255,0.26)'/%3E%3C/svg%3E");
  background-size: 24px 24px;
}

.caterpillarBrunchCell.hasTrail {
  background-color: #eef5d6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 18L18 0M6 24L24 6' stroke='rgba(255,255,255,0.3)' stroke-width='1.2'/%3E%3Ccircle cx='6' cy='7' r='1.2' fill='rgba(201,229,170,0.55)'/%3E%3Ccircle cx='17' cy='15' r='1.1' fill='rgba(255,255,255,0.22)'/%3E%3C/svg%3E");
  background-size: 24px 24px;
}

.caterpillarBrunchCell.hasLeaf {
  background-color: #f6f6e3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 18L18 0M6 24L24 6' stroke='rgba(255,255,255,0.36)' stroke-width='1.2'/%3E%3Ccircle cx='6' cy='7' r='1.2' fill='rgba(232,236,189,0.56)'/%3E%3Ccircle cx='17' cy='15' r='1.1' fill='rgba(255,255,255,0.28)'/%3E%3C/svg%3E");
  background-size: 24px 24px;
}

.caterpillarBrunchCell.hasCaterpillar {
  background-color: #f7f4df;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 18L18 0M6 24L24 6' stroke='rgba(255,255,255,0.38)' stroke-width='1.2'/%3E%3Ccircle cx='6' cy='7' r='1.2' fill='rgba(237,228,178,0.58)'/%3E%3Ccircle cx='17' cy='15' r='1.1' fill='rgba(255,255,255,0.3)'/%3E%3C/svg%3E");
  background-size: 24px 24px;
}

.caterpillarBrunchContent {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 4;
}

.leafIcon {
  width: 60%;
  height: 60%;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(54, 91, 30, 0.18));
}

.caterpillarIcon {
  width: 74%;
  height: 74%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(59, 76, 24, 0.2));
}

@keyframes leopardGrowIn {
  0% {
    opacity: 0.75;
    transform: scale(0.5);
  }
  68% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes autoMarkFlow {
  0% {
    opacity: 0;
    transform:
      translate(
        calc(var(--flow-x, 0) * -14px),
        calc(var(--flow-y, 0) * -14px)
      )
      scale(0.2);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes ppbTilePopIn {
  0% {
    transform: scale(0.5);
  }
  68% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes celebrateBulge {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes rainbowBurst {
  0% {
    opacity: 0;
    transform: scale(0.58);
  }
  22% {
    opacity: 0.92;
  }
  55% {
    opacity: 0.9;
    transform: scale(1.38);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@media (max-width: 640px) {
  .appShell {
    padding: 22px 14px 32px;
  }

  .hero h1 {
    font-size: clamp(3.45rem, 11.5vw, 6.3rem);
    -webkit-text-stroke: 3px var(--title-stroke);
    text-shadow: none;
  }

  .dailyPuzzleList {
    grid-template-columns: 1fr;
  }

  .doctorPanel {
    flex-direction: row;
    text-align: left;
    align-items: center;
  }

  .dailyPuzzleButton {
    grid-template-columns: 1fr;
    justify-items: start;
    text-align: left;
  }

  .dailyPuzzleStatus {
    justify-self: end;
  }

  .zooStatCard {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

}