/* Viewport-relative dialogs and stable initial geometry, shared by both versions. */
body dialog{box-sizing:border-box;width:min(92vw,640px);max-width:calc(100vw - 24px);max-height:min(86dvh,860px);max-height:min(calc(var(--visible-height,100dvh) * .86),860px);padding:clamp(18px,4vw,30px);overflow:auto;scrollbar-gutter:stable;overscroll-behavior:contain;margin:auto}
body #onboarding{width:min(92vw,440px);max-height:min(calc(var(--visible-height,100dvh) * .86),740px)}
body #entry{height:min(calc(var(--visible-height,100dvh) * .86),740px)}
body #photo-album{width:min(92vw,720px);max-height:min(calc(var(--visible-height,100dvh) * .86),860px)}
body #photo-album .album-body{min-height:160px}
body #photo-album .album-image{height:min(calc(var(--visible-height,100dvh) * .53),570px);aspect-ratio:3/2;object-fit:contain}
body .venue-map-dialog{width:min(94vw,940px);max-height:calc(var(--visible-height,100dvh) * .88)}
body .venue-map-scroll{max-height:calc(var(--visible-height,100dvh) * .88 - 180px)}
.wedding-gallery img{aspect-ratio:3/2;object-fit:contain;background:#8881}
body.is-loading{overflow:hidden!important}
body.is-loading #game{visibility:hidden;pointer-events:none}
#game-loader{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 50% 30%,#38303c,#16131b 75%);color:#f6eef6;text-align:center;font-family:-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif}
.loader-content{width:min(280px,80vw)}
.loader-title{font-size:22px;letter-spacing:2px;margin:0 0 14px}
#game-loader p{font-size:13px;color:#d4c8d9;line-height:1.8}
#game-loader progress{appearance:none;width:100%;height:3px;border:0;border-radius:4px;background:#ffffff20;margin:18px 0}
#game-loader progress::-webkit-progress-bar{background:#ffffff20;border-radius:4px}
#game-loader progress::-webkit-progress-value{background:#dfc6e7;border-radius:4px}
#game-loader a{color:#d5c9db;font-size:12px;text-underline-offset:4px}
#game-loader button{display:block;margin:12px auto;min-height:44px;border:1px solid #ffffff44;border-radius:12px;padding:10px 20px;background:#ffffff14;color:inherit}
#game-loader button[hidden]{display:none}
body.is-loading.classic .paper,body.is-loading.classic .version-bar{visibility:hidden}
.classic #game-loader{background:#fffdf9;color:#594a50}
.classic #game-loader p{color:#87767c}
.classic #game-loader progress::-webkit-progress-bar{background:#ede4e8}
.classic #game-loader progress::-webkit-progress-value{background:#b89baa}
.classic #game-loader button{color:#594a50;border-color:#c8b4bf}
/* Shared dialog type and spacing scale. Controls keep 16px input text to avoid iOS focus zoom. */
body dialog{--dialog-title:20px;--dialog-body:13px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif;font-size:var(--dialog-body);line-height:1.65;padding:20px 22px;border-radius:20px}
body dialog :is(h2,#onboarding-title),body #panel h2,body #photo-album h2{font-family:inherit;font-size:var(--dialog-title);font-weight:600;line-height:1.4;letter-spacing:-.4px;margin:8px 0 16px}
body dialog h3{font-family:inherit;font-size:15px;font-weight:600;line-height:1.5;margin:18px 0 10px}
body dialog :is(p,.panel-letter p,.form-intro,.notice,.onboarding-description,.welcome-date,.success-note),body #panel-content>p{font-size:13px;line-height:1.7;margin:10px 0}
body dialog :is(.eyebrow,.entry-progress,.hint,.onboarding-note,.consent,.account-intro){font-size:11px;line-height:1.6}
body dialog .sheet-head{display:flex;align-items:center;justify-content:space-between;min-height:36px;margin-bottom:8px}
body dialog :is(.close,.album-close,.venue-map-close){width:36px;height:36px;min-width:36px;min-height:36px;padding:0;font-size:22px;display:grid;place-items:center;margin:0 0 0 auto}
body dialog :is(label,legend,summary){font-size:12px;line-height:1.6}
body dialog label{margin-block:12px}
body dialog fieldset{margin:16px 0;padding:0;border:0}
body dialog legend{font-weight:600;margin-bottom:8px}
body dialog :is(input:not([type=checkbox],[type=radio],[type=file]),select,textarea){font:400 16px/1.5 -apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;padding:10px 12px;min-height:44px}
body dialog :is(.button,.account-copy,.small-button){font-size:12px;line-height:1.5;min-height:44px;padding:10px 14px}
body dialog .entry-progress{padding:8px 0 12px;margin:0 0 16px}
body dialog .form-grid{gap:12px}
body dialog .avatar-preview{padding:12px;gap:12px}
body dialog .paper-section{padding:24px 0}
body dialog .venue-heading h3{font-size:18px}
body dialog .venue-travel-item h4{font-size:13px;margin:2px 0 6px}
body dialog .venue-location .venue-travel-item p{font-size:12px;line-height:1.7}
body dialog .family-lines p{font-size:13px!important}
body dialog .family-lines strong{font-size:15px}
body dialog .account-number{font-size:16px;letter-spacing:.6px}
body dialog .account-card summary{font-size:13px;padding:14px 16px}
body dialog .account-body{padding:0 16px 16px}
body dialog[open]{animation:dialog-arrive 180ms cubic-bezier(.2,.8,.2,1) both}
body dialog[open]::backdrop{animation:backdrop-arrive 180ms ease-out both}
body dialog.ui-closing{animation:dialog-leave 130ms ease-in both;pointer-events:none}
body dialog.ui-closing::backdrop{animation:backdrop-leave 130ms ease-in both}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes dialog-leave{from{opacity:1;transform:none}to{opacity:0;transform:translateY(7px) scale(.99)}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@keyframes backdrop-leave{from{opacity:1}to{opacity:0}}
body dialog [data-form-step]:not([hidden]),body dialog details[open]>.account-body{animation:content-arrive 160ms ease-out both}
@keyframes content-arrive{from{opacity:.2;translate:0 5px}to{opacity:1;translate:0 0}}
body dialog :is(button,input,select,textarea,summary),#game .hud button{transition:background-color 140ms ease,border-color 140ms ease,box-shadow 140ms ease,filter 120ms ease}
body dialog button:active,#game .hud button:active{filter:brightness(1.15)}
body dialog :is(input,select,textarea):focus-visible{outline:2px solid #b6a2c9;outline-offset:2px}
html,body{overscroll-behavior-y:none}
/* The document owns hall scrolling. A non-scrolling body with containment
   traps wheel/touch chaining before it can reach the document. */
html:has(#game){overflow-x:clip;overflow-y:auto;overscroll-behavior-y:none;background:#15121b}
body:has(#game){overflow:visible;overscroll-behavior:auto;background:#15121b}
#game{height:calc(var(--hall-height,600px) + 110px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);box-sizing:border-box}
#game .bottom-navigation{bottom:calc(10px + env(safe-area-inset-bottom));padding:0;isolation:isolate;transform:translateX(-50%) translateZ(0)}
#game .bottom-navigation::before{content:'';position:absolute;z-index:-1;left:-20px;right:-20px;bottom:calc(-10px - env(safe-area-inset-bottom));height:calc(22px + env(safe-area-inset-bottom));background:linear-gradient(transparent,#15121b);pointer-events:none}
body dialog{scroll-padding-block:16px;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
@media(max-width:350px){body dialog{padding:16px 18px;--dialog-title:18px}}
@media(prefers-reduced-motion:reduce){body dialog,body dialog::backdrop,body dialog *,#game .hud button{animation:none!important;transition:none!important}}
body dialog :is(.close,.album-close,.venue-map-close){width:44px;height:44px;min-width:44px;min-height:44px;font-size:22px}