/* The whole progression group stays inside the space between the two UI rails. */
#game .location-progression{--marker:clamp(24px,calc(var(--ui-width)*.044),40px);--travel:clamp(32px,calc(var(--ui-width)*.052),46px);position:absolute;z-index:12;top:calc(var(--ui-top) + 26px);left:calc(var(--ui-edge) - var(--ui-outset) + var(--ui-button) + 8px);right:calc(var(--ui-edge) - var(--ui-outset) + var(--ui-button) + 8px);height:28px;color:#694879;font-size:clamp(10px,2.7cqw,14px)}
.progression-caption{position:absolute;bottom:calc(100% + 9px);left:0;right:0;display:flex;justify-content:space-between;gap:8px;font-weight:900;line-height:1.2;text-shadow:0 1px 2px #fff,0 0 5px #fff}
.progression-caption span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.progression-caption b{flex:none}
.progression-travel{position:absolute;left:100%;top:50%;transform:translate(-50%,-50%);width:var(--travel);height:var(--travel);border:0;padding:0;background:none;cursor:pointer}
.progression-travel img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 1px #80539555)}
.progression-track{position:absolute;left:2px;right:calc(var(--travel)/2 + 2px);top:50%;transform:translateY(-50%);height:16px;border:2px solid #9372aa;border-radius:12px;background:#eadcf1;box-shadow:0 2px 0 #80539555,inset 0 2px 3px #b298c666}
.progression-fill{height:100%;border-radius:9px;background:linear-gradient(#d1fa94,#74ce62);box-shadow:inset 0 2px 0 #ecffc4}
.comic-markers{position:absolute;inset:0 calc((var(--marker) + var(--travel))/2 + 6px) 0 0;pointer-events:none}
.comic-checkpoint{pointer-events:auto;position:absolute;left:var(--checkpoint);top:50%;transform:translate(-50%,-50%);width:calc(var(--marker) + 4px);height:44px;background:none;border:0;padding:0;display:grid;place-items:center;color:#5f4078;cursor:pointer}
.comic-checkpoint>span{display:block;width:var(--marker);height:calc(var(--marker) + 4px);filter:drop-shadow(0 2px 1px #69487966)}
.comic-checkpoint img{display:block;width:100%;height:100%;object-fit:contain}
.comic-checkpoint small{position:absolute;right:0;top:calc(50% + var(--marker)/2 - 8px);font-size:9px;line-height:13px;min-width:13px;background:#79548e;color:white;border:1px solid #f9eefa;border-radius:7px}
.comic-checkpoint.done small{background:#61a54c;color:#fff}
.comic-checkpoint.ready>span{filter:drop-shadow(0 0 3px #c9ff83)}
.comic-checkpoint.locked img{filter:saturate(.65)}
.comic-checkpoint:focus-visible,.progression-travel:focus-visible{outline:3px solid #b94ac2;border-radius:10px}
#game .hud .wallet,#game .hud .wallet.rate{top:calc(var(--ui-top) + var(--ui-button) + 36px)}
#game .hud .premium{top:calc(var(--ui-top) + var(--ui-button) + 66px)}
#game .energy-wrap{top:calc(var(--ui-top) + var(--ui-button) + 112px)}
#game #cheat-button{top:calc(var(--ui-top) + var(--ui-button) + 88px)}
#game.story-mode>.location-progression,#game[data-stage-open=true]>.location-progression{visibility:hidden;pointer-events:none}
#overlay .expansion-panel{width:min(94%,440px);max-height:calc(var(--app-h) - var(--safe-top) - var(--safe-bottom) - 24px)}
.expansion-panel .panel-head small{display:none}
.expansion-panel .panel-body{display:flex;flex-direction:column;gap:14px;padding:18px;overflow-y:auto}
.expansion-route{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:8px;align-items:center}
.expansion-route.last-location{grid-template-columns:minmax(0,1fr);max-width:210px;margin:auto}
.expansion-card{text-align:center;min-width:0;color:#694879}
.expansion-card>span{display:block;font-weight:900;font-size:12px;margin-bottom:8px}
.expansion-card>div{position:relative;aspect-ratio:1;border:3px solid #d0a5e2;border-radius:18px;overflow:hidden;background:#decbea}
.expansion-card img{width:100%;height:100%;object-fit:cover}
.expansion-card i{position:absolute;inset:0;display:grid;place-items:center;background:#52376650}
.expansion-card i .ui-icon{width:36px;height:36px}
.expansion-card h3{font-size:clamp(13px,3.7cqw,18px);margin:8px 0 3px;overflow-wrap:anywhere}
.expansion-card small{font-size:12px}.expansion-arrow{font-size:32px;color:#a15bb2}
.expansion-status{padding:14px;border:2px solid #dfc7ec;border-radius:16px;background:#fff5fc;text-align:center;color:#694879}
.expansion-status strong{font-size:15px}.expansion-status progress{display:block;width:100%;height:12px;margin:10px 0;accent-color:#79cc66}
.expansion-status p,.expansion-finale{font-size:14px;line-height:1.4;margin:6px 0;text-align:center}
.expansion-panel .wide{min-height:44px;white-space:normal;font-size:14px;flex-shrink:0}
@container(max-height:600px){.expansion-panel .panel-body{padding:12px;gap:10px}.expansion-card>div{aspect-ratio:1.5}.expansion-status{padding:10px}}