/* =========================================================
   ABZ LEARNING — HOMEPAGE REDESIGN (DARK ARCADE)
   Loaded LAST so it re-themes the marketing homepage to match
   the "ABZ Homepage" design. Preserves all existing IDs/classes
   used by auth, search, filters, and the game grid.
   ========================================================= */

:root {
  --rd-bg:        oklch(0.07 0.02 280);
  --rd-bg-dark:   oklch(0.05 0.015 280);
  --rd-bg-panel:  oklch(0.10 0.03 280);
  --rd-bg-panel2: oklch(0.13 0.035 280);
  --rd-a: oklch(0.72 0.24 350); /* magenta/pink */
  --rd-b: oklch(0.60 0.24 305); /* purple      */
  --rd-c: oklch(0.65 0.22 250); /* blue        */
  --rd-ink:      #ffffff;
  --rd-ink-soft: oklch(0.85 0.01 280);
  --rd-ink-mute: oklch(0.60 0.015 280);
  --rd-line:     oklch(1 0 0 / 0.10);
  --rd-line-soft:oklch(1 0 0 / 0.06);
  --rd-maxw: 1400px;
}

/* ----- Base page ----- */
html { scroll-behavior: smooth; }
body {
  background: var(--rd-bg) !important;
  color: var(--rd-ink) !important;
  font-family: 'Inter', sans-serif !important;
  overflow-x: hidden;
}
body main { background: var(--rd-bg); }
.rd-display { font-family: 'Anton', sans-serif; text-transform: uppercase; font-weight: 400; }

/* Keyframes */
@keyframes rdPulseGlow { 0%,100%{opacity:.3} 50%{opacity:.55} }
@keyframes rdBounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }
@keyframes rdDrift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(50px,-35px)} }
@keyframes rdDrift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-40px,30px)} }
@keyframes rdSpin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes rdSpinC { to { transform: rotate(360deg); } }
@keyframes rdGradientShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes rdFloatSmall { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes rdPanDots { to { background-position: 34px 34px; } }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  background: oklch(0.05 0.015 280 / 0.72) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--rd-line) !important;
  box-shadow: none !important;
  z-index: 200 !important;
}
.site-header .nav-container {
  max-width: var(--rd-maxw) !important;
  min-height: auto !important;
  padding: 15px clamp(20px, 5vw, 64px) !important;
  gap: clamp(10px, 2vw, 24px);
  flex-wrap: wrap;
  row-gap: 10px;
}
.brand-block { gap: 12px !important; }
.brand-logo {
  width: 38px !important; height: 38px !important;
  border-radius: 0 !important;
  clip-path: none !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  box-shadow: none !important;
}
.brand-text {
  font-family: 'Anton', sans-serif !important;
  font-weight: 400 !important;
  font-size: 1.4rem !important;
  letter-spacing: .02em !important;
  text-transform: uppercase;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}
.main-nav { gap: clamp(14px, 3vw, 34px) !important; }
.main-nav .nav-link {
  color: var(--rd-ink-soft) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.main-nav .nav-link:hover { color: var(--rd-a) !important; }

.auth-actions { gap: 10px !important; align-items: center; }
/* Login links: quiet text buttons */
.site-header .student-login-btn,
.site-header .educator-login-btn,
#navStudentBtn, #navEducatorBtn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--rd-ink-soft) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: .01em;
  padding: 9px 12px !important;
  border-radius: 6px !important;
  min-height: 0 !important;
}
.site-header .student-login-btn:hover,
.site-header .educator-login-btn:hover,
#navStudentBtn:hover, #navEducatorBtn:hover {
  color: #fff !important;
  background: oklch(1 0 0 / 0.06) !important;
  transform: none !important;
}
/* Sign Up — solid accent, sharp corner */
.site-header .primary-btn,
#navSignupBtn {
  background: var(--rd-a) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 11px 20px !important;
  min-height: 0 !important;
  box-shadow: 0 12px 26px oklch(0.72 0.24 350 / 0.28) !important;
}
.site-header .primary-btn:hover,
#navSignupBtn:hover { filter: brightness(1.1); transform: translateY(-1px) !important; }

/* Signed-in pills keep working, just re-tint */
.home-user-pill, .home-dashboard-pill { border-radius: 6px !important; }

