:root{
  --cream:       #fcf6ee;
  --coral:       #d97b73;
  --coral-dk:    #b9554d;
  --pink:        #f0b6c6;
  --pink-lt:     #fae8ee;
  --gingham:     #f4cbd5;
  --gingham-2:   rgba(206,118,142,.22);
  --maroon:      #6e1c2a;
  --red:         #e23b4e;
  --red-dk:      #b22a3b;
  --paper:       #fffbf5;
  --sel:         #2f54d6;
  --gold:        #d4a34b;

  --heart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.6 4.1 13.7a5.1 5.1 0 0 1 7.2-7.2l.7.7.7-.7a5.1 5.1 0 1 1 7.2 7.2z'/%3E%3C/svg%3E");

  --font-pix:  "Press Start 2P", monospace;
  --font-body: "Pixelify Sans", "Press Start 2P", -apple-system, sans-serif;
  --ease:      cubic-bezier(.34,1.56,.64,1);
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html, body{
  height:100%;
  overscroll-behavior:none;
}

body{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  font-family:var(--font-body);
  color:var(--maroon);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
}

.heart{
  display:inline-block;
  width:14px; height:14px;
  background:var(--red);
  -webkit-mask:var(--heart-mask) center/contain no-repeat;
          mask:var(--heart-mask) center/contain no-repeat;
}
.heart--inline{ width:.9em; height:.9em; vertical-align:-.05em; }

/* AMBIANCE & FOND */
.fx{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

.fx__aurora{ position:absolute; inset:-10%; }
.fx__aurora::before,
.fx__aurora::after{
  content:""; position:absolute; border-radius:50%;
  will-change:transform;
}
.fx__aurora::before{
  width:65vmax; height:65vmax; left:-12%; top:-18%;
  background:radial-gradient(circle at 50% 50%, rgba(255,193,212,.85), rgba(255,193,212,0) 62%);
  animation:auroraA 19s ease-in-out infinite alternate;
}
.fx__aurora::after{
  width:70vmax; height:70vmax; right:-15%; bottom:-20%;
  background:radial-gradient(circle at 50% 50%, rgba(255,225,196,.8), rgba(255,225,196,0) 62%);
  animation:auroraB 24s ease-in-out infinite alternate;
}
@keyframes auroraA{
  0%  { transform:translate(0,0) scale(1); }
  100%{ transform:translate(8vw,6vh) scale(1.18); }
}
@keyframes auroraB{
  0%  { transform:translate(0,0) scale(1.1); }
  100%{ transform:translate(-7vw,-5vh) scale(.92); }
}

.fx__vignette{
  position:absolute; inset:0;
  background:radial-gradient(125% 110% at 50% 38%, transparent 52%, rgba(120,40,50,.12) 100%);
}
.fx__grain{
  position:absolute; inset:0;
  background:url("./textures/grain.png") repeat;
  background-size:180px 180px;
  opacity:.35;
  mix-blend-mode:multiply;
  animation:grainShift 5s steps(4) infinite;
}
@keyframes grainShift{
  0%{ transform:translate(0,0); }   25%{ transform:translate(-2%,1%); }
  50%{ transform:translate(1%,-2%); } 75%{ transform:translate(-1%,-1%); }
  100%{ transform:translate(0,0); }
}

/* BOUTON MUSIQUE FLOTTANT */
.music-toggle{
  position:fixed;
  top:max(14px, env(safe-area-inset-top));
  right:max(14px, env(safe-area-inset-right));
  z-index:90;
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  font-family:var(--font-pix);
  font-size:0.6rem;
  color:var(--maroon);
  background:var(--paper);
  border:2.5px solid var(--coral);
  border-radius:20px;
  box-shadow:0 4px 10px rgba(185,85,77,.2);
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.music-toggle:active{ transform:scale(0.95); }
.music-toggle.is-playing{
  background:var(--pink);
  border-color:var(--red);
  color:var(--maroon);
}
.music-toggle.is-playing .music-icon{
  display:inline-block;
  animation:notePulse 1.2s ease-in-out infinite;
}
@keyframes notePulse{
  0%,100%{ transform:scale(1) rotate(0deg); }
  50%    { transform:scale(1.25) rotate(12deg); }
}

.scene{
  position:relative;
  width:100%;
  max-width:480px;
  display:grid;
  place-items:center;
  z-index:2;
}

.confetti{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:1;
}
.confetti__layer{ position:absolute; inset:0; will-change:transform; }
.confetti .heart{
  position:absolute;
  opacity:.0;
  animation:drift linear infinite;
}
@keyframes drift{
  0%   { opacity:0; transform:translateY(10px) rotate(0deg) scale(.9); }
  10%  { opacity:.9; }
  90%  { opacity:.9; }
  100% { opacity:0; transform:translateY(-26px) rotate(12deg) scale(1.05); }
}

.stage,
.window{ grid-area:1 / 1; position:relative; z-index:1; }

:root{
  --wood:    #b5793f;
  --wood-dk: #8a5a2b;
}

/* JEU DU TIR À L'ARC DE CUPIDON */
.stage--aim{
  position:relative;
  width:100%;
  height:min(78svh, 560px);
  touch-action:none;
  cursor:crosshair;
  transition:opacity .4s ease, transform .45s var(--ease);
}
.stage--aim.is-gone{
  opacity:0;
  transform:scale(.6) translateY(-14px);
  pointer-events:none;
}

.target{
  position:absolute;
  left:50%; top:6%;
  transform:translateX(-50%);
  display:grid; justify-items:center; gap:14px;
  pointer-events:auto;
  cursor:pointer;
  z-index:2;
}
.target__label{
  font-size:1.18rem;
  letter-spacing:.02em;
  color:var(--maroon);
  display:flex; align-items:center; gap:.4em;
  text-align:center;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,0.7);
}

.envelope{
  position:relative;
  width:176px; height:122px;
  border:4px solid var(--coral);
  border-radius:8px;
  background:var(--paper);
  animation:bob 3s ease-in-out infinite;
  box-shadow:0 14px 0 -6px rgba(185,85,77,.18);
}
.target.is-pulse .envelope{ outline:3px dashed var(--red); outline-offset:8px; }
.target.is-hit .envelope{ animation:hitwobble .45s ease; }

.envelope__flap{
  position:absolute; left:50%; top:0;
  transform:translateX(-50%);
  width:0; height:0;
  border-left:84px solid transparent;
  border-right:84px solid transparent;
  border-top:60px solid var(--pink);
}
.envelope::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to top right, transparent calc(50% - 2px), var(--coral) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) bottom left / 50% 60% no-repeat,
    linear-gradient(to top left,  transparent calc(50% - 2px), var(--coral) calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) bottom right / 50% 60% no-repeat;
  opacity:.6;
}
.envelope__seal{
  position:absolute; left:50%; top:48px;
  transform:translateX(-50%);
  width:30px; height:30px;
  z-index:2;
  filter:drop-shadow(0 2px 0 var(--red-dk));
}

