:root {
  color-scheme: dark;
  --ink: #f8f5ff;
  --muted: #b9adc9;
  --dim: #81738f;
  --night: #0b0714;
  --night-soft: #120b21;
  --surface: rgba(29, 18, 47, 0.76);
  --surface-solid: #1a102b;
  --surface-high: #28183e;
  --line: rgba(220, 205, 255, 0.14);
  --line-strong: rgba(220, 205, 255, 0.28);
  --lilac-50: #f6f1ff;
  --lilac-100: #ebe1ff;
  --lilac-200: #d8c7ff;
  --lilac-300: #bba1ff;
  --lilac-400: #9d7bea;
  --lilac-500: #7f5bc5;
  --lilac-700: #51347e;
  --lilac-900: #2a1940;
  --shadow: 0 28px 80px rgba(2, 0, 9, 0.5);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--night);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 10%, rgba(108, 72, 169, 0.18), transparent 30rem),
    radial-gradient(circle at 90% 70%, rgba(80, 48, 125, 0.13), transparent 34rem),
    var(--night);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button,
audio,
video {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--lilac-200);
  outline-offset: 4px;
}

button:disabled {
  cursor: default;
}

.skip-link {
  position: fixed;
  top: 0;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1rem;
  transform: translateY(-120%);
  border-radius: 0 0 0.75rem 0.75rem;
  background: var(--lilac-100);
  color: var(--night);
}

.skip-link:focus {
  transform: translateY(0);
}

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient__orb {
  position: absolute;
  width: 20rem;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.18;
  filter: blur(80px);
  background: var(--lilac-500);
}

.ambient__orb--one {
  top: -10rem;
  right: -12rem;
}

.ambient__orb--two {
  bottom: -13rem;
  left: -10rem;
  background: var(--lilac-700);
}

.ambient__star {
  position: absolute;
  color: rgba(235, 225, 255, 0.38);
  animation: starFloat 7s ease-in-out infinite;
}

.ambient__star--one { top: 18%; left: 9%; }
.ambient__star--two { top: 38%; right: 13%; font-size: 1.8rem; animation-delay: -2s; }
.ambient__star--three { bottom: 15%; left: 18%; animation-delay: -4s; }

.particle-layer {
  position: fixed;
  inset: 0;
  z-index: 150;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  color: var(--color, var(--lilac-200));
  font-size: var(--size, 1rem);
  animation: particleBurst 1.3s var(--ease) forwards;
}

.eyebrow {
  margin: 0 0 0.7rem;
  color: var(--lilac-300);
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.2em;
  line-height: 1.3;
  text-transform: uppercase;
}

.screen {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  padding: calc(2rem + env(safe-area-inset-top)) 1.4rem calc(1.5rem + env(safe-area-inset-bottom));
  overflow: hidden;
}

.screen[hidden],
.gift-home[hidden] {
  display: none;
}

.screen__content {
  width: min(100%, 33rem);
  text-align: center;
}

.intro-screen::before,
.gift-screen::before {
  content: "";
  position: absolute;
  width: min(88vw, 32rem);
  aspect-ratio: 1;
  border: 1px solid rgba(216, 199, 255, 0.08);
  border-radius: 50%;
  box-shadow:
    0 0 0 3.5rem rgba(216, 199, 255, 0.025),
    0 0 0 8rem rgba(216, 199, 255, 0.018);
}

.intro-card {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.intro-card h1,
.gift-stage h2 {
  max-width: 19rem;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 10vw, 3.9rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.02;
  text-wrap: balance;
}

.intro-card__instruction {
  max-width: 18rem;
  margin: 1rem auto 1.75rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.heart-button {
  position: relative;
  display: grid;
  width: 9.4rem;
  aspect-ratio: 1;
  margin: 0;
  padding: 0.8rem;
  border: 0;
  place-items: center;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 180ms var(--ease);
}

.heart-button::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  opacity: 0.3;
  filter: blur(18px);
  background: var(--lilac-500);
  transition: opacity 300ms ease, transform 300ms ease;
}

.heart-button:active {
  transform: scale(0.92);
}

.heart-button.is-tapped {
  animation: heartTap 420ms var(--ease);
}

.heart-button.is-complete {
  animation: heartComplete 900ms var(--ease) both;
}

.heart-button.is-complete::before {
  opacity: 0.75;
  transform: scale(1.3);
}

.heart-button__outline {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: visible;
  filter: drop-shadow(0 12px 30px rgba(126, 91, 197, 0.3));
}

.heart-button__stroke {
  fill: rgba(255, 255, 255, 0.025);
  stroke: var(--lilac-200);
  stroke-width: 2.2;
}

.heart-button__fill {
  fill: url(#heart-gradient);
  transition: y 500ms var(--ease);
}

.heart-button__shine {
  fill: none;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-linecap: round;
  stroke-width: 3;
}

.heart-button__percent {
  position: absolute;
  z-index: 2;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 8px rgba(12, 7, 20, 0.7);
}

.loading-status {
  width: min(100%, 18rem);
  margin-top: 1.25rem;
}

.progress-track {
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(235, 225, 255, 0.12);
}

.progress-track__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--lilac-500), var(--lilac-100));
  box-shadow: 0 0 18px var(--lilac-400);
  transition: width 500ms var(--ease);
}

