/* Asciilands menu design system. Loaded last; every menu page shares it.

   Type scale (one monospace family):
     --ui-small   11px  counts, captions, hints, metadata
     --ui-body    13px  text, buttons, inputs, list rows
     --ui-heading 16px  section and item headings
     --ui-title   20px  page / station title
     --ui-menu    23px  the menu header (unchanged)
   Shapes: items are always square tiles (the inventory tile). Everything else
   is a rectangular panel or row with the same 1px edge. No rounded corners. */
:root{--ui-small:11px;--ui-body:13px;--ui-heading:16px;--ui-title:20px;--ui-menu:23px;--ui-control:32px}

html body #game-menu#game-menu#game-menu,html body #game-menu#game-menu#game-menu *{border-radius:0!important}
html body #game-menu #game-menu-title{font-size:var(--ui-menu)!important}

/* Body text everywhere in the menu, including header controls and navigation. */
html body #game-menu#game-menu#game-menu :is(#game-menu-pages,#game-menu-nav,.game-menu-heading) :is(p,li,span,a,label,button,input,select,textarea,div,dd,dt,td,th,strong,em,b,output,summary,legend){
  font-size:var(--ui-body)!important;line-height:1.45}
html body #game-menu#game-menu#game-menu :is(#game-menu-pages,#game-menu-nav,.game-menu-heading) :is(small,kbd,.setting-help,.bl-item-qty,.bl-item-slot-label,.bl-item-detail-meta,
  .recipe-material-status,.recipe-material-count,.workshop-row-state,.workshop-qty,.workshop-variant,.frontier-step,.frontier-reward,.magic-tier,
  .inventory-gear-icon+small,.build-materials span,.frontier-quantity,.ui-caption,.ui-keys,.ui-keys *,.ui-recipes small,.ui-recipe-item b,
  .journal-steps small,.tracked-hint,.storage-toolbar p,.bl-item-meta){font-size:var(--ui-small)!important}
html body #game-menu#game-menu#game-menu #game-menu-pages :is(h3,h4,.bl-item-detail-name,.frontier-section-heading>span,.ui-heading,.inventory-character-heading strong,.magic-family h3,.workshop-detail h3){
  font-size:var(--ui-heading)!important;line-height:1.3;font-weight:700}
html body #game-menu#game-menu#game-menu #game-menu-pages :is(h2,.frontier-station-context h2,.frontier-empty-context h2,.smith-practice h2){font-size:var(--ui-title)!important;line-height:1.25;margin:0}
/* Art made of glyphs keeps its own size. */
html body #game-menu#game-menu#game-menu #game-menu-pages :is(.magic-preview,.magic-preview *,.magic-lock,.smith-blade,.smith-blade *,svg text){font-size:revert-layer!important}
html body #game-menu#game-menu#game-menu #game-menu-pages .magic-lock{font-size:30px!important}

/* One control height and treatment. */
html body #game-menu :is(#game-menu-pages,.game-menu-heading) :is(button,select,input:not([type=checkbox]):not([type=radio]):not([type=range])){min-height:var(--ui-control)}

/* Count badges are square chips like every other box. */
html body #game-menu .bl-item-qty{border-radius:0!important;font-size:var(--ui-small)!important}

/* Square item tiles: inventory, storage, stations and ground share one tile. */
html body #game-menu .bl-item-slot{border-radius:0!important}
html body #game-menu #inventory-list .bl-item-slot{aspect-ratio:1;min-height:0!important}
html body #game-menu #inventory-list{grid-auto-rows:auto!important}

/* Section headings share one line style. */
html body #game-menu #game-menu-pages :is(.frontier-section-heading,.ui-heading){color:var(--menu-paper)}

/* Page context header (station name + actions) is identical on every station. */
html body #game-menu .frontier-station-context{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--menu-edge)}

/* Learned inscriptions stay craftable but read as done. */
html body #game-menu .workshop-row.is-learned .workshop-row-state{color:var(--menu-gold)!important}
html body #game-menu .workshop-row.is-learned h3::after{content:" ✓";color:var(--menu-gold)}
html body #game-menu .workshop-learned{color:var(--menu-gold);margin:6px 0}

/* Shift preview: the chip reserves its space; buttons keep a fixed width so the
   layout never moves while Shift is held. */
html body #game-menu .ui-shift-chip{display:inline-flex;align-items:center;gap:6px;min-width:112px;visibility:hidden;color:var(--menu-gold)}
html body #game-menu .ui-shift-chip.is-on{visibility:visible}
html body #game-menu .ui-shift-chip kbd{display:inline-block;padding:0 5px;border:1px solid var(--menu-gold);font:inherit}
html body #game-menu .workshop-row>button,html body #game-menu .workshop-make{min-width:92px}
html body #game-menu .is-shift-boost{color:var(--menu-gold)!important;border-color:var(--menu-gold)!important}

