/* Material-only migration. Layout, positioning, zoom and event hooks stay in existing files. */
.ui-shell { color: var(--mg-text-main); }
:is(#topBar,#bottomBar,#sidebar,.ui-topbar,.ui-bottombar,.ui-sidebar) {
  background: var(--material-wood);
  color: var(--mg-text-main);
  border-color: var(--mg-border-muted);
  box-shadow: 0 4px 12px var(--mg-shadow-soft);
}
:is(.ui-window,.game-window,.settings-window,.bank-window,.inventory-window,
  .character-container,.journal-window,.quest-window,.quest-delivery-dialog,.smithing-window,.location-scene-drawer.farming-window,
  .travel-panel,.bottom-chat-panel,.bottom-info-panel,.consent-card,.rest-dialog,.email-reminder-dialog):not(.location-scene-window):not(.worldmap-window) {
  background: var(--material-stone);
  color: var(--mg-text-main);
  border-color: var(--mg-bronze);
  box-shadow: var(--material-shadow);
}
:is(.ui-panel,.smithing-content,.smithing-progress-card,.crafting-station-panel,
  .settings-card,.character-panel-card,.bank-hero,.inventory-hero-overview,
  .shop-detail-card,.trade-detail-card,.recipe-detail,.farming-window-header) {
  background: var(--material-stone);
  border-color: var(--mg-border-muted);
  color: var(--mg-text-main);
  box-shadow: none;
}
:is(.journal-sections,.journal-list,.farming-window-tabs,.character-sheet-tabs,
  .bank-grid-card,.trade-pane,.worldmap-stage-toolbar,.bottom-chat-header,.bottom-chat-footer) {
  background: var(--material-wood);
  color: var(--mg-text-main);
  border-color: var(--mg-border-muted);
  box-shadow: none;
}
:is(.ui-panel--recessed,.bottom-chat-body,.bottom-chat-message,.journal-list-head,
  .item-detail-panel,.recipe-material-row,input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea) {
  background: var(--material-wood-deep);
  color: var(--mg-text-main);
  border-color: var(--mg-border-muted);
  box-shadow: inset 0 1px 4px var(--mg-shadow-soft);
}
input::placeholder, textarea::placeholder { color: var(--mg-text-muted); }
:is(input,textarea,select,button,a,[tabindex]):focus-visible {
  outline: 2px solid var(--mg-amber);
  outline-offset: 2px;
}
.ui-frame { position: relative; box-shadow: inset 0 1px 0 var(--mg-border-muted), 0 4px 12px var(--mg-shadow-soft); }
.ui-frame--bronze { border: 1px solid var(--mg-bronze); }
.ui-frame--bronze, .ui-window { position: relative; }
/* One corner and one horizontal strip, reused in all orientations.
   Absolute decoration has no effect on window dimensions or hit testing. */
