/* assets/css/nexus-pro.css */
/* ==================================================
   Nexus Pro — Professional Override Styles
   Keeps the existing color palette and upgrades
   typography, spacing, shadows, and interactions.
   ================================================== */

/* --- 1. Design Tokens --- */
:root {
  --nx-radius: 16px;
  --nx-radius-sm: 12px;
  --nx-radius-lg: 24px;
  --nx-shadow-sm: 0 4px 12px rgba(0,0,0,0.25);
  --nx-shadow: 0 12px 40px rgba(0,0,0,0.35);
  --nx-shadow-glow: 0 0 24px rgba(69, 248, 130, 0.18);
  --nx-transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --nx-section-space: 120px;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--body-color);
  background-color: var(--th-body-background);
  font-family: var(--body-font);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- 2. Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--title-font);
  color: var(--white-color);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

a {
  color: var(--theme-color);
  transition: var(--nx-transition);
}

a:hover {
  color: var(--theme-color2);
}

/* --- 3. Header / Navbar --- */
.th-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(11, 14, 19, 0.82) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: var(--nx-transition);
}

.th-header.scrolled {
  background: rgba(11, 14, 19, 0.95) !important;
  box-shadow: var(--nx-shadow);
}

.header-logo img {
  width: 110px !important;
  height: auto;
  transition: var(--nx-transition);
}

.header-logo img:hover {
  transform: scale(1.04);
  filter: drop-shadow(0 0 8px rgba(69, 248, 130, 0.35));
}

/* Main menu */
.main-menu > ul > li > a {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  padding: 28px 0;
  color: rgba(255,255,255,0.85);
}

.main-menu > ul > li > a:hover,
.main-menu > ul > li > a.active {
  color: var(--theme-color);
}

.main-menu ul li a::before {
  background: var(--theme-color);
  height: 2px;
  border-radius: 2px;
}

/* Header buttons */
.th-header .th-btn {
  padding: 12px 24px;
  border-radius: 50px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 13px;
}

/* Header top bar */
.header-top {
  background: rgba(0,0,0,0.28) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
  letter-spacing: 0.03em;
}

/* Social links in header */
.header-social a {
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  margin-left: 14px;
}

.header-social a:hover {
  color: var(--theme-color);
}

/* --- 4. Buttons --- */
.th-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 50px;
  padding: 16px 34px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  background: linear-gradient(135deg, var(--theme-color) 0%, #2dd26a 100%);
  color: var(--black-color) !important;
  box-shadow: 0 6px 20px rgba(69, 248, 130, 0.28);
  transition: var(--nx-transition);
  overflow: hidden;
  z-index: 1;
}

.th-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--theme-color2) 0%, #ff9a00 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: -1;
}

.th-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(255, 190, 24, 0.32);
}

.th-btn:hover::before {
  opacity: 1;
}

.th-btn i {
  transition: transform 0.3s ease;
}

.th-btn:hover i {
  transform: translateX(4px);
}

.th-btn.style-border,
.th-btn.style-border2,
.th-btn.style-border3 {
  background: transparent;
  color: var(--white-color) !important;
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: none;
}

.th-btn.style-border::before,
.th-btn.style-border2::before,
.th-btn.style-border3::before {
  background: var(--theme-color);
}

.th-btn.style-border:hover,
.th-btn.style-border2:hover,
.th-btn.style-border3:hover {
  color: var(--black-color) !important;
  border-color: var(--theme-color);
}

/* --- 5. Hero --- */
.hero-1 {
  position: relative;
  overflow: hidden;
}

.hero-1::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(98, 64, 207, 0.22) 0%, transparent 45%),
              radial-gradient(circle at 80% 70%, rgba(69, 248, 130, 0.12) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}

.hero-title {
  font-size: clamp(42px, 6vw, 78px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
}

.hero-title span {
  background: linear-gradient(90deg, var(--theme-color) 0%, var(--theme-color2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 18px;
  color: var(--body-color);
  max-width: 560px;
  margin-bottom: 36px;
  line-height: 1.7;
}

.hero-1 .th-btn {
  padding: 18px 42px;
  font-size: 15px;
}

/* Hero images */
.hero-1 img {
  filter: drop-shadow(0 24px 60px rgba(0,0,0,0.45));
  transition: transform 0.6s ease;
}

.hero-1 img:hover {
  transform: scale(1.03) translateY(-8px);
}

/* --- 6. Section Titles --- */
.sec-title,
.sec-title2,
.sec-title3 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  margin-bottom: 18px;
  position: relative;
  display: inline-block;
}

.sec-subtitle {
  display: inline-block;
  color: var(--theme-color);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  margin-bottom: 14px;
}

.sec-subtitle::before,
.sec-subtitle::after {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 2px;
  background: var(--theme-color);
  margin: 0 10px;
  opacity: 0.5;
  content: "";
}

/* --- 7. Cards --- */
.th-product,
.game-card,
.process-card,
.tournament-card,
.blog-card,
.feature-card,
.team-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--nx-radius);
  padding: 24px;
  transition: var(--nx-transition);
  box-shadow: var(--nx-shadow-sm);
  height: 100%;
}

.th-product:hover,
.game-card:hover,
.process-card:hover,
.tournament-card:hover,
.blog-card:hover,
.feature-card:hover,
.team-card:hover {
  transform: translateY(-8px);
  border-color: rgba(69, 248, 130, 0.35);
  box-shadow: var(--nx-shadow-glow), var(--nx-shadow);
}

.th-product .product-thumb,
.game-card .game-card-img,
.blog-card .blog-img,
.team-card .team-img {
  border-radius: var(--nx-radius-sm);
  overflow: hidden;
}

.th-product img,
.game-card img,
.blog-card img,
.team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.th-product:hover img,
.game-card:hover img,
.blog-card:hover img,
.team-card:hover img {
  transform: scale(1.08);
}

.product-title,
.game-card .box-title,
.blog-card .box-title {
  font-size: 20px;
  font-weight: 600;
  margin: 16px 0 10px;
  color: var(--white-color);
}

.product-title a:hover,
.game-card .box-title a:hover,
.blog-card .box-title a:hover {
  color: var(--theme-color);
}

.product-price {
  font-family: var(--title-font);
  font-size: 22px;
  font-weight: 700;
  color: var(--theme-color2);
}

/* --- 8. Forms --- */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--nx-radius-sm) !important;
  color: var(--white-color) !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  transition: var(--nx-transition) !important;
}

/* iOS Safari zooms the whole page in when you focus a field smaller than 16px, and
   it does not zoom back out. The 14px above is the site-wide default, so that was
   every form on the site: the 9-field rank-boost form, the contact form, the account
   login, the store filters and both search boxes all measured 14px at 375px.
   Desktop keeps 14px — this only lifts the value where the zoom actually happens.
   Same selector list and same !important, so it wins purely on source order. */
@media (max-width: 767px) {
  .form-control,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

.form-control::placeholder,
.form-select::placeholder,
input::placeholder,
textarea::placeholder {
  color: rgba(150, 158, 178, 0.7) !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  background: rgba(255,255,255,0.07) !important;
  border-color: var(--theme-color) !important;
  box-shadow: 0 0 0 4px rgba(69, 248, 130, 0.12) !important;
  outline: none !important;
}

.form-group label,
.form-label {
  display: block;
  color: var(--white-color);
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

/* Form validation styling */
.form-messages .alert,
.form-success,
.form-error,
.form-erorr {
  padding: 14px 18px;
  border-radius: var(--nx-radius-sm);
  font-weight: 500;
  margin-top: 16px;
}

.form-success {
  background: rgba(40, 167, 69, 0.15);
  color: #5cdb7b;
  border: 1px solid rgba(40, 167, 69, 0.35);
}

.form-error,
.form-erorr {
  background: rgba(242, 0, 58, 0.15);
  color: #ff7a9a;
  border: 1px solid rgba(242, 0, 58, 0.35);
}

/* --- 9. Footer --- */
.footer-wrapper {
  background: #080a0e !important;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-wrapper .footer-logo img {
  width: 150px !important;
  height: auto;
}

.footer-wrapper .widget_title {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 24px;
  color: var(--white-color);
  position: relative;
  padding-bottom: 12px;
}

.footer-wrapper .widget_title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--theme-color), var(--theme-color2));
}

.footer-wrapper ul li {
  margin-bottom: 10px;
}

.footer-wrapper ul li a {
  color: rgba(255,255,255,0.7);
  font-size: 14px;
}

.footer-wrapper ul li a:hover {
  color: var(--theme-color);
  padding-left: 6px;
}

.footer-wrapper .social-btn a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--white-color);
  transition: var(--nx-transition);
}

.footer-wrapper .social-btn a:hover {
  background: var(--theme-color);
  color: var(--black-color);
  border-color: var(--theme-color);
  transform: translateY(-4px);
}

.copyright-wrap {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 22px 0;
  background: rgba(0,0,0,0.25);
  font-size: 14px;
  color: rgba(255,255,255,0.6);
}

/* --- 10. Spacing & Layout --- */
section {
  position: relative;
}

.space,
.space-top,
.space-bottom {
  padding-top: var(--nx-section-space);
  padding-bottom: var(--nx-section-space);
}

@media (max-width: 991px) {
  :root {
    --nx-section-space: 80px;
  }
}

@media (max-width: 575px) {
  :root {
    --nx-section-space: 60px;
  }
}

/* --- 11. Misc Enhancements --- */
.breadcumb-title {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 700;
}

/* Focus visible for accessibility */
:focus-visible {
  outline: 2px solid var(--theme-color);
  outline-offset: 3px;
}

/* Scrollbar styling is owned by nexus-theme.css to avoid conflicting global rules. */

/* WhatsApp floating button if added */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  z-index: 9999;
  transition: transform 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1) translateY(-4px);
  color: #fff;
}

/* assets/css/nexus-theme.css */
/* =========================================================
   Nexus v2 — Professional Esports Platform Redesign
   Aggressive overrides for the existing template.
   ========================================================= */

:root {
  --n2-bg: #080a0f;
  --n2-surface: rgba(255,255,255,0.035);
  --n2-surface-hover: rgba(255,255,255,0.06);
  --n2-border: rgba(255,255,255,0.08);
  --n2-text: #e1e6f0;
  --n2-muted: #8b95a8;
  --n2-radius: 18px;
  --n2-radius-sm: 12px;
  --n2-shadow: 0 20px 50px rgba(0,0,0,0.45);
  --n2-glow: 0 0 30px rgba(69, 248, 130, 0.18);
}

html, body {
  background: var(--n2-bg) !important;
  color: var(--n2-text) !important;
  font-family: var(--body-font);
  scroll-behavior: smooth;
}

body {
  background-image:
    radial-gradient(circle at 15% 10%, rgba(69, 248, 130, 0.07) 0%, transparent 38%),
    radial-gradient(circle at 85% 20%, rgba(98, 64, 207, 0.09) 0%, transparent 42%),
    radial-gradient(circle at 20% 80%, rgba(35, 60, 90, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 95%, rgba(69, 248, 130, 0.05) 0%, transparent 45%),
    linear-gradient(160deg, #0b1018 0%, #080a0f 45%, #0a0f16 100%) !important;
  background-attachment: scroll !important;
}

/* Ambient decorations: faint grid + aurora glows so sections never feel empty */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(69, 248, 130, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(69, 248, 130, 0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
  will-change: transform;
  transform: translateZ(0);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(420px circle at 8% 25%, rgba(69, 248, 130, 0.055), transparent 70%),
    radial-gradient(520px circle at 92% 65%, rgba(98, 64, 207, 0.07), transparent 70%),
    radial-gradient(380px circle at 70% 8%, rgba(255, 190, 24, 0.03), transparent 70%);
  animation: n2Aurora 14s ease-in-out infinite alternate;
  will-change: opacity;
  transform: translateZ(0);
}

@keyframes n2Aurora {
  0%   { opacity: 0.5;  transform: translate3d(0, 0, 0) scale(1); }
  50%  { opacity: 0.85; transform: translate3d(1.6%, -1.2%, 0) scale(1.04); }
  100% { opacity: 1;    transform: translate3d(-1.2%, 1.6%, 0) scale(1); }
}

/* Scroll smoothness: the theme uses background-attachment:fixed on some section
   backgrounds — that forces a full repaint every scrolled frame. Override it. */
[data-bg-src], .breadcumb-wrapper, .game-sec-wrap1, .footer-wrapper {
  background-attachment: scroll !important;
}

/* Mobile: the About feature-section artwork renders as a giant broken image block
   between the stacked cards — drop it and let the cards sit flush on the page bg */
@media (max-width: 991px) {
  .feature-sec-wrap1 { background-image: none !important; }
  .feature-sec-wrap1 .feature-card-wrap { margin-bottom: 16px; }
}

/* Vignette: gently darkens the edges so content and glows read with more depth */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 78% at 50% 42%, transparent 54%, rgba(0, 0, 0, 0.42) 100%);
}

/* Pause heavy ambient animations when user prefers reduced motion or on touch devices */
@media (prefers-reduced-motion: reduce) {
  body::after,
  .about-experience-tag,
  .live-btn.active { animation: none !important; }
}

@media (hover: none) and (pointer: coarse) {
  body::after { animation-duration: 28s; }
}

body > * {
  position: relative;
  z-index: 1;
}

/* Top bar service chips */
.tb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(69, 248, 130, 0.06);
  border: 1px solid rgba(69, 248, 130, 0.16);
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 4px 11px;
  border-radius: 50px;
}

.tb-chip i {
  color: var(--theme-color);
  font-size: 11px;
}

.tb-phone {
  color: rgba(255, 255, 255, 0.75) !important;
  font-weight: 700 !important;
}

.tb-phone i { color: #25D366; }

/* Header Log In / Account button */
.header-account-btn.is-logged-in {
  border-color: rgba(69, 248, 130, 0.55) !important;
  color: var(--theme-color) !important;
}

/* Store slider card details */
.game-card .game-card-details {
  padding-top: 16px !important;
  text-align: center;
}

.game-card .box-title {
  font-size: 19px !important;
  margin-bottom: 6px !important;
}

.game-card .box-title a { color: #fff !important; }
.game-card .box-title a:hover { color: var(--theme-color) !important; }

.game-card .game-content {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px !important;
}

.game-card .game-content .text-theme {
  display: block;
  font-family: 'Goldman', sans-serif;
  font-size: 21px;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 2px;
}

.game-card .game-buy-btn {
  display: block !important;
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, rgba(69, 248, 130, 0.14), rgba(69, 248, 130, 0.05)) !important;
  border: 1px solid rgba(69, 248, 130, 0.45) !important;
  color: var(--theme-color) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 11px 0 !important;
  border-radius: 50px !important;
  transition: all 0.25s ease !important;
}

.game-card .game-buy-btn:hover {
  background: var(--theme-color) !important;
  color: #0B0E13 !important;
  box-shadow: 0 8px 22px rgba(69, 248, 130, 0.35);
}

/* Blog cards: equal heights, no more zig-zag */
.blog-card {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}

.blog-card .blog-img {
  height: 210px;
  overflow: hidden;
  border-radius: 12px;
  flex-shrink: 0;
}

.blog-card .blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-img img { transform: scale(1.06); }

.blog-card .blog-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card .blog-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card .link-btn { margin-top: auto; }

#blogPostsContainer .swiper-slide { height: auto; }

/* Kill the flat gray template backgrounds — keep everything in the dark navy family */
.game-sec-wrap1,
[data-bg-src*="game-sec1-bg"],
[data-bg-src*="feature-sec1-bg"] {
  background-image:
    radial-gradient(circle at 50% 0%, rgba(69, 248, 130, 0.07), transparent 55%),
    linear-gradient(180deg, rgba(14, 19, 28, 0.9), rgba(9, 12, 18, 0.95)) !important;
  border-radius: 24px;
  border: 1px solid rgba(69, 248, 130, 0.08);
}

.about-sec-3.background-image,
.about-sec-3 {
  background-attachment: scroll;
}
.about-sec-3 .gr-bg1.overlay {
  background: linear-gradient(180deg, rgba(12, 16, 24, 0.45), rgba(8, 10, 15, 0.75)) !important;
}

/* Optimize continuously rotating badge to avoid scroll jank */
.about-experience-tag {
  will-change: transform;
  transform: translateZ(0);
  animation: spin 10s linear infinite;
}

/* Pause badge spin when it leaves the viewport via JS helper class */
.about-experience-tag.paused {
  animation-play-state: paused;
}


/* Scrollbar — subtle by default; the page should feel native while scrolling. */
html { scrollbar-width: thin; scrollbar-color: rgba(69, 248, 130, 0.48) var(--n2-bg); }
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--n2-bg); }
::-webkit-scrollbar-thumb {
  background: rgba(69, 248, 130, 0.48);
  border-radius: 999px;
  border: 1px solid var(--n2-bg);
}
::-webkit-scrollbar-thumb:hover { background: rgba(69, 248, 130, 0.78); }

