.medieval-game { width: 100%; min-width: 0; margin-inline: auto; color: #eef4e8; }
.medieval-gamebar { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 14px; border: 1px solid #35504a; border-radius: 5px; background: linear-gradient(180deg, #0a1718, #071112); padding: 10px 12px; box-shadow: 0 7px 24px rgb(0 0 0 / .28); }
.medieval-gamebar p { margin: 0; }
.medieval-resource, .medieval-ready { display: flex; align-items: center; gap: 10px; }
.medieval-resource span { border: 1px solid #294743; border-radius: 3px; background: #071516; padding: 8px 13px; color: #f0df9c; font-weight: 800; }
.medieval-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 338px); gap: 0; margin-top: 10px; border: 1px solid #314b46; border-radius: 5px; overflow: hidden; box-shadow: 0 18px 42px rgb(0 0 0 / .3); }
.medieval-layout > main { min-width: 0; }
.medieval-map-shell { position: relative; min-width: 0; overflow: hidden; background: #071c25; }
.medieval-map { display: block; width: 100%; height: clamp(610px, 70vh, 820px); background: #061923; cursor: grab; touch-action: none; user-select: none; }
.medieval-map.is-panning { cursor: grabbing; }
.medieval-terrain-base { pointer-events: none; filter: saturate(.82) brightness(.72) contrast(1.08); }
.medieval-coastline { fill: none; stroke: rgb(223 198 132 / .62); stroke-width: 1.25; pointer-events: none; }
.medieval-sea { fill: #082b3a; }
.medieval-land-base { fill: #465647; stroke: #b69b62; stroke-width: 5; opacity: .98; }
.medieval-road { stroke: #e2c579; stroke-width: 1.25; stroke-dasharray: 5 5; opacity: .22; pointer-events: none; }
.medieval-road.sea-route { stroke: #67bad0; stroke-dasharray: 3 7; opacity: .4; }
.medieval-region { cursor: pointer; }
.medieval-region .region-territory { fill: color-mix(in srgb, var(--region-fill) 30%, transparent); stroke: rgb(235 215 157 / .82); stroke-width: .9; stroke-linejoin: round; transition: filter 140ms ease, stroke-width 140ms ease, opacity 140ms ease, fill-opacity 140ms ease; }
.medieval-region.neutral .region-territory { fill: color-mix(in srgb, #b8bbb7 22%, transparent); }
.medieval-region.claimed .region-territory { fill: color-mix(in srgb, var(--region-fill) 42%, transparent); }
.island-territory { fill: color-mix(in srgb, var(--region-fill) 24%, transparent); stroke: none; cursor: pointer; }
.medieval-region .terrain-overlay { pointer-events: none; stroke: none; opacity: .75; }
.medieval-region .province-1 { filter: brightness(.91) saturate(.92); }
.medieval-region .province-2 { filter: brightness(1.07) saturate(.9); }
.medieval-region .province-3 { filter: brightness(.98) saturate(1.08); }
.medieval-region .province-4 { filter: brightness(.86) saturate(1.04) hue-rotate(-4deg); }
.medieval-region .province-5 { filter: brightness(1.12) saturate(.84) hue-rotate(5deg); }
.medieval-region .province-6 { filter: brightness(.95) saturate(1.14) hue-rotate(3deg); }
.medieval-region .province-7 { filter: brightness(1.03) saturate(.96) hue-rotate(-6deg); }
.medieval-region .province-8 { filter: brightness(.9) saturate(1.08) hue-rotate(7deg); }
.medieval-region .province-9 { filter: brightness(1.09) saturate(.9) hue-rotate(-3deg); }
.medieval-region .province-10 { filter: brightness(.97) saturate(1.12) hue-rotate(4deg); }
.medieval-terrain-details { pointer-events: none; opacity: .78; }
.medieval-terrain-details .terrain-tree { width: 10px; height: 16px; fill: #142f20; stroke: #829469; stroke-width: .45; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .55)); }
.medieval-terrain-details .terrain-mountain { width: 16px; height: 14px; fill: #5e625c; stroke: #d3c39a; stroke-width: .65; filter: drop-shadow(0 2px 1px rgb(0 0 0 / .5)); }
.medieval-terrain-details .terrain-mountain .snow { fill: #ddd8c8; stroke: none; }
.medieval-region:hover .region-territory { fill-opacity: .72; filter: brightness(1.22); stroke: #f3fff9; stroke-width: 2.1; }
.medieval-region.selected .region-territory { fill-opacity: .82; filter: brightness(1.18); stroke: #ffe487; stroke-width: 3; }
.medieval-region.target .region-territory { stroke: #ff8d72; stroke-width: 3; }
.medieval-region.reachable .region-territory { stroke: #48e0b9; stroke-width: 2.2; }
.medieval-region.route-blocked:not(.owned) .region-territory { opacity: .52; }
.medieval-region.intel-distant .region-territory { filter: saturate(.4); }
.medieval-region.terrain-mountains .region-territory { fill-opacity: .2; }
.medieval-region.terrain-forest .region-territory { fill-opacity: .26; }
.medieval-region.terrain-desert .region-territory { fill-opacity: .18; }
.terrain-badge { pointer-events: none; opacity: .86; }
.terrain-badge circle { fill: rgb(4 18 16 / .82); stroke: rgb(234 216 162 / .72); stroke-width: .8; }
.terrain-badge text { fill: #f2dfa4; text-anchor: middle; font-size: 8px; font-weight: 900; }
.terrain-panel-label { display: flex; align-items: center; gap: 6px; }
.terrain-panel-label b { color: #e5c96f; font-size: 1rem; }
.medieval-region .capital-ring { fill: #0b1a19; stroke: #e3ce88; stroke-width: 1.5; }
.medieval-region .capital-icon { fill: #fff2bf; font-size: 9px; text-anchor: middle; pointer-events: none; }
.medieval-region .region-label { fill: #f4fbf7; font-size: 10px; font-weight: 850; text-anchor: middle; paint-order: stroke; stroke: #071915; stroke-width: 3px; opacity: 0; pointer-events: none; }
.medieval-region:hover .region-label, .medieval-region.selected .region-label, .medieval-region.owned .region-label, .medieval-region.reachable .region-label { opacity: 1; }
.medieval-region .rumor-mark { fill: #ffd66b; font-size: 15px; stroke-width: 2px; }
.medieval-map-tools { position: absolute; z-index: 3; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.map-layer-tabs, .map-zoom { display: flex; align-items: center; gap: 3px; border: 1px solid var(--line); border-radius: 7px; background: rgb(4 20 16 / .92); padding: 4px; box-shadow: 0 5px 18px rgb(0 0 0 / .25); pointer-events: auto; }
.medieval-map-tools button { min-height: 30px; border: 0; background: transparent; color: #a7bbb3; padding: 4px 9px; }
.medieval-map-tools button.active { background: #25bda1; color: #04130f; }
.map-zoom span { min-width: 44px; color: #c7d8d1; text-align: center; font-size: .72rem; }
.map-expand-button { margin-left: 3px; border-left: 1px solid var(--line) !important; font-size: 1rem; }

body.medieval-campaign-expanded .medieval-game {
  position: fixed;
  z-index: 1000;
  inset: 0;
  overflow: auto;
  background: #04100f;
  padding: 10px;
}
body.medieval-campaign-expanded .medieval-gamebar { position: sticky; z-index: 8; top: 0; }
body.medieval-campaign-expanded .medieval-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 370px); }
body.medieval-campaign-expanded .medieval-map,
body.medieval-campaign-expanded .medieval-region-panel { height: calc(100vh - 96px); min-height: 680px; max-height: none; }
.medieval-map-hint { position: absolute; right: 12px; bottom: 10px; max-width: 48%; border: 1px solid rgb(93 143 127 / .45); border-radius: 4px; background: rgb(4 20 16 / .86); color: #abc1b8; padding: 6px 9px; font-size: .7rem; pointer-events: none; }
.medieval-map-legend { position: absolute; z-index: 3; left: 12px; bottom: 12px; display: grid; gap: 7px; border: 1px solid #8d774d; border-radius: 4px; background: rgb(5 17 19 / .92); padding: 10px 12px; color: #d9e1d8; font-size: .7rem; box-shadow: 0 6px 18px rgb(0 0 0 / .35); }
.medieval-map-legend span { display: flex; align-items: center; gap: 7px; }
.medieval-map-legend .terrain-key { color: #dccb96; }
.medieval-map-legend i { width: 13px; height: 13px; border: 1px solid #d9c58c; background: #5f684d; }
.medieval-map-legend i.own { background: #68588c; }
.medieval-order-line { stroke-width: 5; stroke-linecap: round; opacity: .9; }
.medieval-order-line.move { stroke: #39d1ac; }
.medieval-order-line.attack { stroke: #f1705e; }
.medieval-order-line.hidden { stroke: #b5d969; stroke-dasharray: 7 7; }
.medieval-region-panel { min-width: 0; min-height: 610px; max-height: clamp(610px, 70vh, 820px); overflow-y: auto; border-left: 1px solid #8b7449; background: linear-gradient(180deg, #091719, #071214); padding: 18px; }
.medieval-panel-empty { display: grid; align-content: center; justify-items: center; color: #9caea7; text-align: center; }
.medieval-panel-empty p { max-width: 250px; }
.region-empty-crest { display: grid; place-items: center; width: 74px; aspect-ratio: 1; border: 1px solid #b99a54; border-radius: 50%; color: #e6cc84; font-size: 2rem; }
.region-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.region-panel-head h2 { margin: 2px 0; }
.region-panel-head > div:nth-child(2) { display: grid; flex: 1; }
.region-panel-head small { margin-top: 5px; color: #d6bd78; }
.region-shield { display: grid; place-items: center; width: 58px; height: 68px; border: 2px solid #d2ae54; border-radius: 4px 4px 18px 18px; background: linear-gradient(135deg, #413264 50%, #7b6034 50%); color: #f5dd91; font-size: 1.65rem; font-weight: 900; box-shadow: inset 0 0 0 3px #17201d; }
.intel-badge { border: 1px solid var(--line); border-radius: 999px; padding: 4px 7px; color: var(--muted); font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.intel-badge.exact { border-color: var(--brand); color: var(--brand); }
.intel-badge.rumor { border-color: #d9b44b; color: #e4ca76; }
.medieval-levels, .medieval-units { display: grid; gap: 7px; margin-top: 12px; }
.medieval-levels { grid-template-columns: 1fr; margin-top: 18px; }
.medieval-level-row { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px; border-bottom: 1px solid #29403c; padding: 10px 0; }
.level-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #c9a64d; border-radius: 50%; color: #e4c66d; font-size: 1.15rem; }
.medieval-level-row > div > span { display: flex; justify-content: space-between; font-size: .8rem; }
.medieval-level-row b { color: #48d0b5; font-size: .72rem; }
.medieval-level-row i { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 8px; }
.medieval-level-row em { height: 12px; border: 1px solid #3f5c55; background: #0b1c1b; }
.medieval-level-row em.filled { border-color: #42bca5; background: linear-gradient(90deg, #2a9b88, #52d3bb); }
.region-income { display: grid; gap: 4px; margin: 15px 0; border-bottom: 1px solid #29403c; padding: 0 4px 14px; }
.region-income span { color: #aabbb4; font-size: .75rem; }
.region-income strong { color: #4bd4b8; }
.medieval-units { grid-template-columns: repeat(4, 1fr); }
.medieval-units > div { display: grid; justify-items: center; gap: 3px; border: 1px solid #485848; border-radius: 3px; background: #0a1717; padding: 8px 3px; }
.medieval-units small { color: #9aaca5; font-size: .58rem; }
.unit-icon { color: #ead8a0; font-size: 1.25rem; }
.medieval-order-composer { display: grid; grid-template-columns: minmax(170px, .8fr) 1fr auto auto; align-items: end; gap: 12px; margin-top: 10px; border: 1px solid #35504a; border-radius: 5px; background: #081516; padding: 12px; }
.medieval-order-composer h3, .medieval-order-composer p { margin: 0; }
.unit-order-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.unit-order-grid label { display: grid; gap: 3px; color: var(--muted); font-size: .7rem; }
.unit-order-grid input { min-width: 0; }
.medieval-order-actions, .medieval-upgrades { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.medieval-order-actions button { min-width: 105px; min-height: 48px; }
.medieval-upgrades button { padding: 6px 8px; font-size: .7rem; }
.medieval-lower-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.medieval-orders, .medieval-reports { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 12px; }
.medieval-orders > div:last-child { display: grid; gap: 6px; }
.medieval-orders article { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--field); padding: 7px 9px; }
.medieval-orders article button { min-height: 26px; border: 0; background: transparent; color: var(--danger); }
.medieval-reports { display: grid; gap: 7px; }
.medieval-reports article { display: grid; grid-template-columns: 70px 1fr; gap: 9px; border-top: 1px solid var(--line); padding-top: 7px; }
.medieval-reports p { margin: 0; }
.medieval-campaign-list { display: grid; gap: 9px; }
.medieval-campaign-list article { display: flex; align-items: center; justify-content: space-between; gap: 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); padding: 13px; }
.medieval-campaign-list h3, .medieval-campaign-list p { margin: 4px 0 0; }

@media (max-width: 1050px) {
  .medieval-game { width: 100%; }
  .medieval-gamebar { grid-template-columns: auto 1fr; }
  .medieval-resource, .medieval-ready { flex-wrap: wrap; }
  .medieval-layout { grid-template-columns: 1fr; }
  .medieval-region-panel { min-height: auto; max-height: none; }
  .medieval-order-composer { grid-template-columns: 1fr 1fr; }
  .medieval-lower-panels { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .medieval-gamebar { display: flex; flex-wrap: wrap; }
  .medieval-map { height: 520px; }
  .medieval-resource { width: 100%; }
  .medieval-map-tools { position: static; padding: 7px; background: #071915; }
  .medieval-map-hint { display: none; }
  .medieval-map-legend { display: none; }
  .medieval-order-composer { grid-template-columns: 1fr; }
}