/* ============================================================
   RIVAL GAMING — WORLD-CLASS DESIGN SYSTEM v6
   Strategy: Bold surface contrast + DohTheme-matching selectors
   DohTheme uses rgb(22,24,30) on nearly everything.
   We create VISIBLE depth by using contrasting surface levels.
   ============================================================ */

/* ----------------------------------------------------------
   1. DESIGN TOKENS — More contrast between layers
   ---------------------------------------------------------- */
:root {
  --rg-page-bg: #0e0e14;
  --rg-surface-card: #1a1a24;
  --rg-surface-inset: #141418;
  --rg-surface-elevated: #22222e;
  --rg-surface-hover: #262632;
  --rg-border-subtle: rgba(255, 255, 255, 0.07);
  --rg-border-medium: rgba(255, 255, 255, 0.12);
  --rg-border-accent: rgba(165, 180, 252, 0.4);
  --rg-text-primary: #eaedf0;
  --rg-text-secondary: rgba(255, 255, 255, 0.6);
  --rg-text-muted: rgba(255, 255, 255, 0.35);
  --rg-accent: #a5b4fc;
  --rg-accent-glow: rgba(165, 180, 252, 0.12);
  --rg-radius-sm: 6px;
  --rg-radius-md: 10px;
  --rg-radius-lg: 14px;
  --rg-shadow-card: 0 2px 8px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
  --rg-shadow-elevated: 0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  --rg-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----------------------------------------------------------
   2. PAGE BACKGROUND — Darker base so cards pop
   ---------------------------------------------------------- */
html body .p-body {
  background-color: var(--rg-page-bg);
}

/* ----------------------------------------------------------
   3. GLOBAL POLISH
   ---------------------------------------------------------- */
html body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html body ::-webkit-scrollbar { width: 8px; }
html body ::-webkit-scrollbar-track { background: var(--rg-page-bg); }
html body ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
html body ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }
html body ::selection { background: rgba(165, 180, 252, 0.35); color: #fff; }

/* ----------------------------------------------------------
   4. BLOCK CONTAINERS — Cards that lift off the page
   DohTheme: .block-container { bg: rgb(22,24,30) } = 0-1-0
   Our selector: html body .p-body .block-container = 0-2-2 (wins)
   ---------------------------------------------------------- */
html body .p-body .block-container {
  background-color: var(--rg-surface-card);
  border: 1px solid var(--rg-border-subtle);
  border-radius: var(--rg-radius-md);
  box-shadow: var(--rg-shadow-card);
}

/* ----------------------------------------------------------
   5. CATEGORY HEADERS — Clear accent treatment
   DohTheme: .p-body .block.block--category .block-header = 0-4-0
   Our selector: html body .p-body .block.block--category .block-header = 0-4-2 (wins)
   ---------------------------------------------------------- */
html body .p-body .block.block--category .block-header {
  background: linear-gradient(135deg, rgba(165, 180, 252, 0.1) 0%, rgba(139, 92, 246, 0.06) 100%);
  border-left: 3px solid var(--rg-accent);
  padding: 14px 20px 14px 16px;
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: 700;
}

/* Reset generic block-header bg so category one shows through */
html body .p-body .block-header {
  background-color: var(--rg-surface-card);
  font-weight: 700;
}

/* ----------------------------------------------------------
   6. FORUM NODE ROWS — Clean separators + hover
   DohTheme: .node-body:hover { bg: rgba(139,92,246,0.05) } = 0-2-0
   Our selector: html body .p-body .node-body:hover = 0-2-2 (wins)
   ---------------------------------------------------------- */
html body .p-body .node .node-body {
  border-bottom: 1px solid var(--rg-border-subtle);
  transition: background-color var(--rg-transition);
}

html body .p-body .node .node-body:hover {
  background-color: var(--rg-surface-hover);
}

/* Node title — bolder, white */
html body .p-body .node-title a {
  font-weight: 700;
  font-size: 15px;
  color: var(--rg-text-primary);
  transition: color var(--rg-transition);
}

html body .p-body .node-title a:hover {
  color: var(--rg-accent);
}

/* Node meta text */
html body .p-body .node-meta {
  font-size: 11px;
  color: var(--rg-text-muted);
  letter-spacing: 0.3px;
}

/* Node stats — muted labels, bold numbers */
html body .p-body .node-stats dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--rg-text-muted);
}