@keyframes bob{
  0%,100%{ transform:translateY(0)    rotate(-1deg); }
  50%    { transform:translateY(-8px) rotate(1deg); }
}
@keyframes hitwobble{
  0%,100%{ transform:translate(0,0) rotate(0); }
  25%    { transform:translate(4px,-3px) rotate(5deg); }
  55%    { transform:translate(-4px,2px) rotate(-4deg); }
  80%    { transform:translate(2px,-1px) rotate(2deg); }
}

.archer{
  position:absolute;
  left:50%; bottom:10%;
  width:160px; height:160px;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:3;
}
.bow{
  position:absolute;
  left:48px; top:11px;
  width:32px; height:140px;
  border:8px solid var(--wood);
  border-radius:90% / 50%;
  border-right-color:transparent;
  transform-origin:100% 50%;
  transform:rotate(-90deg);
  filter:drop-shadow(0 3px 0 rgba(122,74,34,.22));
}
.bow::before{
  content:"";
  position:absolute; left:-10px; top:50%;
  width:12px; height:38px;
  transform:translateY(-50%);
  background:var(--wood-dk);
  border-radius:5px;
}
.bow::after{
  content:"";
  position:absolute; right:-2px; top:-5px; bottom:-5px;
  width:3px; background:var(--wood-dk); border-radius:2px;
}
.nock{
  position:absolute;
  left:80px; top:80px;
  width:1px; height:1px;
}