/* World controls: Use and Rest share one chip style. */
.ui-inline-facts{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.ui-inline-facts>span{display:inline-block}
#cursor-instruction{display:flex;flex-wrap:wrap;gap:4px 16px}
#explore-controls{display:flex;gap:6px}
#explore-controls #world-rest{pointer-events:auto;padding:3px 7px;font:600 11px/1.4 var(--menu-font);border:1px solid var(--menu-edge);background:#243329;color:var(--menu-paper);cursor:pointer}
#explore-controls #world-rest.is-ready{background:#4a3a22;border-color:#e0a860;color:#f7e6c4}
#explore-controls .rest-cozy{color:#f2a24e;letter-spacing:1px}

/* Item tiles: a thin accent line on top, no glow. */
html body #game-menu .bl-item-slot{border-top:2px solid color-mix(in srgb,var(--bl-item-accent,#5b6b52) 55%,var(--menu-edge))!important;background:#1b2a20!important}
html body #game-menu .bl-item-slot.is-selected{background:#2c4130!important}
html body #game-menu .bl-item-slot.is-empty{border-top-width:1px!important;background:#152118!important}
/* Where the held stack can go: brighter than any other tile state. */
html body #game-menu .bl-item-slot.is-drop-target,html body #game-menu .bl-item-slot.is-empty.is-drop-target{border-color:#d0e2ad!important;background:#35502e!important;box-shadow:inset 0 0 0 1px #d0e2ad!important}
html body #game-menu .bl-item-slot.is-drop-target .ui-slot-empty-icon{opacity:.8;color:#e9f3c9}
html body #game-menu .smith-header-actions button{white-space:nowrap}
/* The machine progress track is glyph art, not text. */
html body #game-menu#game-menu#game-menu #game-menu-pages .ui-machine-arrow b{font-size:18px!important;line-height:1}

/* Map keys describe the actual markers and remain readable on small windows. */
html body #game-menu #travel-map-legend{display:grid!important;gap:10px}
html body #game-menu #local-map-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;padding:12px 0;text-align:left}
html body #game-menu .map-key-item{display:flex;align-items:flex-start;gap:9px;min-width:0}
html body #game-menu .map-key-item>svg{width:20px!important;height:20px!important;flex:0 0 20px}
html body #game-menu .map-key-item strong{display:block;color:var(--menu-paper);font-weight:600}
html body #game-menu .map-key-item small{display:block;color:var(--menu-muted);line-height:1.5;white-space:normal}
html body #game-menu #travel-zone-title,html body #game-menu #travel-worldmap-panel>.group-title{white-space:normal;overflow-wrap:anywhere;max-width:100%}

html body #game-menu #travel-worldmap .worldmap-node.selected:not(.current)>polygon{stroke:#8ed1dd!important}
html body #game-menu #travel-worldmap .worldmap-node.current>polygon{stroke:#fff0b0!important}

/* Settings: every tab is one full-width column. Each row is title and help on
   the left and a control column of one fixed width on the right, so sliders,
   toggles, selects and buttons line up across Video, Audio, Controls, Gameplay
   and Debug. The footer shares the same right edge. */
:root{--settings-control:min(400px,44%)}
html body #game-menu#game-menu #settings-modal .settings-view{max-width:none;width:100%}
html body #game-menu#game-menu #settings-modal .settings-view :is(.settings-section,#controls-bindings,.quality-details-body){width:100%;max-width:none;margin-left:0;margin-right:0}
html body #game-menu#game-menu #settings-modal .settings-view .group-title{margin:28px 0 0!important;padding:0 0 10px;border-bottom:1px solid var(--menu-edge)}
html body #game-menu#game-menu #settings-modal .settings-view .settings-section:first-child>.group-title:first-child,html body #game-menu#game-menu #settings-modal .settings-view>.group-title:first-child{margin-top:0!important}
html body #game-menu#game-menu #settings-modal .settings-view :is(.setting-row,.controls-binding-row,.settings-control-block):not([hidden]){display:grid!important;grid-template-columns:minmax(0,1fr) var(--settings-control)!important;align-items:center!important;column-gap:40px!important;row-gap:6px;margin:0!important;padding:14px 0!important;border:0;border-bottom:1px solid #2c3a2c!important;background:transparent!important}
html body #game-menu#game-menu #settings-modal .settings-view .setting-control{display:flex!important;flex-direction:row!important;flex-wrap:wrap;align-items:center!important;justify-content:flex-end!important;gap:10px;width:100%;min-width:0;margin:0}
html body #game-menu#game-menu #settings-modal .settings-view .setting-control>select{width:100%}
html body #game-menu#game-menu #settings-modal .settings-view .setting-range{display:grid!important;grid-template-columns:minmax(0,1fr) 60px!important;align-items:center;gap:14px;width:100%!important;margin:0}
html body #game-menu#game-menu #settings-modal .settings-view .setting-range>*{grid-column:auto!important;grid-row:auto!important;position:static!important;margin:0!important}
html body #game-menu#game-menu #settings-modal .settings-view .setting-range>input[type=range]{width:100%!important;min-width:0}
html body #game-menu#game-menu #settings-modal .settings-view .setting-range>:is(output,div){justify-self:end;width:auto!important;min-width:0!important;color:var(--menu-gold);font-variant-numeric:tabular-nums;text-align:right}
html body #game-menu#game-menu #settings-modal .settings-view .controls-binding-key{justify-self:end;min-width:84px}
html body #game-menu#game-menu #settings-modal .settings-view .controls-preset-row{display:flex;gap:10px;padding:14px 0;border-bottom:1px solid #2c3a2c}
html body #game-menu#game-menu #settings-modal .settings-view .quality-details>summary{padding:12px 0;border-bottom:1px solid #2c3a2c;color:var(--menu-gold);cursor:pointer}
html body #game-menu#game-menu #settings-modal .settings-view .setting-help:empty{display:none}
html body #game-menu#game-menu #settings-modal .settings-view .view-zoom-control kbd{margin-left:8px}
html body #game-menu#game-menu #settings-modal #settings-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;padding-top:16px;border-top:1px solid var(--menu-edge)}
@media (max-width:640px){
  html body #game-menu#game-menu #settings-modal .settings-view :is(.setting-row,.controls-binding-row,.settings-control-block){grid-template-columns:minmax(0,1fr)!important}
  html body #game-menu#game-menu #settings-modal .settings-view .setting-control{justify-content:flex-start}
}