/* ============ design tokens ============ */
:root{
  --cream:#F7EEE3; --cream2:#F2E4D5; --paper:#FBF5EA;
  --blush:#F0CBC7; --blush2:#E7B6B4; --rose:#C9838E; --rose-d:#B26A78;
  --burgundy:#7C2D3F; --burgundy-d:#5E2030;
  --brown:#5F4638; --brown-d:#43312A;
  --gold:#C79A3B; --gold-l:#E4C77E;
  --ink:#3B2B26; --ink-soft:#6E5850;
  --night:#241A22; --night2:#31212E;
  --shadow-soft:0 10px 30px rgba(67,49,42,.14);
  --shadow-card:0 6px 18px rgba(67,49,42,.18);
  --r-lg:22px; --r-md:16px; --r-sm:10px;
  --font-serif:'Playfair Display',Georgia,serif;
  --font-body:'Cormorant Garamond',Georgia,serif;
  --font-hand:'Caveat',cursive;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font-body); color:var(--ink); background:var(--cream);
  font-size:18px; line-height:1.55; overflow:hidden;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--blush)}

/* ============ screens / router ============ */
#stage{position:fixed;inset:0;overflow:hidden}
.screen{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:24px;opacity:0;pointer-events:none;
  transform:translateY(26px) scale(.985);
  transition:opacity .65s ease,transform .65s cubic-bezier(.22,.8,.3,1);
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
}
.screen.active{opacity:1;pointer-events:auto;transform:none;z-index:2}
.screen.leaving{opacity:0;transform:translateY(-22px) scale(.99);z-index:1}

/* backgrounds */
.bg-opening{background:
  linear-gradient(178deg,#ffe9f4 0%,#ffd6ea 40%,#ffc0de 75%,#ffabd2 100%)}
.bg-paper{background:
  radial-gradient(90% 70% at 80% -10%, rgba(231,182,180,.35), transparent 60%),
  radial-gradient(70% 60% at 5% 100%, rgba(199,154,59,.16), transparent 55%),
  var(--cream)}
.bg-night{background:
  radial-gradient(100% 70% at 50% 115%, rgba(199,131,142,.30), transparent 62%),
  linear-gradient(180deg,#1d1520 0%, #2b1c2c 55%, #4a2b3d 100%)}
.bg-rose{background:
  radial-gradient(80% 60% at 85% 0%, rgba(228,199,126,.28), transparent 55%),
  linear-gradient(160deg,#F4E3D8 0%, #EFD2CC 55%, #E7BCC0 100%)}

/* grain overlay */
.grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.36 0 0 0 0 0.30 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ typography ============ */
.hand{font-family:var(--font-hand)}
.serif{font-family:var(--font-serif)}
.kicker{font-family:var(--font-hand);font-size:clamp(20px,4.5vw,26px);color:var(--rose);letter-spacing:.02em}
.h-display{font-family:var(--font-serif);font-weight:600;font-size:clamp(30px,7vw,52px);line-height:1.15;color:var(--burgundy)}
.h-hand{font-family:var(--font-hand);font-weight:600;font-size:clamp(34px,8vw,58px);line-height:1.1;color:var(--burgundy)}
.on-dark .kicker{color:var(--blush2)}
.on-dark .h-display,.on-dark .h-hand{color:#F6DFDA}
.muted{color:var(--ink-soft)}
.on-dark .muted{color:#C9A9A4}

/* ============ buttons ============ */
.btn{
  display:inline-flex;align-items:center;gap:10px;justify-content:center;
  font-family:var(--font-hand);font-size:22px;font-weight:600;
  padding:13px 34px;border-radius:999px;color:#fff;
  background:linear-gradient(135deg,var(--rose) 0%,var(--burgundy) 100%);
  box-shadow:0 8px 22px rgba(124,45,63,.35), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .25s ease,box-shadow .25s ease;min-height:52px;
}
.btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 28px rgba(124,45,63,.42)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost{
  background:rgba(255,255,255,.14);color:#F6DFDA;box-shadow:none;
  border:1.5px solid rgba(246,223,218,.5);backdrop-filter:blur(4px);
}
.btn.ghost:hover{background:rgba(255,255,255,.22)}
.btn.cream{
  background:var(--paper);color:var(--burgundy);
  box-shadow:0 6px 18px rgba(67,49,42,.18), inset 0 0 0 1.5px rgba(124,45,63,.28);
}
.btn-row{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:34px}

/* ============ progress + chrome ============ */
#progress{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:40;
  display:flex;gap:7px;align-items:center;padding:8px 14px;border-radius:999px;
  background:rgba(251,245,234,.72);backdrop-filter:blur(8px);box-shadow:0 3px 12px rgba(67,49,42,.12);
  opacity:0;pointer-events:none;transition:opacity .5s ease;
}
#progress.show{opacity:1}
#progress .dot{
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-hand);font-size:13px;color:var(--ink-soft);
  background:rgba(124,45,63,.08);transition:all .3s ease;
}
#progress .dot.done{background:rgba(201,131,142,.28);color:var(--burgundy)}
#progress .dot.now{background:var(--burgundy);color:#fff;transform:scale(1.15)}
#progress .dot.heart{background:transparent;font-size:15px}
#backbtn{
  position:fixed;top:16px;left:16px;z-index:40;width:42px;height:42px;border-radius:50%;
  background:rgba(251,245,234,.75);backdrop-filter:blur(8px);box-shadow:0 3px 12px rgba(67,49,42,.14);
  display:none;align-items:center;justify-content:center;font-size:19px;color:var(--burgundy);
  transition:transform .2s ease;
}
#backbtn.show{display:flex}
#backbtn:hover{transform:scale(1.08)}

/* ============ music player ============ */
#player{
  position:fixed;left:16px;bottom:16px;z-index:50;display:none;align-items:center;gap:10px;
  background:rgba(36,26,34,.82);backdrop-filter:blur(10px);color:#F6DFDA;
  border-radius:999px;padding:8px 14px 8px 8px;box-shadow:0 8px 24px rgba(0,0,0,.3);
  border:1px solid rgba(246,223,218,.14);max-width:min(330px,calc(100vw - 32px));
}
#player.show{display:flex}
#player .disc{
  width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--rose),var(--burgundy),var(--gold),var(--rose));
  color:#fff;font-size:15px;
}
#player.playing .disc{animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#player .meta{min-width:0;flex:1}
#player .label{font-family:var(--font-hand);font-size:17px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#player .sub{font-size:12px;opacity:.65;font-family:var(--font-body);font-style:italic}
#player button{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;color:#F6DFDA;flex:none}
#player button:hover{background:rgba(255,255,255,.12)}
#player input[type=range]{width:64px;accent-color:var(--rose);flex:none}
/* collapsible mini mode: small floating disc, never covers page buttons */
#player.mini{max-width:52px;padding:7px;border-radius:50%;gap:0;cursor:pointer}
#player.mini .meta,#player.mini input,#player.mini button{display:none}
#player.mini .disc{animation:spin 6s linear infinite paused}
#player.mini.playing .disc{animation-play-state:running}
/* collapsible mini mode: small floating disc, never covers page buttons */
#player.mini{max-width:52px;padding:7px;border-radius:50%;gap:0;cursor:pointer}
#player.mini .meta,#player.mini input,#player.mini button{display:none}
#player.mini .disc{animation:spin 6s linear infinite paused}
#player.mini.playing .disc{animation-play-state:running}
/* expanded pill floats above the bottom button zone (desktop) */
#player.show:not(.mini){bottom:84px}
/* small screens: the player is always a disc - tap toggles play/pause, it can never cover a button */
@media (max-width:640px){
  #player,#player.show:not(.mini){max-width:52px;padding:7px;border-radius:50%;gap:0;bottom:16px;cursor:pointer}
  #player .meta,#player input[type=range],#player button{display:none}
}
#yt-holder{position:fixed;width:1px;height:1px;left:-10px;bottom:-10px;opacity:.01;pointer-events:none;overflow:hidden}