.arrow{
  position:absolute; left:0; top:0;
  width:54px; height:14px;
  transform-origin:0 50%;
  background:linear-gradient(var(--wood-dk), var(--wood-dk)) left 50% / 38px 4px no-repeat;
  z-index:6;
  pointer-events:none;
  opacity:0;
  will-change:transform;
}
.arrow.is-on{ opacity:1; }
.arrow::after{
  content:"";
  position:absolute; left:36px; top:50%;
  transform:translateY(-50%);
  width:0; height:0;
  border-left:15px solid var(--red);
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
}
.arrow::before{
  content:"";
  position:absolute; left:-1px; top:50%;
  transform:translateY(-50%);
  width:0; height:0;
  border-right:12px solid var(--pink);
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
}

.trail{
  position:absolute;
  width:10px; height:10px;
  z-index:5;
  pointer-events:none;
  animation:trailFade .5s ease-out forwards;
}
@keyframes trailFade{
  0%   { opacity:.7; transform:scale(1); }
  100% { opacity:0;  transform:scale(.3); }
}

.hint{
  position:absolute; left:0; right:0; bottom:1%;
  text-align:center;
  font-size:.95rem;
  color:var(--maroon);
  opacity:.85;
  pointer-events:none;
  display:flex; align-items:center; justify-content:center; gap:.4em;
  padding:0 12px;
  animation:hintpulse 2.4s ease-in-out infinite;
}
@keyframes hintpulse{ 0%,100%{ opacity:.65; } 50%{ opacity:1; } }

/* FENÊTRE PRINCIPALE */
.window{
  width:min(94vw, 420px);
  max-height:min(90svh, 720px);
  display:flex;
  flex-direction:column;
  border:4px solid var(--coral);
  border-radius:12px;
  background:var(--pink-lt);
  box-shadow:0 18px 40px -15px rgba(122,34,48,.5);
  overflow:hidden;
  opacity:0;
  transform:scale(.78);
  visibility:hidden;
  transition:opacity .4s ease, transform .5s var(--ease), visibility 0s linear .5s;
}
.window.is-open{
  opacity:1;
  transform:scale(1);
  visibility:visible;
  transition:opacity .4s ease, transform .55s var(--ease);
}
.window.is-celebrate{ animation:winGlow 1.7s ease-in-out infinite; }
@keyframes winGlow{
  0%,100%{ box-shadow:0 18px 40px -15px rgba(122,34,48,.5), 0 0 0 0 rgba(226,59,78,0); }
  50%    { box-shadow:0 22px 50px -15px rgba(122,34,48,.55), 0 0 35px 6px rgba(226,59,78,.45); }
}

.letter-card[hidden]{
  display:none !important;
}

