@font-face {
  font-family: "Ma Shan Zheng";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./assets/fonts/MaShanZheng-GameSubset.woff2?v=vn132-embedded") format("woff2");
}

@font-face {
  font-family: "ZCOOL KuaiLe";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./assets/fonts/ZCOOLKuaiLe-GameSubset.woff2?v=vn132-embedded") format("woff2");
}

:root {
  --ink: #f7f0e6;
  --text: #3c3542;
  --muted: #7a7180;
  --accent: #d6a85d;
  --accent-2: #8ab4d8;
  --paper: #fff8ec;
  --paper-deep: #f3e4d4;
  --panel: rgba(255, 248, 236, 0.9);
  --dark-panel: rgba(34, 26, 45, 0.66);
  --line: rgba(104, 88, 92, 0.16);
  --shadow: rgba(47, 35, 45, 0.3);
  --safe-x: max(16px, env(safe-area-inset-left, 0px));
  --safe-y: max(14px, env(safe-area-inset-top, 0px));
  --font-hand: "Ma Shan Zheng", "KaiTi", "STKaiti", "Hannotate SC", "Microsoft YaHei", "PingFang SC", cursive, sans-serif;
  --font-title: var(--font-hand);
}

/* Final page v95: a quiet letter instead of a poster-like ending. */
.title-menu.final-mode .final-sky {
  padding: calc(46px + env(safe-area-inset-top, 0px)) var(--safe-x) calc(26px + env(safe-area-inset-bottom, 0px));
  align-content: center;
  justify-items: center;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 238, 176, 0.28), transparent 24%),
    radial-gradient(circle at 84% 22%, rgba(166, 208, 226, 0.18), transparent 26%),
    linear-gradient(180deg, #f9eedf 0%, #f2dfcf 100%);
  color: #574851;
}

.title-menu.final-mode .final-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("./assets/images/paper-texture.svg?v=vn132-embedded"),
    repeating-linear-gradient(8deg, rgba(93, 70, 62, 0.026) 0 1px, transparent 1px 8px);
  background-size: cover, auto;
  opacity: 0.42;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.title-menu.final-mode .final-sky::after {
  background:
    radial-gradient(circle at 52% 48%, rgba(255, 255, 255, 0.28), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 70%);
  opacity: 0.72;
  mix-blend-mode: soft-light;
}

.title-menu.final-mode .final-constellation,
.title-menu.final-mode .final-keepsakes {
  display: none;
}

.title-menu.final-mode .final-stars {
  opacity: 0.48;
}

.title-menu.final-mode .final-stars span {
  background: rgba(213, 161, 82, 0.54);
  filter: none;
}

.title-menu.final-mode .final-paper-lines {
  display: block;
  position: absolute;
  z-index: 1;
  width: min(86%, 356px);
  height: min(76%, 660px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-0.4deg);
  border: 2px solid rgba(103, 78, 70, 0.12);
  border-radius: 28px 20px 30px 22px / 22px 30px 20px 28px;
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(133, 96, 84, 0.07) 32px 33px),
    rgba(255, 250, 238, 0.54);
  box-shadow: 4px 5px 0 rgba(120, 84, 58, 0.06);
  opacity: 0.72;
  pointer-events: none;
}

.title-menu.final-mode .final-message.final-letter {
  --final-letter-size: clamp(16px, 4.05vw, 18px);
  width: min(88vw, 358px);
  max-height: calc(100dvh - 128px);
  overflow: hidden;
  align-content: start;
  justify-items: stretch;
  gap: 10px;
  padding: 26px 22px 28px;
  border: 2px solid rgba(93, 70, 62, 0.28);
  outline: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 30px 22px 32px 24px / 24px 32px 22px 30px;
  background:
    linear-gradient(90deg, rgba(199, 138, 120, 0.18) 0 2px, transparent 2px 100%),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(133, 96, 84, 0.06) 32px 33px),
    radial-gradient(circle at 14% 9%, rgba(255, 239, 190, 0.38), transparent 26%),
    rgba(255, 251, 241, 0.94);
  box-shadow:
    3px 5px 0 rgba(120, 84, 58, 0.08),
    0 18px 34px rgba(70, 48, 48, 0.12);
  color: #5a4a52;
  font-family: var(--font-hand);
  text-align: left;
  text-shadow: none;
  transform: rotate(-0.35deg);
}

.title-menu.final-mode .final-message.final-letter::before,
.title-menu.final-mode .final-message.final-letter::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.title-menu.final-mode .final-message.final-letter::before {
  inset: 12px;
  border: 1px dashed rgba(118, 90, 80, 0.18);
  border-radius: inherit;
}

.title-menu.final-mode .final-message.final-letter::after {
  right: 24px;
  bottom: 20px;
  width: 54px;
  height: 54px;
  border: 2px solid rgba(190, 125, 125, 0.28);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(246, 194, 200, 0.22), transparent 56%);
}

.title-menu.final-mode .final-message.final-letter p,
.title-menu.final-mode .final-message.final-letter .final-signature,
.title-menu.final-mode #finalBackBtn {
  font-size: var(--final-letter-size);
  line-height: 1.72;
  font-weight: 500;
  letter-spacing: 0;
}

.title-menu.final-mode .final-message.final-letter p {
  margin: 0;
  color: #5a4a52;
  font-family: inherit;
  text-wrap: balance;
}

.title-menu.final-mode .final-message.final-letter .final-signature {
  justify-self: end;
  margin-top: 2px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #7b5f58;
  font-family: inherit;
}

.title-menu.final-mode .final-birthday-photo {
  width: min(100%, 238px);
  justify-self: center;
  margin: 2px 0 4px;
  padding: 8px;
  border: 2px solid rgba(91, 73, 70, 0.26);
  border-radius: 13px 9px 15px 10px;
  background:
    repeating-linear-gradient(-4deg, rgba(111, 82, 68, 0.025) 0 2px, transparent 2px 8px),
    rgba(255, 249, 232, 0.96);
  box-shadow:
    2px 4px 0 rgba(108, 76, 49, 0.07),
    0 12px 20px rgba(52, 38, 45, 0.1);
  transform: rotate(1.2deg);
}

.title-menu.final-mode .final-birthday-photo img {
  aspect-ratio: 4 / 3;
  object-position: center 34%;
  filter: sepia(0.1) saturate(0.78) contrast(0.92) brightness(1.05);
  opacity: 0.95;
  mix-blend-mode: multiply;
}

.title-menu.final-mode #finalBackBtn {
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  min-width: 132px;
  min-height: 42px;
  border-color: rgba(91, 73, 70, 0.34);
  background:
    repeating-linear-gradient(-6deg, rgba(112, 86, 76, 0.026) 0 2px, transparent 2px 7px),
    rgba(255, 246, 222, 0.86);
  color: #5a4a52;
  box-shadow: 2px 3px 0 rgba(108, 76, 49, 0.08);
}

@media (max-height: 740px) {
  .title-menu.final-mode .final-message.final-letter {
    --final-letter-size: 15px;
    width: min(90vw, 350px);
    max-height: calc(100dvh - 112px);
    gap: 7px;
    padding: 20px 18px 22px;
  }

  .title-menu.final-mode .final-birthday-photo {
    width: min(100%, 206px);
    padding: 7px;
  }
}

* {
  box-sizing: border-box;
}

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

body {
  min-height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(214, 168, 93, 0.16), transparent 28%),
    radial-gradient(circle at 82% 86%, rgba(138, 180, 216, 0.16), transparent 30%),
    #191620;
  font-family: var(--font-hand);
  font-synthesis: none;
  color: var(--text);
}

button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

button:focus-visible {
  outline: 3px solid rgba(255, 239, 179, 0.95);
  outline-offset: 3px;
  box-shadow:
    0 0 0 5px rgba(82, 62, 75, 0.46),
    0 0 26px rgba(246, 211, 127, 0.52);
}

.vn-app {
  width: min(100vw, 430px);
  height: min(100dvh, 932px);
  min-height: 640px;
  position: relative;
  overflow: hidden;
  background: #17131d;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.48);
}

.vn-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.background {
  position: absolute;
  inset: 0;
  background-size: cover, cover;
  background-position: center;
  transform: scale(1.02);
  filter: saturate(0.86) contrast(0.95) brightness(1.04);
  transition: background-image 0.35s ease, filter 0.35s ease;
}

.background::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.vn-screen[data-background="bg-starmap.svg"] .background::before {
  background:
    radial-gradient(circle at 12% 13.8%, rgba(255, 247, 199, 0.95) 0 2px, rgba(255, 234, 158, 0.42) 3px, transparent 10px),
    radial-gradient(circle at 32% 9.8%, rgba(255, 252, 224, 0.88) 0 1.5px, rgba(255, 235, 158, 0.36) 3px, transparent 9px),
    radial-gradient(circle at 78% 15.6%, rgba(255, 249, 211, 0.98) 0 2.5px, rgba(255, 231, 146, 0.42) 4px, transparent 12px),
    radial-gradient(circle at 87% 31.7%, rgba(255, 252, 224, 0.82) 0 1.5px, rgba(255, 235, 158, 0.28) 3px, transparent 8px),
    radial-gradient(circle at 21.8% 38.8%, rgba(255, 247, 199, 0.92) 0 2px, rgba(255, 234, 158, 0.38) 3px, transparent 10px),
    radial-gradient(circle at 65.5% 47.9%, rgba(255, 252, 224, 0.82) 0 1.5px, rgba(255, 235, 158, 0.28) 3px, transparent 8px),
    radial-gradient(circle at 17.6% 64.6%, rgba(255, 247, 199, 0.86) 0 2px, rgba(255, 234, 158, 0.32) 3px, transparent 9px),
    radial-gradient(circle at 82.4% 68.8%, rgba(255, 247, 199, 0.9) 0 2px, rgba(255, 234, 158, 0.36) 3px, transparent 10px),
    radial-gradient(circle at 48.1% 77.4%, rgba(255, 252, 224, 0.82) 0 1.5px, rgba(255, 235, 158, 0.28) 3px, transparent 8px);
  filter: blur(0.4px);
  mix-blend-mode: screen;
  animation: starmapTwinkle 3.8s ease-in-out infinite;
}

.background::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("./assets/images/paper-texture.svg?v=vn132-embedded");
  background-size: cover;
  opacity: 0.18;
  mix-blend-mode: multiply;
  pointer-events: none;
}

@keyframes starmapTwinkle {
  0%, 100% {
    opacity: 0.22;
    filter: blur(0.6px) brightness(0.92);
    transform: scale(1);
  }
  26% {
    opacity: 0.72;
    filter: blur(0.2px) brightness(1.25);
    transform: scale(1.003);
  }
  48% {
    opacity: 0.34;
    filter: blur(0.7px) brightness(0.98);
  }
  72% {
    opacity: 0.86;
    filter: blur(0.1px) brightness(1.38);
    transform: scale(1.006);
  }
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 250, 238, 0.08), rgba(255, 250, 238, 0.02) 42%, rgba(37, 30, 42, 0.26)),
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.24), transparent 30%),
    repeating-linear-gradient(0deg, rgba(90, 74, 68, 0.025) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
}

.vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 28%, rgba(255, 255, 255, 0.12), transparent 18%),
    radial-gradient(circle at 75% 70%, rgba(255, 255, 255, 0.1), transparent 22%);
  opacity: 0.75;
}

.hud {
  position: absolute;
  z-index: 80;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--safe-y) var(--safe-x) 0;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 8px;
  align-items: start;
}

.vn-screen.chapter-mode .hud,
.vn-screen.chapter-mode .stage,
.vn-screen.chapter-mode .dialogue-box,
.vn-screen.chapter-mode .title-menu,
.vn-screen.chapter-mode .modal {
  display: none !important;
}

.hud-btn,
.dialogue-actions button {
  min-height: 34px;
  border: 1px solid rgba(88, 74, 78, 0.18);
  border-radius: 18px 15px 19px 14px;
  background: rgba(255, 248, 236, 0.48);
  color: #f9f0e3;
  text-shadow: 0 1px 2px rgba(48, 35, 45, 0.58);
  box-shadow: 0 10px 24px rgba(28, 19, 39, 0.22);
  backdrop-filter: blur(14px);
}

.dialogue-actions button.active,
.hud-btn.active,
.hud-btn:active {
  background: rgba(232, 184, 107, 0.65);
}

.resource-bar {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 5px 8px;
  border: 1px solid rgba(88, 74, 78, 0.22);
  border-radius: 20px 16px 22px 15px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 244, 194, 0.48), transparent 40%),
    rgba(75, 58, 70, 0.34);
  color: #fff6e9;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(48, 35, 45, 0.58);
  backdrop-filter: blur(14px);
}

.resource-bar span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.resource-bar i {
  width: 10px;
  height: 10px;
  display: inline-block;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 92%, 50% 70%, 21% 92%, 32% 56%, 2% 35%, 39% 35%);
  background: #f6d37f;
  color: #f6d37f;
  font-style: normal;
  filter: drop-shadow(0 0 5px rgba(246, 211, 127, 0.9));
}

.resource-bar.can-practice {
  cursor: pointer;
  box-shadow:
    3px 5px 0 rgba(108, 76, 49, 0.16),
    0 0 0 2px rgba(255, 237, 168, 0.26),
    0 0 18px rgba(246, 211, 127, 0.36);
}

.resource-bar.can-practice:active {
  transform: translateY(1px);
}

.vn-screen.birth-transition-mode .hud {
  opacity: 0.28;
  filter: saturate(0.48) brightness(1.24) blur(0.2px);
  pointer-events: none;
  transition: opacity 1.1s ease, filter 1.1s ease;
}

.vn-screen.birth-transition-mode .hud-btn,
.vn-screen.birth-transition-mode .resource-bar {
  border-color: rgba(255, 250, 228, 0.12);
  background:
    repeating-linear-gradient(-8deg, rgba(255, 255, 255, 0.028) 0 2px, transparent 2px 8px),
    rgba(255, 254, 246, 0.12);
  color: rgba(100, 77, 82, 0.32);
  text-shadow: none;
  box-shadow:
    0 0 26px rgba(255, 252, 234, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px);
}

.vn-screen.birth-transition-mode .resource-bar i {
  color: rgba(213, 161, 82, 0.34);
  text-shadow: 0 0 14px rgba(255, 244, 203, 0.62);
}

.stage {
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
}

.sprite {
  position: absolute;
  bottom: 148px;
  width: min(58vw, 250px);
  max-height: 58vh;
  object-fit: contain;
  filter: saturate(0.86) contrast(0.93) drop-shadow(0 22px 30px rgba(20, 12, 28, 0.26));
  animation: spriteIn 0.36s ease both;
}

.sprite-left {
  left: max(5px, env(safe-area-inset-left, 0px));
}

.sprite-right {
  right: max(4px, env(safe-area-inset-right, 0px));
}

.sprite-center {
  left: 50%;
  transform: translateX(-50%);
  animation-name: spriteCenterIn;
}

.chapter-card {
  position: absolute;
  z-index: 85;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(34px + env(safe-area-inset-top, 0px)) 24px calc(34px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 251, 239, 0.32), transparent 34%),
    rgba(31, 25, 37, 0.28);
  box-shadow: none;
  color: #fff8ea;
  text-align: center;
  font-family: var(--font-title);
  font-size: clamp(26px, 8vw, 42px);
  line-height: 1.35;
  text-shadow: 0 3px 16px rgba(45, 32, 44, 0.42);
  cursor: pointer;
  backdrop-filter: blur(10px);
  animation: chapterIn 0.45s ease both;
}

.chapter-card:not(.hidden)::before {
  content: "";
  width: min(82%, 420px);
  min-height: 150px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-0.5deg);
  border: 2px solid rgba(255, 248, 229, 0.62);
  border-radius: 28px 22px 32px 24px;
  background:
    linear-gradient(180deg, rgba(255, 251, 239, 0.18), rgba(255, 239, 208, 0.08));
  box-shadow:
    0 26px 70px rgba(30, 22, 34, 0.22),
    inset 0 0 0 1px rgba(98, 73, 73, 0.08);
  pointer-events: none;
}

.chapter-card:not(.hidden)::after {
  content: "点击继续";
  position: absolute;
  left: 50%;
  top: calc(50% + 78px);
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 14px;
  color: rgba(255, 248, 229, 0.82);
  letter-spacing: 0;
  text-shadow: 0 2px 10px rgba(45, 32, 44, 0.38);
  pointer-events: none;
}

.hidden {
  display: none !important;
}

.dialogue-box {
  position: absolute;
  z-index: 40;
  left: var(--safe-x);
  right: var(--safe-x);
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  min-height: 190px;
  padding: 16px 16px 14px;
  border-radius: 18px 15px 20px 14px;
  background:
    linear-gradient(180deg, rgba(255, 250, 239, 0.93), rgba(247, 234, 216, 0.88));
  border: 1px solid rgba(88, 70, 74, 0.16);
  box-shadow: 0 18px 52px rgba(37, 27, 42, 0.25);
  backdrop-filter: blur(16px);
}

.dialogue-box::before {
  content: "";
  position: absolute;
  inset: 6px 12px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180, 132, 68, 0.48), transparent);
}

.dialogue-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.speaker-name {
  min-width: 72px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 14px;
  border-radius: 16px 13px 17px 12px;
  background: linear-gradient(180deg, #f7dfaa, #d6a85d);
  color: #594350;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 8px 16px rgba(140, 91, 48, 0.18);
}

.dialogue-actions {
  display: flex;
  gap: 6px;
}

.dialogue-actions button {
  min-height: 34px;
  padding: 0 9px;
  color: #6d596f;
  background: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

#dialogueText {
  min-height: 72px;
  margin: 10px 2px 12px;
  color: #3b3340;
  font-family: "Ma Shan Zheng", "KaiTi", "STKaiti", "Hannotate SC", cursive, sans-serif;
  line-height: 1.78;
  font-size: 16px;
  font-synthesis: none;
}

.advance-btn {
  float: right;
  min-width: 96px;
  min-height: 42px;
  border: 0;
  border-radius: 17px 14px 18px 13px;
  background: linear-gradient(180deg, #f6dfaa, #d6a85d);
  color: #5b4050;
  box-shadow: 0 10px 24px rgba(155, 104, 53, 0.24);
}

.choice-layer {
  display: none;
  gap: 9px;
}

.choice-layer.active {
  display: grid;
}

.choice-btn {
  width: 100%;
  min-height: 48px;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(118, 91, 69, 0.18);
  border-radius: 17px 14px 18px 13px;
  padding: 10px 14px;
  background: rgba(255, 250, 239, 0.7);
  color: #3c3045;
  text-align: left;
  box-shadow: 0 10px 24px rgba(57, 38, 66, 0.12);
}

.choice-btn em {
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
}

.choice-btn:disabled {
  opacity: 0.46;
}

.title-menu,
.modal {
  position: absolute;
  z-index: 60;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(82px + env(safe-area-inset-top, 0px)) var(--safe-x) max(24px, env(safe-area-inset-bottom, 0px));
  background: rgba(18, 12, 28, 0.24);
  backdrop-filter: blur(2px);
}

.title-menu.map-mode {
  display: block;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}

.title-menu.final-mode {
  display: block;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  overflow: hidden;
}

.final-sky {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 42px var(--safe-x);
  background:
    url("./assets/images/bg-final-crayon.svg?v=vn132-embedded") center / cover no-repeat;
  color: #fff8e8;
}

.final-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("./assets/images/paper-texture.svg?v=vn132-embedded"),
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 42%, rgba(55, 48, 67, 0.1));
  background-size: cover, cover, auto;
  opacity: 0.82;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.final-moon {
  display: none;
}

.final-paper-lines {
  display: none;
}

.final-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.final-stars span {
  position: absolute;
  left: calc((var(--i) * 37) % 100 * 1%);
  top: calc((var(--i) * 61) % 100 * 1%);
  width: calc(5px + (var(--i) % 3) * 1px);
  height: calc(5px + (var(--i) % 3) * 1px);
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.32) 0 1px, transparent 1px 3px),
    rgba(255, 231, 153, 0.88);
  clip-path: polygon(48% 0, 61% 34%, 100% 47%, 64% 62%, 52% 100%, 38% 65%, 0 52%, 36% 37%);
  filter: none;
  animation: finalStarTwinkle calc(2.4s + (var(--i) % 5) * .5s) ease-in-out infinite;
}