/* =========================================================
   HERO
   ========================================================= */
.hero-section { display: none !important; } /* replaced by .rd-hero */

.rd-hero {
  position: relative;
  min-height: 560px;
  height: 88vh;
  max-height: 760px;
  overflow: hidden;
  background: var(--rd-bg);
  display: flex;
  align-items: flex-end;
}
.rd-hero-bg { position: absolute; inset: 0; overflow: hidden; }
.rd-hero-bg .rd-wash {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 18% 28%, var(--rd-a) 0%, transparent 60%),
    radial-gradient(ellipse 50% 55% at 82% 18%, var(--rd-b) 0%, transparent 62%),
    radial-gradient(ellipse 60% 60% at 62% 85%, var(--rd-c) 0%, transparent 60%);
  opacity: .5; filter: blur(6px);
}
.rd-hero-bg .rd-ring {
  position: absolute; top: 50%; left: 50%;
  width: 900px; height: 900px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--rd-a), var(--rd-b), var(--rd-c), var(--rd-a));
  opacity: .14;
  -webkit-mask-image: radial-gradient(circle, transparent 55%, #000 58%, #000 60%, transparent 62%);
  mask-image: radial-gradient(circle, transparent 55%, #000 58%, #000 60%, transparent 62%);
  animation: rdSpin 40s linear infinite;
}
.rd-hero-bg .rd-blob { position: absolute; border-radius: 50%; filter: blur(120px); }
.rd-hero-bg .rd-blob.b1 { top: 8%; left: 12%; width: 360px; height: 360px; background: var(--rd-a); opacity: .40; animation: rdPulseGlow 6s ease-in-out infinite, rdDrift1 15s ease-in-out infinite; }
.rd-hero-bg .rd-blob.b2 { top: 12%; right: 10%; width: 420px; height: 420px; background: var(--rd-b); opacity: .35; animation: rdPulseGlow 7s ease-in-out infinite 1s, rdDrift2 18s ease-in-out infinite; }
.rd-hero-bg .rd-blob.b3 { bottom: 0; left: 38%; width: 380px; height: 380px; background: var(--rd-c); opacity: .30; animation: rdPulseGlow 8s ease-in-out infinite .5s; }
.rd-hero-bg .rd-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(oklch(1 0 0 / 0.16) 1.5px, transparent 1.5px);
  background-size: 34px 34px; opacity: .4;
  animation: rdPanDots 9s linear infinite;
}
.rd-hero-bg .rd-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(oklch(1 0 0 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}
.rd-hero-bg .rd-fade1 { position: absolute; inset: 0; background: linear-gradient(180deg, oklch(0.07 0.02 280 / 0.35) 0%, oklch(0.07 0.02 280 / 0.35) 35%, oklch(0.07 0.02 280 / 0.95) 92%); }
.rd-hero-bg .rd-fade2 { position: absolute; inset: 0; background: linear-gradient(100deg, oklch(0.07 0.02 280 / 0.85) 0%, oklch(0.07 0.02 280 / 0.35) 45%, transparent 70%); }

.rd-hero-float { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rd-hero-float span { position: absolute; opacity: .16; }
.rd-hero-float .f1 { top: 8%;  right: 9%;  font-size: 56px; filter: blur(1px) drop-shadow(0 0 22px var(--rd-a)); animation: rdFloatSmall 9s ease-in-out infinite; }
.rd-hero-float .f2 { top: 16%; right: 3%;  font-size: 48px; filter: blur(1.5px) drop-shadow(0 0 22px var(--rd-c)); animation: rdFloatSmall 10s ease-in-out infinite 1s; }

.rd-hero-visual {
  position: absolute; right: 0; top: 0; bottom: 0; width: 46%;
  display: flex; align-items: flex-end; justify-content: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
  pointer-events: none;
}
.rd-hero-visual img { height: 88%; width: auto; object-fit: contain; filter: drop-shadow(-20px 0 60px oklch(0 0 0 / 0.4)); }

.rd-hero-inner {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--rd-maxw); margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px) 74px;
}
.rd-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font: 800 11.5px 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: oklch(1 0 0 / 0.10); border: 1px solid oklch(1 0 0 / 0.25);
  padding: 8px 16px; border-radius: 100px; margin-bottom: 24px; backdrop-filter: blur(6px);
}
.rd-hero-title {
  font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: clamp(48px, 7.5vw, 116px); line-height: .92; color: #fff;
  margin: 0 0 22px; max-width: 660px; letter-spacing: 0; text-wrap: balance;
}
.rd-hero-sub {
  font: 500 19px/1.6 'Inter', sans-serif; color: oklch(0.88 0.01 280);
  max-width: 540px; margin: 0 0 34px;
}
.rd-hero-cta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.rd-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: 800 15px 'Inter', sans-serif; letter-spacing: .03em; text-transform: uppercase;
  padding: 18px 36px; border-radius: 4px; cursor: pointer; border: 0; color: #fff;
  transition: filter .18s ease, transform .18s ease, border-color .18s ease, background .18s ease;
}
.rd-btn.solid { background: var(--rd-a); box-shadow: 0 18px 40px oklch(0.72 0.24 350 / 0.30); }
.rd-btn.solid:hover { filter: brightness(1.12); transform: translateY(-2px); }
.rd-btn.ghost { background: oklch(1 0 0 / 0.08); border: 1.5px solid oklch(1 0 0 / 0.35); padding: 16.5px 36px; }
.rd-btn.ghost:hover { border-color: #fff; }
.rd-scroll-cue {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: oklch(0.7 0.01 280); font: 20px 'Inter', sans-serif;
  animation: rdBounce 1.8s ease-in-out infinite; z-index: 2;
}

/* =========================================================
   FEATURED THIS WEEK (horizontal scroll)
   ========================================================= */
.rd-featured { background: var(--rd-bg); padding: 60px 0 76px; }
.rd-featured-head {
  max-width: var(--rd-maxw); margin: 0 auto 30px;
  padding: 0 clamp(20px, 5vw, 64px);
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap;
}
.rd-featured-head h2 { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(28px, 3.6vw, 38px); margin: 0; color: #fff; }
.rd-featured-head span { font: 600 13px 'Inter', sans-serif; color: oklch(0.55 0.01 280); }
.rd-featured-scroll {
  display: flex; gap: 32px;
  padding: 10px clamp(20px, 5vw, 64px) 26px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.rd-featured-scroll::-webkit-scrollbar { display: none; height: 0; }
.rd-feat-card {
  position: relative; width: 320px; height: 420px; border-radius: 16px; overflow: hidden;
  flex: none; scroll-snap-align: start; transition: transform .25s ease, box-shadow .25s ease; display: block;
  background: var(--rd-bg-panel2);
  box-shadow: 0 18px 40px oklch(0 0 0 / 0.5), 0 0 0 1px oklch(1 0 0 / 0.06);
}
.rd-feat-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 26px 54px oklch(0 0 0 / 0.6), 0 0 0 1px oklch(1 0 0 / 0.12); }
.rd-feat-card img { width: 100%; height: 100%; object-fit: cover; }
.rd-feat-card .rd-feat-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, oklch(0.07 0.02 280 / 0.95) 100%); }
.rd-feat-card .rd-feat-cat { position: absolute; top: 16px; left: 16px; background: var(--rd-a); color: #fff; font: 800 11px 'Inter', sans-serif; letter-spacing: .02em; text-transform: uppercase; padding: 6px 12px; border-radius: 4px; }
.rd-feat-card .rd-feat-body { position: absolute; left: 20px; right: 20px; bottom: 22px; }
.rd-feat-card .rd-feat-body h3 { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 26px; color: #fff; margin: 0 0 8px; line-height: 1; }
.rd-feat-card .rd-feat-body p { font: 400 13px/1.5 'Inter', sans-serif; color: oklch(0.82 0.01 280); margin: 0; }

/* =========================================================
   STATS BAR (re-theme existing .impact-section)
   ========================================================= */
.impact-section {
  background: var(--rd-bg-panel) !important;
  padding: 32px clamp(20px, 5vw, 64px) !important;
  border-top: 1px solid var(--rd-line-soft);
  border-bottom: 1px solid var(--rd-line-soft);
}
.impact-container {
  max-width: var(--rd-maxw) !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
}
.impact-section .metric-card {
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid oklch(1 0 0 / 0.10) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 12px !important;
}
.impact-container .metric-card:last-child { border-right: 0 !important; }
.impact-section .metric-card:hover { transform: none !important; box-shadow: none !important; }
.impact-section .metric-icon { display: none !important; }
.impact-section .metric-value {
  font-family: 'Anton', sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(3.1rem, 4.8vw, 4.4rem) !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
}
/* Colour BOTH the value and its inner .count span. The base site forces the
   number span to white via -webkit-text-fill-color, so we must override that
   too — otherwise only the +/M/% suffix takes the accent colour. */
.impact-section .metric-value,
.impact-section .metric-value span.count {
  color: var(--rd-a) !important;
  -webkit-text-fill-color: var(--rd-a) !important;
}
.impact-container .metric-card:nth-child(2) .metric-value,
.impact-container .metric-card:nth-child(2) .metric-value span.count {
  color: var(--rd-b) !important;
  -webkit-text-fill-color: var(--rd-b) !important;
}
.impact-container .metric-card:nth-child(3) .metric-value,
.impact-container .metric-card:nth-child(3) .metric-value span.count {
  color: var(--rd-c) !important;
  -webkit-text-fill-color: var(--rd-c) !important;
}
.impact-container .metric-card:nth-child(4) .metric-value,
.impact-container .metric-card:nth-child(4) .metric-value span.count {
  color: var(--rd-a) !important;
  -webkit-text-fill-color: var(--rd-a) !important;
}
.impact-section .metric-card p {
  color: oklch(0.65 0.015 280) !important;
  font-weight: 700 !important; font-size: 13px !important;
  text-transform: uppercase; letter-spacing: .03em;
}

/* Keep the stats-to-process transition tight. The responsive ad directly
   after the stats previously reserved a large empty viewport-height band. */
.home-stats-ad {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   HOW IT WORKS (new alternating rows)
   ========================================================= */
.value-prop-section { display: none !important; } /* replaced by .rd-hiw */
.rd-hiw { background: var(--rd-bg); }
.rd-hiw-row { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.rd-hiw-row:nth-child(even) { background: var(--rd-bg-panel); }
.rd-hiw-visual {
  position: relative; min-height: 360px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.rd-hiw-row.v-a .rd-hiw-visual { background: radial-gradient(circle at 32% 35%, oklch(0.22 0.06 280) 0%, var(--rd-bg) 72%); }
.rd-hiw-row.v-b .rd-hiw-visual { background: radial-gradient(circle at 68% 35%, oklch(0.20 0.06 305) 0%, var(--rd-bg-panel) 72%); }
.rd-hiw-row.v-c .rd-hiw-visual { background: radial-gradient(circle at 32% 35%, oklch(0.20 0.06 250) 0%, var(--rd-bg) 72%); }
.rd-hiw-visual .rd-hiw-glow { position: absolute; width: 320px; height: 320px; border-radius: 50%; filter: blur(90px); opacity: .22; }
.rd-hiw-row.v-a .rd-hiw-glow { background: var(--rd-a); }
.rd-hiw-row.v-b .rd-hiw-glow { background: var(--rd-b); opacity: .24; }
.rd-hiw-row.v-c .rd-hiw-glow { background: var(--rd-c); }
.rd-hiw-visual .rd-hiw-emoji { position: relative; font-size: 150px; line-height: 1; }
.rd-hiw-row.v-a .rd-hiw-emoji { filter: drop-shadow(0 0 46px var(--rd-a)); }
.rd-hiw-row.v-b .rd-hiw-emoji { filter: drop-shadow(0 0 46px var(--rd-b)); }
.rd-hiw-row.v-c .rd-hiw-emoji { filter: drop-shadow(0 0 46px var(--rd-c)); }
.rd-hiw-text { display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(32px, 5vw, 80px); }
.rd-hiw-num { font: 400 90px/1 'Anton', sans-serif; color: oklch(1 0 0 / 0.08); margin-bottom: 8px; }
.rd-hiw-text h3 { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 16px; color: #fff; }
.rd-hiw-text p { font: 400 16px/1.65 'Inter', sans-serif; color: oklch(0.72 0.015 280); max-width: 440px; margin: 0; }
.rd-hiw-row.reverse .rd-hiw-visual { order: 2; }
.rd-hiw-row.reverse .rd-hiw-text { order: 1; }

/* =========================================================
   GAMES / LIBRARY — re-theme wrapper (cards already dark)
   ========================================================= */
.trending-section {
  background: var(--rd-bg-dark) !important;
  max-width: none !important;
  width: 100% !important;
  padding: 100px clamp(20px, 5vw, 64px) !important;
  margin: 0 !important;
}
#trending.trending-section .section-header h2 {
  font-family: 'Anton', sans-serif !important;
  font-weight: 400 !important;
  color: #fff !important;
}
/* Library header: title + subtext (left), search (right) — matches mockup */
.rd-lib-head {
  max-width: 1540px; margin: 0 auto 36px; width: 100%;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
}
/* left-align the pills row (mockup) */
#trending .filter-pills, #filterPills.filter-pills {
  justify-content: flex-start !important;
  max-width: 1540px !important;
  margin-left: auto !important; margin-right: auto !important;
}
.rd-lib-head .rd-lib-title h2 { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 4vw, 44px); margin: 0 0 10px; color: #fff; }
.rd-lib-head .rd-lib-title p { font: 400 15.5px/1.6 'Inter', sans-serif; color: oklch(0.6 0.015 280); margin: 0; max-width: 520px; }
/* Search box in library */
#searchWrapper.rd-search {
  position: relative; display: flex; align-items: center;
  background: oklch(1 0 0 / 0.06) !important; border: 1px solid oklch(1 0 0 / 0.14) !important;
  border-radius: 6px !important; box-shadow: none !important;
  padding: 4px 4px 4px 16px !important; width: 340px; max-width: 100%; flex: none;
}
#searchWrapper.rd-search:focus-within { border-color: var(--rd-c) !important; box-shadow: 0 0 0 3px oklch(0.65 0.22 250 / 0.25) !important; }
#searchWrapper.rd-search .search-icon { order: 2; opacity: 1; color: oklch(0.6 0.01 280); font-size: 1rem; margin: 0 6px; }
#searchWrapper.rd-search .search-input-group { order: 1; flex: 1; }
#searchWrapper.rd-search input { color: #fff !important; font: 500 13.5px 'Inter', sans-serif !important; padding: 10px 0 !important; }
#searchWrapper.rd-search input::placeholder { color: oklch(0.55 0.01 280); }
#searchWrapper.rd-search #heroSearchBtn { display: none !important; }
#searchWrapper.rd-search .value-list {
  left: 0 !important; right: 0 !important; top: calc(100% + 10px) !important;
  background: var(--rd-bg-panel2) !important; border: 1px solid var(--rd-line) !important; color: #fff;
  box-shadow: 0 24px 60px oklch(0 0 0 / 0.55) !important;
}
#searchWrapper.rd-search .value-list li { color: var(--rd-ink-soft); }
#searchWrapper.rd-search .value-list li:hover { background: oklch(1 0 0 / 0.06); color: #fff; }
#searchWrapper.rd-search .value-list li strong { color: #fff; }

/* ---------------------------------------------------------------
   Search dropdown contrast fix. The site's own dropdown styling
   (id="abzExactSearchDropdownPolish") lives in a <style> tag deep in
   <body>, which loads AFTER this stylesheet — so on equal specificity
   it wins the cascade and its light-theme text colors (dark navy on
   white) end up unreadable on our dark background. Prefixing every
   selector with "body" bumps specificity just enough to win regardless
   of source order, without relying on !important escalation wars. ------ */
body #searchDropdown.value-list,
body #searchWrapper .value-list {
  background: var(--rd-bg-panel2) !important;
  border-color: var(--rd-line) !important;
}
body #searchDropdown .abz-search-row {
  border-color: transparent !important;
}
body #searchDropdown .abz-search-row:hover,
body #searchDropdown .abz-search-row.is-active {
  background: oklch(1 0 0 / 0.07) !important;
  border-color: oklch(1 0 0 / 0.14) !important;
}
body #searchDropdown .abz-search-row.is-best {
  background: linear-gradient(135deg, oklch(0.72 0.24 350 / 0.20), oklch(0.65 0.22 250 / 0.16)) !important;
  border-color: oklch(0.72 0.24 350 / 0.32) !important;
}
body #searchDropdown .abz-search-title { color: #ffffff !important; }
body #searchDropdown .abz-search-sub { color: oklch(0.68 0.02 280) !important; }
body #searchDropdown .abz-search-badge {
  background: oklch(1 0 0 / 0.10) !important;
  color: oklch(0.88 0.01 280) !important;
}
body #searchDropdown .abz-search-row.is-best .abz-search-badge {
  background: linear-gradient(135deg, var(--rd-a), var(--rd-c)) !important;
  color: #ffffff !important;
}
body #searchDropdown mark {
  background: linear-gradient(135deg, oklch(0.72 0.24 350 / 0.35), oklch(0.65 0.22 250 / 0.35)) !important;
  color: #ffffff !important;
}
body #searchDropdown .abz-search-empty { color: oklch(0.72 0.01 280) !important; }
body #searchDropdown .abz-search-empty strong { color: #ffffff !important; }
body #searchDropdown .abz-search-empty span { color: oklch(0.62 0.015 280) !important; }
body #searchDropdown .dropdown-header,
body #searchDropdown .abz-search-section-title {
  color: oklch(0.55 0.015 280) !important;
}
/* Cards: title overlaid on the cover with a gradient scrim (mockup style) */
#gameGrid .game-card .game-play-link { position: relative !important; }
#gameGrid .game-card .game-content {
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  padding: 46px 52px 14px 16px !important;
  min-height: 0 !important;
  background: linear-gradient(180deg, transparent 0%, oklch(0.05 0.015 280 / 0.92) 88%) !important;
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
  pointer-events: none !important;
}
#gameGrid .game-card .game-content h3 {
  font-family: 'Anton', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: .01em !important;
  color: #fff !important;
  white-space: normal !important;
  line-height: 1.05 !important;
  font-size: clamp(1.05rem, 1.2vw, 1.28rem) !important;
  text-shadow: 0 2px 14px oklch(0 0 0 / 0.6) !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}
