/* Star Voyage is a deep-space chart room: a violet nebula over a field of
   stars, a mint Starlight meter and the voyage's rank under the heading,
   then the galaxy's medallions or one sector's sky. The destination shell
   (css/screens.css) owns the viewport, title and close control. */
#voyage-sheet.destination-screen {
  --voyage-night: #07041a;
  --voyage-deep: #150a38;
  --voyage-nebula: rgba(239, 52, 201, 0.16);
  --voyage-nebula-cool: rgba(93, 255, 176, 0.08);
  --voyage-star: rgba(232, 226, 255, 0.6);
  --voyage-glass: #0b0826;
  --voyage-orbit: rgba(222, 214, 255, 0.1);
  --voyage-line: rgba(210, 200, 255, 0.34);
  --voyage-dim: rgba(214, 206, 255, 0.5);
}

#voyage-sheet.destination-screen .voyage-panel {
  gap: 10px;
  background:
    radial-gradient(ellipse at 22% 34%, var(--voyage-nebula), transparent 46%),
    radial-gradient(ellipse at 84% 70%, var(--voyage-nebula-cool), transparent 40%),
    radial-gradient(1px 1px at 12% 22%, var(--voyage-star) 95%, transparent),
    radial-gradient(1px 1px at 71% 12%, var(--voyage-star) 95%, transparent),
    radial-gradient(1.5px 1.5px at 38% 47%, var(--voyage-star) 95%, transparent),
    radial-gradient(1px 1px at 88% 58%, var(--voyage-star) 95%, transparent),
    radial-gradient(1px 1px at 27% 86%, var(--voyage-star) 95%, transparent),
    linear-gradient(165deg, var(--voyage-deep), var(--voyage-night) 62%);
  background-size: auto, auto, 171px 203px, 223px 241px, 287px 329px, 181px 257px, 211px 307px, auto;
  background-color: var(--voyage-night);
}

/* ---- The head: Starlight's meter and the rank ---- */

.voyage-head {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* A black-glass meter with the Starlight mark set into its end. */
.voyage-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px 0 6px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--voyage-night), var(--voyage-glass));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), inset 0 -1px 0 var(--starlight-deep), 0 0 0 1px var(--gold-deep);
}

.voyage-meter-mark {
  flex: none;
  width: 36px;
  height: 36px;
}

.voyage-starlight {
  color: var(--starlight);
  font-family: var(--display);
  font-size: 1.45rem;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7);
}

.voyage-meter-label {
  margin-left: auto;
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
}

/* The rank: its badge, its name over a track of the constellations lit
   toward the next rank, and what that pays (CLAIM once it waits). */
.voyage-rank {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}

/* The badge's metals: here, not on the page, as the rank's reveal
   (outside the page) wears the badge too. */
.voyage-rank-badge {
  --voyage-bronze: #c47a3a;
  --voyage-bronze-deep: #4a2208;
  --voyage-silver: #cfd8ff;
  --voyage-silver-deep: #2c3466;
  --metal: var(--voyage-bronze);
  --metal-deep: var(--voyage-bronze-deep);
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.55), transparent 34%),
    radial-gradient(circle, var(--metal) 0 55%, var(--metal-deep));
  box-shadow: 0 0 0 1px var(--gold-deep), inset 0 -3px 6px rgba(0, 0, 0, 0.45);
}

.voyage-rank-badge[data-tier="silver"] { --metal: var(--voyage-silver); --metal-deep: var(--voyage-silver-deep); }
.voyage-rank-badge[data-tier="gold"] { --metal: var(--gold); --metal-deep: var(--gold-deep); }
.voyage-rank-badge[data-tier="top"] { --metal: var(--starlight); --metal-deep: var(--starlight-deep); }

/* The four-point star struck into the badge, its step on it. */
.voyage-rank-badge::before {
  content: "";
  position: absolute;
  inset: 16%;
  background: linear-gradient(160deg, var(--text), var(--gold-light) 40%, var(--metal-deep));
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: 0.85;
}