/* ============ opening ============ */
#s0 .inner{text-align:center;color:#F6DFDA;position:relative;z-index:2;padding:20px}
#s0 .made{font-family:var(--font-hand);font-size:clamp(38px,9vw,64px);font-weight:600;color:#7a2c49;text-shadow:0 2px 26px rgba(255,255,255,.8);line-height:1.15}
#s0 .heartline{font-size:30px;margin:14px 0 34px;color:#fff;opacity:.95;text-shadow:0 0 18px rgba(255,255,255,.9)}
#s0 .from{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));left:0;right:0;font-family:var(--font-hand);font-size:20px;color:#9c4a68;opacity:.9;z-index:2}
.aura{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.aura svg{position:absolute}
.a-heart{fill:#ff8fbf}
.a-big{width:150vw;left:50%;top:54%;transform:translate(-50%,-50%);opacity:.5;filter:blur(52px);animation:aPulse 6.5s ease-in-out infinite}
.a-mid{width:95vw;left:50%;top:52%;transform:translate(-50%,-50%);opacity:.55;filter:blur(26px);animation:aPulse 6.5s ease-in-out .8s infinite}
@keyframes aPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.07)}}
.a-line{fill:none;stroke:rgba(255,255,255,.95);stroke-width:1.3;opacity:.92;animation:aFloat 7s ease-in-out infinite}
@keyframes aFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.a-spark{position:absolute;color:#fff;font-size:18px;animation:aTwinkle 3.2s ease-in-out infinite}
@keyframes aTwinkle{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.float-heart{position:absolute;color:rgba(246,223,218,.5);animation:floatUp linear infinite;pointer-events:none;font-size:18px}
@keyframes floatUp{from{transform:translateY(105vh) rotate(-12deg);opacity:0}8%{opacity:.8}to{transform:translateY(-10vh) rotate(14deg);opacity:0}}

/* ============ paper / letter ============ */
.paper{
  position:relative;background:var(--paper);border-radius:6px 22px 8px 20px;
  box-shadow:var(--shadow-soft), inset 0 0 60px rgba(199,154,59,.07);
  padding:clamp(26px,6vw,52px);max-width:640px;width:100%;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.78 0 0 0 0 0.68 0 0 0 0 0.52 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E");
}
.paper::after{ /* torn edge hint */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(95,70,56,.10);
}
.tape{
  position:absolute;width:92px;height:28px;background:rgba(231,182,180,.55);
  box-shadow:0 2px 5px rgba(67,49,42,.15);transform:rotate(-4deg);
  border-left:1px dashed rgba(255,255,255,.6);border-right:1px dashed rgba(255,255,255,.6);
}
.letter-date{font-family:var(--font-hand);font-size:19px;color:var(--ink-soft);text-align:right;margin-bottom:18px}
.letter-title{font-family:var(--font-hand);font-size:clamp(30px,6vw,40px);color:var(--burgundy);margin-bottom:16px;font-weight:600}
.letter-body{font-family:var(--font-hand);font-size:clamp(21px,4.6vw,26px);line-height:1.65;color:var(--brown-d);white-space:pre-wrap}
.letter-sig{font-family:var(--font-hand);font-size:clamp(22px,5vw,28px);color:var(--burgundy);margin-top:22px;white-space:pre-wrap}
.doodle{position:absolute;pointer-events:none;opacity:.75}

/* ============ memories ============ */
.polaroid-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(18px,4vw,34px);max-width:960px;width:100%;padding:10px 4px}
.polaroid{
  background:#FDFAF3;padding:10px 10px 12px;border-radius:4px;box-shadow:var(--shadow-card);
  transform:rotate(var(--rot,0deg));transition:transform .35s cubic-bezier(.2,.8,.3,1.3),box-shadow .35s ease;
  cursor:pointer;position:relative;
}
.polaroid:hover{transform:rotate(0deg) scale(1.05);box-shadow:0 14px 34px rgba(67,49,42,.25);z-index:3}
.polaroid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;background:var(--cream2)}
.polaroid .cap{font-family:var(--font-hand);font-size:19px;text-align:center;margin-top:8px;color:var(--brown-d);line-height:1.2}
.polaroid .date{font-size:13px;text-align:center;color:var(--ink-soft);font-style:italic}
.polaroid .tape{top:-12px;left:50%;margin-left:-46px;transform:rotate(calc(var(--rot,0deg)*-1.4))}
/* lightbox */
#lightbox{position:fixed;inset:0;z-index:60;background:rgba(29,21,32,.85);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:24px}
#lightbox.open{display:flex}
#lightbox .card{background:#FDFAF3;border-radius:8px;padding:16px 16px 20px;max-width:min(480px,92vw);box-shadow:0 30px 80px rgba(0,0,0,.5);animation:popIn .4s cubic-bezier(.2,.9,.3,1.2)}
@keyframes popIn{from{transform:scale(.85);opacity:0}}
#lightbox img{width:100%;max-height:55vh;object-fit:cover;border-radius:4px}
#lightbox .cap{font-family:var(--font-hand);font-size:24px;text-align:center;margin-top:12px;color:var(--brown-d)}
#lightbox .date{text-align:center;color:var(--ink-soft);font-style:italic;font-size:14px}
#lightbox .desc{text-align:center;margin-top:8px;color:var(--ink-soft);font-size:16px}
#lightbox .x{position:absolute;top:14px;right:16px;color:#F6DFDA;font-size:26px;width:44px;height:44px}

/* ============ wheel ============ */
#wheel-wrap{position:relative;width:min(78vw,380px);margin:26px auto 8px}
#wheel-canvas{width:100%;height:auto;display:block;filter:drop-shadow(0 14px 30px rgba(67,49,42,.3))}
#wheel-pointer{position:absolute;top:-8px;left:50%;transform:translateX(-50%);z-index:3;font-size:30px;color:var(--burgundy);text-shadow:0 2px 6px rgba(0,0,0,.25)}
#wheel-spin{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:82px;height:82px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8a3548,var(--burgundy-d));
  color:#F6DFDA;font-family:var(--font-hand);font-size:24px;font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 2px 4px rgba(255,255,255,.25);
  transition:transform .15s ease;
}
#wheel-spin:hover{transform:translate(-50%,-50%) scale(1.06)}
#wheel-spin:disabled{opacity:.55;cursor:default;transform:translate(-50%,-50%)}
.result-card{
  margin:18px auto 0;max-width:420px;background:var(--paper);border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);padding:24px 28px;text-align:center;position:relative;
  animation:popIn .55s cubic-bezier(.2,.9,.3,1.25);
}
.result-card .g-icon{font-size:44px}
.result-card .g-name{font-family:var(--font-hand);font-size:32px;color:var(--burgundy);margin:6px 0 4px;font-weight:700}
.result-card .g-desc{color:var(--ink-soft);font-size:17px}

/* ============ envelopes ============ */
.env-grid{display:flex;flex-wrap:wrap;gap:clamp(14px,3vw,26px);justify-content:center;max-width:760px;margin-top:30px}
.envelope{width:clamp(120px,26vw,160px);aspect-ratio:1.45;position:relative;cursor:pointer;transition:transform .3s cubic-bezier(.2,.8,.3,1.3)}
.envelope:hover:not(.picked):not(.dead){transform:translateY(-6px) scale(1.04)}
.envelope .body{position:absolute;inset:0;background:linear-gradient(150deg,#F3DDD3,#E7C4BD);border-radius:10px;box-shadow:var(--shadow-card);display:flex;align-items:center;justify-content:center}
.envelope .flap{position:absolute;top:0;left:0;right:0;height:52%;background:linear-gradient(160deg,#EACCC3,#DCAEA6);border-radius:10px 10px 0 0;transform-origin:top;transition:transform .6s ease,opacity .4s .3s ease;clip-path:polygon(0 0,100% 0,50% 100%);z-index:2}
.envelope .seal{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);z-index:3;font-size:22px;color:var(--burgundy);transition:opacity .3s}
.envelope .q{position:absolute;bottom:14%;left:0;right:0;text-align:center;font-family:var(--font-hand);font-size:24px;color:var(--rose-d);z-index:1}
.envelope.dead{opacity:.45;cursor:default;filter:saturate(.5)}
.envelope.picked{transform:scale(1.1);z-index:4}
.envelope.picked .flap{transform:rotateX(168deg)}
.envelope.picked .seal{opacity:0}

/* ============ second gift reveal ============ */
#s5 .env-big{width:min(64vw,300px);aspect-ratio:1.45;position:relative;margin:26px auto}
#s5 .env-big .body{position:absolute;inset:0;background:linear-gradient(150deg,#F3DDD3,#E2B7AE);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;overflow:hidden}
#s5 .env-big .flap{position:absolute;top:0;left:0;right:0;height:52%;background:linear-gradient(160deg,#EACCC3,#D8A79F);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .8s ease,opacity .5s .45s ease;z-index:3;border-radius:14px 14px 0 0}
#s5.open .env-big .flap{transform:rotateX(170deg);opacity:0;transition:transform .8s ease,opacity .5s .45s ease}
#s5 .gift-inside{text-align:center;padding:14px;opacity:0;transform:translateY(16px) scale(.9);transition:all .7s .35s cubic-bezier(.2,.9,.3,1.2)}
#s5.open .gift-inside{opacity:1;transform:none}
#s5 .gift-inside .g-icon{font-size:52px}
#s5 .gift-inside .g-name{font-family:var(--font-hand);font-size:34px;color:var(--burgundy);font-weight:700}
#s5 .gift-inside .g-desc{color:var(--brown);font-size:16px}
.sparkle{position:absolute;font-size:18px;color:var(--gold-l);animation:sparkle 1.8s ease-in-out infinite;pointer-events:none}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(.6) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(20deg)}}

/* ============ checklist ============ */
.todo-list{list-style:none;max-width:560px;width:100%;margin-top:24px}
.todo-list li{
  display:flex;gap:14px;align-items:flex-start;padding:12px 6px;
  font-family:var(--font-hand);font-size:clamp(21px,4.8vw,26px);color:var(--brown-d);
  opacity:0;transform:translateX(-18px);transition:opacity .5s ease,transform .5s ease;
}
.todo-list li.in{opacity:1;transform:none}
.todo-list .box{
  flex:none;width:26px;height:26px;margin-top:3px;border:2px solid var(--rose);border-radius:7px;
  display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--burgundy);
  transition:background .25s;background:rgba(255,255,255,.5);
}
.todo-list li.done .box{background:var(--blush)}
.todo-list li.done .txt{text-decoration:line-through wavy rgba(178,106,120,.6) 2px;color:var(--ink-soft)}