html body .p-body .node-stats dd {
  font-weight: 700;
  color: var(--rg-text-primary);
}

/* ----------------------------------------------------------
   7. THREAD LIST (structItem) — Cleaner rows
   ---------------------------------------------------------- */
html body .p-body .structItem {
  border-bottom: 1px solid var(--rg-border-subtle);
  transition: background-color var(--rg-transition);
}

html body .p-body .structItem:hover {
  background-color: var(--rg-surface-hover);
}

html body .p-body .structItem-title a {
  font-weight: 700;
  font-size: 15px;
  color: var(--rg-text-primary);
  transition: color var(--rg-transition);
}

html body .p-body .structItem-title a:hover {
  color: var(--rg-accent);
}

/* Thread meta — muted small text */
html body .p-body .structItem-minor {
  font-size: 11px;
  color: var(--rg-text-muted);
}

html body .p-body .structItem-cell--meta {
  font-size: 11px;
}

html body .p-body .structItem-cell--meta dt {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
  color: var(--rg-text-muted);
}

html body .p-body .structItem-cell--meta dd {
  font-weight: 700;
  color: var(--rg-text-primary);
}

/* ----------------------------------------------------------
   8. POST CARDS (messages) — Real card depth
   DohTheme: .message { no specific styling }
   ---------------------------------------------------------- */
html body .p-body .message {
  background-color: var(--rg-surface-card);
  border: 1px solid var(--rg-border-medium);
  border-radius: var(--rg-radius-md);
  box-shadow: var(--rg-shadow-card);
  margin-bottom: 16px;
  overflow: hidden;
}

/* User info sidebar in posts — darker inset */
html body .p-body .message-user {
  background-color: var(--rg-surface-inset);
  border-right: 1px solid var(--rg-border-subtle);
}

/* Username in posts */
html body .p-body .message-name a {
  font-weight: 700;
  font-size: 14px;
}

/* User title below name */
html body .p-body .message .userTitle {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--rg-text-muted);
}

/* User stats in post sidebar */
html body .p-body .message-userExtras dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--rg-text-muted);
}

html body .p-body .message-userExtras dd {
  font-weight: 700;
  font-size: 13px;
  color: var(--rg-text-primary);
}

/* Post body — generous line height */
html body .p-body .message-body .bbWrapper {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--rg-text-primary);
}

/* Post action bar */
html body .p-body .message-footer .actionBar-set a {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--rg-text-muted);
  transition: color var(--rg-transition);
}

html body .p-body .message-footer .actionBar-set a:hover {
  color: var(--rg-accent);
}

/* Post timestamp */
html body .p-body .message-attribution-main a {
  font-size: 11px;
  color: var(--rg-text-muted);
}

/* ----------------------------------------------------------
   9. THREAD PAGE TITLE — Big, bold, commanding
   ---------------------------------------------------------- */
html body .p-body .p-title-value {
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #fff;
}

/* ----------------------------------------------------------
   10. PAGINATION — Pill style
   DohTheme: .pageNav-page > a { bg: rgb(22,24,30) } = 0-1-1
   ---------------------------------------------------------- */
html body .p-body .pageNav-page > a {
  border-radius: 6px;
  border: 1px solid var(--rg-border-subtle);
  background-color: var(--rg-surface-card);
  font-weight: 600;
  font-size: 13px;
  transition: all var(--rg-transition);
}

html body .p-body .pageNav-page > a:hover {
  background-color: var(--rg-surface-hover);
  border-color: var(--rg-border-medium);
}

html body .p-body .pageNav-page--current > a {
  background-color: var(--rg-accent);
  color: #0e0e14;
  border-color: var(--rg-accent);
  font-weight: 700;
}

