:root {
  --bg: #f5efe4;
  --bg-strong: #f0e2cb;
  --panel: rgba(255, 250, 242, 0.88);
  --panel-strong: rgba(255, 247, 234, 0.96);
  --line: rgba(101, 73, 40, 0.16);
  --text: #2f2418;
  --text-soft: #69513b;
  --accent: #ff9d5c;
  --accent-2: #f2c85b;
  --accent-3: #7fc8b2;
  --danger: #d76565;
  --success: #4d8d6b;
  --shadow: 0 18px 36px rgba(81, 57, 26, 0.14);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --header-font: "Trebuchet MS", "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  --body-font: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  /* Fixed baseline for one-line phoenix dialogue layers. */
  --phoenix-dialogue-layer-width: min(76vw, 340px);
  --phoenix-dialogue-layer-min-height: 58px;
  --phoenix-dialogue-layer-padding-x: 18px;
  --phoenix-dialogue-layer-radius: 18px;
  --phoenix-dialogue-long-font-size: clamp(0.96rem, min(3.8vw, 1.02rem), 1.08rem);
  --phoenix-dialogue-long-line-height: 1.08;
  --phoenix-speaking-dialogue-top: clamp(250px, 37dvh, 405px);
  --phoenix-speaking-highlight-start: calc(
    var(--phoenix-speaking-dialogue-top) + var(--phoenix-dialogue-layer-min-height)
  );
}

.mythic-home-alert {
  display: grid;
  justify-items: center;
}

.home-shell-v2 {
  min-height: 680px;
  height: max(100%, 680px);
  grid-template-rows: minmax(0, 1fr);
}

.home-shell-v2.has-alert {
  grid-template-rows: auto minmax(0, 1fr);
}

.home-shell-v2 .mythic-home-shell {
  min-height: 680px;
  height: max(100%, 680px);
}

.mythic-home-alert .ghost-button {
  width: 100%;
}

.mythic-home-shell {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 32px;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 229, 168, 0.5), transparent 22%),
    linear-gradient(180deg, #a7d7ff 0%, #7cc1ff 30%, #7cc6b4 66%, #86b25a 100%);
  box-shadow: var(--shadow);
  isolation: isolate;
}

.mythic-home-shell--pet {
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 235, 180, 0.58), transparent 24%),
    linear-gradient(180deg, #9fd4ff 0%, #75c6ff 32%, #8ad2ba 64%, #8bb85f 100%);
}

.mythic-home-shell--today {
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 233, 173, 0.62), transparent 24%),
    linear-gradient(180deg, #9ed3ff 0%, #74b8ff 30%, #7fc7c8 62%, #91bc64 100%);
}

.mythic-home-shell--play {
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 232, 194, 0.42), transparent 24%),
    linear-gradient(180deg, #8cd7ff 0%, #66c4f3 28%, #84b3e8 58%, #7f9e6a 100%);
}

.mythic-home-shell--story {
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 214, 170, 0.38), transparent 24%),
    linear-gradient(180deg, #7fb7ff 0%, #6c8fe1 34%, #7878b9 62%, #7c8a64 100%);
}

.mythic-home-shell--album {
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 220, 171, 0.5), transparent 24%),
    linear-gradient(180deg, #9bc7ff 0%, #8cb0ea 30%, #b39ad6 60%, #9daa65 100%);
}

.mythic-scene-sky,
.mythic-scene-cloud,
.mythic-scene-mountain,
.mythic-scene-tree,
.mythic-scene-ground {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mythic-scene-sky {
  background:
    radial-gradient(circle at 72% 16%, rgba(255, 255, 255, 0.34), transparent 16%),
    radial-gradient(circle at 68% 14%, rgba(255, 211, 229, 0.26), transparent 11%);
}

.mythic-scene-cloud {
  inset: auto -8% 18% -8%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255, 247, 241, 0.96), rgba(255, 226, 204, 0.74) 46%, rgba(255, 226, 204, 0) 72%);
  filter: blur(10px);
}

.mythic-scene-cloud-a {
  bottom: 24%;
  height: 16%;
  opacity: 0.64;
}

.mythic-scene-cloud-b {
  bottom: 11%;
  opacity: 0.92;
}

.mythic-scene-mountain {
  inset: auto auto 12% auto;
  background: linear-gradient(180deg, rgba(55, 72, 103, 0.78), rgba(43, 49, 72, 0.94));
}

.mythic-scene-mountain-back {
  right: -6%;
  bottom: 22%;
  width: 44%;
  height: 22%;
  clip-path: polygon(0% 100%, 18% 58%, 36% 28%, 52% 46%, 70% 18%, 100% 100%);
  opacity: 0.72;
}

.mythic-scene-mountain-mid {
  left: -4%;
  bottom: 19%;
  width: 48%;
  height: 18%;
  clip-path: polygon(0% 100%, 14% 70%, 32% 40%, 48% 56%, 68% 26%, 100% 100%);
  opacity: 0.42;
}

.mythic-scene-mountain-front {
  left: -8%;
  right: -8%;
  bottom: 9%;
  height: 20%;
  background: linear-gradient(180deg, rgba(56, 64, 80, 0.34), rgba(35, 42, 49, 0.84));
  clip-path: polygon(0% 100%, 10% 70%, 22% 82%, 34% 58%, 46% 75%, 58% 48%, 72% 76%, 84% 46%, 100% 100%);
}

.mythic-scene-tree {
  inset: auto 12% 23% auto;
  width: 88px;
  height: 180px;
}

.mythic-scene-tree::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 12px;
  height: 82px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #5d4a62, #8e674f);
}

.mythic-scene-tree::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 84%, rgba(190, 240, 255, 0.86), transparent 18%),
    radial-gradient(circle at 28% 34%, rgba(255, 197, 212, 0.8), transparent 26%),
    radial-gradient(circle at 72% 28%, rgba(255, 222, 177, 0.84), transparent 24%),
    radial-gradient(circle at 50% 22%, rgba(131, 230, 255, 0.82), rgba(131, 230, 255, 0.14) 34%, transparent 56%);
}

.mythic-scene-ground {
  inset: auto 0 0 0;
  height: 24%;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(154, 198, 110, 0.84), rgba(116, 162, 67, 0.96));
}

.mythic-home-topbar {
  --mythic-topbar-pill-height: 48px;
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 14px;
  right: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mythic-day-orb,
.mythic-parent-entry {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #215845;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(237, 255, 231, 0.92));
  border: 2px solid rgba(129, 204, 110, 0.66);
  box-shadow: 0 10px 24px rgba(34, 69, 45, 0.14);
  font-weight: 800;
}

.mythic-home-pill {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  color: #23514f;
  background: rgba(255, 252, 244, 0.92);
  border: 1px solid rgba(129, 166, 104, 0.28);
  box-shadow: 0 10px 24px rgba(34, 69, 45, 0.12);
}

button.mythic-home-pill {
  appearance: none;
  font: inherit;
  cursor: pointer;
}

button.mythic-home-pill:focus-visible {
  outline: 2px solid rgba(255, 221, 118, 0.96);
  outline-offset: 3px;
}

.mythic-home-topbar .mythic-home-pill {
  height: var(--mythic-topbar-pill-height);
}

.mythic-home-pill strong {
  color: #ff9a55;
}

.mythic-xp-meter {
  width: min(34vw, 148px);
  min-width: 104px;
  display: grid;
  gap: 5px;
  align-items: center;
}

.mythic-xp-track {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(56, 73, 61, 0.18);
  box-shadow:
    inset 0 1px 3px rgba(29, 35, 28, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.28);
}

.mythic-xp-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255, 156, 79, 0.96), rgba(255, 221, 118, 0.98)),
    #ffb45f;
  box-shadow:
    0 0 16px rgba(255, 153, 72, 0.4),
    inset 0 1px 0 rgba(255, 248, 218, 0.62);
  transition: width 520ms ease;
}

.mythic-xp-label {
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  color: rgba(48, 61, 49, 0.78);
  letter-spacing: 0.02em;
}

.mythic-parent-entry {
  padding: 0;
}

.mythic-stage-badge {
  width: clamp(140px, 34vw, 152px);
  min-width: 140px;
  height: var(--mythic-topbar-pill-height);
  min-height: var(--mythic-topbar-pill-height);
  flex: 0 0 clamp(140px, 34vw, 152px);
  flex-direction: column;
  gap: 1px;
  padding: 6px 14px;
  border-radius: 999px;
  line-height: 1;
  text-align: center;
}

.mythic-stage-badge-kicker {
  max-width: 100%;
  display: block;
  overflow: hidden;
  color: currentColor;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  opacity: 0.72;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
}

.mythic-stage-badge-name {
  max-width: 100%;
  display: block;
  overflow: hidden;
  color: currentColor;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
}

@media (max-width: 360px) {
  .mythic-home-topbar {
    left: 10px;
    right: 10px;
    gap: 8px;
  }

  .mythic-stage-badge {
    width: 140px;
    min-width: 140px;
    flex-basis: 140px;
    padding-inline: 12px;
  }

  .mythic-home-pill {
    padding-inline: 12px;
  }

  .mythic-xp-meter {
    width: 86px;
    min-width: 86px;
  }
}

.settings-entry-icon {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mythic-parent-entry .settings-entry-icon {
  width: 21px;
  height: 21px;
}

.mythic-scene-card {
  position: absolute;
  top: calc(78px + env(safe-area-inset-top, 0px));
  left: 14px;
  right: 14px;
  z-index: 3;
  display: grid;
  gap: 10px;
  padding: 16px 16px 14px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 253, 247, 0.92), rgba(255, 248, 235, 0.84));
  border: 1px solid rgba(126, 165, 101, 0.18);
  box-shadow: 0 16px 36px rgba(44, 66, 47, 0.14);
}

.mythic-scene-card--immersive {
  top: calc(78px + env(safe-area-inset-top, 0px));
  left: 22px;
  right: 22px;
  z-index: 4;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  color: #fff8ed;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.74),
    0 10px 26px rgba(0, 0, 0, 0.42);
}

.mythic-scene-card--immersive .mythic-scene-eyebrow {
  color: rgba(255, 248, 237, 0.86);
}

.mythic-scene-card--immersive .mythic-scene-title {
  max-width: 10em;
  color: #fff8ed;
  font-size: clamp(2rem, min(9vw, 2.42rem), 3.1rem);
  line-height: 1.08;
}

.mythic-scene-card--immersive .mythic-scene-copy {
  max-width: 21em;
  color: rgba(255, 248, 237, 0.9);
}

.mythic-scene-eyebrow {
  color: #3c7c65;
  font-weight: 800;
  font-size: 0.86rem;
}

.mythic-scene-title {
  margin: 0;
  font-family: var(--header-font);
  font-size: clamp(1.15rem, min(4vw, 1.08rem), 1.5rem);
  line-height: 1.18;
}

.mythic-scene-copy {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.55;
  font-size: 0.95rem;
}

.mythic-scene-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mythic-scene-actions {
  display: flex;
  justify-content: flex-start;
}

.mythic-scene-button {
  min-height: 46px;
}

.mythic-task-checklist-card {
  width: min(72vw, 380px);
}

.mythic-task-checklist {
  display: grid;
  gap: 12px;
}

.mythic-task-check-row {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  color: rgba(255, 246, 231, 0.96);
  background: transparent;
  border: 0;
  text-align: left;
  font: inherit;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.72),
    0 10px 26px rgba(0, 0, 0, 0.4);
}

.mythic-task-check-row:disabled {
  cursor: default;
  opacity: 0.94;
}

.mythic-task-check-box {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: rgba(255, 223, 156, 0.98);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 154, 81, 0.18), transparent 58%),
    linear-gradient(180deg, rgba(36, 27, 21, 0.78), rgba(8, 9, 12, 0.72));
  border: 1px solid rgba(255, 184, 96, 0.42);
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 228, 181, 0.14);
}

.mythic-task-check-box svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mythic-task-check-label {
  min-width: 0;
  color: rgba(255, 248, 236, 0.98);
  font-family: var(--header-font);
  font-size: clamp(1.08rem, min(4.6vw, 1.24rem), 1.46rem);
  font-weight: 900;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.mythic-task-check-row.is-completed .mythic-task-check-label {
  color: rgba(255, 225, 172, 0.9);
}

.mythic-task-check-row--return-prep {
  margin-top: 2px;
}

.mythic-task-check-row--return-prep .mythic-task-check-box {
  color: #ff5140;
  border-color: rgba(255, 94, 68, 0.72);
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 207, 122, 0.34), transparent 56%),
    linear-gradient(180deg, rgba(83, 21, 16, 0.88), rgba(26, 10, 13, 0.8));
  box-shadow:
    0 0 18px rgba(255, 76, 46, 0.3),
    inset 0 1px 0 rgba(255, 228, 181, 0.18);
}

.mythic-task-check-row--return-prep .mythic-task-check-box svg {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.5;
}

.mythic-task-check-row--return-prep .mythic-task-check-label {
  color: #ff513f;
  text-shadow:
    0 0 12px rgba(255, 65, 42, 0.42),
    0 2px 10px rgba(0, 0, 0, 0.72),
    0 10px 26px rgba(0, 0, 0, 0.4);
}

.mythic-task-check-row:not(:disabled):active .mythic-task-check-box {
  transform: translateY(1px) scale(0.98);
}

.mythic-scene-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 29%;
  z-index: 3;
  pointer-events: none;
}

.mythic-floating-pill {
  position: absolute;
  max-width: 38%;
  padding: 9px 12px;
  border-radius: 999px;
  color: #fffaf4;
  background: rgba(30, 57, 74, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 18px rgba(18, 30, 32, 0.14);
}

.mythic-floating-pill-left {
  left: 14px;
}

.mythic-floating-pill-right {
  right: 14px;
}

.mythic-home-figure-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 2;
  display: grid;
  justify-items: center;
}

.mythic-home-shell--pet .mythic-home-figure-wrap {
  inset: 0;
  z-index: 1;
  display: block;
}

.mythic-home-shell--pet .mythic-home-figure-wrap.has-energy-feedback {
  z-index: 3;
}

.mythic-home-figure-wrap.has-pet-tap-feedback {
  z-index: 3;
}

.mythic-creature-stage {
  position: relative;
  width: min(72vw, 300px);
  max-width: 300px;
}

.mythic-home-shell--pet .mythic-creature-stage {
  width: 100%;
  max-width: none;
  height: 100%;
}

.mythic-creature-glow {
  position: absolute;
  left: 50%;
  bottom: 16px;
  width: 72%;
  height: 52px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 229, 150, 0.52) 36%, rgba(255, 229, 150, 0) 72%);
}

.mythic-creature-shell {
  position: relative;
  z-index: 2;
}

.mythic-home-shell--pet .mythic-creature-shell,
.mythic-home-shell--pet .mythic-creature-shell .asset-pet-container,
.mythic-home-shell--pet .mythic-creature-shell .asset-pet-art {
  width: 100%;
  height: 100%;
}

.mythic-creature-stage.is-stage-upgrading .mythic-creature-shell {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mythic-creature-stage.is-stage-upgrading::before {
  content: "";
  display: block;
  aspect-ratio: 300 / 260;
}

.mythic-creature-stage.is-stage-upgrading .mythic-creature-shell.is-upgrade-before {
  opacity: 1;
  animation: none;
  transition: opacity 120ms ease-out;
}

.mythic-creature-stage.is-stage-upgrading .mythic-creature-shell.is-upgrade-after {
  opacity: 0;
  transform: none;
  filter: none;
  animation: none;
  transition: opacity 120ms ease-out;
}

.mythic-creature-stage.is-stage-upgrading.is-rebirth-after .mythic-creature-shell.is-upgrade-before {
  opacity: 0;
}

.mythic-creature-stage.is-stage-upgrading.is-rebirth-after .mythic-creature-shell.is-upgrade-after {
  opacity: 1;
}

.mythic-home-shell--pet .mythic-creature-shell .asset-pet-art {
  aspect-ratio: auto;
}

.mythic-home-shell--pet .asset-base-img,
.mythic-home-shell--pet .asset-base-layer .pet-svg,
.mythic-home-shell--pet .asset-base-layer .egg-svg {
  object-fit: cover;
  object-position: center;
  filter: none;
}

.mythic-home-shell--pet .asset-speech-bubble,
.mythic-home-shell--pet .mythic-creature-glow,
.mythic-home-shell--pet .mythic-creature-shadow {
  display: none;
}

.mythic-energy-absorb-overlay {
  --energy-core: #fffdf0;
  --energy-mid: #ffe84a;
  --energy-hot: #ff8a26;
  --energy-deep: #ff3d18;
  --energy-aura: rgba(255, 214, 54, 0.84);
  --energy-start-x: 14%;
  --energy-start-y: 78%;
  --energy-mid-x: 34%;
  --energy-mid-y: 61%;
  --energy-target-x: 50%;
  --energy-target-y: 49%;
  --energy-impact-size: clamp(380px, 112vw, 940px);
  --energy-core-size: clamp(260px, 82vw, 690px);
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.mythic-energy-absorb-overlay.is-egg-target {
  --energy-target-y: 52%;
  --energy-impact-size: clamp(400px, 118vw, 980px);
  --energy-core-size: clamp(280px, 88vw, 720px);
}

.mythic-energy-absorb-overlay.is-hatched-target {
  --energy-target-y: 48%;
  --energy-impact-size: clamp(430px, 122vw, 1040px);
  --energy-core-size: clamp(300px, 92vw, 760px);
}

.mythic-energy-absorb-overlay--falling {
  --energy-fall-x: 50%;
  --energy-fall-y: 58%;
  --energy-sky-start-y: -18%;
  --energy-sky-tail-h: clamp(360px, 72dvh, 720px);
  --energy-fall-ellipse-w: clamp(250px, 68vw, 520px);
  --energy-fall-ellipse-h: clamp(250px, 68vw, 520px);
  --energy-start-x: var(--energy-fall-x);
  --energy-start-y: var(--energy-sky-start-y);
  --energy-mid-x: var(--energy-fall-x);
  --energy-mid-y: 24%;
  --energy-target-x: var(--energy-fall-x);
  --energy-target-y: var(--energy-fall-y);
  --energy-impact-y: var(--energy-fall-y);
  --egg-energy-target-x: var(--energy-fall-x);
  --egg-energy-target-y: var(--energy-fall-y);
  --egg-energy-meteor-start-y: var(--energy-sky-start-y);
  --egg-energy-meteor-tail-h: var(--energy-sky-tail-h);
  --egg-energy-ellipse-w: var(--energy-fall-ellipse-w);
  --egg-energy-ellipse-h: var(--energy-fall-ellipse-h);
  --upgrade-origin-x: var(--energy-fall-x);
  --upgrade-origin-y: var(--energy-fall-y);
  --energy-descend-delay: 0s;
  --energy-after-impact-delay: 1.68s;
  --energy-after-impact-duration: 2.8s;
}

.mythic-energy-absorb-overlay--falling.is-egg-target {
  --energy-fall-y: 62%;
  --energy-target-y: var(--energy-fall-y);
  --energy-impact-y: var(--energy-fall-y);
  --egg-energy-target-y: var(--energy-fall-y);
  --energy-fall-ellipse-w: clamp(280px, 74vw, 560px);
  --energy-fall-ellipse-h: clamp(310px, 82vw, 650px);
}

.mythic-energy-absorb-overlay--falling.is-hatched-target {
  --energy-fall-y: 66%;
  --energy-target-y: var(--energy-fall-y);
  --energy-impact-y: var(--energy-fall-y);
  --egg-energy-target-y: var(--energy-fall-y);
  --energy-fall-ellipse-w: clamp(290px, 76vw, 600px);
  --energy-fall-ellipse-h: clamp(290px, 76vw, 600px);
}

.mythic-energy-absorb-overlay--falling .egg-energy-success-effect {
  --egg-energy-target-x: var(--energy-fall-x);
  --egg-energy-target-y: var(--energy-fall-y);
  --egg-energy-meteor-start-y: var(--energy-sky-start-y);
  --egg-energy-meteor-tail-h: var(--energy-sky-tail-h);
  --egg-energy-ellipse-w: var(--energy-fall-ellipse-w);
  --egg-energy-ellipse-h: var(--energy-fall-ellipse-h);
}

.mythic-energy-absorb-overlay--stage-upgrade {
  z-index: 6;
  --energy-after-impact-delay: 1.62s;
  --energy-after-impact-duration: 3.05s;
}

.mythic-energy-descend {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

.mythic-energy-descend span {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
}

.mythic-energy-descend {
  z-index: 8;
}

.mythic-energy-sky-beam {
  inset: auto;
  left: var(--egg-energy-target-x);
  top: var(--egg-energy-meteor-start-y);
  width: clamp(5px, 1.3vw, 9px);
  height: var(--egg-energy-meteor-tail-h);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 198, 48, 0) 0%, rgba(255, 214, 72, 0.08) 24%, rgba(255, 239, 143, 0.42) 68%, rgba(255, 255, 241, 0.98) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 255, 244, 1) 0 10%, rgba(255, 231, 96, 0.82) 24%, rgba(255, 151, 36, 0.28) 52%, rgba(255, 118, 30, 0) 78%);
  box-shadow:
    0 0 9px rgba(255, 255, 226, 0.86),
    0 0 30px rgba(255, 214, 72, 0.64),
    0 0 92px rgba(255, 184, 46, 0.36);
  opacity: 0;
  transform: translate(-50%, -100%) scaleY(0.34);
  transform-origin: 50% 100%;
  animation: mythic-energy-sky-beam 1.78s cubic-bezier(0.22, 0.72, 0.14, 1) var(--energy-descend-delay) both;
}

.mythic-energy-sky-orb {
  inset: auto;
  left: var(--egg-energy-target-x);
  top: var(--egg-energy-meteor-start-y);
  width: clamp(42px, 12vw, 72px);
  height: clamp(42px, 12vw, 72px);
  border-radius: 58% 42% 62% 38% / 44% 64% 36% 56%;
  background:
    radial-gradient(circle at 46% 40%, rgba(255, 255, 250, 1) 0 8%, rgba(255, 245, 177, 0.8) 13%, transparent 23%),
    conic-gradient(from 24deg at 50% 52%, rgba(255, 250, 187, 0.94) 0 9%, rgba(255, 190, 44, 0.58) 14% 22%, transparent 28% 38%, rgba(255, 128, 28, 0.62) 45% 54%, transparent 60% 73%, rgba(255, 244, 139, 0.8) 80% 90%, transparent 96% 100%),
    radial-gradient(ellipse at 50% 56%, rgba(255, 218, 72, 0.78) 0 30%, rgba(255, 124, 28, 0.38) 52%, rgba(255, 76, 18, 0) 76%);
  box-shadow:
    0 0 18px rgba(255, 255, 235, 0.98),
    0 0 52px rgba(255, 215, 62, 0.92),
    0 0 108px rgba(255, 116, 24, 0.7),
    inset 0 0 12px rgba(255, 255, 255, 0.86);
  filter: saturate(1.24) contrast(1.08);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  animation: mythic-energy-sky-orb 1.78s cubic-bezier(0.22, 0.72, 0.14, 1) var(--energy-descend-delay) both;
}

.mythic-energy-sky-orb::before,
.mythic-energy-sky-orb::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.mythic-energy-sky-orb::before {
  inset: -42%;
  background:
    conic-gradient(from 20deg, transparent 0 12%, rgba(255, 249, 173, 0.74) 18%, transparent 28% 48%, rgba(255, 136, 32, 0.64) 56%, transparent 68% 82%, rgba(255, 230, 92, 0.52) 88%, transparent 96% 100%),
    radial-gradient(circle at 50% 50%, rgba(255, 228, 85, 0.24), transparent 62%);
  filter: blur(3px);
  opacity: 0.92;
  animation: egg-energy-confirm-spin 1.28s linear infinite;
}

.mythic-energy-sky-orb::after {
  inset: -28% -44%;
  background:
    linear-gradient(112deg, transparent 0 33%, rgba(255, 246, 169, 0.58) 45%, transparent 58% 100%),
    linear-gradient(248deg, transparent 0 42%, rgba(255, 132, 31, 0.44) 52%, transparent 65% 100%);
  filter: blur(4px);
  opacity: 0.78;
  animation: egg-energy-confirm-spin 2.1s linear infinite reverse;
}

.mythic-energy-sky-glint {
  inset: auto;
  left: var(--egg-energy-target-x);
  top: var(--egg-energy-target-y);
  --glint-x: -42px;
  --glint-y: -22px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff 0 18%, #ffef90 46%, rgba(255, 120, 28, 0) 76%);
  box-shadow:
    0 0 18px rgba(255, 255, 232, 0.82),
    0 0 32px rgba(255, 194, 48, 0.68);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  animation: mythic-energy-sky-glint 1.05s cubic-bezier(0.2, 0.72, 0.18, 1) calc(var(--energy-descend-delay) + 1.42s) both;
}

.mythic-energy-sky-glint-b {
  --glint-x: 44px;
  --glint-y: 18px;
  width: 11px;
  height: 11px;
  animation-delay: calc(var(--energy-descend-delay) + 1.54s);
}

.mythic-energy-impact-flash {
  inset: auto;
  left: var(--egg-energy-target-x);
  top: var(--egg-energy-target-y);
  width: clamp(64px, 18vw, 102px);
  height: clamp(64px, 18vw, 102px);
  border-radius: 999px;
  background:
    radial-gradient(circle, #fff 0 14%, #fff4a8 36%, rgba(255, 126, 30, 0.66) 64%, transparent 78%);
  box-shadow:
    0 0 28px rgba(255, 255, 236, 0.96),
    0 0 72px rgba(255, 196, 45, 0.84),
    0 0 126px rgba(255, 106, 28, 0.58);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.28);
  animation: mythic-energy-impact-flash 1.2s ease-out calc(var(--energy-descend-delay) + 1.48s) both;
}

.mythic-stage-upgrade-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mythic-stage-upgrade-light span {
  position: absolute;
  pointer-events: none;
}

.mythic-stage-upgrade-light {
  z-index: 7;
  overflow: hidden;
  mix-blend-mode: screen;
  isolation: isolate;
}

.mythic-stage-upgrade-veil {
  inset: -14%;
  background:
    radial-gradient(ellipse at var(--upgrade-origin-x) var(--upgrade-origin-y), rgba(255, 253, 242, 1) 0 8%, rgba(255, 244, 199, 0.96) 20%, rgba(255, 211, 106, 0.62) 36%, rgba(255, 159, 74, 0.16) 56%, rgba(255, 214, 176, 0) 72%),
    linear-gradient(90deg, rgba(255, 253, 242, 0) 0%, rgba(255, 244, 199, 0.2) 34%, rgba(255, 253, 242, 0.96) 50%, rgba(255, 244, 199, 0.2) 66%, rgba(255, 253, 242, 0) 100%),
    linear-gradient(180deg, rgba(255, 253, 242, 0.1), rgba(255, 244, 199, 0.9) 46%, rgba(255, 253, 242, 0.74) 60%, rgba(255, 244, 199, 0.04));
  opacity: 0;
  filter: blur(18px) saturate(1.08);
  transform: scaleY(0.018);
  transform-origin: var(--upgrade-origin-x) var(--upgrade-origin-y);
  animation: mythic-stage-upgrade-veil 3.1s cubic-bezier(0.18, 0.7, 0.16, 1) both;
  animation-delay: var(--energy-after-impact-delay);
}

.mythic-stage-upgrade-curtain {
  inset: -8% auto -8%;
  left: var(--upgrade-origin-x);
  width: clamp(72px, 18vw, 150px);
  background:
    linear-gradient(90deg, rgba(255, 253, 242, 0) 0%, rgba(255, 230, 144, 0.22) 20%, rgba(255, 253, 242, 1) 48%, rgba(255, 230, 144, 0.24) 80%, rgba(255, 253, 242, 0) 100%),
    linear-gradient(180deg, rgba(255, 253, 242, 0), rgba(255, 244, 199, 0.86) 34%, rgba(255, 253, 242, 0.96) 52%, rgba(255, 211, 106, 0.44) 74%, rgba(255, 253, 242, 0));
  box-shadow:
    0 0 34px rgba(255, 253, 242, 0.82),
    0 0 112px rgba(255, 211, 106, 0.72),
    0 0 210px rgba(255, 159, 74, 0.38);
  opacity: 0;
  filter: blur(6px) saturate(1.12);
  transform: translateX(-50%) scaleX(0.12);
  transform-origin: 50% var(--upgrade-origin-y);
  animation: mythic-stage-upgrade-curtain 3.1s cubic-bezier(0.16, 0.76, 0.18, 1) both;
  animation-delay: var(--energy-after-impact-delay);
}

.mythic-stage-upgrade-column {
  inset: auto;
  left: var(--upgrade-origin-x);
  top: -12%;
  bottom: calc(100% - var(--upgrade-origin-y));
  width: clamp(18px, 5vw, 42px);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 253, 242, 0) 0%, rgba(255, 244, 199, 0.42) 18%, rgba(255, 253, 242, 0.98) 82%, rgba(255, 253, 242, 0.1) 100%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 253, 242, 1), rgba(255, 211, 106, 0.52) 46%, rgba(255, 159, 74, 0) 76%);
  box-shadow:
    0 0 22px rgba(255, 253, 242, 0.92),
    0 0 68px rgba(255, 211, 106, 0.78),
    0 0 128px rgba(255, 159, 74, 0.36);
  opacity: 0;
  filter: blur(1px);
  transform: translateX(-50%) scaleY(0.08);
  transform-origin: 50% 100%;
  animation: mythic-stage-upgrade-column 3.1s ease-out both;
  animation-delay: var(--energy-after-impact-delay);
}