/* Header — the theme's .sticky-wrapper handles stickiness on scroll;
   making .th-header sticky as well caused a double-stuck, overlapping bar */
.th-header {
  position: relative !important;
  z-index: 1030;
  background: rgba(8, 10, 15, 0.95) !important;
  border-bottom: 1px solid var(--n2-border) !important;
  padding: 0 !important;
}

.th-header .sticky-wrapper.sticky {
  background: rgba(8, 10, 15, 0.9) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
  border-bottom: 1px solid var(--n2-border) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.35) !important;
  z-index: 1030;
}

.header-top {
  background: rgba(0,0,0,0.45) !important;
  border-bottom: 1px solid var(--n2-border) !important;
  color: var(--n2-muted) !important;
  font-size: 12px !important;
  letter-spacing: 0.05em;
  padding: 7px 0 !important;
}

.header-top .header-links a,
.header-top .header-notice {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 12px !important;
}

.header-top .header-links a:hover {
  color: var(--theme-color) !important;
}

.header-top .header-notice a {
  color: var(--theme-color) !important;
  font-weight: 700;
}

/* Social icon pills in the top bar */
.header-social-links ul {
  display: flex !important;
  align-items: center;
  gap: 6px;
}

.header-social-links li {
  margin: 0 !important;
  padding: 0 !important;
}

.header-social-links li::before,
.header-social-links li::after {
  display: none !important;
}

.header-social-links a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0 !important;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  transition: all 0.25s ease;
}

.header-social-links a i {
  margin: 0 !important;
  line-height: 1 !important;
}

.header-social-links a:hover {
  background: rgba(69, 248, 130, 0.15);
  border-color: var(--theme-color);
  color: var(--theme-color) !important;
  transform: translateY(-1px);
}

/* Account button in the main header (next to Live Streaming) */
.header-account-btn {
  padding: 12px 22px !important;
  font-size: 12px !important;
}

/* Logo: the source is a 500x500 emblem — pin the height so it can never
   overflow the header, and pair it with the brand name */
.header-logo .logo-mask {
  display: none !important; /* the oversized masked duplicate behind the logo */
}

.header-logo a {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.header-logo img {
  width: auto !important;
  height: 48px !important;
  transition: 0.3s ease;
}

.header-logo a::after {
  content: "The Nexus";
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.03em;
  color: #fff;
  white-space: nowrap;
}

.header-logo a:hover img {
  filter: drop-shadow(0 0 12px rgba(69, 248, 130, 0.45));
  transform: scale(1.05);
}

.header-logo a:hover::after {
  color: var(--theme-color);
}

@media (max-width: 480px) {
  .header-logo a::after { font-size: 18px; }
  .header-logo img { height: 40px !important; }
}

.main-menu > ul > li > a {
  color: var(--n2-text) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 26px 0 !important;
}

.main-menu > ul > li > a:hover,
.main-menu > ul > li > a.active {
  color: var(--theme-color) !important;
}

/* Small elegant icons before each nav label */
.nx-nav-ico {
  font-size: 12px;
  margin-right: 7px;
  color: var(--theme-color);
  opacity: 0.75;
  transition: opacity 0.2s, transform 0.2s;
  vertical-align: -1px;
}
.main-menu > ul > li > a:hover .nx-nav-ico {
  opacity: 1;
  transform: translateY(-1px);
}
html[dir="rtl"] .nx-nav-ico { margin-right: 0; margin-left: 7px; }

/* Hide the old logo-bg graphic */
.logo-bg { display: none !important; }

/* Main menu dropdowns — pure-CSS caret (font glyphs rendered as broken boxes) */
.main-menu ul li.menu-item-has-children > a::after {
  content: "" !important;
  display: inline-block;
  border: solid rgba(255, 255, 255, 0.55);
  border-width: 0 1.5px 1.5px 0;
  padding: 2.5px;
  margin-left: 8px;
  transform: rotate(45deg) translateY(-2px);
  transition: border-color 0.2s;
}

.main-menu ul li.menu-item-has-children:hover > a::after {
  border-color: var(--theme-color);
}

/* Kill the theme's leftover bullets/blobs inside dropdowns (the broken green dots) */
.main-menu ul li ul.sub-menu li,
.main-menu ul li ul.sub-menu li a {
  list-style: none !important;
}

.main-menu ul li ul.sub-menu li::before,
.main-menu ul li ul.sub-menu li::after,
.main-menu ul li ul.sub-menu li a::before,
.main-menu ul li ul.sub-menu li a::after,
.main-menu ul li ul.sub-menu li::marker {
  display: none !important;
  content: none !important;
}

.main-menu ul li ul.sub-menu {
  background: rgba(10, 13, 19, 0.98) !important;
  backdrop-filter: blur(18px);
  border: 1px solid rgba(69, 248, 130, 0.18) !important;
  border-radius: 14px !important;
  padding: 10px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55) !important;
  margin-top: 0 !important;
}

.main-menu ul li ul.sub-menu li {
  border: none !important;
}

.main-menu ul li ul.sub-menu li a {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  padding: 9px 14px !important;
  border-radius: 8px !important;
  display: block !important;
  transition: all 0.2s ease !important;
}

.main-menu ul li ul.sub-menu li a:hover {
  background: rgba(69, 248, 130, 0.1) !important;
  color: var(--theme-color) !important;
  padding-left: 20px !important;
}

/* Hero */
.hero-1 {
  position: relative;
  padding: 140px 0 120px !important;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(8,10,15,0.95) 0%, rgba(15,20,35,0.92) 100%),
              url('../img/normal/kayle_.jpg') center/cover no-repeat !important;
}

.hero-1::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 50%, rgba(69, 248, 130, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 70% 50%, rgba(98, 64, 207, 0.15) 0%, transparent 40%);
  pointer-events: none;
}

.hero-1 .hero-style1 {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.hero-1 .sub-title {
  display: inline-block !important;
  color: var(--theme-color) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  margin-bottom: 20px !important;
  background: rgba(69, 248, 130, 0.1) !important;
  border: 1px solid rgba(69, 248, 130, 0.25) !important;
  padding: 8px 18px !important;
  border-radius: 50px !important;
}

.hero-1 .hero-title {
  font-size: clamp(48px, 7vw, 92px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  margin-bottom: 24px !important;
  letter-spacing: -0.02em !important;
}

.hero-1 .hero-title .title2 {
  display: block;
  background: linear-gradient(90deg, var(--theme-color) 0%, var(--theme-color2) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.hero-1 .title1 {
  background: none !important;
  -webkit-text-fill-color: var(--white-color) !important;
  color: var(--white-color) !important;
  display: block !important;
  font-size: 0.55em !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 8px !important;
}

.hero-1 .btn-group {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 36px !important;
}

/* Hide the old hero slider / yellow CTA box / Garen images */
.hero-cta-slider1,
.hero-cta-inner,
.hero-shape-area,
.hero-bg-shape,
.hero-bg-border-anime,
.hero-1 .verses-thumb,
.hero-1 .hero-shape-img,
.hero-1 .hero-img-1,
.hero-1 .hero-img-2 {
  display: none !important;
}

/* Buttons */
.th-btn {
  border-radius: 50px !important;
  padding: 16px 36px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border: none !important;
  background: linear-gradient(135deg, var(--theme-color) 0%, #2cd06a 100%) !important;
  color: #000 !important;
  box-shadow: 0 8px 24px rgba(69, 248, 130, 0.3) !important;
  transition: all 0.3s ease !important;
}

.th-btn:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 36px rgba(255, 190, 24, 0.35) !important;
  background: linear-gradient(135deg, var(--theme-color2) 0%, #ff9a00 100%) !important;
  color: #000 !important;
}

.th-btn.style2,
.th-btn.style-border,
.th-btn.style-border3 {
  background: transparent !important;
  color: var(--white-color) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  box-shadow: none !important;
}

.th-btn.style2:hover,
.th-btn.style-border:hover,
.th-btn.style-border3:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: var(--theme-color) !important;
  color: var(--theme-color) !important;
}

/* Live streaming button */
.live-btn.active {
  background: linear-gradient(135deg, #ff0055, #ff5500) !important;
  color: #fff !important;
  box-shadow: 0 0 20px rgba(255, 0, 85, 0.4) !important;
  border: none !important;
  animation: n2Pulse 2s infinite !important;
}

@keyframes n2Pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 0, 85, 0.3); }
  50% { box-shadow: 0 0 24px rgba(255, 0, 85, 0.6); }
}

/* Cards */
.th-product,
.game-card,
.process-card,
.tournament-card,
.blog-card,
.feature-card,
.team-card,
.service-card {
  background: var(--n2-surface) !important;
  border: 1px solid var(--n2-border) !important;
  border-radius: var(--n2-radius) !important;
  padding: 24px !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
  height: 100%;
}

.th-product:hover,
.game-card:hover,
.process-card:hover,
.tournament-card:hover,
.blog-card:hover,
.feature-card:hover,
.team-card:hover,
.service-card:hover {
  transform: translateY(-8px) !important;
  background: var(--n2-surface-hover) !important;
  border-color: rgba(69, 248, 130, 0.3) !important;
  box-shadow: var(--n2-glow), var(--n2-shadow) !important;
}

.th-product img,
.game-card img,
.blog-card img,
.team-card img {
  border-radius: var(--n2-radius-sm) !important;
  object-fit: cover !important;
  width: 100% !important;
}

.product-title,
.box-title,
.blog-title {
  color: var(--white-color) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
}

/* Sections */
section,
.space,
.space-top,
.space-bottom {
  padding-top: 100px !important;
  padding-bottom: 100px !important;
  position: relative;
}

.sec-title {
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 700 !important;
  color: var(--white-color) !important;
  margin-bottom: 18px !important;
}

/* A heading that follows a subtitle pill must start on its own line
   (.sec-title is inline-block, so without this they share one line) */
.sec-subtitle + .sec-title,
.sec-subtitle + h1,
.sec-subtitle + h2 {
  display: block !important;
}

.sec-subtitle {
  color: var(--theme-color) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  margin-bottom: 14px !important;
  border: 1px solid rgba(69, 248, 130, 0.25) !important;
  padding: 6px 14px !important;
  border-radius: 50px !important;
  background: rgba(69, 248, 130, 0.06) !important;
}

/* Footer */
.footer-wrapper {
  background: #050608 !important;
  border-top: 1px solid var(--n2-border) !important;
  padding: 70px 0 0 !important;
  position: relative;
}

.footer-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--theme-color), transparent);
  opacity: 0.6;
}

/* Big footer nav row */
.footer-links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  padding: 0;
  margin: 20px 0 0;
}

.footer-links ul li {
  list-style: none;
}

.footer-links ul li a {
  display: inline-block;
  padding: 8px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 50px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
}

.footer-links ul li a:hover {
  padding-left: 18px !important;
  border-color: var(--theme-color) !important;
  background: rgba(69, 248, 130, 0.08) !important;
}

/* Copyright bar */
.copyright-wrap {
  margin-top: 50px !important;
  padding: 20px 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(0, 0, 0, 0.4) !important;
}

.copyright-text {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 13px !important;
}

.copyright-text a {
  color: var(--theme-color) !important;
  font-weight: 700 !important;
}

.footer-logo img {
  width: 160px !important;
  height: auto;
  margin-bottom: 24px !important;
}

.widget_title {
  color: var(--white-color) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 24px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid var(--theme-color) !important;
  display: inline-block !important;
}

.footer-wrapper ul li a {
  color: var(--n2-muted) !important;
  font-size: 14px !important;
  transition: 0.3s ease !important;
}

.footer-wrapper ul li a:hover {
  color: var(--theme-color) !important;
  padding-left: 6px !important;
}

.social-btn a {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: var(--n2-surface) !important;
  border: 1px solid var(--n2-border) !important;
  color: var(--n2-text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: 0.3s ease !important;
}

.social-btn a:hover {
  background: var(--theme-color) !important;
  color: #000 !important;
  border-color: var(--theme-color) !important;
  transform: translateY(-4px) !important;
}

.copyright-wrap {
  background: rgba(0,0,0,0.3) !important;
  border-top: 1px solid var(--n2-border) !important;
  padding: 24px 0 !important;
  margin-top: 60px !important;
}

/* Forms */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--n2-border) !important;
  border-radius: var(--n2-radius-sm) !important;
  color: var(--white-color) !important;
  padding: 14px 18px !important;
  transition: all 0.3s ease !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  background: rgba(255,255,255,0.07) !important;
  border-color: var(--theme-color) !important;
  box-shadow: 0 0 0 4px rgba(69, 248, 130, 0.1) !important;
  outline: none !important;
}

/* Breadcrumb */
.breadcumb-wrapper {
  background: linear-gradient(135deg, rgba(8,10,15,0.95) 0%, rgba(15,20,35,0.92) 100%),
              url('../img/bg/breadcumb-bg.webp') center/cover no-repeat !important;
  padding: 120px 0 80px !important;
}

.breadcumb-title {
  font-size: clamp(36px, 5vw, 56px) !important;
  font-weight: 800 !important;
  color: var(--white-color) !important;
}

/* WhatsApp float */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  z-index: 9999;
  transition: all 0.3s ease;
}

.whatsapp-float:hover {
  transform: scale(1.1) translateY(-4px);
  color: #fff !important;
}

/* AdSense slots */
.n2-adslot {
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: var(--n2-radius-sm);
  padding: 12px;
  text-align: center;
  color: var(--n2-muted);
  font-size: 12px;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tournament cards from API */
.n2-tournament-card {
  background: var(--n2-surface);
  border: 1px solid var(--n2-border);
  border-radius: var(--n2-radius);
  padding: 28px;
  transition: all 0.3s ease;
}

.n2-tournament-card:hover {
  transform: translateY(-6px);
  border-color: rgba(69, 248, 130, 0.3);
  box-shadow: var(--n2-glow), var(--n2-shadow);
}

.n2-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.n2-status.upcoming { background: rgba(69, 248, 130, 0.12); color: var(--theme-color); border: 1px solid rgba(69, 248, 130, 0.25); }
.n2-status.running { background: rgba(255, 190, 24, 0.12); color: var(--theme-color2); border: 1px solid rgba(255, 190, 24, 0.25); }
.n2-status.completed { background: rgba(150, 158, 178, 0.12); color: var(--n2-muted); border: 1px solid rgba(150, 158, 178, 0.25); }

/* Responsive */
@media (max-width: 991px) {
  .hero-1 { padding: 100px 0 80px !important; min-height: auto; }
  .hero-1 .hero-title { font-size: 42px !important; }
  section, .space, .space-top, .space-bottom { padding-top: 70px !important; padding-bottom: 70px !important; }
}

@media (max-width: 575px) {
  .hero-1 .hero-title { font-size: 34px !important; }
  .th-btn { padding: 14px 26px !important; font-size: 13px !important; }
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--theme-color) !important;
  outline-offset: 3px !important;
}

/* Hide old clunky inline styles from the template where possible */
[style*="width: 100px"],
[style*="width: 200px"] {
  width: auto !important;
}

[style*="height: 247px"],
[style*="height: 280px"],
[style*="height: 300px"],
[style*="height: 500px"] {
  height: auto !important;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* Hero — Cinematic Esports Banner */
.hero-cinema {
  position: relative;
  min-height: calc(100vh - 88px);
  min-height: 820px;
  overflow: hidden;
  background-image: url('../img/hero/hero-yasuo-yone-vs-opt.jpg');
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  background-color: #03060a;
}

.hero-cinema::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(3, 6, 10, 0.98) 0%,
      rgba(3, 6, 10, 0.92) 24%,
      rgba(3, 6, 10, 0.68) 40%,
      rgba(3, 6, 10, 0.24) 64%,
      rgba(3, 6, 10, 0.18) 100%
    );
}

.hero-cinema::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 45%, rgba(34, 255, 136, 0.13), transparent 30%),
    linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.35));
}

.hero-cinema-content {
  position: relative;
  z-index: 3;
  min-height: 820px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 120px 0 90px;
}

.hero-cinema-copy {
  width: min(560px, calc(100vw - 40px));
  margin-left: clamp(32px, 6vw, 120px);
}