html body .p-body .pageNav-jump {
  border-radius: 6px;
  border: 1px solid var(--rg-border-subtle);
  background-color: var(--rg-surface-card);
  transition: all var(--rg-transition);
}

html body .p-body .pageNav-jump:hover {
  background-color: var(--rg-accent);
  color: #0e0e14;
  border-color: var(--rg-accent);
}

/* ----------------------------------------------------------
   11. PRIMARY BUTTONS — Gradient accent
   DohTheme: .button.button--primary { bg: rgb(167,69,217) } = 0-2-0
   Our: html body .button.button--primary = 0-2-2 (wins)
   ---------------------------------------------------------- */
html body .button.button--primary,
html body a.button.button--primary {
  background: linear-gradient(135deg, #a5b4fc 0%, #8b9cf7 100%);
  color: #0e0e14;
  border: none;
  border-radius: var(--rg-radius-sm);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(165, 180, 252, 0.25);
  transition: all var(--rg-transition);
  text-shadow: none;
}

html body .button.button--primary:hover,
html body a.button.button--primary:hover {
  background: linear-gradient(135deg, #b8c4fd 0%, #a5b4fc 100%);
  box-shadow: 0 4px 16px rgba(165, 180, 252, 0.35);
  transform: translateY(-1px);
}

/* ----------------------------------------------------------
   12. SECONDARY/LINK BUTTONS
   ---------------------------------------------------------- */
html body .p-body .button--link {
  color: var(--rg-accent);
  font-weight: 600;
  transition: color var(--rg-transition);
}

html body .p-body .button--link:hover {
  color: #c4cdfe;
}

/* ----------------------------------------------------------
   13. INPUT FIELDS — Dark inset + focus accent
   ---------------------------------------------------------- */
html body .p-body input[type="text"],
html body .p-body input[type="search"],
html body .p-body input[type="email"],
html body .p-body input[type="password"],
html body .p-body input[type="url"],
html body .p-body textarea,
html body .p-body select {
  background-color: var(--rg-surface-inset);
  border: 1px solid var(--rg-border-medium);
  border-radius: var(--rg-radius-sm);
  color: var(--rg-text-primary);
  transition: border-color var(--rg-transition), box-shadow var(--rg-transition);
}

html body .p-body input[type="text"]:focus,
html body .p-body input[type="search"]:focus,
html body .p-body input[type="email"]:focus,
html body .p-body input[type="password"]:focus,
html body .p-body input[type="url"]:focus,
html body .p-body textarea:focus,
html body .p-body select:focus {
  border-color: var(--rg-accent);
  box-shadow: 0 0 0 3px var(--rg-accent-glow);
  outline: none;
}

/* ----------------------------------------------------------
   14. BREADCRUMBS — Muted links
   ---------------------------------------------------------- */
html body .p-body .p-breadcrumbs a {
  color: var(--rg-text-muted);
  font-size: 12px;
  transition: color var(--rg-transition);
}

html body .p-body .p-breadcrumbs a:hover {
  color: var(--rg-accent);
}

/* ----------------------------------------------------------
   15. TABS — Clean active indicator
   ---------------------------------------------------------- */
html body .p-body .tabs-tab {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  color: var(--rg-text-secondary);
  transition: color var(--rg-transition);
}

html body .p-body .tabs-tab:hover {
  color: var(--rg-text-primary);
}

html body .p-body .tabs-tab.is-active {
  color: var(--rg-accent);
  border-bottom-color: var(--rg-accent);
}

/* ----------------------------------------------------------
   16. PROFILE PAGE — Stats + tabs
   ---------------------------------------------------------- */
html body .p-body .memberHeader-stats .pairs dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--rg-text-muted);
}

html body .p-body .memberHeader-stats .pairs dd {
  font-weight: 700;
  font-size: 18px;
  color: var(--rg-text-primary);
}

html body .p-body .memberHeader-content .userTitle {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--rg-text-secondary);
}

/* ----------------------------------------------------------
   17. ALERTS PAGE — Accent border on unread
   ---------------------------------------------------------- */