.final-constellation {
  position: absolute;
  left: 34px;
  top: 138px;
  width: 168px;
  height: 118px;
  opacity: 0.24;
}

.final-constellation::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 24px;
  width: 126px;
  height: 70px;
  border-top: 3px dotted rgba(255, 224, 156, 0.34);
  border-right: 3px dotted rgba(255, 224, 156, 0.24);
  transform: rotate(14deg) skewX(-10deg);
  border-radius: 48%;
}

.final-constellation i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(30deg, rgba(255,255,255,0.3) 0 1px, transparent 1px 3px),
    rgba(255, 225, 146, 0.92);
  box-shadow: 0 0 0 2px rgba(255, 225, 146, 0.1);
}

.crayon-cloud {
  display: none;
}

.cloud-a {
  left: -18px;
  bottom: 136px;
}

.cloud-b {
  right: -32px;
  top: 210px;
  transform: rotate(8deg) scale(0.86);
  opacity: 0.82;
}

.final-constellation i:nth-child(1) { left: 14px; top: 22px; }
.final-constellation i:nth-child(2) { left: 48px; top: 50px; }
.final-constellation i:nth-child(3) { left: 88px; top: 35px; }
.final-constellation i:nth-child(4) { left: 120px; top: 70px; }
.final-constellation i:nth-child(5) { left: 148px; top: 48px; }

.shooting-star {
  position: absolute;
  width: 150px;
  height: 9px;
  border-radius: 70% 42% 70% 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 241, 190, 0.58) 50%, transparent);
  filter: blur(.15px);
  transform: rotate(-24deg);
  opacity: 0;
}

.shooting-a {
  left: -30%;
  top: 20%;
  animation: shootingStar 4.8s ease-in-out infinite 0.3s;
}

.shooting-b {
  left: -40%;
  top: 46%;
  width: 90px;
  animation: shootingStar 6.2s ease-in-out infinite 2.1s;
}

.shooting-c {
  left: -35%;
  top: 70%;
  width: 140px;
  animation: shootingStar 7.4s ease-in-out infinite 3.6s;
}

.final-message {
  position: relative;
  z-index: 2;
  width: min(100%, 360px);
  display: grid;
  gap: 10px;
  text-align: center;
  padding: 0 8px;
  text-shadow: 0 2px 0 rgba(68, 56, 75, 0.16);
}

.final-message::before,
.final-message::after {
  content: "";
  justify-self: center;
  width: 116px;
  height: 10px;
  border-top: 3px solid rgba(255, 238, 192, 0.34);
  border-radius: 50%;
}

.final-message::after {
  width: 84px;
  opacity: 0.72;
}

.final-message span {
  justify-self: center;
  color: rgba(255, 239, 202, 0.82);
  font-family: var(--font-hand);
  font-size: 18px;
  letter-spacing: 0;
}

.final-message p {
  margin: 0;
  font-family: var(--font-hand);
  font-size: clamp(28px, 7.6vw, 40px);
  line-height: 1.55;
  color: #fff4cf;
  -webkit-text-stroke: 0;
  filter: none;
  text-wrap: balance;
}

.final-message small {
  max-width: 300px;
  justify-self: center;
  font-size: clamp(15px, 4.1vw, 18px);
  line-height: 1.7;
  color: rgba(255, 247, 226, 0.78);
  text-shadow: 0 1px 0 rgba(68, 56, 75, 0.12);
}

#finalBackBtn {
  position: absolute;
  z-index: 3;
  bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  min-width: 132px;
  min-height: 42px;
  border: 2px solid rgba(255, 224, 156, 0.34);
  border-radius: 24px 17px 25px 16px / 17px 25px 16px 24px;
  background:
    repeating-linear-gradient(-12deg, rgba(255,255,255,0.08) 0 4px, transparent 4px 9px),
    rgba(255, 241, 190, 0.14);
  color: #fff8e8;
  box-shadow: 0 14px 34px rgba(8, 9, 22, 0.26);
  backdrop-filter: blur(14px);
}

@keyframes shootingStar {
  0%, 64% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(-22deg);
  }
  70% {
    opacity: 1;
  }
  88% {
    opacity: 0;
    transform: translate3d(155vw, 34vh, 0) rotate(-24deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(155vw, 34vh, 0) rotate(-24deg);
  }
}

@keyframes finalStarTwinkle {
  0%, 100% {
    opacity: 0.38;
    transform: scale(0.82);
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

.title-panel,
.gacha-machine,
.card-reveal,
.minigame-panel,
.history-panel,
.settings-panel,
.quick-test-panel,
.map-panel {
  width: min(100%, 350px);
  max-height: min(86vh, 760px);
  overflow: auto;
  padding: 22px;
  border-radius: 20px 16px 22px 15px;
  border: 1px solid rgba(88, 70, 74, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 250, 239, 0.94), rgba(244, 229, 211, 0.88));
  box-shadow: 0 22px 70px rgba(39, 29, 43, 0.28);
  text-align: center;
  backdrop-filter: blur(18px);
}

.title-kicker,
.modal-kicker {
  display: block;
  margin-bottom: 10px;
  color: #9b7668;
  letter-spacing: 0;
  font-size: 14px;
}

.title-panel h1,
.gacha-machine h2,
.card-reveal h2,
.minigame-panel h2,
.history-panel h2,
.settings-panel h2,
.quick-test-panel h2 {
  margin: 0;
  color: #4b414f;
  font-family: var(--font-title);
  font-size: 34px;
  line-height: 1.12;
}

.map-header h1 {
  margin: 0;
  color: #4b414f;
  font-family: var(--font-title);
  font-size: 30px;
  line-height: 1.1;
}

.title-panel p,
.gacha-machine p,
.card-reveal p,
.minigame-panel p,
.settings-panel p,
.quick-test-panel p {
  color: var(--muted);
  line-height: 1.6;
}

.quick-test-panel {
  text-align: left;
}

.quick-test-panel p {
  margin: 10px 0 16px;
  font-size: 14px;
}

.quick-test-actions {
  display: grid;
  gap: 9px;
  margin: 12px 0;
}

.test-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  color: #5c4c56;
  font-size: 14px;
}

.test-toggle input {
  width: 18px;
  height: 18px;
  accent-color: #d6a85d;
}

.test-select-label {
  display: block;
  margin: 14px 0 8px;
  color: #806561;
  font-size: 13px;
  font-weight: 700;
}

.quick-test-panel select {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid rgba(118, 88, 72, 0.22);
  border-radius: 14px 12px 15px 12px;
  background: rgba(255, 250, 239, 0.92);
  color: #4b414f;
  font: inherit;
}

.map-header p {
  margin: 10px auto 12px;
  max-width: 300px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 15px;
}

.title-actions {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.title-actions button,
.gacha-machine button,
.card-reveal button,
.minigame-panel button,
.history-panel button,
.settings-panel button,
.quick-test-panel button {
  min-height: 46px;
  border: 0;
  border-radius: 17px 14px 18px 13px;
  background: linear-gradient(180deg, #f6dfaa, #d6a85d);
  color: #5b4050;
  box-shadow: 0 10px 24px rgba(155, 104, 53, 0.2);
}

.map-panel {
  width: min(100%, 374px);
  max-height: min(90vh, 820px);
  padding: 18px;
  text-align: left;
  border-color: rgba(130, 99, 82, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 251, 242, 0.95), rgba(239, 224, 205, 0.9)),
    radial-gradient(circle at 50% 0%, rgba(246, 211, 127, 0.22), transparent 34%);
}

.map-header {
  text-align: center;
}

.map-stardust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 5px 14px;
  border-radius: 17px 14px 18px 13px;
  background: rgba(255, 244, 203, 0.78);
  color: #654d5d;
  box-shadow: inset 0 0 0 1px rgba(137, 104, 69, 0.12);
}

.map-stardust strong {
  font-size: 20px;
  color: #a96f36;
}

.map-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0 14px;
}

.map-actions button {
  min-height: 42px;
  border: 0;
  border-radius: 17px 14px 18px 13px;
  background: linear-gradient(180deg, #f6dfaa, #d6a85d);
  color: #5b4050;
  box-shadow: 0 10px 24px rgba(155, 104, 53, 0.18);
}

.map-actions button:first-child {
  background: linear-gradient(180deg, #dfeef2, #8ab4d8);
}

.home-grid {
  display: grid;
  gap: 10px;
}

.home-card {
  width: 100%;
  min-height: 104px;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  align-items: stretch;
  padding: 9px;
  border: 1px solid rgba(118, 91, 69, 0.14);
  border-radius: 18px 14px 19px 13px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(255, 240, 221, .68));
  color: #4b3a55;
  text-align: left;
  box-shadow: 0 12px 28px rgba(58, 38, 66, 0.11);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.home-card:not(:disabled):hover,
.home-card:not(:disabled):focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 14px 34px rgba(58, 38, 66, 0.17),
    inset 0 0 0 2px rgba(246, 211, 127, 0.48);
}

.home-card:not(:disabled):active {
  transform: translateY(1px);
}

.home-card:disabled {
  opacity: 0.62;
}

.home-card.explored {
  background:
    linear-gradient(180deg, rgba(231, 243, 234, 0.84), rgba(255, 249, 238, 0.68));
}

.home-card.story-locked {
  filter: saturate(0.72);
}

.home-thumb {
  min-height: 86px;
  border-radius: 15px 12px 16px 11px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(94, 74, 65, 0.12);
  filter: saturate(0.82) contrast(0.92);
}

.home-info {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
}

.home-info strong {
  color: #4b414f;
  font-size: 16px;
}

.home-info em {
  color: #7a7180;
  font-size: 14px;
  font-style: normal;
  line-height: 1.42;
}

.home-info small {
  width: max-content;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(246, 223, 170, 0.72);
  color: #73545d;
  font-size: 14px;
  line-height: 1.2;
}

.home-card.explored .home-info small {
  background: rgba(188, 220, 194, 0.68);
}

.home-grid {
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 112px;
  gap: 12px 10px;
  padding: 18px 8px 10px;
  border-radius: 24px 18px 25px 17px;
  border: 1px solid rgba(118, 91, 69, 0.12);
  background:
    radial-gradient(circle at 18% 22%, rgba(246, 211, 127, 0.18), transparent 22%),
    radial-gradient(circle at 78% 66%, rgba(138, 180, 216, 0.16), transparent 25%),
    linear-gradient(180deg, rgba(255,255,255,.36), rgba(255, 247, 234, .2));
  overflow: hidden;
}

.home-grid::before {
  content: "";
  position: absolute;
  inset: 18px 20px;
  border-radius: 50%;
  border: 1px dashed rgba(137, 104, 69, 0.18);
  transform: rotate(-12deg);
  pointer-events: none;
}

.home-grid::after {
  content: "";
  position: absolute;
  inset: 50px 54px;
  border-radius: 50%;
  border: 1px dashed rgba(138, 180, 216, 0.2);
  transform: rotate(18deg);
  pointer-events: none;
}

.planet-node {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 104px;
  border: 0;
  display: grid;
  place-items: center;
  background: transparent;
  color: #654d5d;
  isolation: isolate;
}

.planet-node:disabled {
  cursor: default;
}

.planet-orbit {
  position: absolute;
  width: 84px;
  height: 58px;
  border-radius: 50%;
  border: 2px solid rgba(104, 88, 92, 0.22);
  transform: rotate(-17deg);
  opacity: 0.72;
}

.planet-body {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), transparent 21%),
    linear-gradient(145deg, #efd27f, #d6a85d);
  box-shadow:
    inset -10px -14px 18px rgba(91, 63, 58, 0.15),
    0 12px 24px rgba(58, 38, 66, 0.18);
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

.planet-shine {
  position: absolute;
  left: 16px;
  top: 12px;
  width: 14px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.62);
  transform: rotate(-24deg);
}

.planet-mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 250, 239, 0.66);
  color: #76565d;
  font-size: 18px;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(102, 78, 68, 0.12);
}

.planet-cost {
  position: absolute;
  right: 6px;
  bottom: 4px;
  z-index: 2;
  min-width: 40px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 248, 236, 0.84);
  color: #76565d;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 16px rgba(58, 38, 66, 0.12);
}

.planet-cost i {
  color: #d6a85d;
  font-style: normal;
  text-shadow: 0 0 8px rgba(246, 211, 127, 0.78);
}

.planet-shadow {
  position: absolute;
  bottom: 18px;
  width: 54px;
  height: 12px;
  border-radius: 50%;
  background: rgba(58, 38, 66, 0.12);
  filter: blur(4px);
  z-index: -1;
}

.planet-node:not(:disabled):hover .planet-body,
.planet-node:not(:disabled):focus-visible .planet-body {
  transform: translateY(-4px) scale(1.06);
  filter: brightness(1.08);
  box-shadow:
    inset -10px -14px 18px rgba(91, 63, 58, 0.13),
    0 18px 34px rgba(58, 38, 66, 0.22),
    0 0 28px rgba(246, 211, 127, 0.42);
}

.planet-node:not(:disabled):active .planet-body {
  transform: translateY(1px) scale(0.98);
}

.planet-node.explored .planet-body {
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.92), transparent 21%),
    linear-gradient(145deg, #d7ecd5, #8ebf9a);
}

.planet-node.explored .planet-orbit {
  border-style: solid;
  border-color: rgba(113, 157, 120, 0.46);
}

.planet-node.dust-locked .planet-body,
.planet-node.story-locked .planet-body {
  filter: grayscale(0.28) saturate(0.55);
  opacity: 0.56;
}

.planet-node.dust-locked .planet-cost,
.planet-node.story-locked .planet-cost {
  background: rgba(238, 229, 218, 0.78);
  color: #8b7f87;
}

.planet-family01 .planet-body {
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), transparent 21%),
    linear-gradient(145deg, #f3c2c8 0 24%, #eadc91 24% 44%, #a9d7bf 44% 64%, #9fc8e8 64% 100%);
}

.planet-family02 .planet-body {
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), transparent 21%),
    linear-gradient(145deg, #dce7f2, #c9bfd0);
}

.planet-family03 .planet-body {
  border-radius: 44% 56% 48% 52%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), transparent 21%),
    linear-gradient(145deg, #c5e0da, #dec693);
}

.planet-family04 .planet-body {
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), transparent 21%),
    conic-gradient(from 20deg, #f3c2c8, #f0d27d, #dfeef2, #f3c2c8);
}

.planet-warm .planet-body {
  width: 70px;
  height: 70px;
  background:
    radial-gradient(circle at 40% 34%, rgba(255,255,255,.95), transparent 20%),
    radial-gradient(circle at 50% 50%, #f6d37f, #d39d63 62%, #9c7468 100%);
}

.planet-gate .planet-body {
  width: 74px;
  height: 74px;
  border-radius: 44% 56% 44% 56%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.92), transparent 21%),
    linear-gradient(145deg, #dfeef2, #e5d1dc 48%, #f6d37f);
}

.planet-gate .planet-orbit {
  width: 96px;
  height: 64px;
  border-color: rgba(246, 211, 127, 0.42);
}

.starmap-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.starmap-hud {
  position: absolute;
  z-index: 70;
  top: calc(68px + env(safe-area-inset-top, 0px));
  left: var(--safe-x);
  right: var(--safe-x);
  display: grid;
  grid-template-columns: 92px 1fr 76px;
  gap: 8px;
  align-items: center;
}

.starmap-hud .map-stardust {
  min-height: 44px;
  justify-content: center;
  color: #fff7df;
  background: rgba(48, 39, 58, 0.42);
  border: 1px solid rgba(255, 239, 190, 0.24);
  text-shadow: 0 1px 3px rgba(35, 24, 42, 0.72);
}

.starmap-hud .map-stardust i {
  color: #f6d37f;
  font-style: normal;
}

.starmap-hud button {
  min-height: 44px;
  border: 1px solid rgba(255, 239, 190, 0.22);
  border-radius: 19px 15px 20px 14px;
  background: rgba(255, 248, 236, 0.46);
  color: #fff7df;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(35, 24, 42, 0.65);
  box-shadow: 0 12px 28px rgba(35, 24, 42, 0.2);
  backdrop-filter: blur(14px);
}

.ambient-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ambient-stars span {
  position: absolute;
  left: 12%;
  top: 18%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 239, 176, 0.72);
  box-shadow: 0 0 12px rgba(255, 239, 176, 0.78);
}

.ambient-stars span:nth-child(2) { left: 28%; top: 12%; }
.ambient-stars span:nth-child(3) { left: 48%; top: 18%; }
.ambient-stars span:nth-child(4) { left: 74%; top: 14%; }
.ambient-stars span:nth-child(5) { left: 88%; top: 25%; }
.ambient-stars span:nth-child(6) { left: 18%; top: 34%; }
.ambient-stars span:nth-child(7) { left: 56%; top: 30%; }
.ambient-stars span:nth-child(8) { left: 82%; top: 38%; }
.ambient-stars span:nth-child(9) { left: 10%; top: 48%; }
.ambient-stars span:nth-child(10) { left: 34%; top: 52%; }
.ambient-stars span:nth-child(11) { left: 60%; top: 48%; }
.ambient-stars span:nth-child(12) { left: 92%; top: 56%; }
.ambient-stars span:nth-child(13) { left: 20%; top: 68%; }
.ambient-stars span:nth-child(14) { left: 44%; top: 70%; }
.ambient-stars span:nth-child(15) { left: 72%; top: 66%; }
.ambient-stars span:nth-child(16) { left: 86%; top: 76%; }
.ambient-stars span:nth-child(17) { left: 14%; top: 82%; }
.ambient-stars span:nth-child(18) { left: 38%; top: 86%; }
.ambient-stars span:nth-child(19) { left: 64%; top: 84%; }
.ambient-stars span:nth-child(20) { left: 78%; top: 90%; }
.ambient-stars span:nth-child(3n) { width: 4px; height: 4px; opacity: .88; }
.ambient-stars span:nth-child(4n) { width: 2px; height: 2px; opacity: .55; }

.star-field {
  position: absolute;
  inset: 108px 0 190px;
}

.wish-gate-title {
  position: absolute;
  z-index: 20;
  top: calc(76px + env(safe-area-inset-top, 0px));
  left: var(--safe-x);
  right: var(--safe-x);
  text-align: center;
  pointer-events: none;
}

.wish-gate-title h1 {
  margin: 0;
  color: #fff7df;
  font-family: var(--font-title);
  font-size: 30px;
  text-shadow: 0 2px 10px rgba(43, 31, 48, 0.48);
}

.wish-gate-title p {
  margin: 6px auto 0;
  max-width: 320px;
  color: rgba(255, 248, 226, 0.92);
  line-height: 1.45;
  text-shadow: 0 1px 6px rgba(43, 31, 48, 0.5);
}

.wish-gate-scene .star-field {
  inset: 206px 0 190px;
}

.star-node {
  position: absolute;
  z-index: 6;
  width: 118px;
  height: 118px;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  color: #75565e;
  transform: translate(-50%, -50%);
  touch-action: manipulation;
}

.star-node::before,
.star-node::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.star-node::before {
  width: 96px;
  height: 24px;
  bottom: 17px;
  background: radial-gradient(ellipse, rgba(51, 37, 56, 0.18), transparent 68%);
  filter: blur(2px);
  transform: rotate(-5deg);
}

.star-node::after {
  width: 86px;
  height: 86px;
  border: 2px solid rgba(92, 74, 83, 0.2);
  opacity: 0.36;
  transform: rotate(var(--ring-tilt, -16deg));
  clip-path: ellipse(50% 22% at 50% 50%);
}

.star-glow {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 238, 176, 0.62), rgba(255, 238, 176, 0.12) 42%, transparent 70%);
  filter: blur(7px);
  opacity: 0.86;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.star-sketch-ring {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  border: 2px solid rgba(104, 82, 86, 0.24);
  background: transparent;
}

.star-sketch-ring.ring-a {
  width: 96px;
  height: 58px;
  transform: rotate(-18deg);
  border-left-color: rgba(255, 239, 190, 0.6);
  border-bottom-color: rgba(255, 239, 190, 0.18);
}

.star-sketch-ring.ring-b {
  width: 74px;
  height: 102px;
  transform: rotate(28deg);
  border-top-color: rgba(255, 255, 255, 0.34);
  border-right-color: rgba(104, 82, 86, 0.14);
}

