/* ══════════════════════════════════════════════════════════════════════════
   2playergames.online — NEO-BRUTALISM THEME (global skin)
   Loaded LAST in index.html so it wins the cascade. Re-skins the custom UI
   (home-page / sidebar / game-page) by redefining their CSS variables and
   overriding visual props, AND re-themes the compiled React (Tailwind/shadcn)
   pages via HSL variable overrides. NO layout/positioning/CLS rule is changed
   here — visuals only (color / border / radius / shadow / typography).
   Revert the whole skin by removing the <link> to this file.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
  --nb-bg:      #F2EDE4;   /* cream  */
  --nb-bg-2:    #E9E2D4;   /* darker cream */
  --nb-paper:   #FFFFFF;   /* card surface */
  --nb-ink:     #0A0A0A;   /* text + borders */
  --nb-ink-dim: #3a352c;
  --nb-ink-mute:#6b6456;
  --nb-yellow:  #FFD600;
  --nb-red:     #FF2D2D;
  --nb-blue:    #1A1AFF;
  --nb-green:   #00CC66;
  --nb-purple:  #9B00FF;
  --nb-cyan:    #00D4CC;
  --nb-pink:    #FF2D7E;
  --nb-bd:      2px solid #0A0A0A;
  --nb-bd-3:    3px solid #0A0A0A;
  --nb-shadow:  4px 4px 0 #0A0A0A;
  --nb-shadow-sm: 3px 3px 0 #0A0A0A;
  --nb-font-head: 'Space Grotesk', 'Bebas Neue', system-ui, sans-serif;
  --nb-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --nb-font-mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace;
}

/* ── Re-map the custom-UI variables to the brutalist palette ─────────────── */
/* (home-page.css --hp-*, sidebar.css --gv-*, game-page.css --gp-* are all
   defined at :root in their own files; this later :root definition wins.) */
:root {
  /* home-page.css */
  --hp-bg: var(--nb-bg);  --hp-bg-2: var(--nb-bg-2);  --hp-card-bg: var(--nb-paper);
  --hp-text: var(--nb-ink);  --hp-text-dim: var(--nb-ink-dim);  --hp-text-mute: var(--nb-ink-mute);
  --hp-pink: var(--nb-red);  --hp-pink-2: #e01e1e;
  --hp-purple: var(--nb-purple);  --hp-purple-2: #b94dff;
  --hp-cyan: var(--nb-cyan);  --hp-yellow: var(--nb-yellow);
  --hp-green: var(--nb-green);  --hp-blue: var(--nb-blue);

  /* sidebar.css */
  --gv-bg-0: var(--nb-bg);  --gv-bg-1: var(--nb-bg);  --gv-bg-2: var(--nb-paper);  --gv-bg-3: var(--nb-bg-2);
  --gv-text: var(--nb-ink);  --gv-text-dim: var(--nb-ink-dim);  --gv-text-mute: var(--nb-ink-mute);
  --gv-red: var(--nb-red);  --gv-red-2: #e01e1e;
  --gv-red-soft: rgba(255,45,45,.12);  --gv-red-glow: rgba(0,0,0,.18);
  --gv-border: var(--nb-ink);  --gv-border-strong: var(--nb-ink);
  --gv-hover: rgba(0,0,0,.06);  --gv-active: var(--nb-yellow);

  /* game-page.css */
  --gp-bg: var(--nb-bg);  --gp-card: var(--nb-paper);  --gp-card-2: var(--nb-bg-2);
  --gp-text: var(--nb-ink);  --gp-text-dim: var(--nb-ink-dim);  --gp-text-mute: var(--nb-ink-mute);
  --gp-red: var(--nb-red);  --gp-red-2: #e01e1e;  --gp-yellow: var(--nb-yellow);
}

/* ── Page background: cream + 40px grid texture ─────────────────────────── */
html, body {
  background-color: var(--nb-bg) !important;
  background-image:
    linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  background-attachment: fixed !important;
  color: var(--nb-ink);
}
body { font-family: var(--nb-font-body); }
#hp-root, #gp-root, .gv-header, .gv-sb, .gv-search-panel, .neo-footer {
  font-family: var(--nb-font-body);
}