.mg-frame-art {
  --mg-frame-corner-size: 1.5rem;
  --mg-frame-edge-size: .45rem;
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  overflow: hidden; border-radius: inherit;
}
.mg-frame-art * { pointer-events: none; }
.mg-frame-piece { position: absolute; display: block; overflow: hidden; }
.mg-frame-corner { width: var(--mg-frame-corner-size); height: var(--mg-frame-corner-size); }
.mg-frame-tl { top: 0; left: 0; }
.mg-frame-tr { top: 0; right: 0; transform: rotate(90deg); }
.mg-frame-br { bottom: 0; right: 0; transform: rotate(180deg); }
.mg-frame-bl { bottom: 0; left: 0; transform: rotate(270deg); }
.mg-frame-edge { position: absolute; overflow: hidden; }
.mg-frame-edge:is(.mg-frame-top,.mg-frame-bottom) {
  left: var(--mg-frame-corner-size); right: var(--mg-frame-corner-size); height: var(--mg-frame-edge-size);
}
.mg-frame-edge.mg-frame-top { top: 0; }
.mg-frame-edge.mg-frame-bottom { bottom: 0; transform: rotate(180deg); }
.mg-frame-edge:is(.mg-frame-left,.mg-frame-right) {
  top: var(--mg-frame-corner-size); bottom: var(--mg-frame-corner-size); width: var(--mg-frame-edge-size);
  /* Container units let the horizontal SVG use the vertical edge's length. */
  container-type: size;
}
.mg-frame-edge.mg-frame-left { left: 0; }
.mg-frame-edge.mg-frame-right { right: 0; }
.mg-frame-strip { width: 100%; height: 100%; }
.mg-frame-edge:is(.mg-frame-left,.mg-frame-right) .mg-frame-strip {
  width: 100cqh; height: 100cqw; transform-origin: top left;
  transform: rotate(90deg) translateY(-100%);
}
:is(.ui-document,.journal-page,.quest-entry,.quest-step,.quest-complete-card,
  .story-continuation-card,.escape-info-card,.escape-patchlog-entry) {
  background: var(--material-parchment);
  color: var(--mg-ink);
  border-color: var(--mg-border-muted);
  box-shadow: 0 4px 12px var(--mg-shadow-soft);
}
.ui-document :is(h1,h2,h3,h4,p,li), .journal-page :is(h2,h3,p,li) { color: var(--mg-ink); }
.ui-document :is(small,.muted), .journal-page :is(.journal-page-kicker,.journal-block-label) { color: var(--mg-ink-muted); }
:is(.ui-slot,.bank-slot,.inventory-slot,.character-equipment-slot) {
  background: var(--mg-image-slot) center / 100% 100% no-repeat var(--mg-graphite-deep);
  border-color: var(--mg-border-muted);
  color: var(--mg-text-main);
  box-shadow: inset 0 1px 4px var(--mg-shadow-soft);
}
.ui-slot { border: 1px solid var(--mg-border-muted); }
:is(.bank-slot,.inventory-slot,.character-equipment-slot):is(:hover,.selected,.is-selected,[aria-selected=true]) { border-color: var(--mg-amber); }
/* Tertiary rows retain their existing dimensions and grids; only their material changes. */
:is(.ui-selection,.journal-window button.journal-entry-row,button.city-gate-menu-item,button.location-scene-return-menu-item) {
  appearance: none;
  position: relative;
  border: 0;
  border-image: none;
  border-radius: 0;
  background: transparent;
  color: var(--mg-text-main);
  box-shadow: none;
  text-shadow: none;
  opacity: 1;
  filter: none;
}
:is(.ui-selection,.journal-window button.journal-entry-row,button.city-gate-menu-item,button.location-scene-return-menu-item):is(:hover,:active,.is-active,.active,.is-selected,[aria-selected=true]) {
  background: transparent;
  box-shadow: none;
  filter: none;
  transform: none;
}
:is(.ui-selection,.journal-window button.journal-entry-row,button.city-gate-menu-item,button.location-scene-return-menu-item)::after {
  content: '';
  position: absolute;
  left: .5rem;
  right: .5rem;
  bottom: 0;
  height: 2px;
  pointer-events: none;
  background: var(--mg-image-selection-hover) center / 100% 100% no-repeat,
    linear-gradient(90deg,transparent,var(--mg-amber),transparent) center / 100% 1px no-repeat;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 120ms ease-out, opacity 120ms ease-out;
}
:is(.ui-selection,.journal-window button.journal-entry-row,button.city-gate-menu-item,button.location-scene-return-menu-item):is(:hover,:focus-visible)::after { opacity: .75; transform: scaleX(1); }
:is(.ui-selection,.journal-window button.journal-entry-row,button.city-gate-menu-item,button.location-scene-return-menu-item):is(.is-active,.active,.is-selected,[aria-selected=true])::after {
  background: var(--mg-image-selection-selected) center / 100% 100% no-repeat,
    linear-gradient(90deg,transparent,var(--mg-amber),transparent);
  opacity: 1;
  transform: scaleX(1);
}
:is(.ui-selection,.journal-window button.journal-entry-row,button.city-gate-menu-item,button.location-scene-return-menu-item):is(:disabled,[aria-disabled=true],.is-disabled) {
  opacity: .45; filter: saturate(.25); box-shadow: none;
}
:is(.ui-selection,.journal-window button.journal-entry-row,button.city-gate-menu-item,button.location-scene-return-menu-item):is(:disabled,[aria-disabled=true],.is-disabled)::after { opacity: 0; transform: scaleX(0); transition: none; }
.journal-entry-row strong,.bottom-chat-message-text { color: var(--mg-text-main); }
.journal-entry-row small,.bottom-chat-message-time,.bottom-chat-empty { color: var(--mg-text-muted); }
.bottom-chat-message-author { color: var(--mg-amber); }
.ui-divider { border: 0; height: 1px; background: var(--mg-image-divider-subtle) center / 100% 100% no-repeat var(--mg-border-muted); }
.ui-divider--bronze { background: var(--mg-image-divider-bronze) center / 100% 100% no-repeat var(--mg-bronze); }
.ui-overlay-dark { background-blend-mode: multiply; }
.ui-overlay-warm { background-color: var(--mg-umber); background-blend-mode: soft-light; }
.ui-overlay-inset { box-shadow: inset 0 2px 6px var(--mg-shadow-soft); }
/* Passive shell counters are architecture, not walnut controls. */
:is(.pill,.topbar-buff-pill,#currentSeason,#currentWeather,.topbar-shipment-indicator,.topbar-health-wrap) {
  background: var(--material-wood-deep); border-color: var(--mg-border-muted); box-shadow: none;
}
@media(prefers-reduced-motion: reduce) {
  :is(.ui-selection,.journal-window button.journal-entry-row,button.city-gate-menu-item,button.location-scene-return-menu-item)::after { transition: none; }
}

