/* mta.html - page-only styles */

/* Hero visual: CSS/SVG San Andreas style radar (no MTA photo exists) */
.mta-hero-art {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--game-accent) 26%, transparent) 0%, transparent 62%),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(160deg, #0a1428 0%, #070912 70%);
  transition: transform 0.4s ease;
}
.cs-visual-card:hover .mta-hero-art { transform: scale(1.03); }
.mta-radar { width: min(78%, 330px); height: auto; overflow: visible; transform: translateY(-18px); }
.mta-water { fill: #0c2440; }
.mta-land { fill: #1d2f45; stroke: rgba(191, 219, 254, 0.22); stroke-width: 1.5; }
.mta-roads path { fill: none; stroke: rgba(191, 219, 254, 0.28); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mta-route {
  fill: none; stroke: #c084fc; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 10 8; animation: mtaRoute 1.6s linear infinite;
}
.mta-rim { fill: none; stroke: #bfdbfe; stroke-opacity: 0.55; stroke-width: 6; }
.mta-north circle { fill: #070912; stroke: #bfdbfe; stroke-width: 2; }
.mta-north text { fill: #f8fafc; font: 700 15px "JetBrains Mono", monospace; }
.mta-player { fill: #f8fafc; stroke: #070912; stroke-width: 2; stroke-linejoin: round; }
.mta-blip { animation: mtaBlip 2.2s ease-in-out infinite; stroke: #070912; stroke-width: 2; }
.mta-blip.a { fill: #60a5fa; }
.mta-blip.b { fill: #c084fc; animation-delay: 0.6s; }
.mta-blip.c { fill: #4ade80; animation-delay: 1.1s; }
.mta-blip.d { fill: #fb923c; animation-delay: 1.6s; }
@keyframes mtaRoute { to { stroke-dashoffset: -36; } }
@keyframes mtaBlip { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
/* radar animations always run (site policy: the OS reduce-animations setting is ignored, see common.js) */

/* static plan cards (same look as the live cs16 / samp cards) */
.mta-plan-tag { color: var(--game-accent); font-weight: 700; font-family: 'JetBrains Mono', monospace; }
#mtaPlansGrid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (max-width: 640px) { #mtaPlansGrid { grid-template-columns: 1fr; } }
.mta-plans-note {
  margin: 26px auto 0; max-width: 760px; text-align: center;
  color: var(--text-muted); font-size: 14px; line-height: 1.5;
}
.mta-plans-note svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; color: var(--game-accent); }

/* console section: style.css keeps its two columns at every width, which squeezed the console on phones */
.game-layout > * { min-width: 0; }
@media (max-width: 1080px) {
  .game-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .game-metrics-row { grid-template-columns: 1fr; gap: 10px; }
  .terminal-action-row { flex-wrap: wrap; gap: 12px; }
  .mockup-top { flex-wrap: wrap; gap: 8px; }
  .mockup-top span { overflow-wrap: anywhere; }
}
/* live pill sits on the always-dark terminal bar; in light mode the inline var(--game-accent) turns dark blue and unreadable there */
html[data-theme="light"] .mockup-top .live-pill { color: #93c5fd !important; }