/*
Theme Name: NeonPlay
Theme URI: https://yoursite.com
Author: Your Name
Author URI: https://yoursite.com
Description: Full-screen neon gaming theme with MemberPress integration. Vibrant fuchsia/red palette, animated hero, games listing inner pages.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: neonplay
Tags: full-width-template, custom-colors, gaming, one-page
*/

/* === BASE RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Accent palette (Customizer-managed) ── */
  --np-fuchsia:  #FF0080;
  --np-red:      #FF1744;
  --np-orange:   #FF6D00;
  --np-yellow:   #FFE600;

  /* ── Semantic theme tokens (Customizer overrides these via inline CSS) ── */
  --np-accent:       #FF0080;          /* Primary CTA / button / link */
  --np-accent2:      #FF1744;          /* Secondary accent */
  --np-bg:           #f8f9fb;          /* Page background */
  --np-bg2:          #f0f2f5;          /* Section / secondary bg */
  --np-surface:      #ffffff;          /* Card / panel background */
  --np-border:       #e8e8f0;          /* Border color */
  --np-text:         #1a1a2e;          /* Primary text */
  --np-text-muted:   rgba(26,26,46,0.5); /* Muted / secondary text */
  --np-header-bg:    #ffffff;          /* Header background */
  --np-footer-bg:    #f0f2f5;          /* Footer background */
  --np-btn-radius:   8px;              /* Button border radius */
  --np-btn-text:     #ffffff;          /* Button text color */

  /* ── Legacy aliases (keep existing CSS working) ── */
  --np-dark:     var(--np-bg);
  --np-dark2:    var(--np-bg2);
  --np-white:    var(--np-text);
  --np-muted:    var(--np-text-muted);

  /* ── Glows (kept for hero/CTA) ── */
  --np-glow-f:   0 0 40px rgba(255,0,128,0.4), 0 0 80px rgba(255,0,128,0.2);
  --np-glow-r:   0 0 40px rgba(255,23,68,0.4),  0 0 80px rgba(255,23,68,0.2);

  --np-font-display: 'Bebas Neue', 'Impact', sans-serif;
  --np-font-body:    'Outfit', 'DM Sans', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--np-font-body);
  background: var(--np-bg);
  color: var(--np-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--np-bg2); }
::-webkit-scrollbar-thumb { background: var(--np-accent); border-radius: 3px; }

/* ========================================
   FRONT PAGE — NO HEADER/FOOTER
   ======================================== */

.np-hero {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Front page hero always stays dark — BG images need dark overlay for contrast */
  background: #0A0009;
}

/* ── BACKGROUND IMAGE SLIDER ── */
.np-bg-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.np-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  will-change: opacity;
}

.np-bg-slide.is-active {
  opacity: 1;
}

/* Dark overlay on top of slider so text stays readable */
.np-bg-slider::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 0, 9, 0.75) 0%,
    rgba(10, 0, 9, 0.55) 50%,
    rgba(10, 0, 9, 0.70) 100%
  );
  z-index: 10;
  pointer-events: none;
}

/* Animated gradient orbs background */
.np-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.np-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.65;
  animation: orbFloat 8s ease-in-out infinite;
}