/* Handbook: retain the three columns, give each one a clear visual role. */
#journalOverlay .journal-window {
  background: linear-gradient(color-mix(in srgb,var(--mg-slate) var(--mg-journal-material-tint),transparent),color-mix(in srgb,var(--mg-slate) var(--mg-journal-material-tint),transparent)),
    var(--mg-image-slate) repeat var(--mg-slate);
}
#journalOverlay .journal-hero {
  background: linear-gradient(color-mix(in srgb,var(--mg-graphite) var(--mg-journal-material-tint),transparent),color-mix(in srgb,var(--mg-graphite) var(--mg-journal-material-tint),transparent)),
    var(--mg-image-graphite) repeat var(--mg-graphite);
  border-color: var(--mg-border-muted);
}
#journalOverlay .journal-hero .view-hero-label { display: none; }
#journalOverlay .journal-hero p { color: var(--mg-text-muted); }
#journalOverlay .journal-sections { background: transparent; }
#journalOverlay .journal-nav {
  background: linear-gradient(color-mix(in srgb,var(--mg-graphite) var(--mg-journal-material-tint),transparent),color-mix(in srgb,var(--mg-graphite) var(--mg-journal-material-tint),transparent)),
    var(--mg-image-graphite) repeat var(--mg-graphite);
  border-radius: .35rem;
}
#journalOverlay .journal-chapters {
  gap: .15rem;
  border-color: var(--mg-border-muted);
}
#journalOverlay :is(.journal-section-tab,.journal-chapter-tab) {
  appearance: none;
  position: relative;
  border: 0;
  border-image: none;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  filter: none;
  color: var(--mg-text-muted);
  border-radius: 0;
  font-family: var(--font-readable);
  text-decoration: none;
}
#journalOverlay .journal-section-tab { font-weight: 650; color: var(--mg-text-main); }
#journalOverlay .journal-section-tab.is-active {
  background: transparent;
  box-shadow: none;
}
#journalOverlay :is(.journal-section-tab,.journal-chapter-tab) strong {
  font-size: .65rem;
  font-weight: 500;
  color: var(--mg-text-muted);
  font-variant-numeric: tabular-nums;
}
#journalOverlay :is(.journal-section-tab,.journal-chapter-tab):hover {
  color: var(--mg-amber); filter: none;
}
#journalOverlay :is(.journal-section-tab,.journal-chapter-tab)::after {
  content: ''; position: absolute; left: .5rem; right: .5rem; bottom: 0; height: 2px;
  background: var(--mg-image-selection-hover) center / 100% 100% no-repeat, linear-gradient(90deg,transparent,var(--mg-amber),transparent); opacity: 0; pointer-events: none;
  transform: scaleX(0); transform-origin: center;
  transition: transform 120ms ease-out, opacity 120ms ease-out;
}
#journalOverlay :is(.journal-section-tab,.journal-chapter-tab):is(:hover,:focus-visible,.is-active)::after { opacity: 1; transform: scaleX(1); }
#journalOverlay .journal-chapter-tab.is-active { color: var(--mg-amber); }
#journalOverlay :is(.journal-section-tab,.journal-chapter-tab):focus-visible {
  outline: 2px solid var(--mg-amber); outline-offset: -2px;
}
#journalOverlay :is(.journal-section-tab,.journal-chapter-tab):is(:disabled,[aria-disabled=true]) {
  opacity: .45; color: var(--mg-text-muted); box-shadow: none;
}
#journalOverlay :is(.journal-section-tab,.journal-chapter-tab):is(:disabled,[aria-disabled=true])::after { opacity: 0; transform: scaleX(0); transition: none; }
@media(prefers-reduced-motion: reduce) {
  #journalOverlay :is(.journal-section-tab,.journal-chapter-tab)::after { transition: none; }
}
#journalOverlay .journal-list-head {
  background: transparent; border: 0; border-bottom: 1px solid var(--mg-border-muted);
  border-radius: 0; box-shadow: none;
}
#journalOverlay .journal-search :is(input,select) {
  background: var(--mg-graphite-deep); border-color: var(--mg-border-muted); border-radius: .3rem;
}
#journalOverlay .journal-page {
  /* Tint above the existing texture reduces contrast without a new asset. */
  background: linear-gradient(color-mix(in srgb,var(--mg-parchment) 78%,transparent),color-mix(in srgb,var(--mg-parchment) 78%,transparent)),
    var(--mg-image-parchment) repeat var(--mg-parchment);
  border-radius: .4rem;
  box-shadow: 0 4px 12px var(--mg-shadow-soft);
}
#journalOverlay .journal-knowledge-mark {
  background: transparent; border: 0; border-radius: 0; padding-inline: 0; margin-right: .6rem;
  color: var(--mg-ink-muted); font-weight: 500;
}
#journalOverlay .journal-knowledge-mark.is-unlocked { color: var(--mg-ink); font-weight: 650; }
#journalOverlay .journal-handwritten-block {
  padding: 1rem 0 0; border: 0; border-top: 1px solid var(--mg-border-muted);
  background: transparent; border-radius: 0;
}
#journalOverlay :is(.journal-handwritten-line,.journal-handwritten-empty,.journal-note-list li) {
  font-family: var(--font-readable); font-size: .9rem; line-height: 1.6; color: var(--mg-ink);
}
#journalOverlay .journal-note-list { gap: .15rem; }
#journalOverlay .journal-note-list li { border-color: var(--mg-border-muted); }
#journalOverlay .journal-note-list li > span { color: var(--mg-ink-muted); }
#journalOverlay .journal-note-list strong { font-weight: 600; color: var(--mg-ink); }
#journalOverlay .journal-mastery-progress {
  padding: .65rem 0; background: transparent; border: 0; box-shadow: none;
  font-family: var(--font-readable); font-size: .85rem;
}
#journalOverlay .journal-mastery-progress-track > span { background: var(--mg-bronze); }