.titlebar{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 10px;
  background:var(--pink);
  border-bottom:3.5px solid var(--coral);
}
.titlebar__name{
  font-family:var(--font-pix);
  font-size:.6rem;
  letter-spacing:.04em;
  color:var(--maroon);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.titlebar__btns{ display:flex; gap:6px; flex-shrink:0; }
.winbtn{
  width:24px; height:24px;
  display:grid; place-items:center;
  font-family:var(--font-pix);
  font-size:.6rem; line-height:1;
  color:var(--maroon);
  background:var(--paper);
  border:2px solid var(--coral);
  border-radius:4px;
  cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.winbtn:active{ transform:scale(0.92); }
.winbtn--x:hover, .winbtn--x:active{ background:var(--red); color:#fff; }

.heartrow{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:6px 0;
  background:var(--pink-lt);
  border-bottom:3.5px solid var(--coral);
}
.heartrow .heart{ width:15px; height:15px; }
.hdot{ width:5px; height:5px; background:var(--coral); border-radius:1px; }

/* CONTENU DE LA FENÊTRE & SCROLL */
.content{
  position:relative;
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:16px 14px 20px;
  background-color:var(--gingham);
  background-image:
    repeating-linear-gradient(0deg,  transparent 0 8px, var(--gingham-2) 8px 16px),
    repeating-linear-gradient(90deg, transparent 0 8px, var(--gingham-2) 8px 16px);
}
.content::-webkit-scrollbar{ width:6px; }
.content::-webkit-scrollbar-track{ background:var(--pink-lt); }
.content::-webkit-scrollbar-thumb{ background:var(--coral); border-radius:3px; }

/* VUE QUESTION / QUIZ */
.quiz-view{
  display:grid;
  justify-items:center;
  align-content:start;
  gap:16px;
  text-align:center;
  position:relative;
  min-height:270px;
}
.quiz-view.is-hidden{ display:none; }

.title{
  font-weight:700;
  font-size:1.6rem;
  line-height:1.2;
  text-align:center;
  color:var(--maroon);
  text-shadow:0 2px 0 rgba(255,255,255,.6);
}
.title-sub{
  display:block;
  font-size:1.05rem;
  font-weight:500;
  margin-top:4px;
  color:var(--coral-dk);
}

.cat{
  width:136px; height:auto;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  animation:catbob 2.4s ease-in-out infinite;
  filter:drop-shadow(0 5px 0 rgba(178,42,59,.16));
}
@keyframes catbob{
  0%,100%{ transform:translateY(0)    scaleY(1); }
  50%    { transform:translateY(-5px) scaleY(1.02); }
}

.content.is-won .cat{
  transform-origin:50% 88%;
  animation:catdance .8s ease-in-out infinite;
}
@keyframes catdance{
  0%   { transform:rotate(-9deg) translateY(0)     scaleY(1); }
  25%  { transform:rotate(-9deg) translateY(-11px) scaleY(1.04); }
  50%  { transform:rotate(9deg)  translateY(0)     scaleY(1); }
  75%  { transform:rotate(9deg)  translateY(-11px) scaleY(1.04); }
  100% { transform:rotate(-9deg) translateY(0)     scaleY(1); }
}

.cat-heart{
  position:absolute;
  width:26px; height:26px;
  z-index:3;
  opacity:0;
  pointer-events:none;
}
.content.is-won .cat-heart{
  opacity:1;
  animation:floatHeart 1.8s ease-in-out infinite;
}
@keyframes floatHeart{
  0%,100%{ transform:translateY(0)   scale(1); }
  50%    { transform:translateY(-10px) scale(1.12); }
}

.buttons{
  display:flex; gap:16px;
  align-items:center; justify-content:center;
  min-height:50px;
  width:100%;
  position:relative;
}
.buttons[hidden]{ display:none; }

.btn{
  font-family:var(--font-pix);
  font-size:.78rem;
  letter-spacing:.06em;
  padding:12px 20px;
  min-height:44px;
  color:var(--red-dk);
  background:var(--paper);
  border:3px solid var(--coral);
  border-radius:8px;
  cursor:pointer;
  box-shadow:0 4px 0 0 var(--coral);
  transition:transform .14s var(--ease), background .14s ease, color .14s ease, box-shadow .14s ease;
  user-select:none;
}
.btn:active{ transform:translateY(2px); box-shadow:0 2px 0 0 var(--coral); }
.btn--yes{ transform-origin:center; position:relative; z-index:2; }
.btn--yes:hover, .btn--yes:active{
  background:var(--red); color:#fff; box-shadow:0 4px 0 0 var(--red-dk);
}
.btn--yes.is-tempting{
  animation:yesGlow 1.2s ease-in-out infinite;
  background:var(--red);
  color:#fff;
  border-color:var(--red-dk);
  box-shadow:0 4px 0 0 var(--red-dk);
}
@keyframes yesGlow{
  0%,100%{ box-shadow:0 0 16px 3px rgba(226,59,78,.4); }
  50%    { box-shadow:0 0 26px 8px rgba(226,59,78,.65); }
}
.btn--no{
  position:relative;
  z-index:1;
  transition:left .18s var(--ease), top .18s var(--ease), transform .14s var(--ease);
}

.final-celebration{
  font-size:1.15rem;
  line-height:1.4;
  color:var(--maroon);
  font-weight:600;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .4s ease, transform .4s ease;
  display:flex;
  align-items:center;
  gap:6px;
  justify-content:center;
}
.final-celebration.is-show{ opacity:1; transform:none; }

/* LA LETTRE D'AMOUR COMPLÈTE */
.letter-card{
  background:var(--paper);
  border:3px solid var(--coral);
  border-radius:10px;
  padding:20px 16px 18px;
  box-shadow:0 8px 24px -6px rgba(122,34,48,.2);
  position:relative;
  display:grid;
  gap:14px;
  text-align:left;
  animation:cardUnfold .6s var(--ease) forwards;
  opacity:0;
  transform:translateY(20px) scale(0.96);
}
.letter-card.is-visible{
  opacity:1;
  transform:none;
}
@keyframes cardUnfold{
  0%  { opacity:0; transform:translateY(20px) scale(0.95); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

/* TIMBRE POSTAL */
.letter-stamp{
  position:absolute;
  top:14px; right:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  pointer-events:none;
}
.stamp-inner{
  width:44px; height:48px;
  background:var(--pink-lt);
  border:2px dashed var(--coral);
  border-radius:4px;
  display:grid;
  place-items:center;
  padding:3px;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
}
.stamp-heart{ width:16px; height:16px; }
.stamp-text{
  font-family:var(--font-pix);
  font-size:0.42rem;
  line-height:1.1;
  text-align:center;
  color:var(--maroon);
}
.stamp-postmark{
  font-family:var(--font-pix);
  font-size:0.35rem;
  color:var(--coral-dk);
  opacity:0.8;
  letter-spacing:0.04em;
  transform:rotate(-8deg);
}

.letter-header{
  padding-right:60px;
}
.letter-badge{
  display:inline-block;
  font-family:var(--font-pix);
  font-size:0.52rem;
  color:var(--red);
  background:var(--pink);
  padding:3px 8px;
  border-radius:12px;
  margin-bottom:6px;
  letter-spacing:0.04em;
}
.letter-to{
  font-family:'Quicksand', var(--font-body);
  font-size:1.45rem;
  font-weight:700;
  color:var(--maroon);
  line-height:1.25;
}
.letter-date{
  font-family:'Quicksand', var(--font-body);
  font-size:0.85rem;
  font-weight:600;
  color:var(--coral-dk);
  margin-top:2px;
}

.letter-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:4px 0;
  border-top:1.5px dashed var(--coral);
  border-bottom:1.5px dashed var(--coral);
}
.letter-divider .heart{ width:11px; height:11px; }

.letter-body{
  font-family:'Quicksand', -apple-system, BlinkMacSystemFont, "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size:1.02rem;
  line-height:1.65;
  color:var(--maroon);
  display:grid;
  gap:12px;
}
.letter-body p{ margin:0; }
.letter-greeting{
  font-weight:700;
  color:var(--red-dk);
  font-size:1.15rem;
}
.letter-body strong{ color:var(--red-dk); font-weight:700; }
.letter-body em{ font-style:normal; text-decoration:underline wavy var(--pink); }

.letter-highlight{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--pink-lt);
  border:2px dashed var(--coral);
  border-radius:8px;
  padding:11px 13px;
  font-family:'Quicksand', -apple-system, BlinkMacSystemFont, "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size:1.02rem;
  line-height:1.5;
  color:var(--red-dk);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.03);
}
.letter-highlight .sparkle{ font-size:1.2rem; flex-shrink:0; }

.letter-closing{
  font-weight:600;
  color:var(--red-dk);
  margin-top:4px;
}

.letter-footer{
  border-top:1.5px dashed var(--coral);
  padding-top:10px;
  display:grid;
  gap:2px;
  text-align:right;
}
.letter-sign{
  font-family:'Quicksand', var(--font-body);
  font-size:1rem;
  font-weight:600;
  color:var(--coral-dk);
}
.letter-author{
  font-family:var(--font-pix);
  font-size:0.75rem;
  color:var(--red);
  letter-spacing:0.04em;
}

.letter-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:6px;
}
.btn--love-action,
.btn--kiss-action{
  font-family:var(--font-pix);
  font-size:0.62rem;
  line-height:1.2;
  padding:10px 8px;
  text-align:center;
  border-radius:6px;
  border:2.5px solid var(--coral);
  background:var(--pink);
  color:var(--maroon);
  box-shadow:0 3px 0 0 var(--coral);
  cursor:pointer;
  transition:transform .12s ease, background .12s ease;
}
.btn--love-action:active,
.btn--kiss-action:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 0 var(--coral);
}
.btn--kiss-action{
  background:var(--paper);
}

