@font-face {
  font-family: "LibrasGame";
  src: url("./assets/Libras2020-Regular.ttf") format("truetype");
  font-display: swap;
}

:root {
  --bg-1: #2534bf;
  --bg-2: #1f74ff;
  --bg-3: #15b9cf;
  --bg-4: #8ce96d;
  --glow-a: #57e7ff;
  --glow-b: #86ffca;
  --glow-c: #ffd16f;
  --glow-d: #ff88b7;
  --ink-1: #e7f8ff;
  --ink-2: #d4eeff;
  --ink-3: #a8d1ea;
  --panel: rgba(35, 54, 149, 0.54);
  --panel-soft: rgba(30, 89, 170, 0.46);
  --panel-border: rgba(189, 244, 255, 0.42);
  --shadow-deep: 0 24px 42px rgba(12, 21, 63, 0.45);
  --shadow-soft: 0 12px 24px rgba(11, 30, 65, 0.28);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --mx: 0;
  --my: 0;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  color: var(--ink-1);
  font-family: "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 161, 197, 0.33), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(255, 215, 122, 0.3), transparent 27%),
    radial-gradient(circle at 58% 88%, rgba(127, 255, 216, 0.28), transparent 42%),
    radial-gradient(circle at 45% 30%, rgba(127, 171, 255, 0.2), transparent 45%),
    linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 34%, var(--bg-3) 70%, var(--bg-4) 100%);
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.finish-confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 11;
  opacity: 0;
}

.finish-confetti-layer.active {
  opacity: 1;
}

.finish-confetti-piece {
  position: absolute;
  left: var(--x);
  top: -24px;
  width: var(--size);
  height: calc(var(--size) * 0.6);
  border-radius: 2px;
  background: var(--color);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
  transform: translateX(0) rotate(0deg);
  animation: finish-confetti-fall var(--dur) ease-in forwards;
  animation-delay: var(--delay);
}

.corner-copy {
  position: fixed;
  right: 8px;
  bottom: 12px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: rgba(18, 48, 112, 0.75);
  text-shadow: 0 1px 2px rgba(20, 38, 102, 0.28);
  pointer-events: none;
  user-select: none;
  z-index: 12;
}

.rescue-shell {
  position: relative;
  height: 100svh;
  max-width: 1500px;
  margin: 0 auto;
  padding: clamp(10px, 1.4vh, 16px) clamp(10px, 1.4vw, 20px) clamp(14px, 1.8vh, 22px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(8px, 1.3vh, 14px);
  isolation: isolate;
  overflow: hidden;
}

.friendly-backdrop,
.meadow,
.overlay {
  pointer-events: none;
}

.friendly-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.friendly-backdrop::before,
.friendly-backdrop::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(14px);
}

.friendly-backdrop::before {
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  left: -16vw;
  top: -20vw;
  background: radial-gradient(circle, rgba(144, 255, 202, 0.42), rgba(144, 255, 202, 0));
}

.friendly-backdrop::after {
  width: 44vw;
  height: 44vw;
  max-width: 560px;
  max-height: 560px;
  right: -14vw;
  top: -16vw;
  background: radial-gradient(circle, rgba(172, 157, 255, 0.36), rgba(172, 157, 255, 0));
}

.sun-glow {
  position: absolute;
  right: clamp(18px, 4vw, 68px);
  top: clamp(16px, 3vh, 38px);
  width: clamp(130px, 18vmin, 240px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 252, 213, 0.92) 0%, rgba(255, 178, 113, 0.78) 48%, rgba(255, 143, 177, 0.32) 66%, rgba(255, 143, 177, 0) 80%);
  box-shadow: 0 0 56px rgba(255, 182, 124, 0.52);
}

.light-ribbons {
  position: absolute;
  inset: -4% 0 auto;
  height: 65%;
  transform: translate3d(calc(var(--mx) * 0.09px), calc(var(--my) * 0.07px), 0);
}

.ribbon {
  position: absolute;
  top: 0;
  width: 17vw;
  min-width: 96px;
  height: 60vh;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(180deg, rgba(224, 246, 255, 0.62), rgba(224, 246, 255, 0));
  filter: blur(9px);
  opacity: 0.52;
  animation: ribbon-wave 8.4s ease-in-out infinite;
}

.ribbon-1 {
  left: 6%;
}

.ribbon-2 {
  left: 30%;
  animation-duration: 10.2s;
}

.ribbon-3 {
  left: 54%;
  animation-duration: 9.4s;
}

.ribbon-4 {
  left: 77%;
  animation-duration: 11.1s;
}

.cloud-field,
.butterfly-field {
  position: absolute;
  inset: 0;
}

.bubble {
  position: absolute;
  left: var(--left);
  top: -120px;
  width: var(--size);
  height: calc(var(--size) * 0.72);
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 44%, rgba(239, 255, 255, 0.96), rgba(179, 224, 255, 0.8) 58%, transparent 100%),
    radial-gradient(circle at 70% 60%, rgba(235, 246, 255, 0.7), transparent 70%);
  box-shadow:
    0 10px 22px rgba(38, 63, 130, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  opacity: 0.82;
  animation: cloud-float var(--duration) linear infinite;
  animation-delay: var(--delay);
}

.fish {
  position: absolute;
  left: -18vw;
  top: var(--top);
  width: 84px;
  height: 56px;
  animation: butterfly-fly var(--duration) linear infinite;
  animation-delay: var(--delay);
  filter: drop-shadow(0 6px 9px rgba(45, 42, 124, 0.28));
}

.fish::before,
.fish::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 34px;
  height: 34px;
  border-radius: 44% 66% 52% 70%;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.96), var(--fish-color));
}

.fish::before {
  left: 7px;
  transform: rotate(-18deg);
}

.fish::after {
  right: 7px;
  transform: scaleX(-1) rotate(-18deg);
}