.hero-cinema-copy .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(34,255,136,0.08);
  border: 1px solid rgba(34,255,136,0.25);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #88ffbb;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.hero-cinema-title {
  font-family: 'Goldman', sans-serif;
  font-size: clamp(48px, 5.2vw, 92px);
  font-weight: 800;
  color: #fff;
  line-height: 0.95;
  margin: 20px 0 16px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.hero-cinema-title .text-theme {
  color: #22ff88;
  text-shadow: 0 0 40px rgba(34,255,136,0.3);
}

.hero-cinema-lead {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
  max-width: 520px;
  margin-bottom: 28px;
  font-family: 'Poppins', sans-serif;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 36px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 28px;
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.92rem;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.hero-btn-primary {
  background: linear-gradient(135deg, #22ff88 0%, #1ad473 100%);
  color: #05070a;
  box-shadow: 0 8px 30px rgba(34,255,136,0.25);
}

.hero-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(34,255,136,0.35); }

.hero-btn-secondary {
  border: 1px solid rgba(34,255,136,0.4);
  color: #22ff88;
  background: rgba(34,255,136,0.06);
}

.hero-btn-secondary:hover { background: rgba(34,255,136,0.12); transform: translateY(-2px); }

.hero-btn-ghost {
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
}

.hero-btn-ghost:hover { border-color: rgba(255,255,255,0.3); color: #fff; transform: translateY(-2px); }

.hero-stats {
  display: flex;
  gap: clamp(28px, 4vw, 58px);
  flex-wrap: wrap;
}

.hero-stat-value {
  font-family: 'Goldman', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #22ff88;
  display: block;
  line-height: 1;
  margin-bottom: 4px;
  text-shadow: 0 0 30px rgba(34,255,136,0.2);
}

.hero-stat-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

@media (max-width: 1024px) {
  .hero-cinema {
    background-position: 60% center;
  }

  .hero-cinema-copy {
    margin-left: 32px;
  }
}

@media (max-width: 768px) {
  .hero-cinema {
    min-height: 720px;
    background-position: 62% center;
  }

  .hero-cinema::before {
    background:
      linear-gradient(
        90deg,
        rgba(3, 6, 10, 0.99) 0%,
        rgba(3, 6, 10, 0.94) 55%,
        rgba(3, 6, 10, 0.62) 100%
      );
  }

  .hero-cinema-content {
    min-height: 720px;
    padding: 110px 20px 60px;
  }

  .hero-cinema-copy {
    margin-left: 0;
    width: 100%;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-stats { gap: 24px; }
  .hero-stat-value { font-size: 24px; }
}

@media (max-width: 575px) {
  .hero-cinema-title { font-size: 36px; }
}

/* Game Card Badge */
.game-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: inline-block;
  padding: 4px 12px;
  background: #45F882;
  color: #05070a;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
/* Game Card Buy Button */
.game-buy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.game-buy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  color: #fff;
}
/* Product Buy Button */
.product-buy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
  text-decoration: none;
  border: none;
  cursor: pointer;
  margin-top: 10px;
}
.product-buy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  color: #fff;
}
/* Blog Section */
#blog-sec .blog-card {
  margin-bottom: 0;
}
/* Releases / game cards — consistent art size + game tag chip */
.game-card .game-card-img {
  position: relative;
}

.game-card .game-card-img > a > img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center 25%;
  display: block;
  border-radius: 12px;
  transition: transform 0.4s ease;
}

.game-card:hover .game-card-img > a > img {
  transform: scale(1.05);
}

/* Official icons/badges that must not be cropped */
.game-card .game-card-img > a > img.img-contain {
  object-fit: contain;
  padding: 24px;
  background: radial-gradient(circle at 50% 40%, rgba(69, 248, 130, 0.1), rgba(11, 14, 19, 0.9) 75%);
}

/* Wishlist heart on store cards */
.game-card .gc-wish {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(11, 14, 19, 0.82); /* solid-ish: per-card backdrop-filter janks scrolling */
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}
.game-card .gc-wish:hover {
  border-color: rgba(242, 0, 58, 0.55);
  color: #ff8fa5;
  transform: scale(1.08);
}
.game-card .gc-wish[aria-pressed="true"] {
  background: rgba(242, 0, 58, 0.15);
  border-color: rgba(242, 0, 58, 0.6);
  color: #ff5d7d;
}
.game-card .gc-wish[aria-pressed="true"] i {
  font-weight: 900;
}
html[dir="rtl"] .game-card .gc-wish { right: auto; left: 10px; }

/* Deal / savings + bundle styling on store cards */
.game-card .gc-save {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  background: linear-gradient(135deg, #F2003A, #ff5a2e);
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(242, 0, 58, 0.35);
}
html[dir="rtl"] .game-card .gc-save { left: auto; right: 10px; }
/* When a text badge (POPULAR / BEST VALUE) is present, stack SAVE% below it instead of overlapping */
.game-card .game-card-badge ~ .gc-save { top: 48px; }
html[dir="rtl"] .game-card .game-card-badge ~ .gc-save { top: 48px; }
.game-content .gc-old {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: line-through;
  font-size: 0.85em;
  margin-right: 4px;
}
.game-card.gc-bundle {
  border-color: rgba(255, 190, 24, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 190, 24, 0.25), 0 10px 30px rgba(0, 0, 0, 0.35);
}
.game-card.gc-bundle .game-card-tag {
  background: linear-gradient(135deg, #FFBE18, #ff9d00);
  color: #0B0E13;
  font-weight: 800;
}

/* Sold-out state (wishlist acts as the "notify me when it's back" list) */
.game-card.gc-out .game-card-img > a > img { filter: grayscale(0.7) brightness(0.6); }
.game-card .gc-soldout {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  background: rgba(11, 14, 19, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 8px;
}
html[dir="rtl"] .game-card .gc-soldout { left: auto; right: 10px; }
.game-buy-btn.is-out {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  cursor: default;
}

.game-card .game-card-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  background: rgba(11, 14, 19, 0.85);
  border: 1px solid rgba(69, 248, 130, 0.35);
  color: #45F882;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}

/* CTA — Swain full-bleed background, readable at every width */
.cta-area-1 .cta-wrap-bg {
  -webkit-mask-image: none;
  mask-image: none;
  z-index: 1;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(69, 248, 130, 0.18);
  background: #0B0E13;
}

.cta-area-1 .cta-wrap-bg .cta-thumb {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.cta-area-1 .cta-wrap-bg .cta-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% 20%;
}

.cta-area-1 .cta-wrap-bg .cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 9, 13, 0.96) 0%, rgba(6, 9, 13, 0.88) 38%, rgba(6, 9, 13, 0.45) 68%, rgba(6, 9, 13, 0.15) 100%);
}

.cta-area-1 .cta-wrap {
  z-index: 2;
}

.cta-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-bottom: 28px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 600;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

@media (max-width: 1199px) {
  .cta-area-1 .cta-wrap-bg .cta-overlay {
    background: linear-gradient(180deg, rgba(6, 9, 13, 0.82) 0%, rgba(6, 9, 13, 0.9) 100%);
  }
  .cta-perks {
    justify-content: center;
  }
  .cta-actions {
    justify-content: center;
  }
}

/* CTA */
.cta-heading {
  font-size: clamp(22px, 3vw, 36px) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
.cta-text {
  font-size: 15px !important;
  line-height: 1.7 !important;
}



/* ---- Mobile floating elements ----
   The old bottom-left account pill + legacy .whatsapp-float are GONE (they covered
   content and stacked on the new .nx-wa-fab). Keep them dead even if cached markup loads. */
.n2-account-float, .whatsapp-float { display: none !important; }

/* Theme scroll-top: lift it above the WhatsApp FAB so they never overlap */
.scroll-top { right: 24px !important; bottom: 92px !important; z-index: 9997 !important; }
@media (max-width: 768px) {
  .scroll-top { transform: scale(0.85); bottom: 88px !important; right: 20px !important; }
}

/* ---- Round 6: ambient background sparks ---- */
.n2-sparks {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.n2-sparks span {
  position: absolute;
  bottom: -10px;
  border-radius: 50%;
  background: #45F882;
  box-shadow: 0 0 6px 1px rgba(69, 248, 130, 0.55);
  opacity: 0;
  animation: n2-spark-rise linear infinite;
}
.n2-sparks span.gold {
  background: #FFBE18;
  box-shadow: 0 0 6px 1px rgba(255, 190, 24, 0.55);
}
@keyframes n2-spark-rise {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  8%   { opacity: 0.85; }
  60%  { opacity: 0.5; }
  100% { transform: translate(var(--n2-drift, 0px), -105vh) scale(0.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .n2-sparks { display: none; }
}

/* ---- Round 7: themed toasts (replace browser alert popups) ---- */
#nx-toast-host {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  pointer-events: none;
  width: min(480px, calc(100vw - 32px));
}
.nx-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  background: linear-gradient(135deg, rgba(13, 26, 18, 0.97), rgba(8, 11, 15, 0.97));
  border: 1px solid rgba(69, 248, 130, 0.35);
  border-left: 4px solid #45F882;
  border-radius: 12px;
  padding: 13px 16px;
  color: #e8edf5;
  font-size: 14px;
  line-height: 1.55;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6), 0 0 18px rgba(69, 248, 130, 0.12);
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.3s, transform 0.3s;
  backdrop-filter: blur(8px);
}
.nx-toast.show { opacity: 1; transform: translateY(0); }
.nx-toast i { color: #45F882; font-size: 17px; margin-top: 1px; flex: 0 0 auto; }
.nx-toast.error { border-color: rgba(255, 101, 132, 0.4); border-left-color: #ff6584; box-shadow: 0 10px 34px rgba(0,0,0,0.6), 0 0 18px rgba(255,101,132,0.12); }
.nx-toast.error i { color: #ff6584; }
.nx-toast.success { border-left-color: #45F882; }

/* ---- Round 7: themed dropdowns site-wide (white default selects looked broken) ---- */
select,
.form-select,
.single-select,
select.form-control {
  background-color: rgba(10, 16, 13, 0.92) !important;
  color: #e8edf5 !important;
  border: 1px solid rgba(69, 248, 130, 0.28) !important;
  border-radius: 10px !important;
  padding: 10px 34px 10px 14px;
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2345F882' stroke-width='2'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  cursor: pointer;
}
select:focus, .form-select:focus {
  outline: none;
  border-color: #45F882 !important;
  box-shadow: 0 0 0 3px rgba(69, 248, 130, 0.15) !important;
}
select option {
  background-color: #0c1210;
  color: #e8edf5;
}
select option:checked, select option:hover {
  background-color: #142a1d;
  color: #45F882;
}

/* ---- Round 7: stronger ambient background ---- */
.n2-sparks span.big {
  box-shadow: 0 0 10px 2px rgba(69, 248, 130, 0.65);
}
.n2-sparks span.big.gold {
  box-shadow: 0 0 10px 2px rgba(255, 190, 24, 0.65);
}
.n2-orb {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(69, 248, 130, 0.07) 0%, transparent 65%);
  animation: n2-orb-drift ease-in-out infinite alternate;
  filter: blur(2px);
}
.n2-orb.gold {
  background: radial-gradient(circle, rgba(255, 190, 24, 0.05) 0%, transparent 65%);
}
@keyframes n2-orb-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(60px, -50px) scale(1.15); }
  100% { transform: translate(-50px, 40px) scale(0.95); }
}
/* Weak devices: fewer effects, no blurs (html.nx-lite is set by JS) */
html.nx-lite .n2-orb { display: none; }
html.nx-lite .n2-sparks span { box-shadow: none; }
html.nx-lite .nx-toast { backdrop-filter: none; }

/* ---- Round 7: blog article images show FULL, never cropped ---- */
.nexus-article-cover img {
  width: 100% !important;
  height: auto !important;
  max-height: 560px !important;
  object-fit: contain !important;
  background: rgba(0, 0, 0, 0.25);
}
/* Full-width only for real content photos — icons/inline images keep their own size */
.nexus-article-content img:not([style*="width"]) {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 14px;
}
.nexus-article-content img[style*="width"] {
  height: auto;
  object-fit: contain;
}

/* ---- Round 7: LIVE watch button ---- */
.nx-live-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, #2c0b12, #180608);
  border: 1px solid rgba(255, 60, 80, 0.55);
  color: #ff5a6e;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 11px 22px;
  border-radius: 999px;
  text-transform: uppercase;
  font-size: 14px;
  box-shadow: 0 0 18px rgba(255, 60, 80, 0.25);
  transition: transform 0.2s, box-shadow 0.2s;
}
.nx-live-btn:hover { color: #ff8a98; transform: translateY(-2px); box-shadow: 0 0 26px rgba(255,60,80,0.4); }
.nx-live-btn .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #ff3c50;
  animation: nx-live-pulse 1.1s ease-in-out infinite;
}
@keyframes nx-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 60, 80, 0.7); }
  55% { box-shadow: 0 0 0 7px rgba(255, 60, 80, 0); }
}

/* ---- Round 7: bracket update animation ---- */
.nx-match-flash {
  animation: nx-match-flash 1.6s ease-out;
}
@keyframes nx-match-flash {
  0% { box-shadow: 0 0 0 3px rgba(69, 248, 130, 0.85), 0 0 26px rgba(69, 248, 130, 0.5); }
  100% { box-shadow: 0 0 0 0 rgba(69, 248, 130, 0), 0 0 0 rgba(69, 248, 130, 0); }
}

/* Native dropdown lists render dark too */
select, input, textarea { color-scheme: dark; }

/* ---- Round 8: Releases section title + reviews strip ---- */
.nx-releases-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(69, 248, 130, 0.12), rgba(255, 190, 24, 0.08));
  border: 1px solid rgba(69, 248, 130, 0.35);
  color: #45F882;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.nx-releases-sub {
  color: rgba(255, 255, 255, 0.45);
  font-size: 14px;
  margin: 10px 0 0;
  letter-spacing: 0.03em;
}
.nx-releases-title .sec-title { text-shadow: 0 0 34px rgba(69, 248, 130, 0.25); }

/* Extra top margin + a divider so this reads as a clearly separate section from the
   product carousel above it, whose own pagination dots sit close to its bottom edge. */
