/* Only the nine icons used by this page, self-hosted to avoid raw ligature text. */
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./icons.ttf") format("truetype");
}
.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
}
/* One geometry owner: no body-width / fixed-viewport-width mismatch. */
html:not(.is-desktop-view),
html:not(.is-desktop-view) body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}
body { background: #f7edcd; }
#invitation-shell {
  --frame-safe-left: 17%;
  --frame-safe-right: 17%;
  --frame-safe-top: 11%;
  --frame-safe-bottom: 21%;
  position: relative;
  width: min(100%, 600px);
  height: 100vh;
  height: 100svh;
  margin-inline: auto;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(#ffe99c, #fffbec 62%, #fff3c8);
}
#poke-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity .5s ease;
}
#poke-border.show { opacity: 1; }
#poke-border > svg { display: block; width: 100%; height: 100%; }
#invitation-scroll {
  position: absolute;
  top: var(--frame-safe-top);
  right: var(--frame-safe-right);
  bottom: var(--frame-safe-bottom);
  left: var(--frame-safe-left);
  z-index: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-padding-block: 18px;
  container-type: inline-size;
  outline-offset: -2px;
}
#invitation-scroll::-webkit-scrollbar { display: none; }
#invitation-scroll > .hero { min-height: 0; background: none; }
#invitation-scroll .hero > .relative.z-10 {
  max-width: 100%;
  padding: 18px 6px 36px;
}
#invitation-scroll .hero .cloud,
#invitation-scroll .hero .pokeball-float,
#invitation-scroll .hero .hills { display: none; }
#invitation-scroll .badge-chip {
  max-width: 100%;
  justify-content: center;
  padding: 7px 9px;
  font-size: 11px;
  letter-spacing: .055em;
  margin-bottom: 20px;
}
#invitation-scroll .couple-oval {
  width: min(76%, 200px, 23svh);
  margin-bottom: 24px;
  border-width: 5px;
}
#invitation-scroll .hero h1.names {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px 8px;
  font-size: clamp(22px, 8.2cqw, 36px);
  line-height: 1.35;
}
#invitation-scroll .person-name { white-space: nowrap; }
#invitation-scroll h1.names .amp { font-size: .8em; }
#invitation-scroll .hero p.welcome-line {
  font-size: clamp(12px, 4.9cqw, 18px) !important;
  line-height: 1.75;
  overflow-wrap: normal;
}
#invitation-scroll .hero p.date-badge {
  font-size: clamp(21px, 8.4cqw, 32px) !important;
}
#invitation-scroll .hero .mt-14 { margin-top: 28px; }
#invitation-scroll .section {
  padding: 38px 8px !important;
  border-radius: 20px;
  margin-bottom: 18px;
}
#invitation-scroll .section .mb-10,
#invitation-scroll .section .mb-8 { margin-bottom: 22px; }
#invitation-scroll .headline {
  font-size: clamp(21px, 8.3cqw, 32px) !important;
  line-height: 1.45;
  overflow-wrap: normal;
}
#invitation-scroll .kicker { font-size: 10px; letter-spacing: .12em; }
#invitation-scroll #countdown { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#invitation-scroll .cd-card { padding: 12px 4px; border-width: 2px; border-radius: 15px; }
#invitation-scroll .cd-num { font-size: clamp(27px, 12cqw, 44px); }
#invitation-scroll .cd-lab { font-size: 10px; letter-spacing: .06em; }
#invitation-scroll .photo-wall { gap: 10px; }
#invitation-scroll .photo-item { border-width: 2px; border-radius: 13px; }
#invitation-scroll .story-card { padding: 16px 12px !important; border-width: 2px; border-radius: 18px; }
#invitation-scroll .story-card .gap-4 { gap: 10px; }
#invitation-scroll .story-card .text-2xl { font-size: 20px; }
#invitation-scroll .story-card .items-start > div:first-child { max-width: 44px; max-height: 44px; }
#invitation-scroll .flow-title { font-size: 27px; }
#invitation-scroll .flow-wrap { max-width: 100%; }
#invitation-scroll .flow-step { gap: 8px; }
#invitation-scroll .fs-icon { transform: scale(.8); }
#invitation-scroll .fs-name { font-size: 17px; }
#invitation-scroll .fs-time { font-size: 15px; }
#invitation-scroll .flow-poem { font-size: 13px; line-height: 1.9; }
#invitation-scroll .btn-poke {
  max-width: 100%;
  gap: 6px;
  padding: 12px 8px !important;
  font-size: clamp(11px, 4.5cqw, 16px) !important;
}
#invitation-scroll .btn-poke .material-symbols-rounded { font-size: 18px; }
#invitation-scroll .btn-poke span { white-space: normal; }
#invitation-scroll .field { min-width: 0; width: 100%; padding: 12px 9px; font-size: 16px; }
#invitation-scroll .stepper { gap: 10px; }
#invitation-scroll .contact-card { flex-wrap: wrap; justify-content: center; padding: 14px 10px; gap: 14px; }
#invitation-scroll .contact-card > div { flex: 1 1 160px; }
#invitation-scroll .contact-call { font-size: 13px; }
#invitation-scroll footer { padding: 36px 10px !important; border-radius: 20px; }
#invitation-scroll footer .names { font-size: 23px; line-height: 1.6; }
#invitation-scroll #bottom-safe { height: 12px; }
body #musicToggle {
  right: max(10px, calc((100vw - 600px) / 2 + 10px)) !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
  width: 36px !important;
  height: 36px !important;
}
@media (max-height: 500px) {
  #invitation-scroll .couple-oval { width: min(50%, 120px); }
  #invitation-scroll .hero > .relative.z-10 { padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #poke-border { transition: none; }
}

