/* MARS TRAIL — standalone stylesheet
   Uses the site's real palette (theme.json) so this still feels native to
   GameTest.App, with a pixel display font layered in for the retro register. */

@font-face {
  font-family: 'Press Start 2P';
  src: local('Press Start 2P');
}

.mt-root, .mt-root * {
  box-sizing: border-box;
}

.mt-root {
  --mt-bg: #12111f;
  --mt-surface: #1c1a2e;
  --mt-raised: #252340;
  --mt-border: #38355a;
  --mt-amber: #ff8a3d;
  --mt-purple: #6c5ce7;
  --mt-purple-soft: #a898ff;
  --mt-text: #e8e6f0;
  --mt-text-dim: #8a87a0;
  --mt-text-muted: #4a4760;
  --mt-green: #2d9a60;
  --mt-danger: #e0524a;

  width: 100%;
  min-height: 100%;
  background: var(--mt-bg);
  color: var(--mt-text);
  font-family: 'JetBrains Mono', monospace;
  display: flex;
  flex-direction: column;
}

.mt-pixel-font {
  font-family: 'Press Start 2P', 'JetBrains Mono', monospace;
}

/* --- Generic screen scaffolding --- */
.mt-screen {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 16px;
  overflow-y: auto;
  text-align: center;
}

.mt-title {
  font-family: 'Press Start 2P', 'JetBrains Mono', monospace;
  font-size: clamp(28px, 6vw, 48px);
  color: var(--mt-amber);
  letter-spacing: 2px;
  text-shadow: 3px 3px 0 var(--mt-purple);
}

.mt-subtitle {
  color: var(--mt-text-dim);
  font-size: 14px;
  max-width: 480px;
}

.mt-heading {
  font-family: 'Press Start 2P', 'JetBrains Mono', monospace;
  font-size: clamp(16px, 3vw, 22px);
  color: var(--mt-text);
  margin-bottom: 4px;
}

.mt-body {
  color: var(--mt-text-dim);
  font-size: 14px;
  max-width: 520px;
  line-height: 1.6;
}

.mt-body-small {
  color: var(--mt-text-dim);
  font-size: 12px;
  max-width: 480px;
  line-height: 1.5;
}

/* --- Buttons --- */
.mt-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 4px;
  border: 2px solid var(--mt-border);
  background: var(--mt-surface);
  color: var(--mt-text);
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.15s ease;
}
.mt-btn:hover:not(:disabled) {
  border-color: var(--mt-amber);
  transform: translateY(-1px);
}
.mt-btn:active:not(:disabled) {
  transform: translateY(0);
}
.mt-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mt-btn-primary {
  background: var(--mt-amber);
  border-color: var(--mt-amber);
  color: #1a0f06;
}
.mt-btn-primary:hover:not(:disabled) {
  background: #ff9d5c;
  border-color: #ff9d5c;
}
.mt-btn-choice {
  text-align: left;
  width: 100%;
}

/* --- Difficulty / crew card grids --- */
.mt-choice-grid, .mt-crew-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 640px;
}

