/* social.gamefan.net — NOVA theme */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&display=swap');

/* ── Design Tokens ───────────────────────────── */
:root {
  --nv-bg:       #08090e;
  --nv-surface:  rgba(14, 15, 26, 0.90);
  --nv-border:   rgba(120, 90, 210, 0.22);
  --nv-border-h: rgba(147, 51, 234, 0.55);
  --nv-violet:   #8b5cf6;
  --nv-cyan:     #22d3ee;
  --nv-pink:     #e879f9;
  --nv-text:     #dde1f0;
  --nv-muted:    #5a627a;
  --mario-badge: url('https://img.icons8.com/color/48/super-mario.png');
}

/* ── Background ─────────────────────────────── */
body,
.ui,
.app-body {
  background: var(--nv-bg) !important;
  background-image:
    radial-gradient(ellipse 90% 50% at 50% -5%, rgba(139,92,246,0.14), transparent),
    radial-gradient(ellipse 60% 30% at 90% 100%, rgba(34,211,238,0.06), transparent) !important;
  background-attachment: fixed !important;
  font-family: 'Geist', system-ui, -apple-system, sans-serif !important;
}

.columns-area,
.columns-area__panels,
.scrollable {
  background: transparent !important;
}

/* Disable fixed bg on mobile/touch (perf + Safari compatibility) */
@media (max-width: 768px) {
  body, .ui, .app-body {
    background-attachment: scroll !important;
  }
}

