/* Card-led play: editorial type, stage ornaments and labelled round controls. */
.screen-card .playing-card,.screen-handover .playing-card{border-radius:44px;padding:27px 27px 24px;margin-top:20px;overflow:hidden;box-shadow:0 0 0 3px #e951912b,0 14px 35px #10030f60;gap:0}
.screen-card .playing-card:before,.screen-handover .playing-card:before{inset:8px;border-radius:36px;border-color:currentColor;opacity:.3}
.screen-card .playing-card{background:radial-gradient(ellipse at 0 0,#e7d9fa99,transparent 50%),var(--blush)}
.screen-card .playing-card.desire{background:radial-gradient(ellipse at 100% 0,#e9519130,transparent 50%),var(--blush)}
.screen-card .playing-card.heat{background:radial-gradient(ellipse at 100% 100%,#e9519155,transparent 65%),var(--plum);color:var(--blush)}
.card-identity{display:flex;justify-content:space-between;align-items:center;width:100%;gap:12px;position:relative;z-index:1}
.deck-signature{display:flex;align-items:center;gap:9px;font:600 22px/1 var(--serif)}
.playing-card .deck-signature .icon{width:26px;height:30px}
.playing-card .card-player{position:static;margin:0;padding:8px 13px;border:1px solid #42123826;border-radius:30px;font:600 12px/1.3 var(--sans);letter-spacing:.3px;max-width:55%;background:#fff5;overflow-wrap:anywhere}
.card-back .card-player,.heat .card-player{border-color:#fff3;background:#fff08a08}
.card-reading{margin:auto 0;width:100%;padding:35px 0 30px;display:flex;flex-direction:column;align-items:center}
.playing-card .kind{font:600 10px/1.3 var(--sans);letter-spacing:2.7px;opacity:.65;margin:0 0 23px;display:flex;align-items:center;gap:12px}
.playing-card .kind:before,.playing-card .kind:after{content:'';height:1px;width:23px;background:currentColor;opacity:.35}
.playing-card .prompt{font:600 36px/1.12 var(--serif);letter-spacing:-.65px;margin:0;padding:0;text-wrap:pretty}
.card-reading .flourish{margin-top:30px;width:110px;height:25px;color:var(--pink)}
.card-foot{display:flex;justify-content:center;align-items:center;min-height:32px;width:100%}
.card-whisper{font-size:9px;letter-spacing:2.4px;opacity:.5}
.card-foot .timer{margin:0;min-height:40px;font-size:11px;padding:8px 13px;border-radius:30px}
.heat .timer{color:var(--blush);border-color:#fff4;background:#fff1}
.screen-card .bottom{padding-top:22px;gap:12px}
.round-actions{display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;max-width:310px;width:100%;margin:0 auto;gap:18px}
.round-action{border:0;background:none;color:var(--lilac);padding:0;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:100px;justify-content:center;touch-action:manipulation}
.action-circle{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#3a1932;border:1px solid #e7d9fa55;box-shadow:0 8px 16px #10020c30;transition:transform .22s,box-shadow .22s,background .22s}
.action-circle svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.action-label{font-size:11px;letter-spacing:.3px;font-weight:500}
.main-action{color:var(--blush)}
.main-action .action-circle{width:82px;height:82px;color:var(--plum);background:var(--pink);border:1px solid #ff9ec9;box-shadow:0 0 26px #e9519133,0 8px 22px #14031155}
.main-action .action-circle svg{width:35px;height:35px}
.main-action[data-action=play] svg{fill:currentColor;stroke-width:1}
.round-action[data-action=pass]{color:var(--pink)}
.round-action[data-action=pass] .action-circle{border-color:#e9519166}
.round-action:hover .action-circle{transform:translateY(-3px);box-shadow:0 0 22px #e9519140}
.round-action:active .action-circle{transform:scale(.89)}
.round-action:focus-visible{outline:none}
.round-action:focus-visible .action-circle{outline:3px solid var(--lilac);outline-offset:5px}
.screen-card .small-note{font-size:10px;color:#c9a1bc}
.card-back .card-identity{position:absolute;top:27px;left:27px;width:calc(100% - 54px)}
.card-back .back-art{display:flex;flex-direction:column;align-items:center;gap:24px;margin:auto 0;padding-top:35px}
.card-back .back-art>.icon{width:116px;height:116px}
.card-back .back-caption{font-size:9px;line-height:1.7;letter-spacing:2px;max-width:230px;margin-top:auto;padding-top:20px}
@media(max-width:370px){.screen-card .playing-card,.screen-handover .playing-card{padding:24px}.playing-card .prompt{font-size:31px}.round-actions{gap:12px}.deck-signature{font-size:20px}}
@media(max-height:820px) and (max-width:720px){.screen-card .playing-card,.screen-handover .playing-card{min-height:310px;margin-top:16px;padding:23px}.playing-card .prompt{font-size:30px}.card-reading{padding:25px 0 20px}.playing-card .kind{margin-bottom:17px}.card-reading .flourish{margin-top:20px}.screen-card .bottom{padding-top:18px;gap:8px}.action-circle{width:56px;height:56px}.main-action .action-circle{width:72px;height:72px}.round-action{min-height:92px;gap:8px}.card-back .card-identity{top:23px;left:23px;width:calc(100% - 46px)}}

/* A timed challenge becomes a dedicated, automatically running countdown. */
.countdown-content{flex:1;display:flex;flex-direction:column;align-items:center;padding:27px 8px 15px;justify-content:space-between;gap:22px}
.countdown-content .card-identity{padding:0 5px}
.countdown-content .card-player{margin:0;border:1px solid #fff3;border-radius:24px;padding:9px 15px;color:var(--blush)}
.countdown-content .deck-signature .icon{width:27px;height:30px;color:var(--pink)}
.countdown-dial{position:relative;width:min(100%,310px);aspect-ratio:1;margin:auto 0 0;flex:none;filter:drop-shadow(0 0 24px #e9519120)}
.countdown-dial>svg{width:100%;height:100%;fill:none;stroke-width:2;transform:rotate(-90deg)}
.dial-track{stroke:#e9519126}
.dial-progress{stroke:var(--pink);stroke-width:3;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .35s linear}
.countdown-numbers{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.countdown-numbers .eyebrow{font-size:9px;letter-spacing:2.5px;color:var(--pink)}
#timer-value{font:500 94px/1 var(--serif);letter-spacing:-4px;font-variant-numeric:tabular-nums;color:var(--blush)}
#countdown-status{font-size:12px;color:#dfbbd4}
.countdown-dial.complete{filter:drop-shadow(0 0 30px #e9519166)}
.countdown-prompt{font:500 25px/1.25 var(--serif);text-align:center;max-width:330px;text-wrap:pretty;margin-top:4px}
.countdown-content>.flourish{width:110px;height:25px;margin:0 auto auto}
.screen-countdown .bottom{padding-top:18px;gap:12px}
@media(max-height:820px) and (max-width:720px){.countdown-content{padding-top:20px;gap:15px}.countdown-dial{width:240px}.countdown-prompt{font-size:22px}#timer-value{font-size:78px}.countdown-numbers{gap:8px}}

/* Two main choices with a smaller, centred return control. */
.card-actions{grid-template-columns:1fr 64px 1fr;gap:22px;max-width:320px;align-items:center}
.card-actions .round-action[data-action=pass] .action-circle{width:82px;height:82px;background:var(--lilac);border-color:#fff8;color:var(--plum);box-shadow:0 8px 22px #14031155}
.card-actions .round-action[data-action=pass]{color:var(--blush)}
.card-actions .round-action[data-action=pass] svg{width:34px;height:34px}
.card-actions .round-action[data-action=back-card]{color:#d2acc6}
.card-actions .round-action[data-action=back-card] .action-circle{width:46px;height:46px;border-color:#e7d9fa40;background:#ffffff06;box-shadow:none}
.card-actions .round-action[data-action=back-card] svg{width:22px;height:22px}
.card-actions .round-action[data-action=back-card] .action-label{font-size:10px}
.swipe-hint{text-align:center;color:#c8a0ba;font-size:10px;letter-spacing:.5px;margin:0;min-height:16px}
.screen-card article.playing-card{touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}
.screen-card article.dragging{cursor:grabbing;will-change:transform}
.swipe-stamp{position:absolute;top:95px;left:50%;transform:translateX(-50%) rotate(-8deg);border:2px solid var(--plum);border-radius:9px;padding:10px 20px;color:var(--plum);background:var(--pink);font:700 21px var(--sans);letter-spacing:3px;opacity:0;pointer-events:none;z-index:4}
.swipe-drink .swipe-stamp{background:var(--lilac);transform:translateX(-50%) rotate(8deg)}
@media(max-height:820px) and (max-width:720px){.card-actions .round-action[data-action=pass] .action-circle{width:72px;height:72px}}
@media(max-width:370px){.card-actions{gap:14px;grid-template-columns:1fr 54px 1fr}}

/* Three moods, independent of the number of cards in the deck. */
/* Matching ovals distinguish completed, current and upcoming stages. */
.stage-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:12px 0 0;min-height:44px;flex:none;align-items:center}
.stage-progress .stage-step{min-width:0;text-align:center;font:500 14px/1 var(--sans);letter-spacing:.2px;color:#bc92ae}
.stage-progress .stage-pill{display:flex;align-items:center;justify-content:center;gap:5px;box-sizing:border-box;width:100%;height:44px;min-height:44px;padding:0 6px;margin:0;border:1px solid #e7d9fa40;border-radius:24px;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;white-space:nowrap;box-shadow:none}
.stage-progress .stage-current{position:relative;isolation:isolate;overflow:hidden;border-color:var(--pink);background:#e951911c;color:#ffafd3;font-weight:700}
.stage-current::before{content:"";position:absolute;z-index:-1;inset:0 auto 0 0;width:var(--stage-progress,0%);background:#e9519145;transition:width 1s linear}
.stage-progress .stage-next,.stage-progress .stage-lower,.stage-progress .stage-locked{color:var(--lilac);cursor:pointer}
.stage-progress button.stage-pill:hover{background:#fff0f708;color:var(--blush)}
.stage-progress .stage-completed{background:#e9519133;border-color:#e951914d;color:#ead3e0}
.stage-progress button.stage-completed:hover{background:#e9519145}
.stage-progress button.stage-pill:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.stage-chevron{width:10px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:400px){.stage-progress{gap:8px}}
@media(prefers-reduced-motion:reduce){.stage-current::before{transition:none}}

.card-back .back-player-name{font:500 30px/1.2 var(--serif);color:var(--blush);letter-spacing:.3px;max-width:100%;overflow-wrap:anywhere;margin-top:-8px}

/* Full-library flow and refined mobile typography. */
.brand svg{overflow:visible}
.card-actions .round-action[data-action=undo]{color:#d2acc6}
.card-actions .round-action[data-action=undo] .action-circle{width:46px;height:46px;border-color:#e7d9fa40;background:#ffffff06;box-shadow:none}
.card-actions .round-action[data-action=undo] svg{width:22px;height:22px}
.card-actions .round-action[data-action=undo] .action-label{font-size:11px}
.card-player{font-size:13px!important}
.card-whisper{font-size:11px;line-height:1.5;letter-spacing:.4px;text-transform:none;opacity:.7;max-width:270px}
.playing-card .kind{font-size:11px;letter-spacing:2px}
.swipe-hint{font-size:11px;letter-spacing:.2px}
.small-note{font-size:12px}
.screen-card .small-note{font-size:12px}
.screen-handover .card-back{cursor:pointer;min-height:370px}
.screen-handover .back-art{padding:0;flex:1;justify-content:center;gap:24px;margin:0;width:100%}
.screen-handover .bottom{padding-top:22px;gap:12px}
.screen-handover .small-note{font-size:12px}
.screen-handover .back-player-name{font-size:32px}
.screen-transition .centerpiece>div>.icon{width:90px;height:90px;margin-top:24px}
.session-length{margin-top:24px}
.session-length>.eyebrow{font-size:10px;display:block;margin-bottom:12px}
.length-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.length-options button{border:1px solid #dfb5cf50;background:#fff05a00;color:var(--blush);padding:13px 5px;border-radius:16px;font-size:12px;line-height:1.4;min-height:64px}
.length-options small{display:block;color:#cba7be;font-size:11px;margin-top:3px}
.length-options button[aria-pressed=true]{background:var(--lilac);color:var(--plum);border-color:var(--lilac)}
.length-options button[aria-pressed=true] small{color:var(--plum)}
.extras{margin:18px 3px 0;color:#d2acc6;font-size:12px}
.extras .card-settings-title{font:600 12px/1.5 var(--sans);color:var(--lilac);margin:0 0 14px}
.extras .toggle-row{margin:6px 0 14px}
.screen-mood .intro{padding-top:18px;padding-bottom:18px}
.screen-mood .intro h1{margin-bottom:0}
.choice-flash{position:absolute;inset:0;z-index:8;background:#281022f5;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;color:var(--lilac)}
.choice-flash svg{width:70px;height:70px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.choice-flash span{font:500 44px var(--serif)}
.guess-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:25px 8px;text-align:center}
.guess-content .card-identity{margin-bottom:auto}
.guess-content>.eyebrow{margin-top:40px;color:var(--pink)}
.guess-content h1{font:500 44px/1.08 var(--serif);overflow-wrap:anywhere;max-width:100%}
.guess-content p{font:500 26px/1.25 var(--serif);text-wrap:pretty}
.guess-content>.flourish{margin-bottom:auto}
.guess-content .card-player{border:1px solid #fff3;border-radius:22px;padding:9px 13px;margin:0}
.guess-content .deck-signature .icon{width:27px;height:30px;color:var(--pink)}
.closing-prompt{font:500 26px/1.25 var(--serif)!important;color:var(--blush)!important;margin-top:24px!important}
.toast .secondary{margin-bottom:12px}
.screen-finish .bottom{gap:12px}
@media(max-height:820px) and (max-width:720px){.screen-handover .card-back{min-height:310px}.screen-handover .bottom{padding-top:18px;gap:8px}.screen-mood .mood-options{gap:8px}.session-length{margin-top:18px}.screen-mood .intro h1{font-size:34px}.guess-content{gap:18px}.guess-content h1{font-size:36px}.guess-content p{font-size:23px}}
@media(prefers-reduced-motion:reduce){.choice-flash{display:none}}
.library-picker{display:block;font-size:12px;color:#d4b8ce;margin-top:28px}
.library-picker select{display:block;width:100%;margin-top:8px;padding:10px;background:#281022;color:#fff0f7;border:1px solid #e9519155;border-radius:10px;font:12px var(--sans)}

/* Home-screen app: use the full window, with native safe-area spacing. */
@media (display-mode:standalone){
 body{display:block;padding:0;background:var(--night)}
 .studio,.device-status,.home-indicator{display:none}
 .device{width:100%;min-height:100dvh;border-radius:0;box-shadow:none;overflow:visible}
 #app{min-height:100dvh;padding:env(safe-area-inset-top,0px) 24px max(18px,env(safe-area-inset-bottom,0px))}
 .screen{min-height:calc(100dvh - env(safe-area-inset-top,0px) - max(18px,env(safe-area-inset-bottom,0px)))}
}

.version-label{font-size:11px;letter-spacing:1px;color:var(--lilac)}
.version-swap{display:block;margin:10px auto 0;text-decoration:underline;text-underline-offset:4px}

/* Two concealed cards form a continuous deck under the active prompt. */
.deck-stack{position:relative;flex:1;display:grid;min-height:0;margin-top:20px;margin-bottom:24px;isolation:isolate}
.screen-card .deck-stack>article.playing-card{grid-area:1/1;z-index:3;margin-top:0;min-height:310px;will-change:transform}
.deck-backing{position:absolute;inset:0;border-radius:44px;border:1px solid #e9519180;background:var(--blush);box-shadow:0 4px 15px #10030f40;transform-origin:center bottom;display:grid;place-items:center;pointer-events:none}
.deck-backing:after{content:'';position:absolute;inset:8px;border:1px solid #42123830;border-radius:36px}
.deck-backing .icon{width:64px;height:64px;color:var(--plum);opacity:.16}
.deck-backing.near{z-index:2;transform:translateY(12px) scale(.96);background:#f4e4f6}
.deck-backing.far{z-index:1;transform:translateY(24px) scale(.92);background:var(--lilac)}
.screen-card .deck-stack:has(.heat) .deck-backing{background:#421238;color:var(--blush)}
.screen-card .deck-stack:has(.heat) .deck-backing .icon{color:var(--lilac)}
.screen-card .bottom{padding-top:8px}
@media(max-height:820px) and (max-width:720px){.deck-stack{margin-top:16px}.screen-card .deck-stack>article.playing-card{min-height:280px}.screen-card .bottom{padding-top:8px}}

.memories-open{overflow:hidden}
.memories-overlay{position:fixed;inset:0;z-index:100;background:#281022;color:var(--blush);overflow:auto;padding:max(18px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom));font-family:var(--sans)}
.memory-header{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:540px;margin:0 auto 20px}
.memory-header h1{font:500 29px var(--serif);text-align:center}.memory-header button{border:0;background:none;color:var(--lilac);min-width:55px;min-height:48px}.memory-header>span{width:55px}
.memory-body,.memory-error{max-width:540px;margin:auto}.memory-body{display:grid;gap:18px}.memory-error{color:#ffb9d5;font-size:14px;line-height:1.5;padding-top:16px}
.capture-prompt{font:500 23px/1.25 var(--serif);text-align:center;max-width:440px;margin:auto}
.camera-view,.capture-review{--media-ratio:.75;position:relative;justify-self:center;width:min(100%,calc(54dvh * var(--media-ratio)));aspect-ratio:var(--media-ratio);border-radius:28px;overflow:hidden;background:transparent;isolation:isolate}
.camera-view{box-shadow:0 0 0 1px #e9519150; background:#42123840}
.camera-view video,.capture-review img,.capture-review video{width:100%;height:100%;object-fit:contain;display:block}
.camera-status{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);background:#281022dd;border-radius:20px;padding:8px 15px;white-space:nowrap;font-size:12px}
.camera-status[hidden]{display:none}
.camera-controls{display:grid;grid-template-columns:56px 112px 56px;justify-content:center;align-items:center;gap:26px;padding:12px 0 8px}
.camera-controls button{display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.camera-controls svg{width:30px;height:32px;fill:none}
.camera-switch{width:52px;height:52px;background:#e7d9fa0c;border:1px solid #e7d9fa35;color:var(--lilac)}
.camera-switch svg{width:25px;height:27px}
/* Compact version of the GO button's three concentric rings. */
.camera-shutter{position:relative;width:112px;height:112px;background:radial-gradient(circle,#da2a8e38 0,#7424b81f 48%,transparent 72%);border:0;color:var(--blush);isolation:isolate}
.camera-shutter:before,.camera-shutter:after,.shutter-ring{content:"";position:absolute;border-radius:50%;pointer-events:none}
.camera-shutter:before{inset:0;border:1px solid #e9519140;box-shadow:0 0 24px #e9519118}
.camera-shutter:after{inset:9px;border:1px solid #b76be333}
.shutter-ring{inset:18px;border:1px solid #e9519170;background:#e9519112}
.shutter-core{position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:1px solid #ff95c780;background:#421238ed;box-shadow:0 0 22px #e9519145;transition:transform .2s ease}
.camera-shutter:active .shutter-core{transform:scale(.92)}
.camera-shutter:disabled,.camera-switch:disabled{opacity:.4;cursor:default}
.camera-shutter.recording:before{animation:record-glow 1.8s ease-in-out infinite}
@keyframes record-glow{50%{opacity:.4;transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.camera-shutter.recording:before{animation:none}}
.camera-controls button:focus-visible{outline:2px solid var(--lilac);outline-offset:4px}
.memory-note{font-size:12px;line-height:1.6;color:#d6b3cd;text-align:center}
.capture-review{width:min(100%,calc(62dvh * var(--media-ratio)))}
.memory-actions{display:grid;gap:10px}
.empty-nights{text-align:center;padding:55px 20px}.empty-nights>span{font:80px var(--serif);color:var(--pink)}.empty-nights h2{font:500 32px var(--serif);margin:18px 0}.empty-nights p{font-size:14px;color:#d6b3cd;line-height:1.6}
.night-date{font:500 25px var(--serif);margin-top:15px}.memory-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.memory-tile{aspect-ratio:1;border:1px solid #e9519170;border-radius:24px;background:radial-gradient(at 90% 0,#e9519140,transparent),#421238;color:var(--blush);display:flex;flex-direction:column;justify-content:center;gap:12px;align-items:center}.memory-tile span{font:500 24px var(--serif)}.memory-tile small{color:var(--lilac)}
.delete-confirm{padding:20px;border:1px solid var(--pink);border-radius:20px;display:grid;gap:12px;text-align:center}

/* Give the stack and controls distinct space, with softer depth behind the prompt. */
.screen-card .bottom{padding-top:56px;gap:0}
.deck-backing.near{opacity:.65}
.deck-backing.far{opacity:.3}
@media(max-height:820px) and (max-width:720px){.screen-card .bottom{padding-top:36px}}

/* Match the two action icons and let the prompt stand on its own. */
.main-action[data-action=play] .action-circle svg{fill:none;stroke-width:1.8;width:34px;height:34px}
.screen-card .deck-stack{margin-top:36px}
@media(max-height:820px) and (max-width:720px){.screen-card .deck-stack{margin-top:28px}}

/* Reuse the brand stage motifs for the primary card action. */
.main-action[data-action=play] .action-circle .stage-action-icon{width:38px;height:38px;fill:currentColor;stroke:none}

/* A card owns horizontal dragging; the game chrome never pans with a touch. */
.screen-card article.playing-card{touch-action:pinch-zoom;-webkit-touch-callout:none;transform-style:flat}
html.card-view,html.card-view body{overscroll-behavior:none}
html.card-view #app{touch-action:pinch-zoom}
@media(max-width:720px),(display-mode:standalone){
 html.card-view,html.card-view body{height:100%;overflow:hidden}
 html.card-view .device{height:100dvh;min-height:0;overflow:hidden}
 html.card-view #app{height:100dvh;min-height:0;overflow:hidden}
 html.card-view .screen-card{min-height:0;height:100%;flex:1}
}

/* A consistent Heat palette across all stage cards. */
.screen-card .playing-card.spark,.screen-card .playing-card.desire,.screen-card .playing-card.heat{background:radial-gradient(ellipse at 100% 100%,#e9519155,transparent 65%),var(--plum);color:var(--blush);border-color:var(--pink);box-shadow:0 0 0 4px #a22b683a,0 10px 30px #0003}
.screen-card .playing-card:before{border-color:currentColor}
.screen-card .card-player{border-color:#fff3;background:#fff08a08}
.screen-card .timer{color:var(--blush);border-color:#fff4;background:#fff1}
.screen-card .deck-stack .deck-backing{background:var(--plum);color:var(--blush)}
.screen-card .deck-stack .deck-backing .icon{color:var(--lilac)}
.mini-card.spark,.mini-card.desire,.mini-card.heat{background:radial-gradient(ellipse at 100% 100%,#e9519155,transparent 65%),var(--plum);color:var(--blush)}
/* Portrait framing is deliberate, independent of Safari's source stream shape. */
.camera-view{--media-ratio:.75;width:min(100%,calc(58dvh * .75));aspect-ratio:3/4}
.camera-view video{object-fit:cover}

/* The phone window stays still. Only overflowing content gets its own scroll. */
@media(max-width:720px),(display-mode:standalone){
 html,body{height:100%;overflow:hidden;overscroll-behavior:none}
 body{position:fixed;inset:0;width:100%;min-height:0}
 .device,html.card-view .device{height:var(--app-height,100dvh);min-height:0;overflow:hidden}
 #app,html.card-view #app{height:var(--app-height,100dvh);min-height:0;overscroll-behavior:none}
 #app{overflow-x:hidden;overflow-y:auto;touch-action:pan-y pinch-zoom}
 .screen:not(.screen-card){flex:1 0 auto;min-height:100%}
 .screen>.topbar,.screen>.bottom{flex-shrink:0}
 .memories-overlay{bottom:auto;height:var(--app-height,100dvh);overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;touch-action:pan-y pinch-zoom}
 .toast{overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;justify-content:safe center}
 .toast>*{flex-shrink:0}
}
/* In a very short window, preserve readable cards and reachable controls. */
@media(max-width:720px) and (max-height:650px){
 html.card-view #app{overflow-y:auto;touch-action:pan-y pinch-zoom}
 html.card-view .screen-card{min-height:700px;height:auto;flex:1 0 auto}
 .screen-card article.playing-card{touch-action:pan-y pinch-zoom}
}

.mini-outcomes{display:grid;gap:12px;text-align:center}.mini-outcomes>p{font-size:14px;color:var(--lilac)}.mini-outcomes>div{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mini-outcomes button{min-height:48px}

/* Portrait viewfinder above a dedicated, centred capture dock. */
.memories-overlay.capture-full{--capture-top:max(10px,var(--safe-top,0px));--capture-bottom:max(10px,var(--safe-bottom,0px));--capture-dock:112px;padding:var(--capture-top) 0 var(--capture-bottom);height:var(--app-height,100dvh);overflow:hidden;display:grid;place-items:center;background:#21101e}
.capture-full .memory-body{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;position:relative;width:100%;height:100%;min-height:0;max-width:none;margin:0}
.capture-full .camera-view{--media-ratio:.5625;width:min(100%,540px,calc((var(--app-height,100dvh) - var(--capture-top) - var(--capture-bottom) - var(--capture-dock) - 8px) * .5625));aspect-ratio:9/16;flex:none;margin:0 auto;border-radius:26px;box-shadow:none}
.capture-full .camera-view:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(#18081575,transparent 24%,transparent 72%,#18081590)}
.capture-full .camera-view>video{position:absolute;inset:0;object-fit:cover}
.camera-top{position:absolute;left:16px;right:16px;top:14px;display:flex;justify-content:space-between;align-items:center;z-index:3;color:#fff0f7}
.camera-top>span{font:600 11px var(--sans);letter-spacing:2px;text-shadow:0 1px 10px #0009}
.camera-top button{display:grid;place-items:center;min-width:44px;min-height:44px;padding:8px;border:0;border-radius:50%;background:#28102255;color:#fff0f7;font-size:12px;backdrop-filter:blur(8px)}
.camera-top svg{width:28px;height:30px;fill:none}
.capture-full .camera-controls{position:relative;flex:none;width:min(100%,540px);height:var(--capture-dock);z-index:3;grid-template-columns:1fr var(--capture-dock) 1fr;gap:12px;padding:0 24px}
.capture-full .camera-switch{justify-self:center;background:#28102270;color:#fff0f7;border-color:#fff0f750;backdrop-filter:blur(8px)}
.capture-full .camera-status{top:72px;bottom:auto;z-index:3;background:#281022b8}
.capture-full .capture-prompt{position:absolute;top:115px;left:20px;right:20px;padding:18px;background:#281022e8;backdrop-filter:blur(16px);border-radius:20px;font-size:22px;z-index:4;max-height:calc(100% - 265px);overflow:auto;overscroll-behavior:contain}
.capture-full .capture-prompt[hidden]{display:none}
.capture-full .memory-error:not(:empty){position:absolute;left:20px;right:20px;bottom:170px;z-index:5;background:#281022ed;border-radius:16px;padding:16px}
.capture-full .memory-body>[data-m=retry]{position:absolute;bottom:135px;width:180px;left:calc(50% - 90px);z-index:6}
@media(max-height:600px){.memories-overlay.capture-full{--capture-dock:88px}.capture-full .camera-shutter{width:88px;height:88px}.capture-full .camera-controls{grid-template-columns:1fr 88px 1fr;padding:0 12px;gap:4px}.capture-full .shutter-core{width:44px;height:44px}.capture-full .shutter-core svg{width:24px;height:26px}.capture-full .camera-switch{width:44px;height:44px}}

/* A quiet countdown badge; full clothing-challenge details live in the menu. */
.game-menu{position:relative}.effect-badge{position:absolute;right:-3px;top:0;min-width:18px;height:18px;border-radius:50%;background:var(--pink);color:var(--plum);font-size:11px;font-weight:700;display:grid;place-items:center}
.active-effect{font-size:14px;line-height:1.5;margin:0 0 10px;color:var(--lilac)}

#countdown-status{max-width:230px;text-align:center;line-height:1.4}

.version-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.version-options button{min-height:44px;border:1px solid #e7d9fa55;border-radius:12px;background:transparent;color:var(--lilac);font-size:14px}
.version-options button[aria-pressed=true]{background:var(--pink);color:var(--plum);border-color:var(--pink);font-weight:600}

/* One collection per local date, regardless of how many games were played. */
.night-group{display:grid;gap:12px}.night-group .night-date{margin:10px 0 0}.night-count{margin:0 0 4px;color:var(--lilac);font-size:12px}.delete-confirm button{min-height:48px}

.build-number{font-size:11px!important;letter-spacing:.06em;color:#d1a7c4;text-align:center;margin:14px 0 0!important}.screen-settings>.toggle-row{padding:20px 0;border-bottom:1px solid #e7d9fa20}.screen-settings .toggle-row>span{max-width:75%}.screen-settings .toggle-row small{display:block;font-size:12px;line-height:1.5;margin-top:5px;color:#d1a7c4}.screen-settings .bottom{padding-top:28px}

/* Brief acknowledgement between a passed card and the next turn. */
.playing-card.passing>:not(.pass-notice){visibility:hidden}
.pass-notice{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:28px;pointer-events:none;color:var(--blush);font:500 38px/1.15 var(--serif);text-align:center;overflow-wrap:anywhere}
.pass-notice-icon{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--lilac);color:var(--plum);box-shadow:0 0 0 10px #e7d9fa12,0 0 0 22px #e7d9fa07}
.pass-notice-icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}