/* Shared cover / finale art direction: a warm neon night made from hearts and starlight. */
#intro,
#score {
  color: #fff8fb;
  background:
    radial-gradient(circle at 50% 42%, #9b285055 0 18%, transparent 43%),
    linear-gradient(155deg, #110a20 0%, #26102d 52%, #4a1734 100%);
}

.intro-night,
.finale-night {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background-image:
    radial-gradient(circle, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle, #ff8baa 0 1px, transparent 1.7px);
  background-position: 0 0, 33px 51px;
  background-size: 78px 78px, 111px 111px;
  opacity: .42;
  animation: starDrift 18s linear infinite;
}

#intro header,
#score header { color: #fff; }

#intro .intro-heart-glow {
  position: absolute;
  z-index: -1;
  top: 42%;
  left: 50%;
  translate: -50% -50%;
  color: #ff527e;
  font: 300 min(54vw, 520px)/1 sans-serif;
  filter: drop-shadow(0 0 15px #ff5a86) drop-shadow(0 0 65px #ff285f99);
  opacity: .34;
  animation: coverHeart 2.6s ease-in-out infinite;
  pointer-events: none;
}

#intro .intro-orbit {
  border-color: #ff9bb477;
  box-shadow: 0 0 35px #ff527744, inset 0 0 25px #fff2;
}

#intro .intro-copy { top: 8%; }
#intro .intro-copy .eyebrow,
.finale-copy > span {
  color: #ffafc2;
  background: #ffffff10;
  border: 1px solid #ffffff2e;
  box-shadow: none;
  backdrop-filter: blur(8px);
}

#intro .intro-copy h1 {
  color: #fff;
  text-shadow: 0 0 22px #ff76955c;
}

#intro .intro-copy h1 em { color: #ff7598; }
#intro .intro-copy p {
  max-width: 88vw;
  color: #ead6df;
  background: transparent;
  font-weight: 700;
}

.hero-wrap {
  position: relative;
  z-index: 3;
  margin-top: 8vh;
  transition: transform .2s ease-out;
  will-change: transform;
  cursor: pointer;
  outline: none;
}

.hero-wrap:focus-visible { outline: 3px solid #fff; outline-offset: 5px; border-radius: 36px; }

.hero-tap-hint {
  position: absolute;
  left: 50%;
  bottom: 7%;
  translate: -50% 0;
  padding: 6px 11px;
  border: 1px solid #ffffff38;
  border-radius: 99px;
  background: #251126b8;
  color: #f4d8e3;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 0 5px 18px #08030a66;
  pointer-events: none;
  animation: hintGlow 1.8s ease-in-out infinite;
}

#intro .hero-pair {
  margin-top: 0;
  filter: drop-shadow(0 25px 28px #08030a88) drop-shadow(0 0 20px #ff80a13d);
}

#intro .sticker {
  color: #321329;
  border-color: #ffb2c5;
  background: #ff789a;
  box-shadow: 5px 6px 0 #8b294f;
}

#intro .primary,
#score .primary {
  background: linear-gradient(135deg, #ff376b, #d91c63);
  box-shadow: 0 8px 0 #851342, 0 18px 36px #ff346955;
}

.micro-hint,
.heart-poke {
  position: relative;
  z-index: 8;
  margin-top: 15px;
  border: 1px solid #ffffff30;
  border-radius: 99px;
  padding: 8px 14px;
  background: #ffffff0d;
  color: #dfc5d1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  transition: .2s ease;
}