.np-hero__orb--1 {
  width: 70vw; height: 70vw;
  background: radial-gradient(circle, #FF0080 0%, transparent 70%);
  top: -20%; left: -15%;
  animation-delay: 0s;
}
.np-hero__orb--2 {
  width: 55vw; height: 55vw;
  background: radial-gradient(circle, #FF1744 0%, transparent 70%);
  bottom: -20%; right: -10%;
  animation-delay: -3s;
}
.np-hero__orb--3 {
  width: 40vw; height: 40vw;
  background: radial-gradient(circle, #FF6D00 0%, transparent 70%);
  top: 30%; right: 20%;
  animation-delay: -5s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(3%, 5%) scale(1.05); }
  66%  { transform: translate(-4%, -3%) scale(0.95); }
}

/* Grid overlay */
.np-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,0,128,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,128,0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 1;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
}

/* Noise texture overlay */
.np-hero__noise {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  pointer-events: none;
}

/* Hero content — always white text since hero bg is dark */
.np-hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 2rem;
  max-width: 900px;
  width: 100%;
  color: #ffffff;
  animation: heroReveal 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.np-hero__content * { --np-white: #ffffff; --np-muted: rgba(255,255,255,0.55); }

@keyframes heroReveal {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.np-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 0, 128, 0.15);
  border: 1px solid rgba(255, 0, 128, 0.4);
  color: var(--np-fuchsia);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 100px;
  margin-bottom: 2rem;
  backdrop-filter: blur(10px);
  animation: heroReveal 1s 0.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.np-hero__badge::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--np-fuchsia);
  box-shadow: 0 0 8px var(--np-fuchsia);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

.np-hero__title {
  font-family: var(--np-font-display);
  font-size: clamp(4rem, 12vw, 11rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  animation: heroReveal 1s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.np-hero__title-line1 {
  display: block;
  color: var(--np-white);
}

.np-hero__title-line2 {
  display: block;
  background: linear-gradient(135deg, var(--np-fuchsia) 0%, var(--np-red) 50%, var(--np-orange) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 30px rgba(255, 0, 128, 0.6));
}

.np-hero__sub {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: var(--np-muted);
  max-width: 560px;
  margin: 0 auto 3rem;
  line-height: 1.6;
  font-weight: 400;
  animation: heroReveal 1s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* CTA Button */
.np-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 1.1rem 3rem;
  font-family: var(--np-font-body);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--np-btn-text);
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: var(--np-btn-radius);
  background: linear-gradient(135deg, var(--np-accent), var(--np-accent2));
  box-shadow: var(--np-glow-f);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: heroReveal 1s 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  overflow: hidden;
}

.np-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--np-orange), var(--np-fuchsia));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.np-cta:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 0 60px rgba(255,0,128,0.8), 0 0 120px rgba(255,0,128,0.4);
  color: #fff;
}
.np-cta:hover::before { opacity: 1; }
.np-cta:active { transform: translateY(-1px) scale(0.99); }

.np-cta__text { position: relative; z-index: 1; }
.np-cta__icon {
  position: relative; z-index: 1;
  transition: transform 0.2s ease;
}
.np-cta:hover .np-cta__icon { transform: translateX(4px); }

/* Pulse ring animation around CTA */
.np-cta-wrap {
  position: relative;
  display: inline-flex;
  animation: heroReveal 1s 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.np-cta-wrap::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 14px;
  border: 2px solid var(--np-fuchsia);
  opacity: 0;
  animation: ctaPulse 2.5s ease-out 1.5s infinite;
}

@keyframes ctaPulse {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* Scroll down indicator */
.np-scroll-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--np-muted);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: heroReveal 1s 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.np-scroll-hint__arrow {
  width: 24px; height: 24px;
  border-right: 2px solid var(--np-fuchsia);
  border-bottom: 2px solid var(--np-fuchsia);
  transform: rotate(45deg);
  animation: scrollBounce 1.5s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translate(0,0); opacity: 1; }
  50%       { transform: rotate(45deg) translate(4px, 4px); opacity: 0.5; }
}

/* === SECTION BELOW HERO (optional features/info) === */
.np-section {
  padding: 6rem 2rem;
  background: var(--np-bg2);
  position: relative;
}

.np-section--features {
  background: var(--np-bg);
}

.np-container {
  max-width: 1100px;
  margin: 0 auto;
}

.np-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--np-fuchsia);
  margin-bottom: 1rem;
  display: block;
}

.np-section-title {
  font-family: var(--np-font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1;
  letter-spacing: 0.01em;
  margin-bottom: 1.5rem;
}

.np-section-body {
  color: var(--np-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 600px;
}

/* Feature grid */
.np-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 4rem;
}

.np-feature-card {
  background: var(--np-surface);
  border: 1px solid var(--np-border);
  border-radius: 16px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

.np-feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--np-fuchsia), var(--np-red));
  opacity: 0;
  transition: opacity 0.3s;
}

.np-feature-card:hover {
  border-color: var(--np-accent);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.1);
}
.np-feature-card:hover::before { opacity: 1; }

.np-feature-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
}

.np-feature-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--np-text);
}

