:root {
  color-scheme: light;
  --ink: #2f2630;
  --muted: #766c75;
  --paper: #fffaf6;
  --card: #ffffff;
  --rose: #e85677;
  --rose-dark: #c83f61;
  --rose-soft: #ffe5ec;
  --peach: #ffcfb5;
  --line: #eadfdd;
  --shadow: 0 18px 60px rgb(86 45 58 / 12%);
  --pink-title: #fd41ae;
  --pink-shadow: #fdc2de;
  --question-background: #fdadd8;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 3%, #ffe1d1 0, transparent 28rem),
    radial-gradient(circle at 95% 25%, #ffdce7 0, transparent 24rem),
    var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
}

body.intro-active {
  background-color: var(--question-background);
  background-image: url("../assets/question/decor/bg-grid.png");
  background-repeat: repeat;
  background-size: 12px 12px;
}

body.game-active,
body.ending-active {
  background-color: var(--question-background);
  background-image: url("../assets/question/decor/bg-grid.png");
  background-repeat: repeat;
  background-size: 12px 12px;
}

body.game-active .app-shell,
body.ending-active .app-shell {
  width: 100%;
  padding-bottom: 0;
}

body.intro-active .app-shell {
  width: min(100%, 390px);
  min-height: 100svh;
  padding-bottom: 0;
}

button { font: inherit; }

button:focus-visible,
a:focus-visible {
  outline: 3px solid #7b4ce2;
  outline-offset: 3px;
}

.hidden { display: none !important; }

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

.app-shell {
  width: min(100% - 32px, 760px);
  margin: 0 auto;
  padding-bottom: 64px;
}

/* 遊戲與結果頁共用的視窗卡片元件 */
.ending {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100svh;
  padding: max(32px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom));
  text-align: center;
}

.intro {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  height: 100svh;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  padding: max(50px, env(safe-area-inset-top)) 24px max(12px, env(safe-area-inset-bottom));
  overflow: hidden;
  text-align: center;
}

.love-window {
  position: relative;
  width: min(100%, 342px);
  color: #00000e;
}

.love-window-panel {
  position: relative;
  isolation: isolate;
}

.love-window-panel::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fcdfb1;
  border-radius: 12px;
  content: "";
  pointer-events: none;
  transform: translate(6px, 5px);
}

.love-window-titlebar {
  position: relative;
  z-index: 0;
  display: flex;
  width: 100%;
  height: 38px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 8px 16px 16px;
  color: white;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  line-height: 14px;
  background: linear-gradient(
    90deg,
    #acb1fd 0%,
    #a696fc 30.258%,
    #9c97fc 47.596%,
    #97a9fc 74.185%,
    #ac9bfc 100%
  );
  border: 1px solid #000;
  border-radius: 12px 12px 0 0;
  box-shadow: inset 1px 1px 0 #000, inset 3px 1px 0 #fffffd;
}

.love-window-hearts {
  display: flex;
  gap: 2px;
  align-items: center;
}

.love-window-hearts img {
  display: block;
  width: 16px;
  height: 14px;
  object-fit: cover;
}

.love-window-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin-top: -10px;
  padding: 23px 15px 59px;
  background: white;
  border: 1px solid #000;
  border-radius: 12px;
  box-shadow: inset 3px 0 0 #fcd3e6;
}

.intro-layout {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
}

.intro-badge {
  display: block;
  width: 68px;
  height: auto;
}

.intro h1 {
  width: 100%;
  margin: 20px 0 0;
  color: #00000e;
  font-size: 36px;
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: -.02em;
}

.intro h1 span { display: block; }

.intro h1 em {
  color: var(--pink-title);
  font-size: 50px;
  font-style: normal;
  line-height: 1;
}

.intro-visual {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 16px;
}

.intro-cta {
  position: relative;
  width: 100%;
  margin-top: 86px;
}

.intro-cta-cursor {
  position: absolute;
  top: -51px;
  left: -2px;
  display: block;
  width: 50px;
  height: auto;
  pointer-events: none;
  transform: rotate(135deg);
}