.star-core {
  position: relative;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 2px solid rgba(97, 75, 76, 0.34);
  border-radius: 46% 54% 50% 50% / 47% 43% 57% 53%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.92), transparent 17%),
    radial-gradient(circle at 68% 64%, rgba(255, 241, 184, 0.4), transparent 26%),
    linear-gradient(145deg, #f3c2c8 0 24%, #eadc91 24% 44%, #a9d7bf 44% 64%, #9fc8e8 64% 100%);
  box-shadow:
    inset -12px -16px 20px rgba(83, 63, 67, 0.15),
    inset 7px 8px 18px rgba(255, 255, 255, 0.2),
    0 12px 24px rgba(35, 24, 42, 0.22),
    0 0 24px rgba(246, 211, 127, 0.34);
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

.star-core::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(104, 82, 86, 0.22);
  border-radius: 47% 53% 48% 52% / 52% 42% 58% 48%;
}

.star-core::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(10deg, rgba(94, 73, 77, 0.045) 0 1px, transparent 1px 8px),
    radial-gradient(circle at 70% 24%, rgba(255, 255, 255, 0.34), transparent 12%);
  mix-blend-mode: multiply;
  opacity: 0.62;
}

.star-texture,
.star-window,
.star-spark {
  position: absolute;
  pointer-events: none;
}

.star-texture {
  inset: 12px 10px 14px;
  border-radius: 48% 52% 48% 52%;
  background:
    radial-gradient(circle at 22% 42%, rgba(121, 96, 84, 0.16) 0 5px, transparent 6px),
    radial-gradient(circle at 76% 58%, rgba(121, 96, 84, 0.12) 0 4px, transparent 5px),
    linear-gradient(105deg, transparent 0 42%, rgba(255, 255, 255, 0.18) 43% 49%, transparent 50%);
}

.star-window {
  left: 24px;
  top: 27px;
  width: 19px;
  height: 15px;
  border: 2px solid rgba(96, 76, 80, 0.36);
  border-radius: 8px 8px 5px 5px;
  background:
    linear-gradient(90deg, transparent 45%, rgba(96, 76, 80, 0.24) 46% 54%, transparent 55%),
    linear-gradient(180deg, #fff3bd, #f0c96c);
  box-shadow: 0 0 14px rgba(255, 225, 137, 0.5);
  z-index: 2;
}

.star-spark {
  z-index: 3;
  width: 7px;
  height: 7px;
  background: #fff0a7;
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%);
  filter: drop-shadow(0 0 7px rgba(255, 226, 136, 0.8));
}

.spark-a { left: 13px; top: 17px; }
.spark-b { right: 13px; top: 40px; transform: scale(0.72) rotate(12deg); }
.spark-c { left: 42px; bottom: 11px; transform: scale(0.58) rotate(-18deg); }

.star-label {
  position: absolute;
  left: 50%;
  bottom: -2px;
  z-index: 6;
  max-width: 92px;
  transform: translateX(-50%);
  padding: 3px 8px 4px;
  border: 2px solid rgba(91, 73, 70, 0.36);
  border-radius: 999px;
  background: rgba(255, 251, 239, 0.82);
  color: #5b4050;
  font-size: 12px;
  line-height: 1.1;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(47, 34, 48, 0.14);
}

.star-node.selected .star-core,
.star-node:not(:disabled):hover .star-core,
.star-node:not(:disabled):focus-visible .star-core {
  transform: translateY(-5px) scale(1.08);
  filter: brightness(1.08) saturate(1.05);
  box-shadow:
    inset -12px -16px 20px rgba(83, 63, 67, 0.12),
    inset 7px 8px 18px rgba(255, 255, 255, 0.26),
    0 18px 36px rgba(35, 24, 42, 0.26),
    0 0 44px rgba(246, 211, 127, 0.62);
}

.star-node.selected .star-glow,
.star-node:not(:disabled):hover .star-glow,
.star-node:not(:disabled):focus-visible .star-glow {
  opacity: 1;
  transform: scale(1.08);
}

.star-node.explored .star-core {
  filter: brightness(1.14) saturate(1.12);
  box-shadow:
    inset -10px -14px 18px rgba(83, 63, 67, 0.1),
    inset 8px 9px 18px rgba(255, 255, 255, 0.24),
    0 13px 24px rgba(35, 24, 42, 0.18),
    0 0 28px rgba(255, 231, 151, 0.48),
    0 0 14px rgba(166, 220, 168, 0.34);
}

.star-node.explored .star-glow {
  opacity: 0.58;
  transform: scale(1.12);
  background: radial-gradient(circle, rgba(255, 238, 176, 0.52), rgba(255, 238, 176, 0.16) 46%, transparent 74%);
}

.star-node.explored .star-sketch-ring {
  opacity: 0.72;
  border-color: rgba(255, 238, 176, 0.5);
  filter: drop-shadow(0 0 4px rgba(255, 231, 151, 0.32));
}

.star-node.explored .star-label {
  background: rgba(255, 247, 203, 0.94);
  color: #4f5942;
  border-color: rgba(255, 231, 151, 0.78);
  box-shadow:
    0 8px 18px rgba(47, 34, 48, 0.16),
    0 0 18px rgba(255, 231, 151, 0.34);
}

.star-node.unexplored .star-core {
  filter: brightness(0.72) saturate(0.62);
  opacity: 0.74;
  box-shadow:
    inset -12px -16px 20px rgba(83, 63, 67, 0.2),
    inset 7px 8px 18px rgba(255, 255, 255, 0.13),
    0 10px 20px rgba(35, 24, 42, 0.2),
    0 0 14px rgba(246, 211, 127, 0.18);
}

.star-node.unexplored .star-glow,
.star-node.unexplored .star-sketch-ring {
  opacity: 0.34;
}

.star-node.unexplored .star-label {
  background: rgba(246, 240, 230, 0.7);
  color: rgba(91, 64, 80, 0.72);
}

.star-node.dust-locked .star-core,
.star-node.story-locked .star-core {
  opacity: 0.52;
  filter: brightness(0.58) grayscale(0.18) saturate(0.5);
}

.star-node.dust-locked .star-sketch-ring,
.star-node.story-locked .star-sketch-ring,
.star-node.dust-locked .star-glow,
.star-node.story-locked .star-glow {
  opacity: 0.22;
}

.star-node.unexplored.selected .star-core,
.star-node.unexplored:not(:disabled):hover .star-core,
.star-node.unexplored:not(:disabled):focus-visible .star-core {
  opacity: 0.92;
  filter: brightness(0.98) saturate(0.9);
  box-shadow:
    inset -12px -16px 20px rgba(83, 63, 67, 0.14),
    inset 7px 8px 18px rgba(255, 255, 255, 0.24),
    0 16px 32px rgba(35, 24, 42, 0.25),
    0 0 34px rgba(246, 211, 127, 0.46);
}

.star-node.unexplored.selected .star-glow,
.star-node.unexplored:not(:disabled):hover .star-glow,
.star-node.unexplored:not(:disabled):focus-visible .star-glow {
  opacity: 0.78;
}

.star-family01 {
  left: 22%;
  top: 24%;
}

.star-family02 {
  left: 70%;
  top: 20%;
}

.star-family03 {
  left: 38%;
  top: 39%;
}

.star-family04 {
  left: 80%;
  top: 48%;
}

.star-dino {
  left: 48%;
  top: 62%;
}

.star-warm {
  left: 28%;
  top: 70%;
}

.star-gate {
  left: 64%;
  top: 78%;
}

.star-family02 .star-core {
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.9), transparent 18%),
    radial-gradient(circle at 62% 70%, rgba(190, 169, 191, 0.42), transparent 24%),
    linear-gradient(145deg, #dce7f2, #c9bfd0);
  border-radius: 56% 44% 50% 50% / 44% 54% 46% 56%;
}

.star-family03 .star-core {
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.9), transparent 18%),
    radial-gradient(circle at 70% 38%, rgba(174, 203, 218, 0.48), transparent 23%),
    linear-gradient(145deg, #eef7ee, #c7d9ed);
  border-radius: 48% 52% 42% 58% / 54% 45% 55% 46%;
}

.star-family03 .star-window {
  border-radius: 50%;
  background:
    conic-gradient(from -90deg, transparent 0 25%, rgba(96, 76, 80, 0.38) 25% 27%, transparent 27% 100%),
    radial-gradient(circle, #fff7c9, #dbe9ef);
}

.star-family04 .star-core {
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.94), transparent 18%),
    radial-gradient(circle at 74% 32%, rgba(255, 247, 203, 0.64), transparent 20%),
    linear-gradient(145deg, #fff2bd, #e7b75f 44%, #f2a8b5);
  border-radius: 45% 55% 48% 52% / 52% 43% 57% 48%;
}

.star-family04 .star-window {
  background:
    linear-gradient(90deg, transparent 45%, rgba(96, 76, 80, 0.24) 46% 54%, transparent 55%),
    linear-gradient(180deg, #fff6c7, #e2a849);
  box-shadow: 0 0 18px rgba(255, 218, 111, 0.72);
}

.star-dino .star-core {
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.94), transparent 18%),
    radial-gradient(circle at 70% 68%, rgba(166, 206, 127, 0.58), transparent 24%),
    linear-gradient(145deg, #dcebb0, #8fc28b 48%, #f1d28a);
  border-radius: 54% 46% 48% 52% / 58% 58% 42% 42%;
}

.star-dino .star-window {
  width: 24px;
  height: 19px;
  left: 23px;
  top: 27px;
  border-radius: 54% 46% 48% 52% / 58% 58% 42% 42%;
  background:
    radial-gradient(circle at 68% 58%, rgba(112, 142, 82, 0.3) 0 4px, transparent 5px),
    linear-gradient(180deg, #fff4c7, #c8df9c);
}

.star-warm .star-core {
  width: 78px;
  height: 78px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.94), transparent 18%),
    radial-gradient(circle at 68% 64%, rgba(182, 216, 202, 0.62), transparent 25%),
    linear-gradient(145deg, #dff0ef 0 28%, #a8cfc4 28% 58%, #7fa9b7 58% 100%);
  border-radius: 50% 50% 46% 54% / 46% 54% 48% 52%;
}

.star-warm .star-glow {
  background: radial-gradient(circle, rgba(182, 224, 220, 0.78), rgba(166, 208, 226, 0.2) 48%, transparent 72%);
}

.star-warm .star-window {
  background:
    linear-gradient(90deg, transparent 45%, rgba(76, 94, 103, 0.24) 46% 54%, transparent 55%),
    linear-gradient(180deg, #fff7d8, #b8d8cf);
  box-shadow: 0 0 16px rgba(182, 224, 220, 0.62);
}

.star-gate .star-core {
  width: 82px;
  height: 82px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.92), transparent 18%),
    radial-gradient(circle at 70% 68%, rgba(246, 211, 127, 0.48), transparent 25%),
    linear-gradient(145deg, #dfeef2, #e5d1dc 48%, #f6d37f);
  border-radius: 44% 56% 44% 56% / 50% 42% 58% 50%;
}

.star-gate .star-window {
  width: 23px;
  height: 29px;
  left: 29px;
  top: 27px;
  border-radius: 14px 14px 6px 6px;
  background: linear-gradient(180deg, #fff7c9, #efc872);
}

.star-info {
  position: absolute;
  z-index: 20;
  left: var(--safe-x);
  right: var(--safe-x);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

.star-info-card {
  padding: 16px;
  border-radius: 20px 16px 22px 15px;
  border: 1px solid rgba(255, 239, 190, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 250, 239, 0.9), rgba(242, 224, 204, 0.82));
  box-shadow: 0 22px 54px rgba(35, 24, 42, 0.28);
  backdrop-filter: blur(18px);
}

.star-info-card h2 {
  margin: 0;
  color: #4b414f;
  font-family: var(--font-title);
  font-size: 26px;
}

.star-info-card p {
  margin: 8px 0 12px;
  color: #655a68;
  font-size: 15px;
  line-height: 1.55;
}

.star-requirement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: #73545d;
  font-size: 15px;
}

.star-requirement strong {
  min-width: 70px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 244, 203, 0.84);
  color: #9a663b;
}

.star-requirement strong i {
  width: 12px;
  height: 12px;
  margin-right: 5px;
  display: inline-block;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 92%, 50% 70%, 21% 92%, 32% 56%, 2% 35%, 39% 35%);
  background: #d8a45b;
}

.star-info-actions button {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 17px 14px 18px 13px;
  background: linear-gradient(180deg, #f6dfaa, #d6a85d);
  color: #5b4050;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(155, 104, 53, 0.2);
}

.star-info-actions button:disabled {
  opacity: 0.5;
}

.title-actions button:disabled,
.gacha-machine button:disabled {
  opacity: 0.44;
}

.wish-orbit {
  position: relative;
  width: 168px;
  height: 168px;
  margin: 20px auto;
  border-radius: 50%;
  border: 1px solid rgba(232, 184, 107, 0.42);
  background: radial-gradient(circle, rgba(255,255,255,.86), rgba(232,184,107,.14));
  animation: rotate 8s linear infinite;
}

.gift-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 22px 0 16px;
}

.gift-box {
  min-height: 138px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  border: 1px solid rgba(118, 91, 69, 0.16);
  border-radius: 19px 14px 20px 13px;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.82), transparent 28%),
    linear-gradient(180deg, rgba(255, 249, 242, 0.82), rgba(255, 232, 204, 0.72));
  color: #5b4050;
  box-shadow: 0 14px 30px rgba(82, 49, 77, 0.14);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.gift-box:not(:disabled):hover,
.gift-box:not(:disabled):focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.gift-box:not(:disabled):active {
  transform: translateY(2px) scale(0.98);
}

.gift-box span {
  position: relative;
  width: 58px;
  height: 54px;
  border-radius: 14px 12px 15px 11px;
  background: linear-gradient(180deg, #e9a0a9, #c87582);
  box-shadow: inset 0 -10px rgba(115, 45, 65, 0.12), 0 0 18px rgba(247, 163, 177, 0.42);
}

.gift-box span::before {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  top: -11px;
  height: 16px;
  border-radius: 8px;
  background: inherit;
}

.gift-box span::after {
  content: "";
  position: absolute;
  left: 24px;
  top: -13px;
  width: 10px;
  height: 70px;
  border-radius: 999px;
  background: rgba(255, 244, 194, 0.9);
  box-shadow: -18px -5px 0 -3px rgba(255, 244, 194, 0.8), 18px -5px 0 -3px rgba(255, 244, 194, 0.8);
}

.gift-box em {
  color: #755d69;
  font-style: normal;
  font-size: 14px;
}

.gift-gold span {
  background: linear-gradient(180deg, #efd27f, #d6a85d);
  box-shadow: inset 0 -10px rgba(115, 75, 25, 0.12), 0 0 18px rgba(232, 184, 107, 0.5);
}

.gift-blue span {
  background: linear-gradient(180deg, #acd0ed, #7da9cf);
  box-shadow: inset 0 -10px rgba(45, 78, 115, 0.12), 0 0 18px rgba(130, 185, 237, 0.5);
}

.gift-box.opened {
  filter: brightness(1.1) drop-shadow(0 0 18px rgba(255, 225, 150, 0.75));
}

.gift-box:disabled {
  opacity: 0.56;
}

.gift-hint {
  margin-top: 0;
  font-size: 14px;
}

.wish-orbit span {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e8b86b;
  box-shadow: 0 0 18px rgba(232, 184, 107, 0.75);
}

.wish-orbit span:nth-child(1) { left: 50%; top: -9px; }
.wish-orbit span:nth-child(2) { right: 10px; bottom: 22px; background: #9ec7ef; }
.wish-orbit span:nth-child(3) { left: 14px; bottom: 28px; background: #efa5b3; }

.card-reveal {
  min-height: 360px;
  display: grid;
  align-content: center;
  gap: 12px;
}

.card-reveal::before {
  content: none;
}

.drawn-card {
  position: relative;
  width: 168px;
  height: 218px;
  margin: 0 auto 6px;
  display: grid;
  align-content: end;
  justify-items: center;
  gap: 8px;
  padding: 18px 14px;
  overflow: hidden;
  border: 3px solid rgba(106, 79, 68, 0.68);
  border-radius: 28px 20px 30px 22px / 22px 30px 20px 28px;
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,.88), transparent 24%),
    linear-gradient(145deg, #fff7d4, #e7cf8a 52%, #f3bfd0);
  box-shadow:
    5px 8px 0 rgba(97, 68, 62, 0.15),
    0 18px 46px rgba(98, 58, 90, 0.24);
  isolation: isolate;
}

.drawn-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed rgba(126, 94, 75, 0.34);
  border-radius: inherit;
  pointer-events: none;
}

.drawn-card::after {
  content: "";
  position: absolute;
  inset: -40px;
  background: conic-gradient(from 30deg, transparent, rgba(255,255,255,.36), transparent, rgba(255, 224, 122, .32), transparent);
  opacity: 0.35;
  animation: rotate 9s linear infinite;
  z-index: -1;
}

.card-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.94), transparent 24%),
    radial-gradient(circle, #fff0a6, #e7b75f 72%);
  color: #83583d;
  font-size: 42px;
  box-shadow: 0 0 28px rgba(255, 224, 122, 0.64);
}

.card-icon::before {
  content: "";
  width: 38px;
  height: 38px;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 92%, 50% 70%, 21% 92%, 32% 56%, 2% 35%, 39% 35%);
  background: #83583d;
}

.card-medal {
  position: absolute;
  right: 14px;
  top: 12px;
  min-width: 42px;
  min-height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 250, 238, 0.82);
  border: 2px solid rgba(111, 82, 70, 0.45);
  color: #7b5a50;
  font-size: 13px;
  font-weight: 800;
}

.card-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.card-stars span {
  position: absolute;
  left: 12%;
  top: 16%;
  width: 14px;
  height: 14px;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 92%, 50% 70%, 21% 92%, 32% 56%, 2% 35%, 39% 35%);
  background: rgba(255, 244, 183, 0.92);
  color: rgba(255, 244, 183, 0.92);
  font-size: 14px;
  filter: drop-shadow(0 0 8px rgba(255, 226, 124, 0.8));
}

.card-stars span:nth-child(2) { left: 72%; top: 14%; font-size: 18px; }
.card-stars span:nth-child(3) { left: 24%; top: 34%; font-size: 16px; }
.card-stars span:nth-child(4) { left: 82%; top: 42%; font-size: 13px; }
.card-stars span:nth-child(5) { left: 15%; top: 62%; font-size: 20px; }
.card-stars span:nth-child(6) { left: 68%; top: 66%; font-size: 15px; }
.card-stars span:nth-child(7) { left: 45%; top: 12%; font-size: 12px; }
.card-stars span:nth-child(8) { left: 43%; top: 82%; font-size: 18px; }
.card-stars span:nth-child(9) { left: 88%; top: 78%; font-size: 14px; }
.card-stars span:nth-child(10) { left: 8%; top: 82%; font-size: 15px; }
.card-stars span:nth-child(11) { left: 54%; top: 50%; font-size: 21px; }
.card-stars span:nth-child(12) { left: 30%; top: 74%; font-size: 13px; }

.drawn-card strong {
  position: relative;
  z-index: 1;
  color: #674858;
  font-size: 20px;
}

.rarity-common .drawn-card {
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,.88), transparent 24%),
    linear-gradient(145deg, #fff7d4, #e7cf8a 58%, #e9c4b7);
}

.rarity-rare .drawn-card {
  border-color: rgba(91, 119, 141, 0.72);
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,.9), transparent 24%),
    linear-gradient(145deg, #e7f7ff, #9ec7ef 48%, #f4dca2);
  box-shadow: 5px 8px 0 rgba(75, 91, 102, 0.15), 0 0 34px rgba(147, 202, 235, 0.48);
}