.topbar,
.game-layout {
  position: relative;
  z-index: 2;
  min-height: 0;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.brand {
  margin: 0;
  max-width: min(74vw, 820px);
}

.brand h1 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.34em;
  font-family: "Luckiest Guy", "Baloo 2", "Comic Sans MS", "Trebuchet MS", cursive;
  font-size: clamp(1.2rem, 2.8vw, 2rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  font-weight: 900;
  color: #ff9c2a;
  -webkit-text-stroke: 1px rgba(105, 43, 5, 0.42);
  text-shadow:
    0 1px 0 #ffd08a,
    0 2px 0 #ffc064,
    0 3px 0 #ffb146,
    0 4px 0 #f89a2f,
    0 12px 18px rgba(120, 56, 6, 0.34),
    0 0 15px rgba(255, 167, 71, 0.52);
}

.brand h1::before {
  content: "🐾";
  font-size: 0.88em;
  line-height: 1;
  transform: translateY(-0.04em) rotate(-12deg);
  filter: drop-shadow(0 2px 0 rgba(123, 58, 9, 0.28));
}

.overlay-card h2 {
  margin: 0;
  font-family: "Arial Black", "Comic Sans MS", "Trebuchet MS", sans-serif;
  font-size: clamp(1.2rem, 2.8vw, 2rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  font-weight: 900;
  -webkit-text-stroke: 0.6px rgba(112, 56, 5, 0.45);
  color: #f2a23a;
  text-shadow:
    0 2px 0 #ffe4ac,
    0 8px 24px rgba(78, 43, 9, 0.35);
}

.start-overlay .overlay-card h2 {
  color: #ffffff;
  text-shadow:
    0 2px 0 rgba(120, 160, 220, 0.4),
    0 8px 24px rgba(34, 26, 95, 0.38);
}

.brand-logo {
  width: clamp(70px, 9.4vw, 124px);
  height: auto;
  filter:
    drop-shadow(0 8px 14px rgba(5, 20, 31, 0.42))
    drop-shadow(0 0 10px rgba(128, 242, 255, 0.26));
}

.eyebrow,
.section-label,
.status-title,
.reward-title,
.progress-header span {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(0.56rem, 1.2vw, 0.72rem);
  font-weight: 800;
  color: rgba(187, 233, 247, 0.93);
}

.start-overlay .eyebrow {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: clamp(0.78rem, 1.5vmin, 0.96rem);
  letter-spacing: 0.18em;
  color: #1f3f7a;
  background: linear-gradient(140deg, rgba(255, 159, 26, 0.9), rgba(255, 122, 0, 0.85));
  border: 1px solid rgba(255, 229, 184, 0.65);
  box-shadow:
    0 8px 14px rgba(255, 122, 0, 0.3),
    inset 0 1px 0 rgba(255, 245, 223, 0.45);
}

.subtitle {
  margin: 0;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.glass {
  background:
    linear-gradient(160deg, rgba(52, 68, 172, 0.62), rgba(27, 116, 176, 0.55)),
    linear-gradient(145deg, rgba(255, 168, 193, 0.16), rgba(154, 255, 214, 0.08) 52%, rgba(255, 209, 129, 0.12));
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-xl);
  box-shadow:
    var(--shadow-deep),
    inset 0 1px 0 rgba(240, 249, 255, 0.44),
    inset 0 -1px 0 rgba(26, 40, 112, 0.5);
  backdrop-filter: blur(8px);
}

.panel {
  padding: clamp(10px, 1.6vh, 16px);
  min-height: 0;
}

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 318px);
  gap: clamp(10px, 1.2vw, 16px);
  align-items: stretch;
  min-height: 0;
}

.play-zone {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(10px, 1.3vh, 15px);
  min-height: 0;
}

.sign-panel {
  text-align: center;
  border-radius: var(--radius-lg);
  padding: clamp(6px, 1.1vh, 12px) clamp(10px, 1.8vw, 16px);
  background:
    linear-gradient(160deg, rgba(53, 80, 181, 0.72), rgba(27, 126, 176, 0.66)),
    linear-gradient(145deg, rgba(255, 168, 193, 0.1), rgba(154, 255, 214, 0.06) 52%, rgba(255, 209, 129, 0.08));
  border-color: rgba(210, 245, 255, 0.44);
  box-shadow:
    0 16px 24px rgba(22, 44, 122, 0.34),
    inset 0 1px 0 rgba(240, 249, 255, 0.3),
    inset 0 -1px 0 rgba(18, 56, 128, 0.5);
}

.libras-word {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.28em;
  font-family: "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
  font-size: clamp(2.4rem, 7.4vmin, 6rem);
  line-height: 1.12;
  color: #ffffff;
  text-shadow:
    0 0 22px rgba(170, 255, 231, 0.58),
    0 14px 26px rgba(36, 26, 108, 0.54);
}

.libras-prefix {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-size: 0.5em;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.libras-prefix-icon {
  display: block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: currentColor;
  overflow: visible;
}

#librasWord {
  font-family: "LibrasGame", "Candara", sans-serif;
  letter-spacing: 0.16em;
}

.treasure-stage {
  position: relative;
  min-height: 0;
  height: 100%;
  border-radius: clamp(20px, 2.8vmin, 30px);
  padding: clamp(10px, 1.3vh, 16px) clamp(10px, 1.3vw, 16px);
  overflow: hidden;
  border: 1px solid rgba(218, 246, 255, 0.46);
  background:
    radial-gradient(circle at 78% 14%, rgba(255, 209, 119, 0.42), transparent 34%),
    radial-gradient(circle at 22% 24%, rgba(118, 241, 255, 0.38), transparent 38%),
    radial-gradient(circle at 56% 78%, rgba(255, 145, 194, 0.2), transparent 35%),
    linear-gradient(155deg, rgba(54, 88, 208, 0.84), rgba(24, 154, 203, 0.76) 56%, rgba(34, 191, 149, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(237, 251, 255, 0.46),
    inset 0 -24px 40px rgba(21, 36, 112, 0.26),
    0 26px 36px rgba(31, 47, 128, 0.34);
  perspective: 1400px;
  transform-style: preserve-3d;
}

.ground-shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 14px;
  height: clamp(26px, 5vh, 52px);
  z-index: 2;
  background: radial-gradient(circle, rgba(1, 9, 15, 0.72), rgba(1, 9, 15, 0));
  filter: blur(16px);
}

.stage-glow {
  position: absolute;
  left: 50%;
  bottom: 28%;
  width: min(70%, 460px);
  aspect-ratio: 2.3;
  z-index: 2;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 210, 136, 0.34), rgba(255, 210, 136, 0));
  filter: blur(10px);
}

