/* The original HUD, framing, controls and sheets remain in place. Only the
   approved persistent map replaces the campaign's world plane. */
.progression-family-tabs{display:flex;gap:8px;margin:8px 0;min-width:0}
.progression-family-tabs>button{flex:1;min-width:0;min-height:44px;padding:8px 4px;font-size:clamp(12px,3.5vw,16px)}
.progression-family-tabs>button.selected{border-color:var(--gold,#a47c2d);background:#244d3b;color:#fff0c5}
.progression-family-detail{min-width:0;margin:8px 0 12px}
.progression-family-detail>header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.progression-family-detail>header h3{margin:0;font-family:var(--serif)}
.progression-family-detail>header>span{font-size:12px;color:var(--antique-ink)}
.progression-family-hero{display:grid;place-items:center;min-height:160px;background:radial-gradient(ellipse at 50% 85%,#7d663944,transparent 60%);margin:4px 0}
.progression-troop-art{display:block;position:relative;width:100%;aspect-ratio:1}
.progression-troop-art::before{content:'';position:absolute;left:50%;top:50%;translate:-50% -50%;width:var(--troop-width);height:var(--troop-height);background-image:var(--troop-atlas);background-repeat:no-repeat;background-size:var(--troop-size-x) var(--troop-size-y);background-position:var(--troop-x) var(--troop-y)}
.progression-family-hero>.progression-troop-art{width:clamp(160px,45vw,230px);filter:drop-shadow(0 4px 3px #60401f38)}
.progression-tier-strip{display:flex;gap:8px;overflow-x:auto;max-width:100%;padding:6px 2px 10px;scroll-snap-type:x proximity;overscroll-behavior-inline:contain}
.progression-tier{position:relative;flex:0 0 64px;min-height:88px;display:flex;align-items:center;flex-direction:column;padding:4px;border:1px solid #9c783d88;border-radius:4px;background:#fff5df66;color:var(--antique-ink);scroll-snap-align:center}
.progression-tier strong{line-height:1.2;font-family:var(--serif)}
.progression-tier small{font-size:11px;line-height:1.2}
.progression-tier.is-selected{outline:2px solid var(--gold,#a47c2d);outline-offset:-2px;background:#e6d19b66}
.progression-tier.is-locked>.progression-troop-art,.progression-family-hero.is-locked>.progression-troop-art{filter:grayscale(1);opacity:.6}
.progression-tier-lock{position:absolute;top:3px;right:3px;font-size:13px;color:#694c24}
.progression-family-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.progression-family-stats>.stat-cell{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;min-width:0}
.progression-family-stats>.stat-cell strong{font-size:16px}
.progression-family-stats>.stat-cell small{font-size:12px}
body.progression-mode #world-scene :is(#map-plane,#map-terrain,#minimap){display:none!important}
body.progression-mode #persistent-world-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline-offset:-3px}
body.progression-mode #persistent-world-canvas.dragging{cursor:grabbing}
body.progression-mode #persistent-world-canvas[hidden]{display:none}
/* Reuse the original march renderer above the canvas. Only the illustration
   shrinks by 60%; captions, details and touch targets stay readable. */
body.progression-mode #persistent-march-overlay{--persistent-march-scale:.4;--map-zoom:1;position:absolute;inset:0;z-index:3;pointer-events:none}
body.progression-mode #persistent-march-overlay[hidden]{display:none}
.persistent-protection-shields{position:absolute;inset:0;z-index:1;pointer-events:none;contain:layout style}
.persistent-protection-shields>.map-protection-shield{bottom:auto;transform-origin:50% 0;border-radius:50% 50% 46% 46% / 65% 65% 18% 18%;mask-image:linear-gradient(to bottom,#000 0%,#000 56%,#0009 76%,transparent 100%)}
.persistent-protection-shields>.map-protection-shield::after{content:none}
body.progression-mode #persistent-march-overlay #map-routes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
body.progression-mode #persistent-march-overlay .map-march{--march-art-scale:var(--persistent-march-scale);width:44px;height:52px;min-height:44px;margin:-38px 0 0 -22px;transform:none;transform-origin:22px 38px}
body.progression-mode #persistent-march-overlay .map-march:is(.civilian,.spy){--march-art-scale:calc(.6 * var(--persistent-march-scale))}
body.progression-mode #persistent-march-overlay .map-march.worker-walk{--march-art-scale:calc(1.2 * var(--persistent-march-scale))}
/* Render the scene behind the translucent chat. Map controls retain
   preview clearance; non-chat sheets cover it while keeping navigation visible. */
.progression-mode{--realm-chat-height:0px}
.progression-mode:has(.progression-chat-preview:not([hidden])){--realm-chat-height:52px}
.progression-chat-preview{width:100%;height:52px;display:flex;align-items:center;gap:10px;padding:6px 14px;position:absolute;left:0;bottom:calc(var(--nav-height) + env(safe-area-inset-bottom));z-index:20;text-align:left;color:var(--gold-light);background:linear-gradient(#102b2333,#071c1740);border-top:1px solid var(--gold);font-family:var(--sans);}
.progression-mode .action-sheet:not([data-view='chat']){--realm-chat-height:0px;z-index:21;bottom:var(--realm-chat-height);max-height:calc(100% - var(--realm-chat-height))}
.progression-mode .activity-dock{translate:0 calc(-1 * var(--realm-chat-height))}
.progression-mode .building-requirements-title{margin:12px 0 6px;font:700 18px/1.2 var(--serif);color:var(--antique-ink)}
@media(min-width:700px){.progression-mode .action-sheet:not([data-view='chat']){bottom:calc(18px + var(--realm-chat-height));max-height:calc(100% - 36px - var(--realm-chat-height))}}
@media(min-width:1150px){.progression-mode .action-sheet:not([data-view='chat']){bottom:calc(24px + var(--realm-chat-height));max-height:calc(100% - 48px - var(--realm-chat-height))}}
.progression-chat-preview[hidden]{display:none}
.progression-chat-symbol{flex:none;display:grid;place-items:center;width:32px;}
.progression-chat-symbol .icon{width:26px;height:26px}
.progression-chat-lines{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;font-size:12px;line-height:1.4}
.progression-chat-lines>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f2dfb6}
.progression-chat-lines strong{color:var(--gold-light);font-weight:700}
.chat-avatar{display:inline-block;flex:none;width:32px;height:32px;object-fit:cover;object-position:50% 12%;vertical-align:middle;border:1px solid var(--antique-gold);border-radius:3px;background:var(--green);pointer-events:none}
.chat-avatar.is-custom-avatar{object-position:center}
.chat-avatar-small{width:20px;height:20px}
.chat-message header>.chat-avatar+strong{min-width:0;margin-right:auto;overflow-wrap:anywhere}
.chat-quote>.chat-avatar{margin-right:6px}
.chat-quote>.chat-avatar+strong{display:inline}
.chat-reply-author{display:flex;align-items:center;gap:6px;min-width:0}
.private-chat-peer>.chat-avatar{align-self:center}
.private-chat-peer-copy{min-width:0;flex:1}
.private-chat-avatar:empty{display:none}
.progression-chat-lines>.progression-chat-line{display:flex;align-items:center;gap:4px;min-width:0}
.progression-chat-line>strong{max-width:40%;overflow:hidden;text-overflow:ellipsis;flex:none}
.progression-chat-line>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.progression-chat-line>.chat-avatar-small{width:16px;height:16px;border-color:var(--gold)}
.progression-chat-dot{width:7px;height:7px;flex:none;background:#c4553d;border:1px solid var(--gold-light);border-radius:50%}
.progression-chat-dot[hidden]{display:none}
.progression-chat-preview:focus-visible{outline:2px solid var(--gold-light);outline-offset:-4px}
body.progression-mode #nearby-button{width:45px;height:45px;min-height:45px;padding:0;border-radius:50%;border:1px solid var(--gold);background:linear-gradient(#16392e,#0a2019);box-shadow:0 2px 5px #0007;color:#f1ce88;}
body.progression-mode #nearby-button::before{display:none}
body.progression-mode #nearby-button>.icon{width:24px;height:24px}
body.progression-mode #nearby-button>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:700px){.progression-chat-preview{padding-inline:26px}.progression-chat-lines{font-size:13px}}

/* Teleporters reuse inventory frames, the current sheet and its real controls. */
.teleport-item-art{display:block;width:100%;height:100%;min-width:0;pointer-events:none}
.teleport-item-art>img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px #37291733)}
.inventory-tile-art>.teleport-item-art,.inventory-detail-art>.teleport-item-art{position:absolute;inset:0}
.alliance-technology-shop-art>.teleport-item-art{width:100%;height:100%}
.teleport-panel{min-width:0;color:var(--antique-ink);padding:0 6px}
.teleport-item-summary{display:grid;grid-template-columns:86px minmax(0,1fr);align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--antique-gold)}
.teleport-item-summary>.teleport-item-art{height:96px}
.teleport-item-summary h3{margin:0 0 6px;font:700 23px/1.1 var(--serif);color:var(--green);overflow-wrap:anywhere}
.teleport-item-summary p{font:13px/1.4 var(--sans);margin:0 0 6px;color:var(--antique-muted)}
.teleport-item-summary strong{font:700 17px/1.2 var(--serif)}
.teleport-journey{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);align-items:center;gap:8px;padding:12px 0;text-align:center}
.teleport-journey>div{display:grid;grid-template-rows:104px auto auto;justify-items:center;gap:4px;min-width:0}
.teleport-journey strong{font:700 16px/1.2 var(--serif);overflow-wrap:anywhere}
.teleport-city-art{display:block;width:116px;max-width:100%;height:104px;background:url('./art-web/castles-hd-v1-f5b7fecc3f.webp') 0 0/300% 200% no-repeat}
.teleport-hq-art{display:block;width:116px;max-width:100%;height:104px;object-fit:contain}
.teleport-hq-art.alliance-structure-art{--alliance-structure-size:104px;display:flex;align-items:center;justify-content:center}
.teleport-arrow{color:var(--antique-gold)}
.teleport-arrow>.icon{width:24px;height:24px}
.teleport-coordinates{font:12px/1.3 var(--sans);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;color:var(--antique-muted)}
.teleport-destination{padding:12px;text-align:center;border:1px solid var(--antique-gold);background:#ab803016;font:14px/1.4 var(--sans)}
.teleport-destination strong{display:block;font:700 19px/1.25 var(--serif);color:var(--green)}
.teleport-destination p{margin:6px 0 0}
.teleport-cost{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;padding:12px 0 6px;font:15px/1.3 var(--serif)}
.teleport-panel .teleport-note{margin:0 0 12px;color:var(--antique-muted);font:12px/1.4 var(--sans)}
.teleport-actions{display:grid;gap:8px;padding:4px 0}
.teleport-actions>:is(.primary-button,.secondary-button){width:100%;min-width:0;min-height:48px;white-space:normal;overflow-wrap:anywhere}
@media(min-width:700px){.teleport-panel{padding-inline:8px}.teleport-item-summary{grid-template-columns:104px minmax(0,1fr)}.teleport-item-summary>.teleport-item-art{height:116px}.teleport-journey>div{grid-template-rows:124px auto auto}.teleport-journey :is(.teleport-city-art,.teleport-hq-art){width:138px;height:124px}}
@media(min-width:700px){.teleport-hq-art.alliance-structure-art{--alliance-structure-size:124px}}
@media(forced-colors:active){.teleport-destination{color:CanvasText;border-color:ButtonText}.teleport-destination strong{color:CanvasText}}

/* Training shows a compact selected cohort, using the existing alpha portraits. */
.progression-barracks-troop{position:relative;min-width:0}
.progression-barracks-cohort{display:grid;grid-template-columns:90px minmax(0,1fr);gap:8px;align-items:center;min-width:0;padding-inline-end:48px}
.progression-barracks-cohort>div{min-width:0}
.progression-barracks-cohort h4{margin:0 0 4px;font:700 18px/1.2 var(--serif);color:var(--antique-ink);overflow-wrap:anywhere}
.sheet-content .progression-barracks-cohort p{margin:0;font:12px/1.4 var(--sans);color:var(--antique-muted)}
.progression-barracks-portrait{display:grid;place-items:center;width:90px;max-width:100%;aspect-ratio:1;filter:drop-shadow(0 3px 2px #60401f38)}
.progression-barracks-portrait.is-locked>.progression-troop-art{filter:grayscale(1);opacity:.6}
.progression-barracks-attributes{margin:0;min-width:0}
.progression-barracks-attributes>.game-info-button{position:absolute;inset-block-start:8px;inset-inline-end:0;list-style:none}
.progression-barracks-attributes>.game-info-button::-webkit-details-marker{display:none}
.progression-barracks-attributes>.progression-family-stats{margin:6px 0}
.progression-barracks-troop .progression-tier-strip{min-width:0}
.progression-selected-promotion{min-width:0;margin:8px 0 4px;display:flex;justify-content:center;align-items:center;gap:8px;width:100%;list-style:none;cursor:pointer}
.progression-selected-promotion>.icon{width:20px;height:20px;flex:none}
@media(max-width:359px){.progression-barracks-cohort{grid-template-columns:72px minmax(0,1fr);gap:5px}.progression-barracks-portrait{width:72px}.progression-barracks-cohort h4{font-size:16px}}
@media(forced-colors:active){.progression-barracks-cohort h4,.sheet-content .progression-barracks-cohort p{color:CanvasText}.progression-tier.is-locked{border-style:dashed}}

/* Larger illustrated headings share a compact mobile scale. Ordinary 20px
   sheet titles and already compact battle/governor headers keep their scale. */
@media(max-width:699px){
 .progression-mode .action-sheet:is([data-view='building'],[data-view='inventory'],[data-view='alliance']) .sheet-heading h2{
  font-size:22px;
  line-height:1.15;
  white-space:normal;
  overflow-wrap:anywhere;
 }
 .progression-mode .action-sheet[data-view='reports'] .sheet-heading h2{font-size:24px;line-height:1.15}
 .progression-mode .alliance-heading>div{max-width:none}
 .progression-mode .alliance-heading h3{font-size:22px;line-height:1.15}
}

/* Alliance ownership uses a translucent green nameplate with the existing gold rim.
   Labels scale with their sprites and remain fixed to the canvas projection. */
.persistent-alliance-identities{position:absolute;inset:0;z-index:2;pointer-events:none;contain:layout style}
.map-alliance-identity{position:absolute;display:flex;align-items:center;flex-direction:column;gap:3px;transform:translateX(-50%);transform-origin:50% 0;max-width:min(220px,80vw);color:var(--gold-light);pointer-events:none;user-select:none}
.map-alliance-name{display:flex;align-items:center;gap:3px;min-width:0;max-width:100%;padding:2px 5px 2px 3px;border:1px solid #b3965a;border-radius:2px;background:rgba(12,55,35,.3);box-shadow:inset 0 0 0 1px #d7b06b26,0 2px 3px #0c130d77;text-shadow:0 1px 2px #071714;font:600 10px/1.3 var(--sans)}
.map-alliance-banner{display:block;flex:none;width:16px;height:18px;overflow:hidden;border:1px solid #b3965a88;border-radius:2px;background-color:#0c281d4d;background-repeat:no-repeat;background-size:42px 63px;background-position:-16px -12px;box-shadow:inset 0 0 3px #f5dd9f33}
.map-alliance-name-text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-alliance-construction-time{max-width:100%;padding:2px 6px;border:1px solid #b3965a77;border-radius:2px;background:linear-gradient(#382819ee,#1d160ff2),url('./art-web/wood-dark-v3-331b77e862.webp') center/240px;color:var(--gold-light);box-shadow:0 1px 3px #07171488;text-align:center;font:600 10px/1.3 var(--sans);font-variant-numeric:tabular-nums;text-shadow:0 1px #071714}
@media(forced-colors:active){.map-alliance-name,.map-alliance-construction-time{background:Canvas;color:CanvasText;border-color:CanvasText;text-shadow:none;box-shadow:none}.map-alliance-banner{border-color:CanvasText}}

/* Desktop content windows share the space between the HUD and navigation.
   Auto margins keep them centred without changing the sheet-in animation.
   The focused hunting scene keeps its dedicated full-area presentation. */
@media(min-width:700px){
 .progression-mode #play-area > #action-sheet:not(.is-hunt-focusing){
  position:absolute;
  inset:calc(2 * var(--space)) 0;
  width:min(1200px,calc(100% - 8 * var(--space)));
  height:calc(100% - 4 * var(--space));
  max-width:none;
  max-height:calc(100% - 4 * var(--space));
  min-height:0;
  margin:0 auto;
 }
 /* Chat follows the visual viewport so its composer stays reachable with a
    short window or a keyboard; its desktop width remains shared and centred. */
 .progression-mode #play-area > #action-sheet[data-view='chat']{
  position:fixed;
  inset:auto 0 auto;
  top:calc(var(--chat-viewport-top,0px) + env(safe-area-inset-top) + 2 * var(--space));
  height:calc(var(--chat-viewport-height,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 4 * var(--space));
  max-height:none;
 }
 /* Preserve the portrait's compact framing within the wider profile. */
 .progression-mode #play-area > #action-sheet[data-view='governor'] .governor-stage{
  width:100%;
  max-width:360px;
  margin-inline:auto;
 }
}