/* ============================================================
   像素风婚礼祝福 · 样式
   配色取自照片：湖蓝、金草、紫粉花
   ============================================================ */

:root {
  --ink: #14101f;
  --ink-2: #221a33;
  --ink-3: #322646;
  --line: #0f0b18;

  --violet: #a982c8;
  --violet-d: #6d4f92;
  --violet-dd: #4a3465;
  --pink: #e8628a;
  --pink-l: #ff9ab5;
  --gold: #e8c37a;
  --gold-d: #b3904f;
  --paper: #f8f2e6;
  --paper-2: #ece0cb;
  --sky: #9dcbe3;

  --font-pixel: 'Press Start 2P', 'Zpix', ui-monospace, 'Courier New', monospace;
  --font-cn: 'Zpix', system-ui, -apple-system, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', sans-serif;
}

* { box-sizing: border-box; }

/* 有些元素被 CSS 设成了 flex/grid，必须让 hidden 属性优先 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100dvh;
  background: radial-gradient(120% 90% at 50% 0%, #2a2040 0%, var(--ink) 62%, #0d0a15 100%);
  color: var(--paper);
  font-family: var(--font-cn);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background 0.6s ease;
}

/* 背景细网格，一点点像素质感 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
  background-image:
    repeating-linear-gradient(to right, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 4px);
}

body.act2-in {
  background: radial-gradient(130% 80% at 50% 0%, #3b2b52 0%, #221a33 55%, #120e1c 100%);
}

/* 首屏淡入：用 animation 而不是 transition，避免停在半透明状态 */
.act--stage { animation: act-in 0.5s ease-out both; }
@keyframes act-in {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: none; }
}

img { max-width: 100%; }

/* ============================================================
   像素按钮
   ============================================================ */
