/* ModalFrame owns dimensions/navigation; DialogHeading owns title typography.
   Illustrated results share one grid, including growth. No size animations. */
:root {
 --dialog-gap:24px; --dialog-padding:32px; --dialog-content-gap:24px; --dialog-back-size:48px;
 --dialog-small-width:520px; --dialog-list-width:660px; --dialog-wide-width:1120px; --dialog-art-width:960px;
 --dialog-item-radius:12px; --dialog-max-height:calc(100dvh - var(--dialog-gap) * 2);
 --ui-motion-ease:cubic-bezier(.2,.65,.3,1);
}
.modal-open { overflow:hidden; }
/* A locked page has no scrollbar: reserving its gutter leaves a blank strip beside dialogs. */
html:has(.modal-backdrop) { scrollbar-gutter:auto; }
.modal-backdrop { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:var(--dialog-gap); overflow-y:auto; background:#080912c9; backdrop-filter:blur(10px); }
.modal { position:relative; width:100%; max-width:850px; max-height:var(--dialog-max-height); overflow:auto; background:var(--surface); border:1px solid #ffffff25; border-radius:23px; box-shadow:0 25px 100px #0007; outline:none; overscroll-behavior:contain; animation:modal-in 160ms ease-out; }
.modal:focus { outline:none; }
.modal.dialog-small,.modal.dialog-list { display:flex; flex-direction:column; width:min(var(--dialog-small-width),100%); max-width:var(--dialog-small-width); min-height:0; padding:0; overflow:hidden; }
.modal.dialog-list { width:min(var(--dialog-list-width),100%); max-width:var(--dialog-list-width); }
.modal.dialog-wide { width:min(var(--dialog-wide-width),100%); max-width:var(--dialog-wide-width); }
.modal.dialog-illustrated { max-width:var(--dialog-art-width); }
/* Text-only endings must not inherit the wide portrait-dialog frame. */
.modal.ending-modal:not(:has(.ending-art)) { max-width:var(--dialog-small-width); }
.ending-modal:not(:has(.ending-art))>.ending-content { padding:var(--dialog-padding); }
/* Keep heads inside cropped portraits, including during the entrance zoom. Full-image viewers retain contain/center below. */
.modal :is(.portrait-file,.memory-picture) { object-position:center top; transform-origin:center top; }
.modal>.dialog-body { flex:1 1 auto; min-height:0; max-height:var(--dialog-max-height); padding:var(--dialog-padding); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
/* The shared body owns outer spacing; content margins must not add uneven edges. */
.modal>.dialog-body>:first-child { margin-top:0; }
.modal>.dialog-body>:last-child { margin-bottom:0; }
.dialog-body>.dialog-heading { margin-bottom:var(--dialog-content-gap); }
.dialog-body>.confirm-actions { margin-top:var(--dialog-content-gap); }
.dialog-body>:is(.coffee-payment,.developer-notes) { margin-top:0; }
.modal>.modal-back { position:absolute; z-index:20; top:12px; right:12px; left:auto; display:grid; place-items:center; width:var(--dialog-back-size); height:var(--dialog-back-size); padding:0; border:1px solid #ffffff3a; border-radius:50%; background:#131522e8; color:white; }
.modal-back:hover { background:#515267; }
.modal-back .icon { width:26px; height:26px; transform:rotate(180deg); }
[data-theme="light"] .modal { border-color:#c3b7c4; box-shadow:0 25px 100px #28152835; }
[data-theme="light"] .modal>.modal-back { background:#443446ed; color:white; }

.dialog-heading { flex-shrink:0; min-width:0; margin:0 0 20px; text-align:left; }
.dialog-heading .eyebrow { margin:0 0 8px; font-size:10px; line-height:1.5; }
.dialog-heading .dialog-title { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin:0; padding:0; color:var(--ink); font-size:28px; font-weight:900; line-height:1.35; letter-spacing:-.8px; word-break:keep-all; white-space:pre-line; }
.dialog-title>.icon { width:26px; height:26px; flex-shrink:0; color:var(--accent); }
.dialog-title>small { font-size:14px; color:var(--muted); letter-spacing:0; }
.dialog-heading .dialog-description { margin:12px 0 0; padding:0; color:var(--muted); font-size:13px; font-weight:500; line-height:1.8; white-space:pre-line; word-break:keep-all; }
.dialog-heading-with-back { padding-right:36px; }
.dialog-heading-centered { padding-inline:0; text-align:center; }
.dialog-heading-centered .dialog-title { justify-content:center; }
.dialog-heading-centered.dialog-heading-with-back>.eyebrow { margin-inline:36px; min-height:calc(var(--dialog-back-size) + 12px - var(--dialog-padding)); }
.coffee-modal .dialog-heading .dialog-title { font-size:clamp(20px,5.4vw,28px); white-space:nowrap; }
.dialog-body .license-content { padding:0; }
.dialog-body .guide-chapter { margin-top:24px; padding-top:18px; border-top:1px solid var(--line); }
.guide-chapter>h3 { margin:0 0 12px; color:var(--ink); font-size:18px; }

/* The profile frame stays fixed when switching between profile and memories. */
.profile-modal.dialog-illustrated { display:grid; grid-template-columns:44% minmax(0,1fr); grid-template-rows:minmax(0,1fr); height:min(640px,var(--dialog-max-height)); min-height:0; overflow:hidden; }
.profile-art { position:relative; min-width:0; overflow:hidden; isolation:isolate; background:#faf7ef; }
.profile-art>.portrait-full { position:absolute; inset:0; width:100%; height:100%; min-width:0; transform:none; object-fit:cover; animation:portrait-arrive 1000ms var(--ui-motion-ease) both; }
.profile-art::after { content:''; position:absolute; inset:-20% -50%; pointer-events:none; background:linear-gradient(110deg,transparent 43%,#fff4e920 50%,transparent 57%); animation:portrait-light 1400ms 150ms ease-out both; }
.profile-content { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; padding:24px; }
.profile-tabs { display:flex; flex-shrink:0; gap:24px; min-height:36px; border-bottom:1px solid var(--line); margin:0 var(--dialog-back-size) 12px 0; }
.profile-tabs button { display:inline-flex; align-items:center; gap:7px; position:relative; padding:0 0 10px; font-size:16px; font-weight:900; color:var(--muted); white-space:nowrap; }
.profile-tabs button>.icon { width:17px; height:17px; flex-shrink:0; }
.profile-tabs .active { color:var(--accent); }
.profile-tabs .active::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:3px; background:var(--accent); }
.profile-tabs span { font-size:12px; background:#ff8bae15; border-radius:5px; padding:2px 5px; }
.profile-panel { flex:1; min-height:0; overflow:auto; }
.profile-bio { margin:0 0 14px; padding:12px 14px; color:var(--ink); background:var(--surface-raised); border-left:3px solid var(--accent); border-radius:0 10px 10px 0; font-size:14px; font-weight:650; line-height:1.6; }
.profile-facts { margin:0; }
.profile-facts>div { display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:12px; }
.profile-facts dt { flex-shrink:0; color:var(--muted); font-weight:500; }
.profile-facts dd { margin:0; text-align:right; font-weight:700; }
.profile-relation { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; margin:16px 0 8px; gap:8px; }
.profile-relation>span { font-size:13px; color:var(--accent); }
.profile-relation .relationship-meter { flex:1; min-width:100px; margin-top:10px; }
.profile-panel>.primary-btn { width:100%; margin-top:14px; min-height:44px; padding:10px 16px; font-size:16px; }
.profile-memories { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; }
.profile-memories .locked-memory { min-height:0; aspect-ratio:1.12; padding:10px 6px; gap:7px; }
.profile-memories .locked-memory .icon { width:18px; height:18px; }
.profile-memories .locked-memory strong { font-size:12px; }
.profile-memories .locked-memory span { font-size:9px; line-height:1.6; word-break:keep-all; }
.profile-memories .memory-card .memory-art { aspect-ratio:1.12; }
.profile-memories .memory-card>.memory-overlay { padding:9px; }
.profile-memories .memory-overlay small { display:none; }
.profile-memories .memory-card h3 { font-size:13px; }
.profile-memories .memory-card p { font-size:9px; line-height:1.4; }
.profile-memories .memory-card p .icon { width:12px; height:12px; flex-shrink:0; }

/* Result content determines the height; artwork fills its grid cell. */
.result-modal { padding:0; max-width:var(--dialog-small-width); }
.result-modal.dialog-illustrated { display:grid; grid-template-columns:44% minmax(0,1fr); grid-template-rows:minmax(0,1fr); height:auto; min-height:0; overflow:hidden; }
.result-portrait,.growth-result-art { position:relative; width:100%; height:100%; min-width:0; min-height:0; align-self:stretch; overflow:hidden; background:#faf7ef; }
.result-portrait>.portrait-full,.growth-result-art>img { position:absolute; inset:0; display:block; width:100%; height:100%; min-width:0; max-width:none; transform:none; object-fit:cover; }
.growth-result-art>img { object-position:center 25%; }
.result-content { display:flex; flex-direction:column; gap:11px; min-width:0; min-height:0; max-height:calc(var(--dialog-max-height) - 2px); padding:38px 28px 24px; overflow:hidden; }
.result-content>:not(.date-dialogue) { flex-shrink:0; }
.result-heading { margin:0; }
.result-heading .dialog-description { margin-top:10px; font-size:12px; line-height:1.6; }
.result-content>h3 { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0; font-size:21px; line-height:1.4; }
.result-content>h3 small { font-size:11px; font-weight:500; color:var(--muted); letter-spacing:0; }
.date-dialogue { flex:0 1 auto; min-height:0; max-height:calc(5.1em + 26px); margin:0; padding:12px 14px; border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:0 12px 12px 0; background:var(--surface-raised); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; font-size:16px; white-space:pre-line; overflow-wrap:anywhere; }
.date-dialogue p { margin:0; font-size:inherit; font-weight:700; line-height:1.7; word-break:keep-all; }
.result-relationship { display:flex; flex-direction:column; justify-content:center; gap:9px; margin:0; padding:12px 14px; border:1px solid var(--line); border-radius:var(--dialog-item-radius); background:var(--surface-raised); }
.result-relationship>span:not(.relationship-meter) { font-size:12px; font-weight:800; margin:0; }
.result-relationship>.relationship-meter { margin:0; flex-shrink:0; }
.result-relationship .relationship-track { height:10px; }
.result-change-title { display:flex; align-items:center; gap:7px; margin:0; font-size:13px; font-weight:800; line-height:1.5; color:var(--ink); }
.result-change-title .icon { width:17px; height:17px; }
.result-self-change { margin-top:8px; padding-top:20px; border-top:1px solid var(--line); }
.result-self-change>.result-change-title { margin-bottom:16px; }
.result-self-change>.result-change-title .icon { color:var(--muted); }
.result-content .money-change { margin:0; padding:10px 0 0; border:0; }
.result-content .money-change>small { width:100%; }
.result-content .unlock-notice { margin:0; font-size:11px; }
.result-content .memory-unlock-button { width:100%; text-align:left; }
.result-content .new-badge { flex-shrink:0; font-size:10px; letter-spacing:.4px; padding:5px 7px; }
.growth-result>.result-content { min-height:360px; justify-content:center; gap:20px; }
.growth-result .result-self-change { margin-top:0; padding-top:0; border-top:0; }
.modal.encounter-miss { --dialog-small-width:580px; display:block; width:min(var(--dialog-small-width),100%); }
.encounter-miss>.result-content { padding:40px 32px 28px; gap:26px; }
.encounter-miss .result-broken-heart { margin-bottom:18px; }
.encounter-miss .dialog-description { margin-top:16px; }
.encounter-miss .result-self-change { margin-top:0; padding-top:0; border-top:0; }
.encounter-miss .stat-change-meters { gap:24px clamp(24px,4vw,40px); }
.encounter-miss .money-change { padding-top:18px; border-top:1px solid var(--line); }

/* All entrances remain active, including when the OS requests reduced motion. */
.modal-backdrop.reveal-backdrop { padding:0; background:#11121c; backdrop-filter:none; }
.modal.huntreveal-modal { position:fixed; inset:0; width:100%; max-width:none; height:100dvh; max-height:none; padding:0; border:0; border-radius:0; overflow:hidden; background:#11121c; box-shadow:none; animation:none; }
.modal.revealed-result { animation:reveal-result 180ms ease-out both; transform:none; }
.modal.action-result { animation:none; transform:none; }
.is-action-revealing>.result-content { visibility:hidden; pointer-events:none; }
.action-revealed>.result-content { animation:action-result-in 180ms ease-out both; }
.encounter-found>.result-portrait>.portrait-full { animation:portrait-arrive 900ms var(--ui-motion-ease) both; }
.encounter-result .result-content>:not(.result-heading),.encounter-result .result-heading>* { animation:result-item-in 520ms var(--ui-motion-ease) both; animation-delay:var(--item-delay,0ms); }
.encounter-result .dialog-title { --item-delay:100ms; }
.encounter-result .dialog-description { --item-delay:180ms; }
.encounter-result .result-content>h3 { --item-delay:260ms; }
.encounter-result .date-dialogue { --item-delay:340ms; }
.encounter-result .result-relationship { --item-delay:440ms; }
.encounter-result .stat-change-meters,.encounter-result .result-self-change { --item-delay:480ms; }
.encounter-result .money-change { --item-delay:620ms; }
.encounter-result .unlock-notice { --item-delay:700ms; }
.encounter-result .relationship-meter.is-animated .relationship-fill { animation-delay:650ms; }
.encounter-result .relationship-meter.is-animated>.icon { animation-delay:750ms; }
.growth-result.action-revealed .result-heading>* { animation:result-item-in 450ms ease-out both; }
.growth-result.action-revealed .result-self-change { animation:result-item-in 500ms 180ms ease-out both; }
.growth-result.action-revealed .money-change { animation:result-item-in 500ms 520ms ease-out both; }

/* Image viewers are intrinsically sized, independently of the shared dialog frame. */
html:has(.illustration-modal) { scrollbar-gutter:auto; }
.modal.illustration-modal { display:block; width:fit-content; max-width:100%; max-height:var(--dialog-max-height); padding:0; border:0; border-radius:12px; overflow:hidden; background:transparent; }
.modal.illustration-modal>img { display:block; width:auto; height:auto; min-width:0; min-height:0; max-width:calc(100vw - var(--dialog-gap) * 2); max-height:var(--dialog-max-height); aspect-ratio:auto; object-fit:contain; object-position:center; transform:none; }
.illustration-modal>.modal-back { background:#191923dd; color:white; border:1px solid #ffffff70; }
.modal-backdrop:has(.illustration-modal) { overflow:hidden; }
.illustration-modal { touch-action:pan-y pinch-zoom; }
.memory-viewer-navigation>button { position:absolute; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:44px; height:48px; padding:0; border:1px solid #ffffff60; border-radius:12px; background:#191923cf; color:white; }
.memory-viewer-navigation>button:disabled { opacity:.3; }
.memory-viewer-navigation .memory-previous { left:10px; }
.memory-viewer-navigation .memory-next { right:10px; }
.memory-previous .icon { transform:rotate(180deg); }
.memory-position { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); padding:5px 13px; border-radius:20px; background:#191923cf; color:white; font-size:12px; font-variant-numeric:tabular-nums; pointer-events:none; }
.modal.confess-modal.dialog-illustrated { display:grid; grid-template-columns:42% minmax(0,1fr); max-width:740px; padding:0; overflow:hidden; }
.confess-art { position:relative; min-width:0; overflow:hidden; background:var(--surface-raised); }
.confess-art>.portrait { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:portrait-arrive 900ms ease-out both; }
.confess-content { display:flex; flex-direction:column; min-width:0; min-height:400px; max-height:var(--dialog-max-height); padding:38px 28px 28px; overflow:auto; }
.confess-content>.confirm-actions { flex-shrink:0; width:100%; margin-top:auto; padding-top:26px; }
.confess-content .primary-btn { width:100%; }
@media(max-width:800px) {
 :root { --dialog-gap:12px; --dialog-padding:24px; --dialog-content-gap:20px; }
 .modal { border-radius:17px; }
 .profile-modal.dialog-illustrated { grid-template-columns:minmax(0,1fr); grid-template-rows:29% minmax(0,1fr); height:var(--dialog-max-height); }
 .profile-memories { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .profile-memories .memory-card .memory-art,.profile-memories .locked-memory { aspect-ratio:1.15; }
 .profile-memories .memory-card h3,.profile-memories .locked-memory strong { font-size:13px; }
 .profile-memories .memory-card p { font-size:10px; line-height:1.45; }
 .result-modal.dialog-illustrated { --result-art-height:min(190px,23dvh); grid-template-columns:minmax(0,1fr); grid-template-rows:var(--result-art-height) minmax(0,1fr); }
 .result-modal.dialog-illustrated>.result-content { max-height:calc(var(--dialog-max-height) - var(--result-art-height) - 2px); padding:18px 20px; gap:10px; }
 .result-modal.dialog-illustrated .dialog-heading { padding-right:0; }
 .result-content>h3 { font-size:19px; }
 .date-dialogue { font-size:15px; }
 .growth-result>.result-content { min-height:240px; }
}
@media(max-width:600px) {
 .dialog-heading .dialog-title { font-size:24px; }
 .dialog-heading .dialog-description { font-size:12px; }
 .profile-content { padding:15px 18px; }
 .profile-tabs { margin-right:0; margin-bottom:10px; }
 .profile-bio { padding:9px 11px; margin-bottom:10px; font-size:12px; }
 .profile-facts>div { padding:7px 0; font-size:11px; }
 .profile-relation { margin:10px 0 0; }
 .profile-memories { gap:7px; }
 .encounter-miss>.result-content { padding:36px 24px 26px; gap:24px; }
 .modal.confess-modal.dialog-illustrated { grid-template-columns:minmax(0,1fr); }
 .confess-art { height:min(28dvh,190px); }
 .confess-content { min-height:0; max-height:calc(var(--dialog-max-height) - min(28dvh,190px)); padding:22px; }
 .confess-content .dialog-heading { padding-right:0; }
 .confess-content>.confirm-actions { padding-top:20px; }
}
@media(max-height:680px) { :root { --dialog-padding:24px; --dialog-content-gap:20px; } }
@media(max-height:650px) {
 .result-content { padding:18px 20px; gap:8px; }
 .result-heading>.eyebrow { display:none; }
 .result-heading .dialog-title { font-size:22px; }
 .result-content>h3 { font-size:18px; }
 .date-dialogue { font-size:14px; max-height:calc(5.1em + 20px); padding:9px 12px; }
 .result-relationship { padding:9px 12px; }
 .result-content .money-change { padding-top:6px; }
 .encounter-miss>.result-content { padding:28px 24px 22px; gap:18px; }
 .encounter-miss .result-broken-heart { margin-bottom:12px; }
 .encounter-miss .stat-change-meters { row-gap:18px; }
 .encounter-miss .money-change { padding-top:14px; }
 .result-self-change { margin-top:4px; padding-top:14px; }
 .result-self-change>.result-change-title { margin-bottom:12px; }
}
@media(max-width:800px) and (max-height:680px) {
 .result-modal.dialog-illustrated { --result-art-height:min(110px,18dvh); }
 .growth-result>.result-content { min-height:200px; }
}
@media(max-width:800px) and (max-height:740px) {
 .result-modal.dialog-illustrated.encounter-result:has(.result-self-change) { --result-art-height:min(100px,14dvh); }
 .result-modal.dialog-illustrated.encounter-result:has(.result-self-change)>.result-content { gap:8px; padding-block:16px; }
 .result-self-change { margin-top:4px; padding-top:14px; }
 .result-self-change>.result-change-title { margin-bottom:12px; }
}
@media(max-width:360px) { .profile-modal.dialog-illustrated { grid-template-rows:18% minmax(0,1fr); } }