.loading-status p {
  min-height: 1.5em;
  margin: 0.8rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.signature-mark {
  position: absolute;
  bottom: calc(1.2rem + env(safe-area-inset-bottom));
  left: 50%;
  z-index: 2;
  margin: 0;
  transform: translateX(-50%);
  color: var(--dim);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.gift-screen {
  opacity: 0;
  transition: opacity 650ms ease;
}

.gift-screen.is-active {
  opacity: 1;
}

.gift-stage {
  position: relative;
  z-index: 2;
}

.gift-stage h2 {
  margin-inline: auto;
  font-size: clamp(2.4rem, 11vw, 4.2rem);
}

.gift-button {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 17rem;
  margin: 2.3rem auto 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}

.gift-box {
  position: relative;
  display: block;
  width: 12rem;
  height: 10rem;
  animation: giftFloat 3s ease-in-out infinite;
}

.gift-box__body,
.gift-box__lid {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(135deg, #9d7bea 0%, #64429c 80%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--shadow);
}

.gift-box__body {
  bottom: 1rem;
  width: 10rem;
  height: 6.6rem;
  border-radius: 0.65rem 0.65rem 1.1rem 1.1rem;
}

.gift-box__lid {
  z-index: 4;
  top: 1.85rem;
  width: 11.1rem;
  height: 2.4rem;
  border-radius: 0.7rem;
  transform-origin: 85% 100%;
}

.gift-box__ribbon {
  position: absolute;
  z-index: 5;
  top: 1.85rem;
  bottom: 1rem;
  left: calc(50% - 0.85rem);
  width: 1.7rem;
  border-inline: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(90deg, #cdbaff, #a98ded, #d9ccff);
}

.gift-box__knot {
  position: absolute;
  top: -1rem;
  left: calc(50% - 0.8rem);
  z-index: 3;
  width: 1.6rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--lilac-200);
}

.gift-box__bow {
  position: absolute;
  top: -2.35rem;
  width: 3.8rem;
  height: 2.5rem;
  border: 0.75rem solid var(--lilac-300);
  border-radius: 70% 35% 65% 40%;
}

.gift-box__bow--left {
  right: 50%;
  transform: rotate(12deg);
}

.gift-box__bow--right {
  left: 50%;
  transform: scaleX(-1) rotate(12deg);
}

.gift-box__glow {
  position: absolute;
  inset: -2rem -1rem 0;
  border-radius: 50%;
  opacity: 0.38;
  filter: blur(35px);
  background: var(--lilac-500);
}

.gift-box__shadow {
  position: absolute;
  bottom: 0.2rem;
  left: 50%;
  width: 9rem;
  height: 1.2rem;
  transform: translateX(-50%);
  border-radius: 50%;
  filter: blur(8px);
  background: rgba(0, 0, 0, 0.5);
}

.gift-button__label {
  display: inline-flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.3rem;
  padding: 0 1.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--lilac-50);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.gift-button.is-opening .gift-box {
  animation: giftOpen 1.2s var(--ease) both;
}

.gift-button.is-opening .gift-box__lid {
  animation: lidOpen 950ms var(--ease) 120ms both;
}

.gift-button.is-opening .gift-box__ribbon {
  animation: ribbonFade 500ms ease 280ms forwards;
}

.gift-home {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  opacity: 0;
  transition: opacity 700ms ease;
}

.gift-home.is-active {
  opacity: 1;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  min-height: calc(4.6rem + env(safe-area-inset-top));
  align-items: center;
  justify-content: space-between;
  padding: calc(0.75rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0.75rem max(1rem, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(220, 205, 255, 0.08);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  background: rgba(11, 7, 20, 0.76);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.05;
}

.topbar__brand small,
.music-button__copy small {
  display: block;
  margin-bottom: 0.22rem;
  color: var(--dim);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.topbar__mark {
  display: grid;
  width: 2.15rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(187, 161, 255, 0.18), rgba(127, 91, 197, 0.06));
  color: var(--lilac-100);
  font-size: 1.1rem;
}

.music-button {
  display: flex;
  min-height: 2.8rem;
  align-items: center;
  gap: 0.7rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--ink);
  cursor: pointer;
}

.music-button__copy {
  text-align: left;
  line-height: 1;
}

.music-button__copy small {
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
}

.music-button__copy strong {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
}

.music-button__bars {
  display: flex;
  width: 1.3rem;
  height: 1.3rem;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 50%;
  background: rgba(187, 161, 255, 0.15);
}

.music-button__bars i {
  width: 2px;
  height: 35%;
  border-radius: 9px;
  background: var(--lilac-200);
}

.music-button[aria-pressed="true"] .music-button__bars i {
  animation: equalizer 700ms ease-in-out infinite alternate;
}

.music-button[aria-pressed="true"] .music-button__bars i:nth-child(2) { animation-delay: -350ms; }
.music-button[aria-pressed="true"] .music-button__bars i:nth-child(3) { animation-delay: -120ms; }

.home-shell {
  width: min(100%, 70rem);
  margin: 0 auto;
  padding: 2.2rem max(1.1rem, env(safe-area-inset-right)) calc(3rem + env(safe-area-inset-bottom)) max(1.1rem, env(safe-area-inset-left));
}

.home-hero {
  display: grid;
  align-items: end;
  gap: 1.7rem;
  padding: 1.3rem 0 2.2rem;
}

.home-hero h1 {
  max-width: 18rem;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.35rem, 16vw, 7rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.86;
}

.home-hero h1 em {
  display: block;
  color: var(--lilac-300);
  font-weight: 400;
}

.home-hero__copy > p:last-child {
  max-width: 29rem;
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.home-hero__seal {
  display: none;
  width: 8rem;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--lilac-200);
  font-family: var(--serif);
  font-size: 1.5rem;
  transform: rotate(-8deg);
}

.home-hero__seal i {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-style: normal;
}

.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 -0.25rem 3rem;
  padding: 1rem 0;
  border-block: 1px solid var(--line);
}

.timeline__item {
  min-width: 0;
  padding: 0.25rem 0.7rem;
  border-right: 1px solid var(--line);
}

.timeline__item:last-child {
  border: 0;
}

.timeline__item strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--lilac-200);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.timeline__item span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.section-heading h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.section-heading > p {
  flex: 0 0 auto;
  margin: 0 0 0.15rem;
  color: var(--dim);
  font-size: 0.75rem;
}

.gift-grid {
  display: grid;
  gap: 0.8rem;
}

.gift-card {
  position: relative;
  display: grid;
  min-height: 11.5rem;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 1.35rem;
  background:
    linear-gradient(145deg, rgba(72, 46, 108, 0.34), rgba(24, 15, 39, 0.82)),
    var(--surface-solid);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 18px 40px rgba(2, 0, 9, 0.13);
  transition: transform 260ms var(--ease), border-color 260ms ease, background 260ms ease;
}

.gift-card::before {
  content: "";
  position: absolute;
  top: -4rem;
  right: -4rem;
  width: 9rem;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.18;
  filter: blur(24px);
  background: var(--lilac-400);
}

.gift-card:active {
  transform: scale(0.975);
}

.gift-card.is-visited {
  border-color: rgba(187, 161, 255, 0.28);
}

.gift-card.is-visited::after {
  content: "ABIERTO";
  position: absolute;
  top: 1.08rem;
  right: 3rem;
  color: var(--lilac-300);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.gift-card--final {
  border-color: rgba(187, 161, 255, 0.23);
  background:
    radial-gradient(circle at 80% 20%, rgba(187, 161, 255, 0.16), transparent 10rem),
    linear-gradient(135deg, rgba(63, 39, 98, 0.62), rgba(20, 12, 34, 0.94));
}

.gift-card--pixel .gift-card__icon {
  border-radius: 0.25rem;
  image-rendering: pixelated;
}

.gift-card__number {
  position: relative;
  z-index: 1;
  grid-column: 1;
  color: var(--dim);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.gift-card__icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 2.6rem;
  aspect-ratio: 1;
  grid-column: 2;
  grid-row: 1 / 3;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(235, 225, 255, 0.055);
  color: var(--lilac-200);
  font-size: 1.25rem;
}

.gift-card__text {
  position: relative;
  z-index: 1;
  display: flex;
  align-self: end;
  flex-direction: column;
  grid-column: 1 / 3;
  grid-row: 3;
}

.gift-card__text strong {
  max-width: 14rem;
  font-family: var(--serif);
  font-size: 1.42rem;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.gift-card__text small {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.gift-card__arrow {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 2;
  color: var(--lilac-300);
  font-size: 0.9rem;
}

.home-footer {
  display: grid;
  grid-template-columns: 3rem 1fr 3rem;
  align-items: center;
  margin-top: 2.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--dim);
  text-align: center;
}

.home-footer p {
  margin: 0;
  font-size: 0.75rem;
}

.home-footer > span {
  font-size: 0.75rem;
}

.cat-secret {
  width: 3rem;
  min-height: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(187, 161, 255, 0.38);
  font-size: 1rem;
  cursor: pointer;
}

.experience-dialog,
.memory-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--night);
  color: var(--ink);
}

.experience-dialog::backdrop,
.memory-dialog::backdrop {
  background: rgba(4, 1, 9, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.experience-dialog[open],
.memory-dialog[open] {
  animation: dialogIn 440ms var(--ease) both;
}

.dialog-shell {
  min-height: 100%;
  background:
    radial-gradient(circle at 92% 5%, rgba(104, 70, 160, 0.18), transparent 22rem),
    var(--night);
}

.dialog-header {
  position: sticky;
  top: 0;
  z-index: 15;
  display: grid;
  min-height: calc(5rem + env(safe-area-inset-top));
  grid-template-columns: 3rem 1fr 3rem;
  align-items: center;
  gap: 0.55rem;
  padding: calc(0.8rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0.8rem max(1rem, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  background: rgba(11, 7, 20, 0.86);
  text-align: center;
}

.dialog-header .eyebrow {
  margin-bottom: 0.2rem;
  font-size: 0.75rem;
}

.dialog-header h2 {
  margin: 0;
  overflow: hidden;
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialog-back,
.memory-viewer__header button {
  display: grid;
  width: 2.8rem;
  min-height: 2.8rem;
  padding: 0;
  border: 1px solid var(--line);
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
}

.dialog-content {
  width: min(100%, 68rem);
  margin: 0 auto;
  padding: 1.8rem max(1.1rem, env(safe-area-inset-right)) calc(3rem + env(safe-area-inset-bottom)) max(1.1rem, env(safe-area-inset-left));
}

.section-intro {
  max-width: 36rem;
  margin: 0 auto 2rem;
  color: var(--muted);
  text-align: center;
}

.section-intro strong {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.75rem, 7vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.section-intro p {
  margin: 0;
}

.polaroid-rail {
  display: grid;
  grid-auto-columns: min(78vw, 18rem);
  grid-auto-flow: column;
  gap: 1rem;
  margin-inline: -1.1rem;
  padding: 0.8rem 1.1rem 2.2rem;
  overflow-x: auto;
  scroll-padding-inline: 1.1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.polaroid-rail::-webkit-scrollbar { display: none; }

.polaroid {
  position: relative;
  scroll-snap-align: center;
  padding: 0.7rem 0.7rem 1rem;
  border: 0;
  border-radius: 0.35rem;
  background: var(--lilac-50);
  color: #261d31;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.36);
  transform: rotate(var(--tilt, -1deg));
  transition: transform 250ms var(--ease);
}

.polaroid:nth-child(3n + 2) { --tilt: 1.5deg; }
.polaroid:nth-child(3n) { --tilt: -0.7deg; }

.polaroid:active {
  transform: rotate(0) scale(0.97);
}

.polaroid::before {
  content: "";
  position: absolute;
  top: -0.45rem;
  left: 50%;
  z-index: 2;
  width: 3.5rem;
  height: 1.1rem;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(218, 204, 255, 0.72);
  box-shadow: 0 1px 3px rgba(21, 11, 35, 0.2);
}

.polaroid__image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #d8cbed;
}

.polaroid__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.9) contrast(0.98);
}

.polaroid__index {
  display: block;
  margin-top: 0.72rem;
  color: #776983;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.polaroid strong {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--serif);
  font-size: 1.03rem;
  font-weight: 400;
  line-height: 1.2;
}

.rail-hint {
  margin: -0.8rem 0 0;
  color: var(--dim);
  font-size: 0.75rem;
  text-align: center;
}

.memory-dialog {
  background: rgba(8, 4, 15, 0.98);
}

.memory-viewer {
  display: flex;
  width: min(100%, 40rem);
  min-height: 100%;
  flex-direction: column;
  margin: 0 auto;
  padding: calc(0.9rem + env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

.memory-viewer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.memory-viewer__header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.memory-viewer__header button {
  font-size: 1.5rem;
}

.memory-viewer figure {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  margin: 1rem 0;
}

.memory-viewer__image-wrap {
  display: grid;
  min-height: 44vh;
  max-height: 58vh;
  overflow: hidden;
  place-items: center;
  border-radius: 1rem;
  background: var(--surface-high);
  box-shadow: var(--shadow);
}

.memory-viewer__image-wrap img {
  width: 100%;
  height: 100%;
  max-height: 58vh;
  display: block;
  object-fit: contain;
}

.memory-viewer figcaption {
  padding: 1.25rem 0.2rem 0;
}

.memory-viewer figcaption h3 {
  margin: 0 0 0.45rem;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 7vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.memory-viewer figcaption p {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
}

.memory-viewer__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.memory-viewer__nav button,
.primary-button,
.secondary-button {
  min-height: 3.2rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.primary-button {
  border-color: transparent;
  background: var(--lilac-200);
  color: #1d102d;
  box-shadow: 0 14px 32px rgba(111, 76, 166, 0.28);
}

.notes-grid {
  display: grid;
  gap: 0.85rem;
}

.note-card {
  position: relative;
  width: 100%;
  min-height: 10rem;
  overflow: hidden;
  padding: 1.25rem;
  border: 1px solid rgba(70, 49, 88, 0.13);
  border-radius: 0.25rem 0.25rem 1rem 0.25rem;
  background: #eee6ff;
  color: #2d2335;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.19);
  transition: transform 330ms var(--ease), background 330ms ease;
}

.note-card:nth-child(even) {
  background: #ddd0f5;
  transform: rotate(0.6deg);
}

.note-card::after {
  content: "+";
  position: absolute;
  right: 1rem;
  bottom: 0.8rem;
  color: #7b6987;
  font-size: 1.3rem;
}

.note-card__number {
  display: block;
  margin-bottom: 1.3rem;
  color: #8c7a97;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.note-card strong {
  display: block;
  max-width: 18rem;
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.08;
}

.note-card p {
  display: none;
  margin: 0.8rem 1.4rem 0 0;
  color: #51445a;
  font-size: 0.9rem;
}

.note-card.is-open {
  min-height: 14rem;
  transform: rotate(0) translateY(-0.2rem);
  background: var(--lilac-50);
}

.note-card.is-open::after { content: "−"; }
.note-card.is-open p { display: block; animation: noteReveal 450ms var(--ease) both; }

.keepsake {
  width: min(100%, 36rem);
  margin: 0 auto;
}

.keepsake-card {
  position: relative;
  overflow: hidden;
  padding: 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: 1.6rem;
  background: linear-gradient(145deg, rgba(83, 51, 125, 0.34), rgba(26, 16, 43, 0.92));
  box-shadow: var(--shadow);
}

.keepsake-card__label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  color: var(--lilac-200);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.keepsake-card__label::before {
  content: "";
  width: 0.55rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lilac-300);
  box-shadow: 0 0 14px var(--lilac-300);
}

.keepsake-card__window {
  display: grid;
  min-height: 16rem;
  place-items: center;
  overflow: hidden;
  border-radius: 1rem;
  background:
    linear-gradient(rgba(20, 12, 34, 0.28), rgba(20, 12, 34, 0.72)),
    radial-gradient(circle at 40% 30%, #6d4e9c, #20142f 68%);
}

.keepsake-card__date {
  text-align: center;
}

.keepsake-card__date span {
  display: block;
  color: var(--lilac-300);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.keepsake-card__date strong {
  display: block;
  max-width: 17rem;
  margin-top: 0.5rem;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.05;
}

.keepsake-card__copy {
  padding: 1.2rem 0.2rem 0.2rem;
}

.keepsake-card__copy p {
  margin: 0 0 1rem;
  color: var(--muted);
}

.video-frame {
  display: none;
  overflow: hidden;
  border-radius: 1rem;
  background: #050307;
}

.video-frame.is-visible {
  display: block;
  animation: noteReveal 550ms var(--ease) both;
}

.video-frame video {
  width: 100%;
  max-height: 68svh;
  display: block;
  background: #000;
}

.video-help {
  margin: 0.7rem 0 0;
  color: var(--dim);
  font-size: 0.75rem;
}

.experience-dialog[data-section="minecraft"] {
  overflow: hidden;
  background: #101622;
}

.experience-dialog[data-section="minecraft"] .dialog-shell {
  display: flex;
  height: 100vh;
  height: 100dvh;
  min-height: 100svh;
  flex-direction: column;
  overflow: hidden;
  background: #101622;
}

.experience-dialog[data-section="minecraft"] .dialog-header {
  flex: 0 0 auto;
  border-color: rgba(216, 199, 255, 0.2);
  background: rgba(18, 11, 33, 0.94);
}

.experience-dialog[data-section="minecraft"] .dialog-content {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  padding: 0;
  overflow: hidden;
}

.mc-experience {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #101622;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

.mc-loading {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 1.5rem;
  overflow: hidden;
  background:
    linear-gradient(rgba(12, 17, 26, 0.92), rgba(16, 11, 27, 0.96)),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(216, 199, 255, 0.06) 31px 32px),
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(216, 199, 255, 0.06) 31px 32px),
    #101622;
  text-align: center;
  transition: opacity 220ms ease, transform 260ms ease;
}

.mc-loading.is-leaving {
  opacity: 0;
  transform: scale(1.025);
}

.mc-loading__block {
  position: relative;
  width: 4.6rem;
  height: 4.6rem;
  margin-bottom: 1.3rem;
  border: 4px solid #242a20;
  background:
    linear-gradient(90deg, transparent 70%, rgba(56, 38, 22, 0.32) 70%),
    linear-gradient(0deg, #754b2a 0 19%, #654023 19% 39%, #81552f 39% 60%, #6ca740 60% 72%, #559033 72% 100%);
  background-size: 18px 100%, 100% 100%;
  image-rendering: pixelated;
  box-shadow: inset 5px 5px rgba(255, 255, 255, 0.12), inset -6px -6px rgba(0, 0, 0, 0.2), 0 20px 35px rgba(0, 0, 0, 0.35);
  animation: mcLoadingBlock 1.5s steps(2, jump-none) infinite;
}

.mc-loading__block span {
  position: absolute;
  top: 0.65rem;
  left: 0.55rem;
  width: 0.55rem;
  height: 0.45rem;
  background: #91c757;
  box-shadow: 1.15rem -0.2rem #80b64a, 2.35rem 0.1rem #4f842e, 2rem 2.25rem #95643b, 0.4rem 2.65rem #5d391f;
}

.mc-loading__overline {
  margin: 0 0 0.35rem;
  color: #bba1ff;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mc-loading h3 {
  margin: 0;
  color: #f8f5ff;
  font-family: var(--serif);
  font-size: clamp(2rem, 10vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.045em;
}

.mc-loading__message {
  min-height: 1.5em;
  margin: 1.25rem 0 0.75rem;
  color: #ded7e8;
  font-size: 0.78rem;
}

.mc-loading__track {
  width: min(82vw, 20rem);
  height: 0.85rem;
  padding: 3px;
  border: 2px solid #9f91ae;
  background: #090c12;
  box-shadow: 4px 4px rgba(0, 0, 0, 0.26);
}

.mc-loading__track span {
  display: block;
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(90deg, #9d7bea 0 12px, #bba1ff 12px 15px);
  transition: width 260ms steps(4, end);
}

.mc-game {
  position: relative;
  width: min(100%, 52rem);
  height: 100%;
  min-height: 29rem;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(#62b6df 0%, #a9dced 62%, #cae8df 100%);
  color: #fff;
  image-rendering: pixelated;
}

.mc-game[hidden],
.mc-loading[hidden],
.mc-chest-panel[hidden],
.mc-complete[hidden] {
  display: none;
}

.mc-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.mc-sun {
  position: absolute;
  top: 8%;
  right: 8%;
  width: clamp(2.6rem, 11vw, 4rem);
  aspect-ratio: 1;
  background: #f6e4a2;
  box-shadow: 0 0 0 6px rgba(255, 244, 180, 0.16), 0 0 32px rgba(255, 239, 163, 0.4);
}

.mc-cloud {
  position: absolute;
  width: 5.5rem;
  height: 1.25rem;
  background: rgba(250, 255, 255, 0.83);
  box-shadow: 1.4rem -0.75rem rgba(250, 255, 255, 0.83), 3rem -0.25rem rgba(250, 255, 255, 0.83), 4.4rem 0 rgba(250, 255, 255, 0.83);
  animation: mcCloudDrift 18s linear infinite;
}

.mc-cloud--one {
  top: 25%;
  left: -7rem;
}

.mc-cloud--two {
  top: 43%;
  left: -10rem;
  opacity: 0.72;
  transform: scale(0.72);
  animation-delay: -10s;
  animation-duration: 24s;
}

.mc-quest {
  position: absolute;
  top: 0.75rem;
  left: max(0.75rem, env(safe-area-inset-left));
  z-index: 20;
  display: flex;
  width: min(calc(100% - 6.5rem), 19rem);
  min-height: 4.5rem;
  flex-direction: column;
  justify-content: center;
  padding: 0.65rem 0.8rem;
  border: 2px solid rgba(235, 225, 255, 0.58);
  background: rgba(19, 18, 24, 0.78);
  color: #fff;
  box-shadow: 5px 5px rgba(14, 19, 24, 0.22);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.mc-quest__step {
  color: #d8c7ff;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mc-quest strong {
  overflow: hidden;
  font-size: 0.76rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-quest > span:last-child {
  overflow: hidden;
  color: #d4d4d4;
  font-size: 0.58rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-announcement {
  position: absolute;
  top: 5.85rem;
  left: 50%;
  z-index: 21;
  width: max-content;
  max-width: calc(100% - 2rem);
  min-height: 1.8rem;
  margin: 0;
  transform: translateX(-50%);
  color: #19151e;
  font-family: var(--sans);
  font-size: 0.73rem;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.35);
}

.mc-hills {
  position: absolute;
  inset: auto 0 31% 0;
  z-index: 1;
  height: 24%;
  overflow: hidden;
  pointer-events: none;
}

.mc-hill {
  position: absolute;
  bottom: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(38, 65, 36, 0.14) 31px 32px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(38, 65, 36, 0.14) 31px 32px),
    #6b9d50;
  box-shadow: inset 0 8px #80bb59;
}

.mc-hill--one {
  left: -4%;
  width: 46%;
  height: 56%;
  box-shadow: 32px -32px #6b9d50, 64px -32px #6b9d50, 96px -64px #6b9d50, inset 0 8px #80bb59;
}

.mc-hill--two {
  right: -8%;
  width: 35%;
  height: 42%;
  opacity: 0.74;
  box-shadow: -32px -32px #6b9d50, -64px -32px #6b9d50, inset 0 8px #80bb59;
}

.mc-terrain {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  height: 34%;
  min-height: 9rem;
  background:
    linear-gradient(90deg, transparent 76%, rgba(68, 39, 22, 0.28) 76%),
    linear-gradient(0deg, transparent 72%, rgba(68, 39, 22, 0.25) 72%),
    linear-gradient(135deg, transparent 0 54%, rgba(151, 98, 54, 0.26) 54% 63%, transparent 63%),
    #78502f;
  background-size: 40px 100%, 100% 38px, 45px 45px, auto;
  box-shadow: inset 0 13px #5d8f3d, inset 0 20px #7db14c;
}

.mc-grass-edge {
  position: absolute;
  top: 0.45rem;
  left: 0;
  width: 100%;
  height: 0.7rem;
  background: repeating-linear-gradient(90deg, #426e30 0 9px, #5e963e 9px 16px, #76a94a 16px 24px);
  clip-path: polygon(0 0, 100% 0, 100% 35%, 97% 35%, 97% 80%, 94% 80%, 94% 45%, 90% 45%, 90% 100%, 87% 100%, 87% 35%, 82% 35%, 82% 75%, 78% 75%, 78% 40%, 72% 40%, 72% 100%, 68% 100%, 68% 45%, 62% 45%, 62% 82%, 58% 82%, 58% 35%, 51% 35%, 51% 75%, 45% 75%, 45% 42%, 39% 42%, 39% 100%, 34% 100%, 34% 38%, 28% 38%, 28% 78%, 22% 78%, 22% 42%, 16% 42%, 16% 100%, 11% 100%, 11% 40%, 5% 40%, 5% 78%, 0 78%);
}

.mc-stone-pocket {
  position: absolute;
  right: -1rem;
  bottom: 0;
  width: 34%;
  height: 55%;
  opacity: 0.6;
  background:
    repeating-linear-gradient(90deg, transparent 0 31px, rgba(42, 45, 47, 0.32) 31px 33px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(42, 45, 47, 0.32) 31px 33px),
    #747777;
}

.mc-tree {
  position: absolute;
  bottom: 29%;
  left: 3%;
  z-index: 5;
  width: clamp(7.5rem, 35vw, 11rem);
  height: clamp(10.5rem, 35vh, 15rem);
  pointer-events: none;
  filter: drop-shadow(8px 10px 0 rgba(25, 48, 26, 0.13));
}

.mc-tree__trunk {
  position: absolute;
  bottom: 0;
  left: 43%;
  width: 22%;
  height: 62%;
  border-right: 6px solid #684222;
  border-left: 6px solid #9a6936;
  background: repeating-linear-gradient(0deg, #81562c 0 13px, #6f4725 13px 18px);
  box-shadow: inset 5px 0 #aa7740;
}

.mc-tree__leaves {
  position: absolute;
  z-index: 2;
  background:
    linear-gradient(90deg, transparent 70%, rgba(21, 75, 32, 0.25) 70%),
    linear-gradient(0deg, transparent 70%, rgba(21, 75, 32, 0.23) 70%),
    #31733d;
  background-size: 24px 100%, 100% 22px, auto;
  box-shadow: inset 6px 6px rgba(118, 168, 79, 0.34), inset -7px -7px rgba(13, 64, 31, 0.3);
}

.mc-tree__leaves--one { top: 8%; left: 10%; width: 58%; height: 34%; }
.mc-tree__leaves--two { top: 0; right: 2%; width: 54%; height: 40%; }
.mc-tree__leaves--three { top: 25%; right: 12%; width: 68%; height: 33%; }

.mc-flower-patch {
  position: absolute;
  bottom: 27.5%;
  left: 23%;
  z-index: 6;
  width: 6.5rem;
  height: 3.8rem;
  pointer-events: none;
}

.mc-world-flower {
  position: absolute;
  bottom: 0;
  width: 4px;
  height: 2.3rem;
  background: #3f7b32;
  box-shadow: 5px 14px #57923e;
}

.mc-world-flower::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  width: 7px;
  height: 7px;
  background: #ad91e9;
  box-shadow: 7px -5px #d1c0f5, 7px 5px #7e5fc1, 14px 0 #bba1ff;
}

.mc-world-flower--one { left: 0; height: 2.7rem; }
.mc-world-flower--two { left: 2.5rem; transform: scale(0.8); }
.mc-world-flower--three { right: 0.5rem; height: 2rem; transform: scale(0.68); }

.mc-rocks {
  position: absolute;
  right: -1.2rem;
  bottom: 25%;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 3.2rem);
  grid-template-rows: repeat(2, 3.2rem);
  pointer-events: none;
}

.mc-rocks span {
  border: 2px solid #55595b;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0 22%, transparent 22%),
    linear-gradient(45deg, transparent 0 68%, rgba(36, 39, 40, 0.2) 68%),
    #7a7e7e;
  box-shadow: inset -5px -5px #666a6b, inset 4px 4px #929696;
}

.mc-rocks span:nth-child(1) { grid-column: 2; }
.mc-rocks span:nth-child(2) { grid-column: 3; }
.mc-rocks span:nth-child(3) { grid-column: 1; grid-row: 2; }
.mc-rocks span:nth-child(4) { grid-column: 3; grid-row: 2; }

.mc-ore {
  position: absolute;
  right: clamp(1.9rem, 8vw, 4.8rem);
  bottom: 26.5%;
  z-index: 8;
  width: clamp(3.7rem, 17vw, 4.7rem);
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  border: 3px solid #4e5355;
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0 20%, transparent 20%),
    linear-gradient(45deg, transparent 0 68%, rgba(31, 35, 36, 0.23) 68%),
    #74797a;
  cursor: pointer;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: inset 5px 5px #929797, inset -6px -6px #606566, 6px 8px rgba(31, 37, 36, 0.22);
}

.mc-ore:disabled { cursor: default; }

.mc-ore__fleck {
  position: absolute;
  width: 17%;
  height: 17%;
  background: #5ed0dc;
  box-shadow: inset 3px 3px #a4f0ed, inset -3px -3px #2594a7;
}

.mc-ore__fleck--one { top: 14%; left: 19%; }
.mc-ore__fleck--two { top: 27%; right: 14%; transform: scale(0.72); }
.mc-ore__fleck--three { bottom: 16%; left: 28%; transform: scale(0.82); }
.mc-ore__fleck--four { right: 24%; bottom: 35%; transform: scale(0.55); }

.mc-crack {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
}

.mc-crack i {
  position: absolute;
  display: block;
  width: 4px;
  height: 27%;
  background: #282d2e;
  transform-origin: top;
}

.mc-crack--one i:nth-child(1) { top: 26%; left: 49%; transform: rotate(38deg); }
.mc-crack--one i:nth-child(2) { top: 43%; left: 42%; height: 20%; transform: rotate(-42deg); }
.mc-crack--one i:nth-child(3) { top: 43%; left: 55%; height: 18%; transform: rotate(58deg); }
.mc-crack--two i:nth-child(1) { top: 18%; left: 39%; height: 18%; transform: rotate(-55deg); }
.mc-crack--two i:nth-child(2) { top: 54%; left: 35%; height: 25%; transform: rotate(31deg); }
.mc-crack--two i:nth-child(3) { top: 52%; left: 63%; height: 25%; transform: rotate(-35deg); }
.mc-crack--two i:nth-child(4) { top: 33%; left: 63%; height: 17%; transform: rotate(77deg); }
.mc-crack--three i:nth-child(1) { top: 8%; left: 30%; height: 28%; transform: rotate(52deg); }
.mc-crack--three i:nth-child(2) { top: 63%; left: 27%; height: 30%; transform: rotate(-33deg); }
.mc-crack--three i:nth-child(3) { top: 61%; left: 72%; height: 30%; transform: rotate(42deg); }

.mc-ore.is-mining {
  animation: mcMiningShake 150ms steps(2, jump-none) infinite;
}

.mc-ore.is-mining .mc-crack--one { animation: mcCrackReveal 420ms step-end 260ms forwards; }
.mc-ore.is-mining .mc-crack--two { animation: mcCrackReveal 420ms step-end 800ms forwards; }
.mc-ore.is-mining .mc-crack--three { animation: mcCrackReveal 420ms step-end 1320ms forwards; }

.mc-ore.is-resetting .mc-crack {
  opacity: 0;
  transition: opacity 160ms steps(2, end);
}

.mc-ore.is-broken {
  pointer-events: none;
  animation: mcOreBreak 300ms steps(4, end) forwards;
}

.mc-mine-hint {
  position: absolute;
  right: 0.55rem;
  bottom: calc(26.5% - 2.2rem);
  z-index: 10;
  width: 7.7rem;
  color: #262329;
  font-family: var(--sans);
  font-size: 0.61rem;
  font-weight: 850;
  text-align: center;
  pointer-events: none;
  transition: opacity 180ms steps(2, end);
}

.mc-mine-hint > span { display: block; margin-bottom: 0.25rem; }

.mc-mine-hint > i {
  display: block;
  height: 0.38rem;
  overflow: hidden;
  border: 1px solid rgba(20, 24, 25, 0.65);
  background: rgba(18, 22, 22, 0.45);
}

.mc-mine-hint b {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: #8a6bd1;
}

.mc-ore.is-mining + .mc-mine-hint b {
  animation: mcMineProgress 1800ms linear forwards;
}

.mc-ore.is-broken + .mc-mine-hint {
  opacity: 0;
}

.mc-cat {
  position: absolute;
  bottom: 28%;
  left: 46%;
  z-index: 7;
  width: 5rem;
  height: 7rem;
  padding: 0;
  border: 0;
  opacity: 0.84;
  background: transparent;
  cursor: pointer;
  filter: saturate(0.72) brightness(0.9);
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  transition: filter 250ms ease, opacity 250ms ease, transform 250ms steps(2, end);
}

.mc-cat.is-discoverable {
  opacity: 1;
  filter: saturate(1) brightness(1);
  animation: mcCatBreathe 2.2s steps(2, end) infinite;
}

.mc-cat__body {
  position: absolute;
  right: 1rem;
  bottom: 0.65rem;
  width: 2.35rem;
  height: 3.65rem;
  border: 3px solid #704327;
  background: #b96b33;
  box-shadow: inset 7px 0 #d98b48, inset -6px 0 #8c4d2b;
}

.mc-cat__body > i {
  position: absolute;
  top: 0.45rem;
  right: -3px;
  width: 0.55rem;
  height: 0.35rem;
  background: #5e3825;
  box-shadow: 0 1.15rem #5e3825;
}

.mc-cat__head {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 3;
  width: 3.55rem;
  height: 3.15rem;
  border: 3px solid #704327;
  background: #c9793d;
  box-shadow: inset 6px 6px #df9857, inset -6px -5px #a65b30;
}

.mc-cat__ear {
  position: absolute;
  top: -0.82rem;
  width: 1.05rem;
  height: 0.9rem;
  border: 3px solid #704327;
  border-bottom: 0;
  background: #b96b33;
  box-shadow: inset 0.28rem 0.2rem #d8c7b7;
}

.mc-cat__ear--left { left: -0.2rem; }
.mc-cat__ear--right { right: -0.2rem; transform: scaleX(-1); }

.mc-cat__stripe {
  position: absolute;
  top: 0;
  width: 0.38rem;
  height: 0.65rem;
  background: #704327;
}

.mc-cat__stripe--one { left: 0.85rem; }
.mc-cat__stripe--two { right: 0.85rem; }

.mc-cat__eye {
  position: absolute;
  top: 1.05rem;
  width: 0.52rem;
  height: 0.42rem;
  border-right: 2px solid #1d211b;
  background: #8ecf69;
}

.mc-cat__eye--left { left: 0.52rem; }
.mc-cat__eye--right { right: 0.52rem; }

.mc-cat__muzzle {
  position: absolute;
  bottom: 0.38rem;
  left: 50%;
  width: 1.65rem;
  height: 0.8rem;
  transform: translateX(-50%);
  background: #e5c6a0;
  box-shadow: inset 4px 0 #f0d4b2, inset -4px 0 #cba47d;
}

.mc-cat__nose {
  position: absolute;
  bottom: 0.85rem;
  left: 50%;
  z-index: 2;
  width: 0.38rem;
  height: 0.32rem;
  transform: translateX(-50%);
  background: #51362e;
}

.mc-cat__paws {
  position: absolute;
  right: 0.75rem;
  bottom: 0.25rem;
  z-index: 3;
  display: flex;
  gap: 0.25rem;
}

.mc-cat__paws i {
  width: 1.15rem;
  height: 0.75rem;
  border: 2px solid #704327;
  background: #d98b48;
}

.mc-cat__tail {
  position: absolute;
  bottom: 0.45rem;
  left: 0.15rem;
  width: 2rem;
  height: 3.6rem;
  transform-origin: right bottom;
}

.mc-cat__tail i {
  position: absolute;
  display: block;
  width: 0.72rem;
  height: 1.65rem;
  border: 2px solid #704327;
  background: #a85e32;
}

.mc-cat__tail i:nth-child(1) { right: 0; bottom: 0; }
.mc-cat__tail i:nth-child(2) { right: 0.72rem; bottom: 1.12rem; transform: rotate(90deg); }
.mc-cat__tail i:nth-child(3) { top: 0.05rem; left: 0.05rem; height: 1rem; background: #6f4128; }

.mc-cat.is-found .mc-cat__head { animation: mcCatHead 720ms steps(3, end) both; }
.mc-cat.is-found .mc-cat__tail { animation: mcCatTail 650ms steps(3, end) 2; }

.mc-tall-grass {
  position: absolute;
  z-index: 8;
  width: 0.5rem;
  height: 2.4rem;
  border-left: 5px solid #4e8436;
  border-right: 4px solid #6aa144;
  transform: skew(-12deg);
  pointer-events: none;
}

.mc-tall-grass::before,
.mc-tall-grass::after {
  content: "";
  position: absolute;
  bottom: 0.35rem;
  width: 0.38rem;
  height: 1.6rem;
  background: #5a923d;
}

.mc-tall-grass::before { left: -0.85rem; transform: rotate(-25deg); }
.mc-tall-grass::after { right: -0.8rem; transform: rotate(25deg); }
.mc-tall-grass--one { bottom: 27%; left: 45%; }
.mc-tall-grass--two { bottom: 27.5%; left: 57%; transform: scale(0.8) skew(12deg); }

.mc-chest {
  position: absolute;
  bottom: 12.5%;
  left: 10%;
  z-index: 9;
  width: 5.3rem;
  height: 4.4rem;
  padding: 0;
  border: 0;
  opacity: 0.78;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  filter: saturate(0.72) brightness(0.8);
  transition: filter 220ms ease, opacity 220ms ease;
}

.mc-chest.is-ready {
  opacity: 1;
  filter: none;
  animation: mcChestReady 1.2s steps(2, end) infinite;
}

.mc-chest__lid,
.mc-chest__base {
  position: absolute;
  left: 0;
  width: 100%;
  border: 3px solid #52341c;
  background:
    linear-gradient(90deg, transparent 0 27%, rgba(98, 56, 25, 0.33) 27% 34%, transparent 34% 68%, rgba(98, 56, 25, 0.33) 68% 75%, transparent 75%),
    #b8742e;
  box-shadow: inset 5px 5px #dc9b4a, inset -6px -5px #89501f, 5px 6px rgba(38, 35, 24, 0.2);
}

.mc-chest__lid {
  top: 0;
  z-index: 2;
  height: 1.75rem;
  transform-origin: 50% 100%;
  transition: transform 420ms steps(4, end), top 420ms steps(4, end);
}

.mc-chest__base { bottom: 0; height: 2.85rem; }

.mc-chest__lid i,
.mc-chest__base i {
  position: absolute;
  left: 50%;
  z-index: 3;
  width: 0.85rem;
  transform: translateX(-50%);
  border: 2px solid #3f3f3d;
  background: #c8c6ae;
  box-shadow: inset -2px -2px #77776d;
}

.mc-chest__lid i { bottom: -0.65rem; height: 1rem; }
.mc-chest__base i { top: 0.45rem; height: 0.85rem; }

.mc-chest.is-open .mc-chest__lid {
  top: -1rem;
  transform: perspective(90px) rotateX(-58deg);
}

.mc-chest-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 35;
  width: min(calc(100% - 2rem), 22rem);
  min-height: 13.5rem;
  padding: 0.8rem;
  transform: translate(-50%, -50%);
  border: 4px solid #373737;
  background: #c6c6c6;
  color: #282828;
  box-shadow: inset 3px 3px #f7f7f7, inset -4px -4px #777, 0 0 0 100vmax rgba(8, 10, 12, 0.44), 10px 12px rgba(13, 14, 14, 0.28);
  animation: mcPanelIn 240ms steps(3, end) both;
}

.mc-chest-panel__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.1rem 0.2rem 0.65rem 0.35rem;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.mc-chest-panel__title button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 3px solid #555;
  place-items: center;
  background: #dedede;
  color: #292929;
  font-size: 1.3rem;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: inset 2px 2px #fff, inset -2px -2px #8a8a8a;
}

.mc-chest-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  transition: opacity 220ms ease, transform 220ms ease;
}

.mc-chest-items.is-reading {
  opacity: 0.12;
  transform: translateY(-0.35rem);
  pointer-events: none;
}

.mc-chest-item {
  display: grid;
  min-width: 0;
  min-height: 6.5rem;
  align-content: center;
  justify-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.2rem;
  border: 3px solid #737373;
  background: #8b8b8b;
  color: #242424;
  box-shadow: inset 3px 3px #4b4b4b, inset -3px -3px #eee;
}

button.mc-chest-item {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

button.mc-chest-item:active { transform: translateY(2px); }

.mc-chest-item strong {
  overflow: hidden;
  max-width: 100%;
  font-size: 0.63rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-book-message {
  position: absolute;
  inset: 3.8rem 1.2rem 1rem;
  display: grid;
  margin: 0;
  align-content: center;
  opacity: 0;
  color: #292231;
  font-family: var(--serif);
  font-size: clamp(1.08rem, 5vw, 1.35rem);
  line-height: 1.45;
  text-align: center;
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
  transform: translateY(0.45rem);
}

.mc-book-message.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.mc-hotbar {
  position: absolute;
  right: 0;
  bottom: max(0.55rem, env(safe-area-inset-bottom));
  left: 0;
  z-index: 28;
  display: flex;
  width: max-content;
  margin: auto;
  padding: 3px;
  border: 3px solid #171717;
  background: rgba(34, 34, 34, 0.9);
  box-shadow: inset 2px 2px rgba(255, 255, 255, 0.17), 0 5px rgba(0, 0, 0, 0.22);
}

.mc-hotbar__slot {
  position: relative;
  display: grid;
  width: clamp(2.55rem, 11vw, 3.15rem);
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #555;
  background: rgba(100, 100, 100, 0.72);
  box-shadow: inset 3px 3px #262626, inset -3px -3px #9a9a9a;
}

.mc-hotbar__slot:first-child {
  border-color: #e1e1e1;
  box-shadow: inset 3px 3px #555, inset -3px -3px #fff;
}

.mc-hotbar__slot .mc-pixel-item {
  opacity: 0;
  transform: translateY(0.4rem) scale(0.65);
}

.mc-hotbar__slot.is-filled .mc-pixel-item {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 180ms steps(2, end), transform 360ms steps(4, end);
}

.mc-pixel-item {
  position: relative;
  display: block;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  image-rendering: pixelated;
}

.mc-item--diamond {
  width: 1.9rem;
  height: 1.8rem;
  clip-path: polygon(24% 0, 76% 0, 100% 32%, 72% 100%, 28% 100%, 0 32%);
  background: linear-gradient(135deg, #d0ffff 0 24%, #74dfe6 24% 48%, #25aebd 48% 70%, #13758a 70%);
  filter: drop-shadow(2px 3px 0 rgba(16, 66, 75, 0.35));
}

.mc-item--diamond i {
  position: absolute;
  top: 28%;
  left: 12%;
  width: 76%;
  height: 4px;
  background: rgba(226, 255, 255, 0.75);
  transform: rotate(2deg);
}

.mc-item--fish {
  width: 2rem;
  height: 1.25rem;
  border: 3px solid #285563;
  background: #58adbd;
  clip-path: polygon(0 50%, 24% 0, 24% 18%, 79% 18%, 100% 50%, 79% 82%, 24% 82%, 24% 100%);
  box-shadow: inset -0.45rem 0 #337a8c;
}

.mc-item--fish i {
  position: absolute;
  top: 0.18rem;
  right: 0.22rem;
  width: 0.23rem;
  height: 0.23rem;
  background: #132328;
}

.mc-item--flower {
  width: 0.35rem;
  height: 1.8rem;
  margin-top: 0.15rem;
  background: #397b35;
  box-shadow: 0.42rem 0.75rem #4f963f;
}

.mc-item--flower i {
  position: absolute;
  top: -0.2rem;
  left: -0.5rem;
  width: 0.65rem;
  height: 0.65rem;
  background: #8c6bce;
  box-shadow: 0.6rem -0.45rem #c7b2ef, 0.6rem 0.45rem #7655b7, 1.2rem 0 #ad8ce6;
}

.mc-item--book {
  width: 1.75rem;
  height: 1.45rem;
  margin-top: 0.15rem;
  border: 3px solid #5d351f;
  border-left-width: 0.45rem;
  background: #8a4d2b;
  box-shadow: inset -4px -4px #6f3c24, 3px 3px rgba(54, 33, 22, 0.25);
}

.mc-item--book i {
  position: absolute;
  top: 0.18rem;
  right: 0.14rem;
  width: 0.28rem;
  height: 0.75rem;
  background: #d8c7ff;
  box-shadow: -0.32rem 0 #a98dec;
}

.mc-world-particles {
  position: absolute;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  pointer-events: none;
}

.mc-world-particles > i {
  position: absolute;
  top: var(--py);
  left: var(--px);
  width: 0.5rem;
  height: 0.5rem;
  background: var(--pixel-color);
  box-shadow: 3px 3px rgba(0, 0, 0, 0.14);
  animation: mcPixelBurst 760ms steps(5, end) forwards;
}

.mc-flying-item {
  position: fixed;
  z-index: 400;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  pointer-events: none;
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.28));
}

.mc-complete {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 38;
  display: grid;
  width: min(calc(100% - 2rem), 22rem);
  min-height: 17rem;
  align-content: center;
  justify-items: center;
  padding: 2rem 1.25rem;
  transform: translate(-50%, -50%);
  border: 3px solid rgba(216, 199, 255, 0.78);
  background: rgba(20, 15, 29, 0.94);
  box-shadow: 0 0 0 100vmax rgba(5, 8, 10, 0.52), 10px 12px rgba(0, 0, 0, 0.24);
  color: #fff;
  text-align: center;
  animation: mcPanelIn 300ms steps(3, end) both;
}

.mc-complete > .mc-pixel-item { margin-bottom: 1rem; transform: scale(1.2); }

.mc-complete strong {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 8vw, 2.6rem);
  font-weight: 400;
  letter-spacing: -0.035em;
}

.mc-complete p {
  margin: 0.45rem 0 1.4rem;
  color: #d8d0e1;
  font-family: var(--sans);
  font-size: 0.88rem;
}

.mc-complete button {
  min-width: 11rem;
  min-height: 3.1rem;
  padding: 0.75rem 1rem;
  border: 2px solid #d8c7ff;
  border-radius: 0;
  background: #7252ae;
  color: #fff;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: inset 4px 4px rgba(255, 255, 255, 0.15), inset -4px -4px rgba(44, 25, 70, 0.32), 5px 5px rgba(0, 0, 0, 0.24);
}

.mc-complete button:active { transform: translate(2px, 2px); box-shadow: inset 3px 3px rgba(44, 25, 70, 0.3); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-height: 43rem) {
  .mc-tree { height: 9.5rem; bottom: 27%; }
  .mc-cat { bottom: 26%; transform: scale(0.88); transform-origin: bottom; }
  .mc-rocks { bottom: 23%; transform: scale(0.9); transform-origin: bottom right; }
  .mc-ore { bottom: 25%; }
  .mc-mine-hint { bottom: calc(25% - 2rem); }
  .mc-announcement { top: 5.45rem; }
}

@media (min-width: 42rem) {
  .mc-quest { top: 1rem; left: 1rem; }
  .mc-announcement { top: 1.75rem; left: auto; right: 1rem; max-width: 22rem; transform: none; text-align: right; }
  .mc-tree { left: 9%; }
  .mc-flower-patch { left: 28%; }
  .mc-cat { left: 48%; }
  .mc-chest { left: 18%; }
  .mc-hotbar__slot { width: 3.25rem; }
}

/* Minecraft fidelity pass: block scale, terrain strata and scene composition. */
.mc-game {
  --mc-block: clamp(2.65rem, 12vw, 3.4rem);
  background: linear-gradient(#65b5dd 0%, #9bd5e8 66%, #bedfd4 100%);
}

.mc-sun {
  top: 8%;
  right: 6%;
  width: clamp(2.9rem, 12vw, 4rem);
  border: 5px solid rgba(255, 244, 177, 0.18);
  background:
    linear-gradient(90deg, transparent 0 68%, rgba(255, 233, 139, 0.55) 68%),
    linear-gradient(0deg, transparent 0 67%, rgba(255, 249, 205, 0.55) 67%),
    #f5df8c;
  background-size: 14px 100%, 100% 14px, auto;
  box-shadow: 0 0 0 5px rgba(255, 240, 164, 0.1), 0 0 34px rgba(255, 234, 144, 0.3);
}

.mc-sun::before,
.mc-sun::after {
  content: "";
  position: absolute;
  width: 0.48rem;
  height: 0.48rem;
  background: rgba(255, 249, 211, 0.72);
}

.mc-sun::before { top: 0.35rem; left: 0.45rem; }
.mc-sun::after { right: 0.55rem; bottom: 0.55rem; background: rgba(220, 190, 96, 0.35); }

.mc-cloud {
  width: 6.3rem;
  height: 1.15rem;
  background: rgba(248, 254, 255, 0.88);
  box-shadow: none;
  animation-duration: 24s;
}

.mc-cloud::before,
.mc-cloud::after {
  content: "";
  position: absolute;
  background: inherit;
}

.mc-cloud::before {
  bottom: 0;
  left: 1.15rem;
  width: 2.8rem;
  height: 2rem;
}

.mc-cloud::after {
  right: -2.1rem;
  bottom: 0;
  width: 3.5rem;
  height: 1.15rem;
}

.mc-cloud--one { top: 33%; left: -9rem; }
.mc-cloud--two { top: 47%; left: -12rem; opacity: 0.58; animation-duration: 31s; }

.mc-hills {
  inset: auto 0 37.5% 0;
  height: 25%;
}

.mc-hill {
  bottom: 0;
  border-top: 7px solid rgba(113, 166, 83, 0.65);
  background:
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(38, 75, 43, 0.14) 39px 41px),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(38, 75, 43, 0.12) 39px 41px),
    #65964e;
  box-shadow: none;
}

.mc-hill--one {
  left: -4%;
  width: 48%;
  height: 58%;
  clip-path: polygon(0 100%, 0 52%, 18% 52%, 18% 31%, 38% 31%, 38% 0, 66% 0, 66% 36%, 84% 36%, 84% 58%, 100% 58%, 100% 100%);
}

.mc-hill--two {
  right: -3%;
  width: 38%;
  height: 43%;
  opacity: 0.68;
  clip-path: polygon(0 100%, 0 52%, 22% 52%, 22% 22%, 63% 22%, 63% 0, 82% 0, 82% 58%, 100% 58%, 100% 100%);
}

.mc-hill--three {
  right: 25%;
  width: 34%;
  height: 28%;
  opacity: 0.42;
  clip-path: polygon(0 100%, 0 56%, 26% 56%, 26% 19%, 68% 19%, 68% 48%, 100% 48%, 100% 100%);
}

.mc-terrain {
  z-index: 3;
  height: 38%;
  min-height: 12rem;
  overflow: hidden;
  background: #707575;
  box-shadow: inset 0 5px rgba(42, 79, 34, 0.28);
}

.mc-terrain > span {
  position: absolute;
  right: 0;
  left: 0;
  display: block;
}

.mc-terrain__grass {
  top: 0;
  z-index: 3;
  height: 16%;
  min-height: 2.15rem;
  background:
    linear-gradient(0deg, transparent 0 42%, rgba(54, 112, 47, 0.72) 42% 57%, transparent 57%),
    repeating-linear-gradient(90deg, #4f8738 0 10px, #669e43 10px 21px, #7aad4e 21px 31px, #5a913d 31px 42px);
  box-shadow: inset 0 9px #76ae49, inset 0 -7px rgba(69, 111, 43, 0.34);
}

.mc-terrain__dirt {
  top: 16%;
  height: 42%;
  background:
    linear-gradient(135deg, transparent 0 58%, rgba(151, 96, 52, 0.3) 58% 68%, transparent 68%),
    linear-gradient(45deg, rgba(79, 48, 28, 0.22) 0 16%, transparent 16% 72%, rgba(103, 61, 32, 0.24) 72%),
    #7b4f2c;
  background-size: var(--mc-block) var(--mc-block), var(--mc-block) var(--mc-block), auto;
  box-shadow:
    inset 0 2px rgba(52, 32, 18, 0.3),
    inset 0 -2px rgba(52, 32, 18, 0.28);
}

.mc-terrain__dirt::after,
.mc-terrain__stone::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--mc-block) - 2px), rgba(51, 36, 27, 0.25) calc(var(--mc-block) - 2px) var(--mc-block)),
    repeating-linear-gradient(0deg, transparent 0 calc(var(--mc-block) - 2px), rgba(51, 36, 27, 0.22) calc(var(--mc-block) - 2px) var(--mc-block));
}

.mc-terrain__stone {
  top: 58%;
  bottom: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0 20%, transparent 20% 68%, rgba(42, 46, 47, 0.2) 68%),
    linear-gradient(45deg, transparent 0 62%, rgba(51, 54, 55, 0.18) 62% 75%, transparent 75%),
    #747979;
  background-size: var(--mc-block) var(--mc-block), var(--mc-block) var(--mc-block), auto;
  box-shadow: inset 0 6px rgba(94, 75, 54, 0.28);
}

.mc-terrain__stone::after {
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--mc-block) - 2px), rgba(42, 46, 47, 0.3) calc(var(--mc-block) - 2px) var(--mc-block)),
    repeating-linear-gradient(0deg, transparent 0 calc(var(--mc-block) - 2px), rgba(42, 46, 47, 0.28) calc(var(--mc-block) - 2px) var(--mc-block));
}

.mc-tree {
  bottom: 37.5%;
  left: 4%;
  z-index: 8;
  width: clamp(8.3rem, 36vw, 11rem);
  height: clamp(11.5rem, 31vh, 14rem);
  filter: drop-shadow(7px 9px 0 rgba(30, 54, 29, 0.18));
}

.mc-tree::after {
  content: "";
  position: absolute;
  right: 10%;
  bottom: -0.36rem;
  left: 16%;
  height: 0.65rem;
  background: rgba(38, 72, 34, 0.34);
}

.mc-tree__trunk {
  left: 43%;
  width: 23%;
  height: 66%;
  border: 3px solid #563419;
  background:
    repeating-linear-gradient(90deg, #8e5b2a 0 7px, #a87138 7px 13px, #71451f 13px 20px),
    #825025;
  box-shadow: inset 4px 0 #aa743b, inset -5px 0 #63401f;
}

.mc-tree__trunk::before {
  content: "";
  position: absolute;
  top: 28%;
  left: -1.4rem;
  width: 1.55rem;
  height: 1rem;
  border: 3px solid #563419;
  border-right: 0;
  background: #815027;
}

.mc-tree__leaves {
  border: 2px solid rgba(27, 83, 39, 0.48);
  background:
    linear-gradient(90deg, transparent 68%, rgba(15, 72, 31, 0.27) 68%),
    linear-gradient(0deg, transparent 68%, rgba(15, 72, 31, 0.25) 68%),
    #327640;
  background-size: 19px 100%, 100% 19px, auto;
  box-shadow: inset 5px 5px rgba(114, 165, 74, 0.28), inset -6px -6px rgba(12, 60, 28, 0.3);
}

.mc-tree__leaves--one { top: 1%; left: 32%; width: 39%; height: 27%; }
.mc-tree__leaves--two { top: 18%; left: 3%; width: 46%; height: 29%; }
.mc-tree__leaves--three { top: 17%; right: 1%; width: 47%; height: 30%; }
.mc-tree__leaves--four { top: 32%; left: 20%; width: 62%; height: 29%; }
.mc-tree__leaves--five { top: 9%; left: 20%; width: 61%; height: 27%; }

.mc-flower-patch {
  bottom: 37.7%;
  left: 42%;
  z-index: 9;
  width: 5.6rem;
  height: 3.5rem;
}

.mc-world-flower--one { left: 0.5rem; height: 2.3rem; }
.mc-world-flower--two { left: 2.7rem; transform: scale(0.78); }
.mc-world-flower--three { right: 0.25rem; height: 1.8rem; transform: scale(0.64); }

.mc-mine-wall {
  position: absolute;
  right: -0.15rem;
  bottom: 7%;
  z-index: 11;
  display: grid;
  width: calc(var(--mc-block) + var(--mc-block) + var(--mc-block));
  height: calc(var(--mc-block) + var(--mc-block) + var(--mc-block));
  grid-template-columns: repeat(3, var(--mc-block));
  grid-template-rows: repeat(3, var(--mc-block));
  filter: drop-shadow(-7px 8px 0 rgba(42, 32, 24, 0.2));
}

.mc-stone-block,
.mc-ore-cell {
  position: relative;
  display: block;
  width: var(--mc-block);
  height: var(--mc-block);
  overflow: hidden;
  border: 2px solid #54595a;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.11) 0 21%, transparent 21% 67%, rgba(39, 43, 44, 0.21) 67%),
    linear-gradient(45deg, transparent 0 58%, rgba(51, 55, 56, 0.16) 58% 72%, transparent 72%),
    #777c7d;
  box-shadow: inset 4px 4px #929798, inset -5px -5px #626768;
}

.mc-stone-block:nth-child(2),
.mc-stone-block:nth-child(6),
.mc-stone-block:nth-child(8) { filter: brightness(0.92); }

.mc-stone-block:nth-child(3),
.mc-stone-block:nth-child(7) { filter: brightness(1.06); }

.mc-ore-cell {
  overflow: visible;
  background: #343a3b;
  box-shadow: inset 0 0 0 5px #575d5e;
}

.mc-ore-cell::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 0;
  background:
    linear-gradient(135deg, #22292a 0 38%, #151a1b 38% 72%, #2f3536 72%);
  opacity: 0;
  box-shadow: inset 5px 5px rgba(0, 0, 0, 0.35);
  transition: opacity 180ms steps(2, end);
}

.mc-ore {
  position: relative;
  inset: auto;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 2px solid #505657;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0 20%, transparent 20% 68%, rgba(31, 35, 36, 0.23) 68%),
    #757a7b;
  box-shadow: inset 5px 5px #929899, inset -6px -6px #5e6465;
}

.mc-ore__fleck {
  border: 1px solid #167c8a;
  background: #55d4df;
  box-shadow: inset 2px 2px #b5ffff, inset -2px -2px #1c91a4;
}

.mc-ore__fleck--one { top: 10%; left: 14%; width: 20%; height: 19%; }
.mc-ore__fleck--two { top: 19%; right: 12%; width: 16%; height: 24%; transform: none; }
.mc-ore__fleck--three { bottom: 11%; left: 20%; width: 23%; height: 17%; transform: none; }
.mc-ore__fleck--four { right: 20%; bottom: 30%; width: 13%; height: 14%; transform: none; }
.mc-ore__fleck--five { top: 46%; left: 8%; width: 11%; height: 12%; }

.mc-crack i {
  width: 4px;
  background: #222829;
  box-shadow: 2px 0 rgba(174, 184, 184, 0.22);
}

.mc-crack--one i:nth-child(1) { top: 21%; left: 49%; height: 29%; transform: rotate(38deg); }
.mc-crack--one i:nth-child(2) { top: 42%; left: 39%; height: 22%; transform: rotate(-46deg); }
.mc-crack--one i:nth-child(3) { top: 43%; left: 57%; height: 21%; transform: rotate(61deg); }
.mc-crack--two i:nth-child(1) { top: 12%; left: 35%; height: 23%; transform: rotate(-58deg); }
.mc-crack--two i:nth-child(2) { top: 54%; left: 31%; height: 28%; transform: rotate(32deg); }
.mc-crack--two i:nth-child(3) { top: 51%; left: 67%; height: 29%; transform: rotate(-37deg); }
.mc-crack--two i:nth-child(4) { top: 30%; left: 67%; height: 22%; transform: rotate(80deg); }
.mc-crack--three i:nth-child(1) { top: 4%; left: 26%; height: 30%; transform: rotate(56deg); }
.mc-crack--three i:nth-child(2) { top: 62%; left: 22%; height: 34%; transform: rotate(-34deg); }
.mc-crack--three i:nth-child(3) { top: 61%; left: 74%; height: 34%; transform: rotate(43deg); }
.mc-crack--three i:nth-child(4) { top: 25%; left: 19%; height: 23%; transform: rotate(82deg); }

.mc-mine-wall.is-mining .mc-stone-block {
  animation: mcStoneRattle 180ms steps(2, end) infinite;
}

.mc-mine-wall.is-mining .mc-stone-block:nth-child(even) { animation-delay: -90ms; }
.mc-mine-wall.is-mined .mc-ore-cell::after { opacity: 1; }

.mc-mine-hint {
  right: 0.4rem;
  bottom: calc(7% + 10.45rem);
  z-index: 16;
  width: min(9.7rem, 44vw);
  padding: 0.35rem 0.45rem 0.4rem;
  border: 2px solid rgba(230, 230, 230, 0.72);
  background: rgba(24, 27, 27, 0.82);
  color: #f4f2f5;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  box-shadow: 4px 4px rgba(23, 23, 23, 0.24);
}

.mc-mine-hint > i {
  border: 1px solid #0e1111;
  background: #34383a;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
}

.mc-mine-wall.is-mining + .mc-mine-hint b { animation: mcMineProgress 1800ms linear forwards; }
.mc-mine-wall.is-mined + .mc-mine-hint { opacity: 0; }

.mc-cat {
  bottom: 37.2%;
  left: 22%;
  z-index: 6;
  width: 4.7rem;
  height: 6.7rem;
  opacity: 0.42;
  filter: saturate(0.66) brightness(0.78);
  transform: scale(0.8);
  transform-origin: bottom center;
}

.mc-cat.is-discoverable {
  z-index: 7;
  opacity: 0.82;
  filter: saturate(0.88) brightness(0.92);
  animation: mcCatPeek 2.4s steps(3, end) infinite;
}

.mc-cat.is-found {
  z-index: 12;
  opacity: 1;
  filter: none;
  transform: translate(1.15rem, -0.25rem) scale(0.9);
}

.mc-cat__head {
  box-shadow: inset 5px 5px #df9857, inset -5px -5px #995329, 4px 4px rgba(63, 46, 30, 0.2);
}

.mc-cat-cover {
  position: absolute;
  bottom: 37.1%;
  left: 28%;
  z-index: 9;
  width: 3.05rem;
  height: 2.65rem;
  border: 2px solid #486f31;
  background:
    linear-gradient(0deg, #77502e 0 62%, #568a3a 62% 78%, #75a94a 78%),
    #77502e;
  box-shadow: inset 4px 4px rgba(255, 255, 255, 0.08), inset -4px -4px rgba(54, 48, 28, 0.2), 5px 5px rgba(42, 53, 29, 0.18);
  pointer-events: none;
  transition: opacity 240ms steps(2, end), transform 300ms steps(3, end);
}

.mc-cat.is-found + .mc-cat-cover {
  opacity: 0.58;
  transform: translateY(0.55rem);
}

.mc-tall-grass--one { bottom: 37.2%; left: 20%; z-index: 10; }
.mc-tall-grass--two { bottom: 37.4%; left: 34%; z-index: 10; transform: scale(0.78) skew(12deg); }

.mc-chest {
  bottom: 37.2%;
  left: 57%;
  z-index: 10;
  width: 4.9rem;
  height: 4rem;
  opacity: 0.78;
  filter: saturate(0.78) brightness(0.84);
  transform-origin: bottom center;
}

.mc-chest::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  bottom: -0.4rem;
  left: 0.25rem;
  z-index: -1;
  height: 0.55rem;
  background: rgba(54, 65, 35, 0.35);
}

.mc-chest__inside {
  position: absolute;
  top: 0.65rem;
  left: 0.35rem;
  z-index: 1;
  width: calc(100% - 0.7rem);
  height: 1.1rem;
  border: 3px solid #3c2617;
  background: #1d1712;
  box-shadow: inset 0 5px #090807;
}

.mc-chest__lid,
.mc-chest__base {
  border: 3px solid #4b2d16;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(91, 48, 20, 0.36) 18px 23px),
    linear-gradient(0deg, transparent 0 34%, rgba(245, 170, 78, 0.25) 34% 47%, transparent 47% 72%, rgba(103, 54, 22, 0.28) 72%),
    #b76d29;
  box-shadow: inset 4px 4px #dd9340, inset -5px -5px #814719, 4px 5px rgba(43, 35, 23, 0.2);
}

.mc-chest__lid { height: 1.55rem; }
.mc-chest__base { height: 2.65rem; }

.mc-chest__lid i,
.mc-chest__base i {
  width: 0.78rem;
  border: 2px solid #313230;
  background: #c9c8ae;
  box-shadow: inset 2px 2px #f3f0d0, inset -2px -2px #6d6e65;
}

.mc-chest.is-open .mc-chest__lid {
  top: -1.25rem;
  transform: perspective(90px) rotateX(-72deg);
}

.mc-chest.is-open .mc-chest__inside { animation: mcChestGlow 520ms steps(3, end) both; }

.mc-torch {
  position: absolute;
  right: 37%;
  bottom: 14.5%;
  z-index: 12;
  width: 0.42rem;
  height: 2.5rem;
  border: 2px solid #68441e;
  background: #9f6d2f;
  box-shadow: 4px 4px rgba(27, 29, 24, 0.2);
  transform: rotate(8deg);
}

.mc-torch i {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  width: 0.85rem;
  height: 1rem;
  transform: translateX(-50%);
  background: #ef9f35;
  box-shadow: inset 0.25rem 0 #ffe170, 0 0 0 4px rgba(255, 204, 79, 0.1), 0 0 18px rgba(255, 193, 70, 0.42);
  animation: mcTorchFlicker 850ms steps(3, end) infinite;
}

.mc-chest-panel {
  width: min(calc(100% - 1.4rem), 22rem);
  border-width: 5px;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 5px),
    #c6c6c6;
  box-shadow: inset 4px 4px #f4f4f4, inset -5px -5px #737373, 0 0 0 100vmax rgba(8, 10, 12, 0.48), 10px 12px rgba(13, 14, 14, 0.28);
}

.mc-chest-items { gap: 0.32rem; }

.mc-chest-item {
  min-height: 6.15rem;
  border-color: #777;
  background: #919191;
  box-shadow: inset 3px 3px #505050, inset -3px -3px #ededed;
  animation: mcChestItemIn 360ms steps(4, end) both;
}

.mc-chest-item:nth-child(2) { animation-delay: 80ms; }
.mc-chest-item:nth-child(3) { animation-delay: 160ms; }

.mc-hotbar {
  bottom: max(0.4rem, env(safe-area-inset-bottom));
  padding: 2px;
  border: 3px solid #171717;
  gap: 0;
  background: rgba(27, 27, 27, 0.92);
  box-shadow: inset 2px 2px rgba(255, 255, 255, 0.14), 0 5px rgba(0, 0, 0, 0.3);
}

.mc-hotbar__slot {
  width: clamp(1.9rem, 9vw, 2.75rem);
  border: 2px solid #666;
  background: rgba(105, 105, 105, 0.78);
  box-shadow: inset 3px 3px #303030, inset -3px -3px #a6a6a6;
}

.mc-hotbar__slot:first-child {
  border-color: #666;
  box-shadow: inset 3px 3px #303030, inset -3px -3px #a6a6a6;
}

.mc-hotbar__slot.is-selected {
  z-index: 2;
  border: 3px solid #f2f2f2;
  box-shadow: inset 3px 3px #555, inset -3px -3px #d7d7d7, 0 0 0 1px #222;
}

.mc-hotbar__slot .mc-pixel-item { transform: translateY(0.25rem) scale(0.62); }

.mc-hotbar__slot.is-filled .mc-pixel-item {
  transform: translateY(0) scale(0.82);
  animation: mcItemCollected 420ms steps(4, end) both;
}

.mc-hotbar__slot.is-filled.is-selected .mc-pixel-item { transform: translateY(0) scale(0.94); }

@media (max-height: 43rem) {
  .mc-terrain { height: 36%; min-height: 10.5rem; }
  .mc-hills { bottom: 35.5%; }
  .mc-tree { bottom: 35.5%; left: 4%; height: 9.6rem; }
  .mc-flower-patch { bottom: 35.7%; }
  .mc-cat { bottom: 35.2%; left: 21%; transform: scale(0.72); }
  .mc-cat-cover { bottom: 35.1%; }
  .mc-tall-grass--one, .mc-tall-grass--two { bottom: 35.2%; }
  .mc-chest { bottom: 35.2%; }
  .mc-mine-wall { bottom: 6%; transform: scale(0.88); transform-origin: bottom right; }
  .mc-mine-hint { bottom: calc(6% + 8.85rem); }
  .mc-torch { bottom: 13%; }
}

@media (max-width: 23rem) {
  .mc-quest { width: calc(100% - 5.5rem); }
  .mc-quest strong { font-size: 0.72rem; }
}

@media (min-width: 42rem) {
  .mc-tree { left: 10%; }
  .mc-flower-patch { left: 40%; }
  .mc-cat { left: 27%; }
  .mc-cat-cover { left: 31%; }
  .mc-tall-grass--one { left: 26%; }
  .mc-tall-grass--two { left: 36%; }
  .mc-chest { left: 55%; }
  .mc-hotbar__slot { width: 2.85rem; }
}

@keyframes mcStoneRattle {
  0%, 100% { transform: translate(0); filter: brightness(1); }
  50% { transform: translate(-1px, 1px); filter: brightness(1.06); }
}

@keyframes mcCatPeek {
  0%, 100% { transform: translateX(0) scale(0.82); }
  50% { transform: translateX(0.28rem) scale(0.84); }
}

@keyframes mcChestGlow {
  from { background: #1d1712; box-shadow: inset 0 5px #090807; }
  to { background: #6c5526; box-shadow: inset 0 5px #211a0b, 0 -7px 18px rgba(246, 208, 104, 0.48); }
}

@keyframes mcTorchFlicker {
  0%, 100% { transform: translateX(-50%) scale(1); filter: brightness(1); }
  50% { transform: translateX(-50%) scale(0.82, 1.12); filter: brightness(1.18); }
}

@keyframes mcChestItemIn {
  from { opacity: 0; transform: translateY(0.7rem) scale(0.82); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mcItemCollected {
  0% { opacity: 0; transform: translateY(-0.65rem) scale(1.15); filter: brightness(1.5); }
  65% { opacity: 1; transform: translateY(0.08rem) scale(0.76); }
  100% { opacity: 1; transform: translateY(0) scale(0.82); filter: brightness(1); }
}

@keyframes mcLoadingBlock {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-0.45rem) rotate(1deg); }
}

@keyframes mcCloudDrift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 18rem)); }
}

@keyframes mcMiningShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  75% { transform: translate(2px, -1px); }
}

@keyframes mcCrackReveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mcMineProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes mcOreBreak {
  0% { transform: scale(1); opacity: 1; filter: brightness(1); }
  45% { transform: scale(1.08); opacity: 1; filter: brightness(1.35); }
  100% { transform: scale(0.15); opacity: 0; filter: brightness(1.7); }
}

@keyframes mcCatBreathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes mcCatHead {
  0%, 100% { transform: rotate(0); }
  35% { transform: rotate(-10deg) translateY(-3px); }
  70% { transform: rotate(7deg) translateY(-2px); }
}

@keyframes mcCatTail {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-18deg); }
}