.forest-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.74;
  filter: saturate(0.88);
}

.forest-cloud,
.forest-tree,
.forest-bush,
.forest-grass {
  position: absolute;
}

.forest-cloud {
  --cloud-scale: 1;
  width: clamp(78px, 10vw, 140px);
  height: clamp(28px, 4vh, 44px);
  border-radius: 999px;
  background: rgba(235, 253, 255, 0.52);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.66),
    0 6px 14px rgba(7, 48, 84, 0.12);
  animation: forest-cloud-drift 18s ease-in-out infinite;
}

.forest-cloud::before,
.forest-cloud::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(245, 254, 255, 0.54);
}

.forest-cloud::before {
  width: 36%;
  height: 120%;
  left: 14%;
  top: -48%;
}

.forest-cloud::after {
  width: 28%;
  height: 94%;
  right: 18%;
  top: -34%;
}

.cloud-left {
  left: 6%;
  top: 8%;
}

.cloud-mid {
  left: 34%;
  top: 5%;
  --cloud-scale: 0.82;
  opacity: 0.84;
  animation-delay: -6s;
}

.cloud-right {
  right: 8%;
  top: 10%;
  --cloud-scale: 0.9;
  opacity: 0.88;
  animation-delay: -12s;
}

.forest-tree {
  width: clamp(64px, 8vw, 104px);
  height: clamp(120px, 20vh, 200px);
  bottom: clamp(24px, 4vh, 40px);
  border-radius: 0 0 14px 14px;
  background:
    linear-gradient(180deg, rgba(112, 65, 26, 0.26), rgba(95, 52, 20, 0.92) 42%, rgba(72, 39, 14, 0.98));
}

.forest-tree::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 58%;
  width: 170%;
  aspect-ratio: 1.12;
  transform: translateX(-50%);
  border-radius: 48% 52% 44% 56% / 50% 42% 58% 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(228, 255, 206, 0.58), rgba(228, 255, 206, 0)),
    linear-gradient(165deg, #65c665, #42a45e 58%, #2b7a4a);
  box-shadow:
    inset 0 -10px 16px rgba(28, 71, 43, 0.25),
    0 8px 14px rgba(7, 46, 28, 0.24);
}

.forest-tree::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 86%;
  width: 118%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 34%, rgba(217, 253, 187, 0.52), rgba(217, 253, 187, 0)),
    linear-gradient(180deg, #8ddf7f, #4cae61 70%, #2f7e4f);
}

.tree-left {
  left: 4%;
  transform: scale(0.86);
}

.tree-mid {
  left: 21%;
  transform: scale(0.96);
}

.tree-right {
  left: 44%;
  transform: scale(0.82);
}

.forest-bush {
  bottom: clamp(14px, 2.8vh, 30px);
  width: clamp(70px, 9vw, 130px);
  height: clamp(40px, 7vh, 68px);
  border-radius: 46% 54% 42% 58% / 62% 52% 48% 38%;
  background:
    radial-gradient(circle at 40% 26%, rgba(227, 255, 204, 0.52), rgba(227, 255, 204, 0)),
    linear-gradient(180deg, #7fd670, #449f57 66%, #2f7646);
  box-shadow:
    inset 0 -6px 10px rgba(20, 66, 36, 0.2),
    0 4px 10px rgba(8, 45, 29, 0.2);
}

.bush-left {
  left: 0.5%;
  transform: scale(0.9);
}

.bush-mid {
  left: 16%;
  transform: scale(1.05);
}

.bush-right {
  left: 36%;
  transform: scale(0.92);
}

.forest-grass {
  bottom: clamp(8px, 1.6vh, 16px);
  width: clamp(36px, 4vw, 60px);
  height: clamp(54px, 9vh, 90px);
  transform-origin: bottom center;
  animation: forest-grass-sway 6.8s ease-in-out infinite;
}

.forest-grass::before,
.forest-grass::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 36%;
  height: 100%;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, #9bf098, #3f995d);
}

.forest-grass::before {
  left: 26%;
  transform: rotate(-11deg);
}

.forest-grass::after {
  right: 20%;
  height: 85%;
  transform: rotate(15deg);
}

.forest-grass.grass-left {
  left: 10%;
}

.forest-grass.grass-mid {
  left: 30%;
  animation-duration: 8.2s;
}

.forest-grass.grass-right {
  left: 49%;
  animation-duration: 7.6s;
}

.lock-wrapper {
  position: absolute;
  left: 26%;
  top: 48%;
  width: clamp(72px, 8.2vmin, 108px);
  aspect-ratio: 0.8;
  z-index: 8;
  transform: translateX(-50%) translateZ(190px);
  transform-origin: center 78%;
  will-change: transform, filter;
  transition: transform 620ms ease, filter 240ms ease;
}

.lock-wrapper::before,
.lock-wrapper::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  pointer-events: none;
}

.lock-wrapper::before {
  width: clamp(64px, 8vmin, 104px);
  height: clamp(64px, 8vmin, 104px);
  border-radius: 50%;
  border: 3px solid rgba(255, 219, 137, 0.88);
  box-shadow:
    0 0 16px rgba(255, 180, 70, 0.55),
    inset 0 0 12px rgba(255, 245, 202, 0.62);
}

.lock-wrapper::after {
  width: clamp(92px, 12vmin, 138px);
  height: clamp(92px, 12vmin, 138px);
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      rgba(255, 190, 92, 0),
      rgba(255, 190, 92, 0.86),
      rgba(255, 241, 167, 0),
      rgba(255, 190, 92, 0.86),
      rgba(255, 190, 92, 0)
    );
  filter: blur(1px);
}

.lock {
  position: relative;
  width: 100%;
  height: 100%;
}