/* ══════════════════════════════════════════════════════════════════════════
   NAVBAR  (.gv-header / .gv-logo / .gv-search)
   ══════════════════════════════════════════════════════════════════════════ */
.gv-header {
  background: var(--nb-bg) !important;
  border-bottom: var(--nb-bd) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
/* Blinking terminal cursor before the logo */
.gv-logo { position: relative; gap: 6px; }
.gv-logo::before {
  content: ">_";
  font-family: var(--nb-font-mono);
  font-weight: 700;
  font-size: 18px;
  color: var(--nb-ink);
  margin-right: 6px;
  animation: nb-blink 1.05s steps(1) infinite;
}
@keyframes nb-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

.gv-search {
  background: var(--nb-paper) !important;
  border: var(--nb-bd) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.gv-search:focus-within { box-shadow: var(--nb-shadow-sm) !important; }
.gv-search input { color: var(--nb-ink) !important; font-family: var(--nb-font-body); }
.gv-search input::placeholder { color: var(--nb-ink-mute) !important; }
.gv-search-icon, .gv-search-clear { color: var(--nb-ink) !important; }

/* Search suggestion panel */
.gv-search-panel {
  background: var(--nb-paper) !important;
  border: var(--nb-bd) !important;
  border-radius: 0 !important;
  box-shadow: var(--nb-shadow) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   LEFT SIDEBAR RAIL  (.gv-sb*)  — structure/behavior unchanged, reskinned
   ══════════════════════════════════════════════════════════════════════════ */
.gv-sb {
  background: var(--nb-bg) !important;
  border-right: var(--nb-bd) !important;
  box-shadow: none !important;
}
.gv-sb.gv-pin, .gv-sb:hover { box-shadow: var(--nb-shadow) !important; }
.gv-sb-item {
  border-radius: 0 !important;
  color: var(--nb-ink) !important;
  font-family: var(--nb-font-body);
  font-weight: 600;
}
.gv-sb-item:hover { background: rgba(0,0,0,.06) !important; }
.gv-sb-icon { color: var(--nb-ink) !important; }
/* active item = solid yellow block + black icon */
.gv-sb-item.gv-active {
  background: var(--nb-yellow) !important;
  border: var(--nb-bd) !important;
  color: var(--nb-ink) !important;
}
.gv-sb-item.gv-active .gv-sb-icon { color: var(--nb-ink) !important; }
.gv-sb-label { letter-spacing: .02em; text-transform: uppercase; font-size: 12px; }
.gv-sb-h { color: var(--nb-ink-mute) !important; font-family: var(--nb-font-mono); text-transform: uppercase; }
.gv-sb-sep { border-color: var(--nb-ink) !important; opacity: .25; }
/* hover tooltip (collapsed state) */
.gv-sb-item .gv-sb-tip,
.gv-sb-item[data-tip]:hover::after {
  background: var(--nb-ink); color: #fff; border-radius: 0;
  font-family: var(--nb-font-mono); text-transform: uppercase; font-size: 11px;
}

/* ══════════════════════════════════════════════════════════════════════════
   RECENT-GAMES STRIP  (.gv-strip / .gv-header-recent)
   ══════════════════════════════════════════════════════════════════════════ */
.gv-strip, .gv-header-recent { background: transparent !important; }
.gv-strip a, .gv-strip .gv-strip-item, .gv-header-recent a {
  border: var(--nb-bd) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--nb-paper) !important;
}
.gv-strip a:hover, .gv-header-recent a:hover {
  transform: translate(-2px,-2px);
  box-shadow: var(--nb-shadow-sm) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   HOMEPAGE container + game cards + section headers  (#hp-root)
   ══════════════════════════════════════════════════════════════════════════ */
body.hp-home { background: var(--nb-bg) !important; }
#hp-root { color: var(--nb-ink); }

/* Game cards */
#hp-root .hp-card,
#hp-root .hp-mosaic-card {
  background: var(--nb-paper) !important;
  border: var(--nb-bd) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: transform .12s ease, box-shadow .12s ease;
}
#hp-root .hp-card:hover,
#hp-root .hp-mosaic-card:hover {
  transform: translate(-3px,-3px);
  box-shadow: var(--nb-shadow-sm) !important;
}
#hp-root .hp-card-name { color: var(--nb-ink) !important; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
#hp-root .hp-card-rating { color: var(--nb-ink-dim) !important; font-family: var(--nb-font-mono); }
#hp-root .hp-card-meta { background: var(--nb-paper) !important; border-top: var(--nb-bd) !important; }

/* Category badge (top-left of a card) */
#hp-root .hp-badge {
  border: var(--nb-bd) !important; border-radius: 0 !important;
  font-family: var(--nb-font-mono); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; box-shadow: none !important; color: var(--nb-ink) !important;
}
#hp-root .hp-badge-new { background: var(--nb-yellow) !important; }
#hp-root .hp-badge-hot { background: var(--nb-red) !important; color: #fff !important; }

/* Bookmark button */
#hp-root .hp-card-bookmark {
  border: var(--nb-bd) !important; border-radius: 0 !important;
  background: var(--nb-paper) !important; color: var(--nb-ink) !important;
}

