/* Readable pink: one column, clear hierarchy, and a compact status bar. */
:root {
  --bg: #fff9fb;
  --paper: #ffffff;
  --ink: #302731;
  --muted: #695c65;
  --line: #e8dce2;
  --rose: #a52c61;
  --pink: #fbe7f0;
  --shadow: none;
  --font: 'Noto Sans KR', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
html, body { background: var(--bg); background-image: none; color: var(--ink); }
body { font-size: 16px; line-height: 1.65; -webkit-text-size-adjust: 100%; }
/* Replace the previous pastel text palette on every app surface. */
:is(#app, #overlay-root) :where(h1,h2,h3,h4,p,small,strong,b,span,button,select,label,input,td,th,a,summary,div) { color: inherit; }
:is(#app, #overlay-root) :where(p) { font-size: 15px; line-height: 1.85; }
:is(#app, #overlay-root) :where(small) { font-size: 12px; line-height: 1.7; }
:is(#app, #overlay-root) :where(button,input,select) { font-family: var(--font); font-size: 14px; }
:is(#app, #overlay-root) :where(button,select,input,a,summary) { -webkit-tap-highlight-color: transparent; }
:is(#app, #overlay-root) :where(button,select,summary) { min-height: 44px; }
:is(#app, #overlay-root) :where(button,a,select,input,summary):focus-visible { outline: 3px solid #9b3b68; outline-offset: 3px; }
:is(#app, #overlay-root) :where(p,small,strong,b,span,td,th) { overflow-wrap: anywhere; text-overflow: clip; }
:is(#app, #overlay-root) :where(button):not(:disabled):active { transform: none !important; }
:is(#app, #overlay-root) :where(button):disabled { opacity: 1; color: #71656d; background: #f1edef; border-color: #ded6da; box-shadow: none; cursor: default; }
#app .wrap { max-width: 1100px; padding: 0 30px; }
#app .wrap.app-game { max-width: 860px; }
#app .topbar { min-height: 90px; padding: 18px 0; border-bottom: 1px solid var(--line); gap: 22px; }
#app .wordmark { color: #87244e; font-size: 25px; letter-spacing: -1px; }
#app .wordmark i { color: var(--rose); }
#app .brand-sub { font-size: 12px; color: var(--muted); }
#app .nav { gap: 14px; }
#app .nav button { font-size: 14px; color: var(--muted); }
#app .nav .bgm-toggle { border: 1px solid var(--line); background: white; border-radius: 8px; min-width: 96px; padding: 8px 10px; font-size: 13px; color: #87244e; }
#app .bgm-toggle[aria-pressed="true"] { background: #fce9f1 !important; color: #87244e !important; }
#app .nav .edition { display: none; }
:is(#app, #overlay-root) .primary { background: var(--rose); border: 1px solid var(--rose); color: white; border-radius: 8px; box-shadow: none; font-size: 14px; font-weight: 700; padding: 11px 17px; }
:is(#app, #overlay-root) .primary:hover { background: #8d204f; border-color: #8d204f; color: white; transform: none; }
:is(#app, #overlay-root) .primary:disabled { background: #ece5e9; border-color: #e1d7dd; color: #71656d; }
:is(#app, #overlay-root) .ghost { background: white; border: 1px solid #d6c5ce; border-radius: 8px; box-shadow: none; padding: 10px 14px; color: #5c3f50; font-size: 14px; }
:is(#app, #overlay-root) .ghost:hover { background: #fff4f8; border-color: #b77894; }
:is(#app, #overlay-root) .ghost:disabled { background: #f3eff1; color: #71656d; border-color: #ded6da; }
:is(#app, #overlay-root) .text-btn,
:is(#app, #overlay-root) .evidence-link { color: #96305b; font-size: 13px; line-height: 1.6; padding: 8px 0; }
:is(#app, #overlay-root) :where(.panel,.care-card,.intro-card,.certificate,.end-card,.pathways,.habit-card,.talent-card,.trait-empty,.compact-empty,.recovery-history,.health-rules,.achievement-card) { background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }
:is(#app, #overlay-root) :where(.side-note,.score-help,.care-disclaimer,.tiny-note,.data-line,.condition-course-note,.program-cost,.job-cost,.job-preparation,.job-talent,.pathway-rule,.save-note,.money-unit,.care-model,.extras-intro,.habit-effect,.recovery-history p,.health-rules span,.health-rules small,.casting-info small,.trait-section small,.care-extras small) { color: var(--muted); font-size: 12px; line-height: 1.8; }
:is(#app, #overlay-root) .care-model { color: var(--muted) !important; font-size: 12px !important; border-top: 1px solid var(--line) !important; }
:is(#app, #overlay-root) .small-caps { font-size: 12px; letter-spacing: .2px; color: var(--muted); }
:is(#app, #overlay-root) .section-head { gap: 12px; }
:is(#app, #overlay-root) .section-head :where(h2,h3) { font-size: 20px; font-weight: 700; letter-spacing: -.6px; }
:is(#app, #overlay-root) .section-head small { font-size: 12px; color: var(--muted); }
#app .site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.8; padding-top: 22px; }
#app .site-footer strong { color: #87244e; font-size: 15px; }

/* Main game: character, persistent core stats, then one task at a time. */
#app .game-page { padding: 22px 0 30px; }
#app .life-heading { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; }
#app .avatar-mini { width: 66px; height: 82px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff0f6; flex: 0 0 auto; }
#app .avatar-mini svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
#app .life-name { flex: 1; min-width: 0; }
#app .life-name h1 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 24px; font-weight: 750; line-height: 1.5; letter-spacing: -.6px; }
#app .life-name h1 span { font-size: 15px; color: #87244e; font-weight: 700; background: #fbe7ef; padding: 1px 9px; border-radius: 6px; white-space: nowrap; }
#app .life-name p { color: var(--muted); font-size: 13px; margin: 1px 0 2px; }
#app .life-title { font-size: 13px; line-height: 1.5; color: var(--muted); }
#app .life-title strong { color: #87244e; font-weight: 700; }
#app .profile-open { flex-shrink: 0; font-size: 13px; }
#app .life-dashboard { position: sticky; top: 0; z-index: 30; background: white; border: 1px solid #e2d0da; border-radius: 12px; box-shadow: 0 3px 10px #5735440a; }
#app .core-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding: 14px 0; }
#app .core-stat { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 0; padding: 0 22px; border: 0; border-radius: 0; background: transparent; min-width: 0; text-align: left; }
#app .core-stat + .core-stat { border-left: 1px solid var(--line); }
#app .core-stat:hover { background: #fff8fb; }
#app .core-stat .stat-label { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
#app .core-stat .stat-value { font-size: 29px; font-weight: 750; color: #87244e; line-height: 1.25; font-variant-numeric: tabular-nums; letter-spacing: -.8px; }
#app .core-stat .stat-track { display: block; grid-column: 1/-1; width: 100%; height: 5px; background: #f1e9ee; border: 0; border-radius: 5px; margin-top: 4px; overflow: hidden; }
#app .core-stat .stat-track span { display: block; height: 100%; border-radius: 5px; background: #b43b73; }
#app .stat-mental .stat-value { color: #675086; }
#app .stat-mental .stat-track span { background: #81639f; }
#app .stat-stamina .stat-value { color: #356e70; }
#app .stat-stamina .stat-track span { background: #4b8386; }
#app .core-stat.low .stat-value { color: #aa343b; }
#app .core-stat.low .stat-track span { background: #b6444e; }
#app .stat-warning { font-size: 10px; color: #92313b; font-weight: 700; }
#app .condition-alert { width: 100%; display: flex; align-items: center; gap: 12px; justify-content: space-between; border: 0; border-top: 1px solid var(--line); background: #fff4f7; padding: 10px 16px; text-align: left; border-radius: 0 0 12px 12px; font-size: 13px; color: #8f3152; }
#app .condition-alert span { white-space: nowrap; font-size: 12px; }
#app .life-quick-info { display: flex; align-items: stretch; justify-content: space-between; gap: 16px; padding: 8px 0 12px; }
#app .life-quick-info button { display: flex; align-items: center; gap: 9px; background: transparent; border: 0; padding: 4px 1px; text-align: left; font-size: 13px; }
#app .life-quick-info span { color: var(--muted); font-size: 12px; }
#app .life-quick-info strong { font-size: 14px; font-weight: 650; }
#app .balance-current { justify-content: flex-end; }
#app .game-navigation { scroll-margin-top: 112px; margin-bottom: 25px; }
#app .game-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); background: #f4eaf0; padding: 4px; border-radius: 10px; gap: 3px; }
#app .game-tab { background: transparent; border: 0; border-radius: 7px; font-size: 15px; font-weight: 600; padding: 11px 3px; color: #6c5664; }
#app .game-tab.active { background: white; color: #87244e; box-shadow: 0 1px 3px #492c3d14; font-weight: 750; }
#app .sub-tabs { display: flex; gap: 8px; margin-top: 14px; border-bottom: 1px solid var(--line); }
#app .sub-tab { font-size: 14px; padding: 8px 16px 10px; background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--muted); }
#app .sub-tab.active { border-color: #a52c61; color: #87244e; font-weight: 700; }
#app .game-main { min-width: 0; }
#app .diary-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
#app .diary-heading h2 { font-size: 21px; line-height: 1.5; margin: 0; font-weight: 750; letter-spacing: -.5px; }
#app .diary-heading > span { font-size: 12px; color: var(--muted); }
#app .playback-bar { display: grid; grid-template-columns: 1fr 1fr 1fr 1.25fr; gap: 8px; align-items: stretch; }
#app .playback-bar button { padding: 10px 8px; font-size: 14px; white-space: nowrap; }
#app .speed-picker { display: flex; align-items: stretch; min-width: 0; }
#app .speed-picker select { width: 100%; padding: 8px; border: 1px solid #d6c5ce; border-radius: 8px; background: white; color: #5c3f50; font-size: 14px; }
#app .year-progress { height: 3px; border: 0; background: #f0e5eb; margin: 14px 0 22px; }
#app .year-progress span { height: 100%; background: #b85a82; }
#app .decision-card { background: white; border: 1px solid #d7b5c7; border-top: 4px solid #a52c61; border-radius: 10px; box-shadow: none; padding: 24px; margin-bottom: 30px; }
#app .decision-card .small-caps { color: #8f3158; font-size: 12px; font-weight: 600; letter-spacing: 0; }
#app .decision-card h3 { font-size: 23px; font-weight: 750; letter-spacing: -.6px; line-height: 1.5; margin: 9px 0 12px; }
#app .decision-card p { font-size: 16px; line-height: 1.9; color: #564850; margin-bottom: 20px; }
#app .choice { border: 1px solid #ded1d9; border-radius: 8px; box-shadow: none; background: #fffafd; padding: 15px 16px; margin-top: 10px; gap: 12px; }
#app .choice:hover { background: #fdf0f6; border-color: #a85d80; transform: none; }
#app .choice strong { display: block; font-size: 16px; line-height: 1.65; font-weight: 650; }
#app .choice small { display: block; font-size: 13px; color: var(--muted); line-height: 1.7; margin-top: 5px; }
#app .choice-arrow { color: #96305b !important; font-size: 19px; }
#app .choice:disabled :where(strong,small) { color: #71656d; }
#app .log-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
#app .log-heading h3 { margin: 0; font-size: 18px; font-weight: 700; }
#app .filter-pills { gap: 8px; margin: 0 0 22px; }
#app .filter-pill { min-height: 38px; padding: 6px 14px; font-size: 13px; color: #66505e; border: 1px solid var(--line); border-radius: 18px; background: white; }
#app .filter-pill.active { background: #f8e3ee; color: #87244e; border-color: #d3a3bb; font-weight: 700; }
#app .timeline:before { background: #e2d3dc; }
#app .event { padding: 0 0 27px 28px; animation: none; }
#app .event:before { background: #bb7497; border-color: var(--bg); width: 6px; height: 6px; border-radius: 50%; }
#app .event-age { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
#app .event h3 { font-size: 17px; line-height: 1.65; font-weight: 700; margin: 0 0 7px; }
#app .event p { font-size: 15px; line-height: 1.85; color: #5c5058; }
#app .event-badge { font-size: 11px; background: #f7e8f0; color: #87375d; padding: 2px 7px; border-radius: 4px; }
#app .life-context { border: 1px solid var(--line); border-radius: 10px; background: white; margin-top: 28px; scroll-margin-top: 120px; }
#app .life-context > summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 20px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 650; }
#app .life-context > summary:after { content: '+'; color: #95355f; font-size: 23px; font-weight: 400; }
#app .life-context[open] > summary:after { content: '−'; }
#app .life-context > summary span { color: var(--muted); font-size: 12px; font-weight: 400; margin-left: auto; }
#app .context-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; padding: 8px 20px 22px; }
#app .context-grid h3 { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
#app .context-grid .money-amount { font-size: 27px; color: #87244e; }
#app .context-grid :where(.money-row,.life-details,.life-details b) { font-size: 14px; }
#app .context-grid :where(.money-row span,.life-details span) { color: var(--muted); }
#app .context-grid .money-rows { border-top: 1px solid var(--line); }
#app .context-love { grid-column: 1/-1; border-top: 1px solid var(--line); padding-top: 18px; }
#app .context-love p { font-size: 14px; }
#app .context-love small { display: block; margin-top: 12px; color: var(--muted); }
#app .save-note { text-align: right; font-size: 12px; color: var(--muted); margin: 15px 0 0; }

/* Shop, careers, traits and care share the same readable card system. */
:is(#app, #overlay-root) .care-heading { margin-bottom: 24px; }
#app .care-heading > .small-caps { display: none; }
:is(#app, #overlay-root) .care-heading h2 { font-size: 24px; line-height: 1.5; font-weight: 750; letter-spacing: -.8px; }
:is(#app, #overlay-root) .care-heading p { font-size: 15px; color: var(--muted); }
:is(#app, #overlay-root) .care-heading strong { color: #87244e; font-weight: 700; }
:is(#app, #overlay-root) .care-grid { gap: 16px; }
:is(#app, #overlay-root) .care-card { padding: 22px; }
:is(#app, #overlay-root) .care-card h3 { font-size: 19px; line-height: 1.55; font-weight: 700; margin-bottom: 9px; }
:is(#app, #overlay-root) .care-card p { font-size: 14px; color: #63515d; line-height: 1.85; }
:is(#app, #overlay-root) .care-card .care-icon { font-size: 25px; color: #a53f70; margin: 5px 0 10px; }
:is(#app, #overlay-root) .care-buy { margin-top: 16px; gap: 12px; }
:is(#app, #overlay-root) .care-buy :where(b,small) { font-size: 15px; font-weight: 650; }
:is(#app, #overlay-root) .care-buy .ghost { font-size: 14px; }
:is(#app, #overlay-root) .shop-bonus { background: #fdf0f6; border: 1px solid #ead3df; color: #92305a; font-size: 13px; border-radius: 5px; padding: 7px 10px; }
:is(#app, #overlay-root) .equipment-strip { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 12px; gap: 9px; }
:is(#app, #overlay-root) .equipment-strip > div { border: 0; border-radius: 6px; background: #faf4f7; padding: 10px; }
:is(#app, #overlay-root) .equipment-strip small { color: var(--muted); font-size: 12px; }
:is(#app, #overlay-root) .equipment-strip b { font-size: 14px; font-weight: 600; }
:is(#app, #overlay-root) .equipped { background: #f7e1ec; color: #87244e; }
:is(#app, #overlay-root) .job-prob { font-size: 14px; }
:is(#app, #overlay-root) .job-prob b { font-size: 29px; color: #87244e; font-weight: 700; }
:is(#app, #overlay-root) .parttime-panel { border: 1px solid var(--line); border-radius: 10px; padding: 22px; background: white; }
:is(#app, #overlay-root) .parttime-panel h3 { font-size: 20px; }
:is(#app, #overlay-root) .parttime-panel > p { font-size: 14px; }
:is(#app, #overlay-root) .permission-row { font-size: 13px; gap: 12px; border-bottom: 1px solid var(--line); }
:is(#app, #overlay-root) .permission-row .ghost { font-size: 13px; }
:is(#app, #overlay-root) .parttime-item { border: 1px solid var(--line); border-radius: 8px; background: #fffbfd; padding: 14px; flex-wrap: wrap; }
:is(#app, #overlay-root) .parttime-item b { font-size: 16px; font-weight: 650; }
:is(#app, #overlay-root) .parttime-item small { font-size: 12px; color: var(--muted); }
:is(#app, #overlay-root) .parttime-item .ghost { font-size: 13px; max-width: none; padding: 8px 12px; }
:is(#app, #overlay-root) .panel-title { font-size: 14px; font-weight: 650; border-bottom: 1px solid var(--line); }
:is(#app, #overlay-root) .panel-title span { font-size: 12px; color: var(--muted); }
:is(#app, #overlay-root) .pathways > summary { font-size: 16px; padding: 19px; }
:is(#app, #overlay-root) .pathways > summary small { font-size: 12px; color: var(--muted); }
:is(#app, #overlay-root) .pathway-body { padding: 0 20px 20px; }
:is(#app, #overlay-root) .pathway-category { font-size: 19px; font-weight: 700; }
:is(#app, #overlay-root) .casting-info { background: #fff2f8; border: 1px solid #ead3df; border-radius: 8px; }
:is(#app, #overlay-root) .casting-info > b { font-size: 17px; font-weight: 700; }
:is(#app, #overlay-root) .casting-info p { font-size: 14px; }
:is(#app, #overlay-root) .casting-info > span { font-size: 14px; color: #87244e; }
:is(#app, #overlay-root) .program-card > button { font-size: 14px; padding: 10px; }
:is(#app, #overlay-root) .active-pathway { background: #fff5fa; border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
:is(#app, #overlay-root) .active-pathway strong { font-size: 16px; font-weight: 700; }
:is(#app, #overlay-root) .active-pathway > span { font-size: 14px; color: var(--muted); }
:is(#app, #overlay-root) .active-pathway .text-btn { font-size: 13px; }
:is(#app, #overlay-root) .active-pathways > .ghost { font-size: 14px; }
:is(#app, #overlay-root) :where(.health-notice,.health-overview,.notice-box,.trait-summary,.health-rules,.health-summary,.trait-total) { background: #fcf2f7; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; color: #5e4a56; line-height: 1.8; }
:is(#app, #overlay-root) .health-overview strong { font-size: 23px; font-weight: 700; color: #87244e; }
:is(#app, #overlay-root) .health-overview > span { font-size: 13px; color: var(--muted); }
:is(#app, #overlay-root) :where(.condition-nickname,.condition-effects,.treatment-progress,.condition-course-note) { font-size: 13px; color: var(--muted); }
:is(#app, #overlay-root) .treatment-progress b { color: #87244e; font-weight: 700; }
:is(#app, #overlay-root) .treatment-card .public-care { font-size: 14px; background: #fff6fa; }
:is(#app, #overlay-root) .health-rules > summary { font-size: 15px; }
:is(#app, #overlay-root) .health-rules b { font-size: 15px; font-weight: 650; }
:is(#app, #overlay-root) .recovery-history h3 { font-size: 18px; }
:is(#app, #overlay-root) .recovery-history p { font-size: 14px; }
:is(#app, #overlay-root) .recovery-history p > span { font-size: 12px; color: var(--muted); }
:is(#app, #overlay-root) .trait-section .section-head h3 { font-size: 20px; font-weight: 700; }
:is(#app, #overlay-root) .talent-card { padding: 20px; }
:is(#app, #overlay-root) .talent-card h3 { font-size: 18px; font-weight: 700; }
:is(#app, #overlay-root) .talent-card h3 b { font-size: 20px; color: #87244e; }
:is(#app, #overlay-root) .talent-card p { font-size: 14px; color: var(--muted); }
:is(#app, #overlay-root) .habit-card-head > span { font-size: 17px; font-weight: 650; }
:is(#app, #overlay-root) .habit-card-head b { font-size: 12px; background: #fff3f9; border-color: var(--line); color: #87244e; }
:is(#app, #overlay-root) .habit-card p { font-size: 14px; }
:is(#app, #overlay-root) .habit-card > small { font-size: 12px; color: var(--muted); }
:is(#app, #overlay-root) .trait-empty strong { font-size: 17px; font-weight: 650; }
:is(#app, #overlay-root) .trait-empty p { font-size: 14px; color: var(--muted); }
:is(#app, #overlay-root) .trait-summary span { font-size: 12px; color: var(--muted); }
:is(#app, #overlay-root) .trait-summary strong { font-size: 14px; }
:is(#app, #overlay-root) .trait-summary b { font-size: 13px; color: #87244e; font-weight: 650; }
:is(#app, #overlay-root) .trait-section .ghost { font-size: 14px; }
:is(#app, #overlay-root) .care-extras .section-head h3 { font-size: 19px; }
:is(#app, #overlay-root) .care-health .section-head h3 { font-size: 19px; }
:is(#app, #overlay-root) .care-health .section-head .text-btn { font-size: 13px; }
:is(#app, #overlay-root) .component-grid { gap: 10px; }
:is(#app, #overlay-root) .component { background: #fff6fa; border: 1px solid var(--line); border-radius: 8px; padding: 13px; }
:is(#app, #overlay-root) .component > span { font-size: 14px; }
:is(#app, #overlay-root) .component b { font-size: 26px; color: #87244e; font-weight: 700; }
:is(#app, #overlay-root) .component small { font-size: 12px; color: var(--muted); }
:is(#app, #overlay-root) .money-row { font-size: 14px; }
:is(#app, #overlay-root) .money-row span { color: var(--muted); }
:is(#app, #overlay-root) .appearance-title { background: #fceaf3; border-color: #ecd1df; border-radius: 8px; }
:is(#app, #overlay-root) .appearance-title > strong { font-size: 22px; color: #87244e; }
:is(#app, #overlay-root) .appearance-title > :where(small,span) { font-size: 12px; color: var(--muted); }
:is(#app, #overlay-root) .history-table { font-size: 14px; font-variant-numeric: tabular-nums; }
:is(#app, #overlay-root) .history-table th { font-size: 13px; color: var(--muted); padding: 12px 5px; }
:is(#app, #overlay-root) .history-table td { font-size: 14px; padding: 14px 5px; }
:is(#app, #overlay-root) .chart-legend { font-size: 12px; color: var(--muted); gap: 12px; }

/* Dialogs and the first-life flow. */
#overlay-root .overlay { background: #33252e80; backdrop-filter: blur(3px); padding: 20px; }
#overlay-root .modal { background: white; border: 1px solid #e3c5d5; border-radius: 14px; box-shadow: 0 16px 60px #33252e30; padding: 26px; }
#overlay-root .modal-head { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 18px; }
#overlay-root .modal-head h2 { font-size: 23px; font-weight: 750; line-height: 1.5; }
#overlay-root .close-btn { width: 44px; flex-shrink: 0; border-radius: 8px; font-size: 28px; color: #6b4b5f; }
#overlay-root .modal-intro { font-size: 15px; color: var(--muted); line-height: 1.85; }
#overlay-root .notice-box { background: #fdf1f7; border: 1px solid #ead2df; border-radius: 8px; font-size: 14px; }
#overlay-root .notice-box strong { color: #87244e; }
#overlay-root .modal-actions { flex-wrap: wrap; gap: 10px; }
#overlay-root .source-card h3 { font-size: 18px; }
#overlay-root .source-card :where(p,a) { font-size: 14px; }
#overlay-root .source-card .source-tag { font-size: 12px; color: #87244e; }
#overlay-root .source-card a { color: #96305b; }
#overlay-root .source-card.selected { background: #fcecf4; }
#overlay-root .country-search { font-size: 16px; padding: 12px; border-radius: 8px; border-color: #d6c5ce; }
#overlay-root .country-search::placeholder { color: #75606d; }
#overlay-root .country-item { font-size: 14px; padding: 12px; border-radius: 7px; }
#overlay-root .country-item small { font-size: 12px; color: var(--muted); }
#overlay-root .data-grid small { color: var(--muted); font-size: 12px; }
#overlay-root .data-grid b { font-size: 16px; }
#overlay-root .menu-list { display: grid; gap: 10px; }
#overlay-root .focus-grid { gap: 12px; }
#overlay-root .focus-btn { padding: 17px; border: 1px solid var(--line); background: white; border-radius: 9px; }
#overlay-root .focus-btn.active { border: 2px solid #a52c61; padding: 16px; background: #fff2f8; }
#overlay-root .focus-btn span { font-size: 24px; color: #96305b; }
#overlay-root .focus-btn b { font-size: 16px; font-weight: 700; }
#overlay-root .focus-btn small { font-size: 12px; color: var(--muted); margin-top: 7px; }
#overlay-root .character-detail { display: grid; grid-template-columns: 105px minmax(0,1fr); gap: 20px; align-items: center; }
#overlay-root .character-detail .portrait-live { height: 142px; border-radius: 8px; }
#overlay-root .character-detail h3 { font-size: 20px; margin: 0; }
#overlay-root .character-detail p { font-size: 13px; margin: 4px 0; }
#overlay-root .character-detail .appearance-title { padding: 7px; margin: 8px 0 0; }
#overlay-root .detail-heading { font-size: 17px; margin: 25px 0 12px; }
:is(#app, #overlay-root) .proposal-name { font-size: 18px; font-weight: 700; }
:is(#app, #overlay-root) .proposal-name small { font-size: 13px; }
:is(#app, #overlay-root) .proposal-card { background: #fff7fb; border-color: var(--line); border-radius: 9px; }
:is(#app, #overlay-root) .proposal-card p { font-size: 14px; color: var(--muted); }
:is(#app, #overlay-root) .proposal-stats span { font-size: 12px; color: #66515d; border-color: #ecd4e1; background: white; }
:is(#app, #overlay-root) .tier { font-size: 12px; color: white; background: #a33c6a; border: 0; }
:is(#app, #overlay-root) .achievement-card h3 { font-size: 17px; font-weight: 700; }
:is(#app, #overlay-root) .achievement-card p { font-size: 14px; color: var(--muted); }
:is(#app, #overlay-root) .achievement-card small { font-size: 12px; color: #8e3159; }
:is(#app, #overlay-root) .achievement-card.locked small { color: var(--muted); }
:is(#app, #overlay-root) .achievement-progress > span { font-size: 14px; }
:is(#app, #overlay-root) .achievement-progress > strong { color: #87244e; }
:is(#app, #overlay-root) .achievement-card.unlocked { background: #fff1f7; border-color: #e0b9ce; }
:is(#app, #overlay-root) .past-life strong { font-size: 16px; }
:is(#app, #overlay-root) .past-life small { font-size: 13px; color: var(--muted); }
#app .hero { padding: 40px 0; gap: 32px; }
#app .hero h1 { font-size: 64px; color: #87244e; text-shadow: none; }
#app .hero-subtitle { font-size: 24px; color: #7b3f5c; font-weight: 650; }
#app .hero .lead { font-size: 16px; color: #66515f; }
#app .hero-meta > span { font-size: 12px; color: var(--muted); }
#app .hero-meta b { font-size: 17px; color: #87244e; }
#app .eyebrow { font-size: 12px; color: #96305b; }
#app .portrait-board { background-image: none; background: #fce8f2; border: 1px solid #ead0de; box-shadow: none; border-radius: 14px; }
#app .pixel-window { transform: translateX(-50%); box-shadow: 0 5px 12px #a7728a14; border: 1px solid #cf9fb7; border-radius: 8px; overflow: hidden; }
#app .window-title { background: #f7cade; border-bottom: 1px solid #e6aac7; font-size: 10px; }
#app .hero-card-foot :where(span,b) { color: #744159; font-size: 12px; }
#app .float-tag { display: none; }
#app .board-bottom { font-size: 10px; color: #78526a; }
#app .setup { border: 1px solid #e4c9d7; border-radius: 12px; box-shadow: none; padding: 28px; }
#app .setup-label { font-size: 12px; color: #7f3e5c; }
#app .setup h2 { font-size: 24px; font-weight: 700; }
#app .setup p { font-size: 14px; color: var(--muted); }
#app .settings-label { font-size: 12px; color: var(--muted); }
#app .select-dark { background: white; color: #4b3944; font-size: 15px; border: 1px solid #d6c5ce; border-radius: 7px; padding: 12px; }
#app .ad-btn { font-size: 13px; color: #96305b; text-align: left; }
#app .under-setup { font-size: 13px; color: var(--muted); }
#app .under-setup button { font-size: 13px; }
#app .intro-section { border-bottom: 0; }
#app .intro-card { padding: 24px; }
#app .intro-card .number { font-size: 12px; color: #96305b; }
#app .intro-card h3 { font-size: 19px; }
#app .intro-card p { font-size: 14px; color: var(--muted); }
#app .resume-banner { background: white; border: 1px solid var(--line); border-radius: 10px; box-shadow: none; font-size: 15px; }
#app .birth-heading h1, #app .end-heading h1 { font-size: 31px; font-weight: 750; }
#app .birth-heading p, #app .end-heading p { font-size: 15px; color: var(--muted); }
#app .cert-info h2 { font-size: 29px; }
#app .cert-country { font-size: 14px; color: var(--muted); }
#app .big-score b { color: #87244e; font-size: 56px; font-weight: 700; }
#app .big-score small { color: var(--muted); font-size: 12px; }
#app .cert-foot { color: var(--muted); font-size: 13px; }
#app .cert-top { font-size: 11px; color: var(--muted); }
#app .cert-stamp { color: #87244e; font-size: 10px; }
#app .roulette-heading h1 { color: #87244e; font-weight: 750; }
#app .roulette-heading p { font-size: 15px; color: var(--muted); }
#app .roulette-slot { border-radius: 10px; border-color: var(--line); background: #fffbfd; }
#app .roulette-slot strong { color: #87244e; }
#app .roulette-slot :where(small,.slot-label) { color: var(--muted); font-size: 12px; }
#app .roulette-machine { border: 1px solid #e2bdd1; border-radius: 13px; box-shadow: none; }
#app .machine-top { background: #fae3ee; color: #87244e; font-size: 11px; }
#app .roulette-status { color: #87244e; font-size: 15px; }
#app .end-info h2 { font-size: 25px; }
#app .end-info > p { font-size: 14px; color: var(--muted); }
#app .end-stats b { font-size: 28px; color: #87244e; }
#app .end-stats small { color: var(--muted); font-size: 12px; }
#app .end-chart h3, #app .end-impact h3 { font-size: 17px; font-weight: 700; }
#app .end-impact p { font-size: 14px; color: var(--muted); }
#app .end-quote { color: #6c5060; font-size: 16px; }
#toast { color: white; background: #503347; border: 0; border-radius: 10px; box-shadow: 0 4px 20px #39213220; font-size: 14px; line-height: 1.7; }
#achievement-toast { background: white; color: #4f3546; border: 1px solid #d7afc5; box-shadow: 0 5px 20px #39213220; }
#achievement-toast > span { font-size: 12px; }
#achievement-toast strong { font-size: 16px; }
#achievement-toast button { font-size: 13px; color: #96305b; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 640px) {
  #app .wrap { padding: 0 16px; }
  #app .topbar { display: flex; flex-wrap: wrap; padding: 16px 0; min-height: 0; height: auto; gap: 8px 12px; }
  #app .wordmark { font-size: 23px; }
  #app .brand-sub { font-size: 11px; }
  #app .nav { margin: 4px 0 0; gap: 12px; justify-content: flex-start; width: 100%; }
  #app .nav button { font-size: 13px; min-height: 40px; }
  #app .nav .bgm-toggle { padding: 6px 9px; min-width: 88px; font-size: 12px; }
  #app .app-game .topbar { flex-wrap: nowrap; justify-content: space-between; gap: 8px; padding: 13px 0; }
  #app .app-game .brand-sub { display: none; }
  #app .app-game .nav { width: auto; margin: 0; gap: 10px; }
  #app .app-game .nav button { font-size: 12px; }
  #app .app-game .nav .bgm-toggle { min-width: 0; font-size: 11px; padding: 6px 7px; }
  #app .app-game .wordmark { font-size: 21px; white-space: nowrap; }
  #app .game-page { padding: 18px 0 24px; }
  #app .life-heading { gap: 12px; margin-bottom: 17px; align-items: center; }
  #app .avatar-mini { width: 56px; height: 72px; border-radius: 8px; }
  #app .life-name h1 { font-size: 21px; gap: 8px; }
  #app .life-name h1 span { font-size: 14px; padding: 1px 7px; }
  #app .life-name p, #app .life-title { font-size: 12px; }
  #app .profile-open { font-size: 12px; max-width: 64px; line-height: 1.7; text-align: right; }
  #app .life-dashboard { border-radius: 10px; }
  #app .core-strip { padding: 12px 0; }
  #app .core-stat { display: flex; flex-direction: column; gap: 3px; padding: 0 14px; }
  #app .core-stat .stat-label { font-size: 13px; font-weight: 600; gap: 5px; }
  #app .core-stat .stat-value { font-size: 27px; line-height: 1.3; }
  #app .core-stat .stat-track { height: 4px; margin-top: 4px; }
  #app .condition-alert { padding: 9px 12px; font-size: 12px; gap: 9px; }
  #app .condition-alert span { font-size: 11px; }
  #app .life-quick-info { padding: 6px 0 9px; gap: 10px; }
  #app .life-quick-info button { gap: 6px; }
  #app .life-quick-info span { font-size: 11px; }
  #app .life-quick-info strong { font-size: 13px; }
  #app .balance-current { flex-wrap: wrap; column-gap: 5px; max-width: 43%; }
  #app .game-navigation { margin-bottom: 22px; }
  #app .game-tab { font-size: 14px; padding: 10px 2px; }
  #app .sub-tabs { gap: 4px; margin-top: 10px; }
  #app .sub-tab { font-size: 14px; padding: 8px 12px 10px; }
  #app .diary-heading { align-items: center; margin-bottom: 12px; }
  #app .diary-heading h2 { font-size: 18px; }
  #app .diary-heading > span { font-size: 11px; }
  #app .playback-bar { gap: 6px; grid-template-columns: .95fr 1fr 1fr 1.2fr; }
  #app .playback-bar button { font-size: 12px; padding: 10px 4px; }
  #app .speed-picker select { font-size: 12px; padding: 8px 4px; }
  #app .year-progress { margin: 13px 0 20px; }
  #app .decision-card { padding: 20px 16px; margin-bottom: 25px; }
  #app .decision-card h3 { font-size: 22px; line-height: 1.5; margin: 8px 0 12px; }
  #app .decision-card p { font-size: 15px; line-height: 1.9; margin-bottom: 19px; }
  #app .decision-card .small-caps { font-size: 11px; }
  #app .choice { padding: 14px 13px; gap: 10px; }
  #app .choice strong { font-size: 15px; }
  #app .choice small { font-size: 12px; }
  #app .log-heading h3 { font-size: 18px; }
  #app .filter-pills { gap: 6px; }
  #app .filter-pill { font-size: 12px; padding: 6px 12px; }
  #app .event { padding-left: 25px; }
  #app .event h3 { font-size: 16px; }
  #app .event p { font-size: 15px; line-height: 1.85; }
  #app .event-age { font-size: 12px; }
  #app .event-badge { font-size: 10px; }
  #app .context-grid { grid-template-columns: 1fr; padding: 3px 16px 20px; gap: 24px; }
  #app .context-grid > section + section { border-top: 1px solid var(--line); padding-top: 20px; }
  #app .life-context > summary { padding: 16px; font-size: 14px; }
  #app .life-context > summary span { font-size: 11px; }
  #app .care-heading h2 { font-size: 23px; }
  #app .care-heading p { font-size: 14px; }
  #app .care-grid { grid-template-columns: 1fr; gap: 14px; }
  #app .care-card { padding: 20px; }
  #app .care-card h3 { font-size: 19px; }
  #app .care-card p { font-size: 14px; }
  #app .care-buy { flex-wrap: wrap; }
  #app .care-buy .ghost { font-size: 14px; }
  #app .parttime-panel { padding: 19px 16px; }
  #app .parttime-item { gap: 10px; padding: 13px; }
  #app .parttime-item > div { min-width: 150px; }
  #app .parttime-item .ghost { margin-left: auto; }
  #app .parttime-panel h3 { font-size: 19px; }
  #app .career-section-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  #app .pathways > summary { flex-wrap: wrap; gap: 3px 10px; padding: 17px 16px; }
  #app .pathways > summary > span { flex: 1 1 100%; font-size: 15px; }
  #app .pathways > summary:after { position: absolute; right: 16px; }
  #app .pathways { position: relative; }
  #app .pathway-body { padding: 0 16px 17px; }
  #app .pathway-category { font-size: 18px; }
  #app .casting-info { padding: 16px; }
  #app .casting-info p { font-size: 14px; }
  #app .health-notice { font-size: 13px; padding: 15px; }
  #app .care-health .section-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  #app .trait-section .section-head { flex-wrap: wrap; }
  #app .talent-card { padding: 18px; gap: 13px; }
  #app .talent-card h3 { font-size: 17px; }
  #app .talent-card p { font-size: 14px; }
  #app .habit-card { padding: 18px; }
  #app .history-table { font-size: 12px; }
  #app .history-table th { font-size: 12px; padding: 10px 3px; }
  #app .history-table td { font-size: 12px; padding: 12px 3px; }
  #app .hero { padding: 28px 0; gap: 25px; }
  #app .hero h1 { font-size: 52px; letter-spacing: -3px; }
  #app .hero-subtitle { font-size: 21px; line-height: 1.5; }
  #app .hero .lead { font-size: 15px; }
  #app .hero-meta { gap: 14px; }
  #app .hero-meta b { font-size: 15px; }
  #app .hero-meta > span { font-size: 11px; }
  #app .eyebrow { font-size: 10px; letter-spacing: .5px; }
  #app .portrait-board { height: 356px; }
  #app .pixel-window { top: 15px; width: 224px; }
  #app .hero-character { height: 235px; }
  #app .board-bottom { font-size: 9px; }
  #app .pixel-spark { display: none; }
  #app .setup { padding: 23px 20px; gap: 21px; }
  #app .setup-section:first-child { display: block; }
  #app .setup-section:first-child p { max-width: none; }
  #app .setup-section:nth-child(3) { border-top: 1px solid var(--line); padding-top: 20px; }
  #app .setup h2 { font-size: 23px; }
  #app .setup p { font-size: 14px; }
  #app .under-setup { font-size: 12px; }
  #app .site-footer { flex-direction: column; gap: 14px; font-size: 12px; }
  #app .site-footer > div:last-child { text-align: left; max-width: none; }
  #app .cert-grid { grid-template-columns: 96px minmax(0,1fr); gap: 16px; }
  #app .certificate { padding: 19px 16px; }
  #app .cert-info h2 { font-size: 25px; }
  #app .cert-country { font-size: 12px; }
  #app .cert-portrait, #app .cert-portrait svg { min-height: 190px; }
  #app .cert-info .component-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  #app .cert-info .component { padding: 9px; }
  #app .cert-info .component b { font-size: 21px; }
  #app .cert-info .component > span { font-size: 12px; }
  #app .cert-info .component small { font-size: 11px; }
  #app .cert-info .appearance-title strong { font-size: 19px; }
  #app .birth-actions .primary, #app .birth-actions .ghost { font-size: 14px; }
  #app .roulette-heading h1 { font-size: 27px; }
  #app .roulette-heading p { font-size: 14px; }
  #app .roulette-slot { padding: 15px 8px; }
  #app .roulette-slot small, #app .roulette-slot .slot-label { font-size: 11px; }
  #app .roulette-slot strong { font-size: 19px; }
  #app .roulette-machine > .primary { font-size: 14px; }
  #app .roulette-status { font-size: 14px; }
  #overlay-root .overlay { padding: 12px; }
  #overlay-root .modal { padding: 22px 18px; max-height: 90dvh; }
  #overlay-root .modal-head h2 { font-size: 21px; }
  #overlay-root .modal-intro { font-size: 15px; }
  #overlay-root .notice-box { font-size: 14px; padding: 14px; }
  #overlay-root .modal-actions button { flex: 1; font-size: 14px; }
  #overlay-root .focus-grid { grid-template-columns: 1fr 1fr; }
  #overlay-root .focus-btn { padding: 16px 13px; }
  #overlay-root .focus-btn.active { padding: 15px 12px; }
  #overlay-root .focus-btn b { font-size: 15px; }
  #overlay-root .focus-btn small { font-size: 12px; }
  #overlay-root .character-detail { grid-template-columns: 88px minmax(0,1fr); gap: 15px; }
  #overlay-root .character-detail h3 { font-size: 18px; }
  #overlay-root .character-detail .portrait-live { height: 130px; }
  #overlay-root .character-detail .appearance-title > strong { font-size: 19px; }
  #overlay-root .achievement-grid { grid-template-columns: 1fr; }
  #overlay-root .achievement-card p { font-size: 14px; }
}
@media (max-width: 360px) {
  #app .wrap { padding: 0 12px; }
  #app .app-game .nav { gap: 7px; }
  #app .app-game .wordmark { font-size: 19px; }
  #app .core-stat { padding: 0 12px; }
  #app .life-quick-info strong { font-size: 12px; }
  #app .profile-open { max-width: 58px; }
  #app .diary-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
}