.mt-card-btn {
  background: var(--mt-surface);
  border: 2px solid var(--mt-border);
  border-radius: 6px;
  padding: 16px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--mt-text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mt-card-btn:hover {
  border-color: var(--mt-purple-soft);
}
.mt-card-btn.mt-selected {
  border-color: var(--mt-amber);
  background: var(--mt-raised);
}
.mt-card-title {
  font-weight: 700;
  font-size: 14px;
}
.mt-card-desc {
  font-size: 11px;
  color: var(--mt-text-dim);
  line-height: 1.4;
}
.mt-crew-portrait canvas {
  image-rendering: pixelated;
  width: 64px;
  height: 48px;
}

/* --- Name input --- */
.mt-text-input {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  padding: 10px 14px;
  border-radius: 4px;
  border: 2px solid var(--mt-border);
  background: var(--mt-surface);
  color: var(--mt-text);
  text-align: center;
  width: 240px;
}
.mt-text-input:focus {
  outline: none;
  border-color: var(--mt-amber);
}

/* --- Playing screen layout --- */
.mt-screen-playing {
  justify-content: flex-start;
  padding: 12px;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.mt-scene-wrap {
  position: relative;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid var(--mt-border);
}

.mt-scene-canvas {
  display: block;
  width: 100%;
  height: 220px;
  min-height: 220px;
  image-rendering: pixelated;
  background: #0a0812;
  object-fit: cover;
}

@media (min-width: 600px) {
  .mt-scene-canvas {
    height: 280px;
  }
}

/* --- HUD overlay --- */
.mt-hud {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  background: rgba(18, 17, 31, 0.82);
  border: 1px solid var(--mt-border);
  border-radius: 4px;
  padding: 6px 8px;
  backdrop-filter: blur(2px);
}

/* On narrow viewports the HUD (4 stat rows + meta row) is tall enough to
   genuinely cover the vehicle sprite centered in the scene canvas beneath
   it — confirmed from a live screenshot where the rover was half-hidden
   behind the status bars. Below 600px, stop overlaying entirely: the HUD
   becomes a normal block below the canvas instead of floating on top of
   it, so nothing ever competes for the same pixels. Desktop keeps the
   overlay look since there's ample canvas height (280px) to spare there. */
@media (max-width: 599px) {
  .mt-scene-wrap {
    display: flex;
    flex-direction: column;
  }
  .mt-hud {
    position: static;
    top: auto; left: auto; right: auto;
    border-radius: 0;
    border-top: 1px solid var(--mt-border);
    border-left: none; border-right: none; border-bottom: none;
    backdrop-filter: none;
  }
}

.mt-hud-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 47%;
  min-width: 110px;
}
.mt-hud-label {
  font-size: 9px;
  color: var(--mt-text-dim);
  width: 30px;
  flex-shrink: 0;
}
.mt-hud-bar-outer {
  flex: 1 1 auto;
  height: 6px;
  background: var(--mt-bg);
  border: 1px solid var(--mt-border);
  border-radius: 2px;
  overflow: hidden;
}
.mt-hud-bar-inner {
  height: 100%;
  transition: width 0.3s ease;
}
.mt-bar-good { background: var(--mt-green); }
.mt-bar-warn { background: var(--mt-amber); }
.mt-bar-danger { background: var(--mt-danger); }
.mt-hud-value {
  font-size: 10px;
  color: var(--mt-text-dim);
  width: 24px;
  text-align: right;
  flex-shrink: 0;
}
.mt-hud-meta {
  display: flex;
  gap: 14px;
  width: 100%;
  font-size: 11px;
  color: var(--mt-amber);
  margin-top: 4px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
}

/* --- Controls --- */
.mt-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  background: var(--mt-surface);
  border: 1px solid var(--mt-border);
  border-radius: 6px;
  padding: 12px;
}
.mt-control-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mt-control-label {
  font-size: 10px;
  color: var(--mt-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mt-pill-row {
  display: flex;
  gap: 4px;
}
.mt-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid var(--mt-border);
  background: var(--mt-bg);
  color: var(--mt-text-dim);
  cursor: pointer;
}
.mt-pill:hover:not(:disabled) {
  border-color: var(--mt-purple-soft);
}
.mt-pill-active {
  background: var(--mt-amber);
  color: #1a0f06;
  border-color: var(--mt-amber);
}
.mt-pill:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mt-advance-btn {
  margin-left: auto;
}

/* --- Crew status panel --- */
.mt-crew-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--mt-surface);
  border: 1px solid var(--mt-border);
  border-radius: 6px;
  padding: 8px 10px;
}
.mt-crew-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--mt-text);
  background: var(--mt-bg);
  border: 1px solid var(--mt-border);
  border-radius: 12px;
  padding: 4px 10px 4px 6px;
}
.mt-crew-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mt-green);
  flex-shrink: 0;
}
.mt-crew-badge-dead {
  opacity: 0.55;
}
.mt-crew-badge-dead .mt-crew-badge-dot {
  background: var(--mt-danger);
}
.mt-crew-badge-dead .mt-crew-badge-name {
  text-decoration: line-through;
}
.mt-crew-badge-self {
  border-color: var(--mt-amber);
  background: rgba(255, 138, 61, 0.08);
}
.mt-crew-badge-self .mt-crew-badge-dot {
  background: var(--mt-amber);
}
.mt-crew-badge-self .mt-crew-badge-name {
  color: var(--mt-amber);
  font-weight: 600;
}

/* --- Log panel --- */
.mt-log-panel {
  background: var(--mt-surface);
  border: 1px solid var(--mt-border);
  border-radius: 6px;
  padding: 10px 12px;
  flex: 1 1 auto;
  min-height: 90px;
  max-height: 280px;
  overflow-y: auto;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mt-log-empty {
  color: var(--mt-text-muted);
  font-style: italic;
}
.mt-log-row {
  color: var(--mt-text-dim);
  line-height: 1.5;
}
.mt-log-day {
  color: var(--mt-amber);
  font-weight: 600;
}

/* --- Modal overlay (choice / minigame) --- */
.mt-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 8, 18, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}
.mt-modal {
  background: var(--mt-raised);
  border: 2px solid var(--mt-amber);
  border-radius: 8px;
  padding: 24px;
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mt-modal-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--mt-amber);
}
.mt-modal-text {
  font-size: 14px;
  color: var(--mt-text);
  line-height: 1.5;
  margin: 0;
}
.mt-modal-hint {
  font-size: 11px;
  color: var(--mt-text-dim);
  margin: 0;
}
.mt-modal-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Minigame --- */
.mt-minigame-track {
  position: relative;
  width: 260px;
  height: 28px;
  background: var(--mt-bg);
  border: 2px solid var(--mt-border);
  border-radius: 4px;
  margin: 8px auto;
  overflow: hidden;
}
.mt-minigame-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(45, 154, 96, 0.4);
  border-left: 2px solid var(--mt-green);
  border-right: 2px solid var(--mt-green);
}
.mt-minigame-marker {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 10px;
  background: var(--mt-amber);
  border-radius: 2px;
}
.mt-marker-hit { background: var(--mt-green) !important; }
.mt-marker-miss { background: var(--mt-danger) !important; }
.mt-minigame-attempts {
  text-align: center;
  font-size: 12px;
  color: var(--mt-text-dim);
}

/* --- Landmark screen --- */
.mt-screen-landmark {
  gap: 14px;
}
.mt-landmark-art {
  width: 100%;
  max-width: 480px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid var(--mt-border);
}
.mt-landmark-canvas {
  display: block;
  width: 100%;
  height: 160px;
  image-rendering: pixelated;
  background: #0a0812;
}
.mt-landmark-meta {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--mt-amber);
  font-family: 'Press Start 2P', monospace;
}

/* --- Ending screen --- */
.mt-end-summary {
  background: var(--mt-surface);
  border: 1px solid var(--mt-border);
  border-radius: 6px;
  padding: 12px 20px;
  font-size: 13px;
  color: var(--mt-text-dim);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* --- Responsive --- */
@media (max-width: 480px) {
  .mt-hud-row { flex: 1 1 100%; }
  .mt-controls { flex-direction: column; align-items: stretch; }
  .mt-advance-btn { margin-left: 0; }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .mt-btn, .mt-card-btn, .mt-hud-bar-inner { transition: none; }
}