.rarity-epic .drawn-card {
  width: 178px;
  height: 230px;
  border-color: rgba(151, 111, 55, 0.82);
  background:
    radial-gradient(circle at 35% 20%, rgba(255,255,255,.96), transparent 24%),
    radial-gradient(circle at 68% 42%, rgba(255, 231, 139, 0.7), transparent 26%),
    linear-gradient(145deg, #fff7c7, #e7b75f 46%, #bd9be8);
  box-shadow: 5px 8px 0 rgba(111, 82, 47, 0.16), 0 0 44px rgba(255, 218, 106, 0.62);
}

.rarity-legend .drawn-card {
  width: 190px;
  height: 246px;
  border-width: 4px;
  border-color: rgba(129, 86, 35, 0.92);
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.98), transparent 22%),
    radial-gradient(circle at 72% 34%, rgba(255, 244, 183, 0.82), transparent 24%),
    radial-gradient(circle at 50% 65%, rgba(255, 202, 99, 0.76), transparent 28%),
    linear-gradient(145deg, #fff6b7, #e7ac42 38%, #a984ff 72%, #f5bfd0);
  box-shadow:
    6px 10px 0 rgba(111, 82, 47, 0.18),
    0 0 60px rgba(255, 219, 104, 0.78),
    0 0 110px rgba(169, 132, 255, 0.34);
}

.rarity-legend .card-icon,
.rarity-epic .card-icon {
  width: 82px;
  height: 82px;
  font-size: 48px;
}

.rarity-legend .modal-kicker,
.rarity-epic .modal-kicker {
  color: #9b6337;
  font-size: 15px;
}

.bubble-field {
  min-height: 270px;
  position: relative;
  margin-top: 16px;
  border-radius: 18px 14px 20px 13px;
  border: 1px solid rgba(118, 91, 69, 0.12);
  background:
    radial-gradient(circle at 25% 24%, rgba(255,255,255,.64), transparent 18%),
    radial-gradient(circle at 78% 68%, rgba(232,184,107,.18), transparent 22%),
    rgba(255, 255, 255, 0.34);
  overflow: hidden;
}

.card-field {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-height: 260px;
  margin-top: 16px;
  align-content: center;
  border-radius: 18px 14px 20px 13px;
  border: 1px solid rgba(118, 91, 69, 0.12);
  background:
    radial-gradient(circle at 25% 24%, rgba(255,255,255,.64), transparent 18%),
    radial-gradient(circle at 78% 68%, rgba(232,184,107,.18), transparent 22%),
    rgba(255, 255, 255, 0.34);
  padding: 14px;
}

.memory-card {
  min-height: 68px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 16px 13px 17px 12px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 239, 222, 0.72));
  color: #4b3a55;
  box-shadow: 0 12px 26px rgba(58, 38, 66, 0.12);
  line-height: 1.45;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.memory-card:not(:disabled):hover,
.memory-card:not(:disabled):focus-visible,
.star-chip:not(:disabled):hover,
.star-chip:not(:disabled):focus-visible,
.voice-bubble:not(:disabled):hover,
.voice-bubble:not(:disabled):focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px rgba(58, 38, 66, 0.18),
    inset 0 0 0 2px rgba(246, 211, 127, 0.4);
}

.memory-card.picked {
  background: linear-gradient(180deg, rgba(255, 240, 184, 0.9), rgba(232, 184, 107, 0.74));
  transform: translateY(-2px);
}

.star-sort-field {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  border-radius: 18px 14px 20px 13px;
  border: 1px solid rgba(118, 91, 69, 0.12);
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.7), transparent 18%),
    radial-gradient(circle at 82% 72%, rgba(138,180,216,.2), transparent 22%),
    rgba(255, 255, 255, 0.34);
}

.star-chip {
  min-height: 62px;
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 17px 14px 18px 13px;
  padding: 8px 12px;
  background: rgba(255, 250, 239, 0.78);
  color: #4b3a55;
  text-align: left;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.star-chip span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 239, 190, 0.86);
  color: #b68639;
  font-size: 24px;
}

.star-chip em {
  font-style: normal;
  line-height: 1.35;
}

.star-chip.correct {
  background: rgba(215, 244, 226, 0.92);
}

.star-chip.wrong {
  opacity: 0.45;
}

.brain-teaser-panel {
  gap: 12px;
}

.brain-question {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 18px 14px 20px 13px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.8), transparent 20%),
    rgba(255, 247, 229, 0.76);
  border: 1px solid rgba(118, 91, 69, 0.12);
  color: #4b3a55;
  line-height: 1.55;
}

.brain-options {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.brain-option {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 18px 14px 19px 13px;
  background: rgba(255, 250, 239, 0.82);
  color: #4b3a55;
  text-align: left;
  box-shadow: 0 10px 22px rgba(58, 38, 66, 0.1);
}

.brain-option span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 239, 190, 0.9);
  color: #9a7330;
  font-weight: 700;
}

.brain-option em {
  font-style: normal;
  line-height: 1.35;
}

.brain-option:not(:disabled):hover,
.brain-option:not(:disabled):focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 14px 30px rgba(58, 38, 66, 0.16),
    inset 0 0 0 2px rgba(246, 211, 127, 0.42);
}

.brain-option.correct {
  background: rgba(215, 244, 226, 0.94);
}

.brain-fail {
  background: linear-gradient(180deg, rgba(255, 247, 238, 0.94), rgba(238, 232, 248, 0.88));
}

.voice-bubble {
  position: relative;
  min-height: 52px;
  max-width: 210px;
  margin: 12px auto;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 20px 15px 21px 14px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.68);
  color: #4b3a55;
  box-shadow: 0 12px 26px rgba(58, 38, 66, 0.14);
  transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

.voice-bubble.care {
  background: rgba(255, 244, 203, 0.82);
}

.voice-bubble.correct {
  background: rgba(208, 244, 225, 0.9);
  transform: scale(1.04);
}

.voice-bubble.wrong {
  opacity: 0.42;
}

.stopwatch-panel {
  width: min(100%, 372px);
}

.stopwatch-panel.complete {
  overflow: visible;
}

.stopwatch-face {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 18px auto 14px;
  display: grid;
  place-items: center;
  border: 3px solid rgba(91, 73, 70, 0.54);
  border-radius: 50% 48% 52% 49% / 48% 52% 47% 53%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.92), transparent 18%),
    radial-gradient(circle at 50% 52%, rgba(255, 247, 218, 0.92) 0 48%, transparent 49%),
    conic-gradient(from -90deg, rgba(224, 104, 96, 0.34) 0 1.8%, transparent 1.8% 100%),
    repeating-conic-gradient(from -90deg, rgba(91, 73, 70, 0.34) 0 1deg, transparent 1deg 6deg),
    linear-gradient(145deg, #f7efd8, #dfeaf1);
  box-shadow:
    inset -12px -16px 24px rgba(92, 72, 72, 0.14),
    0 18px 36px rgba(39, 29, 43, 0.18),
    0 0 28px rgba(246, 211, 127, 0.24);
}

.stopwatch-face::before {
  content: "";
  position: absolute;
  top: -22px;
  width: 58px;
  height: 32px;
  border: 3px solid rgba(91, 73, 70, 0.5);
  border-bottom: 0;
  border-radius: 20px 18px 8px 8px;
  background: linear-gradient(180deg, #fff5cf, #d9b66d);
}

.stopwatch-rim {
  position: absolute;
  inset: 13px;
  border: 2px dashed rgba(91, 73, 70, 0.25);
  border-radius: inherit;
}

.stopwatch-hand {
  position: absolute;
  left: calc(50% - 2px);
  top: 24px;
  width: 4px;
  height: 87px;
  border-radius: 999px;
  background: #9a5d5b;
  transform-origin: 50% 86px;
  transform: rotate(var(--turn));
  box-shadow: 0 0 9px rgba(154, 93, 91, 0.28);
}

.stopwatch-hand::after {
  content: "";
  position: absolute;
  left: -6px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff2bd;
  border: 2px solid rgba(91, 73, 70, 0.5);
}

.stopwatch-time {
  position: relative;
  z-index: 2;
  margin-top: 18px;
  color: #4b414f;
  font-family: var(--font-title);
  font-size: 42px;
  letter-spacing: 0;
}

.stopwatch-target {
  position: absolute;
  z-index: 2;
  bottom: 46px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.86);
  color: #8f6a5a;
  font-size: 13px;
  font-weight: 700;
}

.stopwatch-face.compact {
  width: 168px;
  height: 168px;
  margin-top: 10px;
}

.stopwatch-face.compact .stopwatch-time {
  font-size: 34px;
}

.stopwatch-track {
  position: relative;
  height: 22px;
  margin: 0 10px 14px;
  border: 2px solid rgba(91, 73, 70, 0.24);
  border-radius: 999px;
  background: rgba(255, 251, 239, 0.72);
  overflow: hidden;
}

.stopwatch-track i,
.stopwatch-track .target-zone {
  position: absolute;
  top: 0;
  bottom: 0;
}

.stopwatch-track i {
  left: 0;
  width: var(--progress, 0%);
  background: linear-gradient(90deg, #a6d0e2, #f6d37f);
}

.stopwatch-track .target-zone {
  left: 50%;
  width: 1%;
  background: rgba(224, 104, 96, 0.42);
  box-shadow: 0 0 14px rgba(224, 104, 96, 0.42);
}

.stopwatch-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stopwatch-actions button:disabled {
  opacity: 0.46;
}

.stopwatch-panel.early .stopwatch-face,
.stopwatch-panel.late .stopwatch-face {
  box-shadow:
    inset -12px -16px 24px rgba(92, 72, 72, 0.14),
    0 18px 36px rgba(39, 29, 43, 0.18),
    0 0 30px rgba(224, 104, 96, 0.24);
}

.stopwatch-panel.success .stopwatch-face {
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.92), transparent 18%),
    radial-gradient(circle at 50% 52%, rgba(255, 247, 218, 0.92) 0 48%, transparent 49%),
    linear-gradient(145deg, #e1f0df, #fff2bd);
  box-shadow: 0 0 36px rgba(246, 211, 127, 0.44);
}

.stopwatch-result-card {
  width: min(100%, 260px);
  margin: 12px auto 12px;
  padding: 14px 16px 13px;
  display: grid;
  gap: 5px;
  justify-items: center;
  border: 2px solid rgba(91, 73, 70, 0.36);
  border-radius: 24px 18px 26px 20px / 20px 26px 18px 24px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.7), transparent 25%),
    linear-gradient(180deg, rgba(255, 249, 233, 0.96), rgba(224, 241, 225, 0.9));
  box-shadow: 3px 5px 0 rgba(108, 76, 49, 0.1), 0 14px 28px rgba(64, 44, 50, 0.12);
}

.stopwatch-result-card strong {
  color: #4f4050;
  font-family: var(--font-title);
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: 0;
}

.stopwatch-result-label,
.stopwatch-result-target {
  color: #846459;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.stopwatch-panel.complete p {
  margin: 8px 0 10px;
  line-height: 1.55;
}

.rich-runner-panel {
  width: min(100%, 392px);
}

.rich-runner-arena {
  position: relative;
  height: min(46vh, 350px);
  min-height: 280px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 24px 17px 25px 16px;
  border: 2px solid rgba(112, 88, 74, 0.24);
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.62), transparent 20%),
    linear-gradient(180deg, #fff8e8 0%, #f0dfc4 68%, #d2b086 100%);
  box-shadow:
    inset 0 -24px 42px rgba(122, 83, 54, 0.14),
    0 18px 34px rgba(48, 32, 42, 0.18);
  touch-action: manipulation;
}

.rich-hall-bg {
  position: absolute;
  inset: 0;
  opacity: 0.58;
}

.rich-hall-bg::before,
.rich-hall-bg::after {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  height: 1px;
  background: rgba(128, 94, 76, 0.18);
}

.rich-hall-bg::before { top: 42%; }
.rich-hall-bg::after { display: none; }

.hall-window,
.hall-gift,
.hall-table {
  position: absolute;
  border: 2px solid rgba(113, 86, 74, 0.28);
  background: rgba(255, 252, 239, 0.6);
  box-shadow: 0 12px 24px rgba(80, 55, 55, 0.1);
}

.hall-window {
  left: 12%;
  top: 18%;
  width: 76px;
  height: 62px;
  border-radius: 20px 20px 8px 8px;
  background:
    linear-gradient(90deg, transparent 48%, rgba(113, 86, 74, 0.22) 49% 51%, transparent 52%),
    linear-gradient(180deg, #e7f5ff, #fff3bd);
}

.hall-table {
  left: 68%;
  top: 60%;
  width: 78px;
  height: 28px;
  border-radius: 14px 12px 16px 12px;
  background: #e1bd83;
}

.hall-gift {
  width: 36px;
  height: 32px;
  border-radius: 10px 8px 11px 8px;
  background:
    linear-gradient(90deg, transparent 43%, rgba(255, 248, 218, 0.82) 44% 56%, transparent 57%),
    linear-gradient(180deg, #e9a2aa, #c87786);
}

.hall-gift::before {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  top: -8px;
  height: 13px;
  border-radius: 8px;
  background: inherit;
}

.gift-a { left: 46%; top: 65%; opacity: 0.74; }
.gift-b {
  display: none;
  left: 84%;
  top: 62%;
  transform: scale(0.86);
  background:
    linear-gradient(90deg, transparent 43%, rgba(255, 248, 218, 0.82) 44% 56%, transparent 57%),
    linear-gradient(180deg, #f0d27d, #d6a85d);
}

.runner-ground {
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 12%;
  height: 28px;
  border-radius: 50%;
  background:
    linear-gradient(90deg, rgba(108, 78, 62, 0.08), transparent 36%, rgba(108, 78, 62, 0.08)),
    rgba(255, 248, 232, 0.44);
  box-shadow: 0 -8px 24px rgba(130, 92, 58, 0.12);
}

.rich-runner-player,
.runner-item {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.rich-runner-player {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: height 0.12s ease, border-radius 0.12s ease, filter 0.12s ease;
}

.rich-runner-player::before,
.rich-runner-player::after {
  content: none;
  position: absolute;
  top: 19px;
  width: 18px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  z-index: -1;
}

.rich-runner-player::before { left: -12px; transform: rotate(-18deg); }
.rich-runner-player::after { right: -12px; transform: rotate(18deg); }

.rich-runner-player.ducking {
  height: 40px;
  border-radius: 48% 52% 42% 58% / 54% 46% 50% 50%;
  filter: saturate(1.05);
}

.rich-runner-player.is-hit {
  animation: playerSquash 0.32s cubic-bezier(.2, .9, .32, 1.35);
  filter: saturate(1.24) sepia(0.16);
}

.runner-item {
  min-width: 46px;
  min-height: 36px;
  display: grid;
  place-items: center;
  padding: 4px 6px;
  border: 2px solid rgba(105, 79, 75, 0.22);
  border-radius: 16px 12px 17px 13px;
  background:
    repeating-linear-gradient(-5deg, rgba(126, 92, 72, 0.035) 0 1px, transparent 1px 7px),
    rgba(255, 250, 239, 0.88);
  color: #6a4b55;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 9px 14px rgba(74, 48, 58, 0.1);
}

.runner-item.collect {
  min-width: 48px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.9), transparent 20%),
    linear-gradient(180deg, #fff4b8, #e5c579);
  color: #7d5a2d;
  box-shadow: 0 0 13px rgba(246, 211, 127, 0.46), 0 9px 14px rgba(74, 48, 58, 0.1);
}

.runner-item.case {
  background:
    linear-gradient(90deg, transparent 47%, rgba(255, 255, 255, 0.3) 48% 53%, transparent 54%),
    linear-gradient(180deg, #e8d7c4, #c7a78c);
  color: #745462;
}

.runner-item.call {
  border-radius: 20px 16px 20px 16px;
  background:
    repeating-linear-gradient(0deg, rgba(86, 104, 120, 0.06) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, #edf6f3, #bfd6d5);
  color: #5d6974;
}

.runner-item.hit {
  opacity: 0.28;
  transform: translate(-50%, -50%) scale(1.18) rotate(10deg);
}

.runner-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.runner-controls button {
  min-height: 46px;
  touch-action: none;
}

.dino-memory-panel {
  width: min(100%, 392px);
}

.dino-egg-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  border-radius: 24px 18px 25px 17px;
  border: 2px solid rgba(92, 95, 67, 0.28);
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.68), transparent 20%),
    radial-gradient(circle at 86% 82%, rgba(181, 213, 148, 0.3), transparent 24%),
    linear-gradient(180deg, rgba(246, 238, 194, 0.78), rgba(205, 226, 185, 0.7));
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.22);
}

.dino-egg {
  position: relative;
  aspect-ratio: 0.78;
  min-height: 78px;
  border: 0;
  background: transparent;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.egg-shell,
.dino-baby {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 54% 46% 48% 52% / 58% 58% 42% 42%;
  transition: transform 0.22s ease, opacity 0.18s ease, filter 0.18s ease;
}

.egg-shell {
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.9), transparent 18%),
    radial-gradient(circle at 65% 54%, rgba(151, 169, 112, 0.18) 0 5px, transparent 6px),
    radial-gradient(circle at 35% 68%, rgba(151, 169, 112, 0.16) 0 4px, transparent 5px),
    linear-gradient(145deg, #fff5d4, #d9e6b7);
  border: 2px solid rgba(94, 98, 69, 0.36);
  box-shadow: 0 10px 20px rgba(65, 70, 52, 0.14);
}

.dino-baby {
  opacity: 0;
  transform: scale(0.78) rotate(-4deg);
  padding: 8px 4px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 255, 255, 0.86), transparent 18%),
    linear-gradient(145deg, #b9ddb3, #87bd96);
  border: 2px solid rgba(67, 91, 69, 0.34);
  color: #4f5f44;
  box-shadow: 0 0 22px rgba(185, 221, 179, 0.55), 0 10px 20px rgba(65, 70, 52, 0.14);
}

.dino-baby strong {
  font-size: 17px;
  line-height: 1;
}

.dino-baby em {
  margin-top: 4px;
  font-size: 11px;
  font-style: normal;
  line-height: 1.15;
}

.dino-egg.open .egg-shell,
.dino-egg.matched .egg-shell {
  opacity: 0;
  transform: scale(0.88) rotate(8deg);
}

.dino-egg.open .dino-baby,
.dino-egg.matched .dino-baby {
  opacity: 1;
  transform: scale(1) rotate(0);
}

.dino-egg.matched .dino-baby {
  filter: brightness(1.08);
  box-shadow: 0 0 26px rgba(246, 211, 127, 0.62), 0 10px 20px rgba(65, 70, 52, 0.12);
}

.dino-egg:not(:disabled):hover .egg-shell,
.dino-egg:not(:disabled):focus-visible .egg-shell {
  transform: translateY(-3px) rotate(-2deg);
  filter: brightness(1.05);
}

.family-quiz-panel {
  width: min(100%, 392px);
}

.family-quiz-options {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.family-quiz-option {
  min-height: 58px;
  justify-content: flex-start;
  text-align: left;
  padding: 10px 14px;
  border-radius: 20px 15px 21px 14px;
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.7), transparent 22%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.92), rgba(223, 240, 239, 0.78));
  color: #4f4050;
  line-height: 1.45;
}

.family-quiz-option:not(:disabled):hover,
.family-quiz-option:not(:disabled):focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px rgba(58, 38, 66, 0.18),
    inset 0 0 0 2px rgba(246, 211, 127, 0.42);
}

.poop-dodge-panel {
  width: min(100%, 372px);
}

.poop-arena {
  position: relative;
  height: min(52vh, 420px);
  min-height: 330px;
  overflow: hidden;
  border-radius: 22px 16px 23px 15px;
  border: 1px solid rgba(106, 83, 70, 0.2);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 246, 205, 0.55), transparent 18%),
    radial-gradient(circle at 78% 12%, rgba(188, 221, 238, 0.48), transparent 20%),
    linear-gradient(180deg, #e8f2f4 0%, #fff5dd 62%, #d9c197 100%);
  box-shadow: inset 0 -18px 32px rgba(115, 86, 61, 0.12), 0 16px 32px rgba(39, 29, 43, 0.18);
  touch-action: none;
}

.poop-arena::before {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -18px;
  height: 92px;
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(circle at 18% 46%, rgba(132, 179, 131, 0.32), transparent 14%),
    radial-gradient(circle at 72% 38%, rgba(214, 168, 93, 0.28), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(160, 137, 94, 0.22));
}

.poop-sky {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.88) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(246, 211, 127, .55) 0 1px, transparent 2px);
  background-size: 54px 70px, 38px 46px;
  opacity: 0.58;
  animation: poopSky 10s linear infinite;
}