.np-feature-text {
  color: var(--np-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ========================================
   INNER PAGES — HEADER
   ======================================== */

.np-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--np-header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--np-border);
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
  padding: 0 2rem;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.np-header__logo {
  font-family: var(--np-font-display);
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, var(--np-fuchsia), var(--np-red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
}

.np-header__nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}

.np-header__nav a {
  color: var(--np-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  transition: color 0.2s;
}
.np-header__nav a:hover { color: var(--np-accent); }

.np-header__cta {
  background: linear-gradient(135deg, var(--np-accent), var(--np-accent2));
  color: var(--np-btn-text) !important;
  padding: 8px 20px;
  border-radius: var(--np-btn-radius);
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
}
.np-header__cta:hover {
  box-shadow: 0 4px 20px rgba(255,0,128,.35);
  transform: translateY(-1px);
  color: var(--np-btn-text) !important;
}

/* Hamburger mobile */
.np-header__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
.np-header__burger span {
  display: block;
  width: 26px; height: 2px;
  background: var(--np-text);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

/* ========================================
   GAMES LISTING PAGE
   ======================================== */

.np-page-hero {
  position: relative;
  padding: 5rem 2rem 4rem;
  text-align: center;
  overflow: hidden;
}

.np-page-hero::before {
  content: '';
  position: absolute;
  top: -50%; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse, rgba(255,0,128,0.2) 0%, transparent 70%);
  pointer-events: none;
}

.np-page-hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--np-fuchsia);
  display: block;
  margin-bottom: 1rem;
}

.np-page-hero__title {
  font-family: var(--np-font-display);
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 1;
  margin-bottom: 1rem;
}

.np-page-hero__sub {
  color: var(--np-muted);
  font-size: 1.05rem;
  max-width: 500px;
  margin: 0 auto;
}

/* Filter tabs */
.np-filters {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0 2rem;
  max-width: 1200px;
  margin: 0 auto 3rem;
}

.np-filter-btn {
  padding: 8px 20px;
  border-radius: 100px;
  border: 1px solid var(--np-border);
  background: var(--np-surface);
  color: var(--np-text-muted);
  font-family: var(--np-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

.np-filter-btn:hover,
.np-filter-btn.active {
  border-color: var(--np-accent);
  color: var(--np-accent);
  background: rgba(255, 0, 128, 0.07);
}

.np-filter-btn.active {
  box-shadow: 0 2px 12px rgba(255,0,128,.2);
}

/* Games Grid */
.np-games-section {
  padding: 0 2rem 6rem;
  max-width: 1200px;
  margin: 0 auto;
}

.np-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Game Card */
.np-game-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--np-surface);
  border: 1px solid var(--np-border);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s, box-shadow 0.3s;
  cursor: pointer;
  text-decoration: none;
  display: block;
}

.np-game-card:hover {
  transform: translateY(-8px) scale(1.01);
  border-color: var(--np-accent);
  box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 0 0 1px var(--np-accent);
}

.np-game-card__thumb {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: linear-gradient(135deg, var(--np-bg2), var(--np-border));
}

.np-game-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.np-game-card:hover .np-game-card__thumb img {
  transform: scale(1.06);
}

/* Placeholder graphic when no image */
.np-game-card__thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}

.np-game-card__badge {
  position: absolute;
  top: 12px; left: 12px;
  background: linear-gradient(135deg, var(--np-fuchsia), var(--np-red));
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
}

.np-game-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,0,9,0.9) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1.5rem;
}

.np-game-card:hover .np-game-card__overlay { opacity: 1; }

.np-game-card__play-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--np-fuchsia);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 24px;
  border-radius: 8px;
  box-shadow: var(--np-glow-f);
  transform: translateY(8px);
  transition: transform 0.3s 0.05s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.np-game-card:hover .np-game-card__play-btn {
  transform: translateY(0);
}

.np-game-card__body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.np-game-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.np-game-card__category {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--np-fuchsia);
}

.np-game-card__dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--np-border);
}

.np-game-card__players {
  font-size: 0.7rem;
  color: var(--np-muted);
}

.np-game-card__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--np-text);
  margin-bottom: 0.4rem;
  line-height: 1.3;
  text-decoration: none;
}