.lock-shackle {
  position: absolute;
  inset: 0 18% auto;
  height: 56%;
  border: clamp(7px, 1vmin, 12px) solid #ffc877;
  border-bottom: 0;
  border-radius: 42px 42px 0 0;
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.44);
  transform-origin: right 86%;
  transition: transform 520ms cubic-bezier(0.18, 0.9, 0.2, 1), filter 280ms ease;
}

.lock-body {
  position: absolute;
  inset: auto 0 0;
  height: 62%;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffd18d 0%, #f39a54 54%, #c55f27 100%);
  box-shadow:
    inset 0 5px 12px rgba(255, 234, 193, 0.52),
    0 8px 16px rgba(8, 29, 41, 0.38);
  transition: filter 280ms ease;
}

.lock-core {
  position: absolute;
  left: 50%;
  top: 48%;
  width: clamp(11px, 1.2vmin, 17px);
  height: clamp(11px, 1.2vmin, 17px);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #91470d;
  box-shadow: 0 14px 0 #91470d;
}

.animal-tag {
  position: absolute;
  right: clamp(8px, 1.2vw, 16px);
  top: clamp(54px, 6.4vh, 76px);
  width: 41%;
  padding: clamp(7px, 1vh, 11px) clamp(10px, 1.4vw, 14px);
  border-radius: 14px;
  text-align: center;
  font-weight: 900;
  font-size: clamp(1.7rem, 3.4vmin, 2.4rem);
  letter-spacing: 0.02em;
  color: #ffffff;
  background:
    linear-gradient(140deg, rgba(123, 231, 255, 0.32), rgba(167, 255, 186, 0.26) 52%, rgba(255, 186, 154, 0.3)),
    rgba(39, 73, 165, 0.66);
  border: 1px solid rgba(221, 246, 255, 0.46);
  box-shadow:
    0 10px 20px rgba(24, 37, 101, 0.34),
    inset 0 1px 0 rgba(225, 251, 255, 0.42);
  z-index: 7;
}

.cage {
  --cage-left: 2%;
  --cage-x: 0px;
  position: absolute;
  left: var(--cage-left);
  bottom: clamp(10px, 1.6vh, 16px);
  width: 52%;
  height: min(84%, 420px);
  z-index: 6;
  transform: translateX(var(--cage-x)) rotateY(0deg) translateZ(10px);
  transform-style: preserve-3d;
  transition: transform 360ms ease, filter 260ms ease;
}

.cage-top,
.cage-base {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(14px, 2.1vmin, 22px);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffd89a, #e5a351 56%, #b76f26 100%);
  box-shadow:
    inset 0 2px 7px rgba(255, 255, 255, 0.48),
    inset 0 -3px 8px rgba(102, 57, 15, 0.3);
}

.cage-top {
  top: 0;
}

.cage-base {
  bottom: 0;
}

.cage-body {
  position: absolute;
  top: clamp(12px, 1.8vmin, 20px);
  bottom: clamp(12px, 1.8vmin, 20px);
  left: clamp(10px, 1.5vmin, 16px);
  right: clamp(10px, 1.5vmin, 16px);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(44, 83, 182, 0.26), rgba(23, 125, 165, 0.1));
  border: 2px solid rgba(235, 168, 73, 0.78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  overflow: hidden;
  transform-style: preserve-3d;
}

.cage-bar {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: clamp(5px, 0.68vmin, 8px);
  z-index: 4;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe4ac, #c9771f);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.46);
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  border-right: 1px solid rgba(132, 71, 12, 0.32);
}

.bar-1 { left: 7%; }
.bar-2 { left: 16%; }
.bar-3 { left: 25%; }
.bar-4 { left: 34%; }
.bar-5 { left: 43%; }
.bar-6 { left: 52%; }
.bar-7 { left: 61%; }
.bar-8 { left: 70%; }
.bar-9 { left: 79%; }
.bar-10 { left: 88%; }

.cage-door {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -2px;
  width: 44%;
  z-index: 2;
  transform-origin: left center;
  border-right: 4px solid rgba(211, 124, 38, 0.72);
  background:
    linear-gradient(90deg, rgba(255, 190, 103, 0.46), rgba(255, 190, 103, 0.15)),
    repeating-linear-gradient(90deg, rgba(220, 140, 49, 0.94) 0 6px, transparent 6px 25px);
  transition: transform 860ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 860ms ease;
}

.cage-door::after {
  content: "";
  position: absolute;
  top: 48%;
  right: clamp(4px, 0.6vmin, 8px);
  width: clamp(8px, 1.3vmin, 13px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #ffe8b1, #d58c2d);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.48);
}

.animal {
  position: absolute;
  left: 50%;
  bottom: clamp(-130px, -17.2vmin, -64px);
  width: min(78.125vmin, 394px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: clamp(8.75rem, 20.94vmin, 15.63rem);
  line-height: 1;
  transform: translateX(-50%) rotateY(calc(var(--mx) * -0.015deg));
  transform-origin: center bottom;
  transform-style: preserve-3d;
  z-index: 1;
  text-shadow: none;
  animation: animal-bob 2.1s ease-in-out infinite;
  transition: transform 900ms cubic-bezier(0.2, 0.9, 0.2, 1), filter 350ms ease;
}

.animal::before,
.animal::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  pointer-events: none;
}

.animal::before {
  width: clamp(120px, 15vmin, 180px);
  height: clamp(120px, 15vmin, 180px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 241, 171, 0.85), rgba(255, 241, 171, 0));
  z-index: -1;
}

.animal::after {
  width: clamp(180px, 24vmin, 280px);
  height: clamp(180px, 24vmin, 280px);
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      rgba(255, 196, 89, 0),
      rgba(255, 196, 89, 0.9),
      rgba(255, 255, 255, 0),
      rgba(129, 255, 195, 0.85),
      rgba(255, 196, 89, 0)
    );
  filter: blur(1.2px);
  z-index: -1;
}

.cage-input-inline {
  position: absolute;
  right: clamp(8px, 1.1vw, 16px);
  top: 58%;
  width: 41%;
  height: 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateY(-50%);
  z-index: 3;
}

