/* unturned.html — illustrated hero art (replaces the missing unturned.webp photo). */
.cs-hero-art {
  position: absolute; inset: 0; overflow: hidden;
  transition: transform 0.4s ease;
}
.cs-visual-card:hover .cs-hero-art { transform: scale(1.03); }
.cs-hero-art > span { position: absolute; display: block; }

.unturned-art {
  background: linear-gradient(180deg, #111a12 0%, #24361f 40%, #4d6b35 75%, #7f9a4c 100%);
}
.unturned-art .art-sun {
  top: 14%; right: 18%; width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 249, 157, 0.85) 0%, rgba(190, 242, 100, 0.25) 45%, transparent 70%);
}
/* low-poly ruined city skyline */
.unturned-art .art-skyline { left: 0; right: 0; bottom: 0; }
.unturned-art .art-skyline-back {
  height: 58%; background: #2f4527;
  clip-path: polygon(0 52%, 7% 52%, 7% 30%, 15% 30%, 15% 44%, 22% 44%, 22% 18%, 27% 12%, 32% 18%, 32% 48%,
    40% 48%, 40% 26%, 49% 26%, 49% 40%, 56% 40%, 56% 8%, 63% 8%, 63% 36%, 70% 36%, 70% 22%, 78% 22%,
    78% 46%, 86% 46%, 86% 30%, 93% 30%, 93% 50%, 100% 50%, 100% 100%, 0 100%);
}
.unturned-art .art-skyline-front {
  height: 38%; background: #121c10;
  clip-path: polygon(0 40%, 10% 40%, 10% 20%, 18% 20%, 18% 52%, 26% 52%, 26% 30%, 30% 24%, 34% 30%, 34% 58%,
    44% 58%, 44% 34%, 52% 34%, 52% 60%, 60% 60%, 60% 16%, 68% 16%, 68% 50%, 76% 50%, 76% 28%, 84% 28%,
    84% 56%, 92% 56%, 92% 36%, 100% 36%, 100% 100%, 0 100%);
}
.unturned-art .art-fog {
  left: 0; right: 0; bottom: 0; height: 45%;
  background: linear-gradient(180deg, transparent 0%, rgba(190, 242, 100, 0.12) 60%, rgba(190, 242, 100, 0.2) 100%);
}
.unturned-art .art-icon {
  position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%);
  width: 92px; height: 92px; color: #d9f99d; stroke-width: 1.6;
  filter: drop-shadow(0 6px 22px rgba(132, 204, 22, 0.7));
}

/* mobile: long translated highlights (nowrap) were pushing the hero column wider than the screen */
.hero-grid > * { min-width: 0; }
@media (max-width: 600px) {
  .hero-title { font-size: 34px; }
  .curved-highlight { white-space: normal; }
}

/* plan cards: the popular badge (longer in RO/DE) overlapped the long tier names, so every card header drops a little to keep the row aligned */
#plans .vps-plan-header { padding-top: 16px; }

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