.np-game-card__desc {
  font-size: 0.85rem;
  color: var(--np-muted);
  line-height: 1.5;
}

.np-game-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--np-border);
}

.np-game-card__stars {
  display: flex;
  gap: 2px;
  color: var(--np-yellow);
  font-size: 0.8rem;
}

.np-game-card__tag {
  background: rgba(255,0,128,0.12);
  color: var(--np-fuchsia);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
}

/* === LOCKED GAME CARD === */
.np-game-card--locked .np-game-card__thumb::after {
  content: '🔒';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 0, 9, 0.7);
  font-size: 3rem;
  backdrop-filter: blur(4px);
}

/* ========================================
   FOOTER (inner pages)
   ======================================== */

.np-footer {
  border-top: 1px solid var(--np-border);
  padding: 3rem 2rem;
  text-align: center;
  background: var(--np-footer-bg);
}

.np-footer__logo {
  font-family: var(--np-font-display);
  font-size: 2rem;
  background: linear-gradient(135deg, var(--np-fuchsia), var(--np-red));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  margin-bottom: 1rem;
}

.np-footer__links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  list-style: none;
}

.np-footer__links a {
  color: var(--np-text-muted);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.2s;
}
.np-footer__links a:hover { color: var(--np-accent); }

.np-footer__copy {
  color: var(--np-text-muted);
  font-size: 0.8rem;
}

/* ========================================
   MEMBERPRESS / ACCOUNT SECTION
   ======================================== */

/* Style MemberPress forms to match theme */
.mepr-form input[type="text"],
.mepr-form input[type="email"],
.mepr-form input[type="password"],
.mepr-form select {
  background: var(--np-surface) !important;
  border: 1px solid var(--np-border) !important;
  color: var(--np-text) !important;
  border-radius: var(--np-btn-radius) !important;
  padding: 0.75rem 1rem !important;
  font-family: var(--np-font-body) !important;
  width: 100% !important;
  transition: border-color 0.2s !important;
}

.mepr-form input:focus {
  border-color: var(--np-fuchsia) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255, 0, 128, 0.15) !important;
}

.mepr-form .mepr-submit,
.mepr-form input[type="submit"] {
  background: linear-gradient(135deg, var(--np-accent), var(--np-accent2)) !important;
  color: #fff !important;
  border: none !important;
  padding: 1rem 2rem !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  font-family: var(--np-font-body) !important;
  cursor: pointer !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
  box-shadow: var(--np-glow-f) !important;
}

.mepr-form .mepr-submit:hover,
.mepr-form input[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 60px rgba(255,0,128,0.7) !important;
}

/* ========================================
   UTILITIES
   ======================================== */

.np-text-gradient {
  background: linear-gradient(135deg, var(--np-fuchsia), var(--np-red), var(--np-orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.np-glow-text {
  text-shadow: 0 0 30px rgba(255,0,128,0.7), 0 0 60px rgba(255,0,128,0.3);
}

/* WP Alignment */
.wp-block-image { margin: 2rem 0; }
.aligncenter { text-align: center; margin: 0 auto; display: block; }

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .np-header__nav { display: none; }
  .np-header__nav.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 70px; left: 0; right: 0; bottom: 0;
    background: var(--np-header-bg);
    backdrop-filter: blur(20px);
    align-items: center;
    justify-content: center;
    gap: 2rem;
    z-index: 99;
    box-shadow: 0 8px 32px rgba(0,0,0,.1);
  }
  .np-header__nav.open a { font-size: 1.5rem; color: var(--np-text) !important; }
  .np-header__burger { display: flex; }
  .np-games-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .np-features { grid-template-columns: 1fr; }
  .np-hero__title { font-size: clamp(3rem, 18vw, 7rem); }
  .np-game-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ========================================
   ROTATING HERO TAGLINES
   ======================================== */
.np-hero-taglines {
  position: relative;
  height: 2rem;
  margin-top: 2rem;
  overflow: hidden;
  text-align: center;
}

.np-hero-tagline {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  white-space: nowrap;
}

.np-hero-tagline.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   SLIDER DOTS
   ======================================== */
.np-slider-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 2.5rem;
}

.np-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, transform 0.3s, width 0.3s;
}