/* "What players say" — centered, capped-width premium testimonials (was a full-bleed 2-col stretch) */
#nx-reviews { max-width: 1080px; margin: 72px auto 0; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.08); }
.nx-reviews-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  margin-bottom: 28px;
}
.nx-reviews-head h3 { color: #fff; font-family: 'Rajdhani', sans-serif; margin: 0; font-size: 27px; letter-spacing: .3px; }
#nx-reviews-avg { color: rgba(255, 255, 255, 0.62); font-size: 13.5px; display:inline-flex; align-items:center; gap:7px; }
.nx-avg-stars i, .nx-review-stars i { color: #FFBE18; font-size: 13px; }
.nx-reviews-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding-bottom: 4px;
  min-height: 176px;
}
.nx-review-card {
  position: relative;
  flex: 0 1 300px;
  max-width: 332px;
  min-height: 168px;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
  border: 1px solid rgba(69, 248, 130, 0.18);
  border-radius: 16px;
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.nx-review-card:hover { border-color: rgba(69,248,130,0.45); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,0.35); }
.nx-review-card::before { content: "\201C"; position: absolute; top: 4px; right: 18px; font-family: Georgia, serif; font-size: 54px; line-height: 1; color: rgba(69,248,130,0.15); pointer-events: none; }
.nx-review-card .nx-review-stars { margin-bottom: 11px; }
.nx-review-card p { color: rgba(255, 255, 255, 0.82); font-size: 13.5px; line-height: 1.7; margin: 0 0 15px; flex: 1; }
.nx-review-meta { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.nx-review-av { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: #0b0f0c; background: linear-gradient(135deg, #45F882, #27c95f); font-family: 'Rajdhani', sans-serif; }
.nx-review-meta .who { line-height: 1.35; min-width: 0; }
.nx-review-meta .who strong { display: block; color: #fff; font-size: 13px; }
.nx-review-meta .who span { color: rgba(255, 255, 255, 0.45); font-size: 11.5px; }

/* ---- Round 9: custom themed dropdowns ---- */
.nx-select { position: relative; display: block; }
.nx-select select {
  position: absolute !important;
  opacity: 0;
  pointer-events: none;
  width: 1px; height: 1px;
}
.nx-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background-color: rgba(10, 16, 13, 0.92);
  color: #e8edf5;
  border: 1px solid rgba(69, 248, 130, 0.28);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.nx-select.open .nx-select-btn,
.nx-select-btn:focus {
  border-color: #45F882;
  box-shadow: 0 0 0 3px rgba(69, 248, 130, 0.15);
  outline: none;
}
.nx-select-caret {
  width: 9px; height: 9px;
  border-right: 2px solid #45F882;
  border-bottom: 2px solid #45F882;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.18s;
  flex: 0 0 auto;
}
.nx-select.open .nx-select-caret { transform: rotate(-135deg) translateY(-2px); }
/* When open, lift the whole select above sibling field icons (pencil/phone) so the panel isn't overlapped */
.nx-select.open { z-index: 6000; }
.nx-select-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 6000;
  background: #0c1210;
  border: 1px solid rgba(69, 248, 130, 0.35);
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.65), 0 0 20px rgba(69, 248, 130, 0.08);
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(69, 248, 130, 0.45) transparent;
}
.nx-select.drop-up .nx-select-panel { top: auto; bottom: calc(100% + 6px); }
.nx-select-panel { overscroll-behavior: contain; }
.nx-select-panel::-webkit-scrollbar { width: 8px; }
.nx-select-panel::-webkit-scrollbar-track { background: transparent; }
.nx-select-panel::-webkit-scrollbar-thumb { background: rgba(69, 248, 130, 0.35); border-radius: 8px; }
.nx-select.open .nx-select-panel { display: block; animation: nxSelIn 0.16s ease-out; }
@keyframes nxSelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.nx-select-item {
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nx-select-item:hover { background: rgba(69, 248, 130, 0.1); color: #45F882; }
.nx-select-item.sel { background: rgba(69, 248, 130, 0.16); color: #45F882; font-weight: 700; }
/* Visible-but-unselectable (e.g. coin minimum above the order total) */
.nx-select-item.dis { color: #ff6584; opacity: 0.75; cursor: not-allowed; text-decoration: line-through; }
.nx-select-item.dis:hover { background: rgba(242, 0, 58, 0.08); color: #ff6584; }

/* "Explore" links inside the About feature cards */
.nx-feature-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  color: var(--theme-color);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: gap 0.2s;
}
.nx-feature-link:hover { color: #fff; gap: 11px; }

/* Themed right-click menu (footer links) */
.nx-ctx {
  position: fixed;
  z-index: 99999;
  min-width: 190px;
  background: rgba(13, 17, 23, 0.97);
  border: 1px solid rgba(69, 248, 130, 0.35);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  animation: nxCtxIn 0.14s ease;
}
@keyframes nxCtxIn { from { opacity: 0; transform: scale(0.95) translateY(-4px); } to { opacity: 1; transform: none; } }
.nx-ctx button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: 0.15s;
}
.nx-ctx button i { color: var(--theme-color); width: 16px; text-align: center; }
.nx-ctx button:hover { background: rgba(69, 248, 130, 0.12); color: #45F882; }

/* ---- Round 9: flash sale banner ---- */
.nx-flash {
  position: relative;
  z-index: 1025;
  background: linear-gradient(90deg, #180608, #2c0b12 30%, #331107 70%, #180608);
  border-bottom: 1px solid rgba(255, 120, 60, 0.45);
  overflow: hidden;
}
.nx-flash::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 190, 24, 0.12) 50%, transparent 70%);
  animation: nxFlashSheen 2.6s linear infinite;
}
@keyframes nxFlashSheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.nx-flash-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px;
  position: relative;
}
.nx-flash-tag {
  background: #ff5a2e;
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 999px;
  animation: nx-live-pulse 1.4s ease-in-out infinite;
}
.nx-flash-title { color: rgba(255, 255, 255, 0.85); font-size: 14px; }
.nx-flash-title strong { color: #FFBE18; font-family: 'Goldman', sans-serif; }
.nx-flash-timer {
  font-family: 'Goldman', sans-serif;
  font-size: 17px;
  color: #FFBE18;
  background: rgba(0, 0, 0, 0.45);
  border: 1px dashed rgba(255, 190, 24, 0.5);
  border-radius: 8px;
  padding: 3px 12px;
  letter-spacing: 2px;
}
.nx-flash-cta {
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  background: rgba(255, 90, 46, 0.25);
  border: 1px solid rgba(255, 90, 46, 0.6);
  padding: 6px 16px;
  border-radius: 999px;
}
.nx-flash-cta:hover { background: #ff5a2e; color: #fff; }
.nx-select-panel { min-width: 170px; }

/* =========================================================
   Nexus v2 Global Utilities
   Loading, skeletons, cart badge, search/filter
   ========================================================= */

/* Loading overlay */
#nx-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(8,10,15,0.85);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#nx-loading-overlay.show { opacity: 1; pointer-events: auto; }
.nx-loading-spinner {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.nx-loading-spinner div {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 4px solid rgba(69,248,130,0.15);
  border-top-color: #45F882;
  border-radius: 50%;
  animation: nx-spin 1s linear infinite;
}
.nx-loading-spinner div:nth-child(2) { border-color: rgba(255,190,24,0.15); border-top-color: #FFBE18; animation-duration: 0.75s; animation-direction: reverse; }
.nx-loading-spinner div:nth-child(3) { border-color: rgba(98,64,207,0.15); border-top-color: #6240CF; animation-duration: 1.25s; }
@keyframes nx-spin { to { transform: rotate(360deg); } }
#nx-loading-overlay p { color: var(--n2-muted); margin-top: 16px; font-size: 14px; }

/* Skeleton screens */
.nx-skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.nx-skeleton-card { background: var(--n2-surface); border-radius: var(--n2-radius); padding: 16px; border: 1px solid var(--n2-border); }
.nx-skeleton-img { height: 160px; background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%); background-size: 200% 100%; border-radius: 12px; animation: nx-skeleton 1.4s ease infinite; }
.nx-skeleton-line { height: 16px; margin-top: 14px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%); background-size: 200% 100%; animation: nx-skeleton 1.4s ease infinite; }
.nx-skeleton-line.short { width: 60%; }
@keyframes nx-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Cart button */
#nx-cart-btn { position: relative; }
.nx-cart-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff5a2e;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  line-height: 1;
}

/* Product search/filter bar */
.nx-product-toolbar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding: 16px;
  background: var(--n2-surface);
  border-radius: var(--n2-radius);
  border: 1px solid var(--n2-border);
}
.nx-product-toolbar input,
.nx-product-toolbar select {
  flex: 1;
  min-width: 200px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--n2-border);
  color: var(--n2-text);
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
}
.nx-product-toolbar input:focus,
.nx-product-toolbar select:focus { outline: none; border-color: #45F882; }
.nx-product-toolbar select option { background: #0b0e13; color: var(--n2-text); }

/* Mobile menu fixes */
.mobile-menu-active { overflow: hidden; }

/* Responsive admin */
@media (max-width: 991px) {
  .admin-layout { grid-template-columns: 1fr !important; }
  .admin-sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    transform: translateX(-100%);
    z-index: 1000;
    transition: transform 0.3s ease;
  }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-main { padding: 80px 16px 24px !important; margin-left: 0 !important; }
  .nx-admin-toggle {
    position: fixed;
    left: 0; top: 16px;
    z-index: 1001;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: #0b0e13;
    border: 1px solid rgba(69,248,130,0.25);
    border-radius: 0 8px 8px 0;
    color: #45F882;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
  }
}
/* Cart modal */
.nx-cart-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.nx-cart-modal.show { opacity: 1; pointer-events: auto; }
.nx-cart-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); }
.nx-cart-panel { position: relative; width: 100%; max-width: 520px; max-height: 85vh; margin: 16px; background: #0b0e13; border: 1px solid rgba(69,248,130,0.25); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.nx-cart-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.nx-cart-header h3 { margin: 0; font-family: 'Rajdhani', sans-serif; font-size: 20px; color: #fff; }
.nx-cart-close { background: none; border: none; color: rgba(255,255,255,0.5); font-size: 28px; line-height: 1; cursor: pointer; }
.nx-cart-close:hover { color: #fff; }
.nx-cart-body { padding: 18px 22px; overflow-y: auto; flex: 1; }
.nx-cart-empty { text-align: center; padding: 30px 10px; color: rgba(255,255,255,0.5); }
.nx-cart-empty i { font-size: 42px; display: block; margin-bottom: 12px; color: #45F882; }
.nx-cart-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; margin-bottom: 10px; }
.nx-cart-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex: 0 0 48px; background: #0b0e13; }
.nx-cart-item-info { flex: 1; min-width: 0; }
.nx-cart-item-title { color: #fff; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-cart-item-price { color: #45F882; font-size: 13px; }
/* The 50px box could not hold its own number. The `padding: 6px` below never
   applied: the global input[type=number] rule at the top of this file wins with
   `padding: 14px 18px !important`, which leaves 12px of content width inside 50px.
   Measured at 375px: "50" needed 17.6px, "500" 26.4px, "9999" 35.3px — every value
   past a single digit was clipped. Same defect the product stepper had, so it takes
   the same shape of fix: width derived from the content in `ch`, and the padding
   restated at !important because that is the only weight that beats the global rule. */
.nx-cart-item-qty input { width: auto; min-width: 4.5ch; max-width: 8ch; box-sizing: border-box; field-sizing: content; background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; color: #fff; padding: 9px 7px !important; text-align: center; font-size: 13px; }
.nx-cart-item-remove { background: none; border: none; color: #ff6584; font-size: 16px; cursor: pointer; padding: 6px; }
/* On a phone this single nowrap row asks for more than the panel has. Measured at
   375px: thumbnail 48 + quantity 45 + remove 26 + Checkout 152 + four 12px gaps = 319px
   inside a 273px content box. The row cannot shrink the fixed children, so it took the
   width out of the only flexible one — .nx-cart-item-info collapsed to 0px, meaning the
   title and price of the item in your cart rendered at zero width — and Checkout still
   finished 20.2px past the panel's right edge. Letting the row wrap gives the name its
   width back and puts Checkout on its own line, where a full-width primary action
   belongs on a phone anyway. margin-left is set inline by nexus-core.js, hence the
   !important. */
@media (max-width: 575px) {
  .nx-cart-item { flex-wrap: wrap; }
  .nx-cart-item-info { flex: 1 1 auto; min-width: 110px; }
  .nx-cart-checkout { flex: 1 0 100%; margin-left: 0 !important; text-align: center; }
}
.nx-cart-footer { padding: 16px 22px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nx-cart-total { font-size: 16px; font-weight: 700; color: #fff; }
.nx-cart-total span { color: #45F882; }

/* Product not found page */
#prod-notfound {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}
.prod-notfound-inner {
  max-width: 560px;
  margin: 0 auto;
}
.prod-notfound-inner i {
  display: inline-block;
  font-size: 72px;
  color: #45F882;
  margin-bottom: 20px;
  opacity: 0.9;
}
.prod-notfound-text {
  color: rgba(255,255,255,0.6);
  font-size: 16px;
  max-width: 440px;
  margin: 0 auto 24px;
  line-height: 1.6;
}

/* General small button utility */
.th-btn.btn-sm { padding: 8px 14px; font-size: 12px; }

/* Cart / account links live inside the side menu and mobile menu */
.nx-menu-actions { display: flex; gap: 10px; padding: 16px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.nx-menu-actions a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; color: #fff; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.25); }
.nx-menu-actions a:hover { background: rgba(69,248,130,0.1); border-color: rgba(69,248,130,0.35); color: #45F882; }
.nx-menu-actions .nx-cart-badge { position: relative; top: auto; right: auto; display: inline-flex; min-width: 18px; height: 18px; font-size: 10px; }

/* Hide legacy header cart/account icons */
.header-action-icons,
.header-cart-btn,
.header-account-icon { display: none !important; }

/* Language switcher in footer */
.nx-lang-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; padding: 14px 0; margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.nx-lang-label { color: rgba(255,255,255,0.45); font-size: 13px; margin-right: 6px; }
.nx-lang { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 5px 10px; border-radius: 7px; font-size: 12px; color: rgba(255,255,255,0.7); text-decoration: none; border: 1px solid rgba(255,255,255,0.1); transition: all .15s ease; }
.nx-lang:hover { background: rgba(69,248,130,0.1); color: #45F882; border-color: rgba(69,248,130,0.3); }
.nx-lang.active { background: rgba(69,248,130,0.15); color: #45F882; border-color: #45F882; font-weight: 700; }

/* Nexus cart badge global */
.nx-cart-badge {
  min-width: 20px;
  height: 20px;
  background: #FFBE18;
  color: #0b0e13;
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 0 0 2px #0b0e13;
  font-family: 'Rajdhani', sans-serif;
}

@media (max-width: 575px) {
  .nx-menu-actions { padding: 12px; }
  .nx-cart-badge { min-width: 18px; height: 18px; font-size: 10px; }
}



/* ---- clean header icon cluster (small cart + account + lang + live) ---- */
.nx-hactions { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; }
.nx-hicon {
  position: relative; width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.75);
  font-size: 16px; transition: 0.18s;
}
.nx-hicon:hover { background: rgba(69,248,130,0.12); border-color: rgba(69,248,130,0.45); color: #45F882; transform: translateY(-2px); }
.nx-hicon.header-account-btn.is-in { border-color: rgba(69,248,130,0.5); color: #45F882; }
.nx-lang-btn { font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 15px; cursor: pointer; }
.nx-hicon .nx-cart-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 10px; background: #45F882; color: #06120b; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.nx-hlive {
  background: rgba(255,40,60,0.12) !important; border-color: rgba(255,60,80,0.6) !important;
  color: #ff5a6e !important; animation: nxLiveGlow 1.6s ease-in-out infinite;
}
.nx-hlive .nx-hlive-dot {
  position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: #ff3c50; animation: nx-live-pulse 1.1s ease-in-out infinite;
}
@keyframes nxLiveGlow { 0%,100% { box-shadow: 0 0 8px rgba(255,60,80,0.3); } 50% { box-shadow: 0 0 20px rgba(255,60,80,0.6); } }
@keyframes nx-live-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,60,80,0.7); } 55% { box-shadow: 0 0 0 7px rgba(255,60,80,0); } }
.nx-menu-actions { display: flex; gap: 10px; padding: 10px 0 16px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.nx-menu-actions a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 10px; background: rgba(69,248,130,0.08); border: 1px solid rgba(69,248,130,0.25); color: #45F882 !important; font-size: 13px; font-weight: 700; }
.nx-menu-actions .nx-cart-badge { background: #45F882; color: #06120b; border-radius: 10px; padding: 0 6px; font-size: 11px; font-weight: 800; }

/* ---- Arabic RTL ---- */
html.nx-rtl { direction: rtl; }
html.nx-rtl body { text-align: right; }
html.nx-rtl .nx-hactions { margin-left: 0; margin-right: 6px; }
html.nx-rtl .me-1, html.nx-rtl .me-2 { margin-right: 0 !important; margin-left: 0.25rem !important; }
html.nx-rtl .ms-1, html.nx-rtl .ms-2 { margin-left: 0 !important; margin-right: 0.25rem !important; }
html.nx-rtl .acc-points-num, html.nx-rtl .prod-price, html.nx-rtl .prod-total,
html.nx-rtl .nxf-logo span, html.nx-rtl .ord-paynum, html.nx-rtl .nx-flash-timer,
html.nx-rtl code { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* ---- Round 12: About section — reliable dark background (data-bg-src image can be flaky) ---- */
.about-sec-3 {
  background-color: #080a0f !important;
  background-image:
    radial-gradient(600px circle at 15% 20%, rgba(69, 248, 130, 0.08), transparent 60%),
    radial-gradient(560px circle at 85% 80%, rgba(98, 64, 207, 0.10), transparent 62%),
    linear-gradient(160deg, #0b1018 0%, #080a0f 55%, #0a0f16 100%) !important;
  background-size: cover !important;
  background-position: center !important;
}
.about-sec-3 .gr-bg1.overlay { background: transparent !important; }
/* the huge broken-image dimension text some themes leave behind */
.about-sec-3 [data-bg-src] { font-size: 0; }
.about-sec-3 .img-box3 img { max-width: 100%; height: auto; }

/* ---- Round 12: compact header icons when placed in the top bar ---- */
.header-top .nx-hactions-top { margin: 0; }
.header-top .nx-hactions-top .nx-hicon {
  width: 30px; height: 30px; font-size: 13px; border-radius: 8px;
}
.header-top .nx-hactions-top .nx-lang-btn { font-size: 12px; }
.header-top .nx-hactions-top .nx-cart-badge { top: -5px; right: -5px; min-width: 15px; height: 15px; font-size: 9px; }
.header-top .row { flex-wrap: nowrap; }

/* ---- Round 12: scroll performance ---- */
/* Offscreen heavy sections skip render work until near the viewport */
.game-sec-wrap1,
/* These sections have dynamic heights. Keep them in normal layout flow so the
   browser never replaces an estimated height while the visitor is scrolling. */
/* Aurora + sparks: gentler on the compositor */
body::after { will-change: opacity; }
.n2-sparks { contain: strict; }

/* ---- R14: topbar — language toggle standalone, cart+account grouped, clean spacing ---- */
.header-top .nx-hactions-top { gap: 10px; }
.header-top .nx-hactions-top .nx-lang-btn { font-size: 12px; margin-right: 8px; position: relative; }
.header-top .nx-hactions-top .nx-lang-btn::after {
  content: ""; position: absolute; right: -9px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 16px; background: rgba(255,255,255,0.18);
}
html.nx-rtl .header-top .nx-hactions-top .nx-lang-btn { margin-right: 0; margin-left: 8px; }
html.nx-rtl .header-top .nx-hactions-top .nx-lang-btn::after { right: auto; left: -9px; }

/* ---- R14: footer polish (applies site-wide) ---- */
.footer-wrapper .widget_title { position: relative; padding-bottom: 10px; }
.footer-wrapper .widget_title::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px;
  background: linear-gradient(90deg, #45F882, transparent); border-radius: 2px;
}
html.nx-rtl .footer-wrapper .widget_title::after { left: auto; right: 0; }
.footer-wrapper .footer-widget ul li a { transition: color .15s ease, padding .15s ease; }
.footer-wrapper .footer-widget ul li a:hover { color: #45F882 !important; padding-left: 4px; }
html.nx-rtl .footer-wrapper .footer-widget ul li a:hover { padding-left: 0; padding-right: 4px; }

/* ---- R14: mobile scroll smoothness + speed ---- */
/* Fixed, animated full-screen ambient layers force repaints on every scroll frame on phones.
   Drop them on small screens — the base gradient stays, scrolling stays buttery. */
@media (max-width: 768px) {
  body::before { display: none !important; }   /* grid overlay */
  body::after { animation: none !important; }   /* aurora drift */
  html::after { display: none !important; }     /* vignette */
  .n2-sparks, .about-experience-tag { animation: none !important; }
}
/* Honour reduced-motion everywhere: kill the aurora drift entirely */
@media (prefers-reduced-motion: reduce) {
  html::after { background: none; }
}

/* ---- Floating WhatsApp button (site-wide conversion CTA) ---- */
.nx-wa-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 9998;
  display: inline-flex; align-items: center; gap: 0;
  height: 56px; padding: 0 17px; border-radius: 32px;
  background: #25D366; color: #fff; text-decoration: none;
  box-shadow: 0 8px 26px rgba(37,211,102,0.45); font-weight: 700; font-size: 14px;
  overflow: hidden; max-width: 56px; transition: max-width .3s ease, box-shadow .2s ease;
}
.nx-wa-fab i { font-size: 26px; min-width: 22px; }
.nx-wa-fab .nx-wa-txt { white-space: nowrap; opacity: 0; margin-left: 0; transition: opacity .25s ease, margin-left .25s ease; }
.nx-wa-fab:hover { color: #fff; max-width: 200px; box-shadow: 0 10px 30px rgba(37,211,102,0.6); }
.nx-wa-fab:hover .nx-wa-txt { opacity: 1; margin-left: 10px; }
html.nx-rtl .nx-wa-fab { right: auto; left: 20px; }
html.nx-rtl .nx-wa-fab .nx-wa-txt { margin-left: 0; }
html.nx-rtl .nx-wa-fab:hover .nx-wa-txt { margin-left: 0; margin-right: 10px; }
@media (max-width: 768px) { .nx-wa-fab { height: 52px; max-width: 52px; padding: 0 15px; right: 14px; bottom: 14px; } }

/* ============================================================
   R3 — Store section background + product card upgrade
   ============================================================ */
/* Calm, premium "Level up your loadout" store panel — a clean dark card with a soft
   green top-glow. The busy template texture is dropped entirely for a quieter, organised look. */
.game-sec-wrap1 {
  position: relative;
  border-radius: 26px;
  background-image: none !important;                 /* kill the noisy game-sec1-bg texture */
  background-color: #0b0f16 !important;
  border: 1px solid rgba(69, 248, 130, 0.14);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  padding-left: clamp(16px, 4vw, 56px);
  padding-right: clamp(16px, 4vw, 56px);
}
.game-sec-wrap1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 46% at 50% -4%, rgba(69, 248, 130, 0.13), transparent 68%),
    radial-gradient(90% 60% at 50% 120%, rgba(69, 248, 130, 0.05), transparent 70%),
    linear-gradient(180deg, #0c111a 0%, #090d14 100%);
}
.game-sec-wrap1 > * { position: relative; z-index: 1; }
/* Tidy vertical rhythm inside the panel */
.game-sec-wrap1 .nx-releases-title { margin-bottom: 34px; }
.game-sec-wrap1 .slider-area { margin-bottom: 8px; }
.game-sec-wrap1 .nx-releases-sub { max-width: 640px; margin-left: auto; margin-right: auto; }

/* Product card: cleaner box, softer border, lift on hover */
.game-card {
  background: linear-gradient(180deg, rgba(20, 26, 35, 0.92), rgba(12, 16, 23, 0.96)) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 18px !important;
  overflow: hidden;
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
  height: 100%;
}
.game-card:hover {
  transform: translateY(-6px);
  border-color: rgba(69, 248, 130, 0.45) !important;
  box-shadow: 0 18px 40px -18px rgba(69, 248, 130, 0.35), 0 8px 20px rgba(0, 0, 0, 0.5);
}
.game-card .game-card-img {
  position: relative;
  background: radial-gradient(120% 90% at 50% 0%, rgba(69, 248, 130, 0.06), transparent 60%);
  padding: 14px 14px 0;
}
.game-card .game-card-img img {
  border-radius: 12px;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
.game-card .game-card-badge {
  position: absolute;
  top: 22px; left: 22px;
  z-index: 2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 5px 11px;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  text-transform: uppercase;
}
.game-card .game-card-tag {
  position: absolute;
  bottom: 10px; left: 22px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(69, 248, 130, 0.14);
  border: 1px solid rgba(69, 248, 130, 0.3);
  color: var(--theme-color);
  text-transform: uppercase;
}
.game-card .game-card-details { padding: 16px 18px 20px !important; }

/* R6 — rotating reviews dots */
.nx-reviews-dots { display:flex; justify-content:center; gap:8px; margin-top:18px; }
.nx-rev-dot { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.18); cursor:pointer; transition:all .25s ease; }
.nx-rev-dot:hover { background:rgba(69,248,130,0.5); }
.nx-rev-dot.on { background:#45F882; box-shadow:0 0 8px rgba(69,248,130,0.6); transform:scale(1.15); }

/* ============ Premium unified footer (shared Nexus theme) ============ */
footer[data-nx-footer] {
  position: relative; background: linear-gradient(180deg, #0b1512 0%, #070d0b 100%);
  border-top: 1px solid rgba(69,248,130,0.18); margin-top: 60px; overflow: hidden;
}
footer[data-nx-footer]::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #45F882 50%, transparent); opacity: .6;
}
.nx-foot-top { max-width: 1240px; margin: 0 auto; padding: 56px 24px 34px; }
.nx-foot-grid { display: flex; flex-wrap: wrap; gap: 40px 48px; }
.nx-foot-col { flex: 1 1 180px; min-width: 160px; }
.nx-foot-col:first-child { flex: 1.6 1 260px; }
.nx-foot-col h4 { color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; margin: 0 0 16px; }
.nx-foot-col h4 span { color: #45F882; }
.nx-foot-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 12px; }
.nx-foot-mark { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #45F882, #12b866); color: #04120b; font-weight: 900; display: grid; place-items: center; font-size: 18px; }
.nx-foot-brand b { color: #fff; font-size: 18px; letter-spacing: .5px; }
.nx-foot-about { color: rgba(255,255,255,0.55); font-size: 13.5px; line-height: 1.75; margin: 4px 0 16px; max-width: 340px; }
.nx-foot-social { display: flex; gap: 10px; }
.nx-foot-social a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); transition: all .2s ease; text-decoration: none; }
.nx-foot-social a:hover { color: #04120b; background: #45F882; border-color: #45F882; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(69,248,130,0.25); }
.nx-foot-link { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,0.58); font-size: 14px; text-decoration: none; padding: 6px 0; transition: color .2s ease, transform .2s ease; }
.nx-foot-link i { color: #45F882; font-size: 12px; width: 15px; text-align: center; opacity: .85; }
.nx-foot-link:hover { color: #45F882; transform: translateX(4px); }
.nx-foot-contact { display: flex; flex-direction: column; gap: 9px; }
.nx-foot-contact p, .nx-foot-contact a { color: rgba(255,255,255,0.6); font-size: 13.5px; margin: 0; text-decoration: none; display: flex; align-items: center; gap: 9px; transition: color .2s ease; }
.nx-foot-contact a:hover { color: #45F882; }
.nx-foot-contact i { color: #45F882; width: 16px; text-align: center; }
.nx-foot-trust { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(69,248,130,0.9); background: rgba(69,248,130,0.08); border: 1px solid rgba(69,248,130,0.22); border-radius: 50px; padding: 8px 14px; }
.nx-foot-bottom { max-width: 1240px; margin: 0 auto; padding: 20px 24px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.nx-foot-bottom > span { color: rgba(255,255,255,0.42); font-size: 13px; }
.nx-foot-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.nx-foot-legal a { color: rgba(255,255,255,0.5); font-size: 13px; text-decoration: none; transition: color .2s ease; }
.nx-foot-legal a:hover { color: #45F882; }
@media (max-width: 600px) {
  .nx-foot-top { padding: 40px 18px 24px; } .nx-foot-grid { gap: 30px; }
  .nx-foot-bottom { flex-direction: column; align-items: flex-start; }
}
html.nx-rtl .nx-foot-link:hover { transform: translateX(-4px); }

/* ============ RTL form-icon fix (Arabic mode) ============ */
/* The theme pins form-field icons at right:25px sitewide; flip them in RTL so the icon
   doesn't overlap the right-aligned Arabic text. */
html.nx-rtl .form-group > i,
html.nx-rtl .form-group > .fal,
html.nx-rtl .form-group > .far,
html.nx-rtl .single-form > i,
html.nx-rtl .input-icon > i { right: auto !important; left: 25px !important; }
html.nx-rtl .form-group input,
html.nx-rtl .form-group textarea { padding-right: 20px; padding-left: 45px; }

/* ============ Header account button — never let the label spill out of its box ============ */
/* The theme's account button has a skewed/clip-path shape; the "Account" / "Log in" label was
   overflowing its angled edges once logged in. Neutralize the skew and make it a clean pill so
   the label always sits inside, and it aligns cleanly next to the Live button. */
.header-account-btn:not(.nx-hicon) {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  width: auto !important; max-width: none !important; min-width: 0 !important;
  white-space: nowrap !important; overflow: visible !important; line-height: 1 !important;
  padding: 10px 18px !important; border-radius: 50px !important; height: auto !important;
  clip-path: none !important; -webkit-clip-path: none !important; transform: none !important;
  background: rgba(69,248,130,0.12) !important; border: 1px solid rgba(69,248,130,0.4) !important;
  color: #45F882 !important; font-weight: 700 !important; font-size: 13px !important;
}
.header-account-btn:not(.nx-hicon)::before,
.header-account-btn:not(.nx-hicon)::after { content: none !important; display: none !important; }
.header-account-btn:not(.nx-hicon) i { margin: 0 !important; font-size: 14px !important; }

/* ===== Global "someone just bought" social-proof popup (site-wide, opt-in per product) ===== */
#nx-sale-pop { position: fixed; left: 18px; bottom: 18px; z-index: 9990; display: flex; align-items: center; gap: 11px;
  background: #12151c; border: 1px solid rgba(69,248,130,0.35); border-radius: 14px; padding: 10px 14px 10px 11px; max-width: 310px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.5); transform: translateY(24px); opacity: 0; transition: .4s cubic-bezier(.2,.9,.3,1);
  cursor: pointer; text-decoration: none; }
#nx-sale-pop.on { transform: none; opacity: 1; }
#nx-sale-pop .nx-sp-ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; background: rgba(69,248,130,0.14) center/cover no-repeat;
  color: #45F882; display: flex; align-items: center; justify-content: center; font-size: 16px; overflow: hidden; }
#nx-sale-pop .nx-sp-ico img { width: 100%; height: 100%; object-fit: cover; }
#nx-sale-pop .nx-sp-tx { font-size: 12.5px; color: rgba(255,255,255,0.82); line-height: 1.4; }
#nx-sale-pop .nx-sp-tx b { color: #fff; }
#nx-sale-pop .nx-sp-tx small { display: block; color: rgba(255,255,255,0.42); font-size: 10.5px; margin-top: 2px; }
#nx-sale-pop .nx-sp-x { position: absolute; top: 6px; right: 8px; color: rgba(255,255,255,0.35); font-size: 13px; line-height: 1; background: none; border: 0; cursor: pointer; padding: 2px; }
#nx-sale-pop .nx-sp-x:hover { color: #fff; }
html[dir="rtl"] #nx-sale-pop { left: auto; right: 18px; }
@media (max-width: 520px) { #nx-sale-pop { left: 10px; right: 10px; max-width: none; } }

/* Footer brand logo (small "About" widget) — was missing/showing a broken glyph */
.nx-foot-logo { display: inline-block; margin-bottom: 14px; }
.nx-foot-logo img { height: 46px; width: auto; max-width: 180px; display: block; }

/* Product page: per-server price picker */
.prod-srv-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 9px 15px; cursor: pointer; transition: .15s; color: #fff; }
.prod-srv-opt:hover { border-color: rgba(69,248,130,0.45); }
.prod-srv-opt.on { border-color: #45F882; background: rgba(69,248,130,0.12); box-shadow: 0 0 0 1px #45F882 inset; }
.prod-srv-opt .srv-n { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font-weight: 700; font-size: 13.5px; text-align: start; }
/* V111 — the region and the delivery route are two stacked lines. They used to be a text
   node followed by an inline <small> with no rule of its own, which painted them as one
   run-together string ("EuropeManual account top-up"). */
.prod-srv-opt .srv-region { display: block; }
.prod-srv-opt .srv-method { display: block; font-weight: 500; font-size: 11.5px; line-height: 1.35; color: rgba(255,255,255,0.62); }
.prod-srv-opt.on .srv-method { color: rgba(255,255,255,0.78); }
.prod-srv-opt .srv-p { font-size: 12px; color: #45F882; font-weight: 700; }

/* ===== Fix the "stray green dot" (theme custom cursor) ===== */
/* Only a real mouse can drive it. On touch/coarse-pointer devices it sits in the corner as a
   green blob — hide it there. On desktop, keep it hidden until the first mouse move (no corner dot). */
.cursor-animation { opacity: 0; }
.cursor-animation.nx-cursor-live { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor-animation, .cursor-image { display: none !important; } }

/* ===== Clean the header "Account" button (was a harsh green outline box) ===== */
.header-account-btn.style-border, a.header-account-btn:not(.nx-hicon) {
  display: inline-flex !important; align-items: center !important; gap: 7px !important;
  background: rgba(69,248,130,0.14) !important; border: 1px solid rgba(69,248,130,0.35) !important;
  color: #45F882 !important; font-weight: 700 !important; border-radius: 999px !important;
  padding: 9px 18px !important; line-height: 1 !important; box-shadow: none !important;
  clip-path: none !important; -webkit-clip-path: none !important; transform: none !important; white-space: nowrap !important;
}
.header-account-btn.style-border:hover, a.header-account-btn:not(.nx-hicon):hover {
  background: rgba(69,248,130,0.22) !important; color: #fff !important;
}
.header-account-btn.style-border::before, .header-account-btn.style-border::after { content: none !important; display: none !important; }


/* V24 — resilient brand mark in mobile menu and side drawer. Never depend on the old wide footerlogo canvas. */
.th-menu-wrapper .mobile-logo a,
.sidemenu-wrapper .th-widget-about .about-logo a{
  display:inline-flex!important;align-items:center!important;gap:10px!important;text-decoration:none!important;
}
.th-menu-wrapper .mobile-logo a .logo-mask,
.sidemenu-wrapper .th-widget-about .about-logo a .logo-mask{display:none!important}
.th-menu-wrapper .mobile-logo img,
.sidemenu-wrapper .th-widget-about .about-logo img{
  display:block!important;width:48px!important;height:48px!important;object-fit:contain!important;margin:0!important;
  filter:drop-shadow(0 0 10px rgba(69,248,130,.28));
}
.th-menu-wrapper .mobile-logo a::after,
.sidemenu-wrapper .th-widget-about .about-logo a::after{
  content:"The Nexus";color:#fff;font:800 21px/1 Rajdhani,Poppins,sans-serif;letter-spacing:.025em;white-space:nowrap;
}

/* assets/css/nexus-public.css */
/* Public frontend bridge: readable additions that replace behavior previously injected by nexus-v2.js. */
.nx-mobile-action {
    appearance: none;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid rgba(69,248,130,.24);
    background: rgba(69,248,130,.07);
    color: #45F882 !important;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}
.nx-mobile-action .nx-cart-badge { background:#45F882;color:#06120b;border-radius:12px;padding:1px 6px;font-size:10px; }

.nx-empty-state {
    width: 100%;
    padding: 32px 20px;
    border: 1px dashed rgba(255,255,255,.14);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
    color: rgba(255,255,255,.62);
    text-align: center;
}
.nx-card-rating { margin: 8px 0 4px; color: #FFBE18; font-size: 12px; }
.nx-card-rating span { color: rgba(255,255,255,.45); }

.nx-review-card footer { display:flex;flex-direction:column;gap:3px;margin-top:auto; }
.nx-review-card footer strong { color:#fff;font-size:13px; }
.nx-review-card footer span { color:rgba(255,255,255,.48);font-size:11px; }
.nx-review-stars { color:#FFBE18;letter-spacing:2px;font-size:13px; }

.nx-tournament-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 16px;
    background: linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
    transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.nx-tournament-card:hover { transform:translateY(-4px);border-color:rgba(69,248,130,.35);box-shadow:0 18px 38px rgba(0,0,0,.25); }
.nx-tournament-cover { position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0b0f13; }
.nx-tournament-cover-fallback { width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,rgba(69,248,130,.14),transparent 55%),#0b0f13; }
.nx-tournament-cover-fallback > i { font-size:64px;color:rgba(69,248,130,.68);filter:drop-shadow(0 0 24px rgba(69,248,130,.15)); }
.nx-tournament-cover img { width:100%;height:100%;object-fit:cover;transition:transform .3s ease; }
.nx-tournament-card:hover .nx-tournament-cover img { transform:scale(1.025); }
.nx-tournament-status { position:absolute;top:12px;left:12px;padding:5px 10px;border-radius:999px;background:#10161d;color:#fff;border:1px solid rgba(255,255,255,.16);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em; }
.nx-tournament-status.status-live { background:rgba(255,66,86,.9); }
.nx-tournament-status.status-registration_open,.nx-tournament-status.status-open { background:rgba(69,248,130,.92);color:#06120b; }
.nx-tournament-body { padding:20px; }
.nx-tournament-body h3 { margin:0 0 9px;font-size:22px; }
.nx-tournament-body h3 a { color:#fff; }
.nx-tournament-body p { color:rgba(255,255,255,.58);font-size:13px;line-height:1.65;min-height:42px; }
.nx-tournament-meta { display:flex;flex-wrap:wrap;gap:9px 14px;margin-bottom:12px;color:rgba(255,255,255,.55);font-size:12px; }
.nx-tournament-meta i { color:#45F882;margin-right:4px; }

.nx-recent-sale {
    position: fixed;
    z-index: 9950;
    left: 18px;
    bottom: 20px;
    width: min(360px, calc(100vw - 36px));
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity .22s ease,transform .22s ease;
}
.nx-recent-sale.show { opacity:1;transform:none;pointer-events:auto; }
.nx-recent-sale-link { display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;border:1px solid rgba(69,248,130,.28);background:rgba(8,12,16,.96);box-shadow:0 15px 40px rgba(0,0,0,.35);text-decoration:none; }
.nx-recent-sale-image { width:44px;height:44px;flex:0 0 44px;border-radius:10px;overflow:hidden;background:rgba(69,248,130,.08);display:grid;place-items:center;color:#45F882; }
.nx-recent-sale-image img { width:100%;height:100%;object-fit:cover; }
.nx-recent-sale-copy { min-width:0;display:flex;flex-direction:column;gap:2px; }
.nx-recent-sale-copy strong { color:#fff;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.nx-recent-sale-copy small { color:rgba(255,255,255,.5);font-size:10px; }

@media (max-width: 767px) {
    .nx-recent-sale { left:12px;bottom:12px;width:calc(100vw - 24px); }
    .header-top .header-social-links { display:none; }
    .header-top .nx-hactions-top { margin-inline:auto; }
}

/* assets/css/nexus-experience.css */
/* ============================================================
   The Nexus — Phase 7 public experience layer
   Final, readable overrides for accessibility, responsive UX,
   and production polish. Keep page-specific styling in
   assets/css/pages/*.css.
   ============================================================ */

:root {
    --nx-content: 1280px;
    --nx-gutter: clamp(16px, 3vw, 32px);
    --nx-surface: #0d1218;
    --nx-surface-2: #111821;
    --nx-border: rgba(255,255,255,.09);
    --nx-border-strong: rgba(69,248,130,.30);
    --nx-muted: rgba(232,241,244,.62);
    --nx-focus: #45F882;
    --nx-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html { scroll-padding-top: 96px; }
body { overflow-x: hidden; text-rendering: optimizeLegibility; }
img, svg, video { max-width: 100%; }
img { height: auto; }
button, a, input, select, textarea { touch-action: manipulation; }

.nx-main { min-height: 45vh; }

.nx-skip-link {
    position: fixed;
    z-index: 100000;
    top: 10px;
    left: -9999px;
    padding: 10px 15px;
    border-radius: 9px;
    background: #45F882;
    color: #07110b !important;
    font-weight: 800;
    box-shadow: 0 8px 28px rgba(0,0,0,.4);
}
.nx-skip-link:focus { left: 12px; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(69,248,130,.92) !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(69,248,130,.12);
}

/* Header ---------------------------------------------------- */
.th-header { width: 100%; }
.sticky-wrapper { background: rgba(7,11,18,.92); backdrop-filter: blur(18px); }
.menu-area > .container { max-width: var(--nx-content); }
.header-logo a { display: inline-flex; align-items: center; min-height: 62px; }
.header-logo img { width: 96px !important; max-height: 62px; object-fit: contain; }
.main-menu > ul { display: flex; align-items: center; gap: 28px; }
.main-menu > ul > li { margin: 0 !important; }
.main-menu > ul > li > a { padding: 25px 0; }
.main-menu .sub-menu {
    border: 1px solid var(--nx-border);
    background: rgba(10,15,21,.98);
    box-shadow: 0 24px 65px rgba(0,0,0,.42);
    border-radius: 14px;
    overflow: hidden;
}
.main-menu .sub-menu a { min-height: 42px; display: flex; align-items: center; }
.main-menu li:focus-within > .sub-menu { visibility: visible; opacity: 1; transform: scaleY(1); }

.nx-menu-actions { gap: 8px; padding: 10px 12px 14px; }
.nx-mobile-action { min-height: 46px; }

/* Global layout --------------------------------------------- */
.container { padding-left: var(--nx-gutter); padding-right: var(--nx-gutter); }
.space { padding-top: clamp(64px, 7vw, 104px); padding-bottom: clamp(64px, 7vw, 104px); }
.space-top { padding-top: clamp(64px, 7vw, 104px); }
.space-bottom, .space-extra2-bottom { padding-bottom: clamp(64px, 7vw, 104px); }
.sec-title { text-wrap: balance; }
.sec-text, .text-white-50, p { text-wrap: pretty; }

.breadcumb-wrapper {
    min-height: 190px;
    display: flex;
    align-items: center;
    background-position: center;
    background-size: cover;
    position: relative;
}
.breadcumb-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7,11,18,.93), rgba(7,11,18,.55));
    pointer-events: none;
}
.breadcumb-wrapper .container { position: relative; z-index: 1; }
.breadcumb-title { font-size: clamp(34px, 5vw, 54px); margin-bottom: 6px; }
.breadcumb-menu { margin-bottom: 0; }

/* Hero ------------------------------------------------------ */
.hero-cinema {
    min-height: min(760px, 84svh);
    display: grid;
    align-items: center;
    isolation: isolate;
    padding: clamp(72px, 9vw, 128px) 0;
}
.hero-cinema-content {
    width: min(var(--nx-content), calc(100% - (var(--nx-gutter) * 2)));
    margin-inline: auto;
}
.hero-cinema-copy { max-width: 850px; }
.hero-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 8px 14px;
    border: 1px solid rgba(69,248,130,.24);
    border-radius: 999px;
    background: rgba(69,248,130,.07);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
}
.hero-cinema-title {
    max-width: 900px;
    font-size: clamp(48px, 7vw, 84px) !important;
    line-height: .98 !important;
    letter-spacing: -.025em !important;
    text-wrap: balance;
}
.hero-cinema-lead {
    max-width: 720px;
    font-size: clamp(16px, 1.7vw, 19px);
    line-height: 1.75;
    color: rgba(238,245,247,.72);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; }
.hero-btn { min-height: 50px; padding: 13px 20px; }
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}
.hero-stat {
    min-width: 138px;
    padding: 12px 15px;
    border: 1px solid var(--nx-border);
    border-radius: 13px;
    background: rgba(8,13,19,.55);
}
.hero-stat-value { font-variant-numeric: tabular-nums; }

/* Cards / forms --------------------------------------------- */
:where(.th-product, .game-card, .feature-card, .blog-card, .nx-tournament-card, .ord-card, .prod-info, .acc-card) {
    border-color: var(--nx-border);
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control) {
    min-height: 46px;
}
textarea { min-height: 120px; }
select { cursor: pointer; }
button:disabled, .disabled { cursor: not-allowed !important; opacity: .58; }

.table-responsive, .nx-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { max-width: 100%; }

/* Keep normal document flow stable.
   Do not use content-visibility with guessed intrinsic heights on public sections:
   dynamic store/review/tournament content can be taller or shorter than the guess,
   which changes the document height as a section enters the viewport and makes
   wheel/touch scrolling feel like it suddenly jumps. */

/* Footer ---------------------------------------------------- */
.footer-wrapper { border-top: 1px solid rgba(255,255,255,.06); }
.footer-widget a { text-underline-offset: 3px; }
.newsletter-form .form-group { gap: 8px; }
.newsletter-form .form-control { min-height: 52px; }
.copyright-text { font-size: 13px; }

/* Utility states -------------------------------------------- */
.nx-loading-spinner {
    width: 44px;
    height: 44px;
    margin-inline: auto;
    border: 3px solid rgba(69,248,130,.18);
    border-top-color: #45F882;
    border-radius: 50%;
    animation: nx-spin .85s linear infinite;
}
@keyframes nx-spin { to { transform: rotate(360deg); } }

/* Mobile ---------------------------------------------------- */
@media (max-width: 991px) {
    html { scroll-padding-top: 74px; }
    .cursor-animation { display: none !important; }
    .header-top { display: none; }
    .menu-area { min-height: 70px; }
    .header-logo a { min-height: 54px; }
    .header-logo img { width: 86px !important; max-height: 54px; }
    .th-menu-wrapper { width: min(390px, 92vw); }
    .th-menu-wrapper.th-body-visible { box-shadow: 24px 0 80px rgba(0,0,0,.55); }
    .th-mobile-menu { max-height: calc(100dvh - 154px); overflow-y: auto; overscroll-behavior: contain; }
    .th-mobile-menu > ul > li > a { min-height: 48px; display: flex; align-items: center; }
    .th-mobile-menu .sub-menu a { min-height: 44px; display: flex; align-items: center; }
    .th-menu-toggle { min-width: 46px; min-height: 46px; }

    .breadcumb-wrapper { min-height: 148px; }
    .breadcumb-title { font-size: 36px; }
    .space { padding-top: 58px; padding-bottom: 58px; }
    .space-top { padding-top: 58px; }
    .space-bottom, .space-extra2-bottom { padding-bottom: 58px; }

    .hero-cinema { min-height: auto; padding: 72px 0 64px; }
    .hero-cinema-title { font-size: clamp(44px, 12vw, 64px) !important; }
    .hero-cinema-lead { max-width: 600px; }
    .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; }
    .hero-btn { width: 100%; justify-content: center; text-align: center; }
    .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
    .hero-stat { min-width: 0; }
}

@media (max-width: 575px) {
    :root { --nx-gutter: 15px; }
    body { font-size: 15px; }
    .sec-title { font-size: clamp(29px, 9vw, 38px) !important; }
    .breadcumb-wrapper { min-height: 128px; }
    .breadcumb-title { font-size: 31px; }
    .breadcumb-menu { font-size: 12px; }

    .hero-cinema { padding: 56px 0 48px; }
    .hero-badge { font-size: 11px; }
    .hero-cinema-title { font-size: clamp(40px, 13.5vw, 56px) !important; }
    .hero-cinema-lead { font-size: 15px; line-height: 1.7; }
    .hero-actions { grid-template-columns: 1fr; }
    .hero-btn { min-height: 48px; }
    .hero-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
    .hero-stat { padding: 10px 12px; }

    .newsletter-form .form-group { display: grid !important; grid-template-columns: 1fr; }
    .newsletter-form .th-btn { width: 100%; }
    .footer-top .footer-links ul { gap: 8px 14px; justify-content: center; }

    .prod-buybox { position: static !important; }
    .prod-why-grid { grid-template-columns: 1fr !important; }
    .ord-head, .acc-foot { align-items: flex-start; }
}

/* RTL ------------------------------------------------------- */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .main-menu > ul,
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .hero-stats { direction: rtl; }
html[dir="rtl"] .nx-skip-link { left: auto; right: -9999px; }
html[dir="rtl"] .nx-skip-link:focus { right: 12px; }

/* Arabic typography.
   Poppins / Rajdhani / Goldman are Latin-only, so before this every Arabic glyph on the
   site — body copy and display headings alike — fell through to a system font. Cairo is
   loaded in layout/header.php and put in front of the Latin faces for RTL only, so the
   English side keeps its type unchanged. The Latin families stay in the stack because
   brand and game names (The Nexus, Wild Rift, VALORANT, RP, VP) are still set in Latin
   inside Arabic sentences and should keep rendering in the original face. */
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea { font-family: "Cairo", Poppins, "Segoe UI", Tahoma, Arial, sans-serif; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6,
html[dir="rtl"] .box-title, html[dir="rtl"] .sec-title,
html[dir="rtl"] .th-btn, html[dir="rtl"] .nx-foot-heading {
    font-family: "Cairo", Rajdhani, Poppins, "Segoe UI", Tahoma, Arial, sans-serif;
}
/* Arabic needs more vertical room than the Latin faces this theme was tuned for:
   at the theme's tight line-heights, dots and hamza sit on the line above. */
html[dir="rtl"] body { line-height: 1.85; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .box-title, html[dir="rtl"] .sec-title { line-height: 1.5; }

/* Directional icons.
   The theme uses Font Awesome arrows as "forward" affordances. Only .th-btn / .link-btn
   were being mirrored, so the same arrow pointed right (backwards, in RTL) everywhere
   else — footer link lists, newsletter submit, feature links, card CTAs. Mirror by
   meaning: every arrow/chevron/angle/caret that is not explicitly opted out. */
html[dir="rtl"] .fa-arrow-right, html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-long-arrow-right, html[dir="rtl"] .fa-long-arrow-left,
html[dir="rtl"] .fa-arrow-right-long, html[dir="rtl"] .fa-arrow-left-long,
html[dir="rtl"] .fa-chevron-right, html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-angle-right, html[dir="rtl"] .fa-angle-left,
html[dir="rtl"] .fa-angle-double-right, html[dir="rtl"] .fa-angle-double-left,
html[dir="rtl"] .fa-caret-right, html[dir="rtl"] .fa-caret-left,
html[dir="rtl"] .th-btn i, html[dir="rtl"] .link-btn i,
html[dir="rtl"] .nx-feature-link i { transform: scaleX(-1); }
/* Opt-out for glyphs whose direction is not "forward" (external-link, play, share...) and
   for anything already mirrored by a page-level rule. */
html[dir="rtl"] [data-no-mirror], html[dir="rtl"] [data-no-mirror] i,
html[dir="rtl"] .fa-external-link i, html[dir="rtl"] .fa-play,
html[dir="rtl"] .fab { transform: none; }

/* Desktop dropdowns.
   style.css pins .main-menu ul.sub-menu with `left:-14px; text-align:left`. In RTL that
   anchored every dropdown to the wrong edge — it opened rightwards out of its parent item
   (measured: parent li 713→787px, menu 688→914px) — and hard-left-aligned the Arabic
   labels inside it. Logical properties fix both without touching the vendor theme. */
html[dir="rtl"] .main-menu ul.sub-menu { text-align: right; left: auto; right: -14px; }
html[dir="rtl"] .main-menu ul.sub-menu li a { text-align: right; }
/* The bullet the theme reveals on hover is absolutely positioned at `left:10px`; in RTL it
   belongs on the inline-start edge, which is the right. */
html[dir="rtl"] .main-menu ul.sub-menu li a::before { left: auto; right: 10px; }
html[dir="rtl"] .main-menu ul.sub-menu li a:hover { padding-left: 0; padding-right: 18px; }

/* Numbers, prices and Latin identifiers inside Arabic sentences.
   An isolate keeps "1000 RP" or "EGP 1,320" from being reordered by the bidi algorithm
   when it sits next to Arabic text or trailing punctuation. */
html[dir="rtl"] .nx-num, html[dir="rtl"] [data-nx-egp],
html[dir="rtl"] .price, html[dir="rtl"] .gc-price,
html[dir="rtl"] .nx-cart-item-price, html[dir="rtl"] .nx-cart-total span {
    unicode-bidi: isolate;
}

/* Motion preferences --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
    }
    .wow, [class*="custom-anim-"] { opacity: 1 !important; transform: none !important; }
}

@media print {
    .th-header, .th-menu-wrapper, .sidemenu-wrapper, .scroll-top, .newsletter-form, .nx-recent-sale { display: none !important; }
    body { background: #fff !important; color: #111 !important; }
    .nx-main { min-height: 0; }
}


/* Nexus non-blocking confirmation dialog ------------------- */
.nx-confirm-modal { position: fixed; inset: 0; z-index: 100050; display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .16s ease; }
.nx-confirm-modal.show { opacity: 1; pointer-events: auto; }
.nx-confirm-backdrop { position: absolute; inset: 0; background: rgba(4,5,12,.78); backdrop-filter: blur(7px); }
.nx-confirm-card { position: relative; width: min(460px, 100%); display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 24px; border: 1px solid rgba(69,248,130,.2); border-radius: 18px; background: #10111d; box-shadow: 0 24px 70px rgba(0,0,0,.45); transform: translateY(10px) scale(.985); transition: transform .16s ease; }
.nx-confirm-modal.show .nx-confirm-card { transform: none; }
.nx-confirm-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(69,248,130,.1); color: #45f882; font-size: 20px; }
.nx-confirm-card h3 { margin: 0 0 7px; color: #fff; font-size: 20px; }
.nx-confirm-card p { margin: 0; color: rgba(255,255,255,.66); line-height: 1.65; }
.nx-confirm-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.nx-confirm-actions .th-btn { min-width: 110px; min-height: 44px; padding: 10px 18px; }
.nx-confirm-modal.danger .nx-confirm-icon { background: rgba(255,91,117,.11); color: #ff6b83; }
.nx-confirm-modal.danger .nx-confirm-ok { background: #ff5d76; border-color: #ff5d76; color: #fff; }
@media (max-width: 575px) { .nx-confirm-card { padding: 20px; grid-template-columns: 1fr; } .nx-confirm-icon { width: 40px; height: 40px; } .nx-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; } }


/* Network state -------------------------------------------- */
.nx-network-state { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 100040; display: flex; align-items: center; gap: 9px; max-width: min(520px, calc(100vw - 30px)); padding: 11px 15px; border: 1px solid rgba(255,181,71,.35); border-radius: 999px; background: rgba(32,24,12,.96); color: #ffd798; font-size: 13px; box-shadow: 0 14px 45px rgba(0,0,0,.32); transform: translate(-50%, 24px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.nx-network-state.show { opacity: 1; transform: translate(-50%,0); }
@media (max-width:575px) { .nx-network-state { border-radius: 14px; width: calc(100vw - 30px); justify-content: center; text-align: center; } }

/* Nexus prompt shares the confirmation shell but keeps text entry readable. */
.nx-prompt-input{width:100%;margin-top:12px;background:#0d1217;border:1px solid rgba(69,248,130,.25);border-radius:10px;color:#fff;padding:11px 12px;outline:none;font:500 14px/1.35 Arial,sans-serif;transition:border-color .16s ease,box-shadow .16s ease}
.nx-prompt-input:focus{border-color:#45F882;box-shadow:0 0 0 3px rgba(69,248,130,.10)}
.nx-prompt-input.invalid{border-color:#ff6b83;box-shadow:0 0 0 3px rgba(255,107,131,.08)}
.nx-prompt-modal .nx-confirm-card>div:nth-child(2){min-width:0}

/* V14 — consistent public page axis. Avoid ultra-wide drift and accidental horizontal page movement. */
:root{--nx-content:1360px}
html,body{max-width:100%;overflow-x:clip}
main#main-content{width:100%;min-width:0;overflow:visible}
.container{margin-left:auto;margin-right:auto}
@supports not (overflow:clip){html,body{overflow-x:hidden}}

/* assets/css/nexus-footer.css */
/* The Nexus V24 — compact footer with a resilient rendered wordmark. */
.nx-site-footer,.nx-classic-footer{position:relative!important;width:100%!important;min-height:0!important;margin:0!important;padding:0!important;background:radial-gradient(circle at 16% -20%,rgba(69,248,130,.08),transparent 33%),#030608!important;border-top:1px solid rgba(69,248,130,.24)!important;color:#fff!important;overflow:hidden!important}.nx-classic-footer:before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,#45f882 50%,transparent);opacity:.62}
.nx-classic-shell{width:min(1180px,calc(100% - 40px))!important;margin:0 auto!important;padding:28px 0 18px!important}.nx-foot-grid{display:grid!important;grid-template-columns:1.35fr .82fr .92fr .9fr 1.05fr!important;gap:30px!important;margin:0 0 22px!important;align-items:start!important}/* The brand cell stacks: wordmark, blurb, then the social row. nexus-theme.css still
   carries a rule from an earlier footer where .nx-foot-brand WAS the logo link
   (inline-flex, centred) — against the current markup that laid the three children
   out side by side, crushing the blurb to ~126px and the social strip to one icon
   wide, so the icons wrapped into a vertical column. Own the axis here. */
.nx-foot-brand{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:0!important;min-width:0!important;padding:0!important;margin:0!important}.nx-classic-logo{margin:0 0 12px!important;text-decoration:none!important}.nx-classic-wordmark{display:inline-flex!important;align-items:center!important;gap:10px!important;max-width:100%!important}.nx-classic-logo-mark{display:grid!important;place-items:center!important;width:44px!important;height:44px!important;flex:0 0 44px!important;border:1px solid rgba(69,248,130,.18)!important;border-radius:11px!important;background:rgba(69,248,130,.055)!important;box-shadow:0 8px 28px rgba(0,0,0,.22)!important}.nx-classic-logo-mark img{display:block!important;width:33px!important;height:33px!important;object-fit:contain!important;margin:0!important;padding:0!important;filter:drop-shadow(0 0 9px rgba(69,248,130,.28))!important}.nx-classic-logo-copy{display:block!important;min-width:0!important}.nx-classic-logo-copy strong{display:block!important;color:#f7fafc!important;font:800 18px/1 Rajdhani,Poppins,sans-serif!important;letter-spacing:.015em!important}.nx-classic-logo-copy small{display:block!important;margin-top:4px!important;color:#45f882!important;font:700 9px/1 Poppins,Inter,sans-serif!important;text-transform:uppercase!important;letter-spacing:.12em!important}.nx-foot-brand p{max-width:245px!important;margin:0!important;color:rgba(235,243,248,.54)!important;font:500 11.5px/1.65 Poppins,Inter,sans-serif!important}.nx-foot-column{min-width:0!important;margin:0!important;padding:0!important}.nx-foot-column h4{display:flex!important;align-items:center!important;gap:8px!important;margin:3px 0 10px!important;color:#f7fafc!important;font:800 13px/1.2 Rajdhani,Poppins,sans-serif!important;text-transform:uppercase!important;letter-spacing:.05em!important}.nx-foot-column h4>i{color:#45f882!important;width:16px!important;text-align:center!important}.nx-foot-column>a{display:flex!important;align-items:center!important;gap:7px!important;width:max-content!important;max-width:100%!important;margin:0 0 6px!important;padding:0!important;color:rgba(235,243,248,.55)!important;font:500 11px/1.5 Poppins,Inter,sans-serif!important;text-decoration:none!important;transition:.18s!important}.nx-foot-column>a>i{color:#45f882!important;font-size:8px!important;transition:transform .18s!important}.nx-foot-column>a:hover{color:#fff!important}.nx-foot-column>a:hover>i{transform:translateX(3px)!important}.nx-foot-contact p{display:flex!important;align-items:flex-start!important;gap:8px!important;margin:0 0 7px!important;color:rgba(235,243,248,.55)!important;font:500 11px/1.5 Poppins,Inter,sans-serif!important}.nx-foot-contact p i,.nx-foot-contact-link>i{color:#45f882!important;width:14px!important;margin-top:2px!important}.nx-foot-contact .nx-foot-contact-link{width:100%!important;overflow-wrap:anywhere!important}
.nx-classic-social{display:flex!important;gap:7px!important;flex-wrap:wrap!important;margin-top:12px!important}.nx-classic-social a{display:grid!important;place-items:center!important;width:33px!important;height:33px!important;margin:0!important;padding:0!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:9px!important;background:#0d1720!important;color:#d8e2e7!important;font-size:12px!important;text-decoration:none!important;transition:.18s!important}.nx-classic-social a:hover{background:#45f882!important;color:#07110b!important;border-color:#45f882!important;transform:translateY(-2px)!important}
.nx-classic-newsletter-panel{display:grid!important;grid-template-columns:minmax(220px,.72fr) minmax(360px,1.28fr)!important;gap:20px!important;align-items:center!important;padding:14px 16px!important;margin:0 0 14px!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:13px!important;background:linear-gradient(120deg,rgba(12,25,34,.82),rgba(7,12,16,.86))!important}.nx-newsletter-copy{display:flex!important;align-items:center!important;gap:11px!important}.nx-newsletter-copy>i{display:grid!important;place-items:center!important;width:37px!important;height:37px!important;flex:0 0 37px!important;border-radius:9px!important;background:rgba(69,248,130,.09)!important;color:#45f882!important;font-size:15px!important}.nx-newsletter-copy strong{display:block!important;color:#fff!important;font:800 13px Rajdhani,Poppins,sans-serif!important;text-transform:uppercase!important;letter-spacing:.04em!important}.nx-newsletter-copy span{display:block!important;margin-top:2px!important;color:rgba(235,243,248,.44)!important;font:500 10px/1.4 Poppins,Inter,sans-serif!important}.nx-classic-newsletter-wrap{min-width:0!important}.nx-classic-newsletter{display:flex!important;margin:0!important;padding:0!important;background:none!important;border:0!important;gap:7px!important}.nx-classic-newsletter input[type=email]{flex:1!important;min-width:0!important;height:42px!important;padding:0 14px!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:9px!important;background:#080d11!important;color:#fff!important;font:500 11.5px Poppins,Inter,sans-serif!important;outline:0!important}.nx-classic-newsletter input:focus{border-color:rgba(69,248,130,.5)!important}.nx-classic-newsletter button{height:42px!important;min-width:126px!important;padding:0 18px!important;border:0!important;background:#45f882!important;color:#07110b!important;font:900 10.5px Rajdhani,Poppins,sans-serif!important;text-transform:uppercase!important;letter-spacing:.05em!important;cursor:pointer!important;clip-path:polygon(9% 0,92% 0,100% 50%,92% 100%,9% 100%,0 50%)!important;transition:.18s!important}.nx-classic-newsletter button i{margin-left:7px!important;transition:transform .18s!important}.nx-classic-newsletter button:hover{background:#2de972!important}.nx-classic-newsletter button:hover i{transform:translateX(3px)!important}.nx-foot-newsletter-msg{min-height:12px!important;margin-top:3px!important;text-align:right!important;color:rgba(235,243,248,.5)!important;font:500 9.5px Poppins,Inter,sans-serif!important}.nx-foot-newsletter-msg.is-success{color:#45f882!important}.nx-foot-newsletter-msg.is-error{color:#ff8fa5!important}.nx-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.nx-foot-bottom{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;padding-top:13px!important;border-top:1px solid rgba(255,255,255,.065)!important}.nx-foot-ownership{min-width:0!important}.nx-classic-copyright{color:rgba(235,243,248,.52)!important;font:500 10.5px Poppins,Inter,sans-serif!important}.nx-classic-copyright strong{color:#45f882!important}.nx-riot-disclaimer{display:block!important;max-width:680px!important;margin-top:3px!important;color:rgba(255,255,255,.31)!important;font-size:8.8px!important;line-height:1.4!important}.nx-foot-legal{display:flex!important;justify-content:flex-end!important;gap:12px!important;flex-wrap:wrap!important}.nx-foot-legal a,.nx-foot-legal button{display:inline-flex!important;align-items:center!important;gap:5px!important;appearance:none!important;border:0!important;background:none!important;padding:0!important;color:rgba(235,243,248,.42)!important;font:500 10px Poppins,Inter,sans-serif!important;text-decoration:none!important;cursor:pointer!important}.nx-foot-legal i{color:#45f882!important;font-size:7px!important}.nx-foot-legal a:hover,.nx-foot-legal button:hover{color:#fff!important}
@media(max-width:1050px){.nx-classic-shell{width:min(940px,calc(100% - 36px))!important}.nx-foot-grid{grid-template-columns:1.2fr repeat(2,1fr)!important;gap:24px!important}.nx-foot-brand{grid-row:span 2!important}.nx-classic-newsletter-panel{grid-template-columns:1fr 1.35fr!important}}@media(max-width:760px){.nx-classic-shell{width:min(100% - 28px,720px)!important;padding:24px 0 16px!important}.nx-foot-grid{grid-template-columns:1fr 1fr!important;gap:20px!important}.nx-foot-brand{grid-column:1/-1!important;grid-row:auto!important}.nx-foot-brand p{max-width:520px!important}.nx-classic-newsletter-panel{grid-template-columns:1fr!important}.nx-foot-bottom{flex-direction:column!important;align-items:flex-start!important}.nx-foot-legal{justify-content:flex-start!important}}@media(max-width:520px){.nx-foot-grid{grid-template-columns:1fr!important;gap:16px!important}.nx-foot-column{padding-top:12px!important;border-top:1px solid rgba(255,255,255,.055)!important}.nx-classic-newsletter-panel{padding:14px!important}.nx-classic-newsletter{flex-direction:column!important}.nx-classic-newsletter button{width:100%!important;clip-path:polygon(6% 0,94% 0,100% 50%,94% 100%,6% 100%,0 50%)!important}.nx-foot-newsletter-msg{text-align:left!important}.nx-foot-bottom{align-items:center!important;text-align:center!important}.nx-foot-legal{justify-content:center!important}}
html.nx-rtl .nx-foot-column>a:hover>i,html.nx-rtl .nx-classic-newsletter button:hover i{transform:translateX(-3px)!important}
/* V32 footer/layout layer is shared by legal and legacy public pages too. */
@import url('/assets/css/v32-production.css?v=32');

/* assets/css/nexus-system.css */
/* The Nexus — V2 design system
 * ---------------------------------------------------------------------------
 * Tokens and opt-in primitives. This sheet loads AFTER the V24 stylesheets and
 * deliberately changes nothing on its own: no element selectors, no resets, no
 * !important. A page adopts V2 by using these classes, one area at a time, so
 * an unconverted page keeps rendering exactly as V24 does today.
 *
 * The palette is V24's own. What is new is that the three brand colours get
 * SEMANTIC roles matching the three things the business actually sells:
 *
 *     green  #45F882  commerce   — store, checkout, primary action
 *     amber  #FFBE18  competition— tournaments, prizes, champion
 *     purple #6240CF  progression— rank boost, tiers, climbing
 *
 * so colour carries meaning instead of decorating. The bracket already used all
 * three this way; the rest of the site did not.
 *
 * Replaces measured inconsistency in the V24 sheets:
 *   --main-container      9 distinct values -> 1
 *   --section-title-space 3 distinct values -> 1 rhythm
 *   --border-radius       4 distinct values -> a 3-step set
 *   greens                #45F882 / #22ff88 / #12b866 -> one green + one deep
 */

:root {
    /* ---- brand ---------------------------------------------------------- */
    --v2-green: #45F882;          /* the only green. #22ff88 and #12b866 are retired */
    --v2-green-deep: #1BBF5C;     /* gradients and pressed states only */
    --v2-amber: #FFBE18;
    --v2-purple: #6240CF;
    --v2-danger: #F2003A;

    /* Semantic aliases. Prefer these in components — they say what a colour
       means, so a later palette change does not require hunting hex values. */
    --v2-commerce: var(--v2-green);
    --v2-competition: var(--v2-amber);
    --v2-progression: var(--v2-purple);

    /* ---- surfaces, darkest to lightest ---------------------------------- */
    --v2-void: #000000;
    --v2-bg: #0B0E13;
    --v2-surface: #0F1C23;
    --v2-surface-2: #1A1D26;
    --v2-line: rgba(255, 255, 255, .09);
    --v2-line-strong: rgba(255, 255, 255, .16);

    /* ---- text ----------------------------------------------------------- */
    --v2-ink: #F7FAFC;
    --v2-ink-2: rgba(235, 243, 248, .72);
    --v2-ink-3: rgba(235, 243, 248, .54);

    /* ---- type ----------------------------------------------------------- */
    --v2-font-display: 'Rajdhani', sans-serif;
    --v2-font-body: 'Poppins', sans-serif;

    /* Modular scale, ~1.25. clamp() pairs the mobile and desktop ends so no
       step needs its own media query. */
    --v2-text-xs: 11px;
    --v2-text-sm: 13px;
    --v2-text-base: 15px;
    --v2-text-lg: clamp(17px, 1.1vw + 14px, 20px);
    --v2-title-sm: clamp(20px, 1.4vw + 16px, 26px);
    --v2-title: clamp(26px, 2.2vw + 18px, 40px);
    --v2-title-lg: clamp(34px, 3.4vw + 20px, 58px);
    --v2-display: clamp(44px, 6vw + 16px, 92px);

    --v2-measure: 68ch;           /* readable line length for body copy */

    /* ---- space: one 4px-based scale ------------------------------------- */
    --v2-1: 4px;   --v2-2: 8px;   --v2-3: 12px;  --v2-4: 16px;
    --v2-5: 24px;  --v2-6: 32px;  --v2-7: 48px;  --v2-8: 64px;
    --v2-9: 96px;

    /* Section rhythm. V24 shipped 120px desktop / 80px mobile plus three
       different title gaps; this is that intent expressed once. */
    --v2-section: clamp(64px, 7vw, 112px);
    --v2-section-title-gap: clamp(28px, 3vw, 48px);

    /* ---- shell ---------------------------------------------------------- */
    --v2-container: 1240px;
    --v2-container-wide: 1560px;  /* brackets and other full-bleed surfaces */
    --v2-gutter: clamp(16px, 4vw, 32px);

    /* ---- shape ---------------------------------------------------------- */
    --v2-radius-sm: 8px;
    --v2-radius: 14px;
    --v2-radius-lg: 22px;
    --v2-cut: 12px;               /* chamfer depth — the Nexus signature */

    /* ---- motion --------------------------------------------------------- */
    --v2-ease: cubic-bezier(.2, .7, .3, 1);
    --v2-fast: .16s;
    --v2-slow: .32s;
}

/* ---------------------------------------------------------------------------
 * Signature: the chamfered corner. V24 already cut its primary buttons this
 * way; here it is one token so every surface that should feel like Nexus cuts
 * identically, and hover can square it off.
 * ------------------------------------------------------------------------ */
.v2-cut {
    clip-path: polygon(var(--v2-cut) 0, 100% 0, 100% calc(100% - var(--v2-cut)),
                       calc(100% - var(--v2-cut)) 100%, 0 100%, 0 var(--v2-cut));
}
.v2-cut--sharp { --v2-cut: 0px; }

/* ---------------------------------------------------------------------------
 * Layout primitives
 * ------------------------------------------------------------------------ */
.v2-shell {
    width: min(var(--v2-container), calc(100% - var(--v2-gutter) * 2));
    margin-inline: auto;
}
.v2-shell--wide { --v2-container: var(--v2-container-wide); }

.v2-section { padding-block: var(--v2-section); }
.v2-stack > * + * { margin-top: var(--v2-flow, var(--v2-4)); }

/* ---------------------------------------------------------------------------
 * Section heading. V24's ritual is an eyebrow, a title, and an optional green
 * accent word. Kept — it is recognisably Nexus — but given one rhythm and a
 * left-aligned default, because centring every section flattened the hierarchy.
 * ------------------------------------------------------------------------ */
.v2-head { margin-bottom: var(--v2-section-title-gap); }
.v2-head__eyebrow {
    display: inline-flex; align-items: center; gap: var(--v2-2);
    margin: 0 0 var(--v2-3);
    color: var(--v2-green);
    font: 700 var(--v2-text-sm)/1 var(--v2-font-display);
    letter-spacing: .14em; text-transform: uppercase;
}
.v2-head__eyebrow::before {
    content: ""; width: 18px; height: 2px; background: currentColor;
}
.v2-head__title {
    margin: 0;
    color: var(--v2-ink);
    font: 700 var(--v2-title)/1.1 var(--v2-font-display);
    letter-spacing: -.01em;
}
.v2-head__title em { font-style: normal; color: var(--v2-green); }
.v2-head__sub {
    max-width: var(--v2-measure); margin: var(--v2-3) 0 0;
    color: var(--v2-ink-3);
    font: 400 var(--v2-text-base)/1.7 var(--v2-font-body);
}
.v2-head--center { text-align: center; }
.v2-head--center .v2-head__sub { margin-inline: auto; }
.v2-head--center .v2-head__eyebrow::before { display: none; }

/* Domain accents: a tournament section reads amber, a boost section purple. */
.v2-head--competition .v2-head__eyebrow,
.v2-head--competition .v2-head__title em { color: var(--v2-amber); }
.v2-head--progression .v2-head__eyebrow,
.v2-head--progression .v2-head__title em { color: var(--v2-purple); }

/* ---------------------------------------------------------------------------
 * Surface + card
 * ------------------------------------------------------------------------ */
.v2-panel {
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
}
.v2-card {
    display: flex; flex-direction: column;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius);
    background: linear-gradient(180deg, var(--v2-surface), var(--v2-surface-2));
    transition: border-color var(--v2-fast) var(--v2-ease),
                transform var(--v2-fast) var(--v2-ease);
}
.v2-card:hover { border-color: var(--v2-line-strong); transform: translateY(-2px); }

/* ---------------------------------------------------------------------------
 * Buttons. Chamfered, square on hover — V24's own motif, made consistent.
 * ------------------------------------------------------------------------ */
.v2-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--v2-2);
    padding: var(--v2-3) var(--v2-5);
    border: 1px solid transparent; border-radius: 0;
    font: 700 var(--v2-text-sm)/1 var(--v2-font-display);
    letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
    cursor: pointer;
    clip-path: polygon(var(--v2-cut) 0, 100% 0, 100% calc(100% - var(--v2-cut)),
                       calc(100% - var(--v2-cut)) 100%, 0 100%, 0 var(--v2-cut));
    transition: background var(--v2-fast) var(--v2-ease),
                color var(--v2-fast) var(--v2-ease),
                border-color var(--v2-fast) var(--v2-ease),
                clip-path var(--v2-slow) var(--v2-ease);
}
.v2-btn:hover { --v2-cut: 0px; }
.v2-btn--primary { background: var(--v2-green); color: #06110B; }
.v2-btn--primary:hover { background: var(--v2-green-deep); color: #06110B; }
.v2-btn--ghost {
    border-color: var(--v2-line-strong); background: transparent; color: var(--v2-ink);
}
.v2-btn--ghost:hover { border-color: var(--v2-green); color: var(--v2-green); }
.v2-btn--quiet {
    padding-inline: 0; clip-path: none; background: none; color: var(--v2-green);
    letter-spacing: .06em;
}
.v2-btn--quiet:hover { --v2-cut: var(--v2-cut); text-decoration: underline; }

/* ---------------------------------------------------------------------------
 * Tag. Rectangular by design — pills are not part of this identity.
 * ------------------------------------------------------------------------ */
.v2-tag {
    display: inline-flex; align-items: center; gap: var(--v2-1);
    padding: 5px var(--v2-2);
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-sm);
    color: var(--v2-ink-2);
    font: 700 var(--v2-text-xs)/1 var(--v2-font-display);
    letter-spacing: .1em; text-transform: uppercase;
}
.v2-tag--commerce { border-color: rgba(69,248,130,.32); color: var(--v2-green); }
.v2-tag--competition { border-color: rgba(255,190,24,.32); color: var(--v2-amber); }
.v2-tag--progression { border-color: rgba(98,64,207,.42); color: #A891FF; }

/* ---------------------------------------------------------------------------
 * Glow is rationed to three places sitewide: a primary CTA on hover, the
 * bracket's winner/champion state, and a live indicator. Anywhere else it stops
 * meaning anything.
 * ------------------------------------------------------------------------ */
.v2-btn--primary:hover { box-shadow: 0 0 28px rgba(69, 248, 130, .28); }
.v2-glow-live { box-shadow: 0 0 22px rgba(69, 248, 130, .22); }
.v2-glow-champion { box-shadow: 0 0 30px rgba(255, 190, 24, .26); }

/* ---------------------------------------------------------------------------
 * Empty state. The data-integrity rule means several surfaces legitimately have
 * nothing to show; that deserves a designed state, not a blank panel.
 * ------------------------------------------------------------------------ */
.v2-empty {
    display: grid; place-items: center; gap: var(--v2-3);
    padding: var(--v2-8) var(--v2-5);
    border: 1px dashed var(--v2-line-strong);
    border-radius: var(--v2-radius-lg);
    text-align: center;
}
.v2-empty__title {
    margin: 0; color: var(--v2-ink);
    font: 700 var(--v2-title-sm)/1.2 var(--v2-font-display);
}
.v2-empty__body {
    max-width: 52ch; margin: 0; color: var(--v2-ink-3);
    font: 400 var(--v2-text-base)/1.7 var(--v2-font-body);
}

/* ---------------------------------------------------------------------------
 * Accessibility floor
 * ------------------------------------------------------------------------ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--v2-green);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .v2-btn, .v2-card { transition: none; }
}

/* assets/css/v2-shell.css */
/* The Nexus — V2 global shell (header)
 * ---------------------------------------------------------------------------
 * Consumes the tokens in nexus-system.css. Scoped to .v2-hcommerce and its
 * children so nothing else in the V24 header is touched.
 *
 * Problem being solved: The Nexus is a store, but its two commerce controls —
 * cart and account — lived only in the thin top utility bar, which
 * nexus-experience.css hides below 991px. On a phone the cart was reachable
 * only by opening the hamburger menu, and the item count was invisible until
 * you did. Social links, which are also in the footer, carried the same visual
 * weight as the cart.
 *
 * The cluster below sits in the main header bar at every width, so the cart and
 * its count are always one tap away.
 */

.v2-hcommerce {
    /* inline-flex, not flex: the sibling .main-menu is inline-block, so a
       block-level box would drop the cluster onto its own line. */
    display: inline-flex;
    vertical-align: middle;
    align-items: center;
    gap: var(--v2-2);
    margin-inline-start: var(--v2-5);
}

.v2-hbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--v2-2);
    width: 42px;
    height: 42px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-radius-sm);
    background: rgba(255, 255, 255, .028);
    color: var(--v2-ink-2);
    font: 700 var(--v2-text-xs)/1 var(--v2-font-display);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color var(--v2-fast) var(--v2-ease),
                color var(--v2-fast) var(--v2-ease),
                background var(--v2-fast) var(--v2-ease);
}

.v2-hbtn:hover,
.v2-hbtn:focus-visible {
    border-color: rgba(69, 248, 130, .42);
    background: rgba(69, 248, 130, .07);
    color: var(--v2-green);
}

.v2-hbtn > i { font-size: 15px; }

/* The cart is the primary commerce action, so it reads green rather than
   neutral — the one place in the header that uses the brand colour. */
.v2-hbtn--cart { border-color: rgba(69, 248, 130, .3); color: var(--v2-green); }

/* Count badge. nexus-core.js owns visibility — it sets an inline
   display:flex/none from the live count — so the layout here has to work as a
   flex box, and the default is hidden so a "0" never flashes before the cart
   state is read. */
.v2-hbtn .v2-hbadge {
    position: absolute;
    top: -6px;
    inset-inline-end: -6px;
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--v2-green);
    color: #06110B;
    font: 800 10px/1 var(--v2-font-body);
}

/* Signed-in state. nexus-platform.js toggles .is-in / .is-logged-in on every
   [data-account-link] and swaps the label to "My Account". */
.v2-hbtn--account.is-in {
    border-color: rgba(69, 248, 130, .5);
    color: var(--v2-green);
}

/* Account shows a label once there is room for it. */
/* .v2-hbtn is a 42px SQUARE — it was built for an icon and nothing else. Any button in
   this cluster that also carries a word has to opt out of that width, or the label spills
   out of the box and the icon is pushed clear of its own border.
   V122 added the search trigger with a label and no such rule, so it rendered as a 40px
   button with overflowing content and a magnifier sitting outside the pill. Search and
   account want identical treatment, so they are declared together rather than separately —
   the next button with a label should join this list, not invent a third variant. */
.v2-hbtn--account,
.v2-hbtn--search { width: auto; padding-inline: var(--v2-3); }
.v2-hbtn--account > span,
.v2-hbtn--search > span { display: none; }

@media (min-width: 1200px) {
    .v2-hbtn--account > span,
    .v2-hbtn--search > span { display: inline; }
}

/* Below the nav breakpoint the cluster sits beside the menu toggle, so the
   spacing that separated it from the desktop nav is no longer wanted. */
@media (max-width: 991px) {
    .v2-hcommerce { margin-inline-start: 0; gap: var(--v2-1); }
    .v2-hbtn { width: 38px; height: 38px; }
    .v2-hbtn--account,
    .v2-hbtn--search { width: 38px; padding-inline: 0; }

    /* The menu toggle carries Bootstrap's .d-flex (display:flex !important),
       which is block-level and so breaks the line straight after this inline
       cluster. Matching it to inline-flex keeps both on the header row —
       !important only because it is overriding a utility class that uses it. */
    .v2-hcommerce + .header-button {
        display: inline-flex !important;
        align-items: center;
        vertical-align: middle;
        margin-inline-start: var(--v2-2);
    }
}

/* Narrow phones: the logo cell alone measures ~202px of a 384px row, which is
   not enough for cart + account + toggle without the columns wrapping onto a
   second line. The cart is the control that must stay reachable, and it is the
   one carrying a live count; account remains one tap away in the menu, where it
   already renders as .nx-mobile-action. */
@media (max-width: 575px) {
    .v2-hbtn--account { display: none; }

    /* Measured on a 390px screen: the logo cell was 202px of a 384px row — 46%
       of the viewport for the mark plus wordmark — which left no room for the
       cart beside the search and menu controls, so the columns wrapped onto a
       second line. An 86px mark next to 18px type is also simply out of
       proportion. Bringing the mark down to 52px keeps the wordmark legible and
       returns ~50px to the row. */
    .header-logo img { width: 52px !important; max-height: 40px; }
    .header-logo a::after { font-size: 16px; }
    .header-logo a { gap: 8px; }

    /* At 360px the two cells came to 357px against a 354px row — three pixels
       over, which is enough to wrap. Bootstrap's default gutter puts 14px of
       padding on each side of every column; halving it here returns 24px, so
       the row fits with margin to spare rather than by a hair. */
    .menu-area .row { --bs-gutter-x: 16px; }
    .v2-hcommerce + .header-button { margin-inline-start: var(--v2-1); }
}

/* 320px screens. Measured: V24 fit its header on one row here (88px) and adding
   the cart pushed it to two (142px) — a regression this cluster introduced, so
   it gets fixed rather than tolerated. The wordmark is the element to give up:
   it repeats a mark that is already present and costs ~75px, whereas the cart
   is a control. The logo link keeps its accessible name from the anchor. */
@media (max-width: 359px) {
    .header-logo a::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .v2-hbtn { transition: none; }
}

/* Footer subscribe field, same defect and same reasoning as the copy of this rule in
   nexus-footer.css: measured 11.5px, which zooms iOS on focus. This file is the one
   that serves the pages built on layout/header.php; nexus-footer.css serves the
   standalone SEO and legal pages. Both need it. */
@media (max-width: 767px) {
  .nx-classic-newsletter input[type=email] { font-size: 16px !important; }
}