:root{--seal-x:55%;--seal-y:45.5%;--seal-size:158px;--arc-drop:44px;--arc-mult:1.48;--dim:.18;--desat:.10;--logo-size:clamp(78px,18vw,140px);--logo-right:18px;--logo-bottom:16px;--android-safe-bottom:clamp(12px,3.2svh,34px);--ease:cubic-bezier(.22,1,.22,1);--fade:820ms}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;overflow:hidden;background:#f3eee7;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;touch-action:manipulation}
.stage{position:relative;width:100vw;height:100svh;height:100dvh;opacity:1}
.bg{position:absolute;inset:0;background:url("/assets/img/envelope.png") center/cover no-repeat;transform:scale(1.01);filter:grayscale(var(--desat)) saturate(calc(1 - var(--desat))) contrast(1.02);z-index:1}
.dim{position:absolute;inset:0;pointer-events:none;background:rgba(20,20,20,var(--dim));z-index:2}
.soft{position:absolute;inset:0;pointer-events:none;background:radial-gradient(900px 700px at 50% 30%,rgba(255,255,255,.10),rgba(255,255,255,0) 60%),linear-gradient(to bottom,rgba(0,0,0,.04),rgba(0,0,0,.10));opacity:.45;z-index:3}
.arc{position:absolute;left:var(--seal-x);top:var(--seal-y);transform:translate(-50%,-50%) translateY(var(--arc-drop));z-index:7;width:calc(var(--seal-size)*var(--arc-mult));max-width:330px;height:auto;pointer-events:none;user-select:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.10));opacity:.95}
.tap{position:absolute;left:var(--seal-x);top:var(--seal-y);transform:translate(-50%,-50%);z-index:9;width:calc(var(--seal-size)*1.75);height:calc(var(--seal-size)*1.55);background:transparent;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.logo{position:fixed;right:calc(var(--logo-right) + env(safe-area-inset-right,0px));bottom:calc(var(--logo-bottom) + env(safe-area-inset-bottom,0px) + var(--android-safe-bottom));z-index:8;width:var(--logo-size);height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none;opacity:.70;filter:saturate(.85) contrast(.98) drop-shadow(0 10px 18px rgba(0,0,0,.10))}
@media (max-width:360px){:root{--seal-y:54%;--seal-size:min(44vw,170px);--arc-drop:46px;--arc-mult:1.50;--logo-size:clamp(72px,22vw,110px);--logo-right:16px;--android-safe-bottom:clamp(10px,3.0svh,28px);--logo-bottom:10px}}
@media (min-width:361px){:root{--seal-y:55%;--seal-size:min(40vw,176px);--arc-drop:44px;--arc-mult:1.52}}
@media (min-height:820px){:root{--seal-y:54.5%;--arc-drop:42px}}