/* terraria.html — illustrated hero art (replaces the missing terraria.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; }

.terraria-art {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.9) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 28% 9%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 24%, rgba(255, 255, 255, 0.8) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 61% 12%, rgba(255, 255, 255, 0.6) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 30%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 36% 38%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px),
    linear-gradient(180deg, #0b1026 0%, #172554 38%, #1e3a8a 68%, #2563eb 100%);
}
.terraria-art .art-moon {
  top: 11%; right: 14%; width: 62px; height: 62px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fffbeb 0%, #fde68a 60%, #fbbf24 100%);
  box-shadow: 0 0 40px 10px rgba(253, 230, 138, 0.35);
}
/* blocky terrain: grass, dirt, then stone */
.terraria-art .art-ground,
.terraria-art .art-hill {
  bottom: 0;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 24px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 24px),
    linear-gradient(180deg, #4ade80 0 12px, #15803d 12px 22px, #92400e 22px 58%, #57534e 58% 100%);
}
.terraria-art .art-ground { left: 0; right: 0; height: 34%; }
.terraria-art .art-hill-left { left: 0; width: 34%; height: 46%; }
.terraria-art .art-hill-right { right: 0; width: 26%; height: 41%; }

.terraria-art .art-icon {
  position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%);
  width: 92px; height: 92px; color: #fff; stroke-width: 1.6;
  filter: drop-shadow(0 6px 22px rgba(59, 130, 246, 0.75));
}

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