.poop-player,
.poop-drop {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  user-select: none;
  pointer-events: none;
}

.poop-player {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform-origin: 50% 62%;
  transition: filter 0.12s ease;
}

.poop-player::after {
  content: none;
}

.poop-player.is-hit {
  animation: playerSquash 0.32s cubic-bezier(.2, .9, .32, 1.35);
  filter: saturate(1.3) sepia(0.24);
}

.poop-drop {
  filter: drop-shadow(0 8px 8px rgba(70, 44, 35, 0.2));
  line-height: 1;
}

.poop-drop::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 68%;
  width: 0.56em;
  height: 0.22em;
  transform: translate(-50%, -50%) rotate(-6deg);
  border-radius: 50% 50% 48% 48% / 62% 62% 38% 38%;
  background:
    radial-gradient(ellipse at 50% 54%, rgba(255, 235, 225, 0.95) 0 16%, transparent 17%),
    radial-gradient(ellipse at 50% 30%, #ff5a63 0 45%, transparent 46%),
    radial-gradient(ellipse at 50% 70%, #b80f2f 0 55%, transparent 56%);
  box-shadow:
    inset 0 -0.03em 0 rgba(111, 14, 42, 0.38),
    0 0.03em 0.06em rgba(105, 29, 39, 0.16);
}

.poop-drop.splatted {
  opacity: 0.45;
  transform: translate(-50%, -50%) scale(1.3) rotate(18deg);
}

.poop-arena.hit-flash {
  animation: poopHit 0.18s ease;
}

.poop-touch-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

.poop-touch-controls button {
  position: relative;
  min-height: 40px;
  border-radius: 15px 12px 16px 12px;
  background: linear-gradient(180deg, #dfeef2, #8ab4d8);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.poop-touch-controls button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  border: solid rgba(89, 70, 80, 0.82);
  border-width: 0 3px 3px 0;
  transform: translate(-50%, -50%) rotate(var(--arrow-rotate, -135deg));
  pointer-events: none;
}

.poop-touch-controls button[data-dir="left"]::before {
  --arrow-rotate: 135deg;
}

.poop-touch-controls button[data-dir="down"]::before {
  --arrow-rotate: 45deg;
}

.poop-touch-controls button[data-dir="right"]::before {
  --arrow-rotate: -45deg;
}

.poop-touch-controls button::selection {
  background: transparent;
  color: inherit;
}

.runner-controls {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

.runner-controls button {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.runner-controls button::selection {
  background: transparent;
  color: inherit;
}

.poop-touch-controls button[data-dir="up"] {
  grid-column: 2;
}

.poop-touch-controls button[data-dir="left"] {
  grid-column: 1;
}

.poop-touch-controls button[data-dir="down"] {
  grid-column: 2;
}

.poop-touch-controls button[data-dir="right"] {
  grid-column: 3;
}

.busy-home-panel {
  width: min(100%, 376px);
}

.busy-arena {
  position: relative;
  height: min(50vh, 410px);
  min-height: 330px;
  overflow: hidden;
  border-radius: 26px 18px 28px 20px / 20px 28px 18px 26px;
  border: 2px solid rgba(91, 73, 70, 0.42);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 238, 176, 0.36), transparent 22%),
    radial-gradient(circle at 82% 20%, rgba(180, 215, 230, 0.32), transparent 24%),
    linear-gradient(180deg, #f8efe1, #e9d4bc);
  touch-action: none;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.busy-room,
.room-window,
.room-table,
.room-lamp {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.room-window {
  left: 12%;
  top: 10%;
  width: 30%;
  height: 23%;
  border: 2px solid rgba(91, 73, 70, 0.3);
  border-radius: 18px 13px 19px 14px;
  background: linear-gradient(180deg, rgba(184, 219, 235, 0.72), rgba(255,255,255,0.42));
}

.room-table {
  left: 47%;
  bottom: 9%;
  width: 38%;
  height: 17%;
  border-radius: 50% 48% 44% 52%;
  background: rgba(210, 158, 103, 0.32);
  border: 2px solid rgba(91, 73, 70, 0.22);
}

.room-lamp {
  right: 13%;
  top: 12%;
  width: 42px;
  height: 66px;
  border-radius: 50% 50% 42% 42%;
  background: radial-gradient(circle, rgba(255, 232, 141, 0.72), rgba(255, 232, 141, 0.05) 68%);
}

.busy-target {
  position: absolute;
  z-index: 2;
  width: 70px;
  min-height: 62px;
  display: grid;
  place-items: center;
  gap: 2px;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(171, 111, 103, 0.68);
  border-radius: 50% 46% 50% 44%;
  background: rgba(255, 250, 238, 0.68);
  color: #674b58;
  box-shadow: 0 0 26px rgba(255, 226, 151, 0.56);
}

.busy-target span {
  font-weight: 700;
}

.busy-target em {
  font-size: 12px;
  font-style: normal;
}

.busy-player,
.busy-blocker {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.busy-player {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), transparent 22%),
    radial-gradient(circle, #fff0a6, #efb75d 70%);
  box-shadow: 0 0 24px rgba(255, 224, 132, 0.78), 0 8px 16px rgba(83, 57, 53, 0.2);
}

.busy-player.is-hit {
  animation: playerSquash 0.32s cubic-bezier(.2, .9, .32, 1.35);
}

.busy-blocker {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 18px 13px 19px 12px;
  background: rgba(255, 255, 255, 0.74);
  border: 2px solid rgba(91, 73, 70, 0.3);
  box-shadow: 2px 4px 0 rgba(91, 73, 70, 0.12);
  font-size: 20px;
}

.busy-blocker::before {
  content: "";
  width: 24px;
  height: 24px;
  display: block;
  background: #7b5948;
}

.blocker-cloud::before {
  width: 28px;
  height: 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 38%, #ffffff 0 31%, transparent 32%),
    radial-gradient(circle at 52% 24%, #ffffff 0 35%, transparent 36%),
    radial-gradient(circle at 72% 42%, #ffffff 0 29%, transparent 30%),
    #d9eef3;
}

.blocker-case::before {
  border-radius: 5px;
  background:
    linear-gradient(#f4dfbd 0 0) 50% 34% / 13px 3px no-repeat,
    linear-gradient(#7b5948 0 0) 50% 50% / 24px 17px no-repeat;
}

.blocker-paper::before {
  border-radius: 4px 7px 5px 4px;
  background:
    linear-gradient(135deg, transparent 0 17%, #d2edf2 18%) top right / 10px 10px no-repeat,
    repeating-linear-gradient(180deg, transparent 0 6px, rgba(91, 73, 70, 0.3) 6px 7px),
    #fff8ec;
  border: 1px solid rgba(91, 73, 70, 0.32);
}

.blocker-star::before,
.collect-icon::before {
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 56%, 79% 92%, 50% 70%, 21% 92%, 32% 56%, 2% 35%, 39% 35%);
  background: #d8a45b;
}

.busy-controls {
  margin-top: 10px;
}

.mini-meter,
.reward-list {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
}

.reward-list {
  display: grid;
  gap: 6px;
  color: #6b5262;
}

.history-list {
  max-height: 450px;
  overflow: auto;
  margin: 16px 0;
  text-align: left;
}

.history-list p {
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(80, 60, 90, 0.12);
  color: #44364d;
  line-height: 1.55;
}

.history-list strong {
  display: block;
  color: #9b696f;
  margin-bottom: 3px;
}

.error {
  margin: 100px 20px;
  padding: 18px;
  border-radius: 8px;
  background: white;
  color: #8b2d3c;
}

@keyframes spriteIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spriteCenterIn {
  from { opacity: 0; transform: translateX(-50%) translateY(18px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

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

@keyframes rotate {
  to { transform: rotate(360deg); }
}

@keyframes poopSky {
  to { background-position: 0 140px, 0 92px; }
}

@keyframes poopHit {
  0%, 100% { filter: none; }
  50% { filter: sepia(0.45) saturate(1.4); }
}

@keyframes playerSquash {
  0% { transform: translate(-50%, -50%) scale(1); }
  22% { transform: translate(-50%, -50%) scaleX(1.38) scaleY(0.68) rotate(-8deg); }
  52% { transform: translate(-50%, -50%) scaleX(0.78) scaleY(1.26) rotate(6deg); }
  78% { transform: translate(-50%, -50%) scaleX(1.08) scaleY(0.94); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@media (max-height: 740px) {
  .dialogue-box {
    min-height: 168px;
  }

  #dialogueText {
    min-height: 54px;
    font-size: 15px;
  }

  .sprite {
    bottom: 126px;
    max-height: 52vh;
  }
}

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

/* Hand-drawn picture-book skin */
:root {
  --sketch-ink: rgba(83, 67, 70, 0.72);
  --sketch-soft: rgba(116, 91, 83, 0.18);
  --wash-pink: rgba(246, 194, 200, 0.42);
  --wash-blue: rgba(166, 208, 226, 0.36);
  --wash-yellow: rgba(248, 219, 143, 0.46);
  --paper-skin: rgba(255, 249, 235, 0.91);
}

.vn-app {
  background: #f7edd9;
  box-shadow:
    0 18px 50px rgba(73, 55, 58, 0.24),
    0 0 0 8px rgba(255, 249, 235, 0.22);
}

.background {
  filter: saturate(0.72) contrast(0.9) brightness(1.08);
}

.vignette {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.24), transparent 22%),
    radial-gradient(circle at 85% 78%, rgba(255, 238, 176, 0.18), transparent 26%),
    repeating-linear-gradient(8deg, rgba(83, 67, 70, 0.025) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
}

.hud-btn,
.dialogue-actions button,
.resource-bar,
.dialogue-box,
.chapter-card,
.title-panel,
.gacha-machine,
.card-reveal,
.minigame-panel,
.history-panel,
.settings-panel,
.quick-test-panel,
.map-panel,
.star-info-card {
  border: 2px solid var(--sketch-ink);
  outline: 1px solid rgba(255, 255, 255, 0.48);
  box-shadow:
    4px 7px 0 rgba(99, 76, 68, 0.13),
    0 12px 28px rgba(64, 44, 50, 0.13);
  backdrop-filter: none;
}

.dialogue-box,
.title-panel,
.gacha-machine,
.card-reveal,
.minigame-panel,
.history-panel,
.settings-panel,
.quick-test-panel,
.map-panel,
.star-info-card {
  position: relative;
  border-radius: 30px 22px 34px 24px / 24px 34px 22px 30px;
  background:
    radial-gradient(circle at 12% 18%, var(--wash-yellow), transparent 28%),
    radial-gradient(circle at 92% 82%, var(--wash-blue), transparent 30%),
    linear-gradient(180deg, rgba(255, 252, 242, 0.94), var(--paper-skin));
}

.dialogue-box {
  position: absolute;
  min-height: 204px;
  padding: 18px 18px 15px;
  transform: rotate(-0.35deg);
}

.dialogue-box::before {
  inset: 8px 20px auto;
  height: 2px;
  background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(147, 113, 90, 0.38) 8px 15px);
}

.dialogue-box::after,
.title-panel::after,
.star-info-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  inset: 10px;
  border: 1px dashed rgba(116, 91, 83, 0.24);
  border-radius: inherit;
}

.speaker-name,
.advance-btn,
.choice-btn,
.title-actions button,
.gacha-machine button,
.card-reveal button,
.minigame-panel button,
.history-panel button,
.settings-panel button,
.quick-test-panel button,
.star-info-actions button,
.starmap-hud button,
.poop-touch-controls button {
  border: 2px solid rgba(91, 73, 70, 0.62);
  border-radius: 24px 18px 25px 17px / 18px 25px 17px 24px;
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.7), transparent 24%),
    linear-gradient(180deg, #fff2bd, #f2c978);
  box-shadow: 3px 5px 0 rgba(108, 76, 49, 0.16);
  color: #5b4050;
  font-weight: 700;
}

.advance-btn,
.title-actions button:nth-child(2n),
.settings-panel button:nth-child(2n),
.quick-test-panel button:nth-child(2n) {
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.72), transparent 24%),
    linear-gradient(180deg, #dff0ef, #9ec9d8);
}

.choice-btn {
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 234, 160, 0.34), transparent 25%),
    rgba(255, 251, 239, 0.88);
  transform: rotate(-0.2deg);
}

.choice-btn:nth-child(even) {
  transform: rotate(0.25deg);
}

.hud-btn,
.dialogue-actions button,
.resource-bar,
.starmap-hud .map-stardust {
  background: rgba(255, 248, 232, 0.72);
  color: #5b4b57;
  text-shadow: none;
}

#dialogueText,
.title-panel p,
.gacha-machine p,
.card-reveal p,
.minigame-panel p,
.settings-panel p,
.quick-test-panel p,
.star-info-card p {
  color: #554653;
  font-size: 17px;
  line-height: 1.82;
}

.title-kicker,
.modal-kicker {
  color: #af736f;
  font-size: 13px;
}

.title-panel h1,
.gacha-machine h2,
.card-reveal h2,
.minigame-panel h2,
.history-panel h2,
.settings-panel h2,
.quick-test-panel h2,
.map-header h1,
.star-info-card h2 {
  color: #5a4050;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.65);
}

.star-info-card,
.card-reveal,
.minigame-panel {
  transform: rotate(0.25deg);
}

.star-info-card:nth-child(even),
.minigame-panel:nth-child(even) {
  transform: rotate(-0.25deg);
}

.star-node::before {
  border: 0;
}

.star-core {
  filter: saturate(0.92);
}

.poop-arena,
.card-field,
.star-sort-field,
.home-grid {
  border: 2px solid rgba(91, 73, 70, 0.38);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.22);
}

/* Text clarity pass: keep hand-drawn shapes, avoid transforming text layers. */
body,
button,
input,
textarea,
select {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.dialogue-box,
.choice-btn,
.choice-btn:nth-child(even),
.star-info-card,
.star-info-card:nth-child(even),
.card-reveal,
.minigame-panel,
.minigame-panel:nth-child(even) {
  transform: none;
}

#dialogueText,
.speaker-name,
.title-panel h1,
.gacha-machine h2,
.card-reveal h2,
.minigame-panel h2,
.history-panel h2,
.settings-panel h2,
.quick-test-panel h2,
.map-header h1,
.star-info-card h2,
.title-panel p,
.gacha-machine p,
.card-reveal p,
.minigame-panel p,
.settings-panel p,
.quick-test-panel p,
.star-info-card p,
.wish-gate-title h1,
.wish-gate-title p {
  text-shadow: none;
}

/* Cohesion pass: lighter paper UI, clearer type, and one shared star language. */
:root {
  --sketch-ink: rgba(83, 67, 70, 0.54);
  --soft-shadow: rgba(64, 44, 50, 0.1);
  --paper-clear: rgba(255, 251, 240, 0.88);
}

.hud-btn,
.dialogue-actions button,
.resource-bar,
.dialogue-box,
.chapter-card,
.title-panel,
.gacha-machine,
.card-reveal,
.minigame-panel,
.history-panel,
.settings-panel,
.quick-test-panel,
.map-panel,
.star-info-card {
  border-color: var(--sketch-ink);
  box-shadow:
    2px 4px 0 rgba(99, 76, 68, 0.08),
    0 10px 22px var(--soft-shadow);
}

.speaker-name,
.advance-btn,
.choice-btn,
.title-actions button,
.gacha-machine button,
.card-reveal button,
.minigame-panel button,
.history-panel button,
.settings-panel button,
.quick-test-panel button,
.star-info-actions button,
.starmap-hud button,
.poop-touch-controls button {
  border-color: rgba(91, 73, 70, 0.46);
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.68), transparent 24%),
    linear-gradient(180deg, #fff4c9, #efcf86);
  box-shadow: 2px 3px 0 rgba(108, 76, 49, 0.11);
  font-weight: 600;
}

.advance-btn,
.title-actions button:nth-child(2n),
.settings-panel button:nth-child(2n),
.quick-test-panel button:nth-child(2n) {
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(180deg, #e8f4f1, #abd0da);
}

.title-panel h1,
.gacha-machine h2,
.card-reveal h2,
.minigame-panel h2,
.history-panel h2,
.settings-panel h2,
.quick-test-panel h2,
.map-header h1,
.star-info-card h2 {
  font-weight: 600;
  letter-spacing: 0;
}

.title-panel h1 {
  font-size: 32px;
}

.minigame-panel h2,
.gacha-machine h2,
.card-reveal h2 {
  font-size: 30px;
  line-height: 1.14;
}

#dialogueText,
.title-panel p,
.gacha-machine p,
.card-reveal p,
.minigame-panel p,
.settings-panel p,
.quick-test-panel p,
.star-info-card p {
  font-size: 16px;
  line-height: 1.72;
}

.dialogue-box {
  min-height: 188px;
  padding: 16px 17px 14px;
}

.star-field {
  inset: 98px 0 225px;
}

.star-warm {
  left: 28%;
  top: 64%;
}

.star-dino {
  left: 49%;
  top: 55%;
}

.star-gate {
  left: 65%;
  top: 68%;
}

.star-info {
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.star-info-card {
  padding: 13px 16px 14px;
  background:
    radial-gradient(circle at 12% 18%, rgba(248, 219, 143, 0.34), transparent 28%),
    radial-gradient(circle at 92% 82%, rgba(166, 208, 226, 0.28), transparent 30%),
    linear-gradient(180deg, rgba(255, 252, 242, 0.9), rgba(255, 249, 235, 0.84));
}

.star-info-card h2 {
  font-size: 24px;
}

.star-info-card p {
  margin: 6px 0 10px;
}

.star-requirement {
  margin-bottom: 10px;
}

.wish-gate-title {
  top: calc(64px + env(safe-area-inset-top, 0px));
  left: 50%;
  right: auto;
  width: min(84%, 340px);
  transform: translateX(-50%);
  padding: 10px 16px 11px;
  border: 2px solid rgba(83, 67, 70, 0.34);
  border-radius: 28px 20px 30px 22px / 22px 30px 20px 28px;
  background:
    radial-gradient(circle at 18% 22%, rgba(248, 219, 143, 0.36), transparent 30%),
    rgba(255, 251, 240, 0.62);
  box-shadow: 2px 4px 0 rgba(99, 76, 68, 0.08);
}

.wish-gate-title h1 {
  color: #5a4050;
  font-size: 26px;
  line-height: 1.1;
}

.wish-gate-title p {
  max-width: 280px;
  color: #6b5966;
  font-size: 14px;
}

.wish-gate-scene .star-field {
  inset: 122px 0 214px;
}

.wish-field::before,
.wish-field::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: min(82vw, 330px);
  height: min(48vh, 350px);
  transform: translate(-50%, -50%) rotate(-8deg);
  border: 2px dashed rgba(105, 86, 82, 0.2);
  border-radius: 50%;
  pointer-events: none;
}

.wish-field::after {
  width: min(58vw, 238px);
  height: min(36vh, 260px);
  transform: translate(-50%, -50%) rotate(12deg);
  border-color: rgba(232, 184, 107, 0.24);
}

.wish-option {
  width: 106px;
  height: 106px;
}

.wish-option .star-core {
  width: 62px;
  height: 62px;
}

.wish-option .star-window {
  left: 21px;
  top: 24px;
  width: 17px;
  height: 14px;
}

.wish-option .star-sketch-ring.ring-a {
  width: 82px;
  height: 50px;
}

.wish-option .star-sketch-ring.ring-b {
  width: 62px;
  height: 88px;
}

.wish-option .star-label {
  bottom: 2px;
  max-width: 84px;
  font-size: 11px;
}

.wish-option.star-family01 {
  left: 18%;
  top: 46%;
}

.wish-option.star-family03 {
  left: 31%;
  top: 27%;
}

.wish-option.star-family04 {
  left: 76%;
  top: 34%;
}

.wish-option.star-dino {
  left: 29%;
  top: 68%;
}

.wish-option.star-warm {
  left: 69%;
  top: 70%;
}

.wish-option.true-home {
  width: 122px;
  height: 122px;
}

.wish-option.true-home .star-core {
  width: 76px;
  height: 76px;
  filter: brightness(1.18) saturate(1.12);
}

.wish-option.true-home .star-glow {
  opacity: 1;
  transform: scale(1.18);
}

.minigame-panel {
  max-height: min(84vh, 720px);
  padding: 18px;
}

.minigame-panel p {
  margin: 10px 0 14px;
}

.poop-dodge-panel {
  width: min(100%, 380px);
}

.poop-arena {
  height: min(43vh, 340px);
  min-height: 285px;
}

.poop-drop {
  line-height: 1;
  filter: drop-shadow(0 9px 9px rgba(70, 44, 35, 0.22));
}

.poop-drop::after {
  top: 72%;
  width: 0.76em;
  height: 0.3em;
  border-radius: 48% 52% 46% 50% / 62% 62% 38% 38%;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(255, 238, 230, 0.98) 0 14%, transparent 15%),
    radial-gradient(ellipse at 50% 29%, #ff5261 0 48%, transparent 49%),
    radial-gradient(ellipse at 50% 72%, #b6082f 0 58%, transparent 59%);
  box-shadow:
    inset 0 -0.05em 0 rgba(107, 11, 39, 0.42),
    0 0.04em 0.08em rgba(105, 29, 39, 0.18);
}

@media (max-height: 740px) {
  .wish-gate-title {
    top: calc(56px + env(safe-area-inset-top, 0px));
    padding: 8px 14px;
  }

  .wish-gate-title h1 {
    font-size: 23px;
  }

  .wish-gate-title p {
    font-size: 13px;
  }

  .wish-gate-scene .star-field {
    inset: 108px 0 198px;
  }

  .wish-option {
    transform: translate(-50%, -50%) scale(0.9);
  }

  .poop-arena {
    height: min(39vh, 300px);
    min-height: 250px;
  }
}

/* Compact minigame layout so controls stay visible on phone-height screens. */
.poop-dodge-panel {
  max-height: calc(100dvh - 104px);
  overflow: hidden;
  padding: 14px 18px 12px;
}

.poop-dodge-panel h2 {
  font-size: 28px;
  line-height: 1.08;
}

.poop-dodge-panel p {
  margin: 8px 0 10px;
  font-size: 15px;
  line-height: 1.56;
}

.poop-dodge-panel .modal-kicker {
  margin-bottom: 6px;
}

.poop-dodge-panel .mini-meter {
  margin-top: 8px;
}

.poop-arena {
  height: min(36vh, 286px);
  min-height: 236px;
}

.poop-touch-controls {
  margin-top: 8px;
}

@media (max-height: 740px) {
  .poop-dodge-panel {
    max-height: calc(100dvh - 94px);
    padding: 12px 16px 10px;
  }

  .poop-dodge-panel h2 {
    font-size: 25px;
  }

  .poop-dodge-panel p {
    font-size: 14px;
    line-height: 1.46;
  }

  .poop-arena {
    height: min(32vh, 250px);
    min-height: 205px;
  }
}

/* Shared minigame art direction: one quiet paper-toy world across every game. */
.brain-question,
.bubble-field,
.card-field,
.star-sort-field,
.stopwatch-face,
.rich-runner-arena,
.dino-egg-grid,
.family-quiz-options,
.poop-arena,
.busy-arena {
  border-color: rgba(91, 73, 70, 0.32);
  background-blend-mode: normal;
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, 0.18),
    0 12px 24px rgba(64, 44, 50, 0.1);
}

.memory-card,
.star-chip,
.voice-bubble,
.brain-option,
.family-quiz-option {
  border: 2px solid rgba(91, 73, 70, 0.3);
  box-shadow: 2px 3px 0 rgba(108, 76, 49, 0.08);
  font-weight: 500;
}

.mini-meter,
.reward-list {
  color: #665866;
  font-size: 13px;
  line-height: 1.45;
}

.rich-runner-panel {
  max-height: calc(100dvh - 104px);
  overflow: hidden;
  padding: 14px 18px 12px;
}

.rich-runner-panel h2 {
  font-size: 26px;
  line-height: 1.08;
}

.rich-runner-panel p {
  margin: 8px 0 10px;
  font-size: 14px;
  line-height: 1.48;
}

.rich-runner-arena {
  height: min(34vh, 270px);
  min-height: 220px;
  margin-top: 10px;
}

.runner-controls {
  margin-top: 8px;
}

.runner-controls button {
  min-height: 42px;
}

.rich-runner-player {
  width: 52px;
  height: 52px;
  font-size: 12px;
}

.runner-item {
  font-size: 11px;
  min-height: 30px;
}

.dino-memory-panel {
  max-height: calc(100dvh - 110px);
  overflow: hidden;
}

.dino-egg-grid {
  gap: 8px;
  padding: 12px;
}

.dino-egg {
  min-height: 70px;
}

.stopwatch-panel {
  max-height: calc(100dvh - 110px);
  overflow: hidden;
}

.stopwatch-face {
  width: 204px;
  height: 204px;
}

.stopwatch-time {
  font-size: 38px;
  font-weight: 600;
}

.stopwatch-panel.complete {
  max-height: min(90dvh, 720px);
  overflow: visible;
}

@media (max-height: 740px) {
  .rich-runner-panel {
    max-height: calc(100dvh - 94px);
    padding: 12px 16px 10px;
  }

  .rich-runner-arena {
    height: min(30vh, 230px);
    min-height: 190px;
  }

  .runner-controls button {
    min-height: 38px;
  }

  .dino-egg-grid {
    gap: 7px;
    padding: 10px;
  }

  .dino-egg {
    min-height: 62px;
  }

  .stopwatch-face {
    width: 178px;
    height: 178px;
  }

  .stopwatch-time {
    font-size: 32px;
  }
}

/* Starmap composition: four homes orbit the gate; the ordinary home appears after they are lit. */
.title-menu.map-mode .star-field {
  inset: 88px 0 220px;
}

.title-menu.map-mode .star-family01:not(.wish-option) {
  left: 21%;
  top: 25%;
}

.title-menu.map-mode .star-family03:not(.wish-option) {
  left: 23%;
  top: 64%;
}

.title-menu.map-mode .star-family04:not(.wish-option) {
  left: 79%;
  top: 25%;
}

.title-menu.map-mode .star-dino:not(.wish-option) {
  left: 77%;
  top: 64%;
}

.title-menu.map-mode .star-warm:not(.wish-option) {
  left: 50%;
  top: 77%;
}

.title-menu.map-mode .star-warm.story-locked:not(.wish-option) {
  display: none;
}

.title-menu.map-mode .star-warm.newly-revealed:not(.wish-option) {
  animation: warmStarReveal 1.8s ease both;
}

.title-menu.map-mode .star-gate:not(.wish-option) {
  left: 50%;
  top: 45%;
  width: 148px;
  height: 174px;
  z-index: 8;
}

.warm-reveal-card {
  animation: warmRevealCard 0.42s ease both;
}

@keyframes warmStarReveal {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.45);
    filter: blur(8px);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
}

@keyframes warmRevealCard {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.title-menu.map-mode .star-gate:not(.wish-option)::before {
  width: 96px;
  height: 20px;
  bottom: 16px;
  background: radial-gradient(ellipse, rgba(51, 37, 56, 0.16), transparent 70%);
}

.title-menu.map-mode .star-gate:not(.wish-option)::after {
  width: 104px;
  height: 138px;
  border: 2px dashed rgba(96, 76, 80, 0.28);
  border-radius: 54px 54px 22px 22px / 64px 64px 20px 20px;
  clip-path: none;
  transform: translateY(-4px);
  opacity: 0.7;
}

.title-menu.map-mode .star-gate:not(.wish-option) .star-glow {
  inset: 10px 24px 20px;
  border-radius: 50px 50px 20px 20px;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(255, 226, 137, 0.82), rgba(255, 226, 137, 0.16) 50%, transparent 72%);
  filter: blur(8px);
}

.title-menu.map-mode .star-gate:not(.wish-option) .star-sketch-ring {
  display: none;
}

.title-menu.map-mode .star-gate:not(.wish-option) .star-core {
  width: 86px;
  height: 126px;
  border-radius: 44px 44px 16px 16px / 56px 56px 16px 16px;
  border: 2px solid rgba(88, 70, 74, 0.42);
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255, 255, 255, 0.84), transparent 22%),
    linear-gradient(180deg, rgba(255, 246, 205, 0.96), rgba(236, 203, 127, 0.92) 58%, rgba(186, 142, 98, 0.9));
  box-shadow:
    inset 9px 8px 18px rgba(255, 255, 255, 0.28),
    inset -12px -16px 20px rgba(100, 70, 66, 0.16),
    0 16px 30px rgba(35, 24, 42, 0.2),
    0 0 42px rgba(246, 211, 127, 0.62);
}

.title-menu.map-mode .star-gate:not(.wish-option) .star-core::before {
  inset: 10px 12px 12px;
  border: 1px dashed rgba(96, 76, 80, 0.26);
  border-radius: 34px 34px 10px 10px / 42px 42px 10px 10px;
}

.title-menu.map-mode .star-gate:not(.wish-option) .star-core::after {
  background:
    linear-gradient(90deg, transparent 48%, rgba(94, 73, 77, 0.22) 49% 51%, transparent 52%),
    radial-gradient(circle at 72% 58%, rgba(115, 83, 75, 0.46) 0 3px, transparent 4px),
    repeating-linear-gradient(92deg, rgba(94, 73, 77, 0.035) 0 1px, transparent 1px 9px);
  mix-blend-mode: multiply;
  opacity: 0.82;
}

.title-menu.map-mode .star-gate:not(.wish-option) .star-texture {
  display: none;
}

.title-menu.map-mode .star-gate:not(.wish-option) .star-window {
  left: 30px;
  top: 48px;
  width: 25px;
  height: 42px;
  border-radius: 14px 14px 8px 8px;
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.9), transparent 18%),
    linear-gradient(180deg, #fff7c9, #f0c96c);
  box-shadow: 0 0 22px rgba(255, 225, 137, 0.72);
}

.title-menu.map-mode .star-gate:not(.wish-option) .star-spark {
  display: none;
}

.title-menu.map-mode .star-gate:not(.wish-option) .star-label {
  bottom: -2px;
  max-width: 96px;
}

.title-menu.map-mode .star-field::before,
.title-menu.map-mode .star-field::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(78vw, 330px);
  height: min(48vh, 360px);
  transform: translate(-50%, -50%) rotate(-13deg);
  border: 2px dashed rgba(255, 239, 190, 0.18);
  border-radius: 50%;
  pointer-events: none;
}

.title-menu.map-mode .star-field::after {
  width: min(54vw, 230px);
  height: min(34vh, 260px);
  transform: translate(-50%, -50%) rotate(9deg);
  border-color: rgba(116, 91, 83, 0.16);
}

@media (max-height: 740px) {
  .title-menu.map-mode .star-field {
    inset: 82px 0 205px;
  }

  .title-menu.map-mode .star-gate:not(.wish-option) {
    transform: translate(-50%, -50%) scale(0.9);
  }

  .title-menu.map-mode .star-family01:not(.wish-option),
  .title-menu.map-mode .star-family03:not(.wish-option),
  .title-menu.map-mode .star-family04:not(.wish-option),
  .title-menu.map-mode .star-dino:not(.wish-option),
  .title-menu.map-mode .star-warm:not(.wish-option) {
    transform: translate(-50%, -50%) scale(0.92);
  }
}

@media (max-width: 430px) {
  .title-menu.map-mode .star-field {
    inset: 84px 0 284px;
  }

  .title-menu.map-mode .star-warm:not(.wish-option) {
    top: 82%;
  }

  .title-menu.map-mode .star-warm.newly-revealed:not(.wish-option) {
    top: 82%;
    z-index: 12;
  }

  .title-menu.map-mode .star-gate:not(.wish-option) {
    top: 43%;
    transform: translate(-50%, -50%) scale(0.96);
  }

  .warm-reveal-card {
    position: absolute;
    left: var(--safe-x);
    right: var(--safe-x);
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: 360px;
    margin: 0 auto;
    padding: 13px 16px 14px;
  }

  .warm-reveal-card h2 {
    font-size: 24px;
  }

  .warm-reveal-card p {
    margin: 6px 0 10px;
    font-size: 14px;
    line-height: 1.45;
  }

  .star-info {
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  .star-info-card {
    padding: 10px 14px 12px;
  }

  .star-info-card h2 {
    font-size: 22px;
    line-height: 1.08;
  }

  .star-info-card p {
    max-height: 4.35em;
    overflow: hidden;
    margin: 4px 0 8px;
    font-size: 13.5px;
    line-height: 1.45;
  }

  .star-requirement {
    margin-bottom: 8px;
    font-size: 13px;
  }

  .star-requirement strong {
    min-height: 28px;
    min-width: 58px;
  }

  .star-info-actions button {
    min-height: 40px;
  }

  .wish-gate-title {
    top: calc(54px + env(safe-area-inset-top, 0px));
    width: min(84%, 320px);
    padding: 7px 12px 8px;
  }

  .wish-gate-title h1 {
    font-size: 22px;
  }

  .wish-gate-title p {
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.35;
  }

  .wish-gate-scene .star-field {
    inset: 138px 0 278px;
  }

  .wish-option {
    width: 96px;
    height: 96px;
  }

  .wish-option .star-core {
    width: 58px;
    height: 58px;
  }

  .wish-option.star-family01 {
    left: 18%;
    top: 59%;
  }

  .wish-option.star-family03 {
    left: 32%;
    top: 38%;
  }

  .wish-option.star-family04 {
    left: 76%;
    top: 45%;
  }

  .wish-option.star-dino {
    left: 28%;
    top: 78%;
  }

  .wish-option.star-warm {
    left: 70%;
    top: 78%;
  }

  .wish-option.true-home {
    width: 108px;
    height: 108px;
  }

  .wish-option.true-home .star-core {
    width: 68px;
    height: 68px;
  }
}

@media (max-width: 430px) and (max-height: 740px) {
  .title-menu.map-mode .star-field {
    inset: 78px 0 270px;
  }

  .title-menu.map-mode .star-warm:not(.wish-option) {
    top: 82%;
  }

  .title-menu.map-mode .star-warm.newly-revealed:not(.wish-option) {
    top: 82%;
  }

  .wish-gate-scene .star-field {
    inset: 122px 0 258px;
  }

  .wish-option {
    transform: translate(-50%, -50%) scale(0.84);
  }

  .star-info-card p {
    max-height: 2.9em;
  }
}

/* Final page: warm picture-book closing page, consistent with the rest of the game. */
.title-menu.final-mode .final-sky {
  padding: calc(62px + env(safe-area-inset-top, 0px)) var(--safe-x) calc(24px + env(safe-area-inset-bottom, 0px));
  align-content: center;
  justify-items: center;
  background:
    radial-gradient(circle at 22% 16%, rgba(255, 238, 176, 0.34), transparent 22%),
    radial-gradient(circle at 82% 20%, rgba(166, 208, 226, 0.24), transparent 24%),
    radial-gradient(circle at 50% 84%, rgba(246, 194, 200, 0.2), transparent 28%),
    linear-gradient(180deg, #fbf2de 0%, #f7e7d6 54%, #e6d6c8 100%);
  color: #554653;
}

.title-menu.final-mode .final-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255, 255, 255, 0.22) 43% 48%, transparent 49%),
    repeating-linear-gradient(6deg, rgba(83, 67, 70, 0.026) 0 1px, transparent 1px 8px);
  pointer-events: none;
}

