/* A single visible viewport owns scrolling, including when the iOS keyboard opens. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
@media(max-width:720px),(display-mode:standalone){
 /* Keep the installed app in its original document coordinate system.
    Only the keyboard controller should anchor the shell to the visual viewport. */
 html,html.card-view{height:auto;min-height:100%;overflow:visible;background:var(--night)}
 body,html.card-view body{position:relative;inset:auto;top:0;width:100%;height:auto;min-height:0;padding:0;display:block;overflow:visible;background:transparent}
 .device,html.card-view .device{position:relative;inset:auto;width:100%;height:var(--app-height,100dvh);min-height:0;border-radius:0;overflow:hidden;box-shadow:none}
 .device-status,.home-indicator{display:none}
 #app,html.card-view #app{height:100%;min-height:0;padding:var(--safe-top) 24px max(18px,var(--safe-bottom));display:block;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;scroll-padding-block:16px 24px;-webkit-overflow-scrolling:touch}
 /* Derive every screen from the same padded content height rather than
    percentage min-height on a scroller. Safe areas are deducted exactly once. */
 #app{--screen-height:calc(var(--app-height,100dvh) - var(--safe-top) - max(18px,var(--safe-bottom)))}
 #app>.screen{height:auto;min-height:var(--screen-height);display:flex;flex-direction:column;flex:none}
 #app>.screen-welcome,#app>.account-entry{height:var(--screen-height);min-height:0}
 #app>.screen>*{flex-shrink:0}
 #app>.screen-card{height:var(--screen-height);min-height:620px}
 .screen-card .deck-stack{flex:1 1 0;min-height:270px;margin-top:24px}
 .screen-card .deck-stack>article.playing-card{min-height:0}
 .screen-card .card-reading{padding:20px 0}
 .screen-card .bottom{padding-top:28px}
 .screen-card .prompt{font-size:clamp(26px,7.5vw,36px)}
 .screen-card .playing-card{padding:24px}
 #players-form{flex:none}
 /* Native focus scrolling must never chase an animating name field. */
 .screen-setup .player-field{animation:none}
 .keyboard-open{--safe-bottom:0px}
 .memories-overlay{top:var(--viewport-top,0px);bottom:auto;height:var(--app-height,100dvh)}
 .access-panel{top:var(--viewport-top,0px);bottom:auto;height:var(--app-height,100dvh);max-height:var(--app-height,100dvh);padding-bottom:max(24px,var(--safe-bottom))}
 .access-close{top:calc(var(--viewport-top,0px) + max(14px,var(--safe-top)))}
}
.mood-lock{width:12px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none;opacity:.8}
@media(max-width:370px){#app,html.card-view #app{padding-inline:18px}.stage-progress .stage-step{font-size:12px}.screen-card .playing-card{padding:20px}}
@media(min-width:721px){html,body{overflow-y:auto}.device{height:auto;min-height:956px}}
/* Measure the CSS layout viewport independently of the keyboard's visual viewport. */
.viewport-probe{position:fixed;top:0;left:0;width:0;height:100vh;height:100dvh;visibility:hidden;pointer-events:none;contain:strict}
html.standalone-app .viewport-probe{height:100vh;height:100lvh}
@media(display-mode:standalone){.viewport-probe{height:100vh;height:100lvh}}
.welcome-links{display:flex;align-items:center;justify-content:center;gap:24px}
@media(max-width:720px),(display-mode:standalone){
 .screen-welcome .hero{padding:16px 0 8px}
 .screen-welcome .hero h1{font-size:clamp(38px,10.5vw,46px);margin:14px 0}
 .screen-welcome .hero-art{height:clamp(160px,23vh,220px);margin-top:16px}
 .screen-welcome .hero-art .mini-card{width:116px;height:174px}
 .screen-welcome .hero-art .mini-card svg{width:48px;height:48px}
 .screen-welcome .hero>.flourish{margin:8px auto}
 .screen-welcome .bottom{padding-top:16px;gap:8px}
}

/* Home utilities stay near the top, independent of footer/viewport sizing. */
.home-shortcuts{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:4px 0 8px}
.home-shortcuts .text-nav{min-height:44px;padding:8px 4px;font-size:13px}
.home-shortcuts .display-check{font-size:11px;opacity:.7}
.display-dialog{position:fixed;inset:16px;margin:auto;width:calc(100% - 32px);max-width:500px;height:fit-content;max-height:80vh;padding:20px;border:1px solid #e95191;border-radius:20px;background:#281022;color:#fff0f7;font-family:var(--sans);overflow:auto;overscroll-behavior:contain}
.display-dialog::backdrop{background:#100610c9}
.display-dialog h2{margin:0 0 12px;font-size:22px}
.display-dialog p{font-size:13px;line-height:1.5}
.display-dialog pre{font-size:11px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;max-height:40vh;overflow:auto;user-select:text}
.display-dialog button{min-height:44px;padding:10px 16px;border-radius:14px;margin:8px 8px 0 0;background:#e95191;color:#281022}

/* Card screens share the same shell and safe-area accounting as home. */
@media(max-width:720px),(display-mode:standalone){
 .screen-card .bottom{padding-top:20px}
}

/* Countdown/guess controls must remain visible even when the prompt is long. */
@media(max-width:720px),(display-mode:standalone){
 #app>.screen-countdown,#app>.screen-guessing{height:var(--screen-height);min-height:0;overflow:hidden}
 #app>.screen-countdown>.countdown-content,#app>.screen-guessing>.guess-content{
  flex:1 1 0;min-height:0;overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;touch-action:pan-y pinch-zoom;
  justify-content:flex-start;padding:12px 4px;gap:14px;
 }
 .countdown-content>*,.guess-content>*{flex-shrink:0}
 .countdown-content .countdown-dial{width:min(100%,clamp(160px,calc(var(--app-height,100dvh) * .25),260px));margin:auto 0 0}
 .countdown-content .countdown-prompt{font-size:23px;line-height:1.25}
 .countdown-content #timer-value{font-size:clamp(64px,calc(var(--app-height,100dvh) * .09),84px)}
 .countdown-content .countdown-numbers{gap:8px}
 .countdown-content>.flourish{margin:0 auto auto}
 .screen-countdown>.bottom,.screen-guessing>.bottom{flex:0 0 auto;padding-top:12px}
 .guess-content>.eyebrow{margin-top:12px}
}

/* Timed challenges use the reverse of the same card and keep the same deck/dock. */
.timer-surface .deck-stack{perspective:1200px}
.timer-surface .timer-card{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.timer-card-body{flex:1 1 0;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;overflow:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;padding:12px 0 4px}
.timer-card-body>*{flex-shrink:0}
.timer-card-body .countdown-dial{width:min(100%,220px);margin:0}
/* Balance the countdown between its identity row and the bottom of the card.
   Auto margins collapse on short screens so all content stays scrollable. */
.screen-countdown .countdown-heading{margin-top:auto;font-size:9px;letter-spacing:2.5px;color:var(--pink);text-align:center}
.screen-countdown .timer-card-body>.flourish{margin-bottom:auto}
.timer-card-body .countdown-prompt{font-size:23px;line-height:1.25;margin:0}
.timer-card-body .flourish{width:106px;height:22px;margin:0 auto}
.timer-card-body #timer-value{font-size:80px}
.timer-card-body .countdown-numbers{gap:8px}
.timer-outcome-question{font:13px/1.4 var(--sans);color:var(--lilac);text-align:center;margin-bottom:auto}
.timer-result{margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px}
.timer-result h2{font:500 40px/1.05 var(--serif)}
.timer-result p{font:16px/1.5 var(--sans);color:var(--lilac)}
@media(max-width:720px),(display-mode:standalone){
 #app>.timer-surface{height:var(--screen-height);min-height:0;overflow:hidden}
 #app>.timer-surface>.deck-stack{flex:1 1 0;min-height:0}
 .timer-surface>.bottom{padding-top:20px;flex:0 0 auto}
 .timer-card-body .countdown-dial{width:min(100%,clamp(145px,calc(var(--app-height,100dvh) * .22),220px))}
 .timer-card-body #timer-value{font-size:clamp(58px,calc(var(--app-height,100dvh) * .085),80px)}
}

.guess-card-content{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:24px;width:100%}
.guess-card-content h2{font:500 34px/1.1 var(--serif);overflow-wrap:anywhere;max-width:100%}
.guess-card-content>p:not(.timer-outcome-question){font:500 26px/1.25 var(--serif);overflow-wrap:anywhere;max-width:100%}

/* Review fixes: generous targets, readable names and explicit card actions. */
.game-menu{min-width:44px;min-height:44px}
.card-player-actions{display:flex;align-items:center;justify-content:flex-end;gap:4px;min-width:0;max-width:62%}
.playing-card .card-player-actions .card-player{max-width:none;min-width:0;overflow-wrap:anywhere}
.card-pass{flex:none;min-width:44px;min-height:44px;padding:4px;border:0;background:transparent;color:inherit;font:12px var(--sans);text-decoration:underline;text-underline-offset:3px}
.name-orbit>span{display:block;min-height:0;width:calc(100% - 16px);padding:0;line-height:1.15;font-size:clamp(14px,4.8vw,var(--orbit-name-size,24px));overflow-wrap:anywhere}
.orbit-scene .spin-result strong{overflow-wrap:anywhere}
.round-actions .action-label{min-height:30px;line-height:1.2;max-width:110px;text-align:center;white-space:normal}
@media(max-width:370px){.playing-card .card-player-actions .card-player{font-size:11px;padding:7px 9px}.card-player-actions{max-width:62%}.playing-card .deck-signature{font-size:20px}}
@media(max-width:720px) and (max-height:680px){
 #app>.screen-card{min-height:0}
 .screen-card .deck-stack{min-height:0;margin-top:12px}
 .screen-card .card-reading{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:10px 0 0;padding:8px 0;touch-action:pan-y pinch-zoom}
 .screen-card .card-reading>*{flex-shrink:0}
 .screen-card .card-reading .kind{margin-bottom:12px}
 .screen-card .card-reading .prompt{font-size:25px}
 .screen-card .card-reading .flourish{margin-top:16px}
 .screen-card .bottom{padding-top:12px}
 .screen-card .round-action .action-circle{width:60px;height:60px}
 .screen-card .round-action[data-action=undo] .action-circle{width:44px;height:44px}
 .screen-card .round-action{min-height:94px;gap:6px}
}

/* Optional activity exclusions and continuing challenges. */
.activity-settings{border-top:1px solid #fff0f72b;margin-top:14px;padding-top:12px}
.activity-settings summary{padding:12px 0;cursor:pointer;color:var(--lilac,#e7d9fa);font:14px var(--sans)}
.activity-options{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;padding:10px 0}
.activity-options label{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;font:13px var(--sans);color:#e7d9fa}
.activity-options input{width:22px;height:22px;accent-color:#e94d8f;flex-shrink:0}
.ongoing-challenge{border:0;border-top:1px solid #fff0f72b;background:transparent;color:#e7d9fa;font:12px/1.5 var(--sans);padding:10px 4px;margin-top:12px;width:100%;min-height:44px;cursor:pointer}
.ongoing-challenge span{display:block}.active-effect{display:flex;gap:12px;align-items:center;justify-content:space-between}.active-effect p{font-size:14px}
@media(max-width:350px){.activity-options{grid-template-columns:1fr}}

/* Focus follows the rounded player panel; field geometry never changes on focus. */
.player-field:focus-within{border-color:#e95191;box-shadow:0 0 0 2px #e9519133;background:#e9519109}
.player-field input:focus,.player-field input:focus-visible{outline:none;box-shadow:none;border-bottom-color:#e7d9fa;caret-color:#e95191}
.player-field{transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}

/* Home utilities stay out of the introduction. */
.home-menu{display:grid;place-items:center;width:44px;height:44px;justify-self:end;padding:10px}
.home-menu svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.home-restore{display:block;min-height:44px;margin:4px auto 0;padding:10px 16px;font-size:13px}

/* Grouped settings and supporting screens share the normal page scroller. */
.settings-group{margin:0 0 24px;padding:22px 0 0;border-top:1px solid #fff0f726}
.settings-group h2,.privacy-copy h2{font:500 27px/1.15 var(--serif);margin:0 0 14px;color:var(--blush)}
.settings-link{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:72px;text-align:left;padding:14px 0;border:0;border-bottom:1px solid #fff0f714;background:transparent;color:var(--blush);font:14px/1.4 var(--sans)}
.settings-link strong,.settings-link small{display:block}.settings-link strong{font-weight:500;font-size:15px}.settings-link small{font-size:12px;color:#cbaac2;margin-top:4px}.settings-link>span:last-child{font-size:24px;color:var(--pink)}
.settings-group .toggle-row{padding-block:14px}.settings-group .activity-settings{margin-top:6px}
.access-state{display:flex;gap:12px;align-items:flex-start;padding:6px 0 14px}.access-dot{width:9px;height:9px;border-radius:50%;background:#cbaac2;margin-top:6px;flex:none}.access-dot.is-unlocked{background:var(--pink);box-shadow:0 0 15px #e9519144}.access-state strong{font-size:15px;font-weight:500}.access-state p{font-size:12px;line-height:1.5;color:#cbaac2;margin:5px 0 0}.access-group>.secondary{width:100%}.access-group>.text-nav{min-height:44px;padding:8px 0}
.name-editor label,.feedback-group label{display:block;font:13px/1.5 var(--sans);color:var(--lilac);margin-bottom:8px}.name-editor .player-field input{width:100%}
.help-copy details{border-bottom:1px solid #fff0f726;padding:4px 0}.help-copy summary{cursor:pointer;min-height:56px;padding:18px 0;font:15px/1.4 var(--sans);color:var(--blush)}
.help-copy p,.privacy-copy p,.feedback-group>p{font:14px/1.65 var(--sans);color:#d4b4cc;margin:0 0 16px}.feedback-group{margin-top:28px}.feedback-group textarea{display:block;box-sizing:border-box;width:100%;padding:14px;border:1px solid #fff0f744;border-radius:16px;background:#ffffff06;color:var(--blush);font:16px/1.5 var(--sans);resize:vertical;margin-bottom:16px}.feedback-group textarea:focus{outline:2px solid #e9519177;outline-offset:2px}.feedback-group .secondary{width:100%}.feedback-group label span{opacity:.65}.feedback-group .small-note{font-size:12px;margin-top:14px}.feedback-group [role=status]{font-size:13px;color:var(--lilac);min-height:20px;margin-top:12px}.privacy-copy section{border-top:1px solid #fff0f726;padding-top:22px;margin-bottom:24px}

/* One icon treatment for header navigation, with generous tap targets. */
.topbar .header-icon,.memory-header .header-icon{display:grid;place-items:center;position:relative;width:44px;height:44px;min-width:44px;min-height:44px;padding:10px;border:1px solid #fff0f744;border-radius:50%;background:#421238;color:var(--blush);font:inherit;cursor:pointer}
.header-icon svg{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.topbar .gear-button{justify-self:end}.topbar .back-button{justify-self:start}.header-icon:active{background:#fff0f70c}.header-icon:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

/* During keyboard focus, anchor the shell to the visual viewport's origin.
   Keep the document footprint stable and return to the full CSS viewport on dismissal. */
@media(max-width:720px),(display-mode:standalone){
 html.keyboard-open body{min-height:var(--layout-height,100lvh)}
 html.keyboard-open .device{position:fixed;top:var(--viewport-top,0px);left:0;width:100%;height:var(--app-height);margin:0}
}

/* A visible continuing challenge on both sides of the card. */
.playing-card>.ongoing-challenge{flex:none;display:flex;align-items:center;gap:12px;width:100%;margin:12px 0 0;padding:12px 14px;min-height:62px;text-align:left;border:1px solid #f485b980;border-radius:18px;background:#e9519126;color:var(--blush);box-shadow:0 3px 18px #16061622}
.ongoing-challenge .ongoing-symbol{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--pink);color:var(--plum);font-size:24px}
.ongoing-challenge .ongoing-copy{flex:1;min-width:0}.ongoing-copy strong{display:block;font-size:14px;line-height:1.4;overflow-wrap:anywhere}.ongoing-copy>span{font-size:12px;line-height:1.5;color:var(--lilac)}
.turn-notice{z-index:12;padding:24px;align-items:center}.turn-notice-panel{width:100%;max-width:380px;padding:26px 22px;border:1px solid #e9519180;border-radius:30px;background:linear-gradient(145deg,#451333,#291122);box-shadow:0 20px 80px #10051066}.turn-notice-panel h2{font-size:36px;line-height:1.1;overflow-wrap:anywhere}.turn-notice-panel p{margin:16px 0 24px}.turn-notice-panel .flourish{margin:0 auto 12px}
.stage-nudge-setting{margin:16px 0 6px}
@media(max-height:700px){.playing-card>.ongoing-challenge{min-height:52px;padding:8px 10px;margin-top:8px}.ongoing-copy strong{font-size:12px}.ongoing-copy>span{font-size:11px}.turn-notice-panel{padding:18px}.turn-notice-panel h2{font-size:30px}}

/* Resume is available only after a night has begun. */
.screen-welcome [data-action="resume-night"]:disabled{background:#443641;color:#a89ba5;border:1px solid #766571;box-shadow:none;opacity:1;cursor:default;transform:none}

.ongoing-challenge .ongoing-symbol>svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* The backdrop paints the large viewport without contributing to document size.
   The shell owns layout; #app remains the scroller for long screens.
   Fade from the status-area base colour so its edge never meets a tinted band. */
@media(max-width:720px),(display-mode:standalone){
 body::before{content:"";position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:-1;pointer-events:none;background:linear-gradient(var(--night),transparent 180px),radial-gradient(ellipse at 100% 25%,#a5216920,transparent 55%),radial-gradient(ellipse at 0 70%,#7333b025,transparent 60%),var(--night)}
 body,.device,#app{background:transparent}
}

/* Paint-only stage transition: carry the new colour into the native status area. */
@media(max-width:720px),(display-mode:standalone){
 html.stage-transition-active,html.stage-transition-active body{background:var(--stage-transition-colour)}
 html.stage-transition-active body::before{background:var(--stage-transition-colour)}
}

.display-dialog .display-summary{font:12px/1.5 var(--sans);white-space:pre-wrap;overflow-wrap:anywhere;max-height:none}