/*
 * playslope.io - "neon downhill" skin.
 *
 * Slope is a black void with a glowing green track, so the site is dark to the
 * edges with two light sources (cyan, lime) and nothing else: no borders that
 * are not lit, no surfaces that are not slightly tilted toward the light. The
 * lead shelf runs on a wider, cinematic tile than the shelves under it, which
 * is the layout difference from the sibling sites, not just the colour.
 */

:root {
  /* GeneratePress global palette */
  --base: #0b0e18;
  --base-2: #121728;
  --base-3: #0f1422;
  --contrast: #eef2ff;
  --contrast-2: #98a3c4;
  --contrast-3: #55608a;
  --accent: #22d3ee;

  /* category rail */
  --sb-bg: #090c15;
  --sb-bd: rgba(120, 200, 255, .12);
  --sb-hl: rgba(34, 211, 238, .16);
  --sb-t: #8e9ac0;
  --sb-th: #eaf6ff;
  --sb-a: #a3e635;

  /* homepage tokens */
  --ph-bg: #05070e;
  --ph-surface: #0e1320;
  --ph-surface-2: #141a2c;
  --ph-text: #e6ecff;
  --ph-heading: #ffffff;
  --ph-muted: #96a2c6;
  --ph-accent: #22d3ee;
  --ph-accent-2: #a3e635;
  --ph-on-accent: #04121a;
  --ph-border: #1e2740;
  --ph-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

body {
  background-color: #05070e;
  background-image:
    radial-gradient(900px 420px at 12% -6%, rgba(34, 211, 238, .16), transparent 60%),
    radial-gradient(760px 380px at 88% 4%, rgba(163, 230, 53, .12), transparent 62%);
  background-attachment: fixed;
  color: #e6ecff;
}

.site-header,
.main-navigation { background: rgba(9, 12, 21, .92) !important; }

.site-header { border-bottom: 1px solid rgba(34, 211, 238, .25); }

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
  color: #b9c4e4 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 13.5px;
  font-weight: 600;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.sfHover > a { color: #22d3ee !important; background: rgba(34, 211, 238, .1) !important; }
.main-navigation .main-nav ul li.current-menu-item > a { color: #a3e635 !important; }
.main-navigation ul ul { background: #0c1120; border: 1px solid rgba(34, 211, 238, .18); }

.inside-article,
.sidebar .widget,
.comments-area {
  background: #0e1320;
  border: 1px solid #1e2740;
  border-radius: 14px;
}

.site-footer,
.site-info,
.footer-widgets { background: #070a12 !important; color: #8e9ac0; border-top: 1px solid rgba(34, 211, 238, .18); }
.site-footer a, .site-info a { color: #22d3ee !important; }

a { color: #35dcf2; }

#game-container { border: 1px solid rgba(34, 211, 238, .3); border-radius: 16px; overflow: hidden; box-shadow: 0 0 46px rgba(34, 211, 238, .16); }
#play-game-button { background: linear-gradient(100deg, #22d3ee, #a3e635) !important; color: #04121a !important; font-weight: 800 !important; border-radius: 999px !important; }

/* ---------- homepage ---------- */

.ph--neon { --ph-radius: 18px; --ph-card-radius: 12px; }

.ph--neon .ph-intro {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(34, 211, 238, .22);
  background:
    linear-gradient(115deg, rgba(34, 211, 238, .1), transparent 42%),
    linear-gradient(300deg, rgba(163, 230, 53, .09), transparent 44%),
    #0b1020;
}

/* the track: one lit diagonal across the intro */
.ph--neon .ph-intro::after {
  content: "";
  position: absolute;
  right: -18%;
  top: -60%;
  width: 62%;
  height: 240%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .16), transparent);
  pointer-events: none;
}

.ph--neon .ph-intro__copy,
.ph--neon .ph-facts { position: relative; z-index: 1; }

.ph--neon .ph-intro__title {
  font-weight: 800;
  letter-spacing: -.02em;
  text-shadow: 0 0 34px rgba(34, 211, 238, .35);
}

.ph--neon .ph-intro__eyebrow { color: #a3e635; }

.ph--neon .ph-facts li { background: rgba(20, 26, 44, .8); border-color: rgba(34, 211, 238, .18); }
.ph--neon .ph-facts b { color: #22d3ee; font-variant-numeric: tabular-nums; }

.ph--neon .ph-search button {
  background: linear-gradient(100deg, #22d3ee, #a3e635);
  color: #04121a;
  border-radius: 999px;
}

.ph--neon .ph-shelf__title {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 19px;
  font-weight: 800;
}

/* diagonal speed bar in front of every shelf heading */
.ph--neon .ph-shelf__headings { position: relative; padding-left: 18px; }
.ph--neon .ph-shelf__headings::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 4px;
  width: 5px;
  transform: skewX(-16deg);
  border-radius: 2px;
  background: linear-gradient(180deg, #22d3ee, #a3e635);
}

.ph--neon .ph-shelf__more {
  padding: 7px 14px;
  border: 1px solid rgba(34, 211, 238, .35);
  border-radius: 999px;
}

.ph--neon .ph-shelf__more:hover { background: rgba(34, 211, 238, .12); text-decoration: none; }

.ph--neon .ph-card__art {
  border-color: #1e2740;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ph--neon .ph-thumb { transition: transform .3s ease; }

.ph--neon .ph-card:hover .ph-card__art {
  transform: translateY(-4px);
  border-color: rgba(34, 211, 238, .65);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55), 0 0 22px rgba(34, 211, 238, .3);
}

.ph--neon .ph-card:hover .ph-thumb { transform: scale(1.06); }

.ph--neon .ph-card__play { background: linear-gradient(100deg, #22d3ee, #a3e635); color: #04121a; }
.ph--neon .ph-card__rank { background: #a3e635; color: #0b1a02; box-shadow: 0 0 16px rgba(163, 230, 53, .5); }
.ph--neon .ph-card__title { font-weight: 600; }

/* the lead shelf gets the cinematic tile */
.ph--neon .ph-shelf--lead { --ph-min: 236px; }
.ph--neon .ph-shelf--lead .ph-card__art { aspect-ratio: 16 / 10; }
.ph--neon .ph-shelf--lead .ph-card__title { font-size: 15.5px; }

@media (max-width: 640px) { .ph--neon .ph-shelf--lead { --ph-min: 150px; } }

.ph--neon .ph-about { background: #0b1020; border-color: rgba(34, 211, 238, .18); }
.ph--neon .ph-about__block h2 { letter-spacing: -.01em; }
.ph--neon .ph-faq__item { border-top-color: rgba(34, 211, 238, .14); }

/* ---------- shared corrections (same on all three skins) ---------- */

/*
 * An ad slot that never fills still holds its reserved height, which on this
 * layout is a blank band directly above the game. AdSense stamps the outcome
 * on the element, so collapse only the slots that actually came back empty -
 * never before, or the reserved space is gone when the ad does fill.
 */
ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}

/*
 * Sidebar ad unit.
 *
 * Sticky so it stays beside the player while the game list scrolls past, and
 * height-reserved so the sidebar does not jump when it fills. If it comes back
 * unfilled the whole block collapses, reservation included.
 */
.w3ph-side-ad {
  position: sticky;
  top: 16px;
  margin-bottom: 22px;
  min-height: 250px;
}

.w3ph-side-ad ins.adsbygoogle {
  display: block;
  min-height: 250px;
}

.w3ph-side-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
  min-height: 0;
  margin-bottom: 0;
}