.voyage-rank-step {
  position: relative;
  color: var(--text);
  font-family: var(--display);
  font-size: 0.95rem;
  line-height: 1;
  -webkit-text-stroke: 3px var(--metal-deep);
  paint-order: stroke fill;
}

.voyage-rank-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.voyage-rank-name {
  overflow: hidden;
  background-image: var(--gold-bevel);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1.15;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-overflow: ellipsis;
  filter: drop-shadow(0 1px 0 var(--gold-deep));
}

.voyage-rank-track {
  position: relative;
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--voyage-night);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--gold-deep);
}

.voyage-rank-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
}

.voyage-rank-count {
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.voyage-rank-prize {
  color: var(--gold-light);
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-align: right;
  white-space: nowrap;
}

.voyage-rank-prize[hidden],
.voyage-rank-claim[hidden] {
  display: none;
}

/* CLAIM: a gold key (it pays). */
.voyage-rank-claim {
  min-width: 84px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 2px solid var(--gold);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 50%),
    linear-gradient(180deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
  box-shadow: 0 0 0 1px var(--gold-deep), 0 3px 0 rgba(0, 0, 0, 0.6);
  color: var(--gold-deep);
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.08em;
}

.voyage-rank-claim:active {
  transform: translateY(2px);
}

/* ---- Plates ---- */

.voyage-plate {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--gold-deep);
  background: linear-gradient(180deg, var(--voyage-glass), var(--voyage-night));
  color: var(--gold-light);
  font-family: var(--display);
  font-size: 0.75rem;
  line-height: 1.15;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-transform: none;
}

/* ---- The galaxy: a medallion per sector and the Wandering Stars ---- */

/* Two medallions a row on a tall phone, three on a shorter one. */
.voyage-galaxy {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 14px 12px;
  padding: 4px 0 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.voyage-galaxy[hidden],
.voyage-sector[hidden] {
  display: none;
}

.voyage-medal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text);
}

.voyage-medal:active .voyage-medal-ring {
  transform: translateY(2px);
}

/* The sector's sky in a gold ring, its constellation drawn inside. */
.voyage-medal-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: min(118px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: radial-gradient(circle at 50% 40%, #2a1660, var(--voyage-night) 72%);
  box-shadow: 0 0 0 2px var(--gold-deep), inset 0 0 0 1px var(--gold-light), 0 4px 8px rgba(0, 0, 0, 0.6);
}

.voyage-medal-chart {
  width: 86%;
  height: 86%;
}

.voyage-medal.ready .voyage-medal-ring {
  border-color: var(--starlight);
  box-shadow: 0 0 0 2px var(--starlight-deep), inset 0 0 0 1px var(--starlight-light), 0 4px 8px rgba(0, 0, 0, 0.6);
}

.voyage-medal.done .voyage-medal-ring {
  background: radial-gradient(circle at 50% 40%, #4a2a7a, var(--voyage-night) 72%);
}

/* A locked sector: its sky dimmed under a drawn padlock. */
.voyage-medal-lock {
  display: none;
}

.voyage-medal.locked .voyage-medal-chart {
  opacity: 0.25;
}

.voyage-medal.locked .voyage-medal-lock {
  position: absolute;
  display: block;
  width: 24px;
  height: 20px;
  margin-top: 8px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 50%, var(--gold-dark));
  box-shadow: 0 0 0 1px var(--gold-deep);
}

.voyage-medal.locked .voyage-medal-lock::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 100%;
  height: 11px;
  border: 3px solid var(--gold);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
}

.voyage-medal-name {
  max-width: 100%;
  color: var(--text);
  font-family: var(--display);
  font-size: 0.72rem;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-align: center;
  text-shadow: 0 1px 0 #000;
}

.voyage-medal.ready .voyage-medal-plate {
  border-color: var(--starlight-deep);
  color: var(--starlight);
}