.treasure-caption {
  margin: 0 0 clamp(6px, 1.2vh, 10px);
  text-align: center;
  font-family: "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
  font-weight: 900;
  font-size: clamp(0.92rem, 2.2vmin, 1.14rem);
  line-height: 1.15;
  color: #ffffff;
  text-shadow: none;
}

.feedback-message {
  margin: clamp(6px, 1vh, 10px) 0 0;
  min-height: 1.2em;
  text-align: center;
  font-weight: 800;
  font-size: clamp(0.72rem, 1.6vmin, 0.92rem);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: rgba(229, 248, 255, 0.95);
  text-shadow: 0 1px 2px rgba(18, 39, 96, 0.42);
}

.feedback-message.success {
  color: #d7ffd7;
}

.feedback-message.error {
  color: #ffd6ce;
}

.cage-input-inline input {
  width: 100%;
  min-width: 0;
  padding: clamp(20px, 2.7vh, 28px) clamp(10px, 1.2vw, 14px);
  border-radius: 16px;
  border: 1px solid rgba(214, 246, 255, 0.74);
  background:
    linear-gradient(160deg, rgba(59, 98, 208, 0.74), rgba(27, 149, 196, 0.72)),
    rgba(48, 122, 194, 0.62);
  color: #f2fbff;
  font-size: clamp(0.92rem, 1.9vmin, 1.08rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(214, 247, 255, 0.32),
    inset 0 -1px 0 rgba(3, 19, 31, 0.48);
}

.cage-input-inline input::placeholder {
  color: rgba(231, 247, 255, 0.78);
}

.cage-input-inline input:focus {
  border-color: rgba(255, 204, 123, 0.92);
  box-shadow:
    0 0 0 3px rgba(255, 204, 123, 0.24),
    inset 0 1px 0 rgba(223, 249, 255, 0.36);
}

.restart-footer {
  position: absolute;
  right: clamp(8px, 1.1vw, 16px);
  bottom: clamp(8px, 1.2vh, 14px);
  width: 41%;
  display: flex;
  justify-content: center;
  z-index: 3;
}

.restart-footer .ghost-button {
  width: fit-content;
}

.reward-burst {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.burst-piece {
  position: absolute;
  left: 50%;
  bottom: 36%;
  width: clamp(10px, 1.5vmin, 18px);
  aspect-ratio: 1;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), var(--burst-color));
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.34);
  animation: burst 1200ms ease-out forwards;
}

.treasure-stage.success .cage-door {
  transform: rotateY(-65deg) translateX(-8px);
  opacity: 0.42;
}

.treasure-stage.success .animal {
  transform: translateX(-50%) translate3d(146px, -34px, 140px) rotateY(-12deg) rotate(-7deg) scale(1.08);
  z-index: 9;
  filter: none;
}

.treasure-stage.success .animal::before {
  animation: animal-happy-glow 900ms ease-out 120ms forwards;
}

.treasure-stage.success .animal::after {
  animation: animal-happy-flash 1100ms ease-out 80ms forwards;
}

.treasure-stage.success .cage {
  filter: drop-shadow(0 0 16px rgba(255, 210, 123, 0.35));
}

.treasure-stage.success .cage-body {
  overflow: visible;
}

.treasure-stage.success .lock-wrapper {
  animation: unlock-launch 1200ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
  filter:
    drop-shadow(0 12px 15px rgba(122, 74, 26, 0.2))
    drop-shadow(0 0 20px rgba(255, 188, 102, 0.42));
}

.treasure-stage.success .lock-wrapper::before {
  animation: lock-ring 760ms ease-out 120ms forwards;
}

.treasure-stage.success .lock-wrapper::after {
  animation: lock-spark 920ms ease-out 80ms forwards;
}

.treasure-stage.success .lock-shackle {
  animation: shackle-open 860ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
  filter: brightness(1.16);
}

.treasure-stage.success .lock-body {
  animation: lock-body-flash 540ms ease-out 120ms forwards;
}

.treasure-stage.shake .lock-wrapper,
.treasure-stage.shake .cage {
  animation-duration: 420ms;
  animation-timing-function: ease;
}

.treasure-stage.shake .lock-wrapper {
  animation-name: shake-lock;
}

.treasure-stage.shake .cage {
  animation-name: shake-cage;
}

.primary-button,
.secondary-button,
.ghost-button {
  border-radius: 14px;
  font-weight: 900;
  transition: transform 180ms ease, filter 180ms ease, background 180ms ease;
}

.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover {
  transform: translateY(-2px);
}

