/* VEIL interface system. Artwork/actors/enhancement animation remain in styles.css.
   Generated plates have empty centres: every label below is live, wrapping text.
   Shared tokens and component materials are owned by design-system.css.
   This file retains screen-specific layouts and item/scene presentation. */

.game { min-height: 0; }
[data-ui-screen] { color: var(--ui-ink); font-size: var(--ui-body); }
[data-ui-screen] [hidden] { display: none !important; }
[data-ui-screen] :is(button, select) { touch-action: manipulation; }
[data-ui-screen] :is(button, select, summary):focus-visible {
  outline: 2px solid #b9f4fa;
  outline-offset: 3px;
}
[data-ui-screen] :is(button, select, summary) {
  transition: border-color 160ms ease, background-color 160ms ease, filter 160ms ease;
}
[data-ui-screen] button:disabled { cursor: not-allowed; }
[data-ui-screen] :is(h1, h2, h3, strong, small, p) { overflow-wrap: anywhere; }
[data-ui-screen] :is(h1, h2, h3) { text-wrap: pretty; }
[data-ui-screen] .eyebrow {
  margin: 0 0 5px;
  color: var(--ui-cyan);
  font-size: var(--ui-meta);
  line-height: 1.4;
  letter-spacing: .07em;
}
[data-ui-screen] .icon-button {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border: 1px solid #48616b;
  background: #071014;
  color: var(--ui-ink);
  font-size: 23px;
}
[data-ui-screen] .panel-header-actions { gap: 6px; flex: 0 0 auto; }
[data-ui-screen] :is(.primary-button, .forge-upgrade-button) {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 50px;
  padding: 12px var(--ui-action-inset);
  border: 0 solid transparent;
  border-image: var(--ui-action-art) 30% 14% fill / 8px 26px;
  border-radius: 0;
  background: #0b252d;
  color: #dcf5f4;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .03em;
  white-space: normal;
  text-transform: none;
  text-align: center;
  overflow-wrap: anywhere;
}
[data-ui-screen] :is(.primary-button, .forge-upgrade-button):hover:not(:disabled) { filter: brightness(1.2); }
[data-ui-screen] :is(.primary-button, .forge-upgrade-button):disabled { opacity: .6; filter: saturate(.3); }
[data-ui-screen] :is(.secondary-button, .text-button, .danger-button, .equip-button, .details-button, .reroll-button, .item-details-lock-button, .contract-action, .archive-claim-button, .chronicle-read-button, .chronicle-audio-button) {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 2px;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .02em;
  text-transform: none;
  white-space: normal;
  text-overflow: clip;
}
[data-ui-screen] .secondary-button {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 12px 24px;
  border: 0 solid transparent;
  border-image: var(--ui-panel-art) 10% fill / 8px 16px;
  border-radius: 0;
  background: #0b1319;
  box-shadow: none;
  color: #dce6e5;
  font-weight: 500;
  text-align: center;
  overflow-wrap: anywhere;
}
[data-ui-screen] .secondary-button:hover:not(:disabled) { filter: brightness(1.25); }
[data-ui-screen] .secondary-button:disabled { opacity: .65; filter: saturate(.35); }
[data-ui-screen] :is(.primary-button, .secondary-button, .forge-upgrade-button):active:not(:disabled) { filter: brightness(.9); }
[data-ui-screen] .danger-button { border-color: #b9766d; background: #482826; color: #ffe7df; }
[data-ui-screen] .text-button { color: var(--ui-cyan); }

/* Screen headers stay readable and keep their close control outside the title. */
[data-ui-screen] :is(.rift-header, .character-header, .tavern-header, .archive-header, .chronicle-header, .inventory-header, .forge-header, .story-header, .cutscene-header) {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(16px, env(safe-area-inset-top)) 16px 14px;
  border-bottom: 1px solid #35434a;
  background: #071015f2;
  box-shadow: 0 7px 20px #0005;
}
[data-ui-screen] :is(.rift-header, .character-header, .tavern-header, .archive-header, .chronicle-header, .inventory-header, .forge-header, .story-header, .cutscene-header) > div:first-child { min-width: 0; }
[data-ui-screen] :is(.rift-header h1, .character-header h1, .tavern-header h1, .archive-header h1, .chronicle-header h1, .inventory-header h2, .forge-heading h2, .story-header h1, .cutscene-header h1) {
  max-width: none;
  margin: 0;
  overflow: visible;
  color: var(--ui-ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.015em;
  white-space: normal;
  text-overflow: clip;
  text-transform: none;
}
[data-ui-screen] :is(.continent-shell, .rift-shell, .character-shell, .tavern-shell, .archive-shell, .chronicle-shell) {
  padding-inline: 16px;
  scrollbar-width: thin;
  scrollbar-color: #53717a #070d11;
  scroll-padding-top: 100px;
}
[data-ui-screen] :is(.rift-header, .character-header, .tavern-header, .archive-header, .chronicle-header) { margin-inline: -16px; margin-bottom: 16px; }
[data-ui-screen] :is(.inventory-scroll, .forge-scroll) { padding: 16px 16px max(24px, env(safe-area-inset-bottom)); }

/* City: a visible place first, then a compact two-column directory. */
[data-ui-screen="city"] .city-shell {
  display: grid;
  grid-template-rows: auto minmax(110px, 1fr) auto;
  overflow-x: hidden;
  overflow-y: auto;
}
[data-ui-screen="city"] .city-shell::after { pointer-events: none; }
[data-ui-screen="city"] .city-header {
  position: relative;
  inset: auto;
  padding: 20px 16px 12px;
  align-items: start;
  gap: 10px;
  background: linear-gradient(#040a10e6, transparent);
}
[data-ui-screen="city"] .city-header > div:first-child { min-width: 0; }
[data-ui-screen="city"] .city-header h1 {
  margin-top: 3px;
  font-size: 28px;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-transform: none;
}
[data-ui-screen="city"] .city-header-actions { gap: 8px; flex: 0 0 auto; align-items: start; }
[data-ui-screen="city"] .city-resources { padding: 8px; border-color: #59717a; background: #071116dd; }
[data-ui-screen="city"] .city-resources span { color: var(--ui-gold); font-size: 16px; }
[data-ui-screen="city"] .city-resources small { margin-top: 4px; color: #c2c9c9; font-size: 11px; }
[data-ui-screen="city"] .city-atmosphere { position: relative; inset: auto; min-height: 110px; }
[data-ui-screen="city"] .city-navigation {
  position: relative;
  inset: auto;
  display: grid;
  gap: 8px;
  padding: 20px 14px max(18px, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, #050c12ed 15%, #050c12);
}
[data-ui-screen="city"] .city-intro { margin: 0 2px 4px; color: #cfdbdf; font-size: 13px; line-height: 1.4; text-align: left; }
[data-ui-screen="city"] :is(.city-primary-actions, .city-secondary-actions) { display: contents; }
[data-ui-screen="city"] .city-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-ui-screen="city"] .city-intro { grid-column: 1 / -1; }
[data-ui-screen="city"] .city-location {
  grid-column: auto;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  min-height: 70px;
  padding: 10px 9px;
  overflow: visible;
  border: 1px solid #455860;
  border-radius: 2px;
  background: linear-gradient(120deg, #19252cc9, #071116e8);
  box-shadow: inset 0 1px #a9dfe912;
}
[data-ui-screen="city"] :is(.city-location-world, .city-location-primary) { border-color: #79816b; }
[data-ui-screen="city"] .city-location-story { border-color: #9079a6; }
[data-ui-screen="city"] .city-location-guild { border-color: #a48b62; }
[data-ui-screen="city"] .city-location-icon { width: 34px; height: 34px; }
[data-ui-screen="city"] .city-location strong { font-size: 13px; line-height: 1.2; letter-spacing: 0; white-space: normal; overflow: visible; text-transform: none; }
[data-ui-screen="city"] .city-location small { margin-top: 4px; color: #bbc9cd; font-size: 11px; line-height: 1.25; white-space: normal; overflow: visible; text-overflow: clip; }
[data-ui-screen="city"] .city-location-badge { top: -5px; right: -5px; width: 18px; height: 18px; font-size: 11px; background: #11262e; }

/* Quiet reusable panel plate; fixed corners never stretch with paragraphs. */
[data-ui-screen] :is(.continent-city-brief, .region-brief, .chronicle-world-event, .chronicle-entry, .contract-card, .archive-entry, .archetype-card, .forge-risk-table) {
  border: 16px solid transparent;
  border-image: var(--ui-panel-art) 10% fill / 16px;
  padding: 4px;
  box-shadow: 0 8px 22px #0004;
}
[data-ui-screen] :is(.tavern-summary, .archive-summary, .chronicle-summary) { gap: 8px; margin: 0 0 16px; }
[data-ui-screen] :is(.tavern-summary, .archive-summary, .chronicle-summary) > span {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 66px;
  padding: 10px 6px;
  border-color: var(--ui-line);
  background: #071016e8;
  color: #b2bfc2;
  font-size: 11px;
  letter-spacing: .02em;
  line-height: 1.35;
  text-transform: none;
}
[data-ui-screen] :is(.tavern-summary, .archive-summary, .chronicle-summary) strong { font-size: 19px; color: #dfedeb; line-height: 1.2; }
[data-ui-screen] :is(.rift-intro, .continent-intro, .tavern-note) { font-family: inherit; color: #b9c7cc; font-size: 13px; line-height: 1.6; text-align: left; }

/* Inventory and inspection: rarity remains a separate semantic colour layer. */
[data-ui-screen] .item-rarity-common { --item-rarity: var(--rarity-common); }
[data-ui-screen] .item-rarity-uncommon { --item-rarity: var(--rarity-uncommon); }
[data-ui-screen] .item-rarity-rare { --item-rarity: var(--rarity-rare); }
[data-ui-screen] .item-rarity-epic { --item-rarity: var(--rarity-epic); }
[data-ui-screen] .item-rarity-legendary { --item-rarity: var(--rarity-legendary); }
[data-ui-screen="inventory"] .inventory-modal { max-height: none; width: 100%; height: 100%; border: 0; border-radius: 0; padding: 0; }
[data-ui-screen="inventory"] .inventory-summary { grid-template-columns: 1fr; gap: 10px; padding: 12px; margin-bottom: 20px; border-color: #43505b; background: #091116ed; }
[data-ui-screen="inventory"] .inventory-wallet { grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; padding: 0 4px 8px; border: 0; background: none; }
[data-ui-screen="inventory"] .inventory-wallet > * { grid-row: auto; grid-column: auto; }
[data-ui-screen="inventory"] .inventory-wallet strong { font-size: 24px; }
[data-ui-screen="inventory"] .inventory-wallet small { font-size: 12px; color: #c0bccd; white-space: normal; text-align: right; }
[data-ui-screen="inventory"] .equipment-bonuses { gap: 8px; }
[data-ui-screen="inventory"] .equipment-bonuses span { gap: 6px; padding: 8px 4px; font-size: 11px; color: #bdcace; text-transform: none; }
[data-ui-screen="inventory"] .equipment-bonuses strong { font-size: 16px; }
[data-ui-screen] :is(.inventory-section-heading, .forge-section-heading) { align-items: start; gap: 12px; margin-bottom: 12px; }
[data-ui-screen] :is(.inventory-section-heading h3, .forge-section-heading h3) { font-size: 20px; line-height: 1.2; text-transform: none; letter-spacing: 0; }
[data-ui-screen] :is(.inventory-section-heading > small, .forge-section-heading > small) { max-width: 42%; font-size: 11px; line-height: 1.45; color: #b2c0c3; text-transform: none; }
[data-ui-screen="inventory"] .inventory-equipped { grid-template-columns: 1fr; gap: 10px; }
[data-ui-screen="inventory"] .loadout-slot {
  grid-template-columns: 68px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: center;
  justify-items: start;
  align-items: center;
  gap: 4px 12px;
  min-height: 105px;
  padding: 12px;
}
[data-ui-screen="inventory"] .loadout-slot-label { grid-column: 2; grid-row: 1; text-align: left; color: #bec8cc; letter-spacing: .06em; }
[data-ui-screen="inventory"] :is(.loadout-slot-visual, .loadout-empty-glyph) { grid-column: 1; grid-row: 1 / 4; width: 64px; height: 64px; }
[data-ui-screen="inventory"] .loadout-slot-visual > .item-art { width: 56px; height: 56px; }
[data-ui-screen="inventory"] .loadout-slot strong { grid-column: 2; grid-row: 2; font-size: 15px; line-height: 1.3; text-align: left; white-space: normal; overflow: visible; }
[data-ui-screen="inventory"] .loadout-slot small { grid-column: 2; grid-row: 3; font-size: 12px; color: #cfcbc0; line-height: 1.3; text-align: left; white-space: normal; overflow: visible; }
[data-ui-screen="inventory"] .inventory-loadout { margin-bottom: 24px; }
[data-ui-screen="inventory"] .inventory-filter { min-height: 44px; padding: 8px 4px; font-size: 12px; color: #b7c7cc; letter-spacing: 0; white-space: normal; text-transform: none; }
[data-ui-screen="inventory"] .inventory-filter.active { color: #edffff; }
[data-ui-screen="inventory"] .inventory-utility-row { grid-template-columns: 1fr; gap: 8px; }
[data-ui-screen="inventory"] .inventory-sort-control { min-height: 44px; padding: 6px 10px; gap: 12px; }
[data-ui-screen="inventory"] .inventory-sort-control > span { color: #b7c2c6; font-size: 12px; text-transform: none; }
[data-ui-screen="inventory"] .inventory-sort-control select { min-height: 36px; font-size: 13px; text-transform: none; padding-inline: 8px; }
[data-ui-screen="inventory"] .quick-dismantle-toggle { min-height: 54px; padding: 8px; gap: 10px; }
[data-ui-screen="inventory"] .quick-dismantle-toggle strong { font-size: 13px; color: #d7e6e8; white-space: normal; text-transform: none; }
[data-ui-screen="inventory"] .quick-dismantle-toggle small { font-size: 11px; color: #adbdc1; white-space: normal; }
[data-ui-screen="inventory"] .inventory-insights { gap: 8px; margin-block: 12px; }
[data-ui-screen="inventory"] .inventory-insights > span { grid-template-columns: 1fr; gap: 5px; padding: 10px 6px; text-align: center; }
[data-ui-screen="inventory"] .inventory-insights b { color: #d0dedf; font-size: 19px; }
[data-ui-screen="inventory"] .inventory-insights small { color: #b2c0c3; font-size: 11px; line-height: 1.3; overflow: visible; white-space: normal; text-transform: none; }
[data-ui-screen="inventory"] .inventory-list { grid-template-columns: 1fr; gap: 12px; }
[data-ui-screen="inventory"] .inventory-item { padding: 14px; gap: 10px; }
[data-ui-screen="inventory"] .inventory-card-top { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
[data-ui-screen="inventory"] .inventory-card-visual { width: 68px; height: 68px; }
[data-ui-screen="inventory"] .inventory-card-visual > .item-art { width: 60px; height: 60px; }
[data-ui-screen="inventory"] .inventory-item-copy { gap: 7px; }
[data-ui-screen="inventory"] .inventory-item-heading { grid-template-columns: minmax(0, 1fr) 36px; }
[data-ui-screen="inventory"] .inventory-item-heading strong { display: block; font-size: 16px; line-height: 1.25; overflow: visible; -webkit-line-clamp: unset; }
[data-ui-screen="inventory"] .favorite-button { width: 36px; height: 44px; font-size: 20px; }
[data-ui-screen="inventory"] .inventory-item-copy .item-stat-line { display: block; min-height: 0; overflow: visible; font-size: 12px; line-height: 1.45; -webkit-line-clamp: unset; }
[data-ui-screen="inventory"] .inventory-item-metrics { flex-wrap: wrap; gap: 6px; }
[data-ui-screen="inventory"] :is(.item-power, .inventory-rarity-badge) { padding: 4px 6px; font-size: 11px !important; line-height: 1.2; white-space: normal; }
[data-ui-screen="inventory"] .inventory-item-meta { color: #c4bcac; font-size: 11px; white-space: normal; text-transform: none; }
[data-ui-screen="inventory"] .inventory-item-comparison { gap: 8px; padding: 8px; color: #b9c5ca; }
[data-ui-screen="inventory"] .inventory-item-comparison span { display: block; font-size: 12px; line-height: 1.45; overflow: visible; -webkit-line-clamp: unset; }
[data-ui-screen="inventory"] .item-actions { gap: 8px; grid-template-columns: 1fr 1fr auto; }
[data-ui-screen="inventory"] .item-actions button { min-height: 44px; font-size: 13px; }
[data-ui-screen="inventory"] .dismantle-button { width: auto; min-width: 64px; padding: 8px 6px; gap: 5px; }
[data-ui-screen="inventory"] .dismantle-button img { width: 20px; height: 20px; }
[data-ui-screen="inventory"] .dismantle-button span { font-size: 12px; }
[data-ui-screen="inventory"] .inventory-empty { padding: 20px !important; color: #bccbce !important; font-size: 13px !important; line-height: 1.5; }

[data-ui-screen="inspection"] { padding: 12px; }
[data-ui-screen="inspection"] .item-details-modal { width: 100%; max-height: calc(100% - 8px); padding: 16px; border-radius: 4px; scrollbar-width: thin; }
[data-ui-screen="inspection"] .item-details-header { align-items: start; gap: 10px; margin: -16px -16px 16px; padding: 16px; }
[data-ui-screen="inspection"] .item-details-header h2 { font-size: 23px; line-height: 1.2; text-transform: none; letter-spacing: 0; }
[data-ui-screen="inspection"] .item-details-header .eyebrow { max-width: 100%; padding: 5px 7px; font-size: 11px; line-height: 1.35; }
[data-ui-screen="inspection"] .item-details-header :is(h2, .eyebrow) { overflow: visible; white-space: normal; text-overflow: clip; }
[data-ui-screen="inspection"] .item-details-header .eyebrow { display: block; letter-spacing: .035em; }
[data-ui-screen="inspection"] .item-details-header .eyebrow::before { margin-right: 6px; }
[data-ui-screen="inspection"] .item-details-hero { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 14px; }
[data-ui-screen="inspection"] .item-details-hero-copy strong { font-size: 24px; }
[data-ui-screen="inspection"] .item-details-hero-copy :is(span, small) { font-size: 12px; line-height: 1.4; letter-spacing: 0; text-transform: none; }
[data-ui-screen="inspection"] .item-details-enhancement { margin-block: 14px; padding: 12px; }
[data-ui-screen="inspection"] .item-details-enhancement > div:first-child { flex-wrap: wrap; gap: 6px; }
[data-ui-screen="inspection"] .item-details-enhancement :is(span, small, strong) { font-size: 11px; line-height: 1.4; letter-spacing: 0; text-transform: none; }
[data-ui-screen="inspection"] .item-details-comparison { padding: 10px; font-size: 13px !important; line-height: 1.5; }
[data-ui-screen="inspection"] .item-details-actions { gap: 10px; margin-block: 14px; }
[data-ui-screen="inspection"] .item-details-actions button { min-height: 44px; font-size: 12px; }
[data-ui-screen="inspection"] .item-details-section { margin-top: 20px; }
[data-ui-screen="inspection"] .item-details-section h3 { font-size: 16px; color: #e4e5da; text-transform: none; letter-spacing: .02em; }
[data-ui-screen="inspection"] .item-details-list { gap: 8px; }
[data-ui-screen="inspection"] .item-details-list span { min-height: 36px; padding: 8px 10px; font-size: 13px; line-height: 1.4; }
[data-ui-screen="inspection"] .item-provenance { margin-top: 20px; padding: 12px; font-size: 12px; }
[data-ui-screen="inspection"] .item-provenance div { grid-template-columns: 70px minmax(0, 1fr); gap: 12px; }
[data-ui-screen="inspection"] .item-details-note { font-size: 12px !important; color: #bec5c7 !important; line-height: 1.5; }

/* Forge: work first, references second; DOM and keyboard order match the layout. */
[data-ui-screen="forge"] .forge-heading { gap: 8px; }
[data-ui-screen="forge"] .forge-heading > img { width: 32px; height: 32px; }
[data-ui-screen="forge"] .forge-heading h2 { font-size: 23px; }
[data-ui-screen="forge"] .forge-scroll { display: flex; flex-direction: column; }
[data-ui-screen="forge"] .forge-scroll > * { flex-shrink: 0; margin-bottom: 20px; }
[data-ui-screen="forge"] .forge-summary { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
[data-ui-screen="forge"] .forge-summary .inventory-wallet { grid-template-columns: auto auto minmax(0, 1fr); padding: 8px; gap: 10px; }
[data-ui-screen="forge"] .forge-summary .inventory-wallet > * { grid-column: auto; grid-row: auto; }
[data-ui-screen="forge"] .inventory-wallet strong { font-size: 24px; }
[data-ui-screen="forge"] .inventory-wallet small { font-size: 12px; text-align: right; overflow: visible; white-space: normal; }
[data-ui-screen="forge"] .forge-note { padding: 10px !important; font-size: 13px !important; line-height: 1.55 !important; color: #d3c6b1 !important; }
[data-ui-screen="forge"] .forge-protection-options { grid-template-columns: 1fr; gap: 8px; }
[data-ui-screen="forge"] .forge-protection-option { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; min-height: 58px; padding: 8px 12px; }
[data-ui-screen="forge"] .forge-protection-option strong { font-size: 15px; text-transform: none; white-space: normal; }
[data-ui-screen="forge"] .forge-protection-option small { font-size: 12px; line-height: 1.4; color: #bdc7cc; white-space: normal; }
[data-ui-screen="forge"] .forge-protection-option:disabled { opacity: .7; }
[data-ui-screen="forge"] .forge-protection-description { margin-block: 12px; font-size: 12px; color: #e0c7ac; line-height: 1.5; }
[data-ui-screen="forge"] .forge-protection-sources { grid-template-columns: 1fr; gap: 8px; }
[data-ui-screen="forge"] .forge-protection-sources > span { padding: 8px; gap: 4px 10px; }
[data-ui-screen="forge"] .forge-protection-sources b { font-size: 12px; }
[data-ui-screen="forge"] .forge-protection-sources small { font-size: 11px; line-height: 1.5; color: #b2c0c7; }
[data-ui-screen="forge"] .forge-item-list { gap: 16px; }
[data-ui-screen="forge"] .forge-item { grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding: 14px; }
[data-ui-screen="forge"] .forge-item-visual { width: 72px; height: 72px; }
[data-ui-screen="forge"] .forge-item-visual > .item-art { width: 64px; height: 64px; }
[data-ui-screen="forge"] .forge-item-copy strong { font-size: 16px; line-height: 1.25; white-space: normal; overflow: visible; }
[data-ui-screen="forge"] .forge-item-copy small { font-size: 12px; color: #bcc7cd; line-height: 1.45; white-space: normal; }
[data-ui-screen="forge"] .forge-item-copy { gap: 7px; }
[data-ui-screen="forge"] .forge-risk { grid-column: 1 / -1; padding: 12px 0 0; }
[data-ui-screen="forge"] :is(.forge-risk-title, .forge-risk-note) { font-size: 11px; line-height: 1.5; color: #c4ced1; letter-spacing: .01em; text-transform: none; }
[data-ui-screen="forge"] .forge-risk-grid { gap: 8px; }
[data-ui-screen="forge"] .forge-chance { display: grid; justify-content: center; justify-items: center; gap: 6px; padding: 10px 4px; }
[data-ui-screen="forge"] .forge-chance strong { font-size: 20px; }
[data-ui-screen="forge"] .forge-chance small { font-size: 11px; color: #c4ced1; white-space: normal; text-align: center; }
[data-ui-screen="forge"] .forge-item .forge-upgrade-button {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 56px;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px var(--ui-action-inset);
  align-items: center;
  justify-items: stretch;
  text-align: left;
}
[data-ui-screen="forge"] .forge-upgrade-button > img { width: 26px; height: 26px; object-fit: contain; opacity: 1; }
[data-ui-screen="forge"] .forge-upgrade-copy { display: block; min-width: 0; }
[data-ui-screen="forge"] .forge-upgrade-button strong { font: inherit; font-size: 13px; line-height: 1.4; letter-spacing: 0; text-transform: none; }
[data-ui-screen="forge"] .forge-upgrade-button .forge-upgrade-cost {
  justify-self: end;
  padding: 5px 7px;
  border: 1px solid #98c9cc55;
  border-radius: 3px;
  background: #030e14b3;
  color: #f0d7a0;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  white-space: nowrap;
}
[data-ui-screen="forge"] .forge-milestone { gap: 6px; padding: 10px 4px; }
[data-ui-screen="forge"] .forge-milestone strong { font-size: 18px; }
[data-ui-screen="forge"] .forge-milestone small { font-size: 11px; color: #b9c8cd; white-space: normal; text-transform: none; }
[data-ui-screen="forge"] .forge-risk-table > summary { cursor: pointer; min-height: 52px; margin-bottom: 0; }
[data-ui-screen="forge"] .forge-risk-table[open] > summary { margin-bottom: 12px; }
[data-ui-screen="forge"] .forge-risk-table[open] > summary > small::after { content: " −"; }
[data-ui-screen="forge"] .forge-risk-table:not([open]) > summary > small::after { content: " +"; }
[data-ui-screen="forge"] .forge-risk-table:not([open]) .when-open,
[data-ui-screen="forge"] .forge-risk-table[open] .when-closed { display: none; }
[data-ui-screen="forge"] .forge-risk-scale-row { padding: 10px 5px; gap: 4px; }
[data-ui-screen="forge"] .forge-risk-scale-row > * { font-size: 12px; letter-spacing: 0; white-space: normal; }
[data-ui-screen="forge"] .forge-risk-scale-row.header > * { font-size: 11px; line-height: 1.35; }
[data-ui-screen="forge"] .forge-risk-table-note { font-size: 12px !important; line-height: 1.5 !important; color: #bccbd0 !important; }
[data-ui-screen="forge"] .forge-result-fx { padding: 20px; }
[data-ui-screen="forge"] .forge-result-fx > strong { font-size: 25px; text-transform: none; }
[data-ui-screen="forge"] .forge-result-fx > small { font-size: 14px; line-height: 1.5; }
[data-ui-screen="forge"] .forge-result-meta small { font-size: 11px; }
[data-ui-screen="forge"] .forge-result-meta b { font-size: 14px; }

/* Travel: keep map coordinates and illustration, enlarge selection and briefing. */
[data-ui-screen] :is(.continent-map, .world-map) { margin-block: 16px; border-color: #637578; border-radius: 2px; }
[data-ui-screen] :is(.continent-city-marker, .world-gate) { min-width: 44px; min-height: 44px; justify-content: center; gap: 4px; }
[data-ui-screen] :is(.continent-city-marker strong, .world-gate strong) { max-width: 105px; padding: 3px 5px; font-size: 11px; letter-spacing: 0; line-height: 1.2; text-transform: none; }
[data-ui-screen] :is(.continent-city-list, .region-list) { grid-auto-columns: minmax(166px, 47%); gap: 10px; padding-bottom: 12px; margin-block: 16px; }
[data-ui-screen] .continent-city-card { min-height: 114px; padding: 14px; gap: 8px; }
[data-ui-screen] .continent-city-card strong { font-size: 19px; line-height: 1.15; text-transform: none; }
[data-ui-screen] .continent-city-card :is(small, span) { font-size: 11px; line-height: 1.35; letter-spacing: .01em; text-transform: none; }
[data-ui-screen] :is(.continent-city-card.locked, .region-card.locked) { filter: saturate(.6); opacity: 1; }
[data-ui-screen] .region-card { min-height: 150px; }
[data-ui-screen] .region-card-copy { padding: 12px; gap: 8px; }
[data-ui-screen] .region-card-copy strong { font-size: 19px; line-height: 1.15; text-transform: none; }
[data-ui-screen] .region-card-copy :is(small, span) { font-size: 11px; line-height: 1.4; text-transform: none; letter-spacing: 0; }
[data-ui-screen] :is(.continent-city-brief h2, .region-brief h2) { margin-block: 10px; font-size: 25px; line-height: 1.15; letter-spacing: -.01em; text-transform: none; }
[data-ui-screen] :is(.continent-city-brief > p, .region-brief > p) { font-size: 14px; line-height: 1.6; color: #c4ced0; margin-bottom: 16px; }
[data-ui-screen] :is(.continent-city-heading, .continent-route, .region-brief-heading, .region-route-meta) { flex-wrap: wrap; gap: 8px; }
[data-ui-screen] :is(.continent-city-heading, .continent-route, .region-brief-heading, .region-route-meta) :is(span, small, strong) { font-size: 11px; line-height: 1.4; text-transform: none; letter-spacing: .01em; }
[data-ui-screen] .continent-route { padding-block: 12px; }

/* Seeker profile: image and rank, then a legible parameter list. */
[data-ui-screen="character"] .character-content { gap: 24px; }
[data-ui-screen="character"] .character-identity { grid-template-columns: 115px minmax(0, 1fr); gap: 14px; padding: 12px; min-height: 218px; }
[data-ui-screen="character"] .character-profile-copy { min-width: 0; }
[data-ui-screen="character"] .character-body-sprite { object-fit: cover; object-position: 60% top; transform: none; }
[data-ui-screen="character"] .character-profile-copy h2 { font-size: 24px; line-height: 1.15; text-transform: none; }
[data-ui-screen="character"] :is(.character-rank-label, #characterLevel, #characterXpText) { font-size: 11px; line-height: 1.4; color: #c5d0d1; letter-spacing: .01em; }
[data-ui-screen="character"] .character-equipped-weapon strong { font-size: 13px; line-height: 1.4; white-space: normal; }
[data-ui-screen="character"] .character-equipped-weapon small { font-size: 11px; color: #a9bdc5; }
[data-ui-screen="character"] .character-section-heading h2 { font-size: 22px; margin-top: 2px; text-transform: none; }
[data-ui-screen="character"] .character-stats { grid-template-columns: 1fr; gap: 8px; }
[data-ui-screen="character"] .character-stat { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 12px; min-height: 76px; background: #091217ed; }
[data-ui-screen="character"] .character-stat img { width: 40px; height: 40px; }
[data-ui-screen="character"] .character-stat-copy strong { font-size: 14px; letter-spacing: .03em; }
[data-ui-screen="character"] .character-stat-copy small { font-size: 12px; line-height: 1.4; color: #b6c4c9; }
[data-ui-screen="character"] .character-stat-value { font-size: 24px; }
[data-ui-screen="character"] .character-stat-value small { font-size: 11px; line-height: 1.4; }
[data-ui-screen="character"] .archetype-card h2 { font-size: 22px; text-transform: none; }
[data-ui-screen="character"] .archetype-card > p:not(.eyebrow) { font-size: 14px; line-height: 1.5; color: #c4d0d2; }
[data-ui-screen="character"] #archetypeRequirement { font-size: 12px; }

/* Contracts, creatures and chronicles: full-width reading area, no tiny columns. */
[data-ui-screen] :is(.contract-list, .archive-list, .chronicle-list) { gap: 16px; padding-bottom: 8px; }
[data-ui-screen] :is(.contract-card, .archive-entry, .chronicle-entry) { grid-template-columns: 1fr; gap: 14px; }
[data-ui-screen] :is(.contract-portrait, .archive-portrait, .chronicle-fragment-art) { height: 155px; min-height: 0; border: 0; background-color: #080f15; }
[data-ui-screen] :is(.contract-portrait, .archive-portrait) img { height: 155px; min-height: 0; object-fit: contain; transform: none; }
[data-ui-screen] .chronicle-fragment-art img { height: 155px; min-height: 0; object-fit: cover; }
[data-ui-screen] :is(.contract-copy, .archive-entry-copy, .chronicle-entry-copy) { gap: 10px; }
[data-ui-screen] :is(.contract-card, .archive-entry, .chronicle-entry, .chronicle-world-event) h2 { font-size: 22px; line-height: 1.2; text-transform: none; }
[data-ui-screen] :is(.contract-brief, .archive-lore, .archive-field-note, .chronicle-entry-summary, .chronicle-entry-body) { font-size: 14px; line-height: 1.6; color: #c6d0d2; }
[data-ui-screen] :is(.contract-objective, .contract-reward, .archive-classification, .archive-research, .chronicle-entry-meta) { font-size: 11px; line-height: 1.5; color: #a6d6de; letter-spacing: .02em; text-transform: none; }
[data-ui-screen] .contract-reward { color: #e2c18f; }
[data-ui-screen] :is(.contract-card.claimed, .contract-card.contract-claimed, .chronicle-entry.locked) { opacity: 1; }
[data-ui-screen] .chronicle-world-event { grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px; }
[data-ui-screen] .chronicle-world-event > strong { justify-self: start; font-size: 11px; line-height: 1.4; padding: 5px 8px; }
[data-ui-screen] .chronicle-world-event > p:last-child { font-size: 14px; line-height: 1.5; color: #bcccd1; }
[data-ui-screen] .chronicle-audio-button { color: #d9ecf0; }

/* Story/cutscenes: real layout rows instead of captions covering the whole scene. */
[data-ui-screen="story"] .story-shell { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
[data-ui-screen="cutscene"] .cutscene-shell { display: grid; grid-template-rows: auto minmax(70px, 1fr) auto; }
[data-ui-screen] :is(.story-header, .cutscene-header) { position: relative; inset: auto; z-index: 4; }
[data-ui-screen] :is(.story-header h1, .cutscene-header h1) { font-size: 22px; }
[data-ui-screen="story"] .story-quest-strip { position: relative; inset: auto; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; margin: 0; padding: 12px 16px; background: #0c171de8; }
[data-ui-screen="story"] .story-quest-strip > span { font-size: 11px; }
[data-ui-screen="story"] .story-quest-strip > strong { grid-column: 1 / -1; max-width: none; color: #b6e5e9; font-size: 12px; line-height: 1.4; text-align: left; white-space: normal; overflow: visible; }
[data-ui-screen="story"] .story-dialogue-stage { position: relative; inset: auto; min-height: 0; display: grid; grid-template-rows: minmax(70px, 1fr) auto; }
[data-ui-screen] :is(.story-visual, .cutscene-visual) { position: relative; isolation: isolate; min-height: 0; overflow: hidden; }
[data-ui-screen="cutscene"] .cutscene-visual { grid-row: 2; }
[data-ui-screen="cutscene"] .cutscene-header { grid-row: 1; }
[data-ui-screen] :is(.story-backdrop, .cutscene-backdrop, .cutscene-shade) { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-ui-screen] :is(.story-npc-sprite, .cutscene-portrait) { position: absolute; inset: auto auto 0 50%; width: 100%; max-width: 455px; height: 100%; object-fit: contain; object-position: center bottom; transform: translateX(-50%); }
[data-ui-screen] :is(.story-item-prop, .cutscene-item-prop) { top: auto; bottom: 8%; right: 8%; width: min(32%, 145px); max-height: 48%; }
[data-ui-screen] :is(.story-npc-sprite, .cutscene-portrait)[hidden] + :is(.story-item-prop, .cutscene-item-prop) { inset: auto auto 10% 50%; width: min(48%, 205px); max-height: 70%; transform: translateX(-50%); }
[data-ui-screen] .story-item-prop[data-kind="map"],
[data-ui-screen] .story-npc-sprite[hidden] + .story-item-prop[data-kind="map"] { inset: auto auto 8% 50%; width: min(85%, 390px); max-height: 80%; object-fit: contain; transform: translateX(-50%); }
[data-ui-screen] :is(.story-dialogue-panel, .cutscene-caption) {
  position: relative;
  inset: auto;
  z-index: 4;
  width: auto;
  display: flex;
  flex-direction: column;
  max-height: 52dvh;
  margin: 0 10px 10px;
  padding: 8px;
  overflow: hidden;
  border: 16px solid transparent;
  border-image: var(--ui-panel-art) 10% fill / 16px;
  background: #071014;
  scrollbar-width: thin;
}
[data-ui-screen="cutscene"] .cutscene-caption { grid-row: 3; }
[data-ui-screen="story"] .story-dialogue-panel .eyebrow { font-size: 11px; margin-bottom: 6px; }
[data-ui-screen="story"] .story-npc-role { color: #91b5bf; font-size: 11px; line-height: 1.4; margin-block: 3px; }
[data-ui-screen="story"] .story-dialogue-panel h2 { margin-block: 4px 12px; font-size: 24px; text-transform: none; }
[data-ui-screen] :is(.story-dialogue-text, .cutscene-text) { margin: 0 0 16px; font-size: 15px; font-family: Georgia, serif; line-height: 1.65; color: #e0dfd5; }
[data-ui-screen] :is(.story-dialogue-panel, .cutscene-caption) > * { flex-shrink: 0; }
[data-ui-screen] :is(.story-dialogue-text, .cutscene-text) { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #71858d #080f14; }
[data-ui-screen] :is(.story-dialogue-text, .cutscene-text):focus-visible { outline: 1px solid #89cbd4; outline-offset: 3px; }
[data-ui-screen="story"] .story-choices { flex: 0 1 auto; min-height: 44px; max-height: 26dvh; overflow-y: auto; gap: 8px; margin-bottom: 12px; scrollbar-width: thin; }
[data-ui-screen="story"] .story-choice { min-height: 44px; padding: 10px 12px; font-size: 13px; line-height: 1.4; color: #cee4e7; }
[data-ui-screen="story"] .story-choice.story-action-step { padding-left: 32px; }
[data-ui-screen="story"] .story-dialogue-panel:has(.story-choices:not([hidden])) { max-height: 60dvh; }
[data-ui-screen="cutscene"] .cutscene-speaker { margin: 0 36px 12px 0; color: #a6e0e6; font-size: 12px; line-height: 1.4; }
[data-ui-screen="cutscene"] .cutscene-frame-counter { position: absolute; top: 8px; right: 8px; float: none; color: #b2c6cd; font-size: 12px; }
[data-ui-screen] :is(.contract-action, .archive-claim-button, .chronicle-read-button):disabled { opacity: .72; color: #bbc6cb; }

/* Small system windows are designed too, including empty and irreversible states. */
[data-ui-screen]:is([data-ui-screen="boot"], [data-ui-screen="pause"], [data-ui-screen="reward"], [data-ui-screen="result"], [data-ui-screen="confirmation"]) { padding: 16px; }
[data-ui-screen] .modal:not(.inventory-modal):not(.item-details-modal) {
  width: min(100%, 420px);
  max-height: 100%;
  padding: 12px;
  overflow-y: auto;
  border: 18px solid transparent;
  border-image: var(--ui-panel-art) 10% fill / 18px;
  border-radius: 0;
  background: #071014;
  scrollbar-width: thin;
}
[data-ui-screen] .modal:not(.inventory-modal):not(.item-details-modal) h2 { margin-block: 8px 14px; font-size: 28px; line-height: 1.15; letter-spacing: 0; text-transform: none; }
[data-ui-screen] .modal:not(.inventory-modal):not(.item-details-modal) > p:not(.eyebrow) { font-size: 14px; line-height: 1.6; color: #c3ced0; }
[data-ui-screen] .reward-choices { gap: 12px; }
[data-ui-screen] .reward-choice {
  --reward-accent: var(--ui-cyan);
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 88px;
  padding: 14px 22px;
  border: 0 solid transparent;
  border-image: var(--ui-panel-art) 10% fill / 9px 16px;
  border-radius: 0;
  background: #081217;
  box-shadow: inset 2px 0 var(--reward-accent);
  text-align: left;
}
[data-ui-screen] .reward-choice[data-reward="fury"] { --reward-accent: #e6bc7c; }
[data-ui-screen] .reward-choice[data-reward="vitality"] { --reward-accent: #9edbb9; }
[data-ui-screen] .reward-choice-arrow { color: var(--reward-accent); font-size: 24px; }
[data-ui-screen] .reward-choice > img { width: 36px; height: 36px; object-fit: contain; pointer-events: none; }
[data-ui-screen] .reward-choice .reward-choice-copy { display: grid; min-width: 0; gap: 5px; }
[data-ui-screen] .reward-choice strong { font-size: 16px; color: #eeddb9; line-height: 1.3; text-transform: none; letter-spacing: 0; }
[data-ui-screen] .reward-choice .reward-choice-bonus { font-size: 13px; color: var(--reward-accent); line-height: 1.4; }
[data-ui-screen] .reward-choice small { font-size: 12px; color: #c0cece; line-height: 1.4; }
[data-ui-screen] .reward-choice:hover:not(:disabled) { filter: brightness(1.2); }
[data-ui-screen] .reward-choice:active:not(:disabled) { transform: none; filter: brightness(.9); }
[data-ui-screen] .confirmation-item-name { font-size: 18px; line-height: 1.4; }
[data-ui-screen] .loot-row { flex-wrap: wrap; gap: 10px; font-size: 15px; }
[data-ui-screen] .drop-notice { padding: 12px; font-size: 13px; line-height: 1.5; }
[data-ui-screen] .drop-notice strong { font-size: 16px; line-height: 1.25; text-transform: none; }
[data-ui-screen] .drop-notice > span { font-size: 13px; }
[data-ui-screen] .drop-notice small { font-size: 11px; line-height: 1.4; color: #b4c4cb; }

/* Combat controls only: never change the actor, sword grip, hit effects or scene. */
.top-panel { padding: max(14px, env(safe-area-inset-top)) 14px 18px; }
.top-panel .location-row { align-items: start; gap: 8px; }
.top-panel .header-actions { gap: 6px; }
.top-panel .header-actions .icon-button { width: 44px; height: 44px; }
.top-panel .profile-copy { display: none; }
.top-panel .profile-chip { min-width: 30px; width: 30px; padding: 0; }
.top-panel .name-row { font-size: 13px; line-height: 1.4; letter-spacing: .03em; }
.top-panel .eyebrow { font-size: 11px; line-height: 1.4; letter-spacing: .04em; }
.bottom-panel { padding-top: 20px; }
.bottom-panel .skills { gap: 8px; }
.bottom-panel .skill { border-radius: 8px; aspect-ratio: 1; border-color: #657879; }
.bottom-panel .skill-icon { border-radius: 6px; }
.bottom-panel .skill-name { bottom: 7%; font-size: 11px; letter-spacing: .02em; color: #f0f5ef; }
.bottom-panel .charge-ring {
  inset: auto 5px 3px;
  height: 3px;
  border: 0;
  border-radius: 2px;
  background: var(--ether);
  transform-origin: left center;
  transform: scaleX(var(--ultimate-charge, 0));
}
.bottom-panel .name-row { font-size: 12px; }
.combat-toast { max-width: 90%; font-size: 12px; white-space: normal; text-align: center; }

@media (max-width: 370px) {
  [data-ui-screen] :is(.rift-header h1, .inventory-header h2, .forge-heading h2) { font-size: 22px; }
  [data-ui-screen="city"] .city-header h1 { font-size: 24px; }
  [data-ui-screen="city"] .city-header-actions { flex-direction: column; align-items: end; }
  [data-ui-screen="city"] .city-location { grid-template-columns: 28px minmax(0, 1fr); gap: 6px; padding-inline: 7px; min-height: 76px; }
  [data-ui-screen="city"] .city-location-icon { width: 28px; height: 28px; }
  [data-ui-screen="city"] .city-location strong { font-size: 12px; }
  [data-ui-screen="inspection"] .item-details-hero { grid-template-columns: 80px minmax(0, 1fr); padding: 10px; gap: 10px; }
  [data-ui-screen="inspection"] .item-details-visual { width: 80px; height: 80px; }
  [data-ui-screen="inspection"] .item-details-visual > .item-art { width: 72px; height: 72px; }
  [data-ui-screen="character"] .character-identity { grid-template-columns: 96px minmax(0, 1fr); }
  [data-ui-screen="character"] .character-stat { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; }
  [data-ui-screen="character"] .character-stat img { width: 32px; height: 32px; }
  [data-ui-screen="character"] .character-stat-value { font-size: 21px; }
}
@media (max-height: 580px) {
  [data-ui-screen="city"] .city-shell { grid-template-rows: auto 80px auto; }
  [data-ui-screen] :is(.story-shell, .cutscene-shell) { display: block; overflow-y: auto; }
  [data-ui-screen="story"] .story-dialogue-stage { display: block; height: auto; min-height: 0; }
  [data-ui-screen] :is(.story-visual, .cutscene-visual) { height: 160px; }
  [data-ui-screen] :is(.story-dialogue-panel, .cutscene-caption) { max-height: none; }
  [data-ui-screen="story"] .story-dialogue-panel:has(.story-choices:not([hidden])) { max-height: none; }
  [data-ui-screen] :is(.story-dialogue-text, .cutscene-text, .story-choices) { flex: none; max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  [data-ui-screen] *, [data-ui-screen] *::before, [data-ui-screen] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}
:is([data-ui-screen="world"], [data-ui-screen="character"]) .progression-panel {
  margin: 16px 0;
  padding: 20px;
  border: 16px solid transparent;
  border-image: var(--ui-panel-art) 10% fill / 16px;
  background: #080f13;
  color: var(--ui-text, #e7e2d7);
  min-width: 0;
  overflow-wrap: anywhere;
}
.progression-panel h2 { margin: 6px 0 12px; font-size: 20px; }
.progression-panel h3 { margin: 0; font-size: 17px; }
.progression-panel p { font-size: 14px; line-height: 1.6; margin: 8px 0 14px; }
.progression-list, .survey-active { display: grid; gap: 12px; }
.progression-row { padding: 14px 0; border-top: 1px solid #335057; min-width: 0; }
.progression-row strong { color: #dfc58e; font-size: 16px; line-height: 1.5; }
.progression-panel .secondary-button {
  width: 100%; min-height: 44px;
  font-size: 14px; line-height: 1.45; text-align: left;
  justify-items: start;
}
.progression-panel .secondary-button:disabled { opacity: 0.55; cursor: default; }
.progression-panel .secondary-button:focus-visible { outline: 2px solid #79d9eb; outline-offset: 3px; }
.progression-panel .survey-feedback { border-left: 2px solid #bea16c; padding-left: 12px; color: #cebd9b; }
.progression-panel [hidden] { display: none !important; }
#worldRegionButton, #resetTalentsButton { margin-top: 16px; }