.np-slider-dot.is-active {
  background: var(--np-fuchsia);
  width: 24px;
  border-radius: 4px;
  box-shadow: 0 0 8px var(--np-fuchsia);
}

/* ========================================
   GAME CATEGORIES (front page)
   ======================================== */
.np-game-category {
  margin-bottom: 3.5rem;
}

.np-game-category__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.2rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 0, 128, 0.2);
}

.np-game-category__title {
  font-family: var(--np-font-display);
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  color: #fff;
  text-transform: uppercase;
}

.np-game-category__more {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--np-fuchsia);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.np-game-category__more:hover { opacity: 1; }

.np-game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.2rem;
}

/* Game card lock overlay for front page preview */
.np-game-card--locked .np-game-card__thumb { filter: brightness(0.4); }

.np-game-card__lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 1.8rem;
}

.np-game-card__lock-text {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
}

/* ========================================
   MEMBERPRESS PAGES — READABLE ON DARK BG
   ======================================== */
.mepr-price-menu,
.mepr-signup-form,
.mepr-account-container,
.mepr-login-form,
body .mepr_price_cells {
  color: #fff;
}

/* Pricing table */
.mepr_price_cell {
  background: var(--np-surface, #1A0020) !important;
  border: 1px solid rgba(255, 0, 128, 0.25) !important;
  border-radius: 12px !important;
  color: #fff !important;
}

.mepr_price_cell .mepr_price_cell_label,
.mepr_price_cell .mepr-price-menu-title,
.mepr_price_cell h3,
.mepr_price_cell h4,
.mepr_price_cell .mepr-price-string,
.mepr_price_cell_card_name {
  color: #fff !important;
}

.mepr_price_cell .mepr-price-string {
  font-size: 2rem;
  font-weight: 700;
  color: var(--np-fuchsia, #FF0080) !important;
}

.mepr_price_cell_description,
.mepr_price_cell_description * {
  color: rgba(255, 255, 255, 0.65) !important;
}

.mepr_price_cell_footer .mepr-signup-button,
.mepr_price_cell .mepr-button,
.mepr-signup-form .mepr-submit {
  background: var(--np-fuchsia, #FF0080) !important;
  border: none !important;
  color: #fff !important;
  padding: 12px 28px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.mepr_price_cell_footer .mepr-signup-button:hover,
.mepr_price_cell .mepr-button:hover,
.mepr-signup-form .mepr-submit:hover {
  background: #FF3399 !important;
  box-shadow: 0 0 24px rgba(255, 0, 128, 0.5) !important;
}

/* Signup form fields */
.mepr-signup-form label,
.mepr-login-form label,
.mepr-account-container label {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}

.mepr-signup-form input[type="text"],
.mepr-signup-form input[type="email"],
.mepr-signup-form input[type="password"],
.mepr-signup-form input[type="tel"],
.mepr-signup-form input[type="url"],
.mepr-signup-form select,
.mepr-signup-form textarea,
.mepr-login-form input[type="text"],
.mepr-login-form input[type="password"],
.mepr-account-container input[type="text"],
.mepr-account-container input[type="email"],
.mepr-account-container input[type="password"],
.mepr-account-container select {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  padding: 10px 14px !important;
  border-radius: 6px !important;
  font-size: 0.9rem;
}

.mepr-signup-form input:focus,
.mepr-login-form input:focus,
.mepr-account-container input:focus {
  border-color: var(--np-fuchsia, #FF0080) !important;
  box-shadow: 0 0 0 2px rgba(255, 0, 128, 0.2) !important;
  outline: none !important;
}

/* Page content area — ensure readability */
.page .entry-content,
.single .entry-content,
body:not(.np-front-page) .np-container,
body:not(.np-front-page) main {
  color: rgba(255, 255, 255, 0.8);
}

body:not(.np-front-page) main h1,
body:not(.np-front-page) main h2,
body:not(.np-front-page) main h3,
body:not(.np-front-page) main h4 {
  color: #fff;
}

body:not(.np-front-page) main a {
  color: var(--np-fuchsia, #FF0080);
}

body:not(.np-front-page) main p,
body:not(.np-front-page) main li {
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
}

/* MemberPress account page tables */
.mepr-account-container table,
.mepr-account-container th,
.mepr-account-container td {
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.mepr-account-container th {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* Links inside MemberPress */
.mepr-signup-form a,
.mepr-login-form a,
.mepr-account-container a {
  color: var(--np-fuchsia, #FF0080) !important;
}


/* ========================================
   MEMBERSHIP PAGE - FULL LIGHT THEME
   Auto-applied via functions.php filter.
   No manual template selection needed.
   ======================================== */

/* Base page */
body.np-membership-page {
  background: #f5f7fa !important;
  color: #1a1a2e !important;
}
body.np-membership-page #np-main {
  background: #f5f7fa !important;
}

/* Header: force white */
body.np-membership-page #np-header,
body.np-membership-page .np-header {
  background: #ffffff !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.09) !important;
  border-bottom: 1px solid #e8e8e8 !important;
  backdrop-filter: none !important;
}
body.np-membership-page #np-header::before,
body.np-membership-page #np-header::after,
body.np-membership-page .np-header::before,
body.np-membership-page .np-header::after {
  display: none !important;
}
body.np-membership-page .np-header__logo,
body.np-membership-page .np-header__nav a,
body.np-membership-page #np-primary-nav a {
  /*color: #1a1a2e !important;*/
  text-shadow: none !important;
}
body.np-membership-page .np-header__nav a:hover,
body.np-membership-page #np-primary-nav a:hover {
  color: #FF0080 !important;
}
body.np-membership-page .np-header__cta {
  background: #FF0080 !important;
  color: #fff !important;
  border-radius: 6px !important;
  border: none !important;
}
body.np-membership-page .np-header__burger span {
  background: #1a1a2e !important;
}

/* Hero banner */
.np-membership-hero {
  text-align: center;
  padding: 100px 24px 48px;
  background: linear-gradient(135deg, #0d0017 0%, #1f0035 50%, #0d0017 100%);
}
.np-membership-hero__title {
  font-family: var(--np-font-display, sans-serif);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 0 40px rgba(255,0,128,0.5);
  margin: 0;
}
.np-membership-hero__sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  margin-top: 0.5rem;
  letter-spacing: 0.04em;
}

/* Content wrapper */
.np-membership-body {
  background: #fff;
  padding: 50px 24px 80px;
}
.np-membership-container {
  max-width: 960px;
  margin: 0 auto;
}

/* Entry content */
body.np-membership-page .entry-content {
  color: #1a1a2e !important;
  background: transparent !important;
}

/* MemberPress plan cards */
body.np-membership-page .mepr_signup,
body.np-membership-page .mepr-membership,
body.np-membership-page .mepr-group-price-box,
body.np-membership-page .mepr-subscription-info,
body.np-membership-page .mepr-payment-form {
  background: #ffffff !important;
  border: 1px solid #e8e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.07) !important;
  padding: 32px !important;
  color: #1a1a2e !important;
}

/* Plan header */
body.np-membership-page .mepr_header,
body.np-membership-page .mepr_header_text,
body.np-membership-page .mepr-product-name,
body.np-membership-page .mepr_signup h3,
body.np-membership-page .mepr-membership-title {
  color: #1a1a2e !important;
  background: transparent !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.04em;
}

/* Price */
body.np-membership-page .mepr_price,
body.np-membership-page .mepr-price-string,
body.np-membership-page .mepr-price {
  color: #FF0080 !important;
  font-weight: 700 !important;
  font-size: 2.4rem !important;
  background: transparent !important;
}

/* Description */
body.np-membership-page .mepr-product-description,
body.np-membership-page .mepr-membership-description,
body.np-membership-page .mepr_terms,
body.np-membership-page .mepr-terms {
  color: #555 !important;
  background: transparent !important;
  line-height: 1.6;
}

/* Labels */
body.np-membership-page label,
body.np-membership-page .mepr-payment-method label,
body.np-membership-page .mepr-payment-method-label {
  color: #333 !important;
  font-weight: 500 !important;
  background: transparent !important;
}

/* Form inputs */
body.np-membership-page input[type="text"],
body.np-membership-page input[type="email"],
body.np-membership-page input[type="password"],
body.np-membership-page input[type="tel"],
body.np-membership-page input[type="url"],
body.np-membership-page input[type="number"],
body.np-membership-page select,
body.np-membership-page textarea {
  background: #f8f8fa !important;
  border: 1px solid #ddd !important;
  color: #1a1a2e !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
  font-size: 0.95rem;
  transition: border-color 0.2s;
}
body.np-membership-page input:focus,
body.np-membership-page select:focus,
body.np-membership-page textarea:focus {
  border-color: #FF0080 !important;
  box-shadow: 0 0 0 3px rgba(255,0,128,.1) !important;
  outline: none !important;
}

/* Payment tabs */
body.np-membership-page .mepr-payment-method-tab {
  background: #f8f8fa !important;
  border: 1px solid #ddd !important;
  color: #333 !important;
}
body.np-membership-page .mepr-payment-method-tab.active {
  background: #fff0f6 !important;
  border-color: #FF0080 !important;
  color: #FF0080 !important;
}
body.np-membership-page [class*="payment"] label,
body.np-membership-page [class*="payment"] span,
body.np-membership-page [class*="payment"] div,
body.np-membership-page [class*="payment"] p {
  color: #333 !important;
  background: transparent !important;
}

/* Stripe */
body.np-membership-page .StripeElement,
body.np-membership-page .mepr-stripe-card-element,
body.np-membership-page #mepr-stripe-card-element {
  background: #f8f8fa !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  padding: 12px !important;
}

/* Submit button */
body.np-membership-page .mepr-submit,
body.np-membership-page .mepr-signup-button,
body.np-membership-page .mepr-btn,
body.np-membership-page input[type="submit"] {
  background: linear-gradient(135deg, #FF0080, #FF1744) !important;
  border: none !important;
  color: #fff !important;
  padding: 14px 36px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
}
body.np-membership-page .mepr-submit:hover,
body.np-membership-page .mepr-signup-button:hover,
body.np-membership-page input[type="submit"]:hover {
  box-shadow: 0 8px 30px rgba(255,0,128,.4) !important;
  transform: translateY(-1px);
}

/* Misc */
body.np-membership-page hr { border-color: #eee !important; }
body.np-membership-page input[type="checkbox"] + label,
body.np-membership-page input[type="radio"] + label,
body.np-membership-page .mepr_tos label { color: #555 !important; background: transparent !important; }
body.np-membership-page a { color: #FF0080 !important; }
body.np-membership-page .mepr_error,
body.np-membership-page .mepr-validation-error { color: #d32f2f !important; background: transparent !important; }
body.np-membership-page .mepr-coupon-field input { background: #f8f8fa !important; border: 1px solid #ddd !important; color: #333 !important; }
body.np-membership-page table,
body.np-membership-page td,
body.np-membership-page th { background: transparent !important; color: #333 !important; border-color: #eee !important; }
body.np-membership-page .entry-content h1,
body.np-membership-page .entry-content h2,
body.np-membership-page .entry-content h3,
body.np-membership-page .entry-content h4,
body.np-membership-page .entry-content p,
body.np-membership-page .entry-content li { color: #1a1a2e !important; background: transparent !important; }

/* Footer: force light */
body.np-membership-page #np-footer,
body.np-membership-page .np-footer,
.np-footer--light {
  background: #f5f5f7 !important;
  border-top: 1px solid #eee !important;
}
body.np-membership-page .np-footer__logo,
body.np-membership-page .np-footer__copy,
body.np-membership-page .np-footer__nav a,
.np-footer--light .np-footer__logo,
.np-footer--light .np-footer__copy { color: #888 !important; text-shadow: none !important; }
body.np-membership-page .np-footer__nav a:hover { color: #FF0080 !important; }

/* Light header helper class */
.np-header--light {
  background: #ffffff !important;
  border-bottom: 1px solid #eee !important;
}
.np-header--light .np-header__logo,
.np-header--light .np-header__nav a { color: #1a1a2e !important; text-shadow: none !important; }
.np-header--light .np-header__nav a:hover { color: #FF0080 !important; }
.np-header--light .np-header__cta { background: #FF0080 !important; color: #fff !important; border-radius: 6px; padding: 8px 20px !important; }
.np-header--light .np-header__burger span { background: #1a1a2e !important; }