/* "Play CS 1.6 in the browser" landing pages, 2026-11-07 (/play-cs-1-6-online/ + LT/RU/ES/PT twins).
   Loaded after /css/seo-servers-20261012.css and only adds to it: the two big play buttons in the hero, the purple
   PUBLIC card (same tokens as the homepage card: #9A34E6 / #C9A0FF, buttons #7526B4 -> #611E96 for white text),
   icon badges and the legal line. ASCII only (build_play.py checks). */

.sp-server--zp { --sv-accent: #E8414D; --sv-accent-2: #FF7A84; --sv-btn-1: #E04654; --sv-btn-2: #B5303C; }
.sp-server--pub { --sv-accent: #9A34E6; --sv-accent-2: #C9A0FF; --sv-btn-1: #7526B4; --sv-btn-2: #611E96; }

/* hero: one big button per server */
.sp-playnow { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.sp-btn--play {
  min-height: 60px; padding: 0 24px 0 20px; gap: 12px; font-size: 14px; color: #F7FAFF;
  background: linear-gradient(180deg, var(--b1), var(--b2));
  box-shadow: 0 14px 36px -16px var(--b1), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.sp-btn--play:hover { filter: brightness(1.08); }
.sp-btn--play svg { width: 20px; height: 20px; }
.sp-btn--play span { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.sp-btn--play small { font: 600 11px/1 var(--sp-sans); letter-spacing: .04em; text-transform: none; opacity: .85; }
.sp-btn--zp { --b1: #E04654; --b2: #B5303C; }
.sp-btn--pub { --b1: #7526B4; --b2: #611E96; }
.sp-only {
  max-width: 62ch; margin: 18px 0 0; padding: 12px 14px; border-radius: 7px;
  border: 1px solid var(--sp-line-2); background: rgba(11, 14, 19, .6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 14.5px; line-height: 1.55; color: var(--sp-body);
}
.sp-only b { color: var(--sp-hot); font-weight: 600; }

/* server cards: badge is an inline emblem, the play button leads the connect box */
.sp-server__badge--icon { display: grid; place-items: center; background: #0B0E13; color: var(--sp-accent-2); }
.sp-server__badge--icon svg { width: 60%; height: 60%; }
.sp-server + .sp-server { margin-top: 24px; }
.sp-btn--big { width: 100%; min-height: 54px; margin: 0 0 18px; font-size: 14px; }
.sp-btn--big svg { width: 18px; height: 18px; }

.sp-legal { max-width: 80ch; margin: 28px 0 0; font-size: 13px; line-height: 1.6; color: var(--sp-mute); }
.sp-legal a { color: var(--sp-body); text-underline-offset: 3px; }

@media (max-width: 600px) {
  .sp-playnow .sp-btn--play { flex: 1 1 100%; justify-content: flex-start; }
}