.px-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-cn);
  font-size: clamp(12px, 1.5vw, 15px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff8ec;
  background: var(--violet-d);
  border: 0;
  border-radius: 0;
  padding: 0.72em 1.15em;
  cursor: pointer;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.28),
    0 0 0 3px var(--line),
    4px 4px 0 0 var(--line);
  transition: transform 0.08s steps(2), background 0.2s;
  image-rendering: pixelated;
}
.px-btn:hover { background: #7d5ba6; }
.px-btn:active {
  transform: translate(3px, 3px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    0 0 0 3px var(--line),
    1px 1px 0 0 var(--line);
}
.px-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.px-btn--icon {
  font-size: clamp(10px, 1.2vw, 12px);
  padding: 0.55em 0.8em;
  background: var(--ink-3);
}
.px-btn--icon:hover { background: #3f3059; }

.px-btn--sm { font-size: clamp(11px, 1.2vw, 13px); padding: 0.55em 0.9em; }

/* 「推开花门」按钮：用 visibility 而不是 display 隐藏，
   位置一直占着，解锁时画面就不会跟着缩一下 */
.px-btn--go {
  background: linear-gradient(180deg, #e8628a 0%, #c2477a 100%);
  font-size: clamp(13px, 1.8vw, 17px);
  padding: 0.85em 1.4em;
  visibility: hidden;
}
.px-btn--go.is-in {
  visibility: visible;
  animation: btn-pop 0.45s steps(4) both, btn-breathe 2.2s ease-in-out 0.5s infinite;
}
.px-btn--go:hover { background: linear-gradient(180deg, #ff7ba0 0%, #d1518a 100%); }

@keyframes btn-pop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes btn-breathe {
  0%, 100% { box-shadow: inset 0 2px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.28), 0 0 0 3px var(--line), 4px 4px 0 0 var(--line), 0 0 0 3px var(--line); }
  50% { box-shadow: inset 0 2px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.28), 0 0 0 3px var(--line), 4px 4px 0 0 var(--line), 0 0 22px 6px rgba(232, 98, 138, .45); }
}

/* ============================================================
   顶部工具条
   ============================================================ */
.toolbar {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: 12px;
  z-index: 50;
  display: flex;
  gap: 8px;
}

/* ============================================================
   第一幕：舞台
   ============================================================ */
.act { position: relative; z-index: 1; transition: opacity 0.4s ease; }

.act--stage {
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
}
.act--stage.is-out { opacity: 0; transform: scale(1.02); }

.stage-shell {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.stage-frame {
  --scale: 3;
  position: relative;
  flex: 0 0 auto;
  width: calc(320px * var(--scale));
  height: calc(180px * var(--scale));
  overflow: hidden;
  box-shadow:
    0 0 0 3px var(--line),
    0 0 0 7px #7a5f9c,
    0 0 0 10px var(--line),
    0 18px 50px rgba(0, 0, 0, 0.55);
}

#stage {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: grab;
}
#stage:active { cursor: grabbing; }

.stage-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  padding: calc(var(--scale) * 3px) calc(var(--scale) * 4px);
}

/* 标题：压在天空上，硬阴影保证可读 */
.hero { text-align: center; margin: 0; }
.hero__en {
  margin: 0;
  font-family: var(--font-pixel);
  font-size: clamp(11px, calc(var(--scale) * 4.6px), 26px);
  line-height: 1.35;
  color: #fff9ee;
  text-shadow:
    2px 0 var(--violet-dd), -2px 0 var(--violet-dd), 0 2px var(--violet-dd),
    0 -2px var(--violet-dd), 3px 3px 0 rgba(40, 25, 60, 0.45);
  letter-spacing: 0.04em;
}
.hero__cn {
  margin: 0.45em 0 0;
  font-size: clamp(10px, calc(var(--scale) * 3.4px), 18px);
  font-weight: 700;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  color: #fff3f7;
  text-shadow: 1px 1px 0 #6d4f92, 2px 2px 0 rgba(30, 20, 45, 0.35);
}
/* 白闪 */
.flash {
  position: absolute;
  inset: 0;
  background: #fffdf4;
  opacity: 0;
  pointer-events: none;
}
.flash.is-on { animation: flash 0.6s ease-out; }
@keyframes flash {
  0% { opacity: 0; }
  10% { opacity: 0.92; }
  100% { opacity: 0; }
}

/* ---------- 画框下方的任务卡 ---------- */
.stage-foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.task-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  background: rgba(34, 26, 51, 0.85);
  box-shadow: 0 0 0 3px var(--line), 0 0 0 5px rgba(169, 130, 200, 0.35);
}
.task-card.is-unlocked { box-shadow: 0 0 0 3px var(--line), 0 0 0 5px rgba(232, 195, 122, 0.7); }

.task-card__title {
  margin: 0;
  font-size: clamp(13px, 1.7vw, 17px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff6ea;
}
.task-card__hint {
  margin: 0;
  font-size: clamp(11px, 1.3vw, 13px);
  color: #c7b9dd;
  min-height: 1.2em;
}

/* 进度：两个小徽章 */
.pips {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pips__heart {
  color: #5b4a75;
  font-size: 14px;
  transition: color 0.3s, transform 0.3s;
}
.pips.is-full .pips__heart {
  color: var(--pink);
  transform: scale(1.35);
  animation: beat 0.9s ease-in-out infinite;
}
@keyframes beat {
  0%, 100% { transform: scale(1.25); }
  50% { transform: scale(1.5); }
}

.pip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  font-size: clamp(10px, 1.2vw, 12px);
  color: #a596c0;
  background: rgba(15, 11, 24, 0.6);
  box-shadow: 0 0 0 2px #3b2e55;
  transition: all 0.25s steps(2);
}
.pip b { font-size: 1.1em; }
.pip em { font-style: normal; letter-spacing: 0.1em; }
.pip.is-on {
  color: #fff6ea;
  background: var(--violet-d);
  box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(232, 195, 122, 0.4);
}

.stage-foot__tip {
  margin: 0;
  font-size: 11px;
  color: #7c6d99;
  letter-spacing: 0.05em;
}

/* ============================================================
   第二幕：视频 + 信
   ============================================================ */
.act--page {
  min-height: 100dvh;
  padding: clamp(56px, 8vh, 90px) 14px clamp(30px, 6vh, 60px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.act--page.is-in { opacity: 1; transform: none; }

.page-wrap {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 4vh, 38px);
}

.page-head { text-align: center; }
.page-head__kicker {
  margin: 0 0 10px;
  font-family: var(--font-pixel);
  font-size: clamp(7px, 1.3vw, 11px);
  letter-spacing: 0.18em;
  color: var(--gold);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  animation: kicker 2.4s steps(2) infinite;
}
@keyframes kicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.page-head__title {
  margin: 0;
  font-size: clamp(26px, 6vw, 46px);
  letter-spacing: 0.16em;
  color: #fff7ec;
  text-shadow: 3px 3px 0 var(--violet-dd), 6px 6px 0 rgba(0, 0, 0, 0.35);
}
.page-head__sub {
  margin: 12px 0 0;
  font-size: clamp(12px, 1.7vw, 15px);
  letter-spacing: 0.45em;
  text-indent: 0.45em;
  color: #cbb8e2;
}

/* ---------- 通用面板 ---------- */
.panel {
  background: var(--ink-2);
  box-shadow: 0 0 0 3px var(--line), 0 0 0 6px rgba(169, 130, 200, 0.3), 0 12px 30px rgba(0, 0, 0, 0.4);
}
.panel__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--violet-dd);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.3);
}
.panel__bar .dot {
  width: 8px;
  height: 8px;
  background: #d9c9f0;
  opacity: 0.55;
}
.panel__bar .dot:nth-child(1) { background: var(--pink-l); opacity: 0.9; }
.panel__bar .dot:nth-child(2) { background: var(--gold); opacity: 0.9; }
.panel__bar b {
  margin-left: 8px;
  font-size: clamp(12px, 1.5vw, 14px);
  letter-spacing: 0.1em;
  color: #fff4e6;
}
.panel__caption {
  margin: 0;
  padding: 10px 14px 14px;
  font-size: clamp(11px, 1.3vw, 13px);
  color: #b7a6d1;
  text-align: center;
  letter-spacing: 0.06em;
}

/* ---------- 视频：像素小电视 ---------- */
.tv {
  position: relative;
  margin: 14px;
  padding: 8px;
  background: #0c0913;
  box-shadow: inset 0 0 0 2px #4a3a63;
}
.tv__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #05040a;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.tv__screen video,
.tv__embed iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
.tv__embed { width: 100%; height: 100%; }
.tv__scanlines {
  position: absolute;
  inset: 8px;
  pointer-events: none;
  opacity: 0.28;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0 1px,
    transparent 1px 3px
  );
}
.tv__missing {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  text-align: center;
  font-size: clamp(11px, 1.3vw, 13px);
  line-height: 1.8;
  color: #c9b9e4;
}
.tv__missing b { font-size: 1.15em; color: var(--gold); letter-spacing: 0.08em; }
.tv__missing code {
  padding: 1px 5px;
  background: rgba(169, 130, 200, 0.18);
  color: #ffe6f0;
  font-size: 0.95em;
}