.micro-hint:hover,
.heart-poke:hover { color: #fff; border-color: #ff8eac; background: #ff6f9522; transform: translateY(-2px); }

.runaway {
  position: absolute;
  z-index: 12;
  left: calc(50% + 122px);
  top: calc(50% + 245px);
  border: 1px solid #ffffff3a;
  border-radius: 99px;
  padding: 9px 14px;
  background: #251126d9;
  color: #d9becb;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 8px 24px #08030a66;
  backdrop-filter: blur(8px);
  transition: left .24s cubic-bezier(.2,1.2,.4,1), top .24s cubic-bezier(.2,1.2,.3,1), transform .2s, background .2s;
  will-change: left, top;
  white-space: nowrap;
  min-height: 44px;
}

.runaway.caught {
  background: #ff4775;
  color: #fff;
  border-color: #ffb3c5;
  animation: caughtBounce .7s cubic-bezier(.2,1.6,.3,1);
}

.runaway-story {
  position: absolute;
  z-index: 11;
  left: 50%;
  bottom: 68px;
  translate: -50% 0;
  color: #9e8290;
  font-size: 10px;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}

.runaway-story.show { opacity: 1; }

.game-guide {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #09040dbd;
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
.game-guide.show { opacity: 1; visibility: visible; }
.guide-card {
  position: relative;
  width: min(500px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  padding: 30px;
  border: 1px solid #ffffff36;
  border-radius: 28px;
  background: linear-gradient(155deg, #3b193f 0%, #1d1028 100%);
  box-shadow: 0 28px 80px #0009, inset 0 1px #ffffff24;
  color: #fff;
  text-align: left;
}
.guide-kicker { color: #ff9db7; font-size: 11px; font-weight: 900; letter-spacing: .2em; }
.guide-card h2 { margin: 7px 38px 20px 0; font-size: clamp(24px, 5vw, 32px); line-height: 1.2; }
.guide-card ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.guide-card li { display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 17px; background: #ffffff0e; }
.guide-card li > b { flex: 0 0 34px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #ff4f7b; color: #fff; font-size: 16px; }
.guide-card li span { color: #ead7df; font-size: 14px; line-height: 1.55; }
.guide-card li strong { display: block; color: #fff; font-size: 16px; }
.guide-card > p { margin: 17px 0; color: #ffd4df; font-size: 13px; font-weight: 800; text-align: center; }
.guide-card .primary { display: block; width: 100%; min-height: 50px; }
.guide-close { position: absolute; top: 17px; right: 17px; width: 40px; height: 40px; border: 1px solid #ffffff30; border-radius: 50%; background: #ffffff0c; color: #fff; font-size: 25px; line-height: 1; }
.guide-close:hover { background: #ffffff1c; }

/* Performance: keep the playful motion while avoiding full-screen repaints. */
.aurora { animation: none; transform: rotate(14deg); }
.intro-burst { animation: introBurstIn .7s ease-out both; }
#intro .intro-heart-glow { filter: drop-shadow(0 0 28px #ff285f88); }
#intro .hero-pair { filter: drop-shadow(0 18px 18px #08030a70); }
#actionImage { filter: drop-shadow(0 14px 12px #52384820); backface-visibility: hidden; will-change: transform, opacity; }
.reveal.hit #actionImage { filter: drop-shadow(0 0 15px #ff648e70); }
@keyframes reveal { 0% { opacity: 0; transform: translateY(30px) scale(.76); } 65% { opacity: 1; transform: translateY(-8px) scale(1.04); } 100% { opacity: 1; transform: none; } }

@media(max-width:700px), (pointer:coarse) {
  .intro-night, .finale-night { animation: none; }
  #intro .intro-heart-glow { animation: none; filter: none; opacity: .22; }
  #intro .intro-orbit { box-shadow: none; }
  #intro .hero-pair, #actionImage, .reveal.hit #actionImage { filter: none; }
  .intro-copy .eyebrow, .runaway, .game-guide, .countdown, .score-orbit { backdrop-filter: none; }
  .intro-sparkles i:nth-child(n+4) { display: none; }
}

#score { justify-content: center; gap: 0; }
#score .finale-night { opacity: .62; }
#score .finale-copy {
  position: relative;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: -22px;
  text-align: center;
}

.finale-copy > span {
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .2em;
}

#score .finale-copy h2 {
  margin: 9px 0 1px;
  color: #fff;
  font-size: clamp(25px, 4vw, 38px);
  text-shadow: 0 0 25px #ff5a85aa;
}

#score .finale-copy p {
  margin: 0;
  color: #cdb4c1;
  font-size: 12px;
}

#score .heart-stage {
  width: min(430px, 88vw);
  height: min(430px, 48vh);
}

#score .score-orbit {
  width: 126px;
  height: 126px;
  border: 1px solid #ffffff75;
  background: radial-gradient(circle at 36% 25%, #ffffff38, #49142ee0 58%, #180b21ee);
  box-shadow: 0 0 0 6px #ffffff12, 0 0 35px #ff517899, inset 0 0 28px #ff789833;
}

#score .score-orbit b { font-size: 42px; }
#score .score-orbit span { color: #ffd5df; letter-spacing: .08em; }

.finale-actions {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: -20px;
}

.finale-actions .heart-poke { margin: 0; padding: 14px 18px; }
.drag-hint { position: relative; z-index: 8; margin: 15px 0 0 !important; color: #a98d9b !important; font-size: 10px; }
.heart-stage.poked { animation: heartStagePoke .55s cubic-bezier(.2,1.7,.3,1); }

.tap-spark {
  position: fixed;
  z-index: 40;
  left: 0;
  top: 0;
  color: #ff7698;
  font-style: normal;
  pointer-events: none;
  filter: drop-shadow(0 0 7px currentColor);
  animation: tapSpark .9s ease-out forwards;
}

@keyframes starDrift { to { background-position: 78px 78px, -78px 162px; } }
@keyframes coverHeart { 50% { scale: 1.06; opacity: .5; } }
@keyframes heartStagePoke { 45% { transform: scale(1.08) rotate(-2deg); } }
@keyframes tapSpark { to { translate: var(--spark-x) var(--spark-y); rotate: 130deg; scale: .25; opacity: 0; } }
@keyframes caughtBounce { 45% { transform: scale(1.18) rotate(-4deg); } }
@keyframes hintGlow { 50% { border-color: #ff8eac; color: #fff; box-shadow: 0 5px 24px #ff477555; } }

@media (max-width: 700px) {
  header {
    padding: max(10px, env(safe-area-inset-top)) 14px 8px;
  }
  header button { width: 44px; height: 44px; }
  .screen { padding-inline: 12px; }
  #intro .intro-copy { top: 8%; }
  #intro .intro-copy h1 { font-size: clamp(31px, 9vw, 43px); }
  #intro .intro-copy p { max-width: 82vw; line-height: 1.55; }
  .hero-wrap { margin-top: 6vh; }
  .runaway { left: auto; right: 16px; top: auto; bottom: max(18px, env(safe-area-inset-bottom)); }
  .game-guide { padding: 14px; }
  .guide-card { padding: 24px 18px 20px; border-radius: 23px; }
  .guide-card li { padding: 10px 11px; }
  #score .finale-copy { margin-bottom: -15px; }
  #score .heart-stage { height: 42vh; }
  .finale-actions { margin-top: -12px; flex-direction: column; gap: 8px; }
  .finale-actions .heart-poke { padding: 8px 13px; }
  .drag-hint { margin-top: 9px !important; }

  #game .topline { top: max(48px, calc(env(safe-area-inset-top) + 42px)); }
  #game .stage {
    top: max(82px, calc(env(safe-area-inset-top) + 76px));
    width: 96vw;
    height: calc(100dvh - 275px - env(safe-area-inset-bottom));
    min-height: 250px;
  }
  #game .choices {
    bottom: calc(72px + env(safe-area-inset-bottom));
    width: calc(100vw - 20px);
    gap: 6px;
  }
  #game .choice {
    min-width: 0;
    height: 58px;
    padding: 5px;
    flex-direction: column;
  }
  #game .choice i { width: 30px; height: 27px; font-size: 20px; background: transparent; }
  #game .choice span { font-size: 10px; white-space: nowrap; }
  #game .history {
    bottom: max(7px, env(safe-area-inset-bottom));
    width: calc(100vw - 20px);
    height: 57px;
    gap: 3px;
    padding-inline: 7px;
  }
  #game .identity { font-size: 10px; padding: 6px 9px; }
  #game .countdown { top: 48%; }
}

@media (max-width: 380px), (max-height: 700px) {
  #intro .intro-copy { top: 7%; }
  #intro .intro-copy .eyebrow { padding: 5px 9px; font-size: 8px; }
  #intro .intro-copy h1 { margin-top: 7px; font-size: clamp(27px, 8vw, 34px); }
  #intro .intro-copy p { display: none; }
  #intro .hero-wrap { margin-top: 4vh; }
  #intro .hero-pair { height: 39vh; }
  #intro .sticker { top: 16%; transform: rotate(-8deg) scale(.72); transform-origin: left top; }
  #intro .intro-start { padding: 12px 20px; }
  #intro .micro-hint { margin-top: 10px; }
  .runaway-story { bottom: 62px; width: 90vw; text-align: center; }

  #game .stage { height: calc(100dvh - 255px - env(safe-area-inset-bottom)); min-height: 220px; }
  #game .choices { bottom: calc(65px + env(safe-area-inset-bottom)); }
  #game .choice { height: 50px; }
  #game .history { height: 51px; }
  #game .pip span { font-size: 20px; }

  #score .finale-copy > span { padding: 4px 9px; }
  #score .finale-copy h2 { margin-top: 5px; font-size: 24px; }
  #score .heart-stage { height: 37vh; min-height: 240px; }
  #score .score-orbit { width: 105px; height: 105px; }
  #score .score-orbit b { font-size: 35px; }
  #score .finale-actions { gap: 5px; }
  #score .finale-actions .primary { padding: 11px 19px; }
  #score .drag-hint { display: none; }
}

button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.home-btn {
  position: absolute;
  z-index: 15;
  top: max(62px, calc(env(safe-area-inset-top) + 50px));
  left: max(16px, env(safe-area-inset-left));
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #ffffffcc;
  border-radius: 99px;
  background: #ffffffc7;
  color: #624454;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 7px 20px #57354822;
  backdrop-filter: blur(9px);
  transition: transform .18s, background .18s;
}

.home-btn:hover { transform: translateY(-2px); background: #fff; }
.home-btn:active { transform: translateY(1px); }

@media (max-width: 700px) {
  .home-btn {
    top: max(56px, calc(env(safe-area-inset-top) + 48px));
    left: 10px;
    padding-inline: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-night,.finale-night,.intro-heart-glow { animation: none !important; }
}