/* ============ forever ============ */
#s7 .inner{text-align:center;position:relative;z-index:2}
#btn-no{transition:left .45s cubic-bezier(.2,.9,.3,1.2),top .45s cubic-bezier(.2,.9,.3,1.2),transform .3s ease;position:relative}
#btn-no.fleeing{position:fixed;z-index:45;margin:0}
#btn-yes{transition:transform .35s cubic-bezier(.2,.9,.3,1.3)}
.taunt{font-family:var(--font-hand);font-size:clamp(22px,5vw,28px);color:var(--blush2);min-height:40px;margin-top:22px;transition:opacity .3s}
.silhouette{position:absolute;bottom:0;left:0;right:0;height:38%;pointer-events:none;opacity:.8}

/* ============ sorry ============ */
#s9 .paper{max-width:600px}

/* ============ scratch ============ */
#s10{padding:0}
#scratch-wrap{position:absolute;inset:0;overflow:hidden;background:var(--night)}
#scratch-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#scratch-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
#scratch-ui{position:absolute;left:0;right:0;bottom:max(86px,calc(env(safe-area-inset-bottom) + 86px));display:flex;flex-direction:column;align-items:center;gap:12px;z-index:3;pointer-events:none}
#scratch-ui .hint{font-family:var(--font-hand);font-size:24px;color:#F6DFDA;text-shadow:0 2px 12px rgba(0,0,0,.6);background:rgba(36,26,34,.45);padding:6px 18px;border-radius:999px}
#scratch-ui .btn{pointer-events:auto}
#scratch-cap{position:absolute;top:70px;left:0;right:0;text-align:center;font-family:var(--font-hand);font-size:26px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.7);z-index:2;padding:0 24px;opacity:0;transition:opacity .8s}

/* ============ final ============ */
#s11 .inner{max-width:620px;width:100%;text-align:center;position:relative;z-index:2}
#s11 .fphoto{width:min(60vw,240px);margin:0 auto 22px;transform:rotate(-3deg)}
#s11 .thanks{font-family:var(--font-hand);font-size:clamp(22px,5vw,27px);color:var(--brown-d);white-space:pre-wrap;margin-top:14px;line-height:1.6}
#s11 .love{font-family:var(--font-hand);font-size:clamp(46px,11vw,76px);color:var(--burgundy);font-weight:700;margin-top:30px;line-height:1.05}
#s11 .always{font-family:var(--font-hand);font-size:clamp(28px,6vw,40px);color:var(--rose-d);margin-top:2px}
#s11 .sign{font-family:var(--font-hand);font-size:22px;color:var(--ink-soft);margin-top:30px;white-space:pre-wrap}

/* ============ shared bits ============ */
.center-col{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:760px;width:100%;position:relative;z-index:2}
.sub-note{font-family:var(--font-hand);font-size:20px;color:var(--ink-soft);margin-top:26px}
.on-dark .sub-note{color:#C9A9A4}
.heart-deco{color:var(--rose);font-size:20px}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:70}
.yes-overlay{
  position:fixed;inset:0;z-index:65;display:none;align-items:center;justify-content:center;
  background:rgba(29,21,32,.55);backdrop-filter:blur(4px);
}
.yes-overlay.show{display:flex}
.yes-overlay .msg{
  font-family:var(--font-hand);font-size:clamp(34px,8vw,52px);color:#fff;font-weight:700;
  text-shadow:0 4px 30px rgba(124,45,63,.6);animation:popIn .6s cubic-bezier(.2,.9,.3,1.3);text-align:center;padding:0 20px;
}
.emptystate{font-family:var(--font-hand);font-size:22px;color:var(--ink-soft);padding:30px;text-align:center}

/* responsive tweaks */
@media (max-width:520px){
  #progress{gap:5px;padding:6px 10px}
  #progress .dot{width:18px;height:18px;font-size:11px}
  .btn-row{margin-top:26px}
  #player input[type=range]{width:46px}
}
@media (min-width:900px){
  .polaroid-grid{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01s !important;transition-duration:.15s !important}
}

