:root{
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}
html{ background:#241a27; }

/* Romantic launch mark shown while the app shell starts. */
#boot{ color:#f8e7c8; background:radial-gradient(circle at 50% 36%,#594052,#241a27 68%); }
.boot-keepsake{ display:grid; justify-items:center; gap:18px; }
.boot-envelope{ position:relative; width:112px; height:74px; border:3px solid #bd9564; border-radius:11px; background:#f0d9b1; box-shadow:0 18px 30px rgba(8,5,11,.48); animation:bootEnvelope 1.5s ease-in-out infinite alternate; }
.boot-envelope::before{ content:""; position:absolute; inset:0; clip-path:polygon(0 0,100% 0,50% 68%); background:#f8e6c5; }
.boot-heart{ position:absolute; z-index:2; left:50%; top:54%; width:38px; height:38px; display:grid; place-items:center; transform:translate(-50%,-50%); border-radius:50%; color:#f5ca3e; background:#533127; box-shadow:0 0 17px #e9bc42; }
.boot-keepsake p{ margin:0; color:#e8d0df; font-size:1.35rem; }
@keyframes bootEnvelope{ to{ transform:translateY(-7px) rotate(1deg); filter:brightness(1.08); } }

/* First mobile-browser visit: installation before the envelope. */
.pwa-install-landing{ position:absolute; inset:0; min-height:100%; display:grid; place-items:center; overflow:auto; padding:calc(22px + var(--safe-top)) calc(16px + var(--safe-right)) calc(22px + var(--safe-bottom)) calc(16px + var(--safe-left)); color:#f9e8ca; background:radial-gradient(circle at 50% 25%,rgba(116,76,101,.7),transparent 42%),linear-gradient(160deg,#1c151f,#342337 58%,#201722); }
.pwa-install-stars{ position:absolute; inset:0; pointer-events:none; }.pwa-install-stars i{ position:absolute; width:5px; height:5px; border-radius:50%; background:#f7db8a; box-shadow:0 0 12px #f3cb60; animation:pwaStar 2.6s ease-in-out infinite alternate; }.pwa-install-stars i:nth-child(1){ left:11%; top:13%; }.pwa-install-stars i:nth-child(2){ right:14%; top:21%; animation-delay:-1s; }.pwa-install-stars i:nth-child(3){ left:17%; bottom:16%; animation-delay:-1.8s; }.pwa-install-stars i:nth-child(4){ right:10%; bottom:10%; animation-delay:-.5s; }
@keyframes pwaStar{ to{ opacity:.25; transform:scale(.5); } }
.pwa-install-card{ position:relative; z-index:2; width:min(520px,100%); padding:30px clamp(18px,5vw,40px) 24px; border:1px solid rgba(240,207,148,.35); border-radius:28px; text-align:center; background:linear-gradient(145deg,rgba(74,48,70,.96),rgba(34,24,38,.98)); box-shadow:0 28px 70px rgba(5,3,8,.5),inset 0 1px rgba(255,255,255,.09); }
.pwa-potato-mark{ position:relative; width:98px; height:66px; margin:0 auto 14px; border:3px solid #c39b67; border-radius:10px; background:#efd8b0; box-shadow:0 12px 24px rgba(7,4,9,.42); }
.pwa-mini-flap{ position:absolute; inset:0; clip-path:polygon(0 0,100% 0,50% 68%); background:#f8e6c6; }.pwa-mini-heart{ position:absolute; z-index:2; left:50%; top:55%; width:34px; height:34px; display:grid; place-items:center; transform:translate(-50%,-50%); border-radius:50%; color:#f1c53b; background:#523128; box-shadow:0 0 14px rgba(255,211,81,.78); }
.pwa-install-kicker{ margin:0; color:#edbd73; font-size:1.15rem; }.pwa-install-card h1{ margin:3px 0 10px; color:#fff1d1; font-size:clamp(1.8rem,7vw,2.7rem); }.pwa-install-copy{ max-width:420px; margin:0 auto 17px; color:#decfe0; line-height:1.48; }
.pwa-install-steps{ margin:0 0 17px; padding:0; display:grid; gap:8px; list-style:none; text-align:left; }.pwa-install-step{ display:grid; grid-template-columns:42px 1fr; align-items:center; gap:10px; min-width:0; padding:9px 11px; border:1px solid rgba(236,211,169,.18); border-radius:14px; background:rgba(255,255,255,.055); }.pwa-step-icon{ width:36px; height:36px; display:grid; place-items:center; border-radius:11px; color:#392637; background:#f0c963; font-weight:900; font-size:1.25rem; box-shadow:0 5px 12px rgba(5,3,8,.25); }.pwa-install-step strong,.pwa-install-step small{ display:block; }.pwa-install-step strong{ color:#fff1d2; font-size:.93rem; }.pwa-install-step small{ margin-top:1px; color:#cfc0d2; font-size:.73rem; line-height:1.3; }
.pwa-ios-nudge{ padding:11px 14px; border-radius:999px; color:#4c3029; background:#f0c963; font-size:1.15rem; box-shadow:0 7px 18px rgba(5,3,8,.3); }.pwa-install-btn{ width:100%; }.pwa-install-status{ min-height:1.35em; margin:10px 0 5px; color:#d8c8dc; font-size:.78rem; line-height:1.35; }.pwa-continue{ border:0; padding:8px 12px; color:#e7d5e4; background:transparent; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }.pwa-install-foot{ margin:12px 0 0; color:#d4b982; font-size:.9rem; line-height:1.3; }

.pwa-update-toast{ position:fixed; z-index:120; left:50%; bottom:calc(18px + var(--safe-bottom)); width:min(440px,calc(100vw - 24px)); transform:translateX(-50%); display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 13px 12px 16px; color:#f8ead0; border:1px solid #aa8056; border-radius:16px; background:#302131; box-shadow:0 15px 38px rgba(7,4,9,.46); }.pwa-update-toast span{ font-size:.84rem; }.pwa-update-toast button{ flex:0 0 auto; border:0; border-radius:999px; padding:8px 12px; color:#3d2b22; background:#efc85f; font-weight:800; cursor:pointer; }

/* Notches and the Home indicator: scenery still bleeds edge-to-edge, controls do not. */
.screen:not(.fullbleed){ padding-top:max(clamp(16px,4vw,48px),calc(16px + var(--safe-top))); padding-right:max(clamp(16px,4vw,48px),calc(16px + var(--safe-right))); padding-bottom:max(clamp(16px,4vw,48px),calc(16px + var(--safe-bottom))); padding-left:max(clamp(16px,4vw,48px),calc(16px + var(--safe-left))); }
#tray{ bottom:calc(14px + var(--safe-bottom))!important; }
#mute,#musicBtn,#resetBtn{ top:calc(14px + var(--safe-top))!important; }
#mute{ right:calc(14px + var(--safe-right))!important; }
#musicBtn{ right:calc(64px + var(--safe-right))!important; }
#resetBtn{ right:calc(114px + var(--safe-right))!important; }
body.stage-running #mute{ right:calc(58px + var(--safe-right))!important; }
body.stage-running #musicBtn{ right:calc(108px + var(--safe-right))!important; }
body.stage-running #resetBtn{ right:calc(158px + var(--safe-right))!important; }
.stage-close.on-scene{ top:calc(10px + var(--safe-top))!important; right:calc(14px + var(--safe-right))!important; }
.arena-controls{ bottom:calc(16px + var(--safe-bottom))!important; }.arena-hint{ bottom:calc(92px + var(--safe-bottom))!important; }
.cello-wrap{ bottom:calc(2.2% + var(--safe-bottom))!important; }
.lon-people{ bottom:calc(-12px + var(--safe-bottom))!important; }
.inv-final-status{ bottom:calc(3.5vh + var(--safe-bottom))!important; }
.kiss-couple{ bottom:calc(8% + var(--safe-bottom))!important; pointer-events:auto!important; cursor:pointer; border-radius:30%; outline:none; }.kiss-couple:focus-visible{ outline:3px solid #ffd75c; outline-offset:-14px; }
.kiss-again-hint{ position:absolute; z-index:17; left:50%; top:22%; width:min(88vw,520px); margin:0; transform:translateX(-50%) translateY(7px); text-align:center; color:#e9cfa9; font-size:clamp(1rem,2.8vw,1.35rem); opacity:0; text-shadow:0 2px 10px #100914; transition:opacity .55s,transform .55s; pointer-events:none; }.answer-shown .kiss-again-hint{ opacity:.78; transform:translateX(-50%); }

@media(max-width:520px){
  .pwa-install-landing{ display:block; }
  .pwa-install-card{ width:calc(100vw - 32px); max-width:calc(100vw - 32px); min-width:0; margin:0 auto; overflow:hidden; }
  .pwa-install-card h1{ overflow-wrap:anywhere; }
  .pwa-install-btn:disabled{ opacity:.7; box-shadow:none; }
  body.stage-running #resetBtn{ top:calc(8px + var(--safe-top))!important; left:calc(8px + var(--safe-left))!important; right:auto!important; }
  body.stage-running #musicBtn{ top:calc(50px + var(--safe-top))!important; left:calc(8px + var(--safe-left))!important; right:auto!important; }
  body.stage-running #mute{ top:calc(92px + var(--safe-top))!important; left:calc(8px + var(--safe-left))!important; right:auto!important; }
  .arena-controls{ bottom:calc(10px + var(--safe-bottom))!important; }.arena-hint{ bottom:calc(84px + var(--safe-bottom))!important; }
}
@media(max-height:680px){
  .pwa-install-card{ padding-top:18px; }.pwa-potato-mark{ width:75px; height:50px; margin-bottom:8px; }.pwa-install-copy{ margin-bottom:10px; }.pwa-install-steps{ gap:5px; margin-bottom:10px; }.pwa-install-step{ padding:6px 9px; }.pwa-install-foot{ display:none; }
}
@media(max-height:650px){ .kiss-again-hint{ top:17%; } }
@media(prefers-reduced-motion:reduce){ .boot-envelope,.pwa-install-stars i{ animation:none; } }