.mythic-stage-upgrade-wave {
  inset: auto -12%;
  top: var(--upgrade-origin-y);
  height: clamp(74px, 18dvh, 170px);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 253, 242, 0.84) 0 10%, rgba(255, 244, 199, 0.46) 26%, rgba(255, 211, 106, 0.18) 48%, rgba(255, 253, 242, 0) 72%);
  opacity: 0;
  filter: blur(8px);
  transform: translateY(-50%) scaleX(0.36) scaleY(0.18);
  animation: mythic-stage-upgrade-wave 3.1s ease-out both;
  animation-delay: calc(var(--energy-after-impact-delay) + 0.04s);
}

.mythic-stage-upgrade-wave-b {
  height: clamp(112px, 26dvh, 230px);
  animation-delay: calc(var(--energy-after-impact-delay) + 0.18s);
}

.mythic-stage-upgrade-mote {
  inset: auto;
  left: calc(var(--upgrade-origin-x) + var(--upgrade-mote-x, 0px));
  top: var(--upgrade-origin-y);
  width: clamp(5px, 1.2vw, 9px);
  height: clamp(64px, 16vw, 118px);
  border-radius: 100% 12% 100% 12%;
  background:
    linear-gradient(180deg, rgba(255, 253, 242, 0.92), rgba(255, 211, 106, 0.56) 56%, rgba(255, 159, 74, 0));
  box-shadow:
    0 0 14px rgba(255, 253, 242, 0.7),
    0 0 30px rgba(255, 211, 106, 0.42);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--upgrade-mote-rotate, 0deg)) translateY(0) scale(0.52);
  transform-origin: 50% 88%;
  animation: mythic-stage-upgrade-mote 3.1s ease-out both;
  animation-delay: var(--energy-after-impact-delay);
}

.mythic-stage-upgrade-mote-a {
  --upgrade-mote-x: -18vw;
  --upgrade-mote-rotate: -12deg;
}

.mythic-stage-upgrade-mote-b {
  --upgrade-mote-x: 18vw;
  --upgrade-mote-rotate: 12deg;
  animation-delay: calc(var(--energy-after-impact-delay) + 0.1s);
}

.mythic-stage-upgrade-mote-c {
  --upgrade-mote-x: -32vw;
  --upgrade-mote-rotate: -22deg;
  animation-delay: calc(var(--energy-after-impact-delay) + 0.18s);
}

.mythic-stage-upgrade-mote-d {
  --upgrade-mote-x: 32vw;
  --upgrade-mote-rotate: 22deg;
  animation-delay: calc(var(--energy-after-impact-delay) + 0.24s);
}

.mythic-energy-trajectory {
  position: absolute;
  left: var(--energy-start-x);
  top: var(--energy-start-y);
  width: 78%;
  height: 32%;
  border-top: 7px solid rgba(255, 242, 104, 0.98);
  border-radius: 62% 48% 0 0;
  opacity: 0;
  filter:
    drop-shadow(0 0 14px rgba(255, 255, 221, 0.98))
    drop-shadow(0 0 34px rgba(255, 190, 48, 0.9))
    drop-shadow(0 0 56px rgba(255, 91, 24, 0.72));
  mix-blend-mode: screen;
  transform: rotate(-19deg) scaleX(0.06);
  transform-origin: 0 50%;
  animation: mythic-energy-trajectory-draw 3.05s ease-out both;
}

.mythic-energy-trajectory::before,
.mythic-energy-trajectory::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.mythic-energy-trajectory::before {
  left: -4%;
  right: -2%;
  top: -22px;
  height: 42px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 118, 24, 0) 0%, rgba(255, 190, 44, 0.72) 24%, rgba(255, 255, 232, 0.96) 52%, rgba(255, 118, 24, 0.64) 78%, rgba(255, 118, 24, 0) 100%);
  filter: blur(9px);
}

.mythic-energy-trajectory::after {
  right: -5px;
  top: -19px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background:
    radial-gradient(circle, #fff 0 12%, #fff6a6 34%, rgba(255, 118, 24, 0.78) 62%, rgba(255, 118, 24, 0) 78%);
  box-shadow:
    0 0 22px rgba(255, 255, 255, 0.92),
    0 0 48px rgba(255, 191, 45, 0.82);
}

.mythic-energy-flight-ribbon {
  position: absolute;
  left: var(--energy-start-x);
  top: calc(var(--energy-start-y) - 2%);
  width: 84%;
  height: 16px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 104, 20, 0) 0%, rgba(255, 174, 36, 0.78) 22%, rgba(255, 255, 238, 1) 48%, rgba(255, 232, 74, 0.86) 68%, rgba(255, 104, 20, 0) 100%);
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.86),
    0 0 44px rgba(255, 195, 42, 0.78),
    0 0 86px rgba(255, 94, 24, 0.58);
  opacity: 0;
  mix-blend-mode: screen;
  transform: rotate(-22deg) scaleX(0.04);
  transform-origin: 0 50%;
  animation: mythic-energy-flight-ribbon 3.05s ease-out both;
}

.mythic-energy-orb-flight,
.mythic-energy-trail,
.mythic-energy-impact-ring,
.mythic-energy-impact-core,
.mythic-energy-impact-fill {
  position: absolute;
  left: var(--energy-start-x);
  top: var(--energy-start-y);
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.mythic-energy-orb-flight {
  width: clamp(112px, 30vw, 210px);
  height: clamp(112px, 30vw, 210px);
  background:
    radial-gradient(circle at 34% 26%, #fff 0 14%, var(--energy-core) 28%, var(--energy-mid) 48%, var(--energy-hot) 70%, rgba(255, 61, 24, 0) 78%),
    radial-gradient(circle, rgba(255, 247, 145, 0.86), rgba(255, 138, 38, 0.22) 60%, transparent 76%);
  box-shadow:
    0 0 24px rgba(255, 255, 255, 0.96),
    0 0 68px var(--energy-aura),
    0 0 132px rgba(255, 90, 24, 0.88),
    0 0 186px rgba(255, 31, 15, 0.42),
    inset 0 0 34px rgba(255, 255, 255, 0.84);
  opacity: 0;
  animation: mythic-energy-orb-flight 3.18s cubic-bezier(0.18, 0.7, 0.16, 1) both;
}

.mythic-energy-orb-flight::before,
.mythic-energy-orb-flight::after {
  content: "";
  position: absolute;
  inset: -38%;
  border-radius: inherit;
  background:
    conic-gradient(from 20deg, transparent 0 18%, rgba(255, 247, 154, 0.82) 23%, transparent 32% 54%, rgba(255, 131, 37, 0.72) 60%, transparent 70% 100%);
  filter: blur(2px);
  animation: mythic-energy-orb-spin 1.2s linear infinite;
}

.mythic-energy-orb-flight::after {
  inset: -62%;
  opacity: 0.72;
  animation-duration: 1.8s;
  animation-direction: reverse;
}

.mythic-energy-trail {
  width: 32px;
  height: 32px;
  background: radial-gradient(circle, #fff 0 12%, var(--energy-mid) 40%, rgba(255, 138, 38, 0) 72%);
  box-shadow:
    0 0 22px rgba(255, 255, 255, 0.78),
    0 0 38px rgba(255, 232, 74, 0.82),
    0 0 62px rgba(255, 113, 26, 0.46);
  opacity: 0;
  animation: mythic-energy-trail-flight 2.86s cubic-bezier(0.2, 0.72, 0.18, 1) both;
}

.mythic-energy-trail-b {
  width: 24px;
  height: 24px;
  animation-delay: 0.16s;
}

.mythic-energy-trail-c {
  width: 18px;
  height: 18px;
  animation-delay: 0.32s;
}

.mythic-energy-flight-spark {
  position: absolute;
  left: var(--energy-start-x);
  top: var(--energy-start-y);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background:
    radial-gradient(circle, #fff 0 18%, #fff4a8 42%, rgba(255, 142, 31, 0.72) 68%, transparent 78%);
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.88),
    0 0 34px rgba(255, 229, 76, 0.78);
  opacity: 0;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) scale(0.4);
  animation: mythic-energy-flight-spark 2.95s cubic-bezier(0.16, 0.72, 0.16, 1) both;
}

.mythic-energy-flight-spark-b {
  width: 14px;
  height: 14px;
  animation-delay: 0.18s;
}

.mythic-energy-flight-spark-c {
  width: 11px;
  height: 11px;
  animation-delay: 0.34s;
}

.mythic-energy-impact-ring {
  left: var(--energy-target-x);
  top: var(--energy-target-y);
  width: var(--energy-impact-size);
  height: var(--energy-impact-size);
  border: 5px solid rgba(255, 243, 132, 0.95);
  box-shadow:
    0 0 38px rgba(255, 255, 220, 0.94),
    0 0 96px rgba(255, 195, 39, 0.84),
    0 0 164px rgba(255, 96, 25, 0.7),
    inset 0 0 72px rgba(255, 231, 77, 0.56);
  opacity: 0;
  mix-blend-mode: screen;
  animation: mythic-energy-impact-ring 2.18s ease-out 1.84s both;
}

.mythic-energy-impact-core {
  left: var(--energy-target-x);
  top: var(--energy-target-y);
  width: var(--energy-core-size);
  height: var(--energy-core-size);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 14%, rgba(255, 247, 140, 0.9) 30%, rgba(255, 139, 38, 0.46) 58%, rgba(255, 139, 38, 0) 78%);
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(1px);
  animation: mythic-energy-impact-core 2.28s ease-out 1.76s both;
}

.mythic-energy-impact-fill {
  left: var(--energy-target-x);
  top: var(--energy-target-y);
  width: var(--energy-impact-size);
  height: var(--energy-impact-size);
  background:
    radial-gradient(ellipse at 50% 52%, rgba(255, 255, 255, 0.92) 0 18%, rgba(255, 241, 98, 0.78) 34%, rgba(255, 139, 38, 0.52) 58%, rgba(255, 99, 29, 0.08) 76%, rgba(255, 99, 29, 0) 86%);
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(7px);
  animation: mythic-energy-impact-fill 3.2s ease-out 1.78s both;
}

.mythic-home-shell--pet::before,
.mythic-home-shell--pet::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}

.mythic-home-shell--pet::before {
  top: 0;
  height: 44%;
  background: linear-gradient(180deg, rgba(5, 7, 12, 0.62), rgba(5, 7, 12, 0));
}

.mythic-home-shell--pet::after {
  bottom: 0;
  height: 36%;
  background: linear-gradient(0deg, rgba(5, 7, 12, 0.68), rgba(5, 7, 12, 0));
}

.mythic-home-shell--pet .mythic-home-topbar,
.mythic-home-shell--pet .mythic-home-dock {
  z-index: 5;
}

.mythic-home-shell--pet .mythic-day-orb,
.mythic-home-shell--pet .mythic-parent-entry,
.mythic-home-shell--pet .mythic-home-pill,
.mythic-home-shell--pet .mythic-home-dock,
.mythic-home-shell--pet .mythic-dock-button {
  color: rgba(255, 237, 210, 0.94);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 139, 58, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(20, 14, 11, 0.72), rgba(4, 6, 10, 0.58));
  border-color: rgba(255, 158, 76, 0.24);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 221, 172, 0.12);
  backdrop-filter: blur(12px);
}

.mythic-home-shell--pet .mythic-day-orb,
.mythic-home-shell--pet .mythic-parent-entry {
  border-width: 1px;
  text-shadow: 0 0 14px rgba(255, 132, 52, 0.28);
}

.mythic-home-shell--pet .mythic-home-pill {
  border: 1px solid rgba(255, 158, 76, 0.22);
}

.mythic-home-shell--pet .mythic-home-pill strong {
  color: rgba(255, 176, 88, 0.98);
}

.mythic-home-shell--pet .mythic-xp-label {
  color: rgba(255, 226, 179, 0.88);
  text-shadow: 0 0 12px rgba(255, 126, 49, 0.3);
}

.mythic-home-shell--pet .mythic-home-dock {
  padding: 8px;
  border: 1px solid rgba(255, 158, 76, 0.18);
}

.mythic-home-shell--pet .mythic-dock-button {
  border: 1px solid rgba(255, 170, 95, 0.24);
}

.mythic-home-shell--pet .mythic-dock-button.active {
  color: rgba(255, 229, 177, 0.98);
  border-color: rgba(255, 209, 116, 0.58);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 197, 102, 0.34), transparent 62%),
    linear-gradient(180deg, rgba(47, 31, 19, 0.82), rgba(9, 8, 9, 0.68));
  box-shadow:
    0 0 0 2px rgba(255, 211, 122, 0.12),
    0 14px 30px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 238, 190, 0.18);
}

.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) {
  border-radius: 0;
  background: #070a10;
  box-shadow: none;
}

.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-scene-sky,
.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-scene-cloud,
.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-scene-mountain,
.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-scene-tree,
.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-scene-ground {
  display: none;
}

.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-home-figure-wrap {
  inset: 0;
  z-index: 1;
  display: block;
}

.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-creature-stage {
  width: 100%;
  max-width: none;
  height: 100%;
}

.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-creature-shell,
.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-creature-shell .asset-pet-container,
.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-creature-shell .asset-pet-art {
  width: 100%;
  height: 100%;
}

.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-creature-shell .asset-pet-art {
  aspect-ratio: auto;
}

.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .asset-base-img,
.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .asset-base-layer .pet-svg,
.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .asset-base-layer .egg-svg {
  object-fit: cover;
  object-position: center;
  filter: none;
}

.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .asset-speech-bubble,
.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-creature-glow,
.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-creature-shadow {
  display: none;
}

.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
)::before,
.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}

.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
)::before {
  top: 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(5, 7, 12, 0.76), rgba(5, 7, 12, 0.2) 58%, rgba(5, 7, 12, 0));
}

.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
)::after {
  bottom: 0;
  height: 38%;
  background: linear-gradient(0deg, rgba(5, 7, 12, 0.78), rgba(5, 7, 12, 0));
}

.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-home-topbar,
.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-scene-card,
.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-scene-meta,
.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-home-dock {
  z-index: 5;
}

.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) :is(.mythic-day-orb, .mythic-parent-entry, .mythic-home-pill, .mythic-home-dock, .mythic-dock-button) {
  color: rgba(255, 237, 210, 0.94);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 139, 58, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(20, 14, 11, 0.72), rgba(4, 6, 10, 0.58));
  border-color: rgba(255, 158, 76, 0.24);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 221, 172, 0.12);
  backdrop-filter: blur(12px);
}

.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) :is(.mythic-day-orb, .mythic-parent-entry, .mythic-dock-button) {
  border: 1px solid rgba(255, 170, 95, 0.24);
}

.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-home-pill {
  border: 1px solid rgba(255, 158, 76, 0.22);
}

.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-home-pill strong {
  color: rgba(255, 176, 88, 0.98);
}

.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-xp-track {
  background: rgba(255, 232, 194, 0.14);
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 178, 96, 0.18);
}

.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-xp-fill {
  background:
    linear-gradient(90deg, rgba(255, 113, 49, 0.92), rgba(255, 208, 102, 0.98)),
    #ff994a;
  box-shadow:
    0 0 18px rgba(255, 115, 42, 0.46),
    inset 0 1px 0 rgba(255, 239, 186, 0.56);
}

.home-shell-v2 :is(
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-xp-label {
  color: rgba(255, 226, 179, 0.88);
  text-shadow: 0 0 12px rgba(255, 126, 49, 0.3);
}

.home-shell-v2 :is(
  .mythic-home-shell--pet,
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-dock-button.active {
  color: rgba(255, 229, 177, 0.98);
  border-color: rgba(255, 209, 116, 0.58);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 197, 102, 0.34), transparent 62%),
    linear-gradient(180deg, rgba(47, 31, 19, 0.82), rgba(9, 8, 9, 0.68));
  box-shadow:
    0 0 0 2px rgba(255, 211, 122, 0.12),
    0 14px 30px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 238, 190, 0.18);
}

.home-shell-v2 :is(
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-scene-card {
  top: calc(118px + env(safe-area-inset-top, 0px));
  left: 28px;
  right: 28px;
  gap: 10px;
  max-height: none;
  padding: 0;
  overflow: visible;
  color: rgba(255, 239, 214, 0.94);
  background: transparent;
  border: 0;
  box-shadow: none;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.72),
    0 12px 28px rgba(0, 0, 0, 0.42);
  backdrop-filter: none;
}

.home-shell-v2 :is(
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-scene-eyebrow {
  color: rgba(255, 187, 105, 0.94);
}

.home-shell-v2 :is(
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-scene-title {
  max-width: 10.5em;
  color: rgba(255, 248, 236, 0.98);
  font-size: clamp(1.65rem, min(7vw, 1.88rem), 2.65rem);
  line-height: 1.1;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.38);
}

.home-shell-v2 :is(
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-scene-copy {
  max-width: 22em;
  color: rgba(255, 236, 210, 0.86);
  font-size: 1rem;
}

.home-shell-v2 :is(
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-scene-chip-row {
  margin-top: 2px;
}

.home-shell-v2 :is(
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-scene-card .mini-pill,
.home-shell-v2 :is(
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-floating-pill {
  color: rgba(255, 237, 210, 0.94);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 154, 81, 0.18), transparent 62%),
    linear-gradient(180deg, rgba(18, 13, 11, 0.62), rgba(5, 7, 12, 0.48));
  border: 1px solid rgba(255, 158, 76, 0.22);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
}

.home-shell-v2 :is(
  .mythic-home-shell--today,
  .mythic-home-shell--play,
  .mythic-home-shell--story,
  .mythic-home-shell--album
) .mythic-scene-card :is(.primary-button, .ghost-button) {
  min-height: 48px;
  border-radius: 999px;
  color: rgba(255, 229, 183, 0.96);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 154, 81, 0.26), transparent 58%),
    linear-gradient(180deg, rgba(65, 39, 22, 0.88), rgba(14, 10, 11, 0.84));
  border: 1px solid rgba(255, 186, 95, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 178, 0.14),
    0 12px 24px rgba(0, 0, 0, 0.3);
  text-shadow: 0 0 16px rgba(255, 126, 49, 0.28);
}

.mythic-creature-shell .pet-svg,
.mythic-creature-shell .egg-svg {
  width: 100%;
  display: block;
  filter: drop-shadow(0 18px 24px rgba(51, 49, 33, 0.16));
}

.mythic-creature-shadow {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 56%;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(55, 52, 33, 0.22), rgba(55, 52, 33, 0) 72%);
}

.asset-pet-container {
  --pet-drag-x: 0px;
  --pet-drag-y: 0px;
  position: relative;
  width: 100%;
  touch-action: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  outline: none;
  transform: none;
  transition: filter 180ms ease;
}

.asset-pet-container.is-dragging {
  cursor: pointer;
  transition: none;
}

.asset-pet-container.is-settling {
  animation: asset-pet-settle 260ms ease-out;
}

.asset-pet-container:focus-visible {
  filter: drop-shadow(0 0 0.55rem rgba(255, 241, 184, 0.92));
}

.asset-pet-art {
  position: relative;
  width: 100%;
  aspect-ratio: 300 / 260;
}

.asset-base-layer,
.asset-fx-layer,
.asset-hitbox-layer {
  position: absolute;
  inset: 0;
}

.asset-base-layer {
  z-index: 1;
}

.asset-base-layer .pet-svg,
.asset-base-layer .egg-svg,
.asset-base-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(51, 49, 33, 0.16));
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.asset-fx-layer {
  z-index: 2;
  pointer-events: none;
}


.asset-hitbox-layer {
  z-index: 3;
}

.asset-hitbox {
  position: absolute;
  border-radius: 999px;
}

.asset-hitbox-head {
  left: 35%;
  top: 20%;
  width: 30%;
  height: 26%;
}

.asset-hitbox-body {
  left: 28%;
  top: 40%;
  width: 44%;
  height: 38%;
}

.asset-hitbox-wing {
  left: 16%;
  top: 34%;
  width: 68%;
  height: 38%;
}


.asset-speech-bubble {
  position: absolute;
  left: 50%;
  bottom: 96%;
  z-index: 9;
  width: min(240px, 86vw);
  padding: 10px 12px;
  border-radius: 18px 18px 18px 6px;
  color: #53311d;
  background: rgba(255, 252, 242, 0.96);
  border: 1px solid rgba(255, 188, 93, 0.42);
  box-shadow: 0 12px 24px rgba(53, 36, 18, 0.18);
  font-size: 0.92rem;
  line-height: 1.45;
  text-align: center;
  transform: translate(-50%, 10px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.asset-speech-bubble::after {
  content: "";
  position: absolute;
  left: 34%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background: rgba(255, 252, 242, 0.96);
  border-right: 1px solid rgba(255, 188, 93, 0.32);
  border-bottom: 1px solid rgba(255, 188, 93, 0.32);
}

.asset-pet-container.is-speaking .asset-speech-bubble,
.asset-pet-container.is-celebrating .asset-speech-bubble,
.asset-pet-container:focus-visible .asset-speech-bubble {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.asset-energy-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: min(128%, 560px);
  height: min(128%, 560px);
  border-radius: 46% 48% 52% 50%;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(255, 255, 255, 0.98) 0 16%, rgba(255, 248, 155, 0.9) 32%, rgba(255, 176, 45, 0.58) 58%, rgba(255, 99, 32, 0.06) 78%, rgba(255, 99, 32, 0) 88%);
  box-shadow:
    0 0 44px rgba(255, 255, 255, 0.98),
    0 0 92px rgba(255, 232, 74, 0.92),
    0 0 156px rgba(255, 101, 32, 0.78);
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(1px);
  transform: translate(-50%, -50%) scale(0.24);
  animation: asset-energy-feed 3.65s ease-out 1.76s both;
}

.asset-energy-body-fill,
.asset-energy-contact-flash {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}

.asset-energy-body-fill {
  inset: -30%;
  z-index: 4;
  border-radius: 44% 46% 54% 50%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.94) 0 18%, rgba(255, 244, 103, 0.8) 34%, rgba(255, 144, 31, 0.52) 58%, rgba(255, 95, 28, 0.08) 78%, transparent 88%),
    linear-gradient(135deg, transparent 12%, rgba(255, 255, 255, 0.38) 42%, transparent 68%);
  filter: blur(3px);
  animation: mythic-energy-body-fill 3.9s ease-out 1.72s both;
}

.asset-energy-contact-flash {
  left: 50%;
  top: 50%;
  z-index: 6;
  width: min(78%, 360px);
  height: min(78%, 360px);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 1) 0 16%, rgba(255, 244, 119, 0.94) 32%, rgba(255, 134, 28, 0.48) 60%, transparent 76%);
  box-shadow:
    0 0 42px rgba(255, 255, 255, 0.94),
    0 0 96px rgba(255, 224, 76, 0.84),
    0 0 150px rgba(255, 93, 24, 0.62);
  transform: translate(-50%, -50%) scale(0.2);
  animation: mythic-energy-contact-flash 1.85s ease-out 1.68s both;
}

.mythic-creature-stage.has-scene-feedback .asset-pet-container.is-celebrating .asset-base-layer {
  animation: mythic-energy-body-glow 4.4s ease-out 1.68s both;
}

.mythic-creature-stage.has-scene-feedback .asset-pet-container.is-celebrating .asset-base-img,
.mythic-creature-stage.has-scene-feedback .asset-pet-container.is-celebrating .pet-svg,
.mythic-creature-stage.has-scene-feedback .asset-pet-container.is-celebrating .egg-svg {
  animation: mythic-energy-art-brighten 4.4s ease-out 1.68s both;
}

.mythic-creature-stage.has-scene-feedback .asset-pet-container.is-celebrating .asset-fx-layer::before,
.mythic-creature-stage.has-scene-feedback .asset-pet-container.is-celebrating .asset-fx-layer::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 4;
  border-radius: 48%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}

.mythic-creature-stage.has-scene-feedback .asset-pet-container.is-celebrating .asset-fx-layer::before {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.98) 0 16%, rgba(255, 235, 70, 0.82) 34%, rgba(255, 132, 28, 0.52) 62%, rgba(255, 132, 28, 0) 82%);
  filter: blur(4px);
  animation: mythic-energy-body-aura 4s ease-out 1.72s both;
}

.mythic-creature-stage.has-scene-feedback .asset-pet-container.is-celebrating .asset-fx-layer::after {
  inset: -42%;
  background:
    conic-gradient(from -20deg, transparent 0 9%, rgba(255, 252, 177, 0.9) 16%, transparent 28% 48%, rgba(255, 160, 34, 0.72) 58%, transparent 74% 100%);
  filter: blur(7px);
  animation: mythic-energy-body-halo 4.6s ease-out 1.64s both;
}

.asset-anim-idle-breathe .asset-base-layer {
  animation: asset-idle-breathe 2.4s ease-in-out infinite;
  transform-origin: 50% 72%;
}


.asset-anim-farewell-flight .asset-base-layer {
  animation: asset-farewell-hover 1.6s ease-in-out infinite;
}

.mythic-creature-stage.has-scene-feedback .mythic-creature-glow {
  animation: asset-glow-pulse 1.2s ease-in-out infinite;
}

.mythic-home-figure-wrap.has-pet-tap-feedback .asset-pet-art,
.mythic-home-figure-wrap.has-pet-tap-feedback .pet-svg,
.mythic-home-figure-wrap.has-pet-tap-feedback .egg-svg {
  animation: mythic-pet-tap-response 460ms cubic-bezier(0.18, 0.86, 0.2, 1.08) both;
  transform-origin: 50% 72%;
}

.mythic-task-feedback-bubble {
  position: absolute;
  left: 50%;
  bottom: 90%;
  z-index: 7;
  width: min(82vw, 280px);
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 22px 22px 22px 8px;
  color: #4c2e1d;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.88), transparent 36%),
    rgba(255, 249, 236, 0.94);
  border: 1px solid rgba(255, 190, 101, 0.48);
  box-shadow: 0 16px 30px rgba(46, 32, 16, 0.18);
  transform: translate(-50%, 8px);
  animation: mythic-feedback-rise 420ms ease-out both;
}

.mythic-task-feedback-bubble::after {
  content: "";
  position: absolute;
  left: 36%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background: rgba(255, 249, 236, 0.96);
  border-right: 1px solid rgba(255, 190, 101, 0.36);
  border-bottom: 1px solid rgba(255, 190, 101, 0.36);
}

.mythic-task-feedback-bubble--pet-tap {
  top: var(--phoenix-speaking-dialogue-top);
  bottom: auto;
  box-sizing: border-box;
  width: var(--phoenix-dialogue-layer-width);
  max-width: calc(100vw - 28px);
  min-height: var(--phoenix-dialogue-layer-min-height);
  display: grid;
  place-items: center;
  padding: 0 var(--phoenix-dialogue-layer-padding-x);
  gap: 0;
  overflow: hidden;
  border-radius: var(--phoenix-dialogue-layer-radius);
  color: rgba(255, 250, 240, 0.96);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 183, 82, 0.2), transparent 64%),
    linear-gradient(180deg, rgba(18, 13, 11, 0.84), rgba(5, 7, 12, 0.76));
  border: 1px solid rgba(255, 183, 92, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 196, 0.14),
    0 14px 28px rgba(0, 0, 0, 0.38),
    0 0 30px rgba(255, 112, 34, 0.14);
  text-align: center;
  text-shadow: 0 0 14px rgba(255, 164, 83, 0.18);
  backdrop-filter: blur(12px);
  transform: translate(-50%, 0) scale(1);
  animation: mythic-pet-tap-dialogue-rise 280ms ease-out both;
}

.mythic-task-feedback-bubble--pet-tap::after {
  width: 38%;
  height: 1px;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 191, 99, 0.62), transparent);
}

.mythic-task-feedback-bubble--pet-tap .mythic-task-feedback-title {
  width: 100%;
  max-width: 100%;
  font-family: var(--body-font);
  font-size: var(--phoenix-dialogue-long-font-size);
  font-weight: 850;
  line-height: var(--phoenix-dialogue-long-line-height);
  white-space: normal;
  overflow-wrap: anywhere;
}

.mythic-task-feedback-title {
  font-family: var(--header-font);
  font-weight: 900;
  line-height: 1.25;
}

.mythic-task-feedback-next {
  color: var(--text-soft);
  font-size: 0.86rem;
  line-height: 1.42;
}

.mythic-home-dock {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  color: rgba(255, 237, 210, 0.94);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 139, 58, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(20, 14, 11, 0.72), rgba(4, 6, 10, 0.58));
  border: 1px solid rgba(255, 158, 76, 0.18);
  backdrop-filter: blur(12px);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 221, 172, 0.12);
}

.mythic-dock-button {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 237, 210, 0.94);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 139, 58, 0.22), transparent 60%),
    linear-gradient(180deg, rgba(20, 14, 11, 0.72), rgba(4, 6, 10, 0.58));
  border: 1px solid rgba(255, 170, 95, 0.24);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 221, 172, 0.12);
}

