/* ROTTAMI 0.5.1 — interfaccia industriale coordinata ai distretti. Caricare dopo mobile.css.
   I colori sono locali ai menu: campo, HUD e disegno Canvas restano indipendenti. */

.progression:not(.in-field) {
  background: #3c5153;
  background-image: linear-gradient(180deg, #4d6063, #3c5153 360px);
}

.progression .hub-screen,
.progression .command-header,
.progression .pwa-bar,
.progression dialog {
  --bg: #3c5153;
  --panel: #4d6063;
  --ink: #f4f1df;
  --muted: #d1dbcd;
  --line: #91aaa1;
  --orange: #dfab67;
  --mint: #b7dcae;
  --mono: Arial, Helvetica, sans-serif;
  --sans: Arial, Helvetica, sans-serif;
  color-scheme: dark;
  color: var(--ink);
  font-family: var(--sans);
}

.progression .hub-screen { background: #3c5153; background-image: linear-gradient(135deg, #b7dcae08, transparent 55%), repeating-linear-gradient(0deg, transparent 0 5px, #19313709 5px 6px); }
.progression .hub-screen :is(h1, h2, h3, h4) { color: #f4f1df; letter-spacing: -.35px; }
.progression .hub-screen :is(p, small) { overflow-wrap: break-word; }
.progression .hub-screen :is(button, a),
.progression dialog :is(button, .file-label),
.progression .command-header button,
.progression .pwa-bar button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
}
.progression .hub-screen button:focus-visible,
.progression dialog button:focus-visible,
.progression .command-header :is(button, a):focus-visible,
.progression .pwa-bar button:focus-visible {
  outline: 3px solid #dfab67;
  outline-offset: 3px;
}
.progression .hub-screen button:disabled,
.progression dialog button:disabled {
  opacity: 1;
  color: #afbeb6 !important;
  background: #344548 !important;
  border-color: #697f79 !important;
  box-shadow: none !important;
  cursor: default;
}

/* Acciaio petrolio, salvia e ambra: la stessa famiglia cromatica della mappa. */
.progression .command-header { background: #4d6063; border-bottom: 2px solid #91aaa1; }
.progression .command-header .brand { color: #f4f1df; letter-spacing: -.7px; }
.progression .command-header .brand small { color: #c8d3c7; letter-spacing: 2px; }
.progression .command-header .brand-mark { background: #dfab67; color: #182c2e; border: 2px solid #91aaa1; border-radius: 7px; transform: none; }
.progression .command-header .brand-mark span { color: #304447; }
.progression .command-header :is(.pilot-rank, .permanent-wallet small, .icon-button span) { color: #d1dbcd; letter-spacing: .2px; }
.progression .command-header :is(.permanent-wallet strong, #alloys-value) { color: #f4f1df; font-weight: 800; }
.progression .command-header :is(.currency-icon, .alloy-icon) { color: #f1c98a; }
.progression .command-header .status-dot { background: #b7dcae; }
.progression .command-header .icon-button { border: 2px solid #91aaa1; border-radius: 9px; background: #4d6063; color: #f4f1df; }
.progression .command-nav { background: #304447; border: 2px solid #91aaa1; border-radius: 12px; box-shadow: 0 3px 0 #203539; }
.progression .command-nav .nav-tab { color: #f4f1df; border-color: transparent; border-radius: 9px; background: transparent; letter-spacing: .15px; }
.progression .command-nav .nav-tab span { color: inherit; letter-spacing: .15px; font-weight: 750; }
.progression .command-nav .nav-tab .nav-index { color: #c8d3c7; }
.progression .command-nav .nav-tab.active { color: #182c2e; background: #dfab67; box-shadow: inset 0 -3px 0 #b57d41; }
.progression .command-nav .nav-tab.active .nav-index { color: #182c2e; }
.progression .nav-badge { background: #dfab67; color: #182c2e; border: 2px solid #304447; font-family: Arial, sans-serif; font-weight: 800; }
.progression .pwa-bar { background: #42595d; border-color: #829584; }
.progression .pwa-bar > span { color: #d8e0d2; font-weight: 700; letter-spacing: .2px; }
.progression .pwa-bar button { color: #f4f1df; background: #4d6063; border: 1px solid #8fa69c; border-radius: 7px; font-family: Arial, sans-serif; font-weight: 700; letter-spacing: 0; }
.progression .storage-notice { background: #66583c; color: #fff0c4; border-bottom: 2px solid #dfab67; }

/* Tipografia e superfici comuni ai cinque menu. */
.progression .hub-screen .eyebrow,
.progression .hub-screen .section-heading > span,
.progression .hub-screen .list-title > span {
  color: #d1dbcd;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .35px;
}
.progression .hub-screen .hub-heading h1 { color: #f4f1df; letter-spacing: -.7px; }
.progression .hub-screen .hub-heading h1 em { color: #a3d7d0; }
.progression .hub-screen :is(.hangar-counter, .campaign-progress) { color: #d1dbcd; }
.progression .hub-screen :is(.hangar-counter strong, .campaign-progress strong) { color: #f4f1df; }
.progression .hub-screen :is(.hangar-counter span, .campaign-progress > span) { font-family: Arial, sans-serif; letter-spacing: .3px; }
.progression .hub-screen :is(.campaign-progress-track, .season-progress-track, .contract-progress) { background: #2d4246; border: 1px solid #819a90; border-radius: 7px; overflow: hidden; }
.progression .hub-screen :is(#campaign-fill, #season-progress, .contract-progress i) { background: #dfab67; border-radius: 5px; }
.progression .hub-screen .section-heading { border-color: #748d84; }
.progression .hub-screen :is(.progression-footnote, .archive-copy, .configuration-hint, .hub-foot) { color: #d1dbcd; letter-spacing: 0; }
.progression .hub-screen .progression-footnote { font-size: 11px; line-height: 1.6; }
.progression .hub-screen .hub-foot { border-color: #748d84; font-family: Arial, sans-serif; }
.progression .frontier-footer { color: #d1dbcd; border-color: #748d84; letter-spacing: .2px; }
.progression .hub-screen :is(.primary-button, .secondary-button, .progression-action, .upgrade-buy),
.progression dialog :is(.primary-button, .secondary-button, .progression-action, .file-label) {
  min-height: 44px;
  border: 2px solid #91aaa1;
  border-radius: 9px;
  padding: 11px 14px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .15px;
  box-shadow: 0 3px 0 #263d41;
  white-space: normal;
}
.progression .hub-screen :is(.primary-button, .progression-action, .upgrade-buy),
.progression dialog :is(.primary-button, .progression-action) { background: #dfab67; color: #182c2e; }
.progression .hub-screen .secondary-button,
.progression dialog :is(.secondary-button, .file-label) { background: #4d6063; color: #f4f1df; }
.progression .hub-screen button:active:not(:disabled),
.progression dialog button:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.progression .hub-screen :is(.screen-segments, .archive-filters, .research-selector) { border-color: #748d84; background: #3c5153; }
.progression .hub-screen :is(.screen-segments, .archive-filters, .research-selector) button {
  min-height: 44px;
  color: #d8e0d2;
  background: #4d6063;
  border: 2px solid #8fa69c;
  border-radius: 9px;
  font: 800 11px/1.2 Arial, sans-serif;
  letter-spacing: .15px;
}
.progression .hub-screen :is(.screen-segments, .archive-filters, .research-selector) button:is(.active, [aria-pressed="true"]) {
  background: #dfab67;
  color: #182c2e;
  border-color: #91aaa1;
  box-shadow: 0 3px 0 #28464b;
}
.progression .hub-screen :is(.mission-brief, .rover-workbench, .chassis-option, .upgrade-card, .blueprint-tile, .lab-part, .season-panel, .daily-challenge, .contract-card, .tier-card, .achievement-card) {
  background: #4d6063;
  background-image: linear-gradient(135deg, #e7e8d309, transparent 55%);
  color: #f4f1df;
  border: 2px solid #91aaa1;
  border-radius: 12px;
  box-shadow: 0 3px 0 #263e42;
}

/* Mappa e preparazione del mezzo. Le coordinate restano quelle del layout. */
.progression .hub-screen .map-board { border: 2px solid #91aaa1; border-radius: 12px; overflow: hidden; box-shadow: 0 3px 0 #263e42; }
.progression .hub-screen :is(.map-toolbar, .map-legend) { color: #d8e0d2; background: #42595d; border-color: #7f958c; font-family: Arial, sans-serif; letter-spacing: .2px; }
.progression .hub-screen .district-selector { background: #4d6063; border-color: #8fa69c; }
.progression .hub-screen .district-tab { background: #4d6063; border-color: #7b9289; border-top-width: 3px; color: #f4f1df; }
.progression .hub-screen .district-tab strong { color: #f4f1df; }
.progression .hub-screen .district-tab > span { color: #d8e0d2; font-weight: 800; }
.progression .hub-screen .district-tab small { color: #d1dbcd; }
.progression .hub-screen .district-tab.active { background: #3d6568; border-top-color: #dfab67; }
.progression .hub-screen .district-tab.locked { opacity: .7; }
.progression .hub-screen .mission-node { border: 2px solid #91aaa1; border-radius: 11px; background: #4d6063; color: #f4f1df; box-shadow: 0 3px 0 #142d3266; }
.progression .hub-screen .mission-node.available { color: #f4f1df; border-color: #dfab67; }
.progression .hub-screen .mission-node.selected { color: #182c2e; background: #dfab67; border-color: #91aaa1; box-shadow: 0 0 0 3px #dfab6755, 0 3px 0 #142d3266; }
.progression .hub-screen .mission-node.complete { color: #bfe1b4; background: #435f52; border-color: #a3c797; }
.progression .hub-screen .mission-node.locked { color: #b7c5bb; background: #34474a; border-color: #6f877e; }
.progression .hub-screen .mission-node small { color: #f4f1df; font: 700 10px/1.3 Arial, sans-serif; letter-spacing: 0; text-shadow: 0 1px 3px #122c31; }
.progression .hub-screen .mission-node.locked small { color: #c0cfc2; }
.progression .hub-screen :is(.brief-topline, .mission-facts, .mission-objectives, .mission-loadout) { border-color: #7f978d; color: #d1dbcd; }
.progression .hub-screen :is(.mission-facts strong, .mission-number, .goal-row b, .mission-loadout strong) { color: #f4f1df; }
.progression .hub-screen :is(.mission-brief > p, .goal-row, .mission-lock) { color: #d1dbcd; font-size: 12px; line-height: 1.5; }
.progression .hub-screen .mission-brief h2 { color: #f4f1df; }
.progression .hub-screen :is(.workbench-topline, .workbench-bottomline) { color: #d8e0d2; border-color: #748d84; background: #42595d; font-family: Arial, sans-serif; letter-spacing: .25px; }
.progression .hub-screen .rover-preview { background-color: #42595d; border-color: #8ca69b; }
.progression .hub-screen .chassis-option:is(.selected, [aria-pressed="true"]) { background: #3d6364; border-color: #a3d7d0; box-shadow: 0 3px 0 #26454a; }
.progression .hub-screen .chassis-option :is(small, .chassis-check) { color: #d1dbcd; }
.progression .hub-screen .chassis-option.locked strong { color: #b7c6bc; }
.progression .hub-screen .chassis-glyph { color: #a3d7d0; }
.progression .hub-screen .weapon-option { background: #4d6063; color: #f4f1df; border: 2px solid #8ca69b; border-radius: 9px; min-height: 44px; font: 700 12px Arial, sans-serif; }
.progression .hub-screen .weapon-option > span { color: #a3d7d0; }
.progression .hub-screen .weapon-option.selected { background: #dfab67; color: #182c2e; border-color: #91aaa1; }
.progression .hub-screen .weapon-option.selected > span { color: #182c2e; }
.progression .hub-screen :is(.upgrade-symbol, .upgrade-content strong) { color: #a3d7d0; }
.progression .hub-screen .upgrade-content p { color: #d1dbcd; font-size: 12px; }
.progression .hub-screen .upgrade-pips i { background: #2e4549; border-color: #81978e; }
.progression .hub-screen .upgrade-pips i.filled { background: #dfab67; border-color: #a3d7d0; }
.progression .hub-screen .livery-option { color: #d8e0d2; border: 2px solid #8ca69b; border-radius: 9px; background: #4d6063; font-family: Arial, sans-serif; font-weight: 700; }
.progression .hub-screen .livery-option i { border: 1px solid #91aaa1; border-radius: 5px; background: var(--livery, #dfab67); }
.progression .hub-screen .livery-option.selected { color: #182c2e; border-color: #91aaa1; background: #dfab67; }
.progression .hub-screen .livery-option.locked { opacity: .65; }

/* Le superfici ambra usano testo scuro anche per i dettagli non ereditati. */
.progression .hub-screen .mission-node.selected small { color: #f4f1df; }
.progression .hub-screen .livery-option.selected :is(span, small) { color: #182c2e; }
.progression .workshop-dialog .offer-button.selected :is(.offer-name, .offer-description, .offer-value, .part-rank, .shape-badge, .ability-badge) { color: #182c2e; }

/* Icone locali: tratto e proporzioni comuni, senza caratteri dipendenti dal telefono. */
.progression :is(.ui-icon, .action-icon) { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.progression button > .action-icon { margin-inline-end: 6px; }
.progression :is(.icon-button, .dialog-close) > .action-icon { margin: 0; }
.progression .tech-node-orb i .ui-icon { width: 9px; height: 9px; }
.progression .weapon-option .weapon-art { display: inline-block; width: 36px; height: 32px; flex: 0 0 36px; vertical-align: middle; }
.progression .weapon-option .weapon-art canvas { width: 100% !important; height: 100% !important; max-width: none; object-fit: contain; display: block; }
.progression .workshop-dialog .assembly-cell { position: relative; }
.progression .workshop-dialog .assembly-cell.footprint-anchor { border-color: #ffdc9d; box-shadow: inset 0 0 0 2px #dfab67; }
.progression :is(.cell-art, .mini-cell-art) { display: block; position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.progression .part-cell-preview { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: fill; image-rendering: auto; pointer-events: none; }
.progression .workshop-dialog .cell-rank { display: block; position: absolute; top: 1px; right: 1px; z-index: 3; color: #f4f1df; background: #20383ecc; border-radius: 2px; padding: 1px; font: 800 6px/1 Arial, sans-serif; pointer-events: none; }
.progression .workshop-dialog .cell-rank b { font-size: 6px; }
.progression .workshop-dialog .assembly-cell.evolved .cell-rank { color: #ffdc9d; }
.progression .workshop-dialog .cell-health { z-index: 4; }
.progression .mini-cell { position: relative; overflow: hidden; }

/* Progetti: vignette dritte e anteprime Canvas senza filtri che le sgranino. */
.progression .hub-screen :is(.blueprint-tile-top, .blueprint-tile-stats, .lab-part-heading, .lab-part-stats) { color: #d1dbcd; font-family: Arial, sans-serif; letter-spacing: .2px; }
.progression .hub-screen .blueprint-tile-top { font-size: 9px; }
.progression .hub-screen .blueprint-tile-top > span:first-child { color: #d8e0d2; font-size: 10px; font-weight: 800; }
.progression .hub-screen .blueprint-tile-top > span:last-child { font-size: 9px; }
.progression .hub-screen .blueprint-tile::before { background-image: linear-gradient(#d1dbcd18 1px, transparent 1px), linear-gradient(90deg, #d1dbcd18 1px, transparent 1px); }
.progression .hub-screen .blueprint-glyph { border: 2px solid #91aaa1; border-radius: 12px; background: #42595d; box-shadow: 0 3px 0 #263e42; transform: none; width: 88px; height: 80px; margin: 20px auto; padding: 4px; }
.progression .hub-screen .blueprint-tile p { color: #d1dbcd; font-size: 12px; line-height: 1.55; }
.progression .hub-screen .blueprint-tile-stats { border-color: #748d84; }
.progression .hub-screen .blueprint-tile-stats span { color: #d1dbcd; font-family: Arial, sans-serif; font-size: 9px; letter-spacing: 0; }
.progression .hub-screen .blueprint-tile-stats b { color: #f4f1df; font-family: Arial, sans-serif; font-weight: 800; font-size: 13px; }
.progression .hub-screen .blueprint-tile.unknown { background: #344548; border-color: #6e867d; box-shadow: 0 3px 0 #263e42; }
.progression .hub-screen .blueprint-tile.unknown h3 { color: #bdc8bd; }
.progression .hub-screen .blueprint-tile.unknown .blueprint-glyph { opacity: .65; }
.progression .hub-screen :is(.shape-badge, .ability-badge, .part-rank, .part-level) { color: #f4f1df; font-family: Arial, sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .1px; }
.progression .hub-screen .lab-part-art { width: 150px; height: 100px; margin: 8px auto; padding: 4px; background: #42595d; border: 2px solid #829a8f; border-radius: 12px; }
.progression .hub-screen .lab-part-description { color: #d1dbcd; font-size: 12px; line-height: 1.6; }
.progression .hub-screen .lab-part-stats { border-color: #748d84; font-size: 10px; }
.progression .hub-screen .lab-part-stats b { color: #f4f1df; font-family: Arial, sans-serif; font-weight: 800; }
.progression .hub-screen .evolution-preview { border-color: #cda368; background: #66583e; border-radius: 8px; padding: 12px; }
.progression .hub-screen .evolution-preview > span { color: #ffdda3; font-size: 10px; font-weight: 800; letter-spacing: .2px; }
.progression .hub-screen .evolution-preview strong { color: #ffe4b2; }
.progression .hub-screen .evolution-preview p { color: #ebd7af; font-size: 12px; line-height: 1.5; }
.progression .hub-screen :is(.evolution-requirement, .part-max) { color: #d1dbcd; font-size: 11px; }
.progression .hub-screen :is(.lab-part.evolved, .blueprint-tile.evolved) { border-color: #dfab67; background: linear-gradient(145deg, #6a5b3d, #4d6063 58%); box-shadow: 0 3px 0 #3b372b; }
.progression .hub-screen .lab-part.evolved .part-level { color: #ffdda3; }
.progression .hub-screen .part-preview,
.progression .workshop-dialog .part-preview { display: block; width: 100%; height: 100%; image-rendering: auto; object-fit: contain; pointer-events: none; }

/* Albero delle ricerche: tre percorsi paralleli, collegamenti e nodi tattili. */
.progression .hub-screen .progression-note { background: #3d6065; border: 2px solid #799f9e; border-radius: 12px; }
.progression .hub-screen .progression-note > span { color: #a3d7d0; }
.progression .hub-screen .progression-note p { color: #d8e0d2; font-size: 12px; line-height: 1.5; }
.progression .hub-screen #research-tree { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.progression .hub-screen .tech-tree-root { position: relative; grid-column: 1 / -1; justify-self: center; width: max-content; max-width: 100%; margin: 0 0 9px; padding: 12px 24px; color: #182c2e; border: 2px solid #91aaa1; border-radius: 12px; background: #dfab67; font: 800 14px/1.3 Arial, sans-serif; text-align: center; box-shadow: 0 3px 0 #9b713e; }
.progression .hub-screen .tech-tree-root::after { content: ""; position: absolute; top: 100%; left: 50%; width: 2px; height: 20px; background: #91aaa1; }
.progression .hub-screen #research-tree .research-branch { position: relative; display: flex; flex-direction: column; min-width: 0; gap: 0; background: #42595d; border: 2px solid #819a90; border-radius: 12px; padding: 12px; }
.progression .hub-screen #research-tree .research-branch::before { content: ""; position: absolute; left: 50%; top: -16px; height: 14px; width: 2px; background: #91aaa1; }
.progression .hub-screen #research-tree .research-branch:not(:last-child)::after { content: ""; position: absolute; left: 50%; top: -16px; width: calc(100% + 18px); height: 2px; background: #91aaa1; }
.progression .hub-screen #research-tree .research-branch-heading { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 4px 0 12px; margin: 0; background: transparent; border: 0; min-width: 0; text-align: center; }
.progression .hub-screen .research-branch-heading > span { color: #a3d7d0; font-size: 23px; }
.progression .hub-screen .research-branch-heading h2 { color: #f4f1df; margin: 0; font-size: 16px; letter-spacing: -.2px; }
.progression .hub-screen .research-branch-heading small { width: 100%; color: #d1dbcd; font: 700 9px Arial, sans-serif; letter-spacing: .2px; }
.progression .hub-screen .tech-node-list { display: flex; flex-direction: column; gap: 14px; }
.progression .hub-screen .tech-node { position: relative; width: 100%; min-height: 52px; display: flex; align-items: center; gap: 9px; padding: 5px 8px; color: #f4f1df; background: #4d6063; border: 2px solid #8fa69c; border-radius: 10px; box-shadow: 0 3px 0 #283e41; text-align: left; }
.progression .hub-screen .tech-node + .tech-node::before { content: ""; position: absolute; top: -16px; left: 29px; width: 3px; height: 14px; background: #8ea398; }
.progression .hub-screen .tech-node-orb { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border: 2px solid #91aaa1; border-radius: 50%; background: #42595d; color: #f4f1df; font: 900 16px/1 Arial, sans-serif; }
.progression .hub-screen .tech-node-orb i { position: absolute; right: -4px; bottom: -3px; display: grid; place-items: center; width: 15px; height: 15px; border: 1px solid currentColor; border-radius: 50%; background: #4d6063; color: #f4f1df; font: 900 10px/1 Arial, sans-serif; }
.progression .hub-screen .tech-node-label { color: inherit; font: 750 12px/1.25 Arial, sans-serif; overflow-wrap: break-word; min-width: 0; }
.progression .hub-screen .tech-node.available { border-color: #a3d7d0; background: #3d6364; }
.progression .hub-screen .tech-node.available .tech-node-orb { background: #dfab67; color: #182c2e; }
.progression .hub-screen .tech-node.done { border-color: #a3c797; background: #435f52; }
.progression .hub-screen .tech-node.done .tech-node-orb { background: #486e50; color: #f4f1df; border-color: #bfe1b4; }
.progression .hub-screen .tech-node:is(.selected, [aria-pressed="true"]) { color: #182c2e; border-color: #91aaa1; background: #dfab67; box-shadow: 0 0 0 2px #dfab67, 0 3px 0 #8b7048; }
.progression .hub-screen .tech-node.locked { color: #bac7be; background: #3a4c50; border-color: #71877f; box-shadow: 0 3px 0 #263d41; }
.progression .hub-screen .tech-node.locked .tech-node-orb { color: #b9c8bd; border-color: #799087; background: #40554f; }
.progression .hub-screen .research-node { background: #4d6063; border: 2px solid #819a90; border-radius: 10px; }
.progression .hub-screen .research-node :is(p, small, .research-node-meta) { color: #d1dbcd; }
.progression .hub-screen .research-node .research-cost { color: #f4f1df; }
.progression #research-detail-dialog { width: min(440px, calc(100% - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: auto; padding: 24px; }
.progression #research-detail-dialog h2 { color: #f4f1df; font-size: 26px; margin: 16px 0 12px; letter-spacing: -.5px; }
.progression #research-detail-dialog p { color: #d1dbcd; line-height: 1.6; font-size: 14px; }
.progression .research-detail-icon { display: grid; place-items: center; width: 60px; height: 60px; border: 2px solid #91aaa1; border-radius: 50%; background: #dfab67; color: #182c2e; font: 900 24px Arial, sans-serif; }
.progression .research-detail-cost { color: #f4f1df; font: 800 20px Arial, sans-serif; margin: 16px 0 10px; }
.progression .research-detail-state { color: #d8e0d2; font-size: 12px; font-weight: 700; margin-bottom: 16px; }
.progression #research-detail-dialog [data-research] { width: 100%; }

/* Libretto: contrasto, progressione e ricompense subito riconoscibili. */
.progression .hub-screen #claim-all-button { width: 100%; margin: 0 0 18px; justify-content: center; background: #dfab67; font-size: 14px; }
.progression .hub-screen :is(.season-panel p, .season-panel > small, .daily-challenge p, .daily-challenge > small, .contract-card p, .achievement-card p) { color: #d1dbcd; font-size: 12px; line-height: 1.55; }
.progression .hub-screen .season-progress-meta { color: #d1dbcd; font-family: Arial, sans-serif; letter-spacing: .1px; }
.progression .hub-screen .season-progress-meta strong { color: #f4f1df; }
.progression .hub-screen :is(.daily-date, .daily-record span, .contract-card-top > b) { color: #d8e0d2; font-family: Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .15px; }
.progression .hub-screen .daily-record { background: #42595d; border-color: #82998f; border-radius: 9px; }
.progression .hub-screen .daily-record strong { color: #f4f1df; }
.progression .hub-screen .reward-line { color: #ffd69b; font: 800 12px/1.5 Arial, sans-serif; letter-spacing: .1px; }
.progression .hub-screen .contract-card-top h4 { color: #f4f1df; }
.progression .hub-screen :is(.contract-card.ready, .tier-card.ready, .achievement-card.ready) { border-color: #a3d7d0; box-shadow: 0 3px 0 #2c4a4f; background: #3e6264; }
.progression .hub-screen :is(.contract-card.claimed, .tier-card.claimed, .achievement-card.claimed) { opacity: 1; background: #435f52; border-color: #8bb29b; box-shadow: 0 3px 0 #263f36; }
.progression .hub-screen :is(.contract-card.claimed, .tier-card.claimed, .achievement-card.claimed) .progression-action { color: #bdddb4; background: #3c554b; border-color: #819f8e; }
.progression .hub-screen .reroll-action { color: #f4f1df; background: #4d6063; }
.progression .hub-screen .tier-card > span { color: #d8e0d2; font: 800 10px Arial, sans-serif; letter-spacing: .2px; }
.progression .hub-screen .tier-card > strong { color: #dfab67; text-shadow: 0 2px 0 #263e42; }
.progression .hub-screen .tier-card > p { color: #f4f1df; font: 700 12px/1.45 Arial, sans-serif; }
.progression .hub-screen .tier-card > small { color: #d1dbcd; font: 700 10px Arial, sans-serif; }
.progression .hub-screen .tier-card.locked { opacity: 1; background: #3a4c50; border-color: #758a80; }
.progression .hub-screen .tier-card .progression-action { font-size: 11px; padding-inline: 6px; }
.progression .hub-screen .achievement-symbol { color: #a3d7d0; font-size: 28px; }
.progression .hub-screen .achievement-card.claimed .achievement-symbol { color: #a3c797; }
.progression .hub-screen .achievement-card small { color: #d1dbcd; font-size: 11px; }
.progression .hub-screen :is(#reroll-note, #season-ready, #achievements-count) { color: #d8e0d2; font: 700 10px/1.5 Arial, sans-serif; letter-spacing: 0; }

/* Dialoghi e officina: medesima lingua visiva, senza cambiare il montaggio. */
.progression dialog { background: #4d6063; border: 2px solid #91aaa1; border-radius: 16px; box-shadow: 0 8px 0 #142d3266, 0 24px 70px #10282d66; }
.progression dialog::backdrop { background: #10272bc9; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.progression dialog :is(h2, h3, strong) { color: #f4f1df; letter-spacing: -.3px; }
.progression dialog :is(p, li, small, label, .eyebrow) { color: #d1dbcd; letter-spacing: .1px; }
.progression dialog :is(p, li) { line-height: 1.6; }
.progression dialog .dialog-close { color: #f4f1df; width: 36px; height: 36px; border: 2px solid #7f978d; border-radius: 9px; background: #3c5153; }
.progression dialog .control-choices button { color: #d8e0d2; border: 2px solid #8ca198; border-radius: 10px; background: #3c5153; }
.progression dialog .control-choices button[aria-pressed="true"] { border-color: #91aaa1; background: #3d6364; color: #f4f1df; box-shadow: 0 3px 0 #26464b; }
.progression dialog .control-choices button b { color: #f4f1df; }
.progression dialog .control-choices button span { color: #d8e0d2; }
.progression dialog textarea { color: #f4f1df; background: #4d6063; border: 2px solid #8ca69b; border-radius: 9px; font: 12px/1.5 Consolas, monospace; }
.progression dialog .save-preview { color: #d8e0d2; background: #354e52; border-color: #819a90; border-radius: 8px; }
.progression dialog :is(.save-preview.error, .save-warning) { color: #ffbb99; }
.progression .workshop-dialog .workshop-heading h2 { color: #f4f1df; letter-spacing: -.5px; }
.progression .workshop-dialog .workshop-heading h2 em { color: #a3d7d0; }
.progression .workshop-dialog .workshop-sector { color: #a3d7d0; }
.progression .workshop-dialog .workshop-sector span { color: #d1dbcd; }
.progression .workshop-dialog :is(.workshop-strip, .workshop-actions) { background: #42595d; border-color: #819a90; border-radius: 9px; }
.progression .workshop-dialog .repair-button { color: #f4f1df; background: #435f52; border: 2px solid #a3c797; border-radius: 8px; font-family: Arial, sans-serif; font-weight: 800; letter-spacing: .1px; }
.progression .workshop-dialog .workshop-wallet { color: #d1dbcd; font-family: Arial, sans-serif; letter-spacing: .1px; }
.progression .workshop-dialog .workshop-wallet strong { color: #f4f1df; }
.progression .workshop-dialog .workshop-tabs button { background: #42595d; border: 2px solid #829a90; border-radius: 8px; color: #d8e0d2; font: 800 11px Arial, sans-serif; letter-spacing: .15px; }
.progression .workshop-dialog .workshop-tabs button:is(.active, [aria-selected="true"]) { background: #dfab67; border-color: #91aaa1; color: #182c2e; }
.progression .workshop-dialog .workshop-tabs b { color: #f4f1df; font-weight: 800; }
.progression .workshop-dialog .panel-label { color: #d1dbcd; font-family: Arial, sans-serif; font-weight: 700; letter-spacing: .2px; }
.progression .workshop-dialog .assembly-grid { background: #2e464a; border: 2px solid #91aaa1; border-radius: 10px; background-image: none; }
.progression .workshop-dialog .assembly-cell { background: #3c5153; border-color: #8fa69c; border-radius: 5px; }
.progression .workshop-dialog .assembly-cell.filled { color: #f4f1df; border: 2px solid #91aaa1; background: #42595d; background: color-mix(in srgb, var(--part-color) 28%, #3c5153); }
.progression .workshop-dialog .assembly-cell small { color: #f4f1df; font-family: Arial, sans-serif; font-weight: 800; letter-spacing: 0; }
.progression .workshop-dialog .assembly-cell.can-place { border-color: #a3d7d0; background: #527b78; }
.progression .workshop-dialog .assembly-cell.selected { outline: 3px solid #dfab67; outline-offset: -3px; }
.progression .workshop-dialog .cell-health { background: #132f3555; border-radius: 3px; }
.progression .workshop-dialog :is(.selected-info, .synergy-info) { color: #d8e0d2; font-family: Arial, sans-serif; }
.progression .workshop-dialog .offer-button { color: #f4f1df; border: 2px solid #829a90; border-radius: 10px; background: #4d6063; box-shadow: 0 3px 0 #283f43; }
.progression .workshop-dialog .offer-button.selected { color: #182c2e; border-color: #91aaa1; background: #dfab67; box-shadow: 0 3px 0 #a17c46; }
.progression .workshop-dialog .offer-button.evolved { border-color: #dfab67; }
.progression .workshop-dialog .offer-symbol { background: #42595d; border: 1px solid #8ba097; border-radius: 7px; color: #f4f1df; aspect-ratio: 1; padding: 2px; }
.progression .workshop-dialog .offer-description { color: #d1dbcd; }
.progression .workshop-dialog .offer-value { color: #ffdda3; font-family: Arial, sans-serif; font-weight: 800; }
.progression .workshop-dialog .offer-name .part-rank { color: #f4f1df; font-family: Arial, sans-serif; }
.progression .workshop-dialog .route-option { background: #3c5153; border: 2px solid #8ca198; border-radius: 10px; }
.progression .workshop-dialog .route-option.selected { border-color: #91aaa1; background: #456b69; }
.progression .workshop-dialog .route-option > span { color: #f4f1df; font-family: Arial, sans-serif; font-weight: 800; }
.progression .workshop-dialog .route-option small { color: #d1dbcd; }
.progression .workshop-dialog .workshop-feedback { color: #b7dcae; font-family: Arial, sans-serif; font-weight: 700; }
.progression .workshop-dialog .workshop-feedback.error { color: #ffb093; }
.progression .workshop-dialog .no-offers { color: #d1dbcd; border-color: #8ca198; }

@media (hover: hover) {
  .progression .hub-screen :is(.primary-button, .progression-action, .upgrade-buy):hover:not(:disabled),
  .progression dialog :is(.primary-button, .progression-action):hover:not(:disabled) { background: #edc181; border-color: #91aaa1; }
  .progression .hub-screen :is(.secondary-button, .chassis-option, .weapon-option, .livery-option):hover:not(:disabled),
  .progression dialog .secondary-button:hover:not(:disabled) { border-color: #a3d7d0; }
  .progression .hub-screen .tech-node:hover { border-color: #a3d7d0; }
  .progression .command-nav .nav-tab:hover:not(.active) { background: #4b6869; color: #f4f1df; }
}

/* Dimensioni dei contenitori e aree fisse restano affidate a mobile.css. */
@media (max-width: 760px) {
  .progression .command-nav { border-radius: 12px 12px 0 0; border-bottom: 0; box-shadow: 0 -3px 0 #263e42; }
  .progression .hub-screen .hub-heading h1 { letter-spacing: -.5px; }
  .progression .hub-screen .screen-segments { background: #3c5153; }
  .progression .hub-screen .archive-filters { gap: 6px; }
  .progression .hub-screen #research-tree { gap: 8px; }
  .progression .hub-screen #research-tree .research-branch { padding: 8px 5px; border-radius: 10px; }
  .progression .hub-screen #research-tree .research-branch:not(:last-child)::after { width: calc(100% + 8px); }
  .progression .hub-screen .research-branch-heading h2 { font-size: 11px; letter-spacing: -.15px; }
  .progression .hub-screen .research-branch-heading > span { font-size: 20px; }
  .progression .hub-screen .research-branch-heading small { font-size: 8px; }
  .progression .hub-screen .tech-node { min-height: 52px; gap: 4px; padding: 4px; }
  .progression .hub-screen .tech-node-orb { width: 32px; height: 32px; flex-basis: 32px; font-size: 13px; }
  .progression .hub-screen .tech-node-label { font-size: 10px; line-height: 1.2; }
  .progression .hub-screen .tech-node + .tech-node::before { left: 19px; }
  .progression .hub-screen .blueprint-tile { padding: 13px 10px; }
  .progression .hub-screen .blueprint-tile-top { font-size: 8px; gap: 5px; }
  .progression .hub-screen .blueprint-tile-top > span:first-child { font-size: 9px; }
  .progression .hub-screen .blueprint-tile-top > span:last-child { font-size: 8px; }
  .progression .hub-screen .blueprint-tile-stats span { font-size: 8px; }
  .progression .hub-screen .blueprint-tile-stats b { font-size: 12px; }
  .progression .hub-screen .blueprint-glyph { width: 82px; height: 76px; }
  .progression .hub-screen .lab-part-stats { font-size: 9px; }
  .progression .hub-screen :is(.season-panel, .daily-challenge, .lab-part, .contract-card, .achievement-card) { padding: 17px; }
  .progression .hub-screen .tier-card { padding: 14px 10px; }
  .progression .hub-screen .tier-card > span { font-size: 10px; }
  .progression .hub-screen .tier-card > p { font-size: 12px; }
  .progression .hub-screen .tier-card > small { font-size: 10px; }
  .progression .hub-screen .tier-card .progression-action { font-size: 10px; }
  .progression .hub-screen :is(#reroll-note, #season-ready, #achievements-count) { font-size: 9px; }
  .progression :is(.help-dialog, .settings-dialog) { font-size: 13px; }
}

@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .progression .command-nav { border-radius: 12px 12px 0 0; border-bottom: 0; box-shadow: 0 -3px 0 #263e42; }
  .progression .hub-screen .screen-segments { background: #3c5153; }
  .progression .hub-screen .screen-segments button { min-height: 38px; }
  .progression .hub-screen #lab-view > .hub-heading { height: 22px; min-height: 22px; margin-bottom: 4px; align-items: center; }
  .progression .hub-screen #lab-view > .hub-heading h1 { font-size: 20px; line-height: 1; }
  .progression .hub-screen #lab-view .hangar-counter { display: flex; align-items: center; gap: 8px; padding: 0; }
  .progression .hub-screen #lab-view .hangar-counter > span { max-width: none; font-size: 9px; }
  .progression .hub-screen #lab-view .hangar-counter strong { margin: 0; font-size: 16px; }
  .progression .hub-screen #lab-view > .screen-segments { margin-bottom: 4px; padding: 0; }
  .progression .hub-screen #lab-view > .screen-segments button { min-height: 28px; height: 28px; padding: 4px 10px; font-size: 11px; }
  .progression .hub-screen #lab-view [data-panel-content="lab:research"] > .progression-note { display: none; }
  .progression .hub-screen #research-tree { gap: 6px 12px; }
  .progression .hub-screen .tech-tree-root { color: #182c2e; height: 22px; min-height: 22px; margin: 0; padding: 2px 20px; border-radius: 8px; font-size: 11px; line-height: 14px; box-shadow: 0 2px 0 #9b713e; }
  .progression .hub-screen .tech-tree-root::after { height: 6px; }
  .progression .hub-screen #research-tree .research-branch { display: flex; padding: 3px 4px; }
  .progression .hub-screen #research-tree .research-branch::before { top: -6px; height: 4px; }
  .progression .hub-screen #research-tree .research-branch:not(:last-child)::after { top: -6px; width: calc(100% + 12px); }
  .progression .hub-screen #research-tree .research-branch-heading { height: 18px; min-height: 18px; padding: 0 0 2px; flex-wrap: nowrap; }
  .progression .hub-screen .research-branch-heading h2 { font-size: 12px; }
  .progression .hub-screen .research-branch-heading > span { font-size: 16px; }
  .progression .hub-screen .tech-node-list { gap: 4px; }
  .progression .hub-screen .tech-node { min-height: 27px; height: 27px; padding: 0 6px; border-radius: 7px; gap: 8px; box-shadow: 0 2px 0 #283e41; }
  .progression .hub-screen .tech-node-orb { width: 23px; height: 23px; flex-basis: 23px; font-size: 10px; border-width: 1px; }
  .progression .hub-screen .tech-node-orb i { width: 10px; height: 10px; right: -3px; bottom: -2px; font-size: 7px; }
  .progression .hub-screen .tech-node-label { font-size: 11px; }
  .progression .hub-screen .tech-node + .tech-node::before { left: 17px; top: -6px; height: 4px; width: 2px; }
  .progression .hub-screen .blueprint-tile h3 { font-size: 17px; }
  .progression .workshop-dialog .repair-button { min-height: 32px; }
  .progression .workshop-dialog .workshop-tabs button { min-height: 32px; font-size: 10px; }
  .progression .workshop-dialog .workshop-actions :is(.primary-button, .secondary-button) { min-height: 44px; padding: 9px 14px; font-size: 11px; }
  .progression .workshop-dialog #remove-button { min-height: 38px; }
  .progression .workshop-dialog .offer-symbol { width: 34px; flex-basis: 34px; height: 40px; }
  .progression .workshop-dialog .offer-name { font-size: 11px; }
  .progression .workshop-dialog .offer-description { font-size: 10px; }
  .progression #research-detail-dialog { padding: 18px 24px; }
  .progression #research-detail-dialog h2 { font-size: 22px; }
  .progression #research-detail-dialog p { font-size: 13px; }
}

@media (max-width: 1024px) and (max-height: 380px) and (orientation: landscape) {
  .progression .hub-screen #lab-view > .hub-heading { height: 20px; min-height: 20px; }
  .progression .hub-screen #lab-view > .hub-heading h1 { font-size: 18px; }
  .progression .hub-screen #lab-view > .screen-segments button { min-height: 26px; height: 26px; }
  .progression .hub-screen .tech-tree-root { color: #182c2e; height: 18px; min-height: 18px; padding: 0 16px; font-size: 10px; line-height: 14px; }
  .progression .hub-screen #research-tree .research-branch { padding: 2px 4px; }
  .progression .hub-screen #research-tree .research-branch-heading { height: 18px; min-height: 18px; padding-bottom: 2px; }
  .progression .hub-screen .tech-node-list { gap: 3px; }
  .progression .hub-screen .tech-node { min-height: 22px; height: 22px; border-width: 1px; padding-inline: 6px; }
  .progression .hub-screen .tech-node-orb { width: 19px; height: 19px; flex-basis: 19px; font-size: 9px; }
  .progression .hub-screen .tech-node-orb i { width: 8px; height: 8px; font-size: 6px; }
  .progression .hub-screen .tech-node-label { font-size: 10px; }
  .progression .hub-screen .tech-node + .tech-node::before { left: 15px; top: -4px; height: 3px; }
}

/* Un dialogo chiuso resta escluso anche se il layout orizzontale usa display:grid. */
.progression dialog:not([open]) { display: none !important; }

.progression .arena-overlay { background: #3c5153f5; color: #f4f1df; font-family: Arial, Helvetica, sans-serif; }
.progression .arena-overlay :is(h2, p, .eyebrow, .text-button) { color: #f4f1df; font-family: inherit; }
.progression .arena-overlay h2 { letter-spacing: -.7px; }
.progression .arena-overlay :is(.primary-button, .secondary-button) { border: 2px solid #91aaa1; border-radius: 12px; font-family: inherit; color: #f4f1df; }
.progression .arena-overlay .primary-button { color: #182c2e; background: #dfab67; box-shadow: 0 4px 0 #8c673f; }
.progression .arena-overlay .secondary-button { background: #4d6063; }
.progression .result-rewards span { color: #d8e0d2; border-color: #8fa69c; }
.progression .result-rewards b { color: #f4f1df; }
.progression .result-meta { color: #d8e0d2; }
.progression .pause-tools { display: flex; gap: 20px; justify-content: center; align-items: center; }
.progression .workshop-dialog .selected-art { width: 108px; height: 72px; border: 2px solid #8fa69c; border-radius: 10px; background: #42595d; }
.progression .workshop-dialog .selected-art[hidden] { display: none; }
.progression .rotate-notice { background: #3c5153fa; color: #f4f1df; }
.progression .rotation-card { color: #f4f1df; font-family: Arial, Helvetica, sans-serif; }
.progression .rotation-card h2 { color: #f4f1df; font-size: 25px; }
.progression .rotation-card p { color: #d8e0d2; line-height: 1.6; }
.progression .rotation-card small { color: #d1dbcd; font-size: 12px; }
.progression .rotation-card button { color: #182c2e; background: #dfab67; border: 2px solid #91aaa1; border-radius: 12px; font: 700 11px Arial, sans-serif; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .in-field.progression .pause-overlay h2 { font-size: 36px !important; line-height: 1.02; margin: 6px 0; }
  .progression .pause-overlay > p { margin: 6px 0 12px; }
  .progression .pause-overlay .primary-button { min-height: 44px; height: 44px; }
  .progression .pause-overlay .text-button { min-height: 32px; margin-top: 4px; }
  .progression #result-rewards > span { font-size: 10px; }
  .progression #result-rewards b { font-size: 15px; }
  .progression .result-meta { font-size: 10px; }
  .progression .result-score > small { font-size: 10px; }
  .in-field.progression .objective-hud strong { font-size: 12px; }
  .in-field.progression .objective-hud small { font-size: 10px; }
  .in-field.progression .hud-label { font-size: 9px; }
  .progression .workshop-dialog .offer-symbol { width: 64px; flex-basis: 64px; height: 74px; }
  .progression .workshop-dialog .offer-button { min-height: 136px; }
  .progression .workshop-dialog .assembly-detail { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .progression .workshop-dialog .selected-info { flex: 1; min-width: 120px; }
}

.progression .hub-screen .claim-all-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; }
.progression .hub-screen #claim-all-summary { font-size: 12px; color: #d8e0d2; }
.progression .hub-screen .claim-all-bar #claim-all-button { width: auto; min-width: 190px; margin: 0; padding: 10px 16px; flex-shrink: 0; }
@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .progression .hub-screen #service-view > .hub-heading { min-height: 24px; height: 24px; margin: 0 0 5px; }
  .progression .hub-screen #service-view > .hub-heading h1 { font-size: 20px; }
  .progression .hub-screen #service-view > .hub-heading .hangar-counter { display: flex; align-items: center; gap: 8px; }
  .progression .hub-screen #service-view > .hub-heading .hangar-counter span { display: none; }
  .progression .hub-screen .claim-all-bar { margin: 0 0 7px; }
  .progression .hub-screen .claim-all-bar #claim-all-button { min-height: 36px; height: 36px; font-size: 12px; padding: 6px 14px; }
  .progression .hub-screen #service-view > .screen-segments { margin-bottom: 10px; }
  .progression .hub-screen #service-view > .screen-segments button { min-height: 32px; height: 32px; }
}
@media (max-width: 420px) and (orientation: portrait) {
  .progression .hub-screen .claim-all-bar { flex-wrap: wrap; }
  .progression .hub-screen .claim-all-bar #claim-all-button { width: 100%; }
}
@media (max-height: 380px) and (orientation: landscape) {
  .progression #research-detail-dialog { padding: 10px 20px; }
  .progression #research-detail-dialog h2 { margin: 8px 0; }
  .progression #research-detail-dialog p { margin-top: 8px; margin-bottom: 8px; }
  .progression #research-detail-dialog .research-detail-icon { color: #182c2e; width: 42px; height: 42px; font-size: 19px; }
  .progression #research-detail-dialog [data-research] { margin-top: 8px; }
  .progression .workshop-dialog .assembly-grid { width: 164px; max-width: 164px; height: 164px; }
  .progression .workshop-dialog .assembly-cell { height: 27px; min-height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .progression .hub-screen *,
  .progression .command-header *,
  .progression .pwa-bar *,
  .progression dialog * { animation: none !important; transition: none !important; }
}