/* Featured (large) card = yellow border + hard shadow */
#hp-root .hp-card.hp-row-large > *,
#hp-root .hp-mosaic-card.hp-mosaic-big {
  border-color: var(--nb-ink) !important;
  box-shadow: 6px 6px 0 var(--nb-yellow), 6px 6px 0 1px var(--nb-ink) !important;
}

/* Section headers */
#hp-root .hp-section-title {
  font-family: var(--nb-font-head) !important;
  font-weight: 700; text-transform: uppercase; letter-spacing: .01em;
  color: var(--nb-ink) !important;
}
#hp-root .hp-section-title .hp-emoji { filter: none; }
#hp-root .hp-see-all {
  font-family: var(--nb-font-mono); text-transform: uppercase; font-weight: 700;
  color: var(--nb-ink) !important; border-bottom: 2px solid transparent;
}
#hp-root .hp-see-all:hover { border-bottom-color: var(--nb-yellow); }

/* Row scroll arrows */
#hp-root .hp-row-arrow {
  background: var(--nb-paper) !important; color: var(--nb-ink) !important;
  border: var(--nb-bd) !important; border-radius: 0 !important; box-shadow: var(--nb-shadow-sm) !important;
}
#hp-root .hp-row-arrow:hover { background: var(--nb-yellow) !important; }

/* Category chips ("Categories" grid: .hp-cat-chip + .hp-cat-chip-label) */
#hp-root .hp-cat-chip {
  border: var(--nb-bd) !important; border-radius: 0 !important;
  background: var(--nb-paper) !important; box-shadow: none !important;
}
#hp-root .hp-cat-chip:hover {
  transform: translate(-2px,-2px); box-shadow: var(--nb-shadow-sm) !important; background: var(--nb-yellow) !important;
}
#hp-root .hp-cat-chip-label {
  color: var(--nb-ink) !important; font-weight: 700; text-transform: uppercase;
  font-family: var(--nb-font-mono); letter-spacing: .02em;
}
#hp-root .hp-cat-chip-icon { border: var(--nb-bd) !important; border-radius: 0 !important; box-shadow: none !important; }

/* Skeletons */
#hp-root .hp-skeleton { background: var(--nb-bg-2) !important; border: var(--nb-bd) !important; border-radius: 0 !important; }

/* Scroll-to-top button */
#hp-up {
  background: var(--nb-yellow) !important; color: var(--nb-ink) !important;
  border: var(--nb-bd) !important; border-radius: 0 !important; box-shadow: var(--nb-shadow) !important;
}

/* Top ad slot frame */
#hp-ad-top:not(:empty) { border: var(--nb-bd); background: var(--nb-paper); }

/* ══════════════════════════════════════════════════════════════════════════
   HERO  (.neo-hero — injected by home-page.js)
   ══════════════════════════════════════════════════════════════════════════ */