@keyframes mcChestReady {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes mcPanelIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.92); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes mcPixelBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--pdx)), calc(-50% + var(--pdy))) rotate(90deg) scale(0.65); }
}

.letter-stage {
  width: min(100%, 38rem);
  margin: 0 auto;
}

.envelope-button {
  position: relative;
  display: block;
  width: min(100%, 22rem);
  aspect-ratio: 1.55;
  margin: 2rem auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.6rem;
  background: linear-gradient(145deg, #a98dec, #6f4aa6);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 300ms var(--ease);
}

.envelope-button:active { transform: scale(0.97); }

.envelope-button::before,
.envelope-button::after {
  content: "";
  position: absolute;
  inset: 0;
}

.envelope-button::before {
  clip-path: polygon(0 0, 50% 56%, 100% 0);
  background: #bea8f4;
}

.envelope-button::after {
  clip-path: polygon(0 100%, 0 0, 50% 55%, 100% 0, 100% 100%);
  background: linear-gradient(135deg, #8d6bc8, #7450ad);
}

.envelope-button__seal {
  position: absolute;
  top: 48%;
  left: 50%;
  z-index: 2;
  display: grid;
  width: 3.5rem;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: #52347c;
  color: var(--lilac-100);
  font-family: var(--serif);
  font-size: 1.2rem;
  box-shadow: 0 8px 20px rgba(24, 12, 38, 0.3);
}

.envelope-button__hint {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.letter-paper {
  display: none;
  padding: clamp(1.35rem, 6vw, 2.8rem);
  border-radius: 0.35rem;
  background: var(--lilac-50);
  color: #302638;
  box-shadow: 0 26px 65px rgba(0, 0, 0, 0.4);
}

.letter-paper.is-open {
  display: block;
  animation: letterOpen 760ms var(--ease) both;
}

.letter-paper__to {
  margin: 0 0 2rem;
  color: #74667e;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.letter-paper p {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 4.3vw, 1.2rem);
  line-height: 1.75;
}

.letter-paper p:first-of-type {
  color: #51376a;
  font-size: clamp(1.6rem, 7vw, 2.2rem);
  line-height: 1.2;
}

.letter-paper__signoff {
  margin: 2rem 0 0;
  color: #5e496d;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.5;
  white-space: pre-line;
}

.final-stage {
  display: grid;
  min-height: calc(100svh - 10rem);
  place-items: center;
  text-align: center;
}

.false-ending,
.final-sequence,
.final-reveal {
  width: min(100%, 34rem);
}

.false-ending__mark {
  display: grid;
  width: 4rem;
  aspect-ratio: 1;
  margin: 0 auto 1.4rem;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--lilac-200);
}

.false-ending h3,
.final-reveal h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.3rem, 10vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1;
}

.false-ending p {
  margin: 1rem 0 1.6rem;
  color: var(--muted);
}

.final-sequence {
  display: none;
}

.final-sequence.is-running {
  display: grid;
  min-height: 25rem;
  align-content: center;
  justify-items: center;
}

.final-sequence__line {
  margin: 0;
  opacity: 0;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 12vw, 5rem);
  letter-spacing: -0.05em;
  line-height: 1;
}

