/* Mobile product controls; the recovered scene image stays intact. */
.phone{overflow:clip}
body:has(>.shell){padding:12px}.shell{width:min(100%,430px,calc((100svh - 24px)*941/1672))}.shell>.fallback{display:none}
.ask-button-clean{position:absolute;inset:0;pointer-events:none;background:url('oracle-reading-clean.webp') center/100% 100% no-repeat;mask-image:linear-gradient(transparent 74%,#000 76%,#000 85.5%,transparent 88%),radial-gradient(ellipse 4.5% 2.1% at 8.3% 4.3%,#000 75%,transparent 100%)}
#askHotspot{left:50%;top:77%;width:64%;height:7.5%;min-height:44px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;padding:8px 18px;border:1px solid #d7b88c;border-radius:40px;color:#efdbbb;background:linear-gradient(120deg,#1b1512ef,#090f17ed);box-shadow:inset 0 0 0 3px #d7b88c16,0 5px 18px #0007;font:17px/1.2 Georgia,serif;letter-spacing:.03em;text-align:center}
.phone>.phase{top:28%;z-index:24;white-space:normal;width:max-content;max-width:84%;text-align:center;font-size:12px;line-height:1.35}
.sphere-question{position:absolute;z-index:21;left:8%;right:8%;top:14%;width:84%;padding:9px 13px;border:1px solid #d7b88c33;border-radius:12px;background:#07111edb;color:#eddec5;box-shadow:0 4px 18px #0004;text-align:center;cursor:pointer;display:none;user-select:text}
.sphere-question small{display:block;font:9px/1.2 system-ui;letter-spacing:1.3px;color:#cdb48c;margin-bottom:5px}.sphere-question span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font:14px/1.4 Georgia,serif}
.phone.focused.has-oracle-question:not(.tarot-mode) .sphere-question{display:block}.phone.sheet-open:not(.oracle-pending) .sphere-question{display:none}
@media(max-width:360px){body:has(>.shell){padding:7px}.sphere-question{top:13%;padding:8px 11px}.sphere-question span{font-size:13px}}
@media(max-height:560px){.shell{width:min(100%,430px)}body:has(>.shell){align-items:flex-start}.shell{margin:0 auto}}

dialog.deck-gallery{box-sizing:border-box;width:calc(100% - 14px);max-width:430px;height:calc(100% - 14px);max-height:calc(100% - 14px);margin:auto;padding:0;border:1px solid #d7b88c66;border-radius:16px;background:#07131f;color:#eddcc1;overflow:hidden;box-shadow:0 20px 60px #000a}
dialog.deck-gallery[open]{display:flex;flex-direction:column}.deck-gallery::backdrop{background:#02060de8;backdrop-filter:blur(6px)}.gallery-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-bottom:1px solid #d7b88c33;flex:0 0 auto}.gallery-header>span{font:18px Georgia,serif}.gallery-close{min-height:44px;padding:8px 13px;border:1px solid #d7b88c55;border-radius:24px;background:#101c2b;color:#e6d1ab;font:12px system-ui;cursor:pointer}.deck-gallery iframe{display:block;width:100%;flex:1;min-height:0;border:0;background:#080d17}
.embedded-gallery nav{display:none}.embedded-gallery main{padding:16px}.embedded-gallery h1{margin-top:4px}.embedded-gallery dialog{box-sizing:border-box;width:calc(100% - 16px);max-height:calc(100% - 16px);overflow:auto}.embedded-gallery dialog img{max-width:100%;max-height:calc(100dvh - 90px);object-fit:contain}.embedded-gallery dialog button{min-height:44px}

/* Full card art fits inside the padded modal, with no horizontal scrolling. */
#viewer{width:calc(100% - 18px);max-width:430px;max-height:calc(100% - 18px);padding:12px;overflow-x:hidden}#fullCard{width:auto;height:auto;max-width:100%;max-height:calc(100svh - 160px);object-fit:contain}.viewer-caption h2{overflow-wrap:anywhere;font-size:20px}.viewer-close{min-height:44px}
@media(max-width:360px){#birthScreen .astrolabe{width:63%}#birthForm[data-step=when]{top:61%;padding:7px 12px}#birthForm[data-step=when] .birth-progress{margin-bottom:6px}#whenFields .step-note{display:none}#whenFields .check{margin:9px 0 8px}#whenFields #unknownHint{font-size:9px;line-height:1.3;margin:4px 0}#continueBirth{min-height:44px}}

.heading .birth-summary{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;max-width:100%;width:100%;max-height:2.8em;margin:6px auto 0;padding:0;border:0;background:none;color:#e3d5bf;text-align:center;text-shadow:0 2px 8px #000;font:10px/1.4 Georgia,serif;cursor:pointer}
.big-three{grid-template-columns:repeat(3,minmax(0,1fr))}.big-three>div{min-width:0}.natal-insights:not(.expanded) .big-three strong{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.15;font-size:14px}
#natalOffer{overflow:clip;max-height:calc(100% - 20px);padding:16px}#natalOffer[open]{display:flex;flex-direction:column;gap:10px}#natalOffer>.offer-close{flex:0 0 auto;min-height:40px;margin-bottom:0}#natalOffer>.offer-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin}#natalOffer>.offer-actions{position:static;flex:0 0 auto;margin:0;padding:10px 0 0;border-top:1px solid #d7b88c33;background:none}#natalOffer .offer-demo-note{margin-bottom:0}

.heading .birth-summary{pointer-events:auto}
.backend-history-row strong,.backend-history-row>span{overflow-wrap:anywhere;white-space:normal}

#birthForm:has(#unknownTime:checked) .step-note{display:none}
#unknownTime:checked{background:#d7b88c!important;border-color:#e7ca96!important}#unknownTime:checked::after{content:"✓";display:block;color:#21170e;font:bold 13px/14px system-ui;text-align:center}

.cancel-edit{margin-left:auto;min-height:40px;padding:8px 12px;border:1px solid #d7b88c33;border-radius:22px;background:#08111de8;color:#e5cfaa;font:10px/1.2 system-ui;white-space:nowrap}

#cityPrivacy{display:block;font-size:10px!important;line-height:1.45;margin:8px 0 10px!important;color:#b7c1ce}
#cityPrivacy a{color:#dfc79e;text-underline-offset:2px}
.chosen-city small{display:block;font-size:10px;line-height:1.5;margin-top:3px;color:#b9c3d0;overflow-wrap:anywhere}

/* Give city choice its own space while retaining the shared scene. */
#birthScreen:has(#birthForm[data-step=where]) .astrolabe{top:27%;width:26%;opacity:.85}
#birthForm[data-step=where]{top:44%;overscroll-behavior:contain}
#birthForm[data-step=where] .city-option{min-height:48px;text-align:left;white-space:normal;overflow-wrap:anywhere}
#birthForm[data-step=where] .city-option small{line-height:1.5;white-space:normal;overflow-wrap:anywhere}
@media(max-width:360px){#birthScreen:has(#birthForm[data-step=where]) .astrolabe{width:25%}#birthForm[data-step=where]{padding:12px;top:44%}}

.natal-insights:not(.expanded) .drawer-actions{display:grid;grid-template-columns:1fr 1.3fr;gap:8px;padding:7px 10px 9px}
.natal-insights:not(.expanded) #openDetails{justify-content:center;min-height:46px;padding:8px;border:1px solid #d7b88c55;background:#0a1828;color:#e5d6bf;font:13px/1.25 Georgia,serif;text-align:center}
#openNatalOffer{min-height:46px;padding:8px 10px;border:1px solid #e5c08b;border-radius:18px;background:linear-gradient(110deg,#bc935f,#efd3a5,#c39a66);color:#24190e;font:15px/1.25 Georgia,serif;box-shadow:0 3px 14px #0005}
#openNatalOffer span{color:#4e3b24;font-size:11px}
.natal-paid-banner{margin:10px 0 18px;padding:14px}.natal-paid-banner h2{font-size:24px;margin:5px 0 8px}

@media(max-width:360px){.natal-insights:not(.expanded) .drawer-actions{gap:6px;padding:5px 8px 7px}.natal-insights:not(.expanded) #openDetails{padding:6px;font-size:12px;line-height:1.2}#openNatalOffer{padding:6px 8px;font-size:14px;line-height:1.15}}
.natal-insights:not(.expanded){top:auto;height:176px;grid-template-rows:24px minmax(0,1fr) 62px}

/* Every paid natal service is visible before opening the reading drawer. */
.natal-insights:not(.expanded){height:200px;grid-template-rows:24px minmax(0,1fr) 104px}
.natal-insights:not(.expanded) .big-three span{display:inline;font-size:15px;margin-right:3px}
.natal-insights:not(.expanded) .big-three strong{margin-top:5px}
.natal-insights:not(.expanded) .drawer-actions{gap:6px;padding:5px 10px 7px;grid-template-rows:46px 40px}
.drawer-actions .forecast-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0}
.drawer-actions .forecast-actions button{min-height:40px;padding:7px;border-color:#dab67d88;color:#f1dbb6;background:linear-gradient(110deg,#3c2b1c,#19222b);font:13px/1.2 Georgia,serif}
.natal-insights.expanded .drawer-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px 12px}
.natal-insights.expanded .drawer-actions #openDetails,.natal-insights.expanded .drawer-actions #openNatalOffer{display:none}
.natal-insights.expanded{grid-template-rows:33px minmax(0,1fr) 56px}
#resultScreen .chart{left:17%;width:66%}
#resultScreen .chart-selection{top:auto;bottom:calc(3% + 204px)}
@media(max-width:360px){#resultScreen .chart{left:21%;width:58%;top:22%}.natal-insights:not(.expanded) .drawer-actions{padding-left:8px;padding-right:8px}}

.sheet-header .close{padding:0;display:grid;place-items:center;flex:0 0 31px;line-height:0}.sheet-header .close svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}

/* A single brass service strip, with free chart details as a quiet text action. */
.natal-insights:not(.expanded) .drawer-actions,.natal-insights.expanded .drawer-actions{grid-template-columns:1fr;grid-template-rows:44px 48px;gap:4px;padding:4px 12px}
.natal-insights:not(.expanded) #openDetails{grid-column:1/-1;min-height:44px;border:0;border-radius:0;background:none;box-shadow:none;color:#ddc7a5;font:13px/1.2 Georgia,serif;letter-spacing:.02em}
.drawer-actions .forecast-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid #c9a76d66;border-radius:12px;background:linear-gradient(180deg,#14212cdd,#09131de8);box-shadow:inset 0 1px #ead2aa0d;overflow:hidden}
.drawer-actions .forecast-actions button,.drawer-actions .forecast-actions #openNatalOffer{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;min-width:0;min-height:46px;padding:5px 2px;border:0;border-right:1px solid #c9a76d33;border-radius:0;background:none;box-shadow:none;color:#ead8bb;font:13px/1.15 Georgia,serif;text-align:center}
.drawer-actions .forecast-actions button:last-child{border-right:0}
.drawer-actions .forecast-actions #openNatalOffer .service-title,.drawer-actions .forecast-actions .service-title{color:#ead8bb;font:13px/1.15 Georgia,serif;white-space:nowrap}
.drawer-actions .forecast-actions .service-price{color:#c9a76d;font:10px/1 system-ui,sans-serif;letter-spacing:.03em}
.drawer-actions .forecast-actions button:hover{background:#d5b37a0d}
.drawer-actions .forecast-actions button:active{background:#d5b37a1c}
.natal-insights.expanded .drawer-actions{grid-template-rows:48px;padding:4px 12px}
.natal-insights.expanded .drawer-actions #openNatalOffer{display:flex}
@media(max-width:360px){.natal-insights:not(.expanded) .drawer-actions,.natal-insights.expanded .drawer-actions{padding-left:10px;padding-right:10px}.drawer-actions .forecast-actions #openNatalOffer .service-title,.drawer-actions .forecast-actions .service-title{font-size:12px}}
.natal-insights:not(.expanded){height:184px}#resultScreen .chart-selection{bottom:calc(3% + 188px)}

.local-mode-tag{font-size:10px!important;line-height:1.4!important}

/* Mobile reading pass: meaningful copy stays legible at 320px. */
.sheet .question{font-size:16px;height:44px;padding:10px 11px}.sheet .submit{min-height:44px;font-size:15px}.sheet .sheet-title{font-size:13px}
.tarot-question-form textarea{font:16px/22px system-ui,sans-serif;height:54px;min-height:54px;padding:15px 12px}
.tarot-question-form>p{font-size:12px;line-height:1.4}.tarot-question-form .question-error{font-size:13px}
.intro-copy p,.step-heading p{font-size:14px}.step-heading .question-echo{font-size:13px!important;line-height:1.4}
.table-legend small{font-size:13px}.selection-note{font-size:12px}
.premium-sheet>p:not(.reading-kicker):not(.demo-note),#fullMeaning{font-size:15px;line-height:1.65}
.premium-price span{font-size:14px}.premium-sheet .demo-note,.reading-note{font-size:12px;line-height:1.5}.premium-sheet select{font-size:16px}
.reading-user-question{font-size:15px}.viewer-close,.text-button{font-size:14px}
.backend-reader{font-size:15px;line-height:1.7}.backend-reader h3{font-size:23px}.backend-reader .backend-lead{font-size:18px;line-height:1.6}.backend-reader .backend-note{font-size:12px!important}.backend-close{font-size:13px;min-height:44px}.backend-history-row small{font-size:12px}.backend-history-row>span{font-size:14px}
.natal-app .home-return{font-size:12px;min-height:44px}.natal-app #edit{font-size:11px}
#birthForm label{font-size:13px}#birthForm input,#birthForm select{font-size:16px;height:44px}#birthForm .check{font-size:13px;min-height:28px;line-height:1.4}
#birthForm .check input{width:20px;height:20px;flex-basis:20px}
#birthForm .primary{font-size:17px;min-height:44px}.step-note,.privacy,#birthForm[data-step=where] .privacy{font-size:11px!important;line-height:1.5}
#birthForm .hint,#birthForm .manual,#cityPrivacy{font-size:12px!important;line-height:1.5}.chosen-city{font-size:14px}.chosen-city small,#birthForm .city-option small{font-size:12px}.city-option{font-size:14px}
.natal-insights .insights-handle>span{font-size:12px}.natal-insights:not(.expanded) .big-three small{font-size:11px}
.natal-insights:not(.expanded) #openDetails{font-size:15px}
.drawer-actions .forecast-actions #openNatalOffer .service-title,.drawer-actions .forecast-actions .service-title{font-size:14px}
.drawer-actions .forecast-actions .service-price{font-size:12px}
.natal-insights [role=tabpanel] p{font-size:15px;line-height:1.7}.row{font-size:14px}.row small{font-size:12px}.row .position{font-size:13px}.method{font-size:12px}
.natal-offer .offer-intro,.natal-offer .offer-content>p:not(.offer-kicker),.natal-offer .offer-includes{font-size:15px;line-height:1.65}.natal-offer .offer-demo-note{font-size:12px!important;line-height:1.5}.natal-offer textarea{font-size:16px}
@media(max-width:360px){.drawer-actions .forecast-actions #openNatalOffer .service-title,.drawer-actions .forecast-actions .service-title{font-size:13px}#birthForm[data-step=when]{top:auto;bottom:3%;max-height:45%;overflow-y:auto}#birthScreen:not(:has(#birthForm[data-step=where])) .astrolabe{width:56%;left:50%;top:27%}.natal-app .result-heading{top:12%}}
/* Keep forecast text clear of the purchase controls on short screens. */
#forecastOffer{overflow:clip;max-height:calc(100% - 20px);padding:16px}
#forecastOffer[open]{display:flex;flex-direction:column;gap:10px}
#forecastOffer>.offer-close{flex:0 0 auto;min-height:40px;margin-bottom:0}
#forecastOffer>.offer-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin}
#forecastOffer>.offer-actions{position:static;flex:0 0 auto;margin:0;padding:10px 0 0;border-top:1px solid #d7b88c33;background:none}
.natal-offer .offer-kicker{font-size:10px;line-height:1.5;letter-spacing:1px}
.birth-summary{font-size:11px!important;line-height:1.4}/* Two-line Moon signs need the same space as short labels. */
.natal-insights:not(.expanded){height:200px}
#resultScreen .chart-selection{bottom:calc(3% + 204px)}
@media(max-width:360px){#resultScreen .chart{left:22%;width:56%;top:21%}}
.heading h1:focus{outline:none}

/* Native mobile surface; the desktop demonstration keeps its preview shell. */
@media(max-width:600px){
 html:has(.shell),body:has(>.shell){width:100%;min-height:100%;margin:0;padding:0;background:#080d17;display:block}
 .shell{width:100%;max-width:none;margin:0}
 .phone{width:100%;height:var(--app-height,100dvh);aspect-ratio:auto;border-radius:0;box-shadow:none}
 .phone .scene{left:calc((100% - max(100%,calc(var(--app-height,100dvh) * .562799)))/2);right:calc((100% - max(100%,calc(var(--app-height,100dvh) * .562799)))/2)}
}
.telegram-app,.telegram-app body{margin:0;padding:0;width:100%;background:#080d17}
.telegram-app .shell{width:100%;max-width:none;margin:0}
.telegram-app .phone{width:100%;height:var(--app-height,100dvh);aspect-ratio:auto;border-radius:0;box-shadow:none}
.usage-notice{font:12px/1.5 system-ui,sans-serif!important;letter-spacing:0;color:#e0d5c5;text-align:center;margin:10px 0 0;padding:0 4px}
.usage-notice a{color:#eed8b2;text-decoration:underline;text-underline-offset:3px}
.home-usage-notice{position:absolute;z-index:22;left:8%;right:8%;bottom:max(4%,calc(var(--app-safe-bottom,env(safe-area-inset-bottom,0px)) + 10px));padding:5px 8px;border-radius:10px;background:#071019b8;text-shadow:0 1px 5px #000;pointer-events:auto}
.phone.focused>.home-usage-notice,.phone.tarot-mode>.home-usage-notice{display:none}
.telegram-app .history-button{top:max(3%,calc(var(--app-safe-top,0px) + 8px))}
.telegram-app .scene-brand{top:max(4%,calc(var(--app-safe-top,0px) + 16px))}
.phone .sheet{bottom:max(5%,calc(var(--app-safe-bottom,env(safe-area-inset-bottom,0px)) + 10px))}
.tarot-question-form .usage-notice{font-size:11px!important;line-height:1.4!important;margin-top:7px}
#birthForm .usage-notice{font-size:11px!important;line-height:1.45!important;margin-top:8px}

.tarot-question-form .usage-notice,#birthForm .usage-notice{font-size:12px!important}
@media(max-width:360px){#birthScreen:not(:has(#birthForm[data-step=where])) .astrolabe{width:46%;top:27%}}


.usage-rules{position:fixed;inset:0;margin:auto;width:min(700px,calc(100% - 16px));height:calc(100dvh - 24px);max-width:none;max-height:calc(100dvh - 24px);padding:0;border:1px solid #ae936355;border-radius:14px;background:#07111e;color:#eee1cd;overflow:hidden;z-index:100}.usage-rules[open]{display:flex;flex-direction:column}.usage-rules::backdrop{background:#02050ddd}.usage-rules-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid #ae936344;font:14px Georgia,serif}.usage-rules-bar button{min-height:40px;border:1px solid #ae936366;border-radius:22px;padding:6px 14px;background:#0d1a27;color:#e8d7bb;font-size:13px}.usage-rules iframe{width:100%;flex:1;min-height:0;border:0;background:#07111e}
.usage-notice a{display:inline-block}