.primary-button {
  padding: clamp(10px, 1.4vh, 14px) clamp(14px, 2vw, 22px);
  color: #0f2f34;
  background: linear-gradient(140deg, #ffd46a 0%, #a5ff8b 33%, #79f2d8 64%, #8eb6ff 100%);
  box-shadow:
    0 10px 20px rgba(39, 52, 121, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.secondary-button {
  padding: 10px 16px;
  color: #e9faff;
  background: linear-gradient(140deg, rgba(71, 114, 222, 0.74), rgba(20, 161, 182, 0.72));
  border: 1px solid rgba(202, 243, 255, 0.44);
}

.ghost-button {
  padding: clamp(8px, 1.1vh, 10px) clamp(10px, 1.2vw, 12px);
  color: #e9faff;
  font-size: clamp(0.76rem, 1.5vmin, 0.9rem);
  letter-spacing: 0.04em;
  background: linear-gradient(140deg, rgba(77, 108, 211, 0.66), rgba(28, 145, 191, 0.66));
  border: 1px solid rgba(203, 243, 255, 0.4);
  box-shadow: inset 0 1px 0 rgba(205, 245, 255, 0.24);
}

.mission-panel {
  padding: 0;
  min-height: 0;
}

.mission-strip {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(6px, 0.9vh, 10px);
  margin: 0;
  border-radius: 14px;
}

.mission-top {
  display: flex;
}

.mission-intro {
  display: grid;
}

.mission-note {
  margin: 0;
}

.badges {
  display: grid;
  gap: clamp(5px, 0.7vh, 8px);
}

.badge {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: clamp(30px, 4.1vh, 36px);
  padding: 0 clamp(8px, 1vw, 11px);
  border-radius: 999px;
  border: 1px solid rgba(210, 245, 255, 0.36);
  background: linear-gradient(140deg, rgba(72, 106, 214, 0.52), rgba(30, 138, 188, 0.5));
  font-weight: 800;
  color: #e6f9ff;
  font-size: clamp(0.75rem, 1.5vmin, 0.86rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-accent {
  background: linear-gradient(140deg, rgba(255, 205, 94, 0.42), rgba(140, 255, 173, 0.28), rgba(255, 153, 191, 0.28));
  color: #fff7e6;
}

#stageLength {
  background: linear-gradient(140deg, #ffe4ac, #f7bf76);
  border-color: rgba(201, 132, 46, 0.7);
  color: #1f3f7a;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(4px, 0.7vh, 8px);
}

.status-card {
  border-radius: 12px;
  padding: clamp(5px, 0.8vh, 8px) clamp(4px, 0.8vw, 7px);
  border: 1px solid rgba(213, 246, 255, 0.3);
  background: linear-gradient(150deg, rgba(60, 94, 205, 0.52), rgba(25, 132, 188, 0.48));
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(205, 247, 255, 0.2);
}

.status-title {
  font-size: clamp(0.48rem, 1vmin, 0.62rem);
}

.status-value {
  display: block;
  margin-top: 2px;
  font-weight: 900;
  font-size: clamp(0.75rem, 1.6vmin, 0.98rem);
  color: #f1fcff;
}

.progress-block {
  width: 100%;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.progress-header strong {
  font-size: clamp(0.66rem, 1.3vmin, 0.84rem);
  color: #ecfbff;
}

.progress-track,
.route-step-bar {
  width: 100%;
  height: clamp(6px, 0.9vh, 9px);
  border-radius: 999px;
  margin-top: clamp(4px, 0.7vh, 7px);
  border: 1px solid rgba(220, 247, 255, 0.36);
  background: rgba(49, 83, 182, 0.5);
  overflow: hidden;
}

.progress-fill,
.route-step-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff9f1a, #ff7a00, #ffae42);
  box-shadow: 0 0 14px rgba(255, 122, 0, 0.65);
  transition: width 360ms ease;
}

.route-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: clamp(8px, 1.1vh, 12px);
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.route-mission {
  padding: clamp(8px, 1vh, 11px);
  border-radius: 14px;
  border: 1px solid rgba(193, 233, 255, 0.5);
  background: linear-gradient(148deg, #2d4f9d, #1d608f);
}

.route-mission .badge {
  min-height: clamp(27px, 3.7vh, 31px);
  font-size: clamp(0.86rem, 1.7vmin, 1.02rem);
  justify-content: center;
  text-align: center;
}

.route-mission .status-card {
  padding: clamp(4px, 0.7vh, 6px) 4px;
}

.route-mission .status-title {
  font-size: clamp(0.58rem, 1.1vmin, 0.72rem);
}

.route-mission .status-value {
  font-size: clamp(0.92rem, 1.8vmin, 1.14rem);
}

.route-panel .section-label {
  font-size: clamp(0.82rem, 1.55vmin, 1rem);
  font-weight: 900;
  text-align: center;
}

.route-list {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: clamp(5px, 0.8vh, 8px);
}

.route-step {
  min-height: 0;
  padding: clamp(5px, 0.8vh, 8px) clamp(8px, 1vw, 11px);
  border-radius: 14px;
  border: 1px solid rgba(192, 232, 255, 0.42);
  background: linear-gradient(148deg, #2b4a95, #1b5a84);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "number title"
    "bar bar";
  gap: clamp(2px, 0.45vh, 5px) 8px;
  align-content: center;
}

.route-step.current {
  background:
    linear-gradient(135deg, #3d61b5, #2e6f9f);
  border-color: rgba(255, 218, 130, 0.62);
}

.route-step.done {
  background:
    linear-gradient(135deg, #2f6b70, #2c5f88);
  border-color: rgba(144, 248, 190, 0.62);
}

.route-step.done .route-step-fill {
  width: 100%;
}

.route-step-number {
  grid-area: number;
  margin: 0;
  font-size: clamp(0.72rem, 1.35vmin, 0.9rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 900;
  color: #b8e7f8;
}

.route-step-title {
  grid-area: title;
  margin: 0;
  font-weight: 800;
  font-size: clamp(0.92rem, 1.8vmin, 1.15rem);
  color: #ecfbff;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-step-bar {
  grid-area: bar;
  margin-top: 0;
}

.reward-card {
  margin-top: 14px;
}

.reward-name {
  display: block;
  margin-top: 8px;
}

.reward-copy {
  margin: 8px 0 0;
}

.meadow {
  position: absolute;
  inset: auto 0 0;
  height: clamp(74px, 12vh, 130px);
  z-index: -1;
  opacity: 0.9;
}

.hill,
.flower,
.grass {
  position: absolute;
  bottom: 0;
}

.hill {
  width: clamp(180px, 24vw, 320px);
  height: clamp(60px, 9vh, 116px);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, #88f59d, #42a76e);
  box-shadow: 0 -8px 20px rgba(27, 109, 77, 0.28);
}

.hill-left {
  left: -26px;
}

.hill-right {
  right: -20px;
}

.flower {
  width: clamp(30px, 4.5vw, 52px);
  height: clamp(70px, 11vh, 120px);
}

.flower::before {
  content: "";
  position: absolute;
  left: 46%;
  bottom: 0;
  width: 4px;
  height: 72%;
  border-radius: 999px;
  background: linear-gradient(180deg, #92f195, #2b8459);
}

.flower::after {
  content: "";
  position: absolute;
  left: 24%;
  top: 8%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow:
    0 -10px 0 0 var(--flower-color),
    0 10px 0 0 var(--flower-color),
    -10px 0 0 0 var(--flower-color),
    10px 0 0 0 var(--flower-color);
  background: #fff7b7;
}

.flower-a { left: 14%; --flower-color: #ff909e; }
.flower-b { left: 27%; --flower-color: #ffd28c; }
.flower-c { right: 22%; --flower-color: #83d0ff; }
.flower-d { right: 10%; --flower-color: #8ce7a0; }

.grass {
  width: clamp(40px, 6vw, 76px);
  height: clamp(72px, 11vh, 132px);
  transform-origin: bottom center;
  animation: sway 7s ease-in-out infinite;
}

.grass::before,
.grass::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: clamp(8px, 1.1vw, 14px);
  height: 100%;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, #9af594, #3b955e);
}

.grass::before {
  left: 36%;
  transform: rotate(-10deg);
}

.grass::after {
  right: 26%;
  height: 84%;
  transform: rotate(14deg);
}

.grass-left { left: 35%; }
.grass-mid { left: 52%; animation-duration: 8.4s; }
.grass-right { right: 32%; animation-duration: 9.2s; }

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: clamp(10px, 1.8vh, 18px);
  background: rgba(34, 42, 112, 0.45);
  backdrop-filter: blur(9px);
}

.overlay-card {
  pointer-events: auto;
  width: min(620px, 100%);
  max-height: 94svh;
  overflow: hidden;
  padding: clamp(18px, 2.8vh, 30px);
  border-radius: 24px;
  border: 1px solid rgba(219, 246, 255, 0.46);
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 220, 132, 0.42), rgba(255, 220, 132, 0)),
    radial-gradient(circle at 82% 78%, rgba(144, 255, 210, 0.28), rgba(144, 255, 210, 0)),
    linear-gradient(160deg, rgba(54, 87, 206, 0.9), rgba(19, 126, 174, 0.9));
  box-shadow: 0 24px 50px rgba(24, 32, 109, 0.42);
}

.overlay-card p {
  color: #d9f3fb;
  line-height: 1.45;
}

.start-overlay .overlay-card p {
  font-size: clamp(1.34rem, 2.9vmin, 1.72rem);
}

.overlay-button {
  margin-top: 16px;
}

.start-overlay .overlay-button {
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: #1f3f7a;
  font-size: clamp(1.2rem, 2.8vmin, 1.7rem);
  font-weight: 900;
  padding: clamp(18px, 2.4vh, 28px) clamp(36px, 5.2vw, 62px);
  border-radius: 18px;
  letter-spacing: 0.04em;
  background: linear-gradient(140deg, #ffb347 0%, #ff8c2a 52%, #ff7a00 100%);
  box-shadow:
    0 14px 26px rgba(255, 122, 0, 0.38),
    inset 0 1px 0 rgba(255, 232, 193, 0.6);
}

.overlay-logo {
  display: block;
  width: clamp(144px, 21vmin, 216px);
  height: auto;
  margin: 0 auto 10px;
  filter:
    drop-shadow(0 10px 18px rgba(24, 40, 110, 0.4))
    drop-shadow(0 14px 16px rgba(0, 0, 0, 0.22))
    drop-shadow(0 0 7px rgba(174, 246, 255, 0.28));
}

@keyframes cloud-float {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  16% {
    opacity: 0.85;
  }
  100% {
    transform: translate3d(calc(var(--drift) * 1px), 118vh, 0);
    opacity: 0;
  }
}

@keyframes forest-cloud-drift {
  0%,
  100% {
    transform: translateX(0) scale(var(--cloud-scale));
  }
  50% {
    transform: translateX(12px) scale(var(--cloud-scale));
  }
}

@keyframes forest-grass-sway {
  0%,
  100% {
    transform: rotate(0deg);
  }
  35% {
    transform: rotate(-4deg);
  }
  70% {
    transform: rotate(3.5deg);
  }
}

@keyframes butterfly-fly {
  0% {
    transform: translateX(-12vw) translateY(0);
  }
  50% {
    transform: translateX(60vw) translateY(-16px);
  }
  100% {
    transform: translateX(126vw) translateY(12px);
  }
}

@keyframes ribbon-wave {
  0%,
  100% {
    transform: rotate(0deg) translateX(0);
  }
  50% {
    transform: rotate(2.8deg) translateX(6px);
  }
}

@keyframes sway {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(6deg);
  }
}

@keyframes shake-lock {
  0%,
  100% {
    transform: translateX(-50%) translateZ(190px);
  }
  20% {
    transform: translateX(calc(-50% - 7px)) translateZ(190px);
  }
  40% {
    transform: translateX(calc(-50% + 6px)) translateZ(190px);
  }
  60% {
    transform: translateX(calc(-50% - 4px)) translateZ(190px);
  }
  80% {
    transform: translateX(calc(-50% + 4px)) translateZ(190px);
  }
}

@keyframes unlock-launch {
  0% {
    transform: translateX(-50%) translateY(0) translateZ(190px) rotate(0deg) scale(1);
  }
  28% {
    transform: translateX(-50%) translateY(-14px) translateZ(210px) rotate(-6deg) scale(1.06);
  }
  58% {
    transform: translateX(-50%) translateY(-48px) translateZ(228px) rotate(-18deg) scale(0.94);
  }
  100% {
    transform: translateX(-50%) translateY(-88px) translateZ(248px) rotate(-26deg) scale(0.82);
  }
}

@keyframes shackle-open {
  0% {
    transform: rotate(0deg) translateY(0);
  }
  35% {
    transform: rotate(-14deg) translateY(-2px);
  }
  100% {
    transform: rotate(-36deg) translateY(-4px);
  }
}

@keyframes lock-body-flash {
  0% {
    filter: brightness(1) saturate(1);
  }
  45% {
    filter: brightness(1.34) saturate(1.22);
  }
  100% {
    filter: brightness(1.08) saturate(1.12);
  }
}

@keyframes lock-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.22);
    opacity: 0.95;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.42);
    opacity: 0;
  }
}

@keyframes lock-spark {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0.36);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) rotate(112deg) scale(1.3);
    opacity: 0;
  }
}

@keyframes shake-cage {
  0%,
  100% {
    transform: translateX(var(--cage-x)) rotateY(0deg) translateZ(10px);
  }
  20% {
    transform: translateX(calc(var(--cage-x) - 8px)) rotateY(0deg) translateZ(10px);
  }
  40% {
    transform: translateX(calc(var(--cage-x) + 6px)) rotateY(0deg) translateZ(10px);
  }
  60% {
    transform: translateX(calc(var(--cage-x) - 4px)) rotateY(0deg) translateZ(10px);
  }
  80% {
    transform: translateX(calc(var(--cage-x) + 4px)) rotateY(0deg) translateZ(10px);
  }
}

@keyframes burst {
  0% {
    transform: translate(-50%, 0) scale(0.2);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--x)), calc(var(--y) * -1px)) rotate(var(--r)) scale(1);
    opacity: 0;
  }
}

@keyframes animal-bob {
  0%,
  100% {
    bottom: clamp(-130px, -17.2vmin, -64px);
  }
  50% {
    bottom: clamp(-122px, -16.2vmin, -58px);
  }
}

@keyframes animal-happy-glow {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0.96;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.25);
    opacity: 0;
  }
}

