/*
 * tunnelrush.app - "vortex" skin.
 *
 * Tunnel Rush is a ring of colour rushing at you, so the page is built out of
 * concentric light: a violet-magenta glow behind the header, ring gradients on
 * the intro, and cards whose border is a gradient rather than a line. Section
 * headings are centred over the shelf instead of sitting to the left, which is
 * what makes this layout read differently from the sibling sites.
 */

:root {
  /* GeneratePress global palette */
  --base: #100a1c;
  --base-2: #181128;
  --base-3: #140d22;
  --contrast: #f4eeff;
  --contrast-2: #a99cc4;
  --contrast-3: #6b5f88;
  --accent: #a855f7;

  /* category rail */
  --sb-bg: #0c0716;
  --sb-bd: rgba(236, 72, 153, .14);
  --sb-hl: rgba(168, 85, 247, .18);
  --sb-t: #a294bd;
  --sb-th: #ffffff;
  --sb-a: #ec4899;

  /* homepage tokens */
  --ph-bg: #0a0714;
  --ph-surface: #150e26;
  --ph-surface-2: #1d1433;
  --ph-text: #f0eafd;
  --ph-heading: #ffffff;
  --ph-muted: #a99cc4;
  --ph-accent: #c026d3;
  --ph-accent-2: #f59e0b;
  --ph-on-accent: #ffffff;
  --ph-border: #2c2044;
  --ph-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

body {
  background-color: #0a0714;
  background-image:
    radial-gradient(1100px 520px at 50% -12%, rgba(168, 85, 247, .28), transparent 65%),
    radial-gradient(760px 360px at 50% 0%, rgba(236, 72, 153, .2), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #f0eafd;
}

.site-header,
.main-navigation { background: rgba(12, 7, 22, .86) !important; backdrop-filter: blur(10px); }

.site-header { border-bottom: 1px solid rgba(236, 72, 153, .22); }

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items { color: #cdc0e6 !important; font-weight: 600; }

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.sfHover > a { color: #ffffff !important; background: rgba(192, 38, 211, .2) !important; }
.main-navigation .main-nav ul li.current-menu-item > a { color: #f472b6 !important; }
.main-navigation ul ul { background: #150e26; border: 1px solid rgba(236, 72, 153, .2); border-radius: 12px; overflow: hidden; }

.inside-article,
.sidebar .widget,
.comments-area {
  background: #150e26;
  border: 1px solid #2c2044;
  border-radius: 18px;
}

.site-footer,
.site-info,
.footer-widgets { background: #0a0714 !important; color: #a294bd; border-top: 1px solid rgba(236, 72, 153, .18); }
.site-footer a, .site-info a { color: #f472b6 !important; }

a { color: #e879f9; }

#game-container { border: 1px solid rgba(236, 72, 153, .3); border-radius: 20px; overflow: hidden; box-shadow: 0 0 60px rgba(168, 85, 247, .22); }
#play-game-button { background: linear-gradient(100deg, #a855f7, #ec4899) !important; color: #fff !important; font-weight: 800 !important; border-radius: 999px !important; }

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

.ph--vortex { --ph-radius: 22px; --ph-card-radius: 16px; }

.ph--vortex .ph-intro {
  position: relative;
  overflow: hidden;
  text-align: center;
  grid-template-columns: 1fr;
  gap: 22px;
  padding: 40px 26px 30px;
  border: 1px solid rgba(236, 72, 153, .22);
  background:
    repeating-radial-gradient(circle at 50% 42%, rgba(236, 72, 153, .07) 0 2px, transparent 2px 62px),
    radial-gradient(600px 300px at 50% 30%, rgba(168, 85, 247, .3), transparent 70%),
    #120a20;
}

.ph--vortex .ph-intro__copy { display: flex; flex-direction: column; align-items: center; }
.ph--vortex .ph-intro__text { margin-inline: auto; }
.ph--vortex .ph-search { margin-inline: auto; width: 100%; }

.ph--vortex .ph-intro__title {
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(100deg, #ffffff 20%, #f472b6 60%, #fbbf24);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ph--vortex .ph-intro__eyebrow { color: #fbbf24; }

.ph--vortex .ph-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 720px;
  margin-inline: auto;
  width: 100%;
}

.ph--vortex .ph-facts li {
  align-items: center;
  text-align: center;
  border-radius: 999px;
  padding: 14px 18px;
  background: rgba(29, 20, 51, .8);
  border-color: rgba(236, 72, 153, .25);
}

.ph--vortex .ph-facts b { color: #f472b6; font-variant-numeric: tabular-nums; }

.ph--vortex .ph-search input { border-radius: 999px; padding-inline: 18px; }
.ph--vortex .ph-search button { background: linear-gradient(100deg, #a855f7, #ec4899); border-radius: 999px; }

/* headings sit centred over their shelf */
.ph--vortex .ph-shelf__head {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin-bottom: 18px;
}

.ph--vortex .ph-shelf__headings { display: flex; flex-direction: column; align-items: center; }
.ph--vortex .ph-shelf__title { justify-content: center; font-weight: 800; font-size: 22px; }
.ph--vortex .ph-shelf__icon { color: #f472b6; }

.ph--vortex .ph-shelf__more {
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(236, 72, 153, .35);
}

.ph--vortex .ph-shelf__more:hover { background: rgba(236, 72, 153, .14); text-decoration: none; }

/* gradient ring instead of a flat border */
.ph--vortex .ph-card__art {
  border: 0;
  padding: 2px;
  background: linear-gradient(150deg, rgba(168, 85, 247, .55), rgba(236, 72, 153, .25) 45%, rgba(44, 32, 68, .9));
  transition: transform .18s ease, box-shadow .18s ease;
}

.ph--vortex .ph-thumb { border-radius: 14px; }

.ph--vortex .ph-card:hover .ph-card__art {
  transform: translateY(-4px) scale(1.015);
  background: linear-gradient(150deg, #a855f7, #ec4899 60%, #fbbf24);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .55), 0 0 26px rgba(236, 72, 153, .32);
}

.ph--vortex .ph-card__play {
  inset: auto 2px 2px 2px;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(100deg, #a855f7, #ec4899);
}

.ph--vortex .ph-card__rank {
  top: 10px;
  left: 10px;
  border-radius: 999px;
  background: linear-gradient(100deg, #fbbf24, #f472b6);
  color: #1b0d22;
}

.ph--vortex .ph-about {
  background: #150e26;
  border-color: rgba(236, 72, 153, .18);
}

.ph--vortex .ph-about__block h2 {
  background: linear-gradient(100deg, #ffffff, #f472b6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.ph--vortex .ph-faq__item { border-top-color: rgba(236, 72, 153, .16); }

@media (max-width: 640px) {
  .ph--vortex .ph-facts { grid-template-columns: 1fr; }
  .ph--vortex .ph-intro { padding: 30px 20px 24px; }
}

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

/* ---------- Border diet — theme furniture (2026-08-24) ----------
   The article, widget and comment boxes already sit on their own surface
   colour, and the header and footer already change colour against the page, so
   none of them needs a line as well. The game frame keeps its shadow. */
.inside-article,
.sidebar .widget,
.comments-area,
.site-header,
.site-footer,
.site-info,
.footer-widgets,
#game-container {
  border: 0 !important;
}

/* ---------- mobile header (2026-08-24) ----------
   The fleet header paints a fixed 40x40 sidebar toggle at (12, 12) — exactly
   on top of the 44px site logo, which sits at (12, 10) in the header flow, so
   the wordmark was completely hidden behind the button on every phone. An
   inline `.site-header .site-logo { margin: 0 !important }` ships in the head,
   so this needs both the specificity and the !important to land. */
@media (max-width: 768px) {
  .site-header .site-logo {
    margin-left: 52px !important;
  }
}

/* ---------------------------------------------------------------------------
   Sidebar cards each carry this skin's 2px frame and the theme stacks them
   flush, so the ad card's bottom border and the next card's top border meet as
   one doubled line with no space between the two boxes. Give them the same
   22px rhythm the ad box uses.
--------------------------------------------------------------------------- */
.inside-right-sidebar > .widget + .widget,
.inside-left-sidebar > .widget + .widget,
.sidebar .widget + .widget {
  margin-top: 22px;
}

/* A filled ad paints right up to the frame drawn around it. Rounding the unit
   inside the frame keeps the creative off the border line. Padding is not an
   option: it would shrink the reserved box below the size AdSense was asked
   for, which is the whole point of .w3ph-adbox. */
.w3ph-adbox > ins.adsbygoogle {
  margin: 0 !important;
  border-radius: 10px;
  overflow: hidden;
}