/* Animal Link mobile art direction: warm wood, cream cards, bright animal faces. */
:root {
  font-family: ui-rounded, "Avenir Next", "Nunito", system-ui, sans-serif;
}
:root {
  --wood-dark: #754322;
  --paper-edge: #d4a976;
  --blue-path: #43ddff;
  --scene-ink: #754b2a;
  --scene-shadow: #fff9e9;
}
body.sunset-theme {
  --scene-ink: #633b4a;
  --scene-shadow: #ffe3ad;
}
body.night-theme {
  --scene-ink: #f5edce;
  --scene-shadow: #203e69;
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.sprite-icon {
  display: inline-block;
  width: 26px;
  height: 26px;
  flex: none;
  background: url("./assets/ui-icons-mobile-v1.png") 0 0 / 400% 400% no-repeat;
  vertical-align: middle;
}
.sprite-icon[data-icon="play"] {
  background-position: 0 0;
}
.sprite-icon[data-icon="home"] {
  background-position: 33.333% 0%;
}
.sprite-icon[data-icon="pause"] {
  background-position: 66.667% 0%;
}
.sprite-icon[data-icon="sun"] {
  background-position: 100% 0%;
}
.sprite-icon[data-icon="sunset"] {
  background-position: 0% 33.333%;
}
.sprite-icon[data-icon="moon"] {
  background-position: 33.333% 33.333%;
}
.sprite-icon[data-icon="hint"] {
  background-position: 66.667% 33.333%;
}
.sprite-icon[data-icon="shuffle"] {
  background-position: 100% 33.333%;
}
.sprite-icon[data-icon="sound"] {
  background-position: 33.333% 66.667%;
}
.sprite-icon[data-icon="mute"] {
  background-position: 66.667% 66.667%;
}
.sprite-icon[data-icon="stage"] {
  background-position: 100% 66.667%;
}
.sprite-icon[data-icon="star"] {
  background-position: 0% 100%;
}
.sprite-icon[data-icon="time"] {
  background-position: 33.333% 100%;
}
.sprite-icon[data-icon="trophy"] {
  background-position: 66.667% 100%;
}
.sprite-icon[data-icon="leaf"] {
  background-position: 100% 100%;
}
.round-btn .sprite-icon {
  width: 27px;
  height: 27px;
}
.icon-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

body {
  background-image: url("./assets/meadow-bg-mobile-v1.jpg");
}
body.sunset-theme {
  background-image: url("./assets/meadow-sunset-mobile-v1.jpg");
}
body.night-theme {
  background-image: url("./assets/meadow-night-mobile-v1.jpg");
}

.app {
  gap: 8px;
}
#gameScreen {
  gap: 7px;
}