@keyframes animal-happy-flash {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(0.28);
    opacity: 0.9;
  }
  100% {
    transform: translate(-50%, -50%) rotate(140deg) scale(1.18);
    opacity: 0;
  }
}

@keyframes finish-confetti-fall {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateX(var(--drift)) translateY(108vh) rotate(var(--rot));
    opacity: 0;
  }
}

@media (max-width: 1100px) {
  .game-layout {
    grid-template-columns: minmax(0, 1fr) minmax(228px, 282px);
  }

  .animal {
    font-size: clamp(4.2rem, 10.8vmin, 7.6rem);
  }

  .treasure-stage.success .animal {
    transform: translateX(-50%) translate3d(98px, -24px, 64px) rotateY(-8deg) rotate(-8deg) scale(1.02);
  }
}

@media (max-width: 900px) {
  .rescue-shell {
    padding: 10px;
    gap: 8px;
  }

  .topbar {
    gap: 8px;
  }

  .game-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 8px;
  }

  .play-zone {
    gap: 8px;
  }

  .route-panel {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .route-list {
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }

  .treasure-stage {
    padding: 10px;
  }

  .animal-tag,
  .cage-input-inline,
  .restart-footer {
    width: 44%;
    right: 10px;
  }

  .cage {
    width: 54%;
    left: 0.8%;
  }

  .lock-wrapper {
    left: 27%;
  }

  .meadow {
    height: clamp(58px, 9vh, 96px);
    opacity: 0.82;
  }
}