.intro-bottom-decor {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1;
  width: 100%;
  height: 111px;
  min-height: 0;
  max-height: 111px;
  flex: 1 1 111px;
  margin-top: 12px;
  overflow: visible;
  pointer-events: none;
  transform: none;
}

.intro-decor {
  position: absolute;
  display: block;
  height: auto;
  user-select: none;
}

.intro-decor-console {
  bottom: 16px;
  left: 20px;
  width: 84px;
  transform: rotate(-11.13deg);
}

.intro-decor-window {
  right: 18px;
  bottom: 22px;
  width: 107px;
  transform: rotate(13.54deg);
}

.intro-decor-folder {
  right: 99px;
  bottom: 26px;
  z-index: 2;
  width: 57px;
  transform: rotate(-11.93deg);
}

.intro-decor-phone {
  right: 56px;
  bottom: 16px;
  z-index: 3;
  width: 54px;
  transform: rotate(27.11deg);
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--rose-dark);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .16em;
}

h1 {
  margin: 0;
  font-size: clamp(40px, 9vw, 72px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.primary-button {
  width: 100%;
  max-width: 420px;
  min-height: 56px;
  padding: 14px 24px;
  color: white;
  font-weight: 800;
  background: var(--rose);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgb(232 86 119 / 25%);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}

.primary-button:hover { background: var(--rose-dark); transform: translateY(-2px); }

.intro .primary-button {
  max-width: none;
  min-height: 56px;
  margin-top: 0;
  color: white;
  font-size: 17px;
  background: #5150a9;
  border-radius: 14px;
  box-shadow: none;
}

.intro .primary-button:hover { background: #41408f; }

.game {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  min-height: 100svh;
  padding: max(32px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom));
  font-family: "Noto Sans HK", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.question-window {
  z-index: 2;
}

.question-screen-decor {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: min(100%, 390px);
  height: 150px;
  pointer-events: none;
  transform: translateX(-50%);
}

.screen-decor {
  position: absolute;
  display: block;
  height: auto;
  user-select: none;
}

.screen-decor-console {
  bottom: 10px;
  left: 20px;
  width: 84px;
  transform: rotate(-11.13deg);
}

.screen-decor-cursor {
  bottom: 49px;
  left: 168px;
  z-index: 4;
  width: 42px;
  transform: rotate(135deg);
}

.screen-decor-folder {
  right: 91px;
  bottom: 16px;
  z-index: 2;
  width: 57px;
  transform: rotate(-11.93deg);
}

.screen-decor-window {
  right: 10px;
  bottom: 14px;
  z-index: 1;
  width: 107px;
  transform: rotate(13.54deg);
}

.screen-decor-phone {
  right: 46px;
  bottom: 4px;
  z-index: 3;
  width: 54px;
  transform: rotate(27.11deg);
}

.question-window-content {
  isolation: isolate;
  gap: 24px;
}

/* 將卡片的粉紅色內陰影畫在裝飾背景上方，避免中間露出白色。 */
.question-window-content::before {
  position: absolute;
  inset: 1px;
  z-index: 4;
  border-radius: 11px;
  box-shadow: inset 3px 0 0 #fcd3e6;
  content: "";
  pointer-events: none;
}

.question-card-decor {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: visible;
  pointer-events: none;
}

.card-decor {
  position: absolute;
  display: block;
  height: auto;
  user-select: none;
}

.card-decor-lightning-left {
  top: 88px;
  left: -12px;
  width: 70px;
  transform: rotate(1.5deg);
}

.card-decor-lightning-right {
  top: 25px;
  right: -14px;
  width: 70px;
  transform: rotate(-152.33deg);
}

.card-decor-heart-upper {
  top: 16px;
  left: 16px;
  width: 39px;
  transform: rotate(-20.43deg);
}

.card-decor-star-upper {
  top: 0;
  right: -17px;
  width: 24px;
  transform: rotate(24.54deg);
}

.card-decor-key {
  top: 77px;
  right: 28px;
  width: 42px;
  transform: rotate(22.19deg);
}

.card-decor-spark-left {
  top: 214px;
  left: -37px;
  width: 29px;
  transform: rotate(-21.11deg);
}

.card-decor-spark-right {
  top: 158px;
  right: -37px;
  width: 29px;
  transform: rotate(23.53deg);
}

.card-decor-star-side {
  top: 340px;
  right: -34px;
  width: 24px;
  transform: rotate(65.14deg);
}

.relationship-panel {
  position: relative;
  z-index: 4;
  width: 100%;
}

.relationship-label {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
}

.relationship-label img {
  display: block;
  width: 20.182px;
  height: 18px;
  object-fit: cover;
}

.relationship-meter {
  --meter-height: 14px;

  position: relative;
  width: 100%;
  height: var(--meter-height);
}

.relationship-meter-track {
  position: absolute;
  inset: 0;
  display: block;
  overflow: visible;
  background: #dadce2;
  border: 1px solid #bebbc8;
  border-radius: 25px;
}

.relationship-meter-fill {
  --meter-value: 30%;
  --meter-from: 30%;
  --meter-to: 30%;

  position: absolute;
  top: -1px;
  left: -1px;
  z-index: 1;
  display: block;
  width: var(--meter-value);
  max-width: calc(100% + 2px);
  height: var(--meter-height);
  overflow: hidden;
  background: #fb74c9;
  border: 1px solid #000;
  border-radius: 19px;
  box-shadow:
    inset 1px -2px 0 #f833ab,
    inset 0 2px 0 rgb(255 255 255 / 32%);
}

.relationship-meter-fill.meter-changing {
  animation: relationship-meter-width 2s linear both;
  will-change: width;
}

.meter-glint {
  position: absolute;
  top: 4px;
  left: 3px;
  z-index: 1;
  width: 2px;
  height: 3px;
  background: white;
  pointer-events: none;
}

.meter-glint::before,
.meter-glint::after {
  position: absolute;
  content: "";
  background: white;
}

.meter-glint::before {
  top: -1px;
  left: 1px;
  width: 3px;
  height: 2px;
}

.meter-glint::after {
  top: -2px;
  left: 3px;
  width: 4px;
  height: 2px;
}

.question-main {
  position: relative;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.question-main > :not(.question-card-decor) {
  position: relative;
  z-index: 3;
}

.question-patterns {
  position: absolute;
  inset: 1px;
  z-index: 0;
  overflow: hidden;
  border-radius: 11px;
  pointer-events: none;
}

.question-pattern {
  position: absolute;
  display: block;
  pointer-events: none;
}

.question-pattern-checker {
  top: 67px;
  right: 0;
  left: 14px;
  height: 270px;
  background-color: #fffdf7;
  background-image: url("../assets/question/decor/bg-checker.png");
  background-repeat: repeat;
  background-size: 24.185px 24.185px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 112px, rgb(0 0 0 / 65%) 178px, transparent 246px);
  mask-image: linear-gradient(to bottom, #000 0 112px, rgb(0 0 0 / 65%) 178px, transparent 246px);
}

.question-pattern-grid {
  top: 419px;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #fff8d2;
  background-image: url("../assets/question/decor/bg-yellow-grid.png");
  background-repeat: repeat;
  background-size: 12px 12px;
  border-radius: 0 0 12px 12px;
}

.event-visual-stage {
  position: relative;
  width: 197.246px;
  height: 120px;
  flex: 0 0 120px;
}

.girl-orbit-decor {
  position: absolute;
  top: 3px;
  left: 50%;
  z-index: 0;
  display: block;
  width: 309.106px;
  height: 115.72px;
  max-width: none;
  pointer-events: none;
  transform: translateX(-50%);
}

.girlfriend-character {
  position: relative;
  z-index: 1;
  width: 197.246px;
  height: 120px;
}

.girlfriend-texture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.relationship-days {
  position: relative;
  display: flex;
  width: max-content;
  min-width: 130px;
  height: 26px;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 6px 12px;
  color: white;
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  background: #000;
  border-radius: 19px;
  box-shadow: 4px 2px 0 var(--pink-shadow);
}

.relationship-days > span {
  flex: 0 0 auto;
}

.relationship-days strong {
  flex: 0 0 auto;
  width: auto;
  min-width: 38px;
  height: 31px;
  color: var(--pink-title);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.197;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.day-sticker {
  position: absolute;
  top: -10px;
  left: -16px;
  width: 39px;
  height: 31px;
  object-fit: cover;
}

.event-card {
  width: 100%;
  padding: 0;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.girlfriend-reaction-bubble {
  position: absolute;
  top: 78px;
  right: 18px;
  z-index: 20;
  max-width: 148px;
  margin: 0;
  padding: 4px 8px;
  font-size: 14px;
  line-height: normal;
  background: white;
  border: 1px solid #000;
  border-radius: 12px;
  white-space: nowrap;
}

.girlfriend-reaction-bubble.reaction-entering {
  animation: girlfriend-reaction-opacity 2s linear both, girlfriend-reaction-translate 2s linear both;
  will-change: opacity, translate;
}

.event-card.question-entering {
  animation: question-section-enter .4s ease-out .6s both;
  will-change: opacity, translate;
}

.gift-grid.options-entering,
.boyfriend-thought.options-entering {
  animation: question-section-enter .4s ease-out .8s both;
  will-change: opacity, translate;
}

.event-card h2 {
  margin: 0;
  color: #00000e;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0;
}

.event-question strong { color: var(--pink-title); }

.gift-grid {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr;
  gap: 10px;
}

.gift-option {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  padding: 10px 24px;
  color: #00000e;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  line-height: 17px;
  overflow-wrap: anywhere;
  background: #fcfbf5;
  border: 1px solid #000;
  border-radius: 12px;
  box-shadow: 1px 1px 0 #79d3fd, 3px 5px 0 var(--pink-shadow);
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease;
}

.gift-option.selected {
  color: #00000e;
  font-weight: 400;
  background: #fcfbf5;
  border-color: #000;
}

.gift-option:disabled { cursor: default; }

.gift-option:disabled:not(.selected) {
  color: #b3b3b3;
  opacity: 1;
  border-color: #9f9f9f;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .gift-option:hover {
    background: white;
    transform: translateY(-1px);
  }

  .gift-option:disabled:not(.selected):hover {
    background: #fcfbf5;
    border-color: #9f9f9f;
    box-shadow: none;
    transform: none;
  }

  .gift-option.selected:disabled:hover {
    background: #fcfbf5;
    border-color: #000;
    box-shadow: 1px 1px 0 #79d3fd, 3px 5px 0 var(--pink-shadow);
    transform: none;
  }
}

@keyframes girlfriend-reaction-opacity {
  0% {
    opacity: 0;
    animation-timing-function: ease-out;
  }

  25%, 100% { opacity: 1; }
}

@keyframes girlfriend-reaction-translate {
  0% {
    translate: 0 20px;
    animation-timing-function: ease-out;
  }

  25%, 100% { translate: 0 0; }
}

@keyframes question-section-enter {
  from {
    opacity: 0;
    translate: 0 10px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes relationship-meter-width {
  0% {
    width: var(--meter-from);
    animation-timing-function: ease-out;
  }

  25%, 100% { width: var(--meter-to); }
}

.boyfriend-thought {
  position: absolute;
  bottom: -59px;
  left: -4px;
  z-index: 6;
  width: 197px;
  height: 102.208px;
  margin: 0;
}

.question-bottom-decor {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 50px;
  pointer-events: none;
}

.question-edge-decor {
  position: absolute;
  display: block;
  height: auto;
  user-select: none;
}

.question-edge-star {
  top: -10px;
  left: 198px;
  width: 41px;
  transform: rotate(-8deg);
}

.question-edge-heart {
  top: -7px;
  right: 8px;
  width: 33px;
  transform: rotate(-14deg);
}

.boyfriend-decor {
  position: absolute;
  z-index: 2;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.boyfriend-decor-star {
  top: -19px;
  left: -12px;
  width: 29px;
  height: 35px;
  transform: rotate(-17deg);
}

.boyfriend-decor-heart {
  top: -10px;
  left: 126px;
  width: 29px;
  transform: rotate(-12deg);
}

.boyfriend-visual {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 125.705px;
  height: 102.208px;
}

.boyfriend-texture {
  display: block;
  width: 125.705px;
  height: 102.208px;
  object-fit: contain;
}

.boyfriend-thought p {
  position: absolute;
  top: 32px;
  left: 91px;
  z-index: 3;
  margin: 0;
  padding: 4px 8px;
  color: #000;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
  background: white;
  border: 1px solid #000;
  border-radius: 12px;
}

.result-window {
  width: min(100%, 342px);
  margin: 0;
}

.result-window-content {
  min-height: 0;
  align-items: center;
  padding: 13px 15px 12px;
  overflow: hidden;
}

.result-window-content::before {
  position: absolute;
  inset: 1px;
  z-index: 4;
  border-radius: 11px;
  box-shadow: inset 3px 0 0 #fcd3e6;
  content: "";
  pointer-events: none;
}

.result-pattern {
  position: absolute;
  top: 40px;
  right: 1px;
  bottom: 1px;
  left: 16px;
  z-index: 0;
  background-color: #fffdf7;
  background-image: url("../assets/question/decor/bg-checker.png");
  background-repeat: repeat;
  background-size: 24.185px 24.185px;
  border-radius: 0 0 11px 11px;
}

.result-fixed-layout {
  position: relative;
  z-index: 2;
  display: flex;
  width: 310px;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.result-label {
  position: relative;
  z-index: 5;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

.result-score {
  position: relative;
  z-index: 5;
  display: block;
  height: 99px;
  margin-top: 12.333px;
  color: var(--pink-title);
  font-size: 98px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -6px;
  paint-order: stroke fill;
  -webkit-text-stroke: 7px white;
}

.result-window h1 {
  z-index: 3;
  min-width: 0;
  max-width: 290px;
  margin: 8px 0 0;
  padding: 8px 24px;
  color: white;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: 0;
  background: var(--pink-title);
  border-radius: 999px;
  white-space: nowrap;
}

.ending-visual {
  position: relative;
  width: 174px;
  height: 103px;
  margin: 4px auto 0;
  background: transparent;
}

.ending-character-image {
  display: block;
  width: auto;
  max-width: 174px;
  height: 103px;
  margin: 0 auto;
  object-fit: contain;
}

.ending-description {
  width: 100%;
  margin: -1px auto 0;
  color: #00000e;
  font-size: 16px;
  line-height: 26px;
}

.ending-description span,
.ending-description strong { display: block; }
.ending-description span { white-space: pre-line; }
.ending-description strong { font-weight: 800; }

.result-score-background,
.result-score-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.result-score-background { z-index: 1; }
.result-score-decor { z-index: 10; }

.result-score-decor-image {
  position: absolute;
  top: 13.333px;
  left: 52%;
  display: block;
  width: min(100%, 280px);
  height: auto;
  aspect-ratio: 292.74 / 143.67;
  pointer-events: none;
  transform: translateX(-50%);
}

.result-decor {
  position: absolute;
  display: block;
  height: auto;
}

.result-decor-score-burst {
  top: 48px;
  left: 50%;
  width: 208px;
  transform: translateX(-50%);
}

.result-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 284px;
  max-width: 100%;
  gap: 8px;
  margin-top: 12px;
}

.result-stat-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: 18px 32px 9px;
  gap: 2px 4px;
  min-width: 0;
  height: auto;
  padding: 10px 8px 8px;
  background: #fff;
  border: 1px solid var(--pink-title);
  border-radius: 14px;
}

.result-stat-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
}

.result-stat-icon {
  display: block;
  grid-row: 1 / 3;
  width: 48px;
  height: 40px;
  align-self: center;
  justify-self: center;
  object-fit: contain;
}

.result-stat-card p {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  margin: 0;
}

.result-stat-card p strong { font-size: 30px; line-height: 32px; }
.result-stat-card p span { font-size: 16px; line-height: 1; }

.result-stat-meter {
  --meter-height: 9px;

  grid-column: 1 / -1;
  align-self: end;
}

.result-stat-meter .meter-glint {
  top: 2px;
  left: 2px;
  transform: scale(0.72);
  transform-origin: top left;
}

.result-actions {
  position: relative;
  display: grid;
  width: 100%;
  gap: 8px;
  margin-top: 42px;
}

.result-actions button {
  min-height: 48px;
  padding: 10px 20px;
  font-weight: 800;
  cursor: pointer;
}

.result-share-button {
  color: white;
  background: #5150a9;
  border: 0;
  border-radius: 12px;
}

.result-retry-button {
  color: #000;
  background: #f9c9df;
  border: 2px solid #000;
  border-radius: 12px;
}

.result-action-cursor {
  position: absolute;
  top: -34px;
  left: -15px;
  z-index: 2;
  display: block;
  width: 42px;
  height: auto;
  pointer-events: none;
  transform: rotate(135deg);
}

@media (max-width: 560px) {
  .app-shell { width: min(100% - 24px, 760px); }
  .love-window { width: 100%; }
  .gift-option { min-height: 56px; }
}

@media (min-width: 391px) and (max-width: 560px) {
  .result-score-decor-image {
    top: 7.333px;
    width: clamp(292.74px, calc(292.74px + (100vw - 390px) * 0.4), 312.74px);
  }
}

@media (max-width: 560px) and (min-height: 850px) {
  .game {
    justify-content: center;
    padding-bottom: calc(max(32px, env(safe-area-inset-bottom)) + 59px);
  }
}

@media (max-width: 360px) {
  .intro,
  .game,
  .ending { padding-right: 24px; padding-left: 24px; }

  .question-window-content { padding-right: 13px; padding-left: 13px; }
  .boyfriend-thought { right: auto; left: -4px; }
  .card-decor-lightning-right,
  .card-decor-key,
  .card-decor-spark-right,
  .card-decor-star-side { display: none; }

  .result-stat-card {
    grid-template-columns: 40px minmax(0, 1fr);
    padding-right: 6px;
    padding-left: 6px;
  }

  .result-stat-heading { font-size: 13px; }

  .result-stat-icon {
    width: 40px;
    height: auto;
  }
}

/* 短螢幕將裝飾往底部靠近 12px，接近 700px 高時平滑回到原位。 */
@media (max-height: 700px) {
  .intro-bottom-decor {
    transform: translateY(clamp(0px, calc(168px - 24svh), 12px));
  }
}

@media (max-height: 760px) {
  .game,
  .ending {
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  .intro {
    padding-top: max(24px, env(safe-area-inset-top));
  }
  .intro-badge { width: 62px; }
  .intro h1 { margin-top: 9px; font-size: 36px; line-height: 1.22; }
  .intro-visual { margin-top: 16px; }
  .intro-cta { margin-top: 50px; }
  .intro-cta-cursor { top: -49px; width: 43px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .girlfriend-reaction-bubble.reaction-entering {
    opacity: 1;
    translate: 0;
    animation: none;
    will-change: auto;
  }

  .relationship-meter-fill.meter-changing {
    width: var(--meter-to);
    animation: none;
    will-change: auto;
  }

  .event-card.question-entering,
  .gift-grid.options-entering,
  .boyfriend-thought.options-entering {
    opacity: 1;
    translate: 0;
    animation: none;
    will-change: auto;
  }
}