.letter-toast{
  font-size:0.92rem;
  font-weight:600;
  text-align:center;
  color:var(--red-dk);
  background:var(--pink-lt);
  border:2px solid var(--coral);
  border-radius:6px;
  padding:8px 12px;
  animation:toastPop .3s ease forwards;
}
@keyframes toastPop{
  0%{ opacity:0; transform:scale(0.9); }
  100%{ opacity:1; transform:scale(1); }
}

/* EXPLOSIONS & BISONS FLOTTANTS */
.burst{
  position:absolute;
  width:18px; height:18px;
  z-index:5;
  pointer-events:none;
  animation:burst .9s ease-out forwards;
}
@keyframes burst{
  0%   { opacity:1; transform:translate(0,0) scale(.4); }
  100% { opacity:0; transform:translate(var(--bx), var(--by)) scale(1.1); }
}

.confetti-heart{
  position:absolute;
  top:0; left:0;
  pointer-events:none;
  opacity:0;
  will-change:transform, opacity;
}

.floating-kiss{
  position:fixed;
  font-size:2rem;
  pointer-events:none;
  z-index:99;
  animation:kissFloat 2.2s ease-out forwards;
}
@keyframes kissFloat{
  0%  { opacity:0; transform:scale(0.3) translateY(0); }
  15% { opacity:1; transform:scale(1.2) translateY(-20px); }
  100%{ opacity:0; transform:scale(1) translateY(-140px) translateX(var(--drift)); }
}

