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

/* Hero visual: CSS/SVG radar (replaces the missing cs2.webp photo) */
.cs2-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) 28%, 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 .cs2-hero-art { transform: scale(1.03); }
.cs2-radar { width: min(78%, 330px); height: auto; overflow: visible; transform: translateY(-18px); }
.cs2-ring { fill: none; stroke: rgba(191, 219, 254, 0.28); stroke-width: 1.5; }
.cs2-axis { stroke: rgba(191, 219, 254, 0.16); stroke-width: 1; stroke-dasharray: 4 6; }
.cs2-sweep { transform-origin: 200px 200px; animation: cs2Sweep 4s linear infinite; }
.cs2-sweep path { fill: rgba(59, 130, 246, 0.22); }
.cs2-cross line { stroke: #bfdbfe; stroke-width: 3; stroke-linecap: round; }
.cs2-cross circle { fill: #bfdbfe; }
.cs2-blip { animation: cs2Blip 2s ease-in-out infinite; }
.cs2-blip.t { fill: #fb923c; }
.cs2-blip.ct { fill: #60a5fa; animation-delay: 1s; }
@keyframes cs2Sweep { to { transform: rotate(360deg); } }
@keyframes cs2Blip { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

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