:root {
    color-scheme: light;
    --ground: #f8fafc;
    --surface: #ffffff;
    --surface-raised: #f2f5f9;
    --ink: #273345;
    --muted: #617187;
    --rule: #dce3ec;
    --cinnabar: #b24f3e;
    --cinnabar-hover: #963f30;
    --leaf: #287554;
    --amber: #8c601d;
    --body: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
    --display: "STSong", "Songti SC", "SimSun", serif;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--ground);
    background-image: radial-gradient(ellipse at 8% 0%, #e8f0fa88, transparent 55%), linear-gradient(135deg, transparent 60%, #dbe5f315);
    color: var(--ink);
    font: 14px/1.5 var(--body);
}
h1, h2, h3, p, dl { margin: 0; }
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
button, input, select { border-radius: 4px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.page-shell { max-width: 1224px; margin: auto; padding: 12px 24px; height: 100vh; height: 100dvh; min-height: 568px; display: flex; flex-direction: column; gap: 10px; }
.masthead { min-height: 58px; flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 44px; font: 22px/1.2 var(--display); letter-spacing: .06em; }
.brand-seal { width: 34px; height: 38px; flex: none; display: grid; place-items: center; color: #ffffff; background: var(--cinnabar); border: 1px solid #c37465; font-size: 24px; box-shadow: inset 0 0 0 3px var(--cinnabar), inset 0 0 0 4px #f2cebd99; }
.brand-sub { display: block; margin-top: 4px; color: var(--muted); font: 14px/1.3 var(--body); letter-spacing: .04em; }
.masthead-note { color: var(--muted); }
.account-tools { display: flex; align-items: center; gap: 12px; min-width: 0; flex-shrink: 0; }
.account-tools form { flex: none; }
.account-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.text-button { min-height: 44px; padding: 6px 4px; border: 0; background: transparent; color: var(--ink); white-space: nowrap; }
.text-button:hover { color: var(--amber); }
.eyebrow, .section-kicker { color: var(--muted); letter-spacing: .12em; }
.feedback { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; flex: none; overflow-wrap: anywhere; }
.feedback-sign { font: 24px/1 var(--display); }
.feedback-error { border: 1px solid #c98b7a; background: #fff2ed; color: #983b2a; }
.feedback-note { color: var(--leaf); }

/* 登录只承担验证身份，使用本地中文字体，不请求外部资源。 */
.login-layout { flex: 1; display: grid; grid-template-columns: 1fr 400px; align-items: center; gap: 72px; width: min(100%, 940px); margin: auto; padding: 24px 0; }
.login-intro { position: relative; padding: 24px 0; }
.login-intro h1 { margin: 22px 0; font: 68px/1.15 var(--display); letter-spacing: .03em; }
.login-intro h1 span { color: #8a6533; }
.login-intro > p:last-of-type { color: var(--muted); line-height: 1.9; }
.journey-mark { position: absolute; right: 6px; bottom: -20px; color: #90a4c21c; font: 190px/1 var(--display); pointer-events: none; }
.login-card { border: 1px solid var(--rule); border-top: 2px solid var(--cinnabar); background: var(--surface); padding: 28px; box-shadow: 0 18px 60px #21344f12; }
.login-card h2 { margin: 9px 0; font: 30px/1.35 var(--display); }
.login-lead, .form-note { color: var(--muted); }
.login-card label { display: block; margin: 16px 0 6px; }
.login-card input, .login-card select { width: 100%; min-height: 46px; padding: 10px 12px; background: var(--ground); border: 1px solid #bcc7d5; color: var(--ink); font-size: 16px; }
.login-card .button { width: 100%; margin-top: 20px; }
.form-note { margin-top: 16px; }

/* 表单仍是同一个提交边界；视觉网格只重排它的两个区域。 */
.journey-layout { flex: 1 1 0px; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px 14px; }
.workspace { display: contents; }
.roster-panel, .status-panel, .trace-panel { min-width: 0; border: 1px solid var(--rule); background: var(--surface); padding: 16px; }
.roster-panel { grid-column: 1; grid-row: 1 / span 2; border-top: 2px solid var(--cinnabar); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.section-head h2, .trace-heading h2 { font: 22px/1.25 var(--display); }
.count-badge { color: var(--muted); white-space: nowrap; }
.character-list { display: grid; gap: 8px; max-height: 280px; overflow-y: auto; padding: 3px; margin: -3px; scrollbar-color: #b4c1d1 var(--ground); scrollbar-width: thin; }
.character-option { position: relative; display: block; cursor: pointer; }
.character-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.character-card { min-height: 62px; display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: #fbfcfe; border: 1px solid #d6dfe9; border-radius: 3px; }
.character-option:hover .character-card { border-color: #9aacbf; }
.character-option input:checked + .character-card { background: #edf3fa; border-color: #91a7c0; box-shadow: inset 3px 0 #91a7c0; }
.character-option input:focus-visible + .character-card { outline: 2px solid var(--amber); outline-offset: 1px; }
.character-option input:disabled + .character-card { cursor: default; }
.character-glyph { width: 32px; height: 34px; flex: none; display: grid; place-items: center; font: 24px/1 var(--display); color: #6b7890; border: 1px solid #c7d2df; background: #f1f5f9; }
.character-copy { flex: 1; min-width: 0; }
.character-copy strong { display: block; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.character-copy > span { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; line-height: 1.3; }
.character-level { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.character-level strong { font: 24px/1 var(--display); color: #806039; }
.character-level > span { color: var(--muted); }
.selection-dot { width: 14px; height: 14px; flex: none; border: 1px solid #97a9bd; border-radius: 50%; }
.character-option input:checked + .character-card .selection-dot { background: var(--leaf); box-shadow: inset 0 0 0 3px #edf3fa; }
.line-selection { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.line-selection > label { flex: none; color: var(--muted); }
.line-selection select { width: 100%; min-width: 0; min-height: 44px; padding: 8px 30px 8px 10px; background: var(--ground); color: var(--ink); border: 1px solid #bcc7d5; }
select:disabled { color: #7d899b; background: #f0f3f7; border-color: var(--rule); }
.inline-note { color: var(--amber); margin-top: 8px; overflow-wrap: anywhere; }
.roster-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 12px; align-items: start; }
.roster-actions > .button-primary { grid-column: 1; grid-row: 1; }
.roster-actions > .button-stop { grid-column: 2; grid-row: 1; }
.roster-actions > .button-light { grid-column: 3; grid-row: 1; }
.route-controls { grid-column: 1; grid-row: 1; min-width: 0; }
/* 原生 details 保留完整布局盒；展开内容跨满操作区，不缩进首个按钮轨道。 */
.route-controls[open] { display: block; grid-column: 1 / -1; }
.route-controls > summary { display: flex; align-items: center; justify-content: center; grid-column: 1; grid-row: 1; min-height: 44px; padding: 9px 6px; border: 1px solid #b9c6d6; border-radius: 4px; cursor: pointer; list-style: none; white-space: nowrap; }
.route-controls > summary::-webkit-details-marker { display: none; }
.route-controls[open] > summary { width: calc((100% - 12px) / 3); color: var(--amber); border-color: #b18747; }
.route-controls[open] .route-fields { margin-top: 6px; }
.roster-panel:has(.route-controls[open]) { overflow-y: auto; }
.route-fields { display: grid; grid-column: 1 / -1; grid-row: 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 12px; background: var(--ground); border: 1px solid var(--rule); }
.route-fields > div { min-width: 0; }
.route-fields label { display: block; color: var(--muted); margin-bottom: 6px; }
.route-fields select { width: 100%; min-width: 0; min-height: 44px; padding: 8px; color: var(--ink); background: var(--surface); border: 1px solid #bcc7d5; }
.route-fields > .button, .route-note { grid-column: 1 / -1; }
.route-fields:has(.route-floor-field[hidden]) .route-map-field { grid-column: 1 / -1; }
.route-note { color: var(--muted); overflow-wrap: anywhere; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 9px 6px; border: 1px solid transparent; font-size: 14px; line-height: 1.4; white-space: nowrap; transition: background .15s, border-color .15s; }
.button-primary, .button-stop { background: var(--cinnabar); border-color: var(--cinnabar); color: #ffffff; }
.button-primary:not(:disabled):hover, .button-stop:not(:disabled):hover { background: var(--cinnabar-hover); border-color: var(--cinnabar-hover); }
.button-light { background: transparent; border-color: #b9c6d6; color: var(--ink); }
.button-light:not(:disabled):hover { background: #edf2f8; }
.button:disabled { color: #8490a0; background: #eef1f5; border-color: #d6dee8; }
.takeover-note { margin-top: 12px; color: #465b70; }
.supply-note { margin-top: 5px; color: var(--muted); }
.empty-state { padding: 18px 8px; border: 1px dashed var(--rule); text-align: center; }
.empty-state > span { font: 34px/1.3 var(--display); color: #72859d; }
.empty-state h3 { margin: 4px 0; font: 20px/1.4 var(--display); }
.empty-state p { color: var(--muted); }

.status-panel { grid-column: 2; grid-row: 1; background: #ffffff; }
.status-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.status-heading h2 { min-width: 0; font: 23px/1.3 var(--display); overflow-wrap: anywhere; }
.status-badge { display: inline-flex; align-items: center; gap: 7px; color: #657488; flex: none; }
.status-badge > span, .trace-indicator > span { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.status-running { color: var(--leaf); }
.status-uncertain, .trace-uncertain { color: var(--amber); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.stat-grid > div { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.stat-grid dt { color: var(--muted); flex: none; }
.stat-grid dd { margin: 0; overflow-wrap: anywhere; min-width: 0; font-variant-numeric: tabular-nums; }
.stat-grid .stat-number { font-size: 20px; color: #806039; line-height: 1.1; }
.stat-number small { font-size: 14px; color: var(--muted); }
.experience-number { font-variant-numeric: tabular-nums; }
.nearby-stat dd { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.nearby-goal { color: var(--muted); white-space: nowrap; }
.nearby-warning, .nearby-warning .nearby-goal { color: var(--amber); }
.hp-block > div:first-child { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); margin-bottom: 5px; }
.hp-block strong { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
.hp-block progress { display: block; width: 100%; height: 4px; appearance: none; border: 0; background: #e3eae5; color: #4d9471; }
.hp-block progress::-webkit-progress-bar { background: #e3eae5; }
.hp-block progress::-webkit-progress-value { background: #4d9471; }
.hp-block progress::-moz-progress-bar { background: #4d9471; }
.empty-hp { height: 4px; background: #e3eae5; }

/* 累计收益与实时角色属性并列，完整物品清单在覆盖层阅读，不挤占踪迹。 */
.combat-block { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule); }
.combat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.combat-grid > div { min-width: 0; }
.combat-grid dt { color: var(--muted); font-size: 12px; line-height: 1.4; }
.combat-grid dd { margin: 3px 0 0; color: var(--ink); font-size: 18px; line-height: 1.35; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.combat-note { margin-top: 3px; color: var(--muted); font-size: 12px; }
.combat-uncertain .combat-note { color: var(--amber); }
.income-block { margin-top: 10px; padding-top: 8px; border-top: 1px solid #dce3ec; }
.income-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.income-grid > div { min-width: 0; }
.income-grid dt { color: var(--muted); font-size: 12px; line-height: 1.4; }
.income-grid dd { margin: 3px 0 0; color: var(--amber); font-size: 17px; font-variant-numeric: tabular-nums; line-height: 1.35; overflow-wrap: anywhere; }
.income-items-button { min-height: 27px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; overflow-wrap: anywhere; max-width: 100%; }
.income-items-button > span:last-child { margin-left: 6px; font-size: 14px; color: var(--muted); }
.income-items-button small, .income-item-list small { color: var(--muted); font-size: 12px; font-weight: 400; white-space: nowrap; }
.income-items-button:disabled { color: var(--muted); }
.income-items-button:not(:disabled):hover { color: #9a591e; }
.income-note { margin-top: 3px; font-size: 12px; color: var(--muted); }
.income-uncertain .income-note { color: var(--amber); }
.income-dialog { width: min(440px, calc(100vw - 24px)); max-height: min(620px, calc(100dvh - 32px)); margin: auto; padding: 20px; border: 1px solid #c7cfdb; border-top: 2px solid var(--amber); background: var(--surface); color: var(--ink); box-shadow: 0 20px 70px #22324d26; overflow-y: auto; }
.income-dialog::backdrop { background: #26354866; }
.income-dialog-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.income-dialog-heading h2 { margin-top: 3px; font: 26px/1.3 var(--display); }
.income-close { width: 44px; height: 44px; flex: none; padding: 0; border: 1px solid var(--rule); background: transparent; color: var(--ink); font-size: 28px; line-height: 1; }
.income-close:hover { border-color: var(--amber); color: var(--amber); }
.income-dialog-note { margin: 12px 0 6px; color: var(--muted); font-size: 12px; }
.income-item-list { margin: 0; padding: 0; list-style: none; }
.income-item-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.income-item-list li > span { min-width: 0; overflow-wrap: anywhere; }
.income-item-list strong { max-width: 160px; color: var(--amber); font-weight: 400; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-align: right; }
.income-empty { padding: 24px 0 8px; color: var(--muted); text-align: center; }

/* 真记录区域独立滚动；不改变 JS 保存的序号锚点和跟随选择。 */
.trace-panel { grid-column: 2; grid-row: 2; min-height: 0; display: flex; flex-direction: column; gap: 7px; padding-bottom: 10px; }
.trace-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; }
.trace-indicator { display: flex; align-items: center; justify-content: flex-end; gap: 7px; color: var(--leaf); min-width: 0; text-align: right; }
.trace-indicator.trace-uncertain { color: var(--amber); }
.trace-controls { display: flex; align-items: center; gap: 14px; flex: none; }
.trace-filter { min-width: 0; }
.trace-filter select { width: 128px; min-height: 44px; padding: 8px 25px 8px 8px; background: var(--ground); border: 1px solid #bcc7d5; color: var(--ink); }
.trace-switch { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; color: var(--muted); white-space: nowrap; }
.trace-switch input { width: 18px; height: 18px; margin: 0; accent-color: var(--cinnabar); }
.trace-controls > .button { margin-left: auto; padding-left: 12px; padding-right: 12px; }
.trace-health { color: #426951; overflow-wrap: anywhere; flex: none; }
.trace-health-uncertain { color: var(--amber); }
.trace-range-note { color: var(--amber); background: #fbf6e9; border-left: 2px solid #b18747; padding: 5px 8px; overflow-wrap: anywhere; flex: none; }
.trace-window { flex: 1 1 0px; height: 0; min-height: 0; overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain; scrollbar-color: #b5c1cf #f4f7fb; scrollbar-width: thin; padding-right: 7px; border-top: 1px solid var(--rule); }
.trace-window:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.trace-list { list-style: none; margin: 0; padding: 0; }
.trace-entry { position: relative; padding: 10px 0 10px 15px; border-bottom: 1px solid #e2e8ef; }
.trace-entry::before { content: ""; position: absolute; left: 0; top: 18px; width: 5px; height: 5px; background: #9cacc0; transform: rotate(45deg); }
.trace-meta { display: flex; align-items: center; gap: 10px; color: var(--muted); flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.trace-tag { color: #816239; border: 1px solid #d9c8a7; padding: 0 6px; background: #faf5e9; overflow-wrap: anywhere; max-width: 100%; }
.trace-text { margin: 5px 0 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
.trace-reference { color: var(--muted); font-variant-numeric: tabular-nums; }
.trace-empty { padding: 15px 8px; text-align: center; color: var(--muted); }
.trace-footnote { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); flex: none; flex-wrap: wrap; }

.journey-footer { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px; border-top: 1px solid var(--rule); }
.journey-footer > span { grid-column: 2; grid-row: 1; color: var(--muted); padding-top: 12px; white-space: nowrap; }
.journey-details { grid-column: 1 / span 2; grid-row: 1; min-width: 0; }
.journey-details summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; list-style: none; color: var(--muted); width: fit-content; }
.journey-details summary::-webkit-details-marker { display: none; }
.journey-details summary > span { color: #89662f; }
.journey-details[open] summary > span { transform: rotate(45deg); }
.details-content { max-width: 840px; padding: 4px 0 14px; color: var(--muted); }
.details-content > p + p { margin-top: 7px; }
.status-detail { border-top: 1px solid var(--rule); margin: 12px 0; padding-top: 12px; }
.status-detail h3 { color: var(--ink); font-size: 16px; margin-bottom: 5px; }
.status-description, .live-stats-note, .feedback-note { overflow-wrap: anywhere; }
.live-stats-note, .status-detail .feedback-note { margin-top: 7px; }
.request-reference { margin-top: 10px; padding: 10px; border: 1px solid var(--rule); background: #f4f7fb; }
.request-reference > span { display: block; }
.request-reference code { display: block; margin: 4px 0; color: var(--ink); font: 14px/1.5 Consolas, monospace; overflow-wrap: anywhere; }
.busy-overlay { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: #26354866; }
.busy-card { width: min(100%, 380px); border: 1px solid var(--rule); border-top: 2px solid var(--cinnabar); background: var(--surface); padding: 25px; box-shadow: 0 18px 70px #22324d21; }
.busy-card h2 { margin: 8px 0 12px; font: 26px/1.3 var(--display); }
.busy-card > p:last-child { color: var(--muted); }
.busy-mark { width: 28px; height: 28px; border: 2px solid var(--rule); border-top-color: var(--cinnabar); border-radius: 50%; animation: turn 1.1s linear infinite; margin-bottom: 16px; }
@keyframes turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .busy-mark { animation: none; } }

/* 展开说明或出现长错误时允许外层变长，记录仍只在确定高度的区域内部滚动。 */
.page-shell:has(.journey-details[open]), .page-shell:has(.feedback-error) { height: auto; min-height: 100vh; min-height: 100dvh; }
.page-shell:has(.journey-details[open]) .journey-layout, .page-shell:has(.feedback-error) .journey-layout { flex: none; height: 600px; }

@media (max-width: 1000px) {
    .journey-layout { grid-template-columns: 280px minmax(0, 1fr); }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
    .trace-controls { gap: 10px; }
    .auto-interval { display: none; }
    .login-layout { gap: 35px; grid-template-columns: 1fr minmax(0, 380px); }
}
@media (max-width: 740px) {
    .page-shell { padding: 8px 12px; gap: 8px; }
    .masthead { min-height: 50px; padding-bottom: 4px; gap: 8px; }
    .brand { gap: 8px; font-size: 19px; letter-spacing: .02em; }
    .brand-seal { width: 29px; height: 33px; font-size: 22px; }
    .brand-sub { margin-top: 2px; letter-spacing: 0; }
    .growth-page .brand-sub { display: none; }
    .growth-page .masthead { min-height: 44px; padding-bottom: 0; }
    .growth-page .page-shell { gap: 6px; }
    .masthead-note { font-size: 14px; }
    .account-tools { gap: 6px; }
    .account-name { max-width: 78px; }
    .text-button { padding: 5px 0; }
    .login-layout { display: flex; align-items: center; justify-content: center; padding: 12px 0; }
    .login-intro { display: none; }
    .login-card { width: min(100%, 400px); padding: 22px; }
    .login-card h2 { font-size: 28px; }
    .journey-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: 6px; }
    .roster-panel, .status-panel, .trace-panel { grid-column: 1; padding: 8px; }
    .roster-panel { grid-row: 1; }
    .status-panel { grid-row: 2; }
    .trace-panel { grid-row: 3; gap: 4px; }
    .page-shell:has(.route-controls[open]) { height: auto; min-height: 100vh; min-height: 100dvh; }
    .page-shell:has(.route-controls[open]) .journey-layout { height: auto; min-height: 0; grid-template-rows: auto auto auto; }
    .page-shell:has(.route-controls[open]) .trace-window { flex: none; height: 180px; min-height: 140px; }
    .section-head { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .travel-selection { display: grid; grid-template-columns: minmax(0, 1fr) minmax(104px, .7fr); gap: 8px; align-items: start; }
    .character-list { max-height: 60px; gap: 6px; }
    .character-glyph { display: none; }
    .character-card { min-height: 54px; padding: 6px 8px; gap: 8px; }
    .character-copy strong { font-size: 16px; }
    .character-copy > span { margin-top: 1px; }
    .character-level strong { font-size: 22px; }
    .line-selection { margin-top: 0; }
    .line-selection > label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .line-selection select { min-height: 54px; padding-left: 8px; padding-right: 22px; }
    .roster-actions { margin-top: 7px; }
    .takeover-note { margin-top: 7px; }
    .supply-note { display: none; }
    .status-heading { gap: 8px; }
    .status-heading h2 { font-size: 20px; }
    .status-badge { gap: 5px; font-size: 14px; }
    .stat-grid { gap: 2px 12px; margin: 4px 0; }
    .stat-grid > div { justify-content: space-between; gap: 6px; }
    .stat-grid dd { text-align: right; }
    .stat-grid .stat-number { font-size: 18px; }
    .hp-block > div:first-child { margin-bottom: 3px; }
    .combat-block, .income-block { margin-top: 6px; padding-top: 5px; }
    .combat-grid { gap: 6px; }
    .combat-grid dd { font-size: 15px; margin-top: 1px; }
    .combat-note { margin-top: 1px; line-height: 1.3; }
    .income-grid { gap: 6px; }
    .income-grid dd { font-size: 14px; margin-top: 1px; }
    .income-items-button { min-height: 24px; }
    .income-note { margin-top: 1px; line-height: 1.3; }
    .income-dialog { padding: 16px; }
    .income-item-list li { gap: 8px; }
    .income-item-list strong { max-width: 120px; }
    .trace-heading { gap: 6px; }
    .trace-heading h2 { font-size: 19px; flex: none; }
    .trace-indicator { gap: 5px; font-size: 14px; }
    .trace-controls { gap: 8px; }
    .trace-filter select { width: 94px; padding-left: 6px; padding-right: 20px; }
    .trace-switch { gap: 4px; }
    .follow-label, .refresh-label { display: none; }
    .trace-controls > .button { padding-left: 9px; padding-right: 9px; min-width: 48px; }
    .trace-window { padding-right: 4px; }
    .trace-entry { padding: 8px 0 8px 12px; }
    .trace-entry::before { top: 17px; }
    .trace-meta { gap: 7px; }
    .trace-footnote { gap: 4px; }
    .trace-pause-note { display: none; }
    .journey-footer { gap: 8px; }
    .journey-footer > span { padding-top: 12px; }
    .details-content { max-width: none; }
}
@media (max-width: 360px) {
    .page-shell { padding-right: 10px; padding-left: 10px; }
    .brand { font-size: 18px; }
    .account-name { max-width: 58px; }
    .trace-controls { gap: 6px; }
    .trace-filter select { width: 90px; }
    .trace-switch input { width: 17px; height: 17px; }
    .trace-controls > .button { padding-left: 7px; padding-right: 7px; }
    .trace-indicator { max-width: 190px; }
    .character-glyph { width: 28px; }
}
@media (max-width: 740px) and (max-height: 650px) {
    .page-shell { padding-top: 6px; padding-bottom: 6px; gap: 6px; }
    .masthead { min-height: 44px; padding-bottom: 0; }
    .growth-page .page-shell { height: auto; min-height: 100vh; min-height: 100dvh; }
    .journey-layout { flex: none; height: 580px; gap: 6px; }
    .roster-panel, .status-panel, .trace-panel { padding: 6px; }
    .supply-note, .trace-footnote { display: none; }
    .trace-panel { gap: 4px; }
    .status-heading h2 { font-size: 19px; line-height: 1.2; }
    .stat-grid { margin: 4px 0; }
    .login-card { padding: 18px; }
    .login-card label { margin-top: 12px; }
    .login-card .button { margin-top: 16px; }
    .form-note { margin-top: 12px; }
}