/* ADAPTATION MOBILE */
@media (max-width:480px){
  body{ padding:max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) 10px; }
  .stage--aim{ height:min(74svh, 500px); }
  .envelope{ width:154px; height:108px; }
  .envelope__flap{ border-left-width:73px; border-right-width:73px; border-top-width:52px; }
  .envelope__seal{ top:42px; width:26px; height:26px; }
  .target__label{ font-size:1.05rem; }
  .archer{ bottom:6%; }
  
  .window{ width:min(95vw, 400px); max-height:88svh; }
  .title{ font-size:1.35rem; }
  .title-sub{ font-size:0.95rem; }
  .cat{ width:118px; }
  .content{ padding:14px 12px 18px; }
  .btn{ padding:10px 16px; font-size:.72rem; }
  
  .letter-card{ padding:16px 12px 14px; gap:12px; }
  .letter-to{ font-size:1.25rem; }
  .letter-body{ font-size:0.98rem; line-height:1.5; gap:10px; }
  .letter-highlight{ font-size:0.94rem; padding:8px 10px; }
  .letter-actions{ grid-template-columns:1fr; gap:8px; }
  .btn--love-action, .btn--kiss-action{ font-size:0.68rem; padding:11px 10px; }
}

@media (prefers-reduced-motion:reduce){
  .envelope,
  .cat,
  .hint,
  .fx__aurora::before,
  .fx__aurora::after,
  .fx__grain,
  .window.is-celebrate,
  .content.is-won .cat,
  .content.is-won .cat-heart{ animation:none; }
  .confetti .heart{ animation:none; opacity:.55; }
  .window, .stage--aim, .btn{ transition-duration:.001s; }
  .burst, .trail, .confetti-heart, .floating-kiss{ display:none; }
}