#journalOverlay :is(.journal-section-tab,.journal-chapter-tab).is-active::after {
  background: var(--mg-image-selection-selected) center / 100% 100% no-repeat,
    linear-gradient(90deg,transparent,var(--mg-amber),transparent);
}

/* Quest log uses the shared frame and textured controls without changing its browser layout. */
#questOverlay .quest-window {
  background: linear-gradient(color-mix(in srgb,var(--mg-slate) 55%,transparent),color-mix(in srgb,var(--mg-slate) 55%,transparent)),
    var(--mg-image-slate) repeat var(--mg-slate);
  color: var(--mg-text-main);
  border-color: var(--mg-bronze);
}
#questOverlay :is(.quest-hero,.quest-tabs,.quest-browser-list) {
  background: linear-gradient(color-mix(in srgb,var(--mg-graphite) 55%,transparent),color-mix(in srgb,var(--mg-graphite) 55%,transparent)),
    var(--mg-image-graphite) repeat var(--mg-graphite);
  border-color: var(--mg-border-muted);
}
#questOverlay .quest-browser { border-color: var(--mg-border-muted); }
#questOverlay .quest-browser-list button { white-space: normal; overflow-wrap: anywhere; }
#questOverlay .quest-auto-track-option { color: var(--mg-text-muted); }
#questOverlay .quest-auto-track-option input { accent-color: var(--mg-amber); }
#questOverlay .quest-browser-detail .quest-entry {
  background: linear-gradient(color-mix(in srgb,var(--mg-parchment) 78%,transparent),color-mix(in srgb,var(--mg-parchment) 78%,transparent)),
    var(--mg-image-parchment) repeat var(--mg-parchment);
  color: var(--mg-ink);
  border-color: var(--mg-border-muted);
  box-shadow: 0 4px 12px var(--mg-shadow-soft);
}
#questOverlay .quest-entry :is(.quest-step,.quest-current-goal) {
  background: transparent; box-shadow: none; border-color: var(--mg-border-muted);
}
#questOverlay .quest-entry :is(.quest-entry-title,.quest-step-title,.quest-entry-description,.quest-objective-copy) {
  color: var(--mg-ink);
}
#questOverlay .quest-entry :is(.quest-objective-meta,.quest-entry-step-label,.quest-entry-reward-label) {
  color: var(--mg-ink-muted);
}

