/* One encounter per dot. The ring marks the current fight; the crown is the
   area's boss. Equal side columns keep the route centred on the playfield. */
.run-hud { --route-width: min(calc(224 * var(--game-unit, 1px)), calc(100% - 144px)); position: absolute; inset: 0 0 auto; z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr) var(--route-width) minmax(0, 1fr); align-items: center; padding-inline: inherit; padding-top: env(safe-area-inset-top); min-height: calc(64 * var(--game-unit, 1px) + env(safe-area-inset-top)); }
.page-shell > .relic-bar { position: absolute; z-index: 3; }
.run-hud .gold-resource { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; gap: 6px; color: #e8d3a3; text-shadow: 0 1px 3px #11161c; }
.run-hud .gold-resource strong { font-size: calc(16 * var(--game-unit, 1px)); }
.area-progress { grid-column: 2; grid-row: 1; width: 100%; filter: drop-shadow(0 1px 2px #10151c) drop-shadow(0 -1px 1px #10151c); }
.area-route { display: flex; align-items: center; width: 100%; height: calc(32 * var(--game-unit, 1px)); }
.area-stop { position: relative; flex: 1; height: 100%; display: grid; place-items: center; color: #c8c1ae; }
.area-dot { display: block; width: calc(6 * var(--game-unit, 1px)); height: calc(6 * var(--game-unit, 1px)); border: calc(1.5 * var(--game-unit, 1px)) solid currentColor; border-radius: 50%; background: #1c232b80; }
.area-stop.is-complete { color: #d5b879; }
.area-stop.is-complete .area-dot { width: calc(5 * var(--game-unit, 1px)); height: calc(5 * var(--game-unit, 1px)); background: currentColor; border: 0; }
.area-stop.is-current { color: #fff0c9; }
.area-stop.is-current .area-dot { width: calc(8 * var(--game-unit, 1px)); height: calc(8 * var(--game-unit, 1px)); background: currentColor; border: 0; outline: calc(1 * var(--game-unit, 1px)) solid #f5dfad; outline-offset: calc(4 * var(--game-unit, 1px)); }
.area-boss > .icon { width: calc(23 * var(--game-unit, 1px)); height: calc(23 * var(--game-unit, 1px)); stroke-width: 1.6; fill: #c8c1ae18; }
.area-boss.is-current > .icon { color: #ffe1a0; fill: #e5bd6850; }
.is-cleared .area-boss > .icon { color: #ffe1a0; fill: #e5bd68; stroke: #fff0c9; }
.hud-actions { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-self: end; }
.run-hud .icon-button { width: max(44px, calc(40 * var(--game-unit, 1px))); height: max(44px, calc(40 * var(--game-unit, 1px))); padding: calc(12 * var(--game-unit, 1px)); border: 0; color: #d4d1c7; background: transparent; }
.run-hud :is(.gold-resource, .hud-actions) svg { filter: drop-shadow(0 1px 1px #10151c); }
.run-hud .icon-button:hover { color: #fff0d7; background: #d4c59c12; }
.run-hud .save-warning { position: absolute; inset-inline-end: 3px; bottom: -8px; margin: 0; }
/* Account management belongs with settings, leaving the run's route clear. */
.settings-account { margin-top: 16px; }
.settings-account .account-button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 48px; height: auto; padding: 10px 12px; border: 1px solid var(--line); background: #1f252f; color: var(--text); font-size: 15px; }
.settings-account .account-button::after { content: attr(aria-label); }
.settings-account .account-login > span { display: none; }
.settings-account .account-button svg { width: 20px; height: 20px; }
@media (max-width: 900px) and (orientation: portrait), (max-width: 699px) {
  .run-hud { --route-width: min(174px, calc(100% - 128px)); min-height: calc(56px + env(safe-area-inset-top)); }
  .run-hud .gold-resource { padding-inline-start: 12px; }
}
@media (max-width: 359px) {
  .run-hud .gold-resource { gap: 4px; }
  .run-hud .gold-resource strong { font-size: 14px; }
  .area-boss > .icon { width: 20px; height: 20px; }
}
@media (min-width: 700px) and (orientation: landscape) and (max-height: 640px) {
  .run-hud { --route-width: 180px; min-height: calc(48px + env(safe-area-inset-top)); }
}