/* ── Timeline Columns (transparent containers) ── */
/* Only the main column wrapper — posts have their own glass */
.column {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Compose/search drawer — semi-opaque solid for contrast */
.drawer__inner {
  background: rgba(10, 11, 22, 0.88) !important;
  backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* ── Post Cards — THE WINDOWS ───────────────── */
.status {
  background:
    linear-gradient(rgba(14,15,26,0.90), rgba(10,11,20,0.94)) padding-box,
    linear-gradient(135deg, rgba(139,92,246,0.4) 0%, rgba(34,211,238,0.22) 55%, rgba(139,92,246,0.18) 100%) border-box !important;
  border: 1px solid transparent !important;
  border-radius: 20px !important;
  margin: 0 0 10px 0 !important;
  padding: 16px 20px !important;
  backdrop-filter: blur(10px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.15) !important;
  box-shadow:
    0 2px 16px rgba(0,0,0,0.5),
    0 1px 0 rgba(255,255,255,0.04) inset !important;
  transition: box-shadow 0.25s ease, transform 0.18s ease !important;
}

/* Hover lift (scoped to the focusable row for correct hit area) */
.focusable:hover .status,
.focusable:focus-within .status {
  box-shadow:
    0 6px 28px rgba(0,0,0,0.6),
    0 0 0 1px rgba(139,92,246,0.45),
    0 1px 0 rgba(255,255,255,0.07) inset !important;
  transform: translateY(-2px) !important;
}

/* Detailed / expanded post */
.detailed-status {
  background:
    linear-gradient(rgba(17,18,32,0.92), rgba(12,13,24,0.96)) padding-box,
    linear-gradient(135deg, rgba(139,92,246,0.45), rgba(34,211,238,0.28)) border-box !important;
  border: 1px solid transparent !important;
  border-radius: 20px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 20px !important;
}

/* ── Avatars ─────────────────────────────────── */
.account__avatar,
.status__avatar .account__avatar {
  border-radius: 14px !important;
  box-shadow: 0 0 0 2px rgba(139,92,246,0.3) !important;
  transition: box-shadow 0.2s !important;
}

.focusable:hover .account__avatar {
  box-shadow: 0 0 0 2px rgba(139,92,246,0.7), 0 0 10px rgba(139,92,246,0.25) !important;
}

/* ── Display Names — gradient text ──────────── */
.display-name strong,
.status__display-name strong,
.account__header__tabs__name h1 strong {
  background: linear-gradient(90deg, #c084fc 0%, #22d3ee 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
  font-family: 'Geist', sans-serif !important;
}

.display-name span,
.status__display-name span,
.account__header__tabs__name h1 small {
  color: var(--nv-muted) !important;
  font-size: 13px !important;
}

/* Force horizontal name layout */
.display-name,
.account__header__tabs__name,
.account__header__tabs__name h1,
.navigation-bar__profile-account {
  display: inline-flex !important;
  align-items: center !important;
  flex-direction: row !important;
}

.display-name span,
.account__header__tabs__name h1 small {
  margin-left: 6px !important;
}

/* ── Mario Badge ─────────────────────────────── */
.display-name::after { content: none !important; }

.navigation-bar__profile-account::after,
.account__header__tabs__name h1::after,
[href$='/@david'] .display-name::after,
[href$='/@david'].display-name::after,
[href$='/@System'] .display-name::after,
[href$='/@System'].display-name::after {
  content: '' !important;
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  background-image: var(--mario-badge) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  filter: drop-shadow(0 0 5px rgba(255,0,0,0.4)) !important;
  margin-left: 8px !important;
  flex-shrink: 0 !important;
}

/* Navigation bar (your own username in sidebar) */
.navigation-bar__profile-account,
.navigation-bar__profile-account * {
  font-family: 'Geist', sans-serif !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

/* ── Post Body Text ──────────────────────────── */
.status__content {
  color: var(--nv-text) !important;
  font-family: 'Geist', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}

/* ── Links & Hashtags ────────────────────────── */
.status__content a,
.status-link {
  color: #818cf8 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(129,140,248,0.3) !important;
  transition: color 0.15s, border-color 0.15s !important;
}

.status__content a:hover {
  color: #c084fc !important;
  border-bottom-color: rgba(192,132,252,0.55) !important;
}

/* ── Action Bar (reply / boost / favourite) ──── */
.status__action-bar {
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  margin-top: 12px !important;
  padding-top: 10px !important;
}

.status__action-bar button,
.status__action-bar a {
  color: var(--nv-muted) !important;
  border-radius: 8px !important;
  transition: color 0.2s, transform 0.15s !important;
}

.status__action-bar button:hover {
  color: var(--nv-violet) !important;
  transform: scale(1.15) !important;
}

/* ── Notifications ───────────────────────────── */
.notification {
  background:
    linear-gradient(rgba(14,15,26,0.78), rgba(10,11,20,0.85)) padding-box,
    linear-gradient(135deg, rgba(139,92,246,0.28), rgba(34,211,238,0.13)) border-box !important;
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  margin-bottom: 8px !important;
  transition: box-shadow 0.2s !important;
}

.notification:hover {
  box-shadow: 0 4px 20px rgba(139,92,246,0.15) !important;
}

/* ── Column Header ───────────────────────────── */
.column-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(139,92,246,0.15) !important;
}

.column-header__title {
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  font-family: 'Geist', sans-serif !important;
}

/* ── Navigation Panel (Left Sidebar) ─────────── */
.navigation-panel {
  border-right: 1px solid rgba(139,92,246,0.12) !important;
}

.column-link {
  border-radius: 12px !important;
  transition: background 0.2s, color 0.2s !important;
  margin: 2px 8px !important;
}

.column-link:hover {
  background: rgba(139,92,246,0.12) !important;
  color: #c084fc !important;
}

.column-link.active,
.column-link--active {
  background: rgba(139,92,246,0.18) !important;
  color: #c084fc !important;
}

/* ── Profile Header ──────────────────────────── */
/* Note: no overflow:hidden here — banner/avatar need to overflow */
.account__header {
  background:
    linear-gradient(rgba(14,15,26,0.85), rgba(10,11,20,0.90)) padding-box,
    linear-gradient(135deg, rgba(139,92,246,0.38), rgba(34,211,238,0.22)) border-box !important;
  border: 1px solid transparent !important;
  border-radius: 20px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  margin: 8px !important;
}

/* ── Compose Form ────────────────────────────── */
.compose-form {
  background:
    linear-gradient(rgba(14,15,26,0.85), rgba(10,11,20,0.90)) padding-box,
    linear-gradient(135deg, rgba(139,92,246,0.32), rgba(34,211,238,0.16)) border-box !important;
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  padding: 12px !important;
  margin-bottom: 10px !important;
}

/* ── Primary Buttons (post/submit) ───────────── */
.button.button-primary {
  background: linear-gradient(135deg, #7c3aed 0%, #0891b2 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-family: 'Geist', sans-serif !important;
  box-shadow: 0 2px 12px rgba(124,58,237,0.3) !important;
  transition: box-shadow 0.2s, transform 0.15s !important;
}

.button.button-primary:hover {
  box-shadow: 0 4px 22px rgba(124,58,237,0.5) !important;
  transform: translateY(-1px) !important;
}

/* ── Search Input ────────────────────────────── */
.search__input {
  background: rgba(14,15,26,0.85) !important;
  border: 1px solid var(--nv-border) !important;
  border-radius: 14px !important;
  color: var(--nv-text) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.search__input:focus {
  border-color: rgba(139,92,246,0.5) !important;
  box-shadow: 0 0 0 3px rgba(139,92,246,0.1) !important;
  outline: none !important;
}

/* ── Media Gallery ───────────────────────────── */
.media-gallery {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(139,92,246,0.15) !important;
  margin-top: 12px !important;
}

/* ── URL Preview Cards ───────────────────────── */
.status-card {
  background: rgba(14,15,26,0.65) !important;
  border: 1px solid var(--nv-border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: border-color 0.2s !important;
}

.status-card:hover {
  border-color: rgba(139,92,246,0.45) !important;
}

/* ── Trending Items ──────────────────────────── */
.trend {
  background: rgba(14,15,26,0.65) !important;
  border-radius: 14px !important;
  border: 1px solid var(--nv-border) !important;
  margin-bottom: 6px !important;
  transition: border-color 0.2s !important;
}

.trend:hover {
  border-color: rgba(139,92,246,0.4) !important;
}

/* ── Custom Scrollbar ────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.35); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,0.65); }

/* ── Hide tab bar & nav logo ─────────────────── */
.tabs-bar__wrapper,
.navigation-panel__logo { display: none !important; }


  /* Nav panel horizontal scroll fix */
  .navigation-panel { overflow-x: hidden !important; }
  .navigation-panel__menu { overflow-x: hidden !important; }