/* keep the info button clickable above the (non-interactive) scrim */
#gameGrid .game-card .game-info-btn { pointer-events: auto !important; z-index: 8 !important; }
/* category badge, top-left on the cover (mockup) */
#gameGrid .game-card .game-cover { position: relative !important; }
#gameGrid .game-card .rd-cat-badge {
  position: absolute !important; top: 12px !important; left: 12px !important; z-index: 6 !important;
  background: oklch(0.05 0.015 280 / 0.82) !important;
  color: #fff !important;
  font: 800 10px/1 'Inter', sans-serif !important;
  letter-spacing: .04em !important; text-transform: uppercase !important;
  padding: 6px 10px !important; border-radius: 4px !important;
  pointer-events: none !important;
  backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important;
}

/* =========================================================
   AUDIENCE (3 cards)
   ========================================================= */
.rd-audience { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--rd-bg); }
.rd-aud-card { position: relative; min-height: 440px; overflow: hidden; display: flex; align-items: flex-end; }
.rd-aud-card .rd-aud-emoji { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 120px; }
.rd-aud-card.a .rd-aud-emoji { background: radial-gradient(circle at 50% 40%, oklch(0.22 0.06 280) 0%, var(--rd-bg) 75%); filter: drop-shadow(0 0 40px var(--rd-a)); }
.rd-aud-card.b .rd-aud-emoji { background: radial-gradient(circle at 50% 40%, oklch(0.20 0.06 305) 0%, var(--rd-bg-panel) 75%); filter: drop-shadow(0 0 40px var(--rd-b)); }
.rd-aud-card.c .rd-aud-emoji { background: radial-gradient(circle at 50% 40%, oklch(0.20 0.06 250) 0%, var(--rd-bg) 75%); filter: drop-shadow(0 0 40px var(--rd-c)); }
.rd-aud-card .rd-aud-shade { position: absolute; inset: 0; background: linear-gradient(180deg, oklch(0.07 0.02 280 / 0.2) 0%, oklch(0.07 0.02 280 / 0.92) 100%); }
.rd-aud-card .rd-aud-body { position: relative; z-index: 2; padding: 28px 24px; }
.rd-aud-card .rd-aud-bar { width: 6px; height: 34px; margin-bottom: 14px; }
.rd-aud-card.a .rd-aud-bar { background: var(--rd-a); }
.rd-aud-card.b .rd-aud-bar { background: var(--rd-b); }
.rd-aud-card.c .rd-aud-bar { background: var(--rd-c); }
.rd-aud-card h3 { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 26px; color: #fff; margin: 0 0 8px; }
.rd-aud-card p { font: 400 13.5px/1.6 'Inter', sans-serif; color: oklch(0.78 0.01 280); margin: 0; }

/* =========================================================
   CTA BAND
   ========================================================= */
.rd-cta {
  position: relative; overflow: hidden;
  padding: 130px clamp(20px, 5vw, 64px) 110px;
  background: linear-gradient(125deg, var(--rd-a) 0%, var(--rd-b) 55%, var(--rd-c) 100%);
  background-size: 220% 220%; animation: rdGradientShift 11s ease-in-out infinite;
  clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
}
.rd-cta .rd-cta-dots { position: absolute; inset: 0; background-image: radial-gradient(oklch(1 0 0 / 0.14) 1.5px, transparent 1.5px); background-size: 30px 30px; opacity: .45; }
.rd-cta-inner {
  position: relative; max-width: 1360px; margin: 0 auto;
  display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 40px; align-items: center;
}
.rd-cta-badge { display: inline-block; font: 800 11.5px 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: oklch(0.07 0.02 280); background: oklch(1 0 0 / 0.85); padding: 7px 15px; border-radius: 100px; margin-bottom: 20px; }
.rd-cta h2 { font: 400 clamp(38px, 4.6vw, 62px)/1 'Anton', sans-serif; text-transform: uppercase; color: #fff; margin: 0 0 18px; text-shadow: 0 6px 30px oklch(0 0 0 / 0.3); }
.rd-cta p { font: 500 17px/1.6 'Inter', sans-serif; color: oklch(1 0 0 / 0.92); margin: 0 0 32px; max-width: 440px; }
.rd-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.rd-cta-actions .rd-cta-btn { display: inline-flex; align-items: center; justify-content: center; font: 800 15px 'Inter', sans-serif; letter-spacing: .03em; text-transform: uppercase; padding: 19px 40px; cursor: pointer; border: 0; clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%); }
.rd-cta-actions .rd-cta-btn.light { color: oklch(0.07 0.02 280); background: #fff; box-shadow: 0 20px 50px -14px oklch(0 0 0 / 0.45); }
.rd-cta-actions .rd-cta-btn.light:hover { filter: brightness(.95); transform: translateY(-2px); }
.rd-cta-actions .rd-cta-btn.outline { color: #fff; background: oklch(1 0 0 / 0.12); border: 1.5px solid oklch(1 0 0 / 0.5); padding: 17.5px 34px; }
.rd-cta-actions .rd-cta-btn.outline:hover { border-color: #fff; }
.rd-cta-visual { position: relative; height: 280px; display: flex; align-items: center; justify-content: center; }
.rd-cta-visual .rd-cta-disc { position: absolute; width: 320px; height: 320px; border-radius: 50%; border: 2px dashed oklch(1 0 0 / 0.35); animation: rdSpinC 24s linear infinite; }
.rd-cta-visual .rd-cta-emoji { position: relative; font-size: 130px; filter: drop-shadow(0 10px 30px oklch(0 0 0 / 0.35)); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: oklch(0.04 0.012 280) !important; padding: 56px clamp(20px, 5vw, 64px) 28px !important; }
.site-footer .footer-container {
  max-width: var(--rd-maxw) !important; margin: 0 auto !important;
  display: grid !important; grid-template-columns: 1.4fr 1fr 1fr 1fr !important;
  gap: 32px !important; border: 0 !important; padding: 0 !important;
}
.rd-foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rd-foot-mark { width: 34px; height: 34px; clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%); background: linear-gradient(135deg, var(--rd-a), var(--rd-c)); display: flex; align-items: center; justify-content: center; }
.rd-foot-mark span { font: 19px 'Anton', sans-serif; color: oklch(0.07 0.02 280); }
.site-footer .footer-brand h3 { font-family: 'Anton', sans-serif; font-weight: 400; text-transform: uppercase; font-size: 18px; letter-spacing: .02em; color: #fff; margin: 0; }
.site-footer .footer-brand p { font: 400 13.5px/1.6 'Inter', sans-serif; color: oklch(0.5 0.015 280); max-width: 260px; }
.rd-foot-col h4 { font: 700 12px 'Inter', sans-serif; color: oklch(0.5 0.015 280); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 16px; }
.rd-foot-col { display: flex; flex-direction: column; }
.rd-foot-col a, .site-footer .footer-links a { color: oklch(0.75 0.01 280) !important; font: 500 13.5px 'Inter', sans-serif !important; margin-bottom: 11px; }
.rd-foot-col a:hover { color: #fff !important; }
.site-footer .footer-bottom {
  max-width: var(--rd-maxw) !important; margin: 40px auto 0 !important;
  padding-top: 20px !important; border-top: 1px solid oklch(1 0 0 / 0.08) !important;
  text-align: left !important;
}
.site-footer .footer-bottom p { font: 400 12.5px 'Inter', sans-serif !important; color: oklch(0.4 0.01 280) !important; margin: 0; }

/* Ad slots blend into dark bg */
ins.adsbygoogle { background: transparent !important; }

/* =========================================================
   RESPONSIVE  (the source design was desktop-only; this makes
   the whole page adapt down to phones)
   ========================================================= */
@media (max-width: 1080px) {
  .rd-cta-inner { grid-template-columns: 1fr; }
  .rd-cta-visual { display: none; }
  .impact-container { grid-template-columns: repeat(2, 1fr) !important; row-gap: 32px; }
  .impact-section .metric-card:nth-child(2) { border-right: 0 !important; }
  #gameGrid.game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  .site-header .nav-container { padding: 12px 20px !important; }
  .main-nav { display: none !important; }
  .rd-hero { height: auto; min-height: 0; padding-top: 96px; }
  .rd-hero-visual { position: relative; width: 100%; height: 300px; -webkit-mask-image: none; mask-image: none; opacity: .9; }
  .rd-hero-visual img { height: 300px; }
  .rd-hero { flex-direction: column; align-items: stretch; }
  .rd-hero-inner { padding: 24px clamp(20px, 5vw, 64px) 60px; }
  .rd-hero-title { font-size: clamp(44px, 12vw, 76px); }
  .rd-scroll-cue { display: none; }
  .rd-hiw-row { grid-template-columns: 1fr; }
  .rd-hiw-row.reverse .rd-hiw-visual { order: 0; }
  .rd-hiw-row.reverse .rd-hiw-text { order: 0; }
  .rd-hiw-visual { min-height: 240px; }
  .rd-hiw-visual .rd-hiw-emoji { font-size: 110px; }
  .rd-audience { grid-template-columns: 1fr; }
  .rd-aud-card { min-height: 320px; }
  .site-footer .footer-container { grid-template-columns: 1fr 1fr !important; }
  .rd-lib-head { flex-direction: column; align-items: stretch; }
  #searchWrapper.rd-search { width: 100%; }
}
@media (max-width: 620px) {
  /* Keep the fixed header short: login controls stay in a row, not stacked */
  .auth-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    width: auto !important;
  }
  .auth-actions a, .auth-actions button { width: auto !important; }
  .site-header .student-login-btn, .site-header .educator-login-btn,
  #navStudentBtn, #navEducatorBtn { padding: 8px 8px !important; font-size: 11.5px !important; }
  #navSignupBtn, .site-header .primary-btn { padding: 9px 14px !important; font-size: 11.5px !important; }
  .brand-text { font-size: 1.15rem !important; }
  .rd-hero-title { font-size: clamp(38px, 13vw, 60px); }
  .rd-hero-sub { font-size: 16px; }
  .rd-btn { padding: 15px 24px; font-size: 13px; flex: 1; }
  .impact-container { grid-template-columns: 1fr !important; }
  .impact-section .metric-card { border-right: 0 !important; border-bottom: 1px solid oklch(1 0 0 / 0.08) !important; padding-bottom: 24px !important; }
  .impact-container .metric-card:last-child { border-bottom: 0 !important; }
  #gameGrid.game-grid { grid-template-columns: 1fr !important; }
  .trending-section { padding: 64px 20px !important; }
  .rd-cta { padding: 90px 20px 80px; }
  .site-footer .footer-container { grid-template-columns: 1fr !important; }
  .rd-feat-card { width: 260px; height: 360px; }
}