.title-menu.final-mode .final-sky::after {
  background:
    url("./assets/images/paper-texture.svg?v=vn132-embedded"),
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.2), transparent 36%);
  background-size: cover, cover;
  opacity: 0.34;
  mix-blend-mode: multiply;
}

.title-menu.final-mode .final-stars span {
  width: calc(4px + (var(--i) % 3) * 2px);
  height: calc(4px + (var(--i) % 3) * 2px);
  background: rgba(225, 172, 82, 0.64);
  filter: drop-shadow(0 0 8px rgba(255, 222, 139, 0.46));
}

.title-menu.final-mode .final-paper-lines {
  display: block;
  position: absolute;
  left: 9%;
  right: 9%;
  top: 18%;
  bottom: 14%;
  border-top: 1px solid rgba(126, 99, 86, 0.1);
  border-bottom: 1px solid rgba(126, 99, 86, 0.1);
  background:
    repeating-linear-gradient(180deg, transparent 0 34px, rgba(126, 99, 86, 0.055) 35px 36px);
  opacity: 0.68;
  pointer-events: none;
}

.title-menu.final-mode .final-constellation {
  left: auto;
  right: 18px;
  top: 118px;
  opacity: 0.36;
}

.title-menu.final-mode .final-constellation::before {
  border-top-color: rgba(154, 111, 82, 0.24);
  border-right-color: rgba(154, 111, 82, 0.16);
}

.title-menu.final-mode .final-constellation i {
  background: rgba(225, 172, 82, 0.74);
}

.final-keepsakes {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

.keepsake-photo {
  position: absolute;
  width: 82px;
  height: 96px;
  border: 2px solid rgba(91, 73, 70, 0.26);
  border-radius: 16px 12px 17px 12px;
  background:
    radial-gradient(circle at 52% 35%, rgba(255, 239, 190, 0.8) 0 14px, transparent 15px),
    linear-gradient(180deg, rgba(255, 252, 242, 0.86), rgba(228, 207, 187, 0.78));
  box-shadow: 2px 4px 0 rgba(108, 76, 49, 0.08);
}

.keepsake-photo::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 18px;
  height: 24px;
  border-radius: 50% 50% 14px 14px;
  background: rgba(166, 208, 226, 0.42);
}

.photo-a {
  left: 22px;
  top: 162px;
  transform: rotate(-8deg);
}

.photo-b {
  right: 20px;
  bottom: 148px;
  transform: rotate(7deg) scale(0.9);
  background:
    radial-gradient(circle at 50% 35%, rgba(246, 194, 200, 0.66) 0 14px, transparent 15px),
    linear-gradient(180deg, rgba(255, 252, 242, 0.86), rgba(228, 207, 187, 0.78));
}

.keepsake-star {
  position: absolute;
  left: 50%;
  top: 21%;
  width: 78px;
  height: 78px;
  transform: translateX(-50%) rotate(-7deg);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.72), transparent 20%),
    linear-gradient(145deg, #fff1b8, #e8b86b);
  clip-path: polygon(50% 0, 62% 34%, 100% 43%, 69% 63%, 76% 100%, 50% 78%, 24% 100%, 31% 63%, 0 43%, 38% 34%);
  filter: drop-shadow(0 12px 18px rgba(116, 91, 83, 0.16));
  opacity: 0.9;
}

.title-menu.final-mode .final-message {
  width: min(100%, 372px);
  min-height: 0;
  align-content: center;
  gap: 10px;
  padding: 22px 20px 20px;
  border: 2px solid rgba(83, 67, 70, 0.48);
  outline: 1px solid rgba(255,255,255,0.44);
  border-radius: 34px 24px 36px 26px / 26px 36px 24px 34px;
  background:
    radial-gradient(circle at 12% 16%, rgba(248, 219, 143, 0.38), transparent 30%),
    radial-gradient(circle at 92% 82%, rgba(166, 208, 226, 0.3), transparent 32%),
    linear-gradient(180deg, rgba(255, 252, 242, 0.94), rgba(255, 247, 232, 0.9));
  box-shadow:
    3px 5px 0 rgba(99, 76, 68, 0.1),
    0 16px 32px rgba(64, 44, 50, 0.14);
  color: #554653;
  font-family: var(--font-hand);
  text-shadow: none;
}

.title-menu.final-mode .final-message::before,
.title-menu.final-mode .final-message::after {
  position: absolute;
  content: "";
  inset: 12px;
  width: auto;
  height: auto;
  border: 1px dashed rgba(116, 91, 83, 0.2);
  border-radius: inherit;
  pointer-events: none;
}

.title-menu.final-mode .final-message::after {
  inset: auto 28px 22px;
  height: 1px;
  border: 0;
  border-top: 2px dotted rgba(180, 132, 68, 0.26);
}

.title-menu.final-mode .final-message span {
  color: #af736f;
  font-size: 14px;
  font-family: inherit;
  line-height: 1;
}

.title-menu.final-mode .final-message h1 {
  margin: 0;
  color: #5a4050;
  font-family: inherit;
  font-size: clamp(22px, 5.2vw, 28px);
  font-weight: 500;
  line-height: 1.42;
  text-wrap: balance;
}