html body .p-body .alert.is-unread {
  border-left: 3px solid var(--rg-accent);
  background-color: var(--rg-surface-elevated);
}

html body .p-body .alert {
  transition: background-color var(--rg-transition);
  border-bottom: 1px solid var(--rg-border-subtle);
}

html body .p-body .alert:hover {
  background-color: var(--rg-surface-hover);
}

/* ----------------------------------------------------------
   18. CONVERSATIONS — Clean thread styling
   ---------------------------------------------------------- */
html body .p-body .structItem--conversation.is-unread {
  border-left: 3px solid var(--rg-accent);
  background-color: var(--rg-surface-elevated);
}

/* ----------------------------------------------------------
   19. OVERLAYS / MODALS
   ---------------------------------------------------------- */
html body .overlay-container {
  background-color: var(--rg-surface-card);
  border: 1px solid var(--rg-border-medium);
  border-radius: var(--rg-radius-lg);
  box-shadow: var(--rg-shadow-elevated);
}

/* ----------------------------------------------------------
   20. NOTICE / ERROR BANNERS
   ---------------------------------------------------------- */
html body .p-body .blockMessage--error {
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--rg-radius-sm);
  color: #fca5a5;
}

html body .p-body .blockMessage--important {
  background-color: var(--rg-accent-glow);
  border: 1px solid var(--rg-border-accent);
  border-radius: var(--rg-radius-sm);
}

/* ----------------------------------------------------------
   21. REGISTRATION / AUTH FORMS
   ---------------------------------------------------------- */
html body .p-body .block--registrationForm .block-container {
  background-color: var(--rg-surface-card);
  border: 1px solid var(--rg-border-medium);
  border-radius: var(--rg-radius-lg);
  box-shadow: var(--rg-shadow-elevated);
}

html body .p-body .formRow {
  border-bottom: 1px solid var(--rg-border-subtle);
  padding: 14px 0;
}

html body .p-body .formRow-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--rg-text-primary);
}

/* ----------------------------------------------------------
   22. EDITOR / REPLY BOX
   ---------------------------------------------------------- */
html body .p-body .fr-box {
  background-color: var(--rg-surface-inset);
  border: 1px solid var(--rg-border-medium);
  border-radius: var(--rg-radius-md);
}

html body .p-body .fr-toolbar {
  background-color: var(--rg-surface-card);
  border-bottom: 1px solid var(--rg-border-subtle);
}

/* Quick reply section */
html body .p-body .block--messages + .block {
  background-color: var(--rg-surface-card);
  border: 1px solid var(--rg-border-medium);
  border-radius: var(--rg-radius-md);
}

/* ----------------------------------------------------------
   23. MEMBER LIST — Clean rows
   ---------------------------------------------------------- */
html body .p-body .contentRow {
  border-bottom: 1px solid var(--rg-border-subtle);
  transition: background-color var(--rg-transition);
}

html body .p-body .contentRow:hover {
  background-color: var(--rg-surface-hover);
}

/* ----------------------------------------------------------
   24. SEARCH RESULTS
   ---------------------------------------------------------- */
html body .p-body .block--search .contentRow-title a {
  font-weight: 700;
  font-size: 15px;
  color: var(--rg-text-primary);
}