/* Notes retain their draggable/resizable workspace and autosave behavior. */
.notes-panel {
  background: linear-gradient(color-mix(in srgb,var(--mg-slate) 55%,transparent),color-mix(in srgb,var(--mg-slate) 55%,transparent)),
    var(--mg-image-slate) repeat var(--mg-slate);
  color: var(--mg-text-main); border-color: var(--mg-bronze); box-shadow: var(--material-shadow);
}
.notes-panel :is(.notes-panel-header,.notes-list) {
  background: linear-gradient(color-mix(in srgb,var(--mg-graphite) 55%,transparent),color-mix(in srgb,var(--mg-graphite) 55%,transparent)),
    var(--mg-image-graphite) repeat var(--mg-graphite);
  border-color: var(--mg-border-muted);
}
.notes-panel :is(.notes-panel-header span,.notes-list-item span,.notes-list-empty,.notes-editor-empty,.notes-save-status) {
  color: var(--mg-text-muted);
}
.notes-panel .notes-toolbar { border-color: var(--mg-border-muted); }
.notes-panel .notes-search { background: var(--material-wood-deep); border-color: var(--mg-border-muted); }
#notesPanel .notes-search input { background: transparent; box-shadow: none; }
#notesPanel .notes-editor textarea {
  background: linear-gradient(color-mix(in srgb,var(--mg-parchment) 78%,transparent),color-mix(in srgb,var(--mg-parchment) 78%,transparent)),
    var(--mg-image-parchment) repeat var(--mg-parchment);
  color: var(--mg-ink); border-color: var(--mg-border-muted); font: inherit; line-height: 1.6;
}
#notesPanel .notes-editor textarea::placeholder { color: var(--mg-ink-muted); }
.notes-panel :is(input,textarea):focus-visible { outline: 2px solid var(--mg-amber); outline-offset: -2px; }
.notes-panel .notes-save-status.is-saved { color: var(--mg-parchment-dim); }
.notes-panel .notes-save-status.is-error { color: var(--mg-amber); }

