.progression-page { --progress-gold: #edc36c; --progress-green: #80e8ab; }
.progression-intro { position: relative; isolation: isolate; overflow: hidden; min-height: 170px; display: flex; align-items: end; border: 1px solid #d4ab4f44; border-radius: 10px; padding: 24px; background: #111b23; }
.progression-intro img { position: absolute; inset: 0 0 0 auto; width: 62%; height: 100%; object-fit: cover; object-position: center 45%; z-index: -2; }
.progression-intro::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,#0d141bf5 20%,#0d141bd9 53%,#0d141b44); z-index: -1; }
.progression-intro > div { max-width: 720px; }
.progression-eyebrow { color: #edc36c; font-size: .66rem; font-weight: 800; letter-spacing: .15em; }
.progression-intro h1 { margin: 8px 0; color: #fff3da; font-size: clamp(1.5rem,3vw,2.3rem); }
.progression-intro p { margin: 0; color: #c1cbd2; line-height: 1.55; max-width: 620px; font-size: .9rem; }
.progression-info { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding: 14px 0 18px; font-size: .8rem; color: #b9c6ce; }
.progression-info strong { color: #f3d397; }
.progression-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding: 14px 18px 0; }
.progression-summary button { display: flex; flex-direction: column; gap: 7px; text-align: left; text-transform: none; min-width: 0; padding: 13px; background: #111b23; }
.progression-summary span { color: #d4b76f; font-size: .62rem; letter-spacing: .1em; }
.progression-summary strong { font-size: .85rem; overflow-wrap: anywhere; }
.mission-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.mission-card,.career-card { display: flex; flex-direction: column; min-width: 0; gap: 12px; padding: 20px; border: 1px solid #ffffff1c; border-radius: 10px; background: linear-gradient(150deg,#19232b,#0f171d); }
.mission-card.complete { border-color: #80e8ab99; }
.mission-card.claimed { border-color: #80e8ab33; }
.mission-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .65rem; }
.mission-top > span { letter-spacing: .12em; color: #a6b8c6; }
.mission-top b { color: #edc36c; }
.mission-card.complete .mission-top b,.mission-card.claimed .mission-top b { color: #80e8ab; }
.mission-card h2,.career-card h2,.territory-detail h2 { margin: 2px 0; color: #f4ead6; font-size: 1.3rem; }
.mission-card p,.career-card p { color: #b9c5cd; line-height: 1.55; font-size: .85rem; margin: 0 0 8px; }
.mission-card p { min-height: 3em; }
.mission-progress-label { display: flex; justify-content: space-between; gap: 12px; font-size: .75rem; margin-top: auto; color: #b9c5cd; }
.progression-page progress { display: block; flex-shrink: 0; width: 100%; height: 7px; border: 0; border-radius: 6px; overflow: hidden; background: #ffffff12; accent-color: #edc36c; }
.progression-page progress::-webkit-progress-bar { background: #ffffff12; }
.progression-page progress::-webkit-progress-value { background: linear-gradient(90deg,#ba8636,#edc36c); border-radius: 6px; }
.mission-reward { display: grid; grid-template-columns: 1fr auto; gap: 6px; border-top: 1px solid #ffffff14; padding: 15px 0 3px; }
.mission-reward > span { grid-column: 1/-1; color: #96a9b7; font-size: .6rem; letter-spacing: .1em; }
.mission-reward strong { color: #80e8ab; }
.mission-reward small { font-size: .75rem; color: #edc36c; align-self: center; }
.progression-page button { white-space: normal; height: auto; line-height: 1.4; padding: 10px 13px; }
.mission-card > button,.career-card > button,.territory-detail > button { border-color: #edc36c66; background: linear-gradient(#d6b365,#a17b32); color: #17130b; text-shadow: none; text-transform: none; font-size: .8rem; }
.mission-card > button.secondary,.territory-detail > button.secondary { background: #ffffff09; color: #ead8b0; }
.progression-note { font-size: .75rem; line-height: 1.6; color: #92a5b4; margin: 18px 0 4px; }
.career-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.career-card { --career-color: #5fc9fb; padding: 20px 16px; border-top: 3px solid var(--career-color); }
.career-traficante { --career-color: #80e8ab; }
.career-assassino { --career-color: #f58b7e; }
.career-empresario { --career-color: #edc36c; }
.career-card.active { background: #263029; outline: 1px solid var(--career-color); outline-offset: -1px; }
.career-symbol { display: grid; place-items: center; height: 56px; width: 56px; border: 1px solid var(--career-color); border-radius: 12px; color: var(--career-color); font-size: 2rem; margin-bottom: 8px; }
.career-card .progression-eyebrow { color: var(--career-color); letter-spacing: .08em; font-size: .6rem; }
.career-benefit { border: 1px solid #edc36c33; border-radius: 7px; padding: 12px; color: #eed69d; line-height: 1.6; font-size: .8rem; background: #e9b85408; }
.career-card .career-benefit { margin-top: auto; min-height: 90px; }
.career-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; padding: 18px; border: 1px solid #edc36c; border-radius: 8px; background: #22251e; }
.career-confirm > div { flex: 1 1 300px; }
.career-confirm p { margin: 7px 0 0; color: #c2ccc4; font-size: .8rem; line-height: 1.5; }
.territory-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,1fr); gap: 16px; }
.territory-map { position: relative; isolation: isolate; align-self: start; min-height: 430px; overflow: hidden; border: 1px solid #859bac44; border-radius: 10px; background: url('/src/assets/card-territorios.png') center/cover; }
.territory-map svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .5; }
.territory-map svg path { fill: none; stroke: #bfd1d733; stroke-width: 1; }
.territory-map svg .map-river { stroke: #338ed044; stroke-width: 7; }
.map-caption { position: absolute; left: 16px; top: 15px; font-size: .56rem; letter-spacing: .15em; color: #c2d3e7; }
.territory-map .territory-marker { position: absolute; transform: translate(-50%,-50%); width: 130px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 6px; border-radius: 8px; background: #0a1425ed; border: 1px solid #b2c8da66; box-shadow: 0 4px 14px #0007; text-transform: none; }
.territory-marker strong { font-size: .73rem; }
.territory-marker small { color: #b7c6d1; font-size: .65rem; }
.map-dot { display: block; width: 8px; height: 8px; background: #a4b5c1; border-radius: 50%; }
.territory-marker.owned .map-dot { background: #80e8ab; box-shadow: 0 0 10px #80e8ab66; }
.territory-marker.rival .map-dot { background: #f58b7e; }
.territory-map .territory-marker.selected { border-color: #edc36c; background: #29291af0; box-shadow: 0 0 0 2px #edc36c33; }
.territory-map .territory-marker-avenida { translate: 0 30px; }
.territory-map .territory-marker-industrial { translate: -40px -10px; }
.territory-map .territory-marker-porto { translate: 30px -30px; }
.territory-map .territory-marker-docas { translate: 30px 0; }
.territory-detail { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid #edc36c44; border-radius: 10px; background: #101b24; min-width: 0; }
.territory-owner { color: #bac8d2; margin: 0; font-size: .8rem; line-height: 1.5; }
.territory-score { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 3px 0; }
.territory-score div { display: flex; flex-direction: column; gap: 7px; }
.territory-score span { font-size: .58rem; letter-spacing: .08em; color: #a5b7c5; }
.territory-score strong { font-size: 1.8rem; color: #eed69d; }
.territory-cost { margin: 2px 0; color: #b7c6ce; line-height: 1.7; font-size: .76rem; }
.territory-strength { color: #aabecd; font-size: .72rem; line-height: 1.5; }
.port-income-card { display: flex; flex-direction: column; gap: 9px; background: #102c30; border: 1px solid #80e8ab44; border-radius: 8px; padding: 14px; min-width: 0; }
.port-income-card > strong { color: #80e8ab; font-size: 1.25rem; }
.port-income-card p { color: #b4cece; font-size: .72rem; line-height: 1.6; margin: 0; }
.port-income-card > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 12px; padding-top: 7px; border-top: 1px solid #ffffff14; font-size: .69rem; color: #bbcecc; }
.port-income-card b { color: #eddfb6; }
.territory-leaders { border-top: 1px solid #ffffff14; padding-top: 8px; font-size: .72rem; color: #b7c6ce; }
.territory-leaders div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px; padding: 6px 0; }
.territory-section-title { margin: 22px 0 12px; font-size: 1rem; color: #f0d59d; }
.territory-benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.territory-benefits button { display: flex; flex-direction: column; gap: 7px; text-align: left; background: #111d26; text-transform: none; min-width: 0; }
.territory-benefits strong { color: #eddbb8; font-size: .82rem; }
.territory-benefits span { color: #b8c8d4; font-size: .75rem; font-weight: 400; }
.territory-benefits small { color: #98aab7; font-size: .66rem; }
.territory-benefits .controlled { border-color: #80e8ab66; }
.territory-benefits .controlled small { color: #80e8ab; }
.territory-feed { background: #101b24; border: 1px solid #ffffff14; border-radius: 8px; padding: 8px 16px; }
.territory-feed p { color: #aebfca; font-size: .76rem; line-height: 1.6; }
.territory-feed strong { color: #e4d2ac; }
.progression-page button:focus-visible,.progression-summary button:focus-visible { outline: 2px solid #edc36c; outline-offset: 2px; }
.city-tile-mark { font-size: 2.5rem; color: #edc36c; }
@media(max-width:1050px) {
  .career-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .territory-layout { grid-template-columns: 1fr; }
  .territory-map { min-height: 400px; }
}
@media(max-width:650px) {
  .progression-intro { min-height: 180px; padding: 18px; }
  .progression-intro img { width: 100%; opacity: .6; }
  .progression-intro::after { background: linear-gradient(90deg,#0d141be8,#0d141b8c); }
  .mission-grid { grid-template-columns: 1fr; gap: 10px; }
  .mission-card { padding: 16px; }
  .mission-card p { min-height: 0; }
  .career-grid { gap: 8px; }
  .career-card { padding: 14px 10px; gap: 9px; }
  .career-card h2 { font-size: 1.1rem; }
  .career-card .career-benefit { padding: 9px; min-height: 0; }
  .career-card p,.career-benefit { font-size: .75rem; }
  .career-card .progression-eyebrow { font-size: .5rem; letter-spacing: 0; }
  .career-card > button { font-size: .72rem; padding: 9px 5px; }
  .progression-summary { grid-template-columns: 1fr; padding: 12px 12px 0; }
  .progression-summary button { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .territory-benefits { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .territory-map { min-height: 400px; }
  .territory-map .territory-marker { width: 90px; padding: 7px 3px; }
  .territory-marker strong { font-size: .62rem; }
  .territory-marker small { font-size: .6rem; }
  .territory-map .territory-marker-industrial { transform: translate(-50%,calc(-50% - 24px)); }
  .territory-map .territory-marker-centro { transform: translate(-50%,calc(-50% + 12px)); }
  .map-caption { font-size: .45rem; }
  .territory-detail { padding: 16px; }
}
@media(max-width:359px) {
  .career-grid,.territory-benefits { grid-template-columns: 1fr; }
  .territory-map .territory-marker { width: 76px; }
  .territory-map .territory-marker-porto { width: 70px; }
}
.career-slot-controls{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.career-slot-controls button{padding:12px;border:1px solid #665225;border-radius:8px;background:#191c1a;color:#eee;cursor:pointer}.career-slot-controls button.selected{border-color:#ffc766;background:#383022}.career-slot-controls button:disabled{opacity:.5;cursor:default}.career-benefits-list{display:grid;gap:10px;margin:16px 0;flex:1}.career-benefits-list>div{padding:10px;border-radius:7px;background:#080e0d;display:grid;gap:5px;overflow-wrap:anywhere}.career-benefits-list span{color:#8fe5b3}.career-benefits-list small{display:block;color:#9ca9a9;margin-top:4px}.career-benefits-list .locked{opacity:.65}.career-card{min-width:0}.career-card progress{width:100%;margin-top:8px}.career-card button{white-space:normal;overflow-wrap:anywhere}.career-card button.secondary{margin-top:8px}.career-training-status{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:15px;border:1px solid #b18b44;border-radius:8px;margin-bottom:15px;background:#252216}@media(max-width:600px){.career-slot-controls>button{flex:1 1 100%}.career-grid{grid-template-columns:1fr}.career-confirm{position:static}}

.career-confirm[role="dialog"]{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 32px));max-height:85vh;overflow:auto;z-index:10000;box-sizing:border-box;box-shadow:0 0 0 100vmax #000b;margin:0}.career-confirm[role="dialog"]>div{flex-basis:100%}

.territory-business-preview{display:grid;gap:5px;border-top:1px solid #ffffff18;padding-top:10px;color:#a9dfbd!important}.territory-business-preview b{color:#f2cb81}.territory-business-state{display:block;color:#d5bd7f;font-size:.75rem;margin-bottom:12px}.territory-business-card{min-width:0;overflow-wrap:anywhere}.territory-business-card>div{flex-wrap:wrap;gap:6px}.territory-feed small{color:#8a9b97;margin-left:8px}

/* Colored map districts are interactive, including keyboard navigation. */
.territory-map .territory-regions{z-index:0;opacity:1;pointer-events:none}.territory-map .territory-regions path{fill:var(--region-color);fill-opacity:0;stroke:var(--region-color);stroke-opacity:.25;stroke-width:2;pointer-events:all;cursor:pointer;transition:fill-opacity .15s,stroke-opacity .15s}.territory-map .territory-regions path:hover,.territory-map .territory-regions path:focus-visible{fill-opacity:.12;stroke-opacity:1;outline:none}.territory-map .territory-regions path.selected{fill-opacity:.06;stroke-opacity:.85;stroke-width:.45}.territory-map .territory-marker{z-index:2}.territory-map .map-caption{z-index:3;pointer-events:none}

/* Preserve the complete 1536×1024 artwork and its clickable coordinate system. */
.territory-layout>.territory-map{width:100%;height:auto;min-height:0;aspect-ratio:3/2;background-size:100% 100%;background-repeat:no-repeat}.territory-layout>.territory-map .territory-regions{height:100%;width:100%}

/* Let the original artwork retain its color and brightness. */
.territory-map .map-caption{background:#08111cbb;border-radius:4px;padding:5px 7px;color:#f0f5ff}.territory-map .territory-marker{background:#08121bea;border-color:#bdcfdf99;box-shadow:0 3px 12px #0009}.territory-map .territory-marker.selected{background:#302816f5;border-color:#ffd575}

/* Label anchors are expressed in the artwork coordinate system, centered in each district. */
.territory-map .territory-marker{translate:0 0;transform:translate(-50%,-50%)}
.territory-map .territory-marker-morro{left:17%!important;top:29%!important}
.territory-map .territory-marker-industrial{left:57%!important;top:27%!important}
.territory-map .territory-marker-porto{left:86%!important;top:43%!important}
.territory-map .territory-marker-avenida{left:21%!important;top:71%!important}
.territory-map .territory-marker-docas{left:61%!important;top:77%!important}
.territory-map .territory-marker-centro{left:48%!important;top:45%!important}