/* 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;
}

.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 */
.ms-card.is-locked .ms-card__front {
  border-color: rgba(255,255,255,0.06);
}

/* ============================================================
   Category-tinted borders + card body tint
   Register outline (below): Par = crimson, Time = shard-blue, Training = white.
   Tint applies to both faces (front constellation + back orbit) so
   category reads identically whether the card is flipped or not.
   ============================================================ */
.ms-card--time .ms-card__face     { background: #0a0d1a;  border-color: rgba(170, 200, 255, 0.25); }
.ms-card--par  .ms-card__face     { background: #090b1c;  border-color: rgba(130, 160, 240, 0.30); }
.ms-card--training .ms-card__face { background: #0c0c10;  border-color: rgba(255, 255, 255, 0.15); }

.ms-card--time:focus .ms-card__face,
.ms-card--time.is-selected .ms-card__face     { border-color: rgba(170, 200, 255, 0.9); }
.ms-card--par:focus .ms-card__face,
.ms-card--par.is-selected .ms-card__face      { border-color: rgba(130, 160, 240, 0.9); }
.ms-card--training:focus .ms-card__face,
.ms-card--training.is-selected .ms-card__face { border-color: rgba(255, 255, 255, 0.85); }

/* Display register drives the card outline: Par = crimson, Time = shard-blue.
   Training stays neutral white regardless of its display register, so it's
   excluded from both rules. */
.ms-card--display-par:not(.ms-card--training) .ms-card__face { border-color: rgba(220, 20, 60, 0.55); }
.ms-card--display-par:not(.ms-card--training):focus .ms-card__face,
.ms-card--display-par:not(.ms-card--training).is-selected .ms-card__face { border-color: rgba(255, 70, 95, 0.95); }

.ms-card--display-time:not(.ms-card--training) .ms-card__face { border-color: rgba(170, 200, 255, 0.55); }
.ms-card--display-time:not(.ms-card--training):focus .ms-card__face,
.ms-card--display-time:not(.ms-card--training).is-selected .ms-card__face { border-color: rgba(170, 200, 255, 0.95); }

/* ============================================================
   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: var(--r-mono, '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: var(--stars-font, '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: var(--r-mono, '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);
}

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

.ms-time-unit {
  color: rgba(170, 200, 255, 0.75);
  margin-left: 1px;
}

/* Shard facet — blue-white to match the in-game crystalline shard render.
   margin-left:auto pushes it to the meta row's right edge so it sits in the
   bottom-right corner, mirroring the top-right tier/rank dot. */
.ms-shard-facet {
  margin-left: auto;
  color: rgba(200, 225, 255, 0.9);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 0 5px rgba(170, 200, 255, 0.55);
}

/* ============================================================
   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;
}

/* ============================================================
   Étude — the practice-room doorway (§1 entrance)
   A white wormhole adrift in the open margin, apart from the card
   filmstrip. Rest = thin white line-work (silence is white); hover
   blooms into color as a low tone fades in (sound = color). Not a
   card: no flip, no rank, no pips. Built by map-select.js.
   ============================================================ */
.etude-portal {
  position: absolute;
  top: 15%;
  right: max(6vw, 3rem);
  width: 132px;
  height: 132px;
  z-index: 2;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* adrift: a slow, small wander so it never reads as pinned UI */
  animation: etude-drift 23s ease-in-out infinite alternate;
}
.etude-svg {
  width: 132px;
  height: 132px;
  overflow: visible;
  /* the bloom: none at rest, a soft colored glow when awake */
  filter: drop-shadow(0 0 0 rgba(120, 190, 255, 0));
  transition: filter 0.55s var(--stars-ease-out-expo, ease-out);
}
.etude-rings {
  transform-box: fill-box;
  transform-origin: center;
}
.etude-rings--cw  { animation: etude-churn 34s linear infinite; }
.etude-rings--ccw { animation: etude-churn 27s linear infinite reverse; }
.etude-rings ellipse,
.etude-core {
  fill: none;
  stroke: rgba(255, 255, 255, 0.42);   /* silence is white */
  stroke-width: 1;
  transition: stroke 0.55s var(--stars-ease-out-expo, ease-out);
}
.etude-core { fill: rgba(255, 255, 255, 0.55); stroke: none; }
.etude-caption {
  margin-top: 0.35rem;
  font-family: var(--stars-font);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.28em;
  color: rgba(180, 214, 255, 0.9);
  opacity: 0;
  transition: opacity 0.5s var(--stars-ease-out-expo, ease-out);
  pointer-events: none;
}

/* awake — hover or keyboard focus: bloom + caption (tone starts in JS) */
.etude-portal.is-awake .etude-svg {
  filter: drop-shadow(0 0 7px rgba(120, 190, 255, 0.85));
}
.etude-portal.is-awake .etude-rings ellipse {
  stroke: hsl(205, 90%, 74%);
}
.etude-portal.is-awake .etude-core {
  fill: hsl(205, 95%, 82%);
}
.etude-portal.is-awake .etude-caption { opacity: 0.92; }

@keyframes etude-churn { to { transform: rotate(360deg); } }
@keyframes etude-drift {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-7px, 9px); }
  100% { transform: translate(6px, -5px); }
}
@media (prefers-reduced-motion: reduce) {
  .etude-portal, .etude-rings--cw, .etude-rings--ccw { animation: none; }
}

/* Shorter viewports: the vertically-centered card band rises toward the top, so
   shrink the doorway and lift it to preserve the gap. Final responsive placement
   is David's visual-pass call; this is a safe first-pass mitigation. */
@media (max-height: 780px) {
  .etude-portal { top: 64px; width: 108px; }
  .etude-svg { width: 108px; height: 108px; }
}
@media (max-height: 640px) {
  .etude-portal { top: 48px; width: 88px; }
  .etude-svg { width: 88px; height: 88px; }
  .etude-caption { font-size: 0.64rem; }
}