.mythic-dock-button.active {
  color: rgba(255, 229, 177, 0.98);
  border-color: rgba(255, 209, 116, 0.58);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 197, 102, 0.34), transparent 62%),
    linear-gradient(180deg, rgba(47, 31, 19, 0.82), rgba(9, 8, 9, 0.68));
  box-shadow:
    0 0 0 2px rgba(255, 211, 122, 0.12),
    0 14px 30px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 238, 190, 0.18);
}

.mythic-dock-icon {
  width: 46%;
  height: 46%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mythic-dock-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.setup-immersive-preview {
  min-height: 100%;
  height: 100%;
  border-radius: 0;
}

.setup-preview-topline {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top, 0px));
  left: 14px;
  right: 14px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.setup-discovery-door {
  position: absolute;
  left: 50%;
  bottom: 20%;
  width: 144px;
  height: 208px;
  transform: translateX(-50%);
  border-radius: 68px 68px 14px 14px;
  background: linear-gradient(180deg, #8a5d3a 0%, #6c482f 46%, #764a30 100%);
  border: 5px solid rgba(245, 222, 190, 0.32);
  box-shadow: inset 0 0 0 1px rgba(55, 31, 10, 0.26);
}

.setup-discovery-door::before {
  content: "";
  position: absolute;
  right: 28px;
  top: 88px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe9b4, #bf8643);
}

.setup-discovery-step {
  position: absolute;
  left: 50%;
  bottom: 16%;
  width: 260px;
  height: 32px;
  transform: translateX(-50%);
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, #ad8f6c, #8b6d50);
}

.setup-discovery-copy {
  position: absolute;
  top: calc(88px + env(safe-area-inset-top, 0px));
  left: 14px;
  right: 14px;
  z-index: 4;
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 253, 247, 0.92), rgba(255, 248, 235, 0.84));
  border: 1px solid rgba(126, 165, 101, 0.18);
  box-shadow: 0 16px 36px rgba(44, 66, 47, 0.14);
}

.setup-discovery-egg-button {
  position: absolute;
  left: 50%;
  bottom: calc(18% + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  width: min(48vw, 220px);
  transform: translateX(-50%);
  background: transparent;
  padding: 0;
}

.setup-discovery-egg-button .egg-svg {
  width: 100%;
  display: block;
  filter: drop-shadow(0 20px 24px rgba(41, 41, 23, 0.18));
}

.setup-discovery-hand-hint {
  position: absolute;
  left: 50%;
  bottom: calc(16% + env(safe-area-inset-bottom, 0px));
  z-index: 6;
  display: grid;
  justify-items: center;
  gap: 8px;
  transform: translateX(72px);
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}

.setup-discovery-hand-hint.visible {
  opacity: 1;
  transform: translateX(72px) translateY(0);
}

.setup-discovery-hand-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(35, 54, 48, 0.16);
}

.setup-discovery-hand-hint.visible .setup-discovery-hand-icon {
  animation: discovery-hand-tap 0.9s ease-in-out infinite;
}

.setup-scene-note-card {
  position: absolute;
  top: calc(82px + env(safe-area-inset-top, 0px));
  left: 14px;
  right: 14px;
  z-index: 3;
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 253, 247, 0.78), rgba(255, 248, 235, 0.62));
  border: 1px solid rgba(126, 165, 101, 0.16);
  box-shadow: 0 12px 28px rgba(44, 66, 47, 0.12);
}

.setup-config-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  align-items: end;
  padding:
    calc(124px + env(safe-area-inset-top, 0px))
    12px
    calc(88px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(10, 18, 25, 0.06), rgba(10, 18, 25, 0.14));
}

.setup-config-sheet {
  max-height: 100%;
  display: grid;
  gap: 14px;
  min-height: 0;
  padding: 18px 16px 16px;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.97), rgba(255, 247, 235, 0.94)),
    rgba(255, 250, 242, 0.96);
  border: 1px solid rgba(105, 73, 40, 0.12);
  box-shadow: 0 20px 44px rgba(25, 31, 21, 0.18);
  backdrop-filter: blur(10px);
}

.setup-config-sheet-large {
  min-height: min(70dvh, 620px);
}

.setup-config-header {
  display: grid;
  gap: 14px;
}

.setup-config-title {
  margin: 12px 0 0;
  font-family: var(--header-font);
  font-size: clamp(1.2rem, min(4vw, 1.08rem), 1.6rem);
  line-height: 1.18;
}

.setup-config-copy {
  margin: 10px 0 0;
  color: var(--text-soft);
  line-height: 1.6;
}

.setup-config-body {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 14px;
  padding-right: 2px;
}

.setup-config-body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.setup-config-section-copy {
  color: var(--text-soft);
  line-height: 1.6;
}

.setup-config-goal-picker,
.setup-config-mission-picker {
  display: grid;
  gap: 14px;
}

.setup-config-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.setup-config-actions > div:empty {
  min-height: 1px;
}

@keyframes asset-idle-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-3px) scale(1.015);
  }
}

@keyframes asset-glow-pulse {
  0%,
  100% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.06);
    filter: brightness(1.12);
  }
}

@keyframes asset-energy-feed {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.24);
  }

  16% {
    opacity: 0.98;
    transform: translate(-50%, -50%) scale(0.82);
  }

  36% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.04);
  }

  70% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(1.16);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.28);
  }
}

@keyframes phoenix-egg-fire-canvas-visibility {
  0%,
  100% {
    opacity: 0;
  }

  5%,
  90% {
    opacity: 1;
  }
}

@keyframes phoenix-rebirth-fire-canvas-visibility {
  0%,
  100% {
    opacity: 0;
  }

  4%,
  96% {
    opacity: 1;
  }
}

@keyframes mythic-energy-body-fill {
  0%,
  8% {
    opacity: 0;
    transform: scale(0.34);
  }

  22% {
    opacity: 0.96;
    transform: scale(0.94);
  }

  48% {
    opacity: 0.78;
    transform: scale(1.08);
  }

  78% {
    opacity: 0.28;
    transform: scale(1.18);
  }

  100% {
    opacity: 0;
    transform: scale(1.26);
  }
}

@keyframes mythic-energy-contact-flash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.16);
  }

  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }

  54% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(1.24);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.44);
  }
}

@keyframes mythic-energy-trajectory-draw {
  0% {
    opacity: 0;
    transform: rotate(-19deg) scaleX(0.04);
  }

  12% {
    opacity: 1;
  }

  74% {
    opacity: 0.98;
    transform: rotate(-19deg) scaleX(1);
  }

  100% {
    opacity: 0;
    transform: rotate(-19deg) scaleX(1.06);
  }
}

@keyframes mythic-energy-flight-ribbon {
  0% {
    opacity: 0;
    transform: rotate(-22deg) scaleX(0.04);
  }

  10% {
    opacity: 0.92;
  }

  72% {
    opacity: 0.86;
    transform: rotate(-22deg) scaleX(1);
  }

  100% {
    opacity: 0;
    transform: rotate(-22deg) scaleX(1.08);
  }
}

@keyframes mythic-energy-orb-flight {
  0% {
    left: var(--energy-start-x);
    top: var(--energy-start-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.34);
  }

  10% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
  }

  36% {
    left: var(--energy-mid-x);
    top: var(--energy-mid-y);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.02);
  }

  66% {
    left: 43%;
    top: 55%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.94);
  }

  84% {
    left: var(--energy-target-x);
    top: var(--energy-target-y);
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.72);
  }

  100% {
    left: var(--energy-target-x);
    top: var(--energy-target-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.04);
  }
}

@keyframes mythic-energy-trail-flight {
  0% {
    left: var(--energy-start-x);
    top: var(--energy-start-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.38);
  }

  18% {
    opacity: 0.96;
  }

  56% {
    left: var(--energy-mid-x);
    top: var(--energy-mid-y);
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    left: var(--energy-target-x);
    top: var(--energy-target-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
}

@keyframes mythic-energy-flight-spark {
  0% {
    left: var(--energy-start-x);
    top: var(--energy-start-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.32);
  }

  18% {
    opacity: 0.96;
  }

  54% {
    left: var(--energy-mid-x);
    top: calc(var(--energy-mid-y) - 3%);
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(1);
  }

  86% {
    left: var(--energy-target-x);
    top: var(--energy-target-y);
    opacity: 0.72;
  }

  100% {
    left: var(--energy-target-x);
    top: var(--energy-target-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.12);
  }
}

@keyframes mythic-energy-orb-spin {
  0% {
    transform: rotate(0deg) scale(0.92);
  }

  100% {
    transform: rotate(360deg) scale(0.92);
  }
}

@keyframes mythic-energy-impact-ring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.08);
  }

  18% {
    opacity: 1;
  }

  52% {
    opacity: 0.58;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.18);
  }
}

@keyframes mythic-energy-impact-core {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18);
  }

  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.96);
  }

  62% {
    opacity: 0.66;
    transform: translate(-50%, -50%) scale(1.18);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.42);
  }
}

@keyframes mythic-energy-impact-fill {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18);
  }

  18% {
    opacity: 0.94;
    transform: translate(-50%, -50%) scale(0.86);
  }

  48% {
    opacity: 0.76;
    transform: translate(-50%, -50%) scale(1.04);
  }

  76% {
    opacity: 0.32;
    transform: translate(-50%, -50%) scale(1.14);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.22);
  }
}

@keyframes mythic-energy-sky-beam {
  0% {
    opacity: 0;
    top: var(--egg-energy-meteor-start-y);
    transform: translate(-50%, -100%) scaleY(0.34);
    filter: blur(8px);
  }

  16% {
    opacity: 0.94;
    filter: blur(3px);
  }

  72% {
    top: var(--egg-energy-target-y);
    opacity: 1;
    transform: translate(-50%, -100%) scaleY(1);
    filter:
      drop-shadow(0 0 20px rgba(255, 255, 226, 0.92))
      drop-shadow(0 0 56px rgba(255, 184, 46, 0.66))
      blur(0.8px);
  }

  88% {
    top: var(--egg-energy-target-y);
    opacity: 0.58;
    transform: translate(-50%, -100%) scaleY(0.74);
  }

  100% {
    top: var(--egg-energy-target-y);
    opacity: 0;
    transform: translate(-50%, -100%) scaleY(0.42);
    filter: blur(9px);
  }
}

@keyframes mythic-energy-sky-orb {
  0% {
    left: var(--egg-energy-target-x);
    top: var(--egg-energy-meteor-start-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.48);
  }

  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.82);
  }

  72% {
    left: var(--egg-energy-target-x);
    top: var(--egg-energy-target-y);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    left: var(--egg-energy-target-x);
    top: var(--egg-energy-target-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.16);
  }
}

@keyframes mythic-energy-sky-glint {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }

  22% {
    opacity: 0.94;
    transform: translate(-50%, -50%) scale(0.82);
  }

  74% {
    opacity: 0.68;
    transform: translate(-50%, -50%) translate(var(--glint-x, 26px), var(--glint-y, -22px)) scale(0.72);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--glint-x, 26px), var(--glint-y, -22px)) scale(0.16);
  }
}

@keyframes mythic-energy-impact-flash {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.24);
  }

  32% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.78);
  }
}

@keyframes mythic-stage-upgrade-before {
  0%,
  68% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }

  80%,
  100% {
    opacity: 0;
    transform: scale(0.985);
    filter: brightness(1.7) blur(2px);
  }
}

@keyframes mythic-stage-upgrade-after {
  0%,
  70% {
    opacity: 0;
    transform: scale(1.035);
    filter: brightness(1.45) saturate(1.18) blur(2px);
  }

  84% {
    opacity: 1;
    transform: scale(1.02);
    filter: brightness(1.24) saturate(1.12) blur(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: none;
  }
}

@keyframes mythic-stage-upgrade-veil {
  0% {
    opacity: 0;
    transform: scaleY(0.018);
    filter: blur(24px) saturate(1.02);
  }

  24% {
    opacity: 0.72;
    transform: scaleY(0.46);
  }

  46%,
  64% {
    opacity: 1;
    transform: scaleY(1.18);
    filter: blur(5px) saturate(1.12);
  }

  82% {
    opacity: 0.52;
    transform: scaleY(1.34);
    filter: blur(16px) saturate(1.04);
  }

  100% {
    opacity: 0;
    transform: scaleY(1.48);
    filter: blur(24px) saturate(1);
  }
}

@keyframes mythic-stage-upgrade-curtain {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.1);
    filter: blur(12px) saturate(1.04);
  }

  18% {
    opacity: 0.82;
    transform: translateX(-50%) scaleX(0.74);
  }

  42%,
  62% {
    opacity: 1;
    transform: translateX(-50%) scaleX(9.8);
    filter: blur(2px) saturate(1.14);
  }

  78% {
    opacity: 0.58;
    transform: translateX(-50%) scaleX(11.2);
    filter: blur(10px) saturate(1.04);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scaleX(12);
    filter: blur(22px) saturate(1);
  }
}

@keyframes mythic-stage-upgrade-column {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleY(0.08);
  }

  18% {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }

  56% {
    opacity: 0.92;
    transform: translateX(-50%) scaleY(1.06);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scaleY(0.72);
    filter: blur(10px);
  }
}

@keyframes mythic-stage-upgrade-wave {
  0% {
    opacity: 0;
    transform: translateY(-50%) scaleX(0.32) scaleY(0.14);
  }

  30% {
    opacity: 0.72;
    transform: translateY(-86%) scaleX(0.86) scaleY(0.42);
  }

  58% {
    opacity: 0.82;
    transform: translateY(-142%) scaleX(1.16) scaleY(0.7);
  }

  100% {
    opacity: 0;
    transform: translateY(-214%) scaleX(1.38) scaleY(1);
  }
}

@keyframes mythic-stage-upgrade-mote {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--upgrade-mote-rotate, 0deg)) translateY(8px) scale(0.42);
  }

  34% {
    opacity: 0.86;
  }

  66% {
    opacity: 0.62;
    transform: translate(-50%, -50%) rotate(var(--upgrade-mote-rotate, 0deg)) translateY(clamp(-118px, -24vw, -190px)) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--upgrade-mote-rotate, 0deg)) translateY(clamp(-160px, -34vw, -250px)) scale(0.66);
  }
}

@keyframes mythic-energy-body-glow {
  0%,
  8% {
    filter: none;
  }

  22% {
    filter:
      drop-shadow(0 0 34px rgba(255, 252, 194, 0.98))
      drop-shadow(0 0 86px rgba(255, 232, 74, 0.96))
      drop-shadow(0 0 146px rgba(255, 112, 31, 0.78));
  }

  58% {
    filter:
      drop-shadow(0 0 26px rgba(255, 244, 154, 0.88))
      drop-shadow(0 0 64px rgba(255, 186, 46, 0.66));
  }

  100% {
    filter: none;
  }
}

@keyframes mythic-energy-art-brighten {
  0%,
  8% {
    filter: none;
  }

  22% {
    filter:
      brightness(1.72)
      saturate(1.62)
      drop-shadow(0 0 48px rgba(255, 242, 119, 0.96))
      drop-shadow(0 0 104px rgba(255, 105, 30, 0.78));
  }

  58% {
    filter:
      brightness(1.24)
      saturate(1.24)
      drop-shadow(0 0 34px rgba(255, 222, 70, 0.72));
  }

  100% {
    filter: none;
  }
}

@keyframes mythic-energy-body-aura {
  0%,
  10% {
    opacity: 0;
    transform: scale(0.58);
  }

  24% {
    opacity: 0.96;
    transform: scale(1.04);
  }

  70% {
    opacity: 0.42;
    transform: scale(1.16);
  }

  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

@keyframes mythic-energy-body-halo {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0.68);
  }

  28% {
    opacity: 0.88;
    transform: rotate(70deg) scale(1.06);
  }

  100% {
    opacity: 0;
    transform: rotate(230deg) scale(1.32);
  }
}

@keyframes egg-energy-confirm-trail-flight {
  0% {
    opacity: 0;
    top: var(--egg-energy-meteor-start-y);
    transform: translate(-50%, -100%) scaleY(0.34);
    filter: blur(8px);
  }

  16% {
    opacity: 0.92;
    filter: blur(3px);
  }

  72% {
    top: var(--egg-energy-target-y);
    opacity: 1;
    transform: translate(-50%, -100%) scaleY(1);
    filter: drop-shadow(0 0 20px rgba(255, 255, 226, 0.92)) drop-shadow(0 0 56px rgba(255, 184, 46, 0.66)) blur(0.8px);
  }

  86% {
    top: var(--egg-energy-target-y);
    opacity: 0.56;
    transform: translate(-50%, -100%) scaleY(0.72);
  }

  100% {
    top: var(--egg-energy-target-y);
    opacity: 0;
    transform: translate(-50%, -100%) scaleY(0.42);
    filter: blur(9px);
  }
}

@keyframes egg-energy-confirm-orb-flight {
  0% {
    left: var(--egg-energy-target-x);
    top: var(--egg-energy-meteor-start-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.48);
  }

  14% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.82);
  }

  72% {
    left: var(--egg-energy-target-x);
    top: var(--egg-energy-target-y);
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    left: var(--egg-energy-target-x);
    top: var(--egg-energy-target-y);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.16);
  }
}

@keyframes egg-energy-confirm-spark-flight {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }

  22% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(0.82);
  }

  74% {
    opacity: 0.68;
    transform: translate(-50%, -50%) translate(var(--spark-x, 26px), var(--spark-y, -22px)) scale(0.72);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--spark-x, 26px), var(--spark-y, -22px)) scale(0.16);
  }
}

@keyframes egg-energy-confirm-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes egg-energy-core-flare {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.24);
  }

  32% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.7);
  }
}

@keyframes egg-energy-ellipse-fill {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.08);
  }

  18% {
    opacity: 0.92;
  }

  70% {
    opacity: 0.76;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.02);
  }
}

@keyframes egg-energy-ellipse-rim {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.08);
  }

  18% {
    opacity: 0.96;
  }

  78% {
    opacity: 0.74;
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.03);
  }
}

@keyframes asset-pet-settle {
  0% {
    transform: translate3d(var(--pet-drag-x), var(--pet-drag-y), 0);
  }

  70% {
    transform: translate3d(0, -5px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes asset-farewell-hover {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

@keyframes mythic-feedback-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, 18px) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes mythic-pet-tap-dialogue-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

@keyframes mythic-pet-tap-response {
  0%,
  100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
  }

  38% {
    transform: translateY(5px) scale(0.985);
    filter: brightness(1.06);
  }

  72% {
    transform: translateY(-8px) scale(1.018);
    filter: brightness(1.1);
  }
}

@keyframes discovery-hand-tap {
  0%,
  100% {
    transform: scale(1) translateY(0);
  }

  50% {
    transform: scale(0.92) translateY(6px);
  }
}

@media (max-height: 760px) {
  .home-shell-v2,
  .home-shell-v2 .mythic-home-shell {
    min-height: 560px;
    height: max(100%, 560px);
  }

  .mythic-scene-card,
  .setup-discovery-copy {
    gap: 8px;
    padding: 14px;
  }

  .mythic-scene-copy {
    font-size: 0.9rem;
  }

  .mythic-home-figure-wrap {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  .mythic-creature-stage {
    width: min(62vw, 250px);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  background:
    radial-gradient(circle at top, rgba(255, 235, 199, 0.82), transparent 42%),
    linear-gradient(180deg, #f8f1e6 0%, #f2e7d7 42%, #ecd9bc 100%);
  color: var(--text);
  font-family: var(--body-font);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  height: 100dvh;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.app-shell {
  height: 100dvh;
  padding: 0;
  overflow: hidden;
  touch-action: manipulation;
}

.shell-frame {
  width: min(100%, 430px);
  max-width: 430px;
  height: 100dvh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  padding:
    calc(10px + env(safe-area-inset-top, 0px))
    12px
    calc(12px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

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

.screen-body {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: grid;
}

.shell-frame-immersive {
  gap: 0;
  padding: 0;
}

.shell-frame-no-topbar {
  grid-template-rows: 1fr;
  gap: 0;
}

.screen-body-immersive {
  min-height: 100dvh;
}

.brand-badge,
.mini-pill,
.time-pill,
.task-chip,
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255, 248, 238, 0.76);
  border: 1px solid rgba(111, 78, 43, 0.1);
  box-shadow: 0 6px 16px rgba(83, 61, 33, 0.08);
  color: var(--text-soft);
}

.brand-badge {
  font-family: var(--header-font);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hidden-settings-button {
  width: 42px;
  height: 42px;
  color: rgba(94, 73, 48, 0.72);
  background: rgba(255, 248, 238, 0.62);
  border-color: rgba(101, 73, 40, 0.08);
  box-shadow: 0 6px 14px rgba(71, 50, 25, 0.06);
}

.hidden-settings-button:hover {
  color: rgba(69, 49, 28, 0.96);
  background: rgba(255, 248, 238, 0.9);
}

.icon-button,
.ghost-button,
.primary-button,
.secondary-button,
.danger-button {
  border-radius: 999px;
  padding: 12px 18px;
  transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

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

.icon-button {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 246, 232, 0.88);
  border: 1px solid rgba(101, 73, 40, 0.14);
  box-shadow: 0 8px 18px rgba(71, 50, 25, 0.1);
}

.primary-button {
  background: linear-gradient(135deg, #ffb168, #ff8f5c);
  color: #fffaf4;
  box-shadow: 0 12px 24px rgba(245, 121, 65, 0.25);
}

.secondary-button {
  background: linear-gradient(135deg, #8ac8ba, #6aa9a4);
  color: #fffdf6;
  box-shadow: 0 12px 24px rgba(68, 123, 116, 0.2);
}

.ghost-button {
  color: var(--text-soft);
  background: rgba(255, 247, 234, 0.84);
  border: 1px solid rgba(101, 73, 40, 0.12);
}

.danger-button {
  color: #fffaf4;
  background: linear-gradient(135deg, #e48585, #cc5e68);
}

.immersive-button {
  color: rgba(255, 239, 214, 0.96);
  border: 1px solid rgba(255, 171, 103, 0.24);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 154, 81, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(39, 30, 23, 0.82), rgba(10, 11, 14, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 178, 0.14),
    0 12px 22px rgba(0, 0, 0, 0.3),
    0 0 24px rgba(255, 118, 52, 0.08);
  text-shadow: 0 0 16px rgba(255, 126, 49, 0.28);
  backdrop-filter: blur(10px) saturate(1.08);
}

.primary-button:disabled,
.secondary-button:disabled,
.ghost-button:disabled,
.danger-button:disabled,
.icon-button:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

.grid-hero {
  display: grid;
  gap: 18px;
}

.card {
  background: var(--panel);
  border: 1px solid rgba(109, 77, 44, 0.12);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.story-card,
.pet-card,
.section-card,
.setup-card,
.task-card,
.timeline-card,
.archive-card,
.modal-card {
  padding: 22px;
}

.pet-card {
  overflow: hidden;
  position: relative;
}

.pet-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 12%, rgba(255, 255, 255, 0.45), transparent 22%),
    radial-gradient(circle at 15% 80%, rgba(248, 203, 129, 0.2), transparent 32%);
  pointer-events: none;
}

.hero-layout {
  display: grid;
  gap: 18px;
}

.pet-stage-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.pet-name {
  margin: 0;
  font-family: var(--header-font);
  font-size: clamp(1.65rem, min(4vw, 1.08rem), 2.3rem);
  line-height: 1.1;
}

.section-title,
.modal-title,
.setup-title,
.story-title,
.archive-title,
.timeline-title {
  margin: 0;
  font-family: var(--header-font);
  line-height: 1.15;
}

.section-title {
  font-size: 1.1rem;
}

.story-title {
  font-size: clamp(1.3rem, min(3.6vw, 0.97rem), 1.8rem);
}

.subtitle,
.muted,
.story-text,
.field-help,
.timeline-note,
.archive-copy,
.setup-copy,
.task-meta,
.small-note {
  color: var(--text-soft);
  line-height: 1.65;
}

.story-scene {
  display: grid;
  gap: 18px;
}

.onboarding-shell {
  max-width: 430px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.onboarding-copy {
  display: grid;
  gap: 10px;
}

.intro-grid {
  display: grid;
  gap: 14px;
}

.intro-scene-illustration {
  position: relative;
  min-height: 320px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 247, 228, 0.28), transparent 24%),
    radial-gradient(circle at 18% 28%, rgba(120, 198, 255, 0.14), transparent 30%),
    radial-gradient(circle at 82% 24%, rgba(255, 188, 104, 0.12), transparent 32%),
    linear-gradient(180deg, #101b29 0%, #162b43 34%, #1d3150 58%, #3f2f33 78%, #241b24 100%);
  padding: 20px 18px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.intro-egg-stage {
  position: relative;
  min-height: 100%;
  display: grid;
  align-content: space-between;
  gap: 16px;
}

.intro-egg-caption {
  justify-self: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(247, 250, 255, 0.12);
  color: rgba(255, 247, 235, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 24px rgba(7, 10, 18, 0.24);
  backdrop-filter: blur(10px);
}

.intro-egg-cloud {
  position: absolute;
  inset: 22px 18px auto;
  height: 130px;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.24), transparent 64%);
  pointer-events: none;
}

.intro-egg-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
  align-self: end;
}

.intro-egg-item {
  padding: 8px 4px 0;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)),
    rgba(12, 18, 30, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.intro-egg-item .egg-svg {
  width: 100%;
  display: block;
}

.intro-orb-egg-svg {
  filter: saturate(1.08) contrast(1.02);
}

.egg-main-img {
  width: 100%;
  display: block;
  border-radius: 20px;
  object-fit: cover;
  object-position: center;
}

.intro-egg-item .egg-main-img,
.setup-demo-egg .egg-main-img,
.setup-demo-home-art .egg-main-img,
.egg-card .egg-main-img {
  aspect-ratio: 3 / 4;
  max-height: 260px;
}

.setup-discovery-egg-button .egg-main-img {
  aspect-ratio: 3 / 4.8;
  max-height: min(52vh, 420px);
  border-radius: 24px;
  box-shadow: 0 22px 34px rgba(6, 8, 13, 0.24);
}

.intro-hero-card {
  display: grid;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255, 228, 182, 0.38), transparent 34%),
    rgba(255, 248, 238, 0.88);
  border: 1px solid rgba(105, 73, 40, 0.1);
}

.intro-hero-art {
  width: min(100%, 300px);
  margin: 0 auto;
}

.intro-hero-art .egg-svg {
  width: 100%;
  display: block;
}

.intro-card {
  min-height: 100%;
}

.setup-playthrough-window {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255, 229, 190, 0.44), transparent 36%),
    linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(255, 246, 235, 0.94));
  border: 1px solid rgba(105, 73, 40, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.setup-playthrough-topline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.setup-playthrough-hero {
  display: grid;
  gap: 14px;
  align-items: center;
}

.setup-playthrough-art {
  width: min(100%, 180px);
  margin: 0 auto;
}

.setup-playthrough-art .egg-svg {
  width: 100%;
  display: block;
}

.setup-playthrough-copy {
  display: grid;
  gap: 10px;
}

.setup-demo-screen {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(255, 228, 188, 0.42), transparent 34%),
    rgba(255, 250, 244, 0.96);
  border: 1px solid rgba(105, 73, 40, 0.12);
}

.setup-demo-screen-door {
  justify-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 247, 213, 0.62), transparent 24%),
    linear-gradient(180deg, rgba(26, 48, 69, 0.96) 0%, rgba(40, 73, 104, 0.96) 44%, rgba(109, 73, 49, 0.96) 44%, rgba(142, 101, 68, 0.98) 100%);
  color: #fff7eb;
}

.setup-demo-bubble {
  justify-self: stretch;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(17, 25, 39, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff7eb;
  line-height: 1.6;
}

.setup-demo-egg {
  width: min(100%, 180px);
}

.setup-demo-egg .egg-svg,
.setup-demo-home-art .egg-svg {
  width: 100%;
  display: block;
}

.setup-demo-note {
  justify-self: stretch;
  padding: 14px;
  border-radius: 20px;
  background: rgba(17, 25, 39, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.setup-demo-note .story-text {
  color: rgba(255, 247, 235, 0.88);
}

.setup-demo-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.setup-demo-chip-row .task-chip {
  color: #fff7eb;
  background: rgba(255, 248, 238, 0.16);
  border-color: rgba(255, 255, 255, 0.14);
}

.setup-demo-primary {
  justify-self: stretch;
}

.setup-demo-tabbar .tab-button {
  pointer-events: none;
}

.setup-demo-home-hero {
  display: grid;
  gap: 12px;
  align-items: center;
}

.setup-demo-home-copy {
  display: grid;
  gap: 8px;
}

.setup-demo-home-art {
  width: min(100%, 150px);
  margin: 0 auto;
}

.setup-demo-home-actions {
  display: grid;
  gap: 12px;
}

.setup-progress {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.setup-progress::-webkit-scrollbar {
  display: none;
}

.setup-progress-pill {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(105, 73, 40, 0.12);
  background: rgba(255, 247, 234, 0.76);
  color: var(--text-soft);
  font-size: 0.84rem;
  white-space: nowrap;
}

.setup-progress-pill.done {
  background: rgba(227, 246, 235, 0.92);
  color: #2f6a4b;
}

.setup-progress-pill.active {
  background: linear-gradient(135deg, #ffb168, #ff945f);
  color: #fffaf4;
  border-color: transparent;
}

.scene-illustration {
  position: relative;
  min-height: 220px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.7), transparent 26%),
    linear-gradient(180deg, #13273b 0%, #214161 44%, #66442e 44%, #7d5839 100%);
}

.scene-door {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 160px;
  height: 210px;
  transform: translateX(-50%);
  border-radius: 70px 70px 12px 12px;
  background: linear-gradient(180deg, #8a5b38 0%, #70482e 40%, #6a4027 100%);
  border: 6px solid rgba(242, 214, 180, 0.35);
  box-shadow: inset 0 0 0 1px rgba(42, 23, 6, 0.3);
}

.scene-door::before {
  content: "";
  position: absolute;
  left: 52%;
  top: 82px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f4d59a, #bb8442);
  box-shadow: 0 0 0 4px rgba(69, 39, 15, 0.18);
}

.scene-step {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 280px;
  height: 40px;
  transform: translateX(-50%);
  border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, #ad8f6c, #8b6d50);
}

.welcome-prelude-scene {
  min-height: 260px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 238, 191, 0.34), transparent 22%),
    linear-gradient(180deg, #1a3045 0%, #274664 42%, #6d4931 42%, #8e6544 100%);
}

.welcome-prelude-glow {
  position: absolute;
  left: 50%;
  top: 58px;
  width: 120px;
  height: 120px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 244, 202, 0.96) 0%, rgba(255, 206, 118, 0.74) 34%, rgba(255, 206, 118, 0) 72%);
  filter: blur(2px);
  opacity: 0.92;
}

.welcome-prelude-note {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 18px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(18, 25, 39, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff7eb;
  backdrop-filter: blur(8px);
}

.welcome-prelude-note .small-note {
  color: rgba(255, 247, 235, 0.88);
}

.welcome-prelude-body {
  border-radius: 22px;
}

.welcome-splash-shell {
  min-height: 100%;
  height: 100%;
}

.welcome-splash-scene {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 36%, rgba(255, 231, 165, 0.98), rgba(255, 231, 165, 0.36) 10%, transparent 30%),
    radial-gradient(circle at 68% 12%, rgba(129, 223, 255, 0.34), transparent 18%),
    radial-gradient(circle at 72% 16%, rgba(255, 210, 232, 0.26), transparent 14%),
    linear-gradient(180deg, #09162d 0%, #143158 24%, #33557d 48%, #a16e5d 76%, #f2d7c2 100%);
}

.welcome-splash-sky-ribbon {
  position: absolute;
  top: -4%;
  right: -12%;
  width: 88%;
  height: 42%;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.42), transparent 46%),
    repeating-radial-gradient(circle at 28% 72%, rgba(255, 255, 255, 0.44) 0 1px, transparent 1px 9px);
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.9;
  transform: rotate(14deg);
}

.welcome-splash-sky-ribbon::after {
  content: "";
  position: absolute;
  inset: 20% 4% 22% 22%;
  border-radius: 50%;
  border-top: 2px solid rgba(255, 252, 244, 0.6);
  border-right: 2px solid rgba(184, 242, 255, 0.42);
  transform: rotate(-8deg);
}

.welcome-splash-sun {
  position: absolute;
  left: 14%;
  top: 31%;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 252, 237, 1) 0%, rgba(255, 214, 130, 0.96) 38%, rgba(255, 214, 130, 0) 74%);
  box-shadow: 0 0 90px rgba(255, 224, 164, 0.36);
}

.welcome-splash-cloudbank {
  position: absolute;
  left: -12%;
  right: -12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 241, 231, 0.96), rgba(255, 219, 197, 0.72) 44%, rgba(255, 219, 197, 0) 74%);
  filter: blur(10px);
}

