/* Stars — Map Select Cards
   Visual tokens from specs/Stars logo/handoff/README.md */

/* ============================================================
   Card — flip container
   Sits inside the existing .chapter-grid (horizontal scroll row).
   ============================================================ */
.ms-card {
  flex: 0 0 200px;
  width: 200px;
  height: 280px;
  scroll-snap-align: center;
  perspective: 1400px;
  cursor: pointer;
  outline: none;
}
.ms-card:focus-visible {
  outline: none;
}

/* Playtest: inaccessible cards show the back face faded out.
   `is-locked` is paired with `is-flipped` in buildCard so the constellation
   preview renders dimmed — a teaser of scope without being playable. */
.ms-card.is-locked {
  opacity: 0.5;
  filter: grayscale(0.5);
  cursor: not-allowed;
  transition: opacity 0.6s ease, filter 0.6s ease;
}

/* Playtest: unlock flash — card brightens briefly then settles when a lock
   transition fires in refreshProgress. */
@keyframes ms-unlock-flash {
  0%   { opacity: 0.5; filter: grayscale(0.5) brightness(1); }
  18%  { opacity: 1;   filter: grayscale(0)   brightness(2.2); }
  55%  { opacity: 1;   filter: grayscale(0)   brightness(1.3); }
  100% { opacity: 1;   filter: grayscale(0)   brightness(1); }
}
.ms-card.is-unlocking {
  animation: ms-unlock-flash 1.6s ease-out;
}

.ms-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(0.7, 0.05, 0.3, 1);
}
.ms-card.is-flipped .ms-card__inner {
  transform: rotateY(180deg);
}

.ms-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  background: #0a0d1a;
  border: 1px solid rgba(255,255,255,0.09);
  transition: border-color 0.35s ease;
}

/* Front = orbit / locked face */
.ms-card__front {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Back = revealed face (constellation + chrome) */
.ms-card__back {
  transform: rotateY(180deg);
}

/* ============================================================
   Card border states
   ============================================================ */
/* Selected (focused) */
.ms-card:focus .ms-card__face,
.ms-card.is-selected .ms-card__face {
  border-color: rgba(255,255,255,0.85);
  border-width: 1.5px;
}

/* Locked — dimmer border, but visible enough to read the card outline */
.ms-card.is-locked .ms-card__front {
  border-color: rgba(255,255,255,0.16);
}

/* ============================================================
   Revealed-face chrome
   ============================================================ */
.ms-chrome-top {
  position: absolute;
  top: 14px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.32);
  pointer-events: none;
  z-index: 1;
}

.ms-chrome-top__check {
  color: rgba(77,168,255,0.75);
  letter-spacing: 0;
  font-size: 11px;
}

.ms-chrome-top__tier {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 6px currentColor;
}
.ms-tier-redDwarf    { background: rgb(255, 140, 100); color: rgb(255, 140, 100); }
.ms-tier-yellowDwarf { background: rgb(255, 220, 130); color: rgb(255, 220, 130); }
.ms-tier-blueGiant   { background: rgb(150, 200, 255); color: rgb(150, 200, 255); }
.ms-tier-magnetar    { background: rgb(220, 150, 255); color: rgb(220, 150, 255); }

.ms-chrome-bottom {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  pointer-events: none;
  z-index: 1;
}

.ms-map-name {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.82);
  text-transform: lowercase;
  margin-bottom: 6px;
  transition: color 0.35s ease;
}

.ms-card:focus .ms-map-name,
.ms-card.is-selected .ms-map-name {
  color: #ffffff;
}

.ms-chrome-meta {
  display: flex;
  gap: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.32);
  text-transform: uppercase;
  align-items: center;
}

.ms-diff-pips {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.ms-diff-pip {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.ms-diff-pip.is-active {
  background: rgba(77,168,255,0.85);
  box-shadow: 0 0 4px rgba(77,168,255,0.5);
}

.ms-par-value {
  color: rgba(244,162,97,0.75);
}

/* ============================================================
   Constellation SVG area
   ============================================================ */
.ms-constellation {
  position: absolute;
  top: 42px;
  left: 0;
  right: 0;
  bottom: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-constellation svg {
  overflow: visible;
}

/* ============================================================
   Orbit SVG animation
   ============================================================ */
.ms-orbit-svg {
  width: 165px;
  height: 165px;
  overflow: visible;
}