html body .p-body .block--search .contentRow-snippet {
  color: var(--rg-text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

/* ----------------------------------------------------------
   25. ACCOUNT SETTINGS
   ---------------------------------------------------------- */
html body .p-body .block--account .block-container {
  background-color: var(--rg-surface-card);
  border: 1px solid var(--rg-border-subtle);
  border-radius: var(--rg-radius-md);
}

/* ----------------------------------------------------------
   26. EMPTY STATE MESSAGES
   ---------------------------------------------------------- */
html body .p-body .block-row--none {
  color: var(--rg-text-muted);
  font-style: italic;
  text-align: center;
  padding: 32px 16px;
}

/* ----------------------------------------------------------
   27. WIDGET BLOCKS (sidebar etc)
   ---------------------------------------------------------- */
html body .p-body-sidebar .block {
  border-radius: var(--rg-radius-md);
  overflow: hidden;
}

html body .p-body-sidebar .block-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  color: var(--rg-text-secondary);
}

/* ----------------------------------------------------------
   28. FOCUS RINGS — Accent outline on interactive elements
   ---------------------------------------------------------- */
html body .p-body a:focus-visible,
html body .p-body button:focus-visible,
html body .p-body .button:focus-visible {
  outline: 2px solid var(--rg-accent);
  outline-offset: 2px;
}

/* ----------------------------------------------------------
   29. TOOLTIP STYLING
   ---------------------------------------------------------- */
html body .tooltip-content {
  background-color: var(--rg-surface-elevated);
  border: 1px solid var(--rg-border-medium);
  border-radius: var(--rg-radius-sm);
  box-shadow: var(--rg-shadow-elevated);
  font-size: 12px;
  color: var(--rg-text-primary);
}

/* ----------------------------------------------------------
   30. SHARE PAGE BUTTONS
   ---------------------------------------------------------- */
html body .p-body .shareButtons .shareButtons-button {
  border: 1px solid var(--rg-border-medium);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--rg-text-secondary);
  transition: all var(--rg-transition);
}

html body .p-body .shareButtons .shareButtons-button:hover {
  border-color: var(--rg-accent);
  color: var(--rg-accent);
  background-color: var(--rg-accent-glow);
}

/* ----------------------------------------------------------
   31. FOOTER AREA
   ---------------------------------------------------------- */
html body .p-footer {
  border-top: 1px solid var(--rg-border-subtle);
}

/* ----------------------------------------------------------
   32. MOBILE RESPONSIVE — ≤650px
   ---------------------------------------------------------- */
@media (max-width: 650px) {
  html body .p-body .message-user {
    border-right: none;
    border-bottom: 1px solid var(--rg-border-subtle);
  }

  html body .p-body .block.block--category .block-header {
    font-size: 10px;
    padding: 12px 14px 12px 12px;
  }

  html body .p-body .message {
    border-radius: var(--rg-radius-sm);
  }

  html body .p-body .structItem-title a {
    font-size: 14px;
  }
}

/* ----------------------------------------------------------
   33. TABLET — 651-820px
   ---------------------------------------------------------- */
@media (min-width: 651px) and (max-width: 820px) {
  html body .p-body .message {
    border-radius: var(--rg-radius-sm);
    margin-bottom: 12px;
  }
}

/* ----------------------------------------------------------
   34. LINK HOVER ACCENT — Site-wide
   ---------------------------------------------------------- */
html body .p-body .p-body-main a:hover {
  color: var(--rg-accent);
}

/* ----------------------------------------------------------
   35. UNREAD THREAD INDICATORS
   ---------------------------------------------------------- */
html body .p-body .structItem.is-unread .structItem-title a {
  color: #fff;
  font-weight: 800;
}

/* ----------------------------------------------------------
   36. BLOCK FILTER BAR
   ---------------------------------------------------------- */
html body .p-body .block-filterBar {
  background-color: var(--rg-surface-inset);
  border-bottom: 1px solid var(--rg-border-subtle);
  border-radius: var(--rg-radius-md) var(--rg-radius-md) 0 0;
}

/* ----------------------------------------------------------
   37. TAG CLOUD
   ---------------------------------------------------------- */
html body .p-body .tagList-tag {
  background-color: var(--rg-surface-inset);
  border: 1px solid var(--rg-border-subtle);
  border-radius: 20px;
  font-size: 12px;
  color: var(--rg-text-secondary);
  transition: all var(--rg-transition);
}

html body .p-body .tagList-tag:hover {
  border-color: var(--rg-accent);
  color: var(--rg-accent);
}

/* Fix: Search bar should be neutral, not purple */
.rg-header-search-input,
.rg-header-search-input:focus,
.p-header .p-header-content .p-header-searchBar input,
.p-header-searchBar .input,
html body .rg-header-search-input {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
  outline: none;
}
.rg-header-search-input:focus,
html body .rg-header-search-input:focus {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: none;
}