.welcome-splash-cloudbank-back {
  bottom: 22%;
  height: 180px;
  opacity: 0.7;
}

.welcome-splash-cloudbank-front {
  bottom: 8%;
  height: 230px;
  opacity: 0.96;
}

.welcome-splash-mountain {
  position: absolute;
  bottom: 12%;
  background: linear-gradient(180deg, rgba(48, 56, 75, 0.86), rgba(29, 26, 44, 0.96));
  clip-path: polygon(0% 100%, 12% 84%, 26% 52%, 42% 34%, 56% 48%, 70% 18%, 82% 42%, 100% 100%);
}

.welcome-splash-mountain-back {
  left: 56%;
  width: 42%;
  height: 220px;
  opacity: 0.78;
}

.welcome-splash-mountain-mid {
  left: 8%;
  width: 54%;
  height: 170px;
  opacity: 0.46;
  filter: blur(1px);
}

.welcome-splash-mountain-front {
  left: -8%;
  right: -8%;
  bottom: 0;
  height: 180px;
  background: linear-gradient(180deg, rgba(49, 49, 64, 0.4), rgba(33, 28, 41, 0.92));
  clip-path: polygon(0% 100%, 8% 70%, 18% 82%, 30% 54%, 43% 76%, 55% 48%, 67% 72%, 82% 38%, 92% 64%, 100% 100%);
}

.welcome-splash-sacred-tree {
  position: absolute;
  right: 18%;
  top: 21%;
  width: 92px;
  height: 300px;
}

.welcome-splash-tree-trunk {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 12px;
  height: 178px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #534972, #2e2742 44%, #8e5f49 100%);
  box-shadow: 0 0 18px rgba(178, 224, 255, 0.36);
}

.welcome-splash-tree-branch {
  position: absolute;
  bottom: 118px;
  width: 56px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(186, 210, 255, 0.76), rgba(255, 207, 171, 0.64));
  box-shadow: 0 0 12px rgba(183, 223, 255, 0.28);
}

.welcome-splash-tree-branch-left {
  left: 2px;
  transform: rotate(-8deg);
  transform-origin: right center;
}

.welcome-splash-tree-branch-right {
  right: 2px;
  transform: rotate(8deg);
  transform-origin: left center;
}

.welcome-splash-tree-crown {
  position: absolute;
  left: 50%;
  top: 0;
  width: 160px;
  height: 120px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 76%, rgba(189, 243, 255, 0.9), transparent 20%),
    radial-gradient(circle at 26% 34%, rgba(255, 198, 220, 0.78), transparent 26%),
    radial-gradient(circle at 72% 32%, rgba(255, 223, 185, 0.82), transparent 24%),
    radial-gradient(circle at 50% 22%, rgba(130, 235, 255, 0.88), rgba(130, 235, 255, 0.12) 34%, transparent 56%);
  filter: blur(1px);
}

.welcome-splash-glow {
  position: absolute;
  right: 18%;
  top: 44%;
  width: 120px;
  height: 120px;
  transform: translate(38%, 0);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.96) 0%, rgba(190, 236, 255, 0.82) 26%, rgba(190, 236, 255, 0) 72%);
  filter: blur(2px);
}

.welcome-splash-content {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: grid;
  align-content: space-between;
  padding:
    calc(18px + env(safe-area-inset-top, 0px))
    18px
    calc(24px + env(safe-area-inset-bottom, 0px));
}

.welcome-splash-brand {
  justify-self: start;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 247, 235, 0.16);
  border: 1px solid rgba(255, 247, 235, 0.22);
  color: #fff7eb;
  letter-spacing: 0.12em;
  font-family: var(--header-font);
  font-weight: 700;
  backdrop-filter: blur(10px);
}

.welcome-splash-copy-card {
  display: grid;
  gap: 14px;
  padding: 20px 18px 18px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(11, 20, 38, 0.18), rgba(11, 20, 38, 0.32)),
    rgba(255, 248, 239, 0.18);
  border: 1px solid rgba(255, 244, 232, 0.24);
  box-shadow: 0 18px 44px rgba(10, 13, 26, 0.22);
  backdrop-filter: blur(16px);
}

.welcome-splash-copy-card .mini-pill,
.welcome-splash-copy-card .task-chip {
  background: rgba(255, 248, 238, 0.16);
  border-color: rgba(255, 248, 238, 0.18);
  color: #fff7eb;
  box-shadow: none;
}

.welcome-splash-title {
  margin: 0;
  color: #fff8ee;
  font-family: var(--header-font);
  font-size: clamp(1.8rem, min(7vw, 1.88rem), 2.5rem);
  line-height: 1.08;
}

.welcome-splash-copy {
  margin: 0;
  color: rgba(255, 246, 236, 0.9);
  line-height: 1.75;
  font-size: 1rem;
}

.welcome-splash-habit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.welcome-splash-start {
  width: 100%;
  min-height: 56px;
  font-size: 1.08rem;
}

.egg-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.egg-card {
  padding: 16px 14px;
  border-radius: 22px;
  border: 1px solid rgba(108, 72, 37, 0.12);
  background: rgba(255, 248, 238, 0.9);
  display: grid;
  gap: 10px;
  text-align: center;
  position: relative;
}

.egg-card.selected {
  border-color: rgba(255, 147, 87, 0.6);
  box-shadow: 0 14px 24px rgba(240, 120, 70, 0.18);
}

.egg-card .egg-svg,
.pet-portrait .pet-svg {
  width: 100%;
  display: block;
}

.egg-card h4,
.pet-option-card h4,
.task-card h4 {
  margin: 0;
  font-family: var(--header-font);
}

.setup-grid,
.form-grid,
.modal-grid,
.parent-grid {
  display: grid;
  gap: 14px;
}

.setup-grid.two-col,
.parent-grid.two-col {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.mobile-single-card {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}

.soft-subcard {
  background: rgba(255, 248, 238, 0.72);
}

.child-egg-detail {
  align-items: stretch;
}

.field-group {
  display: grid;
  gap: 8px;
}

.field-label {
  font-weight: 700;
  color: var(--text);
}

.text-input,
.select-input,
.textarea-input {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(110, 76, 43, 0.14);
  background: rgba(255, 251, 245, 0.96);
  color: var(--text);
  padding: 14px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.textarea-input {
  min-height: 90px;
  resize: vertical;
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pet-stage-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.pet-portrait {
  margin-top: 6px;
  position: relative;
}

.pet-scene-floor {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 12px;
  height: 22px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(95, 71, 44, 0.16), transparent 72%);
}

.pet-hero-layout {
  display: grid;
  gap: 14px;
  align-items: center;
}

.pet-bond-panel {
  display: grid;
  gap: 12px;
}

.pet-bubble {
  padding: 16px 18px;
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(255, 229, 186, 0.48), transparent 34%),
    rgba(255, 248, 238, 0.94);
  border: 1px solid rgba(105, 73, 40, 0.12);
  color: var(--text);
  line-height: 1.7;
}

.pet-memory-grid {
  display: grid;
  gap: 10px;
}

.memory-card {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 250, 242, 0.9);
  border: 1px solid rgba(105, 73, 40, 0.1);
}

.memory-copy {
  margin: 8px 0 0;
  color: var(--text-soft);
  line-height: 1.65;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
  gap: 10px;
}

.stat-card {
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 249, 239, 0.76);
  border: 1px solid rgba(105, 73, 40, 0.1);
}

.stat-label {
  font-size: 0.84rem;
  color: var(--text-soft);
}

.stat-value {
  margin-top: 6px;
  font-size: 1.3rem;
  font-weight: 800;
  font-family: var(--header-font);
}

.task-section-header,
.section-header,
.list-header,
.archive-header,
.timeline-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.task-list,
.theme-list,
.child-list,
.guide-grid,
.goal-grid,
.secret-list,
.timeline-list,
.archive-list,
.pin-pad {
  display: grid;
  gap: 12px;
}

.guide-grid,
.goal-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.task-card {
  border-radius: 22px;
  background: rgba(255, 250, 242, 0.95);
  border: 1px solid rgba(102, 73, 42, 0.11);
}

.task-card.complete {
  border-color: rgba(77, 141, 107, 0.35);
  background: rgba(241, 253, 248, 0.92);
}

.task-card.locked {
  opacity: 0.78;
}

.task-card.missed {
  border-color: rgba(215, 101, 101, 0.34);
}

.task-topline {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.task-status {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  white-space: nowrap;
  background: rgba(255, 246, 233, 0.86);
  color: var(--text-soft);
}

.task-status.success {
  background: rgba(227, 246, 235, 0.95);
  color: #2f6a4b;
}

.task-status.warning {
  background: rgba(255, 239, 216, 0.95);
  color: #8c5c1f;
}

.task-status.danger {
  background: rgba(255, 230, 230, 0.95);
  color: #9b4747;
}

.task-actions,
.button-row,
.stack-buttons,
.inline-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.task-summary-list {
  display: grid;
  gap: 10px;
}

.task-summary-row {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255, 250, 242, 0.88);
  border: 1px solid rgba(105, 73, 40, 0.1);
}

.task-summary-main {
  display: grid;
  gap: 4px;
}

.task-summary-main strong {
  font-family: var(--header-font);
}

.button-row.end {
  justify-content: flex-end;
}

.home-shell,
.dormant-shell,
.panel-stack {
  display: grid;
  gap: 12px;
}

.home-shell {
  min-height: 0;
  grid-template-rows: auto 1fr;
}

.dormant-shell {
  min-height: 0;
}

.home-shell-header {
  display: grid;
  gap: 12px;
}

.screen-panel-scroll,
.parent-modal-scroll,
.story-scene {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.screen-panel-scroll::-webkit-scrollbar,
.parent-modal-scroll::-webkit-scrollbar,
.story-scene::-webkit-scrollbar,
.setup-progress::-webkit-scrollbar,
.parent-tabs::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.tab-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.tab-hint {
  display: block;
  font-size: 0.72rem;
  color: inherit;
  opacity: 0.78;
}

.task-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.task-switch-button {
  display: grid;
  gap: 4px;
  align-content: start;
  text-align: left;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 247, 234, 0.92);
  color: var(--text);
  border: 1px solid rgba(105, 73, 40, 0.12);
}

.task-switch-button.active {
  border-color: rgba(255, 145, 83, 0.5);
  box-shadow: 0 10px 20px rgba(240, 120, 70, 0.16);
  background: rgba(255, 252, 246, 0.98);
}

.task-switch-button.muted {
  opacity: 0.66;
}

.task-picker-meta {
  font-size: 0.76rem;
  color: var(--text-soft);
}

.parent-task-preview {
  display: grid;
  gap: 6px;
}

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

.theme-card,
.child-card,
.archive-item,
.timeline-item,
.setup-card {
  border-radius: 22px;
  border: 1px solid rgba(105, 73, 40, 0.11);
  background: rgba(255, 250, 242, 0.92);
}

.theme-card.selected,
.child-card.selected {
  border-color: rgba(255, 156, 94, 0.45);
  box-shadow: 0 14px 28px rgba(243, 137, 74, 0.18);
}

.theme-card,
.child-card {
  padding: 16px;
}

.plan-card,
.mission-card {
  position: relative;
  cursor: pointer;
}

.plan-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.plan-card-copy {
  display: grid;
  gap: 6px;
}

.child-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.child-avatar {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff8ef;
  font-weight: 800;
  box-shadow: inset 0 -6px 14px rgba(0, 0, 0, 0.1);
}

.secret-grid {
  display: grid;
  gap: 12px;
}

.secret-card {
  border-radius: 20px;
  background:
    radial-gradient(circle at top right, rgba(255, 229, 186, 0.58), transparent 35%),
    rgba(255, 249, 238, 0.96);
  border: 1px solid rgba(102, 73, 42, 0.12);
  padding: 18px;
}

.progress-bar {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: rgba(116, 82, 48, 0.1);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #7dcbb1, #ffb261);
}

.overlay,
.modal-shell {
  position: fixed;
  inset: 0;
  z-index: 90;
}

.overlay {
  background: rgba(42, 26, 11, 0.34);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  padding: 12px;
  overflow: hidden;
}

.modal-card {
  max-width: 430px;
  width: min(100%, 430px);
  background: rgba(255, 249, 240, 0.98);
  max-height: calc(100dvh - 24px);
  overflow: auto;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 120;
  max-width: min(92vw, 540px);
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(47, 36, 24, 0.9);
  color: #fff7ef;
  box-shadow: 0 14px 28px rgba(29, 19, 7, 0.26);
}

.celebration-card {
  text-align: center;
  display: grid;
  gap: 14px;
}

.celebration-pet {
  width: min(72vw, 320px);
  margin: 0 auto;
}

.pin-shell {
  max-width: 420px;
}

.guide-shell {
  max-width: 680px;
  width: min(100%, 680px);
}

.egg-energy-overlay {
  padding: 0;
  background: #070a10;
  backdrop-filter: none;
  place-items: stretch center;
}

.egg-dialog-shell {
  max-width: 430px;
  width: min(100%, 430px);
}

.egg-dialog-immersive {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  border-radius: 0;
  background: #070a10;
  box-shadow: none;
}

.egg-energy-world {
  position: relative;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

.egg-energy-world::before,
.egg-energy-world::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.egg-energy-world::before {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(3, 5, 10, 0.44), rgba(3, 5, 10, 0) 34%),
    linear-gradient(0deg, rgba(3, 5, 10, 0.58), rgba(3, 5, 10, 0) 34%);
}

.egg-energy-world::after {
  z-index: 3;
  bottom: auto;
  height: var(--phoenix-speaking-highlight-start);
  background:
    linear-gradient(180deg, rgba(3, 5, 10, 0.68), rgba(3, 5, 10, 0.42) 58%, rgba(3, 5, 10, 0.14));
  -webkit-backdrop-filter: blur(3px) saturate(0.9);
  backdrop-filter: blur(3px) saturate(0.9);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
}

.egg-energy-art {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.egg-energy-art .asset-pet-container,
.egg-energy-art .asset-pet-art {
  width: 100%;
  height: 100%;
}

.egg-energy-art .asset-pet-art {
  aspect-ratio: auto;
  transform: scale(0.92);
  transform-origin: center;
}

.egg-energy-art .asset-base-img,
.egg-energy-art .asset-base-layer .pet-svg,
.egg-energy-art .asset-base-layer .egg-svg {
  object-fit: cover;
  object-position: center;
  filter: none;
}

.egg-energy-art .asset-speech-bubble {
  display: none;
}

.egg-energy-art .asset-energy-orb,
.egg-energy-art .asset-energy-body-fill,
.egg-energy-art .asset-energy-contact-flash {
  display: none;
}

.egg-energy-success-effect {
  --egg-energy-target-x: 50%;
  --egg-energy-target-y: 63%;
  --egg-energy-meteor-start-y: -14%;
  --egg-energy-meteor-tail-h: clamp(210px, 52dvh, 390px);
  --egg-energy-ellipse-w: clamp(180px, 48vw, 244px);
  --egg-energy-ellipse-h: clamp(270px, 72vw, 372px);
  --energy-after-impact-delay: 1.68s;
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.phoenix-egg-fire-canvas-effect {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: normal;
  animation: phoenix-egg-fire-canvas-visibility 2.65s ease-out both;
}

.mythic-energy-absorb-overlay .phoenix-egg-fire-canvas-effect {
  z-index: 10;
}

.phoenix-egg-fire-canvas-effect canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.phoenix-rebirth-fire-canvas-effect {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: normal;
  animation: phoenix-rebirth-fire-canvas-visibility 3.86s cubic-bezier(0.2, 0.78, 0.12, 1) both;
}

.phoenix-rebirth-fire-canvas-effect canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.egg-energy-confirm-trail,
.egg-energy-confirm-orb,
.egg-energy-confirm-spark,
.egg-energy-egg-ellipse-fill,
.egg-energy-egg-ellipse-rim,
.egg-energy-egg-core-flare {
  position: absolute;
  pointer-events: none;
}

.egg-energy-confirm-trail {
  left: var(--egg-energy-target-x);
  top: var(--egg-energy-meteor-start-y);
  width: clamp(5px, 1.35vw, 9px);
  height: var(--egg-energy-meteor-tail-h);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 255, 244, 0.98) 0 10%, rgba(255, 231, 96, 0.78) 24%, rgba(255, 151, 36, 0.28) 52%, rgba(255, 118, 30, 0) 78%),
    linear-gradient(180deg, rgba(255, 198, 48, 0) 0%, rgba(255, 214, 72, 0.08) 34%, rgba(255, 239, 143, 0.34) 76%, rgba(255, 255, 241, 0.9) 100%);
  box-shadow:
    0 0 8px rgba(255, 255, 226, 0.76),
    0 0 20px rgba(255, 189, 48, 0.48),
    0 0 46px rgba(255, 113, 24, 0.2);
  opacity: 0;
  transform: translate(-50%, -100%) scaleY(0.34);
  transform-origin: 50% 100%;
  animation: egg-energy-confirm-trail-flight 2.05s cubic-bezier(0.22, 0.72, 0.14, 1) both;
}

.mythic-energy-absorb-overlay .egg-energy-confirm-trail,
.mythic-energy-absorb-overlay .egg-energy-confirm-orb {
  display: none;
}

.egg-energy-confirm-orb {
  left: var(--egg-energy-target-x);
  top: var(--egg-energy-meteor-start-y);
  width: clamp(46px, 13vw, 76px);
  height: clamp(46px, 13vw, 76px);
  border-radius: 58% 42% 62% 38% / 44% 64% 36% 56%;
  background:
    radial-gradient(circle at 46% 40%, rgba(255, 255, 250, 0.98) 0 8%, rgba(255, 245, 177, 0.78) 13%, transparent 23%),
    conic-gradient(from 24deg at 50% 52%, rgba(255, 250, 187, 0.9) 0 9%, rgba(255, 190, 44, 0.52) 14% 22%, transparent 28% 38%, rgba(255, 128, 28, 0.58) 45% 54%, transparent 60% 73%, rgba(255, 244, 139, 0.74) 80% 90%, transparent 96% 100%),
    radial-gradient(ellipse at 50% 56%, rgba(255, 218, 72, 0.76) 0 30%, rgba(255, 124, 28, 0.36) 52%, rgba(255, 76, 18, 0) 76%);
  box-shadow:
    0 0 16px rgba(255, 255, 235, 0.96),
    0 0 46px rgba(255, 215, 62, 0.9),
    0 0 96px rgba(255, 116, 24, 0.64),
    inset 0 0 10px rgba(255, 255, 255, 0.84),
    inset 0 0 28px rgba(255, 123, 24, 0.34);
  filter: saturate(1.24) contrast(1.08);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  animation: egg-energy-confirm-orb-flight 2.05s cubic-bezier(0.22, 0.72, 0.14, 1) both;
}

.egg-energy-confirm-orb::before {
  content: "";
  position: absolute;
  inset: -42%;
  border-radius: inherit;
  background:
    conic-gradient(from 20deg, transparent 0 12%, rgba(255, 249, 173, 0.72) 18%, transparent 28% 48%, rgba(255, 136, 32, 0.62) 56%, transparent 68% 82%, rgba(255, 230, 92, 0.5) 88%, transparent 96% 100%),
    radial-gradient(circle at 50% 50%, rgba(255, 228, 85, 0.22), transparent 62%);
  filter: blur(3px);
  opacity: 0.92;
  animation: egg-energy-confirm-spin 1.28s linear infinite;
}

.egg-energy-confirm-orb::after {
  content: "";
  position: absolute;
  inset: -26% -42%;
  border-radius: 52% 48% 58% 42% / 50% 60% 40% 50%;
  background:
    linear-gradient(112deg, transparent 0 33%, rgba(255, 246, 169, 0.56) 45%, transparent 58% 100%),
    linear-gradient(248deg, transparent 0 42%, rgba(255, 132, 31, 0.42) 52%, transparent 65% 100%);
  filter: blur(4px);
  opacity: 0.78;
  mix-blend-mode: screen;
  animation: egg-energy-confirm-spin 2.1s linear infinite reverse;
}

.egg-energy-confirm-spark {
  left: var(--egg-energy-target-x);
  top: var(--egg-energy-target-y);
  --spark-x: -36px;
  --spark-y: -24px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff 0 18%, #ffef90 46%, rgba(255, 120, 28, 0) 76%);
  box-shadow:
    0 0 18px rgba(255, 255, 232, 0.82),
    0 0 32px rgba(255, 194, 48, 0.68);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  animation: egg-energy-confirm-spark-flight 1.1s cubic-bezier(0.2, 0.72, 0.18, 1) calc(var(--energy-after-impact-delay) - 0.12s) both;
}

.egg-energy-confirm-spark-b {
  --spark-x: 42px;
  --spark-y: 16px;
  width: 11px;
  height: 11px;
  animation-delay: var(--energy-after-impact-delay);
}

.egg-energy-egg-ellipse-fill,
.egg-energy-egg-ellipse-rim {
  left: var(--egg-energy-target-x);
  top: var(--egg-energy-target-y);
  width: var(--egg-energy-ellipse-w);
  height: var(--egg-energy-ellipse-h);
  border-radius: 50% / 54%;
  transform: translate(-50%, -50%) scale(0.08);
  transform-origin: 50% 50%;
  opacity: 0;
  clip-path: ellipse(50% 50% at 50% 50%);
}

.egg-energy-egg-ellipse-fill {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255, 255, 244, 0.96) 0 10%, rgba(255, 230, 83, 0.7) 22%, rgba(255, 131, 35, 0.42) 50%, rgba(255, 65, 18, 0.2) 72%, rgba(255, 65, 18, 0) 88%);
  box-shadow:
    0 0 38px rgba(255, 244, 172, 0.78),
    0 0 86px rgba(255, 126, 30, 0.62),
    inset 0 0 48px rgba(255, 250, 196, 0.52);
  filter: saturate(1.25);
  animation: egg-energy-ellipse-fill 3.25s ease-out var(--energy-after-impact-delay) both;
}

.egg-energy-egg-ellipse-rim {
  border: 4px solid rgba(255, 226, 117, 0.88);
  box-shadow:
    0 0 26px rgba(255, 246, 178, 0.92),
    0 0 58px rgba(255, 154, 38, 0.68),
    inset 0 0 32px rgba(255, 235, 112, 0.46);
  animation: egg-energy-ellipse-rim 2.6s ease-out var(--energy-after-impact-delay) both;
}

.egg-energy-egg-core-flare {
  left: var(--egg-energy-target-x);
  top: var(--egg-energy-target-y);
  width: clamp(54px, 16vw, 88px);
  height: clamp(54px, 16vw, 88px);
  border-radius: 999px;
  background:
    radial-gradient(circle, #fff 0 14%, #fff4a8 36%, rgba(255, 126, 30, 0.66) 64%, transparent 78%);
  box-shadow:
    0 0 24px rgba(255, 255, 236, 0.94),
    0 0 64px rgba(255, 196, 45, 0.78);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.32);
  animation: egg-energy-core-flare 1.55s ease-out calc(var(--energy-after-impact-delay) - 0.08s) both;
}

.egg-energy-prompt-stack {
  position: absolute;
  top: var(--phoenix-speaking-dialogue-top);
  left: 50%;
  width: min(76%, 340px);
  z-index: 5;
  display: grid;
  gap: clamp(8px, 1dvh, 10px);
  pointer-events: none;
  transform: translateX(-50%);
}

.egg-energy-dialogue {
  position: relative;
  width: 100%;
  pointer-events: none;
}

.egg-energy-dialogue::before {
  content: "";
  position: absolute;
  inset: clamp(-6px, -1.4vw, -4px) clamp(-18px, -4.5vw, -12px);
  z-index: -1;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 183, 82, 0.24), transparent 62%),
    linear-gradient(180deg, rgba(23, 14, 10, 0.74), rgba(6, 8, 14, 0.56));
  border: 1px solid rgba(255, 179, 91, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 197, 0.14),
    0 12px 28px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(255, 116, 36, 0.16);
  backdrop-filter: blur(12px);
}

.egg-energy-dialogue::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: clamp(-10px, -2vw, -7px);
  z-index: -2;
  width: 38%;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(ellipse, rgba(255, 174, 73, 0.28), transparent 72%);
  filter: blur(8px);
  transform: translateX(-50%);
}

.egg-energy-dialogue p {
  margin: 0;
  max-width: none;
  color: #fff8ed;
  font-family: var(--header-font);
  font-size: clamp(1.18rem, min(4.8vw, 1.29rem), 1.52rem);
  font-weight: 850;
  line-height: 1.18;
  text-align: center;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.76),
    0 12px 28px rgba(0, 0, 0, 0.46);
  animation: child-egg-dialogue-in 280ms ease both;
}

.egg-energy-dialogue-text {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 1.55em;
  white-space: normal;
}

.egg-energy-dialogue-phrase {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.egg-energy-dialogue-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em) scale(0.96);
  filter: blur(4px);
  animation: egg-energy-dialogue-char-in 420ms cubic-bezier(0.2, 0.72, 0.2, 1) forwards;
  animation-delay: var(--char-delay, 0ms);
  will-change: opacity, transform, filter;
}

.egg-energy-dialogue-text.is-settled {
  animation: none;
}

