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

/* mobile: long translated highlights (nowrap) must not push 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; }
}

/* 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 there */
html[data-theme="light"] .mockup-top .live-pill { color: #93c5fd !important; }

/* plans (3 cards): one even row on desktop, one column on phones */
#palPlansGrid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (max-width: 640px) { #palPlansGrid { grid-template-columns: 1fr; } }
/* the popular badge (longer in RO/DE) must not overlap the tier name */
#plans .vps-plan-header { padding-top: 16px; }