/* NPC shop: architecture stays dark; trade actions keep the shared button system. */
#npcTradeOverlay .npc-dialog-lowerbar.is-trade-view {
  background: linear-gradient(color-mix(in srgb,var(--mg-slate) 55%,transparent),color-mix(in srgb,var(--mg-slate) 55%,transparent)),
    var(--mg-image-slate) repeat var(--mg-slate);
  border-color: var(--mg-bronze); color: var(--mg-text-main); box-shadow: var(--material-shadow);
}
#npcTradeOverlay :is(.trade-window,.npc-dialog-body) { background: transparent; }
#npcTradeOverlay :is(.trade-window-header,.trade-pane) {
  background: linear-gradient(color-mix(in srgb,var(--mg-graphite) 55%,transparent),color-mix(in srgb,var(--mg-graphite) 55%,transparent)),
    var(--mg-image-graphite) repeat var(--mg-graphite);
  border-color: var(--mg-border-muted); box-shadow: none;
}
#npcTradeOverlay :is(.trade-detail-card,.trade-detail-empty) {
  background: var(--material-stone); color: var(--mg-text-main);
  border-color: var(--mg-border-muted); box-shadow: none;
}
#npcTradeOverlay :is(.trade-window-copy,.trade-role-mode,.trade-pane-meta,.trade-grid-empty) { color: var(--mg-text-muted); }
#npcTradeOverlay :is(.trade-role-badge,.trade-pane-header,.trade-detail-dock) { border-color: var(--mg-border-muted); }
#npcTradeOverlay .trade-slot {
  background: var(--mg-image-slot) center / 100% 100% no-repeat var(--mg-graphite-deep);
  color: var(--mg-text-main); border-color: var(--mg-border-muted); box-shadow: none;
}
#npcTradeOverlay .trade-slot:is(:hover,.is-selected,.is-active) { border-color: var(--mg-amber); }
#npcTradeOverlay .trade-slot:disabled { border-color: var(--mg-border-muted); box-shadow: none; }

/* Skill overview: warm architecture, readable unlock lists, restrained depth. */
#skillOverlay .skill-window {
  background: linear-gradient(color-mix(in srgb,var(--mg-slate) 55%,transparent),color-mix(in srgb,var(--mg-slate) 55%,transparent)),
    var(--mg-image-slate) repeat var(--mg-slate);
  border-color: var(--mg-bronze); color: var(--mg-text-main); box-shadow: var(--material-shadow);
}
#skillOverlay .skill-header {
  background: linear-gradient(color-mix(in srgb,var(--mg-graphite) 55%,transparent),color-mix(in srgb,var(--mg-graphite) 55%,transparent)),
    var(--mg-image-graphite) repeat var(--mg-graphite);
  border-color: var(--mg-border-muted);
}
#skillOverlay .skill-section {
  background: transparent; border: 0; box-shadow: none;
}
#skillOverlay :is(.skill-stat-pill,.fishing-personal-best-row) {
  background: var(--material-wood-deep); border-color: var(--mg-border-muted); box-shadow: none;
}
#skillOverlay .skill-hero-icon-wrap {
  background: var(--mg-image-slot) center / 100% 100% no-repeat var(--mg-graphite-deep);
  border-color: var(--mg-border-muted); box-shadow: none;
}
#skillOverlay :is(.skill-stat-label,.skill-hero-label) { color: var(--mg-text-muted); }
#skillOverlay .skill-stat-pill strong { color: var(--mg-text-main); }
#skillOverlay .skill-xp-bar { background: var(--mg-graphite-deep); box-shadow: inset 0 1px 4px var(--mg-shadow-soft); }
#skillOverlay .skill-xp-fill { background: var(--mg-bronze); box-shadow: none; }
#skillOverlay .unlock-level {
  color: var(--mg-text-muted); border-bottom: 1px solid var(--mg-border-muted);
  padding-bottom: .35rem; font-size: .8rem; font-weight: 600;
}
#skillOverlay .unlock-item {
  background: transparent; border: 0; box-shadow: none; color: var(--mg-text-main);
}
#skillOverlay .unlock-item.locked { color: var(--mg-text-muted); opacity: .6; }

