/* Five-Star Slide premium phone pass. */
.rail-axis {
  display: grid;
  grid-template-columns: repeat(5, var(--card-w));
  justify-content: center;
  column-gap: clamp(3px, 1vw, 7px);
  align-items: center;
  color: #d8fffb;
  font-size: clamp(0.58rem, 2.4vw, 0.78rem);
  font-weight: 950;
  letter-spacing: 0.06em;
  text-align: center;
}

.rail-axis-top { margin: 2px 0 5px; }
.rail-axis-bottom { margin: 5px 0 1px; }
.rail-axis .axis-name {
  grid-column: 1 / -1;
  color: var(--line);
  font-size: 0.53rem;
  letter-spacing: 0.13em;
  text-align: center;
}
.rail-axis-top .axis-name { margin-bottom: 1px; }
.rail-axis-bottom .axis-name { order: 2; margin-top: 1px; }

.slide-result-banner {
  margin: 8px 1px 4px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #04100f;
  background: var(--line);
  text-align: center;
  font-weight: 950;
  font-size: clamp(0.72rem, 3vw, 0.95rem);
  letter-spacing: 0.06em;
  box-shadow: 0 0 24px rgba(64, 224, 208, 0.24);
}

.slide-flash { animation: slide-flash 900ms ease-out; }
.history-slide { color: #dffffb; font-weight: 850; }

@keyframes slide-flash {
  0% { transform: scale(0.97); filter: brightness(1.55); }
  45% { transform: scale(1.018); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Exact star-channel traces on the five Rail cards. */
#rail .card { overflow: visible; }
.star-trace {
  position: absolute;
  z-index: 8;
  top: 44%;
  width: 18%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  pointer-events: none;
  font-size: calc(var(--card-w) * 0.14);
  line-height: 1;
  animation: star-trace-pulse 720ms ease-in-out 3;
}
.star-trace::after { content: "★"; }
.black-trace::after { content: "☆"; }
.gold-trace {
  color: #40e0d0;
  background: rgba(0, 18, 16, 0.62);
  box-shadow: 0 0 10px rgba(64, 224, 208, 0.95), inset 0 0 7px rgba(64, 224, 208, 0.34);
}
.black-trace {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.72);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.78), inset 0 0 7px rgba(255, 255, 255, 0.24);
}
.return-trace { border-style: double; }
.ascent-trace { border-style: solid; }
.channel-0 { left: 10%; }
.channel-1 { left: 30%; }
.channel-2 { left: 50%; }
.channel-3 { left: 70%; }
.channel-4 { left: 90%; }
.slide-card { filter: brightness(1.08); }

@keyframes star-trace-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.84); opacity: 0.72; }
  50% { transform: translate(-50%, -50%) scale(1.16); opacity: 1; }
}

/* Camera mode: when the opponent moves, the Rail becomes the main event. */
.your-hand-area,
.rail-area,
.opponent-hand-area {
  transition: max-height 240ms ease, opacity 240ms ease, transform 240ms ease, padding 240ms ease;
}
body.camera-mode .your-hand-area {
  max-height: 54px;
  overflow: hidden;
  opacity: 0.28;
  transform: translateY(4px) scale(0.97);
}
body.camera-mode .your-hand-area .section-heading { margin-bottom: 2px; }
body.camera-mode .your-hand-area #yourHand { transform: translateY(12px); }
body.camera-mode .opponent-hand-area { opacity: 0.5; }
body.camera-mode .rail-area {
  --card-w: clamp(65px, 17.2vw, 122px);
  margin: 12px -2px 2px;
  padding: 10px 2px 12px;
  border: 1px solid rgba(64, 224, 208, 0.25);
  border-radius: 12px;
  background: rgba(1, 8, 8, 0.58);
  box-shadow: inset 0 0 25px rgba(64, 224, 208, 0.045);
}

/* Rail movement. */
.rail-move-left #rail .card { animation: rail-shift-right 360ms cubic-bezier(.2,.72,.2,1); }
.rail-move-right #rail .card { animation: rail-shift-left 360ms cubic-bezier(.2,.72,.2,1); }
.rail-move-left #rail .card:first-child { animation-name: intake-from-left; }
.rail-move-right #rail .card:last-child { animation-name: intake-from-right; }
.rail-shutdown-pick #rail .card { animation: shutdown-pick 330ms ease-out; }