.neo-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: 24px;
  align-items: center;
  margin: 8px 24px 28px 0;
  padding: 28px;
  background: var(--nb-bg);
  border: var(--nb-bd-3);
  box-shadow: var(--nb-shadow);
  overflow: hidden;
}
.neo-hero::before {
  /* subtle inner grid so the hero reads as its own brutalist panel */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 28px 28px;
}
.neo-hero-left { position: relative; z-index: 2; }
.neo-hero-tag {
  display: inline-block; font-family: var(--nb-font-mono); font-weight: 700;
  color: var(--nb-ink); letter-spacing: .06em; font-size: 13px; margin-bottom: 10px;
}
.neo-hero-title {
  margin: 0 0 18px; font-family: var(--nb-font-head); font-weight: 700;
  line-height: .9; letter-spacing: -.02em; text-transform: uppercase;
}
.neo-hero-title .l1, .neo-hero-title .l2 {
  display: block; font-size: clamp(46px, 8vw, 110px);
}
.neo-hero-title .l1 { color: var(--nb-ink); }
.neo-hero-title .l2 { color: var(--nb-blue); -webkit-text-stroke: 2px var(--nb-ink); }

.neo-hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.neo-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: var(--nb-bd); border-radius: 0;
  font-family: var(--nb-font-mono); font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--nb-ink);
  text-decoration: none; transition: transform .1s ease, box-shadow .1s ease;
}
.neo-tag:hover { transform: translate(-2px,-2px); box-shadow: var(--nb-shadow-sm); }
.neo-tag-yellow { background: var(--nb-yellow); }
.neo-tag-blue   { background: var(--nb-blue); color: #fff; }
.neo-tag-red    { background: var(--nb-red); color: #fff; }

.neo-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.neo-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border: var(--nb-bd-3); border-radius: 0;
  font-family: var(--nb-font-head); font-weight: 700; font-size: 15px;
  text-transform: uppercase; letter-spacing: .03em; text-decoration: none;
  cursor: pointer; transition: transform .1s ease, box-shadow .1s ease, background .1s ease, color .1s ease;
}
.neo-btn-solid { background: var(--nb-ink); color: #fff; }
.neo-btn-solid:hover { background: var(--nb-yellow); color: var(--nb-ink); transform: translate(-2px,-2px); box-shadow: var(--nb-shadow); }
.neo-btn-outline { background: transparent; color: var(--nb-ink); }
.neo-btn-outline:hover { background: var(--nb-ink); color: #fff; transform: translate(-2px,-2px); box-shadow: var(--nb-shadow); }

/* Right side: canvas + characters */
.neo-hero-right { position: relative; min-height: 320px; z-index: 1; }
.neo-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.neo-status {
  position: absolute; top: 6px; right: 6px; z-index: 4;
  font-family: var(--nb-font-mono); font-weight: 700; font-size: 12px;
  color: var(--nb-red); letter-spacing: .04em;
  animation: nb-blink 1.4s steps(1) infinite;
}

/* CSS cartoon characters
   outer .neo-char = absolute position + JS mouse-parallax transform
   inner .neo-char-body = CSS keyframe animation (so the two never fight) */
.neo-char { position: absolute; z-index: 3; will-change: transform; transition: transform .18s ease-out; }
.neo-char-1 { top: 8%;  left: 8%; }
.neo-char-2 { top: 4%;  right: 10%; }
.neo-char-3 { bottom: 6%; left: 20%; }
.neo-char-4 { bottom: 10%; right: 14%; }
.neo-char-1 .neo-char-body { animation: nb-float 3.2s ease-in-out infinite; }
.neo-char-2 .neo-char-body { animation: nb-wobble 3.6s ease-in-out infinite; }
.neo-char-3 .neo-char-body { animation: nb-bounce 2.8s ease-in-out infinite; }
.neo-char-4 .neo-char-body { animation: nb-float 3.8s ease-in-out infinite; }
.neo-char-body {
  position: relative; width: 74px; height: 74px; border: var(--nb-bd-3); border-radius: 6px;
  box-shadow: var(--nb-shadow-sm); display: flex; align-items: center; justify-content: center; gap: 10px;
}
.neo-c-red    .neo-char-body { background: var(--nb-red); }
.neo-c-yellow .neo-char-body { background: var(--nb-yellow); }
.neo-c-blue   .neo-char-body { background: var(--nb-blue); }
.neo-c-green  .neo-char-body { background: var(--nb-green); }
.neo-char-eye { width: 15px; height: 15px; background: #fff; border: var(--nb-bd); border-radius: 50%; position: relative; }
.neo-char-eye::after { content: ""; position: absolute; width: 6px; height: 6px; background: var(--nb-ink); border-radius: 50%; top: 4px; left: 4px; }
.neo-char-antenna {
  position: absolute; top: -16px; left: 50%; width: 3px; height: 14px; background: var(--nb-ink); transform: translateX(-50%);
}
.neo-char-antenna::after { content: ""; position: absolute; top: -9px; left: 50%; margin-left: -5px; width: 10px; height: 10px; background: var(--nb-ink); transform-origin: center; animation: nb-spin 4s linear infinite; }
.neo-char-pad {
  position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 16px; background: var(--nb-paper); border: var(--nb-bd); border-radius: 8px;
}
@keyframes nb-float  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes nb-wobble { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes nb-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes nb-spin   { 100% { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════
   CATEGORY MARQUEE  (.neo-marquee — injected by home-page.js)
   ══════════════════════════════════════════════════════════════════════════ */
.neo-marquee {
  position: relative; overflow: hidden;
  border-top: var(--nb-bd); border-bottom: var(--nb-bd);
  background: var(--nb-bg-2); margin: 0 0 26px; padding: 10px 0;
}
.neo-marquee-track { display: inline-flex; gap: 14px; white-space: nowrap; padding-left: 14px; animation: nb-marquee 28s linear infinite; }
.neo-marquee:hover .neo-marquee-track { animation-play-state: paused; }
.neo-mq-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border: var(--nb-bd); border-radius: 0;
  font-family: var(--nb-font-mono); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--nb-ink);
}
.neo-mq-yellow { background: var(--nb-yellow); }
.neo-mq-red    { background: var(--nb-red); color: #fff; }
.neo-mq-blue   { background: var(--nb-blue); color: #fff; }
.neo-mq-green  { background: var(--nb-green); }
.neo-mq-purple { background: var(--nb-purple); color: #fff; }
.neo-mq-cyan   { background: var(--nb-cyan); }
.neo-mq-paper  { background: var(--nb-paper); }
@keyframes nb-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ══════════════════════════════════════════════════════════════════════════
   DECORATIVE SHAPES  (.neo-deco — injected by home-page.js)
   ══════════════════════════════════════════════════════════════════════════ */
/* content sits above the decorative shapes (which are z-index:0 siblings) */
#hp-root .hp-inner { position: relative; z-index: 1; }
.neo-deco { position: absolute; z-index: 0; pointer-events: none; will-change: transform; }
.neo-deco-square   { width: 46px; height: 46px; background: var(--nb-yellow); border: var(--nb-bd-3); animation: nb-spin 9s linear infinite; }
.neo-deco-triangle { width: 0; height: 0; border-left: 28px solid transparent; border-right: 28px solid transparent; border-bottom: 48px solid var(--nb-red); filter: drop-shadow(2px 2px 0 var(--nb-ink)); }
.neo-deco-circle   { width: 52px; height: 52px; border-radius: 50%; background: var(--nb-cyan); border: var(--nb-bd-3); }
.neo-deco-rhombus  { width: 44px; height: 44px; background: var(--nb-pink); border: var(--nb-bd-3); transform: rotate(45deg); }

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER  (.neo-footer — injected by sidebar.js, shows site-wide)
   tag is <div> not <footer> (home-page.css hides any <footer>)
   ══════════════════════════════════════════════════════════════════════════ */
.neo-footer {
  position: relative; background: var(--nb-ink); color: #fff;
  margin-top: 40px; padding: 26px 28px 22px;
  border-top: var(--nb-bd-3);
}
@media (min-width: 1024px) { .neo-footer { padding-left: calc(var(--gv-sb-w, 64px) + 28px); } }
.neo-footer-confetti { position: absolute; top: 0; left: 0; right: 0; height: 8px; display: flex; }
.neo-footer-confetti span { flex: 1 1 auto; height: 100%; }
.neo-footer-inner { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.neo-footer-copy { font-family: var(--nb-font-mono); font-size: 13px; letter-spacing: .03em; color: #fff; }
.neo-footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.neo-footer-links a {
  color: #fff; text-decoration: none; font-family: var(--nb-font-mono);
  text-transform: uppercase; font-size: 12px; letter-spacing: .04em;
}
.neo-footer-links a:hover { color: var(--nb-yellow); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════════
   GAME-PAGE PANEL  (#gp-panel / .gpx-*)
   ══════════════════════════════════════════════════════════════════════════ */
#gp-root { color: var(--nb-ink); }
.gpx-card, #gp-panel .gpx-card {
  background: var(--nb-paper) !important; border: var(--nb-bd) !important;
  border-radius: 0 !important; box-shadow: var(--nb-shadow-sm) !important; color: var(--nb-ink) !important;
}
#gp-panel h1, #gp-panel h2, #gp-panel h3, .gpx-card h1, .gpx-card h2, .gpx-card h3 {
  font-family: var(--nb-font-head); text-transform: uppercase; color: var(--nb-ink) !important;
}
#gp-panel a.gpx-related, #gp-panel .gpx-related {
  border: var(--nb-bd) !important; border-radius: 0 !important; box-shadow: none !important;
}
#gp-panel .gpx-related:hover { transform: translate(-2px,-2px); box-shadow: var(--nb-shadow-sm) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   COMPILED REACT PAGES  (Tailwind + shadcn/ui)  — retheme via HSL vars + resets
   Scoped to #root so it never touches the custom overlay UI above.
   ══════════════════════════════════════════════════════════════════════════ */
:root, .dark, html {
  --background: 38 33% 92%;
  --foreground: 0 0% 4%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 4%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 4%;
  --primary: 0 100% 59%;          /* red   */
  --primary-foreground: 0 0% 100%;
  --secondary: 240 100% 55%;      /* blue  */
  --secondary-foreground: 0 0% 100%;
  --muted: 38 20% 86%;
  --muted-foreground: 40 8% 30%;
  --accent: 50 100% 50%;          /* yellow */
  --accent-foreground: 0 0% 4%;
  --destructive: 0 100% 59%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 4%;
  --input: 0 0% 4%;
  --ring: 50 100% 50%;
}

/* Square everything inside the React app (cap at 4px) */
#root [class*="rounded"] { border-radius: 4px !important; }
#root [class*="rounded-full"] { border-radius: 9999px !important; } /* keep avatars/dots round */

/* Black borders + flat surfaces */
#root [class*="border"] { border-color: var(--nb-ink) !important; }
#root .bg-card, #root [class*="bg-card"] { background: var(--nb-paper) !important; }

/* Soft blurred shadows → hard offset shadow */
#root [class*="shadow-lg"], #root [class*="shadow-xl"], #root [class*="shadow-2xl"], #root [class*="shadow-md"] {
  box-shadow: var(--nb-shadow-sm) !important;
}

/* Cards / game tiles: thicker border + hard hover shadow */
#root a[href^="/game/"],
#root .game-card, #root [class*="game-card"] {
  border: var(--nb-bd) !important; border-radius: 4px !important;
  box-shadow: none !important; transition: transform .12s ease, box-shadow .12s ease;
}
#root a[href^="/game/"]:hover,
#root .game-card:hover, #root [class*="game-card"]:hover {
  transform: translate(-3px,-3px); box-shadow: var(--nb-shadow-sm) !important;
}

/* Buttons / pills */
#root button, #root a[role="button"], #root [class*="rounded-2xl"].border {
  border-radius: 4px !important;
}

/* Kill neon glows / gradient washes that clash with flat brutalism */
#root [class*="bg-gradient"] { background-image: none !important; }
#root [class*="drop-shadow"], #root [class*="blur"] { filter: none !important; }

/* Headings in React pages */
#root h1, #root h2 { font-family: var(--nb-font-head); }

/* ══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY: disable all motion under prefers-reduced-motion
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .gv-logo::before, .neo-status,
  .neo-char, .neo-char-body, .neo-char-antenna::after, .neo-marquee-track,
  .neo-deco, .neo-deco-square {
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  .neo-hero { grid-template-columns: 1fr; margin-right: 12px; padding: 20px; }
  .neo-hero-right { min-height: 220px; }
  .neo-hero-title .l1, .neo-hero-title .l2 { font-size: clamp(40px, 14vw, 72px); }
}
@media (max-width: 560px) {
  .neo-hero-right { display: none; }            /* keep mobile hero lean */
  .neo-footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LIVE FIX PASS 1 — issues spotted on the deployed site
   ══════════════════════════════════════════════════════════════════════════ */

/* (1) "Featured Games" section was still DARK — .ocg-section + dark .glow-card
       (#0F0F23 + purple glow). Force the whole block to cream/brutalist. */
#hp-root .ocg-section,
#hp-root .section.homepage-section,
#hp-root .ocg-section .section-header,
#hp-root .games-slider-wrapper,
#hp-root .games-slider,
#hp-root .games-slider.vertical-glow-slider {
  background: transparent !important;
}
#hp-root .ocg-section .section-title,
#hp-root .ocg-section .section-title * { color: var(--nb-ink) !important; }
#hp-root .glow-card-wrapper {
  background: var(--nb-paper) !important;
  border: var(--nb-bd) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#hp-root .glow-card:hover .glow-card-wrapper {
  box-shadow: var(--nb-shadow-sm) !important;
  border-color: var(--nb-ink) !important;
}
#hp-root .gc-bg-blur { filter: none !important; opacity: 0 !important; } /* white letterbox, no dark blur */
#hp-root .glow-card-badge {
  border: var(--nb-bd) !important; border-radius: 0 !important;
  background: var(--nb-yellow) !important; color: var(--nb-ink) !important;
  box-shadow: none !important;
}

/* (2) Make every homepage section heading + "see all" readable (ink on cream) */
#hp-root h1, #hp-root h2, #hp-root h3,
#hp-root [class*="section-title"],
#hp-root [class*="see-all"] { color: var(--nb-ink) !important; }
#hp-root [class*="see-all"] { font-family: var(--nb-font-mono); text-transform: uppercase; }

/* (3) Header action icons (History / Saved = .gv-icon-btn) were invisible
       (light icon on cream). Make them solid brutalist buttons. */
.gv-actions .gv-icon-btn, .gv-icon-btn {
  background: var(--nb-paper) !important;
  border: var(--nb-bd) !important;
  border-radius: 0 !important;
  color: var(--nb-ink) !important;
  box-shadow: none !important;
}
.gv-icon-btn svg { color: var(--nb-ink) !important; stroke: var(--nb-ink) !important; }
.gv-icon-btn:hover { background: var(--nb-yellow) !important; transform: translate(-1px,-1px); box-shadow: var(--nb-shadow-sm) !important; }

/* (4) React game tiles (category/games pages) had no frame.
       Real markup: div.relative.rounded-xl.overflow-hidden.bg-gray-900 (no border class). */
#root .relative.rounded-xl.overflow-hidden,
#root [class*="rounded-xl"][class*="overflow-hidden"],
#root [class*="rounded-2xl"][class*="overflow-hidden"] {
  border: var(--nb-bd) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
#root a:hover > .relative.rounded-xl.overflow-hidden,
#root .group:hover .relative.rounded-xl.overflow-hidden {
  box-shadow: var(--nb-shadow-sm) !important;
}

/* (5) Dark surfaces in React (game page stage = bg-black, tile bg = bg-gray-900)
       → cream paper so nothing stays black. */
#root .bg-black,
#root [class*="bg-gray-9"], #root [class*="bg-zinc-9"],
#root [class*="bg-slate-9"], #root [class*="bg-neutral-9"] {
  background-color: var(--nb-paper) !important;
}
/* The game embed stage: give it a brutalist frame instead of a black void */
#root .bg-black { border: var(--nb-bd) !important; }