/* One viewport, one profile and one geometry owner for every game screen. */
.storage-warning { position: absolute; z-index: 25; left: 50%; top: 8px; transform: translateX(-50%); max-width: 85%; padding: 8px 14px; border: 2px solid #edc670; border-radius: 8px; background: #172832; color: #fff3d2; }
.storage-warning[hidden] { display: none; }
.save-backup { padding: 4px 8px; border-top: 1px solid #75856a; }
.save-backup p { margin: 8px 0; }
.save-backup button { margin-right: 8px; }
.title-load-status { position: absolute; z-index: 2; bottom: 8px; left: 50%; transform: translateX(-50%); padding: 8px 14px; border-radius: 8px; background: #172832; color: #fff3d2; text-align: center; }
.safe-area-probe { position: fixed; visibility: hidden; pointer-events: none; width: 1rem; height: 1rem; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

/* D battle: no viewport width media queries, no UI transform scaling. */
body:has(.game[data-phase='battle']) { margin: 0; padding: 0; overflow: hidden; }
.game[data-phase='battle'] { position: fixed; left: var(--viewport-left, 0px); top: var(--viewport-top, 0px); width: var(--available-width, 100dvw); max-width: none; height: var(--available-height, 100dvh); min-height: 0; margin: 0; padding: 2px; border-width: 2px; border-radius: 4px; display: grid; grid-template-rows: 44px minmax(0,1fr); gap: 0; overflow: hidden; }
.game[data-phase='battle'] .masthead { display: flex; flex-direction: row; align-items: center; justify-content: space-between; height: 44px; min-height: 0; padding: 0 4px; margin: 0; gap: 4px; }
.game[data-phase='battle'] .masthead .eyebrow, .game[data-phase='battle'] .clear-count { display: none; }
.game[data-phase='battle'] h1 { font-size: 14px; margin: 0; line-height: 1.2; }
.game[data-phase='battle'] .expedition-tools { display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; }
/* Same wallet chip on every screen (user, 2026-11-12): match the 44px header buttons. */
.game .gold { position: relative; height: 44px; min-height: 44px; min-width: 96px; justify-content: center; padding: 2px 10px; white-space: nowrap; }
.game .gold.coin-gain::after { position: absolute; right: 10px; top: 0; content: none; }
.game[data-phase='battle'] button, .game[data-phase='battle'] summary { min-width: 44px; min-height: 44px; margin: 0; padding: 3px 6px; font-size: 12px; }
.combat { position: relative; display: grid; min-width: 0; min-height: 0; height: 100%; overflow: hidden; gap: 0 6px; grid-template-columns: minmax(0,1fr) minmax(340px,35%); grid-template-rows: 32px 20px minmax(0,1fr) 28px; }
.combat .battle-tools { display: flex; flex-wrap: nowrap; align-items: center; min-width: 0; padding: 0; gap: 4px; }
.combat #combat-room { display: none; }
.combat .settings, .combat .pace { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; padding: 0; }
.combat .pace button { width: 44px; height: 44px; padding: 0; }
.combat .auto { height: 44px; white-space: nowrap; }
.combat .initiative { grid-area: 1 / 1 / 2 / 2; position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr); align-items: center; gap: 3px; padding: 0; min-height: 0; }
.combat #turns { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; min-width: 0; min-height: 0; margin: 0; padding: 0; overflow: visible; }
.combat .turn { flex: 0 0 30px; width: 30px; min-width: 0; min-height: 0; padding: 0; height: 32px; border-width: 1px; position: static; }
.combat .turn .portrait { display: block; width: 28px; height: 28px; min-width: 0; margin: 0; }
.combat .turn-name { display: none; position: absolute; top: 34px; padding: 3px 8px; border-radius: 5px; color: #fff4df; background: #172d26; white-space: nowrap; font-size: 12px; line-height: 20px; pointer-events: none; }
.combat .turn:focus-visible .turn-name, .combat .turn[data-named='true'] .turn-name { display: block; }
@media (hover: hover) { .combat .turn:hover .turn-name { display: block; } }
.combat .turn b, .combat .turn small, .combat .turn-inspect, .combat .turn-detail { display: none; }
.combat .stage-marker { grid-area: 2 / 1 / 3 / 2; position: static; display: flex; align-items: center; min-width: 0; max-width: none; height: 20px; gap: 3px; padding: 0 3px; border: 0; border-radius: 0; overflow: hidden; white-space: nowrap; font-size: 12px; }
.combat .stage-marker > span { flex-shrink: 0; }
.combat .stage-marker > span:not(.moon-status) { display: none; }
.combat .settings { width: 100%; justify-content: flex-start; border-bottom: 0; }
.combat .battle-playback { display: flex; align-items: center; gap: 8px; }
.combat .pace { border-right: 1px solid #7c7354; padding-right: 8px; }
.combat .stage-marker:not(:has(.wave-status:not(:empty),.moon-status:not([hidden]))) { visibility: hidden; }
.combat .wave-status, .combat .moon-status { position: static; display: inline; width: auto; max-width: none; margin: 0; padding: 0; border: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.combat .stage { grid-area: 3 / 1 / 4 / 2; display: grid; place-items: center; container-type: size; position: relative; width: 100%; min-width: 0; min-height: 0; overflow: hidden; border: 0; }
.combat #battlefield { display: block; width: 100%; height: 100%; min-height: 0; touch-action: manipulation; }
.battle-side { grid-area: 1 / 2 / -1 / 3; display: grid; grid-template-rows: 112px 44px minmax(0,1fr) auto; min-width: 0; min-height: 0; gap: 6px; }
.combat .party-panel { min-height: 0; margin: 0; padding: 0; overflow: hidden; }
.combat .party-panel h2 { display: none; }
.combat .party { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); height: 100%; min-width: 0; gap: 3px; padding: 0; margin: 0; }
.combat .member, .combat .member:last-child { grid-column: auto; min-width: 0; padding: 3px; overflow: hidden; }
.combat .member-head { display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; gap: 0; margin: 0 0 2px; }
.combat .member-head .portrait { display: block; width: 24px; height: 24px; margin: 0; }
.combat .member-head strong { display: block; max-width: 100%; font-size: 12px; line-height: 16px; white-space: nowrap; }
.combat .member-head small { display: none; }
.combat .meter, .combat .member:last-child .meter { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; column-gap: 3px; width: 100%; margin: 1px 0; }
.combat .meter span { display: none; }
.combat .meter[data-kind='HP'] span, .combat .meter[data-kind='MP'] span { display: block; font-size: 11px; line-height: 13px; white-space: nowrap; color: #d8e2d6; }
.combat .meter[data-kind='HP'] span:last-child, .combat .meter[data-kind='MP'] span:last-child { grid-column: 1 / -1; text-align: right; font-variant-numeric: tabular-nums; margin-top: -1px; }
.combat .meter[data-kind='ULT'] { grid-template-columns: minmax(0,1fr); }
.combat .meter progress { display: block; width: 100%; height: 5px; }
.combat .command-panel { display: grid; grid-template-rows: 0 minmax(0,1fr); gap: 0; height: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0; overflow: hidden; border: 0; background: transparent; box-shadow: none; }
.combat .command-heading { display: none; min-width: 0; padding: 0; margin: 0; gap: 4px; }
.combat .command-heading h2, .combat #command-hint, .combat .flee-help { display: none; }
.combat .command-panel:has(#choices:not([hidden])) { grid-template-rows: 52px minmax(0,1fr); }
.combat .command-panel:has(#choices:not([hidden])) .command-heading { display: flex; align-items: center; }
.combat .command-panel:has(#choices:not([hidden])) { background: #20372f; }
.game[data-phase='battle'] .command-back { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; min-height: 44px; padding: 0 10px; border: 0; background: transparent; box-shadow: none; font-size: 14px; line-height: 20px; white-space: nowrap; }
.combat .command-back-icon { color: #e4d0a2; font-size: 18px; line-height: 20px; }
.combat .commands { grid-row: 2; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,72px); align-content: start; min-height: 0; gap: 6px; margin: 0; padding: 0; }
.combat .commands button { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 44px; padding: 3px; white-space: nowrap; font-size: 17px; }
.combat .commands kbd { display: none; }
.combat .commands button { flex-wrap: wrap; align-content: center; }
.combat .commands .command-sub { flex-basis: 100%; text-align: center; font-size: 12px; line-height: 14px; color: #e3c98a; }
.combat .commands .command-sub:empty { display: none; }
.combat .choices { grid-row: 2; display: grid; grid-template-columns: minmax(0,1fr); grid-auto-rows: max-content; align-content: start; min-height: 0; max-height: none; height: 100%; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0 2px 0 0; gap: 4px; }
.combat .choices button { display: block; width: 100%; height: auto; min-height: 52px; padding: 8px 10px; white-space: normal; overflow: visible; overflow-wrap: anywhere; text-align: left; }
.combat .choices strong, .combat .choices small { display: block; min-width: 0; overflow: visible; white-space: normal; line-height: 20px; }
.combat .choices strong { font-size: 16px; }
.combat .choices small { font-size: 14px; }
.combat .battle-record { display: block; position: relative; min-width: 0; min-height: 0; overflow: hidden; padding: 0; margin: 0; background: #182c28; border-radius: 6px; height: 150px; }
.combat .battle-record:not([open]) { height: 32px; }
.combat .battle-record:not([open]) .record-body { display: none; }
.combat .battle-record > summary { display: flex; align-items: center; height: 32px; min-height: 32px; padding: 0 10px; list-style: none; font-size: 13px; color: #cdbb8c; cursor: pointer; border-bottom: 1px solid #ffffff14; }
.combat .battle-record > summary::-webkit-details-marker { display: none; }
.combat .battle-record > summary::before { content: '▸'; margin-right: 6px; }
.combat .battle-record[open] > summary::before { content: '▾'; }
.combat .record-body { position: absolute; inset: 32px 0 0; min-height: 0; display: flex; flex-direction: column; gap: 4px; overflow: hidden; padding: 4px 8px; font-size: 14px; line-height: 20px; }
.game, .game *, dialog { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.combat .battle-message { grid-area: 4 / 1 / 5 / 2; position: relative; min-height: 0; overflow: hidden; }
.combat .active-member { display: flex; position: static; align-items: center; gap: 4px; min-height: 0; height: 28px; padding: 0 4px; font-size: 12px; white-space: nowrap; }
.combat .active-member .portrait { width: 20px; height: 20px; }
.combat .battle-message .dialogue-bubble, .combat .battle-message .adventure-notice { position: absolute; inset: 0; translate: none; transform: none; width: 100%; max-width: none; height: 28px; min-height: 0; margin: 0; padding: 1px 4px; display: flex; align-items: center; gap: 4px; border: 0; border-radius: 0; overflow: hidden; font-size: 12px; line-height: 13px; background: #243c31; }
.combat .battle-message .dialogue-bubble .portrait { width: 24px; height: 24px; flex: 0 0 24px; }
.combat .dialogue-words { display: block; }
.combat .dialogue-name { display: inline; margin-right: 5px; font-size: 12px; }
.combat .adventure-notice:empty { display: none; }
.combat .ultimate-cutin { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 8px; overflow: hidden; z-index: 10; }
.combat .cutin-content { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,6fr); grid-template-rows: minmax(0,1fr); width: 100%; height: 100%; align-items: center; }
.combat .cutin-stripe { position: absolute; inset: 0; z-index: -1; }
.combat .cutin-words { position: relative; min-width: 0; z-index: 1; }
.combat .cutin-picture { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.combat .cutin-picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.combat .cutin-title { font-size: clamp(22px,4vw,52px); }
.combat .cutin-line { font-size: 13px; }
.combat:has(.ultimate-cutin) > :not(.stage) { pointer-events: none; }

:root[data-profile='portrait'] .combat { grid-template-columns: minmax(0,1fr); grid-template-rows: 44px 32px 20px minmax(0,1fr) 76px 92px 28px; gap: 0; }
:root[data-profile='portrait'] .battle-side { display: contents; }
:root[data-profile='portrait'] .combat .party-panel { grid-area: 5 / 1; }
:root[data-profile='portrait'] .combat .command-panel { grid-area: 6 / 1; }
:root[data-profile='portrait'] .combat .battle-message { grid-area: 7 / 1; }
:root[data-profile='portrait'] .combat #combat-room { display: none; }
:root[data-profile='portrait'] .combat .battle-tools { justify-content: end; }
:root[data-profile='portrait'] .combat .battle-record { display: none; }
:root[data-profile='portrait'] .combat .battle-record[data-expanded='true'] { position: absolute; top: 108px; left: 0; right: 0; bottom: 196px; height: auto; z-index: 9; display: block; }
:root[data-profile='portrait'] .combat .battle-record > summary { pointer-events: auto; }
:root[data-profile='portrait'] .combat .cutin-content { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; }
:root[data-profile='portrait'] .combat .cutin-picture { grid-row: 1; }
:root[data-profile='portrait'] .combat .cutin-words { grid-row: 2; }
:root[data-profile='short-landscape'] .battle-side { grid-template-rows: 76px 92px minmax(0,1fr); gap: 2px; }
:root[data-profile='short-landscape'] .combat { grid-template-columns: minmax(0,1fr) 320px; grid-template-rows: 44px 32px 20px minmax(0,1fr) 28px; }

/* Supported minimum / 200% text zoom: readable document fallback. */
:root[data-layout-accessible='true'] body:has(.game[data-phase='battle']) { overflow: auto; }
:root[data-layout-accessible='true'] .game[data-phase='battle'] { position: relative; height: auto; min-height: var(--available-height); overflow: visible; grid-template-rows: auto auto; }
:root[data-layout-accessible='true'] .combat { display: flex; flex-direction: column; height: auto; overflow: visible; }
:root[data-layout-accessible='true'] .battle-side { display: contents; }
:root[data-layout-accessible='true'] .combat .stage { flex: none; height: 55dvh; min-height: 240px; }
:root[data-layout-accessible='true'] .combat .party-panel { min-height: 76px; }
:root[data-layout-accessible='true'] .combat .command-panel { min-height: 160px; }

/* Shared native-size components, moved from the three legacy stylesheets. */
.ui-icon { display: inline-block; width: 24px; height: 24px; flex-shrink: 0; }
.village-effects { position: absolute; inset: 0; overflow: hidden; }
.lantern-glow { position: absolute; left: 40%; top: 69%; width: 5%; aspect-ratio: 1; }
.chimney-smoke { position: absolute; left: 74%; top: 15%; width: 2.5%; height: 10%; }
.firefly { position: absolute; left: calc(8% + var(--n) * 9.5%); top: calc(48% + mod(var(--n), 3) * 8%); width: 4px; height: 4px; }
.portrait { display: inline-flex; position: relative; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; overflow: hidden; }
.portrait img { width: 100%; height: 100%; }
.portrait-large { width: 104px; height: 104px; }
.item-icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; }
.item-image { width: 46px; height: 46px; }
.profile-stats { display: flex; flex-wrap: wrap; gap: 5px; margin: 16px 0; justify-content: center; }
.profile-stats > div { padding: 6px 9px; }
.profile-stats dd { margin: 4px 0 0; }
.gear-slots { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.gear-slot-card { display: grid; grid-template-rows: 1fr auto; min-width: 0; border: 1px solid #8e7650; border-radius: 7px; }
.gear-slot { display: flex; flex-direction: column; justify-content: start; gap: 5px; align-items: center; width: 100%; padding: 14px 3px 8px; }
.gear-slot-card > .gear-slot { border: 0; box-shadow: none; background: transparent; }
.gear-slot-card > .unequip { margin: 0 6px 6px; padding: 3px 6px; min-height: 32px; }
.skill-entry { padding: 9px 10px; margin-bottom: 6px; }
.skill-entry h4 { margin: 0 0 3px; }
.skill-entry p { margin-top: 5px; }
.stat-comparison { display: grid; gap: 6px; margin: 8px 0 14px; }
.stat-comparison > div { display: grid; grid-template-columns: 5em minmax(0,1fr); gap: 12px; padding: 7px 10px; }
.stat-comparison dt { align-self: center; }
.stat-comparison dd { margin: 0; }
.setting-row { display: flex; align-items: center; gap: 16px; justify-content: space-between; }
.setting-row output { min-width: 3ch; }
.loot-chest { position: relative; width: 62px; height: 52px; margin: 5px auto 18px; }
.chest-base { position: absolute; left: 0; right: 0; bottom: 0; height: 32px; }
.chest-lid { position: absolute; left: 0; right: 0; top: 0; height: 26px; }
.stat-comparison { grid-template-columns: 1fr; }
.artwork-loading { position: absolute; bottom: 12px; left: 50%; z-index: 4; padding: 7px 14px; }
.setting-row input { min-width: 44px; min-height: 44px; margin: 0; }
.setting-row.volume-row { display: grid; grid-template-columns: 44px 6.8em minmax(0, 1fr) 4ch; gap: 6px; }
.setting-row.volume-row input[type='range'] { width: 100%; min-width: 0; }
.speaker-toggle { position: relative; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; }
.speaker-icon { position: relative; display: block; width: 20px; height: 20px; }
.speaker-icon::before { position: absolute; inset: 2px 5px 2px 0; }
.speaker-icon::after { position: absolute; right: 0; top: 3px; width: 6px; height: 14px; }
.speaker-toggle[data-muted='true'] .speaker-icon::after { right: -2px; top: 9px; width: 25px; height: 2px; }
/* Shared frame and native controls. */
[hidden] { display: none !important; }
body { margin: 0; padding: 0; overflow: hidden; min-width: 0; }
h1,h2,h3,h4,p,ol,ul,dl,dd { margin: 0; }
button,select,input,summary { min-height: 44px; }
button,summary { min-width: 44px; }
button { padding: 6px 10px; font-size: 14px; overflow-wrap: anywhere; }
summary { padding: 8px; align-content: center; cursor: pointer; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.game { position: fixed; left: var(--viewport-left,0px); top: var(--viewport-top,0px); width: var(--available-width,100dvw); max-width: none; height: var(--available-height,100dvh); min-height: 0; margin: 0; padding: 6px; display: grid; grid-template-rows: 44px minmax(0,1fr); gap: 6px; border-width: 3px; overflow: hidden; }
.masthead { display: flex; align-items: center; justify-content: space-between; min-width: 0; gap: 6px; padding: 0 4px; }
.masthead .eyebrow,.clear-count { display: none; }
.masthead h1 { font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
.expedition-tools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.gold { display: inline-flex; align-items: center; gap: 4px; padding: 3px; white-space: nowrap; font-size: 12px; }
.gold .ui-icon { width: 18px; height: 18px; }
#settings-button > span { display: none; }
#journey,#scene { min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
#scene { display: grid; grid-template-rows: minmax(0,1fr); gap: 6px; }
.journey-panel { min-width: 0; min-height: 0; padding: 10px; }
.journey-panel h2 { font-size: 20px; }
.journey-copy { font-size: 12px; line-height: 1.5; }
.adventure-notice { position: fixed; bottom: 8px; left: 50%; translate: -50% 0; z-index: 6; max-width: calc(100% - 24px); padding: 6px 12px; pointer-events: none; }
.adventure-notice:empty { display: none; }
.game > .dialogue-bubble { position: absolute; left: 10px; right: 10px; bottom: 8px; width: auto; transform: none; display: flex; align-items: center; gap: 6px; padding: 5px 8px; z-index: 5; font-size: 12px; }
.game > .dialogue-bubble .portrait { width: 28px; height: 28px; }
.dialogue-words { min-width: 0; }
.dialogue-name { margin-right: 5px; }

/* Town and room screens share five cards with visible numeric HP/MP. */
.party { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: 0; gap: 4px; list-style: none; min-width: 0; }
.travel-party { height: 100px; margin: 0; }
.travel-party > li { min-width: 0; min-height: 0; }
.travel-party .member { display: block; width: 100%; height: 100%; min-width: 0; padding: 4px; text-align: center; }
.travel-party .member-head { display: grid; justify-items: center; gap: 0; }
.travel-party .member-head .portrait { width: 32px; height: 32px; }
.travel-party .member-head strong { font-size: 12px; white-space: nowrap; line-height: 16px; }
.travel-party .member-head small { font-size: 12px; line-height: 14px; }
.member-detail-link,.party-gear { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.travel-party progress { display: block; width: 100%; height: 5px; margin-top: 3px; }
.travel-party .member-head { grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 4px; }
.travel-party .member-head .portrait { width: 28px; height: 28px; }
.travel-party .travel-vitals { position: static; display: block; width: auto; height: auto; overflow: visible; clip-path: none; margin: 5px 0; font-size: 12px; line-height: 18px; white-space: nowrap; }
.game[data-phase='town'] #scene { grid-template-rows: minmax(0,1fr) 100px; }
.town-stage { position: relative; display: grid; grid-template-rows: auto minmax(0,1fr) auto; min-width: 0; min-height: 0; padding: 6px; overflow: hidden; }
.town-stage::before,.town-stage::after { display: none; }
/* Caption row exists only for the "heal first" notice; otherwise the village picture takes its space. */
.town-stage > .town-caption { grid-row: 1; }
.town-stage > .village-landscape { grid-row: 2; }
.town-stage > .town-actions { grid-row: 3; }
.town-caption { position: static; padding: 6px 10px; z-index: 1; }
.town-caption .eyebrow { font-size: 12px; }
.town-caption h2 { font-size: 18px; margin: 2px 0; }
.village-landscape { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.village-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.building-hotspot { position: absolute; top: 20%; left: 15%; width: 25%; height: 63%; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: end; }
.building-hotspot.inn-building { left: 59%; top: 11%; height: 72%; width: 24%; }
.building-label { padding: 3px 6px; font-size: 12px; }
.building-hint { display: none; }
.town-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 8px 0 0; }
.town-actions button { width: 160px; max-width: 100%; min-height: 56px; font-size: 18px; }
.town-actions .depart-button { width: 260px; min-height: 56px; padding: 10px 20px; font-size: 20px; box-shadow: 0 0 18px #edc77555; }
:root[data-profile='portrait'] .village-art { object-fit: cover; }
:root[data-profile='portrait'] .town-caption { padding: 4px 6px; }
:root[data-profile='portrait'] .town-caption h2 { font-size: 16px; }
:root[data-profile='portrait'] .town-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
:root[data-profile='portrait'] .town-actions .depart-button { grid-column: 1 / -1; }

/* World cards occupy real grid cells; SVG paths join their measured edges. */
.world-screen { display: grid; grid-template-rows: 44px minmax(0,1fr); min-height: 0; gap: 6px; }
.world-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.world-heading h2 { font-size: 18px; }
.world-body { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 10px; min-height: 0; }
.world-map { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); min-width: 0; min-height: 0; padding: 14px; gap: 24px 12px; }
.world-map svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.world-node { position: relative; left: auto; top: auto; transform: none; grid-column: var(--world-column); grid-row: var(--world-row); width: 100%; max-width: none; height: 100%; min-width: 0; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px; z-index: 1; border-radius: 8px; }
.world-node img { width: 100%; min-height: 0; max-height: 65%; object-fit: cover; aspect-ratio: 1.7; border-radius: 5px; }
.world-node-words { display: flex; flex-direction: column; min-width: 0; }
.world-node b,.world-node small { font-size: 12px; line-height: 15px; white-space: nowrap; }
.region-detail { min-width: 0; min-height: 0; align-self: start; display: grid; align-content: start; grid-template-rows: 160px repeat(5,auto); padding: 12px; gap: 12px; overflow: hidden; line-height: 1.4; }
.region-preview { display: block; width: 100%; min-height: 0; max-height: 160px; height: 100%; object-fit: cover; }
.world-node[data-locked='true'] img { filter: brightness(.78) saturate(.65); }
.world-node[data-locked='true'][aria-pressed='false']:hover { background: #233d30; border-color: var(--line); box-shadow: none; filter: none; }
.world-lock { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 50%; background: #18362ee6; z-index: 2; }
.world-lock::before { content: ''; position: absolute; width: 12px; height: 11px; border: 2px solid #ffe0a1; border-radius: 7px 7px 0 0; top: 5px; left: 9px; }
.world-lock::after { content: ''; position: absolute; width: 16px; height: 12px; border-radius: 2px; background: #ffe0a1; top: 13px; left: 7px; }
.region-detail h2 { font-size: 20px; }
.region-detail p { font-size: 12px; }
.region-detail .primary { width: 100%; }
.first-reward { padding: 4px 0; }
:root[data-profile='portrait'] .world-heading h2 { font-size: 15px; }
:root[data-profile='portrait'] .world-heading button { font-size: 12px; padding: 4px; }
:root[data-profile='portrait'] .world-body { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(250px,1fr) auto; gap: 6px; }
:root[data-profile='portrait'] .world-map { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(5,minmax(0,1fr)); padding: 6px; gap: 6px 18px; }
:root[data-profile='portrait'] .world-node { grid-column: var(--portrait-column); grid-row: var(--portrait-row); flex-direction: row; gap: 4px; justify-content: start; padding: 2px 4px; }
:root[data-profile='portrait'] .world-node img { width: 38px; height: 38px; max-height: none; aspect-ratio: 1; flex-shrink: 0; }
:root[data-profile='portrait'] .world-node-words { flex: 1; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 0 3px; }
:root[data-profile='portrait'] .world-node b { width: 100%; text-align: left; }
:root[data-profile='portrait'] .region-detail { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto auto auto; gap: 4px; padding: 6px; }
:root[data-profile='portrait'] .region-detail .region-preview,:root[data-profile='portrait'] .region-detail .eyebrow { display: none; }
:root[data-profile='portrait'] .region-detail h2 { font-size: 18px; }
:root[data-profile='portrait'] .region-detail > p:not(.recommended-level),:root[data-profile='portrait'] .region-detail > button { grid-column: 1 / -1; }
:root[data-profile='short-landscape'] .world-body { grid-template-columns: minmax(0,1fr) 240px; gap: 6px; }
:root[data-profile='short-landscape'] .world-map { padding: 6px; gap: 12px 8px; }
:root[data-profile='short-landscape'] .world-node img { max-height: 38px; }
:root[data-profile='short-landscape'] .region-preview,:root[data-profile='short-landscape'] .region-detail .eyebrow { display: none; }
:root[data-profile='short-landscape'] .region-detail { grid-template-rows: auto; gap: 6px; }

/* Branching routes use the same profile as the rest of the game. */
.game[data-phase='map'] #scene { grid-template-rows: minmax(0,1fr); }
.game[data-phase='map'] .travel-party { display: none; }
.route-map { display: grid; grid-template-rows: auto auto minmax(0,1fr) 44px; gap: 8px; padding: 8px; position: relative; }
.route-map:has(> .journey-copy) { grid-template-rows: auto auto auto minmax(0,1fr) 44px; }
.route-map > .eyebrow { display: none; }
.route-map h2 { font-size: 16px; }
.route-map > .journey-copy { font-size: 12px; }
.floors { display: flex; gap: 4px; padding: 0; list-style: none; }
.floors li { padding: 3px 5px; font-size: 12px; }
.route-main { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 12px; min-height: 0; }
.route-board { position: relative; min-height: 0; overflow: hidden; border-radius: 10px; }
.route-board svg,.route-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.route-board .route { position: absolute; transform: translate(-50%,-50%); display: grid; place-items: center; width: 70px; height: 70px; min-height: 70px; padding: 2px; border-radius: 50%; }
.route-icon,.route-symbol { width: 56px; height: 56px; display: grid; place-items: center; object-fit: contain; }
.route-symbol { font-size: 30px; font-weight: bold; }
.route .route-kind,.route .route-state,.route > strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.route[data-state='open'] > strong,.route[data-state='current'] > strong { opacity: 1; clip-path: none; overflow: visible; width: max-content; max-width: 155px; height: auto; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: #fff1cbeb; padding: 2px 6px; border-radius: 4px; color: #37472d; font-size: 13px; line-height: 18px; }
.route-actions { display: flex; align-items: center; justify-content: end; gap: 8px; min-width: 0; }
.route-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-right: auto; color: #e6d89e; font-size: 12px; }
.route-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.route-legend > span::before { content: ''; width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; }
.legend-open::before { border: 2px solid #f8d387; }
.legend-current::before { border: 2px solid #56874c; background: #a2d695; }
.route-information { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 12px; border: 2px solid #af975c; border-radius: 10px; background: linear-gradient(135deg,#fbf2d6,#ecdfb3); color: #344632; }
.route-information h3 { font-size: 17px; margin: 0; color: #705c2c; }
.route-effects { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0; }
.route-effects:empty { display: none; }
.route-effects li { padding: 3px 6px; border: 1px solid #b8a475; border-radius: 5px; font-size: 12px; line-height: 1.4; background: #e6edcb; }
.route-choices { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.route-choice { display: grid; grid-template-columns: 40px minmax(0,1fr); align-content: start; gap: 2px 8px; width: 100%; padding: 10px; border: 1px solid #b6a36e; border-radius: 8px; background: #fff8e4; color: #344632; text-align: left; }
.route-choice .route-icon,.route-choice .route-symbol { grid-row: span 2; width: 38px; height: 38px; }
.route-choice > strong { font-size: 16px; line-height: 22px; overflow-wrap: anywhere; }
.route-choice-kind { font-size: 12px; color: #7d724e; }
.route-choice-copy { grid-column: 1 / -1; white-space: pre-line; font-size: 13px; line-height: 1.5; margin-top: 5px; word-break: keep-all; overflow-wrap: anywhere; }
.route-choice[data-highlight='true'] { background: #fff0bc; border-color: #936b26; box-shadow: inset 0 0 0 2px #d7b354; }
.route-board .route[data-highlight='true'] { background: #fff0bc; outline: 4px solid #e3b94d; box-shadow: 0 0 0 7px #fff0a580; animation: none; }
.route-choice:focus-visible { outline: 3px solid #408c88; outline-offset: 2px; }
.route-choice:hover:not(:disabled), .route-choice:focus-visible { background: #fff0bc; color: #344632; }
.route-choice:hover .route-choice-kind, .route-choice:focus-visible .route-choice-kind { color: #66562f; }
.game[data-phase='map'] > .adventure-notice, .game[data-phase='room'] > .adventure-notice, .game[data-phase='result'] > .adventure-notice { top: 48px; bottom: auto; }
.game[data-phase='travel'] #scene { grid-template-rows: minmax(0,1fr); }
.travel { display: grid; grid-template-rows: auto auto auto minmax(0,1fr); gap: 4px; }
.travel-canvas { display: block; width: 100%; height: 100%; min-height: 0; }
.game[data-phase='room'] #scene { grid-template-rows: minmax(0,1fr) 100px; }
/* Room: one centred card, text and choices sized for the 1280x720 stage. */
.room-card { display: flex; flex-direction: column; justify-content: flex-start; align-self: center; max-height: 100%; gap: 12px; width: 100%; max-width: 940px; margin: 0 auto; padding: 20px 32px; overflow: auto; }
.room-card > * { flex-shrink: 0; }
.room-card h2 { font-size: 28px; margin: 0; }
.room-card .eyebrow { font-size: 14px; margin: 0; }
.room-copy { min-height: 0; font-size: 16px; line-height: 1.6; }
.room-copy p { margin: 0 0 6px; }
.room-art { width: 72px; height: 72px; object-fit: contain; }
.room-card .member-dialogue { padding: 8px 12px; font-size: 15px; }
.room-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; align-content: start; min-height: 0; }
.room-actions button { min-width: 44px; min-height: 60px; white-space: normal; font-size: 16px; line-height: 22px; padding: 10px 14px; text-align: left; }
.room-actions button:only-child { grid-column: 1 / -1; justify-self: center; min-width: 320px; text-align: center; }
.room-actions small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; width: 100%; color: #c9c3a6; }
:root[data-profile='short-landscape'] .game[data-phase='room'] #scene { grid-template-rows: minmax(0,1fr) 76px; }
:root[data-profile='short-landscape'] .game[data-phase='room'] .travel-party { height: 76px; }
:root[data-profile='short-landscape'] .game[data-phase='room'] .travel-party .portrait { width: 20px; height: 20px; }
:root[data-profile='short-landscape'] .room-card { display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto; padding: 4px; }
:root[data-profile='short-landscape'] .room-card > .eyebrow,:root[data-profile='short-landscape'] .room-art { display: none; }
:root[data-profile='short-landscape'] .room-copy { grid-area: 2 / 1; }
:root[data-profile='short-landscape'] .room-actions { grid-area: 3 / 1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-content: end; }

/* Treasure room alone uses a small, content-sized card. */
.game[data-phase='room'] .room-card[data-kind='treasure'] { display:flex;flex-direction:column;align-items:center;justify-self:center;width:min(360px,100%);max-width:360px;height:auto;gap:12px;padding:22px 26px;text-align:center; }
.game[data-phase='room'] .room-card[data-kind='treasure'] > .room-art { display:block;width:64px;height:64px; }
.game[data-phase='room'] .room-card[data-kind='treasure'] h2 { font-size:24px;line-height:1.4; }
.game[data-phase='room'] .room-card[data-kind='treasure'] .room-copy:empty { display:none; }
.game[data-phase='room'] .room-card[data-kind='treasure'] .room-actions { display:flex;justify-content:center;width:100%; }
.game[data-phase='room'] .room-card[data-kind='treasure'] .room-actions button:only-child { flex:none;min-width:0;width:auto;min-height:44px;padding:10px 24px;text-align:center; }

/* Modal chrome stays fixed. Only the content/list owns a scroll container. */
.game-modal,.equipment-dialog,.confirmation { width: min(1160px,calc(var(--available-width,100dvw) - 16px)); max-width: none; height: min(760px,calc(var(--available-height,100dvh) - 16px)); max-height: none; padding: 10px; margin: auto; overflow: hidden; }
.game-modal[open],.equipment-dialog[open] { display: flex; flex-direction: column; gap: 6px; }
.modal-heading { flex: 0 0 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; min-width: 0; }
.modal-heading h2 { font-size: 18px; }
.modal-heading .close-modal { flex: 0 0 88px; width: 88px; height: 44px; min-height: 44px; padding: 6px 10px; font-size: 14px; }
.modal-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 2px; }
.settings-modal,.inn-modal,.confirmation { width: min(520px,calc(var(--available-width,100dvw) - 16px)); }
.settings-modal { width: 620px; height: auto; max-height: calc(var(--available-height,100dvh) - 16px); padding: 18px; }
.inn-modal { height: auto; max-height: 704px; }
.inn-modal .modal-body { flex: 0 1 auto; }
.settings-modal .modal-body { flex: 1 1 auto; }
.setting-hint { font-size: 12px; color: #d3ccb0; font-weight: normal; white-space: nowrap; }
.volume-row .setting-hint { margin-left: 8px; }
.settings-modal label.setting-row { display: grid; grid-template-columns: 112px minmax(0,1fr) 44px; gap: 8px; }
.settings-reset { align-self: end; margin-top: 18px; min-width: 160px; min-height: 44px; }
.settings-modal .fan-note { margin: 8px 0 0; }
.settings-modal .volume-row { grid-template-columns: 44px 140px minmax(44px,1fr) 4ch; }
.settings-actions,.confirmation-actions { display: flex; flex-wrap: wrap; gap: 4px; flex-shrink: 0; }
.settings-actions > button { flex: 1; padding: 4px; }
.fan-note { flex-shrink: 0; text-align: center; font-size: 12px; line-height: 18px; }
.settings-modal > .setting-row,.settings-modal > .journey-copy { display: none; }
.setting-row { padding: 4px 0; min-height: 44px; }
.setting-row input[type='checkbox'] { width: 44px; height: 44px; }
.volume-row { grid-template-columns: 44px 6.8em minmax(44px,1fr) 4ch; }
.setting-row input[type='range'] { min-height: 44px; min-width: 44px; }
.inn-modal .inn-sign { font-size: 60px; }
.confirmation { width: 360px; height: auto; max-height: calc(var(--available-height,100dvh) - 16px); padding: 20px; }
.confirmation .danger,.settings-reset { color: #ffe6df; border-color: #d88d82; background: linear-gradient(#9a4e48,#663936); }
.confirmation[open] { display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 12px; }
.confirmation h2 { font-size: 18px; }
.confirmation .journey-copy { overflow: auto; white-space: pre-line; line-height: 1.7; word-break: keep-all; }
.room-actions .choice-effect { white-space: pre-line; line-height: 1.65; margin-top: 6px; }
.spring-modal { width: 540px; height: auto; }
.spring-message { margin: 12px 0; line-height: 1.7; word-break: keep-all; }
.spring-changes { display: grid; gap: 8px; margin-bottom: 12px; overflow: auto; }
.spring-change { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 2px 8px; align-items: center; padding: 8px; border: 1px solid #829577; border-radius: 6px; }
.spring-change .portrait { grid-row: span 2; width: 32px; height: 32px; }
.spring-change p { white-space: pre-line; line-height: 1.6; }
.spring-change[data-kind='harm'],.spring-change[data-kind='down'] { border-color: #b57f70; }
.confirmation-actions { justify-content: end; }
.bestiary-modal { width: 1160px; height: 656px; }
.bestiary-progress { display: block; width: 100%; height: 8px; accent-color: #dfbd72; }
.bestiary-modal > .bestiary-progress { flex-shrink: 0; margin: 2px 0 8px; }
.bestiary-body { display: grid; grid-template-columns: 156px minmax(0,1fr) 248px; gap: 12px; flex: 1; min-height: 0; overflow: hidden; }
.bestiary-tabs { display: grid; grid-template-rows: repeat(10,minmax(0,1fr)); gap: 4px; min-height: 0; }
.bestiary-modal .bestiary-tab { display: grid; grid-template-columns: minmax(0,1fr) auto; align-content: center; gap: 4px; min-width: 0; min-height: 0; padding: 5px 7px; font-size: 13px; text-align: left; color: #eee4cb; }
.bestiary-tab .bestiary-progress { grid-column: 1 / -1; height: 5px; }
.bestiary-tab-count { font-size: 12px; font-variant-numeric: tabular-nums; }
.bestiary-modal .bestiary-tab:disabled { opacity: .65; }
.bestiary-modal .bestiary-tab[aria-selected='true'] { border-color: #f4d38a; background: #536344; box-shadow: inset 3px 0 #f4d38a; }
.bestiary-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.bestiary-region-heading { flex-shrink: 0; margin: 0 0 8px; font-size: 16px; line-height: 24px; }
.bestiary-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); grid-auto-rows: 114px; align-content: start; gap: 6px; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 4px; scrollbar-gutter: stable; }
.bestiary-modal .bestiary-cell { display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; min-height: 0; padding: 4px 2px; border: 1px solid #75856a; border-radius: 7px; background: #233b33; color: #f2e5c9; overflow: hidden; }
.bestiary-number { margin: 0; font-size: 11px; line-height: 16px; color: #dbc898; font-variant-numeric: tabular-nums; }
.bestiary-art { display: grid; place-items: center; flex: 1; width: 72px; min-height: 0; background: radial-gradient(ellipse,#d8d7a252,transparent 70%); }
.bestiary-sprite { display: block; width: 100%; background-repeat: no-repeat; background-position: left top; image-rendering: pixelated; }
.bestiary-art[data-found='false'] .bestiary-sprite { filter: brightness(0); opacity: .85; }
.bestiary-cell-name { display: block; width: 100%; font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bestiary-modal .bestiary-cell[data-boss='true'] { border: 2px solid #e6b957; background: #433d2a; }
.bestiary-modal .bestiary-cell[aria-pressed='true'] { outline: 2px solid #fff1bc; outline-offset: -4px; background: #4d6046; }
.bestiary-detail { min-width: 0; min-height: 0; padding: 14px; border: 1px solid #a78d59; border-radius: 8px; background: #172e28; text-align: center; }
.bestiary-detail .bestiary-art-large { width: 208px; height: 208px; margin: 0 auto 12px; }
.bestiary-detail .bestiary-name { margin: 6px 0 10px; font-size: 21px; line-height: 28px; }
.bestiary-detail h4 { margin: 20px 0 6px; font-size: 12px; color: #d5c594; }
.bestiary-description,.bestiary-weaknesses,.bestiary-habitat,.bestiary-unseen { margin: 0; font-size: 14px; line-height: 22px; overflow-wrap: anywhere; }
.bestiary-unseen { margin-top: 28px; color: #d6ccad; }
.shop-balance,.shop-tabs { flex-shrink: 0; }
.shop-modal { width: 1080px; height: auto; max-height: 612px; }
.members-modal { width: 1040px; height: auto; max-height: 624px; }
.shop-tabs { display: flex; gap: 4px; }
.shop-tabs button { flex: 1; }
.shop-body { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(360px,1fr); gap: 12px; flex: 0 1 auto; min-height: 0; overflow: hidden; }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); grid-auto-rows: max-content; align-content: start; gap: 6px; }
.shop-grid { min-height: 0; overflow: auto; padding: 3px; }
.item-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: start; gap: 4px; min-width: 0; min-height: 116px; padding: 7px 4px; }
.item-tile > * { flex-shrink: 0; }
.item-tile b,.item-tile small,.gear-slot small { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.shop-detail { display: flex; flex-direction: column; align-self: start; max-height: 100%; gap: 6px; min-height: 0; min-width: 0; padding: 8px; }
.shop-detail-body { flex: 0 1 auto; min-height: 0; overflow: auto; }
.shop-detail .primary { flex-shrink: 0; width: 100%; }
.shop-detail h3 { font-size: 18px; }
.shop-detail p,.shop-member-compare { font-size: 12px; line-height: 1.5; }
.shop-comparisons { display: flex; justify-content: space-between; gap: 6px; padding: 12px 0; }
.shop-member-compare { display: flex; align-items: center; gap: 3px; padding: 0; border: 0; flex-wrap: wrap; max-width: 20%; }
.shop-member-compare .portrait { width: 30px; height: 30px; }
.shop-member-compare span[data-change] { font-weight: bold; font-size: 14px; }
.shop-member-compare [data-change='up'] { color: #b7f3a6; }
.shop-member-compare [data-change='down'] { color: #ffb5a4; }
.shop-equipment-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.shop-equipment-grid > .item-tile { min-height: 138px; }
.shop-equipment-grid .item-icon { width: 48px; height: 48px; }
.locked-equipment { grid-column: 1 / -1; min-width: 0; }
.locked-equipment summary { min-height: 44px; padding: 10px; font-size: 13px; white-space: nowrap; cursor: pointer; border: 1px solid #6c795f; border-radius: 6px; color: #ddcfad; }
.locked-equipment-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; padding: 8px 0; }
.shop-modal .lock-label { white-space: nowrap; font-size: 11px; overflow-wrap: normal; }
.shop-grid .item-tile[data-locked='true']::before { position: absolute; top: 14px; width: 17px; height: 20px; z-index: 1; }
.shop-grid .item-tile[data-locked='true']::after { position: absolute; top: 30px; width: 28px; height: 24px; z-index: 1; }
.members-body { display: grid; grid-template-rows: 60px minmax(0,1fr) auto; gap: 6px; min-height: 0; flex: 0 1 auto; }
.member-roster { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; }
.roster-choice { display: grid; justify-items: center; gap: 0; min-width: 0; padding: 2px; font-size: 12px; }
.roster-choice .portrait { width: 26px; height: 26px; }
.roster-choice small { display: none; }
.member-content { min-height: 0; overflow: auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-content: start; gap: 8px; padding: 2px; }
.member-profile { min-width: 0; padding: 8px; display: grid; grid-template-columns: 60px minmax(0,1fr); align-content: start; gap: 4px 8px; text-align: left; }
.member-profile .portrait-large { width: 60px; height: 60px; grid-row: 1 / 3; }
.member-profile h3, .member-profile .role-label { margin: 0; }
.member-profile .role-label { font-size: 12px; }
.member-growth, .member-profile .profile-stats, .member-profile .gear-slots { grid-column: 1 / -1; }
.member-growth { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px 12px; min-width: 0; margin: 6px 0; }
.member-xp { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 20px 10px; align-items: center; gap: 4px 8px; font-size: 13px; line-height: 20px; white-space: nowrap; }
.member-xp-label { grid-area: 1 / 1; font-size: 12px; }
.member-xp-numbers { grid-area: 1 / 2; font-variant-numeric: tabular-nums; }
.member-xp .xp-track { grid-area: 2 / 1 / 3 / -1; height: 10px; border-radius: 8px; background: #c4c7a9; }
.member-xp .xp-fill { animation: none; background: linear-gradient(90deg,#508774,#8bb77a); border-radius: 8px; }
.member-profile[data-gaining='true'] .member-xp-numbers { color: #ffe0a1; }
.member-candy-reason { grid-column: 1 / -1; font-size: 12px; line-height: 16px; color: #e0d6b4; }
.profile-stats { margin: 6px 0; }
.profile-stats > div { padding: 3px 6px; }
.gear-slots { grid-template-columns: repeat(3,minmax(0,1fr)); }
.equipment-bag { min-width: 0; }
.equipment-bag .bag-grid { max-height: 300px; overflow: auto; align-content: start; }
.equipment-bag .empty-bag { grid-column: 1 / -1; }
.member-skills { grid-column: 1 / -1; min-width: 0; }
.member-skills > summary { min-height: 44px; font-size: 15px; }
.equipment-preview { display: flex; align-items: center; gap: 6px; min-height: 44px; max-height: 140px; padding: 6px; }
.equipment-preview h3,.equipment-preview p { font-size: 12px; }
.equipment-preview .stat-comparison { flex: 1; max-height: 110px; overflow: auto; margin: 0; }
.equipment-preview .primary { flex: 0 0 80px; }
.equipment-preview .stat-comparison > div { padding: 3px; }
.equip-member { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 4px; width: 100%; padding: 6px; margin: 4px 0; text-align: left; }
.equip-member .portrait { grid-row: 1 / 4; }
.equip-member > span:not(.portrait),.equip-member .stat-comparison { grid-column: 2; }
.equip-member .stat-comparison { margin: 0; }
.new-equipment { font-size: 14px; padding: 6px; }
:root[data-profile='portrait'] .shop-body { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) minmax(160px,.7fr); }
:root[data-profile='portrait'] .member-content { grid-template-columns: minmax(0,1fr); }
:root[data-profile='portrait'] .equipment-preview { flex-wrap: wrap; }
:root[data-profile='portrait'] .equipment-preview h3 { flex-basis: 100%; }

/* Results always keep the trophy, all five growth rows and the next action. */
.game[data-phase='result'] #scene { padding: 0; background: linear-gradient(#18352b33,#18352b66),var(--scene-art) center / cover; }
.result-card { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 354px; gap: 12px; height: 100%; min-height: 0; width: 100%; margin: 0; padding: 16px 16px 16px 8px; overflow: hidden; border: 1px solid #a7935e; border-radius: 10px; background: transparent; }
.result-heading { position: absolute; top: 16px; left: 8px; right: 8px; text-align: center; color: #fff1be; text-shadow: 0 2px 6px #163c2b; }
.result-emblem { position: absolute; left: 0; top: 0; width: 48px; height: 48px; object-fit: contain; }
.result-heading .eyebrow { display: none; }
.result-banner { font-size: 22px; line-height: 26px; margin: 0; }
.result-heading h2 { font-size: 34px; line-height: 1.3; margin: 10px 0; }
.result-heading p { font-size: 14px; line-height: 1.5; }
.result-heading .journey-copy { font-size: 12px; line-height: 16px; }
.result-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-content: center; gap: 10px; min-height: 0; overflow: auto; }
.result-summary,.level-up-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: 4px; min-height: 0; margin: 0; align-content: center; }
.result-xp { display: grid; grid-template-columns: 48px minmax(0,1fr) 112px; gap: 2px 4px; padding: 3px; font-size: 12px; line-height: 16px; }
.result-xp > span { text-align: right; }
.xp-track { min-width: 0; height: 8px; align-self: center; overflow: hidden; }
.xp-fill { width: var(--xp); height: 100%; }
.level-up-grid .level-up { margin: 0; padding: 4px; font-size: 12px; line-height: 16px; }
.level-up { position: relative; }
.level-up::before { position: absolute; inset: 0; z-index: -1; }
.level-up::after { display: none; }
.journey-tags { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px; }
.journey-tags > span { display: inline-flex; align-items: center; gap: 4px; padding: 4px; font-size: 12px; }
.result-details { min-height: 44px; position: relative; text-align: left; }
.result-details[open] { height: 200px; display: grid; grid-template-rows: 44px minmax(0,1fr); padding: 4px; background: var(--parchment); border: 2px solid #b8a16c; border-radius: 8px; box-shadow: 0 4px 20px #0006; }
.result-detail-body { min-height: 0; overflow: auto; font-size: 12px; line-height: 1.5; }
.result-details[open] .result-detail-body { position: absolute; inset: 48px 4px 4px; }
.result-detail-body > * { margin: 4px 0; }
.result-actions { display: flex; flex-direction: column; gap: 6px; justify-content: center; margin-top: 8px; }
.result-actions button { flex: 1; min-height: 44px; margin: 0; }
.result-theater { position: relative; min-width: 0; min-height: 0; }
.result-party { position: absolute; inset: 140px 8px 72px; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; }
.result-member { position: relative; min-width: 0; container-type: inline-size; }
.result-sprite { position: absolute; left: 0; bottom: 82px; width: 100%; height: auto; aspect-ratio: 1; }
.result-member:nth-child(even) .result-sprite { bottom: 114px; }
.result-tag { position: absolute; bottom: 0; width: 100%; min-height: 74px; padding: 10px 6px; border: 1px solid #c8b98b; border-radius: 8px; background: linear-gradient(#fff8df,#e8dab0); color: #304134; box-shadow: 0 5px 12px #102e3033; text-align: center; }
.result-member:nth-child(even) .result-tag { bottom: 32px; }
.result-tag strong { font-size: 14px; }
.result-level { margin-left: 4px; font-size: 12px; }
.result-earned-xp { display: block; font-size: 11px; margin-top: 3px; }
.member-candy { display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 5px 6px; border: 1px solid #ffffff20; border-radius: 8px; background: #ffffff06; font-size: 14px; line-height: 20px; white-space: nowrap; }
.member-candy .item-image { width: 32px; height: 32px; object-fit: contain; }
.member-candy > span { min-width: 20px; text-align: center; }
.member-candy button { min-width: 64px; min-height: 44px; padding: 4px 10px; font-size: 14px; }
.member-candy[data-disabled='true'] { opacity: .5; }
.result-tag .xp-track { height: 7px; border-radius: 8px; margin-top: 9px; background: #c4c7a9; }
.result-tag .xp-fill { animation: none; background: linear-gradient(90deg,#508774,#8bb77a); border-radius: 8px; }
.result-xp-numbers { margin-top: 6px; font-size: 11px; white-space: nowrap; }
.result-badge { position: absolute; bottom: 260px; left: 0; right: 0; padding: 7px 4px; min-height: 42px; text-align: center; border: 1px solid #9d792d; border-radius: 7px; background: linear-gradient(#fff0b4,#ecc777); color: #67471c; box-shadow: 0 3px 10px #17352844; }
.result-badge b { font-size: 14px; display: block; }
.result-badge span { display: block; margin-top: 3px; font-size: 11px; overflow-wrap: anywhere; }
.result-speech { position: absolute; bottom: 346px; left: 50%; translate: -50% 0; width: 272px; max-width: 290px; padding: 10px 12px; border: 1px solid #ad9567; border-radius: 12px; background: #fff9e8; color: #304134; font-size: 13px; line-height: 1.5; box-shadow: 0 4px 12px #12382d44; z-index: 2; }
.result-speech::after { content: ''; position: absolute; bottom: -9px; left: 50%; translate: -50% 0; width: 16px; height: 10px; background: #fff9e8; clip-path: polygon(0 0,100% 0,50% 100%); }
.result-member:first-child .result-speech { left: 0; translate: none; }
.result-member:last-child .result-speech { left: auto; right: 0; translate: none; }
.result-member:first-child .result-speech::after { left: 50cqw; }
.result-member:last-child .result-speech::after { left: calc(100% - 50cqw); }
.result-down { position: absolute; bottom: 92px; left: 25%; right: 25%; padding: 3px; border-radius: 4px; background: #364e44dd; color: #fff1d0; font-size: 11px; text-align: center; }
.result-member:nth-child(even) .result-down { bottom: 124px; }
.result-scene-note { position: absolute; bottom: 20px; left: 50%; translate: -50% 0; white-space: nowrap; background: #15382cdd; padding: 6px 12px; border: 1px solid #adbb8b66; border-radius: 20px; color: #edf0d6; font-size: 12px; }
.result-skip { position: absolute; bottom: 0; width: 100%; text-align: center; font-size: 11px; color: #fff1be; }
.result-card[data-animating='false'] .result-skip { visibility: hidden; }
.result-receipt { align-self: start; min-height: 0; max-height: 100%; overflow-y: auto; display: grid; gap: 8px; padding: 18px; border: 1px solid #a8955a; border-radius: 10px; background: linear-gradient(120deg,#fff6dd,#eadbb0); color: #304134; box-shadow: 0 0 0 3px #e0d4a844,0 8px 22px #152e2c55; text-align: left; }
.result-receipt h3 { font-size: 22px; color: #735829; }
.result-receipt-note { font-size: 12px; line-height: 1.6; color: #6c7154; }
.result-reward { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 9px 12px; border: 1px solid #c7b785; border-radius: 7px; background: #fff9e8b3; }
.result-reward > div { flex: 1; min-width: 140px; }
.gear-equipped-status { color: #496344; font-size: 13px; font-weight: 700; }
.game-modal.treasure-modal { width:min(480px,calc(var(--available-width,100dvw) - 24px));height:auto;max-height:min(600px,calc(var(--available-height,100dvh) - 24px));padding:16px;gap:10px; }
.treasure-modal .treasure-loot { flex:0 1 auto;min-height:0;max-height:420px;display:grid;grid-auto-rows:max-content;align-content:start;gap:10px;margin:8px 0;padding:4px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain; }
.treasure-modal .treasure-loot[data-entries='1'] { flex-shrink:0;overflow:visible; }
.treasure-modal .treasure-item { display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:64px;padding:4px 0; }
.treasure-modal .treasure-item strong { min-width:0;overflow-wrap:anywhere;line-height:1.5; }
.treasure-modal .treasure-item > .item-icon { width:52px;height:52px;min-width:52px; }
.treasure-modal .treasure-item > button { min-height:44px;margin:0;padding:8px 12px; }
.treasure-modal > .primary { flex:none;align-self:flex-end;min-width:112px;min-height:44px; }
.treasure-modal .treasure-gold { margin:0;font-size:20px;line-height:28px;color:var(--gold); }
.result-reward small { display: block; font-size: 11px; color: #777759; margin-bottom: 3px; }
.result-reward strong { display: block; font-size: 17px; color: #65532e; overflow-wrap: anywhere; }
.result-reward .ui-icon { width: 30px; height: 30px; object-fit: contain; }
.result-reward button { width: 100%; margin: 0; }
.result-receipt button:not(.primary) { color: #fff3d0; }
.result-new-dex { justify-self: start; padding: 5px 8px; border-radius: 5px; background: #e2e8c7; color: #47634a; font-size: 12px; }
.result-unlock,.result-snack { border: 1px solid #7d9560; border-radius: 7px; background: #dce6bb; color: #46603b; padding: 10px; font-size: 13px; line-height: 1.6; }
.result-snack h4 { margin-bottom: 3px; }
.ending-card { position: relative; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto auto auto 44px; min-width: 0; min-height: 0; height: 100%; width: 100%; max-width: 1100px; margin: auto; gap: 6px; }
.ending-card > .eyebrow { display: none; }
.ending-portraits { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; margin: 0; }
.ending-roster { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: 0; list-style: none; gap: 4px; font-size: 12px; text-align: center; }
.ending-roster li { display: grid; gap: 2px; min-width: 0; }
.ending-roster span { white-space: nowrap; }
.ending-card > button { grid-row: 7; width: 100%; min-height: 44px; }
.ending-details { grid-row: 6; font-size: 12px; }
.ending-details[open] { position: absolute; left: 8px; right: 8px; bottom: 58px; height: min(240px,65%); background: var(--panel); border: 1px solid var(--line); z-index: 2; }
.ending-details[open] .ending-detail-body { position: absolute; inset: 44px 4px 4px; overflow: auto; }
:root[data-profile='short-landscape'] .result-card { gap: 2px; padding: 4px; }
:root[data-profile='short-landscape'] .result-heading { min-height: 44px; }
:root[data-profile='short-landscape'] .result-heading .journey-copy { display: none; }
:root[data-profile='short-landscape'] .result-body { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
:root[data-profile='short-landscape'] .result-xp { grid-template-columns: 52px minmax(0,1fr) 86px; padding: 0; }
:root[data-profile='short-landscape'] .result-xp > span { grid-column: auto; }
:root[data-profile='short-landscape'] .level-up-grid .level-up { padding: 0 4px; }
:root[data-profile='short-landscape'] .ending-card { grid-template-rows: auto minmax(0,1fr) auto auto 44px; gap: 4px; }
:root[data-profile='short-landscape'] .ending-details { grid-row: 4; }
:root[data-profile='short-landscape'] .ending-card > button { grid-row: 5; }
:root[data-profile='short-landscape'] .ending-card > .journey-copy,:root[data-profile='short-landscape'] .ending-roster { display: none; }

/* The existing title art and wording stay intact; only its frame is fitted. */
.game[data-phase='title'] { grid-template-rows: minmax(0,1fr); }
.game[data-phase='title'] .masthead { display: none; }
.game[data-phase='title'] > .adventure-notice { display: none; }

/* Small/zoomed windows retain a readable document fallback. */
:root[data-layout-accessible='true'] body { overflow: auto; }
:root[data-layout-accessible='true'] .game { position: relative; height: auto; min-height: var(--available-height); overflow: visible; }
:root[data-layout-accessible='true'] #journey,:root[data-layout-accessible='true'] #scene { height: auto; min-height: 600px; overflow: visible; }

/* Transient text has its own row, clear of navigation and party cards. */
.game:not([data-phase='battle']):has(> .dialogue-bubble:not([hidden])) { grid-template-rows: 44px minmax(0,1fr) 40px; }
/* Notices float over the stage so they never claim the bubble's grid row. */
.game > .adventure-notice { position: absolute; grid-row: auto; left: 50%; bottom: 52px; translate: -50% 0; transform: none; width: max-content; max-width: calc(100% - 32px); margin: 0; z-index: 7; pointer-events: none; padding: 6px 14px; font-size: 14px; }
.game > .dialogue-bubble { position: static; grid-row: 3; width: 100%; max-width: none; translate: none; transform: none; margin: 0; padding: 2px 6px; min-height: 0; font-size: 12px; }
.ending-card { overflow-wrap: anywhere; }
/* Portrait town: two crops of the approved artwork keep both buildings whole. */
:root[data-profile='portrait'] .village-landscape { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; gap: 4px; }
:root[data-profile='portrait'] .village-art { display: none; }
:root[data-profile='portrait'] .building-hotspot { position: relative; left: auto; top: auto; width: 100%; height: calc(var(--available-width) * .55); max-height: 100%; min-height: 44px; justify-content: end; padding: 4px; background-image: url('../../assets/environment/moonlit-shop-pilot/village-scene.png'); background-size: auto 100%; background-position: 24% center; border-radius: 8px; }
:root[data-profile='portrait'] .building-hotspot.inn-building { background-position: 74% center; }
:root[data-profile='short-landscape'] .town-stage { grid-template-columns: minmax(0,1fr) 180px; grid-template-rows: minmax(0,1fr); gap: 6px; }
:root[data-profile='short-landscape'] .town-caption { position: absolute; top: 4px; left: 4px; padding: 2px 6px; pointer-events: none; }
:root[data-profile='short-landscape'] .town-caption .eyebrow { display: none; }
:root[data-profile='short-landscape'] .town-caption h2 { font-size: 12px; }
:root[data-profile='short-landscape'] .town-actions { display: grid; grid-template-columns: minmax(0,1fr); align-content: center; padding: 0; gap: 2px; }
:root[data-profile='short-landscape'] .town-actions button { font-size: 12px; }
:root[data-profile='short-landscape'] .game[data-phase='town'] #scene { grid-template-rows: minmax(0,1fr) 76px; }
:root[data-profile='short-landscape'] .game[data-phase='town'] .travel-party { height: 76px; }
:root[data-profile='short-landscape'] .game[data-phase='town'] .travel-party .portrait { width: 20px; height: 20px; }
:root[data-profile='short-landscape'] .route-map { grid-template-rows: auto minmax(0,1fr) 44px; }
:root[data-profile='short-landscape'] .route-map > h2,:root[data-profile='short-landscape'] .route-map > .journey-copy { display: none; }
:root[data-profile='short-landscape'] .route-map .floors { grid-row: 1; }
:root[data-profile='short-landscape'] .route-map .route-board { grid-row: 2; }
:root[data-profile='short-landscape'] .route-map .route-actions { grid-row: 3; }
/* Fixed 1280x720 stage, scaled to fit every screen (black letterbox around it). */
:root[data-stage='fixed'], :root[data-stage='fixed'] body { background: #000; }
:root[data-stage='fixed'] .game { transform: scale(var(--stage-scale, 1)); transform-origin: 0 0; }
:root[data-stage='fixed'] dialog[open] { inset: auto; left: 50%; top: 50%; right: auto; bottom: auto; margin: 0; translate: none; transform: translate(-50%, -50%) scale(var(--stage-scale, 1)); transform-origin: center; animation: stage-modal-in .2s ease-out; }
@keyframes stage-modal-in { from { opacity: 0; } }

/* A single clockwise transform; descendants (toasts and tooltips included) inherit it.
   Modal dialogs occupy the top layer, so they receive the transform separately. */
:root[data-stage='fixed'][data-rotate='on'] .game { transform: rotate(90deg) scale(var(--stage-scale)); }
:root[data-stage='fixed'][data-rotate='on'] dialog[open] { left: var(--rotated-center-x); top: var(--rotated-center-y); transform: translate(-50%, -50%) rotate(90deg) scale(var(--stage-scale)); }
:root[data-phone='true'] .settings-modal { max-height: 704px; }
:root[data-phone='true'] .settings-modal .modal-body { flex: 1 1 auto; }
.settings-modal .phone-rotation-setting { grid-template-columns: minmax(0,1fr) 0 44px; }
.fullscreen-setting { padding-top: 8px; }
.fullscreen-button { min-height: 44px; width: 100%; }
.naver-browser-note { position: absolute; z-index: 10; top: 54px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 24px); padding: 4px 10px; border: 1px solid #bca16c; border-radius: 8px; background: #18372fee; font-size: 14px; pointer-events: none; }
.naver-browser-note button { pointer-events: auto; min-height: 36px; }

/* Event previews have one action line and one cost/effect line. */
.room-choice .event-risk { display: inline-block; margin-left: 8px; padding: 1px 6px; border: 1px solid #e6a65b; border-radius: 6px; color: #ffd7a0; font-size: 11px; }
.room-choice:disabled { opacity: .45; }
.event-result-card { align-self: center; justify-self: center; width: min(680px, 95%); padding: 24px; border-radius: 10px; }
.event-result-card h3 { margin: 16px 0 6px; font-size: 15px; color: #d6c5a4; }
.event-result-card p { line-height: 1.6; overflow-wrap: anywhere; }
.event-result-card > button { margin-top: 16px; min-width: 140px; }
.event-card { position: relative; gap: 5px; padding: 8px 32px; }
.event-card > .room-art { position: absolute; top: 16px; right: 32px; }
.event-card .room-copy > .journey-copy { font-size: 18px; line-height: 1.7; color: #f2eee3; white-space: pre-line; word-break: keep-all; overflow-wrap: normal; }
.event-result-card .event-story,.result-receipt .event-story { font-size: 16px; line-height: 1.6; color: #f2eee3; white-space: pre-line; word-break: keep-all; overflow-wrap: normal; }
.result-card:has(.event-story) { grid-template-columns: minmax(0,1fr) 540px; }
.result-receipt .event-story { color: #304134; }

.treasure-item > .item-image { width: 40px; height: 40px; object-fit: contain; }

.battle-tool-text { display: none; }
:root:not([data-profile='portrait']):not([data-profile='short-landscape']) .battle-tool-text { display: inline; font-size: 13px; margin-left: 4px; }

:root:not([data-profile='portrait']):not([data-profile='short-landscape']) .combat .battle-record[open] { height: clamp(150px,calc(var(--available-height,100dvh) * .33),260px); }
.combat #battle-log { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; }
.combat .battle-log-entry { margin: 0; padding: 7px 8px; border-left: 2px solid #bca16c; border-bottom: 1px solid #ffffff18; overflow-wrap: anywhere; }
.combat .battle-log-entry > strong { display: block; margin-bottom: 3px; color: #f0dca6; }
.combat .battle-log-entry > div { color: #e3e8df; margin-top: 2px; }
.combat .battle-log-entry[data-kind='damage'] { border-left-color: #e3a79c; }
.combat .battle-log-entry[data-kind='heal'] { border-left-color: #a5d498; }
.combat .battle-log-entry[data-kind='system'] { background: #ffffff06; border-left-color: #a5bdc4; }
.combat .battle-log-new { flex: none; align-self: flex-end; }
.combat .battle-rules { flex: none; min-height: 0; max-height: 50%; overflow-y: auto; border-top: 1px solid #ffffff24; }
.combat .battle-rules > summary { cursor: pointer; padding: 4px 2px; min-height: 32px; font-size: 13px; color: #d8c796; }
.combat .battle-rules-body p { white-space: pre-line; margin: 4px 0 8px; font-size: 13px; line-height: 1.6; color: #d1dace; }

.combat .battle-playback,.combat .battle-inspection { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
:root:not([data-profile='portrait']):not([data-profile='short-landscape']) .game[data-phase='battle'] { grid-template-rows: 52px minmax(0,1fr); }
:root:not([data-profile='portrait']):not([data-profile='short-landscape']) .game[data-phase='battle'] .masthead { align-self: center; }
:root:not([data-profile='portrait']):not([data-profile='short-landscape']) .battle-side { grid-area: 1 / 2 / -1 / 3; }
.room-actions .merchant-choice { text-align: left; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 12px; padding: 12px; }
.merchant-choice > strong,.merchant-price-line { grid-column: 1 / -1; }
.merchant-price-line { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.merchant-price-line > small { color: #bac5b8; font-size: 12px; }
.merchant-price-line > strong { color: #ffe1a3; font-size: 17px; }
.merchant-price-tag { font-size: 13px; }
.merchant-price-tag[data-deal='discount'] { color: #b4e7a3; }
.merchant-price-tag[data-deal='premium'] { color: #ffc09c; }
.merchant-remaining { align-self: end; text-align: right; }
/* Title only: the fixed stage and top-layer dialog retain step 57 transforms. */
.game[data-phase='title'] { padding: 0; border: 0; border-radius: 0; grid-template-rows: minmax(0,1fr); }
.game[data-phase='title'] > .masthead { display: none; }
.game[data-phase='title'] #journey, .game[data-phase='title'] #scene { height: 100%; padding: 0; margin: 0; }
.game[data-phase='title'] #journey { grid-row: 1; }
.title-screen { position: relative; width: 100%; height: 100%; min-height: 0; isolation: isolate; overflow: hidden; color: #fff4df; font-family: 'Malgun Gothic',sans-serif; }
.title-backgrounds { position: absolute; inset: 0; z-index: -2; background: #17232b; }
.title-backgrounds img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.title-backgrounds::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#121b2c88,transparent 46%,#17213118 70%,#101a2b77); }
.title-content { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); text-align: center; width: 450px; padding: 5px 24px 22px; background: linear-gradient(90deg,transparent,#172030bf 8%,#172030bf 92%,transparent); border-radius: 28px; text-shadow: 0 3px 3px #121421,0 0 14px #131421; }
.title-star { color: #ffe1a5; font-size: 22px; margin-bottom: 7px; }
.title-content .game-logo { color: #fff4df; font-size: 72px; letter-spacing: .14em; margin: 0; padding-left: .14em; line-height: 1.15; font-weight: 900; }
.title-content .logo-subtitle { color: #fff4df; font-size: 22px; font-weight: 700; letter-spacing: .08em; margin: 8px 0 0; }
.title-party { position: absolute; inset: 0; pointer-events: none; }
.title-figure { position: absolute; margin: 0; transform: translateX(-50%); isolation: isolate; }
.title-figure::before { content: ''; position: absolute; z-index: -1; bottom: calc(var(--foot-gap) - 7px); left: 50%; transform: translateX(-50%); width: var(--shadow-width); height: 13px; border-radius: 50%; background: #12152488; filter: blur(3px); }
.title-skin, .title-sprite { display: block; width: 100%; height: 100%; }
.title-skin { object-fit: contain; transform-origin: 50% 93.75%; animation: title-breathe 3s ease-in-out infinite; }
.title-sprite { background-repeat: no-repeat; background-position: 0 var(--row-y); animation: title-idle 1s steps(6,end) infinite; }
@keyframes title-idle { to { background-position: var(--end-x) var(--row-y); } }
@keyframes title-breathe { 50% { transform: scaleY(1.008); } }
.title-speech { position: absolute; transform: translateX(-50%); padding: 12px 17px; background: #fff7e7; color: #302c3a; font-size: 16px; font-weight: 800; line-height: 22px; border: 1px solid #d5c9b3; border-radius: 15px; box-shadow: 0 4px 12px #13202d44; white-space: nowrap; }
.title-speech::after { content: ''; position: absolute; left: var(--tail,50%); bottom: -8px; width: 14px; height: 14px; transform: translateX(-50%) rotate(45deg); background: #fff7e7; border-right: 1px solid #d5c9b3; border-bottom: 1px solid #d5c9b3; }
.title-menu { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; padding: 13px 20px; border-radius: 23px; background: #152033b3; box-shadow: 0 8px 28px #111b2f38; margin: 0; }
.title-menu button { font: 700 16px 'Malgun Gothic',sans-serif; min-height: 52px; min-width: 130px; padding: 0 24px; border: 1px solid #ead4ac99; border-radius: 12px; background: #213144; color: #fff4df; box-shadow: 0 3px 0 #0d152766; }
.title-menu button.primary { background: #f6dfaa; color: #302c31; min-width: 180px; border-color: #ffedc9; }
.title-menu button:disabled { opacity: .45; }
.title-screen button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.title-customize { position: absolute; right: 18px; bottom: 16px; padding: 6px 12px; min-height: 44px; font-size: 13px; color: #fff4df; background: #172030bf; border: 1px solid #ead4ac66; border-radius: 10px; }
.game-modal.title-customization { width: 1060px; height: 452px; background: #1b293af5; color: #fff4df; }
.title-customization::backdrop { background: #10152555; backdrop-filter: none; }
.title-option-heading { display: flex; gap: 18px; align-items: center; margin: 2px 0 6px; }
.title-option-heading h3 { font-size: 17px; margin: 0; }
.title-option-heading label { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.title-option-heading input { width: 20px; height: 20px; accent-color: #f6dfaa; }
.title-choices { display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: 6px; }
.title-choice { min-width: 0; min-height: 100px; display: flex; flex-direction: column; align-items: center; padding: 4px; gap: 4px; font-size: 12px; line-height: 17px; background: #213144; color: #fff4df; border: 2px solid #a99a7c66; border-radius: 8px; }
.title-choice[aria-pressed='true'] { border-color: #ffe1a5; background: #394656; }
.title-choice > span:last-child { word-break: keep-all; }
.title-thumbnail { display: block; width: 88px; height: 56px; max-width: 100%; background-size: 1000% 200%; border-radius: 4px; }
.title-save-status { margin: 0; font-size: 13px; min-height: 18px; }
@media (prefers-reduced-motion: reduce) { .title-skin,.title-sprite { animation: none; } }

/* 60: one painted landscape with independent sky and decorative actors. */
.village-life { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; z-index: 1; opacity: 0; }
.village-life-ready .village-life { opacity: 1; }
.village-life-ready > .village-art { visibility: hidden; }
.village-life-pending > .village-art, .village-life-pending .village-effects { visibility: hidden; }
.village-life-ready .village-effects { display: none; }
.village-landscape:has(.village-life) .building-hotspot { z-index: 2; }
:root[data-profile='portrait'] .village-landscape:has(.village-life) { display: block; }
:root[data-profile='portrait'] .village-life-ready > .village-art { display: block; }

/* Settings use readable CSS pixels and independent text rows on every viewport. */
.settings-modal { padding: 14px; }
.settings-modal .settings-body { display: flex; flex-direction: column; gap: 18px; padding: 2px 6px 8px 2px; }
.settings-section { min-width: 0; }
.settings-section h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.5; color: #ffe0a0; }
.settings-modal .volume-row { font-size: 16px; grid-template-columns: 44px 116px minmax(36px,1fr) 4ch; gap: 8px; }
.settings-modal .volume-row label { white-space: normal; word-break: keep-all; line-height: 1.5; }
.settings-modal label.setting-toggle { display: grid; grid-template-columns: minmax(0,1fr) 44px; align-items: center; gap: 12px; padding: 10px 0; }
.setting-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.setting-title { font-size: 16px; line-height: 1.5; }
.settings-modal .setting-hint { display: block; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; word-break: keep-all; font-size: 14px; line-height: 1.65; }
.settings-modal .save-backup { border-top: 1px solid #75856a; padding: 14px 0 0; }
.settings-modal .save-backup p { margin: 6px 0 10px; white-space: pre-line; overflow-wrap: anywhere; word-break: keep-all; font-size: 15px; line-height: 1.65; }
.settings-modal .save-backup .save-help { font-size: 14px; }
.save-backup-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.settings-modal .save-backup button { margin: 0; min-height: 44px; white-space: normal; word-break: keep-all; line-height: 1.5; padding: 8px; }
.settings-modal .save-time { color: #d3ccb0; }
.settings-modal .save-backup-status:empty { display: none; }
.settings-modal .settings-actions { gap: 8px; }
.settings-modal .settings-actions > button { min-height: 44px; font-size: 15px; padding: 8px; }
.settings-modal .settings-reset { margin-top: 0; min-height: 44px; align-self: stretch; }
.settings-about { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.settings-about .fan-note { margin: 0; font-size: 12px; line-height: 1.5; word-break: keep-all; }
.game-version { border: 0; background: transparent; box-shadow: none; color: #c7c3b1; font-size: 12px; line-height: 20px; min-height: 24px; padding: 0 10px; }
.game-version:hover { border: 0; background: #ffffff10; }
@media (max-width: 420px) { .settings-modal .volume-row { grid-template-columns: 44px 104px minmax(30px,1fr) 4ch; gap: 6px; } }

.settings-section { flex: none; }
.skill-numbers { display: block; font-size: 14px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.skill-base { color: #fff2d6; }
.skill-bonus { color: #9be5ac; margin-left: 2px; }
.skill-number-group { display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; overflow-wrap: normal; margin-right: 8px; }
.skill-base.effect-damage, .effect-damage { color: #ff979e; }
.skill-base.effect-heal, .effect-heal { color: #9ce7ad; }
.skill-base.effect-defense, .effect-defense { color: #9acbff; }
.skill-base.effect-attack, .effect-attack { color: #ffe183; }
.skill-bonus.source-attack { color: #ffbd7a; }
.skill-bonus.source-maxMp { color: #d8b7ff; }
.skill-bonus.source-defense { color: #dce3ef; }
.skill-color-guide { font-size: 14px; color: #eee5ff; }
.encyclopedia-numbers .skill-base { font-size: 20px; }
.combat .choices > button { position: relative; padding-right: 74px; }
.combat .choices > button > .battle-numbers { position: absolute; right: 8px; top: 8px; text-align: right; max-width: 68px; }
.combat .choices > button > .battle-numbers .skill-number-group { display: block; margin: 0; }
.combat .choices > button > .battle-numbers .skill-base { font-size: 23px; line-height: 1.25; }
.combat .choices > button:disabled > .battle-numbers { opacity: .65; }
.combat .choices > button:disabled { opacity: 1; color: #abb5ac; }
.gear-slot[data-weapon-tier='1'] .item-icon { box-shadow: 0 0 5px #fff0a1; }
.gear-slot[data-weapon-tier='2'] .item-icon { box-shadow: 0 0 10px #fff0a1; }
.gear-slot[data-weapon-tier='3'] .item-icon { box-shadow: 0 0 16px #fff0a1; }
.gear-slot[data-weapon-tier='4'] .item-icon { box-shadow: 0 0 20px 5px #fff0a1; }
.equipment-set { color: #f7dfa0; font-size: 14px; }
.equipment-preview input[type="number"] { width: 100%; max-width: 120px; font-size: 16px; margin: 8px 0; }
.enhancement-result { padding: 8px; min-height: 48px; color: #ffe395; border: 1px solid #e4c17b; border-radius: 8px; animation: enhancement-flash .45s ease-out; }
.enhancement-cost, .enhancement-chance { font-size: 14px; line-height: 1.6; }
@keyframes enhancement-flash { from { background: #745732; } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .enhancement-result { animation: none; } }
.equipment-preview.enhancement-preview { display: grid; grid-template-columns: minmax(130px,1fr) minmax(180px,2fr) 100px 90px 140px; gap: 6px; max-height: 240px; overflow: auto; }
.enhancement-preview h3 { grid-column: 1 / 3; grid-row: 1; font-size: 16px; white-space: nowrap; }
.enhancement-preview > p { margin: 0; }
.enhancement-preview > p:not([class]) { grid-column: 1 / 3; grid-row: 2; font-size: 13px; }
.enhancement-preview .enhancement-cost { grid-column: 3 / 6; grid-row: 1; font-size: 14px; }
.enhancement-preview .enhancement-chance { grid-column: 1 / 3; grid-row: 3; font-size: 13px; }
.enhancement-preview .primary { grid-column: 3; grid-row: 2; }
.enhancement-preview input[type="number"] { grid-column: 4; grid-row: 2; width: 80px; }
.enhancement-preview > button:not(.primary) { grid-column: 5; grid-row: 2; }
.enhancement-preview > small { grid-column: 3 / 6; grid-row: 3; font-size: 12px; }
.enhancement-preview .enhancement-result { grid-column: 1 / -1; grid-row: 4; margin: 0; min-height: 28px; padding: 4px 8px; font-size: 14px; }
.affinity-picker { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: 16px; }
.affinity-picker select { font-size: 16px; }
.members-modal[data-equipment-native='true'] .members-body { display: block; overflow: auto; min-height: 0; flex: 1 1 auto; }
.members-modal[data-equipment-native='true'] .member-roster { position: sticky; top: 0; z-index: 2; background: #294034; margin-bottom: 8px; }
.members-modal[data-equipment-native='true'] .member-content { overflow: visible; margin-bottom: 8px; }
.members-modal[data-equipment-native='true'] .equipment-preview { max-height: none; overflow: visible; }
.members-modal[data-equipment-portrait='true'] .member-content { grid-template-columns: minmax(0,1fr); }
.members-modal[data-equipment-native='true'] .skill-entry p { font-size: 14px; }
.shop-modal[data-equipment-portrait='true'] .shop-body { display: flex; flex-direction: column; overflow: auto; }
.shop-modal[data-equipment-portrait='true'] .shop-grid { max-height: 40dvh; flex-shrink: 0; }
.shop-modal[data-equipment-native='true'] .shop-detail { max-height: none; overflow: visible; }
@media (max-width: 700px) {
  .equipment-preview.enhancement-preview { grid-template-columns: minmax(0,1fr) 85px 135px; max-height: 270px; }
  .enhancement-preview h3 { grid-column: 1 / -1; grid-row: 1; }
  .enhancement-preview .enhancement-cost { grid-column: 1 / -1; grid-row: 2; }
  .enhancement-preview .enhancement-chance { grid-column: 1 / -1; grid-row: 3; }
  .enhancement-preview > p:not([class]) { grid-column: 1 / -1; grid-row: 4; }
  .enhancement-preview .primary { grid-column: 1; grid-row: 5; }
  .enhancement-preview input[type="number"] { grid-column: 2; grid-row: 5; }
  .enhancement-preview > button:not(.primary) { grid-column: 3; grid-row: 5; }
  .enhancement-preview > small { grid-column: 1 / -1; grid-row: 6; }
  .enhancement-preview .enhancement-result { grid-row: 7; }
}
.skill-number-note { color: #dfd1b9; font-size: 12px; }
.operator-body { display: flex; flex-direction: column; gap: 18px; }
.operator-section { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.operator-section h3 { flex-basis: 100%; margin: 0; font-size: 17px; }
.operator-section label { display: grid; gap: 5px; font-size: 14px; max-width: 100%; }
.operator-section input,.operator-section select,.operator-password { box-sizing: border-box; width: 150px; max-width: 100%; min-height: 40px; background: #263c34; color: #fff0d7; border: 1px solid #b39761; padding: 8px; border-radius: 6px; font: inherit; }
.operator-section select { width: 220px; }
.operator-status,.operator-summary { font-size: 14px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.operator-summary { margin: 0; }

.operator-modal .setting-hint { white-space: normal; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }

/* Approved settings A: sound left, display/save right, no scrolling. */
.settings-modal { --settings-gap: 18px; width: 760px; height: auto; padding: 16px; gap: 12px; }
.settings-modal .modal-heading { flex-basis: 36px; }
.settings-modal .modal-heading h2 { margin: 0; flex: 1; font-size: 18px; white-space: nowrap; }
.settings-modal .modal-heading .close-modal { width: 72px; flex-basis: 72px; height: 32px; min-height: 32px; font-size: 13px; }
.settings-modal .settings-body,:root[data-phone='true'] .settings-modal .settings-body { flex: none; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--settings-gap); overflow: visible; padding: 0; }
.settings-sound,.settings-right,.settings-display,.settings-modal .save-backup { min-width: 0; }
.settings-right { display: flex; flex-direction: column; gap: 10px; }
.settings-modal h3 { display: block; margin: 0 0 6px; border-bottom: 1px solid #70816b77; padding-bottom: 5px; color: #efd49a; font-size: 14px; font-weight: 500; line-height: 20px; }
.settings-modal .volume-row { display: grid; grid-template-columns: 28px 62px minmax(24px,1fr) 4ch; gap: 6px; min-height: 32px; padding: 0; font-size: 14px; }
.settings-modal .volume-row label { min-width: 0; font-size: 14px; line-height: 20px; white-space: nowrap; }
.settings-modal .volume-row .speaker-toggle { box-sizing: border-box; width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; margin: 0; border-width: 1px; border-radius: 5px; }
.settings-modal .speaker-icon { transform: scale(.68); }
.settings-modal .volume-row input[type='range'] { display: block; min-height: 28px; min-width: 0; width: 100%; max-width: 100%; margin: 0; }
.settings-modal .volume-row output { font-size: 13px; }
.settings-modal label.setting-toggle { display: grid; grid-template-columns: minmax(0,1fr) 40px; align-items: center; gap: 10px; min-height: 38px; padding: 4px 0; }
.settings-modal .setting-copy { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.settings-modal .setting-title { font-size: 14px; line-height: 21px; }
.settings-modal .setting-hint { display: block; font-size: 12px; line-height: 18px; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
.settings-modal .setting-switch { appearance: none; -webkit-appearance: none; position: relative; width: 40px; min-width: 40px; height: 22px; min-height: 22px; margin: 0; padding: 0; border: 1px solid #65766f; border-radius: 99px; background: #485b54; cursor: pointer; }
.settings-modal .setting-switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #b7c1b9; }
.settings-modal .setting-switch:checked { background: #ac8a50; border-color: #c4a160; }
.settings-modal .setting-switch:checked::after { transform: translateX(18px); background: #fff0d1; }
.settings-modal .setting-switch:focus-visible { outline: 2px solid #ffe6a4; outline-offset: 3px; }
.settings-modal .save-backup { border: 0; padding: 0; }
.settings-modal .save-backup p { margin: 0 0 7px; font-size: 12px; line-height: 19px; white-space: normal; }
.settings-modal .save-backup-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.settings-modal .save-backup button { flex: 0 1 auto; min-height: 30px; padding: 4px 10px; margin: 0; font-size: 13px; white-space: nowrap; }
.settings-footer { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #70816b77; padding-top: 10px; }
.settings-modal .settings-footer .settings-actions { flex: none; display: flex; flex-wrap: nowrap; gap: 6px; }
.settings-modal .settings-footer .settings-actions > button { flex: none; min-width: 0; min-height: 30px; padding: 4px 10px; font-size: 13px; white-space: nowrap; }
.settings-modal .settings-footer .settings-reset { margin: 0; }
.settings-footer .settings-about { flex: 0 1 auto; display: flex; flex-direction: row; justify-content: end; align-items: baseline; gap: 3px; min-width: 0; }
.settings-modal .settings-footer .fan-note { margin: 0; font-size: 11px; line-height: 18px; word-break: keep-all; }
.settings-modal .game-version { flex: none; font-size: 11px; line-height: 18px; min-height: 18px; padding: 0; }
.settings-modal[data-density='compact'] { padding: 12px; gap: 8px; --settings-gap: 16px; }
.settings-modal[data-density='tight'] { padding: 8px; gap: 6px; --settings-gap: 12px; }
.settings-modal[data-density='tight'] .modal-heading { flex-basis: 28px; }
.settings-modal[data-density='tight'] .modal-heading .close-modal { min-height: 28px; height: 28px; }
.settings-modal[data-density='tight'] h3 { margin-bottom: 3px; padding-bottom: 3px; }
.settings-modal[data-density='tight'] .volume-row { grid-template-columns: 24px 88px minmax(0,1fr) 4ch; min-height: 27px; gap: 4px; font-size: 13px; }
.settings-modal[data-density='tight'] .volume-row label { font-size: 13px; }
.settings-modal[data-density='tight'] .speaker-toggle { min-width: 24px; width: 24px; min-height: 24px; height: 24px; }
.settings-modal[data-density='tight'] label.setting-toggle { padding: 2px 0; min-height: 32px; }
.settings-modal[data-density='tight'] .settings-footer { padding-top: 6px; }
.settings-modal[data-density='tight'] .settings-footer .settings-actions > button { min-height: 26px; font-size: 12px; padding: 3px 6px; }
.settings-modal[data-stack='true'] .settings-body { grid-template-columns: minmax(0,1fr); gap: 10px; }
.settings-modal[data-stack='true'] .settings-footer { flex-wrap: wrap; gap: 5px; }
.settings-modal[data-stack='true'] .settings-about { width: 100%; justify-content: center; }

.settings-modal[data-density='tight'] .volume-row input[type='range'] { min-height: 24px; }

.settings-modal .modal-heading { flex-basis: 44px; padding-bottom: 6px; }
.settings-modal[data-density="tight"] .modal-heading { flex-basis: 36px; padding-bottom: 6px; }

.settings-modal[data-density='tight'] { padding: 6px; gap: 4px; }
.game .blessing-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; }
.game .blessing-placeholder { display: inline-grid; place-items: center; flex: 0 0 24px; height: 24px; }
.game .blessing-choice, .game .active-blessing { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* Step 68: approved art on the single landscape stage. */
.item-icon.has-art { position:relative; display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; min-width:52px; background:transparent; border:0; box-shadow:none; overflow:visible; }
.item-icon .item-art { width:100%; height:100%; object-fit:contain; }
.item-icon.has-art::before,.item-icon.has-art::after { display:none; }
.item-icon[data-affinity] { --affinity:#ff807f; }
.item-icon[data-affinity='radiant'] { --affinity:#71baff; }
.item-icon[data-affinity='sharp'] { --affinity:#ffad60; }
.item-icon[data-affinity='solid'] { --affinity:#bac2c9; }
.item-icon[data-affinity='fresh'] { --affinity:#b7e77b; }
.item-icon[data-affinity] .item-art { filter:drop-shadow(0 0 2px var(--affinity)); }
.affinity-badge { position:absolute;right:-3px;bottom:-2px;display:block;width:22px;height:22px;border-radius:50%;background-color:#172a29;background-repeat:no-repeat;background-position:right bottom;background-size:64px 64px; }
.broken-art { filter:grayscale(1);opacity:.65; }
.party-gear .item-icon.has-art { width:24px;height:24px;min-width:24px; }
.party-gear .affinity-badge { width:10px;height:10px;background-size:29px 29px; }
.item-icon[data-affinity] .item-art { border:1px solid var(--affinity);border-radius:7px;padding:2px; }
.members-modal .members-body { flex:1;grid-template-rows:60px minmax(0,1fr) auto; }
.members-modal .member-content { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.member-content[data-slot='weapon'] .member-skills { grid-column:2;grid-row:1;overflow:auto; }
.member-content[data-slot='weapon'] .skill-entry { margin-bottom:6px; }
.members-modal .gear-slot .item-icon { width:64px;height:64px;min-width:64px; }
.members-modal .equipment-set { grid-column:1/-1;white-space:normal;word-break:keep-all;margin:6px 0;min-height:24px; }
.members-modal .equipment-preview { max-height:none;flex-wrap:wrap; }
.members-modal .equipment-preview p { flex:1;min-width:250px; }
.members-modal .equipment-preview button { min-width:120px;white-space:nowrap;flex-shrink:0; }
.materials-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;overflow:auto; }
.material-tile { display:grid;justify-items:center;gap:5px;padding:10px;border:1px solid #677963;border-radius:8px;font-size:16px; }
.settings-modal .volume-row { min-width:0; grid-template-columns:28px 94px minmax(0,1fr) 4ch; }
.settings-modal .volume-row[data-channel='master'] { font-weight:700;border-bottom:1px solid #84937a77;padding-bottom:7px;margin-bottom:5px; }
.settings-sound[data-master-muted='true'] .volume-row:not([data-channel='master']) :is(.speaker-toggle,input,output) { opacity:.4; }
.enhance-modal { position:fixed; }
.enhance-body { display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;align-items:center; }
.enhance-weapon { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#233b34;border-radius:12px;padding:16px; }
.enhance-weapon .item-icon.has-art { width:210px;height:210px; }
.enhance-level { font-size:28px;color:#ffe4a5; }
.enhance-info { display:flex;flex-direction:column;gap:9px;min-width:0; }
.enhance-info .stat-comparison { display:flex;gap:15px;flex-wrap:wrap;margin:0; }
.enhance-probability { display:flex;height:16px;border-radius:8px;overflow:hidden;background:#61726b; }
.enhance-probability span { min-width:0; }
.enhance-probability [data-outcome='success'] { background:#64c479; }
.enhance-probability [data-outcome='failure'] { background:#9ba8a1; }
.enhance-probability [data-outcome='fall'] { background:#e0a344; }
.enhance-probability [data-outcome='broken'] { background:#ee7c88; }
.enhance-legend { display:flex;gap:12px;flex-wrap:wrap;font-size:16px; }
[data-outcome='success'].enhancement-result,.enhance-legend [data-outcome='success'] { color:#94f3a8; }
[data-outcome='fall'].enhancement-result,.enhance-legend [data-outcome='fall'] { color:#ffd075; }
[data-outcome='broken'].enhancement-result,.enhance-legend [data-outcome='broken'] { color:#ff9ca8; }
.enhancement-cost { display:flex;align-items:center;gap:6px;margin:0;font-size:17px; }
.enhancement-cost .item-icon.has-art { width:32px;height:32px;min-width:32px; }
.enhance-actions { display:flex;gap:12px; }
.enhance-actions button { flex:1;min-height:46px; }
.enhance-actions .primary { flex:2; }
.enhance-bonus,.enhance-toggle-row,.enhance-progress { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.enhance-bonus { margin:0;font-size:16px; }
.enhance-skip-hint { color:#a9b3ad;font-size:13px; }
.enhance-repair-stock { margin:0;font-size:16px; }
.enhance-toggle,.coupon-toggle { display:flex;align-items:center;gap:10px;font-size:16px; }
.enhance-toggle input { width:36px;height:22px; }
.enhance-toggle input { appearance:none;position:relative;min-height:22px;background:#52625a;border:1px solid #a1ac8b;border-radius:99px;margin:0; }
.enhance-toggle input::after { content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;border-radius:50%;background:#e8ead8; }
.enhance-toggle input:checked { background:#a78b4b; }
.enhance-toggle input:checked::after { transform:translateX(14px);background:#ffe9b1; }
.enhance-modal .enhancement-result { min-height:26px;margin:0;font-size:19px; }
.enhance-modal .enhancement-result h3,.enhance-modal .enhancement-result p { margin:4px 0; }
.enhance-no-repair { display:block;color:#a9b3ad; }
.enhance-log { max-height:90px;overflow:auto;margin:0;padding-left:24px;font-size:15px; }
.enhance-fields { display:grid;gap:12px; }
.enhance-setup { height:auto; }
.enhance-fields label { display:flex;gap:12px;align-items:center;justify-content:space-between; }
.enhance-animation { position:absolute;inset:56px 12px 12px;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#152724fa;border:2px solid #a7b586;border-radius:12px; }
.enhance-animation .item-icon.has-art { width:240px;height:240px; }
.enhance-animation h3 { font-size:30px; }
.enhance-animation .enhance-skip { position:absolute;right:16px;bottom:12px;min-width:130px; }
.enhance-animation[data-revealed='true'][data-outcome='success'] { background:radial-gradient(ellipse,#816327,#172b25 75%); }
.enhance-animation[data-revealed='true'][data-outcome='fall'] .item-art { animation:enhance-fall .35s; }
.enhance-animation[data-revealed='true'][data-outcome='broken'] { background:#2f151cf8;border-color:#c9757d; }
.enhance-animation[data-final='true'][data-revealed='true'] { background:radial-gradient(ellipse,#f5d476,#88641e 45%,#182c25 85%);box-shadow:inset 0 0 60px #fff3b4; }
.enhance-animation[data-outcome='failure'] .item-art { filter:grayscale(.75); }
@keyframes enhance-fall { 30% { transform:translateX(-15px) rotate(-8deg); } 65% { transform:translateX(12px) rotate(6deg); } }
.room-card[data-kind='merchant'],.room-card[data-kind='shrine'] { padding:16px 24px;gap:8px;max-width:1060px;overflow:hidden; }
.room-card[data-kind='merchant'] .room-art,.room-card[data-kind='shrine'] .room-art { display:none; }
.room-card[data-kind='merchant'] .eyebrow,.room-card[data-kind='shrine'] .eyebrow { display:none; }
.room-card[data-kind='merchant'] .room-actions { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,172px) 36px;gap:10px; }
.merchant-card { position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:58px 24px 25px 25px;gap:4px 6px;align-items:center;padding:8px 10px;border:1px solid #7d896a;border-radius:10px;background:#22382f;min-width:0; }
.merchant-visual { grid-column:1/-1;justify-self:center; }
.merchant-visual .item-icon.has-art { width:62px;height:62px;min-width:62px; }
.merchant-name { grid-column:1/-1;font-size:17px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center; }
.merchant-card .merchant-price-line { display:block;font-size:20px;text-align:center;font-weight:700;grid-column:1/-1; }
.merchant-card .merchant-remaining,.merchant-card .merchant-choice { grid-row:4; }
.merchant-card .merchant-price-tag { position:absolute;top:4px;right:4px;padding:3px 5px;border-radius:3px;background:#132b21;font-size:16px;font-weight:700; }
.merchant-card[data-deal='discount'] :is(.merchant-price-line,.merchant-price-tag) { color:#9af1ad; }
.merchant-card[data-deal='premium'] :is(.merchant-price-line,.merchant-price-tag) { color:#ff9b9d; }
.merchant-card .merchant-remaining { grid-column:1;font-size:14px;margin:0;color:#dfdfc8; }
.room-actions .merchant-card .merchant-choice { grid-column:2;display:block;min-height:26px;height:26px;padding:0 8px;text-align:center;font-size:14px; }
.merchant-card[data-sold-out='true'] { opacity:.4; }
.help-modal { word-break:keep-all; }
.help-body { display:flex;flex-direction:column;gap:14px;flex:0 1 auto; }
.help-tabs { display:flex;flex-wrap:wrap;gap:6px; }
.help-tabs button { min-height:34px;padding:5px 16px; }
.help-tabs [aria-selected='true'] { border-color:#e0b25e;background:#3a493b;color:#ffe0a1; }
.help-panel { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:18px;align-items:center; }
.help-image { display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#243b34;border:1px solid #596e60;border-radius:9px; }
.help-copy h3 { margin:0 0 10px;color:#ffe0a1; }
.help-copy ul { margin:0;padding-left:20px;font-size:16px;line-height:1.7; }
.help-copy li+li { margin-top:7px; }
.help-navigation { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.help-navigation button { min-height:34px;padding:5px 12px; }
.help-position { font-size:14px;color:#c8d1c0; }
.help-guide { align-self:flex-end;color:#ffe0a1; }
.help-guide[hidden] { display:none; }
.help-prompt-actions { display:flex;align-items:center;justify-content:center;gap:12px;flex:0 1 auto; }
.help-prompt-actions > button { flex:1 1 0;min-width:0;min-height:44px;height:44px; }
.help-modal[data-stack='true'] .help-panel { grid-template-columns:minmax(0,1fr); }
.help-modal[data-density='compact'] .help-body,.help-modal[data-density='tight'] .help-body { gap:8px; }
.help-modal[data-density='compact'] .help-copy ul,.help-modal[data-density='tight'] .help-copy ul { font-size:15px;line-height:1.5; }
.merchant-empty { border:1px dashed #71806466;border-radius:10px; }
.room-actions .room-leave { grid-column:1/-1;justify-self:end;min-height:32px;min-width:150px;font-size:15px;line-height:22px;padding:3px 12px; }
.room-card[data-kind='shrine'] .room-actions { display:flex;flex-direction:column;gap:8px; }
.room-card[data-kind='shrine'] .room-leave { align-self:flex-end; }
.shrine-grid { display:flex;justify-content:center;gap:18px;width:100%; }
.blessing-card { --grade-color:#d6d7cf;display:flex;flex-direction:column;align-items:center;gap:12px;flex:1;min-width:0;max-width:300px;padding:16px;border:2px solid var(--grade-color);border-radius:12px;background:#20372f; }
.blessing-card[data-grade='rare'] { --grade-color:#72b6ff; }
.blessing-card[data-grade='epic'] { --grade-color:#bc91ff; }
.blessing-card[data-grade='legendary'] { --grade-color:#f8d360; }
.blessing-details { display:flex;flex-direction:column;gap:5px;text-align:center;min-width:0; }
.blessing-grade { margin:0;color:var(--grade-color);font-size:14px; }
.blessing-name { margin:0;font-size:20px; }
.blessing-art { width:32px;height:32px;object-fit:contain; }
.blessing-icon-frame { position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px; }
.rarity-frame { position:absolute;inset:0;width:100%;height:100%;object-fit:contain; }
.blessing-card .blessing-icon-frame { width:106px;height:106px; }
.blessing-card .blessing-icon-frame .blessing-art { width:74px;height:74px; }
.blessing-card .blessing-art,.blessing-card .blessing-icon-frame { background:transparent;box-shadow:none; }
.blessing-card .blessing-effect { min-height:50px;font-size:18px;line-height:25px;text-align:center;margin:0; }
.blessing-payments { display:grid;gap:8px;width:100%;margin-top:auto; }
.room-actions .blessing-payments button { width:100%;min-height:36px;min-width:0;padding:4px;text-align:center;font-size:17px; }
.shrine-result-card { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:900px;max-width:100%;height:100%;margin:auto; }
.shrine-result-card h2 { margin:0;font-size:28px; }
.shrine-result-card .blessing-card { flex:none;flex-direction:row;width:520px;max-width:100%; }
.shrine-result-card .blessing-details { text-align:left;flex:1; }
.shrine-result-card .blessing-icon-frame { flex:none; }
.shrine-result-card .blessing-effect { min-height:0;text-align:left; }
.shrine-result-card h3 { margin:0; }
.shrine-members { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%; }
.shrine-member { display:flex;flex-direction:column;align-items:center;gap:5px;background:#253d35;border-radius:8px;padding:10px;font-size:18px; }
.shrine-member progress { width:100%;height:12px; }
.shrine-member[data-downed='true'] { opacity:.4; }
.hp-paid { color:#ff9aa3; }
.shrine-payment { font-size:24px;color:#ffe1a0; }
.shrine-result-card > button { min-width:180px;min-height:42px; }
.ending-card { display:flex;flex-direction:column;gap:6px;overflow:auto; }
.ending-card h2 { margin:0;font-size:28px; }
.ending-card > .journey-copy { margin:0;font-size:15px; }
.ending-homecoming { width:100%;min-height:0;flex:1;object-fit:contain;border-radius:12px; }
.ending-people { flex:none;font-size:16px; }
.ending-people[open] { max-height:190px;overflow:auto; }
.ending-people .ending-portraits { width:100%;height:160px; }
.ending-card > button { flex:none;min-height:38px; }
@media (prefers-reduced-motion:reduce) { .enhance-animation .item-art { animation:none!important; } }

/* Approved member stats A: full-width vitals, three equal combat columns. */
.members-modal .member-profile { grid-template-columns:52px minmax(0,1fr); gap:4px 8px; }
.members-modal .member-profile .portrait-large { width:52px; height:52px; }
.members-modal .member-profile h3 { font-size:22px; line-height:26px; }
.members-modal .member-growth { margin:4px 0; gap:4px 8px; }
.members-modal .member-xp { grid-template-rows:16px 7px; font-size:11px; line-height:16px; gap:3px 8px; }
.members-modal .member-xp .xp-track { height:7px; }
.members-modal .member-candy { min-height:44px; height:auto; padding:0 4px; gap:4px; }
.members-modal .member-candy .item-image { width:24px; height:24px; }
.members-modal .member-candy button { min-height:44px; height:44px; padding:2px 6px; font-size:11px; }
.members-modal .member-candy-reason { font-size:11px; line-height:14px; }
.members-modal .profile-stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; margin:2px 0; justify-content:stretch; }
.members-modal .profile-stats > div { grid-column:span 2; min-width:0; padding:7px 9px; text-align:left; background:#2c4638; border:1px solid #67785b; border-radius:7px; }
.members-modal .profile-stats dt { font-size:11px; line-height:14px; }
.members-modal .profile-stats dd { margin:3px 0 0; font-size:20px; line-height:23px; font-variant-numeric:tabular-nums; }
.members-modal .profile-stats > [data-stat='maxHp'],.members-modal .profile-stats > [data-stat='maxMp'] { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:3px 8px; padding:3px 9px; }
.members-modal .profile-stats > [data-stat='maxHp'] dd,.members-modal .profile-stats > [data-stat='maxMp'] dd { margin:0; font-size:17px; line-height:20px; }
.members-modal .profile-stat-bar { grid-column:1 / -1; display:block; appearance:none; width:100%; height:6px; margin:0; padding:0; border:0; border-radius:6px; overflow:hidden; background:#405348; color:#a9ca8d; }
.members-modal .profile-stat-bar::-webkit-progress-bar { background:#405348; border-radius:6px; }
.members-modal .profile-stat-bar::-webkit-progress-value { background:#a9ca8d; border-radius:6px; }
.members-modal .profile-stat-bar::-moz-progress-bar { background:#a9ca8d; border-radius:6px; }
.members-modal [data-stat='maxMp'] .profile-stat-bar { color:#8ecada; }
.members-modal [data-stat='maxMp'] .profile-stat-bar::-webkit-progress-value { background:#8ecada; }
.members-modal [data-stat='maxMp'] .profile-stat-bar::-moz-progress-bar { background:#8ecada; }
.members-modal .profile-stats [data-stat='attack'] dd { color:#ffe0a0; }
.members-modal .profile-stats [data-stat='defense'] dd { color:#a8dda7; }
.members-modal .gear-slot { min-height:96px; padding:6px 3px; gap:3px; }
.members-modal .gear-slot .item-icon { width:48px; height:48px; }
.members-modal .gear-slot b { font-size:12px; }
.members-modal .gear-slot small { font-size:11px; }
.members-modal .equipment-set { margin:2px 0; font-size:11px; line-height:15px; }

.broken-badge { display:inline-block;padding:1px 4px;border:1px solid #d37b77;border-radius:4px;background:#743d39;color:#ffd9cc;font-size:11px;line-height:16px;white-space:nowrap; }
.gear-slot { position:relative; }
.gear-slot .broken-badge { position:absolute;top:4px;right:4px; }
.travel-party .member[data-weapon-broken='true'] { position:relative; }
.travel-party .broken-badge { position:absolute;top:3px;right:3px;font-size:10px;line-height:14px; }
.enhance-broken-return { margin:0;color:#f4c2b7; }
.enhance-repair-reason { margin:6px 0;color:#e0c4b1; }
.broken-departure p { line-height:1.6; }
.cloud-settings { display:grid;gap:6px;border-top:1px solid var(--line);margin-top:10px;padding-top:10px; }
.cloud-settings p { margin:0;line-height:1.45;overflow-wrap:anywhere; }
.cloud-status { font-size:.8rem; }
.cloud-message { color:var(--muted);font-size:.78rem; }
.cloud-actions { display:flex;flex-wrap:wrap;gap:6px; }
.cloud-actions button { flex:1 1 120px;min-height:36px; }
.cloud-privacy,.cloud-delete-link { font-size:.75rem; }
.cloud-privacy { color:#e6cf9c; }
.cloud-delete-link { justify-self:start; }
.cloud-choice { padding:10px;border:1px solid var(--line);border-radius:8px;margin:8px 0; }
.cloud-choice p { line-height:1.5;overflow-wrap:anywhere; }

/* Region preview uses distinct short blocks instead of a joined reward sentence. */
.region-detail .region-introduction,.region-detail .region-first-rewards { min-width:0; margin:10px 0; }
.region-detail .region-feature,.region-detail .region-first-rewards h3 { margin:0 0 6px;font-size:14px;line-height:1.5; }
.region-detail .region-description,.region-detail .region-reward-hint,.region-detail .region-first-rewards li { margin:0;line-height:1.65;word-break:keep-all;overflow-wrap:break-word; }
.region-detail .region-first-rewards { padding-top:10px;border-top:1px solid #bdad83; }
.region-detail .region-reward-hint { font-size:12px;margin-bottom:6px; }
.region-detail .region-first-rewards ul { margin:0;padding-left:18px; }
:root[data-profile='portrait'] .region-detail .region-introduction,:root[data-profile='portrait'] .region-detail .region-first-rewards { grid-column:1 / -1; }