:root {
  color-scheme: dark;
  --paper: #f9eed9;
  --soft: #e6ceaf;
  --ink: #56262b;
  --serif: "Songti SC", "Noto Serif CJK SC", "SimSun", serif;
  --hand: "Kaiti SC", "STKaiti", "KaiTi", var(--serif);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #48141c;
  color: var(--paper);
}
* { box-sizing: border-box; }
body, h1, p, figure { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid #fff2d5; outline-offset: 4px; }
[hidden] { display: none !important; }
#album {
  position: relative; isolation: isolate; display: grid; place-items: center;
  min-height: 100vh; min-height: 100svh; overflow: hidden;
}
.backdrop { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #651d29; }
.backdrop::before, .backdrop::after { content: ""; position: absolute; inset: 0; }
.backdrop::before {
  inset: -5px; background: url("./images/wedding/13.jpg") 50% 46% / cover no-repeat;
  filter: saturate(.72) blur(1.5px); opacity: .58;
}
.backdrop::after {
  background: linear-gradient(90deg,rgba(63,12,24,.97),rgba(90,23,33,.74) 46%,rgba(69,15,29,.38) 74%,rgba(47,14,23,.71)),
              linear-gradient(0deg,rgba(44,9,18,.87),rgba(85,27,34,0) 39%);
}
.memory-paper {
  position: absolute; inset: 0; z-index: 1; opacity: var(--paper-opacity,0); pointer-events: none;
  background: linear-gradient(120deg,#f7eddb,#efe1cd 70%,#ead8c2);
}
.arcade-entry {
  position: absolute; right: max(13px,3vw,env(safe-area-inset-right)); top: max(10px,2svh,env(safe-area-inset-top)); z-index: 3;
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px;
  border: 1px solid #e4c494; border-radius: 99px; background: #fff2d7; color: #672c30;
  text-decoration: none; font-size: 14px; font-weight: 650;
}
#cover {
  opacity: 1; visibility: visible;
  display: grid; grid-template-columns: 1.06fr 1fr; align-items: center;
  width: min(1070px, 88vw); gap: clamp(32px,6vw,94px); padding: 7vh 0;
}
.dedication { padding-left: min(3vw, 40px); }
.sender { display: flex; align-items: center; gap: 14px; font: 17px/1.4 var(--hand); letter-spacing: .16em; color: var(--soft); }
.sender span { width: 34px; height: 1px; background: currentColor; }
h1 { margin: .33em 0 .19em; font: 400 clamp(58px,6.8vw,98px)/1.28 var(--serif); letter-spacing: .015em; white-space: nowrap; }
.title-stop { color: #d5a582; font-size: .6em; margin-left: -.09em; }
.greeting { color: #f1dbc6; font: clamp(20px,2vw,28px)/1.6 var(--hand); letter-spacing: .03em; }
.primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 1px solid #ffedcc; border-radius: 999px;
  padding: 0 26px; min-height: 49px;
  color: #5a2429; background: var(--paper); font-size: 15px; font-weight: 600;
  transition: transform .2s, background .2s;
}
.primary:hover { transform: translateY(-2px); background: #fff8e9; }
.cover-actions { display: flex; align-items: center; gap: 22px; margin-top: 36px; }
#video-link { color: var(--soft); font-size: 14px; text-decoration-color: #d8b9a388; text-underline-offset: 5px; }
#video-dialog { border: 0; padding: 0; max-width: 96vw; background: transparent; text-align: center; overflow: visible; }
#video-dialog::backdrop { background: #210c14eb; }
#film { display: block; margin: auto; height: min(82vh,82svh); max-width: 95vw; aspect-ratio: 9/16; object-fit: contain; background: #211417; }
#video-dialog form { margin: 10px auto 0; display: flex; gap: 16px; align-items: center; justify-content: center; }
#video-dialog form a { color: var(--paper); }
#video-dialog .primary { min-height: 40px; padding-inline: 20px; }
.triangle { width: 0; height: 0; border: 5px solid transparent; border-left: 8px solid currentColor; border-right: 0; }
.cover-print {
  width: min(100%, 55svh, 420px); position: relative; justify-self: center;
  transform: rotate(3.5deg); padding: clamp(8px,1vw,13px); padding-bottom: 0;
  background: var(--paper); box-shadow: 0 22px 60px #21070d80, 0 2px 6px #270d163d;
}
.cover-print::before {
  content: ""; position: absolute; left: 37%; top: -10px; width: 26%; height: 26px; z-index: 1;
  background: rgba(224,192,147,.77); transform: rotate(-6deg);
  clip-path: polygon(1% 0,100% 2%,98% 12%,100% 23%,99% 37%,100% 55%,98% 69%,100% 83%,99% 99%,0 97%,2% 81%,0 66%,2% 50%,0 36%,2% 23%,0 12%);
}
.cover-print img { display: block; width: 100%; aspect-ratio: 4 / 4.9; object-fit: cover; object-position: center 47%; }
figcaption { color: #5c342f; font: clamp(19px,2.1vw,30px)/2.45 var(--hand); text-align: center; }
figcaption span { font-size: .72em; margin: 0 .38em; }
.seal { position: absolute; right: 6.5%; bottom: 4.5%; padding: 2px; border: 2px solid #98584f; color: #98584f; font: 16px/1 var(--serif); transform: rotate(-7deg); }

/* 音乐时间决定切换时刻，相片与手写祝词按屏幕形状重新排版。 */
#album:not([data-mode="cover"]):not(.waiting-first) #cover {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .30s ease-out, visibility 0s .30s;
}
#album[data-mode="cover"] .stage, #album[data-mode="cover"] #controls,
#album:not([data-mode="ended"]) #restart { display: none; }
.stage { position: absolute; inset: max(60px,7svh) 6vw max(124px,17svh); }
.scene {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); grid-template-rows: minmax(0,1fr); align-items: center;
  gap: min(6vw,96px); max-width: 1200px; margin: auto; pointer-events: none;
  visibility: hidden;
}
.scene.current { visibility: visible; z-index: 1; }
.scene.leaving { visibility: visible; }
.scene .print { opacity: var(--photo-opacity,0); }
.scene .detail-shot { opacity: var(--detail-opacity,0); }
.scene .line { opacity: var(--line-opacity,0); transform: translateY(var(--line-offset,0px)); }
.scene .note { opacity: var(--note-opacity,0); transform: translateY(var(--note-offset,0px)); }
.memory-card .words { color: #572e31; text-shadow: none; }
.memory-card .note { color: #764840; }
.memory-card .shot { box-shadow: 0 8px 30px #55342528; }
.detail-shot {
  display: block; width: auto; height: auto; max-width: 68%;
  max-height: min(21svh,180px); margin: 0 0 24px 5px;
  border: 6px solid var(--paper); transform: rotate(2deg); box-shadow: 0 7px 20px #200c1238;
}
.duet .detail-shot { max-width: 95%; max-height: 45svh; margin: auto; }
.duet .line { margin-top: clamp(14px,3svh,28px); font: 400 clamp(22px,2.35vw,37px)/1.45 var(--hand); text-align: center; }
.scene.photo-only { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr); }
.photo-only .words { display: none; }
.print {
  min-height: 0; height: 100%; display: flex; align-items: center; justify-content: center;
}
.shot {
  display: block; max-height: 100%; max-width: 100%; width: auto; height: auto;
  border: clamp(5px,.6vw,9px) solid var(--paper);
  box-shadow: 0 16px 55px #2207106b; object-fit: contain;
}
.words { align-self: center; text-shadow: 0 1px 8px #38141766; }
.line { font: 400 clamp(31px,3.6vw,60px)/1.55 var(--serif); letter-spacing: .04em; text-wrap: balance; white-space: pre-line; }
.note { margin-top: 1em; font: clamp(18px,1.85vw,27px)/1.65 var(--hand); color: var(--soft); text-wrap: balance; white-space: pre-line; }
.note:empty { display: none; }
.scene[data-layout="ending"] .line { font-size: clamp(42px,5.2vw,78px); }
.scene[data-layout="ending"] .note span { white-space: nowrap; }
.scene[data-layout="ending"] .note::after { content: "囍"; display: block; margin-top: 1.1em; font: 27px/1 var(--serif); color: #e2b4a1; }
.player-dock, .timeline { display: contents; }
#controls {
  position: absolute; bottom: max(25px,4svh,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  width: min(640px,90vw); display: flex; align-items: center; gap: 4px;
  padding: 6px 13px; border: 1px solid #e0ba9f47; border-radius: 999px;
  background: #321017e8; color: var(--paper);
}
.icon-button { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; color: inherit; }
.icon-button:hover { background: #fff3df1c; }
.icon-button:disabled { opacity: .4; }
.step-icon { width: 10px; height: 10px; display: block; border-top: 2px solid; border-right: 2px solid; transform: rotate(45deg); }
.step-icon.prev { transform: rotate(-135deg); }
.toggle-icon { width: 12px; height: 15px; border: 0 solid; border-left-width: 4px; border-right-width: 4px; }
[data-mode="paused"] .toggle-icon, [data-mode="ended"] .toggle-icon { width: 0; height: 0; border: 7px solid transparent; border-left: 11px solid currentColor; border-right: 0; }
.volume-icon { position: relative; font: 26px/1 Georgia,serif; }
[aria-pressed="true"] .volume-icon::after { content:""; position:absolute; width:23px; height:2px; background:currentColor; left:-4px; top:50%; transform:rotate(-45deg); }
#progress { flex: 1; min-width: 30px; height: 24px; accent-color: #f1ceac; cursor: pointer; }
#clock { margin: 0 4px; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#restart { position: absolute; bottom: max(99px,13svh); right: 12%; }
#status { position: absolute; top: max(10px,env(safe-area-inset-top)); left: 4vw; right: 4vw; text-align: center; font-size: 13px; }
#status:empty { display: none; }
.fallback { color: var(--paper); display: inline-block; padding: 16px; }

@media (pointer: coarse), (max-width: 700px) {
  #album { min-height: 100dvh; }
  .arcade-entry, #video-link, #video-dialog form a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .arcade-entry {
    top: max(8px,calc(env(safe-area-inset-top) + 4px));
    right: max(12px,calc(env(safe-area-inset-right) + 6px));
  }
  .icon-button { flex-basis: 44px; min-width: 44px; height: 44px; }
  #progress { height: 44px; margin: 0; }
  #video-dialog {
    width: min(94vw,540px); max-width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 12px);
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px);
    overflow: auto; overscroll-behavior: contain;
  }
  #film {
    height: auto; max-width: 100%; width: min(100%,calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 76px) * .5625));
  }
  #video-dialog .primary { min-height: 44px; }
}
@media (max-width: 1024px) and (orientation: portrait) {
  #album {
    --dock-bottom: max(8px,calc(env(safe-area-inset-bottom) + 6px));
    --stage-bottom: calc(var(--dock-bottom) + 112px);
    min-height: 100dvh;
  }
  .backdrop::before { background-position: 48% 50%; }
  .backdrop::after { background: linear-gradient(0deg,#40131af7,#641c2bbb 62%,#58152482); }
  #cover { width: min(87vw,560px); display: flex; flex-direction: column-reverse; gap: clamp(16px,3.6svh,39px); padding: max(57px,calc(env(safe-area-inset-top) + 50px)) 0 max(14px,calc(env(safe-area-inset-bottom) + 8px)); }
  .dedication { width: 100%; padding: 0; text-align: center; }
  .sender { justify-content: center; font-size: 14px; gap: 10px; }
  .sender::after { content:""; width: 23px; height: 1px; background: currentColor; }
  .sender span { width: 23px; }
  h1 { margin: .14em 0 .05em; font-size: clamp(42px,11vw,65px); }
  .greeting { font-size: clamp(17px,4.6vw,23px); }
  .cover-actions { justify-content: center; gap: 16px; margin-top: clamp(12px,2.5svh,25px); }
  #start { min-height: 45px; }
  .cover-print { width: min(69vw,35svh,440px); }
  .cover-print::before { height: 19px; }
  figcaption { font-size: 20px; line-height: 2.1; }
  .seal { bottom: 3%; font-size: 13px; }
  .stage {
    top: max(62px,calc(env(safe-area-inset-top) + 56px)); bottom: var(--stage-bottom);
    left: max(6vw,env(safe-area-inset-left)); right: max(6vw,env(safe-area-inset-right));
  }
  .scene { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: max(16px,2.6svh); }
  .scene.memory-card { grid-template-rows: minmax(0,min(50svh,112vw)) 4.8rem; align-content: center; gap: clamp(14px,2.4svh,24px); }
  .memory-card .words { align-self: start; }
  .print { width: 100%; }
  .shot { max-width: 100%; max-height: 100%; }
  .words { text-align: center; }
  .words:has(.detail-shot:not([hidden])) { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; text-align: left; gap: 0 14px; }
  .words .detail-shot { grid-row: span 2; max-width: 25vw; max-height: 12svh; margin: 0 0 0 4px; border-width: 4px; }
  .scene.duet { grid-template-rows: minmax(0,1fr) minmax(0,.84fr); gap: 14px; }
  .scene.duet .words { height: 100%; min-height: 0; display: grid; grid-template: minmax(0,1fr) auto / 1fr; justify-items: center; gap: 12px; }
  .duet .detail-shot { grid-area: 1 / 1; max-width: 86%; max-height: 100%; margin: auto; }
  .duet .line { grid-area: 2 / 1; margin: 0; font-size: clamp(19px,5.1vw,27px); }
  .line { font-size: clamp(24px,6vw,34px); line-height: 1.45; }
  .note { margin-top: .42em; font-size: clamp(16px,4.5vw,23px); }
  .scene[data-layout="ending"] .line { font-size: clamp(38px,10vw,54px); }
  .scene[data-layout="ending"] .note::after { display: none; }
  .player-dock {
    position: absolute; inset-inline: max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right));
    bottom: var(--dock-bottom); max-width: 540px; margin: auto;
    display: flex; flex-direction: column-reverse; align-items: center; gap: 8px;
  }
  #controls {
    position: static; transform: none; width: 100%; padding: 2px 10px 5px; border-radius: 23px;
    display: grid; grid-template-columns: repeat(4,minmax(44px,1fr)); grid-template-rows: 44px 44px;
    justify-items: center; align-items: center; gap: 0;
  }
  .timeline { grid-area: 1 / 1 / 2 / -1; width: 100%; display: flex; align-items: center; gap: 9px; padding-inline: 4px; }
  #progress { height: 44px; min-width: 0; margin: 0; flex: 1; }
  #clock { margin: 0; font-size: 12px; }
  #controls .icon-button { grid-row: 2; width: 100%; max-width: 65px; height: 44px; }
  #toggle { background: #fff0d926; }
  #album[data-mode="ended"] .stage { bottom: calc(var(--stage-bottom) + 52px); }
  #restart { position: static; transform: none; min-height: 44px; }
}
@media (max-height: 510px) and (orientation: landscape) {
  #cover { padding: 17px 0; } .cover-print { width: min(45svh,240px); }
  h1 { font-size: 48px; } .greeting { font-size: 18px; } .cover-actions { margin-top: 16px; }
  figcaption { font-size: 15px; } .seal { font-size: 11px; }
  .stage {
    top: max(52px,calc(env(safe-area-inset-top) + 48px)); bottom: max(70px,calc(env(safe-area-inset-bottom) + 64px));
    left: max(6vw,calc(env(safe-area-inset-left) + 5px)); right: max(6vw,calc(env(safe-area-inset-right) + 5px));
  }
  .line { font-size: clamp(19px,5.8svh,28px); }
  .note { font-size: clamp(15px,4.2svh,19px); margin-top: .45em; }
  .scene[data-layout="ending"] .line { font-size: clamp(28px,8svh,38px); }
  .scene[data-layout="ending"] .note span { display: block; }
  .scene[data-layout="ending"] .note .signature-divider { display: none; }
  .scene[data-layout="ending"] .note::after { display: none; }
  .words .detail-shot { max-height: 15svh; margin-bottom: 8px; }
  .duet .detail-shot { max-height: 28svh; }
  .duet .line { font-size: clamp(17px,4.5svh,23px); margin-top: 8px; }
  .arcade-entry { min-height: 44px; top: max(2px,env(safe-area-inset-top)); }
  .player-dock {
    position: absolute; left: max(8px,env(safe-area-inset-left)); right: max(8px,env(safe-area-inset-right));
    bottom: max(5px,calc(env(safe-area-inset-bottom) + 3px)); max-width: 650px; margin: auto;
    display: flex; align-items: center; justify-content: center; gap: 7px;
  }
  #controls { position: static; transform: none; flex: 1; min-width: 0; max-width: 550px; padding: 1px 6px; }
  .icon-button { flex-basis: 44px; height: 44px; }
  #progress { height: 44px; margin: 0; }
  #restart { position: static; min-height: 44px; padding: 0 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}