/* Floating desktop sidebar; both horizontal bars span the full game canvas.
   Keep the shared sidebar-width token so adjacent workspaces follow the change. */
@media (min-width: 769px) {
  :root { --ui-sidebar-width: 216px; }
  #sidebar {
    grid-row: 2;
    margin: 0 .5rem 0 .75rem;
    padding: .6rem .5rem;
    border: 0;
    border-inline: 1px solid var(--mg-bronze);
    border-radius: .15rem;
    background: linear-gradient(color-mix(in srgb,var(--mg-graphite) 55%,transparent),color-mix(in srgb,var(--mg-graphite) 55%,transparent)),
      var(--mg-image-graphite) repeat var(--mg-graphite);
    box-shadow: 0 4px 12px var(--mg-shadow-soft);
  }
  #bottomBar { grid-column: 1 / -1; }
  #app.has-steam-link-notice > #sidebar { grid-row: 3; }
}
#topBar, #bottomBar { border-color: transparent; }
.mg-frame-art--bar { border-radius: 0; }
.mg-frame-art--bar .mg-frame-edge { left: 0; right: 0; }

/* One quiet readout for season, weather/temperature and server time. */
#topBar .topbar-world-info {
  display: inline-flex; align-items: center; gap: .7rem;
  flex: 0 1 auto; min-width: 0; padding: .25rem .65rem;
  border-radius: .25rem;
  background: color-mix(in srgb,var(--mg-graphite-deep) 40%,transparent);
  color: var(--mg-text-muted);
}
#topBar .topbar-world-info :is(#currentSeason,#currentWeather,#serverTime) {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  padding: 0; margin: 0; color: var(--mg-text-muted); white-space: nowrap;
  font-size: .8rem;
}
#topBar .topbar-world-info #currentSeason img { width: 24px; height: 24px; object-fit: contain; }
#topBar .topbar-world-info #serverTime {
  padding-left: .7rem; border-left: 1px solid var(--mg-border-muted);
  font-variant-numeric: tabular-nums;
}
#topBar .topbar-world-info #currentWeather:hover { color: var(--mg-text-main); }
#topBar .topbar-world-info #currentWeather:focus-visible { outline: 2px solid var(--mg-amber); outline-offset: 3px; }
#topBar .topbar-online-count {
  background: transparent; border: 0; box-shadow: none; padding-inline: 0;
  color: var(--mg-text-muted);
}
#topBar .topbar-online-count strong { color: var(--mg-text-muted); }
#topBar .topbar-online-dot { box-shadow: none; }
#topBar :is(#worldMapBtn,#settingsBtn) {
  background: var(--material-leather); border: 1px solid var(--mg-bronze);
  border-radius: .25rem; box-shadow: inset 0 1px var(--mg-border-muted);
}
#topBar :is(#worldMapBtn,#settingsBtn):hover { border-color: var(--mg-amber); }
#topBar :is(#worldMapBtn,#settingsBtn):focus-visible { outline: 2px solid var(--mg-amber); outline-offset: 2px; }
@media (max-width: 768px) {
  #topBar .topbar-world-info { flex-wrap: wrap; gap: .5rem; }
}

/* Layout settings stay beside Close, including when the tools row is collapsed. */
#inventoryOverlay .inventory-bank-hero { grid-template-columns: minmax(0,1fr) auto auto; }
#inventoryOverlay .inventory-window-controls {
  grid-area: close; display: flex; align-items: center; justify-content: flex-end;
  gap: .4rem; align-self: center;
}
#inventoryOverlay .inventory-window-controls > button {
  position: static; flex: 0 0 36px; width: 36px; height: 36px;
  min-width: 0; padding: 0;
}