/* Chinese headings/copy wrap at meaningful phrase boundaries, not lone glyphs.
 * balance is progressive enhancement; inline-block phrases work in older WebViews.
 */
#invitation-scroll .balanced-copy,
#invitation-scroll p,
#invitation-scroll h2,
#invitation-scroll h3 {
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: normal;
}
#invitation-scroll .phrase {
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
}
#invitation-scroll .badge-chip { flex-wrap: wrap; gap: 2px 7px; }
#invitation-scroll #cdTitle {
  font-size: clamp(20px, 7.4cqw, 30px) !important;
  line-height: 1.55;
}
#invitation-scroll #cdPassed {
  font-size: clamp(16px, 5.7cqw, 23px) !important;
  line-height: 1.7;
}
#invitation-scroll #venue .venue-heading {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}
#invitation-scroll #venue .venue-heading > div:first-child {
  width: 36px !important;
  height: 36px !important;
  margin: 0;
  border-width: 2px !important;
  border-radius: 11px !important;
}
#invitation-scroll #venue .kicker { margin-bottom: 3px; font-size: 9px; }
#invitation-scroll #venue .venue-title {
  margin: 0;
  font-size: clamp(15px, 5.6cqw, 22px);
  line-height: 1.45;
  text-align: left;
}
#invitation-scroll #venue .venue-hall {
  display: block;
  font-size: .86em;
  color: #a26d32;
}
#invitation-scroll .venue-address {
  margin: 10px 0 0;
  font-size: clamp(12px, 4.5cqw, 14px);
  text-align: left;
}
#invitation-scroll #venue .btn-poke {
  margin-top: 13px;
  padding-block: 9px !important;
}
#invitation-scroll .balanced-copy.text-base {
  font-size: clamp(13px, 5.3cqw, 16px);
  line-height: 1.9;
}
#invitation-scroll .flow-poem .phrase,
#invitation-scroll footer .balanced-copy .phrase {
  font-size: inherit;
}
#invitation-scroll .fs-name { text-wrap: balance; }
#invitation-scroll .stepper { max-width: 100%; gap: 6px; padding: 7px 8px; }
#invitation-scroll .step-btn { flex: 0 0 40px; width: 40px; height: 40px; }
#invitation-scroll .step-val { min-width: 32px; font-size: 26px; }
#invitation-scroll .contact-card > div { min-width: 0; flex-basis: 140px; }
#invitation-scroll #countdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#invitation-scroll #countdown .cd-card { min-width: 0; width: 100%; }