/* Component styles, collected in original cascade order. */
.modal-open {overflow:hidden}
.modal-backdrop {position:fixed;inset:0;background:#080912c9;backdrop-filter:blur(10px);z-index:100;display:flex;align-items:center;justify-content:center;padding:28px;overflow-y:auto}
.modal {width:100%;max-width:850px;max-height:calc(100dvh - 56px);overflow:auto;position:relative;background:var(--surface);border:1px solid #ffffff25;border-radius:23px;box-shadow:0 25px 100px #0007;outline:none;overscroll-behavior:contain;animation:modal-in .16s ease-out}
.modal-close {position:absolute;z-index:5;top:16px;right:16px;width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#131522c9;border:1px solid #ffffff3a;color:white}
.modal-close:hover {background:#515267}
.modal-close[aria-label="이전 화면으로"] .icon {transform:rotate(180deg)}
.modal-heading {margin-bottom:26px;padding-right:50px}
.modal-heading h2 {font-size:36px;margin-top:6px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.modal-heading h2>span {font-size:24px;letter-spacing:-1px;color:var(--accent)}
.modal-heading h2 small {font-size:14px;color:var(--muted)}
.modal-heading p {font-size:14px;color:var(--muted);margin-top:10px}
.profile-modal {display:grid;grid-template-columns:.9fr 1.1fr;max-width:900px;min-height:600px}
.profile-art {position:relative;overflow:hidden;min-width:0;background:#33303d}
.result-portrait {position:relative;overflow:hidden;min-width:0;background:#33303d}
.profile-art>.portrait {position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:auto;min-width:100%;aspect-ratio:4/5}
.result-portrait>.portrait {position:absolute;top:0;left:50%;transform:translateX(-50%);height:100%;width:auto;min-width:100%;aspect-ratio:4/5}
.profile-art:after {content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#1b1929e8)}
.profile-art-caption {position:absolute;bottom:27px;left:28px;right:20px;z-index:1}
.profile-art-caption>span {font-size:10px;font-weight:900;letter-spacing:2px}
.profile-art-caption h2 {font-size:38px;margin:4px 0 8px}
.profile-art-caption p {font-size:13px}
.profile-content {padding:32px 30px}
.profile-tabs {display:flex;gap:25px;border-bottom:1px solid var(--line);margin:5px 35px 22px 0}
.profile-tabs button {padding:0 0 13px;font-size:17px;font-weight:900;position:relative;color:var(--muted);white-space:nowrap}
.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-bio {font-size:14px;color:var(--muted);line-height:1.8;margin:26px 0}
.profile-facts {margin:0}
.profile-facts>div {display:flex;gap:10px;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:12px}
.profile-facts dt {color:var(--muted);font-weight:500;flex-shrink:0}
.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:24px 0 20px;gap:13px}
.profile-relation>span {font-size:13px;color:var(--accent)}
.profile-relation strong {font-size:26px}
.profile-relation small {font-size:12px;color:var(--muted)}
.profile-relation .relation-bar {width:100%;height:6px}
.profile-content>.primary-btn {width:100%;font-size:16px;min-height:50px}
.profile-memories {display:grid;grid-template-columns:1fr 1fr;gap:12px}
.profile-memories .memory-card h3 {font-size:15px}
.profile-memories .memory-card p {font-size:10px}
.profile-memories .memory-card>div:last-child {padding:12px}
.result-modal {display:flex;max-width:840px}
.result-portrait {width:40%;flex-shrink:0;min-height:500px}
.result-content {flex:1;padding:44px 32px 32px;min-width:0}
.result-content>h2 {font-size:32px;margin:14px 0 18px}
.result-content>h3 {font-size:22px;display:flex;gap:10px;align-items:center;margin-bottom:15px}
.result-content>h3 small {font-size:11px;font-weight:500;color:var(--muted);letter-spacing:0}
.result-content>p {font-size:14px;color:var(--muted);line-height:1.9}
.result-content>.primary-btn {width:100%;margin-top:28px;font-size:17px}
.result-modal:not(:has(.result-portrait)) {max-width:520px}
.modal:focus {outline:none}
@media(max-width:820px) {
.profile-modal {grid-template-columns:.8fr 1.2fr}
}
@media(max-width:820px) {
.profile-content {padding:30px 23px}
}
@media(max-width:820px) {
.profile-art-caption {left:20px}
}
@media(max-width:820px) {
.profile-art-caption h2 {font-size:31px}
}
@media(max-width:820px) {
.result-content {padding:40px 25px 28px}
}
@media(max-width:820px) {
.result-content>h2 {font-size:28px}
}
@media(max-width:820px) {
.result-portrait {width:36%}
}
@media(max-width:820px) {
.result-content .neglect-report>div {max-height:140px}
}
@media(max-width:820px) {
.modal-backdrop {padding:20px}
}
@media(max-width:820px) {
.modal {max-height:calc(100dvh - 40px)}
}
@media(max-width:540px) {
.modal-backdrop {padding:12px}
}
@media(max-width:540px) {
.modal {max-height:calc(100dvh - 24px);border-radius:17px}
}
@media(max-width:540px) {
.modal-close {width:34px;height:34px;top:12px;right:12px}
}
@media(max-width:540px) {
.modal-close .icon {width:18px;height:18px}
}
@media(max-width:540px) {
.modal-heading {padding-right:25px;margin-bottom:20px}
}
@media(max-width:540px) {
.modal-heading h2 {font-size:28px;gap:10px}
}
@media(max-width:540px) {
.modal-heading h2>span {font-size:19px}
}
@media(max-width:540px) {
.modal-heading h2 small {font-size:11px}
}
@media(max-width:540px) {
.modal-heading p {font-size:11px}
}
@media(max-width:540px) {
.profile-modal {display:block}
}
@media(max-width:540px) {
.profile-art {height:260px}
}
@media(max-width:540px) {
.profile-art>.portrait {height:auto;width:100%;min-width:0;aspect-ratio:4/5;top:-35px}
}
@media(max-width:540px) {
.profile-art-caption {left:23px;bottom:20px}
}
@media(max-width:540px) {
.profile-art-caption h2 {font-size:32px}
}
@media(max-width:540px) {
.profile-art-caption p {font-size:12px}
}
@media(max-width:540px) {
.profile-content {padding:22px}
}
@media(max-width:540px) {
.profile-tabs {margin:0 0 20px;gap:28px}
}
@media(max-width:540px) {
.profile-tabs button {font-size:17px;padding-bottom:12px}
}
@media(max-width:540px) {
.profile-bio {font-size:12px;margin:20px 0}
}
@media(max-width:540px) {
.profile-facts>div {font-size:12px;padding:10px 0}
}
@media(max-width:540px) {
.profile-relation {margin:20px 0 12px}
}
@media(max-width:540px) {
.profile-memories {gap:10px}
}
@media(max-width:540px) {
.result-modal {display:block}
}
@media(max-width:540px) {
.result-portrait {width:100%;height:230px;min-height:0}
}
@media(max-width:540px) {
.result-portrait>.portrait {height:auto;width:100%;aspect-ratio:4/5;top:-40px}
}
@media(max-width:540px) {
.result-content {padding:27px 23px}
}
@media(max-width:540px) {
.result-content>h2 {font-size:27px;margin:12px 0}
}
@media(max-width:540px) {
.result-content>h3 {font-size:19px;margin-bottom:10px}
}
@media(max-width:540px) {
.result-content>h3 small {font-size:10px}
}
@media(max-width:540px) {
.result-content>p {font-size:12px}
}
@media(max-width:540px) {
.result-content>.primary-btn {font-size:17px;min-height:54px;margin-top:22px}
}
@media(max-width:540px) {
.result-content .neglect-report>div {max-height:150px}
}
[data-theme="light"] .modal {border-color:#c3b7c4;box-shadow:0 25px 100px #28152835}
[data-theme="light"] .modal-close {background:#443446ed;color:white}
[data-theme="light"] .profile-art-caption {color:#fff9f2}
.result-content .money-change {padding:15px 0;margin:0 0 12px;border-bottom:1px solid var(--line)}
.result-content .money-change>small {width:100%}
.date-dialogue { margin: 22px 0; padding: 17px 18px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--surface-raised); }
.date-dialogue p { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.8; word-break: keep-all; }
.date-dialogue cite { display: block; margin-top: 9px; font-size: 12px; font-weight: 500; font-style: normal; color: var(--muted); text-align: right; }
@media (max-width: 540px) {
.date-dialogue { margin: 18px 0; padding: 14px; }
}
@media (max-width: 540px) {
.date-dialogue p { font-size: 15px; }
}
.modal-navigation { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: flex-end; height: 64px; background: var(--surface); }
.modal-navigation .modal-close { position: relative; top: 0; right: 0; flex-shrink: 0; }
.profile-relation > .relationship-meter { grid-column: 1 / -1; margin-top: 10px; }
.result-relationship { margin: 24px 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); }
.result-relationship > span { display: block; margin-bottom: 12px; font-size: 14px; font-weight: 800; }
.result-relationship > .relationship-meter { display: flex; margin-bottom: 0; }
.result-relationship .relationship-track { height: 10px; }
.result-description { margin-top: 12px; }
.result-content h3 { margin-top: 24px; }
.modal-close.modal-back { display: grid; place-items: center; top: 16px; right: 16px; left: auto; width: 39px; height: 39px; padding: 0; border-radius: 50%; }
.modal-back .icon { width: 21px; height: 21px; transform: rotate(180deg); }
.modal-navigation .modal-back { position: relative; inset: auto; }
.profile-art::after { display: none; }
.profile-content { padding-top: 64px; }
@media (max-width: 540px) {
.modal-close.modal-back { top: 12px; right: 12px; width: 36px; height: 36px; }
}
@media (max-width: 540px) {
.modal-navigation .modal-back { inset: auto; }
}
@media (max-width: 540px) {
.profile-content { padding-top: 28px; }
}
@media (max-width: 540px) {
.result-relationship { padding: 15px; }
}
.profile-art { background: #faf7ef; }
.result-portrait { background: #faf7ef; }
.profile-art > .portrait-full {
  width: 100%; height: 100%; min-width: 0; top: 0; left: 0; transform: none; object-fit: contain; object-position: center;
}
.result-portrait > .portrait-full {
  width: 100%; height: 100%; min-width: 0; top: 0; left: 0; transform: none; object-fit: contain; object-position: center;
}
.profile-art::after { display: none; }
.profile-modal { height: min(680px, calc(100dvh - 48px)); min-height: 0; overflow: hidden; grid-template-rows: minmax(0, 1fr); }
.profile-content { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding-top: 64px; }
.profile-tabs { flex-shrink: 0; }
.profile-panel { flex: 1; min-height: 0; overflow: auto; scrollbar-gutter: stable; padding-right: 8px; }
.profile-panel > .primary-btn { width: 100%; font-size: 16px; }
@media (max-width: 600px) {
.profile-modal { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 29% minmax(0, 1fr); height: calc(100dvh - 36px); max-height: calc(100dvh - 36px); }
}
@media (max-width: 600px) {
.profile-art { height: 100%; }
}
@media (max-width: 600px) {
.profile-art > .portrait-full { object-fit: cover; object-position: center top; }
}
@media (max-width: 600px) {
.result-portrait > .portrait-full { object-fit: cover; object-position: center top; }
}
@media (max-width: 600px) {
.profile-content { padding: 20px; }
}
@media (max-width: 600px) {
.profile-tabs { margin-bottom: 14px; }
}
.result-modal:has(.result-portrait) { height: min(560px, calc(100dvh - 56px)); overflow: hidden; }
.result-modal > .result-portrait { min-height: 0; height: 100%; }
.result-portrait > .portrait-full { object-fit: contain; object-position: center; aspect-ratio: auto; }
.result-modal > .result-content { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.result-content > .result-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; word-break: keep-all; }
.result-title > .new-badge { flex-shrink: 0; }
.result-content .date-dialogue { white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 600px) {
.result-modal:has(.result-portrait) { display: grid; grid-template-rows: min(260px, 32dvh) minmax(0, 1fr); height: min(760px, calc(100dvh - 24px)); }
}
@media (max-width: 600px) {
.result-modal > .result-portrait { width: 100%; }
}
@media (max-width: 600px) {
.result-modal > .result-content { padding: 22px; }
}
@media (max-width: 600px) {
.result-portrait > .portrait-full { width: 100%; height: 100%; top: 0; left: 0; transform: none; object-fit: contain; }
}
.encounter-result:has(.encounter-portrait) { display: grid; grid-template-columns: 44% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); max-width: 1000px; height: min(640px, calc(100dvh - 56px)); overflow: hidden; }
.encounter-result > .encounter-portrait { width: 100%; height: 100%; }
.encounter-portrait > .portrait-full { position: absolute; top: 0; left: -9%; width: 118%; height: 118%; max-width: none; object-fit: cover; object-position: center top; transform: none; }
.encounter-result > .result-content { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 40px 32px 28px; gap: 14px; }
.encounter-result .result-content > :not(.date-dialogue) { flex-shrink: 0; }
.encounter-result .result-title { margin: 0; font-size: 30px; line-height: 1.25; }
.encounter-result .result-description { margin: 0; font-size: 13px; line-height: 1.6; }
.encounter-result .result-content > h3 { margin: 0; line-height: 1.4; }
.encounter-result .date-dialogue { flex: 0 1 auto; min-height: 0; height: calc(5.4em + 34px); margin: 0; padding: 16px 18px; font-size: 17px; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.encounter-result .date-dialogue p { font-size: inherit; line-height: 1.8; }
.encounter-result .result-relationship { margin: 0; padding: 13px 18px; }
.encounter-result .money-change { margin: auto 0 0; padding: 10px 0; border-bottom: 0; }
.encounter-result .unlock-notice { margin: 0; font-size: 12px; }
.profile-modal { grid-template-columns: 44% minmax(0, 1fr); max-width: 1000px; height: min(640px, calc(100dvh - 48px)); }
.profile-art > .portrait-full { object-fit: cover; object-position: center top; }
.illustration-modal > .modal-back { position: absolute; z-index: 2; background: #191923dd; color: white; border: 1px solid #ffffff70; }
.modal-backdrop:has(.illustration-modal) { padding: 24px; overflow: hidden; }
@media (max-width: 800px) {
.encounter-result:has(.encounter-portrait) { grid-template-columns: minmax(0, 1fr); grid-template-rows: min(220px, 27dvh) minmax(0, 1fr); height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); }
}
@media (max-width: 800px) {
.encounter-portrait > .portrait-full { top: 0; left: 0; width: 100%; height: 100%; object-position: center top; }
}
@media (max-width: 800px) {
.encounter-result > .result-content { padding: 18px 20px; gap: 10px; }
}
@media (max-width: 800px) {
.encounter-result .eyebrow { font-size: 10px; }
}
@media (max-width: 800px) {
.encounter-result .result-title { font-size: 24px; gap: 8px; }
}
@media (max-width: 800px) {
.encounter-result .result-description { font-size: 12px; }
}
@media (max-width: 800px) {
.encounter-result .result-content > h3 { font-size: 19px; }
}
@media (max-width: 800px) {
.encounter-result .date-dialogue { font-size: 15px; height: calc(4.95em + 26px); padding: 12px 14px; }
}
@media (max-width: 800px) {
.encounter-result .date-dialogue p { line-height: 1.65; }
}
@media (max-width: 800px) {
.encounter-result .result-relationship { padding: 10px 14px; }
}
@media (max-width: 800px) {
.encounter-result .money-change { padding: 8px 0; }
}
@media (max-width: 800px) {
.profile-modal { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 29% minmax(0, 1fr); height: calc(100dvh - 36px); max-height: calc(100dvh - 36px); }
}
@media (max-width: 800px) {
.profile-art { height: 100%; }
}
@media (max-width: 800px) {
.profile-art > .portrait-full { width: 100%; height: 100%; top: 0; object-fit: cover; }
}
@media (max-width: 800px) {
.profile-content { padding: 20px; }
}
@media (max-width: 800px) {
.modal-backdrop:has(.illustration-modal) { padding: 12px; }
}
@media (max-width: 360px) {
.encounter-result .result-title { font-size: 20px; }
}
@media (min-width: 801px) and (max-height: 650px) {
.encounter-result > .result-content { padding: 24px 28px; gap: 10px; }
}
@media (min-width: 801px) and (max-height: 650px) {
.encounter-result .result-title { font-size: 27px; }
}
@media (min-width: 801px) and (max-height: 650px) {
.encounter-result .date-dialogue { font-size: 15px; height: calc(5.4em + 26px); padding: 12px 14px; }
}
@media (max-height: 600px) {
.encounter-result > .result-content { padding: 16px 20px; gap: 7px; }
}
@media (max-height: 600px) {
.encounter-result .eyebrow { display: none; }
}
@media (max-height: 600px) {
.encounter-result .result-title { font-size: 22px; }
}
@media (max-height: 600px) {
.encounter-result .result-content > h3 { font-size: 18px; }
}
@media (max-height: 600px) {
.encounter-result .date-dialogue { font-size: 14px; height: calc(4.95em + 22px); padding: 10px 12px; }
}
@media (max-height: 600px) {
.encounter-result .date-dialogue p { line-height: 1.65; }
}
@media (max-height: 600px) {
.encounter-result .result-relationship { padding: 8px 12px; }
}
@media (max-height: 600px) {
.encounter-result .money-change { padding: 6px 0; }
}
@media (max-width: 800px) and (max-height: 680px) {
.encounter-result:has(.encounter-portrait) { grid-template-rows: min(110px, 18dvh) minmax(0, 1fr); }
}
.profile-modal .profile-content { padding: 24px; }
.profile-tabs { margin: 0 42px 12px 0; gap: 24px; min-height: 36px; }
.profile-tabs button { font-size: 16px; padding-bottom: 10px; }
.profile-panel { scrollbar-gutter: auto; padding-right: 0; }
.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>div { padding: 9px 0; font-size: 12px; }
.profile-relation { margin: 16px 0 8px; gap: 8px; }
.profile-relation .relationship-meter { flex: 1; min-width: 100px; }
.profile-panel>.primary-btn { margin-top: 14px; min-height: 44px; padding: 10px 16px; }
.profile-memories { 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-card .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; }
@media(max-width:600px) {
.profile-modal .profile-content { padding: 15px 18px; }
}
@media(max-width:600px) {
.profile-tabs { margin-right: 0; margin-bottom: 10px; }
}
@media(max-width:600px) {
.profile-bio { padding: 9px 11px; margin-bottom: 10px; font-size: 12px; }
}
@media(max-width:600px) {
.profile-facts>div { padding: 7px 0; font-size: 11px; }
}
@media(max-width:600px) {
.profile-relation { margin: 10px 0 0; }
}
@media(max-width:600px) {
.profile-memories { gap: 7px; }
}
@media(max-width:600px) {
.profile-memories .memory-card .memory-art { aspect-ratio: .95; }
}
@media(max-width:600px) {
.profile-memories .locked-memory { aspect-ratio: .95; }
}
@media(max-width:600px) {
.profile-memories .memory-card>.memory-overlay { padding: 7px; }
}
@media(max-width:600px) {
.profile-memories .memory-card h3 { font-size: 11px; }
}
@media(max-width:600px) {
.profile-memories .locked-memory strong { font-size: 11px; }
}
@media(max-width:600px) {
.profile-memories .memory-card p { font-size: 8px; }
}
@media(max-width:360px) {
.profile-modal { grid-template-rows: 18% minmax(0,1fr); }
}
.growth-result .result-content { padding: 58px 30px 30px; }
.growth-result .result-title { font-size: 27px; }
.growth-result .result-description { line-height: 1.7; }
.result-content>.charm-change { display: flex; font-size: 20px; padding: 12px 0; }
@media (max-width:600px) {
.growth-result .result-content { padding: 18px 24px 24px; }
}
@media (max-width:600px) {
.growth-result .result-title { font-size: 24px; }
}
.result-modal.hero-result:has(.result-portrait) { display: grid; grid-template-columns: 44% minmax(0,1fr); grid-template-rows: minmax(0,1fr); width: 100%; max-width: 960px; height: auto; min-height: 0; max-height: calc(100dvh - 48px); padding: 0; overflow: hidden; }
.result-modal.hero-result>.result-portrait { position: relative; width: 100%; height: 100%; min-height: 0; align-self: stretch; overflow: hidden; }
.result-modal.hero-result>.result-portrait>.portrait-full { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; max-width: none; transform: none; object-fit: cover; object-position: center 15%; }
.result-modal.hero-result>.result-content { display: flex; flex-direction: column; gap: 11px; min-width: 0; min-height: 0; max-height: calc(100dvh - 50px); padding: 38px 28px 24px; overflow: hidden; }
.result-modal.hero-result .result-content>:not(.date-dialogue) { flex-shrink: 0; }
.result-modal.hero-result .eyebrow { padding-right: 30px; }
.result-modal.hero-result .result-title { margin: 0; padding-right: 16px; font-size: 27px; line-height: 1.3; }
.result-modal.hero-result .result-description { margin: 0; font-size: 12px; line-height: 1.6; }
.result-modal.hero-result .result-content>h3 { margin: 0; font-size: 21px; line-height: 1.4; }
.result-modal.hero-result .result-content>h3 small { margin-top: 3px; font-size: 11px; }
.result-modal.hero-result .date-dialogue { flex: 0 1 auto; min-height: 0; height: auto; max-height: calc(5.1em + 26px); margin: 0; padding: 12px 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; font-size: 16px; }
.result-modal.hero-result .date-dialogue p { font-size: inherit; line-height: 1.7; }
.result-modal.hero-result .result-relationship { display: flex; flex-direction: column; justify-content: center; gap: 9px; margin: 0; padding: 12px 14px; }
.result-modal.hero-result .result-relationship>span:not(.relationship-meter) { font-size: 12px; margin: 0; }
.result-modal.hero-result .result-relationship>.relationship-meter { margin: 0; flex-shrink: 0; }
.result-modal.hero-result .money-change { margin: 0; padding: 10px 0 0; border-bottom: 0; }
.result-modal.hero-result .charm-change { margin: 0; padding: 0; font-size: 15px; }
.result-modal.hero-result .unlock-notice { margin: 0; font-size: 11px; }
@media(max-width:800px) {
.result-modal.hero-result:has(.result-portrait) { --result-art-height: min(190px,23dvh); grid-template-columns: minmax(0,1fr); grid-template-rows: var(--result-art-height) minmax(0,1fr); height: auto; max-height: calc(100dvh - 24px); }
}
@media(max-width:800px) {
.result-modal.hero-result>.result-content { max-height: calc(100dvh - 26px - var(--result-art-height)); padding: 18px 20px; gap: 10px; }
}
@media(max-width:800px) {
.result-modal.hero-result .eyebrow { font-size: 10px; }
}
@media(max-width:800px) {
.result-modal.hero-result .result-title { font-size: 24px; padding-right: 0; }
}
@media(max-width:800px) {
.result-modal.hero-result .result-content>h3 { font-size: 19px; }
}
@media(max-width:800px) {
.result-modal.hero-result .date-dialogue { font-size: 15px; }
}
@media(max-height:650px) {
.result-modal.hero-result>.result-content { padding: 18px 20px; gap: 8px; }
}
@media(max-height:650px) {
.result-modal.hero-result .eyebrow { display: none; }
}
@media(max-height:650px) {
.result-modal.hero-result .result-title { font-size: 22px; }
}
@media(max-height:650px) {
.result-modal.hero-result .result-content>h3 { font-size: 18px; }
}
@media(max-height:650px) {
.result-modal.hero-result .date-dialogue { font-size: 14px; max-height: calc(5.1em + 20px); padding: 9px 12px; }
}
@media(max-height:650px) {
.result-modal.hero-result .result-relationship { padding: 9px 12px; }
}
@media(max-height:650px) {
.result-modal.hero-result .money-change { padding-top: 6px; }
}
@media(max-width:800px) and (max-height:680px) {
.result-modal.hero-result:has(.result-portrait) { --result-art-height: min(110px,18dvh); }
}
.licenses-modal>.modal-navigation { margin-bottom: 0; }
.licenses-modal>.modal-navigation { padding-right: 20px; }
@media(max-width:540px) {
.licenses-modal>.modal-navigation { padding-right: 14px; }
}
.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; }
.result-content h2 .new-badge { font-size: 10px; letter-spacing: .4px; vertical-align: middle; padding: 5px 7px; }
.modal.action-result { position: relative; 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; }
.week-details-modal>.modal-navigation { margin:0 -10px 4px; }
@media(max-width:440px) {
.week-details-modal>.modal-navigation { margin-left:-6px; margin-right:-6px; }
}
.encounter-found>.result-portrait>.portrait-full { animation:portrait-arrive 900ms cubic-bezier(.2,.65,.3,1) both; }
.encounter-result .result-content>* { animation:result-item-in 520ms cubic-bezier(.2,.65,.3,1) both; animation-delay:var(--item-delay,0ms); }
.encounter-result .result-title { --item-delay:100ms; }
.encounter-result .result-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 .charm-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-content>.eyebrow { animation:result-item-in 450ms ease-out both; }
.growth-result.action-revealed .result-content>.result-title { animation:result-item-in 450ms ease-out both; }
.growth-result.action-revealed .result-content>.result-description { animation:result-item-in 450ms ease-out both; }
.growth-result.action-revealed .result-content>.charm-change { animation:result-item-in 500ms 180ms ease-out both; }
.growth-result.action-revealed .result-content>.money-change { animation:result-item-in 500ms 520ms ease-out both; }
.profile-modal .profile-art { isolation:isolate; overflow:hidden; }
.profile-modal .profile-art>.portrait-full { animation:portrait-arrive 1000ms cubic-bezier(.2,.65,.3,1) both; }
.profile-modal .profile-art::after { display:block; 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; }
.modal.encounter-miss { display:block; width:min(520px,100%); padding:0; }
.modal.encounter-miss>.result-content { padding:40px 30px 26px; gap:12px; }
.modal.encounter-miss .result-title { justify-content:center; padding:0; text-align:center; font-size:27px; }
.modal.encounter-miss .result-description { text-align:center; }
.modal.encounter-miss .charm-change { justify-content:center; }
.modal.encounter-miss .charm-change .stat-gains { justify-content:center; }
@media(max-width:600px) {
.modal.encounter-miss>.result-content { padding:36px 22px 22px; }
}
@media(max-width:600px) {
.modal.encounter-miss .result-title { font-size:23px; }
}

/* ModalFrame owns outer sizes and scroll regions. Artwork keeps its established
   crop/entrance rules above; no frame is animated by width or height. */
:root {
 --dialog-gap:24px;
 --dialog-padding:24px;
 --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);
}
.modal-backdrop { padding:var(--dialog-gap); }
.modal { max-height:var(--dialog-max-height); }
.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-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; }
.dialog-body #dialog-title { padding-right:36px; }
.dialog-body>.eyebrow { margin-right:40px; }
.modal>.modal-back { position:absolute; z-index:20; top:12px; right:12px; left:auto; }
.dialog-body .license-content { padding:0; }
.dialog-body>.modal-heading { margin-bottom:18px; }
.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; }
.guide-intro { font-size:13px; line-height:1.8; color:var(--muted); }
.modal.dialog-illustrated { max-width:var(--dialog-art-width); }
.profile-modal.dialog-illustrated { height:min(640px,var(--dialog-max-height)); }
.result-modal.hero-result:has(.result-portrait) { max-width:var(--dialog-art-width); max-height:var(--dialog-max-height); }
.coffee-modal .dialog-body #dialog-title { font-size:clamp(17px,4.5vw,26px); }
@media(max-width:800px) {
 :root { --dialog-gap:12px; --dialog-padding:20px; }
 .profile-modal.dialog-illustrated { 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; }
}
@media(max-height:680px) { :root { --dialog-padding:18px; } }