/* ---- A constellation, drawn (drawConstellation() in js/render.js) ---- */

.voyage-orbit {
  fill: none;
  stroke: var(--voyage-orbit);
  stroke-width: 0.6;
}

.voyage-orbit.inner {
  stroke-dasharray: 1.5 2.5;
}

.voyage-line-art {
  stroke: var(--voyage-line);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  stroke-linecap: round;
}

.voyage-line-art.lit {
  stroke: var(--gold-light);
  stroke-width: 1.4;
  stroke-dasharray: none;
}

.voyage-star-dot {
  fill: var(--voyage-dim);
}

.voyage-star-art.lit .voyage-star-dot {
  fill: var(--text);
}

.voyage-star-art.next .voyage-star-dot {
  fill: var(--starlight-light);
}

/* A lit star's glow (#voyage-glow, a gradient: no filter to repaint). */
.voyage-star-halo {
  opacity: 0.9;
}

/* In a medallion the figure is small: its stars and lines drawn bolder. */
.voyage-medal-chart .voyage-star-dot {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.6);
}

.voyage-medal-chart .voyage-line-art {
  stroke-width: 1.8;
  stroke: rgba(210, 200, 255, 0.5);
}

.voyage-medal-chart .voyage-line-art.lit {
  stroke: var(--gold-light);
  stroke-width: 2.2;
}

.voyage-medal-chart .voyage-star-ring,
.voyage-medal-chart .voyage-star-fill {
  stroke-width: 1.8;
}

.voyage-star-ring {
  fill: none;
  stroke: var(--starlight);
  stroke-width: 0.9;
  opacity: 0.55;
}

.voyage-star-fill {
  fill: none;
  stroke: var(--starlight);
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* The next star on the sky breathes; a star lighting flares once. */
.voyage-chart .voyage-star-art.next .voyage-star-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: voyage-next 1.8s ease-in-out infinite;
}

.voyage-star-art.flare .voyage-star-halo,
.voyage-star-art.flare .voyage-star-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: voyage-flare 700ms cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

@keyframes voyage-next {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.25); opacity: 0.9; }
}

@keyframes voyage-flare {
  0% { transform: scale(0.3); opacity: 0.4; }
  45% { transform: scale(2.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- A sector's sky ---- */

.voyage-sector {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.voyage-sector-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ‹ GALAXY: a glossy blue-violet key back to the medallions. */
.voyage-back {
  flex: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--sapphire), var(--key-blue) 55%, var(--navy));
  box-shadow: 0 0 0 1px var(--gold-deep), 0 3px 0 var(--navy-deep), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: var(--text);
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 #000;
}

.voyage-back:active {
  transform: translateY(2px);
}

.voyage-sector-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  background-image: var(--gold-bevel);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-overflow: ellipsis;
  filter: drop-shadow(0 1px 0 var(--gold-deep));
}

/* The sky: the constellation as large as the page leaves room for,
   between its ‹ and › keys. */
.voyage-sky {
  flex: 1 1 auto;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.voyage-chart {
  flex: 0 1 auto;
  height: 100%;
  max-height: 290px;
  max-width: calc(100% - 100px);
  aspect-ratio: 1;
}

.voyage-step {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: linear-gradient(180deg, var(--violet), var(--sheet-base));
  box-shadow: 0 0 0 1px var(--gold-deep), 0 3px 0 var(--bg-deep);
  color: var(--gold-light);
  font-family: var(--display);
  font-size: 1.4rem;
  line-height: 1;
}

.voyage-step:disabled {
  opacity: 0.3;
}

.voyage-step[hidden] {
  display: none;
}

.voyage-title-row {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.voyage-name {
  background-image: var(--gold-bevel);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  filter: drop-shadow(0 2px 0 var(--gold-deep));
}

/* What the next star needs and what it, and the whole constellation,
   pay: unframed lines between gold hairlines. */
.voyage-ledger {
  flex: none;
  display: flex;
  flex-direction: column;
}

.voyage-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  border-top: 1px solid var(--hairline);
}

.voyage-line:last-child {
  border-bottom: 1px solid var(--hairline);
}

.voyage-line[hidden] {
  display: none;
}

.voyage-line-label {
  flex: none;
  min-width: 72px;
  color: var(--text);
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 #000;
}

.voyage-line-value {
  margin-left: auto;
  color: var(--gold-light);
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 1px 0 #000;
}

.voyage-line-value.starlight {
  color: var(--starlight);
}

.voyage-track {
  position: relative;
  flex: 1 1 auto;
  height: 10px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--voyage-night);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--starlight-deep);
}

