/*
 * Birthday Paigaam — the love-letter scrapbook.
 * Palette and fonts arrive as custom properties from the renderer
 * (--blush --cream --peach --lavender --accent, --font-head/script/hand);
 * every other tone is mixed from those, so the whole page — art included —
 * recolours from five swatches.
 */

/* ------------------------------------------------------------- tokens */
:root {
  --ink: #5B2A3C;
  --ink-soft: rgba(91, 42, 60, .72);
  --blush-deep: #EE9DB4;
  --lav-deep: #A98ED8;
  --lav-light: #EEE6FB;
  --peach-deep: #F2B385;
  --plum: #4B2B47;
  --paper: #FFFBF0;
  --env-side: #F7E2C2;
  --env-front: #FBEBD0;
  --env-flap: #F4DCB8;
  --env-in: #E9CDA6;
  --gold: #F2C14E;
  --font-ui: 'Nunito', ui-rounded, system-ui, -apple-system, sans-serif;
  --shadow: 0 22px 44px -22px rgba(91, 42, 60, .42), 0 6px 14px -8px rgba(91, 42, 60, .22);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --ink: color-mix(in srgb, var(--accent) 34%, #2b0f1e);
    --ink-soft: color-mix(in srgb, var(--ink) 72%, transparent);
    --blush-deep: color-mix(in srgb, var(--blush) 72%, var(--accent));
    --lav-deep: color-mix(in srgb, var(--lavender) 66%, var(--ink));
    --lav-light: color-mix(in srgb, var(--lavender) 42%, #fff);
    --peach-deep: color-mix(in srgb, var(--peach) 76%, #c4643a);
    --plum: color-mix(in srgb, var(--ink) 82%, var(--lavender));
    --paper: color-mix(in srgb, var(--cream) 55%, #fff);
    --env-side: color-mix(in srgb, var(--cream) 62%, var(--peach));
    --env-front: color-mix(in srgb, var(--cream) 80%, var(--peach));
    --env-flap: color-mix(in srgb, var(--cream) 48%, var(--peach));
    --env-in: color-mix(in srgb, var(--peach) 70%, var(--ink) 8%);
  }
}

/* art fills & strokes (inline SVG uses these classes) */
.f-blush { fill: var(--blush); } .f-cream { fill: var(--cream); } .f-peach { fill: var(--peach); }
.f-lav { fill: var(--lavender); } .f-acc { fill: var(--accent); } .f-ink { fill: var(--ink); }
.f-white { fill: #fff; } .f-gold { fill: var(--gold); } .f-blushdeep { fill: var(--blush-deep); }
.f-lavdeep { fill: var(--lav-deep); } .f-lavlight { fill: var(--lav-light); } .f-peachdeep { fill: var(--peach-deep); }
.f-plum { fill: var(--plum); } .f-tape { fill: #fff; }
.f-envside { fill: var(--env-side); } .f-envfront { fill: var(--env-front); } .f-envflap { fill: var(--env-flap); }
.s-ink { stroke: var(--ink); } .s-white { stroke: #fff; } .s-acc { stroke: var(--accent); } .s-cream { stroke: var(--cream); }
.s-peach { stroke: var(--peach); } .s-peachdeep { stroke: var(--peach-deep); } .s-blush { stroke: var(--blush); } .s-lavdeep { stroke: var(--lav-deep); }
.bp-sticker-edge { fill: #fff; stroke: #fff; stroke-width: 16; stroke-linejoin: round; }
.bp-sticker-edge--thin { stroke-width: 3; }

/* ------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body.bp {
  overflow-x: hidden;
  overflow-x: clip;
  font-family: var(--font-hand);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
:where(.bp) button { font: inherit; color: inherit; }
:where(.bp) img { max-width: 100%; display: block; }
:where(.bp) svg { display: block; }
.bp [hidden] { display: none !important; }
.bp :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 12px; }
.bp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------ the background */
.bp-bg { position: fixed; inset: -40px; z-index: 0; overflow: hidden; background: var(--cream); will-change: transform; }
.bp-stripes {
  position: absolute; top: 0; bottom: 0; left: -110px; right: -110px;
  background: repeating-linear-gradient(90deg,
    var(--blush) 0, var(--blush) 40px, var(--cream) 52px, var(--cream) 88px, var(--blush) 100px);
  opacity: .78;
  animation: bpStripes 16s linear infinite;
  will-change: transform;
}
.bp-wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 45% at 12% 8%, var(--lavender) 0%, transparent 70%),
    radial-gradient(55% 45% at 92% 96%, var(--peach) 0%, transparent 72%),
    radial-gradient(70% 55% at 50% 48%, rgba(255, 255, 255, .62) 0%, transparent 70%);
  opacity: .85;
}
.bp-grain {
  position: absolute; inset: 0; opacity: .28; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .32 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes bpStripes { to { transform: translate3d(100px, 0, 0); } }

.bp-ambient, .bp-fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bp-ambient { z-index: 1; }
.bp-fx { z-index: 60; }
.bp-floaters { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.bp-floater { position: absolute; top: 100%; left: var(--x); width: var(--w); animation: bpDrift var(--dur) linear forwards; }
.bp-floater > * { animation: bpSway calc(var(--dur) / 4) ease-in-out infinite alternate; transform-origin: 50% 0; }
.bp-floater--down { top: auto; bottom: 100%; animation-name: bpDriftDown; }
.bp-floater .bp-balloon, .bp-floater .bp-ribbon { width: 100%; height: auto; }
.bp-floater .bp-balloon { opacity: .92; }
@keyframes bpDrift { to { transform: translate3d(var(--dx, 40px), calc(-100vh - 220px), 0); } }
@keyframes bpDriftDown { to { transform: translate3d(var(--dx, -60px), calc(100vh + 240px), 0) rotate(40deg); } }
@keyframes bpSway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

/* ------------------------------------------------------- top controls */
.bp-controls { position: fixed; z-index: 70; top: calc(var(--safe-t) + 12px); right: 12px; display: flex; gap: 8px; }
.bp-iconbtn {
  width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--ink); padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .82); display: grid; place-items: center; box-shadow: 0 3px 0 var(--ink);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .15s;
}
.bp-iconbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.bp-iconbtn svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bp-sound .i-spk { fill: var(--ink); }
.bp-sound .i-off { display: none; }
.bp-sound[aria-pressed='false'] .i-on { display: none; }
.bp-sound[aria-pressed='false'] .i-off { display: inline; }
.bp-motion svg path { fill: var(--gold); stroke: var(--ink); stroke-width: 1.4; }
.bp-motion[aria-pressed='false'] svg path { fill: #fff; }

.bp-progress { position: fixed; z-index: 69; top: calc(var(--safe-t) + 27px); left: 50%; transform: translateX(-50%); display: flex; gap: 7px; transition: opacity .4s; }
.bp-progress i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); opacity: .2; transition: all .4s; }
.bp-progress i.is-done { background: var(--accent); opacity: .55; }
.bp-progress i.is-on { background: var(--accent); opacity: 1; transform: scale(1.35); }
body[data-screen='unlock'] .bp-progress { opacity: 0; }

/* ----------------------------------------------------------- screens */
.bp-stage { position: relative; z-index: 3; min-height: 100vh; min-height: 100svh; }
.bp-screen {
  display: none; position: relative;
  min-height: 100vh; min-height: 100svh; width: 100%;
  padding: calc(var(--safe-t) + 68px) 18px calc(var(--safe-b) + 34px);
  flex-direction: column; align-items: center; justify-content: center;
}
.js .bp-screen.is-active { display: flex; animation: bpScreenIn .75s cubic-bezier(.2, .8, .2, 1) both; }
.js .bp-screen.is-leaving { display: flex; position: absolute; inset: 0 0 auto 0; animation: bpScreenOut .5s ease both; pointer-events: none; }
.bp-screen--scroll { justify-content: flex-start; }
html:not(.js) .bp-screen { display: flex; }
@keyframes bpScreenIn { from { opacity: 0; transform: translateY(26px) scale(.97); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes bpScreenOut { to { opacity: 0; transform: translateY(-18px) scale(1.03); filter: blur(4px); } }

/* -------------------------------------------------------- components */
.bp-card { position: relative; background: var(--paper); border-radius: 30px; box-shadow: var(--shadow); }
.bp-wavy.has-wave { background: transparent; box-shadow: none; border-radius: 0; }
.bp-wave-edge { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; filter: drop-shadow(0 16px 22px rgba(91, 42, 60, .2)) drop-shadow(0 3px 5px rgba(91, 42, 60, .12)); }
.bp-wave-edge .fill { fill: var(--paper); stroke: var(--lav-deep); stroke-width: 3; }
.bp-wave-edge .dash { fill: none; stroke: var(--blush-deep); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.bp-wavy > *:not(.bp-wave-edge) { position: relative; z-index: 1; }

.bp-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 28px; border-radius: 999px; cursor: pointer; text-decoration: none;
  font: 900 16px/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  background: var(--accent); color: #fff !important; border: 2.5px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
  transition: transform .15s, box-shadow .15s, background .2s;
}
.bp-pill:hover { transform: translateY(-1px); }
.bp-pill:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.bp-pill--ghost { background: var(--paper); color: var(--ink) !important; }
.bp-link { background: none; border: 0; cursor: pointer; font: 700 18px var(--font-hand); color: var(--ink); text-decoration: underline wavy var(--blush-deep) 1.5px; text-underline-offset: 6px; padding: 10px 6px; }
.bp-actions { display: flex; flex-wrap: wrap; gap: 14px 18px; justify-content: center; align-items: center; margin-top: 26px; }
.bp-eyebrow { margin: 0 0 6px; font: 800 12px/1.2 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.bp-h1 { margin: 0; font: 900 clamp(38px, 9vw, 64px)/1 var(--font-head); font-variation-settings: 'SOFT' 100; color: var(--ink); }
.bp-h2 { margin: 0; font: 800 clamp(24px, 6vw, 34px)/1.15 var(--font-head); font-variation-settings: 'SOFT' 100; color: var(--ink); }
.bp-h2--hand { font-family: var(--font-hand); font-weight: 700; font-size: clamp(30px, 7.5vw, 42px); }
.bp-script { margin: 0; font: 400 clamp(26px, 6.5vw, 38px)/1 var(--font-script); color: var(--accent); }
.bp-deco { position: absolute; pointer-events: none; }
.bp-deco svg { width: 100%; height: auto; }

/* -------------------------------------------------- screen 1: unlock */
.bp-unlock__grid { display: grid; gap: 14px; width: min(100%, 1060px); align-items: center; justify-items: center; }
.bp-unlock__hero { display: flex; flex-direction: column; align-items: center; }
.bp-title { margin: 0; display: flex; flex-direction: column; align-items: center; line-height: .86; text-align: center; }
.bp-title__main {
  font: 900 clamp(66px, 19vw, 138px)/.86 var(--font-head); font-variation-settings: 'SOFT' 100, 'WONK' 1; letter-spacing: -.02em;
  color: var(--accent); text-shadow: 3px 3px 0 #fff, 7px 7px 0 var(--blush-deep);
}
.bp-title__script {
  margin-top: -.34em; font: 400 clamp(40px, 11vw, 76px)/1 var(--font-script); color: var(--ink);
  transform: rotate(-6deg) translateX(.5em); text-shadow: 0 0 6px #fff, 0 0 2px #fff, 2px 2px 0 #fff;
}
.bp-unlock__art { position: relative; width: min(74vw, 330px); aspect-ratio: 1.16; margin-top: 6px; }
.bp-frame { position: absolute; left: 0; top: 0; width: 80%; aspect-ratio: 1; animation: bpFloat 5.5s ease-in-out infinite; }
.bp-frame__art { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 14px 18px rgba(91, 42, 60, .25)); }
.bp-frame__hole { position: absolute; inset: 15.4%; border-radius: 50%; overflow: hidden; background: var(--cream); }
.bp-frame__photo { width: 100%; height: 100%; object-fit: cover; }
.bp-unlock__cat { position: absolute; right: -4%; bottom: -6%; width: 48%; animation: bpWobble 4.2s ease-in-out infinite; transform-origin: 50% 90%; }
.bp-cat { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 8px 10px rgba(91, 42, 60, .22)); }
.bp-deco--s1 { width: 30px; left: -4%; top: 6%; animation: bpTwinkle 2.6s ease-in-out infinite; }
.bp-deco--s2 { width: 30px; right: 10%; top: 2%; animation: bpFloat 4s ease-in-out infinite reverse; }
.bp-deco--s3 { width: 22px; left: 6%; bottom: 2%; animation: bpTwinkle 3.2s ease-in-out .8s infinite; }

.bp-keypad { width: min(100%, 360px); padding: 26px 26px 22px; text-align: center; }
.bp-keypad__label { margin: 0 0 12px; font: 700 28px/1 var(--font-hand); color: var(--ink); }
.bp-boxes { display: flex; justify-content: center; gap: 12px; }
.bp-box {
  position: relative; width: 50px; height: 56px; border-radius: 15px; background: var(--lav-light);
  border: 2.5px solid var(--lav-deep); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .7); transition: background .25s, border-color .25s;
}
.bp-box.is-filled::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.2s-7.6-4.6-10-9.4C0.3 8.2 2.2 3.8 6.4 3.8c2.5 0 4.1 1.4 5.6 3.4 1.5-2 3.1-3.4 5.6-3.4 4.2 0 6.1 4.4 4.4 8-2.4 4.8-10 9.4-10 9.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.2s-7.6-4.6-10-9.4C0.3 8.2 2.2 3.8 6.4 3.8c2.5 0 4.1 1.4 5.6 3.4 1.5-2 3.1-3.4 5.6-3.4 4.2 0 6.1 4.4 4.4 8-2.4 4.8-10 9.4-10 9.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation: bpPopIn .35s cubic-bezier(.3, 1.8, .5, 1);
}
.bp-boxes.is-wrong { animation: bpShake .55s cubic-bezier(.36, .07, .19, .97); }
.bp-boxes.is-wrong .bp-box { border-color: var(--accent); background: var(--blush); }
.bp-boxes.is-right .bp-box { background: var(--accent); border-color: var(--ink); }
.bp-boxes.is-right .bp-box::after { background: #fff; animation: bpHeartbeat .6s ease both; }
.bp-keypad__msg { min-height: 1.5em; margin: 10px 0 6px; font: 700 20px/1.25 var(--font-hand); color: var(--accent); }
.bp-keys { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 11px 16px; }
.bp-key {
  width: clamp(58px, 16vw, 66px); aspect-ratio: 1; border-radius: 50%; cursor: pointer; padding: 0;
  font: 800 25px/1 var(--font-ui); color: var(--ink); background: var(--paper);
  border: 2.5px solid var(--lav-deep); box-shadow: 0 4px 0 var(--lav-deep); transition: transform .12s, box-shadow .12s, background .2s;
  touch-action: manipulation;
}
.bp-key:active, .bp-key.is-pop { transform: translateY(3px) scale(.94); box-shadow: 0 1px 0 var(--lav-deep); background: var(--blush); }
.bp-key--soft { font-size: 14px; letter-spacing: .04em; text-transform: lowercase; color: var(--ink-soft); }
.bp-key--soft[data-key='back'] { font-size: 22px; }
.bp-enter { width: 100%; margin-top: 18px; }
.bp-enter.is-ready { animation: bpPulse 1.1s ease-in-out infinite; }
.bp-hint { margin: 14px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; font: 600 18px/1.2 var(--font-hand); color: var(--ink-soft); }
.bp-hint svg { width: 16px; height: 16px; flex: none; }
.bp-hint.is-pulse { animation: bpPopIn .5s ease; color: var(--accent); }

/* ------------------------------------------------ screen 2: question */
.bp-q { width: min(100%, 560px); text-align: center; }
.bp-q__cardwrap { position: relative; }
.bp-q__bunny { position: relative; z-index: 2; width: min(58%, 240px); margin: 0 auto -16px; animation: bpPeek 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
.bp-bunny { width: 100%; height: auto; overflow: visible; }
.bp-bunny__happy { display: none; }
.bp-question.is-happy .bp-bunny__eyes { display: none; }
.bp-question.is-happy .bp-bunny__happy { display: inline; }
.bp-question.is-happy .bp-bunny__ears { animation: bpWiggle .4s ease-in-out 3; transform-origin: 50% 100%; transform-box: fill-box; }
.bp-q__card { z-index: 1; }
.bp-q__text { margin: 0; padding: 40px 30px 36px; font: 800 clamp(27px, 6.8vw, 40px)/1.14 var(--font-head); font-variation-settings: 'SOFT' 100; color: var(--ink); }
.bp-q__nudge { min-height: 1.4em; margin: 14px 0 0; font: 700 21px/1.2 var(--font-hand); color: var(--accent); }
.bp-q__buttons { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 18px; min-height: 120px; }
.bp-yes { transform: scale(var(--grow, 1)); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); min-width: 120px; }
.bp-yes:active { transform: scale(var(--grow, 1)) translateY(4px); }
.bp-no { min-width: 110px; transform: scale(var(--shrink, 1)); transition: transform .35s ease; }
.bp-q__no { display: flex; flex-direction: column; align-items: center; animation: bpScreenIn .6s cubic-bezier(.2, .8, .2, 1) both; }
.bp-q__nohead { margin: 0; font: 900 clamp(32px, 8.4vw, 56px)/1.05 var(--font-head); font-variation-settings: 'SOFT' 100; color: var(--accent); text-shadow: 3px 3px 0 #fff; animation: bpWobble 2.4s ease-in-out infinite; }
.bp-again { margin: 22px 0 6px; }
.bp-q__duo { width: min(92vw, 440px); margin-top: 8px; }
.bp-duo { width: 100%; height: auto; overflow: visible; }
.bp-duo__bear { animation: bpHuff 1.4s ease-in-out infinite; transform-origin: 130px 290px; }
.bp-duo__bunny { animation: bpSob .5s ease-in-out infinite alternate; transform-origin: 300px 290px; }
.bp-duo__vein { animation: bpPopIn 1s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.bp-duo__tears path { stroke-dasharray: 60; animation: bpTears 1.2s linear infinite; }

/* ------------------------------------------------ screen 3: envelope */
.bp-scene { width: min(100%, 600px); display: flex; flex-direction: column; align-items: center; }
.bp-env {
  position: relative; width: min(86vw, 430px); aspect-ratio: 400 / 276; cursor: pointer; perspective: 1100px;
  animation: bpBob 3.4s ease-in-out infinite; filter: drop-shadow(0 22px 24px rgba(91, 42, 60, .24));
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
.bp-env__back { position: absolute; inset: 0; border-radius: 12px; background: var(--env-in); }
.bp-env__paper {
  position: absolute; left: 7%; right: 7%; top: 7%; height: 84%; z-index: 1; border-radius: 6px; padding: 14% 9%;
  background: var(--paper); box-shadow: 0 -2px 8px rgba(91, 42, 60, .1); transition: transform 1.1s cubic-bezier(.3, .1, .2, 1);
}
.bp-env__paper i { display: block; height: 4px; border-radius: 4px; background: var(--blush); margin-bottom: 12%; opacity: .8; }
.bp-env__paper i:nth-child(2) { width: 78%; } .bp-env__paper i:nth-child(3) { width: 56%; }
.bp-env__front { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; border-radius: 12px; overflow: hidden; }
.bp-env__to { position: absolute; z-index: 3; left: 0; right: 0; bottom: 13%; margin: 0; text-align: center; font: 700 clamp(22px, 6vw, 30px)/1 var(--font-hand); color: var(--ink); }
.bp-env__stamp { position: absolute; z-index: 3; right: 5%; bottom: 9%; width: 12%; transform: rotate(6deg); }
.bp-stamp { width: 100%; height: auto; filter: drop-shadow(0 2px 2px rgba(91, 42, 60, .18)); }
.bp-env__flap {
  position: absolute; left: 0; right: 0; top: 0; height: 69%; z-index: 4; transform-origin: 50% 0; transform-style: preserve-3d;
  transition: transform .95s cubic-bezier(.45, .05, .3, 1), z-index 0s linear .45s;
}
.bp-env__flapart { width: 100%; height: 100%; filter: drop-shadow(0 4px 4px rgba(91, 42, 60, .12)); }
.bp-env__seal { position: absolute; z-index: 5; left: 50%; top: 69%; width: 19%; transform: translate(-50%, -64%); transition: opacity .3s .5s; }
.bp-seal { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 4px 4px rgba(91, 42, 60, .3)); }
.bp-seal__half { transform-box: fill-box; transform-origin: center; transition: transform .7s cubic-bezier(.3, .1, .3, 1), opacity .7s; }
.bp-env.is-cracked { animation: none; }
.bp-env.is-cracked .bp-seal__l { transform: translate(-16px, 26px) rotate(-26deg); opacity: 0; }
.bp-env.is-cracked .bp-seal__r { transform: translate(16px, 30px) rotate(22deg); opacity: 0; }
.bp-env.is-open .bp-env__flap { transform: rotateX(180deg); z-index: 0; }
.bp-env.is-rising .bp-env__paper { transform: translateY(-64%); }
.bp-env.is-away { animation: bpEnvAway .75s cubic-bezier(.5, 0, .7, .4) forwards; }
.bp-env__hint { margin: 22px 0 0; font: 700 23px/1 var(--font-hand); color: var(--ink); animation: bpPulse 1.6s ease-in-out infinite; }
.bp-env.is-cracked + .bp-env__hint { opacity: 0; transition: opacity .3s; }
@keyframes bpEnvAway { to { transform: translateY(70px) scale(.82); opacity: 0; } }

.bp-letter { display: none; position: relative; width: min(94vw, 580px); perspective: 1400px; }
.bp-letterscreen.is-reading .bp-env, .bp-letterscreen.is-reading .bp-env__hint { display: none; }
.bp-letterscreen.is-reading .bp-letter { display: block; animation: bpLetterUp .6s cubic-bezier(.2, .8, .2, 1) both; }
.bp-letter__actions { visibility: hidden; opacity: 0; transition: opacity .5s; }
.bp-letterscreen.is-done .bp-letter__actions { visibility: visible; opacity: 1; }
.bp-letter__folds { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; pointer-events: none; transform-style: preserve-3d; }
.bp-fold { flex: 1; background: var(--paper); box-shadow: inset 0 0 0 1px rgba(91, 42, 60, .06); backface-visibility: hidden; }
.bp-fold--a { transform-origin: 50% 100%; border-radius: 10px 10px 0 0; }
.bp-fold--c { transform-origin: 50% 0; border-radius: 0 0 10px 10px; }
.bp-fold--b { background: linear-gradient(var(--paper), color-mix(in srgb, var(--paper) 94%, var(--ink))); }
.bp-letterscreen.is-reading .bp-fold--a { animation: bpUnfoldTop .8s cubic-bezier(.3, .1, .2, 1) .15s both; }
.bp-letterscreen.is-reading .bp-fold--c { animation: bpUnfoldBot .8s cubic-bezier(.3, .1, .2, 1) .75s both; }
.bp-letterscreen.is-reading .bp-letter__folds { animation: bpFade .45s ease 1.55s forwards; }
.bp-letter__body {
  position: relative; z-index: 1; border-radius: 10px; padding: 38px clamp(22px, 6vw, 46px) 34px;
  max-height: calc(100svh - 230px); overflow: auto; overscroll-behavior: contain;
  background:
    linear-gradient(90deg, transparent 0, transparent calc(clamp(22px, 6vw, 46px) - 12px), var(--blush) calc(clamp(22px, 6vw, 46px) - 12px), var(--blush) calc(clamp(22px, 6vw, 46px) - 10px), transparent 0),
    repeating-linear-gradient(180deg, transparent 0, transparent 33px, color-mix(in srgb, var(--lavender) 70%, transparent) 33px, color-mix(in srgb, var(--lavender) 70%, transparent) 34.5px),
    var(--paper);
  background-position: 0 0, 0 26px, 0 0;
  box-shadow: var(--shadow);
}
.bp-letter__tape { position: absolute; top: -12px; left: 50%; width: 110px; height: 28px; margin-left: -55px; transform: rotate(-3deg); background: color-mix(in srgb, var(--lavender) 80%, transparent); clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 16% 10%, 20% 0, 80% 0, 84% 10%, 88% 0, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 100%, 84% 90%, 80% 100%, 20% 100%, 16% 90%, 12% 100%, 8% 90%, 4% 100%, 0 92%); }
.bp-letter__sticker { position: absolute; right: 14px; top: 14px; width: 44px; transform: rotate(14deg); }
.bp-letter__sticker svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 3px 3px rgba(91, 42, 60, .2)); }
.bp-letter__greet { margin: 0 0 6px; font: 400 clamp(36px, 9vw, 50px)/1.1 var(--font-script); color: var(--accent); }
.bp-letter__text p { margin: 0 0 17px; font: 600 clamp(21px, 5.2vw, 25px)/34.5px var(--font-hand); color: var(--ink); }
.bp-letter__signoff { margin: 16px 0 0; font: 600 23px/34.5px var(--font-hand); color: var(--ink); }
.bp-letter__sig { position: relative; display: inline-block; margin: 2px 0 0; font: 400 clamp(38px, 9vw, 52px)/1.1 var(--font-script); color: var(--accent); }
.bp-swash { position: absolute; left: -4%; right: -4%; bottom: -8px; width: 108%; height: 20px; overflow: visible; }
.bp-swash path { stroke-dasharray: 300; stroke-dashoffset: 300; }
.bp-letterscreen.is-signed .bp-swash path { transition: stroke-dashoffset 1.2s ease; stroke-dashoffset: 0; }
.bp-letterscreen:not(.is-signed) .bp-letter__sig > span { opacity: 0; }
.bp-letter__sig > span { transition: opacity .8s; }
.bp-caret { display: inline-block; width: 2px; height: .95em; margin-left: 2px; vertical-align: -.1em; background: currentColor; animation: bpBlink .8s steps(1) infinite; }
@keyframes bpUnfoldTop { from { transform: rotateX(-178deg); } to { transform: rotateX(0); } }
@keyframes bpUnfoldBot { from { transform: rotateX(178deg); } to { transform: rotateX(0); } }
@keyframes bpLetterUp { from { transform: translateY(60px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bpFade { to { opacity: 0; visibility: hidden; } }

/* ------------------------------------------- screens 4 & 5: audio */
.bp-voice, .bp-song { width: min(100%, 450px); padding: 34px 28px 28px; text-align: center; }
.bp-cassette-wrap { position: relative; margin: 18px auto 10px; width: min(100%, 330px); animation: bpFloat 5s ease-in-out infinite; }
.bp-cassette { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 12px 14px rgba(91, 42, 60, .24)); }
.bp-cassette__label { position: absolute; left: 13%; right: 13%; top: 17%; font: 700 clamp(16px, 4.6vw, 21px)/1 var(--font-hand); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-reel { transform-box: fill-box; transform-origin: center; animation: bpSpin 2.2s linear infinite paused; }
.is-playing .bp-reel { animation-play-state: running; }
.bp-wave { display: flex; justify-content: center; align-items: center; gap: 4px; height: 50px; margin: 6px 0 2px; }
.bp-wave i { width: 5px; border-radius: 4px; background: var(--accent); height: calc(10% + var(--h, 0) * 90%); opacity: .85; transition: height .09s linear; }
.bp-wave i:nth-child(3n) { background: var(--lav-deep); }
.bp-wave i:nth-child(4n+1) { background: var(--blush-deep); }
.bp-ctrl { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.bp-play {
  flex: none; width: 60px; height: 60px; border-radius: 50%; cursor: pointer; padding: 0; display: grid; place-items: center;
  background: var(--accent); border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); transition: transform .12s, box-shadow .12s;
}
.bp-play:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.bp-play svg { width: 26px; height: 26px; fill: #fff; }
.bp-play .i-pause, .is-playing .bp-play .i-play { display: none; }
.is-playing .bp-play .i-pause { display: block; }
.bp-track { position: relative; flex: 1; height: 12px; border-radius: 8px; background: var(--lav-light); border: 2px solid var(--lav-deep); }
.bp-track__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%); border-radius: 8px; background: linear-gradient(90deg, var(--blush-deep), var(--accent)); pointer-events: none; }
.bp-track__fill::after { content: ''; position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #fff; border: 2.5px solid var(--accent); }
.bp-seek { position: absolute; inset: -14px 0; width: 100%; height: calc(100% + 28px); margin: 0; opacity: 0; cursor: pointer; }
.bp-seek:focus-visible + .bp-track__fill { box-shadow: 0 0 0 3px var(--accent); }
.bp-time { flex: none; min-width: 42px; font: 800 14px var(--font-ui); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.bp-ctrl.is-loop .bp-track, .bp-ctrl.is-loop .bp-time { opacity: .55; }

.bp-player-wrap { position: relative; width: min(100%, 330px); margin: 14px auto 6px; }
.bp-player { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 14px 16px rgba(91, 42, 60, .25)); }
.bp-record { transform-box: fill-box; transform-origin: center; animation: bpSpin 3.4s linear infinite paused; }
.is-playing .bp-record { animation-play-state: running; }
.bp-arm { transform-box: view-box; transform-origin: 286px 50px; transform: rotate(-5deg); transition: transform .9s cubic-bezier(.4, .1, .3, 1); }
.is-playing .bp-arm { transform: rotate(14deg); }
.bp-notes-fly { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.bp-notefly { position: absolute; left: var(--x); top: 40%; font: 900 var(--s, 26px)/1 var(--font-ui); color: var(--c, var(--accent)); animation: bpNoteUp 2.6s ease-out forwards; text-shadow: 0 2px 0 #fff; }
@keyframes bpNoteUp { 0% { transform: translate(0, 0) rotate(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx, 20px), -140px) rotate(var(--r, 20deg)) scale(1.1); opacity: 0; } }
.bp-song__title { margin: 8px 0 2px; font: 900 clamp(26px, 6.6vw, 34px)/1.1 var(--font-head); font-variation-settings: 'SOFT' 100; color: var(--ink); }
.bp-song__artist { margin: 0; font: 600 22px/1.2 var(--font-hand); color: var(--ink-soft); }
.bp-song__tip { margin: 12px 0 0; font: 600 18px/1.2 var(--font-hand); color: var(--ink-soft); }

.bp-mini {
  position: fixed; z-index: 70; right: 14px; bottom: calc(var(--safe-b) + 14px); width: 54px; height: 54px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink); background: #2E2233; display: grid; place-items: center;
}
.bp-mini__disc { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, var(--cream) 0 3px, var(--accent) 4px 11px, transparent 12px), repeating-radial-gradient(circle, #2E2233 0 2px, #463650 3px 4px); animation: bpSpin 3s linear infinite; }
.bp-mini.is-paused .bp-mini__disc { animation-play-state: paused; opacity: .7; }
.bp-mini.is-paused::after { content: '▶'; position: absolute; color: #fff; font-size: 14px; }

/* --------------------------------------------- screen 6: scrapbook */
.bp-book {
  position: relative; width: min(100%, 1100px); border-radius: 24px; padding: 40px 16px 44px;
  background: radial-gradient(circle, color-mix(in srgb, var(--lavender) 55%, transparent) 1.2px, transparent 1.6px) 0 0 / 22px 22px, var(--paper);
  box-shadow: var(--shadow);
}
.bp-book::before { content: ''; position: absolute; inset: 10px; border: 2px dashed color-mix(in srgb, var(--blush-deep) 70%, transparent); border-radius: 18px; pointer-events: none; }
.bp-book__rings { display: none; }
.bp-book__head { text-align: center; margin-bottom: 18px; }
.bp-book__head .bp-script { transform: rotate(-3deg); }
.bp-book__part + .bp-book__part, .bp-book__pair { margin-top: 44px; }
.bp-book__tip { margin: 22px 0 0; text-align: center; font: 600 18px/1.3 var(--font-hand); color: var(--ink-soft); }
.bp-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; padding: 18px 4px 4px; }
.bp-pola { position: relative; margin: 0; transform: rotate(var(--tilt)); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.bp-pola:hover { transform: rotate(0) scale(1.03); z-index: 4; }
.bp-pola__flip { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1000px; -webkit-touch-callout: none; }
.bp-pola__inner { position: relative; display: block; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.3, .1, .2, 1); }
.bp-pola.is-flipped .bp-pola__inner { transform: rotateY(180deg); }
.bp-pola__front, .bp-pola__back { display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; border-radius: 3px; box-shadow: 0 14px 22px -12px rgba(91, 42, 60, .45), 0 2px 4px rgba(91, 42, 60, .12); }
.bp-pola__front { padding: 8px 8px 0; }
.bp-pola__img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--lav-light); border-radius: 2px; }
.bp-pola__img img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.bp-pola__cap { display: block; min-height: 2.3em; padding: 8px 4px 10px; text-align: center; font: 700 clamp(17px, 4.4vw, 22px)/1.1 var(--font-hand); color: var(--ink); overflow-wrap: anywhere; }
.bp-pola__back {
  position: absolute; inset: 0; transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 16px 14px; text-align: center;
  background: repeating-linear-gradient(180deg, transparent 0 27px, color-mix(in srgb, var(--blush) 80%, transparent) 27px 28px), var(--cream);
}
.bp-pola__secret { font: 700 clamp(18px, 4.6vw, 23px)/1.2 var(--font-hand); color: var(--ink); overflow-wrap: anywhere; }
.bp-pola__turn { font: 800 11px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.bp-pola__zoom { position: absolute; z-index: 3; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); background: rgba(255, 255, 255, .92); padding: 0; cursor: pointer; display: grid; place-items: center; }
.bp-pola__zoom svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; }
.bp-pola.is-flipped .bp-pola__zoom { opacity: 0; pointer-events: none; }
.bp-pola.is-dragging { z-index: 30; transition: none; transform: translate3d(var(--dx, 0), var(--dy, 0), 0) rotate(0) scale(1.07); }
.bp-pola.is-dragging .bp-pola__front { box-shadow: 0 30px 40px -16px rgba(91, 42, 60, .55); }
.bp-pola.is-target { transform: rotate(0) scale(.95); }
.bp-pola.is-target::after { content: ''; position: absolute; inset: -8px; border: 3px dashed var(--accent); border-radius: 10px; }
.bp-pola.is-lifting { transform: rotate(0) scale(1.05); }

.bp-tape { position: absolute; z-index: 2; top: -13px; left: 50%; width: 46%; height: 26px; transform: translateX(-50%) rotate(-5deg); opacity: .88;
  clip-path: polygon(0 10%, 5% 0, 10% 10%, 15% 0, 85% 0, 90% 10%, 95% 0, 100% 10%, 100% 90%, 95% 100%, 90% 90%, 85% 100%, 15% 100%, 10% 90%, 5% 100%, 0 90%); }
.bp-pola:nth-child(even) .bp-tape { transform: translateX(-50%) rotate(6deg); }
.bp-tape--blush { background: repeating-linear-gradient(45deg, var(--blush) 0 8px, color-mix(in srgb, var(--blush) 60%, #fff) 8px 14px); }
.bp-tape--lav { background: radial-gradient(circle, #fff 2px, transparent 2.5px) 0 0 / 11px 11px, var(--lavender); }
.bp-tape--peach { background: repeating-linear-gradient(90deg, var(--peach) 0 10px, color-mix(in srgb, var(--peach) 55%, #fff) 10px 20px); }
.bp-tape--acc { background: radial-gradient(circle, color-mix(in srgb, #fff 70%, var(--accent)) 2px, transparent 2.5px) 0 0 / 10px 10px, color-mix(in srgb, var(--accent) 55%, var(--blush)); }

.bp-pola__deco { position: absolute; z-index: 4; pointer-events: none; }
.bp-pola__deco svg { width: 100%; height: auto; overflow: visible; }
.bp-sticker { filter: drop-shadow(0 3px 3px rgba(91, 42, 60, .22)); }
.bp-doodle path { vector-effect: non-scaling-stroke; }
.bp-pola__deco--fav { bottom: -46px; right: -4px; top: auto; width: 120px; display: flex; flex-direction: column; align-items: flex-end; transform: rotate(6deg); }
.bp-pola__deco--fav span { font: 700 20px/1 var(--font-hand); color: var(--accent); white-space: nowrap; }
.bp-pola__deco--fav svg { width: 46px; transform: rotate(-150deg); margin-right: 26px; order: -1; }
.bp-pola__deco--sticker { width: 54px; left: -14px; bottom: 30px; transform: rotate(-14deg); }
.bp-pola__deco--doodle { width: 50px; right: -8px; bottom: -14px; }
.bp-pola__deco--sticker2 { width: 46px; right: -12px; top: 30%; transform: rotate(12deg); }
.bp-pola__deco--doodle2 { width: 30px; left: -12px; top: -8px; }
.bp-pola__deco--doodle3 { width: 26px; right: 2px; bottom: 34px; }

.bp-book__pair { display: grid; gap: 44px; }
.bp-sticky { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
.bp-note { opacity: 0; transform: scale(.3) rotate(var(--tilt)); }
.bp-note.is-in { animation: bpNotePop .6s cubic-bezier(.3, 1.7, .5, 1) calc(var(--i) * .14s) forwards; }
.bp-note__btn {
  position: relative; display: block; width: 100%; min-height: 128px; padding: 28px 12px 16px; border: 0; cursor: pointer; text-align: center;
  font: 700 clamp(18px, 4.6vw, 22px)/1.15 var(--font-hand); color: var(--ink); border-radius: 3px 3px 3px 18px;
  box-shadow: 0 12px 16px -10px rgba(91, 42, 60, .4), inset 0 -10px 18px -14px rgba(91, 42, 60, .35);
}
.bp-note__btn.is-wiggle { animation: bpWiggle .5s ease; }
.bp-note--blush .bp-note__btn { background: var(--blush); }
.bp-note--cream .bp-note__btn { background: color-mix(in srgb, var(--cream) 70%, var(--gold)); }
.bp-note--lav .bp-note__btn { background: var(--lavender); }
.bp-note--peach .bp-note__btn { background: var(--peach); }
.bp-note__pin { position: absolute; top: 8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 2px, var(--accent) 3px); box-shadow: 0 3px 3px rgba(91, 42, 60, .35); }
.bp-lovenotes { text-align: center; }

.bp-lined {
  position: relative; max-width: 680px; margin: 0 auto; padding: 38px 22px 30px 56px; border-radius: 6px; transform: rotate(-.6deg);
  background:
    linear-gradient(90deg, transparent 40px, var(--blush-deep) 40px, var(--blush-deep) 42px, transparent 42px),
    repeating-linear-gradient(180deg, transparent 0 33px, color-mix(in srgb, var(--lavender) 75%, transparent) 33px 34.5px),
    #fff;
  background-position: 0 0, 0 20px, 0 0;
  box-shadow: 0 16px 24px -16px rgba(91, 42, 60, .4);
}
.bp-lined__tape { top: -12px; width: 120px; }
.bp-lined .bp-h2 { margin-bottom: 8px; }
.bp-reasons__list { list-style: none; margin: 0; padding: 0; }
.bp-reasons__list li { display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: start; margin-bottom: 12px; font: 600 clamp(19px, 4.8vw, 23px)/34.5px var(--font-hand); color: var(--ink); opacity: 0; transform: translateX(-10px); transition: opacity .5s calc(var(--i) * .16s), transform .5s calc(var(--i) * .16s); }
.bp-reasons.is-in .bp-reasons__list li { opacity: 1; transform: none; }
.bp-reasons__n { position: relative; width: 30px; height: 30px; margin-top: 3px; }
.bp-reasons__n svg { width: 100%; height: 100%; }
.bp-reasons__n b { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 2px; font: 900 12px var(--font-ui); color: #fff; }
.bp-lined__doodle { position: absolute; right: 16px; bottom: 10px; width: 54px; opacity: .6; }

/* ------------------------------------------------ screen 7: finale */
.bp-finale { overflow: hidden; }
.bp-finale__inner { position: relative; z-index: 2; width: min(100%, 760px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.bp-finale__title {
  margin: 0; min-height: 1.9em; font: 900 clamp(46px, 12.5vw, 108px)/.98 var(--font-head); font-variation-settings: 'SOFT' 100, 'WONK' 1;
  color: var(--accent); text-shadow: 3px 3px 0 #fff, 7px 7px 0 var(--blush-deep); overflow-wrap: anywhere;
}
.bp-finale__line { margin: 14px 0 0; font: 700 clamp(22px, 5.6vw, 30px)/1.2 var(--font-hand); color: var(--ink); }
.bp-countdown { margin-top: 20px; }
.bp-countdown__label { margin: 0 0 8px; font: 800 12px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.bp-countdown__chips { display: flex; gap: 10px; justify-content: center; }
.bp-countdown__chips span { min-width: 66px; padding: 10px 8px 8px; border-radius: 18px; background: var(--paper); border: 2.5px solid var(--lav-deep); box-shadow: 0 4px 0 var(--lav-deep); font: 800 12px var(--font-ui); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; }
.bp-countdown__chips b { display: block; font: 900 28px/1.05 var(--font-head); color: var(--accent); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.bp-countdown__today { margin: 6px 0 0; font: 700 28px var(--font-hand); color: var(--accent); }
.bp-cakewrap { margin-top: 18px; display: flex; flex-direction: column; align-items: center; }
.bp-cake__hint { margin: 0 0 6px; font: 700 21px/1.25 var(--font-hand); color: var(--ink); }
.bp-cake { width: min(76vw, 330px); height: auto; overflow: visible; filter: drop-shadow(0 16px 18px rgba(91, 42, 60, .25)); }
.bp-candle { cursor: pointer; outline: none; }
.bp-candle:focus-visible rect:nth-of-type(2) { stroke: var(--accent); stroke-width: 4; }
.bp-flame { animation: bpFlicker 1.1s ease-in-out infinite alternate; transition: transform .35s ease, opacity .35s ease; }
.bp-candle:nth-child(odd) .bp-flame { animation-duration: .9s; }
.bp-candle.is-out .bp-flame { animation: none; transform: scale(0, .2); opacity: 0; }
.bp-smoke { opacity: 0; }
.bp-candle.is-out .bp-smoke circle { animation: bpSmoke 1.6s ease-out forwards; transform-box: fill-box; transform-origin: center; }
.bp-candle.is-out .bp-smoke circle:nth-child(2) { animation-delay: .15s; } .bp-candle.is-out .bp-smoke circle:nth-child(3) { animation-delay: .3s; }
.bp-candle.is-out .bp-smoke { opacity: 1; }
.bp-cake__done { min-height: 1.3em; margin: 10px 0 0; font: 700 27px/1.2 var(--font-hand); color: var(--accent); }
.bp-finale__actions { margin-top: 22px; }
.bp-pill--wa { background: #1FAF5B; }
.bp-brand { margin-top: 26px; }
.bp-brand a { font: 700 13px var(--font-ui); letter-spacing: .06em; color: var(--ink-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .6); }
.bp-brand svg { width: 13px; height: 13px; }
.bp-risers { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.bp-riser { position: absolute; top: 100%; left: var(--x); width: var(--w); animation: bpRise var(--d) cubic-bezier(.35, .1, .55, 1) var(--delay) forwards; }
.bp-riser .bp-balloon { width: 100%; height: auto; animation: bpSway 2.6s ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes bpRise { to { transform: translate3d(var(--dx, 0), calc(-100svh - 260px), 0); } }

/* --------------------------------------------------------- lightbox */
.bp-lightbox { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: calc(var(--safe-t) + 56px) 12px calc(var(--safe-b) + 56px); background: rgba(43, 18, 32, .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: bpFadeIn .25s ease; touch-action: pan-y; }
.bp-lightbox__fig { margin: 0; max-width: min(92vw, 540px); background: #fff; padding: 12px 12px 10px; border-radius: 4px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); transform: rotate(-1deg); animation: bpPopIn .35s cubic-bezier(.3, 1.4, .5, 1); }
.bp-lightbox__fig img { width: 100%; max-height: calc(100svh - 270px); object-fit: contain; background: var(--lav-light); }
.bp-lightbox__fig figcaption { display: flex; flex-direction: column; gap: 4px; padding: 10px 6px 4px; text-align: center; }
.bp-lightbox__cap { font: 700 24px/1.15 var(--font-hand); color: var(--ink); }
.bp-lightbox__back { font: 600 19px/1.2 var(--font-hand); color: var(--ink-soft); }
.bp-lightbox__close, .bp-lightbox__nav { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fff; background: rgba(255, 255, 255, .16); color: #fff; font: 700 26px/1 var(--font-ui); cursor: pointer; display: grid; place-items: center; }
.bp-lightbox__close { top: calc(var(--safe-t) + 12px); right: 12px; font-size: 18px; }
.bp-lightbox__prev { left: 10px; } .bp-lightbox__next { right: 10px; }
.bp-lightbox__count { position: absolute; bottom: calc(var(--safe-b) + 16px); left: 0; right: 0; margin: 0; text-align: center; font: 800 13px var(--font-ui); letter-spacing: .2em; color: #fff; }

/* ------------------------------------------------------ preview bar */
.bp-previewbar { position: fixed; z-index: 75; left: 50%; bottom: calc(var(--safe-b) + 10px); transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; width: max-content; max-width: calc(100vw - 20px); padding: 8px 10px; border-radius: 22px; background: rgba(255, 255, 255, .9); border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); font: 700 12px var(--font-ui); }
.bp-previewbar__tag { background: var(--accent); color: #fff; padding: 4px 9px; border-radius: 999px; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; }
.bp-previewbar__note { color: var(--ink-soft); }
.bp-previewbar button { border: 1.5px solid var(--lav-deep); background: var(--paper); border-radius: 999px; padding: 4px 9px; cursor: pointer; font: 800 11px var(--font-ui); color: var(--ink); }
.bp-previewbar button.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.bp--mini .bp-screen { padding-bottom: calc(var(--safe-b) + 92px); }
.bp--preview .bp-mini { bottom: calc(var(--safe-b) + 84px); }
.bp--thumb .bp-controls, .bp--thumb .bp-mini, .bp--live .bp-controls { display: none; }

/* ------------------------------------------------------- keyframes */
@keyframes bpFloat { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1.5deg); } }
@keyframes bpBob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-9px) rotate(1deg); } }
@keyframes bpWobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes bpPeek { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes bpTwinkle { 0%, 100% { transform: scale(.7) rotate(0); opacity: .6; } 50% { transform: scale(1.15) rotate(25deg); opacity: 1; } }
@keyframes bpSpin { to { transform: rotate(360deg); } }
@keyframes bpShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(5px); } 30%, 50%, 70% { transform: translateX(-9px); } 40%, 60% { transform: translateX(9px); } }
@keyframes bpPopIn { 0% { transform: scale(.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes bpHeartbeat { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes bpPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes bpWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes bpHuff { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-2deg); } }
@keyframes bpSob { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-3px) rotate(1.5deg); } }
@keyframes bpTears { from { stroke-dashoffset: 60; } to { stroke-dashoffset: -60; } }
@keyframes bpNotePop { 0% { opacity: 0; transform: scale(.3) rotate(var(--tilt)); } 100% { opacity: 1; transform: scale(1) rotate(var(--tilt)); } }
@keyframes bpFlicker { 0% { transform: scale(1, 1) rotate(-2deg); } 50% { transform: scale(.94, 1.06) rotate(2deg); } 100% { transform: scale(1.04, .96) rotate(-1deg); } }
@keyframes bpSmoke { 0% { transform: translateY(0) scale(.6); opacity: .8; } 100% { transform: translateY(-40px) scale(2); opacity: 0; } }
@keyframes bpBlink { 50% { opacity: 0; } }
@keyframes bpFadeIn { from { opacity: 0; } }

/* ------------------------------------------------------- responsive */
@media (min-width: 600px) {
  .bp-board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 26px; }
  .bp-sticky { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .bp-screen { padding-left: 32px; padding-right: 32px; }
  .bp-unlock__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 36px; }
  .bp-unlock__art { width: min(38vw, 380px); }
  .bp-book { padding: 52px 40px 52px 56px; }
  .bp-book__rings { display: block; position: absolute; left: 10px; top: 36px; bottom: 36px; width: 26px; background: radial-gradient(circle at 13px 13px, transparent 5px, var(--lav-deep) 5.5px 8px, transparent 8.5px) 0 0 / 26px 36px repeat-y; }
  .bp-book__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
  .bp-book__pair--one { grid-template-columns: minmax(0, 1fr); }
  .bp-book__pair .bp-sticky { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-book__pair--one .bp-sticky { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bp-book__pair > .bp-book__part + .bp-book__part { margin-top: 0; }
  .bp-q__buttons { gap: 30px; }
}
@media (min-width: 1100px) {
  .bp-q { width: min(100%, 640px); }
  .bp-q__text { font-size: 46px; padding: 48px 40px 44px; }
  .bp-q__bunny { width: 270px; }
  .bp-yes, .bp-no { min-height: 60px; font-size: 18px; padding: 0 36px; }
  .bp-voice, .bp-song { width: min(100%, 500px); }
  .bp-letter { width: min(94vw, 640px); }
  .bp-board { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 46px 34px; padding: 22px 16px 4px; }
  .bp-stripes { opacity: .9; background: repeating-linear-gradient(90deg, var(--blush) 0, var(--blush) 40px, var(--cream) 52px, var(--cream) 88px, var(--blush) 100px); }
  .bp-wash { opacity: .7; }
  .bp-unlock__grid { gap: 70px; }
}
@media (max-width: 767px) {
  .bp-unlock { padding-top: calc(var(--safe-t) + 54px); }
  .bp-unlock__grid { gap: 8px; }
  .bp-title__main { font-size: clamp(54px, 16vw, 92px); }
  .bp-title__script { font-size: clamp(34px, 9.5vw, 56px); }
  .bp-unlock__art { width: min(54vw, 236px); margin-top: 0; }
  .bp-keypad { padding: 20px 20px 18px; }
  .bp-keypad__label { font-size: 25px; margin-bottom: 10px; }
  .bp-box { width: 46px; height: 50px; }
  .bp-keypad__msg { margin: 6px 0 4px; font-size: 18px; }
  .bp-key { width: clamp(52px, 15vw, 60px); font-size: 23px; }
  .bp-keys { gap: 9px 16px; }
  .bp-key--soft { font-size: 13px; }
  .bp-key--soft[data-key='back'] { font-size: 21px; }
  .bp-enter { margin-top: 14px; min-height: 50px; }
}
@media (max-width: 380px) {
  .bp-key { width: 54px; font-size: 22px; }
  .bp-box { width: 44px; height: 50px; }
  .bp-keypad { padding: 22px 18px 18px; }
  .bp-q__buttons { gap: 12px; }
}
@media (max-height: 700px) and (max-width: 767px) {
  .bp-unlock__art { width: min(58vw, 250px); }
  .bp-title__main { font-size: clamp(54px, 15vw, 90px); }
  .bp-key { width: 52px; font-size: 21px; }
  .bp-keys { gap: 8px 14px; }
}

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bp:not(.bp--motion) *, .bp:not(.bp--motion) *::before, .bp:not(.bp--motion) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.bp--still *, .bp--still *::before, .bp--still *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
.bp--still .bp-stripes, .bp--still .bp-floaters { animation: none !important; }

.bp-pola:first-child { z-index: 5; }

/* =====================================================================
 * Round 2 — soft, elegant, vintage. Scoped to: the password page, the
 * envelope, the finale balloons, the background stripes. Everything else
 * (question, NO screen, players, scrapbook, hearts) is untouched.
 * ===================================================================== */
:root { --gold: #C9A24A; --gold-soft: #DCC28A; --gold-ink: #8C6A2B; --sage: #93A387; --lace: #FFFDF8; }
@supports (color: color-mix(in srgb, red, blue)) {
  :root { --gold-soft: color-mix(in srgb, #C9A24A 62%, var(--cream)); --lace: color-mix(in srgb, var(--cream) 22%, #fff); --sage: color-mix(in srgb, #8FA383 82%, var(--lavender)); }
}
.f-lace { fill: var(--lace); } .f-paper { fill: var(--paper); } .f-sage { fill: var(--sage); } .s-sage { stroke: var(--sage); } .s-paper { stroke: var(--paper); }
.f-linerdot { fill: #fff; opacity: .78; }

/* calmer background */
.bp-stripes { opacity: .5; }
@media (min-width: 1100px) { .bp-stripes { opacity: .55; } }
.bp-wash { opacity: .7; }

/* ---------- password page: typography ---------- */
.bp-title__orn { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--gold); font: 400 13px/1 var(--font-head); }
.bp-title__orn i { display: block; width: clamp(34px, 9vw, 64px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.bp-title__orn i:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.bp-title__main {
  font-weight: 600; font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 144; letter-spacing: .005em;
  font-size: clamp(60px, 16vw, 124px); color: var(--accent);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 14px 34px rgba(91, 42, 60, .14);
}
.bp-title__script { color: var(--ink); opacity: .9; text-shadow: 0 0 10px rgba(255, 255, 255, .95); transform: rotate(-5deg) translateX(.45em); }

/* ---------- password page: the cameo ---------- */
.bp-unlock__art { width: min(56vw, 250px); aspect-ratio: 1; margin-top: 2px; }
@media (min-width: 768px) { .bp-unlock__art { width: min(36vw, 360px); margin-top: 8px; } }
@media (max-width: 767px) and (max-height: 700px) { .bp-unlock__art { width: min(44vw, 196px); } }
.bp-frame { position: absolute; inset: 0; width: 100%; aspect-ratio: 1; animation: bpCameoFloat 6.5s ease-in-out infinite; will-change: transform; }
.bp-frame__hole { position: absolute; inset: 15.3%; border-radius: 50%; overflow: hidden; background: var(--lace); box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .35), inset 0 6px 18px rgba(91, 42, 60, .12); isolation: isolate; }
.bp-frame__photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; transform: translateZ(0); }
.bp-cameo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 14px 22px rgba(91, 42, 60, .16)) drop-shadow(0 2px 3px rgba(140, 106, 43, .18)); }
.bp-frame__glint {
  position: absolute; inset: 4%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: .7;
  background: conic-gradient(from 0deg, transparent 0 72%, rgba(255, 246, 214, .0) 74%, rgba(255, 248, 225, .95) 79%, rgba(255, 246, 214, 0) 84%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 69%, #000 71% 96%, transparent 98%);
          mask: radial-gradient(circle, transparent 0 69%, #000 71% 96%, transparent 98%);
  animation: bpGlint 9s linear infinite; will-change: transform;
}
.bp-frame__empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 38%, #fff 0%, var(--lace) 45%, color-mix(in srgb, var(--blush) 38%, var(--lace)) 100%); }
.bp-frame__empty svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bp-frame__invite { position: relative; margin-top: -6%; text-align: center; font: 400 clamp(22px, 6.4vw, 30px)/1 var(--font-script); color: var(--gold-ink); }
.bp-frame__mono { position: relative; margin-top: -8%; font: 500 clamp(48px, 14vw, 68px)/1 var(--font-head); background: linear-gradient(160deg, #F4E2A6, #B98A3E 55%, #E9D08C); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bp-deco--s1, .bp-deco--s3 { width: 16px; opacity: .85; }
.bp-deco--s1 { left: -2%; top: 10%; } .bp-deco--s3 { right: 0; left: auto; bottom: 8%; }
@keyframes bpCameoFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -8px, 0); } }
@keyframes bpGlint { to { transform: rotate(360deg); } }

/* ---------- password page: a quieter keypad ---------- */
.bp-keypad .bp-wave-edge .fill { stroke: var(--gold-soft); stroke-width: 1.6; }
.bp-keypad .bp-wave-edge .dash { stroke: var(--gold-soft); stroke-width: 1; stroke-dasharray: 1 6; }
.bp-keypad .bp-wave-edge { filter: drop-shadow(0 18px 30px rgba(91, 42, 60, .14)) drop-shadow(0 2px 4px rgba(91, 42, 60, .08)); }
.bp-keypad__label { font: 800 12px/1.2 var(--font-ui); letter-spacing: .32em; text-transform: uppercase; color: var(--gold-ink); }
.bp-box { border: 1.5px solid var(--gold-soft); background: rgba(255, 255, 255, .7); border-radius: 13px; box-shadow: inset 0 2px 6px rgba(91, 42, 60, .06); }
.bp-boxes.is-wrong .bp-box { border-color: var(--accent); background: color-mix(in srgb, var(--blush) 50%, #fff); }
.bp-key {
  font: 500 24px/1 var(--font-head); color: var(--ink); background: rgba(255, 255, 255, .78);
  border: 1.5px solid var(--gold-soft); box-shadow: 0 2px 0 var(--gold-soft), 0 6px 14px -8px rgba(91, 42, 60, .3);
}
.bp-key:active, .bp-key.is-pop { box-shadow: 0 0 0 var(--gold-soft); background: color-mix(in srgb, var(--blush) 45%, #fff); }
.bp-key--soft { font: 800 11px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.bp-key--soft[data-key='back'] { font: 400 20px/1 var(--font-ui); letter-spacing: 0; }
.bp-enter { border-width: 1.5px; box-shadow: 0 3px 0 color-mix(in srgb, var(--ink) 70%, transparent); letter-spacing: .3em; font-size: 14px; }
.bp-hint { font-family: var(--font-head); font-style: italic; font-size: 15px; font-weight: 400; }

/* ---------- the envelope, redrawn ---------- */
.bp-env { animation: bpEnvBob 4.2s ease-in-out infinite; filter: drop-shadow(0 22px 26px rgba(91, 42, 60, .18)) drop-shadow(0 3px 5px rgba(91, 42, 60, .1)); }
@keyframes bpEnvBob { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-.6deg); } 50% { transform: translate3d(0, -6px, 0) rotate(.6deg); } }
.bp-env__back { background: radial-gradient(circle, rgba(255, 255, 255, .78) 1.6px, transparent 2.1px) 0 0 / 13px 13px, var(--blush); box-shadow: inset 0 0 0 5px var(--paper); }
.bp-env__front { border-radius: 10px; }
.bp-env__flap { height: 69%; }
.bp-flap__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bp-flap__face svg { width: 100%; height: 100%; display: block; }
.bp-flap__face--in { transform: rotateX(180deg); }
.bp-env__ribbonwrap { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.bp-env__ribbon { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 2px rgba(91, 42, 60, .15)); }
.bp-ribbon__l, .bp-ribbon__r { transform-box: fill-box; transition: transform .8s cubic-bezier(.4, .1, .3, 1), opacity .7s ease; }
.bp-env.is-cracked .bp-ribbon__l { transform: translateX(-34px); opacity: 0; }
.bp-env.is-cracked .bp-ribbon__r { transform: translateX(34px); opacity: 0; }
.bp-env__seal { z-index: 6; width: 30%; top: 67.4%; transform: translate(-50%, -50%); }
.bp-seal__initial { font: 600 34px var(--font-head); fill: #000; fill-opacity: .26; stroke: #fff; stroke-opacity: .28; stroke-width: .8; paint-order: stroke; }
.bp-seal__sprig { transition: opacity .5s ease; }
.bp-env.is-cracked .bp-seal__sprig { opacity: 0; }
.bp-env__to { bottom: 7%; font: 400 clamp(26px, 7vw, 34px)/1 var(--font-script); color: var(--accent); }
.bp-env__tolabel { font: 800 10px/1 var(--font-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-ink); vertical-align: middle; margin-right: 4px; }
.bp-env__stamp { right: 4.5%; bottom: 6%; top: auto; width: 12.5%; transform: rotate(4deg); }
.bp-stamp { filter: drop-shadow(0 2px 3px rgba(91, 42, 60, .18)); }
.bp-stamp__text { font: 800 6px var(--font-ui); letter-spacing: .12em; fill: var(--gold-ink); }
.bp-env__postmark { position: absolute; z-index: 3; right: 10%; bottom: 10%; width: 25%; transform: rotate(-9deg); pointer-events: none; }
.bp-postmark { width: 100%; height: auto; }
.bp-postmark__text { font: 800 7px var(--font-ui); letter-spacing: .16em; fill: var(--ink); fill-opacity: .34; }
.bp-env__hint { font: italic 400 19px/1 var(--font-head); letter-spacing: .03em; color: var(--ink-soft); }

/* ---------- finale: pearl balloons ---------- */
.bp-balloon--pearl { opacity: .85; filter: drop-shadow(0 8px 10px rgba(91, 42, 60, .12)); }
.bp-riser { animation-timing-function: cubic-bezier(.25, .1, .4, 1); }

/* ---------- round 2: responsive fit ---------- */
/* Short portrait phones (iPhone SE, small Android): cameo beside the title, so the whole lock fits on one screen. */
@media (max-width: 767px) and (max-height: 760px) and (orientation: portrait) {
  .bp-unlock { padding-top: calc(var(--safe-t) + 52px); padding-bottom: calc(var(--safe-b) + 16px); }
  .bp-unlock__hero { flex-direction: row; align-items: center; justify-content: center; gap: 14px; width: 100%; }
  .bp-unlock__art { width: min(34vw, 128px); margin: 0; }
  .bp-title { align-items: flex-start; text-align: left; }
  .bp-title__orn { display: none; }
  .bp-title__main { font-size: clamp(44px, 13.5vw, 58px); }
  .bp-title__script { font-size: clamp(28px, 8.4vw, 36px); transform: rotate(-5deg) translateX(.3em); }
  .bp-unlock__grid { gap: 10px; }
  .bp-keypad { padding: 16px 18px 14px; }
  .bp-keypad__label { margin-bottom: 8px; }
  .bp-box { height: 46px; }
  .bp-keypad__msg { margin: 4px 0 2px; min-height: 1.3em; }
  .bp-key { width: clamp(50px, 15vw, 56px); }
  .bp-keys { gap: 7px 14px; }
  .bp-enter { margin-top: 10px; min-height: 48px; }
  .bp-hint { margin-top: 8px; }
}
/* Landscape phones: photo and lock side by side, compact keys (still 44px+). */
@media (orientation: landscape) and (max-height: 520px) {
  .bp-screen { padding-top: calc(var(--safe-t) + 50px); padding-bottom: calc(var(--safe-b) + 12px); padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  .bp-unlock__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; }
  .bp-unlock__art { width: min(26vw, 150px); }
  .bp-title__orn { display: none; }
  .bp-title__main { font-size: clamp(40px, 8vw, 64px); }
  .bp-title__script { font-size: clamp(26px, 5vw, 38px); }
  .bp-keypad { padding: 14px 18px 12px; width: min(100%, 330px); }
  .bp-keypad__label { margin-bottom: 6px; }
  .bp-box { width: 40px; height: 40px; }
  .bp-keypad__msg { margin: 2px 0; min-height: 1.1em; font-size: 15px; }
  .bp-key { width: 44px; font-size: 19px; }
  .bp-keys { gap: 5px 12px; }
  .bp-enter { margin-top: 8px; min-height: 44px; }
  .bp-hint { display: none; }
  .bp-env { width: min(62vw, 360px); }
}
/* Readable labels (≥12px) and comfortable tap areas without changing the look. */
.bp-env__tolabel, .bp-key--soft, .bp-pola__turn { font-size: 12px; }
.bp-pola__zoom::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
.bp-brand a { padding: 12px 16px; }
.bp-iconbtn { width: 44px; height: 44px; }
.bp-env__to { left: 7%; right: 38%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; }
@media (min-width: 1100px) and (min-height: 700px) { .bp-env { width: min(46vw, 540px); } }
.bp-finale__title { font-weight: 600; font-variation-settings: 'SOFT' 50, 'WONK' 0, 'opsz' 144; text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 16px 36px rgba(91, 42, 60, .16); }