.wood-logo {
  width: 116px;
  min-height: 52px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--wood-dark);
  border-radius: 16px 18px 14px 17px;
  background: linear-gradient(165deg, #d79a54 0%, #b87538 53%, #985727 100%);
  box-shadow:
    inset 0 2px 0 #f5c687,
    0 4px 0 #6d3d20,
    0 7px 11px #4a662f37;
  color: #fff1b1;
  line-height: 0.84;
  text-align: center;
  text-shadow: 1px 2px 0 #79451e;
  transform: rotate(-2deg);
}
.wood-logo span:first-child {
  font-size: 17px;
  font-weight: 1000;
  letter-spacing: 0.5px;
}
.wood-logo span:last-child {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: 0.7px;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.round-btn {
  width: 42px;
  height: 42px;
  flex: none;
  border: 2px solid #b87e4a;
  border-radius: 13px;
  background: linear-gradient(#fffef7, #fae3bd);
  box-shadow:
    inset 0 1px 0 #fff,
    0 3px 0 #925d31;
  color: #704224;
  font-size: 15px;
  font-weight: 1000;
}
.light-btn {
  width: 42px;
  background: linear-gradient(#ffe492, #ffc952);
}

.hero-art .big-animal {
  display: block;
  width: min(45vw, 188px);
  height: min(45vw, 188px);
  border-radius: 50%;
  background: url("./assets/animal-faces-mobile-v1.png") left top / 400% 400% no-repeat;
  box-shadow:
    0 9px 22px #8e623835,
    0 0 0 5px #fff8e5a1;
  filter: none;
}
h1 {
  color: #fff6b9;
  -webkit-text-stroke: 1.2px #945826;
  text-shadow:
    0 3px 0 #7c4524,
    0 5px 9px #6e4a2d55;
}
.tagline {
  color: var(--scene-ink);
  text-shadow: 0 1px var(--scene-shadow);
}
.tip-card {
  border: 2px solid #ddb888;
  background: #fff8e9e8;
  box-shadow: 0 3px 0 #ab7849;
  color: #6b4c34;
}
.tip-card b {
  color: #a66432;
}
.credits {
  color: var(--scene-ink);
  text-shadow: 0 1px var(--scene-shadow);
}
.home-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
}
.home-menu-button {
  width: min(58vw, 220px);
  height: 58px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #bd8654;
  border-radius: 20px;
  background: #fff8ea;
  box-shadow: 0 3px 0 #9b653f;
  color: #704222;
  font-family: inherit;
  font-size: 18px;
  font-weight: 1000;
  cursor: pointer;
}
.home-menu-button.home-play-button {
  position: relative;
  overflow: hidden;
  border-color: #9e5b29;
  border-radius: 21px;
  background: linear-gradient(165deg, #fff1b7 0%, #ffd36e 46%, #f4ad45 100%);
  box-shadow: inset 0 2px 0 #fff9df, inset 0 -3px 0 #d88a34,
    0 5px 0 #8f5128, 0 9px 16px #4f3d2f48;
}
.home-menu-button.home-play-button::before {
  content: "";
  position: absolute;
  inset: 3px 6px auto;
  height: 19px;
  border-radius: 16px 16px 50% 50%;
  background: linear-gradient(#fffce5b8, #fffce500);
  pointer-events: none;
}
.home-menu-button.home-play-button::after {
  content: "";
  position: absolute;
  right: 24%;
  top: 14px;
  width: 7px;
  height: 7px;
  background: #fff9d2;
  transform: rotate(45deg);
  box-shadow: 0 0 5px #fff9d2;
  pointer-events: none;
}
.home-menu-button .play-button-icon {
  width: 51px;
  height: 51px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 3px 2px #8c542788);
}
.home-menu-button:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #9b653f;
}
.home-menu-button.home-play-button:active {
  box-shadow: inset 0 2px 0 #fff9df, inset 0 -2px 0 #d88a34,
    0 2px 0 #8f5128;
}
.home-menu-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.hero-art .spark.sprite-icon {
  width: 27px;
  height: 27px;
}
body.sunset-theme h1 {
  color: #fff2d1;
  -webkit-text-stroke-color: #874b43;
  text-shadow:
    0 3px 0 #6f3c45,
    0 5px 9px #552e5255;
}
body.night-theme h1 {
  color: #fff3c5;
  -webkit-text-stroke-color: #41648b;
  text-shadow:
    0 3px 0 #314a78,
    0 5px 12px #061c4faa;
}
body.sunset-theme .game-title,
body.sunset-theme .footnote,
body.sunset-theme .credits {
  color: #fff5d8;
  text-shadow: 0 2px 4px #603443;
}

.game-top {
  min-height: 52px;
}
.game-title {
  flex: 1;
  padding-left: 8px;
  color: var(--scene-ink);
  font-size: clamp(16px, 4vw, 21px);
  font-weight: 1000;
  letter-spacing: -0.6px;
  text-shadow: 0 1px var(--scene-shadow);
  white-space: nowrap;
}
.stats {
  gap: 5px;
}
.stat {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 4px;
  border: 2px solid var(--paper-edge);
  border-radius: 13px;
  background: linear-gradient(160deg, #fffdf2, #fce9c9);
  box-shadow:
    0 3px 0 #9c693a,
    inset 0 1px 0 white;
}
.stat-button {
  cursor: pointer;
  touch-action: manipulation;
}
.stat-button:hover {
  filter: brightness(1.05);
}
.stat-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #9c693a;
}
.stat-button:disabled {
  filter: grayscale(0.45);
  opacity: 0.55;
  cursor: default;
}
.stat-icon.sprite-icon {
  flex: none;
  width: clamp(22px, 5vw, 28px);
  height: clamp(22px, 5vw, 28px);
}
.stat-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat .label {
  font-size: clamp(9px, 2.3vw, 11px);
  color: #6b4228;
  letter-spacing: 0;
  line-height: 1.1;
}
.stat .value {
  min-width: 35px;
  margin-top: 3px;
  padding: 1px 5px;
  border-radius: 99px;
  background: linear-gradient(#a9794d, #86512f);
  color: #fff9e9;
  font-size: clamp(13px, 3.8vw, 17px);
  text-shadow: 0 1px #6c3922;
}

.timer-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
}
.timer-caption {
  display: flex;
  justify-content: space-between;
  color: var(--scene-ink);
  font-size: 11px;
  font-weight: 1000;
  text-shadow: 0 1px var(--scene-shadow);
}
.timer-caption strong {
  font-size: 12px;
}
.timer-label {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.timer-label .sprite-icon {
  width: 17px;
  height: 17px;
}
.timer-wrap {
  height: 12px;
  border: 2px solid #fff9e8;
  background: #765134;
  box-shadow:
    inset 0 1px 2px #4a2816,
    0 2px 0 #a36939;
}
.timer-fill {
  background: linear-gradient(90deg, #52c970, #b8ec51);
  box-shadow: inset 0 2px 0 #e9ffb3;
}
.timer-fill.low {
  background: linear-gradient(90deg, #f6a143, #eb5448);
}

.board-shell {
  padding: 2px 0 4px;
}
.board-frame {
  width: min(
    100%,
    calc(
      (100dvh - 170px - var(--safe-top) - var(--safe-bottom)) *
        var(--board-ratio, 0.6)
    )
  );
  max-width: none;
  padding: clamp(15px, 4vw, 18px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.board-frame:before {
  content: none;
}
.board {
  gap: 0;
  background: transparent;
}
body.sunset-theme .board {
  background: transparent;
}
body.night-theme .board {
  background: transparent;
}
.tile {
  overflow: hidden;
  border: 1px solid #c99b68;
  border-radius: 2px;
  background: #fffaf0;
  box-shadow: inset 0 1px 0 #fff;
}
.tile:after {
  inset: 1px;
  border: 1px solid #fff8;
}
.tile .animal {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-image: url("./assets/animal-faces-mobile-v1.png");
  background-size: 400% 400%;
  background-position: var(--face-x, 0%) var(--face-y, 0%);
  background-repeat: no-repeat;
  filter: none;
  transform: none;
}
.tile.legacy .animal {
  display: grid;
  place-items: center;
  background: none;
  font-size: clamp(18px, 6vw, 30px);
}
.tile.selected {
  overflow: visible;
  z-index: 3;
  transform: scale(1.08);
  background: #fff1a7;
  box-shadow:
    inset 0 0 0 3px #fff9d6,
    0 0 0 3px #ffb83d,
    0 0 15px 4px #ffe466;
  animation: selectedPop .5s cubic-bezier(.2, 1.5, .4, 1) both,
    selectedBreathe 1.5s ease-in-out .5s infinite;
}
.tile.selected:before {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  border: 2px solid #fff5a9;
  border-radius: 7px;
  box-shadow: 0 0 10px #ffd460;
  pointer-events: none;
  animation: selectedHalo 1.5s ease-in-out infinite;
}
.tile.selected .animal {
  overflow: hidden;
}
@keyframes selectedPop {
  0% { transform: scale(.86); }
  55% { transform: scale(1.16); }
  100% { transform: scale(1.08); }
}
@keyframes selectedBreathe {
  0%, 100% { transform: scale(1.08); }
  50% { transform: scale(1.12); }
}
@keyframes selectedHalo {
  0%, 100% { opacity: .55; transform: scale(.98); }
  50% { opacity: 1; transform: scale(1.04); }
}
.tile.hinted {
  overflow: visible;
  box-shadow:
    inset 0 0 0 3px #ffca38,
    0 0 17px #ffe166;
}
.tile.empty {
  visibility: hidden;
}
.tile.void {
  pointer-events: none;
}
.path-layer {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.path-line-back,
.path-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.path-line-back {
  stroke: #fff5ce;
  stroke-width: 8;
  filter: drop-shadow(0 0 5px #ffb9d1);
}
.path-line {
  stroke: #ffb751;
  stroke-width: 3.5;
  filter: drop-shadow(0 0 5px #ff8dbd);
}
.match-sparkle {
  fill: #fff6ad;
  stroke: #ff9ac5;
  stroke-width: 1.4;
  filter: drop-shadow(0 0 5px #ffd36e);
}
.match-sparkle-tail {
  fill: #ffe493;
  filter: drop-shadow(0 0 4px #ffadbd);
}
.tile.matching {
  z-index: 3;
}
.tile.matching .animal {
  animation: animalMatchPop .6s ease-out both;
}
.tile.matching:after {
  content: "♥";
  inset: auto;
  top: -13px;
  right: -7px;
  border: 0;
  color: #ff77a4;
  font-size: clamp(13px, 4vw, 20px);
  text-shadow: 0 1px #fff, 0 2px 6px #fa7da8;
  animation: matchHeart .6s ease-out both;
}
@keyframes animalMatchPop {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.14) rotate(-5deg); }
  70% { transform: scale(1.09) rotate(4deg); }
}
@keyframes matchHeart {
  0% { opacity: 0; transform: translateY(8px) scale(.5) rotate(-16deg); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-19px) scale(1.15) rotate(10deg); }
}

.play,
.round-btn {
  transition:
    transform 0.12s ease,
    filter 0.12s ease;
}
.play:hover,
.round-btn:hover {
  filter: brightness(1.05);
}
.footnote {
  color: var(--scene-ink);
  text-shadow: 0 1px var(--scene-shadow);
}
body.night-theme .stat,
body.night-theme .tip-card {
  box-shadow: 0 3px 0 #142d5b75;
}
body.night-theme .timer-caption,
body.night-theme .footnote,
body.night-theme .credits,
body.night-theme .tagline {
  text-shadow: 0 2px 4px #102e5dcc;
}

.overlay {
  background: #2f412f80;
}
.modal {
  border-width: 5px;
  border-color: var(--wood-dark);
  background: linear-gradient(#fffaf0, #f7e4bf);
  box-shadow:
    0 8px 0 #63391d,
    0 18px 50px #122a2255;
}
.modal h2 {
  width: calc(100% + 22px);
  margin: 9px -11px 8px;
  padding: 8px;
  border-radius: 13px;
  background: linear-gradient(#c98a45, #9e602e);
  color: #fff4c7;
  text-shadow: 0 2px #71401e;
  box-shadow: 0 3px 0 #724222;
}
.modal p {
  color: #765639;
}
.modal .modal-art.atlas-face {
  width: 84px;
  height: 84px;
  margin: auto;
  border-radius: 50%;
  background-image: url("./assets/animal-faces-mobile-v1.png");
  background-size: 400% 400%;
  filter: drop-shadow(0 4px 2px #8c643e44);
}
.modal .modal-art.sprite-icon {
  width: 82px;
  height: 82px;
  margin: auto;
}
.mini-stats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mini-stats .sprite-icon {
  width: 19px;
  height: 19px;
}
.mini-stats span {
  background: #fff5de;
  color: #774b2b;
}
.modal.stage-picker {
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 30px);
  overflow-y: auto;
}
.mini-stats.stage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 11px 0 15px;
}
.stage-choice {
  min-width: 0;
  min-height: 52px;
  padding: 5px 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 2px solid #d49b58;
  border-radius: 13px;
  background: linear-gradient(#fffdf1, #fbe8bf);
  box-shadow: 0 3px 0 #ad7543;
  color: #704524;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.stage-choice strong {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 10px;
  background: #ffc956;
  color: #6e4320;
  box-shadow: inset 0 1px #fff9a0;
  font-size: 14px;
}
.stage-choice span {
  min-width: 0;
  padding: 0;
  background: none;
  color: inherit;
  font-size: 11px;
  line-height: 1.1;
  font-weight: 900;
}
.stage-choice:active { transform: translateY(2px); box-shadow: 0 1px 0 #ad7543; }
.stage-choice:focus-visible { outline: 3px solid #5eacfa; outline-offset: 2px; }
.secondary {
  background: #fff3d9;
  color: #764b2d;
  box-shadow: 0 3px 0 #b88a54;
}

@media (max-height: 700px) and (orientation: portrait) {
  .app {
    gap: 6px;
  }
  #gameScreen {
    gap: 5px;
  }
  .game-top {
    min-height: 44px;
  }
  .game-title {
    font-size: 16px;
  }
  .round-btn {
    height: 40px;
  }
  .round-btn,
  .light-btn {
    width: 40px;
  }
  .stat {
    min-height: 50px;
    padding: 3px;
  }
  .board-frame {
    padding: 15px;
  }
  .board-shell {
    padding: 1px 0 6px;
  }
  .footnote {
    font-size: 9px;
  }
}

@media (max-width: 350px) {
  .game-title {
    font-size: 12px;
    padding-left: 3px;
  }
  .top-actions {
    gap: 4px;
  }
  .game-top {
    gap: 4px;
  }
  .game-top .round-btn {
    width: 35px;
    height: 37px;
  }
  .stat-icon.sprite-icon {
    width: 20px;
    height: 20px;
  }
  .board-frame {
    padding: 14px;
  }
}

@media (min-width: 700px) {
  .app {
    background: #fff7df19;
  }
  .board-frame {
    max-width: 470px;
  }
}

/* Standalone speaker artwork keeps the complete icon inside small buttons. */
.sprite-icon[data-icon="sound"],
.sprite-icon[data-icon="mute"] {
  background-size: contain;
  background-position: center;
}
.sprite-icon[data-icon="sound"] {
  background-image: url("./assets/sound-on.svg");
}
.sprite-icon[data-icon="mute"] {
  background-image: url("./assets/sound-off.svg");
}
#soundButton,
#soundHome {
  overflow: hidden;
}

.board-frame.shake { animation: boardShake .38s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes boardShake { 15%,85% { transform: translateX(-5px) rotate(-.35deg); } 30%,70% { transform: translateX(5px) rotate(.35deg); } 45%,55% { transform: translateX(-3px) rotate(-.2deg); } }
@media (prefers-reduced-motion: reduce) { .board-frame.shake { animation-duration: .01ms; } }