.voyage-track-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(180deg, var(--starlight-light), var(--starlight) 55%, var(--starlight-deep));
  transition: width 400ms ease-out;
}

/* VISIT: the one gold key, at most 240px wide. */
.voyage-visit.deal-collect {
  display: block;
  flex: none;
  align-self: center;
  width: min(240px, 100%);
}

.voyage-visit[hidden] {
  display: none;
}

.voyage-visit:disabled {
  opacity: 0.45;
}

.voyage-note {
  flex: none;
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.3;
  text-align: center;
}

.float-text.voyage-spend {
  color: var(--starlight);
  text-shadow: 0 0 8px rgba(93, 255, 176, 0.7), 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* In a sector the rank gives its room to the sky. */
#voyage-sheet.in-sector .voyage-rank {
  display: none;
}

/* ---- The reveal: a constellation lit, a rank claimed ---- */

.level-up.voyage-up {
  background: radial-gradient(circle at 50% 42%, #3a1d7a, var(--bg-deep) 72%);
}

.level-up-title.voyage-up-title {
  font-size: 2.3rem;
  white-space: nowrap;
}

.level-up-stage.voyage-up-stage {
  width: 200px;
  height: 190px;
}

.voyage-up-chart {
  position: relative;
  width: 190px;
  height: 190px;
  animation: spire-gem-in 700ms cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.voyage-up-chart[hidden],
.voyage-up-badge[hidden] {
  display: none;
}

.voyage-rank-badge.voyage-up-badge {
  width: 124px;
  height: 124px;
  border-width: 8px;
  animation: spire-gem-in 700ms cubic-bezier(0.2, 1.5, 0.4, 1) both;
}

.voyage-up-badge .voyage-rank-step {
  font-size: 2.4rem;
  -webkit-text-stroke-width: 6px;
}

.voyage-up-name {
  color: var(--text);
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.7);
}

.voyage-up .pearl-collect {
  width: min(240px, 100%);
}

@media (max-height: 790px) {
  .voyage-galaxy { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
  .voyage-medal-ring { width: min(92px, 100%); }
}

/* Short phones: the medallions and the sky a little smaller, so VISIT
   and its note stay in view. */
@media (max-height: 700px) {
  .voyage-galaxy { gap: 8px 8px; }
  .voyage-medal-ring { width: min(80px, 100%); }
  .voyage-sector { gap: 6px; }
  .voyage-sky { min-height: 96px; }
  .voyage-name { font-size: 1.15rem; }
  .voyage-line { min-height: 26px; }
  .voyage-visit.deal-collect { min-height: 50px; }
  .level-up-stage.voyage-up-stage { height: 150px; }
  .voyage-up-chart { width: 150px; height: 150px; }
}

/* Landscape: the galaxy spreads into a row of six. */
@media (min-width: 700px) and (orientation: landscape) {
  .voyage-galaxy { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .voyage-chart .voyage-star-art.next .voyage-star-ring,
  .voyage-star-art.flare .voyage-star-halo,
  .voyage-star-art.flare .voyage-star-dot,
  .voyage-up-chart,
  .voyage-rank-badge.voyage-up-badge {
    animation: none;
  }
  .voyage-track-fill {
    transition: none;
  }
}