/*
 * Shared Personal Gaming Command Centre theme for Qwertyhouse subpages.
 * Loaded after page-specific styles so older pages retain their structure while
 * using the same palette, navigation, surfaces, and interaction language.
 */
:root,
html[data-theme="light"],
html[data-theme="dark"] {
  color-scheme: dark !important;
  --qh-bg: #071019 !important;
  --qh-panel: rgba(7, 18, 27, 0.98) !important;
  --qh-panel-2: rgba(13, 31, 43, 0.96) !important;
  --qh-line: rgba(113, 165, 190, 0.25) !important;
  --qh-line-strong: rgba(66, 217, 232, 0.44) !important;
  --qh-text: #f2f7fa !important;
  --qh-muted: #93a8b5 !important;
  --qh-cyan: #42d9e8 !important;
  --qh-amber: #ffb84d !important;
  --bg: #071019 !important;
  --panel: rgba(7, 18, 27, 0.98) !important;
  --panel-2: rgba(13, 31, 43, 0.96) !important;
  --line: rgba(113, 165, 190, 0.25) !important;
  --line-strong: rgba(66, 217, 232, 0.44) !important;
  --text: #f2f7fa !important;
  --muted: #93a8b5 !important;
  --cyan: #42d9e8 !important;
  --amber: #ffb84d !important;
  --purple: #a98bff !important;
  --theme-bg: #071019 !important;
  --theme-bg-soft: #0b1823 !important;
  --theme-panel: rgba(7, 18, 27, 0.98) !important;
  --theme-panel-2: rgba(13, 31, 43, 0.96) !important;
  --theme-border: rgba(113, 165, 190, 0.25) !important;
  --theme-text: #f2f7fa !important;
  --theme-muted: #93a8b5 !important;
  --theme-accent: #42d9e8 !important;
  --theme-accent-soft: rgba(66, 217, 232, 0.12) !important;
  --theme-highlight: #f2f7fa !important;
}

