@font-face {
  font-family: DeArPix;
  src: url('/public/assets/fonts/dearpix-1-94.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Tiny5;
  src: url('/public/assets/fonts/Tiny5-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Tiny5;
  src: url('/public/assets/fonts/Tiny5-Bold.woff2') format('woff2');
  font-weight: 700 900;
  font-display: swap;
}
:root {
  font-family: DeArPix, Tiny5, ui-sans-serif, system-ui, sans-serif;
  font-size: 20px;
  color: #3b3040;
  background: #e5dccb;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
button, a { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .8; }
:focus-visible { outline: 3px solid #215da6; outline-offset: 4px; }
#app { min-height: 100vh; }
.load-error { max-width: 40rem; margin: 4rem auto; padding: 2rem; background: #f6e8c9; border: 3px solid #785043; }
.scene {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: #5d8868 center / cover no-repeat;
  position: relative;
}
.scene::before { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 42%, #23342c45 100%); pointer-events: none; }
.scene > * { position: relative; z-index: 1; }
.topbar { width: min(100%, 960px); display: flex; justify-content: flex-end; }
.skip-button, .primary-button, .choice-button {
  min-height: 44px;
  border: 3px solid #3b3040;
  border-radius: 5px;
  background: #e7b36a;
  color: #30252f;
  box-shadow: 3px 3px 0 #3b3040;
  font-weight: 700;
}
.skip-button { padding: .5rem .8rem; background: #f6e8c9; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .55rem .9rem; }
.skip-button:hover, .primary-button:hover, .choice-button:hover { filter: brightness(1.07); transform: translateY(-1px); }
.dialogue-panel {
  width: min(100%, 960px);
  min-height: 205px;
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: #f6e8c9;
  border: 18px solid #785043;
  border-image: url('/public/assets/ui/dialogue_frame_source.png') 205 fill / 18px / 0 stretch;
  filter: drop-shadow(5px 7px 0 #3b3040);
}
.portrait { flex: 0 0 auto; width: clamp(110px, 18vw, 170px); height: clamp(110px, 18vw, 170px); object-fit: contain; image-rendering: pixelated; }
.dialogue-content { flex: 1; min-width: 0; }
.nameplate {
  min-width: 90px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .35rem 1rem;
  font-weight: 800;
  background: #e7b36a center / 100% 100% no-repeat;
  text-shadow: 0 1px #f6e8c9;
}
.dialogue-text { font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.45; min-height: 3.1em; margin: .8rem 0 1rem; }
.continue-button { margin-top: .1rem; }
.next-icon { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }
.choice-list { display: flex; flex-wrap: wrap; gap: .7rem; }
.choice-button { display: inline-flex; flex-direction: row-reverse; align-items: center; gap: .4rem; padding: .5rem .7rem; text-align: left; background: #fff5da; }
.choice-cursor { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; opacity: 0; }
.choice-button:hover .choice-cursor, .choice-button:focus-visible .choice-cursor { opacity: 1; }
.reveal { align-self: center; display: grid; justify-items: center; gap: 1rem; margin: auto; padding: 1.5rem; }
.envelope-pair { position: relative; width: min(72vw, 360px); aspect-ratio: 4 / 3; }
.envelope-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 10px 7px #2228); }
.envelope-open { opacity: 0; }
.reveal.opening .envelope-closed { opacity: 0; }
.reveal.opening .envelope-open { opacity: 1; }
.open-button { font-size: 1.1rem; }
.invitation-page { position: fixed; inset: 0; height: 100dvh; overflow: hidden; background: #23342c center / cover no-repeat; }
.invitation-page::before { content: ''; position: absolute; inset: 0; background: #17151dcc; pointer-events: none; }
.invitation-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 840px;
  transform-origin: center;
  margin: 0;
  padding: 22px 30px;
  border: 24px solid #785043;
  border-image: url('/public/assets/invitation/invitation_card_frame_source.png') 205 fill / 24px / 0 stretch;
  background: #f6e8c9;
  filter: drop-shadow(8px 10px 0 #3b3040);
  text-align: center;
}
.cap-icon { width: 42px; height: 42px; object-fit: contain; image-rendering: pixelated; }
.eyebrow { margin: .4rem 0; color: #785043; font-weight: 700; letter-spacing: .03em; }
.invitation-card h1 { font-size: clamp(1.6rem, 4vw, 2.5rem); margin: .3rem 0; line-height: 1.2; }
.graduate-name { margin: .5rem 0; font-size: clamp(1.55rem, 4vw, 2.3rem); font-weight: 800; color: #6d4241; }
.institution { margin: .2rem 0 1.4rem; }
.invitation-intro { max-width: 35rem; margin: 0 auto 1.5rem; line-height: 1.5; font-weight: 600; }
.ceremony-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; text-align: left; }
.ceremony { border: 3px solid #785043; background: #fff5dbd9; padding: 1rem; box-shadow: 4px 4px 0 #b98159; }
.ceremony h2 { font-size: 1.2rem; margin: 0 0 1rem; line-height: 1.3; }
.ceremony p { margin: .6rem 0; line-height: 1.45; }
.detail-line { display: flex; align-items: center; gap: .4rem; margin: .6rem 0; line-height: 1.4; }
.detail-icon { flex: 0 0 28px; width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
.tentative, .pending-detail { font-size: .9rem; color: #634a47; }
.tentative { font-style: normal; }
.closing-note { margin: 1.8rem 0 1rem; font-weight: 700; }
.card-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem; }
.source-link, .text-link { color: #633b40; text-underline-offset: .2em; }
@media (max-width: 650px) {
  .scene { gap: 1rem; padding: .7rem; background-position: center; }
  .dialogue-panel { min-height: 0; gap: .4rem; padding: .8rem; border-width: 12px; border-image-width: 12px; }
  .portrait { width: clamp(70px, 22vw, 100px); height: clamp(70px, 22vw, 100px); }
  .nameplate { min-width: 70px; min-height: 30px; padding: .25rem .65rem; }
  .dialogue-text { min-height: 0; margin: .5rem 0; }
  .choice-list { flex-direction: column; }
  .choice-button { width: 100%; justify-content: space-between; }
  .invitation-page { padding: .7rem; }
  .invitation-card { width: 500px; padding: 16px 22px; border-width: 14px; border-image-width: 14px; }
  .ceremony-list { grid-template-columns: 1fr; }
  .invitation-card .institution { margin-bottom: .5rem; }
  .invitation-intro { margin-bottom: .6rem; line-height: 1.25; }
  .ceremony { padding: .55rem .7rem; }
  .ceremony h2 { margin-bottom: .4rem; }
  .ceremony p, .ceremony .detail-line { margin: .3rem 0; line-height: 1.25; }
  .closing-note { margin: .6rem 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}