.egg-energy-dialogue-phrase.is-settled .egg-energy-dialogue-char {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .mythic-energy-descend,
  .mythic-energy-absorb-overlay .egg-energy-success-effect {
    display: none;
  }

  .mythic-creature-stage.is-stage-upgrading .mythic-creature-shell.is-upgrade-before {
    opacity: 0;
    animation: none;
  }

  .mythic-creature-stage.is-stage-upgrading .mythic-creature-shell.is-upgrade-after {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }

  .mythic-stage-upgrade-light {
    display: none;
  }

  .egg-energy-dialogue-char {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
}

.egg-dialog-actions {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-self: center;
  width: clamp(92px, 24vw, 168px);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: auto;
}

.egg-dialog-choice {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.79rem;
  font-weight: 850;
  color: rgba(255, 246, 229, 0.92);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 154, 81, 0.18), transparent 56%),
    linear-gradient(180deg, rgba(36, 27, 21, 0.82), rgba(11, 12, 14, 0.82));
  border: 1px solid rgba(255, 170, 105, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 178, 0.14),
    0 5px 10px rgba(0, 0, 0, 0.3);
  text-shadow: 0 0 7px rgba(255, 145, 64, 0.28);
}

.egg-dialog-choice > span {
  display: inline-block;
  font-size: 1.58rem;
  line-height: 1;
  transform: translateY(-1px);
}

.egg-dialog-choice-yes {
  color: rgba(255, 218, 159, 0.96);
  border-color: rgba(255, 186, 95, 0.34);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 154, 81, 0.24), transparent 58%),
    linear-gradient(180deg, rgba(42, 31, 21, 0.86), rgba(12, 13, 15, 0.84));
}

.egg-dialog-actions-completion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4vw, 22px);
  width: min(76vw, 340px);
}

.egg-dialog-actions-completion .egg-dialog-choice {
  width: clamp(92px, 24vw, 168px);
  min-height: 34px;
}

.egg-dialog-actions-completion .egg-dialog-choice > span {
  font-size: 1.58rem;
  transform: translateY(-1px);
}

.egg-dialog-actions-completion .egg-dialog-choice-no {
  color: rgba(255, 233, 220, 0.95);
  border-color: rgba(255, 156, 120, 0.34);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 127, 97, 0.22), transparent 58%),
    linear-gradient(180deg, rgba(42, 28, 24, 0.86), rgba(12, 13, 15, 0.84));
}

.egg-dialog-choice:active {
  transform: translateY(1px) scale(0.99);
}

.task-confirm-overlay {
  background: rgba(3, 5, 10, 0.62);
  backdrop-filter: blur(8px);
}

.task-confirm-dialog {
  width: min(84vw, 360px);
  display: grid;
  gap: 18px;
  justify-items: center;
  padding: 24px 22px 22px;
  border-radius: 22px;
  color: rgba(255, 246, 231, 0.96);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 151, 71, 0.2), transparent 52%),
    linear-gradient(180deg, rgba(31, 21, 16, 0.92), rgba(6, 8, 12, 0.9));
  border: 1px solid rgba(255, 175, 91, 0.28);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 225, 178, 0.14);
}

.task-confirm-copy {
  margin: 0;
  color: rgba(255, 248, 236, 0.98);
  font-family: var(--header-font);
  font-size: clamp(1.25rem, min(5vw, 1.34rem), 1.7rem);
  font-weight: 900;
  line-height: 1.28;
  text-align: center;
  text-shadow: 0 2px 16px rgba(255, 126, 49, 0.18);
}

.task-confirm-actions {
  width: min(100%, 260px);
}

.return-prep-feedback span {
  white-space: pre-line;
}

.return-prep-intro-overlay {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 118, 45, 0.16), transparent 34%),
    rgba(4, 5, 9, 0.42);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.return-prep-intro-shell {
  background: transparent;
}

.return-prep-intro-world {
  background: transparent;
}

.return-prep-intro-world::before {
  background:
    linear-gradient(180deg, rgba(3, 5, 10, 0.38), rgba(3, 5, 10, 0.08) 36%),
    linear-gradient(0deg, rgba(3, 5, 10, 0.5), rgba(3, 5, 10, 0.04) 42%);
}

.return-prep-intro-world::after {
  height: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.return-prep-intro-prompt-stack {
  top: 50%;
  transform: translate(-50%, -50%);
}

.return-prep-intro-actions {
  margin-top: 4px;
}

.guide-modal-art {
  width: min(72vw, 320px);
  margin: 0 auto;
}

.guide-modal-art .egg-svg,
.guide-modal-art .pet-svg {
  width: 100%;
  display: block;
}

.pin-display {
  letter-spacing: 0.35em;
  font-size: 1.5rem;
  font-family: var(--header-font);
  text-align: center;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 252, 246, 0.96);
  border: 1px solid rgba(105, 73, 40, 0.12);
}

.pin-pad {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pin-key {
  min-height: 58px;
  border-radius: 18px;
  background: rgba(255, 247, 234, 0.92);
  border: 1px solid rgba(106, 73, 41, 0.12);
  font-size: 1.1rem;
  color: var(--text);
}

.pin-overlay {
  place-items: end center;
  padding:
    calc(18px + env(safe-area-inset-top, 0px))
    14px
    calc(18px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(circle at 50% 78%, rgba(255, 116, 42, 0.18), transparent 32%),
    radial-gradient(circle at 50% 18%, rgba(255, 194, 101, 0.12), transparent 30%),
    rgba(5, 4, 5, 0.7);
  backdrop-filter: blur(18px) saturate(1.12);
}

.pin-overlay .pin-shell {
  position: relative;
  width: min(100%, 430px);
  max-width: 430px;
  padding: 68px 22px 22px;
  overflow: hidden;
  isolation: isolate;
  color: rgba(255, 240, 214, 0.95);
  background:
    radial-gradient(circle at 50% -8%, rgba(255, 151, 62, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(25, 16, 13, 0.86), rgba(7, 7, 9, 0.82));
  border: 1px solid rgba(255, 157, 82, 0.22);
  border-radius: 34px;
  box-shadow:
    0 26px 58px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 223, 177, 0.12);
}

.pin-overlay .pin-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 36%),
    radial-gradient(circle at 82% 18%, rgba(255, 203, 123, 0.11), transparent 24%);
  pointer-events: none;
}

.pin-close-button {
  position: absolute;
  top: 18px;
  right: 18px;
  color: rgba(255, 223, 186, 0.9);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 156, 76, 0.18), transparent 58%),
    rgba(16, 11, 10, 0.56);
  border-color: rgba(255, 166, 91, 0.24);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(12px);
}

.pin-close-button svg,
.pin-submit-button svg {
  width: 22px;
  height: 22px;
  display: block;
}

.pin-overlay .pin-display {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.36em;
  color: rgba(255, 231, 192, 0.9);
  background:
    linear-gradient(180deg, rgba(8, 8, 10, 0.64), rgba(20, 12, 9, 0.54));
  border: 1px solid rgba(255, 166, 91, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 226, 184, 0.1),
    0 14px 28px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
}

.pin-overlay .pin-pad {
  gap: 10px;
}

.pin-overlay .pin-key {
  min-height: 62px;
  color: rgba(255, 235, 207, 0.94);
  font-size: 1.28rem;
  font-weight: 800;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 154, 81, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(31, 21, 17, 0.78), rgba(11, 11, 13, 0.72));
  border: 1px solid rgba(255, 166, 91, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 223, 177, 0.1),
    0 10px 22px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
}

.pin-overlay .pin-key:is([data-action="pin-clear"], [data-action="pin-back"]) {
  font-size: 1rem;
  color: rgba(255, 219, 182, 0.92);
}

.pin-overlay .pin-key:active,
.pin-submit-button:active,
.pin-close-button:active {
  transform: translateY(1px) scale(0.99);
}

.pin-submit-button {
  width: 74px;
  min-height: 56px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 247, 232, 0.98);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 207, 120, 0.42), transparent 62%),
    linear-gradient(180deg, rgba(119, 68, 29, 0.94), rgba(41, 23, 16, 0.92));
  border: 1px solid rgba(255, 202, 118, 0.48);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 240, 197, 0.18);
}

.parent-shell {
  max-width: 430px;
  width: min(100%, 430px);
  max-height: calc(100dvh - 24px);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

.parent-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow: auto;
  padding-bottom: 2px;
}

.tab-button {
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 247, 234, 0.92);
  color: var(--text-soft);
  border: 1px solid rgba(105, 73, 40, 0.12);
  display: grid;
  gap: 4px;
  align-content: center;
  flex: 0 0 104px;
  text-align: left;
}

.tab-button.active {
  background: linear-gradient(135deg, #ffb168, #ff945f);
  color: #fffaf4;
}

.parent-overlay {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 178, 88, 0.14), transparent 28%),
    radial-gradient(circle at 50% 88%, rgba(255, 105, 42, 0.14), transparent 32%),
    rgba(5, 4, 5, 0.72);
  backdrop-filter: blur(18px) saturate(1.08);
}

.parent-overlay .parent-shell {
  color: rgba(255, 238, 211, 0.94);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 143, 63, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(25, 16, 13, 0.9), rgba(8, 8, 10, 0.86));
  border: 1px solid rgba(255, 158, 76, 0.22);
  box-shadow:
    0 26px 58px rgba(0, 0, 0, 0.54),
    inset 0 1px 0 rgba(255, 229, 184, 0.12);
}

.parent-overlay :is(.modal-title, .section-title, .stat-value, .task-summary-main strong) {
  color: rgba(255, 248, 236, 0.98);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.34);
}

.parent-overlay :is(.story-text, .small-note, .field-help, .fine-print, .task-picker-meta, .memory-copy, .stat-label) {
  color: rgba(255, 230, 202, 0.76);
}

.parent-overlay :is(.mini-pill, .section-card, .secret-card, .task-card, .theme-card, .child-card, .archive-item, .timeline-item, .stat-card, .memory-card, .task-summary-row, .pet-bubble) {
  color: rgba(255, 237, 210, 0.94);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 154, 81, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(26, 18, 15, 0.7), rgba(10, 10, 12, 0.58));
  border-color: rgba(255, 158, 76, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 229, 184, 0.08),
    0 14px 28px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
}

.parent-overlay :is(.ghost-button, .icon-button, .tab-button, .task-switch-button, .page-preview-chip) {
  color: rgba(255, 231, 202, 0.9);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 154, 81, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(30, 20, 16, 0.74), rgba(11, 11, 13, 0.66));
  border-color: rgba(255, 166, 91, 0.2);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}

.parent-overlay :is(.primary-button, .secondary-button, .tab-button.active, .task-switch-button.active) {
  color: rgba(255, 248, 236, 0.98);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 209, 119, 0.34), transparent 62%),
    linear-gradient(180deg, rgba(112, 62, 26, 0.92), rgba(42, 23, 16, 0.86));
  border: 1px solid rgba(255, 196, 105, 0.38);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 239, 198, 0.14);
}

.parent-overlay :is(.text-input, .select-input, .textarea-input) {
  color: rgba(255, 241, 220, 0.94);
  background: rgba(8, 8, 10, 0.58);
  border-color: rgba(255, 166, 91, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 226, 184, 0.08);
}

.parent-overlay :is(.text-input, .select-input, .textarea-input)::placeholder {
  color: rgba(255, 226, 196, 0.42);
}

.empty-state {
  text-align: center;
  padding: 26px 20px;
  color: var(--text-soft);
  border: 1px dashed rgba(110, 76, 43, 0.22);
  border-radius: 18px;
}

.fine-print {
  font-size: 0.82rem;
  color: rgba(105, 81, 59, 0.9);
}

.link-button {
  background: transparent;
  padding: 0;
  color: #a4622d;
  font-weight: 700;
}

.task-time-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.switch {
  position: relative;
  width: 54px;
  height: 30px;
  border-radius: 999px;
  background: rgba(108, 77, 44, 0.18);
}

.switch::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fffdf7;
  box-shadow: 0 4px 10px rgba(66, 43, 19, 0.14);
  transition: transform 160ms ease;
}

.switch.on {
  background: linear-gradient(135deg, #ffb168, #ff945f);
}

.switch.on::after {
  transform: translateX(24px);
}

.stage-track {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stage-pill {
  flex: 1 1 84px;
  padding: 10px 8px;
  border-radius: 16px;
  background: rgba(255, 249, 238, 0.86);
  border: 1px solid rgba(105, 73, 40, 0.1);
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-soft);
}

.stage-pill.active {
  background: linear-gradient(135deg, rgba(127, 200, 178, 0.22), rgba(255, 177, 104, 0.32));
  color: var(--text);
  border-color: rgba(255, 154, 88, 0.42);
}

.stage-pill.unknown {
  border-style: dashed;
  color: rgba(105, 81, 59, 0.6);
  background: rgba(255, 250, 242, 0.52);
}

.preview-link-button {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.page-preview-shell {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 12px;
}

.page-preview-header {
  display: grid;
  gap: 16px;
}

.page-preview-header-copy {
  display: grid;
  gap: 10px;
}

.page-preview-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page-preview-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page-preview-group {
  padding: 16px;
}

.page-preview-chip-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-top: 12px;
  scrollbar-width: none;
}

.page-preview-chip-list::-webkit-scrollbar {
  display: none;
}

.page-preview-chip {
  flex: 0 0 auto;
  min-height: 50px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(105, 73, 40, 0.12);
  background: rgba(255, 247, 234, 0.92);
  color: var(--text-soft);
  text-align: left;
  display: grid;
  align-content: center;
}

.page-preview-chip.active {
  background: linear-gradient(135deg, #ffb168, #ff945f);
  color: #fffaf4;
  border-color: transparent;
}

.page-preview-stage {
  min-height: 0;
  overflow: hidden;
}

.page-preview-canvas {
  height: 100%;
  min-height: 0;
  border-radius: 30px;
  padding: 10px;
  background:
    radial-gradient(circle at top, rgba(255, 242, 216, 0.6), transparent 26%),
    rgba(255, 250, 243, 0.74);
  border: 1px solid rgba(110, 76, 43, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.page-preview-stage-frame {
  height: 100%;
  margin: 0 auto;
  pointer-events: auto;
  position: relative;
}

.page-preview-stage-frame .overlay {
  position: absolute;
  inset: 0;
  padding:
    calc(10px + env(safe-area-inset-top, 0px))
    12px
    calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 6;
}

.page-preview-stage-frame .toast {
  position: absolute;
}

.page-preview-stage-frame .modal-card,
.page-preview-stage-frame .parent-shell {
  max-height: calc(100% - 24px);
}

.page-preview-root {
  min-height: 100dvh;
}

.page-preview-stage-shell {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

.page-preview-root .page-preview-stage-shell {
  padding-bottom: calc(200px + env(safe-area-inset-bottom, 0px));
}

.page-preview-root .setup-goal-panel .setup-goal-picker-wrap {
  padding-bottom: calc(270px + env(safe-area-inset-bottom, 0px));
}

.page-preview-root .setup-goal-panel .setup-simple-actions {
  bottom: calc(188px + env(safe-area-inset-bottom, 0px));
  z-index: 110;
}

.page-preview-dock {
  position: fixed;
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(calc(100vw - 20px), 430px);
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px;
  border-radius: 22px;
  background: rgba(255, 248, 239, 0.9);
  border: 1px solid rgba(110, 76, 43, 0.14);
  box-shadow: 0 18px 32px rgba(58, 38, 15, 0.16);
  backdrop-filter: blur(14px);
  z-index: 95;
}

.page-preview-current {
  min-width: 0;
  padding: 0 2px;
}

.page-preview-current-index {
  font-size: 0.72rem;
  color: var(--text-soft);
}

.page-preview-current-label {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-preview-picker-overlay {
  z-index: 140;
}

.page-preview-picker-card {
  max-width: 430px;
  width: min(100%, 430px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
}

.page-preview-picker-groups {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.page-preview-picker-group {
  display: grid;
  gap: 12px;
}

.page-preview-picker-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.page-preview-picker-item {
  min-height: 54px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(105, 73, 40, 0.12);
  background: rgba(255, 247, 234, 0.92);
  color: var(--text-soft);
  text-align: left;
}

.page-preview-picker-item.active {
  background: linear-gradient(135deg, #ffb168, #ff945f);
  color: #fffaf4;
  border-color: transparent;
}

.mvp-review-panel {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  width: min(420px, calc(100vw - 36px));
  padding: 12px;
  border: 1px solid rgba(255, 226, 176, 0.34);
  border-radius: 16px;
  background: rgba(28, 18, 12, 0.88);
  color: #fff7e9;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(16px);
}

.mvp-review-panel-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  min-width: 72px;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 226, 176, 0.46);
  border-radius: 999px;
  background: rgba(36, 22, 13, 0.86);
  color: #ffe3a7;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(14px);
  cursor: pointer;
}

.mvp-review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.8rem;
  color: rgba(255, 247, 233, 0.78);
}

.mvp-review-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.mvp-review-title strong {
  color: #ffd48a;
  font-size: 0.82rem;
  line-height: 1.2;
}

.mvp-review-hide-button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 226, 176, 0.36);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff0d5;
  font-size: 0.74rem;
  cursor: pointer;
}

.mvp-review-hint {
  margin: -2px 0 10px;
  color: rgba(255, 247, 233, 0.72);
  font-size: 0.76rem;
  line-height: 1.45;
}

.mvp-stage-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.mvp-stage-button {
  min-width: 0;
  min-height: 56px;
  padding: 7px 4px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff7e9;
  cursor: pointer;
}

.mvp-stage-button strong,
.mvp-stage-button span {
  display: block;
}

.mvp-stage-button strong {
  font-size: 1rem;
  line-height: 1;
}

.mvp-stage-button span {
  margin-top: 5px;
  font-size: 0.62rem;
  line-height: 1.15;
}

.mvp-stage-button.active,
.mvp-tier-button.active,
.mvp-review-action.active {
  border-color: rgba(255, 193, 101, 0.86);
  background: rgba(255, 164, 74, 0.24);
  color: #fff0d5;
}

.mvp-tier-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.mvp-tier-button {
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff7e9;
  cursor: pointer;
  font-size: 0.78rem;
}

.mvp-review-actions {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 8px;
  margin-top: 10px;
}

.mvp-review-action {
  width: 100%;
  justify-content: center;
  min-height: 38px;
}

.mvp-review-empty {
  margin: 0 0 10px;
  color: rgba(255, 247, 233, 0.78);
  font-size: 0.86rem;
}

@media (min-width: 900px) {
  .grid-hero {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .hero-layout {
    grid-template-columns: 1.25fr 0.75fr;
  }

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

  .intro-hero-card {
    grid-template-columns: minmax(240px, 300px) 1fr;
  }

  .setup-playthrough-hero {
    grid-template-columns: minmax(160px, 200px) 1fr;
  }

  .setup-demo-home-hero,
  .pet-hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(140px, 180px);
  }

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

@media (max-width: 699px) {
  .mvp-review-panel {
    right: 10px;
    bottom: 76px;
    width: calc(100vw - 20px);
    padding: 10px;
  }

  .mvp-review-panel-toggle {
    right: 12px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 108px);
    min-width: 64px;
    min-height: 34px;
    padding: 7px 12px;
    font-size: 0.78rem;
  }

  .mvp-review-header {
    align-items: flex-start;
  }

  .mvp-stage-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mvp-stage-button {
    min-height: 44px;
  }

  .mvp-stage-button span {
    display: none;
  }

  .mvp-review-actions {
    grid-template-columns: 1fr;
  }

  .story-card,
  .pet-card,
  .section-card,
  .setup-card,
  .task-card,
  .timeline-card,
  .archive-card,
  .modal-card {
    padding: 18px;
  }

  .field-row,
  .task-time-inputs {
    grid-template-columns: 1fr;
  }

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

  .intro-scene-illustration {
    min-height: 180px;
    padding: 14px 10px 10px;
  }

  .welcome-prelude-scene {
    min-height: 220px;
  }

  .welcome-splash-sun {
    top: 33%;
    width: 84px;
    height: 84px;
  }

  .welcome-splash-sacred-tree {
    right: 14%;
    top: 23%;
    width: 80px;
    height: 270px;
  }

  .welcome-splash-tree-crown {
    width: 136px;
    height: 104px;
  }

  .welcome-splash-copy-card {
    padding: 18px 16px 16px;
  }

  .welcome-splash-title {
    font-size: clamp(1.65rem, min(8vw, 2.15rem), 2.1rem);
  }

  .welcome-prelude-glow {
    top: 52px;
    width: 102px;
    height: 102px;
  }

  .intro-egg-grid {
    gap: 6px;
  }

  .lifecycle-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .page-preview-dock {
    grid-template-columns: repeat(4, auto) 1fr;
  }

  .page-preview-picker-list {
    grid-template-columns: 1fr;
  }

  .task-switcher {
    grid-template-columns: 1fr;
  }
}

/* Final-user setup flow overrides. The early prototype used fixed-height
   preview shells; real phones need the whole setup path to scroll naturally. */
html,
body {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
}

body,
.app-shell,
.shell-frame,
.shell-frame-immersive {
  min-height: 100dvh;
  height: auto;
}

.app-shell,
.shell-frame,
.screen-body,
.screen-body-immersive,
.onboarding-shell {
  overflow: visible;
}

.screen-body-immersive {
  display: block;
}

/* Child home tabs are artwork-first: the phoenix egg image should fill the phone,
   with controls anchored to the visible screen instead of sitting in a floating card. */
.shell-frame-no-topbar[class*="shell-frame-child-home--"] {
  height: 100dvh;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
}

.shell-frame-no-topbar[class*="shell-frame-child-home--"] .screen-body,
.shell-frame-no-topbar[class*="shell-frame-child-home--"] .home-shell-v2,
.shell-frame-no-topbar[class*="shell-frame-child-home--"] .home-shell-v2 .mythic-home-shell {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

.shell-frame-no-topbar[class*="shell-frame-child-home--"] .mythic-home-shell {
  border-radius: 0;
}

.shell-frame-no-topbar[class*="shell-frame-child-home--"] .mythic-home-dock {
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
}

.setup-simple-screen {
  min-height: 100dvh;
  height: auto;
  display: grid;
  align-content: start;
  gap: 14px;
  padding:
    calc(14px + env(safe-area-inset-top, 0px))
    12px
    calc(18px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(circle at 18% 6%, rgba(255, 214, 133, 0.38), transparent 32%),
    radial-gradient(circle at 88% 18%, rgba(132, 201, 184, 0.2), transparent 30%),
    linear-gradient(180deg, #fff3de 0%, #f7fbef 44%, #e9f4ff 100%);
  overflow: visible;
}

.setup-simple-hero {
  min-height: 210px;
  display: grid;
  place-items: center;
}

.setup-simple-panel {
  display: grid;
  gap: 14px;
  padding: 18px 16px 16px;
  border-radius: 18px;
  background: rgba(255, 252, 246, 0.97);
  border: 1px solid rgba(105, 73, 40, 0.12);
  box-shadow: 0 14px 34px rgba(58, 43, 24, 0.12);
}

.setup-simple-title {
  margin: 0;
  font-family: var(--header-font);
  font-size: clamp(1.45rem, min(6vw, 1.61rem), 2rem);
  line-height: 1.18;
}

.setup-simple-copy {
  margin: 0;
  color: var(--text-soft);
  line-height: 1.65;
}

.setup-simple-body {
  display: grid;
  gap: 14px;
}

.setup-goal-screen {
  gap: 0;
  padding:
    calc(10px + env(safe-area-inset-top, 0px))
    10px
    calc(16px + env(safe-area-inset-bottom, 0px));
}

.setup-goal-screen .setup-simple-hero {
  display: none;
}

.setup-goal-panel {
  gap: 12px;
  padding: 16px 14px 14px;
  border-radius: 22px;
  border-color: rgba(126, 91, 52, 0.1);
}

.setup-goal-panel .setup-simple-title {
  font-size: clamp(1.38rem, min(5.6vw, 1.51rem), 1.85rem);
}

.setup-goal-panel .setup-simple-copy {
  font-size: 0.95rem;
}

.setup-goal-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 217, 141, 0.3), transparent 34%),
    rgba(255, 248, 236, 0.8);
  border: 1px solid rgba(126, 91, 52, 0.1);
}

.setup-goal-summary h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.28;
}

.setup-goal-summary p {
  margin: 4px 0 0;
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.55;
}

.setup-goal-count {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  align-content: center;
  background: #fffaf1;
  color: #286554;
  border: 1px solid rgba(60, 128, 100, 0.18);
  box-shadow: inset 0 -8px 18px rgba(143, 208, 178, 0.16);
}

.setup-goal-count strong {
  font-size: 1.38rem;
  line-height: 1;
}

.setup-goal-count span {
  color: var(--text-soft);
  font-size: 0.82rem;
}

.setup-goal-picker-wrap {
  display: grid;
  gap: 10px;
  padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px));
}

.goal-picker {
  display: grid;
  gap: 12px;
}

.goal-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.goal-tag-item {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.goal-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  color: #382b21;
  background: rgba(255, 252, 246, 0.92);
  border: 1px solid rgba(113, 83, 50, 0.14);
  box-shadow: 0 8px 18px rgba(76, 56, 31, 0.06);
  font-weight: 800;
  line-height: 1.2;
  user-select: none;
}

.goal-tag.selected {
  color: #fffaf3;
  background: linear-gradient(135deg, #2f8c67, #1e6f6d);
  border-color: transparent;
  box-shadow: 0 12px 24px rgba(47, 140, 103, 0.22);
}

.goal-tag span {
  white-space: nowrap;
}

.goal-tag-item-with-detail {
  gap: 8px;
  flex: 1 1 100%;
  min-height: 46px;
  padding: 4px 8px 4px 4px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 223, 146, 0.16), transparent 58%),
    linear-gradient(135deg, rgba(38, 29, 23, 0.86), rgba(8, 10, 15, 0.78));
  border: 1px solid rgba(255, 190, 116, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 229, 188, 0.08),
    0 0 24px rgba(255, 118, 52, 0.08),
    0 14px 28px rgba(0, 0, 0, 0.22);
}

.goal-tag-item-with-detail.selected {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 223, 146, 0.28), transparent 58%),
    linear-gradient(135deg, rgba(255, 154, 73, 0.78), rgba(134, 56, 33, 0.72));
  border-color: rgba(255, 213, 139, 0.42);
  box-shadow:
    0 0 28px rgba(255, 118, 52, 0.18),
    0 14px 28px rgba(0, 0, 0, 0.22);
}

.goal-tag-item-with-detail .goal-tag {
  flex: 0 0 auto;
  min-height: 38px;
  padding-inline: 14px 10px;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.goal-detail-inline-input {
  flex: 1 1 160px;
  min-width: 0;
  height: 38px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
}

.setup-custom-goal-field {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 252, 246, 0.94);
  border: 1px solid rgba(113, 83, 50, 0.12);
}

.setup-custom-goal-field span {
  color: var(--text);
  font-weight: 800;
}

.goal-group-section {
  display: grid;
  gap: 8px;
}

.goal-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 3px;
}

.goal-group-header h3 {
  margin: 0;
  font-size: 0.96rem;
  color: #2d5f54;
}

.goal-group-header span {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.goal-picker .goal-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}

.goal-card {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  min-height: 0;
  padding: 12px;
  border-radius: 15px;
  background: rgba(255, 252, 246, 0.9);
  box-shadow: none;
}

.goal-card.selected {
  background:
    linear-gradient(180deg, rgba(255, 248, 237, 0.98), rgba(243, 255, 247, 0.96));
}

.goal-checkmark {
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff9ef;
  border: 1.5px solid rgba(99, 130, 102, 0.32);
}

.goal-card.selected .goal-checkmark {
  background: #2f8c67;
  border-color: #2f8c67;
  box-shadow: 0 6px 14px rgba(47, 140, 103, 0.2);
}

.goal-card.selected .goal-checkmark::after {
  content: "";
  width: 8px;
  height: 12px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(42deg);
}

.goal-card .plan-card-copy {
  min-width: 0;
}

.goal-card h4 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.32;
}

.goal-card .small-note {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.48;
}

.setup-goal-panel .setup-simple-actions {
  position: fixed;
  left: 50%;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(402px, calc(100vw - 28px));
  z-index: 3;
  padding: 10px;
  border-radius: 17px;
  background: rgba(255, 252, 246, 0.94);
  border: 1px solid rgba(126, 91, 52, 0.08);
  box-shadow: 0 -10px 24px rgba(74, 56, 30, 0.08);
  backdrop-filter: blur(8px);
}

.setup-simple-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.setup-simple-actions .primary-button,
.setup-simple-actions .ghost-button {
  width: 100%;
  min-height: 48px;
}

.setup-config-world {
  min-height: 100dvh;
  height: 100dvh;
  border-radius: 0;
  overflow: hidden;
  background: #070a10;
  box-shadow: none;
}

.pre-hatch-name-page {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100dvh;
}

.setup-config-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(5, 7, 12, 0.26), rgba(5, 7, 12, 0.88)),
    radial-gradient(circle at 50% 34%, rgba(255, 149, 60, 0.16), transparent 32%),
    url("./src/assets/pets/fenghuang/bases/phoenix_egg_main.webp") center / cover no-repeat,
    #070a10;
  transform: scale(1.015);
}