@media (min-width:760px){#s2 .center-col,#s6 .center-col{padding-top:96px}}

/* ============ ambience + motion pack ============ */
.floaties{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.floaties span{position:absolute;bottom:-40px;color:#e7a3b8;opacity:0;animation:floatUp linear infinite;text-shadow:0 0 14px rgba(255,255,255,.55)}
@keyframes floatUp{0%{transform:translateY(0) rotate(0deg);opacity:0}10%{opacity:.45}80%{opacity:.35}100%{transform:translateY(-115vh) rotate(24deg);opacity:0}}
.screen.active .center-col>*,.screen.active .inner>*:not(.heartline){animation:riseIn .8s cubic-bezier(.2,.8,.3,1) both}
.screen.active .center-col>*:nth-child(2),.screen.active .inner>*:nth-child(2){animation-delay:.12s}
.screen.active .center-col>*:nth-child(3),.screen.active .inner>*:nth-child(3){animation-delay:.24s}
.screen.active .center-col>*:nth-child(4),.screen.active .inner>*:nth-child(4){animation-delay:.36s}
.screen.active .center-col>*:nth-child(5){animation-delay:.48s}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.screen.active .heartline{animation:riseIn .8s .2s both,heartBeat 1.8s 1.4s ease-in-out infinite}
@keyframes heartBeat{0%,100%{transform:scale(1)}12%{transform:scale(1.16)}24%{transform:scale(1)}}
.l-line{animation:riseIn .9s cubic-bezier(.2,.8,.3,1) both;margin:0 0 14px}
.envelope{transition:transform .3s cubic-bezier(.2,.8,.3,1.3),box-shadow .3s ease}
.envelope:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 16px 34px rgba(124,45,63,.28)}
@media (prefers-reduced-motion:reduce){.floaties{display:none}}

/* her answers */
.answers-list { margin: 10px 0 14px; }
.answer-row { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-bottom: 1px dashed rgba(120,60,80,.25); font-size: 14px; }
.answer-kind { flex: 0 0 96px; color: #a2455e; font-weight: 600; }
.answer-val { flex: 1; }
.answer-ts { flex: 0 0 auto; color: #8a6a72; font-size: 12px; }

/* ============================================================
   NICHE: SORRY - luxury candlelight: near-black, real gold, ivory
   ============================================================ */
body[data-niche="sorry"]{
  --cream:#F6F0E2; --cream2:#EDE3CC; --paper:#FBF7EC;
  --blush:#E9CE7A; --blush2:#D9BC6B; --rose:#C9A227; --rose-d:#A8842C;
  --burgundy:#3A2E14; --burgundy-d:#241B0E;
  --ink:#211B12; --ink-soft:#6E6350;
  --night:#0B0906; --night2:#171208;
  --gold:#D4AF37; --gold-soft:#C9B68A;
  --shadow-soft:0 10px 34px rgba(20,14,4,.18);
  --shadow-card:0 6px 20px rgba(20,14,4,.16);
}
body[data-niche="sorry"] .bg-opening{background:
  radial-gradient(85% 55% at 50% 60%, rgba(212,175,55,.20), transparent 62%),
  radial-gradient(55% 38% at 50% 100%, rgba(190,140,45,.16), transparent 60%),
  linear-gradient(180deg,#0B0906 0%,#131009 55%,#241A0E 100%)}
body[data-niche="sorry"] .bg-paper{background:
  radial-gradient(90% 70% at 80% -10%, rgba(212,175,55,.14), transparent 60%),
  radial-gradient(70% 60% at 5% 100%, rgba(201,162,39,.10), transparent 55%),
  var(--cream)}
body[data-niche="sorry"] .bg-night{background:
  radial-gradient(100% 70% at 50% 115%, rgba(212,175,55,.20), transparent 62%),
  linear-gradient(180deg,#0B0906 0%, #151008 55%, #261B0D 100%)}
body[data-niche="sorry"] .bg-rose{background:
  radial-gradient(80% 60% at 85% 0%, rgba(212,175,55,.20), transparent 55%),
  linear-gradient(160deg,#F8F3E8 0%, #F0E7D0 55%, #E7D9B8 100%)}
body[data-niche="sorry"] .grain::before{opacity:.30}
body[data-niche="sorry"] .a-big{width:min(150vw,72vh);opacity:.42}
body[data-niche="sorry"] .a-mid{width:min(95vw,48vh);opacity:.48}
body[data-niche="sorry"] #s0 .made{color:#F7F0DD;text-shadow:0 2px 34px rgba(212,175,55,.5)}
body[data-niche="sorry"] #s0 .from{color:#C9AE7E}
body[data-niche="sorry"] .a-heart{fill:#D4AF37}
body[data-niche="sorry"] .a-line{stroke:rgba(247,240,221,.8)}
body[data-niche="sorry"] .heartline{color:#F7F0DD;text-shadow:0 0 24px rgba(212,175,55,.75)}
body[data-niche="sorry"] .float-heart{color:rgba(212,175,55,.35)}
body[data-niche="sorry"] .kicker{color:var(--rose-d);letter-spacing:.22em}
body[data-niche="sorry"] .on-dark .kicker{color:#D9BC6B}
body[data-niche="sorry"] .on-dark .h-display,body[data-niche="sorry"] .on-dark .h-hand{color:#F7F0DD}
body[data-niche="sorry"] .on-dark .muted{color:#B9A87F}
/* slower, softer motion */
body[data-niche="sorry"] .screen{transition:opacity 1.05s ease,transform 1.05s cubic-bezier(.22,.8,.3,1)}
body[data-niche="sorry"] .screen.active .center-col>*,body[data-niche="sorry"] .screen.active .inner>*:not(.heartline){animation-duration:1.2s}
body[data-niche="sorry"] .screen.active .heartline{animation:riseIn 1.2s .3s both,heartBeat 3.4s 1.8s ease-in-out infinite}
/* serif elegance for headings in this niche */
body[data-niche="sorry"] .h-hand{font-family:var(--font-serif);font-style:italic;font-weight:600;letter-spacing:.01em}
body[data-niche="sorry"] .btn{background:linear-gradient(135deg,#E9CE7A 0%,#C9A227 55%,#A8842C 100%);color:#241B0E;
  box-shadow:0 8px 26px rgba(168,132,44,.45), inset 0 1px 0 rgba(255,248,225,.6);text-shadow:none;font-weight:700}
body[data-niche="sorry"] .btn:hover{box-shadow:0 12px 32px rgba(168,132,44,.55)}
body[data-niche="sorry"] .btn.cream{background:var(--paper);color:#3A2E14;box-shadow:0 8px 24px rgba(20,14,4,.25)}
body[data-niche="sorry"] .btn.ghost{background:transparent;border:1px solid rgba(212,175,55,.55);color:#F0E3C0;box-shadow:none}
body[data-niche="sorry"] .taunt{color:#C9B68A}
body[data-niche="sorry"] #progress{background:rgba(20,15,6,.55);border:1px solid rgba(212,175,55,.25)}
body[data-niche="sorry"] #progress .dot{color:#C9B68A}
body[data-niche="sorry"] #progress .dot.done{background:rgba(212,175,55,.22);color:#E9CE7A}
body[data-niche="sorry"] #progress .dot.now{background:var(--gold);color:#241B0E}
body[data-niche="sorry"] .sub-note,body[data-niche="sorry"] .on-dark .sub-note{color:#B9A87F}
body[data-niche="sorry"] .paper{background-color:var(--paper);border:1px solid rgba(201,162,39,.35)}
body[data-niche="sorry"] .letter-title,body[data-niche="sorry"] .letter-sig{color:#3A2E14}
body[data-niche="sorry"] .result-card .g-name{color:#7A5C14}
body[data-niche="sorry"] .todo-list .box{border-color:var(--rose)}
body[data-niche="sorry"] .todo-list li.done .txt{text-decoration-color:rgba(122,92,20,.6)}
body[data-niche="sorry"] .tape{background:rgba(212,175,55,.32);border-left:1px dashed rgba(255,250,235,.7);border-right:1px dashed rgba(255,250,235,.7)}
body[data-niche="sorry"] .doodle path{stroke:#C9A227}
body[data-niche="sorry"]{--gold-l:#E9CE7A}
body[data-niche="sorry"] .floaties span{color:#C9B68A;text-shadow:0 0 14px rgba(212,175,55,.45)}

/* ---------- bouquet page (realistic photo redesign) ---------- */
.bq-light{background:#F4CDD8;color:#7A2C4E}
#s12 .h-hand{font-family:'Great Vibes',cursive;font-weight:400;font-size:clamp(44px,10vw,64px);color:#D37382}
#s12 .kicker{font-family:'Cormorant Garamond',serif;font-style:normal;font-size:clamp(16px,3.8vw,20px);color:#8C6E78;letter-spacing:.02em}
.bq-light .sub-note{color:#8E3A5E}
#bouquet-stage{position:relative;width:min(94vw,480px);height:min(50vh,400px);margin-top:14px}
.bq-foliage-img{position:absolute;left:50%;bottom:-6%;width:min(108%,490px);transform:translateX(-50%);z-index:1;
  pointer-events:none;user-select:none}
.bq-bud{position:absolute;width:calc(84px * var(--bq-s,1));height:calc(84px * var(--bq-s,1));
  margin:calc(-42px * var(--bq-s,1)) 0 0 calc(-42px * var(--bq-s,1));padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;background:none;border:none;
  transform:rotate(var(--bq-rot,0deg));
  animation:bqPulse 2.6s ease-in-out infinite;animation-delay:var(--bq-delay,0s);
  transition:transform .4s cubic-bezier(.2,.9,.3,1.3)}
@keyframes bqPulse{0%,100%{transform:rotate(var(--bq-rot,0deg)) scale(1)}50%{transform:rotate(var(--bq-rot,0deg)) scale(1.07)}}
.bq-bud img.bq-img{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;
  filter:drop-shadow(0 3px 7px rgba(122,44,78,.28))}
.bq-bud:hover{transform:rotate(var(--bq-rot,0deg)) scale(1.1)}
.bq-bud.open{animation:none;cursor:default;width:calc(120px * var(--bq-s,1));height:calc(120px * var(--bq-s,1));
  margin:calc(-60px * var(--bq-s,1)) 0 0 calc(-60px * var(--bq-s,1))}
.bq-bud.open img.bq-img{animation:bqBloom .9s cubic-bezier(.2,.9,.3,1.25) both;
  filter:drop-shadow(0 5px 12px rgba(122,44,78,.32))}
@keyframes bqHalo{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
@keyframes bqBloom{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.12) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
.bq-note{max-width:420px;margin:6px auto 0;padding:12px 22px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.88);border:1px solid #EFB9CE;box-shadow:0 6px 18px rgba(194,78,124,.18);
  font-family:var(--font-hand);font-size:clamp(20px,4.6vw,24px);color:#8E3A5E;text-align:center;
  opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.bq-note.show{opacity:1;transform:none}
#s12 .sub-note{margin-top:16px}
.bq-light .btn.cream{background:#C24E7C;color:#FFF5F8;border:none;box-shadow:0 8px 20px rgba(194,78,124,.35)}

/* ---------- coupons page ---------- */
.coupon-grid{display:flex;flex-wrap:wrap;gap:clamp(14px,3vw,24px);justify-content:center;max-width:720px;margin-top:26px}
.coupon{
  position:relative;width:clamp(150px,42vw,210px);padding:20px 18px 24px;cursor:pointer;text-align:center;
  background:var(--paper);border-radius:14px;box-shadow:var(--shadow-card);
  border:1px solid rgba(201,162,39,.55);
  transition:transform .3s cubic-bezier(.2,.8,.3,1.3),box-shadow .3s ease,opacity .3s ease;
}
.coupon::before,.coupon::after{ /* punched ticket holes */
  content:"";position:absolute;top:50%;width:18px;height:18px;border-radius:50%;
  background:var(--cream);box-shadow:inset 0 1px 3px rgba(20,14,4,.3);margin-top:-9px;
}
.coupon::before{left:-10px}
.coupon::after{right:-10px}
.coupon:hover:not(.used){transform:translateY(-5px) rotate(-.6deg);box-shadow:0 14px 32px rgba(20,14,4,.24)}
.coupon .cp-icon{font-size:36px}
.coupon .cp-name{font-family:var(--font-hand);font-size:24px;font-weight:700;color:#3A2E14;margin:6px 0 4px;line-height:1.15}
.coupon .cp-fine{font-size:14px;color:var(--ink-soft);font-style:italic;line-height:1.35}
.coupon .cp-stamp{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-serif);font-weight:700;font-size:19px;letter-spacing:.18em;color:#8E2F2F;
  border-radius:14px;opacity:0;transform:rotate(-14deg) scale(1.6);pointer-events:none;
  text-shadow:0 0 1px #8E2F2F;
}
.coupon.used{cursor:default;opacity:.72}
.coupon.used .cp-stamp{opacity:.92;transform:rotate(-14deg) scale(1);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.9,.3,1.4)}
.coupon.used .cp-icon,.coupon.used .cp-name,.coupon.used .cp-fine{filter:grayscale(.4)}

/* ---------- admin: niche + reorder ---------- */
.pill{display:inline-block;padding:3px 12px;border-radius:999px;font-size:12px;background:rgba(162,69,94,.12);color:#a2455e;margin-left:8px;vertical-align:middle}
.order-list{list-style:none;margin:10px 0}
.order-list li{
  display:flex;align-items:center;gap:10px;padding:9px 12px;margin:6px 0;background:#fff;
  border:1px solid #e8c4ce;border-radius:9px;font-size:15px;color:#5c2b3a;
}
.order-list li .drag{cursor:grab;color:#a2455e;font-size:17px;user-select:none}
.order-list li.dragging{opacity:.45}
.order-list li .up,.order-list li .dn{cursor:pointer;border:1px solid #d4577a;background:#fff;color:#a2455e;border-radius:6px;width:26px;height:26px;font-size:13px;line-height:1}
.order-list li .grow{flex:1}


/* ============================================================
   NEW PAGE COMPONENTS (age reveal, cake, countdown, open when)
   ============================================================ */

/* ---------- age reveal ---------- */
#age-num-wrap{position:relative;margin-top:14px;line-height:1}
#age-num{
  display:inline-block;font-family:var(--font-serif);font-weight:700;
  font-size:clamp(120px,34vw,240px);line-height:.95;
  background:linear-gradient(178deg,#F8E3AC 5%,#E9C46A 45%,#B97F22 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 30px rgba(233,196,106,.45));
}
#age-num-wrap.landed #age-num{animation:ageLand 1.1s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes ageLand{0%{transform:scale(.82)}55%{transform:scale(1.06)}100%{transform:scale(1)}}
#s14 .kicker{letter-spacing:.14em}

/* ---------- cake & candles ---------- */
#cake-stage{position:relative;width:min(88vw,340px);height:min(44vh,330px);margin-top:20px}
.cake-tier{position:absolute;left:50%;transform:translateX(-50%);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#FBF3E2 0%,#F3E2C6 100%);
  box-shadow:0 10px 26px rgba(0,0,0,.45), inset 0 -8px 16px rgba(185,127,34,.18)}
.cake-base{bottom:26px;width:100%;height:86px}
.cake-mid{bottom:104px;width:74%;height:72px}
.cake-top{bottom:168px;width:48%;height:60px}
.cake-icing{position:absolute;top:0;left:0;right:0;height:26px;
  background:linear-gradient(180deg,#E9C46A,#D9A83E);
  border-radius:14px 14px 0 0;
  -webkit-mask:linear-gradient(#000 62%, transparent 62%),
    radial-gradient(circle 12px at 12px 20px, #000 98%, transparent) 0 0/24px 26px repeat-x;
  mask:linear-gradient(#000 62%, transparent 62%),
    radial-gradient(circle 12px at 12px 20px, #000 98%, transparent) 0 0/24px 26px repeat-x;
  -webkit-mask-composite:source-in;mask-composite:intersect}
.cake-tier::after{ /* subtle ribbon stripe */
  content:"";position:absolute;left:0;right:0;bottom:14px;height:8px;
  background:linear-gradient(90deg,rgba(185,127,34,.0),rgba(185,127,34,.35),rgba(185,127,34,0))}
.cake-plate{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  width:112%;height:16px;border-radius:50%;
  background:radial-gradient(60% 100% at 50% 0%, #3A2E5E 0%, #221340 70%);
  box-shadow:0 6px 20px rgba(0,0,0,.5)}
#cake-candles{position:absolute;left:0;right:0;bottom:222px;height:74px;z-index:3}
.candle{position:absolute;bottom:0;width:34px;height:74px;margin-left:-17px;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;cursor:pointer;background:none}
.candle .stick{width:9px;height:44px;border-radius:4px;
  background:repeating-linear-gradient(135deg,#F4D58D 0 5px,#E9C46A 5px 10px);
  box-shadow:inset -2px 0 3px rgba(120,80,10,.4)}
.candle .wick{width:2.5px;height:7px;background:#3A2A1A;border-radius:2px}
.candle .flame{
  width:16px;height:24px;margin-bottom:1px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:radial-gradient(50% 60% at 50% 68%, #FFF7DC 0%, #FFD45E 42%, #F08C1E 74%, rgba(240,140,30,0) 100%);
  filter:drop-shadow(0 0 10px rgba(255,196,84,.85)) drop-shadow(0 0 26px rgba(255,160,40,.45));
  transform-origin:50% 90%;
  animation:flick 1.6s ease-in-out infinite;animation-delay:var(--fl-delay,0s);
  transition:transform .35s ease,opacity .35s ease}
@keyframes flick{
  0%,100%{transform:scale(1) rotate(-2deg)}
  28%{transform:scale(1.08,1.14) rotate(2.5deg)}
  52%{transform:scale(.94,.9) rotate(-3deg)}
  76%{transform:scale(1.05,1.1) rotate(1.5deg)}}
.candle.out .flame{transform:scale(.1);opacity:0}
.candle .smoke{position:absolute;bottom:56px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;
  background:rgba(220,220,230,.55);filter:blur(3px);opacity:0;transform:translateY(0)}
.candle.out .smoke{animation:smokeUp 1.8s ease-out .1s}
@keyframes smokeUp{0%{opacity:.7;transform:translateY(0) scale(.6)}100%{opacity:0;transform:translateY(-34px) scale(1.9)}}
.candle:hover:not(.out) .flame{animation-duration:.7s}

/* ---------- reunion countdown ---------- */
#cd-grid{display:flex;gap:clamp(10px,2.5vw,18px);margin-top:30px;flex-wrap:wrap;justify-content:center}
.cd-cell{
  min-width:clamp(66px,18vw,96px);padding:16px 8px 12px;text-align:center;border-radius:var(--r-md);
  background:rgba(255,255,255,.06);border:1px solid rgba(232,185,138,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 26px rgba(0,0,0,.35);
  backdrop-filter:blur(4px)}
.cd-n{font-family:var(--font-serif);font-weight:700;font-size:clamp(34px,9vw,52px);line-height:1;
  color:#F6EBD0;font-variant-numeric:tabular-nums}
.cd-l{font-family:var(--font-hand);font-size:clamp(15px,3.6vw,18px);color:var(--blush2);margin-top:6px;letter-spacing:.06em}
#s16 .kicker{letter-spacing:.14em}

/* ---------- open when... ---------- */
.ow-grid{display:flex;flex-wrap:wrap;gap:clamp(16px,3.5vw,28px);justify-content:center;max-width:760px;margin-top:30px}
.ow-env{
  position:relative;width:clamp(150px,40vw,196px);aspect-ratio:1.42;padding:0;cursor:pointer;
  background:linear-gradient(155deg,#F7F0E2,#EADFC8);border-radius:10px;
  box-shadow:var(--shadow-card);transform:rotate(var(--rot,0deg));
  transition:transform .3s cubic-bezier(.2,.8,.3,1.3),box-shadow .3s ease,opacity .3s ease;
  display:flex;align-items:flex-end;justify-content:center}
.ow-env:hover{transform:rotate(0deg) translateY(-5px);box-shadow:0 16px 36px rgba(19,28,62,.28)}
.ow-flap{position:absolute;top:0;left:0;right:0;height:50%;
  background:linear-gradient(165deg,#EFE5CF,#E2D3B4);
  clip-path:polygon(0 0,100% 0,50% 100%);border-radius:10px 10px 0 0;
  box-shadow:0 1px 3px rgba(90,70,40,.18)}
.ow-seal{
  position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#F6EBD0;
  background:radial-gradient(circle at 34% 30%, #42558F, #131C3E 78%);
  box-shadow:0 3px 8px rgba(10,16,36,.5), inset 0 1px 2px rgba(255,255,255,.25)}
.ow-env.opened .ow-seal{opacity:.28;filter:grayscale(.5)}
.ow-name{
  position:relative;z-index:1;padding:10px 12px 14px;text-align:center;
  font-family:var(--font-hand);font-weight:600;font-size:clamp(17px,4vw,20px);line-height:1.2;color:#4A3A22}
.ow-env.opened{opacity:.82}
.ow-env.opened .ow-name{color:#8A7A5C}
#ow-overlay{position:fixed;inset:0;z-index:60;background:rgba(10,16,36,.82);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:24px}
#ow-overlay.open{display:flex}
#ow-overlay .ow-card{max-width:min(480px,92vw);max-height:82vh;overflow-y:auto;text-align:center;
  padding:clamp(28px,6vw,46px);animation:popIn .45s cubic-bezier(.2,.9,.3,1.2)}
#ow-overlay .ow-label{font-family:var(--font-hand);font-size:clamp(24px,5.5vw,30px);color:var(--burgundy);font-weight:700;margin-bottom:14px}
#ow-overlay .ow-note{font-family:var(--font-hand);font-size:clamp(21px,4.8vw,26px);line-height:1.6;color:var(--brown-d);white-space:pre-wrap;margin-bottom:22px}


/* ============================================================
   NICHE: BIRTHDAY - midnight soiree: deep violet, champagne gold
   ============================================================ */
body[data-niche="birthday"]{
  --cream:#F8F2E7; --cream2:#EFE4D0; --paper:#FCF7EC;
  --blush:#F2C9D8; --blush2:#E9A8C4; --rose:#C98AB0; --rose-d:#A86690;
  --burgundy:#2A1245; --burgundy-d:#1A0B2E;
  --brown:#4A3468; --brown-d:#33214E;
  --ink:#2B1B3D; --ink-soft:#6E5B84;
  --night:#120722; --night2:#1E0E38;
  --gold:#E9C46A; --gold-l:#F4D58D;
  --shadow-soft:0 10px 34px rgba(26,11,46,.18);
  --shadow-card:0 6px 20px rgba(26,11,46,.15);
}
body[data-niche="birthday"] .bg-opening{background:
  radial-gradient(85% 55% at 50% 62%, rgba(233,196,106,.22), transparent 62%),
  radial-gradient(60% 40% at 50% 108%, rgba(157,107,201,.22), transparent 60%),
  linear-gradient(180deg,#120722 0%,#1E0E38 52%,#34185C 100%)}
body[data-niche="birthday"] .bg-paper{background:
  radial-gradient(90% 70% at 80% -10%, rgba(233,196,106,.20), transparent 60%),
  radial-gradient(70% 60% at 5% 100%, rgba(157,107,201,.14), transparent 55%),
  var(--cream)}
body[data-niche="birthday"] .bg-night{background:
  radial-gradient(100% 70% at 50% 115%, rgba(233,196,106,.22), transparent 62%),
  linear-gradient(180deg,#0E0519 0%,#1E0E38 55%,#2E1650 100%)}
body[data-niche="birthday"] .bg-rose{background:
  radial-gradient(80% 60% at 85% 0%, rgba(233,196,106,.24), transparent 55%),
  linear-gradient(160deg,#F8F0E4 0%,#F0E4D6 50%,#E4D2E2 100%)}
body[data-niche="birthday"] .grain::before{opacity:.32}
body[data-niche="birthday"] .a-big{width:min(150vw,72vh);opacity:.40}
body[data-niche="birthday"] .a-mid{width:min(95vw,48vh);opacity:.46}
body[data-niche="birthday"] #s0 .made{color:#F8EECC;text-shadow:0 2px 34px rgba(233,196,106,.55)}
body[data-niche="birthday"] #s0 .from{color:#C9A8DC}
body[data-niche="birthday"] .a-heart{fill:#E9C46A}
body[data-niche="birthday"] .a-line{stroke:rgba(248,238,204,.85)}
body[data-niche="birthday"] .heartline{color:#F4D58D;text-shadow:0 0 24px rgba(233,196,106,.8)}
body[data-niche="birthday"] .float-heart{color:rgba(233,196,106,.4)}
body[data-niche="birthday"] .kicker{color:var(--rose-d)}
body[data-niche="birthday"] .on-dark .kicker{color:#E9A8C4}
body[data-niche="birthday"] .on-dark .h-display,body[data-niche="birthday"] .on-dark .h-hand{color:#F8EECC}
body[data-niche="birthday"] .on-dark .muted{color:#B9A2CE}
body[data-niche="birthday"] .h-display,body[data-niche="birthday"] .h-hand{color:#3D2060}
body[data-niche="birthday"] .btn{background:linear-gradient(135deg,#F4D58D 0%,#E9C46A 55%,#C9932B 100%);color:#2A1245;
  box-shadow:0 8px 26px rgba(201,147,43,.5), inset 0 1px 0 rgba(255,250,230,.65);font-weight:700}
body[data-niche="birthday"] .btn:hover{box-shadow:0 12px 32px rgba(201,147,43,.6)}
body[data-niche="birthday"] .btn.cream{background:var(--paper);color:#3D2060;box-shadow:0 8px 24px rgba(14,5,25,.35)}
body[data-niche="birthday"] .btn.ghost{background:transparent;border:1px solid rgba(233,196,106,.55);color:#F4D58D;box-shadow:none}
body[data-niche="birthday"] .taunt{color:#C9A8DC}
body[data-niche="birthday"] #progress{background:rgba(18,7,34,.6);border:1px solid rgba(233,196,106,.3)}
body[data-niche="birthday"] #progress .dot{color:#C9A8DC;background:rgba(233,196,106,.1)}
body[data-niche="birthday"] #progress .dot.done{background:rgba(233,196,106,.24);color:#F4D58D}
body[data-niche="birthday"] #progress .dot.now{background:var(--gold);color:#2A1245}
body[data-niche="birthday"] .sub-note,body[data-niche="birthday"] .on-dark .sub-note{color:#B9A2CE}
body[data-niche="birthday"] .paper{background-color:var(--paper);border:1px solid rgba(157,107,201,.3)}
body[data-niche="birthday"] .letter-title,body[data-niche="birthday"] .letter-sig{color:#3D2060}
body[data-niche="birthday"] .tape{background:rgba(233,196,106,.4)}
body[data-niche="birthday"] .doodle path{stroke:#C98AB0}
body[data-niche="birthday"] .result-card .g-name{color:#3D2060}
body[data-niche="birthday"] .todo-list .box{border-color:#C98AB0}
body[data-niche="birthday"] .floaties span{color:#C9A8DC;text-shadow:0 0 14px rgba(233,196,106,.5)}
body[data-niche="birthday"] .coupon{border-color:rgba(157,107,201,.4)}
body[data-niche="birthday"] .coupon .cp-name{color:#3D2060}

/* ============================================================
   NICHE: MISSYOU - blue hour: indigo night, moon silver, lantern amber
   ============================================================ */
body[data-niche="missyou"]{
  --cream:#F2F4FA; --cream2:#E4E8F4; --paper:#F8FAFE;
  --blush:#C7D3EE; --blush2:#A9BCE0; --rose:#7C93CC; --rose-d:#5B72B0;
  --burgundy:#182450; --burgundy-d:#0E1638;
  --brown:#3A4670; --brown-d:#2A3358;
  --ink:#1D2440; --ink-soft:#5B6484;
  --night:#0A1024; --night2:#131C3E;
  --gold:#E8B98A; --gold-l:#F2D3AC;
  --shadow-soft:0 10px 34px rgba(14,22,56,.18);
  --shadow-card:0 6px 20px rgba(14,22,56,.15);
}
body[data-niche="missyou"] .bg-opening{background:
  radial-gradient(70% 45% at 50% 30%, rgba(201,212,232,.20), transparent 60%),
  radial-gradient(90% 55% at 50% 105%, rgba(232,185,138,.14), transparent 62%),
  linear-gradient(180deg,#0A1024 0%,#131C3E 55%,#1E2C5C 100%)}
body[data-niche="missyou"] .bg-paper{background:
  radial-gradient(90% 70% at 80% -10%, rgba(169,188,224,.28), transparent 60%),
  radial-gradient(70% 60% at 5% 100%, rgba(232,185,138,.14), transparent 55%),
  var(--cream)}
body[data-niche="missyou"] .bg-night{background:
  radial-gradient(70% 45% at 50% 8%, rgba(201,212,232,.12), transparent 58%),
  radial-gradient(100% 70% at 50% 115%, rgba(232,185,138,.16), transparent 62%),
  linear-gradient(180deg,#0A1024 0%,#131C3E 55%,#1E2C5C 100%)}
body[data-niche="missyou"] .bg-rose{background:
  radial-gradient(80% 60% at 85% 0%, rgba(201,212,232,.32), transparent 55%),
  linear-gradient(160deg,#F0F3FA 0%,#E2E8F5 55%,#CFDAF0 100%)}
body[data-niche="missyou"] .grain::before{opacity:.30}
body[data-niche="missyou"] .a-big{width:min(150vw,72vh);opacity:.32}
body[data-niche="missyou"] .a-mid{width:min(95vw,48vh);opacity:.38}
body[data-niche="missyou"] #s0 .made{color:#EDF1FA;text-shadow:0 2px 34px rgba(169,188,224,.6)}
body[data-niche="missyou"] #s0 .from{color:#A9BCE0}
body[data-niche="missyou"] .a-heart{fill:#A9BCE0}
body[data-niche="missyou"] .a-line{stroke:rgba(237,241,250,.85)}
body[data-niche="missyou"] .heartline{color:#E8B98A;text-shadow:0 0 24px rgba(232,185,138,.8)}
body[data-niche="missyou"] .float-heart{color:rgba(169,188,224,.45)}
/* crescent moon on the opening */
body[data-niche="missyou"] #s0 .aura::after{
  content:"";position:absolute;top:9%;right:10%;width:74px;height:74px;border-radius:50%;
  box-shadow:20px 9px 0 0 #F2E8CE;opacity:.9;
  filter:drop-shadow(0 0 22px rgba(242,232,206,.55));
  animation:moonGlow 7s ease-in-out infinite}
@keyframes moonGlow{0%,100%{opacity:.75}50%{opacity:1}}
body[data-niche="missyou"] .kicker{color:var(--rose-d)}
body[data-niche="missyou"] .on-dark .kicker{color:#C7D3EE}
body[data-niche="missyou"] .h-hand{font-family:var(--font-serif);font-style:italic;font-weight:600}
body[data-niche="missyou"] .h-display,body[data-niche="missyou"] .h-hand{color:#182450}
body[data-niche="missyou"] .on-dark .h-display,body[data-niche="missyou"] .on-dark .h-hand{color:#EDF1FA}
body[data-niche="missyou"] .on-dark .muted{color:#9AA8CE}
body[data-niche="missyou"] .btn{background:linear-gradient(135deg,#F2D3AC 0%,#E8B98A 55%,#D59A66 100%);color:#131C3E;
  box-shadow:0 8px 26px rgba(213,154,102,.5), inset 0 1px 0 rgba(255,250,240,.6);font-weight:700}
body[data-niche="missyou"] .btn:hover{box-shadow:0 12px 32px rgba(213,154,102,.6)}
body[data-niche="missyou"] .btn.cream{background:var(--paper);color:#182450;box-shadow:0 8px 24px rgba(10,16,36,.35)}
body[data-niche="missyou"] .btn.ghost{background:transparent;border:1px solid rgba(201,212,232,.5);color:#C7D3EE;box-shadow:none}
body[data-niche="missyou"] .taunt{color:#A9BCE0}
body[data-niche="missyou"] #progress{background:rgba(10,16,36,.6);border:1px solid rgba(201,212,232,.28)}
body[data-niche="missyou"] #progress .dot{color:#A9BCE0;background:rgba(169,188,224,.12)}
body[data-niche="missyou"] #progress .dot.done{background:rgba(232,185,138,.25);color:#F2D3AC}
body[data-niche="missyou"] #progress .dot.now{background:var(--gold);color:#131C3E}
body[data-niche="missyou"] .sub-note,body[data-niche="missyou"] .on-dark .sub-note{color:#9AA8CE}
body[data-niche="missyou"] .paper{background-color:var(--paper);border:1px solid rgba(124,147,204,.3)}
body[data-niche="missyou"] .letter-title,body[data-niche="missyou"] .letter-sig{color:#182450}
body[data-niche="missyou"] .tape{background:rgba(169,188,224,.45)}
body[data-niche="missyou"] .doodle path{stroke:#7C93CC}
body[data-niche="missyou"] .todo-list .box{border-color:#7C93CC}
body[data-niche="missyou"] .floaties span{color:#A9BCE0;text-shadow:0 0 14px rgba(201,212,232,.5)}
body[data-niche="missyou"] .coupon{border-color:rgba(124,147,204,.4)}
body[data-niche="missyou"] .coupon .cp-name{color:#182450}
body[data-niche="missyou"] .cd-l{color:#A9BCE0}

/* ============================================================
   NICHE: FRIENDSHIP - golden hour: warm cream, terracotta, teal
   ============================================================ */
body[data-niche="friendship"]{
  --cream:#FDF6E9; --cream2:#F6EAD2; --paper:#FFFBF0;
  --blush:#F6CBA0; --blush2:#F0B47E; --rose:#D97742; --rose-d:#B85C2E;
  --burgundy:#5A2D12; --burgundy-d:#3E1E0C;
  --brown:#6B4226; --brown-d:#4A2C16;
  --ink:#3A2415; --ink-soft:#7A5B42;
  --night:#1E1208; --night2:#2E1B0C;
  --gold:#E9A03B; --gold-l:#F2C57C;
  --shadow-soft:0 10px 34px rgba(62,30,12,.16);
  --shadow-card:0 6px 20px rgba(62,30,12,.14);
}
body[data-niche="friendship"] .bg-opening{background:
  radial-gradient(90% 60% at 50% 108%, rgba(233,160,59,.4), transparent 62%),
  radial-gradient(70% 45% at 80% 0%, rgba(79,176,165,.18), transparent 58%),
  linear-gradient(180deg,#F6C98E 0%,#EE9E63 55%,#D97742 100%)}
body[data-niche="friendship"] .bg-paper{background:
  radial-gradient(90% 70% at 80% -10%, rgba(233,160,59,.22), transparent 60%),
  radial-gradient(70% 60% at 5% 100%, rgba(79,176,165,.14), transparent 55%),
  var(--cream)}
body[data-niche="friendship"] .bg-night{background:
  radial-gradient(100% 70% at 50% 115%, rgba(233,160,59,.26), transparent 62%),
  linear-gradient(180deg,#1E1208 0%,#2E1B0C 55%,#4A2810 100%)}
body[data-niche="friendship"] .bg-rose{background:
  radial-gradient(80% 60% at 85% 0%, rgba(79,176,165,.2), transparent 55%),
  linear-gradient(160deg,#FDF2DF 0%,#F8E3C4 55%,#F0CE9E 100%)}
body[data-niche="friendship"] .grain::before{opacity:.32}
body[data-niche="friendship"] .a-big{width:min(150vw,72vh);opacity:.42}
body[data-niche="friendship"] .a-mid{width:min(95vw,48vh);opacity:.48}
body[data-niche="friendship"] #s0 .made{color:#3E1E0C;text-shadow:0 2px 30px rgba(255,235,200,.9)}
body[data-niche="friendship"] #s0 .from{color:#7A3A18}
body[data-niche="friendship"] .a-heart{fill:#D97742}
body[data-niche="friendship"] .a-line{stroke:rgba(255,248,230,.95)}
body[data-niche="friendship"] .heartline{color:#FFFBF0;text-shadow:0 0 24px rgba(255,220,160,.95)}
body[data-niche="friendship"] .float-heart{color:rgba(255,248,230,.5)}
body[data-niche="friendship"] .kicker{color:var(--rose-d)}
body[data-niche="friendship"] .on-dark .kicker{color:#F0B47E}
body[data-niche="friendship"] .on-dark .h-display,body[data-niche="friendship"] .on-dark .h-hand{color:#FFEFD2}
body[data-niche="friendship"] .on-dark .muted{color:#D9B490}
body[data-niche="friendship"] .btn{background:linear-gradient(135deg,#F2C57C 0%,#E9A03B 45%,#D97742 100%);color:#3E1E0C;
  box-shadow:0 8px 26px rgba(184,92,46,.5), inset 0 1px 0 rgba(255,248,230,.6);font-weight:700}
body[data-niche="friendship"] .btn:hover{box-shadow:0 12px 32px rgba(184,92,46,.6)}
body[data-niche="friendship"] .btn.cream{background:var(--paper);color:#5A2D12;box-shadow:0 8px 24px rgba(30,18,8,.3)}
body[data-niche="friendship"] .btn.ghost{background:rgba(255,251,240,.16);border:1px solid rgba(255,248,230,.6);color:#FFFBF0;box-shadow:none}
body[data-niche="friendship"] .taunt{color:#F0B47E}
body[data-niche="friendship"] #progress{background:rgba(255,251,240,.8)}
body[data-niche="friendship"] #progress .dot{color:#7A5B42;background:rgba(217,119,66,.12)}
body[data-niche="friendship"] #progress .dot.done{background:rgba(233,160,59,.3);color:#B85C2E}
body[data-niche="friendship"] #progress .dot.now{background:var(--rose);color:#FFFBF0}
body[data-niche="friendship"] .sub-note,body[data-niche="friendship"] .on-dark .sub-note{color:#D9B490}
body[data-niche="friendship"] .paper{background-color:var(--paper);border:1px solid rgba(217,119,66,.3)}
body[data-niche="friendship"] .letter-title,body[data-niche="friendship"] .letter-sig{color:#5A2D12}
body[data-niche="friendship"] .tape{background:rgba(79,176,165,.4)}
body[data-niche="friendship"] .doodle path{stroke:#D97742}
body[data-niche="friendship"] .todo-list .box{border-color:#D97742}
body[data-niche="friendship"] .todo-list li.done .box{background:#F6CBA0}
body[data-niche="friendship"] .floaties span{color:#F2C57C;text-shadow:0 0 14px rgba(233,160,59,.5)}
body[data-niche="friendship"] .coupon{border-color:rgba(217,119,66,.45)}
body[data-niche="friendship"] .coupon .cp-name{color:#5A2D12}
body[data-niche="friendship"] .coupon .cp-stamp{color:#2F7E76;text-shadow:0 0 1px #2F7E76}

/* ============================================================
   NICHE: PROUD - trophy room: deep emerald, gold, ivory
   ============================================================ */
body[data-niche="proud"]{
  --cream:#F4F5EA; --cream2:#E8E9D6; --paper:#FBFBF1;
  --blush:#CDE8CE; --blush2:#A8D4AE; --rose:#2F9E6E; --rose-d:#1F7A55;
  --burgundy:#0E2A1A; --burgundy-d:#081A0F;
  --brown:#2E4A38; --brown-d:#1E3527;
  --ink:#132A1C; --ink-soft:#4E6B5A;
  --night:#071208; --night2:#0E2414;
  --gold:#D4AF37; --gold-l:#E9CE7A;
  --shadow-soft:0 10px 34px rgba(8,26,15,.2);
  --shadow-card:0 6px 20px rgba(8,26,15,.16);
}
body[data-niche="proud"] .bg-opening{background:
  radial-gradient(85% 55% at 50% 62%, rgba(212,175,55,.22), transparent 62%),
  radial-gradient(60% 40% at 50% 108%, rgba(47,158,110,.2), transparent 60%),
  linear-gradient(180deg,#071208 0%,#0E2414 55%,#1A3A22 100%)}
body[data-niche="proud"] .bg-paper{background:
  radial-gradient(90% 70% at 80% -10%, rgba(212,175,55,.18), transparent 60%),
  radial-gradient(70% 60% at 5% 100%, rgba(47,158,110,.12), transparent 55%),
  var(--cream)}
body[data-niche="proud"] .bg-night{background:
  radial-gradient(100% 70% at 50% 115%, rgba(212,175,55,.2), transparent 62%),
  linear-gradient(180deg,#071208 0%,#0E2414 55%,#1A3A22 100%)}
body[data-niche="proud"] .bg-rose{background:
  radial-gradient(80% 60% at 85% 0%, rgba(212,175,55,.2), transparent 55%),
  linear-gradient(160deg,#F4F5EA 0%,#E6EBD4 55%,#D2DFC0 100%)}
body[data-niche="proud"] .grain::before{opacity:.30}
body[data-niche="proud"] .a-big{width:min(150vw,72vh);opacity:.40}
body[data-niche="proud"] .a-mid{width:min(95vw,48vh);opacity:.46}
body[data-niche="proud"] #s0 .made{color:#F5EEDC;text-shadow:0 2px 34px rgba(212,175,55,.5)}
body[data-niche="proud"] #s0 .from{color:#A8D4AE}
body[data-niche="proud"] .a-heart{fill:#D4AF37}
body[data-niche="proud"] .a-line{stroke:rgba(245,238,220,.85)}
body[data-niche="proud"] .heartline{color:#E9CE7A;text-shadow:0 0 24px rgba(212,175,55,.8)}
body[data-niche="proud"] .float-heart{color:rgba(212,175,55,.4)}
body[data-niche="proud"] .kicker{color:var(--rose-d);letter-spacing:.18em}
body[data-niche="proud"] .on-dark .kicker{color:#A8D4AE}
body[data-niche="proud"] .h-hand{font-family:var(--font-serif);font-style:italic;font-weight:600}
body[data-niche="proud"] .h-display,body[data-niche="proud"] .h-hand{color:#0E2A1A}
body[data-niche="proud"] .on-dark .h-display,body[data-niche="proud"] .on-dark .h-hand{color:#F5EEDC}
body[data-niche="proud"] .on-dark .muted{color:#9AB8A2}
body[data-niche="proud"] .btn{background:linear-gradient(135deg,#E9CE7A 0%,#D4AF37 55%,#A8842C 100%);color:#081A0F;
  box-shadow:0 8px 26px rgba(168,132,44,.45), inset 0 1px 0 rgba(255,248,225,.6);font-weight:700}
body[data-niche="proud"] .btn:hover{box-shadow:0 12px 32px rgba(168,132,44,.55)}
body[data-niche="proud"] .btn.cream{background:var(--paper);color:#0E2A1A;box-shadow:0 8px 24px rgba(7,18,8,.35)}
body[data-niche="proud"] .btn.ghost{background:transparent;border:1px solid rgba(212,175,55,.55);color:#E9CE7A;box-shadow:none}
body[data-niche="proud"] .taunt{color:#A8D4AE}
body[data-niche="proud"] #progress{background:rgba(7,18,8,.6);border:1px solid rgba(212,175,55,.28)}
body[data-niche="proud"] #progress .dot{color:#9AB8A2;background:rgba(212,175,55,.1)}
body[data-niche="proud"] #progress .dot.done{background:rgba(212,175,55,.22);color:#E9CE7A}
body[data-niche="proud"] #progress .dot.now{background:var(--gold);color:#081A0F}
body[data-niche="proud"] .sub-note,body[data-niche="proud"] .on-dark .sub-note{color:#9AB8A2}
body[data-niche="proud"] .paper{background-color:var(--paper);border:1px solid rgba(47,158,110,.3)}
body[data-niche="proud"] .letter-title,body[data-niche="proud"] .letter-sig{color:#0E2A1A}
body[data-niche="proud"] .tape{background:rgba(212,175,55,.35)}
body[data-niche="proud"] .doodle path{stroke:#2F9E6E}
body[data-niche="proud"] .todo-list .box{border-color:#2F9E6E}
body[data-niche="proud"] .floaties span{color:#A8D4AE;text-shadow:0 0 14px rgba(212,175,55,.45)}
body[data-niche="proud"] .coupon{border-color:rgba(47,158,110,.4)}
body[data-niche="proud"] .coupon .cp-name{color:#0E2A1A}

/* ============================================================
   V8 POLISH - proud + sorry raised to the moonlight bar:
   deep rich backgrounds (no muddy wash), signature glowing
   accent on the opening, honor-roll typography, refined cards
   ============================================================ */

/* ---------- proud: trophy night ---------- */
body[data-niche="proud"] .bg-opening{background:
  radial-gradient(70% 42% at 50% 112%, rgba(212,175,55,.26), transparent 62%),
  radial-gradient(70% 45% at 50% -6%, rgba(47,158,110,.18), transparent 58%),
  linear-gradient(180deg,#050D07 0%,#0C2010 55%,#17331E 100%)}
body[data-niche="proud"] .bg-night{background:
  radial-gradient(70% 45% at 50% 8%, rgba(47,158,110,.10), transparent 58%),
  radial-gradient(100% 70% at 50% 115%, rgba(212,175,55,.20), transparent 62%),
  linear-gradient(180deg,#050D07 0%,#0C2010 55%,#17331E 100%)}
/* gold winner's star on the opening (like missyou's crescent) */
body[data-niche="proud"] #s0 .aura::after{
  content:"\2726";position:absolute;top:10%;right:12%;
  font-size:62px;line-height:1;color:#E9CE7A;
  text-shadow:0 0 24px rgba(212,175,55,.8),0 0 64px rgba(212,175,55,.4);
  animation:starPulse 6s ease-in-out infinite}
@keyframes starPulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
body[data-niche="proud"] .a-big{opacity:.30}
body[data-niche="proud"] .a-mid{opacity:.36}
/* proud checklist reads like an honor roll */
body[data-niche="proud"] .todo-list{margin-top:30px}
body[data-niche="proud"] .todo-list li{font-family:var(--font-serif);font-style:italic;font-weight:500;
  font-size:clamp(19px,4.6vw,23px);padding:15px 6px}
body[data-niche="proud"] .todo-list .box{border-color:#C9A227;border-radius:6px;background:rgba(212,175,55,.06)}
body[data-niche="proud"] .todo-list li.done .box{background:rgba(212,175,55,.28);color:#7A5C14}
body[data-niche="proud"] .todo-list li.done .txt{text-decoration-color:rgba(122,92,20,.65)}
/* refined coupon cards */
body[data-niche="proud"] .coupon{border-color:rgba(212,175,55,.5);box-shadow:0 10px 26px rgba(8,26,15,.14)}
body[data-niche="proud"] .coupon .cp-stamp{color:#7A5C14;text-shadow:0 0 1px #7A5C14}

/* ---------- sorry: candlelight, cleaned ---------- */
body[data-niche="sorry"] .bg-opening{background:
  radial-gradient(60% 38% at 50% 112%, rgba(233,206,122,.22), transparent 60%),
  radial-gradient(70% 45% at 50% -6%, rgba(233,206,122,.07), transparent 55%),
  linear-gradient(180deg,#050302 0%,#100A04 55%,#1C1206 100%)}
body[data-niche="sorry"] .bg-night{background:
  radial-gradient(70% 45% at 50% 8%, rgba(233,206,122,.06), transparent 55%),
  radial-gradient(100% 70% at 50% 115%, rgba(233,206,122,.16), transparent 62%),
  linear-gradient(180deg,#050302 0%,#100A04 55%,#1C1206 100%)}
/* a single candle flame on the opening */
body[data-niche="sorry"] #s0 .aura::after{
  content:"";position:absolute;top:11%;right:14%;width:14px;height:22px;
  border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 72%, #FFF3C8 0%, #F2C96B 45%, #C98A2C 100%);
  box-shadow:0 0 18px 6px rgba(233,206,122,.55), 0 0 64px 26px rgba(212,154,60,.22);
  animation:flameFlicker 2.6s ease-in-out infinite}
@keyframes flameFlicker{
  0%,100%{transform:scale(1) rotate(-1.5deg)}
  30%{transform:scale(1.06,.94) rotate(1.5deg)}
  55%{transform:scale(.96,1.05) rotate(-1deg)}
  80%{transform:scale(1.03,.97) rotate(1deg)}}
body[data-niche="sorry"] .a-big{opacity:.30}
body[data-niche="sorry"] .a-mid{opacity:.36}
/* sorry kickers + headlines get the same airy spacing */
body[data-niche="sorry"] .kicker{letter-spacing:.22em}
body[data-niche="sorry"] .coupon{border-color:rgba(201,162,39,.45);box-shadow:0 10px 26px rgba(20,14,4,.12)}

/* v8.1 - soften the blurred aura hearts: pale glow, not muddy wash */
body[data-niche="sorry"] .a-heart{fill:#E9CE7A}
body[data-niche="sorry"] .a-big{opacity:.15;filter:blur(64px)}
body[data-niche="sorry"] .a-mid{opacity:.18;filter:blur(34px)}
body[data-niche="proud"] .a-heart{fill:#E9CE7A}
body[data-niche="proud"] .a-big{opacity:.15;filter:blur(64px)}
body[data-niche="proud"] .a-mid{opacity:.18;filter:blur(34px)}

/* boot: hide chrome+stage until tenant content resolves (kills flash of default content) */
body.boot #stage,body.boot #progress,body.boot #backbtn,body.boot #player,body.boot .floaties{visibility:hidden}
/* keep tall pages clear of the fixed pager pill (top) and music player (bottom) */
.screen{justify-content:center;justify-content:safe center;padding-top:76px;padding-bottom:100px}