/* ---------- 信 ---------- */
.letter {
  margin: 14px;
  padding: clamp(18px, 3vw, 30px);
  background: var(--paper);
  color: #3a2f2a;
  box-shadow: inset 0 0 0 2px var(--paper-2), 0 0 0 2px #b9a98c;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 27px,
    rgba(120, 100, 80, 0.12) 27px 28px
  );
  background-position: 0 8px;
  min-height: 180px;
}
.letter__greeting {
  margin: 0 0 1em;
  font-size: clamp(14px, 1.8vw, 17px);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.letter__body p {
  margin: 0 0 1.1em;
  font-size: clamp(13px, 1.6vw, 16px);
  line-height: 28px;
  text-indent: 2em;
  letter-spacing: 0.03em;
}
.letter__sign {
  margin: 1.6em 0 0;
  text-align: right;
  font-size: clamp(12px, 1.5vw, 15px);
  line-height: 2;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.letter.is-done .letter__sign { opacity: 1; }
.letter__sign small { color: #8a7a68; letter-spacing: 0.08em; }

.caret {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  vertical-align: -0.14em;
  background: var(--pink);
  animation: blink 0.75s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.letter__tools { padding: 0 14px 14px; text-align: right; }

/* ---------- 照片 ---------- */
.panel--photo { padding: 14px; }
.frame {
  padding: 10px;
  background: var(--paper-2);
  box-shadow: 0 0 0 3px #8d7a5e, inset 0 0 0 2px #fffaf0;
}
.frame img { display: block; width: 100%; height: auto; }

/* ---------- 页脚 ---------- */
.page-foot { text-align: center; padding: 8px 0 0; }
.page-foot .hearts {
  color: var(--pink);
  letter-spacing: 0.6em;
  font-size: 14px;
  animation: beat 1.6s ease-in-out infinite;
}
.page-foot p {
  margin: 10px 0 0;
  font-family: var(--font-pixel);
  font-size: clamp(7px, 1.2vw, 10px);
  color: #7c6d99;
  letter-spacing: 0.1em;
}

/* ---------- 飘落的花瓣 ---------- */
.petal-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.petal-layer i {
  position: absolute;
  top: -24px;
  left: var(--x);
  width: var(--size);
  height: calc(var(--size) * 0.7);
  background: var(--c);
  opacity: 0.85;
  animation: petal-fall var(--dur) linear forwards;
}
@keyframes petal-fall {
  to {
    transform: translate(var(--drift), 108vh) rotate(calc(var(--spin) * 900deg));
    opacity: 0.5;
  }
}

/* ============================================================
   小屏适配
   ============================================================ */
/* 竖屏时整体稍微上移，别让画面沉在正中间 */
@media (orientation: portrait) {
  .stage-shell { padding-bottom: 6vh; }
}

@media (max-width: 560px) {
  .task-card { padding: 9px 12px; gap: 5px; }
  .stage-shell { gap: 8px; }
  .toolbar { right: 8px; gap: 6px; }
  .letter, .tv { margin: 10px; }
}

@media (min-width: 620px) and (orientation: landscape) {
  .stage-foot__tip { display: none; }
}

/* 手机横屏：屏幕矮，UI 全部收紧，把高度让给画面 */
@media (orientation: landscape) and (max-height: 540px) {
  .act--stage { padding: 4px; }
  .stage-shell { gap: 6px; }
  .stage-foot { gap: 6px; }
  .task-card { padding: 6px 12px; gap: 4px; }
  .task-card__title { font-size: 13px; }
  .task-card__hint { font-size: 11px; }
  .pip { padding: 2px 7px; font-size: 10px; }
  .px-btn--go { font-size: 13px; padding: 0.6em 1em; }
  .toolbar { top: 6px; right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .px-btn--go { animation: none; }
  .petal-layer { display: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}