/* Local destination menus keep their anchoring, scroll limits and travel hooks. */
:is(.city-gate-menu,.location-scene-return-menu) {
  background: linear-gradient(color-mix(in srgb,var(--mg-slate) 55%,transparent),color-mix(in srgb,var(--mg-slate) 55%,transparent)),
    var(--mg-image-slate) repeat var(--mg-slate);
  border: 1px solid var(--mg-bronze);
  border-radius: .35rem;
  box-shadow: var(--material-shadow-soft);
  color: var(--mg-text-main);
}
:is(.city-gate-menu,.location-scene-return-menu) button {
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: var(--mg-text-main); text-shadow: none;
}
:is(.city-gate-menu,.location-scene-return-menu) button:is(:hover,:focus-visible) {
  background: transparent; filter: none; box-shadow: none; color: var(--mg-parchment);
}
:is(.city-gate-menu,.location-scene-return-menu) :is(small,.city-scene-node-meta) { color: var(--mg-text-muted); }
.city-gate-menu-item span { color: var(--mg-text-muted); }

@media (min-width: 769px) {
  /* A continuous backdrop also covers the exposed margins beside the sidebar.
     It is below content, so it neither blurs labels nor intercepts scene clicks. */
  #app::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: rgba(8,7,5,.28);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }
  #app { isolation: isolate; }
  #main, #skillView {
    background: transparent;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* Shared scrollbar material, including native fallback before initialization. */
:root {
 --mg-scrollbar-track: var(--mg-graphite-deep);
 --mg-scrollbar-thumb: var(--mg-bronze);
 --mg-scrollbar-hover: var(--mg-amber);
}
html:not(.gom-custom-scrollbars) * {
 scrollbar-color: var(--mg-scrollbar-thumb) var(--mg-scrollbar-track);
}
html:not(.gom-custom-scrollbars) *::-webkit-scrollbar-track { background: var(--mg-scrollbar-track); }
html:not(.gom-custom-scrollbars) *::-webkit-scrollbar-thumb { background: var(--mg-scrollbar-thumb); border-radius: 4px; }
html:not(.gom-custom-scrollbars) *::-webkit-scrollbar-thumb:hover { background: var(--mg-scrollbar-hover); }
.gom-scrollbar { background: var(--mg-scrollbar-track); }
.gom-scrollbar .gom-scrollbar-thumb { background: var(--mg-scrollbar-thumb); box-shadow: inset 0 0 0 1px var(--mg-border-muted); }
.gom-scrollbar:is(:hover,:focus-visible,.is-dragging) .gom-scrollbar-thumb { background: var(--mg-scrollbar-hover); }
.gom-scrollbar:focus-visible { outline-color: var(--mg-amber); }

/* Keep the sidebar scrollbar attached to its scaled scrollport, not a detached
   viewport layer. Its edge then follows sidebar width and UI zoom natively. */
html.gom-custom-scrollbars #sidebar {
 scrollbar-width: thin !important;
 scrollbar-color: var(--mg-scrollbar-thumb) var(--mg-scrollbar-track);
}
html.gom-custom-scrollbars #sidebar::-webkit-scrollbar { display: block !important; width: 8px !important; }
#sidebar::-webkit-scrollbar-track { background: var(--mg-scrollbar-track); }
#sidebar::-webkit-scrollbar-thumb { background: var(--mg-scrollbar-thumb); border-radius: 4px; }
#sidebar::-webkit-scrollbar-thumb:hover { background: var(--mg-scrollbar-hover); }

/* Refresh is a compact secondary action, not a full-width primary banner. */
[data-trade-office] button[data-office-refresh] { width: fit-content; max-width: 100%; min-width: 0; align-self: flex-start; justify-self: start; flex: 0 0 auto; padding-inline: 1.25rem; }