.setup-config-atmosphere::before,
.setup-config-atmosphere::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.setup-config-atmosphere::before {
  top: 0;
  height: 36%;
  background: linear-gradient(180deg, rgba(3, 5, 10, 0.58), transparent);
}

.setup-config-atmosphere::after {
  bottom: 0;
  height: 48%;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 112, 52, 0.2), transparent 42%),
    linear-gradient(0deg, rgba(2, 3, 7, 0.92), transparent);
}

.setup-config-world .setup-config-layer {
  z-index: 2;
  align-items: end;
  padding:
    calc(78px + env(safe-area-inset-top, 0px))
    14px
    calc(14px + env(safe-area-inset-bottom, 0px));
  background: transparent;
}

.setup-config-world .setup-config-sheet {
  width: min(100%, 430px);
  max-height: min(78dvh, 720px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  color: #fff8ee;
  padding: 18px 16px 16px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 158, 77, 0.18), transparent 54%),
    linear-gradient(180deg, rgba(24, 17, 14, 0.76), rgba(6, 8, 13, 0.68));
  border: 1px solid rgba(255, 171, 92, 0.22);
  box-shadow:
    0 0 42px rgba(255, 104, 42, 0.12),
    0 22px 46px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 226, 186, 0.14);
  backdrop-filter: blur(18px) saturate(1.08);
}

.setup-config-world .setup-config-sheet-large {
  min-height: min(74dvh, 680px);
}

.setup-config-world--parent-pin .setup-config-layer {
  align-items: center;
  padding:
    calc(54px + env(safe-area-inset-top, 0px))
    14px
    calc(54px + env(safe-area-inset-bottom, 0px));
}

.setup-config-world--parent-pin .setup-config-sheet {
  min-height: min(510px, calc(100dvh - 108px - env(safe-area-inset-bottom, 0px)));
  max-height: min(72dvh, 640px);
}

.setup-config-world--parent-goals .setup-config-layer {
  align-items: start;
  padding:
    0
    14px
    calc(108px + env(safe-area-inset-bottom, 0px));
}

.setup-config-world--parent-goals .setup-config-sheet {
  height: min(800px, calc(100dvh - 108px - env(safe-area-inset-bottom, 0px)));
  max-height: min(800px, calc(100dvh - 108px - env(safe-area-inset-bottom, 0px)));
  border: 0;
  box-shadow: none;
}

.setup-config-world--parent-goals .setup-config-actions {
  position: fixed;
  left: 36px;
  right: 36px;
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  z-index: 6;
  padding-top: 0;
}

.setup-config-world--parent-child-name .setup-config-layer,
.setup-config-world--setup-pet-name .setup-config-layer {
  align-items: start;
  padding:
    calc(48px + env(safe-area-inset-top, 0px))
    16px
    calc(44dvh + env(safe-area-inset-bottom, 0px));
}

.setup-config-world--parent-child-name .setup-config-atmosphere,
.setup-config-world--setup-pet-name .setup-config-atmosphere {
  background:
    linear-gradient(180deg, rgba(5, 7, 12, 0.2), rgba(5, 7, 12, 0.62)),
    radial-gradient(circle at 50% 36%, rgba(255, 149, 60, 0.12), transparent 34%),
    url("./src/assets/pets/fenghuang/bases/phoenix_egg_main.webp") center / cover no-repeat,
    #070a10;
}

.setup-config-world--setup-pet-name .setup-config-atmosphere {
  background:
    linear-gradient(180deg, rgba(5, 7, 12, 0.18), rgba(5, 7, 12, 0.58)),
    radial-gradient(circle at 50% 35%, rgba(255, 205, 92, 0.22), transparent 34%),
    url("./src/assets/pets/fenghuang/bases/phoenix_egg_main.webp") center / cover no-repeat,
    #070a10;
}

.setup-config-world--name-prompt-stage {
  position: relative;
  isolation: isolate;
}

.pre-hatch-name-page.setup-config-world--name-prompt-stage {
  position: fixed;
}

.setup-config-world--name-prompt-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: none;
}

.setup-config-world--name-prompt-stage .setup-config-atmosphere {
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 185, 82, 0.14), transparent 34%),
    url("./src/assets/pets/fenghuang/bases/phoenix_egg_main.webp") center / cover no-repeat,
    #070a10;
}

.setup-config-world--name-prompt-stage .setup-config-atmosphere::before,
.setup-config-world--name-prompt-stage .setup-config-atmosphere::after {
  content: none;
}

.setup-config-world--name-prompt-stage .setup-config-layer {
  display: block;
  align-items: stretch;
  z-index: 4;
  padding: 0;
  background: transparent;
  pointer-events: none;
}

.setup-name-clear-egg {
  position: absolute;
  left: 50%;
  top: clamp(224px, 46dvh, 430px);
  z-index: 9;
  width: clamp(220px, 66vw, 360px);
  aspect-ratio: 300 / 420;
  pointer-events: none;
  background: url("./src/assets/pets/fenghuang/bases/phoenix_egg_main.webp") center / contain no-repeat;
  filter:
    saturate(1.08)
    contrast(1.04)
    drop-shadow(0 20px 34px rgba(255, 130, 48, 0.26));
  transform: translate(-50%, -50%);
}

.setup-config-world--name-prompt-stage > .setup-name-clear-egg,
.setup-name-form-overlay > .setup-name-clear-egg {
  inset: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: auto;
  z-index: 3;
  width: auto;
  height: var(--phoenix-speaking-highlight-start);
  aspect-ratio: auto;
  background:
    linear-gradient(180deg, rgba(3, 5, 10, 0.68), rgba(3, 5, 10, 0.42) 58%, rgba(3, 5, 10, 0.14));
  filter: none;
  -webkit-clip-path: none;
  clip-path: none;
  -webkit-backdrop-filter: blur(3px) saturate(0.9);
  backdrop-filter: blur(3px) saturate(0.9);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
  transform: none;
}

.setup-name-form-overlay > .setup-name-clear-egg {
  z-index: 9;
}

.setup-config-world--name-prompt-stage > .setup-name-clear-egg {
  z-index: 3;
}

.setup-name-dialogue-stack {
  position: absolute;
  top: var(--phoenix-speaking-dialogue-top);
  left: 50%;
  z-index: 4;
  width: min(76vw, 340px);
  transform: translateX(-50%);
  pointer-events: none;
}

.setup-config-world--name-prompt-stage .setup-name-dialogue-stack .setup-config-dialogue-lines {
  width: 100%;
  min-height: 58px;
  margin: 0;
  align-content: center;
  gap: 0;
}

.setup-name-form-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding:
    calc(96px + env(safe-area-inset-top, 0px))
    16px
    calc(28px + env(safe-area-inset-bottom, 0px));
  background:
    linear-gradient(180deg, rgba(2, 4, 9, 0.12), rgba(2, 4, 9, 0.58)),
    linear-gradient(0deg, rgba(2, 4, 9, 0.7), rgba(2, 4, 9, 0.08));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: setup-name-form-overlay-in 280ms ease-out both;
}

.setup-name-form-sheet {
  position: relative;
  z-index: 10;
  width: min(100%, 390px);
  display: grid;
  gap: 13px;
  padding: 16px 15px 15px;
  color: #fff8ee;
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 177, 91, 0.2), transparent 58%),
    linear-gradient(180deg, rgba(24, 17, 14, 0.84), rgba(6, 8, 13, 0.78));
  border: 1px solid rgba(255, 188, 105, 0.28);
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.52),
    0 0 38px rgba(255, 116, 36, 0.14),
    inset 0 1px 0 rgba(255, 231, 189, 0.14);
  backdrop-filter: blur(18px) saturate(1.08);
  animation: setup-name-form-sheet-in 340ms cubic-bezier(0.2, 0.76, 0.18, 1) both;
}

.setup-name-form-header {
  display: grid;
  gap: 8px;
}

.setup-name-form-sheet .setup-config-title {
  margin: 0;
  font-size: 1.18rem;
}

.setup-name-form-sheet .setup-name-form-body {
  overflow: visible;
  gap: 10px;
  padding-right: 0;
}

.setup-name-form-sheet .setup-child-name-input-row {
  grid-template-columns: 1fr;
}

.setup-name-form-sheet .setup-child-name-action {
  width: 100%;
}

.setup-config-world .setup-config-sheet-child-name {
  width: min(92vw, 390px);
  max-height: none;
  gap: 10px;
  padding: 16px 15px 15px;
  border-radius: 26px;
}

.setup-config-world .setup-config-sheet-child-name .setup-config-title {
  margin-top: 8px;
  font-size: clamp(1.18rem, min(5vw, 1.34rem), 1.45rem);
}

.setup-config-world .setup-config-sheet-child-name .setup-config-copy {
  margin-top: 8px;
  line-height: 1.5;
}

.setup-config-world .setup-config-dialogue-lines {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 58px;
  margin: 10px auto 0;
  padding: 0 18px;
  overflow: hidden;
  border-radius: 18px;
  color: #fff8ed;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 183, 82, 0.24), transparent 62%),
    linear-gradient(180deg, rgba(23, 14, 10, 0.78), rgba(6, 8, 14, 0.66));
  border: 1px solid rgba(255, 179, 91, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 197, 0.14),
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 0 34px rgba(255, 116, 36, 0.16);
  backdrop-filter: blur(12px);
}

.setup-config-world .setup-config-dialogue-lines::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 42%;
  height: 12px;
  border-radius: 999px;
  background: radial-gradient(ellipse, rgba(255, 174, 73, 0.28), transparent 72%);
  filter: blur(8px);
  transform: translateX(-50%);
}

.setup-config-world .setup-config-dialogue-line {
  grid-area: 1 / 1;
  max-width: 100%;
  opacity: 0;
  color: #fff8ed;
  font-family: var(--header-font);
  font-size: 1.18rem;
  font-weight: 850;
  line-height: 1.16;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.76),
    0 12px 28px rgba(0, 0, 0, 0.46);
  transform: translateY(0.45em);
  filter: blur(4px);
  animation: setup-config-dialogue-line-cycle calc(var(--line-count) * 2.55s) linear infinite;
  animation-delay: calc(var(--line-index) * 2.55s);
  will-change: opacity, transform, filter;
}

.setup-config-world.setup-config-world--name-prompt-stage .setup-config-dialogue-line {
  grid-area: auto;
  white-space: normal;
  animation: setup-name-dialogue-line-reveal 420ms cubic-bezier(0.2, 0.72, 0.2, 1) both;
  animation-delay: calc(var(--line-index) * 2.55s);
}

@media (min-width: 380px) {
  .setup-config-world .setup-config-dialogue-line {
    font-size: 1.3rem;
  }
}

.setup-config-world .setup-config-sheet-child-name .setup-config-body {
  overflow: visible;
  gap: 10px;
}

.setup-child-name-control {
  display: grid;
  gap: 8px;
}

.setup-child-name-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 0.92fr);
  gap: 10px;
  align-items: stretch;
}

.setup-child-name-input-row .text-input {
  width: 100%;
}

.setup-child-name-input-row .primary-button,
.setup-config-world .setup-config-sheet-child-name .setup-config-actions :is(.primary-button, .ghost-button) {
  min-height: 48px;
}

.setup-child-name-input-row .setup-child-name-action {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  min-width: 0;
  padding: 0 14px;
  color: #fff7df;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 213, 116, 0.44), transparent 42%),
    radial-gradient(circle at 18% 82%, rgba(255, 105, 39, 0.32), transparent 46%),
    linear-gradient(180deg, rgba(72, 42, 22, 0.84), rgba(13, 10, 12, 0.9));
  border: 1px solid rgba(255, 199, 117, 0.5);
  box-shadow:
    0 0 0 1px rgba(255, 144, 62, 0.12),
    0 0 26px rgba(255, 121, 45, 0.34),
    0 16px 34px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 235, 188, 0.26),
    inset 0 -18px 36px rgba(255, 118, 38, 0.15);
  text-shadow:
    0 1px 8px rgba(255, 125, 42, 0.58),
    0 0 18px rgba(255, 210, 113, 0.38);
  white-space: nowrap;
}

.setup-child-name-input-row .setup-child-name-action::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(255, 238, 179, 0.16);
  background:
    linear-gradient(110deg, transparent 0 30%, rgba(255, 244, 196, 0.34) 44%, transparent 58% 100%);
  transform: translateX(-72%);
  animation: setup-name-action-sweep 2.8s ease-in-out infinite;
}

.setup-child-name-input-row .setup-child-name-action::after {
  content: "";
  position: absolute;
  inset: -48%;
  z-index: -2;
  border-radius: 999px;
  background:
    conic-gradient(from 22deg, transparent 0 14%, rgba(255, 200, 98, 0.34) 20%, transparent 31% 58%, rgba(255, 112, 45, 0.28) 65%, transparent 76% 100%);
  opacity: 0.66;
  animation: setup-name-action-halo 6s linear infinite;
}

.setup-child-name-action-glow {
  position: absolute;
  inset: -32%;
  z-index: -3;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 229, 143, 0.56), rgba(255, 125, 48, 0.18) 44%, transparent 68%);
  animation: setup-name-action-breathe 2.2s ease-in-out infinite;
}

.setup-child-name-action-text {
  position: relative;
  z-index: 1;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.setup-child-name-action-spark {
  position: absolute;
  right: 16px;
  top: 12px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #fff1a8;
  box-shadow:
    -92px 14px 0 -1px rgba(255, 194, 100, 0.7),
    -44px -3px 0 -2px rgba(255, 255, 255, 0.74),
    0 0 14px rgba(255, 224, 118, 0.9);
  animation: setup-name-action-spark 1.8s ease-in-out infinite;
}

.setup-child-name-input-row .setup-child-name-action:active {
  transform: translateY(1px) scale(0.985);
}

.setup-pin-control {
  display: grid;
  gap: 10px;
}

.setup-pin-entry-row {
  display: grid;
  grid-template-columns: minmax(94px, 2fr) minmax(0, 3fr);
  gap: 10px;
  align-items: center;
}

.setup-pin-entry-row .text-input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 14px;
}

.setup-pin-entry-row .setup-pin-next-action {
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  white-space: nowrap;
  word-break: keep-all;
  font-size: clamp(13px, min(3.4vw, 14.62px), 15px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.setup-pin-entry-row .setup-pin-next-action.is-pending {
  color: rgba(255, 232, 199, 0.66);
  border-color: rgba(255, 171, 103, 0.16);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 154, 81, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(33, 25, 20, 0.7), rgba(9, 10, 13, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 178, 0.08),
    0 10px 18px rgba(0, 0, 0, 0.24),
    0 0 16px rgba(255, 118, 52, 0.03);
  opacity: 0.84;
}

.setup-pin-entry-row .setup-pin-next-action.is-ready {
  color: #fff8e9;
  border-color: rgba(255, 211, 139, 0.42);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 218, 139, 0.3), transparent 58%),
    radial-gradient(circle at 18% 92%, rgba(255, 116, 48, 0.2), transparent 50%),
    linear-gradient(180deg, rgba(75, 43, 23, 0.9), rgba(18, 13, 13, 0.86));
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 188, 0.22),
    0 14px 26px rgba(0, 0, 0, 0.3),
    0 0 26px rgba(255, 132, 55, 0.2);
  opacity: 1;
}

.setup-pin-entry-row .setup-pin-next-action:active {
  transform: translateY(1px) scale(0.985);
}

.setup-config-world .setup-config-title {
  color: #fff8ee;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.52),
    0 0 22px rgba(255, 119, 44, 0.18);
}

.setup-config-world :is(.setup-config-copy, .setup-config-section-copy, .field-help, .small-note) {
  color: rgba(255, 239, 218, 0.78);
}

.setup-config-world :is(.field-label, .setup-custom-goal-field span, .goal-group-header h3, .theme-card h4) {
  color: rgba(255, 248, 238, 0.94);
}

.setup-config-world .mini-pill,
.setup-config-world .tag {
  color: rgba(255, 235, 203, 0.9);
  background: rgba(255, 248, 238, 0.1);
  border-color: rgba(255, 202, 132, 0.18);
  box-shadow: none;
}

.setup-config-world .text-input,
.setup-config-world .select-input,
.setup-config-world .textarea-input {
  color: #fff8ee;
  background: rgba(7, 9, 14, 0.44);
  border-color: rgba(255, 191, 116, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 228, 187, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.18);
}

.setup-config-world .text-input::placeholder,
.setup-config-world .textarea-input::placeholder {
  color: rgba(255, 229, 197, 0.46);
}

.setup-config-world :is(.goal-tag, .setup-custom-goal-field, .theme-card, .empty-state) {
  color: rgba(255, 244, 229, 0.9);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 177, 96, 0.1), transparent 60%),
    rgba(8, 10, 15, 0.42);
  border-color: rgba(255, 191, 116, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 229, 188, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.18);
}

.setup-config-world .goal-tag.selected,
.setup-config-world .theme-card.selected {
  color: #fffaf3;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 223, 146, 0.28), transparent 58%),
    linear-gradient(135deg, rgba(255, 154, 73, 0.78), rgba(134, 56, 33, 0.72));
  border-color: rgba(255, 213, 139, 0.42);
  box-shadow:
    0 0 28px rgba(255, 118, 52, 0.18),
    0 14px 28px rgba(0, 0, 0, 0.26);
}

.setup-config-world .goal-tag-item-with-detail {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 223, 146, 0.16), transparent 62%),
    linear-gradient(135deg, rgba(36, 27, 22, 0.9), rgba(7, 9, 14, 0.82));
  border-color: rgba(255, 190, 116, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 229, 188, 0.08),
    0 0 24px rgba(255, 118, 52, 0.08),
    0 14px 28px rgba(0, 0, 0, 0.24);
}

.setup-config-world .goal-tag-item-with-detail.selected {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 223, 146, 0.32), transparent 62%),
    linear-gradient(135deg, rgba(255, 154, 73, 0.78), rgba(134, 56, 33, 0.72));
  border-color: rgba(255, 213, 139, 0.42);
  box-shadow:
    0 0 28px rgba(255, 118, 52, 0.18),
    0 14px 28px rgba(0, 0, 0, 0.26);
}

.setup-config-world .goal-tag-item-with-detail .goal-tag.selected {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.setup-config-world .goal-detail-inline-input {
  background: rgba(7, 9, 14, 0.34);
  border-color: rgba(255, 223, 170, 0.28);
}

.setup-config-world .theme-list {
  display: grid;
  gap: 10px;
}

.setup-config-world .theme-card .section-header {
  align-items: center;
}

.setup-config-world .setup-config-actions {
  position: absolute;
  left: max(24px, calc((100% - 430px) / 2 + 24px));
  right: max(24px, calc((100% - 430px) / 2 + 24px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 8;
  gap: 10px;
  padding-top: 0;
}

.setup-config-world .setup-config-actions :is(.primary-button, .ghost-button) {
  min-height: 52px;
  color: rgba(255, 239, 214, 0.96);
  border: 1px solid rgba(255, 171, 103, 0.24);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 154, 81, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(39, 30, 23, 0.82), rgba(10, 11, 14, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 178, 0.14),
    0 12px 22px rgba(0, 0, 0, 0.3);
  font-weight: 900;
}

.setup-config-world .setup-config-actions .primary-button {
  border-color: rgba(255, 201, 123, 0.38);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 188, 103, 0.32), transparent 60%),
    linear-gradient(180deg, rgba(92, 49, 24, 0.88), rgba(23, 13, 11, 0.84));
  text-shadow: 0 0 16px rgba(255, 126, 49, 0.3);
}

.setup-config-world--parent-pin .setup-config-actions {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  transform: none;
  z-index: auto;
  margin-top: 2px;
}

.setup-config-world--parent-pin .setup-config-actions-prev-only {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.setup-config-world--parent-goals .setup-config-actions {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  width: min(318px, calc(100vw - 86px));
  transform: translateX(-50%);
  z-index: 12;
}

.setup-final-egg {
  width: min(74vw, 300px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 18px 26px rgba(8, 12, 18, 0.34));
}

.setup-final-egg .asset-pet-container {
  width: 100%;
  height: 100%;
}

.intro-video-card {
  width: min(100%, 390px);
  border-radius: 20px;
  overflow: hidden;
  background: #101827;
  border: 1px solid rgba(255, 248, 238, 0.18);
  box-shadow: 0 18px 42px rgba(6, 10, 18, 0.3);
}

.intro-video-stage {
  position: relative;
  min-height: 260px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 164, 69, 0.38), transparent 32%),
    radial-gradient(circle at 50% 44%, rgba(255, 233, 175, 0.18), transparent 44%),
    linear-gradient(180deg, #141821 0%, #242432 45%, #44342d 100%);
}

.intro-video-door {
  position: absolute;
  inset: 16px 44px 20px;
  border-radius: 80px 80px 18px 18px;
  border: 10px solid rgba(189, 128, 73, 0.42);
  box-shadow:
    inset 0 0 32px rgba(255, 139, 57, 0.2),
    0 0 46px rgba(255, 139, 57, 0.16);
}

.intro-video-placeholder {
  position: relative;
  z-index: 1;
  width: min(62vw, 230px);
  aspect-ratio: 9 / 16;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: rgba(255, 248, 238, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 248, 238, 0.14), rgba(255, 248, 238, 0.04)),
    rgba(15, 20, 30, 0.48);
  border: 1px solid rgba(255, 248, 238, 0.16);
  box-shadow: 0 18px 38px rgba(8, 12, 18, 0.28);
}

.intro-video-placeholder span {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(9, 13, 20, 0.34);
  border: 1px solid rgba(255, 248, 238, 0.14);
}

.intro-video-egg {
  width: min(68vw, 250px);
  z-index: 1;
}

.intro-video-play {
  position: absolute;
  z-index: 2;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 250, 242, 0.92);
  box-shadow: 0 10px 24px rgba(6, 10, 18, 0.28);
}

.intro-video-play::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 17px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 17px solid #24313a;
}

.intro-video-caption {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  color: rgba(255, 248, 238, 0.92);
}

.intro-video-caption span {
  color: rgba(255, 248, 238, 0.62);
  font-size: 0.9rem;
}

.intro-video-bar {
  height: 5px;
  background: rgba(255, 248, 238, 0.18);
}

.intro-video-bar span {
  display: block;
  width: 72%;
  height: 100%;
  background: linear-gradient(90deg, #ffb168, #ffd37f);
}

.setup-video-entry-screen {
  min-height: 100dvh;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 22px;
  padding:
    calc(22px + env(safe-area-inset-top, 0px))
    18px
    calc(28px + env(safe-area-inset-bottom, 0px));
  background:
    linear-gradient(180deg, rgba(255, 247, 234, 0.96), rgba(248, 226, 194, 0.88)),
    radial-gradient(circle at 50% 22%, rgba(255, 178, 88, 0.28), transparent 38%),
    #f8efe2;
}

.intro-entry-copy {
  width: min(100%, 420px);
  margin-top: 6px;
  color: #2f241d;
  font-family: var(--header-font);
  font-size: clamp(1.35rem, min(6.4vw, 1.72rem), 2rem);
  line-height: 1.42;
  font-weight: 900;
  text-align: left;
}

.intro-video-button {
  appearance: none;
  border: 0;
  padding: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow:
    0 24px 48px rgba(74, 42, 18, 0.24),
    0 6px 18px rgba(74, 42, 18, 0.16);
}

.intro-video-button:active {
  transform: translateY(1px) scale(0.995);
}

.setup-consent-screen {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: start;
  padding:
    calc(14px + env(safe-area-inset-top, 0px))
    18px
    calc(22px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  color: #fff4e1;
  background:
    linear-gradient(180deg, rgba(8, 11, 18, 0.42) 0%, rgba(8, 11, 18, 0.24) 42%, rgba(8, 11, 18, 0.5) 100%),
    radial-gradient(circle at 50% 76%, rgba(255, 170, 86, 0.28), transparent 36%),
    url("./src/assets/pets/fenghuang/bases/phoenix_egg_main.webp") center bottom / cover no-repeat,
    #0b1017;
}

.setup-consent-panel {
  position: relative;
  z-index: 2;
  width: min(100%, 430px);
  justify-self: center;
  align-self: start;
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(255, 198, 126, 0.24);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 170, 87, 0.2), transparent 62%),
    linear-gradient(180deg, rgba(31, 23, 18, 0.84), rgba(8, 10, 15, 0.82));
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 230, 185, 0.12);
  backdrop-filter: blur(16px) saturate(1.08);
}

.setup-consent-panel .mini-pill {
  justify-self: start;
  color: rgba(255, 236, 205, 0.92);
  border-color: rgba(255, 191, 115, 0.24);
  background: rgba(255, 248, 238, 0.1);
}

.setup-consent-panel h1 {
  margin: 0;
  font-family: var(--header-font);
  font-size: clamp(1.45rem, min(7vw, 1.88rem), 2.18rem);
  line-height: 1.18;
  letter-spacing: 0;
}

.setup-consent-copy {
  display: grid;
  gap: 10px;
}

.setup-consent-copy p {
  margin: 0;
  color: rgba(255, 243, 225, 0.86);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 800;
}

.setup-consent-actions {
  display: grid;
  margin-top: 2px;
}

.setup-consent-start {
  min-height: 54px;
  color: rgba(255, 244, 226, 0.98);
  border: 1px solid rgba(255, 203, 126, 0.4);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 198, 111, 0.38), transparent 62%),
    linear-gradient(180deg, rgba(92, 49, 24, 0.94), rgba(23, 13, 11, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 229, 186, 0.18),
    0 16px 30px rgba(0, 0, 0, 0.32);
  text-shadow: 0 0 16px rgba(255, 126, 49, 0.34);
}

.intro-video-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding:
    env(safe-area-inset-top, 0px)
    0
    env(safe-area-inset-bottom, 0px);
  background: #080b12;
  color: #fff8ee;
}

.intro-video-modal:fullscreen {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

.intro-video-close {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 248, 238, 0.18);
  border-radius: 50%;
  background: rgba(8, 11, 18, 0.62);
  color: #fff8ee;
  font-size: 28px;
  line-height: 1;
}

.intro-video-portrait {
  width: min(100vw, 430px);
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: #0e1420;
}

.intro-video-player {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.intro-video-native {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  background: #000;
}

.intro-video-play-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: rgba(255, 246, 230, 0.98);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 181, 92, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(3, 5, 10, 0.08), rgba(3, 5, 10, 0.36));
  cursor: pointer;
}

.intro-video-player.is-playing .intro-video-play-overlay {
  opacity: 0;
  pointer-events: none;
}

.intro-video-play-overlay-icon {
  position: relative;
  width: clamp(70px, 19vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.92), rgba(255, 236, 202, 0.82) 46%, rgba(255, 173, 82, 0.76));
  border: 1px solid rgba(255, 239, 205, 0.68);
  box-shadow:
    0 0 36px rgba(255, 156, 72, 0.46),
    0 18px 34px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.intro-video-play-overlay-icon::before {
  content: "";
  position: absolute;
  left: 39%;
  top: 31%;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 25px solid #342517;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.28));
}

.intro-video-player-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 183, 92, 0.34), transparent 34%),
    linear-gradient(180deg, rgba(23, 31, 49, 0.98), rgba(10, 12, 18, 0.96)),
    #0b1019;
}

.intro-video-player-bg::before {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 12%;
  height: 54%;
  border: 12px solid rgba(189, 128, 73, 0.34);
  border-bottom-width: 20px;
  border-radius: 120px 120px 22px 22px;
  box-shadow:
    inset 0 0 34px rgba(255, 158, 76, 0.18),
    0 0 70px rgba(255, 123, 51, 0.16);
}

.intro-video-player-content {
  position: relative;
  z-index: 1;
  width: min(88vw, 360px);
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  padding: 48px 0 24px;
}

.intro-video-player-kicker {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 248, 238, 0.12);
  border: 1px solid rgba(255, 248, 238, 0.14);
  color: rgba(255, 248, 238, 0.76);
  font-size: 0.82rem;
  font-weight: 800;
}

.intro-video-player-content h2 {
  margin: 0;
  font-family: var(--header-font);
  font-size: clamp(1.65rem, min(8vw, 2.15rem), 2.5rem);
  line-height: 1.18;
}

.intro-video-player-content p {
  margin: 0;
  color: rgba(255, 248, 238, 0.72);
  line-height: 1.7;
  font-weight: 700;
}

.intro-video-modal-egg {
  width: min(72vw, 290px);
  margin-top: 4px;
}

.intro-video-control-bar {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: 10px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 11, 18, 0.92);
  border-top: 1px solid rgba(255, 248, 238, 0.1);
}

.intro-video-control-bar .ghost-button,
.intro-video-control-bar .primary-button {
  min-height: 48px;
}

.intro-video-modal .intro-video-player-bg {
  background:
    linear-gradient(180deg, rgba(5, 7, 12, 0.18), rgba(5, 7, 12, 0.86)),
    radial-gradient(circle at 50% 30%, rgba(255, 149, 60, 0.2), transparent 34%),
    url("./src/assets/pets/fenghuang/bases/phoenix_egg_main.webp") center / cover no-repeat,
    #070a10;
}

.intro-video-modal .intro-video-player-bg::before {
  border-color: rgba(255, 150, 72, 0.24);
  background: linear-gradient(180deg, rgba(4, 6, 11, 0.08), rgba(4, 6, 11, 0.38));
}