@media (max-width: 620px) {
  .rescue-shell {
    padding: 8px;
  }

  .topbar {
    align-items: flex-start;
  }

  .brand {
    max-width: 72%;
  }

  .brand-logo {
    width: 64px;
  }

  .game-layout {
    grid-template-rows: minmax(0, 1.5fr) minmax(0, 1fr);
  }

  .libras-word {
    font-size: clamp(2rem, 8.4vmin, 3.6rem);
  }

  .treasure-stage {
    border-radius: 18px;
  }

  .cage {
    width: 53%;
    height: min(84%, 320px);
  }

  .animal {
    font-size: clamp(3.7rem, 13vmin, 5.8rem);
  }

  .lock-wrapper {
    top: 16%;
    width: clamp(62px, 9.4vmin, 82px);
  }

  .animal-tag,
  .cage-input-inline,
  .restart-footer {
    width: 45%;
  }

  .treasure-caption {
    font-size: clamp(0.76rem, 2.45vmin, 1rem);
  }

  .cage-input-inline input {
    font-size: 0.86rem;
    padding: 8px 10px;
    border-radius: 12px;
  }

  .ghost-button {
    font-size: 0.72rem;
    padding: 7px 9px;
  }

  .panel,
  .route-mission {
    padding: 7px;
  }

  .route-step {
    padding: 5px 7px;
  }

  .route-step-title {
    font-size: clamp(0.78rem, 2.5vmin, 0.94rem);
  }

  .route-step-number {
    font-size: clamp(0.62rem, 2.05vmin, 0.74rem);
  }

  .route-panel .section-label {
    font-size: 0.72rem;
  }

  .status-value {
    font-size: 0.7rem;
  }

  .status-title {
    font-size: 0.44rem;
  }

  .badge {
    font-size: 0.67rem;
    min-height: 24px;
  }

  .overlay-card {
    width: min(520px, 100%);
  }
}

@media (max-height: 760px) {
  .rescue-shell {
    padding-top: 8px;
    padding-bottom: 8px;
    gap: 8px;
  }

  .game-layout,
  .play-zone {
    gap: 8px;
  }

  .panel {
    padding: 9px;
  }

  .sign-panel {
    padding: 5px 10px;
  }

  .treasure-stage {
    padding: 9px;
  }

  .cage-input-inline {
    height: 56%;
  }

  .treasure-caption {
    font-size: clamp(0.8rem, 2vmin, 1.06rem);
  }
}

@media (max-height: 640px) {
  .brand h1 {
    font-size: clamp(1rem, 2.4vw, 1.4rem);
  }

  .brand-logo {
    width: clamp(52px, 7.5vw, 86px);
  }

  .game-layout {
    grid-template-columns: minmax(0, 1fr) minmax(208px, 250px);
  }

  .route-panel {
    gap: 6px;
  }

  .route-list {
    gap: 4px;
  }

  .route-step {
    padding: 4px 6px;
    border-radius: 10px;
  }

  .route-step-title {
    font-size: clamp(0.7rem, 1.45vmin, 0.88rem);
  }

  .route-step-number {
    font-size: clamp(0.58rem, 1.1vmin, 0.72rem);
  }

  .status-grid {
    gap: 3px;
  }

  .status-card {
    padding: 3px 3px;
  }

  .badge {
    min-height: 22px;
    font-size: clamp(0.6rem, 1.1vmin, 0.74rem);
  }

  .cage-input-inline input {
    padding: 7px 9px;
    font-size: clamp(0.76rem, 1.5vmin, 0.88rem);
  }

  .ghost-button {
    padding: 6px 9px;
  }
}

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