.final-sequence__line.is-visible {
  animation: sequenceLine 850ms var(--ease) both;
}

.final-chest {
  display: none;
  flex-direction: column;
  align-items: center;
  margin-top: 2.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.final-chest.is-visible {
  display: flex;
  animation: rewardIn 700ms var(--ease) both;
}

.final-chest__box {
  position: relative;
  display: block;
  width: 9rem;
  height: 6rem;
  border: 4px solid #422760;
  border-radius: 0.55rem;
  background:
    linear-gradient(90deg, transparent 46%, #c9b4f5 46%, #c9b4f5 56%, transparent 56%),
    linear-gradient(#8965bf 0 32%, #674493 32%);
  box-shadow: inset 0 4px rgba(255, 255, 255, 0.12), 0 22px 45px rgba(0, 0, 0, 0.38);
}

.final-chest__box::before {
  content: "";
  position: absolute;
  top: 43%;
  left: 50%;
  width: 1.7rem;
  height: 1.5rem;
  transform: translate(-50%, -50%);
  border: 3px solid #553977;
  background: var(--lilac-100);
}

.final-chest__label {
  margin-top: 1rem;
  font-size: 0.82rem;
  font-weight: 750;
}

.final-reveal {
  display: none;
  padding: 1rem 0 2.5rem;
}

.final-reveal.is-visible {
  display: block;
  animation: finalReveal 900ms var(--ease) both;
}

.final-reveal__tag {
  display: inline-block;
  margin-bottom: 1.2rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--lilac-200);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.final-reveal__copy {
  max-width: 29rem;
  margin: 1.7rem auto 0;
  color: var(--muted);
}

.final-reveal__copy p {
  margin: 0 0 1rem;
}

.final-reveal__cta {
  display: inline-block;
  margin: 1rem 0 2.5rem;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--lilac-300);
  color: var(--lilac-100);
  font-family: var(--serif);
  font-size: 1.35rem;
}

.final-closing {
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.final-closing strong {
  display: block;
  color: var(--lilac-200);
  font-family: var(--serif);
  font-size: clamp(1.8rem, 8vw, 2.7rem);
  font-weight: 400;
}

.final-closing p {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.toast {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  left: 1rem;
  z-index: 300;
  max-width: 28rem;
  margin: 0 auto;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 1rem;
  opacity: 0;
  transform: translateY(1rem);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: rgba(33, 20, 52, 0.94);
  color: var(--lilac-50);
  font-size: 0.82rem;
  text-align: center;
  pointer-events: none;
  box-shadow: var(--shadow);
  transition: opacity 250ms ease, transform 350ms var(--ease);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.noscript {
  position: fixed;
  inset: 1rem 1rem auto;
  z-index: 500;
  padding: 1rem;
  border-radius: 1rem;
  background: var(--lilac-100);
  color: var(--night);
  text-align: center;
}

@media (min-width: 42rem) {
  .home-shell {
    padding-top: 3.2rem;
  }

  .home-hero {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding-block: 2.5rem 4rem;
  }

  .home-hero h1 {
    max-width: 39rem;
  }

  .home-hero__seal {
    display: flex;
  }

  .timeline__item {
    padding-inline: 1.3rem;
  }

  .timeline__item span {
    font-size: 0.78rem;
  }

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

  .gift-card--wide {
    grid-column: 1 / -1;
    min-height: 10rem;
  }

  .gift-card--wide .gift-card__text strong {
    max-width: none;
    font-size: 1.7rem;
  }

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

  .polaroid-rail {
    grid-auto-columns: 18rem;
  }
}

@media (min-width: 62rem) {
  .gift-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .gift-card--wide {
    grid-column: span 2;
  }

  .gift-card--final {
    grid-column: 2 / 4;
  }

  .polaroid-rail {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row;
    margin: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .rail-hint { display: none; }
}

@media (hover: hover) and (pointer: fine) {
  .gift-card:hover {
    transform: translateY(-0.3rem);
    border-color: var(--line-strong);
  }

  .polaroid:hover {
    z-index: 2;
    transform: rotate(0) translateY(-0.35rem);
  }

  .music-button:hover,
  .gift-button__label:hover,
  .dialog-back:hover,
  .memory-viewer__nav button:hover,
  .secondary-button:hover {
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, 0.075);
  }
}

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

@keyframes starFloat {
  0%, 100% { transform: translateY(0) rotate(0); opacity: 0.25; }
  50% { transform: translateY(-0.8rem) rotate(12deg); opacity: 0.55; }
}

@keyframes heartTap {
  0% { transform: scale(1); }
  45% { transform: scale(0.88); }
  75% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes heartComplete {
  0% { transform: scale(1); }
  38% { transform: scale(1.22); filter: brightness(1.2); }
  100% { transform: scale(1.05); filter: brightness(1); }
}

@keyframes particleBurst {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(var(--spin)); opacity: 0; }
}

@keyframes giftFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-0.55rem) rotate(1deg); }
}

@keyframes giftOpen {
  0%, 40% { transform: translateY(0); }
  70% { transform: translateY(-0.4rem) scale(1.04); }
  100% { transform: translateY(1.5rem) scale(0.92); opacity: 0; }
}

@keyframes lidOpen {
  0% { transform: translateX(-50%) rotate(0); }
  60%, 100% { transform: translate(-38%, -4.8rem) rotate(24deg); }
}

@keyframes ribbonFade {
  to { opacity: 0; }
}

@keyframes equalizer {
  from { height: 25%; }
  to { height: 72%; }
}

@keyframes dialogIn {
  from { opacity: 0; transform: translateY(1.25rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes noteReveal {
  from { opacity: 0; transform: translateY(0.6rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes letterOpen {
  from { opacity: 0; transform: translateY(2rem) scaleY(0.9); transform-origin: top; }
  to { opacity: 1; transform: translateY(0) scaleY(1); }
}

@keyframes sequenceLine {
  from { opacity: 0; transform: translateY(1rem); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes finalReveal {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}