/* Adventure camps and the journey strip, in the game's own pixel panels.
   Build 114: the camp is the same compact box as the partner pick (.friendbox / .friends / .friend in index.html),
   over the dimmed arena; only what the camp adds is styled here. Sized with --s like the rest of the HUD. */
#adventureScreen { z-index: 45; }
.adv-camp { max-width: calc(var(--s) * 300px); max-height: calc(100% - var(--s) * 10px); box-sizing: border-box; overflow: auto; }
.adv-choices { flex-wrap: wrap; justify-content: center; }
.adv-choice { cursor: pointer; }
.adv-choice .adv-ic { width: calc(var(--s) * 30px); height: calc(var(--s) * 30px); background: none; border-radius: 0; }
.adv-choice small { font-size: calc(var(--s) * 4.4px); line-height: 1.3; }
.adv-choice:focus-visible { outline: none; }
/* the team's HP, so you can pick an upgrade (or the healing spring) knowing who's hurt */
.adv-team { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--s) * 3px); }
.adv-mate { display: flex; align-items: center; gap: calc(var(--s) * 2px); }
.adv-mate img { width: calc(var(--s) * 11px); height: calc(var(--s) * 11px); border-radius: calc(var(--s) * 2px); background: #203040; }
.adv-mate b { font-family: var(--display); font-size: calc(var(--s) * 3.8px); font-weight: 400; }
.adv-mate i { display: block; width: calc(var(--s) * 26px); height: calc(var(--s) * 2.5px); background: #c8d4e0; border-radius: calc(var(--s) * 1px); overflow: hidden; }
.adv-mate u { display: block; height: 100%; background: #48c060; text-decoration: none; }
.adv-mate u.mid { background: #e8b830; } .adv-mate u.low { background: #e04830; }
.adv-mate.down { opacity: .55; }
.adv-camp #advBuildList { font-family: var(--display); font-size: calc(var(--s) * 4px); color: #4a8a5c; }
.adv-camp #advBuildList:empty { display: none; }
.adv-rewards { font-size: calc(var(--s) * 4.4px); color: var(--ink-dim); }
.adv-rewards summary { cursor: pointer; font-family: var(--display); font-size: calc(var(--s) * 4px); }
#advRewardList { white-space: pre-line; text-align: left; font-size: calc(var(--s) * 4.4px); }
.adv-camp-footer { display: flex; flex-wrap: wrap; gap: calc(var(--s) * 4px); justify-content: center; align-items: center; }
#advSaveStatus { font-size: calc(var(--s) * 4.2px); }
#advSaveStatus:empty { display: none; }
#advSaveQuit { font-size: calc(var(--s) * 4.6px); padding: calc(var(--s) * 1.5px) calc(var(--s) * 4px); }

/* the journey strip: a slim bar across the top, between your health card and the wave counter */
.adv-journey-hud {
  position: absolute; top: calc(var(--s) * 4px); left: calc(var(--s) * 162px); right: calc(var(--s) * 84px); box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(var(--s) * 4px); row-gap: calc(var(--s) * .5px); align-items: center;
  padding: calc(var(--s) * 2px) calc(var(--s) * 4px); pointer-events: auto;
}
.adv-hud-top { display: flex; gap: calc(var(--s) * 3px); align-items: baseline; min-width: 0; }
#advJourneyProgress { font-family: var(--display); font-size: calc(var(--s) * 4.2px); color: #d04830; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#advEvolutionHint { font-family: var(--display); font-size: calc(var(--s) * 3.4px); color: #4a8a5c; white-space: nowrap; }
#advJourneyObjective { grid-column: 1; font-family: var(--body); font-size: calc(var(--s) * 4.4px); line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-commands { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: calc(var(--s) * 1px); }
.adv-commands button { font-family: var(--display); font-size: calc(var(--s) * 3.4px); padding: calc(var(--s) * .8px) calc(var(--s) * 2.5px);
  background: #e2ebf6; color: #383838; border: calc(var(--s) * 1px) solid #98b0c8; border-radius: calc(var(--s) * 1.5px); white-space: nowrap; }
.adv-commands button:disabled { opacity: .55; cursor: default; }
#advTeamBurst.ready { background: #ffd34d; border-color: #c08a10; }
.adv-journey-hud[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .adv-choice:hover, .adv-choice:focus-visible { transform: none; } }