.result-screen { padding: max(18px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom)); }

.start-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: max(16px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative;
  background:
    linear-gradient(180deg, rgba(4, 5, 24, .35) 0%, rgba(8, 8, 37, .16) 46%, rgba(4, 5, 22, .88) 82%, #050615 100%),
    url('/assets/campaign-v3/arena-atmosphere-mist-lanes-v1.png') center top / cover no-repeat,
    #07071e;
}

.start-screen::before,
.leaderboard-screen::before,
.result-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .2;
  background-image: linear-gradient(135deg, transparent 44%, rgba(105, 90, 255, .5) 45% 55%, transparent 56%);
  background-size: 76px 76px;
  mask-image: linear-gradient(180deg, #000, transparent 82%);
}

.ambient { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .42; pointer-events: none; z-index: 0; }
.ambient-one { width: 190px; height: 190px; background: #6337ff; left: -108px; top: 210px; }
.ambient-two { width: 160px; height: 160px; background: #1fb4ff; right: -100px; top: 490px; }

.brand-row, .challenge-banner, .hero-visual, .title-block, .start-actions, .start-screen > button, .fine-print { position: relative; z-index: 2; }

/* Authentic Taoist / Martial Temple Header */
.brand-row {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 4px 12px;
  border-radius: 14px;
  border: 1px solid rgba(141, 92, 255, 0.35);
  background: linear-gradient(135deg, rgba(20, 16, 54, 0.82), rgba(7, 10, 32, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 16px rgba(0, 0, 0, 0.3);
}
.brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 231, 122, 0.6);
  border-radius: 11px;
  font-weight: 950;
  color: #1a1638;
  background: linear-gradient(135deg, #ffe879, #e5b020);
  box-shadow: 0 4px 12px rgba(255, 205, 44, .35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.brand-logo {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  background: none;
  box-shadow: none;
}
.brand-row div { display: grid; gap: 1px; }
.brand-row strong { font-size: 11px; letter-spacing: .15em; color: #f6f3ff; }
.brand-row span:not(.brand-mark):not(.resolve-seal) { font-size: 10px; color: #b7b8de; letter-spacing: .1em; }
.resolve-seal {
  margin-left: auto;
  padding: 3px 8px;
  color: #9d2028;
  background: #fff2d6;
  border: 2px solid #c43b42;
  border-radius: 4px;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: 12px;
  font-weight: 950;
  transform: rotate(3deg);
  box-shadow: 0 3px 0 rgba(106, 21, 40, .65), 0 0 12px rgba(220, 50, 70, 0.35);
  letter-spacing: 0.05em;
}

/* Martial Challenge Decree */
.challenge-banner {
  width: 100%;
  max-width: 440px;
  margin: 6px auto 0;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1.5px solid rgba(255, 221, 91, .65);
  background: linear-gradient(135deg, rgba(58, 38, 16, 0.72), rgba(28, 12, 45, 0.88));
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 16px rgba(255, 200, 60, 0.2), inset 0 1px 0 rgba(255, 231, 122, 0.3);
}
.challenge-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #1a1030;
  background: linear-gradient(135deg, #ffe77a, #e6a817);
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 0 10px rgba(255, 220, 80, 0.5);
}
.challenge-banner div { display: grid; gap: 2px; }
.challenge-banner strong { font-size: 11px; color: #ffe77a; }
.challenge-banner span { font-size: 9px; color: #e5e3ff; }

/* Hero Visual Stage with Bagua Ring & Grand Hero Ghost Visual */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: clamp(220px, 29vh, 250px);
  margin: 2px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}

/* Spirit ground stage glow */
.hero-visual::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(160px, 24vh, 210px);
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(85, 233, 255, 0.38) 0%, rgba(141, 92, 255, 0.22) 45%, transparent 72%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 1;
}

.flame-aura {
  position: absolute;
  border-radius: 50%;
  filter: blur(14px);
}

.flame-aura-back {
  top: 50%;
  left: 50%;
  width: 210px;
  height: 210px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(141, 92, 255, 0.32) 0%, rgba(85, 233, 255, 0.2) 44%, transparent 74%),
    conic-gradient(from 0deg at 50% 50%, rgba(255, 231, 122, 0.4) 0deg 20deg, transparent 20deg 45deg, rgba(85, 233, 255, 0.4) 45deg 65deg, transparent 65deg 90deg, rgba(255, 231, 122, 0.4) 90deg 110deg, transparent 110deg 135deg, rgba(85, 233, 255, 0.4) 135deg 155deg, transparent 155deg 180deg, rgba(255, 231, 122, 0.4) 180deg 200deg, transparent 200deg 225deg, rgba(85, 233, 255, 0.4) 225deg 245deg, transparent 245deg 270deg, rgba(255, 231, 122, 0.4) 270deg 290deg, transparent 290deg 315deg, rgba(85, 233, 255, 0.4) 315deg 335deg, transparent 335deg 360deg);
  border: 2px dashed rgba(255, 231, 122, 0.48);
  box-shadow: 0 0 42px rgba(141, 92, 255, 0.6), inset 0 0 32px rgba(85, 233, 255, 0.42);
  animation: baguaRotate 28s linear infinite;
  z-index: 1;
}

@keyframes baguaRotate {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.hero-logo-art {
  position: absolute;
  left: 50%;
  top: -4px;
  transform: translateX(-50%) rotate(-1deg);
  width: min(90%, 290px);
  height: clamp(58px, 8.5vh, 72px);
  color: transparent;
  font-size: 0;
  background: var(--asset-logo-url, url('/assets/campaign-v1/kato-ying-logo.png')) center / contain no-repeat;
  filter: drop-shadow(0 0 20px rgba(151, 69, 255, 0.9)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
  z-index: 4;
}

.hero-ghost-art {
  position: absolute;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 22px rgba(141, 92, 255, 0.85)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6));
}

/* Enlarge main hero ghost prominently */
.hero-ghost-main {
  width: clamp(160px, 22.5vh, 204px);
  height: clamp(176px, 24.5vh, 225px);
  left: calc(50% - clamp(160px, 22.5vh, 204px) / 2);
  top: clamp(40px, 5.5vh, 50px);
  background-image: var(--asset-home-ghost-url, url('/assets/campaign-v1/ghost-frames/slow-thinker.png'));
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 2;
  animation: ghostHover 3.4s ease-in-out infinite alternate;
}

/* Scaled companion ghost */
.hero-ghost-companion {
  width: clamp(60px, 8.5vh, 76px);
  height: clamp(70px, 9.8vh, 88px);
  right: calc(50% - clamp(100px, 14vh, 126px));
  top: clamp(116px, 16vh, 148px);
  background-image: var(--asset-home-companion-url, url('/assets/campaign-v1/ghost-frames/word-drop.png'));
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 3;
  animation: companionHover 2.8s ease-in-out infinite alternate;
}

@keyframes ghostHover {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

@keyframes companionHover {
  0% { transform: translateY(0) rotate(-4deg); }
  100% { transform: translateY(-9px) rotate(5deg); }
}

/* Floating Talisman Lantern Embers */
.hero-spark {
  position: absolute;
  font-weight: 900;
  pointer-events: none;
  z-index: 5;
  animation: talismanFloat 3.2s ease-in-out infinite alternate;
}
.spark-one {
  left: 16px;
  top: 42px;
  font-size: 24px;
  color: #55e9ff;
  text-shadow: 0 0 16px #55e9ff, 0 0 26px rgba(85, 233, 255, 0.65);
  animation-duration: 2.8s;
}
.spark-two {
  right: 14px;
  top: 30px;
  color: #ffd12f;
  font-size: 22px;
  text-shadow: 0 0 16px #ffd12f, 0 0 26px rgba(255, 209, 47, 0.65);
  animation-duration: 3.4s;
  animation-delay: -0.6s;
}
.spark-three {
  left: 14px;
  top: 154px;
  color: #bd76ff;
  font-size: 20px;
  text-shadow: 0 0 16px #bd76ff, 0 0 24px rgba(189, 118, 255, 0.55);
  animation-duration: 3.8s;
  animation-delay: -1.2s;
}

@keyframes talismanFloat {
  0% { transform: translateY(0) rotate(-4deg) scale(0.95); opacity: 0.85; }
  50% { transform: translateY(-10px) rotate(6deg) scale(1.1); opacity: 1; }
  100% { transform: translateY(2px) rotate(-2deg) scale(0.98); opacity: 0.9; }
}

/* Title & Subtitle Block */
.title-block {
  text-align: center;
  margin: 4px 0 10px;
  width: 100%;
  max-width: 440px;
}
.eyebrow {
  display: inline-block;
  color: #caa8ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
}
.title-block .subtitle {
  margin: 2px 0 0;
  color: #fff4e1;
  font-size: clamp(20px, 5.5vw, 24px);
  font-weight: 950;
  letter-spacing: .2em;
  text-shadow: 0 3px 0 #7d2d7a, 0 0 16px rgba(189, 118, 255, 0.4);
}
.hook {
  color: #d9e2ff;
  font-size: 14px;
  line-height: 1.45;
  margin: 4px 0 0;
}
.hook strong {
  color: #d17cff;
}

/* Action / Button Group */
.start-actions {
  width: 100%;
  max-width: 440px;
  margin: clamp(34px, 7vh, 64px) auto 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

/* v1.3.16 — 七鬼現形首頁。群像僅使用正式結果鬼資產。 */
.start-screen .title-block {
  margin: 10px auto 0;
  max-width: 440px;
  position: relative;
  z-index: 5;
}

.start-screen .title-block .eyebrow {
  color: #d9c8ff;
  font-size: 10px;
  letter-spacing: .14em;
}

.start-screen .title-block h1 {
  margin: 1px 0 0;
  color: #fff7ff;
  font-family: "Noto Serif TC", "Songti TC", serif;
  font-size: clamp(38px, 11.5vw, 50px);
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: .08em;
  text-shadow:
    0 3px 0 #6f30a9,
    0 0 16px rgba(187, 104, 255, .9),
    0 0 34px rgba(111, 48, 169, .72);
}

.start-screen .title-block .subtitle {
  margin: 5px 0 0;
  color: #f2edff;
  font-size: clamp(14px, 4vw, 17px);
  font-weight: 850;
  letter-spacing: .02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
}

.start-screen .hero-visual {
  width: 100%;
  max-width: 440px;
  height: clamp(335px, 45vh, 395px);
  margin: -2px auto 0;
  overflow: hidden;
  isolation: isolate;
}

.start-screen .hero-visual::before {
  content: "";
  position: absolute;
  inset: 5% 4% 1%;
  z-index: -1;
  border-radius: 46% 46% 30% 30%;
  background: radial-gradient(circle at 50% 44%, rgba(151, 62, 255, .48), rgba(37, 19, 96, .16) 48%, transparent 72%);
  filter: blur(8px);
}

.start-screen .hero-visual::after {
  bottom: 2px;
  width: 84%;
  height: 42px;
  background: radial-gradient(ellipse at center, rgba(85, 233, 255, .28), rgba(141, 92, 255, .2) 46%, transparent 74%);
}

.home-boss,
.home-ghost,
.home-cannon {
  position: absolute;
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.home-boss {
  z-index: 1;
  width: clamp(250px, 68vw, 310px);
  height: clamp(250px, 68vw, 310px);
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 24px rgba(207, 59, 255, .76)) drop-shadow(0 12px 18px rgba(0, 0, 0, .48));
  animation: homeBossBreathe 3.8s ease-in-out infinite alternate;
}

.home-ghost-cast {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.home-ghost {
  filter: drop-shadow(0 0 13px rgba(114, 83, 255, .75)) drop-shadow(0 8px 12px rgba(0, 0, 0, .52));
  animation: homeGhostFloat 3.2s ease-in-out infinite alternate;
}

.home-ghost-slow {
  z-index: 5;
  width: clamp(185px, 50vw, 225px);
  height: clamp(185px, 50vw, 225px);
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
}

.home-ghost-literal,
.home-ghost-conversation {
  z-index: 3;
  width: clamp(102px, 28vw, 124px);
  height: clamp(102px, 28vw, 124px);
  top: 151px;
}

.home-ghost-literal { left: 4px; animation-delay: -.8s; }
.home-ghost-conversation { right: 4px; animation-delay: -1.5s; }

.home-ghost-blank,
.home-ghost-fast {
  z-index: 4;
  width: clamp(82px, 22vw, 100px);
  height: clamp(82px, 22vw, 100px);
  bottom: 28px;
}

.home-ghost-blank { left: 44px; animation-delay: -2.2s; }
.home-ghost-fast { right: 42px; animation-delay: -.3s; }

.home-ghost-progress,
.home-ghost-speaker {
  z-index: 2;
  width: clamp(66px, 18vw, 82px);
  height: clamp(66px, 18vw, 82px);
  top: 101px;
}

.home-ghost-progress { left: 49px; animation-delay: -1.9s; }
.home-ghost-speaker { right: 48px; animation-delay: -1.1s; }

.home-cannon {
  z-index: 6;
  right: 4px;
  bottom: 0;
  width: clamp(70px, 19vw, 88px);
  height: clamp(70px, 19vw, 88px);
  filter: drop-shadow(0 0 14px rgba(85, 233, 255, .7)) drop-shadow(0 8px 12px rgba(0, 0, 0, .55));
  transform: rotate(-5deg);
}

@keyframes homeBossBreathe {
  from { transform: translateX(-50%) translateY(0) scale(1); }
  to { transform: translateX(-50%) translateY(-5px) scale(1.025); }
}

@keyframes homeGhostFloat {
  from { translate: 0 2px; }
  to { translate: 0 -5px; }
}

.start-screen > .hook {
  position: relative;
  z-index: 5;
  max-width: 420px;
  margin: 0 auto 7px;
  color: #f4f0ff;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}

.start-screen > .hook strong { color: #ec7aff; }

.start-screen .start-actions {
  margin: 13px auto 0;
  gap: 9px;
}

.home-identity {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3px 10px;
  min-height: 48px;
  padding: 7px 10px;
  border: 1px solid rgba(141, 92, 255, .56);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(20, 15, 60, .92), rgba(7, 10, 35, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 22px rgba(0, 0, 0, .25);
}

.home-identity label {
  color: #ffe477;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.home-identity input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(85, 233, 255, .48);
  border-radius: 10px;
  outline: none;
  color: #fff;
  background: rgba(4, 8, 32, .82);
  font-size: 16px;
  font-weight: 800;
}

.home-identity input:focus {
  border-color: #55e9ff;
  box-shadow: 0 0 0 3px rgba(85, 233, 255, .15);
}

.home-identity small {
  grid-column: 2;
  color: #aaa5ca;
  font-size: 8px;
  line-height: 1.25;
}

.start-screen .fine-print { margin-top: 1px; }

/* Prominent Arcade Gold Primary Button */
.primary-button {
  position: relative;
  min-height: 64px;
  width: 100%;
  padding: 8px 18px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff394 0%, #ffd032 48%, #e8a012 100%);
  color: #161033;
  box-shadow:
    0 0 0 2px rgba(255, 231, 122, 0.9),
    0 0 0 4px rgba(127, 72, 255, 0.85),
    0 5px 0 #a36906,
    0 12px 24px rgba(0, 0, 0, 0.55),
    0 0 26px rgba(255, 205, 50, 0.45),
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 0 rgba(140, 85, 8, 0.35);
  cursor: pointer;
  transition: transform .12s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .12s ease, filter .12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  user-select: none;
  box-sizing: border-box;
}
.primary-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 0 0 2px rgba(255, 245, 160, 0.95),
    0 0 0 4px rgba(162, 115, 255, 0.95),
    0 7px 0 #a36906,
    0 16px 28px rgba(0, 0, 0, 0.6),
    0 0 32px rgba(255, 215, 65, 0.6),
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -2px 0 rgba(140, 85, 8, 0.35);
}
.primary-button:active {
  transform: translateY(3px);
  box-shadow:
    0 0 0 2px rgba(255, 231, 122, 0.85),
    0 0 0 3px rgba(127, 72, 255, 0.8),
    0 2px 0 #a36906,
    0 6px 14px rgba(0, 0, 0, 0.5),
    0 0 18px rgba(255, 205, 50, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.primary-button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}
.primary-button::after {
  content: "›";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #1a123a;
  font-size: 24px;
  font-weight: 950;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.primary-button span {
  font-size: 24px;
  font-weight: 950;
  letter-spacing: .08em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.primary-button small {
  font-size: 11px;
  font-weight: 750;
  color: #4a3310;
  letter-spacing: .08em;
}

/* Ghost / Secondary Button (看本週驅魔榜) */
.ghost-button,
.secondary-button {
  min-height: 50px;
  width: 100%;
  padding: 6px 14px;
  border-radius: 14px;
  background: rgba(8, 13, 50, 0.72);
  border: 1.5px solid rgba(131, 139, 255, 0.65);
  color: #e3ddff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}
.ghost-button:hover,
.secondary-button:hover {
  transform: translateY(-1px);
  background: rgba(18, 26, 82, 0.85);
  border-color: rgba(162, 164, 255, 0.9);
  box-shadow: 0 6px 18px rgba(16, 14, 58, 0.45), 0 0 12px rgba(141, 92, 255, 0.25);
  color: #fff;
}
.ghost-button:active,
.secondary-button:active {
  transform: translateY(1px) scale(0.99);
  background: rgba(10, 16, 60, 0.95);
}
.ghost-button:focus-visible,
.secondary-button:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.fine-print {
  margin: 2px 0 0;
  text-align: center;
  color: #9ca4d0;
  font-size: 10px;
  line-height: 1.35;
}

/* First-run story guide: three short beats before the playable warm-up. */
.onboarding-trailer {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  opacity: 0;
  background: #02030c;
  transition: opacity .8s cubic-bezier(.22, .61, .36, 1);
  isolation: isolate;
}

.onboarding-trailer.is-visible { opacity: 1; }
.onboarding-trailer.is-exiting {
  opacity: 0;
  pointer-events: none;
  transition-duration: 1.15s;
}

.onboarding-trailer-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  background: #02030c;
}

.onboarding-trailer-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .28), transparent 18%, transparent 78%, rgba(0, 0, 0, .42)),
    radial-gradient(circle at center, transparent 55%, rgba(0, 0, 0, .32));
}

.onboarding-trailer-skip {
  position: absolute;
  z-index: 2;
  top: max(14px, env(safe-area-inset-top));
  right: 14px;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 999px;
  color: #fff;
  background: rgba(4, 6, 24, .68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .03em;
  cursor: pointer;
}

.onboarding-trailer-skip:focus-visible {
  outline: 2px solid #55e9ff;
  outline-offset: 3px;
}

.onboarding-guide {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: 14px;
  padding: max(18px, env(safe-area-inset-top)) 18px max(20px, env(safe-area-inset-bottom));
  overflow: hidden;
  color: #f8f7ff;
  background: rgba(4, 6, 24, .97);
  touch-action: pan-y;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
  .onboarding-trailer { transition: none; }
}

.guide-skip {
  justify-self: end;
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid rgba(177, 183, 226, .42);
  border-radius: 999px;
  color: #d4d7f4;
  background: rgba(20, 24, 62, .82);
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.guide-track {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 300%;
  min-height: 0;
  transform: translateX(0);
  transition: transform .28s cubic-bezier(.2, .78, .2, 1);
  will-change: transform;
}

.guide-track[data-step="1"] { transform: translateX(-33.3333%); }
.guide-track[data-step="2"] { transform: translateX(-66.6667%); }

.guide-slide {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(150px, 1fr) auto auto;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 14px 18px 18px;
  text-align: center;
  box-sizing: border-box;
}

.guide-step-label {
  display: inline-flex;
  padding: 5px 10px;
  border: 1px solid rgba(85, 233, 255, .5);
  border-radius: 999px;
  color: #8ef0ff;
  background: rgba(11, 28, 63, .9);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
}

.guide-slide > img {
  width: min(66vw, 260px);
  height: min(38vh, 300px);
  object-fit: contain;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .48));
}

.guide-slide h2 {
  margin: 0;
  color: #ffe77a;
  font-size: clamp(28px, 8vw, 38px);
  line-height: 1.08;
}

.guide-slide p {
  max-width: 330px;
  margin: 0;
  color: #d8dcf6;
  font-size: 15px;
  font-weight: 720;
  line-height: 1.55;
}

.guide-control-art {
  position: relative;
  width: min(78vw, 310px);
  height: min(34vh, 260px);
}

.guide-control-art > img:first-child {
  position: absolute;
  object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .5));
  width: 52%;
  left: 8%;
  top: 0;
  transform: rotate(-7deg);
}

.guide-shot-path {
  position: absolute;
  left: 48%;
  top: 39%;
  width: 31%;
  height: 3px;
  transform: rotate(34deg);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 231, 122, .1), #ffe77a 55%, #55e9ff);
  box-shadow: 0 0 14px rgba(85, 233, 255, .7);
}

.guide-control-art .guide-launcher-art {
  position: absolute;
  right: 4%;
  bottom: 2%;
  width: 43%;
  height: 54%;
  object-fit: contain;
  transform: rotate(6deg);
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .5));
}


.guide-pagination {
  display: flex;
  justify-content: center;
  gap: 9px;
}

.guide-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(205, 211, 247, .36);
  cursor: pointer;
  transition: width .2s ease, background-color .2s ease;
}

.guide-dot.active {
  width: 28px;
  background: #55e9ff;
  box-shadow: 0 0 12px rgba(85, 233, 255, .6);
}

.guide-actions {
  display: grid;
  grid-template-columns: minmax(96px, .55fr) minmax(150px, 1fr);
  gap: 10px;
  width: min(100%, 420px);
  margin-inline: auto;
}

.guide-actions .primary-button,
.guide-actions .secondary-button { min-height: 52px; }
.guide-actions .primary-button { font-size: 17px; }
.guide-actions .secondary-button:disabled { opacity: .38; cursor: default; transform: none; }

@media (max-height: 700px) {
  .onboarding-guide { gap: 8px; padding-block: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-bottom)); }
  .guide-slide { grid-template-rows: auto minmax(120px, 1fr) auto auto; gap: 6px; padding-block: 6px 10px; }
  .guide-slide > img { height: min(31vh, 210px); }
  .guide-control-art { height: min(29vh, 190px); }
  .guide-slide h2 { font-size: 27px; }
  .guide-slide p { font-size: 13px; }
}

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

@media (max-width: 380px) {
  .start-screen { padding-inline: 12px; }
  .title-block .subtitle { font-size: 20px; }
  .hook { font-size: 13px; }
  .primary-button span { font-size: 18px; }
}

@media (max-height: 700px) {
  .brand-row { min-height: 38px; padding: 2px 8px; }
  .start-screen .title-block { margin-top: 4px; }
  .start-screen .title-block h1 { font-size: 33px; }
  .start-screen .title-block .subtitle { margin-top: 2px; font-size: 12px; }
  .start-screen .hero-visual { height: 258px; }
  .home-boss { width: 205px; height: 205px; top: -23px; }
  .home-ghost-slow { width: 150px; height: 150px; }
  .home-ghost-literal,
  .home-ghost-conversation { width: 82px; height: 82px; top: 111px; }
  .home-ghost-progress,
  .home-ghost-speaker { width: 55px; height: 55px; top: 72px; }
  .home-ghost-blank,
  .home-ghost-fast { width: 64px; height: 64px; bottom: 22px; }
  .home-cannon { width: 64px; height: 64px; }
  .start-screen .start-actions { margin-top: 9px; }
  .hero-visual { height: clamp(195px, 28vh, 225px); }
  .flame-aura-back { width: 200px; height: 200px; }
  .hero-logo-art { height: 52px; }
  .hero-ghost-main { width: 135px; height: 150px; top: 38px; }
  .hero-ghost-companion { width: 54px; height: 62px; top: 100px; }
  .title-block { margin: 2px 0 4px; }
  .title-block .subtitle { font-size: 19px; }
  .hook { font-size: 12px; }
  .primary-button { min-height: 52px; }
  .ghost-button, .secondary-button { min-height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .flame-aura-back,
  .hero-ghost-main,
  .hero-ghost-companion,
  .hero-spark {
    animation: none !important;
  }
  .home-boss,
  .home-ghost { animation: none !important; }
  .guide-track,
  .guide-dot { transition: none !important; }
}

/* v1.3.17 — single cover artwork with responsive HTML UI. */
.start-screen {
  isolation: isolate;
  background: #050615;
}

.start-screen::before {
  z-index: 1;
  opacity: .07;
}

.start-screen .hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 100dvh;
  margin: 0;
  overflow: hidden;
  isolation: auto;
  pointer-events: none;
}

.start-screen .hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(3, 5, 25, .1) 0%, transparent 38%, rgba(4, 5, 25, .08) 55%, rgba(4, 5, 24, .72) 72%, #050615 100%),
    linear-gradient(90deg, rgba(5, 4, 24, .16), transparent 22% 78%, rgba(5, 4, 24, .16));
}

.start-screen .hero-visual::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  width: 100%;
  height: 38%;
  transform: none;
  border-radius: 0;
  background: linear-gradient(180deg, transparent, rgba(5, 6, 22, .9) 58%, #050615);
  filter: none;
}

.home-ghost-ensemble {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 0%;
  pointer-events: none;
  user-select: none;
}

.start-screen .brand-row,
.start-screen .challenge-banner,
.start-screen .title-block,
.start-screen > .hook,
.start-screen .start-actions {
  z-index: 5;
}

.start-screen .brand-row {
  max-width: 64px;
  min-height: 56px;
  padding: 4px;
  background: rgba(5, 7, 29, .76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.start-screen .title-block {
  margin-top: clamp(430px, 58dvh, 540px);
  padding: 6px 10px 4px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(5, 6, 27, .08), rgba(5, 6, 27, .76));
}

.start-screen .title-block h1 {
  font-size: clamp(36px, 10.5vw, 46px);
}

.start-screen > .hook {
  margin-top: -2px;
}

.start-screen .start-actions {
  margin-top: 10px;
  padding-bottom: 2px;
}

.home-audio-toggle {
  display: block;
  margin: 4px auto 0;
}

@media (max-height: 760px) {
  .start-screen .title-block {
    margin-top: 53dvh;
    padding-top: 2px;
  }

  .start-screen .title-block h1 { font-size: 34px; }
  .start-screen .title-block .subtitle { font-size: 13px; }
  .start-screen > .hook { font-size: 11px; }
  .start-screen .start-actions { margin-top: 8px; }
  .start-screen .fine-print { display: none; }
}

/* v1.3.18 — keep the complete entry flow inside short mobile WebViews. */
@media (max-width: 480px) {
  .start-screen,
  .onboarding-guide {
    --mobile-browser-bottom-guard: clamp(52px, 8dvh, 72px);
  }

  .start-screen .title-block {
    margin-top: clamp(310px, 46dvh, 390px);
  }

  .start-screen .fine-print,
  .start-screen .home-audio-toggle { display: none; }

  .onboarding-guide {
    grid-template-rows: 40px minmax(0, 1fr) 12px 52px;
    gap: 7px;
    padding: max(10px, env(safe-area-inset-top)) 12px;
    padding-bottom: calc(var(--mobile-browser-bottom-guard) + env(safe-area-inset-bottom));
  }

  .guide-skip { min-height: 38px; }

  .guide-slide {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-content: start;
    gap: 5px;
    padding: 2px 10px 4px;
  }

  .guide-slide > img {
    width: min(58vw, 220px);
    height: min(27dvh, 190px);
  }

  .guide-control-art { height: min(25dvh, 175px); }
  .guide-slide h2 { font-size: clamp(24px, 7vw, 29px); }
  .guide-slide p { max-width: 320px; font-size: 12px; line-height: 1.35; }
  .guide-actions { gap: 8px; }
  .guide-actions .primary-button,
  .guide-actions .secondary-button { min-height: 48px; }
}

@media (max-width: 480px) and (max-height: 760px) {
  .start-screen {
    min-height: 100dvh;
    padding: max(8px, env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
  }

  .start-screen .brand-row { min-height: 40px; }

  .start-screen .title-block {
    margin-top: clamp(260px, 43dvh, 330px);
    padding-block: 2px;
  }

  .start-screen .title-block h1 { font-size: 32px; }
  .start-screen .title-block .subtitle { font-size: 12px; }
  .start-screen > .hook { margin-bottom: 3px; font-size: 10px; }
  .start-screen .start-actions { gap: 6px; margin-top: 5px; }

  .home-identity {
    min-height: 44px;
    padding: 5px 8px;
  }

  .home-identity input { height: 32px; font-size: 15px; }
  .primary-button { min-height: 52px; }
  .ghost-button,
  .secondary-button { min-height: 38px; }
}

/* v1.3.21 — single-message campaign cover and standalone Winning+ mark. */
.start-screen {
  padding-top: max(2px, env(safe-area-inset-top));
}

.start-screen .brand-row {
  width: 66px;
  max-width: 66px;
  min-height: 0;
  margin: 0 auto 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.start-screen .brand-logo {
  display: block;
  width: 66px;
  height: 52px;
  max-height: none;
  object-fit: contain;
  filter: brightness(1.28) drop-shadow(0 3px 10px rgba(255, 255, 255, .16)) drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
}

.start-screen .home-ghost-ensemble {
  height: calc(100% + 28px);
  transform: translateY(-28px);
}

.start-screen .title-block {
  margin-top: clamp(360px, 49dvh, 455px);
  padding: 8px 8px 6px;
  background: linear-gradient(180deg, rgba(5, 6, 27, 0), rgba(5, 6, 27, .72));
}

.start-screen .title-block h1 {
  display: block;
  margin: 0;
  color: #fff;
  font-family: "Noto Sans TC", system-ui, sans-serif;
  font-size: clamp(28px, 7.4vw, 32px);
  font-weight: 950;
  line-height: 1.15;
  letter-spacing: .015em;
  text-align: center;
  text-shadow: 0 3px 0 #5d277f, 0 0 18px rgba(195, 124, 255, .78), 0 3px 12px rgba(0, 0, 0, .9);
}

@media (max-width: 480px) {
  .start-screen .brand-row {
    width: 58px;
  }

  .start-screen .brand-logo { width: 58px; height: 44px; }

  .start-screen .title-block {
    margin-top: clamp(285px, 39dvh, 345px);
  }
}

/* Tall mobile Safari leaves more usable height than the compact breakpoint.
   Let the title and action stack follow that height instead of stopping at the
   old 345px cap, while preserving room for the bottom browser controls. */
@media (max-width: 480px) and (min-height: 800px) {
  .start-screen .title-block {
    margin-top: clamp(350px, 47dvh, 430px);
  }
}

@media (max-width: 480px) and (max-height: 760px) {
  .start-screen .brand-row { min-height: 0; }
  .start-screen .brand-logo { width: 54px; height: 40px; }

  .start-screen .title-block {
    margin-top: clamp(220px, 32dvh, 265px);
    padding-block: 5px;
  }

  .start-screen .title-block h1 { font-size: clamp(25px, 7vw, 28px); }
}

/* v1.3.34 — keep the complete home CTA stack close to the mobile safe area.
   The earlier height breakpoints moved the title with fixed dvh margins, which
   left 100–225px of unused space when Safari changed its visible viewport. */
@media (max-width: 480px) {
  .start-screen {
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .start-screen .title-block {
    margin-top: auto;
  }

  .start-screen .start-actions {
    margin-top: clamp(5px, 1.2dvh, 10px);
    margin-bottom: 0;
  }
}