@keyframes rail-shift-right {
  0% { transform: translateX(-22%); opacity: 0.58; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes rail-shift-left {
  0% { transform: translateX(22%); opacity: 0.58; }
  100% { transform: translateX(0); opacity: 1; }
}
@keyframes intake-from-left {
  0% { transform: translateX(-80%) rotate(-3deg); opacity: 0; }
  100% { transform: translateX(0) rotate(0); opacity: 1; }
}
@keyframes intake-from-right {
  0% { transform: translateX(80%) rotate(3deg); opacity: 0; }
  100% { transform: translateX(0) rotate(0); opacity: 1; }
}
@keyframes shutdown-pick {
  0% { transform: scale(0.96); filter: brightness(1.4); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Shutdown is a visible phase change, not a quiet rules footnote. */
body.shutdown-mode .table-shell {
  border-color: rgba(239, 255, 252, 0.72);
  box-shadow: 0 0 26px rgba(64, 224, 208, 0.11), inset 0 0 38px rgba(255, 255, 255, 0.025);
}
body.shutdown-mode .status-panel {
  border-left-color: #efffff;
  background: linear-gradient(90deg, rgba(64, 224, 208, 0.2), rgba(8, 20, 19, 0.94));
}
body.shutdown-mode .stack-count { text-decoration: line-through; opacity: 0.66; }
body.shutdown-mode .rail-area { filter: saturate(0.72) contrast(1.08); }
body.shutdown-mode::after {
  content: "SHUTDOWN";
  position: fixed;
  z-index: 90;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  padding: 16px 24px;
  border: 2px solid #efffff;
  border-radius: 10px;
  color: #efffff;
  background: rgba(2, 11, 10, 0.94);
  box-shadow: 0 0 42px rgba(64, 224, 208, 0.42);
  font-size: clamp(1.55rem, 9vw, 3.6rem);
  font-weight: 1000;
  letter-spacing: 0.18em;
  pointer-events: none;
  animation: shutdown-call 1500ms ease-out forwards;
}
@keyframes shutdown-call {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.74); }
  18%, 66% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
}

/* Card inspector. */
.premium-modal {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 4, 4, 0.82);
  backdrop-filter: blur(10px);
}
.premium-panel {
  position: relative;
  width: min(100%, 440px);
  padding: 24px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(155deg, #101b1a, #050909 70%);
  box-shadow: 0 24px 80px rgba(0,0,0,0.72), 0 0 34px rgba(64,224,208,0.12);
}
.premium-panel h2 { margin: 7px 0 2px; color: var(--line); font-size: 2rem; }
.premium-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.4rem;
}
.inspect-register {
  margin-bottom: 14px;
  color: #a6c7c3;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
}
.inspect-systems { display: grid; gap: 6px; }
.inspect-systems > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid #29413f;
  border-radius: 8px;
  background: #07100f;
  font-size: 0.75rem;
  font-weight: 850;
}
.inspect-systems .system-on { border-color: rgba(64,224,208,0.68); }
.system-on b { color: var(--line); }
.system-off b { color: #c9d5d4; }
.inspect-gold {
  margin-top: 13px;
  padding: 12px;
  border-top: 1px solid #29413f;
  color: white;
  text-align: center;
  font-weight: 950;
  letter-spacing: 0.1em;
}

/* Replay theater. */
.replay-panel {
  margin-top: 18px;
  padding: 15px 10px 10px;
  border: 1px solid rgba(64,224,208,0.38);
  border-radius: 12px;
  background: rgba(3, 9, 9, 0.88);
}
.replay-rail {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 12px 0;
  min-height: 76px;
}
.replay-card {
  width: clamp(43px, 13vw, 82px);
  aspect-ratio: 1 / 1.52;
  border: 1px solid rgba(64,224,208,0.8);
  border-radius: 4px;
  background-image: var(--atlas);
  background-size: 800% 400%;
  background-repeat: no-repeat;
  box-shadow: 0 5px 12px rgba(0,0,0,0.52);
}
.replay-text {
  min-height: 2.5em;
  color: #d9efec;
  font-size: 0.72rem;
  line-height: 1.4;
}
.replay-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 7px;
  align-items: center;
  margin-top: 9px;
}
.replay-controls button { min-height: 42px; font-size: 0.65rem; }
#replayIndex { color: var(--line); font-size: 0.68rem; font-weight: 950; white-space: nowrap; }

@media (max-width: 430px) {
  .rail-axis { font-size: 0.56rem; }
  .rail-axis .axis-name { font-size: 0.47rem; }
  .score-values { gap: 3px; font-size: clamp(0.48rem, 2.25vw, 0.65rem); }
  body.camera-mode .rail-area { --card-w: clamp(63px, 16.7vw, 72px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}