html,
body {
  color: #f2f7fa !important;
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(66, 217, 232, 0.065), transparent 60%),
    radial-gradient(760px 520px at 90% 8%, rgba(169, 139, 255, 0.04), transparent 62%),
    linear-gradient(180deg, #071019, #040b12 70%) !important;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* A saved legacy light preference can be restored after page load. Match its
 * more-specific selectors so the command-centre shell remains consistently dark. */
html[data-theme="light"] body {
  color: #f2f7fa !important;
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(66, 217, 232, 0.065), transparent 60%),
    radial-gradient(760px 520px at 90% 8%, rgba(169, 139, 255, 0.04), transparent 62%),
    linear-gradient(180deg, #071019, #040b12 70%) !important;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: 0.14 !important;
  background-image:
    linear-gradient(rgba(66, 217, 232, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(66, 217, 232, 0.06) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

/* Shared global navigation used by most static pages. */
.global-topnav-wrap {
  width: min(1320px, calc(100% - 64px)) !important;
  margin: 0 auto 14px !important;
}

.global-topnav {
  min-height: 72px;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(113, 165, 190, 0.16) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

html[data-theme="light"] .global-topnav {
  border-bottom-color: rgba(113, 165, 190, 0.16) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="light"] .page-shell {
  border-color: rgba(113, 165, 190, 0.25) !important;
  color: #f2f7fa !important;
  background:
    linear-gradient(180deg, rgba(8, 18, 27, 0.96), rgba(4, 11, 18, 0.99)),
    radial-gradient(circle at top, rgba(66, 217, 232, 0.045), transparent 44%) !important;
  box-shadow: 0 34px 96px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="light"] .hero-shade {
  background:
    linear-gradient(180deg, rgba(6, 9, 13, 0) 0%, rgba(6, 9, 13, 0.46) 34%, rgba(6, 9, 13, 0.98) 74%),
    linear-gradient(90deg, rgba(6, 9, 13, 0.62), rgba(6, 9, 13, 0.16) 50%, rgba(6, 9, 13, 0.66)) !important;
}

.global-topnav-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  color: #f2f7fa !important;
  text-decoration: none !important;
}

.global-topnav-mark {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 42px !important;
  border: 2px solid #42d9e8 !important;
  border-radius: 50% !important;
  color: #42d9e8 !important;
  background: transparent !important;
  box-shadow: 0 0 28px rgba(66, 217, 232, 0.13) !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
}

.global-topnav-copy strong { color: #f2f7fa !important; }
.global-topnav-copy span { color: #93a8b5 !important; }

.global-topnav-links {
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  gap: 0 !important;
}

.global-topnav-links a {
  position: relative;
  padding: 25px 12px 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #c1ced6 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0.88rem !important;
  text-decoration: none !important;
}

.global-topnav-links a:hover,
.global-topnav-links a:focus-visible,
.global-topnav-links a[aria-current="page"] {
  color: #42d9e8 !important;
  background: transparent !important;
}

.global-topnav-links a[aria-current="page"]::after {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  height: 2px;
  content: "";
  background: #42d9e8;
  box-shadow: 0 0 12px rgba(66, 217, 232, 0.5);
}

/* Dev uses a separate but equivalent topbar vocabulary. */
.page-shell > .topbar,
.arcade-topbar {
  min-height: 72px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(113, 165, 190, 0.16) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.page-shell > .topbar .brand-mark,
.arcade-brand-mark {
  border: 2px solid #42d9e8 !important;
  border-radius: 50% !important;
  color: #42d9e8 !important;
  background: transparent !important;
  box-shadow: 0 0 28px rgba(66, 217, 232, 0.13) !important;
}

.page-shell > .topbar nav a,
.arcade-topbar nav a {
  color: #c1ced6 !important;
  background: transparent !important;
}

.page-shell > .topbar nav a:hover,
.page-shell > .topbar nav a:focus-visible,
.page-shell > .topbar nav a[aria-current="page"],
.arcade-topbar nav a:hover,
.arcade-topbar nav a:focus-visible,
.arcade-topbar nav a[aria-current="page"] {
  color: #42d9e8 !important;
}

/* Neutralize the legacy light-mode overrides while retaining page layouts. */
html[data-theme] main,
html[data-theme] aside,
html[data-theme] .wrap,
html[data-theme] .layout > main,
html[data-theme] .page,
html[data-theme] .panel,
html[data-theme] .card,
html[data-theme] .video-card,
html[data-theme] .feature-card,
html[data-theme] .playlist-card,
html[data-theme] .quick-card,
html[data-theme] .meta-card,
html[data-theme] .source,
html[data-theme] .thumb-card,
html[data-theme] .profile-panel,
html[data-theme] .profile-body,
html[data-theme] .content-card,
html[data-theme] .side-card,
html[data-theme] .qh-legacy-main,
html[data-theme] .qh-now-sidebar,
html[data-theme] .qh-now-card,
html[data-theme] .qh-stream-panel {
  border-color: rgba(113, 165, 190, 0.25) !important;
  color: #f2f7fa !important;
  background: linear-gradient(180deg, rgba(13, 31, 43, 0.96), rgba(7, 18, 27, 0.98)) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="light"] .hero,
html[data-theme="light"] .hero-panel,
html[data-theme="light"] .site-hero,
html[data-theme="light"] .hero-actions,
html[data-theme="light"] .action-card,
html[data-theme="light"] .sidebar-intro,
html[data-theme="light"] .sidebar-playlist {
  border-color: rgba(113, 165, 190, 0.25) !important;
  color: #f2f7fa !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="light"] .action-card,
html[data-theme="light"] .sidebar-intro,
html[data-theme="light"] .sidebar-playlist {
  background: linear-gradient(180deg, rgba(13, 31, 43, 0.96), rgba(7, 18, 27, 0.98)) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="light"] .hero-art,
html[data-theme="light"] .hero-banner {
  filter: saturate(0.92) brightness(0.82) !important;
}

html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3,
html[data-theme] .name,
html[data-theme] .section-title,
html[data-theme] .card-head h2,
html[data-theme] .video-head strong {
  color: #f2f7fa !important;
}

html[data-theme] p,
html[data-theme] .lead,
html[data-theme] .bio,
html[data-theme] .sub,
html[data-theme] .meta,
html[data-theme] .status,
html[data-theme] .section-note,
html[data-theme] .form-note,
html[data-theme] .card-foot {
  color: #93a8b5 !important;
}

html[data-theme] input,
html[data-theme] textarea,
html[data-theme] select,
html[data-theme] button {
  border-color: rgba(113, 165, 190, 0.3) !important;
  color: #f2f7fa !important;
  background: #0b1823 !important;
}

html[data-theme] a { color: #42d9e8; }

/* Shared card finish for pages that do not use the theme variables. */
.post-card a,
.download-card,
.link-card,
.social-card,
.profile-card {
  border-color: rgba(113, 165, 190, 0.25) !important;
  color: #f2f7fa !important;
  background: linear-gradient(180deg, rgba(13, 31, 43, 0.96), rgba(7, 18, 27, 0.98)) !important;
}

.eyebrow,
.kicker,
.arcade-kicker,
.qh-now-label,
.qh-twitch-embed-label {
  color: #42d9e8 !important;
}

.theme-toggle { display: none !important; }

/* Inline URLs in Bluesky posts are independent links. Disable the legacy
 * full-card pseudo-link so it cannot intercept them. */
.qh-now-card a::after { display: none !important; }

.qh-now-card .qh-inline-link,
.now-card .bluesky-inline-link,
.bluesky-card .bluesky-inline-link {
  position: relative !important;
  z-index: 1 !important;
  color: #42d9e8 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  overflow-wrap: anywhere !important;
}

.bluesky-post-link,
.now-card-cta {
  display: inline-block !important;
  color: #42d9e8 !important;
  font-weight: 750 !important;
  text-decoration: none !important;
}

/* Front-page geometry for legacy creator-hub subpages. The markup differs from
 * the home page, so these selectors reproduce the same shell without changing
 * each page's content structure. */
.page-shell {
  width: min(1320px, calc(100% - 64px)) !important;
  margin: 0 auto !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.site-hero {
  min-height: 505px !important;
  padding: 0 !important;
  overflow: visible !important;
}

.site-hero .hero-art {
  width: 100% !important;
  height: 387px !important;
  border: 1px solid rgba(113, 165, 190, 0.25) !important;
  border-radius: 10px 10px 0 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.site-hero .hero-shade {
  inset: 0 0 auto !important;
  width: 100% !important;
  height: 387px !important;
  border-radius: 10px 10px 0 0 !important;
}

.site-hero .hero-inner {
  position: absolute !important;
  z-index: 2 !important;
  bottom: 118px !important;
  left: 28px !important;
  width: auto !important;
  min-width: 470px !important;
  display: grid !important;
  grid-template-columns: 138px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 14px 26px 18px 18px !important;
  border: 1px solid rgba(66, 217, 232, 0.44) !important;
  border-bottom: 0 !important;
  border-radius: 15px 15px 0 0 !important;
  color: #f2f7fa !important;
  background: linear-gradient(135deg, rgba(8, 22, 33, 0.96), rgba(6, 17, 26, 0.92)) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.38) !important;
}

.site-hero .hero-copy { transform: none !important; }
.site-hero .hero-copy h1 {
  margin-bottom: 8px !important;
  color: #f2f7fa !important;
  font-size: clamp(2rem, 3vw, 2.8rem) !important;
  line-height: 1 !important;
}
.site-hero .hero-copy p {
  margin-bottom: 0 !important;
  color: #bed0da !important;
  font-size: 1.05rem !important;
}
.site-hero .avatar-home-link,
.site-hero .avatar {
  width: 138px !important;
}
.site-hero .avatar {
  border: 2px solid #42d9e8 !important;
  box-shadow: 0 0 26px rgba(66, 217, 232, 0.17) !important;
}

.site-hero .hero-actions {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
}

.site-hero .action-card {
  min-height: 104px !important;
  padding: 18px 24px !important;
  border: 1px solid rgba(113, 165, 190, 0.25) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, rgba(13, 31, 43, 0.96), rgba(7, 18, 27, 0.96)) !important;
  box-shadow: none !important;
}
.site-hero .action-card span { color: #f2f7fa !important; font-size: 1.08rem !important; }
.site-hero .action-card small { color: #93a8b5 !important; }

.qh-layout-with-now {
  width: min(1260px, calc(100% - 64px)) !important;
  grid-template-columns: minmax(0, 1fr) 350px !important;
  gap: 14px !important;
  margin: 14px auto 0 !important;
}

.qh-layout-with-now .content-card,
.qh-layout-with-now .qh-now-sidebar {
  border-radius: 9px !important;
}

.site-footer {
  width: min(1320px, calc(100% - 64px)) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  border-top: 1px solid rgba(113, 165, 190, 0.25) !important;
}

/* Keep long social text and embeds inside sidebars on every legacy page. */
.qh-now-sidebar,
.qh-now-sidebar > *,
.qh-now-card,
.qh-stream-panel,
.qh-twitch-player,
.side-card,
.side-card > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

.qh-now-card,
.qh-stream-panel,
.qh-twitch-player,
.side-card {
  overflow: hidden !important;
}

.qh-now-card p,
.qh-stream-panel p,
.side-card p {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.qh-twitch-player iframe,
.side-card iframe {
  width: 100% !important;
  max-width: 100% !important;
}

/* The Pictures archive still loads the legacy site-theme stylesheet, which
 * contains hard-coded light-mode surfaces. Keep those archive components in
 * the command-centre palette when an old saved light preference is present. */
html[data-theme="light"] .hero {
  border-color: rgba(113, 165, 190, 0.25) !important;
  color: #f2f7fa !important;
  background: linear-gradient(180deg, rgba(13, 31, 43, 0.96), rgba(7, 18, 27, 0.98)) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .btn,
html[data-theme="light"] .nav-list a,
html[data-theme="light"] .pill,
html[data-theme="light"] .circle,
html[data-theme="light"] .link,
html[data-theme="light"] .profile-tab,
html[data-theme="light"] .hero-btn {
  border-color: rgba(113, 165, 190, 0.3) !important;
  color: #f2f7fa !important;
  background: #0b1823 !important;
}

html[data-theme="light"] .hero-btn-primary {
  border-color: rgba(66, 217, 232, 0.44) !important;
  color: #04121c !important;
  background: linear-gradient(135deg, rgba(66, 217, 232, 0.9), rgba(53, 180, 218, 0.9)) !important;
}

/* The links page keeps its pills inside a .topbar-wrap wrapper, which the legacy
   site-theme light rules paint white with higher specificity. Match it. */
html[data-theme="light"] .topbar-wrap .pill,
html[data-theme="light"] .topbar-wrap .circle {
  border-color: rgba(113, 165, 190, 0.3) !important;
  color: #f2f7fa !important;
  background: #0b1823 !important;
}

html[data-theme="light"] .list a,
html[data-theme="light"] .list .item-link {
  border-color: rgba(113, 165, 190, 0.3) !important;
  color: #f2f7fa !important;
  background: #0b1823 !important;
}

html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .search-row input,
html[data-theme="light"] .search-row select,
html[data-theme="light"] select {
  border-color: rgba(113, 165, 190, 0.3) !important;
  color: #f2f7fa !important;
  background: #0b1823 !important;
}

html[data-theme="light"] .hero-panel,
html[data-theme="light"] .profile-body,
html[data-theme="light"] .quick-card {
  border-color: rgba(113, 165, 190, 0.25) !important;
  color: #f2f7fa !important;
  background: linear-gradient(180deg, rgba(13, 31, 43, 0.96), rgba(7, 18, 27, 0.98)) !important;
}

html[data-theme="light"] .latest-sync {
  border-color: rgba(102, 192, 244, 0.22) !important;
  color: #f2f7fa !important;
  background: linear-gradient(180deg, rgba(22, 32, 45, 0.86), rgba(11, 17, 25, 0.82)) !important;
}

html[data-theme="light"] .latest-card,
html[data-theme="light"] .picture-card {
  border-color: rgba(113, 165, 190, 0.25) !important;
  color: #f2f7fa !important;
  background: #0e151f !important;
}

html[data-theme="light"] .latest-card span,
html[data-theme="light"] .picture-copy {
  border-color: rgba(255, 255, 255, 0.04) !important;
  background: linear-gradient(180deg, #121a25, #0b1119) !important;
}

html[data-theme="light"] .status {
  color: #93a8b5 !important;
  background: transparent !important;
}

@media (max-width: 1080px) {
  .global-topnav-wrap { width: min(100% - 28px, 1320px) !important; }
  .global-topnav { align-items: flex-start !important; flex-direction: column !important; padding: 16px 0 !important; }
  .global-topnav-links { justify-content: flex-start !important; }
  .global-topnav-links a { padding: 8px 11px 12px !important; }
  .global-topnav-links a[aria-current="page"]::after { right: 11px; bottom: 5px; left: 11px; }
  .page-shell { width: min(100% - 28px, 1320px) !important; }
  .qh-layout-with-now { grid-template-columns: 1fr !important; }
}

@media (max-width: 700px) {
  .global-topnav-copy span { display: none !important; }
  .global-topnav-links { width: 100% !important; }
  .page-shell { width: 100% !important; }
  .site-hero { min-height: 705px !important; }
  .site-hero .hero-art,
  .site-hero .hero-shade { height: 351px !important; border-right: 0 !important; border-left: 0 !important; border-radius: 0 !important; }
  .site-hero .hero-inner {
    right: 14px !important;
    bottom: 354px !important;
    left: 14px !important;
    min-width: 0 !important;
    grid-template-columns: 88px minmax(0, 1fr) !important;
    padding: 14px !important;
    border-bottom: 1px solid rgba(66, 217, 232, 0.44) !important;
    border-radius: 14px !important;
  }
  .site-hero .avatar-home-link,
  .site-hero .avatar { width: 88px !important; }
  .site-hero .hero-copy h1 { font-size: 1.7rem !important; }
  .site-hero .hero-copy p { font-size: 0.88rem !important; }
  .site-hero .hero-actions { right: 14px !important; left: 14px !important; width: auto !important; grid-template-columns: 1fr !important; }
  .site-hero .action-card { min-height: 104px !important; padding: 14px !important; }
  .qh-layout-with-now { width: calc(100% - 28px) !important; }
  .site-footer { width: calc(100% - 28px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}