/* Swarm Shock game page: the game's neon look (cyan ship, magenta swarm, lime XP, gold ore) on deep space.
   Loaded after site.css, only on /swarm-shock/ and /es/swarm-shock/. */
body.swarm {
  --ss-navy: #05060f; --ss-cyan: #2ef2ff; --ss-magenta: #ff2e9a; --ss-lime: #9cff3a; --ss-gold: #ffd13a;
  --ss-violet: #8c5cff; --ss-orange: #ff8a2e; --ss-panel: rgba(10, 12, 30, 0.82); --ss-edge: rgba(46, 242, 255, 0.28);
  background: var(--ss-navy) radial-gradient(ellipse at 50% -10%, #1a0f38 0%, var(--ss-navy) 60%) fixed;
}
.swarm a { color: var(--ss-cyan); }
.swarm a:hover { color: #fff; }
.swarm main { max-width: 1120px; }

/* hero: the key art full width, then the pitch */
.ss-hero { margin: 0 0 28px; border-radius: 24px; overflow: hidden; border: 1px solid var(--ss-edge);
  box-shadow: 0 0 60px rgba(46, 242, 255, 0.18); }
.ss-hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.ss-pitch { text-align: center; margin: 0 auto 40px; max-width: 760px; }
.ss-title { font-weight: 900; font-size: clamp(44px, 9vw, 84px); line-height: 0.95; margin: 0 0 14px; letter-spacing: 1px; }
.ss-title .a { color: var(--ss-cyan); text-shadow: 0 0 22px rgba(46, 242, 255, 0.7); }
.ss-title .b { color: var(--ss-magenta); text-shadow: 0 0 22px rgba(255, 46, 154, 0.7); }
.ss-tag { font-size: clamp(19px, 3vw, 24px); font-weight: 800; margin: 0 0 6px; }
.ss-sub { color: var(--muted); margin: 0 0 22px; }
.ss-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ss-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 900;
  text-decoration: none; border: 2px solid var(--ss-cyan); color: var(--ss-navy) !important; background: var(--ss-cyan);
  box-shadow: 0 0 22px rgba(46, 242, 255, 0.45); }
.ss-btn.ghost { background: transparent; color: var(--ss-cyan) !important; box-shadow: none; }
.ss-btn:hover { filter: brightness(1.1); }

/* section headings */
.ss-h { font-weight: 900; font-size: clamp(26px, 4.5vw, 38px); text-align: center; margin: 56px 0 8px; line-height: 1.1; }
.ss-h .hl { color: var(--hl, var(--ss-cyan)); text-shadow: 0 0 18px color-mix(in srgb, var(--hl, var(--ss-cyan)) 60%, transparent); }
.ss-lead { text-align: center; color: var(--muted); margin: 0 auto 26px; max-width: 640px; }

/* how it plays: video + 3 steps */
.ss-play { display: grid; grid-template-columns: 300px 1fr; gap: 36px; align-items: center; }
.ss-video { border-radius: 28px; overflow: hidden; border: 2px solid var(--ss-cyan); box-shadow: 0 0 40px rgba(46, 242, 255, 0.3);
  background: #000; aspect-ratio: 886 / 1920; }
.ss-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.ss-steps li { background: var(--ss-panel); border: 1px solid var(--ss-edge); border-radius: 18px; padding: 18px 20px 18px 74px;
  position: relative; counter-increment: s; }
.ss-steps li::before { content: counter(s); position: absolute; left: 20px; top: 18px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 900; color: var(--ss-navy); background: var(--c, var(--ss-cyan)); }
.ss-steps b { display: block; font-size: 19px; }
.ss-steps span { color: var(--muted); }

/* screenshot strip */
.ss-shots { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 18px;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.ss-shots img { flex: 0 0 auto; width: 230px; border-radius: 18px; scroll-snap-align: start; border: 1px solid var(--edge); }

/* fair by design */
.ss-fair { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ss-card { background: var(--ss-panel); border: 1px solid var(--ss-edge); border-radius: 18px; padding: 20px; text-align: center; }
.ss-card .i { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.ss-card b { display: block; font-size: 18px; color: var(--c, #fff); }
.ss-card span { color: var(--muted); font-size: 15px; }

/* apple tv */
.ss-tv { display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center; }
.ss-tv img { border-radius: 18px; border: 1px solid var(--edge); }
.ss-tv h3 { font-size: 26px; margin: 0 0 8px; font-weight: 900; }
.ss-list { margin: 0; padding-left: 20px; }
.ss-list li { margin: 6px 0; }

/* everything in the game */
.ss-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ss-feats div { background: var(--ss-panel); border: 1px solid var(--edge); border-radius: 16px; padding: 16px 18px; }
.ss-feats b { display: block; color: var(--c, var(--ss-cyan)); }
.ss-feats span { color: var(--muted); font-size: 15px; }
.ss-help { text-align: center; margin-top: 48px; }

@media (max-width: 860px) {
  .ss-play { grid-template-columns: 1fr; }
  .ss-video { max-width: 280px; margin: 0 auto; }
  .ss-fair { grid-template-columns: repeat(2, 1fr); }
  .ss-tv { grid-template-columns: 1fr; }
  .ss-feats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .ss-feats { grid-template-columns: 1fr; }
  .ss-shots img { width: 200px; }
}
@media (prefers-reduced-motion: reduce) { .ss-video video { display: none; } .ss-video { background: center / cover url("/assets/swarm/preview-poster.jpg"); } }
/* grid children may shrink below their content (a 1600 px image must not widen the page on phones) */
.ss-play > *, .ss-tv > *, .ss-fair > *, .ss-feats > * { min-width: 0; }
.ss-tv img { width: 100%; }