.title-menu.final-mode .final-message p {
  margin: 0;
  color: #665866;
  font-family: inherit;
  font-size: clamp(14px, 3.5vw, 16px);
  line-height: 1.62;
  text-wrap: balance;
}

.final-birthday-photo {
  position: relative;
  width: min(100%, 238px);
  justify-self: center;
  margin: 2px 0 4px;
  padding: 8px;
  border: 2px solid rgba(91, 73, 70, 0.34);
  border-radius: 12px 8px 14px 10px;
  background:
    repeating-linear-gradient(-4deg, rgba(111, 82, 68, 0.03) 0 2px, transparent 2px 8px),
    rgba(255, 249, 232, 0.94);
  box-shadow:
    2px 4px 0 rgba(108, 76, 49, 0.08),
    0 14px 24px rgba(52, 38, 45, 0.12);
  transform: rotate(-1.2deg);
}

.final-birthday-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 33%;
  border-radius: 7px 5px 8px 6px;
  filter: sepia(0.12) saturate(0.76) contrast(0.92) brightness(1.05);
  opacity: 0.94;
  mix-blend-mode: multiply;
}

.final-birthday-wish {
  color: #a7656f !important;
  font-size: clamp(18px, 4.7vw, 22px) !important;
  line-height: 1.45 !important;
}

.final-signature {
  justify-self: center;
  margin-top: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 239, 190, 0.58);
  color: #8b685d;
  font-family: inherit;
  font-size: 13px;
}

.title-menu.final-mode #finalBackBtn {
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  min-width: 148px;
  min-height: 46px;
  border: 2px solid rgba(91, 73, 70, 0.44);
  background:
    radial-gradient(circle at 22% 20%, rgba(255,255,255,.7), transparent 24%),
    linear-gradient(180deg, #fff4c9, #efcf86);
  color: #5b4050;
  box-shadow: 2px 4px 0 rgba(108, 76, 49, 0.12);
  backdrop-filter: none;
  font-weight: 500;
}

/* Crayon-paper controls: remove glossy highlights from VN controls. */
.speaker-name,
.advance-btn,
.choice-btn,
.dialogue-actions button,
.hud-btn,
.title-actions button,
.gacha-machine button,
.card-reveal button,
.minigame-panel button,
.history-panel button,
.settings-panel button,
.quick-test-panel button,
.star-info-actions button,
.starmap-hud button,
.poop-touch-controls button,
.runner-controls button,
.title-menu.final-mode #finalBackBtn {
  border: 2px solid rgba(91, 73, 70, 0.42);
  background:
    repeating-linear-gradient(-6deg, rgba(112, 86, 76, 0.025) 0 2px, transparent 2px 7px),
    rgba(255, 246, 222, 0.82);
  box-shadow:
    2px 3px 0 rgba(108, 76, 49, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  color: #594650;
  text-shadow: none;
  filter: none;
  backdrop-filter: none;
}

.speaker-name {
  background:
    repeating-linear-gradient(-7deg, rgba(112, 86, 76, 0.035) 0 2px, transparent 2px 7px),
    rgba(245, 222, 177, 0.9);
}

.advance-btn,
.dialogue-actions button.active,
.hud-btn.active,
.hud-btn:active,
.title-actions button:nth-child(2n),
.settings-panel button:nth-child(2n),
.quick-test-panel button:nth-child(2n) {
  background:
    repeating-linear-gradient(-6deg, rgba(83, 118, 126, 0.035) 0 2px, transparent 2px 7px),
    rgba(222, 239, 235, 0.82);
}

.choice-btn {
  background:
    repeating-linear-gradient(-5deg, rgba(112, 86, 76, 0.024) 0 2px, transparent 2px 8px),
    rgba(255, 251, 239, 0.88);
  box-shadow: 2px 3px 0 rgba(108, 76, 49, 0.07);
}

.choice-btn:nth-child(even) {
  background:
    repeating-linear-gradient(-5deg, rgba(112, 86, 76, 0.024) 0 2px, transparent 2px 8px),
    rgba(255, 251, 239, 0.88);
}

/* Richer minigame visuals and stable handmade sprites. */
.poop-drop {
  width: var(--poop-size, 44px);
  height: var(--poop-size, 44px);
  display: block;
  font-size: 0;
  will-change: left, top;
  transform: translate(-50%, -50%);
}

.poop-drop::after {
  content: none;
}

.poop-shape {
  position: absolute;
  inset: 0;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 8px 7px rgba(72, 48, 36, 0.2));
}

.poop-shape::before,
.poop-shape::after {
  content: none;
}

.poop-layer {
  fill: #9b6744;
  stroke: rgba(91, 57, 39, 0.58);
  stroke-width: 3;
  stroke-linejoin: round;
}

.poop-top {
  fill: #b57950;
}

.poop-mid {
  fill: #a86f48;
}

.poop-base {
  fill: #8f5b3b;
}

.poop-highlight {
  fill: none;
  stroke: rgba(255, 224, 178, 0.45);
  stroke-width: 4;
  stroke-linecap: round;
}

.poop-eye {
  fill: #2f2321;
}

.poop-eye-light {
  fill: rgba(255, 255, 246, 0.95);
}

.poop-cheek {
  fill: rgba(244, 151, 134, 0.44);
}

.poop-mouth {
  fill: none;
  stroke: rgba(75, 43, 34, 0.72);
  stroke-width: 4;
  stroke-linecap: round;
}

.mini-angel {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 5px 5px rgba(70, 48, 58, 0.16));
}

.mini-wing {
  fill: rgba(255, 255, 255, 0.72);
  stroke: rgba(105, 84, 91, 0.34);
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.mini-body,
.mini-dress {
  fill: #f7d6dc;
  stroke: rgba(105, 84, 91, 0.34);
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.mini-face {
  fill: #ffe5c8;
  stroke: rgba(105, 84, 91, 0.36);
  stroke-width: 2.4;
}

.mini-hair-back,
.mini-hair-front {
  fill: #594150;
  stroke: rgba(62, 48, 58, 0.42);
  stroke-width: 2;
  stroke-linejoin: round;
}

.mini-bang,
.mini-hair-side {
  fill: none;
  stroke: #4f3b49;
  stroke-width: 3.2;
  stroke-linecap: round;
}

.mini-eye {
  fill: #2f2734;
}

.mini-eye-light {
  fill: rgba(255, 255, 246, 0.96);
}

.mini-mouth {
  fill: none;
  stroke: rgba(94, 61, 66, 0.72);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.mini-blush {
  fill: rgba(244, 142, 148, 0.36);
}

.rich-runner-player .mini-angel,
.busy-player .mini-angel {
  width: 68px;
  height: 68px;
}

.rich-runner-player.ducking .mini-angel {
  transform: scaleY(0.72) translateY(7px);
  transform-origin: 50% 72%;
}

.rich-hall-bg {
  background:
    radial-gradient(circle at 24% 20%, rgba(255,255,255,0.44), transparent 18%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.4), rgba(222, 198, 169, 0.22));
}

.hall-sofa,
.hall-clock,
.hall-phone-note,
.hall-toy {
  position: absolute;
  border: 2px solid rgba(113, 86, 74, 0.25);
  box-shadow: 0 10px 20px rgba(80, 55, 55, 0.08);
}

.hall-sofa {
  left: 9%;
  top: 64%;
  width: 92px;
  height: 36px;
  border-radius: 22px 22px 12px 12px;
  background: linear-gradient(180deg, #f5c6bd, #d7958d);
}

.hall-clock {
  right: 15%;
  top: 17%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 48%, rgba(113,86,74,.28) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(113,86,74,.22) 49% 51%, transparent 52%),
    #fff8e8;
}

.hall-phone-note {
  right: 27%;
  top: 38%;
  width: 64px;
  height: 38px;
  border-radius: 16px 16px 16px 6px;
  background: linear-gradient(180deg, #dfeef2, #9ec9d8);
}

.hall-phone-note::after {
  content: "☎";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #5f6d7a;
  font-size: 22px;
}

.hall-toy {
  bottom: 23%;
  width: 26px;
  height: 26px;
  border-radius: 8px;
}

.toy-a {
  left: 36%;
  background: #f3cf72;
  transform: rotate(-10deg);
}

.toy-b {
  right: 37%;
  background: #9ec9d8;
  transform: rotate(8deg);
}

.runner-item {
  min-width: 44px;
  min-height: 36px;
  grid-template-rows: 1fr auto;
  gap: 1px;
  padding: 4px 6px;
  font-size: 11px;
}

.runner-item-icon {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1;
}

.runner-item-icon::before {
  content: "";
  width: 13px;
  height: 13px;
  display: block;
}

.collect-icon {
  color: #a86d27;
  background: radial-gradient(circle, #fff8bd, #e7b75f);
}

.phone-icon {
  color: #5f6d7a;
}

.phone-icon::before {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 35%, #5f6d7a 36% 48%, transparent 49%),
    linear-gradient(#5f6d7a 0 0) 50% 50% / 3px 13px no-repeat;
}

.case-icon {
  color: #fff8ec;
  background: #7b5948;
}

.case-icon::before {
  width: 13px;
  height: 10px;
  border-radius: 2px;
  background: #fff8ec;
  box-shadow: inset 0 3px 0 rgba(123, 89, 72, 0.35);
}

.dino-art {
  width: min(100%, 64px);
  height: 48px;
  display: block;
  overflow: visible;
}

.dino-art .dino-body,
.dino-art .dino-head,
.dino-art .dino-tail,
.dino-art .dino-neck,
.dino-art .dino-wing,
.dino-art .dino-frill {
  fill: var(--dino-body);
  stroke: var(--dino-stroke);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dino-art .dino-plate,
.dino-art .dino-horn,
.dino-art .dino-beak,
.dino-art .dino-crest {
  fill: var(--dino-accent);
  stroke: var(--dino-stroke);
  stroke-width: 2.6;
  stroke-linejoin: round;
}

.dino-art .dino-eye {
  fill: #40303b;
}

.dino-art .dino-mouth,
.dino-art .dino-arm,
.dino-art .dino-leg,
.dino-art .dino-foot {
  fill: none;
  stroke: #5b4b57;
  stroke-width: 3;
  stroke-linecap: round;
}

.dino-baby {
  padding: 5px 3px 4px;
}

.dino-baby em {
  margin-top: 1px;
  font-size: 10px;
}

.dialogue-box {
  height: clamp(214px, 30dvh, 248px);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#dialogueText {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  font-size: 16px;
  line-height: 1.68;
}

.choice-layer.active {
  flex: 1 1 auto;
  align-content: start;
  overflow-y: auto;
  padding-right: 2px;
}

.dialogue-box.choice-mode {
  height: clamp(238px, 34dvh, 286px);
}

.dialogue-box.choice-mode #dialogueText {
  flex: 0 0 auto;
  min-height: 42px;
  max-height: 78px;
  margin: 8px 2px 9px;
  font-size: 15.5px;
  line-height: 1.66;
}

.dialogue-box.choice-mode .choice-layer.active {
  flex: 1 1 auto;
  gap: 6px;
  align-content: start;
  max-height: 146px;
}

.dialogue-box.choice-expanded {
  height: clamp(278px, 41dvh, 342px);
}

.dialogue-box.choice-expanded #dialogueText {
  min-height: 62px;
  max-height: 122px;
}

.dialogue-box.choice-expanded .choice-layer.active {
  max-height: 184px;
}

.dialogue-box.choice-mode .choice-btn {
  min-height: 40px;
  padding: 7px 12px;
  border-radius: 18px 14px 19px 13px / 14px 19px 13px 18px;
  font-size: 15px;
  line-height: 1.36;
}

.dialogue-box.choice-mode .choice-btn em {
  font-size: 13px;
}

.advance-btn {
  flex: 0 0 auto;
  align-self: flex-end;
  float: none;
}

.minigame-panel.dino-memory-panel:not(.complete) {
  width: min(100%, 420px);
  height: min(76dvh, 620px);
  min-height: 560px;
  display: flex;
  flex-direction: column;
}

.minigame-panel.dino-memory-panel:not(.complete) h2 {
  flex: 0 0 auto;
}

.minigame-panel.dino-memory-panel:not(.complete) p {
  min-height: 46px;
  margin-bottom: 0;
}

.minigame-panel.dino-memory-panel:not(.complete) .dino-egg-grid {
  flex: 0 0 auto;
}

.minigame-panel.dino-memory-panel:not(.complete) .mini-meter {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialogue-box::before {
  background: linear-gradient(90deg, transparent, rgba(142, 113, 92, 0.22), transparent);
}

.warm-photo-scene {
  position: absolute;
  z-index: 13;
  top: calc(78px + env(safe-area-inset-top, 0px));
  left: 50%;
  width: min(86vw, 390px);
  height: min(43vh, 380px);
  transform: translateX(-50%);
  pointer-events: none;
  animation: warmPhotosAppear 1.05s ease both;
}

.warm-photo-scene::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58%;
  height: 62%;
  transform: translate(-50%, -47%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 228, 156, 0.3), rgba(255, 239, 202, 0.12) 48%, transparent 72%);
  filter: blur(4px);
}

.warm-photo-frame {
  position: absolute;
  top: 12px;
  width: min(42vw, 178px);
  margin: 0;
  padding: 9px 9px 24px;
  border: 2px solid rgba(91, 73, 70, 0.38);
  border-radius: 8px 6px 10px 7px;
  background:
    repeating-linear-gradient(-4deg, rgba(111, 82, 68, 0.035) 0 2px, transparent 2px 8px),
    rgba(255, 249, 232, 0.9);
  box-shadow:
    3px 5px 0 rgba(108, 76, 49, 0.09),
    0 16px 34px rgba(52, 38, 45, 0.16);
  transform-origin: 50% 8%;
}

.warm-photo-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 5px 4px 6px 4px;
  filter: sepia(0.14) saturate(0.72) contrast(0.9) brightness(1.06);
  opacity: 0.9;
  mix-blend-mode: multiply;
}

.warm-photo-frame figcaption {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 5px;
  color: rgba(89, 70, 74, 0.78);
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
}

.dad-photo {
  left: 3%;
  transform: rotate(-4deg);
}

.mom-photo {
  right: 3%;
  top: 28px;
  transform: rotate(4deg);
}

.photo-tape {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -11px;
  width: 48px;
  height: 20px;
  transform: translateX(-50%) rotate(-2deg);
  border-radius: 3px 5px 4px 3px;
  background:
    repeating-linear-gradient(90deg, rgba(154, 124, 91, 0.08) 0 4px, transparent 4px 8px),
    rgba(255, 232, 176, 0.68);
  box-shadow: 0 2px 5px rgba(91, 73, 70, 0.08);
}

.warm-photo-light {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 238, 171, 0.86), rgba(255, 223, 144, 0.34) 45%, transparent 72%);
  box-shadow: 0 0 28px rgba(255, 224, 132, 0.36);
}

@keyframes warmPhotosAppear {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    filter: blur(0);
  }
}

.ending-photo-scene {
  position: absolute;
  z-index: 11;
  top: calc(84px + env(safe-area-inset-top, 0px));
  left: 50%;
  width: min(88vw, 390px);
  height: min(45vh, 390px);
  transform: translateX(-50%);
  pointer-events: none;
}

.ending-photo-scene::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 52%;
  width: 76%;
  height: 58%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 232, 169, 0.34), rgba(255, 241, 203, 0.14) 50%, transparent 74%);
  filter: blur(5px);
}

.ending-main-photo,
.ending-small-photo {
  position: absolute;
  margin: 0;
  border: 2px solid rgba(91, 73, 70, 0.36);
  background:
    repeating-linear-gradient(-4deg, rgba(111, 82, 68, 0.035) 0 2px, transparent 2px 8px),
    rgba(255, 249, 232, 0.92);
  box-shadow:
    3px 5px 0 rgba(108, 76, 49, 0.09),
    0 18px 34px rgba(52, 38, 45, 0.15);
}

.ending-main-photo {
  left: 50%;
  top: 4px;
  width: min(76vw, 326px);
  padding: 10px;
  border-radius: 10px 8px 12px 9px;
  opacity: 0;
  transform: translateX(-50%) rotate(-1.6deg);
  animation: endingMainPhotoAppear 2.8s ease 4.8s both;
}

.ending-main-photo img,
.ending-small-photo img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 6px 5px 7px 5px;
  filter: sepia(0.18) saturate(0.66) contrast(0.9) brightness(1.08);
  opacity: 0.9;
  mix-blend-mode: multiply;
}

.ending-main-photo img {
  aspect-ratio: 16 / 10;
}

.ending-main-photo::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 6px 5px 7px 5px;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.24), transparent 28%),
    repeating-linear-gradient(7deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 7px);
  pointer-events: none;
}

.ending-small-photo {
  top: 57%;
  width: 82px;
  padding: 5px;
  border-radius: 8px 6px 9px 7px;
  opacity: 0;
  animation: endingChildhoodPhotosFade 5.6s ease forwards;
}

.ending-small-photo img {
  aspect-ratio: 3 / 4;
}

.ending-dad-photo {
  left: 8%;
  transform: rotate(-7deg);
}

.ending-mom-photo {
  right: 8%;
  transform: rotate(6deg);
}

.ending-photo-glow {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 62px;
  height: 62px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 238, 171, 0.78), rgba(255, 223, 144, 0.28) 48%, transparent 74%);
  box-shadow: 0 0 30px rgba(255, 224, 132, 0.32);
}

.ending-main-photo .tape-left {
  left: 24%;
  transform: translateX(-50%) rotate(-5deg);
}

.ending-main-photo .tape-right {
  left: 76%;
  transform: translateX(-50%) rotate(4deg);
}

@keyframes endingChildhoodPhotosFade {
  0% {
    opacity: 0;
    filter: blur(6px);
  }
  12% {
    opacity: 0.8;
    filter: blur(0);
  }
  54% {
    opacity: 0.8;
    filter: blur(0);
  }
  100% {
    opacity: 0;
    filter: blur(8px);
  }
}

@keyframes endingMainPhotoAppear {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px) scale(0.96) rotate(-1.6deg);
    filter: blur(7px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1) rotate(-1.6deg);
    filter: blur(0);
  }
}

.birth-gate-scene {
  position: absolute;
  z-index: 12;
  inset: calc(70px + env(safe-area-inset-top, 0px)) 0 214px;
  pointer-events: none;
  overflow: hidden;
}

.birth-gate-scene::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 48%;
  width: min(140vw, 820px);
  height: min(88vh, 760px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 254, 235, 0.78) 34%, rgba(255, 235, 156, 0.28) 62%, transparent 84%);
  filter: blur(18px);
  opacity: 0;
  animation: birthRoomGlow 5.8s ease both;
}

.birth-gate-scene::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 47%;
  width: min(156vw, 920px);
  height: min(96vh, 860px);
  transform: translate(-50%, -50%) scale(0.38);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 255, 250, 0.98) 23%, rgba(255, 246, 203, 0.72) 46%, rgba(255, 229, 145, 0.22) 68%, transparent 86%);
  filter: blur(20px);
  opacity: 0;
  animation: birthWhiteBloom 5.8s ease both;
}

.birth-gate {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 44%;
  width: min(54vw, 230px);
  height: min(40vh, 292px);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 20px 34px rgba(55, 38, 58, 0.18));
  animation: birthGatePulse 5.5s ease both;
}

.birth-gate-light {
  position: absolute;
  inset: 8% 10% 0;
  border-radius: 50% 50% 36% 36% / 52% 52% 36% 36%;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 248, 1), rgba(255, 246, 205, 0.95) 28%, rgba(255, 226, 137, 0.58) 54%, rgba(255, 221, 132, 0.1) 78%, transparent 82%);
  opacity: 0;
  filter: blur(7px);
  animation: birthGateLight 5.8s ease both;
}

.birth-gate-door,
.birth-gate-arch {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 72%;
  height: 88%;
  border: 3px solid rgba(99, 76, 82, 0.42);
  border-bottom-width: 4px;
  border-radius: 50% 50% 16px 16px / 38% 38% 16px 16px;
  background:
    repeating-linear-gradient(-8deg, rgba(102, 82, 85, 0.035) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, rgba(255, 250, 234, 0.6), rgba(219, 199, 181, 0.22));
}

.birth-gate-arch {
  width: 90%;
  height: 100%;
  border-color: rgba(232, 184, 107, 0.34);
  background: transparent;
  transform: translateX(-50%) rotate(-0.8deg);
}

