/* Signs of the run (ADR-033): the deal after a room, the rest, the redraw and
   the build. Rarity colours the card's edge, family colours its label. */

#game [data-ui-screen] .reward-choices { gap: 10px; }
#game [data-ui-screen] .reward-choice {
  --reward-accent: #a9bcc2;
  --sign-family: var(--ui-cyan);
  grid-template-columns: 56px minmax(0, 1fr) 12px;
  gap: 12px;
  min-height: 0;
  padding: 12px 18px 12px 16px;
}
#game [data-ui-screen] .reward-choice[data-rarity="rare"] { --reward-accent: #7cc4ff; }
#game [data-ui-screen] .reward-choice[data-rarity="legendary"] {
  --reward-accent: #e9c27a;
  box-shadow: inset 3px 0 var(--reward-accent), 0 0 22px rgba(233, 194, 122, .22);
}
#game [data-ui-screen] [data-family="blade"] { --sign-family: #9fe3ff; }
#game [data-ui-screen] [data-family="ward"] { --sign-family: #e6c88a; }
#game [data-ui-screen] [data-family="ether"] { --sign-family: #c9a8ff; }
#game [data-ui-screen] [data-family="blood"] { --sign-family: #ff9a92; }

#game [data-ui-screen] .reward-choice > .reward-sign-icon {
  width: 56px;
  height: 56px;
  padding: 2px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sign-family) 22%, transparent) 0, transparent 70%);
  object-fit: contain;
}
#game [data-ui-screen] .reward-choice .reward-choice-meta {
  color: var(--sign-family);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.3;
  text-transform: uppercase;
}
#game [data-ui-screen] .reward-choice[data-rarity="legendary"] .reward-choice-meta::after { content: " ✦"; color: var(--reward-accent); }
#game [data-ui-screen] .reward-choice .reward-choice-bonus { color: var(--ui-ink); }
#game [data-ui-screen] .reward-choice .reward-choice-union {
  color: #ffe0a0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}
#game [data-ui-screen] .reward-choice .reward-choice-union::before { content: "✦ "; }
#game [data-ui-screen] .reward-choice .reward-choice-family { color: var(--ui-quiet); font-size: 11px; line-height: 1.4; }

/* The rest: no sign, the biggest heal. */
#game [data-ui-screen] .reward-choice.reward-rest { --reward-accent: #9edbb9; --sign-family: #9edbb9; }
#game [data-ui-screen] .reward-choice.reward-rest strong { color: #cfeedd; }

#game [data-ui-screen] .reward-reroll {
  width: 100%;
  margin-top: 6px;
  color: var(--ui-cyan);
}
#game [data-ui-screen] .reward-reroll:disabled { color: var(--ui-quiet); filter: none; opacity: .75; }

#game [data-ui-screen] .reward-build {
  display: grid;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: rgba(5, 11, 15, .72);
}
#game [data-ui-screen] .reward-build .eyebrow { margin: 0; }
#game [data-ui-screen] .reward-build-signs { display: flex; flex-wrap: wrap; gap: 6px; }
#game [data-ui-screen] .reward-build-sign {
  --reward-accent: #a9bcc2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 2px 9px 2px 2px;
  border: 1px solid color-mix(in srgb, var(--reward-accent) 60%, transparent);
  border-radius: 14px;
  color: var(--ui-ink);
  font-size: 12px;
  line-height: 1.5;
}
#game [data-ui-screen] .reward-build-sign[data-rarity="rare"] { --reward-accent: #7cc4ff; }
#game [data-ui-screen] .reward-build-sign[data-rarity="legendary"] { --reward-accent: #e9c27a; }
#game [data-ui-screen] .reward-build-sign img { width: 26px; height: 26px; object-fit: contain; }
#game [data-ui-screen] .reward-build-families {
  margin: 0;
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* The pause screen: the run's signs with what each does, and the Unions in force. */
#game #pauseOverlay .pause-build {
  display: grid;
  gap: 8px;
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: rgba(5, 11, 15, .72);
  text-align: left;
}
#game #pauseOverlay .pause-build .eyebrow { margin: 0; }
#game #pauseOverlay .pause-build-signs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
#game #pauseOverlay .pause-build-signs li {
  --reward-accent: #a9bcc2;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#game #pauseOverlay .pause-build-signs li[data-rarity="rare"] { --reward-accent: #7cc4ff; }
#game #pauseOverlay .pause-build-signs li[data-rarity="legendary"] { --reward-accent: #e9c27a; }
#game #pauseOverlay .pause-build-signs img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--reward-accent) 55%, transparent);
  object-fit: contain;
}
#game #pauseOverlay .pause-build-signs span { display: grid; gap: 1px; min-width: 0; }
#game #pauseOverlay .pause-build-signs strong { color: var(--ui-ink); font: 600 13px/1.35 var(--ui-font-body); }
#game #pauseOverlay .pause-build-signs small { color: var(--ui-muted); font-size: 12px; line-height: 1.4; }
#game #pauseOverlay .pause-build-signs .pause-build-union { grid-template-columns: minmax(0, 1fr); padding-left: 46px; }
#game #pauseOverlay .pause-build-union strong { color: #ffe0a0; }
#game #pauseOverlay .pause-build .reward-build-families:empty { display: none; }