.intro-video-modal .intro-video-close {
  color: rgba(255, 239, 214, 0.96);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 154, 81, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(27, 22, 19, 0.78), rgba(6, 8, 13, 0.72));
  border-color: rgba(255, 171, 103, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 178, 0.12),
    0 12px 24px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(12px) saturate(1.1);
}

.intro-video-modal .intro-video-control-bar {
  margin: 0 14px calc(12px + env(safe-area-inset-bottom, 0px));
  padding: 8px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 178, 92, 0.18), transparent 64%),
    linear-gradient(180deg, rgba(26, 17, 12, 0.66), rgba(7, 8, 11, 0.62));
  border: 1px solid rgba(255, 172, 92, 0.22);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 229, 185, 0.12);
  backdrop-filter: blur(14px) saturate(1.08);
}

.intro-video-modal .intro-video-control-bar :is(.ghost-button, .primary-button) {
  min-height: 52px;
  color: rgba(255, 239, 214, 0.96);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 154, 81, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(39, 30, 23, 0.86), rgba(10, 11, 14, 0.82));
  border: 1px solid rgba(255, 171, 103, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 178, 0.14),
    0 10px 20px rgba(0, 0, 0, 0.28);
  font-weight: 900;
}

.intro-video-modal .intro-video-control-bar .primary-button {
  border-color: rgba(255, 201, 123, 0.4);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 188, 103, 0.34), transparent 60%),
    linear-gradient(180deg, rgba(92, 49, 24, 0.9), rgba(23, 13, 11, 0.86));
  text-shadow: 0 0 16px rgba(255, 126, 49, 0.34);
}

.mythic-home-shell--farewell,
.mythic-home-shell--mystery {
  min-height: 100dvh;
}

.mystery-topbar {
  position: absolute;
  z-index: 4;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
}

.mystery-card {
  position: absolute;
  z-index: 4;
  left: 16px;
  right: 16px;
  top: calc(82px + env(safe-area-inset-top, 0px));
  display: grid;
  gap: 14px;
  max-width: 430px;
  margin: 0 auto;
  padding: 18px 16px;
  border-radius: 22px;
  background: rgba(255, 250, 242, 0.94);
  border: 1px solid rgba(106, 70, 36, 0.12);
  box-shadow: 0 22px 46px rgba(58, 36, 18, 0.18);
}

.mystery-card-farewell {
  background: rgba(28, 25, 26, 0.7);
  border-color: rgba(255, 248, 238, 0.16);
  color: #fff8ee;
  backdrop-filter: blur(10px);
}

.mystery-card-farewell .mythic-scene-copy {
  color: rgba(255, 248, 238, 0.84);
}

.farewell-cinematic-status {
  display: grid;
  gap: 7px;
  color: rgba(255, 226, 178, 0.86);
  font-size: 0.86rem;
  font-weight: 800;
}

.farewell-cinematic-track {
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 232, 194, 0.16);
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 178, 96, 0.18);
}

.farewell-cinematic-track span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 111, 45, 0.96), rgba(255, 219, 113, 0.98), rgba(255, 250, 205, 0.98));
  box-shadow: 0 0 20px rgba(255, 155, 72, 0.58);
  animation: farewell-cinematic-progress 7.2s linear both;
}

.mystery-evidence-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.mystery-evidence-card {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 244, 228, 0.82);
  border: 1px solid rgba(108, 72, 40, 0.12);
  color: #4b3729;
  font-weight: 800;
  line-height: 1.45;
}

.mystery-choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.mystery-choice-button {
  min-height: 48px;
}

.mystery-keepsake {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  width: min(74vw, 330px);
  aspect-ratio: 1.2;
  transform: translateX(-50%);
  pointer-events: none;
}

.mystery-door-trace {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 8%;
  height: 56%;
  border: 10px solid rgba(255, 191, 112, 0.28);
  border-bottom-width: 16px;
  border-radius: 120px 120px 22px 22px;
  box-shadow:
    inset 0 0 24px rgba(255, 206, 126, 0.12),
    0 0 54px rgba(255, 176, 88, 0.14);
}

.mystery-feather {
  position: absolute;
  left: 38%;
  top: 48%;
  width: 26%;
  height: 40%;
  border-radius: 80% 8% 80% 8%;
  background:
    linear-gradient(135deg, #fff3ad 0 20%, #ff8f62 28% 42%, #6fd0ba 52% 66%, #fff8f1 74% 84%, #3c2e46 100%);
  box-shadow:
    0 0 26px rgba(255, 210, 116, 0.48),
    0 10px 24px rgba(30, 18, 10, 0.28);
  transform: rotate(18deg);
}

.mystery-feather::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 8%;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.72);
}

.mystery-ember {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ffd37f;
  box-shadow: 0 0 18px rgba(255, 153, 80, 0.7);
}

.mystery-ember-a {
  left: 24%;
  bottom: 18%;
}

.mystery-ember-b {
  right: 20%;
  bottom: 34%;
  width: 8px;
  height: 8px;
}

.farewell-flight-preview {
  transform: translateY(46px) scale(0.86);
}

.mythic-home-shell--farewell .farewell-flight-preview {
  animation: farewell-cinematic-flight 7.2s ease-in-out both;
}

.mythic-home-shell--farewell .mythic-creature-glow {
  animation: farewell-cinematic-glow 7.2s ease-in-out both;
}

.mythic-home-shell--farewell::before,
.mythic-home-shell--farewell::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}

.mythic-home-shell--farewell::before {
  top: 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(5, 7, 12, 0.76), rgba(5, 7, 12, 0));
}

.mythic-home-shell--farewell::after {
  bottom: 0;
  height: 38%;
  background: linear-gradient(0deg, rgba(5, 7, 12, 0.82), rgba(5, 7, 12, 0));
}

@keyframes farewell-cinematic-progress {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes farewell-cinematic-flight {
  0% {
    opacity: 1;
    transform: translate3d(0, 54px, 0) scale(0.88) rotate(0deg);
  }

  24% {
    opacity: 1;
    transform: translate3d(0, 12px, 0) scale(0.92) rotate(-1deg);
  }

  56% {
    opacity: 1;
    transform: translate3d(4vw, -34px, 0) scale(0.82) rotate(1.5deg);
  }

  82% {
    opacity: 0.86;
    transform: translate3d(13vw, -19vh, 0) scale(0.58) rotate(4deg);
  }

  100% {
    opacity: 0.18;
    transform: translate3d(22vw, -34vh, 0) scale(0.34) rotate(7deg);
  }
}

@keyframes farewell-cinematic-glow {
  0%,
  40% {
    opacity: 0.78;
    transform: translateX(-50%) scale(1);
  }

  72% {
    opacity: 0.95;
    transform: translateX(-50%) scale(1.5);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scale(2.8);
  }
}

.mythic-home-shell--return-prep {
  --return-prep-dialogue-height: clamp(104px, 15dvh, 132px);
  --return-prep-scroll-top: calc(66px + env(safe-area-inset-top, 0px));
  --return-prep-scroll-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  min-height: 100dvh;
  color: #fff7e8;
  background:
    linear-gradient(180deg, rgba(55, 17, 19, 0.2), rgba(12, 13, 20, 0.64)),
    #16131b;
}

.mythic-home-shell--return-prep::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 6, 13, 0.62), rgba(68, 23, 18, 0.08) 34%, rgba(8, 7, 14, 0.86) 100%),
    linear-gradient(125deg, rgba(255, 88, 54, 0.18), transparent 34%, rgba(255, 204, 112, 0.12) 72%, transparent);
}

.return-prep-phoenix-backdrop {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.54;
}

.return-prep-phoenix-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 141, 73, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(8, 7, 14, 0.12), rgba(8, 7, 14, 0.68));
}

.return-prep-phoenix-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  transform: none;
  filter: saturate(1.08) drop-shadow(0 26px 46px rgba(255, 92, 54, 0.18));
}

.return-prep-phoenix-stage .mythic-creature-shell,
.return-prep-phoenix-stage .asset-pet-container,
.return-prep-phoenix-stage .asset-pet-art {
  width: 100%;
  height: 100%;
}

.return-prep-phoenix-stage .mythic-creature-glow {
  bottom: 8%;
  width: 76%;
  height: 72px;
  opacity: 0.44;
}

.return-prep-phoenix-stage .asset-pet-container {
  cursor: default;
  touch-action: auto;
}

.return-prep-phoenix-stage .asset-speech-bubble,
.return-prep-phoenix-stage .asset-hitbox-layer {
  display: none;
}

.return-prep-phoenix-stage .asset-base-img,
.return-prep-phoenix-stage .asset-base-layer .pet-svg,
.return-prep-phoenix-stage .asset-base-layer .egg-svg {
  object-fit: cover;
  object-position: center;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.28));
}

.return-prep-topbar {
  position: absolute;
  z-index: 8;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 14px;
  right: 14px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 10px;
}

.return-prep-icon-button {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid rgba(255, 225, 176, 0.26);
  color: #fff5df;
  background:
    linear-gradient(180deg, rgba(52, 37, 38, 0.82), rgba(18, 20, 30, 0.74));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 12px 26px rgba(0, 0, 0, 0.22);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
}

.return-prep-icon-button svg {
  width: 21px;
  height: 21px;
}

.return-prep-title-lockup {
  display: grid;
  justify-items: center;
  align-items: center;
  min-width: 0;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
}

.return-prep-title-lockup span {
  color: rgba(255, 228, 182, 0.82);
  font-size: 0.75rem;
  font-weight: 900;
}

.return-prep-scroll {
  position: absolute;
  z-index: 4;
  top: var(--return-prep-scroll-top);
  left: 0;
  right: 0;
  bottom: var(--return-prep-scroll-bottom);
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 0 14px 18px;
  scrollbar-width: none;
}

.return-prep-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.return-prep-hero,
.return-prep-section {
  width: min(100%, 520px);
  margin: 0 auto;
}

.return-prep-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.return-prep-constellation-panel,
.return-prep-section,
.return-prep-feedback,
.return-task-detail {
  border: 1px solid rgba(255, 225, 176, 0.18);
  background:
    linear-gradient(180deg, rgba(70, 33, 28, 0.6), rgba(16, 17, 27, 0.54));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 38px rgba(0, 0, 0, 0.24),
    0 0 24px rgba(255, 95, 54, 0.08);
  backdrop-filter: blur(8px) saturate(1.08);
}

.return-prep-constellation-panel {
  width: 100%;
  min-height: clamp(270px, 48dvh, 390px);
  padding: 16px 16px 18px;
  border-radius: 20px;
  color: inherit;
  font: inherit;
  text-align: left;
}

.return-prep-kicker {
  align-self: center;
  justify-self: center;
  color: #fff9ed;
  font-size: clamp(1.08rem, min(5vw, 1.34rem), 1.42rem);
  font-weight: 950;
  line-height: 1.08;
  text-align: center;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.58),
    0 0 20px rgba(255, 148, 68, 0.28);
}

.return-prep-constellation-panel {
  display: grid;
  grid-template-rows: clamp(28px, 5.5dvh, 42px) var(--return-prep-dialogue-height) minmax(0, 1fr) clamp(38px, 6dvh, 48px);
  gap: 7px;
  background:
    radial-gradient(circle at 48% 42%, rgba(255, 212, 126, 0.16), transparent 38%),
    radial-gradient(circle at 50% 78%, rgba(84, 199, 255, 0.1), transparent 32%),
    linear-gradient(180deg, rgba(70, 33, 28, 0.62), rgba(14, 15, 25, 0.56));
}

.return-prep-constellation {
  position: relative;
  width: min(100%, clamp(248px, 40.5dvh, 353px));
  aspect-ratio: 3 / 4;
  overflow: hidden;
  align-self: center;
  justify-self: center;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 186, 98, 0.12), rgba(3, 5, 12, 0.18) 62%);
  box-shadow:
    inset 0 0 42px rgba(255, 147, 70, 0.14),
    0 0 34px rgba(113, 203, 255, 0.08);
}

.return-prep-constellation-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: 50% 50%;
  filter: saturate(1.12) contrast(1.04) brightness(1.06);
}

.return-prep-constellation-art--base {
  filter: grayscale(1) saturate(0) contrast(1.08) brightness(0.74);
  opacity: 0.86;
}

.return-prep-constellation-art--lit,
.return-prep-constellation-art--complete {
  z-index: 1;
  pointer-events: none;
}

.return-prep-constellation-art--slot-1 {
  clip-path: inset(78% 38% 0% 34% round 12px);
}

.return-prep-constellation-art--slot-2 {
  clip-path: inset(63% 41% 21% 42% round 12px);
}

.return-prep-constellation-art--slot-3 {
  clip-path: inset(44% 40% 41% 40% round 12px);
}

.return-prep-constellation-art--slot-4 {
  clip-path: inset(55% 67% 27% 11% round 12px);
}

.return-prep-constellation-art--slot-5 {
  clip-path: inset(55% 10% 27% 66% round 12px);
}

.return-prep-constellation-art--slot-6 {
  clip-path: inset(18% 55% 61% 18% round 12px);
}

.return-prep-constellation-art--slot-7 {
  clip-path: inset(20% 13% 60% 58% round 12px);
}

.return-prep-constellation--orb-only .return-prep-constellation-art--slot-1 {
  clip-path: ellipse(9.5% 6.65% at 44.05% 90.4%);
}

.return-prep-constellation--orb-only .return-prep-constellation-art--slot-2 {
  clip-path: ellipse(7.7% 5.65% at 45.25% 70.7%);
}

.return-prep-constellation--orb-only .return-prep-constellation-art--slot-3 {
  clip-path: ellipse(8.75% 5.65% at 45.4% 53.9%);
}

.return-prep-constellation--orb-only .return-prep-constellation-art--slot-4 {
  clip-path: ellipse(7.7% 5.65% at 23% 61.55%);
}

.return-prep-constellation--orb-only .return-prep-constellation-art--slot-5 {
  clip-path: ellipse(9.95% 7.2% at 67.95% 63.5%);
}

.return-prep-constellation--orb-only .return-prep-constellation-art--slot-6 {
  clip-path: ellipse(11% 6.55% at 32.8% 26.7%);
}

.return-prep-constellation--orb-only .return-prep-constellation-art--slot-7 {
  clip-path: ellipse(9.35% 5.65% at 67.65% 27.1%);
}

.return-prep-constellation-aura {
  display: none;
}

.return-prep-energy-hotspots {
  position: absolute;
  inset: 0;
  z-index: 4;
}

.return-prep-energy-labels {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.return-prep-energy-label {
  position: absolute;
  appearance: none;
  min-width: 4.6em;
  padding: 5px 9px;
  border: 1px solid rgba(255, 232, 178, 0.24);
  border-radius: 999px;
  color: rgba(255, 238, 196, 0.94);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 212, 130, 0.18), transparent 62%),
    linear-gradient(180deg, rgba(31, 23, 22, 0.72), rgba(8, 9, 14, 0.62));
  box-shadow: 0 0 16px rgba(255, 168, 92, 0.16);
  font-size: clamp(0.81rem, min(3.45vw, 0.93rem), 0.93rem);
  font-weight: 950;
  line-height: 1.08;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.72);
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
}

.return-prep-energy-label:focus-visible,
.return-prep-energy-label:active {
  border-color: rgba(255, 235, 190, 0.78);
  box-shadow: 0 0 24px rgba(255, 202, 109, 0.34);
}

.return-prep-energy-label--slot-1 {
  left: 50%;
  top: 96%;
}

.return-prep-energy-label--slot-2 {
  left: 58%;
  top: 76%;
}

.return-prep-energy-label--slot-3 {
  left: 50%;
  top: 47%;
}

.return-prep-energy-label--slot-4 {
  left: 25%;
  top: 57%;
}

.return-prep-energy-label--slot-5 {
  left: 69%;
  top: 58%;
}

.return-prep-energy-label--slot-6 {
  left: 31%;
  top: 22%;
}

.return-prep-energy-label--slot-7 {
  left: 68%;
  top: 23%;
}

.return-prep-energy-hotspot {
  position: absolute;
  width: clamp(46px, 16%, 62px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  appearance: none;
  transform: translate(-50%, -50%);
}

.return-prep-energy-hotspot::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: inherit;
  border: 1px solid rgba(255, 235, 190, 0);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.return-prep-energy-hotspot:focus-visible::after,
.return-prep-energy-hotspot:active::after {
  border-color: rgba(255, 235, 190, 0.78);
  box-shadow: 0 0 24px rgba(255, 202, 109, 0.34);
  transform: scale(1.08);
}

.return-prep-energy-hotspot.is-complete::after {
  border-color: rgba(255, 235, 190, 0);
  box-shadow: none;
}

.return-prep-energy-hotspot--slot-1 {
  left: 50%;
  top: 86%;
  width: clamp(56px, 24%, 86px);
}

.return-prep-energy-hotspot--slot-2 {
  left: 50%;
  top: 68%;
}

.return-prep-energy-hotspot--slot-3 {
  left: 50%;
  top: 52%;
}

.return-prep-energy-hotspot--slot-4 {
  left: 23%;
  top: 65%;
}

.return-prep-energy-hotspot--slot-5 {
  left: 77%;
  top: 65%;
  width: clamp(56px, 24%, 86px);
}

.return-prep-energy-hotspot--slot-6 {
  left: 32%;
  top: 30%;
}

.return-prep-energy-hotspot--slot-7 {
  left: 68%;
  top: 31%;
}

@keyframes returnPrepGeneratedAura {
  from {
    opacity: 0.55;
    transform: translateY(-2px) scale(1);
  }

  to {
    opacity: 0.88;
    transform: translateY(2px) scale(1.025);
  }
}

.return-prep-feedback {
  position: relative;
  z-index: 1;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  height: var(--return-prep-dialogue-height);
  min-height: var(--return-prep-dialogue-height);
  max-height: var(--return-prep-dialogue-height);
  display: grid;
  place-items: center;
  margin: 0;
  padding: 10px 14px;
  overflow: hidden;
  border-color: rgba(255, 205, 104, 0.36);
  border-radius: 14px;
  color: #fff8e8;
  text-align: center;
  font-size: clamp(1.34rem, min(5.45vw, 1.46rem), 1.72rem);
  font-weight: 950;
  line-height: 1.18;
  text-shadow: 0 0 16px rgba(255, 177, 82, 0.34);
}

.return-prep-feedback span {
  display: block;
  max-height: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  scrollbar-width: none;
}

.return-prep-feedback span::-webkit-scrollbar {
  display: none;
}

.return-prep-feedback.is-empty {
  visibility: hidden;
}

.return-prep-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
}

.return-prep-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.return-prep-section-heading span {
  color: rgba(255, 225, 172, 0.76);
  font-size: 0.75rem;
  font-weight: 950;
}

.return-prep-section-heading strong {
  color: rgba(255, 248, 236, 0.94);
  font-size: 0.88rem;
  font-weight: 950;
  text-align: right;
}

.return-prep-special-grid {
  display: grid;
  gap: 10px;
}

.return-prep-special-button {
  width: 100%;
  min-height: 62px;
  display: grid;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 229, 184, 0.18);
  color: #fff8e8;
  background:
    linear-gradient(180deg, rgba(64, 47, 48, 0.72), rgba(19, 24, 33, 0.74));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  text-align: left;
}

.return-prep-special-button:disabled,
.return-prep-special-button.is-locked {
  opacity: 0.66;
}

.return-prep-special-index {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 231, 180, 0.22);
  background: rgba(7, 10, 17, 0.34);
  color: #ffe3a0;
  font-weight: 950;
}

.return-prep-special-button.is-complete .return-prep-special-index {
  color: #24190f;
  background: linear-gradient(180deg, #ffe59b, #ffbb6c);
  box-shadow: 0 0 16px rgba(255, 190, 92, 0.46);
}

.return-prep-special-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.return-prep-special-copy strong {
  overflow-wrap: anywhere;
  color: #fff9eb;
  font-size: 0.95rem;
  font-weight: 950;
  line-height: 1.25;
}

.return-prep-special-copy small {
  overflow-wrap: anywhere;
  color: rgba(255, 238, 210, 0.72);
  font-size: 0.75rem;
  font-weight: 850;
  line-height: 1.3;
}

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

.return-prep-special-button {
  grid-template-columns: 34px minmax(0, 1fr);
  border-color: rgba(255, 168, 104, 0.22);
  background:
    linear-gradient(180deg, rgba(70, 37, 31, 0.58), rgba(20, 20, 29, 0.56));
}

.return-prep-special-button:not(.is-locked):not(:disabled):active {
  transform: translateY(1px);
}

.return-prep-special-button.is-complete {
  border-color: rgba(255, 185, 96, 0.48);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 22px rgba(255, 95, 54, 0.16);
}

.return-prep-day-lock,
.return-prep-empty {
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  color: rgba(255, 239, 218, 0.8);
  background: rgba(10, 15, 24, 0.32);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.45;
}

.return-prep-start-button {
  min-width: 108px;
  min-height: 48px;
  white-space: nowrap;
}

.return-prep-album-button {
  align-self: center;
  justify-self: center;
  min-width: min(42vw, 150px);
  min-height: 38px;
  padding: 0 18px;
  border-color: rgba(255, 205, 126, 0.42);
  color: #ffe8bd;
  background:
    linear-gradient(180deg, rgba(94, 50, 28, 0.72), rgba(33, 19, 20, 0.66));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 950;
}

.return-album-overlay {
  position: absolute;
  z-index: 15;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: calc(76px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 171, 64, 0.18), transparent 42%),
    rgba(4, 6, 12, 0.62);
}

.return-album-dialog {
  width: min(100%, 520px);
  max-height: 100%;
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255, 205, 126, 0.28);
  background:
    linear-gradient(180deg, rgba(68, 30, 24, 0.9), rgba(16, 13, 18, 0.92));
  box-shadow:
    0 26px 64px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.return-album-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: start;
  gap: 12px;
}

.return-album-header div {
  display: grid;
  gap: 4px;
}

.return-album-header span {
  color: rgba(255, 222, 168, 0.76);
  font-size: 0.78rem;
  font-weight: 950;
}

.return-album-header strong {
  color: #fff8e8;
  font-size: 1.16rem;
  font-weight: 950;
}

.return-album-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.return-album-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255, 217, 145, 0.18);
  background:
    linear-gradient(180deg, rgba(47, 28, 24, 0.76), rgba(16, 13, 18, 0.66));
}

.return-album-card.has-photo {
  border-color: rgba(255, 207, 126, 0.34);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.return-album-photo-frame {
  position: relative;
  aspect-ratio: 1 / 0.72;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 226, 182, 0.18);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 187, 84, 0.18), transparent 48%),
    rgba(10, 12, 18, 0.72);
}

.return-album-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.return-album-empty {
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255, 232, 194, 0.58);
  font-size: 0.82rem;
  font-weight: 900;
}

.return-album-card-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.return-album-card-copy span {
  color: #ffe3ad;
  font-size: 0.82rem;
  font-weight: 950;
}

.return-album-card-copy strong {
  overflow-wrap: anywhere;
  color: rgba(255, 249, 235, 0.76);
  font-size: 0.74rem;
  font-weight: 850;
  line-height: 1.25;
}

.return-task-detail-overlay {
  position: absolute;
  z-index: 14;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: calc(76px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom, 0px));
  background: rgba(4, 6, 12, 0.54);
}

.return-task-detail {
  width: min(100%, 520px);
  max-height: 100%;
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 22px;
}

.return-task-detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: start;
  gap: 12px;
}

.return-task-detail-header div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.return-task-detail-header span {
  color: rgba(255, 222, 168, 0.76);
  font-size: 0.78rem;
  font-weight: 950;
}

.return-task-detail-header strong {
  overflow-wrap: anywhere;
  color: #fff8e8;
  font-size: 1.18rem;
  font-weight: 950;
  line-height: 1.22;
}

.return-task-goal,
.return-task-upload-copy {
  margin: 0;
  color: rgba(255, 242, 224, 0.82);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.5;
}

.return-task-option-list {
  display: grid;
  gap: 8px;
}

.return-task-option {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(151, 222, 204, 0.18);
  color: #f7fff6;
  background:
    linear-gradient(180deg, rgba(28, 57, 55, 0.58), rgba(10, 18, 25, 0.46));
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.42;
}

.return-task-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.return-task-upload-button {
  position: relative;
  min-height: 50px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
}

.return-task-upload-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.farewell-photo-overlay {
  padding: calc(18px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom, 0px));
  background:
    radial-gradient(circle at 74% 18%, rgba(255, 117, 32, 0.22), rgba(255, 117, 32, 0) 34%),
    rgba(3, 5, 12, 0.78);
}

.farewell-photo-dialog {
  width: min(100%, 520px);
  max-height: 100%;
  overflow: auto;
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255, 212, 139, 0.3);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(35, 19, 18, 0.94), rgba(9, 13, 22, 0.96));
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 238, 184, 0.18);
}

.farewell-photo-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: start;
  gap: 12px;
}

.farewell-photo-header div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.farewell-photo-header span {
  color: rgba(255, 224, 172, 0.76);
  font-size: 0.78rem;
  font-weight: 950;
}

.farewell-photo-header strong {
  overflow-wrap: anywhere;
  color: #fff7e5;
  font-size: 1.08rem;
  font-weight: 950;
  line-height: 1.28;
}

.farewell-photo-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 218, 148, 0.28);
  background:
    linear-gradient(135deg, rgba(32, 42, 54, 0.92), rgba(70, 31, 19, 0.9));
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.3);
}

.farewell-photo-result {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.farewell-photo-placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.farewell-photo-child-side {
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(236, 244, 229, 0.12), rgba(10, 17, 24, 0.18));
}

.farewell-photo-child-side span {
  display: grid;
  place-items: center;
  width: min(78%, 190px);
  aspect-ratio: 1 / 1;
  border: 2px dashed rgba(255, 240, 198, 0.48);
  border-radius: 24px;
  color: rgba(255, 247, 223, 0.84);
  font-size: 0.82rem;
  font-weight: 950;
}

.farewell-photo-phoenix-side {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 126, 38, 0.28), rgba(255, 126, 38, 0) 44%),
    rgba(16, 8, 12, 0.74);
}

.farewell-photo-phoenix-side .asset-pet-container {
  width: 142%;
  max-width: none;
  transform: translateY(1%) scale(1.02);
}

.farewell-photo-phoenix-side .asset-speech-bubble,
.farewell-photo-phoenix-side .asset-hitbox-layer {
  display: none;
}

.farewell-photo-status,
.farewell-photo-privacy {
  margin: 0;
  color: rgba(255, 240, 216, 0.84);
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1.48;
}

.farewell-photo-privacy {
  color: rgba(255, 220, 174, 0.68);
  font-size: 0.78rem;
}

.farewell-photo-actions,
.farewell-photo-footer {
  display: grid;
  gap: 10px;
}

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

.farewell-photo-footer {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
}

.farewell-photo-footer .secondary-button {
  grid-column: span 1;
}

.farewell-photo-footer .primary-button {
  grid-column: 1 / -1;
}

.farewell-photo-action {
  position: relative;
  min-height: 48px;
  display: inline-grid;
  place-items: center;
}

.farewell-photo-action input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

@media (min-width: 560px) {
  .farewell-photo-footer {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 0.9fr) minmax(0, 1.28fr);
  }

  .farewell-photo-footer .primary-button,
  .farewell-photo-footer .secondary-button {
    grid-column: auto;
  }
}

.return-task-photo-name {
  overflow-wrap: anywhere;
  color: rgba(255, 236, 204, 0.82);
  font-size: 0.82rem;
  font-weight: 850;
}

