* { box-sizing: border-box; }
:root { color-scheme: light; color: #512a35; background: #fff3ef; }
body {
  margin: 0; min-height: 100svh; display: grid; place-items: center;
  padding: clamp(1rem, 5vw, 4rem);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  background: radial-gradient(ellipse at 10% 10%, #ffe1e5, transparent 60%),
              radial-gradient(ellipse at 94% 85%, #f6d1dc, transparent 55%), #fff3ef;
}
.card {
  width: min(100%, 29rem); padding: clamp(1.4rem, 6vw, 3rem);
  border: 1px solid #ebc9cf; border-radius: 2rem;
  background: #fffbf7; box-shadow: 0 1.5rem 4rem #81294419;
  text-align: center; animation: arrive 550ms ease-out both;
}
.seal {
  margin: 0 auto 1.25rem; width: 3.5rem; aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid #efc0cd; background: #fbe5eb; color: #9a3457; font-size: 1.5rem;
}
h1 { margin: 0; font: normal clamp(2rem, 8vw, 3.2rem)/1.08 'Instrument Serif', Georgia, serif; }
.intro { margin: .75rem 0 1.6rem; color: #754756; }
form { display: grid; gap: .45rem; text-align: left; }
label { font-size: .91rem; font-weight: 650; }
input, button { font: inherit; width: 100%; min-width: 0; min-height: 3rem; border-radius: .8rem; }
input { margin-bottom: .55rem; border: 1px solid #d8aeba; padding: .65rem .85rem; background: white; color: inherit; }
button { margin-top: .55rem; background: #89334f; color: white; border: 0; font-weight: 650; cursor: pointer; transition: background 180ms; }
button:hover { background: #6f253f; }
button span { margin-left: .3rem; }
:focus-visible { outline: 2px solid #89334f; outline-offset: 3px; }
.error { padding: .75rem; border-radius: .8rem; background: #fae5eb; color: #792d48; }
.letter { width: min(100%, 48rem); }
article { margin: 2rem 0; white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; font: 1.14rem/1.72 Georgia, serif; }
a { color: #89334f; text-underline-offset: .25em; }
@keyframes arrive { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: translateY(0); } }
[hidden] { display: none !important; }
.game {
  width: min(100%, 34rem); padding: 1.5rem 1.25rem 1rem;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.scene { min-height: 25rem; }
.cat {
  display: block; width: min(70%, 16rem); height: 16rem; object-fit: contain;
  margin: 0 auto 1.25rem;
}
.game h1 { white-space: pre-line; font-size: clamp(1.55rem, 5.5vw, 2rem); line-height: 1.3; text-wrap: balance; }
.playground { height: 11rem; position: relative; }
.playground button { position: absolute; width: 7rem; margin: 0; left: calc(50% - 3.5rem); top: 1rem; }
.question #yes { left: calc(50% - 7.5rem); }
.question.yes-only:not([data-position]) #yes { left: calc(50% - 3.5rem); }
.question #no { left: calc(50% + .5rem); background: #f0d8df; color: #663247; }
.playground[data-position="1"] #yes { left: calc(100% - 7rem); top: 6.5rem; }
.playground[data-position="2"] #yes { left: 0; top: 3rem; }
.playground[data-position="3"] #yes { left: calc(100% - 7rem); top: 0; }
.playground[data-position="4"] #yes { left: 0; top: 6.5rem; }
.heart-trail {
  position: absolute; color: #c85c86; font-size: 1rem;
  pointer-events: none; z-index: 1; line-height: 1;
}
.playground #yes { z-index: 2; }
.playground #sorry { top: 3rem; width: min(100%, 17rem); left: 50%; transform: translateX(-50%); }
.playground #letter { width: 15rem; max-width: 100%; left: 50%; transform: translateX(-50%); cursor: pointer; }
.dust {
  position: absolute; left: calc(50% + .5rem); top: 1rem;
  width: 7rem; height: 3rem; pointer-events: none;

}
.dust .fragment {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: #f0d8df; color: #663247; border-radius: .8rem;
  font: inherit; font-weight: 650;
}
.dust .ember {
  position: absolute; width: 3px; height: 5px; border-radius: 60% 40% 50% 50%;
}
@media (max-width: 370px) {
  .game { padding-inline: 1rem; }
  .scene { min-height: 23rem; }
  .cat { height: 13rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

#flower-transition { position: fixed; inset: 0; z-index: 20; }
#origami-canvas { display: block; width: 100%; height: 100%; }
body.reading { display: block; }
.love-letter { width: min(100%, 44rem); margin: 0 auto; padding: 2rem 0 4rem; }
.love-letter h1 { text-align: center; margin-bottom: 2.5rem; }
.love-letter article { font-size: clamp(1.05rem, 3.5vw, 1.2rem); line-height: 1.85; }
#opening-error { color: #89334f; }

.question.yes-only #no {
  left: calc(50% + 5.15rem); top: 1.375rem;
  width: 2.8rem; min-height: 2.25rem; font-size: .8rem;
}
.yes-only[data-rejections="1"] #no { transform: scale(.72); }
.yes-only[data-rejections="2"] #no { transform: scale(.42); }
.yes-only[data-rejections="3"] #no { transform: scale(0); opacity: 0; }
.yes-only[data-rejections="1"]:not([data-position]) #yes { transform: scale(1.35); }
.yes-only[data-rejections="2"]:not([data-position]) #yes { transform: scale(1.65); }
.yes-only[data-rejections="3"]:not([data-position]) #yes { transform: scale(2.15); }

.letter-heart { width: 72px; height: 72px; object-fit: contain; vertical-align: middle; }

.letter-artwork { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; margin-top: -2rem; white-space: normal; }
.letter-signature { flex: 1; }
.letter-signature .letter-heart { width: 48px; height: 48px; }
@media (max-width: 600px) {
  .letter-artwork { flex-wrap: wrap; margin-top: -1rem; row-gap: 0; }
  .letter-signature { flex-basis: 100%; }
  .letter-artwork .letter-couple { margin-left: auto; margin-top: -.5rem; }
}
.letter-couple { display: block; width: clamp(120px, 40vw, 200px); height: auto; object-fit: contain; }

.letter-note { display: flex; align-items: center; gap: .65rem; margin-top: 2rem; font-size: .75rem; color: #754756; }
.letter-note img { display: block; width: 64px; height: 64px; object-fit: contain; }

#code-dialog {
  width: min(23rem, calc(100% - 2rem)); max-height: calc(100svh - 2rem);
  padding: 2.8rem 1.5rem 1.25rem; overflow-y: auto;
  border: 1px solid #e4b9c7; border-radius: 1.7rem; background: #fff5f3; color: #512a35;
  box-shadow: 0 1rem 5rem #512a3540; text-align: center;
}
#code-dialog::backdrop { background: #512a3566; backdrop-filter: blur(7px); }
#code-dialog h2 { margin: 0; font: normal 2rem Georgia, serif; }
#code-close { position: absolute; top: .4rem; right: .5rem; width: 2.5rem; min-height: 2.5rem; margin: 0; background: transparent; color: #89334f; font-size: 1.6rem; }
#code-dots { display: block; margin: 1.4rem 0; font-size: clamp(1.3rem, 6vw, 1.7rem); letter-spacing: .12em; color: #89334f; }
.code-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.code-keypad button { min-height: 3.2rem; margin: 0; font-size: 1.2rem; background: #f2dce4; color: #6e2943; }
.code-keypad button:hover { background: #e8c5d2; }
.code-keypad button:active { transform: scale(.94); }
.code-keypad button:disabled { opacity: .5; }
#code-status { min-height: 1.2rem; margin: 1rem 0 0; font-size: .85rem; }
#code-error img { display: block; width: 100%; height: auto; border-radius: .8rem; }
#code-error p { line-height: 1.6; }