:root {
  --bg: #ffffff;
  --paper: #ffffff;
  --ink: #283b52;
  --text: #283b52;
  --muted: #526174;
  --line: #e1e6ec;
  --accent: #3d5068;
  --accent-strong: #283b52;
  --accent-soft: #f8f9fb;
  --gold: #866124;
  --rose: #99595c;
  --blue: #3f6e85;
  --sans: 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
  --serif: 'Noto Serif KR', Batang, Georgia, serif;
  --text-scale: 1;
  --body-size: calc(16px * var(--text-scale));
  --small-size: calc(14px * var(--text-scale));
}
:root[data-text-size='extra'] { --text-scale: 1.15; }
* { box-sizing: border-box; }
/* Keep centered content in place when navigating between tall and short pages. */
html { scroll-behavior: smooth; scroll-padding-top: 110px; scrollbar-gutter: stable; }
/* Live months must not pull the page toward a changing panel while the player
   is scrolling. Explicit tab and section navigation still controls its move. */
html:has(.game-main) { overflow-anchor: none; }
.timeline-scroll.is-expanded { scroll-behavior: auto; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}
body { margin: 0; background: var(--bg); color: var(--text); font: 500 var(--body-size)/1.85 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: inherit; transition: background .15s, border-color .15s, box-shadow .15s; }
button:disabled { cursor: not-allowed; opacity: 1; color: #526174; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #a88026; outline-offset: 4px; }
button:not(:disabled):active { transform: translateY(1px); }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--ink); font-weight: 800; letter-spacing: -.6px; word-break: keep-all; overflow-wrap: anywhere; }
h2 { font-size: calc(24px * var(--text-scale)); line-height: 1.55; }
h3 { font-size: calc(18px * var(--text-scale)); line-height: 1.65; }
p { word-break: keep-all; overflow-wrap: anywhere; }
strong, b { font-weight: 800; }
small, .tiny { font-size: var(--small-size); line-height: 1.8; }
input, select { border: 1px solid #cfd7e0; background: #ffffff; color: var(--ink); padding: 12px 14px; border-radius: 6px; min-width: 0; max-width: 100%; }
input::placeholder { color: #68788a; opacity: 1; }
input[type='range'] { accent-color: var(--accent); }
.icon { width: 22px; height: 22px; flex-shrink: 0; vertical-align: middle; stroke-width: 1.8; }
.muted { color: var(--muted); }
.full { width: 100%; }
.panel { padding: 26px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 2px 2px #283b5203; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: calc(13px * var(--text-scale)); font-weight: 700; color: #526174; letter-spacing: 1px; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #526174; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 19px; }
.section-heading .eyebrow { margin-bottom: 7px; }
.section-heading > span { font-size: var(--small-size); color: var(--muted); }
.section-heading h2 .icon, .section-heading h3 .icon { margin-right: 7px; }
.section-description { font-size: var(--body-size); color: var(--muted); line-height: 1.9; margin: 0 0 22px; }
.primary, .secondary, .text-button, .icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 6px; font-weight: 700; }
.primary { padding: 12px 20px; background: var(--accent-strong); color: #ffffff; border: 1px solid var(--accent-strong); min-height: 47px; }
.primary:not(:disabled):hover { background: #3d5068; border-color: #3d5068; box-shadow: 0 2px 7px #283b5222; }
.primary:disabled { background: #f8f9fb; border-color: #e1e6ec; color: #526174; }
.secondary { padding: 10px 17px; min-height: 45px; background: #ffffff; color: #3d5068; border: 1px solid #cfd7e0; }
.secondary:not(:disabled):hover { background: #f8f9fb; border-color: #68788a; }
.secondary:disabled { background: #f8f9fb; color: #526174; border-style: dashed; }
.text-button { padding: 9px 0; border: 0; background: none; color: #3d5068; text-decoration-thickness: 1px; }
.text-button:not(:disabled):hover { text-decoration: underline; }
.icon-button { width: 43px; height: 43px; padding: 8px; background: transparent; border: 0; }
.icon-button:hover { background: var(--accent-soft); }
.large-button { padding: 17px 26px; min-height: 58px; font-size: calc(17px * var(--text-scale)); }
.subtle { color: #735b48; }
.small-count, .count-tag, .level-pill { display: inline-flex; align-items: center; justify-content: center; background: #f8f9fb; border: 1px solid #eef1f5; color: #3d5068; padding: 1px 8px; border-radius: 5px; font: 800 var(--small-size)/1.8 var(--sans); }
.small-count { margin-left: 6px; }
.boot { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 24px; }
.site-header { height: 88px; position: sticky; top: 0; z-index: 30; border-bottom: 1px solid #e1e6ec; background: #fffffff5; backdrop-filter: blur(12px); }
.header-inner { max-width: 1760px; height: 100%; margin: auto; padding: 0 35px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand > span:last-child { font: 700 calc(25px * var(--text-scale))/1 var(--serif); color: var(--accent-strong); letter-spacing: 3px; }
.brand small { font: 700 calc(12px * var(--text-scale))/1.5 var(--sans); letter-spacing: 2px; display: block; margin-top: 7px; }
.brand-mark { display: grid; place-items: center; position: relative; width: 42px; height: 48px; border: 2px solid #526174; border-radius: 4px 4px 16px 16px; font: calc(32px * var(--text-scale))/1 Georgia, serif; color: #3d5068; }
.brand-mark span { position: absolute; top: -12px; left: 14px; font: calc(13px * var(--text-scale))/1 var(--sans); background: #ffffff; padding: 1px; }
.site-header nav { display: flex; align-items: center; gap: 25px; }
.nav-link { font-weight: 700; font-size: calc(15px * var(--text-scale)); background: transparent; border: 0; color: #526174; padding: 10px 0; }
.version-badge { border: 1px solid #e1e6ec; border-radius: 4px; padding: 4px 7px; color: #526174; font-size: calc(12px * var(--text-scale)); font-weight: 700; white-space: nowrap; }
.readability-button { background: #f8f9fb; border: 1px solid #cfd7e0; width: 45px; height: 43px; border-radius: 6px; font: 800 calc(18px * var(--text-scale)) var(--sans); color: #283b52; }
.time-controls, .header-actions { display: flex; align-items: center; gap: 16px; }
.play-button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; background: none; border: 0; font-size: calc(15px * var(--text-scale)); font-weight: 800; color: #3d5068; min-width: 85px; }
.play-button .icon { width: 19px; height: 19px; }
.speeds { display: flex; align-items: center; padding: 3px; gap: 1px; background: #f8f9fb; border: 1px solid #e1e6ec; border-radius: 6px; }
.speeds button { border: 0; background: none; font-size: calc(14px * var(--text-scale)); font-weight: 700; padding: 7px 8px; min-width: 38px; border-radius: 4px; color: #526174; }
.speeds button[aria-pressed='true'] { background: #ffffff; color: #283b52; box-shadow: 0 1px 4px #283b5220; }
.next-button { font-size: calc(15px * var(--text-scale)); white-space: nowrap; }
.auto-toggle { display: flex; gap: 7px; align-items: center; background: none; border: 0; font-size: calc(14px * var(--text-scale)); font-weight: 700; color: #3d5068; padding: 8px 0; white-space: nowrap; }
.auto-toggle i { width: 14px; height: 14px; border: 2px solid #a8b4c2; border-radius: 3px; }
.auto-toggle.on i { background: #3d5068; box-shadow: inset 0 0 0 2px #ffffff; }
.home-main { max-width: 1440px; margin: auto; padding: 0 45px; }
.landing-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 45px; align-items: center; padding: 65px 0; }
.hero-copy h1 { font: 700 clamp(40px,3.8vw,58px)/1.5 var(--serif); letter-spacing: -2.8px; margin: 23px 0; }
.hero-copy h1 em { font-style: normal; color: #876325; }
.hero-description { font-size: calc(17px * var(--text-scale)); line-height: 2; color: #526174; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 17px; }
.hero-footnote { display: flex; align-items: center; gap: 7px; font-size: calc(14px * var(--text-scale)); color: #526174; }
.hero-footnote .icon { width: 17px; height: 17px; }
.hero-map { position: relative; border: 1px solid #cfd7e0; border-radius: 95px 95px 7px 7px; padding: 34px 20px 22px; background: #f8f9fb; }
.hero-map:after { content: ''; position: absolute; inset: 8px; border: 1px solid #e1e6ec; border-radius: 88px 88px 3px 3px; pointer-events: none; }
.map-topline { text-align: center; font-size: calc(12px * var(--text-scale)); font-weight: 700; letter-spacing: 1px; color: #526174; }
.map-topline span { display: block; }
.map-topline span:last-child { margin-top: 7px; font: 700 calc(15px * var(--text-scale)) var(--serif); }
.world-map { display: block; width: 100%; height: auto; }
.map-land path { fill: #eef1f5; stroke: #a8b4c2; stroke-width: 1.3; }
.map-ocean { fill: #526174; font: italic calc(11px * var(--text-scale)) Georgia, serif; letter-spacing: 1px; }
.map-quote { font: 600 calc(14px * var(--text-scale))/1.9 var(--serif); color: #526174; text-align: center; }
.map-bottomline { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid #cfd7e0; padding-top: 14px; margin: 19px 10px 0; font-size: calc(12px * var(--text-scale)); color: #526174; }
.map-stamp { position: absolute; right: 22px; bottom: -20px; background: #ffffff; border: 1px solid #beaa76; outline: 4px solid #ffffff; color: #7d5d25; padding: 10px 16px; transform: rotate(-5deg); font: 600 calc(13px * var(--text-scale))/1.8 var(--serif); text-align: center; z-index: 1; }
.possibility-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 25px; border-block: 1px solid var(--line); padding: 28px 0; }
.possibility-strip > div { display: flex; align-items: center; gap: 12px; border-left: 1px solid var(--line); padding-left: 22px; }
.possibility-strip > div:first-child { border: 0; padding: 0; }
.strip-icon { width: 43px; height: 43px; display: grid; place-items: center; background: #eef1f5; border-radius: 50%; color: #526174; flex-shrink: 0; }
.possibility-strip strong { display: block; font-size: calc(27px * var(--text-scale)); color: #3d5068; line-height: 1.5; }
.possibility-strip strong small { font: 700 calc(14px * var(--text-scale)) var(--sans); margin-left: 5px; }
.possibility-strip p > span { font-size: calc(14px * var(--text-scale)); color: #526174; }
.home-lower { display: grid; grid-template-columns: 1.3fr 1fr; gap: 25px; margin-top: 40px; }
.start-settings .section-heading { margin-bottom: 24px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #eef1f5; padding: 21px 0; }
.setting-row:last-child { padding-bottom: 0; }
.setting-row p { color: #526174; font-size: calc(14px * var(--text-scale)); margin-top: 5px; }
.setting-row input { width: 205px; font-size: calc(15px * var(--text-scale)); }
.segmented { display: inline-flex; align-items: stretch; padding: 3px; border: 1px solid #e1e6ec; background: #f8f9fb; border-radius: 6px; flex-shrink: 0; }
.segmented button { padding: 7px 12px; border: 0; background: none; border-radius: 4px; color: #526174; font-size: calc(14px * var(--text-scale)); font-weight: 700; white-space: nowrap; }
.segmented button[aria-pressed='true'] { background: #ffffff; color: #283b52; box-shadow: 0 1px 3px #283b5220; }
.start-settings .setting-row:has(.segmented) { flex-wrap:wrap; gap:12px; }
.start-settings .segmented { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; }
.start-settings .segmented button { padding-inline:8px; }
.starting-auto-toggle { display:flex; width:100%; align-items:center; justify-content:space-between; gap:18px; font-weight:700; color:#3d5068; cursor:pointer; }
.starting-auto-toggle > span { min-width:0; flex:1; }
.starting-auto-toggle small { display:block; margin-top:4px; font-weight:400; color:var(--muted); line-height:1.5; }
.starting-auto-toggle input[type='checkbox'] { width:22px; height:22px; margin:0; padding:0; flex:0 0 22px; accent-color:#3d5068; }
@media(max-width:480px) {
  .start-settings .segmented { grid-template-columns:repeat(2,minmax(0,1fr)); gap:3px; }
}
.switch { height: 28px; width: 47px; border-radius: 18px; border: 1px solid #cfd7e0; background: #eef1f5; position: relative; flex-shrink: 0; }
.switch i { position: absolute; top: 3px; left: 3px; height: 20px; width: 20px; border-radius: 50%; background: white; }
.switch.on { background: #526174; }
.switch.on i { left: 22px; }
.summon-odds { background: #f8f9fb; }
.summon-odds h2 { margin: 9px 0 15px; }
.summon-odds > p { line-height: 1.9; }
.odds-list { margin: 25px 0; }
.odds-item { display: grid; grid-template-columns: 150px 1fr 55px; align-items: center; gap: 12px; margin: 16px 0; font-size: calc(15px * var(--text-scale)); color: #3d5068; }
.odds-item > div { height: 8px; background: #eef1f5; border-radius: 4px; }
.odds-item i { display: block; height: 100%; background: #68788a; border-radius: 4px; }
.odds-item b { font-size: calc(14px * var(--text-scale)); text-align: right; }
.journey-intro { margin: 70px 0; text-align: center; }
.journey-intro > h2 { font: 700 calc(31px * var(--text-scale))/1.7 var(--serif); margin-top: 15px; }
.journey-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 45px; margin-top: 42px; text-align: left; }
.journey-grid article > .icon { width: 30px; height: 30px; margin-bottom: 17px; color: #526174; }
.journey-grid h3 { margin-bottom: 13px; }
.journey-grid p { color: #526174; }
.home-archives { margin: 40px 0 65px; }
.archive-preview, .archive-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
footer { max-width: 1640px; margin: 0 auto; border-top: 1px solid #e1e6ec; padding: 32px; display: flex; justify-content: space-between; align-items: center; gap: 25px; font-size: calc(13px * var(--text-scale)); color: #526174; }
footer > div { display: flex; align-items: center; gap: 15px; }
footer strong { font: 700 calc(22px * var(--text-scale)) var(--serif); letter-spacing: 2px; }
footer p { text-align: center; }
footer > span { font-size: calc(12px * var(--text-scale)); }
.game-main { max-width: 1760px; margin: auto; padding: 0 35px 45px; }
.life-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 30px 0 23px; }
.life-titlebar h1 { display: flex; align-items: center; gap: 8px; font-size: calc(27px * var(--text-scale)); margin-top: 9px; }
.life-titlebar h1 strong { font: 800 calc(45px * var(--text-scale))/1 var(--sans); letter-spacing: -2px; }
.life-titlebar h1 > span { font-size: calc(17px * var(--text-scale)); padding-top: 10px; }
.life-titlebar h1 i { height: 28px; width: 1px; background: #cfd7e0; margin: 0 14px; }
.world-date { text-align: right; font-size: calc(15px * var(--text-scale)); color: #526174; }
.world-date small { display: block; font-size: calc(14px * var(--text-scale)); margin-top: 6px; }
.status-dot { display: inline-block; width: 7px; height: 7px; background: #526174; border-radius: 50%; margin: 0 7px 2px 0; }
.status-dot.paused { background: #97712d; }
.status-dot.dead { background: #96676b; }
.quick-vitals { display: flex; flex-wrap: wrap; gap: 11px 20px; border: 1px solid #e1e6ec; background: #f8f9fb; border-radius: 8px; padding: 13px 18px; margin: 0 0 22px; }
.quick-vitals span { display: inline-flex; align-items: center; gap: 6px; font-size: calc(15px * var(--text-scale)); color: #3d5068; }
.quick-vitals b { font-size: calc(18px * var(--text-scale)); color: #283b52; }
.quick-vitals .icon { width: 18px; height: 18px; }
.game-layout { display: grid; grid-template-columns: 280px minmax(0,1fr) 280px; gap: 24px; align-items: start; }
.left-column, .center-column, .right-column, #main-panel { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.game-layout .panel { padding: 23px; }
.identity-card.panel { padding: 0; overflow: hidden; }
.identity-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 17px; background: #f8f9fb; font-size: calc(12px * var(--text-scale)); font-weight: 700; color: #3d5068; }
.identity-name { display: flex; align-items: center; gap: 11px; padding: 24px 17px 18px; }
.avatar { width: 55px; height: 63px; display: block; }
.avatar.big { width: 84px; height: 95px; }
.identity-name h2 { font-size: calc(25px * var(--text-scale)); overflow-wrap: anywhere; }
.identity-name span { font-size: calc(14px * var(--text-scale)); color: #526174; }
.profession-tag { display: inline-block; background: #f8f9fb; color: #3d5068; padding: 2px 8px; font-size: calc(14px * var(--text-scale)); font-weight: 800; border-radius: 4px; margin-top: 9px; }
.details { margin: 0; }
.details > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 13px; font-size: calc(14px * var(--text-scale)); }
.details dt { color: #526174; white-space: nowrap; }
.details dd { margin: 0; text-align: right; color: #3d5068; font-weight: 700; }
.identity-card .details { padding: 0 18px 12px; }
.identity-bottom { display: flex; justify-content: space-between; gap: 8px; border-top: 1px dashed #cfd7e0; padding: 13px 18px; background: #f8f9fb; font-size: calc(13px * var(--text-scale)); color: #526174; }
.identity-bottom strong { font-size: calc(19px * var(--text-scale)); margin-left: 5px; }
.identity-bottom .icon { width: 16px; height: 16px; }
.stat-meter { margin: 19px 0; }
.stat-meter > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: calc(15px * var(--text-scale)); margin-bottom: 8px; color: #3d5068; }
.stat-meter b { color: #283b52; font-size: calc(18px * var(--text-scale)); font-variant-numeric: tabular-nums; }
.stat-meter b small { color: #526174; font-size: calc(14px * var(--text-scale)); }
.stat-meter span .icon { width: 17px; height: 17px; margin-right: 5px; }
.meter-track { height: 8px; background: #eef1f5; border-radius: 5px; overflow: hidden; }
.meter-track i { display: block; height: 100%; border-radius: 5px; background: #68788a; }
.meter-track i.blue { background: #59879a; }
.meter-track i.gold { background: #b28c3e; }
.meter-track i.rose { background: #a56a73; }
.wealth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 25px; }
.wealth-row > span { font-size: calc(14px * var(--text-scale)); color: #526174; }
.wealth-row .icon { width: 18px; height: 18px; }
.wealth-row strong { font-size: calc(26px * var(--text-scale)); color: #6f521b; }
.wealth-row strong small { font-size: calc(14px * var(--text-scale)); }
.talent-card { display: flex; align-items: center; gap: 11px; padding: 14px 0; border-bottom: 1px solid #eef1f5; }
.talent-card:last-child { border-bottom: 0; }
.talent-icon { width: 37px; height: 41px; display: grid; place-items: center; border: 1px solid #e1e6ec; border-radius: 5px; background: #f8f9fb; color: #526174; flex-shrink: 0; }
.talent-card strong { display: block; font-size: calc(16px * var(--text-scale)); color: #3d5068; }
.talent-card small { color: #526174; font-size: calc(14px * var(--text-scale)); }
.rank { display: grid; place-items: center; min-width: 30px; height: 32px; margin-left: auto; background: #f8f9fb; border: 1px solid #cfd7e0; border-radius: 4px; font: 800 calc(18px * var(--text-scale)) var(--sans); color: #3d5068; }
.rank-A { background: #f9edc6; border-color: #b38c37; color: #79520d; }
.rank-B { background: #eee4f4; border-color: #b59bc9; color: #725088; }
.rank-C { background: #f8f9fb; border-color: #cfd7e0; color: #3d5068; }
.rank-D { background: #e2edf1; border-color: #a4bcc4; color: #3d687a; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.core-stats .section-heading { flex-direction: column; align-items: flex-start; gap: 5px; }
.stats-grid > div { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: calc(14px * var(--text-scale)); color: #526174; }
.stats-grid b { font-size: calc(18px * var(--text-scale)); color: #283b52; }
.scene-banner { position:relative; border: 1px solid #cfd7e0; border-radius: 8px; overflow: hidden; background: #eef1f5; }
.scene-banner > svg { display: block; height: 170px; width: 100%; }
.scene-caption { display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between; gap: 8px 10px; padding: 11px 17px; background: #eef1f5; border-top: 1px solid #cfd7e0; font-size: calc(14px * var(--text-scale)); font-weight: 700; color: #3d5068; }
.scene-caption > span:first-child { display: flex; align-items: center; gap: 6px; }
.scene-caption .icon { width: 18px; height: 18px; }
.game-tabs { display: flex; gap: 9px; border-bottom: 2px solid #e1e6ec; }
.game-tabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; position: relative; padding: 12px 5px 16px; min-height: 53px; font-size: calc(16px * var(--text-scale)); font-weight: 800; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #526174; margin-bottom: -2px; white-space: nowrap; }
.game-tabs button[aria-current='page'] { border-bottom-color: #3d5068; color: #283b52; }
.game-tabs button:hover { background: #f8f9fb; }
.tab-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; right: 8px; top: 5px; background: #a87922; }
.category-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin: 24px 0 30px; }
.category-card { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; background: #ffffff; border: 1px solid #e1e6ec; border-radius: 8px; padding: 17px 15px; text-align: left; }
.category-card .icon { color: #526174; width: 25px; height: 25px; }
.category-card strong { color: #283b52; font-size: calc(17px * var(--text-scale)); }
.category-card > span { color: #526174; font-size: calc(14px * var(--text-scale)); line-height: 1.8; }
.category-card:hover { background: #f8f9fb; border-color: #68788a; }
.category-card.selected { background: #eef1f5; border: 2px solid #526174; padding: 16px 14px; box-shadow: 0 0 0 2px #5261740a; }
.live-plan { display: inline-flex; align-items: center; gap: 5px; font-size: calc(14px * var(--text-scale)); font-weight: 800; padding: 5px 8px; background: #f8f9fb; border-radius: 5px; color: #3d5068; }
.live-plan .icon { width: 17px; height: 17px; }
.planner-panel > .section-heading { align-items: flex-start; }
.planner-divider { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 24px; border-top: 1px solid #e1e6ec; margin-bottom: 16px; }
.planner-divider h3 { font-size: calc(21px * var(--text-scale)); }
.field-help { font-size: calc(15px * var(--text-scale)); color: #526174; margin-bottom: 17px; }
.training-grid, .activity-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.training-card { display: flex; align-items: flex-start; flex-direction: column; gap: 9px; padding: 18px; border: 1px solid #e1e6ec; border-radius: 7px; background: #ffffff; text-align: left; }
.training-card:hover:not(:disabled), .activity-card:hover:not(:disabled) { background: #f8f9fb; border-color: #68788a; }
.training-card.selected { border: 2px solid #526174; padding: 17px; background: #f8f9fb; }
.training-card.locked { border-style: dashed; background: #f8f9fb; }
.training-card-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.training-card-top .icon { width: 25px; height: 25px; color: #526174; }
.selection-box { width: 24px; height: 24px; border: 1px solid #a8b4c2; border-radius: 5px; display: grid; place-items: center; background: #ffffff; font-size: calc(16px * var(--text-scale)); font-weight: 800; color: #3d5068; }
.selected .selection-box { color: #ffffff; background: #3d5068; border-color: #3d5068; }
.training-card > strong { font-size: calc(18px * var(--text-scale)); color: #283b52; }
.training-card p { color: #526174; font-size: calc(15px * var(--text-scale)); line-height: 1.9; }
.training-stat { display: inline-flex; align-items: center; gap: 11px; margin-top: auto; padding-top: 7px; color: #3d5068; font-size: calc(15px * var(--text-scale)); }
.training-stat b { font-size: calc(22px * var(--text-scale)); }
.training-card small { color: #526174; font-size: calc(14px * var(--text-scale)); text-align: left; }
.cheat-note { display: flex; align-items: center; gap: 5px; color: #7c5512; font-size: calc(14px * var(--text-scale)); font-weight: 800; }
.cheat-note .icon { width: 16px; height: 16px; color: #966921; }
.activity-card { display: flex; align-items: flex-start; flex-direction: column; gap: 12px; text-align: left; border: 1px solid #e1e6ec; background: #ffffff; border-radius: 7px; padding: 20px; }
.activity-card.selected { background: #eef1f5; border: 2px solid #526174; padding: 19px; }
.activity-card > strong { font-size: calc(18px * var(--text-scale)); color: #283b52; }
.activity-card > span { color: #526174; font-size: calc(15px * var(--text-scale)); }
.activity-card > small { color: #775816; font-size: calc(14px * var(--text-scale)); }
.path-library-link { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; background: #f8f9fb; border: 1px solid #cfd7e0; border-radius: 6px; padding: 16px; margin-top: 20px; font-size: calc(15px * var(--text-scale)); font-weight: 800; color: #3d5068; }
.info-banner { display: flex; align-items: flex-start; gap: 13px; padding: 20px; background: #f8f9fb; border: 1px solid #e1e6ec; border-radius: 7px; }
.info-banner .text-button { display: flex; }
.training-plan { background: #f8f9fb; border: 1px solid #cfd7e0; padding: 22px; border-radius: 7px; margin-top: 25px; }
.training-plan .section-heading > span { font-size: calc(14px * var(--text-scale)); color: #526174; }
.training-plan > p { color: #526174; }
.plan-share-bar { display: flex; gap: 3px; height: 12px; border-radius: 8px; overflow: hidden; margin: 22px 0 14px; background: #eef1f5; }
.plan-share-bar i { background: #526174; }
.plan-share-bar .share-1 { background: #68788a; }
.plan-share-bar .share-2 { background: #b39a50; }
.plan-share-bar .share-living { background:#9aa5af; }
.plan-share-bar .share-idle { background:#d6dce3; }
.plan-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #eef1f5; }
.plan-list > div > span { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: calc(15px * var(--text-scale)); }
.plan-list b { color: #3d5068; font-size: calc(17px * var(--text-scale)); }
.weight-controls { display: flex; gap: 7px; }
.weight-controls button { width: 35px; height: 35px; border: 1px solid #a8b4c2; background: #ffffff; border-radius: 5px; font-size: calc(22px * var(--text-scale)); font-weight: 700; color: #3d5068; line-height: 1; }
.plan-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; }
.plan-footer > div { flex: 1; }
.plan-footer strong { color: #283b52; font-size: calc(17px * var(--text-scale)); }
.plan-footer p { color: #526174; font-size: calc(14px * var(--text-scale)); margin-top: 6px; }
.plan-footer .primary { flex-shrink: 0; }
.plan-footer .icon { width: 18px; height: 18px; }
.training-plan > .secondary { margin-top: 20px; }
.training-plan .plan-list > .plan-living-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; }
.plan-living-row .plan-living-description { grid-column:1 / -1; color:var(--muted); font-size:calc(13px * var(--text-scale)); line-height:1.5; }
.plan-living-row .living-dot { width:7px; height:7px; border-radius:50%; background:#9aa5af; }
.training-plan .plan-living-note, .training-plan .plan-living-limit { margin:9px 0 0; font-size:calc(13px * var(--text-scale)); line-height:1.55; color:var(--muted); }
.training-plan .plan-living-limit { color:#775c36; }
.planner-panel .training-plan .plan-footer { margin-top:12px; }
.training-plan .plan-list > .monthly-plan-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; }
.monthly-plan-row .monthly-plan-detail { grid-column:1 / -1; color:var(--muted); font-size:calc(13px * var(--text-scale)); line-height:1.55; }
.monthly-plan-detail .text-button { padding:0 0 0 10px; font-size:inherit; white-space:nowrap; }
.monthly-plan-row .plan-kind-label { color:var(--muted); font-size:calc(12px * var(--text-scale)); font-weight:600; }
.monthly-plan-row .remove-plan-item { border-color:transparent; background:transparent; color:#68788a; }
.training-plan .plan-add-path { padding-top:8px; text-align:right; }
.training-plan .plan-add-path .text-button { font-size:calc(13px * var(--text-scale)); padding:4px 0; }
.growth-intro > p { color: #526174; }
.growth-numbers { display: flex; flex-wrap: wrap; gap: 25px; padding: 22px 0; margin-top: 15px; border-block: 1px solid #eef1f5; }
.growth-numbers > span { font-size: calc(14px * var(--text-scale)); color: #526174; }
.growth-numbers strong { font-size: calc(27px * var(--text-scale)); margin-right: 7px; color: #3d5068; }
.skills-talents { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-top: 15px; }
.filter-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-pills button, .path-tabs button { background: #f8f9fb; border: 1px solid #e1e6ec; border-radius: 5px; font-size: calc(14px * var(--text-scale)); font-weight: 700; padding: 7px 11px; color: #526174; }
.filter-pills button[aria-pressed='true'], .path-tabs button[aria-pressed='true'] { background: #3d5068; border-color: #3d5068; color: #ffffff; }
.paths-panel .section-heading { align-items: flex-start; flex-wrap: wrap; }
.path-grid, .skill-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.path-card { display: flex; flex-direction: column; border: 1px solid #e1e6ec; border-radius: 8px; background: #ffffff; padding: 20px; }
.path-card.eligible { border-color: #68788a; background: #f8f9fb; }
.path-card.owned { border-color: #a8b4c2; }
.path-card.active { border: 2px solid #526174; padding: 19px; background: #f8f9fb; }
.path-card-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; flex-wrap: wrap; }
.path-glyph { display: grid; place-items: center; width: 36px; height: 40px; border-radius: 5px; background: #f8f9fb; color: #526174; }
.path-card-heading > div { flex: 1; }
.path-card-heading > div > span { font-size: calc(13px * var(--text-scale)); color: #526174; }
.path-card-heading h3 { font-size: calc(22px * var(--text-scale)); }
.path-status { font-size: calc(13px * var(--text-scale)); font-weight: 700; color: #526174; background: #f8f9fb; padding: 3px 7px; border-radius: 4px; }
.path-card.active .path-status { background: #526174; color: white; }
.path-card > p { font-size: calc(15px * var(--text-scale)); color: #526174; line-height: 1.9; }
.path-requirements { display: flex; flex-direction: column; gap: 6px; margin: 19px 0 21px; }
.path-requirements > span { display: flex; align-items: baseline; gap: 5px; justify-content: space-between; font-size: calc(14px * var(--text-scale)); color: #855040; }
.path-requirements b { font-size: calc(15px * var(--text-scale)); white-space: nowrap; }
.path-requirements > .met { color: #3d5068; }
.path-card > button { margin-top: auto; font-size: calc(15px * var(--text-scale)); min-height: 46px; white-space: normal; }
.path-mastery { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0 15px; border-top: 1px solid #e1e6ec; font-size: calc(14px * var(--text-scale)); color: #526174; }
.path-mastery strong { font-size: calc(18px * var(--text-scale)); }
.path-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0 20px; }
.skill-card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #cfd7e0; border-radius: 7px; padding: 20px; gap: 14px; }
.skill-card.learned { background: #f8f9fb; border-color: #a8b4c2; }
.skill-card.locked { background: #f8f9fb; border-style: dashed; }
.skill-card-heading { display: flex; align-items: center; gap: 11px; }
.skill-card-heading > span { display: grid; place-items: center; background: #eef1f5; color: #526174; width: 36px; height: 39px; border-radius: 5px; }
.skill-card-heading small { font-size: calc(13px * var(--text-scale)); color: #526174; }
.skill-card-heading h3 { font-size: calc(20px * var(--text-scale)); }
.skill-card > p { font-size: calc(15px * var(--text-scale)); line-height: 1.85; color: #526174; }
.skill-effects { font-size: calc(14px * var(--text-scale)); font-weight: 800; color: #3d5068; background: #f8f9fb; padding: 9px 11px; border-radius: 4px; }
.skill-research-info { display: flex; flex-direction: column; gap: 4px; font-size: calc(14px * var(--text-scale)); color: #6b582a; }
.skill-card .locked-reason { font-size: calc(14px * var(--text-scale)); color: #875141; }
.skill-card > button { margin-top: auto; font-size: calc(15px * var(--text-scale)); }
.skill-rank-guide { padding: 17px; margin: 0 0 22px; background: #f8f9fb; border: 1px solid #cfd7e0; border-radius: 6px; }
.skill-rank-guide > strong { font-size: calc(16px * var(--text-scale)); color: #3d5068; }
.skill-rank-guide > span { display: block; font-size: calc(19px * var(--text-scale)); color: #3d5068; font-weight: 800; margin: 5px 0; letter-spacing: 1px; }
.skill-rank-guide > p { font-size: calc(15px * var(--text-scale)); color: #526174; }
.skill-card-heading > div { flex: 1; }
.skill-rank { min-width: 39px; padding: 4px 8px; border: 1px solid #cfd7e0; border-radius: 5px; text-align: center; font-size: calc(16px * var(--text-scale)); background: #f8f9fb; color: #3d5068; white-space: nowrap; }
.skill-rank.rank-S { color: #5e3b82; background: #e9dcef; border-color: #ad83bf; }
.spell-library h2 .icon { margin-right: 7px; }
.spell-codex > summary { padding: 15px 17px; font-weight: 800; color: #283b52; background: #f8f9fb; border: 1px solid #e1e6ec; border-radius: 6px; cursor: pointer; }
.spell-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 15px; }
.spell-card { padding: 20px; border: 1px solid #e1e6ec; border-radius: 8px; background: #ffffff; }
.spell-card.learned { background: #f8f9fb; border-color: #a8b4c2; }
.spell-card > p { margin: 14px 0; }
.spell-card .research-fee { font-size: calc(14px * var(--text-scale)); color: #526174; }
.spell-card .locked-reason { display: block; margin-bottom: 12px; }
.ready-spell { padding: 13px 16px; background: #f8f9fb; border-radius: 5px; margin-bottom: 18px; }
.social-standing { display: flex; flex-direction: column; gap: 4px; border-block: 1px solid #eef1f5; padding: 12px 0; margin: 16px 0; font-size: calc(14px * var(--text-scale)); color: #526174; }
.social-standing strong { color: #283b52; }
.story-thread > small { display: block; color: #526174; margin-bottom: 5px; }
.story-choice { display: block; font-size: calc(14px * var(--text-scale)); color: #3d5068; font-weight: 700; margin-top: 9px; }
.research-status { display: flex; align-items: flex-start; gap: 13px; background: #eee9d3; border: 1px solid #c2ad71; border-radius: 7px; padding: 19px; margin-bottom: 22px; color: #725721; }
.research-status > .icon { margin-top: 4px; }
.research-status > div { flex: 1; min-width: 0; }
.research-status strong { font-size: calc(17px * var(--text-scale)); }
.research-status p, .research-status span { font-size: calc(14px * var(--text-scale)); line-height: 1.9; margin-top: 8px; }
.research-track { height: 9px; overflow: hidden; border-radius: 5px; background: #dcd2af; margin: 13px 0 5px; }
.research-track i { display: block; height: 100%; border-radius: 5px; background: #a18135; }
.growth-limits .section-heading { flex-wrap: wrap; }
.growth-profile-list { display: flex; flex-direction: column; gap: 12px; }
.growth-row { display: grid; grid-template-columns: 110px 46px 1fr; align-items: center; gap: 9px 15px; padding: 15px; background: #f8f9fb; border: 1px solid #eef1f5; border-radius: 6px; }
.growth-row > div:first-child strong { display: block; font-size: calc(16px * var(--text-scale)); color: #3d5068; }
.growth-row > div:first-child > span { display: block; font-size: calc(13px * var(--text-scale)); color: #526174; }
.growth-row > b { font-size: calc(20px * var(--text-scale)); color: #283b52; }
.growth-row > span { font-size: calc(14px * var(--text-scale)); color: #526174; }
.growth-row > small { font-size: calc(14px * var(--text-scale)); font-weight: 800; color: #7c591c; }
.growth-row.gifted { background: #f5efd9; border-color: #c9b679; }
.growth-gauge { height: 9px; border-radius: 5px; background: #eef1f5; overflow: hidden; }
.growth-gauge i { display: block; height: 100%; background: #68788a; }
.growth-details { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 7px 22px; font-size: calc(14px * var(--text-scale)); color: #526174; }
.growth-details strong { color: #79561e; }
.gifted .growth-gauge i { background: #b39443; }
.codex-details summary { cursor: pointer; padding: 11px 0; font-weight: 800; color: #3d5068; }
.ability-codex { max-height: 600px; overflow: auto; }
.ability-codex section { margin: 22px 0; }
.ability-codex h3 { margin-bottom: 13px; }
.ability-codex section > span { display: inline-block; background: #f8f9fb; border: 1px solid #cfd7e0; border-radius: 5px; padding: 6px 10px; margin: 0 5px 8px 0; font-size: calc(14px * var(--text-scale)); color: #3d5068; }
.ability-codex small { margin-left: 5px; color: #526174; font-size: calc(12px * var(--text-scale)); }
.timeline-panel .section-heading { flex-wrap: wrap; margin-bottom: 25px; }
.mini-tabs { display: flex; gap: 14px; }
.mini-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 0; color: #526174; font-size: calc(14px * var(--text-scale)); font-weight: 700; }
.mini-tabs button[aria-pressed='true'] { color: #283b52; border-bottom-color: #526174; }
.log-row { position: relative; display: grid; grid-template-columns: 52px 14px 1fr 12px; gap: 13px; padding-bottom: 31px; }
.log-row:not(:last-child):before { content: ''; position: absolute; top: 14px; bottom: -3px; left: 72px; width: 1px; background: #e1e6ec; }
.log-age { text-align: right; line-height: 1.6; }
.log-age strong { display: block; font-size: calc(25px * var(--text-scale)); color: #526174; }
.log-age > span { font-size: calc(12px * var(--text-scale)); color: #526174; white-space: nowrap; }
.log-dot { justify-self: center; width: 9px; height: 9px; border: 2px solid #cfd7e0; background: var(--paper); border-radius: 50%; margin-top: 11px; z-index: 1; }
.important .log-dot { border-color: #97772e; background: #ecdfad; }
.log-category { display: block; font-size: calc(13px * var(--text-scale)); color: #526174; font-weight: 700; }
.log-content h3 { font-size: calc(18px * var(--text-scale)); color: #3d5068; line-height: 1.8; }
.log-content p { font-size: calc(16px * var(--text-scale)); color: #526174; line-height: 1.95; margin-top: 7px; }
.log-star { color: #99752b; font-size: calc(14px * var(--text-scale)); padding-top: 5px; }
.event-card { position: relative; background: #f8f9fb; border: 2px solid #b39a57; padding: 26px; border-radius: 9px; box-shadow: 0 4px 12px #8b6a2210; }
.event-eyebrow { display: flex; justify-content: space-between; gap: 14px; color: #806020; font-size: calc(14px * var(--text-scale)); font-weight: 800; }
.event-eyebrow > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.event-eyebrow .icon { width: 18px; height: 18px; }
.event-card h2 { font-size: calc(27px * var(--text-scale)); color: #624618; margin: 18px 0 15px; }
.event-card > p { color: #68522a; font-size: calc(18px * var(--text-scale)); line-height: 2; }
.event-choices { display: flex; flex-direction: column; gap: 13px; margin-top: 25px; }
.event-choices > button { display: flex; align-items: center; gap: 15px; padding: 17px; text-align: left; border: 1px solid #baaa7a; background: #ffffff; border-radius: 7px; color: #634c20; }
.event-choices > button:not(:disabled):hover { background: #eee5c9; border-color: #8c6c29; }
.event-choices > button:disabled { color: #786e52; background: #ede9db; border-style: dashed; }
.choice-number { width: 28px; height: 31px; border: 1px solid #c6b78d; border-radius: 4px; display: grid; place-items: center; font-size: calc(15px * var(--text-scale)); font-weight: 800; flex-shrink: 0; }
.event-choices > button > span:nth-child(2) { flex: 1; min-width: 0; }
.event-choices strong { font-size: calc(17px * var(--text-scale)); display: block; }
.event-choices small { display: block; font-size: calc(15px * var(--text-scale)); margin-top: 5px; color: #796331; }
.choice-effects { display: block; font-size: calc(14px * var(--text-scale)); color: #6b5420; font-weight: 700; margin-top: 6px; }
.event-footnote { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: calc(13px * var(--text-scale)); color: #786333; margin-top: 17px; }
.event-footnote .icon { width: 16px; height: 16px; }
.right-world .world-map { height: 180px; margin: 0 auto 10px; }
.right-world .world-map text { font-size: calc(15px * var(--text-scale)); font-weight: 600; }
.world-status { display: inline-block; font-size: calc(13px * var(--text-scale)); font-weight: 800; border: 1px solid #cfd7e0; background: #f8f9fb; color: #3d5068; padding: 3px 7px; border-radius: 4px; white-space: nowrap; }
.world-status.war { color: #873d31; background: #f4e1d8; border-color: #c7957f; }
.location-mini { display: flex; align-items: flex-start; gap: 7px; }
.location-mini > .icon { width: 18px; height: 18px; margin-top: 4px; }
.location-mini strong { font-size: calc(16px * var(--text-scale)); display: block; }
.location-mini small { font-size: calc(14px * var(--text-scale)); display: block; color: #526174; margin-top: 8px; }
.world-mini-stats { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid #e1e6ec; padding-top: 15px; margin-top: 19px; font-size: calc(14px * var(--text-scale)); color: #526174; }
.world-mini-stats b { font-size: calc(16px * var(--text-scale)); margin-left: 5px; }
.mini-person { display: flex; align-items: center; gap: 9px; padding: 14px 0; border-bottom: 1px solid #eef1f5; }
.mini-person:last-child { border: 0; }
.person-dot { display: grid; place-items: center; width: 34px; height: 34px; background: #f8f9fb; border-radius: 50%; color: #526174; font-weight: 800; flex-shrink: 0; }
.person-dot.rose { color: #9a5f5c; background: #f1e4da; }
.person-dot .icon { width: 17px; height: 17px; }
.mini-person > div { flex: 1; min-width: 0; }
.mini-person strong { display: block; font-size: calc(15px * var(--text-scale)); }
.mini-person small { display: block; font-size: calc(13px * var(--text-scale)); margin-top: 4px; color: #526174; }
.mini-person > span:last-child:not(.person-dot) { font-size: calc(14px * var(--text-scale)); color: #526174; }
.quiet-empty { color: #526174; font-size: calc(15px * var(--text-scale)); line-height: 2; }
.journey-identity { font: 700 calc(20px * var(--text-scale))/1.7 var(--serif); color: #3d5068; border-bottom: 1px solid #e1e6ec; padding-bottom: 20px; }
.path-thread { padding: 8px 0; }
.thread-entry { display: flex; align-items: center; gap: 11px; position: relative; padding: 16px 0; }
.thread-entry + .thread-entry:before { content: ''; position: absolute; width: 2px; background: #cfd7e0; top: -18px; bottom: calc(50% + 17px); left: 18px; }
.thread-node { position: relative; display: grid; place-items: center; background: #f8f9fb; border: 1px solid #cfd7e0; border-radius: 50%; width: 37px; height: 37px; color: #526174; flex-shrink: 0; }
.thread-node .icon { width: 18px; height: 18px; }
.thread-entry.active .thread-node { background: #526174; color: #ffffff; border-color: #526174; }
.thread-entry > div { flex: 1; }
.thread-entry strong { font-size: calc(16px * var(--text-scale)); color: #3d5068; }
.thread-entry p { font-size: calc(13px * var(--text-scale)); color: #526174; margin-top: 4px; }
.thread-current { font-size: calc(12px * var(--text-scale)); font-weight: 800; background: #f8f9fb; border-radius: 4px; padding: 3px 6px; color: #3d5068; }
.identity-note { padding: 13px; background: #f2ecd5; border-left: 3px solid #ac8e3d; font-size: calc(14px * var(--text-scale)); color: #72551e; margin-bottom: 10px; }
.story-thread { border-top: 1px solid #eef1f5; padding: 15px 0; }
.story-thread strong { font-size: calc(16px * var(--text-scale)); }
.story-thread p { font-size: calc(14px * var(--text-scale)); color: #526174; margin-top: 6px; }
.journal-quote { padding: 6px 15px 12px; }
.journal-quote > span { font: calc(60px * var(--text-scale))/1 Georgia, serif; color: #68788a; }
.journal-quote p { font: 600 calc(16px * var(--text-scale))/2 var(--serif); color: #526174; }
.journal-quote small { display: block; font-size: calc(13px * var(--text-scale)); color: #526174; margin-top: 15px; }
.save-note { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: transparent; border: 0; color: #526174; font-size: calc(14px * var(--text-scale)); font-weight: 700; }
.save-note .icon { width: 17px; height: 17px; }
.member-list { display: flex; flex-direction: column; }
.npc-card { display: flex; align-items: flex-start; gap: 14px; padding: 21px 0; border-bottom: 1px solid #e1e6ec; }
.npc-card:last-child { border: 0; }
.npc-avatar { width: 55px; height: 63px; overflow: hidden; border-radius: 6px; background: #f8f9fb; flex-shrink: 0; }
.npc-avatar.elf { background: #eef1f5; }
.npc-avatar.demon { background: #e8dfeb; }
.npc-info { flex: 1; min-width: 0; }
.npc-info h3 { font-size: calc(20px * var(--text-scale)); }
.npc-info h3 > span { font-size: calc(14px * var(--text-scale)); color: #526174; margin-left: 5px; }
.npc-info > p { font-size: calc(14px * var(--text-scale)); color: #526174; margin-top: 6px; }
.npc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.npc-tags span { font-size: calc(13px * var(--text-scale)); font-weight: 700; background: #f8f9fb; padding: 3px 7px; border-radius: 4px; color: #526174; }
.npc-card > button { margin-top: 7px; font-size: calc(14px * var(--text-scale)); }
.recruit-footer { border-top: 1px solid #e1e6ec; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 17px; padding-top: 22px; }
.recruit-footer p { font-size: calc(15px * var(--text-scale)); color: #526174; }
.recruit-footer small { font-size: calc(14px * var(--text-scale)); color: #6d591e; }
.hero-panel { background: #f8f9fb; }
.hero-panel > h2 { margin: 14px 0; }
.hero-panel > p { color: #526174; margin-bottom: 20px; }
.requirement-list { display: flex; flex-direction: column; gap: 13px; margin: 23px 0; }
.requirement-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #806047; font-size: calc(15px * var(--text-scale)); }
.requirement-list > div > span { display: flex; align-items: center; gap: 8px; }
.requirement-list > div > span > i { width: 16px; height: 16px; border: 1px solid #cfd7e0; border-radius: 50%; }
.requirement-list .met { color: #3d5068; }
.requirement-list .icon { width: 18px; height: 18px; }
.demon-challenge { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #e1e6ec; margin-top: 23px; padding-top: 23px; flex-wrap: wrap; }
.demon-challenge > span { display: flex; align-items: center; gap: 7px; color: #695728; font-weight: 700; }
.empty-state { padding: 40px 15px; text-align: center; }
.empty-state > .icon { width: 43px; height: 43px; display: block; margin: 0 auto 21px; color: #68788a; }
.empty-state h3 { font-size: calc(21px * var(--text-scale)); margin-bottom: 14px; }
.empty-state p { font-size: calc(16px * var(--text-scale)); line-height: 2; color: #526174; }
.empty-text { padding: 24px 0; color: #526174; }
.relationship-list { display: flex; flex-direction: column; gap: 22px; }
.relationship-card { border: 1px solid #cabfa0; border-radius: 8px; padding: 24px; background: #ffffff; }
.relationship-top { display: flex; align-items: center; gap: 15px; }
.relationship-top h3 { font-size: calc(25px * var(--text-scale)); margin: 3px 0 7px; }
.relationship-top p { color: #526174; font-size: calc(15px * var(--text-scale)); }
.relation-status { color: #945e56; font-size: calc(14px * var(--text-scale)); font-weight: 800; }
.relationship-card.memorial { background: #f8f9fb; }
.relationship-card .tiny { font-size: calc(14px * var(--text-scale)); }
.relationship-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 23px; }
.relationship-actions button { font-size: calc(14px * var(--text-scale)); }
.encounter-provenance { display: flex; align-items: flex-start; gap: 8px; border: 1px solid #e1e6ec; border-radius: 5px; background: #f8f9fb; padding: 12px; margin-top: 17px; }
.encounter-provenance > .icon { width: 17px; height: 17px; margin-top: 4px; color: #526174; }
.encounter-provenance strong { display: block; font-size: calc(14px * var(--text-scale)); color: #3d5068; }
.encounter-provenance span { display: block; font-size: calc(14px * var(--text-scale)); color: #526174; margin-top: 4px; line-height: 1.9; }
.npc-info .encounter-provenance { padding: 10px; }
.child-card { display: flex; align-items: center; gap: 13px; padding: 22px 0; border-bottom: 1px solid #e1e6ec; }
.child-symbol { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; background: #f8f9fb; color: #526174; flex-shrink: 0; }
.child-card p { font-size: calc(14px * var(--text-scale)); color: #526174; margin-top: 5px; }
.child-card > .tiny { font-size: calc(13px * var(--text-scale)); margin-left: auto; }
.family-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.world-panel .world-map { border: 1px solid #cfd7e0; background: #f8f9fb; border-radius: 6px; margin: 18px 0; }
.world-context p { font-size: calc(16px * var(--text-scale)); color: #526174; }
.region-card { display: flex; align-items: center; gap: 15px; padding: 23px 0; border-bottom: 1px solid #e1e6ec; }
.region-card:last-child { border-bottom: 0; }
.region-symbol { display: grid; place-items: center; width: 37px; height: 42px; background: #f8f9fb; border-radius: 5px; color: #526174; flex-shrink: 0; }
.region-card > div:nth-child(2) { flex: 1; min-width: 0; }
.region-card h3 { font-size: calc(20px * var(--text-scale)); }
.region-card h3 > span { font-size: calc(12px * var(--text-scale)); background: #eef1f5; padding: 3px 6px; border-radius: 4px; margin-left: 5px; white-space: nowrap; color: #3d5068; }
.region-card p { color: #526174; font-size: calc(14px * var(--text-scale)); margin-top: 6px; }
.region-card small { color: #526174; font-size: calc(14px * var(--text-scale)); display: block; margin-top: 7px; }
.region-card button { font-size: calc(14px * var(--text-scale)); }
.travel-fare { color: #765e21; font-size: calc(13px * var(--text-scale)); text-align: center; white-space: nowrap; }
.certificate-wrap { max-width: 880px; margin: auto; padding: 45px 25px 65px; }
.certificate { padding: 32px 42px; }
.certificate-top { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 20px; font-size: calc(13px * var(--text-scale)); font-weight: 700; color: #526174; }
.certificate-heading { position: relative; padding: 29px 0; }
.certificate-heading h1 { font: 700 calc(36px * var(--text-scale)) var(--serif); letter-spacing: 3px; margin-top: 14px; }
.seal { position: absolute; top: 40px; right: 0; display: grid; place-items: center; height: 62px; width: 62px; font-size: calc(30px * var(--text-scale)); color: #977533; border: 1px solid #b29658; outline: 1px solid #cab984; outline-offset: 4px; border-radius: 50%; }
.cert-identity { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.portrait { width: 92px; height: 105px; display: grid; place-items: center; background: #f8f9fb; border: 1px solid #e1e6ec; }
.cert-identity h2 { font: 700 calc(30px * var(--text-scale)) var(--serif); margin: 7px 0; }
.cert-identity p { color: #526174; }
.cert-world-tag { display: inline-flex; align-items: center; gap: 7px; background: #f8f9fb; border: 1px solid #cfd7e0; border-radius: 5px; padding: 8px 13px; font-size: calc(15px * var(--text-scale)); font-weight: 700; margin-left: auto; color: #3d5068; }
.cert-narrative { padding: 21px 25px; margin: 30px 0; background: #f8f9fb; border-left: 3px solid #68788a; color: #526174; font-size: calc(17px * var(--text-scale)); line-height: 2; }
.cert-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.cert-columns section + section { border-left: 1px solid #e1e6ec; padding-left: 28px; }
.cert-columns h3 { display: flex; align-items: center; gap: 7px; font-size: calc(19px * var(--text-scale)); margin-bottom: 20px; }
.cert-columns .details > div { font-size: calc(15px * var(--text-scale)); margin-bottom: 17px; }
.cert-columns .tiny { font-size: calc(14px * var(--text-scale)); }
.cert-quote { text-align: center; font: 600 calc(16px * var(--text-scale))/1.8 var(--serif); color: #526174; margin: 30px 0; }
.cert-bottom { text-align: center; font-size: calc(14px * var(--text-scale)); margin-top: 17px; }
.death-notice { text-align: center; background: #f8f9fb; border: 2px solid #a8b4c2; border-radius: 8px; padding: 28px; }
.death-notice h2 { font: 700 calc(25px * var(--text-scale))/1.8 var(--serif); margin: 15px 0; }
.death-notice p { color: #526174; font-size: calc(17px * var(--text-scale)); margin-bottom: 24px; }
.archives-main { max-width: 1240px; margin: 55px auto 75px; padding: 0 35px; min-height: 65vh; }
.archives-main > h1 { font: 700 calc(40px * var(--text-scale)) var(--serif); margin: 20px 0; }
.archive-grid { margin: 40px 0; }
.archive-grid > .empty-state { grid-column: 1/-1; }
.archive-card { text-align: left; background: var(--paper); border: 1px solid #cfd7e0; border-radius: 8px; padding: 26px; }
.archive-card:hover { background: #f8f9fb; border-color: #68788a; }
.archive-card .eyebrow { font-size: calc(13px * var(--text-scale)); letter-spacing: 0; }
.archive-card h3 { font: 700 calc(27px * var(--text-scale)) var(--serif); margin: 18px 0 13px; }
.archive-card h3 span { font: 700 calc(15px * var(--text-scale)) var(--sans); color: #526174; margin-left: 7px; }
.archive-card p { color: #526174; font-size: calc(15px * var(--text-scale)); }
.archive-card > div { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e1e6ec; padding-top: 15px; margin-top: 24px; font-size: calc(14px * var(--text-scale)); color: #526174; }
.recap-main { max-width: 850px; margin: 60px auto; text-align: center; padding: 0 35px; }
.recap-name { font: 700 calc(23px * var(--text-scale)) var(--serif); margin-top: 23px; color: #526174; }
.recap-progress { display: flex; gap: 5px; margin-top: 35px; }
.recap-progress i { flex: 1; height: 5px; background: #e1e6ec; border-radius: 3px; }
.recap-progress i.active { background: #68788a; }
.recap-moment { padding: 60px 15px; min-height: 410px; animation: fade-in .4s; }
.recap-age { font: 600 calc(80px * var(--text-scale))/1 var(--serif); color: #526174; }
.recap-age small { font: 700 calc(20px * var(--text-scale)) var(--sans); margin-left: 10px; }
.recap-moment h1 { font: 700 calc(31px * var(--text-scale))/1.8 var(--serif); margin: 30px 0 25px; }
.recap-moment p { color: #526174; font-size: calc(18px * var(--text-scale)); line-height: 2; }
.recap-controls { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid #cfd7e0; padding-top: 27px; }
.recap-controls > span { font-size: calc(15px * var(--text-scale)); color: #526174; }
.recap-skip { margin-top: 25px; }
.summary-main { max-width: 1080px; margin: 55px auto 75px; padding: 0 30px; }
.summary-heading { text-align: center; }
.summary-heading h1 { font: 700 calc(40px * var(--text-scale))/1.75 var(--serif); margin: 24px 0; }
.summary-heading p { color: #526174; font-size: calc(17px * var(--text-scale)); }
.identity-assessment { margin: 30px 0; background: #f8f9fb; border: 1px solid #a8b4c2; }
.identity-assessment h2 { margin: 13px 0; }
.identity-assessment p { color: #526174; }
.identity-paths { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.identity-paths span { padding: 5px 11px; border-radius: 5px; border: 1px solid #a8b4c2; background: #ffffff; color: #3d5068; font-weight: 700; }
.dual-life-label { display: block; margin-top: 20px; color: #7d5b18; }
.summary-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; border-block: 1px solid #cfd7e0; padding: 26px 0; margin: 30px 0; }
.summary-stats > div { text-align: center; border-left: 1px solid #e1e6ec; padding: 0 10px; }
.summary-stats > div:first-child { border-left: 0; }
.summary-stats span { display: block; font-size: calc(14px * var(--text-scale)); color: #526174; }
.summary-stats strong { display: block; font-size: calc(24px * var(--text-scale)); color: #3d5068; margin-top: 9px; }
.peace-banner { text-align: center; background: #f8f9fb; color: #3d5068; border: 1px solid #a8b4c2; padding: 19px; border-radius: 7px; font-weight: 800; margin: 25px 0; }
.summary-records { padding: 32px; }
.last-word { text-align: center; padding: 40px 0; }
.last-word p { font: 700 calc(25px * var(--text-scale))/1.8 var(--serif); color: #526174; margin-bottom: 16px; }
.last-word span { color: #526174; font-size: calc(17px * var(--text-scale)); }
.summary-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 15px; }
.full-history { margin-top: 35px; }
.full-history > summary { font-weight: 800; color: #3d5068; cursor: pointer; }
.full-history .timeline { margin-top: 25px; }
.mobile-time-bar { display: none; }
#toast { position: fixed; bottom: 26px; left: 50%; transform: translate(-50%,15px); max-width: min(700px,92vw); padding: 15px 23px; border-radius: 7px; border: 1px solid #526174; background: #283b52f5; color: #ffffff; font-size: calc(16px * var(--text-scale)); font-weight: 700; text-align: center; box-shadow: 0 5px 20px #283b521f; opacity: 0; pointer-events: none; transition: opacity .2s,transform .2s; z-index: 100; }
#toast.visible { opacity: 1; transform: translate(-50%,0); }
dialog { max-width: 760px; width: calc(100% - 35px); max-height: 88vh; padding: 30px; border-radius: 11px; border: 1px solid #cfd7e0; background: var(--paper); color: var(--text); box-shadow: 0 20px 80px #283b5240; }
dialog::backdrop { background: #283b5229; backdrop-filter: none; }
.modal-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #e1e6ec; padding-bottom: 20px; }
.modal-heading h2 { font-size: calc(28px * var(--text-scale)); }
.modal-body { padding-top: 24px; }
.modal-body > p { font-size: calc(17px * var(--text-scale)); line-height: 2; color: #526174; margin-bottom: 15px; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 13px; margin-top: 28px; }
.guide-intro { display: flex; align-items: center; gap: 20px; padding: 10px 0 20px; }
.guide-intro > .icon { width: 45px; height: 45px; color: #68788a; }
.guide-intro p { font: 700 calc(22px * var(--text-scale))/1.9 var(--serif); color: #3d5068; }
.guide-list { padding-left: 24px; color: #526174; }
.guide-list li { padding: 15px 0 9px 5px; }
.guide-list strong { display: block; color: #3d5068; font-size: calc(18px * var(--text-scale)); margin-bottom: 9px; }
.guide-list p { color: #526174; font-size: calc(16px * var(--text-scale)); line-height: 1.95; }
.guide-note { border-top: 1px solid #e1e6ec; margin-top: 20px; padding-top: 24px; }
.guide-note strong { color: #3d5068; font-size: calc(16px * var(--text-scale)); }
.guide-note p { margin: 10px 0 18px; color: #526174; font-size: calc(15px * var(--text-scale)); }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 1499px) {
  .game-layout { grid-template-columns: 270px minmax(0,1fr); }
  .right-column { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
  .journal-quote { display: none; }
  .save-note { align-self: start; }
  .site-header .header-inner { gap: 16px; }
  .time-controls, .header-actions { gap: 11px; }
  .header-actions .icon-button { width: 37px; }
  .speeds button { min-width: 34px; padding: 7px; }
}
@media (max-width: 1199px) {
  .header-inner, .game-main { padding-left: 24px; padding-right: 24px; }
  .home-main { padding: 0 30px; }
  .game-layout { grid-template-columns: 250px minmax(0,1fr); gap: 20px; }
  .game-layout .panel { padding: 20px; }
  .identity-card.panel { padding: 0; }
  .category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .path-grid, .skill-grid { grid-template-columns: 1fr; }
  .hero-copy h1 { font-size: calc(43px * var(--text-scale)); }
  .hero-description { font-size: calc(16px * var(--text-scale)); }
  .home-lower { grid-template-columns: 1fr; }
  .possibility-strip { grid-template-columns: 1fr 1fr; gap: 25px; }
  .possibility-strip > div:nth-child(3) { padding-left: 0; border: 0; }
  .summon-odds .odds-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
  .play-button { min-width: auto; font-size: calc(14px * var(--text-scale)); }
  .header-actions .auto-toggle { font-size: calc(13px * var(--text-scale)); }
  .next-button { font-size: calc(14px * var(--text-scale)); }
  .site-header nav { gap: 17px; }
  .nav-link { font-size: calc(14px * var(--text-scale)); }
  .growth-row { grid-template-columns: 105px 43px 1fr; gap: 8px 10px; }
  .planner-panel .section-heading { flex-wrap: wrap; }
}
@media (max-width: 1049px) {
  .game-layout { display: flex; flex-direction: column; gap: 24px; }
  .center-column { order: 0; width: 100%; }
  .left-column { order: 1; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .right-column { order: 2; width: 100%; grid-template-columns: 1fr 1fr; }
  .core-stats { grid-column: 1/-1; }
  .stats-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .path-grid, .skill-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .category-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .header-actions .auto-toggle > span { display: none; }
  .header-actions > .icon-button { display: none; }
  .time-controls { gap: 10px; }
  .time-controls .next-button { display: none; }
  .header-inner .brand > span:last-child { font-size: calc(21px * var(--text-scale)); }
  .header-inner .brand small { font-size: calc(11px * var(--text-scale)); }
  .header-inner .brand-mark { width: 35px; height: 42px; font-size: calc(27px * var(--text-scale)); }
  .scene-banner > svg { height: 150px; }
  .scene-caption { font-size: calc(14px * var(--text-scale)); }
  .game-tabs button { font-size: calc(16px * var(--text-scale)); }
  .life-titlebar h1 { font-size: calc(24px * var(--text-scale)); }
  .live-plan { font-size: calc(14px * var(--text-scale)); }
  .brand { gap: 9px; }
  .mobile-time-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; gap: 11px; padding: 11px 20px calc(11px + env(safe-area-inset-bottom)); background: #fffffff7; backdrop-filter: blur(10px); border-top: 1px solid #cfd7e0; z-index: 35; }
  .mobile-time-bar > button { flex: 1; min-width: 0; font-size: calc(15px * var(--text-scale)); gap: 6px; padding: 11px 8px; }
  body:has(.game-main) { padding-bottom: 85px; }
  body:has(.game-main) #toast { bottom: 90px; }
  .summary-stats { grid-template-columns: 1fr 1fr; }
  .summary-stats > div:nth-child(3) { border-left: 0; }
  .landing-hero { gap: 25px; }
  .hero-copy h1 { font-size: calc(36px * var(--text-scale)); }
  .map-quote { font-size: calc(13px * var(--text-scale)); }
  footer { flex-wrap: wrap; }
  footer > span { display: none; }
}
@media (max-width: 699px) {
  :root { --body-size: 16px; --small-size: 14px; }
  :root[data-text-size='extra'] { --body-size: 18px; --small-size: 16px; }
  h2 { font-size: calc(23px * var(--text-scale)); }
  .site-header { height: 78px; }
  .header-inner { padding: 0 16px; gap: 11px; }
  .brand > span:last-child { font-size: calc(19px * var(--text-scale)); letter-spacing: 2px; }
  .brand small { font-size: calc(10px * var(--text-scale)); letter-spacing: 1px; }
  .brand-mark { width: 32px; height: 38px; font-size: calc(25px * var(--text-scale)); }
  .brand-mark span { left: 10px; }
  .site-header nav { gap: 12px; }
  .site-header .version-badge, .site-header .nav-link .small-count { display: none; }
  .nav-link { font-size: calc(13px * var(--text-scale)); }
  .site-header nav > .icon-button { display: none; }
  .readability-button { width: 39px; height: 39px; font-size: calc(16px * var(--text-scale)); }
  .header-actions { gap: 3px; }
  .header-actions .auto-toggle { width: 25px; justify-content: center; }
  .header-inner .time-controls .play-button { display: none; }
  .speeds button { min-width: 27px; padding: 6px 5px; font-size: calc(12px * var(--text-scale)); }
  .speeds { padding: 2px; }
  .header-inner .brand > span:last-child { font-size: calc(18px * var(--text-scale)); }
  .header-inner .brand small { font-size: calc(10px * var(--text-scale)); }
  .header-inner .brand-mark { width: 30px; height: 35px; }
  .game-main { padding: 0 16px 35px; }
  .life-titlebar { padding: 23px 0 20px; align-items: flex-start; gap: 12px; }
  .life-titlebar .eyebrow { font-size: calc(10px * var(--text-scale)); letter-spacing: .5px; }
  .life-titlebar h1 { font-size: calc(21px * var(--text-scale)); flex-wrap: wrap; gap: 5px; }
  .life-titlebar h1 strong { font-size: calc(37px * var(--text-scale)); }
  .life-titlebar h1 > span { font-size: calc(15px * var(--text-scale)); }
  .life-titlebar h1 i { height: 22px; margin: 0 6px; }
  .world-date { font-size: calc(13px * var(--text-scale)); max-width: 145px; }
  .world-date small { font-size: calc(12px * var(--text-scale)); margin-top: 4px; }
  .quick-vitals { gap: 9px 16px; padding: 12px 14px; }
  .quick-vitals span { font-size: calc(14px * var(--text-scale)); }
  .quick-vitals b { font-size: calc(17px * var(--text-scale)); }
  .scene-banner > svg { height: 110px; }
  .scene-caption { font-size: calc(13px * var(--text-scale)); padding: 10px 12px; }
  .scene-caption span:last-child { font-size: calc(12px * var(--text-scale)); }
  .game-tabs { gap: 2px; overflow-x: auto; }
  .game-tabs button { font-size: calc(14px * var(--text-scale)); gap: 5px; min-width: 65px; padding: 12px 2px; }
  .game-tabs button .icon { width: 17px; height: 17px; }
  .game-layout .panel { padding: 20px 17px; }
  .identity-card.panel { padding: 0; }
  .planner-panel .section-heading { gap: 13px; }
  .section-heading .eyebrow { font-size: calc(12px * var(--text-scale)); }
  .category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 22px 0; }
  .category-card { padding: 15px 13px; gap: 8px; }
  .category-card.selected { padding: 14px 12px; }
  .category-card strong { font-size: calc(17px * var(--text-scale)); }
  .category-card > span { font-size: calc(14px * var(--text-scale)); }
  .category-card .icon { width: 22px; height: 22px; }
  .live-plan { font-size: calc(13px * var(--text-scale)); }
  .planner-divider { flex-wrap: wrap; gap: 12px; }
  .planner-divider h3 { font-size: calc(21px * var(--text-scale)); }
  .training-grid, .activity-grid { grid-template-columns: 1fr; }
  .training-card { padding: 18px; }
  .training-card.selected { padding: 17px; }
  .training-card > strong { font-size: calc(19px * var(--text-scale)); }
  .training-plan { padding: 18px 14px; }
  .training-plan .section-heading > span { font-size: calc(13px * var(--text-scale)); }
  .plan-list > div > span { font-size: calc(14px * var(--text-scale)); gap: 7px; }
  .plan-list b { font-size: calc(16px * var(--text-scale)); }
  .plan-footer { flex-wrap: wrap; }
  .plan-footer > div { flex-basis: 100%; }
  .plan-footer > button { width: 100%; }
  .plan-footer strong { font-size: calc(17px * var(--text-scale)); }
  .path-grid, .skill-grid { grid-template-columns: 1fr; }
  .growth-numbers { gap: 16px; }
  .growth-numbers > span { font-size: calc(14px * var(--text-scale)); }
  .growth-numbers strong { font-size: calc(25px * var(--text-scale)); }
  .skills-talents { grid-template-columns: 1fr; }
  .path-card-heading h3 { font-size: calc(24px * var(--text-scale)); }
  .path-card > p, .skill-card > p { font-size: calc(16px * var(--text-scale)); }
  .path-requirements > span { font-size: calc(15px * var(--text-scale)); }
  .path-requirements b { font-size: calc(16px * var(--text-scale)); }
  .path-status { font-size: calc(13px * var(--text-scale)); }
  .path-card > button, .skill-card > button { font-size: calc(16px * var(--text-scale)); }
  .growth-row { grid-template-columns: 110px 47px 1fr; padding: 13px; gap: 10px; }
  .growth-row > span { font-size: calc(14px * var(--text-scale)); }
  .growth-row > span:nth-last-child(2) { grid-column: auto / span 2; }
  .growth-row > small { grid-column: 1/-1; }
  .left-column, .right-column { grid-template-columns: 1fr; gap: 20px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .core-stats { grid-column: auto; }
  .identity-name { padding: 24px; gap: 15px; }
  .identity-name h2 { font-size: calc(28px * var(--text-scale)); }
  .identity-name .avatar { width: 70px; height: 80px; }
  .identity-card .details { padding: 0 24px 13px; }
  .identity-card .details > div { font-size: calc(16px * var(--text-scale)); }
  .identity-bottom { padding: 14px 24px; font-size: calc(15px * var(--text-scale)); }
  .identity-label { font-size: calc(13px * var(--text-scale)); padding: 13px 23px; }
  .stat-meter > div:first-child { font-size: calc(16px * var(--text-scale)); }
  .stat-meter b { font-size: calc(20px * var(--text-scale)); }
  .stat-meter b small { font-size: calc(15px * var(--text-scale)); }
  .talent-card strong { font-size: calc(18px * var(--text-scale)); }
  .talent-card small { font-size: calc(15px * var(--text-scale)); }
  .log-row { grid-template-columns: 39px 10px 1fr 9px; gap: 10px; }
  .log-row:not(:last-child):before { left: 54px; }
  .log-age strong { font-size: calc(23px * var(--text-scale)); }
  .log-age > span { font-size: calc(11px * var(--text-scale)); }
  .log-content h3 { font-size: calc(18px * var(--text-scale)); }
  .log-content p { font-size: calc(16px * var(--text-scale)); }
  .log-category { font-size: calc(13px * var(--text-scale)); }
  .timeline-panel .section-heading { gap: 12px; }
  .mini-tabs button { font-size: calc(14px * var(--text-scale)); }
  .event-card { padding: 22px 18px; }
  .event-card h2 { font-size: calc(26px * var(--text-scale)); }
  .event-card > p { font-size: calc(17px * var(--text-scale)); }
  .event-eyebrow { font-size: calc(13px * var(--text-scale)); }
  .event-choices > button { gap: 11px; padding: 15px 12px; }
  .event-choices strong { font-size: calc(17px * var(--text-scale)); }
  .event-choices small { font-size: calc(15px * var(--text-scale)); }
  .event-footnote { font-size: calc(12px * var(--text-scale)); }
  .event-choices > button > .icon { width: 18px; height: 18px; }
  .npc-card { gap: 11px; flex-wrap: wrap; }
  .npc-info { min-width: calc(100% - 70px); }
  .npc-card > button { margin-left: 66px; font-size: calc(15px * var(--text-scale)); }
  .npc-info h3 { font-size: calc(23px * var(--text-scale)); }
  .npc-info > p { font-size: calc(15px * var(--text-scale)); }
  .npc-tags span { font-size: calc(14px * var(--text-scale)); }
  .relationship-card { padding: 20px 16px; }
  .relationship-top h3 { font-size: calc(25px * var(--text-scale)); }
  .relationship-actions button { font-size: calc(15px * var(--text-scale)); }
  .encounter-provenance span { font-size: calc(15px * var(--text-scale)); }
  .region-card { gap: 11px; flex-wrap: wrap; }
  .region-card > div:nth-child(2) { min-width: calc(100% - 55px); }
  .region-card h3 { font-size: calc(22px * var(--text-scale)); }
  .region-card p, .region-card small { font-size: calc(15px * var(--text-scale)); }
  .region-card button { margin-left: auto; }
  .travel-fare { margin-left: 48px; font-size: calc(14px * var(--text-scale)); }
  .home-main { padding: 0 23px; }
  .landing-hero { grid-template-columns: 1fr; gap: 40px; padding: 40px 0 48px; }
  .hero-copy h1 { font-size: calc(42px * var(--text-scale)); letter-spacing: -2px; }
  .hero-description { font-size: calc(16px * var(--text-scale)); }
  .hero-buttons { gap: 12px; }
  .hero-buttons .large-button { font-size: calc(16px * var(--text-scale)); padding: 16px 20px; }
  .hero-footnote { font-size: calc(14px * var(--text-scale)); }
  .hero-map { padding: 27px 12px 20px; border-radius: 70px 70px 6px 6px; }
  .hero-map:after { border-radius: 63px 63px 3px 3px; }
  .map-quote { font-size: calc(13px * var(--text-scale)); }
  .map-stamp { font-size: calc(12px * var(--text-scale)); right: 17px; }
  .possibility-strip { gap: 25px 14px; padding: 28px 0; }
  .possibility-strip > div { gap: 9px; padding-left: 11px; align-items: flex-start; }
  .strip-icon { width: 31px; height: 31px; margin-top: 4px; }
  .strip-icon .icon { width: 19px; height: 19px; }
  .possibility-strip strong { font-size: calc(23px * var(--text-scale)); }
  .possibility-strip strong small { font-size: calc(13px * var(--text-scale)); }
  .possibility-strip p > span { font-size: calc(13px * var(--text-scale)); line-height: 1.9; }
  .home-lower { margin-top: 30px; }
  .start-settings, .summon-odds { padding: 23px; }
  .setting-row { flex-wrap: wrap; gap: 13px; }
  .setting-row > div { flex-basis: 100%; }
  .setting-row input { width: 100%; font-size: calc(16px * var(--text-scale)); }
  .setting-row strong { font-size: calc(17px * var(--text-scale)); }
  .setting-row p { font-size: calc(14px * var(--text-scale)); }
  .segmented button { font-size: calc(15px * var(--text-scale)); padding: 8px 12px; }
  .summon-odds .odds-list { display: block; }
  .odds-item { grid-template-columns: 135px 1fr 53px; font-size: calc(14px * var(--text-scale)); gap: 10px; }
  .odds-item b { font-size: calc(13px * var(--text-scale)); }
  .journey-intro > h2 { font-size: calc(27px * var(--text-scale)); }
  .journey-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .journey-grid p { font-size: calc(16px * var(--text-scale)); }
  .journey-grid h3 { font-size: calc(20px * var(--text-scale)); }
  .archive-preview, .archive-grid { grid-template-columns: 1fr; }
  footer { margin: 0 23px; padding: 25px 0; flex-direction: column; gap: 18px; font-size: calc(13px * var(--text-scale)); }
  .certificate-wrap { padding: 28px 15px 45px; }
  .certificate { padding: 25px 20px; }
  .certificate-top { font-size: calc(11px * var(--text-scale)); gap: 15px; }
  .certificate-top > span:last-child { text-align: right; }
  .certificate-heading h1 { font-size: calc(31px * var(--text-scale)); }
  .certificate-heading .eyebrow { font-size: calc(12px * var(--text-scale)); max-width: 220px; letter-spacing: 0; }
  .seal { width: 45px; height: 45px; font-size: calc(23px * var(--text-scale)); top: 49px; }
  .cert-identity h2 { font-size: calc(28px * var(--text-scale)); }
  .cert-world-tag { margin-left: 0; flex-basis: 100%; }
  .cert-narrative { padding: 18px 16px; font-size: calc(16px * var(--text-scale)); }
  .cert-columns { grid-template-columns: 1fr; gap: 25px; }
  .cert-columns section + section { border-left: 0; border-top: 1px solid #e1e6ec; padding: 24px 0 0; }
  .cert-columns .details > div { font-size: calc(16px * var(--text-scale)); }
  .cert-columns h3 { font-size: calc(21px * var(--text-scale)); }
  .cert-quote { font-size: calc(16px * var(--text-scale)); }
  .archives-main, .summary-main { margin: 35px auto 55px; padding: 0 20px; }
  .archives-main > h1 { font-size: calc(33px * var(--text-scale)); }
  .archives-main > .muted { font-size: calc(16px * var(--text-scale)); }
  .archive-card h3 { font-size: calc(29px * var(--text-scale)); }
  .recap-main { padding: 0 22px; margin: 40px auto; }
  .recap-moment { padding: 45px 0; min-height: 365px; }
  .recap-moment h1 { font-size: calc(27px * var(--text-scale)); }
  .recap-moment p { font-size: calc(17px * var(--text-scale)); }
  .recap-age { font-size: calc(72px * var(--text-scale)); }
  .recap-controls { flex-wrap: wrap; gap: 15px; }
  .recap-controls .primary { font-size: calc(15px * var(--text-scale)); }
  .summary-heading h1 { font-size: calc(32px * var(--text-scale)); }
  .summary-heading > .eyebrow { font-size: calc(11px * var(--text-scale)); letter-spacing: .4px; }
  .summary-heading p { font-size: calc(16px * var(--text-scale)); }
  .summary-stats { gap: 25px 0; }
  .summary-stats strong { font-size: calc(22px * var(--text-scale)); }
  .summary-records { padding: 24px 17px; }
  .summary-records .section-heading { flex-wrap: wrap; }
  .summary-actions { gap: 13px; }
  .summary-actions .large-button { width: 100%; }
  .last-word p { font-size: calc(23px * var(--text-scale)); }
  dialog { padding: 25px 22px; }
  .modal-heading h2 { font-size: calc(25px * var(--text-scale)); }
  .guide-intro p { font-size: calc(20px * var(--text-scale)); }
  .guide-list strong { font-size: calc(18px * var(--text-scale)); }
  .guide-list p { font-size: calc(16px * var(--text-scale)); }
  .mobile-time-bar { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
  .mobile-time-bar > button { font-size: calc(14px * var(--text-scale)); padding: 11px 5px; }
  .mobile-time-bar .icon { width: 17px; height: 17px; }
}
@media (max-width: 399px) {
  .site-header .brand small { display: none; }
  .site-header .brand > span:last-child { font-size: calc(16px * var(--text-scale)); }
  .header-inner { padding-inline: 10px; gap: 7px; }
  .brand { gap: 7px; }
  .speeds button { min-width: 23px; font-size: calc(12px * var(--text-scale)); padding: 6px 3px; }
  .readability-button { width: 34px; height: 36px; }
  .header-actions .auto-toggle { width: 20px; }
  .hero-copy h1 { font-size: calc(37px * var(--text-scale)); }
  .category-card > span { font-size: calc(14px * var(--text-scale)); }
  .life-titlebar h1 { font-size: calc(19px * var(--text-scale)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* A readable flow: records, planning, and learning each have their own place. */
html { scroll-padding-top: 188px; }
.game-tabs { position: sticky; top: 88px; z-index: 21; background: var(--bg); padding-top: 8px; }
.current-direction { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.current-direction h2 { font-size: calc(21px * var(--text-scale)); margin: 7px 0; }
.current-direction p { font-size: calc(15px * var(--text-scale)); color: #526174; }
.current-direction-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; flex-shrink: 0; max-width: 210px; }
.current-direction-actions > button { width: 100%; }
.current-goal { margin-top: 9px; }
.current-goal > span { color: #3d5068; font-weight: 800; }
.path-goal { border: 1px solid #cfd7e0; background: #f8f9fb; border-radius: 8px; padding: 19px; margin: 23px 0; }
.path-goal .section-heading { margin-bottom: 10px; }
.path-goal .section-heading > div > span { font-size: calc(13px * var(--text-scale)); color: #526174; }
.path-goal h3 { margin-top: 5px; }
.path-goal p { font-size: calc(15px * var(--text-scale)); }
.goal-stat-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 13px 0; }
.goal-stat-list > span { border: 1px solid #e1e6ec; background: #ffffff; border-radius: 5px; padding: 5px 10px; font-size: calc(14px * var(--text-scale)); }
.goal-stat-list b { margin-left: 7px; }
.goal-other-conditions { margin-top: 9px; color: #765d27; }
.goal-ready { color: #3d5068; font-weight: 800; }
.goal-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; margin-top: 14px; }
.path-card[data-action] { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.path-card[data-action]:hover { border-color: #68788a; box-shadow: 0 2px 8px #3d506812; }
.path-card:focus-within { outline: 2px solid #68788a; outline-offset: 2px; }
.path-plan-hint { display: block; margin-top: 9px; color: #526174; font-size: calc(13px * var(--text-scale)); }
.paths-title { flex-wrap: wrap; align-items: baseline; }
.paths-title .growth-jump { font-size: calc(15px * var(--text-scale)); font-weight: 800; }
.growth-jump .icon { width: 17px; height: 17px; transform: rotate(90deg); }
.path-filters { margin-bottom: 18px; }
.first-day { max-width: 1250px; margin: 40px auto 60px; padding: 0 30px; display: flex; flex-direction: column; gap: 24px; }
.first-day-heading { padding: 10px 0 15px; }
.first-day-heading h1 { font-size: calc(34px * var(--text-scale)); margin: 13px 0; }
.first-day-heading p { font-size: calc(17px * var(--text-scale)); color: #526174; }
.first-gifts .section-heading h2 .icon { margin-right: 5px; }
.first-gift-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,250px),1fr)); gap: 20px; }
.first-gift-list .talent-card { border: 1px solid #e1e6ec; background: #f8f9fb; border-radius: 7px; padding: 17px; }
.first-gifts > p { font-size: calc(15px * var(--text-scale)); color: #526174; margin-top: 16px; }
.direction-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.direction-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 13px; padding: 20px; border: 1px solid #e1e6ec; border-radius: 8px; background: #ffffff; min-width: 0; }
.direction-card:hover { background: #f8f9fb; border-color: #68788a; }
.direction-card > .icon { color: #526174; width: 28px; height: 28px; }
.direction-card > strong { color: #283b52; font-size: calc(18px * var(--text-scale)); line-height: 1.65; word-break: keep-all; }
.direction-card > p { font-size: calc(15px * var(--text-scale)); color: #526174; }
.direction-card > b { display: flex; align-items: center; gap: 5px; color: #3d5068; font-size: calc(14px * var(--text-scale)); margin-top: auto; padding-top: 5px; }
.direction-card > b .icon { width: 17px; height: 17px; }
.direction-lessons { display: flex; flex-wrap: wrap; gap: 5px; }
.direction-lessons span { padding: 3px 7px; font-size: calc(13px * var(--text-scale)); border-radius: 4px; background: #f8f9fb; color: #526174; }
.direction-match { border-radius: 4px; background: #eef1f5; color: #3d5068; font-size: calc(13px * var(--text-scale)); font-weight: 800; padding: 2px 6px; }
.direction-card.gift-match { border-color: #a8b4c2; background: #f8f9fb; }
.cheat-affinity[data-cheat-count="1"] { --gift-bg:#f4f7fc; --gift-border:#9fb0c6; --gift-ink:#3b5779; --gift-badge:#e3ebf5; }
.cheat-affinity[data-cheat-count="2"] { --gift-bg:#f3ecfc; --gift-border:#ad86ce; --gift-ink:#693d8f; --gift-badge:#e5d7f3; }
.cheat-affinity[data-cheat-count="3"] { --gift-bg:#fff3d6; --gift-border:#ce9d43; --gift-ink:#805314; --gift-badge:#f5dfaa; }
.direction-card.cheat-affinity, .training-card.cheat-affinity, .growth-row.cheat-affinity { background:var(--gift-bg); border-color:var(--gift-border); }
.direction-card.cheat-affinity:hover, .training-card.cheat-affinity:hover:not(:disabled) { background:var(--gift-bg); border-color:var(--gift-ink); }
.cheat-affinity .direction-match { background:var(--gift-badge); color:var(--gift-ink); }
.cheat-affinity > .icon, .cheat-affinity .training-card-symbol > .icon, .cheat-affinity .cheat-note, .growth-row.cheat-affinity .growth-details strong, .growth-row.cheat-affinity > div:first-child > span { color:var(--gift-ink); }
.cheat-affinity .growth-gauge i { background:var(--gift-border); }
.training-card-symbol { display:flex; align-items:center; flex-wrap:wrap; gap:8px; min-width:0; }
.training-cheat-notes { display:grid; gap:4px; width:100%; margin-top:auto; }
.training-cheat-notes .cheat-note { display:block; line-height:1.65; }
.first-direction-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 25px; border-top: 1px solid #eef1f5; padding-top: 22px; }
.first-direction-footer p { color: #526174; font-size: calc(15px * var(--text-scale)); }
.first-direction-footer button { flex-shrink: 0; }
.first-origin summary { font-weight: 800; cursor: pointer; color: #3d5068; }
.first-origin .details { margin-top: 24px; }
@media (max-width: 1199px) { .direction-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 699px) {
  .game-tabs { top: 78px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); overflow: visible; gap: 4px; padding: 6px 0; }
  .game-tabs button { min-width: 0; padding: 9px 2px; font-size: calc(14px * var(--text-scale)); }
  .current-direction { align-items: flex-start; flex-direction: column; gap: 16px; }
  .current-direction-actions { max-width: none; width: 100%; flex-wrap: nowrap; }
  .current-direction-actions > button { width: auto; flex: 1; font-size: calc(14px * var(--text-scale)); padding-inline: 8px; }
  .first-day { margin-top: 25px; padding-inline: 16px; }
  .first-day-heading h1 { font-size: calc(26px * var(--text-scale)); }
  .first-day .panel { padding: 22px 17px; }
  .first-gifts .section-heading { flex-wrap: wrap; }
  .direction-card { padding: 16px 13px; }
  .direction-card > strong { font-size: calc(17px * var(--text-scale)); }
  .direction-card > p { font-size: calc(14px * var(--text-scale)); }
  .first-direction-footer { align-items: stretch; flex-direction: column; }
  .path-goal .section-heading { flex-wrap: wrap; }
}
@media (max-width: 399px) { .direction-grid { grid-template-columns: 1fr; } }

.world-metric-legend { display: flex; flex-wrap: wrap; gap: 12px 22px; padding-bottom: 18px; margin-bottom: 5px; font-size: calc(14px * var(--text-scale)); color: #526174; }
.world-metric-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.world-metric-legend i { display: inline-block; width: 45px; height: 8px; border-radius: 4px; }
.danger-scale { background: linear-gradient(90deg,#526174,#a67817,#b65a22,#a33a37); }
.prosperity-scale { background: linear-gradient(90deg,#526174,#526174,#526174,#283b52); }
.world-metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 20px; margin: 13px 0 16px; }
.world-metric-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 7px; margin-bottom: 7px; font-size: calc(14px * var(--text-scale)); }
.world-metric-title { color: #526174; margin-right: auto; }
.world-metric-value { color: var(--metric-color); font-size: calc(17px * var(--text-scale)); font-weight: 800; }
.world-metric-tier { color: var(--metric-color); font-size: calc(13px * var(--text-scale)); font-weight: 800; }
.world-metric-track { height: 8px; border-radius: 5px; background: #eef1f5; overflow: hidden; }
.world-metric-fill { display: block; height: 100%; border-radius: 5px; background: var(--metric-color); }
@media (max-width: 499px) { .world-metrics { grid-template-columns: 1fr; gap: 12px; } }

@media (min-width: 900px) {
  .first-day { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .first-day-heading { align-self: center; }
  .first-day-heading h1 { font-size: calc(29px * var(--text-scale)); }
  .first-directions, .first-origin { grid-column: 1/-1; }
  .first-gifts .section-heading { flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .first-gifts h2 { font-size: calc(21px * var(--text-scale)); }
  .first-gifts .first-gift-list { gap: 10px; }
  .first-gifts .talent-card { padding: 12px; }
  .first-gifts > p { margin-top: 10px; }
}

@media (max-width: 699px) { html { scroll-padding-top: 220px; } }

/* Two existing stat columns, ordered by discipline without extra stat boxes. */
.stats-grid { display: flex; flex-direction: column; gap: 0; }
.stats-grid > .stats-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; justify-content: normal; width: 100%; }
.stats-group + .stats-group { border-top: 1px solid #eef1f5; margin-top: 14px; padding-top: 14px; }
.stats-group .stat-cell { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: calc(14px * var(--text-scale)); color: #526174; min-width: 0; }
.stats-group .stat-cell > span { word-break: keep-all; }
.stats-group .stat-cell > b { font-size: calc(18px * var(--text-scale)); color: #283b52; }
.current-direction-main { min-width: 0; flex: 1; }
.current-direction-actions { align-content: center; }
.auto-learning-status { border: 1px solid #e1e6ec; background: #f8f9fb; padding: 14px; margin: 17px 0; border-radius: 7px; display: flex; align-items: center; gap: 15px; justify-content: space-between; }
.auto-learning-status.enabled { border-color: #a8b4c2; background: #f8f9fb; }
.auto-learning-status strong { color: #3d5068; font-size: calc(15px * var(--text-scale)); }
.auto-learning-status p, .auto-learning-status span { color: #526174; font-size: calc(14px * var(--text-scale)); margin-top: 5px; display: block; }
.auto-learning-status > button { flex-shrink: 0; font-size: calc(14px * var(--text-scale)); padding: 9px 12px; }
.adventure-stat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 21px 0; }
.adventure-stat-list > div { padding: 16px; border: 1px solid #e1e6ec; border-radius: 6px; background: #f8f9fb; }
.adventure-stat-list > div:last-child { grid-column: 1/-1; }
.adventure-stat-list span { display: flex; align-items: center; gap: 7px; font-size: calc(15px * var(--text-scale)); color: #526174; }
.adventure-stat-list strong { display: block; margin-top: 8px; font-size: calc(28px * var(--text-scale)); color: #283b52; }
.adventure-progress > p { color: #526174; font-size: calc(15px * var(--text-scale)); }
.notice-card { border-color: #a8b4c2; background: #ffffff; }
.notice-card .event-choices { grid-template-columns: 1fr; }
.notice-card .event-choices button { min-height: 55px; justify-content: center; }
.skill-stat-requirements { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
.skill-stat-requirements > span { padding: 3px 7px; border-radius: 4px; border: 1px solid #e1e6ec; color: #765c49; background: #ffffff; font-size: calc(13px * var(--text-scale)); }
.skill-stat-requirements > span.met { color: #3d5068; background: #f8f9fb; border-color: #cfd7e0; }
.mentor-identity { display: flex; align-items: center; gap: 13px; margin: 20px 0; }
.mentor-identity > svg { width: 38px; height: 38px; color: #526174; }
.mentor-identity h3 { font-size: calc(23px * var(--text-scale)); color: #3d5068; }
.mentor-identity p { color: #526174; margin-top: 4px; }
.mentor-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.mentor-detail > span { font-size: calc(14px * var(--text-scale)); color: #526174; }
.mentor-detail strong { display: block; font-size: calc(17px * var(--text-scale)); color: #3d5068; margin-top: 5px; }
.mentor-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.mentor-actions small, .mentor-party-note { color: #526174; }
.life-event-dialog { width: min(760px,calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #a8b4c2; border-radius: 12px; color: #283b52; background: #ffffff; box-shadow: 0 24px 90px #192b4052; overflow: hidden; }
.life-event-dialog::backdrop { background: #192b4029; backdrop-filter: none; }
.life-event-dialog.recruitment-dialog { width: min(1120px,calc(100vw - 32px)); }
.event-dialog-content { display: flex; flex-direction: column; max-height: calc(100dvh - 34px); }
.event-dialog-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px; background: #f8f9fb; border-bottom: 1px solid #e1e6ec; flex-shrink: 0; }
.event-kind { display: flex; align-items: center; gap: 9px; font-size: calc(15px * var(--text-scale)); font-weight: 800; }
.event-playback { display: flex; align-items: center; gap: 8px; }
.event-playback button { display: flex; align-items: center; gap: 5px; background: #ffffff; border: 1px solid #e1e6ec; border-radius: 5px; padding: 7px 10px; font-size: calc(14px * var(--text-scale)); font-weight: 700; }
.event-playback select { border: 1px solid #e1e6ec; border-radius: 5px; background: #ffffff; color: #3d5068; padding: 7px 5px; font-size: calc(14px * var(--text-scale)); font-weight: 700; }
.event-dialog-body { padding: 23px 26px 26px; overflow-y: auto; overscroll-behavior: contain; }
.event-context { font-size: calc(13px * var(--text-scale)); color: #526174; margin-bottom: 9px; }
.event-dialog-body > h2 { font-size: calc(25px * var(--text-scale)); line-height: 1.45; color: #283b52; outline: none; }
.event-description { margin: 15px 0 21px; font-size: calc(16px * var(--text-scale)); line-height: 1.85; color: #3d5068; word-break: keep-all; }
.event-dialog-content .event-choices { display: grid; gap: 10px; margin: 0; }
.event-dialog-content .event-choice { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; width: 100%; min-height: 54px; text-align: left; border: 1px solid #cfd7e0; background: #ffffff; border-radius: 7px; color: #283b52; }
.event-choice > span { display: flex; flex-direction: column; gap: 5px; }
.event-choice strong { font-size: calc(16px * var(--text-scale)); }
.event-choice small { font-size: calc(14px * var(--text-scale)); color: #526174; line-height: 1.65; }
.notice-event .event-choice { justify-content: center; background: #3d5068; color: #fff; }
.event-choice:focus-visible, .event-playback button:focus-visible, .event-playback select:focus-visible { outline: 3px solid #a4823f; outline-offset: 3px; }
.recruitment-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }
.recruitment-option { border: 1px solid #e1e6ec; border-radius: 8px; padding: 17px; background: #f8f9fb; min-width: 0; }
.applicant-heading { display: flex; align-items: start; gap: 8px; justify-content: space-between; }
.applicant-heading h3 { font-size: calc(19px * var(--text-scale)); color: #3d5068; line-height: 1.4; }
.applicant-heading p, .applicant-personality { font-size: calc(13px * var(--text-scale)); color: #526174; margin-top: 4px; }
.applicant-heading > span { flex-shrink: 0; font-size: calc(14px * var(--text-scale)); font-weight: 800; color: #3d5068; }
.applicant-job { margin: 12px 0; color: #3d5068; font-size: calc(16px * var(--text-scale)); font-weight: 700; }
.applicant-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 0; border-block: 1px solid #eef1f5; }
.applicant-stats div { display: flex; gap: 8px; justify-content: space-between; align-items: center; }
.applicant-stats dt { font-size: calc(13px * var(--text-scale)); color: #526174; }
.applicant-stats dd { font-size: calc(19px * var(--text-scale)); font-weight: 800; }
.applicant-path { margin-top: 12px; }
.applicant-path span { font-size: calc(12px * var(--text-scale)); color: #68788a; display: block; }
.applicant-path strong { display: block; font-size: calc(14px * var(--text-scale)); color: #3d5068; margin-top: 3px; }
.recruitment-option > button { width: 100%; margin-top: 15px; padding: 10px; }
.applicant-unavailable { display: block; margin-top: 7px; color: #79614a; font-size: calc(12px * var(--text-scale)); }
.guild-recruit-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-top: 24px; margin-top: 24px; border-top: 1px solid #e1e6ec; }
.guild-toggle-control > button { width: 100%; justify-content: center; }
.guild-toggle-control > p { font-size: calc(14px * var(--text-scale)); line-height: 1.8; color: #526174; margin-top: 12px; }
.guild-toggle-control > small { display: block; color: #526174; font-size: calc(13px * var(--text-scale)); margin-top: 7px; }
.guild-current > h3 { font-size: calc(23px * var(--text-scale)); color: #3d5068; margin: 20px 0 12px; }
.guild-current > p { line-height: 1.85; color: #526174; }
.guild-location { display: flex; align-items: center; gap: 7px; margin-top: 12px; }
.guild-status-reason { padding: 13px 16px; border-radius: 6px; background: #f8f9fb; margin-top: 16px; }
.guild-result-counts { display: flex; gap: 20px; color: #526174; font-size: calc(15px * var(--text-scale)); margin-top: 18px; }
.guild-result-counts b { color: #3d5068; margin-left: 7px; }
.status-tag { color: #68788a; font-size: calc(13px * var(--text-scale)); }
.status-tag.active { color: #3d5068; font-weight: 800; }
@media (max-width: 760px) {
  .life-event-dialog, .life-event-dialog.recruitment-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .event-dialog-content { max-height: calc(100dvh - 22px); }
  .event-dialog-header { padding: 10px 14px; }
  .event-dialog-body { padding: 16px; }
  .event-dialog-body > h2 { font-size: calc(22px * var(--text-scale)); }
  .event-description { font-size: calc(14px * var(--text-scale)); margin: 10px 0 15px; }
  .event-playback button { padding: 6px; }
  .event-playback button > span { display: none; }
  .recruitment-options { grid-template-columns: 1fr; gap: 9px; }
  .recruitment-option { padding: 12px; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; }
  .applicant-heading { grid-column: 1; }
  .applicant-heading h3 { font-size: calc(16px * var(--text-scale)); }
  .applicant-heading p, .applicant-path strong { font-size: calc(12px * var(--text-scale)); }
  .applicant-job { margin: 5px 0; font-size: calc(14px * var(--text-scale)); }
  .applicant-stats { grid-column: 2; grid-row: 1/3; min-width: 100px; border: 0; display: flex; gap: 12px; padding: 0; }
  .applicant-stats div { flex-direction: column; gap: 2px; }
  .applicant-path { margin-top: 3px; grid-column: 1; }
  .applicant-path span, .applicant-personality { display: none; }
  .recruitment-option > button { grid-column: 2; grid-row: 3; margin-top: 5px; font-size: calc(13px * var(--text-scale)); padding: 8px; }
  .applicant-unavailable { grid-column: 1/-1; }
  .guild-recruit-controls { gap: 14px; }
}
@media (max-width: 440px) { .guild-recruit-controls { grid-template-columns: 1fr; } }

/* A denser game screen keeps the established readable type sizes. */
.game-main { max-width: 1360px; padding: 0 22px 30px; }
.game-layout { grid-template-columns: 264px minmax(0,1fr) 270px; gap: 16px; }
@media (min-width:1200px) { .right-column { grid-column:auto; display:flex; } }
.left-column, .center-column, .right-column, #main-panel { gap: 13px; }
.game-layout .panel { padding: 16px; border-radius: 6px; }
.game-layout .identity-card { padding: 0; }
.game-layout .section-heading { gap: 10px; margin-bottom: 12px; }
.game-layout .section-heading .eyebrow { margin-bottom: 4px; }
.identity-name { padding: 15px 14px 10px; gap: 9px; }
.identity-name .avatar { width: 51px; height: 58px; }
.identity-name h2 { font-size: calc(22px * var(--text-scale)); }
.identity-card .details { padding: 0 14px 12px; gap: 7px; }
.identity-card .details > div { gap: 7px; }
.identity-bottom { padding: 11px 14px; }
.game-layout .stat-meter { margin-bottom: 13px; }
.game-layout .wealth-row { margin-top: 15px; padding-top: 12px; }
.game-layout .talent-card { padding: 10px 0; }
.game-layout .talent-card + .talent-card { margin-top: 6px; }
.stats-grid > .stats-group { gap: 10px 14px; }
.stats-group + .stats-group { margin-top: 10px; padding-top: 10px; }
.stats-group .stat-cell > b { font-size: calc(17px * var(--text-scale)); }
.scene-banner > svg { height: 105px; }
.scene-caption { padding: 9px 13px; }
.game-tabs { gap: 3px; padding-top: 2px; }
.game-tabs button { padding: 8px 3px 10px; min-height: 42px; font-size: calc(15px * var(--text-scale)); }
.current-direction { gap: 12px; }
.current-direction h2 { font-size: calc(18px * var(--text-scale)); margin: 4px 0; }
.current-direction p { font-size: calc(14px * var(--text-scale)); line-height: 1.65; }
.current-direction .eyebrow { font-size: calc(11px * var(--text-scale)); }
.current-direction-actions { max-width: 170px; }
.current-direction-actions button { padding: 9px 12px; font-size: calc(14px * var(--text-scale)); }
.log-row { grid-template-columns: 43px 10px 1fr 10px; gap: 9px; padding-bottom: 17px; }
.log-row:not(:last-child):before { left: 57px; }
.log-content h3 { margin-top: 4px; margin-bottom: 5px; }
.log-content p { line-height: 1.75; }
.timeline-panel .section-heading { margin-bottom: 18px; }
.right-world .world-map { max-height: 145px; }
.game-layout .location-mini { margin-top: 10px; padding-top: 10px; }
.game-layout .quiet-empty { padding: 5px 0; line-height: 1.8; }
.game-layout .journal-quote { padding: 16px 12px; }
.game-layout .journal-quote p { font-size: calc(14px * var(--text-scale)); line-height: 1.9; }
.game-layout .empty-state { padding: 18px 10px; }
.game-layout .empty-state > .icon { width: 29px; height: 29px; margin-bottom: 11px; }
.game-layout .empty-state h3 { font-size: calc(18px * var(--text-scale)); margin-bottom: 8px; }
.game-layout .empty-state p { font-size: calc(14px * var(--text-scale)); line-height: 1.8; }
.game-layout .section-description { margin-bottom: 14px; line-height: 1.75; }
.game-layout .activity-card { padding: 14px; gap: 8px; }
.game-layout .info-banner { padding: 14px; }
.game-layout .training-plan { padding: 14px; margin-top: 15px; }
.game-layout .path-goal { padding: 14px; margin-block: 15px; }
.game-layout .path-goal p { line-height: 1.65; }
.game-layout .goal-actions { margin-top: 8px; gap: 8px; }
.game-layout .goal-actions .text-button { padding-block: 4px; }
.game-layout .growth-numbers { padding-block: 12px; gap: 15px; margin-top: 10px; }
.game-layout .growth-intro > p { font-size: calc(14px * var(--text-scale)); line-height: 1.7; }
.game-layout .skills-talents { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.game-layout .skills-talents .talent-card { padding-block: 7px; min-width: min(230px,100%); border: 0; }
.game-layout .npc-card, .game-layout .child-card { padding-block: 14px; }
.game-layout .relationship-list { gap: 12px; }
.game-layout .relationship-card { padding: 16px; }
.game-layout .region-card { padding-block: 14px; gap: 11px; }
.game-layout .empty-text { padding-block: 12px; }
.game-layout .spell-card { padding: 15px; }
.path-grid, .skill-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,310px),1fr)); gap: 11px; align-items: start; }
.path-grid { align-items:stretch; grid-auto-rows:1fr; }
.path-grid .path-card { height:100%; }
.path-card .path-description { text-align:right; }
.path-card-actions { display:flex; flex-direction:column; gap:8px; padding-top:14px; margin-top:auto; }
.path-card-actions > button { min-height:42px; white-space:normal; font-size:calc(14px * var(--text-scale)); }
.path-card-actions > .path-plan-hint { margin-top:0; line-height:1.5; }
.summoning-page { width:min(100% - 32px,680px); margin:clamp(22px,8vh,80px) auto; }
.summoning-card { padding:clamp(22px,4vw,40px); text-align:center; }
.summoning-card h1 { margin-top:12px; font-size:clamp(25px,4vw,34px); line-height:1.5; }
.summoning-lead { color:var(--muted); margin-top:12px; }
.summoning-gift-window { min-height:240px; padding:22px 16px; margin:24px 0 16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px; }
.summoning-sigil { display:grid; place-items:center; width:48px; height:48px; border:1px solid #d2dae4; border-radius:50%; color:#556a80; background:white; }
.summoning-gift-window small { font-size:14px; color:var(--muted); }
.summoning-preview-name { font-size:clamp(24px,4vw,32px); line-height:1.5; min-height:1.5em; }
.summoning-dots { display:flex; gap:7px; }
.summoning-dots i { width:5px; height:5px; border-radius:50%; background:#7a8b9f; animation:summoning-pulse .7s ease-in-out infinite alternate; }
.summoning-dots i:nth-child(2) { animation-delay:.15s; }
.summoning-dots i:nth-child(3) { animation-delay:.3s; }
.summoning-status { min-height:1.6em; color:var(--muted); font-size:14px; line-height:1.6; }
.summoning-actions { margin-top:20px; }
.summoning-actions button { min-height:44px; min-width:160px; }
.summoning-talents { display:grid; width:100%; gap:10px; text-align:left; }
.summoning-talent { position:relative; min-width:0; }
.summoning-extra-label { position:absolute; right:calc(100% + 8px); top:50%; transform:translateY(-50%); white-space:nowrap; color:#8b6633; font-size:14px; font-weight:700; }
.summoning-card.is-locked .summoning-talent.is-additional { animation:summoning-extra-gift .5s ease-out var(--gift-delay) both; }
@keyframes summoning-extra-gift { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .summoning-card.is-locked .summoning-talent.is-additional { animation:none; } }
.summoning-talents .talent-card { background:white; padding:12px; border:1px solid #d9e0e8; border-radius:6px; }
.summoning-talents .talent-card:first-child { border-color:#9caebf; }
.first-settlement { display:flex; align-items:center; flex-wrap:wrap; gap:14px 28px; padding:15px 18px; margin:16px 0; background:#f8f9fb; border:1px solid #d9e0e8; border-radius:7px; }
.first-settlement > div { display:flex; align-items:center; gap:10px; }
.first-settlement > div > span { display:flex; flex-direction:column; gap:3px; font-size:13px; color:var(--muted); }
.first-settlement strong { font-size:16px; color:var(--ink); }
.first-settlement > p { flex-basis:100%; color:var(--muted); font-size:13px; line-height:1.5; }
@keyframes summoning-pulse { from { opacity:.3; transform:translateY(0); } to { opacity:1; transform:translateY(-3px); } }
@media (prefers-reduced-motion:reduce) { .summoning-dots i { animation:none; } }
.path-card, .skill-card { padding: 15px; }
.path-card.active { padding: 14px; }
.skill-card { gap: 10px; }
.skill-rank-guide { padding: 14px; margin-block: 14px; }
.path-card-heading, .skill-card-heading { gap: 10px; }
.path-card .path-requirements { margin-block: 12px; gap: 5px; }
.guild-recruit-controls { gap: 12px; padding-top: 15px; margin-top: 15px; }
.guild-recruit-controls p { margin-top: 8px; }
.adventure-stat-list { gap: 10px; margin: 15px 0; }
.adventure-stat-list > div { padding: 12px; }
.adventure-stat-list strong { font-size: calc(23px * var(--text-scale)); margin-top: 5px; }
.mentor-identity { margin: 13px 0; }
.mentor-detail { gap: 10px; margin-bottom: 12px; }
.mentor-actions { gap: 9px; margin-top: 13px; }
@media (max-width: 1280px) and (min-width: 1200px) {
  .game-layout { grid-template-columns: 235px minmax(0,1fr) 235px; gap: 13px; }
  .right-column { grid-column: auto; display: flex; gap: 13px; }
  .game-layout .panel { padding: 14px; }
  .game-layout .identity-card { padding: 0; }
  .game-main { padding-inline: 18px; }
  .game-tabs button { font-size: calc(13px * var(--text-scale)); gap: 4px; }
  .game-tabs button .icon { width: 17px; height: 17px; }
}
@media (max-width: 1199px) and (min-width: 761px) {
  .game-layout { display: grid; grid-template-columns: 235px minmax(0,1fr); }
  .left-column { display: flex; width: auto; }
  .left-column, .center-column, .right-column { order: initial; }
  .right-column { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; align-items: start; }
}
@media (max-width: 760px) {
  .game-main { padding: 0 12px 25px; }
  .game-layout { display: flex; gap: 14px; }
  .left-column { gap: 12px; }
  .right-column { grid-template-columns: 1fr 1fr; gap: 12px; }
  .game-layout .panel { padding: 14px; }
  .game-layout .identity-card { padding: 0; }
  .scene-banner > svg { height: 86px; }
  .current-direction { gap: 10px; }
  .current-direction-actions { width: auto; max-width: none; }
  .current-direction-actions > button { flex: none; }
}
@media (max-width: 440px) { .left-column, .right-column { grid-template-columns: 1fr; } }
@media (max-width: 699px) {
  .auto-learning-status { flex-direction: column; align-items: stretch; gap: 12px; }
  .adventure-stat-list { gap: 10px; }
  .adventure-stat-list > div { padding: 13px; }
}

/* Keep the record within the first screen, without shrinking body text. */
.site-header[data-screen='game'] { height: 64px; }
.site-header[data-screen='game'] .header-inner { max-width: 1360px; padding-inline: 22px; gap: 14px; }
.site-header[data-screen='game'] .brand { gap: 9px; }
.site-header[data-screen='game'] .brand-mark { width: 32px; height: 38px; font-size: 27px; }
.site-header[data-screen='game'] .brand > span:last-child { font-size: calc(21px * var(--text-scale)); }
.site-header[data-screen='game'] .brand small { font-size: calc(10px * var(--text-scale)); margin-top: 4px; }
.life-titlebar { padding: 12px 0 10px; gap: 12px; }
.life-titlebar > div > .eyebrow { display: none; }
.life-titlebar h1 { margin-top: 0; font-size: calc(23px * var(--text-scale)); }
.life-titlebar h1 { line-height: 1.3; }
.life-titlebar h1 strong { font-size: calc(34px * var(--text-scale)); }
.life-titlebar h1 > span { padding-top: 5px; }
.world-date { font-size: calc(13px * var(--text-scale)); }
.world-date small { margin-top: 2px; font-size: calc(12px * var(--text-scale)); }
.quick-vitals { padding: 7px 13px; gap: 7px 18px; margin-bottom: 13px; border-radius: 5px; }
.quick-vitals span { font-size: calc(14px * var(--text-scale)); }
.quick-vitals b { font-size: calc(16px * var(--text-scale)); }
.game-layout .current-direction { padding-block: 11px; }
.current-direction .current-goal { margin-top: 4px; }
.location-mini small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.game-tabs { top: 64px; overflow-x: auto; overflow-y: hidden; }
html:has(.game-main) { scroll-padding-top: 124px; }
.recruitment-event .event-dialog-header { padding: 10px 20px; }
.recruitment-event .event-dialog-body { padding: 16px 20px 18px; }
.recruitment-event .event-description { margin: 10px 0 14px; line-height: 1.65; }
.recruitment-options { margin-bottom: 12px; }
.recruitment-option { padding: 14px; }
.applicant-job { margin: 7px 0; }
.applicant-stats { margin: 8px 0; padding-block: 7px; }
.applicant-stats dd { margin: 0; }
.applicant-path { margin-top: 7px; }
.recruitment-option > button { margin-top: 10px; padding: 8px; min-height: 42px; }
.recruitment-event .event-choice { padding: 10px 14px; }
.recruitment-event .event-choice small { display: none; }
@media (min-width: 1000px) {
  .life-titlebar { padding-block: 9px; }
  .world-date small { display: inline; margin-left: 12px; }
  .scene-banner > svg { height: 85px; }
  .scene-caption { padding-block: 6px; }
  .quick-vitals { line-height: 1.5; }
  .identity-card .details > div { margin-bottom: 7px; }
  .path-goal:has([data-action='open-path-library']) { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 12px; align-items: center; }
  .path-goal:has([data-action='open-path-library']) > .section-heading { grid-column: 1/-1; }
  .path-goal:has([data-action='open-path-library']) > .goal-actions { margin-top: 0; }
}
@media (max-width: 760px) {
  .site-header[data-screen='game'] { height: 58px; }
  .site-header[data-screen='game'] .header-inner { padding-inline: 12px; }
  .life-titlebar { padding-top: 10px; }
  .life-titlebar h1 { font-size: calc(19px * var(--text-scale)); }
  .life-titlebar h1 strong { font-size: calc(29px * var(--text-scale)); }
  .quick-vitals { gap: 5px 14px; padding: 8px 11px; }
  .game-tabs { top: 58px; }
}
.recap-secondary { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:18px; }
.life-summary-card { max-width:780px; margin:24px auto; padding:28px; border:2px solid #a8b4c2; background:#ffffff; color:#283b52; }
.life-card-brand { display:flex; justify-content:space-between; gap:16px; font:700 22px var(--serif); letter-spacing:2px; }
.life-card-brand span { font:600 15px var(--sans); letter-spacing:0; color:#526174; }
.life-summary-card h2 { font:800 calc(34px * var(--text-scale))/1.35 var(--serif); margin:26px 0 14px; overflow-wrap:anywhere; }
.life-card-duration { line-height:1.8; margin:0 0 18px; }
.life-card-paths { border-block:1px solid #eef1f5; padding:17px 0; }
.life-card-paths > span, .life-card-cause > span { display:block; color:#526174; font-size:calc(14px * var(--text-scale)); font-weight:700; margin-bottom:9px; }
.life-card-paths > div { display:flex; gap:7px; flex-wrap:wrap; }
.life-card-paths > div > span { background:#f8f9fb; padding:5px 9px; border:1px solid #eef1f5; border-radius:3px; }
.life-card-paths p { margin:0; }
.life-card-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; padding:18px 0; margin:0; }
.life-card-metrics dt { font-size:calc(14px * var(--text-scale)); color:#526174; margin-bottom:7px; }
.life-card-metrics dd { font-size:calc(24px * var(--text-scale)); font-weight:800; margin:0; overflow-wrap:anywhere; }
.life-card-family { display:flex; gap:28px; flex-wrap:wrap; border-block:1px solid #eef1f5; padding:15px 0; }
.life-card-family small { color:#526174; }
.life-card-cause { margin:17px 0 0; line-height:1.7; overflow-wrap:anywhere; }
.life-card-peace { background:#f8f9fb; padding:10px; font-weight:700; }
.summary-records > summary, .full-history > summary { cursor:pointer; font-weight:700; }
.summary-records[open] > .timeline { margin-top:18px; }
.summary-main > .summary-actions { margin:20px 0 26px; }
.path-rank { border:1px solid #cfd7e0; border-radius:3px; padding:2px 6px; font-weight:800; background:#f8f9fb; }
.path-rank-next { color:#526174; font-size:calc(13px * var(--text-scale)); line-height:1.7; }
@media(max-width:600px) { .life-summary-card { padding:20px; } .life-card-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .life-card-metrics dd { font-size:calc(22px * var(--text-scale)); } }
.party-wealth { border-top:1px solid var(--line); padding-top:9px; margin-top:7px; }
.economy-year { display:grid; gap:4px; color:var(--muted); font-size:var(--small-size); }
.economy-year select, .economy-settings select { padding:6px 10px; font:600 var(--small-size) var(--sans); color:var(--ink); background:var(--paper); border:1px solid #e1e6ec; border-radius:4px; }
.party-bank { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; padding:13px 16px; background:#f8f9fb; border:1px solid #e1e6ec; border-radius:4px; }
.party-bank > strong { margin-left:auto; font-size:calc(28px * var(--text-scale)); color:var(--ink); }
.party-bank > small { flex-basis:100%; }
.economy-period { font-size:var(--small-size); color:var(--muted); margin:12px 0 8px; }
.economy-overview { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 15px; padding-bottom:10px; border-bottom:1px solid #eef1f5; }
.economy-overview > div { display:flex; gap:7px; justify-content:space-between; flex-wrap:wrap; }
.economy-overview span { color:var(--muted); font-size:var(--small-size); }
.economy-overview b { font-size:var(--small-size); }
.economy-explanation { font-size:var(--small-size); color:var(--muted); line-height:1.7; }
.economy-table-wrap { overflow-x:auto; }
.economy-table { width:100%; border-collapse:collapse; margin:12px 0; font-size:var(--small-size); }
.economy-table caption { text-align:left; font-weight:800; margin-bottom:8px; color:var(--ink); }
.economy-table th, .economy-table td { border-bottom:1px solid #eef1f5; padding:9px 7px; text-align:right; white-space:nowrap; }
.economy-table th:first-child { text-align:left; }
.economy-table th small { display:block; font-size:calc(11px * var(--text-scale)); color:var(--muted); font-weight:500; }
.economy-contracts h3 { font-size:var(--body-size); margin:17px 0 8px; }
.economy-contracts ul { list-style:none; padding:0; margin:0; }
.economy-contracts li { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid #f8f9fb; font-size:var(--small-size); }
.economy-panel > details { margin-top:13px; padding-top:12px; border-top:1px solid #eef1f5; }
.economy-panel summary { cursor:pointer; font-weight:700; }
.economy-settings p, .economy-housing p { font-size:var(--small-size); }
.economy-settings > label { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.contribution-buttons { display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; }
.contribution-buttons > span { flex-basis:100%; font-size:var(--small-size); color:var(--muted); }
.contribution-buttons .secondary { padding:7px 10px; font-size:var(--small-size); }
.housing-options article { padding:13px 0; border-bottom:1px solid #eef1f5; }
.housing-options h3 { font-size:var(--body-size); margin:0; }
.housing-options small { display:block; color:var(--muted); font-size:var(--small-size); margin-top:5px; }
.economy-ledger ol { list-style:none; padding:0 8px 0 0; margin:10px 0 0; max-height:min(50vh,400px); overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.economy-ledger li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid #f8f9fb; font-size:var(--small-size); }
.economy-ledger li > div { min-width:0; }
.economy-ledger li > div > span { display:block; font-size:calc(11px * var(--text-scale)); color:var(--muted); }
.economy-ledger li > div > strong { display:block; font-size:var(--small-size); font-weight:600; overflow-wrap:anywhere; }
.economy-ledger li > span { flex-shrink:0; font-weight:700; }
.economy-ledger li > span small { display:block; text-align:right; font-size:calc(11px * var(--text-scale)); font-weight:500; }
.ledger-income { color:#3d5068; } .ledger-expense { color:#964939; } .ledger-transfer { color:#58698a; }
.guild-field-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:16px 0; }
.guild-field-option { padding:14px; background:#ffffff; border:1px solid #e1e6ec; border-radius:5px; display:flex; flex-direction:column; }
.guild-field-option.matching { border:2px solid #68788a; padding:13px; background:#f8f9fb; }
.guild-field-heading { display:flex; justify-content:space-between; align-items:center; gap:6px; color:var(--muted); font-size:var(--small-size); }
.guild-field-heading strong { padding:2px 6px; background:#eef1f5; color:var(--ink); flex-shrink:0; }
.guild-field-option h3 { margin:11px 0 7px; font-size:calc(20px * var(--text-scale)); }
.guild-specialty-family { font-size:var(--small-size); color:var(--muted); margin-bottom:6px; }
.guild-field-option p { font-size:var(--small-size); line-height:1.7; margin:0 0 12px; }
.guild-field-option dl { margin:auto 0 13px; font-size:var(--small-size); }
.guild-field-option dl > div { display:flex; justify-content:space-between; gap:6px; padding:3px 0; }
.guild-field-option dd { margin:0; font-weight:800; white-space:nowrap; }
.guild-field-option dt { color:var(--muted); }
.guild-field-option > button { width:100%; padding:10px 7px; font-size:var(--small-size); }
.guild-field-option > small { color:var(--muted); margin-top:5px; }
.guild-direction-event .event-dialog-header { padding:8px 20px; }
.guild-direction-event .event-dialog-body { padding:14px 20px 16px; }
.guild-direction-event .event-dialog-body > h2 { margin:5px 0; }
.guild-direction-event .event-description { margin:9px 0; line-height:1.6; }
.guild-direction-intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,300px); align-items:start; gap:16px 24px; }
.guild-direction-copy { min-width:0; }
.guild-direction-copy > h2 { margin:5px 0; font-size:20px; line-height:1.45; color:#283b52; outline:none; }
.guild-direction-intro:not(:has(.guild-current-comparison)) { grid-template-columns:minmax(0,1fr); }
.guild-current-comparison { min-width:0; display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right; }
.guild-current-label, .guild-current-name { font-size:13px; line-height:1.5; color:var(--muted); }
.guild-current-reward { font-size:18px; line-height:1.5; color:var(--ink); overflow-wrap:anywhere; }
.guild-current-risk { margin:0; font-size:13px; line-height:1.5; color:#875b42; }
.guild-current-name { margin-top:2px; }
@media(max-width:720px) {
  .guild-direction-intro { grid-template-columns:minmax(0,1fr); gap:10px; }
  .guild-direction-copy > h2 { font-size:18px; }
  .guild-current-comparison { align-items:flex-start; text-align:left; }
}
.guild-direction-event .guild-field-options { margin:12px 0; }
.guild-direction-event .guild-field-option { padding:11px; }
.guild-direction-event .guild-field-option.matching { padding:10px; }
.guild-direction-event .guild-field-option h3 { margin:6px 0; }
.guild-direction-event .guild-field-option p { line-height:1.5; margin-bottom:8px; }
.guild-direction-event .guild-field-option dl { margin-bottom:8px; }
.guild-direction-event .guild-field-option dl > div { padding:1px 0; }
.guild-direction-event .event-choice { padding:10px 14px; }
.guild-direction-event .event-choices small { margin-top:2px; line-height:1.5; }
@media(max-width:720px) { .guild-field-options { grid-template-columns:1fr; } .guild-field-option h3 { font-size:var(--body-size); } .guild-field-option dl { display:flex; flex-wrap:wrap; gap:5px 14px; margin:5px 0 10px; } .guild-field-option dl > div { gap:5px; } }
@media(max-width:600px) { .economy-overview { grid-template-columns:1fr; } .economy-contracts li { flex-wrap:wrap; } .economy-ledger li { align-items:start; } }
@media(max-width:399px) { .site-header[data-screen='game'] .header-inner { padding-inline:8px; gap:6px; } }
.choice-effects { display:flex; flex-wrap:wrap; gap:5px 8px; margin-top:7px; }
.choice-effect { display:inline-flex; padding:3px 7px; border-radius:3px; border:1px solid #e1e6ec; background:#f8f9fb; color:#3d5068; font-size:calc(13px * var(--text-scale)); font-weight:700; line-height:1.4; }
.choice-effect.cost { background:#f8f9fb; border-color:#ddc9ab; color:#80542d; }
.choice-unavailable { color:#9b513d; font-weight:700; }
.connections-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.connection-card { border:1px solid #eef1f5; padding:12px; border-radius:4px; min-width:0; }
.connection-card > div { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:5px 10px; }
.connection-card h3 { font-size:var(--body-size); margin:0; overflow-wrap:anywhere; }
.connection-card > div span, .connection-card small { font-size:var(--small-size); color:var(--muted); }
.connection-card p { font-size:var(--small-size); margin:6px 0; }
.summary-connections { max-width:900px; margin:22px auto; }
.summary-connections details { margin-top:14px; }
.summary-connections summary { cursor:pointer; font-weight:700; margin-bottom:10px; }
.site-header[data-screen='game'] .time-controls { gap:10px; }
.site-header[data-screen='game'] .auto-toggle { border:1px solid #e1e6ec; padding:8px 10px; border-radius:4px; }
.site-header[data-screen='game'] .next-button { white-space:nowrap; }
@media(max-width:1000px) {
  .site-header[data-screen='game'] .brand > span:last-child { display:none; }
  .site-header[data-screen='game'] .header-actions { gap:8px; }
  .site-header[data-screen='game'] .time-controls .next-button { display:inline-flex; }
}
@media(max-width:760px) {
  .site-header[data-screen='game'] { height:106px; }
  .site-header[data-screen='game'] .header-inner { display:grid; grid-template-columns:35px minmax(0,1fr) auto; grid-template-rows:44px 48px; gap:4px 9px; align-content:center; }
  .site-header[data-screen='game'] .time-controls { grid-column:1/-1; grid-row:2; overflow-x:auto; padding-bottom:3px; gap:6px; justify-content:space-between; }
  .site-header[data-screen='game'] .time-controls .play-button { display:inline-flex; padding:6px 8px; min-height:35px; }
  .site-header[data-screen='game'] .time-controls .play-button span { display:none; }
  .site-header[data-screen='game'] .header-actions { grid-column:3; grid-row:1; }
  .site-header[data-screen='game'] .speeds { flex-shrink:0; }
  .site-header[data-screen='game'] .speeds button { min-width:25px; padding:7px 4px; font-size:calc(12px * var(--text-scale)); }
  .site-header[data-screen='game'] .next-button, .site-header[data-screen='game'] .auto-toggle { font-size:calc(12px * var(--text-scale)); padding:7px 6px; flex-shrink:0; }
  .site-header[data-screen='game'] .auto-toggle { gap:4px; }
  .site-header[data-screen='game'] .auto-toggle i { width:11px; height:11px; }
  .game-tabs { top:106px; }
  html:has(.game-main) { scroll-padding-top:162px; }
  .mobile-time-bar { display:none; }
}
@media(max-width:600px) { .connections-grid { grid-template-columns:1fr; } }
.leisure-planner { border-top:1px solid var(--line); margin-top:22px; padding-top:18px; }
.leisure-planner .section-heading { align-items:start; }
.leisure-planner .section-heading p, .leisure-help { font-size:var(--small-size); color:var(--muted); line-height:1.7; }
.leisure-filters { display:flex; flex-wrap:wrap; gap:3px 9px; margin:12px 0; }
.leisure-filters button { padding:5px 8px; font-size:var(--small-size); border:1px solid #eef1f5; border-radius:3px; }
.leisure-filters button[aria-pressed='true'] { background:#f8f9fb; border-color:#68788a; color:#283b52; }
.leisure-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.leisure-card { padding:14px; border:1px solid #e1e6ec; border-radius:5px; display:flex; flex-direction:column; align-items:start; }
.leisure-card.selected { background:#f8f9fb; border:2px solid #68788a; padding:13px; }
.leisure-card h4 { font-size:var(--body-size); margin:5px 0 7px; }
.leisure-card p { font-size:var(--small-size); line-height:1.65; margin:0 0 8px; }
.leisure-category { color:var(--muted); font-size:var(--small-size); }
.leisure-card > .choice-effects { margin-top:auto; }
.leisure-card > button { margin-top:12px; padding:8px 11px; font-size:var(--small-size); width:100%; }
.leisure-card .leisure-requirement { color:#8d6540; margin-top:8px; }
@media(max-width:600px) { .leisure-grid { grid-template-columns:1fr; } }
.vital-aging, .vital-mood, .guild-age-note { color:var(--muted); font-size:var(--small-size); line-height:1.65; margin:9px 0; }
.vital-mood { padding:8px; background:#f8f9fb; color:#825a32; border-radius:3px; }
.leisure-planner .count-tag { white-space:nowrap; flex-shrink:0; }
@media(max-width:760px) {
  .site-header[data-screen='game'] { height:144px; }
  .site-header[data-screen='game'] .header-inner { grid-template-rows:40px 84px; }
  .site-header[data-screen='game'] .time-controls { display:grid; grid-template-columns:35px minmax(0,1fr) auto; grid-template-rows:37px 37px; gap:5px 7px; overflow:visible; padding:0; }
  .site-header[data-screen='game'] .time-controls .play-button { grid-column:1; grid-row:1; }
  .site-header[data-screen='game'] .speeds { grid-column:2/-1; grid-row:1; justify-self:stretch; justify-content:space-between; }
  .site-header[data-screen='game'] .speeds button { flex:1; font-size:calc(13px * var(--text-scale)); }
  .site-header[data-screen='game'] .time-controls .next-button { grid-column:1/3; grid-row:2; justify-self:stretch; justify-content:center; }
  .site-header[data-screen='game'] .time-controls .auto-toggle { grid-column:3; grid-row:2; padding:6px 10px; }
  .game-tabs { top:144px; }
  html:has(.game-main) { scroll-padding-top:202px; }
}
@media(min-width:900px) {
  .event-dialog-content:not(.recruitment-event):not(.guild-direction-event) .event-choices:has(>button:nth-child(4)) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .event-dialog-content .event-choice { min-width:0; }
}

/* A white reading surface; color identifies resources and meaningful states. */
:root {
  --bg:#ffffff;
  --paper:#ffffff;
  --ink:#202d3b;
  --text:#293746;
  --muted:#596877;
  --line:#dbe1e7;
  --accent:#395370;
  --accent-strong:#253d56;
  --accent-soft:#f3f6fa;
  --health:#4e8068;
  --mana:#527caa;
  --happiness:#ad853b;
  --danger:#a04c51;
}
body { background:var(--bg); color:var(--text); }
.panel, .identity-panel, .life-event-dialog, .event-dialog-body { background:#fff; }
.site-header { background:#fff; border-bottom-color:var(--line); }
.identity-label, .identity-bottom, .event-dialog-header { background:#f5f7fa; }
.meter-track { background:#e9edf1; }
.meter-track i.green { background:var(--health); }
.meter-track i.blue { background:var(--mana); }
.meter-track i.gold { background:var(--happiness); }
.meter-track i.rose { background:#a46d7a; }
.play-button, .play-button.playing { justify-content:center; padding:7px 11px; min-height:36px; border:1px solid #cfd5dc; border-radius:5px; background:#fff; color:#36414e; }
.play-button:hover, .play-button.playing { background:#f1f3f5; }
.speeds { padding:0; gap:4px; border:0; background:transparent; }
.speeds button { min-height:36px; border:1px solid #e0e4e8; background:#fff; color:#59626d; box-shadow:none; }
.speeds button[aria-pressed='true'] { background:#e9edf1; color:#26303b; border-color:#b6bec7; box-shadow:none; }
.time-controls .next-button, .time-controls .auto-toggle { min-height:36px; border:1px solid #e0e4e8; border-radius:5px; padding:7px 10px; color:#36414e; background:#fff; }
.time-controls .auto-toggle.on { background:#f1f3f5; color:#26303b; border-color:#b6bec7; }
.auto-toggle.on i { background:#59626d; }
.person-dot { background:#eef2f6; color:#405a77; }
.person-dot.rose { background:#f7edf0; color:#8c5368; }
.choice-effect { background:#f7f9fb; border-color:#dbe1e7; color:#40566a; }
.choice-effect.cost { background:#fcf8f4; border-color:#e5d8c8; color:#855b36; }
.choice-effect.gain { color:#346b53; }
.log-category { color:#596877; }
.log-category.category-health, .log-category.category-healing { color:#3f705b; }
.log-category.category-learning, .log-category.category-path, .log-category.category-skill { color:#3d6489; }
.log-category.category-relationship, .log-category.category-marriage, .log-category.category-family { color:#8c5368; }
.log-category.category-death, .log-category.category-war, .log-category.category-crime { color:#9b4c50; }
.log-category.category-guild, .log-category.category-work, .log-category.category-trade { color:#89662e; }
.ledger-income { color:#3f705b; }
.ledger-expense { color:#9b4c50; }
.quick-vitals .vital-alert, .quick-vitals .vital-alert b { color:var(--danger); }
.life-card-sex { margin:4px 0 10px; color:var(--muted); font-weight:700; }
.life-card-cause > strong { display:block; margin:5px 0; color:var(--ink); }
.life-card-cause > p { margin:5px 0 0; }
.lifestyle-panel, .condition-care { padding:16px 0; border-top:1px solid var(--line); }
.lifestyle-panel h3, .condition-care h3 { margin:0 0 8px; font-size:calc(17px * var(--text-scale)); }
.habit-list, .care-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.habit-row, .care-option { padding:12px; background:#fafbfc; border:1px solid var(--line); border-radius:5px; min-width:0; }
.habit-row > div { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.habit-kind, .condition-severity { font-size:calc(12px * var(--text-scale)); padding:2px 6px; border-radius:3px; background:#edf0f3; }
.habit-row p, .condition-care p, .care-option p { margin:6px 0; line-height:1.6; }
.habit-row small, .habit-cost, .condition-facts { color:var(--muted); font-size:calc(13px * var(--text-scale)); }
.habit-tension { white-space:nowrap; }
.timeline-panel > .section-heading { flex-wrap:wrap; }
.timeline-panel .mini-tabs { flex-wrap:wrap; }
.log-content p, .recap-moment p { white-space:pre-line; }
.mini-family { align-items:flex-start; padding-block:10px; }
.mini-family strong em { font-style:normal; font-size:calc(12px * var(--text-scale)); color:var(--muted); font-weight:500; }
.mini-family small { margin-top:2px; line-height:1.45; }
.mini-family .family-path { color:var(--ink); font-weight:600; }
.family-grandchildren { padding:8px 0; border-bottom:1px solid var(--line); }
.family-grandchildren > summary { cursor:pointer; font-size:calc(14px * var(--text-scale)); }
.family-panel .child-card { align-items:flex-start; }
.family-panel .child-card > div { min-width:0; overflow-wrap:anywhere; }
.family-panel .child-card small { color:var(--muted); line-height:1.5; }
.family-descendants { margin-top:16px; }
.event-participant { margin:6px 0 8px; color:var(--muted); font-size:calc(14px * var(--text-scale)); }
.family-planning { padding:8px 0; color:var(--muted); line-height:1.6; }
.lifestyle-panel.compact { padding:10px 16px; }
.lifestyle-panel.compact h3 { font-size:calc(14px * var(--text-scale)); }
.lifestyle-panel.compact .habit-list { display:block; }
.lifestyle-panel.compact .habit-row { background:none; border:0; padding:5px 0; }
.lifestyle-panel.compact .habit-row strong { font-size:calc(13px * var(--text-scale)); }
.condition-care.compact { padding:12px 0; }
.condition-care.compact h3 { font-size:calc(15px * var(--text-scale)); }
.condition-facts { display:flex; flex-wrap:wrap; gap:5px 14px; }
.care-option h4 { margin:0; font-size:calc(15px * var(--text-scale)); }
.care-option h4 span { display:block; font-weight:600; color:var(--muted); }
.care-option.selected { border-color:#9ba8b6; }
.care-option button { margin-top:9px; width:100%; }
.gambling-preview { margin:9px 0; padding:9px; border-left:3px solid #b6a481; background:#faf8f3; font-size:calc(13px * var(--text-scale)); }
.gambling-preview span, .gambling-preview small { display:block; margin:3px 0; }
.gambling-stake { width:70px; padding:5px 7px; margin:0 4px; border:1px solid #cfd5dc; border-radius:4px; background:white; color:var(--ink); font:inherit; }
@media(max-width:600px) { .habit-list, .care-options { grid-template-columns:1fr; } }
.first-origin h2 { font-size:calc(19px * var(--text-scale)); margin:0 0 14px; }
.origin-content { display:grid; grid-template-columns:minmax(170px,.65fr) minmax(0,2fr); gap:18px; align-items:start; }
.origin-facts { display:grid; gap:10px; margin:0; }
.origin-facts > div { display:grid; grid-template-columns:70px minmax(0,1fr); gap:10px; align-items:baseline; }
.origin-facts dt { color:var(--muted); font-size:calc(14px * var(--text-scale)); }
.origin-facts dd { margin:0; font-weight:700; overflow-wrap:anywhere; }
.origin-content .lifestyle-panel { margin:0; padding:0; border:0; }
.origin-content .lifestyle-panel h3 { margin:0 0 8px; font-size:calc(14px * var(--text-scale)); color:var(--muted); }
.origin-content .habit-row { padding:8px 10px; }
.origin-content .habit-row p { font-size:calc(13px * var(--text-scale)); margin-bottom:0; }
@media(max-width:720px) {
  .origin-content { grid-template-columns:1fr; gap:14px; }
  .origin-facts { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
}
:focus-visible { outline-color:#527caa; }
.brand > span:last-child { letter-spacing:-.5px; }
.brand small { letter-spacing:.1px; }
.brand-mark .icon { width:26px; height:26px; }
.life-routines { margin-top:16px; }
.life-routines .section-heading { margin-bottom:8px; }
.life-routines .section-heading p, .routine-explanation, .routine-note { color:var(--muted); font-size:calc(14px * var(--text-scale)); }
.routine-explanation { margin-bottom:12px; }
.routine-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.routine-option { display:block; width:100%; min-width:0; padding:11px 12px; border:1px solid var(--line); border-radius:6px; background:white; text-align:left; line-height:1.6; }
.routine-option:hover { background:#f8f9fb; }
.routine-option.selected { border-color:#8496a8; background:#f6f8fa; }
.routine-heading { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.routine-heading > i { display:grid; place-items:center; width:18px; height:18px; border:1px solid #9ba8b6; border-radius:3px; font-style:normal; font-size:13px; }
.routine-option.selected .routine-heading > i { color:white; background:#52687e; }
.routine-heading > strong { font-size:calc(15px * var(--text-scale)); }
.routine-heading > small { margin-left:auto; font-size:calc(12px * var(--text-scale)); color:var(--muted); font-weight:500; }
.routine-description, .routine-effects, .routine-reason, .routine-due { display:block; margin-top:5px; font-size:calc(13px * var(--text-scale)); font-weight:500; }
.routine-description, .routine-due { color:var(--muted); }
.routine-effects { color:#40566a; }
.routine-reason { color:#85633d; }
.routine-note { margin-top:12px; }
.summary-learning { max-width:900px; margin:22px auto; }
.learning-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.learning-summary-path { border:1px solid var(--line); border-radius:6px; padding:12px; min-width:0; }
.learning-summary-path > header { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.learning-summary-path h3 { margin:0; font-size:calc(16px * var(--text-scale)); }
.learning-summary-meta { color:var(--muted); font-size:calc(13px * var(--text-scale)); }
.learning-summary-skills { list-style:none; padding:0; margin:8px 0 0; }
.learning-summary-skills > li { display:flex; justify-content:space-between; gap:12px; border-top:1px solid var(--line); padding:7px 0; font-size:calc(14px * var(--text-scale)); }
.learning-summary-skills strong { white-space:nowrap; }
.learning-summary-skills small { color:var(--muted); font-size:calc(12px * var(--text-scale)); }
.learning-summary-path:only-child { grid-column:1 / -1; }
.learning-summary-path:only-child .learning-summary-skills { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; }
@media(max-width:600px) {
  .routine-grid, .learning-summary-grid { grid-template-columns:1fr; }
  .learning-summary-path:only-child .learning-summary-skills { grid-template-columns:1fr; }
  .site-header .brand > span:last-child { letter-spacing:-.5px; }
}
@media(max-width:600px) {
  .life-titlebar { display:block; }
  .world-date { max-width:none; margin-top:7px; text-align:left; word-break:keep-all; }
  .world-date small { display:inline-block; margin:0 0 0 8px; }
}

/* Keep reading older entries inside the diary rather than growing the page. */
.timeline-scroll { max-height:none; overflow:visible; }
.timeline-scroll.is-expanded { overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; padding-right:8px; }
.timeline-scroll:focus-visible { outline:2px solid #8094a8; outline-offset:3px; border-radius:3px; }
.log-age strong { white-space:nowrap; }
.log-age strong small { display:inline; font-size:.55em; margin-left:1px; font-weight:700; color:inherit; }
.companion-row { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:baseline; padding:10px 0; }
.companion-label { text-align:left; white-space:nowrap; color:var(--muted); font-size:calc(12px * var(--text-scale)); font-weight:700; }
.companion-details { min-width:0; text-align:right; overflow-wrap:anywhere; }
.companion-details strong { display:block; font-size:calc(14px * var(--text-scale)); }
.companion-details small { display:block; margin-top:2px; font-size:calc(12px * var(--text-scale)); color:var(--muted); line-height:1.55; }
.companion-details .family-path, .companion-details .companion-job { color:var(--ink); }
.companion-family-group .family-row { border:0; padding:7px 0; }
.companion-family-group + .companion-party-group, .companion-party-group + .party-row, .party-row + .party-row { border-top:1px solid var(--line); }
.companion-family-group .family-grandchildren { border:0; margin:3px 0 8px; }
.care-choice-facts, .care-choice-facts small, .care-option > small { display:block; }
.event-choice .care-choice-facts small { margin-top:2px; }
.decision-policy-note { margin:12px 0 0; padding:9px 12px; border-left:3px solid #9cabb9; background:#f5f7f9; color:var(--muted); font-size:var(--small-size); }


/* Compact mobile transport remains one continuous row. */
@media(max-width:760px) {
  .site-header[data-screen='game'] { height:54px; }
  .site-header[data-screen='game'] .brand,
  .site-header[data-screen='game'] .header-actions { display:none; }
  .site-header[data-screen='game'] .header-inner { display:flex; padding:0 6px; gap:0; }
  .site-header[data-screen='game'] .time-controls { display:flex; flex-wrap:nowrap; width:100%; gap:3px; padding:0; overflow-x:auto; scrollbar-width:thin; align-items:center; justify-content:space-between; }
  .site-header[data-screen='game'] .time-controls .play-button { display:inline-flex; flex:0 0 30px; min-width:30px; min-height:36px; padding:5px; justify-content:center; }
  .site-header[data-screen='game'] .speeds { display:flex; flex:1 0 auto; gap:2px; padding:0; justify-content:space-between; }
  .site-header[data-screen='game'] .speeds button { flex:1 0 23px; min-width:23px; min-height:36px; padding:6px 2px; font-size:12px; }
  .site-header[data-screen='game'] .time-controls .next-button,
  .site-header[data-screen='game'] .time-controls .auto-toggle { display:inline-flex; flex:0 0 auto; white-space:nowrap; padding:6px 4px; font-size:11.5px; min-height:36px; gap:3px; }
  .site-header[data-screen='game'] .time-controls .next-button .icon { display:none; }
  .site-header[data-screen='game'] .auto-toggle i { width:10px; height:10px; }
  .game-tabs { top:54px; }
  html:has(.game-main) { scroll-padding-top:110px; }
}
.policy-summary { padding:12px 14px; margin-bottom:12px; }
.policy-summary h3 { margin:0 0 7px; font-size:var(--body-size); }
.policy-summary p { margin:5px 0; font-size:var(--small-size); }
.policy-summary small { color:var(--muted); }
@media(max-width:360px) {
  .site-header[data-screen='game'] .header-inner { padding-inline:2px; }
  .site-header[data-screen='game'] .time-controls { gap:2px; }
  .site-header[data-screen='game'] .time-controls .play-button { flex-basis:26px; min-width:26px; padding:3px; }
  .site-header[data-screen='game'] .speeds { gap:1px; }
  .site-header[data-screen='game'] .speeds button { flex-basis:20px; min-width:20px; font-size:11px; padding-inline:1px; }
  .site-header[data-screen='game'] .time-controls .next-button,
  .site-header[data-screen='game'] .time-controls .auto-toggle { font-size:11px; padding-inline:2px; gap:2px; }
}

/* Reading hierarchy: compact labels and spacing, with complete readable prose. */
.game-main, .first-day, .summary-main, .life-event-dialog {
  --body-size:15px;
  --small-size:13px;
  font-size:15px;
  line-height:1.65;
}
.game-main h2, .first-day h2, .summary-main h2 { font-size:19px; line-height:1.5; }
.game-main h3, .first-day h3, .summary-main h3 { font-size:16px; line-height:1.5; }
.game-main strong, .first-day strong, .life-event-dialog strong { font-weight:700; }
.game-layout .panel { padding:14px; }
.game-layout .identity-card { padding:0; }
.game-layout .section-heading { margin-bottom:10px; }
.game-main .section-description { font-size:14px; line-height:1.65; margin-bottom:12px; }
.game-main .primary, .game-main .secondary { min-height:38px; padding:8px 12px; font-size:14px; }
.game-main .text-button { padding-block:5px; font-size:13px; }
.game-main .identity-name h2 { font-size:20px; }
.game-main .identity-name span, .game-main .identity-card .details > div { font-size:13px; }
.game-main .identity-card .details > div { margin-bottom:7px; }
.game-main .identity-label { padding:8px 14px; font-size:12px; }
.game-main .identity-bottom { padding:8px 14px; font-size:12px; }
.game-main .identity-bottom strong { font-size:17px; }
.game-main .stat-meter > div:first-child { font-size:13px; margin-bottom:5px; }
.game-main .stat-meter b { font-size:17px; }
.game-main .stat-meter b small { font-size:12px; }
.game-main .wealth-row strong { font-size:21px; }
.game-main .talent-card strong { font-size:14px; }
.game-main .talent-card small { font-size:12px; line-height:1.5; }
.game-main .stats-group .stat-cell { font-size:13px; }
.game-main .stats-group .stat-cell > b { font-size:15px; }
.game-main .current-direction { gap:10px; }
.game-main .current-direction h2 { font-size:16px; margin:2px 0; }
.game-main .current-direction p { font-size:13px; line-height:1.6; }
.game-main .current-goal { margin-top:5px; }
.game-main .log-row { padding-bottom:14px; }
.game-main .log-age strong { font-size:21px; line-height:1.4; }
.game-main .log-content h3 { font-size:15px; line-height:1.55; margin:2px 0; }
.game-main .log-content p { font-size:14px; line-height:1.7; margin-top:4px; }
.game-main .log-category { font-size:12px; }
.game-main .category-grid { gap:8px; margin:14px 0; }
.game-main .category-card { padding:11px; gap:6px; }
.game-main .category-card.selected { padding:10px; }
.game-main .category-card strong { font-size:14px; }
.game-main .category-card > span { font-size:12px; line-height:1.6; }
.game-main .category-card .icon { width:19px; height:19px; }
.game-main .training-card, .game-main .activity-card { padding:12px; gap:6px; }
.game-main .training-card.selected, .game-main .activity-card.selected { padding:11px; }
.game-main .training-card > strong, .game-main .activity-card > strong { font-size:15px; }
.game-main .training-card p, .game-main .activity-card > span { font-size:13px; line-height:1.65; }
.game-main .training-card small, .game-main .training-stat, .game-main .cheat-note { font-size:12px; }
.game-main .training-card-top .icon { width:20px; height:20px; }
.game-main .field-help { font-size:13px; margin-bottom:10px; }
.game-main .training-plan { padding:12px; }
.game-main .plan-list > div { padding-block:9px; }
.game-main .plan-list > div > span { font-size:14px; gap:6px; }
.game-main .plan-list b { font-size:15px; }
.game-main .monthly-plan-detail { font-size:12px; }
.game-main .plan-footer { margin-top:10px; padding-top:10px; }
.plan-help { font-size:13px; color:var(--muted); }
.plan-help summary { cursor:pointer; width:fit-content; }
.plan-help p { margin-top:6px; line-height:1.65; }
.game-main .compact-help { padding:10px 12px; font-size:13px; margin-block:12px; }
.compact-help summary { cursor:pointer; font-weight:600; }
.game-main .compact-help p { font-size:13px; line-height:1.65; margin-top:7px; }
.game-main .path-card, .game-main .skill-card { padding:13px; gap:8px; }
.game-main .path-card.active { padding:12px; }
.game-main .path-card-heading { margin-bottom:4px; gap:7px; }
.game-main .path-card-heading h3, .game-main .skill-card-heading h3 { font-size:17px; }
.game-main .path-card-heading > div > span, .game-main .path-status { font-size:12px; }
.game-main .path-card > p, .game-main .skill-card > p { font-size:13px; line-height:1.65; }
.game-main .path-requirements { margin:9px 0; gap:5px; }
.game-main .path-requirements > span, .game-main .path-requirements b { font-size:13px; }
.game-main .path-mastery { padding:8px 0; gap:7px; font-size:12px; flex-wrap:wrap; }
.game-main .path-mastery strong { font-size:15px; }
.game-main .path-card-actions { gap:6px; padding-top:8px; }
.game-main .path-card-actions > button { min-height:38px; font-size:13px; }
.game-main .path-plan-hint, .game-main .skill-research-info, .game-main .skill-effects { font-size:12px; }
.game-main .skill-stat-requirements { margin:6px 0; gap:4px; }
.game-main .skill-stat-requirements > span { font-size:12px; }
.game-main .adventure-stat-list { gap:8px; margin:12px 0; }
.game-main .adventure-stat-list > div { padding:10px 12px; }
.game-main .adventure-stat-list span { font-size:13px; }
.game-main .adventure-stat-list strong { margin-top:3px; font-size:22px; }
.game-main .npc-card, .game-main .child-card, .game-main .region-card { padding-block:10px; }
.game-main .npc-info h3, .game-main .relationship-top h3, .game-main .region-card h3,
.game-main .guild-current > h3, .game-main .mentor-identity h3 { font-size:17px; }
.game-main .npc-info > p, .game-main .region-card p, .game-main .region-card small,
.game-main .guild-current > p, .game-main .encounter-provenance span { font-size:13px; line-height:1.6; }
.game-main .guild-recruit-controls { margin-top:14px; padding-top:14px; gap:10px; }
.game-main .guild-toggle-control > p { margin-top:7px; font-size:13px; line-height:1.6; }
.game-main .guild-status-reason { padding:10px; margin-top:10px; font-size:13px; }
.life-event-dialog { border-radius:8px; }
.life-event-dialog.recruitment-dialog { width:min(1000px,calc(100vw - 24px)); }
.event-dialog-header { padding:9px 16px; }
.event-kind { font-size:14px; gap:6px; }
.event-dialog-body { padding:16px; }
.event-dialog-body > h2 { font-size:20px; line-height:1.45; }
.event-context { font-size:12px; margin-bottom:6px; }
.event-description { font-size:14px; line-height:1.7; margin:9px 0 14px; }
.event-dialog-content .event-choice { padding:11px 13px; min-height:42px; gap:10px; }
.event-dialog-content .event-choice > span { gap:3px; }
.event-dialog-content .event-choice strong { font-size:14px; }
.event-dialog-content .event-choice small { font-size:13px; margin-top:2px; }
.decision-policy-note { font-size:12px; padding:7px 10px; margin-top:10px; }
.recruitment-options { gap:10px; margin-bottom:10px; grid-auto-rows:1fr; align-items:stretch; }
.recruitment-option { padding:12px; display:flex; flex-direction:column; }
.applicant-heading h3 { font-size:16px; }
.applicant-heading p, .applicant-heading > span { font-size:12px; }
.applicant-job { font-size:14px; margin:7px 0; }
.applicant-stats { margin:0 0 9px; padding:8px 0; gap:5px 12px; }
.applicant-stats dt { font-size:12px; }
.applicant-stats dd { font-size:16px; margin:0; }
.recruitment-option > button { margin-top:auto; min-height:36px; padding:7px 10px; font-size:13px; }
.event-dialog-content .event-choice small.choice-unavailable { display:block; color:#8b4f3b; font-weight:600; }
.first-day { gap:16px; }
.first-day .panel { padding:18px; }
.first-day .section-description { font-size:14px; margin-bottom:14px; line-height:1.65; }
.first-day .direction-card { padding:14px; gap:8px; }
.first-day .direction-card > strong { font-size:16px; }
.first-day .direction-card > p { font-size:13px; line-height:1.65; }
.first-day .direction-lessons span, .first-day .direction-match { font-size:12px; }
.first-day .direction-card > b { font-size:13px; }
@media(max-width:760px) {
  .game-main { padding-inline:10px; }
  .game-main h2, .first-day h2 { font-size:18px; }
  .game-layout .panel { padding:12px; }
  .game-layout .identity-card { padding:0; }
  .game-main .game-tabs button { font-size:13px; min-width:56px; gap:4px; }
  .game-main .game-tabs button .icon { width:15px; height:15px; }
  .game-main .current-direction-actions { max-width:none; }
  .game-main .current-direction-actions > button { width:auto; }
  .game-main .log-row { grid-template-columns:39px 8px minmax(0,1fr) 8px; gap:7px; }
  .game-main .log-row:not(:last-child):before { left:50px; }
  .life-event-dialog.recruitment-dialog { width:calc(100vw - 16px); }
  .event-dialog-body { padding:12px; }
  .event-dialog-header { padding:8px 12px; }
  .event-dialog-body > h2 { font-size:18px; }
  .recruitment-option { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 10px; padding:10px; }
  .applicant-heading { grid-column:1 / -1; }
  .applicant-job { grid-column:1; margin:0; align-self:center; }
  .applicant-stats { grid-column:1 / -1; grid-row:auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:2px 0; padding:6px 0; border-top:1px solid var(--line); }
  .applicant-stats div { display:flex; flex-direction:column; align-items:flex-start; gap:1px; }
  .applicant-stats dt { font-size:11px; }
  .applicant-stats dd { font-size:14px; }
  .recruitment-option > button { grid-column:2; grid-row:2; margin:0; min-height:34px; padding:6px 10px; }
  .first-day { padding-inline:12px; gap:12px; }
  .first-day .panel { padding:14px; }
}

/* Generated illustrations keep the compact layout and the original controls. */
.avatar.portrait-art { display:block; width:55px; height:55px; flex:0 0 auto; border-radius:6px; background-color:#ece9e1; background-repeat:no-repeat; box-shadow:inset 0 0 0 1px #253d5612; }
.identity-name .avatar.portrait-art { width:56px; height:56px; }
.avatar.portrait-art.big { width:84px; height:84px; }
.portrait-art { image-rendering:auto; }
.scene-art, .art-world-map > img { image-rendering:pixelated; }
.npc-avatar { width:55px; height:55px; background:transparent; }
.scene-banner > .scene-art { display:block; width:100%; height:132px; object-fit:cover; }
.scene-size-toggle { position:absolute; top:10px; right:10px; z-index:1; padding:6px 12px; border:1px solid #cbd5e1; border-radius:5px; color:#253d56; background:#fffffff2; font:inherit; font-size:13px; font-weight:700; cursor:pointer; opacity:0; transition:opacity .15s ease; box-shadow:0 1px 4px #182c4226; }
.scene-art:hover + .scene-size-toggle, .scene-size-toggle:hover { opacity:1; }
.scene-size-toggle:focus-visible { opacity:1; outline:2px solid #426c97; outline-offset:2px; }
@media(min-width:761px) {
  .scene-banner.scene-expanded > .scene-art { height:auto; object-fit:contain; }
}
.world-map.art-world-map { position:relative; width:100%; height:auto; max-height:none; aspect-ratio:3 / 2; overflow:hidden; border-radius:5px; background:#e9e6dc; }
.art-world-map > img { display:block; width:100%; height:100%; object-fit:cover; }
.art-world-map > svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.art-world-map .art-map-dot { fill:#414a4c; stroke:#fff9eb; stroke-width:1.4; }
.art-world-map .current .art-map-dot { fill:#9a4431; stroke:#fffdf6; stroke-width:2; }
.art-world-map .art-map-halo { fill:#fffdf6b8; stroke:#9a4431; stroke-width:1.7; }
.art-world-map .art-map-label, .art-world-map .art-map-current { fill:#263e47; stroke:#fffcf2; stroke-width:4px; paint-order:stroke; stroke-linejoin:round; text-anchor:middle; font-family:var(--sans); font-size:15px; font-weight:700; letter-spacing:0; }
.art-world-map .art-map-current { font-size:18px; fill:#743424; stroke-width:5px; font-weight:800; }
.right-world .art-world-map { height:auto; max-height:none; margin:0 auto 10px; }
.right-world .art-world-map .art-map-current { font-size:24px; }
.world-panel .art-world-map { margin:12px 0; }
@media(max-width:760px) {
  .scene-banner > .scene-art { height:120px; }
  .scene-size-toggle { display:none; }
  .identity-name .avatar.portrait-art { width:52px; height:52px; }
  .art-world-map.large .art-map-label { font-size:17px; }
  .art-world-map.large .art-map-current { font-size:21px; }
}

/* V12: quiet summoning reveal and clearly grouped remembered people. */
.summoning-announcement { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.summoning-card .summoning-gift-window { margin-top:0; }
.summoning-title-slot { min-height:38px; display:grid; place-items:center; width:100%; }
.summoning-revealed-title { margin:0; font-size:21px; line-height:1.8; }
.summoning-card .summoning-actions { min-height:44px; }
.summoning-card .summoning-status { min-height:45px; display:grid; place-items:center; margin-bottom:0; }
.summoning-card .summoning-talents { opacity:1; animation:none; transition:none; }
.travel-housing-note { margin:12px 0 18px; padding:14px 16px; border:1px solid var(--line,#d9e0e8); border-radius:7px; background:#f8fafc; }
.travel-housing-note h3 { margin:0 0 8px; font-size:15px; }
.travel-housing-note p { margin:7px 0; font-size:13px; line-height:1.7; }
.travel-housing-note p strong,.travel-housing-note p span { display:block; }
.travel-housing-note small { display:block; font-size:12px; color:var(--muted); line-height:1.7; }
.summoning-card.is-revealed .summoning-reveal-copy { animation:summoning-reveal-title .65s ease-out both; }
@keyframes summoning-reveal-title { from { opacity:0; } to { opacity:1; } }
.life-card-talents { padding:0 0 17px; }
.life-card-talents > span { display:block; font-size:14px; font-weight:700; color:var(--muted); margin-bottom:8px; }
.life-card-talents > div { display:flex; flex-wrap:wrap; gap:8px 18px; }
.life-card-talents > div > span { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 9px; }
.life-card-talents small { color:var(--muted); font-size:13px; }
.connection-survival { display:block; margin-top:9px; font-weight:700; }
.connection-departure { display:block; margin-top:3px; }
.summary-connections .connection-group + .connection-group { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.summary-connections .connection-group-heading { display:flex; align-items:baseline; gap:8px; margin:0 0 10px; font-size:17px; }
.connection-group-heading > span { font-size:13px; font-weight:500; color:var(--muted); }
.journal-updates { margin:8px 0 0; }
.journal-updates > summary { color:var(--muted); cursor:pointer; font-size:12px; line-height:1.6; font-weight:600; }
.journal-update-list { margin-top:8px; padding-left:10px; border-left:2px solid #e6ebf1; }
.journal-update + .journal-update { margin-top:12px; }
.identity-name { align-items:flex-start; }
.identity-name > .avatar { margin-top:3px; }
.identity-name > div { min-width:0; flex:1; }
.identity-name h2[data-fit-identity-name] { white-space:nowrap; overflow-wrap:normal; word-break:normal; width:100%; }
.identity-profession { margin:3px 0 0; padding:0; background:none; font-size:13px; font-weight:800; line-height:1.6; }
.identity-class { --class-color:#34445a; margin-top:4px; min-width:0; }
.identity-class.class-tier-hidden { --class-color:#235d9e; }
.identity-class.class-tier-unique { --class-color:#7041a5; }
.identity-class.class-tier-mystic { --class-color:#996012; }
.identity-class.class-tier-specialist { --class-color:#235d9e; }
.identity-class.class-tier-prime { --class-color:#7041a5; }
.identity-class .identity-profession { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:6px; row-gap:0; margin:0; }
.identity-class .class-tier-label { color:#677386; font-size:11px; font-weight:600; white-space:nowrap; }
.identity-class .identity-profession strong { color:var(--class-color); font-size:13px; font-weight:800; word-break:keep-all; overflow-wrap:anywhere; }
.identity-class .class-specialist-origin { margin:3px 0 0; color:#626d7d; font-size:11px; line-height:1.5; word-break:keep-all; }
.class-combination { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; margin:5px 0 0; column-gap:4px; }
.identity-class .class-component { display:block; text-align:center; font-size:11px; line-height:1.45; color:#526174; word-break:keep-all; overflow-wrap:anywhere; }
.class-combination.combination-2 { grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr); }
.identity-class .class-link { color:#a0aaba; text-align:center; font-size:12px; }
.class-connector { width:100%; height:16px; grid-column:1/-1; fill:none; stroke:#9aa7b7; stroke-width:1; vector-effect:non-scaling-stroke; }
.class-combination.combination-3 .component-0 { grid-column:1/-1; }
.path-achievement-bonus { padding:7px 0; border-top:1px solid #e4e9ef; font-size:12px; }
.path-achievement-bonus summary { cursor:pointer; font-weight:700; color:#405674; }
.path-achievement-bonus p { margin:6px 0 3px; line-height:1.7; color:#41516a; }
.path-achievement-bonus small { color:#677386; }
.stat-cell > b { display:inline-flex; align-items:baseline; flex-wrap:nowrap; justify-content:flex-end; gap:3px; white-space:nowrap; }
.stat-bonus { font-size:.85em; font-weight:800; white-space:nowrap; }
.stat-bonus.bonus-tier-hidden { color:#235d9e; }
.stat-bonus.bonus-tier-unique { color:#7041a5; }
.stat-bonus.bonus-tier-specialist { color:#235d9e; }
.stat-bonus.bonus-tier-prime { color:#7041a5; }
.stat-bonus.bonus-tier-mystic { color:#996012; }
.habit-unmet-slot { display:block; height:1.7em; line-height:1.7; white-space:nowrap; }
.companion-heading { display:inline; margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.companion-heading:hover { text-decoration:underline; text-underline-offset:3px; }
.housing-identity dd { display:flex; align-items:center; justify-content:flex-end; gap:7px; flex-wrap:wrap; }
.housing-identity button { padding:3px 6px; min-height:26px; font-size:11px; }
.housing-options { display:grid; gap:10px; }
.housing-options > .housing-option { border:1px solid var(--line); padding:16px; border-radius:5px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 16px; }
.housing-option h3 { font-size:16px; margin:0 0 4px; }
.housing-option p { font-size:13px; margin:3px 0; }
.housing-option .housing-option-terms { display:flex; flex-wrap:wrap; gap:3px 12px; margin-top:7px; }
.housing-option-terms > span { white-space:nowrap; }
.housing-option-terms > span > small { display:inline; margin:0; font-size:inherit; }
.housing-option button { align-self:center; }
.housing-option .choice-unavailable { grid-column:1/-1; }
.region-growth { display:block; margin-top:6px; font-size:12px; color:var(--ink); font-weight:600; }
.family-partner-facts { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 12px; font-size:13px; margin:10px 0 5px; }
.family-partner-card { padding:14px; }
.family-partner-card .relationship-top h3 { font-size:18px; }
.family-partner-card .relationship-top p { font-size:13px; margin:3px 0; }
.relationships-household { padding:4px 0; }
.relationships-household > .section-heading { margin-bottom:12px; }
.relationships-household .relationship-list { gap:0; }
.relationships-household .family-partner-card { padding:12px 0; border:0; border-radius:0; box-shadow:none; background:transparent; }
.relationships-household .family-partner-card + .family-partner-card { border-top:1px solid var(--line); }
.relationships-household .family-partner-facts { margin:7px 0 3px; }
.relationships-household .relationship-actions { margin-top:10px; gap:8px; }
.relationships-household .family-panel { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.relationships-household .family-size { color:var(--muted); font-size:13px; margin:0 0 3px; }
.relationships-household .child-card { padding:12px 0; border:0; }
.relationships-household .child-card + .child-card { border-top:1px solid var(--line); }
.relationships-household .child-card h3 { font-size:16px; }
.relationships-household .child-card p { margin-top:2px; font-size:13px; }
.relationships-household .child-symbol { width:28px; height:28px; background:transparent; }
.relationships-household .family-descendants { margin-top:3px; padding-top:10px; border-top:1px solid var(--line); }
.relationships-household .family-descendants > h3 { font-size:14px; color:var(--muted); }
.relationships-household .family-actions { margin-top:10px; gap:8px 12px; }
.relationships-household .family-past { margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
.relationships-household .empty-text { padding:10px 0; }
.family-past > summary { cursor:pointer; font-size:14px; font-weight:700; }
.journal-update > small { display:block; margin-bottom:2px; color:var(--muted); font-size:12px; line-height:1.5; }
.family-deceased-name { color:var(--ink); text-decoration-color:#8993a0; text-decoration-thickness:1px; overflow-wrap:anywhere; }
.family-deceased { opacity:1; }
.region-travel-action { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.region-travel-action .travel-fare { text-align:right; font-size:12px; white-space:nowrap; color:var(--muted); }
.region-travel-action .travel-fare small { margin:1px 0 0; font-size:11px; }
.region-information > h3 { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 7px; }
.region-information > h3 > span { margin-left:0; }
.region-information > h3 > .region-war-status { max-width:100%; white-space:normal; overflow-wrap:anywhere; word-break:keep-all; line-height:1.6; color:#8c4337; background:#faf0ec; }
.region-card .travel-restriction { border-left:2px solid #b28b66; margin-top:8px; padding:0 0 0 9px; }
.region-card .travel-restriction p { color:#795331; font-size:12px; margin:0; line-height:1.6; }
.region-card .travel-restriction small { font-size:11px; margin-top:3px; line-height:1.6; }
.border-situation { padding:11px 13px; margin:12px 0; border:1px solid #dfd5c8; border-radius:5px; background:#faf8f5; }
.border-situation h3 { font-size:14px; margin:0 0 6px; }
.border-situation p { font-size:13px; line-height:1.65; margin:4px 0; }
.border-situation small { display:block; font-size:12px; color:var(--muted); }
.border-situation .border-daily-note { margin-top:7px; font-size:12px; color:var(--muted); }
.border-local-summary { display:grid; gap:3px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-size:12px; line-height:1.6; }
.border-local-summary.is-blocked > strong { color:#795331; }
.border-local-summary > small { font-size:11px; color:var(--muted); }
@media(max-width:760px) {
 .region-travel-action { margin-left:auto; }
 .game-main .region-card .travel-restriction p { font-size:12px; }
 .game-main .region-card .travel-restriction small { font-size:11px; }
}
.log-content .journal-update > h4 { margin:0 0 3px; font-size:13px; line-height:1.6; font-weight:700; }
.log-content .journal-update > p { margin:0; font-size:13px; line-height:1.7; white-space:pre-line; }
@media (prefers-reduced-motion:reduce) {
  .summoning-card.is-revealed .summoning-reveal-copy { animation:none; }
}

/* Reserve reading space without shrinking type or cutting off a long entry. */
.game-main .current-direction { --direction-height:172px; min-height:var(--direction-height); align-items:flex-start; }
.timeline-scroll { --diary-height:640px; min-height:var(--diary-height); }
.timeline-scroll.is-expanded { height:var(--diary-height); }
.diary-controls { min-height:38px; margin-top:12px; }
.site-header[data-screen='game'] .time-controls .play-button { flex:0 0 112px; width:112px; min-width:112px; white-space:nowrap; }
@media(max-width:760px) {
  .game-main .current-direction { --direction-height:220px; }
  .timeline-scroll { --diary-height:760px; }
  .site-header[data-screen='game'] .time-controls .play-button { flex-basis:30px; width:30px; min-width:30px; }
}
@media(max-width:360px) {
  .site-header[data-screen='game'] .time-controls .play-button { flex-basis:26px; width:26px; min-width:26px; }
}

/* Keep decision consequences in a consistent footer and teaching facts readable. */
.event-dialog-content .event-choice { align-items:stretch; }
.event-dialog-content .event-choice > span:first-child { flex:1; min-width:0; align-self:stretch; }
.event-dialog-content .event-choice > .icon { align-self:center; flex-shrink:0; }
.event-dialog-content .event-choice .choice-effects { margin-top:auto; padding-top:7px; order:1; }
.event-dialog-content.notice-event .event-choice > span { align-items:center; }
.event-dialog-content .mentor-teaching-field { color:#7041a5; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; font-size:inherit; display:inline; }
.mentor-offer-description { margin-bottom:7px; }
.mentor-fit-summary { display:grid; gap:3px; margin:0 0 14px; padding-left:10px; border-left:2px solid #dce3ee; font-size:13px; line-height:1.65; }
.mentor-fit-summary p { margin:0; color:#526174; }
.mentor-fit-summary .match-same, .mentor-fit-summary .match-related { color:#235d9e; }
.mentor-fit-summary .mentor-cheat-match.is-match { color:#7041a5; }
.mentor-fit-summary .mentor-cheat-match { color:#625172; font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.recruitment-description { display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:4px 12px; }
.recruitment-gold { margin-left:auto; white-space:nowrap; font-size:13px; }
.recruitment-gold strong { color:#283b52; margin-left:5px; }
.identity-card > .identity-class { margin:0; padding:0 14px 10px; }
.identity-card > .identity-class .identity-profession { justify-content:space-between; flex-wrap:nowrap; gap:10px; }
.identity-card > .identity-class .identity-profession strong { text-align:right; min-width:0; }
.class-combination.combination-3 .class-connector { height:12px; }
.current-direction-actions { align-self:flex-start; align-content:flex-start; }
.stats-grid > .stats-group { column-gap:10px; }
.stat-cell { gap:4px; }
@media(max-width:760px) {
 .game-main .current-direction { justify-content:flex-start; }
}

/* V21: curriculum ranks and explicitly chosen advanced branches. */
.identity-class.class-tier-advanced { --class-color:#315e6b; }
.path-advancement-panel { padding:16px; margin-bottom:20px; background:#f3f7f8; border:1px solid #b9d0d5; border-radius:8px; }
.path-advancement-panel .section-heading { margin-bottom:8px; }
.path-advancement-panel .section-heading > span { font-size:12px; color:#315e6b; }
.path-branch-group + .path-branch-group { margin-top:16px; }
.path-branch-group > p { font-size:13px; margin:0 0 9px; }
.path-branch-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:8px; }
.path-branch-card { display:flex; flex-direction:column; gap:7px; padding:12px; border:1px solid #c5d5dc; border-radius:6px; background:#fff; }
.path-branch-card > strong { font-size:15px; }
.path-branch-card > p { font-size:13px; line-height:1.6; margin:0; }
.path-branch-card > small { margin-top:auto; color:#526174; font-size:12px; }
.path-branch-card > button { font-size:13px; min-height:36px; }
.path-branch-note { margin:10px 0 0; color:#526174; font-size:12px; line-height:1.6; }
.path-card .path-curriculum-summary { font-size:12px; color:#315e6b; margin:0; }
.path-card .path-next-stage { font-size:12px; line-height:1.6; color:#526174; margin-top:6px; }
.curriculum-progress { padding:12px; margin:10px 0 12px; border:1px solid #d3dde5; border-radius:6px; background:#f8fafb; }
.curriculum-progress > div { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 12px; }
.curriculum-progress > div > strong { color:#315e6b; }
.curriculum-progress > div > span, .curriculum-progress > p { font-size:13px; line-height:1.6; }
.curriculum-progress > p { margin:5px 0 0; color:#526174; }
.curriculum-progress details { font-size:12px; margin-top:8px; }
.curriculum-progress ul { list-style:none; padding:0; margin:6px 0 0; }
.curriculum-progress li { display:flex; justify-content:space-between; gap:12px; padding:3px 0; }
.legendary-skill-heading { margin:18px 0 10px; }
.legendary-skill-heading h3 { font-size:15px; color:#235d9e; }
.legendary-skill-heading p, .skill-card .skill-cap-note { font-size:12px; line-height:1.6; color:#526174; }
.skill-card .skill-cap-note { border-top:1px solid #e1e6ec; padding-top:8px; }

.guild-risk-description { color:#875141; font-size:12px; line-height:1.5; }
.guild-quest-example { display:block; font-size:12px; line-height:1.5; color:#526174; margin:4px 0 8px; }
.region-information .region-standing { display:flex; flex-wrap:wrap; gap:4px 10px; color:#315e6b; }

/* Growth colors follow the actual combined bonus, never the number of cheats. */
.cheat-affinity[data-cheat-tier="attuned"] { --gift-bg:#f4f7fc; --gift-border:#9fb0c6; --gift-ink:#476789; --gift-badge:#e3ebf5; }
.cheat-affinity[data-cheat-tier="enhanced"] { --gift-bg:#eef8f4; --gift-border:#8ab8aa; --gift-ink:#2f7e73; --gift-badge:#dcefe6; }
.cheat-affinity[data-cheat-tier="rare"] { --gift-bg:#edf4fe; --gift-border:#86a9d6; --gift-ink:#396cae; --gift-badge:#dce9fb; }
.cheat-affinity[data-cheat-tier="epic"] { --gift-bg:#f5eefb; --gift-border:#b092ca; --gift-ink:#8954b2; --gift-badge:#e9dbf4; }
.cheat-affinity[data-cheat-tier="mythic"] { --gift-bg:#fff6df; --gift-border:#cfad65; --gift-ink:#9c6a25; --gift-badge:#f5e5bc; }
.path-card.cheat-affinity { border-color:var(--gift-border); }
.path-cheat-match,.direction-growth { color:var(--gift-ink); font-size:13px; font-weight:700; line-height:1.6; }
.direction-card .direction-match { white-space:normal; text-align:left; line-height:1.5; }
.direction-card .direction-lessons { flex-wrap:wrap; }
.stat-bonus.bonus-tier-advanced,.path-tier.tier-advanced { color:#315e6b; }
.path-tier { display:inline-block; color:#677386; font-size:.8em; font-weight:700; white-space:nowrap; margin-right:5px; }
.path-tier.tier-hidden,.talent-rarity-rare { color:#235d9e; }
.path-tier.tier-unique,.talent-rarity-unique { color:#7041a5; }
.path-tier.tier-specialist { color:#235d9e; }
.path-tier.tier-prime { color:#7041a5; }
.path-tier.tier-mystic { color:#996012; }
.event-playback .auto-toggle { min-height:36px; flex-shrink:0; }
.event-playback .auto-toggle.on { background:#e9f1f8; color:#235d72; border-color:#8ba8ba; }
/* Stable rows keep resource updates from reflowing the mobile status bar. */
.quick-vitals-row { display:contents; }
.quick-vital { display:flex; align-items:center; gap:5px; min-width:0; color:#3d5068; }
.quick-vitals .quick-vital-text { display:block; min-width:0; white-space:nowrap; line-height:1.5; }
.quick-vitals .quick-vital-text b { font-size:1.08em; }
.quick-vital .icon { flex:0 0 auto; }
@media(max-width:760px) {
 .quick-vitals { display:grid; grid-template-columns:minmax(0,1fr); gap:7px; padding:9px 10px; }
 .quick-vitals-row { display:grid; align-items:center; gap:8px; min-width:0; }
 .quick-vitals-body { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .quick-vitals-life { grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr) minmax(0,1fr); }
 .quick-vital { gap:4px; }
 .quick-vitals .quick-vital-text { width:100%; font-size:calc(13px * var(--text-scale)); }
 .quick-vitals .icon { width:14px; height:14px; }
}
@media(max-width:600px) {
 .event-dialog-header { flex-wrap:wrap; gap:9px; }
 .event-playback { margin-left:auto; }
 .event-playback .auto-toggle > span { display:inline; }
 .event-playback .auto-toggle { font-size:12px; }
}