.return-task-photo-preview {
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(255, 226, 182, 0.2);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

@media (max-width: 460px) {
  .mythic-home-shell--return-prep {
    --return-prep-scroll-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .return-prep-hero,
  .return-prep-special-grid,
  .return-task-actions {
    grid-template-columns: 1fr;
  }

  .return-prep-constellation-panel {
    min-height: auto;
  }

  .return-album-grid {
    grid-template-columns: 1fr;
  }
}

@keyframes setup-name-action-sweep {
  0%,
  38% {
    opacity: 0;
    transform: translateX(-72%);
  }

  52% {
    opacity: 0.9;
  }

  72%,
  100% {
    opacity: 0;
    transform: translateX(72%);
  }
}

@keyframes setup-name-action-halo {
  0% {
    transform: rotate(0deg) scale(0.94);
  }

  100% {
    transform: rotate(360deg) scale(0.94);
  }
}

@keyframes setup-name-action-breathe {
  0%,
  100% {
    opacity: 0.62;
    transform: scale(0.9);
  }

  50% {
    opacity: 0.96;
    transform: scale(1.04);
  }
}

@keyframes setup-name-action-spark {
  0%,
  100% {
    opacity: 0.46;
    transform: translate3d(0, 0, 0) scale(0.8);
  }

  45% {
    opacity: 1;
    transform: translate3d(-3px, 2px, 0) scale(1.18);
  }
}

@media (max-width: 420px) {
  .mystery-card {
    top: calc(76px + env(safe-area-inset-top, 0px));
    padding: 16px 14px;
  }

  .mystery-keepsake {
    bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  }
}

.setup-plain-list {
  display: grid;
  gap: 10px;
  color: var(--text-soft);
  line-height: 1.55;
}

.setup-plain-list div,
.setup-goal-note,
.setup-egg-summary {
  padding: 12px 13px;
  border-radius: 14px;
  background: rgba(255, 246, 232, 0.78);
  border: 1px solid rgba(105, 73, 40, 0.1);
}

.setup-goal-note {
  color: var(--text-soft);
}

.setup-egg-summary {
  display: grid;
  gap: 6px;
  color: var(--text-soft);
}

.setup-egg-summary strong {
  color: var(--text);
}

.setup-child-origin-video-screen,
.setup-child-egg-screen {
  min-height: 100dvh;
  height: 100dvh;
  padding: 0;
  display: grid;
  place-items: stretch center;
  background: #070a10;
  overflow: hidden;
}

.child-origin-video-world {
  position: relative;
  width: min(100vw, 430px);
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

.child-origin-video-player {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  background: #000;
}

.child-origin-video-play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: rgba(255, 246, 230, 0.98);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 181, 92, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(3, 5, 10, 0.08), rgba(3, 5, 10, 0.28));
  cursor: pointer;
}

.child-origin-video-play:disabled,
.child-origin-video-world.is-playing .child-origin-video-play {
  opacity: 0;
  pointer-events: none;
}

.child-origin-video-play-icon {
  position: relative;
  width: clamp(70px, 19vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.92), rgba(255, 236, 202, 0.82) 46%, rgba(255, 173, 82, 0.76));
  border: 1px solid rgba(255, 239, 205, 0.68);
  box-shadow:
    0 0 36px rgba(255, 156, 72, 0.46),
    0 18px 34px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.child-origin-video-play-icon::before {
  content: "";
  position: absolute;
  left: 39%;
  top: 31%;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 25px solid #342517;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.28));
}

.child-egg-world {
  width: min(100vw, 430px);
  min-height: 100dvh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: #070a10;
  box-shadow: none;
  isolation: isolate;
}

.child-egg-world::before,
.child-egg-world::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.child-egg-world::before {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(3, 5, 10, 0.44), rgba(3, 5, 10, 0) 34%),
    linear-gradient(0deg, rgba(3, 5, 10, 0.58), rgba(3, 5, 10, 0) 34%);
}

.child-egg-world::after {
  z-index: 3;
  bottom: auto;
  height: var(--phoenix-speaking-highlight-start);
  background:
    linear-gradient(180deg, rgba(3, 5, 10, 0.68), rgba(3, 5, 10, 0.42) 58%, rgba(3, 5, 10, 0.14));
  -webkit-backdrop-filter: blur(3px) saturate(0.9);
  backdrop-filter: blur(3px) saturate(0.9);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
}

.child-egg-world .setup-final-egg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  filter: none;
}

.child-egg-world .asset-pet-container,
.child-egg-world .asset-pet-art {
  width: 100%;
  height: 100%;
}

.child-egg-world .asset-pet-art {
  aspect-ratio: auto;
  transform: none;
  transform-origin: center;
}

.child-egg-world .asset-base-img,
.child-egg-world .asset-base-layer .pet-svg,
.child-egg-world .asset-base-layer .egg-svg {
  object-fit: cover;
  object-position: center;
  filter: none;
}

.child-egg-world .child-egg-door-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform-origin: center;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.child-egg-world .setup-final-egg[data-child-egg-art-variant="real-door-v1"] .child-egg-door-img {
  object-fit: contain;
  object-position: center;
  transform: none;
}

.child-egg-world .asset-speech-bubble {
  display: none;
}

.child-take-home-transition {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 236, 186, 0.34), rgba(255, 236, 186, 0) 16%),
    radial-gradient(circle at 50% 48%, rgba(76, 37, 20, 0.92), rgba(9, 13, 24, 0.98) 54%, #03050a 100%);
  animation: child-take-home-transition-out 1180ms cubic-bezier(0.2, 0.68, 0.14, 1) both;
}

.child-take-home-transition::before,
.child-take-home-transition::after,
.child-take-home-transition > span {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.child-take-home-transition::before {
  background:
    linear-gradient(90deg, rgba(1, 3, 9, 0.92), rgba(1, 3, 9, 0) 22%, rgba(1, 3, 9, 0) 78%, rgba(1, 3, 9, 0.92)),
    repeating-conic-gradient(from 8deg at 50% 48%, rgba(255, 240, 195, 0.28) 0deg 8deg, rgba(255, 126, 72, 0.05) 8deg 17deg, rgba(70, 108, 155, 0.12) 17deg 24deg);
  mix-blend-mode: screen;
  opacity: 0.78;
  transform: scale(1.18) rotate(0deg);
  animation: child-take-home-tunnel-spin 1180ms cubic-bezier(0.2, 0.78, 0.16, 1) both;
}

.child-take-home-transition::after {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, 0.96) 0 9%, rgba(255, 243, 211, 0.72) 18%, rgba(255, 243, 211, 0) 48%);
  opacity: 0;
  transform: scale(0.34);
  filter: blur(12px);
  animation: child-take-home-core-flash 1180ms cubic-bezier(0.12, 0.82, 0.14, 1) both;
}

.child-take-home-transition-door {
  inset: 7dvh 11vw 8dvh;
  border-radius: 46% 46% 20% 20% / 18% 18% 14% 14%;
  border: 2px solid rgba(255, 213, 143, 0.38);
  box-shadow:
    0 0 48px rgba(255, 179, 90, 0.28),
    inset 0 0 54px rgba(255, 226, 171, 0.16),
    inset 0 -30px 70px rgba(20, 7, 2, 0.72);
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255, 244, 218, 0.3), rgba(255, 198, 122, 0.13) 28%, rgba(15, 10, 15, 0.82) 68%),
    linear-gradient(180deg, rgba(95, 52, 28, 0.62), rgba(8, 9, 16, 0.92));
  transform: perspective(760px) translateZ(0) scale(1);
  animation: child-take-home-door-open 1180ms cubic-bezier(0.2, 0.74, 0.12, 1) both;
}

.child-take-home-transition-tunnel {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, 0.78) 0 5%, rgba(255, 213, 124, 0.38) 12%, rgba(94, 154, 188, 0.18) 32%, rgba(3, 5, 12, 0) 58%),
    repeating-radial-gradient(ellipse at 50% 48%, rgba(255, 238, 182, 0.2) 0 4px, rgba(255, 238, 182, 0) 5px 16px);
  opacity: 0;
  transform: scale(0.42);
  filter: blur(1px) saturate(1.28);
  animation: child-take-home-tunnel-rush 1180ms cubic-bezier(0.16, 0.84, 0.12, 1) both;
}

.child-take-home-transition-egg-glow {
  inset: auto;
  left: 50%;
  top: 56%;
  width: clamp(86px, 26vw, 142px);
  height: clamp(112px, 34vw, 184px);
  border-radius: 50% 50% 46% 46%;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.98), rgba(255, 226, 148, 0.92) 36%, rgba(255, 128, 73, 0.58) 70%, rgba(255, 128, 73, 0) 100%);
  box-shadow:
    0 0 32px rgba(255, 242, 196, 0.9),
    0 0 78px rgba(255, 132, 66, 0.54);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.68);
  animation: child-take-home-egg-lift 1180ms cubic-bezier(0.18, 0.72, 0.14, 1) both;
}

.child-take-home-transition-flash {
  background: #fff;
  opacity: 0;
  animation: child-take-home-white-flash 1180ms ease-out both;
}

.global-touch-ripple {
  position: fixed;
  z-index: 360;
  width: clamp(84px, 26vw, 142px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(255, 118, 94, 0.86);
  box-shadow:
    0 0 22px rgba(255, 93, 61, 0.32),
    inset 0 0 18px rgba(255, 205, 128, 0.18);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.24);
  animation: global-touch-ripple 780ms ease-out forwards;
}

body.narration-locked :is(
  [data-action="setup-next-step"],
  [data-action="finish-intro-video"],
  [data-action="start-setup-playthrough"],
  [data-action="finish-setup-trial-pet-name"],
  [data-action="finish-pre-hatch-pet-name"],
  [data-action="start-formal-setup"],
  [data-action="start-first-journey"],
  [data-action="answer-egg-energy"],
  [data-action="next-guide-step"],
  [data-action="finish-guide-task"],
  [data-action="dismiss-celebration"],
  [data-action="dismiss-scene-feedback"],
  [data-action="watch-farewell-story"],
  [data-action="start-mystery-search"],
  [data-action="answer-mystery-question"],
  [data-action="restart-mystery-question"],
  [data-action="claim-task"]
) {
  cursor: wait;
  opacity: 0.72;
  filter: saturate(0.82);
}

.child-egg-topbar {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 14px;
  right: 14px;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  pointer-events: none;
}

.child-egg-brand,
.child-egg-settings {
  pointer-events: auto;
  color: rgba(255, 238, 210, 0.94);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 146, 59, 0.2), transparent 58%),
    linear-gradient(180deg, rgba(20, 14, 11, 0.68), rgba(5, 7, 11, 0.52));
  border: 1px solid rgba(255, 162, 82, 0.22);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 224, 180, 0.12);
  backdrop-filter: blur(12px);
}

.child-egg-brand {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border-radius: 999px;
  font-family: var(--header-font);
  font-weight: 900;
  letter-spacing: 0.03em;
  text-shadow: 0 0 18px rgba(255, 130, 54, 0.24);
}

.child-egg-settings {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.child-egg-dialogue {
  position: absolute;
  top: var(--phoenix-speaking-dialogue-top);
  left: 50%;
  width: min(76%, 340px);
  z-index: 4;
  display: grid;
  place-items: center;
  min-height: 1.55em;
  pointer-events: none;
  transform: translateX(-50%);
}

.child-egg-dialogue::before {
  content: "";
  position: absolute;
  inset: clamp(-6px, -1.4vw, -4px) clamp(-18px, -4.5vw, -12px);
  z-index: -1;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 183, 82, 0.24), transparent 62%),
    linear-gradient(180deg, rgba(23, 14, 10, 0.74), rgba(6, 8, 14, 0.56));
  border: 1px solid rgba(255, 179, 91, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 197, 0.14),
    0 12px 28px rgba(0, 0, 0, 0.42),
    0 0 34px rgba(255, 116, 36, 0.16);
  backdrop-filter: blur(12px);
}

.child-egg-dialogue::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: clamp(-10px, -2vw, -7px);
  z-index: -2;
  width: 38%;
  height: 10px;
  border-radius: 999px;
  background: radial-gradient(ellipse, rgba(255, 174, 73, 0.28), transparent 72%);
  filter: blur(8px);
  transform: translateX(-50%);
}

.child-egg-dialogue-line {
  display: none;
  margin: 0;
  max-width: none;
  color: #fff8ed;
  font-family: var(--header-font);
  font-size: clamp(1.18rem, min(4.8vw, 1.29rem), 1.52rem);
  font-weight: 850;
  line-height: 1.18;
  letter-spacing: 0;
  text-align: center;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.74),
    0 10px 26px rgba(0, 0, 0, 0.42);
}

.child-egg-dialogue-line.active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  animation: child-egg-dialogue-in 280ms ease both;
}

.child-egg-dialogue-text {
  display: inline;
}

.child-egg-next-prompt {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  margin: -4px -4px -5px 0;
  padding: 0;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  color: rgba(255, 239, 214, 0.96);
  background: transparent;
  border: 0;
  box-shadow: none;
  appearance: none;
  transform: translateY(2px) scale(0.86);
  transition: opacity 220ms ease, transform 260ms ease;
}

.child-egg-next-prompt.ready {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.child-egg-dialogue-line .child-egg-next-prompt[aria-hidden="true"] {
  display: none;
}

.child-egg-world > .child-egg-next-prompt {
  display: none;
}

.child-egg-next-prompt-hand {
  position: relative;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  transform-origin: 50% 90%;
  filter:
    drop-shadow(0 0 10px rgba(255, 188, 95, 0.56))
    drop-shadow(0 4px 8px rgba(0, 0, 0, 0.36));
}

.child-egg-next-prompt.ready .child-egg-next-prompt-hand {
  animation: child-egg-next-hand-tap 1.32s ease-in-out infinite;
}

.child-egg-next-prompt-finger-icon {
  width: 26px;
  height: 26px;
  overflow: visible;
}

.child-egg-finger-body {
  fill: #ffb35f;
  stroke: #fff0c8;
  stroke-width: 1.45;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(255, 198, 92, 0.42));
}

.child-egg-finger-line,
.child-egg-finger-nail {
  fill: none;
  stroke: rgba(105, 48, 19, 0.58);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.child-egg-next-prompt-touch-ring {
  position: absolute;
  left: 49%;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255, 230, 158, 0.92);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.46);
  box-shadow:
    0 0 12px rgba(255, 187, 82, 0.76),
    inset 0 0 8px rgba(255, 255, 220, 0.62);
}

.child-egg-next-prompt.ready .child-egg-next-prompt-touch-ring {
  animation: child-egg-next-touch-ring 1.32s ease-out infinite;
}

.child-egg-next-prompt-text {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .child-take-home-transition {
    background: #fff;
    animation: child-take-home-reduced-flash 480ms ease-out both;
  }

  .child-take-home-transition::before,
  .child-take-home-transition::after,
  .child-take-home-transition-door,
  .child-take-home-transition-tunnel,
  .child-take-home-transition-egg-glow,
  .child-take-home-transition-flash {
    display: none;
    animation: none;
  }

  .child-egg-next-prompt.ready .child-egg-next-prompt-hand,
  .child-egg-next-prompt.ready .child-egg-next-prompt-touch-ring {
    animation: none;
  }

  .child-egg-next-prompt-touch-ring {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

@keyframes child-take-home-transition-out {
  0% {
    opacity: 0;
  }

  8%,
  88% {
    opacity: 1;
  }

  100% {
    opacity: 0.98;
  }
}

@keyframes child-take-home-door-open {
  0% {
    opacity: 0.96;
    filter: brightness(0.9) saturate(1);
    transform: perspective(760px) translateZ(0) scale(0.98);
  }

  32% {
    opacity: 1;
    filter: brightness(1.22) saturate(1.18);
    transform: perspective(760px) translateZ(60px) scale(1.06);
  }

  68% {
    opacity: 0.34;
    filter: brightness(1.62) saturate(1.35) blur(2px);
    transform: perspective(760px) translateZ(220px) scale(1.42);
  }

  100% {
    opacity: 0;
    filter: brightness(2.6) saturate(1.45) blur(8px);
    transform: perspective(760px) translateZ(420px) scale(1.88);
  }
}

@keyframes child-take-home-tunnel-spin {
  0% {
    opacity: 0;
    transform: scale(1.14) rotate(0deg);
  }

  18% {
    opacity: 0.72;
  }

  74% {
    opacity: 0.92;
    transform: scale(0.72) rotate(28deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.42) rotate(42deg);
  }
}

@keyframes child-take-home-tunnel-rush {
  0% {
    opacity: 0;
    filter: blur(5px) saturate(1.08);
    transform: scale(0.3);
  }

  24% {
    opacity: 0.64;
    filter: blur(2px) saturate(1.16);
    transform: scale(0.7);
  }

  68% {
    opacity: 0.96;
    filter: blur(0) saturate(1.36);
    transform: scale(1.42);
  }

  100% {
    opacity: 0;
    filter: blur(12px) saturate(1.1);
    transform: scale(2.5);
  }
}

@keyframes child-take-home-egg-lift {
  0% {
    opacity: 0;
    transform: translate(-50%, -30%) scale(0.54);
  }

  18% {
    opacity: 0.92;
    transform: translate(-50%, -42%) scale(0.74);
  }

  58% {
    opacity: 1;
    transform: translate(-50%, -56%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -62%) scale(2.25);
  }
}

@keyframes child-take-home-core-flash {
  0% {
    opacity: 0;
    transform: scale(0.18);
    filter: blur(16px);
  }

  34% {
    opacity: 0.36;
    transform: scale(0.56);
    filter: blur(10px);
  }

  72% {
    opacity: 1;
    transform: scale(1.55);
    filter: blur(4px);
  }

  100% {
    opacity: 0;
    transform: scale(2.4);
    filter: blur(18px);
  }
}

@keyframes child-take-home-white-flash {
  0%,
  56% {
    opacity: 0;
  }

  72% {
    opacity: 0.9;
  }

  86% {
    opacity: 1;
  }

  100% {
    opacity: 0.16;
  }
}

@keyframes child-take-home-reduced-flash {
  0% {
    opacity: 0;
  }

  28%,
  72% {
    opacity: 0.92;
  }

  100% {
    opacity: 0;
  }
}

@keyframes child-egg-dialogue-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes setup-config-dialogue-line-cycle {
  0%,
  4%,
  20% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }

  25%,
  100% {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(-0.28em) scale(0.99);
  }
}

@keyframes setup-name-dialogue-line-reveal {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(0.45em) scale(0.99);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes setup-name-form-overlay-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes setup-name-form-sheet-in {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(18px) scale(0.96);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes egg-energy-dialogue-char-in {
  0% {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(0.42em) scale(0.96);
  }

  58% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(-0.04em) scale(1.02);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes child-egg-next-hand-tap {
  0% {
    transform: translateY(-3px) rotate(-7deg) scale(1);
  }

  38% {
    transform: translateY(-3px) rotate(-7deg) scale(1);
  }

  52% {
    transform: translateY(2px) rotate(0deg) scale(0.96);
  }

  63% {
    transform: translateY(1px) rotate(0deg) scale(0.98);
  }

  82%,
  100% {
    transform: translateY(-3px) rotate(-7deg) scale(1);
  }
}

@keyframes child-egg-next-touch-ring {
  0%,
  42% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.42);
  }

  52% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scale(0.62);
  }

  82%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

@keyframes global-touch-ripple {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18);
  }

  18% {
    opacity: 0.94;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.18);
  }
}

.child-egg-actions-on-image {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 10px;
  padding: 8px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(18, 12, 9, 0.74), rgba(4, 6, 10, 0.62));
  border: 1px solid rgba(255, 143, 70, 0.18);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 220, 170, 0.12);
  backdrop-filter: blur(12px);
}

.child-egg-actions-on-image .ghost-button,
.child-egg-actions-on-image .primary-button {
  min-height: 52px;
  width: 100%;
  border-radius: 999px;
  color: rgba(255, 239, 214, 0.92);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 154, 81, 0.18), transparent 60%),
    linear-gradient(180deg, rgba(39, 30, 23, 0.86), rgba(10, 11, 14, 0.82));
  border: 1px solid rgba(255, 171, 103, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 178, 0.14),
    0 10px 20px rgba(0, 0, 0, 0.28);
  font-weight: 900;
}

.child-egg-actions-on-image .primary-button {
  color: rgba(255, 225, 174, 0.96);
  border-color: rgba(255, 185, 91, 0.34);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 154, 81, 0.28), transparent 58%),
    linear-gradient(180deg, rgba(70, 42, 23, 0.88), rgba(20, 13, 12, 0.86));
  text-shadow: 0 0 16px rgba(255, 126, 49, 0.28);
}

.child-egg-home-popover {
  position: absolute;
  left: 50%;
  top: clamp(355px, 47dvh, 560px);
  z-index: 5;
  width: clamp(92px, 24vw, 168px);
  min-width: 0;
  padding: 0;
  border-radius: 0;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  justify-content: center;
  justify-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  transition:
    opacity 240ms ease,
    transform 320ms cubic-bezier(0.18, 0.9, 0.24, 1.12);
}

.child-egg-home-popover.ready {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.child-egg-home-choice {
  width: 100%;
  min-width: 0;
  height: 34px;
  min-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: rgba(255, 246, 229, 0.92);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 154, 81, 0.18), transparent 56%),
    linear-gradient(180deg, rgba(36, 27, 21, 0.82), rgba(11, 12, 14, 0.82));
  border: 1px solid rgba(255, 170, 105, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 178, 0.14),
    0 5px 10px rgba(0, 0, 0, 0.3);
  font-family: var(--body-font);
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1;
  text-shadow: 0 0 7px rgba(255, 145, 64, 0.28);
}

.child-egg-home-choice > span {
  display: inline-block;
  font-size: 1.58rem;
  line-height: 1;
  transform: translateY(-1px);
}

.child-egg-home-choice-no {
  color: rgba(255, 192, 156, 0.95);
}

.child-egg-home-choice-yes {
  color: rgba(255, 218, 159, 0.96);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 154, 81, 0.24), transparent 58%),
    linear-gradient(180deg, rgba(42, 31, 21, 0.86), rgba(12, 13, 15, 0.84));
  border-color: rgba(255, 186, 95, 0.34);
}

.child-egg-home-choice:active {
  transform: translateY(1px) scale(0.99);
}

/* One-line phoenix dialogue plates must use the same real box size everywhere. */
.egg-energy-prompt-stack,
.setup-name-dialogue-stack,
.child-egg-dialogue {
  width: var(--phoenix-dialogue-layer-width);
  max-width: calc(100vw - 28px);
}

.egg-energy-dialogue,
.child-egg-dialogue,
.setup-config-world--name-prompt-stage .setup-name-dialogue-stack .setup-config-dialogue-lines {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  height: var(--phoenix-dialogue-layer-min-height);
  min-height: var(--phoenix-dialogue-layer-min-height);
  max-height: var(--phoenix-dialogue-layer-min-height);
  padding: 0 var(--phoenix-dialogue-layer-padding-x);
  overflow: hidden;
  border-radius: var(--phoenix-dialogue-layer-radius);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 183, 82, 0.24), transparent 62%),
    linear-gradient(180deg, rgba(23, 14, 10, 0.78), rgba(6, 8, 14, 0.66));
  border: 1px solid rgba(255, 179, 91, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 197, 0.14),
    0 12px 28px rgba(0, 0, 0, 0.38),
    0 0 34px rgba(255, 116, 36, 0.16);
  backdrop-filter: blur(12px);
}

.child-egg-dialogue {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.egg-energy-dialogue.is-long,
.child-egg-dialogue:has(.child-egg-dialogue-line.active.is-long),
.setup-config-world--name-prompt-stage .setup-name-dialogue-stack .setup-config-dialogue-lines.is-long {
  min-height: var(--phoenix-dialogue-layer-min-height);
}

.egg-energy-dialogue.is-long p,
.egg-energy-dialogue.is-long .egg-energy-dialogue-text,
.egg-energy-dialogue.is-long .egg-energy-dialogue-phrase,
.child-egg-dialogue-line.active.is-long,
.child-egg-dialogue-line.active.is-long .child-egg-dialogue-text,
.setup-config-world--name-prompt-stage .setup-config-dialogue-lines.is-long .setup-config-dialogue-line {
  font-size: var(--phoenix-dialogue-long-font-size);
  line-height: var(--phoenix-dialogue-long-line-height);
}

.egg-energy-dialogue::before,
.child-egg-dialogue::before {
  content: none;
}

.egg-energy-dialogue::after,
.child-egg-dialogue::after,
.setup-config-world .setup-config-dialogue-lines::after {
  width: 38%;
}

.egg-energy-dialogue p,
.egg-energy-dialogue-text,
.egg-energy-dialogue-phrase,
.child-egg-dialogue-line,
.child-egg-dialogue-line.active,
.setup-config-world.setup-config-world--name-prompt-stage .setup-config-dialogue-line {
  width: 100%;
  max-width: 100%;
}

.egg-energy-dialogue p,
.egg-energy-dialogue-text,
.egg-energy-dialogue-phrase,
.child-egg-dialogue-line.active,
.child-egg-dialogue-line.active .child-egg-dialogue-text,
.setup-config-world.setup-config-world--name-prompt-stage .setup-config-dialogue-line {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: keep-all;
  text-align: center;
}

.egg-energy-dialogue-phrase,
.child-egg-dialogue-line.active {
  align-content: center;
  justify-content: center;
}

.child-egg-dialogue-line.active {
  position: relative;
  inset: auto;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 100%;
  gap: 0;
  width: 100%;
  height: auto;
  max-height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.child-egg-dialogue-line.active .child-egg-dialogue-text {
  min-width: 0;
  display: block;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

.child-egg-dialogue > .child-egg-next-prompt {
  position: absolute;
  z-index: 2;
  right: clamp(4px, 3vw, 18px);
  bottom: clamp(-38px, -7vw, -26px);
  margin: 0;
  transform: translate(30%, 2px) scale(0.86);
}

.child-egg-dialogue > .child-egg-next-prompt.ready {
  transform: translate(30%, 0) scale(1);
}

.child-egg-dialogue-line .child-egg-next-prompt {
  display: none;
}

@media (max-width: 430px) {
  .setup-simple-screen {
    padding-left: 10px;
    padding-right: 10px;
  }

  .setup-simple-panel {
    border-radius: 16px;
  }

  .setup-simple-actions {
    grid-template-columns: 1fr;
  }

  .setup-child-egg-screen {
    padding-left: 0;
    padding-right: 0;
  }

  .setup-goal-panel .setup-simple-actions {
    grid-template-columns: 0.82fr 1.18fr;
  }
}

/* Shared short-screen safety contract for older iPhones and compact Android viewports. */
@media (max-height: 780px) and (max-width: 520px) {
  :root {
    --phoenix-dialogue-layer-width: min(78vw, 324px);
    --phoenix-dialogue-layer-min-height: 52px;
    --phoenix-dialogue-layer-padding-x: 14px;
    --phoenix-dialogue-long-font-size: clamp(0.9rem, min(3.6vw, 0.97rem), 1rem);
    --phoenix-speaking-dialogue-top: max(calc(292px + env(safe-area-inset-top, 0px)), 40dvh);
  }

  .shell-frame-no-topbar[class*="shell-frame-child-home--"] .screen-body,
  .shell-frame-no-topbar[class*="shell-frame-child-home--"] .home-shell-v2,
  .shell-frame-no-topbar[class*="shell-frame-child-home--"] .home-shell-v2 .mythic-home-shell {
    height: 100dvh;
    min-height: 100dvh;
  }

  .mythic-home-topbar,
  .child-egg-topbar {
    --mythic-topbar-pill-height: 42px;
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: 10px;
    right: 10px;
    gap: 8px;
  }

  .mythic-stage-badge {
    width: 140px;
    min-width: 140px;
    height: var(--mythic-topbar-pill-height);
    min-height: var(--mythic-topbar-pill-height);
    flex-basis: 140px;
  }

  .mythic-parent-entry,
  .child-egg-settings {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }

  .mythic-stage-badge {
    padding-inline: 12px;
  }

  .mythic-stage-badge-kicker {
    font-size: 0.7rem;
  }

  .mythic-stage-badge-name {
    font-size: 0.92rem;
  }

  .mythic-home-pill {
    padding: 6px 10px;
  }

  .mythic-xp-meter {
    width: 92px;
    min-width: 92px;
    gap: 4px;
  }

  .child-egg-brand {
    min-height: 40px;
    padding-inline: 14px;
    font-size: 0.9rem;
  }

  .home-shell-v2 :is(
    .mythic-home-shell--pet,
    .mythic-home-shell--today,
    .mythic-home-shell--play,
    .mythic-home-shell--story,
    .mythic-home-shell--album
  ) .asset-base-img,
  .home-shell-v2 :is(
    .mythic-home-shell--pet,
    .mythic-home-shell--today,
    .mythic-home-shell--play,
    .mythic-home-shell--story,
    .mythic-home-shell--album
  ) .asset-base-layer .pet-svg,
  .home-shell-v2 :is(
    .mythic-home-shell--pet,
    .mythic-home-shell--today,
    .mythic-home-shell--play,
    .mythic-home-shell--story,
    .mythic-home-shell--album
  ) .asset-base-layer .egg-svg {
    object-fit: contain;
    object-position: center;
    background: #070a10;
  }

  .home-shell-v2 :is(
    .mythic-home-shell--today,
    .mythic-home-shell--play,
    .mythic-home-shell--story,
    .mythic-home-shell--album
  ) .mythic-scene-card {
    top: calc(82px + env(safe-area-inset-top, 0px));
    left: 18px;
    right: 18px;
  }

  .home-shell-v2 .mythic-task-checklist-card {
    width: min(78vw, 360px);
  }

  .mythic-task-checklist {
    gap: 6px;
  }

  .mythic-task-check-row {
    min-height: 34px;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    padding-block: 4px;
  }

  .mythic-task-check-box {
    width: 22px;
    height: 22px;
    border-radius: 7px;
  }

  .mythic-task-check-box svg {
    width: 15px;
    height: 15px;
  }

  .mythic-task-check-label {
    font-size: clamp(0.92rem, min(3.6vw, 0.97rem), 1.08rem);
    line-height: 1.08;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: normal;
  }

  .mythic-task-feedback-bubble--pet-tap {
    top: var(--phoenix-speaking-dialogue-top);
  }

  .mythic-home-dock {
    left: 50%;
    right: auto;
    bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    width: min(calc(100vw - 28px), 330px);
    grid-template-columns: repeat(5, minmax(0, 48px));
    justify-content: center;
    gap: 7px;
    padding: 7px;
    transform: translateX(-50%);
  }

  .mythic-dock-button {
    min-height: 0;
  }

  .child-egg-home-popover {
    top: clamp(330px, 48dvh, 470px);
  }
}