.birth-light-bloom {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 45%;
  width: min(76vw, 390px);
  height: min(42vh, 330px);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 248, 0.95), rgba(255, 241, 190, 0.48) 34%, rgba(255, 224, 143, 0.12) 66%, transparent 76%);
  filter: blur(12px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.42);
  animation: birthLightBloom 5.3s ease 0.45s forwards;
}

.birth-light-bloom.bloom-b {
  width: min(92vw, 520px);
  height: min(54vh, 430px);
  filter: blur(22px);
  animation-delay: 1.12s;
}

.birth-light-ray {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 47%;
  --ray-rotation: -14deg;
  width: min(78vw, 380px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 245, 0.86), transparent);
  filter: blur(2px);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-14deg) scaleX(0.28);
  animation: birthLightRay 4.8s ease 0.9s forwards;
}

.birth-light-ray.ray-b {
  --ray-rotation: 18deg;
  transform: translate(-50%, -50%) rotate(var(--ray-rotation)) scaleX(0.22);
  animation-delay: 1.12s;
}

.birth-gate-scene.is-ready::before {
  animation: none;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.34);
}

.birth-gate-scene.is-ready::after {
  animation: none;
  opacity: 0.96;
  transform: translate(-50%, -50%) scale(1.22);
}

.birth-gate-scene.is-ready .birth-gate {
  animation: none;
  opacity: 0.07;
  filter: blur(3px) drop-shadow(0 0 28px rgba(255, 244, 210, 0.8));
  transform: translate(-50%, -50%) scale(1.08);
}

.birth-gate-scene.is-ready .birth-gate-light {
  animation: none;
  opacity: 1;
  filter: blur(1px);
  transform: scale(1.64);
}

.birth-gate-scene.is-ready .birth-light-bloom,
.birth-gate-scene.is-ready .birth-light-ray {
  animation: none;
  opacity: 0;
}

.birth-gate-scene.heard-cry .birth-gate-light {
  animation: birthCryPulse 1.45s ease both;
}

.birth-gate-scene.show-baby::before {
  opacity: 0.34;
  transition: opacity 2.4s ease;
}

.birth-gate-scene.show-baby::after {
  opacity: 0.14;
  filter: blur(32px);
  transform: translate(-50%, -50%) scale(1.52);
  transition: opacity 2.8s ease, filter 2.8s ease, transform 2.8s ease;
}

.birth-gate-scene.show-baby .birth-gate {
  opacity: 0.1;
  filter: blur(7px);
  transition: opacity 2.2s ease, filter 2.2s ease;
}

.birth-gate-scene.show-baby .birth-gate-light {
  opacity: 0.18;
  filter: blur(18px);
  transform: scale(1.72);
  transition: opacity 2.2s ease, filter 2.2s ease, transform 2.2s ease;
}

.birth-baby-photo {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 46%;
  width: min(84vw, 372px);
  margin: 0;
  padding: 10px;
  border: 2px solid rgba(91, 73, 70, 0.35);
  border-radius: 12px 9px 14px 10px;
  background:
    repeating-linear-gradient(-4deg, rgba(111, 82, 68, 0.035) 0 2px, transparent 2px 8px),
    rgba(255, 249, 232, 0.93);
  box-shadow:
    3px 5px 0 rgba(108, 76, 49, 0.09),
    0 18px 34px rgba(52, 38, 45, 0.16);
  opacity: 0;
  transform: translate(-50%, -44%) scale(0.96) rotate(1.2deg);
}

.birth-gate-scene.show-baby .birth-baby-photo {
  animation: birthBabyPhotoAppear 3.4s ease forwards;
}

.birth-gate-scene.fade-out {
  animation: birthSceneFadeOut 1.9s ease forwards;
}

.birth-gate-scene.fade-out .birth-baby-photo {
  animation: birthBabyPhotoFadeOut 1.9s ease forwards;
}

.birth-baby-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 7px 5px 8px 6px;
  filter: sepia(0.16) saturate(0.78) contrast(0.92) brightness(1.06);
  opacity: 0.92;
  mix-blend-mode: multiply;
}

.birth-baby-photo::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 7px 5px 8px 6px;
  background:
    radial-gradient(circle at 62% 28%, rgba(255, 255, 255, 0.22), transparent 30%),
    repeating-linear-gradient(7deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 7px);
  pointer-events: none;
}

@keyframes birthRoomGlow {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  24% { opacity: 0.28; transform: translate(-50%, -50%) scale(0.92); }
  48% { opacity: 0.64; transform: translate(-50%, -50%) scale(1.08); }
  76% { opacity: 0.94; transform: translate(-50%, -50%) scale(1.25); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.34); }
}

@keyframes birthGatePulse {
  0%, 16% { transform: translate(-50%, -50%) scale(0.98); opacity: 0.76; }
  38% { transform: translate(-50%, -50%) scale(1.03); opacity: 0.72; }
  66% { transform: translate(-50%, -50%) scale(1.06); opacity: 0.3; }
  84% { transform: translate(-50%, -50%) scale(1.07); opacity: 0.13; }
  100% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.07; }
}

@keyframes birthGateLight {
  0%, 10% { opacity: 0; filter: blur(14px); transform: scale(0.86); }
  30% { opacity: 0.34; filter: blur(11px); transform: scale(0.96); }
  52% { opacity: 0.72; filter: blur(7px); transform: scale(1.14); }
  76% { opacity: 1; filter: blur(3px); transform: scale(1.46); }
  100% { opacity: 1; filter: blur(3px); transform: scale(1.34); }
}

@keyframes birthWhiteBloom {
  0%, 12% { opacity: 0; transform: translate(-50%, -50%) scale(0.38); }
  30% { opacity: 0.22; transform: translate(-50%, -50%) scale(0.7); }
  52% { opacity: 0.58; transform: translate(-50%, -50%) scale(0.96); }
  78% { opacity: 0.92; transform: translate(-50%, -50%) scale(1.24); }
  100% { opacity: 0.96; transform: translate(-50%, -50%) scale(1.22); }
}

@keyframes birthLightBloom {
  0%, 10% { opacity: 0; transform: translate(-50%, -50%) scale(0.34); }
  36% { opacity: 0.34; transform: translate(-50%, -50%) scale(0.72); }
  62% { opacity: 0.82; transform: translate(-50%, -50%) scale(1.08); }
  86% { opacity: 0.32; transform: translate(-50%, -50%) scale(1.38); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.56); }
}

@keyframes birthLightRay {
  0%, 16% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--ray-rotation, -14deg)) scaleX(0.22); }
  42% { opacity: 0.72; transform: translate(-50%, -50%) rotate(var(--ray-rotation, -14deg)) scaleX(0.92); }
  68% { opacity: 0.36; transform: translate(-50%, -50%) rotate(var(--ray-rotation, -14deg)) scaleX(1.12); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--ray-rotation, -14deg)) scaleX(1.28); }
}

@keyframes birthCryPulse {
  0% {
    opacity: 1;
    filter: blur(3px);
    transform: scale(1.34);
  }
  36% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1.52);
  }
  100% {
    opacity: 1;
    filter: blur(3px);
    transform: scale(1.38);
  }
}

@keyframes birthBabyPhotoAppear {
  from {
    opacity: 0;
    transform: translate(-50%, -39%) scale(0.94) rotate(1.2deg);
    filter: blur(9px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -44%) scale(1) rotate(1.2deg);
    filter: blur(0);
  }
}

@keyframes birthSceneFadeOut {
  from {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 0;
    filter: blur(10px);
  }
}

@keyframes birthBabyPhotoFadeOut {
  from {
    opacity: 1;
    transform: translate(-50%, -44%) scale(1) rotate(1.2deg);
    filter: blur(0);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.96) rotate(1.2deg);
    filter: blur(9px);
  }
}

.birthday-photo-scene {
  position: absolute;
  z-index: 11;
  top: calc(72px + env(safe-area-inset-top, 0px));
  left: 50%;
  width: min(84vw, 360px);
  height: min(50vh, 430px);
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  animation: birthdayFamilySceneAppear 3.2s ease forwards;
}

.birthday-photo-scene::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78%;
  height: 76%;
  transform: translate(-50%, -50%);
  border-radius: 48%;
  background:
    radial-gradient(circle, rgba(255, 233, 174, 0.3), rgba(255, 242, 211, 0.12) 52%, transparent 76%);
  filter: blur(5px);
}

.birthday-family-photo {
  position: absolute;
  left: 50%;
  top: 2px;
  width: min(74vw, 300px);
  margin: 0;
  padding: 10px;
  border: 2px solid rgba(91, 73, 70, 0.36);
  border-radius: 12px 8px 14px 10px;
  background:
    repeating-linear-gradient(-4deg, rgba(111, 82, 68, 0.035) 0 2px, transparent 2px 8px),
    rgba(255, 249, 232, 0.92);
  box-shadow:
    2px 4px 0 rgba(108, 76, 49, 0.08),
    0 12px 24px rgba(52, 38, 45, 0.12);
  transform: translateX(-50%) rotate(1.4deg);
  animation: birthdayFamilyPhotoDrift 3.2s ease forwards;
}

.birthday-family-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 40%;
  border-radius: 7px 5px 8px 6px;
  filter: sepia(0.16) saturate(0.7) contrast(0.9) brightness(1.07);
  opacity: 0.9;
  mix-blend-mode: multiply;
}

.birthday-family-photo::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 7px 5px 8px 6px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.2), transparent 28%),
    repeating-linear-gradient(7deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 7px);
  pointer-events: none;
}

.birthday-family-photo .tape-left {
  left: 20%;
  transform: translateX(-50%) rotate(-5deg);
}

.birthday-family-photo .tape-right {
  left: 80%;
  transform: translateX(-50%) rotate(5deg);
}

@keyframes birthdayFamilySceneAppear {
  from {
    opacity: 0;
    filter: blur(8px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes birthdayFamilyPhotoDrift {
  from {
    transform: translateX(-50%) translateY(12px) scale(0.97) rotate(1.4deg);
  }
  to {
    transform: translateX(-50%) translateY(0) scale(1) rotate(1.4deg);
  }
}

.birthday-photo-glow {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 58px;
  height: 58px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 238, 171, 0.76), rgba(255, 223, 144, 0.26) 48%, transparent 74%);
  box-shadow: 0 0 28px rgba(255, 224, 132, 0.3);
}

.birthday-photo-star {
  position: absolute;
  width: 34px;
  height: 34px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.7), transparent 20%),
    linear-gradient(145deg, #fff0b1, #e6b86a);
  clip-path: polygon(50% 0, 62% 34%, 100% 43%, 69% 63%, 76% 100%, 50% 78%, 24% 100%, 31% 63%, 0 43%, 38% 34%);
  opacity: 0.72;
  filter: drop-shadow(0 8px 12px rgba(116, 91, 83, 0.12));
}

.birthday-photo-star.star-a {
  left: 10%;
  bottom: 18%;
  transform: rotate(-12deg);
}

.birthday-photo-star.star-b {
  right: 8%;
  top: 8%;
  width: 24px;
  height: 24px;
  transform: rotate(10deg);
  opacity: 0.56;
}

@media (max-width: 430px) {
  .warm-photo-scene {
    top: calc(88px + env(safe-area-inset-top, 0px));
    width: min(92vw, 360px);
  }

  .warm-photo-frame {
    width: min(43vw, 160px);
    padding: 7px 7px 22px;
  }

  .warm-photo-frame figcaption {
    font-size: 12px;
  }

  .ending-photo-scene {
    top: calc(92px + env(safe-area-inset-top, 0px));
    width: min(92vw, 360px);
  }

  .ending-main-photo {
    width: min(78vw, 316px);
  }

  .ending-small-photo {
    width: 72px;
    top: 55%;
  }

  .birthday-photo-scene {
    top: calc(78px + env(safe-area-inset-top, 0px));
    width: min(88vw, 340px);
  }

  .birthday-family-photo {
    width: min(72vw, 286px);
  }
}

@media (max-height: 740px) {
  .dialogue-box {
    height: clamp(206px, 32dvh, 238px);
  }

  .dialogue-box.choice-mode {
    height: clamp(228px, 36dvh, 268px);
  }

  .dialogue-box.choice-mode #dialogueText {
    min-height: 40px;
    max-height: 72px;
    font-size: 15px;
    line-height: 1.6;
  }

  .dialogue-box.choice-mode .choice-layer.active {
    max-height: 132px;
  }

  .dialogue-box.choice-expanded {
    height: clamp(262px, 45dvh, 308px);
  }

  .dialogue-box.choice-expanded #dialogueText {
    min-height: 56px;
    max-height: 104px;
  }

  .dialogue-box.choice-expanded .choice-layer.active {
    max-height: 160px;
  }

  .dialogue-box.choice-mode .choice-btn {
    min-height: 38px;
    padding: 6px 10px;
    font-size: 14.5px;
  }

  .minigame-panel.dino-memory-panel:not(.complete) {
    height: calc(100dvh - 112px);
    min-height: 0;
  }

  .title-menu.final-mode .final-sky {
    padding-top: 62px;
  }

  .title-menu.final-mode .final-message {
    min-height: 380px;
    padding: 28px 24px;
  }

  .title-menu.final-mode .final-message h1 {
    font-size: 28px;
  }

  .title-menu.final-mode .final-message p {
    font-size: 15px;
  }

  .photo-a,
  .photo-b {
    opacity: 0.58;
    transform: scale(0.78) rotate(-6deg);
  }
}

/* Final page v95 override: keep the closing page as a single handmade letter. */
.title-menu.final-mode .final-sky {
  --final-letter-size: clamp(16px, 4.05vw, 18px);
  padding: calc(46px + env(safe-area-inset-top, 0px)) var(--safe-x) calc(26px + env(safe-area-inset-bottom, 0px));
  align-content: center;
  justify-items: center;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 238, 176, 0.28), transparent 24%),
    radial-gradient(circle at 84% 22%, rgba(166, 208, 226, 0.18), transparent 26%),
    linear-gradient(180deg, #f9eedf 0%, #f2dfcf 100%);
  color: #574851;
}

.title-menu.final-mode .final-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("./assets/images/paper-texture.svg?v=vn132-embedded"),
    repeating-linear-gradient(8deg, rgba(93, 70, 62, 0.026) 0 1px, transparent 1px 8px);
  background-size: cover, auto;
  opacity: 0.42;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.title-menu.final-mode .final-sky::after {
  background:
    radial-gradient(circle at 52% 48%, rgba(255, 255, 255, 0.28), transparent 44%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 70%);
  opacity: 0.72;
  mix-blend-mode: soft-light;
}

.title-menu.final-mode .final-constellation,
.title-menu.final-mode .final-keepsakes {
  display: none;
}

.title-menu.final-mode .final-stars {
  opacity: 0.48;
}

.title-menu.final-mode .final-stars span {
  background: rgba(213, 161, 82, 0.54);
  filter: none;
}

.title-menu.final-mode .final-paper-lines {
  display: block;
  position: absolute;
  z-index: 1;
  width: min(86%, 356px);
  height: min(76%, 660px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-0.4deg);
  border: 2px solid rgba(103, 78, 70, 0.12);
  border-radius: 28px 20px 30px 22px / 22px 30px 20px 28px;
  background:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(133, 96, 84, 0.07) 32px 33px),
    rgba(255, 250, 238, 0.54);
  box-shadow: 4px 5px 0 rgba(120, 84, 58, 0.06);
  opacity: 0.72;
  pointer-events: none;
}

.title-menu.final-mode .final-message.final-letter {
  width: min(88vw, 358px);
  max-height: calc(100dvh - 128px);
  overflow: hidden;
  align-content: start;
  justify-items: stretch;
  gap: 10px;
  padding: 26px 22px 28px;
  border: 2px solid rgba(93, 70, 62, 0.28);
  outline: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 30px 22px 32px 24px / 24px 32px 22px 30px;
  background:
    linear-gradient(90deg, rgba(199, 138, 120, 0.18) 0 2px, transparent 2px 100%),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(133, 96, 84, 0.06) 32px 33px),
    radial-gradient(circle at 14% 9%, rgba(255, 239, 190, 0.38), transparent 26%),
    rgba(255, 251, 241, 0.94);
  box-shadow:
    3px 5px 0 rgba(120, 84, 58, 0.08),
    0 18px 34px rgba(70, 48, 48, 0.12);
  color: #5a4a52;
  font-family: var(--font-hand);
  text-align: left;
  text-shadow: none;
  transform: rotate(-0.35deg);
}

.title-menu.final-mode .final-message.final-letter::before,
.title-menu.final-mode .final-message.final-letter::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.title-menu.final-mode .final-message.final-letter::before {
  inset: 12px;
  border: 1px dashed rgba(118, 90, 80, 0.18);
  border-radius: inherit;
}

.title-menu.final-mode .final-message.final-letter::after {
  right: 24px;
  bottom: 20px;
  width: 54px;
  height: 54px;
  border: 2px solid rgba(190, 125, 125, 0.28);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(246, 194, 200, 0.22), transparent 56%);
}

.title-menu.final-mode .final-message.final-letter p,
.title-menu.final-mode .final-message.final-letter .final-signature,
.title-menu.final-mode #finalBackBtn {
  font-size: var(--final-letter-size, 17px);
  line-height: 1.72;
  font-weight: 500;
  letter-spacing: 0;
}

.title-menu.final-mode .final-message.final-letter p {
  margin: 0;
  color: #5a4a52;
  font-family: inherit;
  text-wrap: balance;
}

.title-menu.final-mode .final-message.final-letter .final-signature {
  justify-self: end;
  margin-top: 2px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #7b5f58;
  font-family: inherit;
}

.title-menu.final-mode .final-birthday-photo {
  width: min(100%, 238px);
  justify-self: center;
  margin: 2px 0 4px;
  padding: 8px;
  border: 2px solid rgba(91, 73, 70, 0.26);
  border-radius: 13px 9px 15px 10px;
  background:
    repeating-linear-gradient(-4deg, rgba(111, 82, 68, 0.025) 0 2px, transparent 2px 8px),
    rgba(255, 249, 232, 0.96);
  box-shadow:
    2px 4px 0 rgba(108, 76, 49, 0.07),
    0 12px 20px rgba(52, 38, 45, 0.1);
  transform: rotate(1.2deg);
}

.title-menu.final-mode .final-birthday-photo img {
  aspect-ratio: 4 / 3;
  object-position: center 34%;
  filter: sepia(0.1) saturate(0.78) contrast(0.92) brightness(1.05);
  opacity: 0.95;
  mix-blend-mode: multiply;
}

.title-menu.final-mode #finalBackBtn {
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  min-width: 132px;
  min-height: 42px;
  border-color: rgba(91, 73, 70, 0.34);
  background:
    repeating-linear-gradient(-6deg, rgba(112, 86, 76, 0.026) 0 2px, transparent 2px 7px),
    rgba(255, 246, 222, 0.86);
  color: #5a4a52;
  box-shadow: 2px 3px 0 rgba(108, 76, 49, 0.08);
}

@media (max-height: 740px) {
  .title-menu.final-mode .final-sky {
    --final-letter-size: 15px;
  }

  .title-menu.final-mode .final-message.final-letter {
    width: min(90vw, 350px);
    max-height: calc(100dvh - 112px);
    gap: 7px;
    padding: 20px 18px 22px;
  }

  .title-menu.final-mode .final-birthday-photo {
    width: min(100%, 206px);
    padding: 7px;
  }
}

/* Typography guard: keep each dialogue box visually consistent. */
.dialogue-box,
.dialogue-box button,
.dialogue-box .speaker-name,
#dialogueText,
.choice-layer,
.choice-btn {
  font-family: "ZCOOL KuaiLe", "Ma Shan Zheng", "KaiTi", "STKaiti", "Microsoft YaHei", "PingFang SC", cursive, sans-serif;
  font-weight: 400;
  font-synthesis: none;
}

#dialogueText {
  font-weight: 400;
  letter-spacing: 0;
  text-rendering: geometricPrecision;
}

.dialogue-box:not(.choice-mode) #dialogueText {
  font-size: 16px;
  line-height: 1.7;
}

.speaker-name,
.dialogue-actions button,
.advance-btn,
.choice-btn {
  font-weight: 400;
}