/* The world is the primary surface. Details live in deliberate, quiet panels. */
body.game-layout {
  --panel: #202320;
  --bronze: #9e8760;
  --ink: #151917;
  --line: #414740;
  --mint: #c4cbb7;
  --gold: #cab88b;
  --muted: #a3aaa0;
  height: 100dvh;
  overflow: hidden;
  background: #171c18;
  color: #e4e6dd;
  font-size: 13px;
}
.game-layout [hidden] { display: none !important; }
.game-layout header { height: 38px; padding: 0 20px; background: #1b211d; border: 0; }
.game-layout .brand { font-size: 17px; font-weight: 650; letter-spacing: -.6px; color: #d9ded2; }
.game-layout .brand span { color: inherit; }
.game-layout .brand i, .game-layout header nav, .game-layout #focus-btn { display: none; }
.game-layout .status { gap: 14px; font-size: 10px; color: #9da799; }
.game-layout #connection { font-size: 10px; color: #a8b59f; }
.game-layout #online { font-size: 10px; color: #9da799; }
.game-layout #help-btn { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 2px; color: #b2b9ab; }
.game-layout main, .game-layout.focus-mode main { display: block; padding: 0; max-width: none; min-height: 0; height: calc(100dvh - 38px); }
.game-layout .game-shell, .game-layout.focus-mode .game-shell { height: 100%; width: 100%; max-width: none; min-height: 0; border: 0; border-radius: 0; margin: 0; }
.game-layout footer, .game-layout .world-badge, .game-layout .controls, .game-layout .world-title .eyebrow { display: none; }
.game-layout .vignette { background: linear-gradient(#101a1633, transparent 25%, transparent 75%, #101a1644); box-shadow: none; }
.game-layout .world-title { top: 20px; left: auto; right: 20px; width: 150px; display: block; text-align: right; }
.game-layout .world-title h1 { margin: 0 0 4px; font-size: 13px; font-weight: 550; letter-spacing: 0; text-shadow: 0 1px 3px #000; }
.game-layout .coords { font-size: 10px; color: #c7d0bd; }
.game-layout .coords small { display: none; }

/* Player vitals have one footprint, without an avatar card or repeated badges. */
.game-layout .game-bottom { display: contents; }
.game-layout .player-card { position: absolute; top: 20px; left: 20px; width: 188px; min-height: 62px; padding: 0 0 12px; background: none; border: 0; border-radius: 0; box-shadow: none; pointer-events: none; z-index: 4; text-shadow: 0 1px 3px #172218; }
.game-layout .avatar, .game-layout #level { display: none; }
.game-layout .player-card > div:not(.avatar):not(.mana-meter) { width: 100%; }
.game-layout .player-card strong { display: block; font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.game-layout .hp { width: 100%; height: 6px; background: #18221bcc; border-radius: 1px; box-shadow: 0 1px 3px #0003; }
.game-layout #hp-bar { background: #acc18b; }
.game-layout #hp-text { position: absolute; top: 0; right: 0; margin: 0; font-size: 10px; color: #d3dacb; }
.mana-meter { width: 100%; height: 3px; background: #1c2b30b3; position: absolute; top: 43px; left: 0; }
.mana-meter i { display: block; height: 100%; background: #80aeb9; }
.game-layout #save-status { position: absolute; left: 20px; bottom: 56px; font-size: 9px; color: #c2cbb499; }
.game-layout .voyage-strip { display: none; left: 50%; bottom: 134px; transform: translateX(-50%); width: max-content; max-width: 90%; }
.game-layout .voyage-strip.mounted { display: flex; }
.game-layout .voyage-strip #weapon-readout, .game-layout #mana-readout { display: none; }
.game-layout .voyage-strip #seat-readout { background: #1d261de6; border: 0; border-radius: 2px; padding: 5px 8px; font-size: 11px; }

/* A compact objective; the full recipe and destinations are one click away. */
.mission-hud { position: absolute; top: 93px; left: 20px; width: 230px; z-index: 4; background: #1c251de8; padding: 12px; border-radius: 2px; }
.mission-hud.folded { background: none; padding: 0; }
.mission-toggle { position: relative; display: block; width: 100%; padding: 0 18px 0 0; border: 0; border-radius: 0; text-align: left; background: none; text-shadow: 0 1px 3px #14221a; }
.mission-toggle:hover { background: none; color: #fff; }
.mission-toggle small { display: block; font-size: 10px; font-weight: 400; color: #b5c2a7; margin-bottom: 5px; }
.mission-title { display: block; font-size: 12px; font-weight: 500; line-height: 1.5; color: #eceddc; }
.mission-toggle::after { content: '−'; position: absolute; right: 0; bottom: 1px; color: #b5bda9; }
.mission-hud.folded .mission-toggle::after { content: '+'; }
.mission-hud #quests > strong { display: none; }
.mission-hud #quests > p { display: block !important; margin: 12px 0 8px; font-size: 11px; line-height: 1.65; color: #bec6b5; }
.mission-hud #quests > small { display: block; font-size: 11px; line-height: 1.7; color: #d1c397; }
.mission-hud .journey-actions { display: flex; gap: 7px; margin-top: 12px; }
.mission-hud .journey-actions button { border: 1px solid #65715a80; background: #ffffff06; padding: 6px 10px; border-radius: 2px; font-size: 11px; }

/* Action keys and navigation are separate, with secondary destinations tucked away. */
.game-layout .hotbar { position: absolute; left: 50%; bottom: 65px; transform: translateX(-50%); display: flex; gap: 3px; padding: 0; border: 0; border-radius: 0; background: none; z-index: 6; }
.game-layout .hotbar button { width: 54px; min-width: 0; height: 57px; padding: 4px 2px; gap: 2px; background: #20291fed; border: 1px solid #d7dfbd22; border-radius: 2px; box-shadow: none; }
.game-layout .hotbar button:hover { background: #344131; }
.game-layout .hotbar button.selected { background: #394332ed; border-color: #cbbb8c; box-shadow: inset 0 -2px #cbbb8c; }
.game-layout .hotbar button > span, .game-layout .hotbar .asset-icon { width: 28px; height: 28px; }
.game-layout .hotbar small { font-size: 10px; color: #cdd4c2; }
.game-layout .hotbar kbd { top: 3px; left: 4px; color: #a9b49d; font-size: 8px; }
.game-dock { position: absolute; bottom: 0; left: 0; right: 0; height: 48px; display: flex; justify-content: center; align-items: stretch; gap: 2px; z-index: 8; background: #1a231ced; border: 0; }
.dock-button { min-width: 90px; padding: 0 16px; display: flex; gap: 10px; align-items: center; justify-content: center; color: #cbd1c3; border: 0; border-radius: 0; background: none; font-size: 12px; }
.dock-button:hover, .dock-button[aria-expanded=true] { background: #ffffff09; color: #ecebd8; }
.dock-button kbd, .menu-action kbd { color: #84917f; font: 10px system-ui; background: none; border: 0; }
.more-toggle::after { content: '⌃'; font-size: 12px; color: #87937f; }
.more-toggle[aria-expanded=true]::after { content: '⌄'; }
.more-actions { position: absolute; bottom: 56px; left: calc(50% + 77px); width: 210px; padding: 7px 12px; background: #202821; border: 1px solid #56604c80; border-radius: 3px; box-shadow: 0 8px 30px #0005; }
.menu-group + .menu-group { border-top: 1px solid #d0dbc31a; padding-top: 5px; margin-top: 5px; }
.menu-group { padding-bottom: 5px; }
.menu-action { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 33px; padding: 6px; background: none; border: 0; border-radius: 2px; font-size: 12px; text-align: left; }
.menu-action:hover { background: #ffffff0a; }
.context-actions { position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 5; }
.context-actions button { padding: 7px 12px; background: #202a22eb; border: 1px solid #9dab8180; border-radius: 2px; font-size: 11px; color: #e0e4ce; }
.game-layout #target-label { bottom: 120px; font-size: 11px; border-radius: 2px; }

.refinery-help { margin-top: 12px; font-size: 12px; color: #a7b39c; }
.refinery-help summary { cursor: pointer; padding: 5px 0; }
.game-layout .queue-empty { font-size: 12px; margin: 18px 0; }
.game-layout .refining-recipes { margin-bottom: 14px; }

/* Inventory and chat share a single drawer. */
.game-layout aside.game-drawer { position: absolute; display: none; right: 12px; top: 50px; bottom: 52px; width: 372px; max-width: calc(100vw - 24px); z-index: 12; overflow: auto; padding: 46px 18px 18px; background: #1c211ffb; border: 0; border-radius: 6px; box-shadow: 0 16px 50px #0006; }
.game-layout aside.game-drawer.open { display: block; }
.game-drawer > .panel { display: none !important; }
.game-drawer[data-panel=inventory] > .inventory, .game-drawer[data-panel=chat] > .chat { display: block !important; border: 0; background: none; padding: 0; }
.drawer-close { position: absolute; top: 12px; right: 14px; padding: 5px 8px; border: 0; border-radius: 2px; font-size: 11px; }
.game-layout .inventory .slot { border-radius: 2px; background: #ffffff04; border-color: #c9d5bc1c; }
.game-layout #chat-log { height: 240px; }
.game-layout .panel-title { font-size: 13px; }

/* Common menu surfaces: restrained type, plain tabs, flat item cells. */
.game-layout .overlay { padding: 18px; background: #0b130fc9; backdrop-filter: blur(2px); }
.game-layout .dialog { padding: 28px; border: 0; border-radius: 6px; background: #1c211f; box-shadow: 0 24px 80px #0007; max-height: calc(100dvh - 36px); overflow: auto; }
.game-layout .expedition-dialog { width: min(920px, 94vw) !important; padding: 24px !important; background: #1c211f !important; max-height: calc(100dvh - 36px) !important; }
.game-layout .dialog > .eyebrow { display: none; }
.game-layout .dialog h2 { margin: 0 0 20px; font-size: 20px; letter-spacing: -.4px; font-weight: 600; }
.game-layout .dialog p { color: #b6bfb0; line-height: 1.7; }
.game-layout .dialog .close { position: absolute; top: 14px; right: 14px; float: none; margin: 0; border: 0; border-radius: 2px; background: none; line-height: 1; }
.game-layout .modal-intro { font-size: 12px; margin-bottom: 18px; max-width: 760px; }
.game-layout .expedition-dialog button:not(.close) { border-radius: 2px; font-size: 12px; background: #ffffff04; border-color: #a8b59a40; }
.game-layout .set-tabs { gap: 0; margin: 0 0 18px; border-bottom: 1px solid #b7c5a92b; }
.game-layout .set-tabs button { padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; font-size: 12px; color: #a6b19e; }
.game-layout .set-tabs button.active { background: none; border-bottom-color: #c8b68a; color: #efe4c6; }
.game-layout .station-actions { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #b7c5a91a; }
.game-layout .station-actions button { border: 0; padding: 5px 8px; font-size: 11px; background: none; }
.game-layout .vehicle-card, .game-layout .boss-card, .game-layout .gear-card, .game-layout .life-card { border: 0; border-radius: 2px; padding: 16px; background: #ffffff04; box-shadow: none; }
.game-layout .vehicle-card h3, .game-layout .boss-card h3, .game-layout .gear-card h3 { font-size: 14px; font-weight: 600; color: #dddcc6; }
.game-layout .vehicle-card button, .game-layout .boss-card button, .game-layout .gear-card button, .game-layout .life-card button { border-radius: 2px; font-size: 12px; padding: 8px 10px; }
.game-layout .vehicle-art { height: 100px; }
.game-layout .speed-meter { height: 3px; border-radius: 0; }
.game-layout .loadout-slot { border: 0; border-bottom: 1px solid #a8b59a30; border-radius: 0; }
.game-layout .loadout-stats, .game-layout .upgrade-row, .game-layout .refining-queue { border: 0; border-radius: 2px; background: #ffffff04; }
.game-layout .refinery-summary { border: 0; border-bottom: 1px solid #b7c5a92b; border-radius: 0; background: none; padding: 0 0 18px; }
.game-layout .refinery-summary .vehicle-art { width: 100px; height: 82px; }
.game-layout .refining-job { border-radius: 0; background: none; border-bottom: 1px solid #b7c5a914; padding: 8px 0; }
.game-layout .refining-recipes { display: block; }
.facility-tiers { margin-top: 20px; padding-top: 14px; border-top: 1px solid #b7c5a92b; }
.facility-tiers summary { padding: 5px 0 12px; cursor: pointer; color: #bac5ad; font-size: 12px; }
.facility-tiers[open] summary { color: #e1d4ae; }
.codex-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; }
.codex-list { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid #b7c5a925; padding-right: 14px; }
.game-layout .expedition-dialog .codex-list button { padding: 11px 8px; border: 0; border-left: 2px solid transparent; background: none; text-align: left; font-size: 12px; color: #a9b59f; }
.game-layout .expedition-dialog .codex-list button.active { border-left-color: #c9b98b; background: #ffffff06; color: #ebe2c6; }
.codex-select { display: none; }
.codex-detail { display: block; }
.game-layout .codex-detail .boss-card { padding: 10px 0; background: none; }
.game-layout .codex-detail .boss-portrait { width: 160px; height: 160px; max-width: 100%; margin: 12px auto; }
.game-layout .codex-detail .boss-card-top { font-size: 9px; }
.game-layout .codex-detail .pattern-hint { min-height: 0; }
.game-layout .codex-detail .boss-meta { margin: 8px 0; }
.game-layout .codex-detail .set-preview { display: block; margin-bottom: 10px; }
.codex-detail .card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.game-layout .world-map-layout { align-items: start; }
.game-layout #world-map { width: 100%; height: auto; max-height: 65dvh; object-fit: contain; border-radius: 2px; }
.game-layout .encounter-hud { top: 18px; left: 50%; transform: translateX(-50%); width: 340px; max-width: calc(100% - 500px); border: 0; border-radius: 2px; background: #202721ed; }
.game-layout #welcome .dialog { width: 390px; min-height: 0; border-radius: 3px; }
.game-layout #welcome h2 { font-size: 25px; margin: 0 0 12px; }
.game-layout #welcome .eyebrow, .game-layout .welcome-art, .game-layout .welcome-mark, .game-layout .welcome-meta { display: none; }
.game-layout #welcome button, .game-layout #welcome input { border-radius: 2px; }
.game-layout #welcome .new-character { flex-wrap: wrap; font-size: 11px !important; }
.game-layout #welcome .new-character small { font-size: 10px; }

@media (max-width: 720px) {
  .game-layout header { padding: 0 12px; }
  .game-layout .player-card { left: 14px; top: 18px; width: 160px; }
  .mission-hud { left: 14px; top: 87px; width: 200px; }
  .mission-hud.folded { width: 175px; }
  .game-layout .world-title { right: 15px; top: 18px; width: 115px; }
  .game-layout #save-status { display: none; }
  .game-layout .hotbar button { width: 50px; }
  .dock-button { min-width: 0; flex: 1; padding: 0 9px; gap: 7px; font-size: 11px; }
  .more-actions { left: auto; right: 10px; width: 205px; }
  .game-layout .encounter-hud { top: 215px; width: 310px; max-width: 90%; }
  .codex-layout { grid-template-columns: 1fr; gap: 12px; }
  .game-layout .codex-list { display: none; }
  .codex-select { display: block; width: 100%; padding: 9px 12px; background: #2b3429; border: 1px solid #63734f; border-radius: 2px; color: #e0e3c9; font: 12px system-ui; }
  .game-layout .codex-detail .boss-portrait { width: 100px; height: 100px; margin: 4px auto; }
  
  .game-layout .world-map-layout { display: block; }
  .game-layout #map-legend { display: flex; flex-wrap: wrap; gap: 8px; }
  .game-layout #map-legend p { width: 100%; }
  .game-layout #map-legend button { font-size: 11px; }
}
@media (max-width: 480px) {
  .game-layout #online { display: none; }
  .game-layout .overlay { padding: 10px; }
  .game-layout .dialog { padding: 18px; max-height: calc(100dvh - 20px); }
  .game-layout .expedition-dialog { width: min(920px, 94vw) !important; padding: 18px !important; max-height: calc(100dvh - 20px) !important; }
  .game-layout .set-tabs button { padding: 9px 10px; font-size: 11px; }
  .game-layout .dialog h2 { font-size: 19px; margin-bottom: 16px; }
  .game-layout .refinery-summary { gap: 10px; }
  .game-layout .refinery-summary .vehicle-art { width: 65px; }
  .dock-button { padding: 0 8px; gap: 4px; }
  .dock-button kbd { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-layout button { transition: none; }
}

/* Refining is a list of operations, not a gallery of repeated cards. */
.game-layout .refinery-summary .build-cost { display: block; margin-top: 8px; font-size: 11px; color: #c8b98e; }
.refinery-recipe { display: grid; grid-template-columns: 40px minmax(130px, 1fr) minmax(130px, 1fr) auto auto; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid #b7c5a925; }
.refinery-recipe-name strong { display: block; font-size: 13px; font-weight: 550; }
.refinery-recipe-name small { display: block; margin-top: 6px; font-size: 11px; color: #9faa94; }
.refinery-recipe .build-cost { font-size: 11px; color: #c2b38c; line-height: 1.7; }
@media(max-width:720px) {
  .refinery-recipe { grid-template-columns: 36px 1fr auto; gap: 9px; }
  .refinery-recipe > img { grid-column: 1; grid-row: 1 / 3; width: 32px; }
  .refinery-recipe-name { grid-column: 2; grid-row: 1; }
  .refinery-recipe .build-cost { grid-column: 2; grid-row: 2; }
  .refinery-recipe > button { grid-column: 3; }
  .refinery-recipe > button:nth-last-child(2) { grid-row: 1; }
  .refinery-recipe > button:last-child { grid-row: 2; }
}

/* Quiet surfaces. Selection uses a single marker; focus keeps an accessible outline. */
.game-layout button { font-family: inherit; touch-action: manipulation; transition: background-color .12s, border-color .12s, color .12s; }
.game-layout button:focus-visible, .game-layout input:focus-visible, .game-layout select:focus-visible { outline: 2px solid #e3c58d; outline-offset: 3px; }
.game-layout button:disabled { opacity: .55; cursor: not-allowed; }
.game-layout button:not(:disabled):active { filter: brightness(.85); }
.game-layout .dialog h2 { padding: 0 44px 18px 0; border-bottom: 0; color: #eee5d1; }
.game-layout .dialog .close, .game-layout .drawer-close { min-width: 36px; min-height: 36px; border: 0; background: none; color: #cfc5ad; }
.game-layout .dialog button:not(.close):not(:disabled):hover { border-color: #baa176; background-color: #343c30; }
.game-layout .recipe button, .game-layout .craft-open, .game-layout .primary { min-height: 40px; border: 0; background: #b9c3a4; color: #182019; border-radius: 4px; box-shadow: none; }
.game-layout .recipe button:disabled { background: #272c27; border-color: #515547; color: #b1b4a6; }
.game-layout .recipe { padding: 18px 0; gap: 16px; border-bottom: 1px solid #b7c5a91c; }
.game-layout .recipe-info strong { color: #e2ddcc; font-size: 13px; }
.game-layout .recipe-info small { display: block; margin: 6px 0; font-size: 12px; line-height: 1.6; color: #a8b0a2; }
.material-cost { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 9px; }
.material-cost span { padding: 2px 0; font-size: 11px; background: none; border: 0; border-radius: 0; color: #b5cba7; }
.material-cost .missing { color: #d8a491; border-color: #bd7b6040; }
.game-layout .hotbar { gap: 3px; padding: 4px; background: #141b17ed; border: 0; border-radius: 5px; box-shadow: 0 4px 18px #0004; }
.game-layout .hotbar button { background: transparent; border: 0; box-shadow: none; }
.game-layout .hotbar button.selected { border: 0; background: #344035; box-shadow: inset 0 -2px #bdc7ab; }
.game-dock { background: #151d18f5; border-top: 0; }
.dock-button { min-height: 44px; }
.dock-button:hover { box-shadow: none; background: #ffffff08; }
.dock-button kbd { border: 0; padding: 2px 4px; border-radius: 2px; }
.more-actions { background: #1c241e; border: 0; box-shadow: 0 12px 30px #0006; padding: 12px; }
.menu-action { min-height: 40px; }
.game-layout .panel-title { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 0; color: #eee5d1; }
.inventory-filters { display: flex; gap: 4px; margin-bottom: 16px; }
.inventory-filters button { padding: 8px 14px; border: 1px solid transparent; border-radius: 2px; background: none; color: #a5af9f; font-size: 12px; }
.inventory-filters button[aria-pressed=true] { border-color: transparent; background: #ffffff0b; color: #e4e8dc; }
.game-layout #inventory { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; }
.game-layout .inventory .slot { position: relative; width: 100%; height: 78px; min-width: 0; padding: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; border-radius: 3px; background: #ffffff04; box-shadow: none; }
.game-layout .inventory .slot:hover { background: #ffffff0b; }
.game-layout .inventory .slot[aria-pressed=true] { background: #354036; box-shadow: inset 0 -2px #bdc7ab; }
.game-layout .slot .asset-icon { width: 35px; height: 35px; }
.game-layout .slot .item-name { position: static; display: block; max-width: 100%; font-size: 10px; line-height: 1.3; color: #c6cabb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-layout .slot .count { position: absolute; top: 4px; right: 5px; bottom: auto; font-size: 10px; color: #efe8d6; text-shadow: 0 1px 3px #000; }
#inventory-detail { position: relative; min-height: 106px; padding: 18px 12px 14px 58px; margin-top: 18px; border-top: 0; border-bottom: 0; }
#inventory-detail > img { position: absolute; left: 8px; top: 18px; width: 36px; height: 36px; }
#inventory-detail strong { display: block; color: #e2cfaa; font-size: 14px; }
#inventory-detail small { display: block; margin-top: 6px; color: #a9b69d; }
#inventory-detail p { margin: 12px 0 0; font-size: 11px; line-height: 1.7; color: #a9b0a1; }
.game-layout .equipment { line-height: 1.8; font-size: 11px; padding: 14px 0; color: #9aa78f; }
.game-layout .craft-open { width: 100%; }
.game-layout .set-tabs { flex-wrap: wrap; }
@media(max-width:600px) {
  .game-layout .recipe { display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 10px; }
  .game-layout .recipe > button { grid-column: 2; justify-self: start; }
  .game-layout .recipe-icon { width: 34px; height: 34px; }
  .game-layout aside.game-drawer { top: 46px; bottom: 60px; right: 8px; max-width: calc(100vw - 16px); padding: 52px 16px 18px; }
  .game-layout .dialog .close, .game-layout .drawer-close, .game-layout .set-tabs button, .inventory-filters button, .menu-action { min-height: 44px; }
  .game-layout .dialog .close { min-width: 44px; top: 8px; right: 8px; }
  .dock-button kbd { display: none; }
  .game-layout .hotbar { bottom: 62px; }
}
@media(prefers-reduced-motion:reduce) { .game-layout button { transition: none; } }

.game-layout #recipes { border-top: 0; }
.game-layout .recipe { border-top: 0; }

/* Neutralize older component frames so all menus share the same visual language. */
.game-layout .dialog button:not(.close), .game-layout .station-actions button,
.game-layout .loadout-slot, .game-layout .equipment, .game-layout .context-actions button,
.game-layout .mission-hud .journey-actions button { border: 0; box-shadow: none; }
.game-layout .dialog .set-tabs button.active { box-shadow: inset 0 -2px #bdc7ab; color: #e4e8dc; }
.game-layout .dialog .set-tabs button { background: none; }
.game-layout .dialog .set-tabs { border: 0; gap: 4px; }
.game-layout .recipe { border: 0; padding: 20px 0; }
.game-layout .recipe + .recipe { border-top: 1px solid #ffffff08; }
.game-layout .dialog .vehicle-card, .game-layout .dialog .gear-card, .game-layout .dialog .life-card { background: #ffffff03; border: 0; }
.game-layout .dialog .loadout-slot { background: #ffffff04; }
.game-layout .dialog .card-actions button, .game-layout .dialog .vehicle-card button,
.game-layout .dialog .gear-card button, .game-layout .dialog .life-card button { background: #ffffff0a; }
.game-layout .dialog input, .game-layout .dialog select, .game-layout #chat-input { border: 0; border-radius: 4px; background: #101612; }
.game-layout .game-drawer .panel-title { font-size: 18px; font-weight: 600; }
.game-layout #bag-count { font-size: 11px; font-weight: 400; color: #9da797; }
.game-layout .material-cost .missing { color: #cba699; }
.game-layout #inventory-detail strong { color: #e0e6d7; }

.rail-workshop { display:grid;grid-template-columns:128px 1fr;gap:10px 20px;padding:20px 0;align-items:center; }
.rail-workshop .rail-preview { grid-row:1 / 4; }
.rail-workshop h3 { margin:0; }.rail-workshop .card-actions {display:flex;gap:8px;flex-wrap:wrap;}
.rail-preview {width:128px;height:84px;image-rendering:pixelated;}
.rail-tools {display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:20px 0;margin-bottom:16px;}
.rail-tools .build-cost {flex-basis:100%;}.rail-status {color:#bdc7ab;}
.rail-cart-grid {grid-template-columns:repeat(3,minmax(0,1fr));}
.rail-build-bar {position:absolute;left:50%;transform:translateX(-50%);bottom:140px;z-index:9;display:flex;gap:14px;align-items:center;background:#17211bf5;padding:10px 14px;max-width:calc(100% - 24px);width:max-content;border-radius:4px;font-size:12px;}
.rail-build-bar button {white-space:nowrap;border:0;background:#344035;min-height:40px;}
@media(max-width:600px){.rail-cart-grid{grid-template-columns:1fr;}.rail-build-bar{font-size:11px;bottom:138px;}.rail-workshop{grid-template-columns:88px 1fr;gap:8px;}.rail-workshop .rail-preview{width:88px;height:auto;}.rail-workshop .card-actions{grid-column:1 / -1;}}

.rail-workshop .card-actions button {flex:initial;min-width:110px;}

/* Functional focus stays visible; ordinary selection uses material/value contrast. */
.game-layout .hotbar button.selected,.game-layout .inventory .slot[aria-pressed=true],.game-layout .dialog .set-tabs button.active,.avatar-choices button[aria-pressed=true]{box-shadow:none;background:#3a4738}
.game-layout #world-map,.game-layout .rider-list,.game-layout .invite-code,.game-layout .party-member,.game-layout .reward-rule,.game-layout .refining-job,.game-layout .refinery-recipe,.game-layout .facility-tiers,.game-layout .codex-list,.game-layout .dialog .codex-list button,.game-layout .recipe + .recipe{border:0}
.game-layout .party-member + .party-member,.game-layout .refining-job + .refining-job{margin-top:6px}

.audio-dialog{width:min(420px,calc(100vw - 28px));max-height:85dvh;overflow:auto;background:#1a251e;color:#e7deca;border:0;padding:28px;box-shadow:0 18px 60px #0008}
.audio-dialog::backdrop{background:#08110ab3}.audio-dialog h2{font-size:21px;margin:0 0 10px}.audio-dialog p,.audio-dialog small{color:#b2bba9;line-height:1.6}.audio-dialog form{float:right}.audio-dialog button{border:0;background:#344535;padding:10px 14px;min-height:44px;border-radius:2px}.audio-dialog .audio-close{background:none}.audio-sliders{margin:24px 0}.audio-sliders label{display:grid;grid-template-columns:1fr auto;gap:12px;margin:22px 0;font-size:12px}.audio-sliders input{grid-column:1/-1;width:100%;min-height:26px;accent-color:#b8c5a4}.audio-sliders output{font-variant-numeric:tabular-nums;color:#c9bea4}

/* Chapter record: quiet typography and stone imagery, without ornamental frames. */
.progression-dialog{box-sizing:border-box;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:20px 26px 22px;border:0;border-radius:5px;background:#17241f;color:#e7e8d8;box-shadow:0 24px 100px #0009;overflow:auto;}
.progression-dialog::backdrop{background:#07100dcc;backdrop-filter:blur(4px)}
.progression-dialog form{display:flex;justify-content:flex-end;margin:0}
.progression-dialog .progression-close{padding:6px 8px;background:transparent;border:0;box-shadow:none;color:#b7c3b5;font-size:12px}
.progression-art{display:block;width:100%;height:96px;object-fit:contain;image-rendering:pixelated}
.progression-chapter{color:#a7b39e;letter-spacing:.1em;font-size:11px}
.progression-dialog h2{font-size:24px;line-height:1.35;margin:8px 0;color:#e9e2c3;letter-spacing:-.04em}
.progression-description{font-size:14px;line-height:1.8;color:#b7c5b7;margin:0 0 14px}
.progression-count{font-size:12px;color:#cfdbbf}
.progression-dialog progress{display:block;appearance:none;width:100%;height:4px;border:0;background:#2c3b32;margin:8px 0 16px;color:#b5c88c}
.progression-dialog progress::-webkit-progress-bar{background:#2c3b32}
.progression-dialog progress::-webkit-progress-value{background:#b5c88c}
.progression-dialog progress::-moz-progress-bar{background:#b5c88c}
.progression-seals{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;list-style:none;margin:0;padding:0;font-size:12px;color:#7d9485}
.progression-seals li{line-height:1.5}.progression-seals .cleared{color:#d2d7b8}
.progression-next{margin-top:18px;background:#24342b;padding:12px 15px;font-size:13px}.progression-next p{margin:8px 0 0;line-height:1.7;color:#b2c0ae}
.progression-actions{display:flex;gap:12px;margin-top:18px}.progression-actions button{flex:1;min-height:44px;padding:8px;border:0;box-shadow:none;background:#304437;color:#e2e7d1;border-radius:3px;font-size:13px}.progression-actions .progression-continue{background:#c6d2a2;color:#203323}
.progression-dialog.celebrate{animation:chapter-reveal 900ms ease-out}
@keyframes chapter-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:520px){.progression-dialog{padding:18px 20px}.progression-dialog h2{font-size:23px}.progression-art{height:90px}.progression-seals{gap:9px 12px}}
@media(prefers-reduced-motion:reduce){.progression-dialog.celebrate{animation:none}}

.slot.recent-pickup{background-color:#364135}.pickup-badge{display:block;color:#e6ce83;font-size:10px;line-height:1.2}.inventory-drop-actions{flex-wrap:wrap}