:root {
  --accent: #6939F9;
  --accent-hover: hsl(258, 94.1%, 50%);
  --accent-soft: rgba(105, 57, 249, 0.14);
  --secondary: rgb(52, 52, 56);
  --bg: rgb(30, 30, 33);
  --bg-secondary: rgb(48, 48, 52);
  --surface: rgba(255, 255, 255, 0.03);
  --surface-hover: rgba(255, 255, 255, 0.05);
  --text: rgba(255, 255, 255, 1);
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-tertiary: rgba(255, 255, 255, 0.45);
  --border: rgba(255, 255, 255, 0.12);
  --border-soft: rgba(255, 255, 255, 0.07);
  --get: #2dd4bf;
  --post: #6939F9;
  --patch: #f7b955;
  --put: #f7b955;
  --delete: #f76b6b;
  --status-green: #3ba55d;
  --radius: 12px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }

/* Was referenced all over (file inputs, the remove-photo button, etc.) but
   never actually defined — without it, a "hidden" file input just renders
   with its native browser display, showing a stray extra "Choose File"
   button next to the real, styled upload button. */
.hidden { display: none !important; }

html { scroll-behavior: smooth; }

html { overflow-x: hidden; }
body { max-width: 100%; }

body {
  margin: 0;
  font-family: 'Roboto', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

img { max-width: 100%; }

a { color: inherit; }

code, pre {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

::selection { background: var(--accent); color: #fff; }

/* ── Top bar ─────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 28px;
  background: rgba(76, 40, 168, 0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}

.topbar .brand img {
  height: 26px;
  width: auto;
  display: block;
}

.topbar .brand span {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.2px;
  color: var(--text);
}

.topbar nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.topbar nav a {
  position: relative;
  text-decoration: none;
  color: var(--text-secondary);
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: color 0.15s ease, background 0.15s ease;
}

.topbar nav a:hover {
  color: var(--text);
  background: var(--surface-hover);
}

.topbar nav a.active {
  color: var(--text);
  background: var(--accent-soft);
}

/* Nav is grouped in markup into a "tab section" (same-site pages) and a
   "link section" (external subdomains) purely for code organization —
   these wrappers render as display:contents so the visible layout,
   spacing, and behavior are unaffected. */
.nav-tab-group, .nav-link-group { display: contents; }
.nav-sep {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  margin: 0 4px;
  flex: none;
}
.topbar nav a .nav-ext-icon {
  margin-left: 5px;
  opacity: 0.55;
  vertical-align: -1px;
}

.topbar nav a.active::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -15px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.topbar .topbar-right {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-profile-wrap { position: relative; }

.topbar-profile {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.topbar-profile:hover { border-color: var(--accent); background: var(--surface-hover); }

.topbar-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: rgba(26, 26, 28, 0.95);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  display: none;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  z-index: 60;
}
.topbar-dropdown.open { display: block; }
.topbar-dropdown a, .topbar-dropdown button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--text-secondary);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 13px;
  background: none;
  border: none;
  cursor: pointer;
}
.topbar-dropdown a:hover, .topbar-dropdown button:hover { background: var(--surface-hover); color: var(--text); }
.topbar-dropdown .divider { height: 1px; background: var(--border-soft); margin: 5px 4px; }
.topbar-dropdown button.danger { color: #ff9d9d; }
.topbar-dropdown button.danger:hover { background: rgba(247,107,107,0.1); }
.topbar-avatar-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  flex: none;
}
.topbar-profile-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .topbar-profile-name { display: none; }
  .topbar-profile { padding: 4px; border: none; }
}

.pill {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.15s ease, color 0.15s ease;
}
a.pill:hover {
  border-color: var(--accent);
  color: var(--text);
}

@media (max-width: 640px) {
  .topbar { padding: 11px 14px; gap: 10px; }
  .topbar .brand span { display: none; }
  .topbar .brand img { height: 22px; }
  .topbar nav {
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { padding: 7px 10px; font-size: 13px; white-space: nowrap; flex: none; }
  .topbar nav a.active::after { bottom: -12px; }
  .topbar-right { flex: none; }
  .btn.pill-link { padding: 8px 13px; font-size: 12.5px; }
}

/* ── Shared components ──────────────────────────────────────────────── */

.method-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.4px;
  border-radius: 6px;
  padding: 3px 8px;
  color: #06110f;
  flex: none;
}

.method-badge.get { background: var(--get); color: #062421; }
.method-badge.post { background: var(--post); color: #fff; }
.method-badge.patch { background: var(--patch); color: #2b1a00; }
.method-badge.put { background: var(--put); color: #2b1a00; }
.method-badge.delete { background: var(--delete); color: #2b0505; }

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 14px 0 4px;
}

table.param-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 13.5px;
  margin: 0;
}

table.param-table th {
  text-align: left;
  color: var(--text-tertiary);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

table.param-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-secondary);
  vertical-align: top;
}

table.param-table td.param-name {
  color: var(--text);
  font-family: monospace;
  font-size: 13px;
  white-space: nowrap;
}

table.param-table td.param-type {
  color: var(--accent);
  font-family: monospace;
  font-size: 12.5px;
  white-space: nowrap;
}

.req-flag {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

.req-flag.required { background: rgba(247, 107, 107, 0.15); color: #ff9d9d; }
.req-flag.optional { background: rgba(255, 255, 255, 0.08); color: var(--text-tertiary); }

pre.code-block {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-size: 13px;
  line-height: 1.6;
  overflow-x: auto;
  color: #d8d3ff;
  margin: 10px 0;
}

.btn {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 13px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn:hover { background: var(--accent-hover); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn.danger { background: var(--delete); }
.btn.danger:hover { background: #ff8383; }

.btn.secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn.secondary:hover { background: var(--surface-hover); border-color: var(--accent); }

.btn.large { padding: 14px 28px; font-size: 14.5px; }

.btn.pill-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

input.field, textarea.field {
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: monospace;
  font-size: 13px;
  padding: 9px 11px;
  outline: none;
  transition: border-color 0.15s ease;
}

input.field:focus, textarea.field:focus { border-color: var(--accent); }

textarea.field { resize: vertical; min-height: 90px; }

html { scrollbar-width: thin; scrollbar-color: rgba(105,57,249,0.55) var(--bg-secondary); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb {
  background-color: rgba(105,57,249,0.55);
  border-radius: 8px;
  border: 3px solid var(--bg-secondary);
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(105,57,249,0.8); }
::-webkit-scrollbar-corner { background: var(--bg-secondary); }

/* ── Thumbnail/avatar/banner loading fade ─────────────────────────────
   Shared by world cards, avatar cards, friend/search cards, and the
   sidebar profile widget (see ParelDash.fadeInBgImage/initFadeImages in
   dashboard.js): the element renders black the instant it's in the DOM
   (rather than popping in whatever's already cached, or sitting on a
   stray background-color, whenever the browser gets around to actually
   fetching the image), then fades to the real image once it has actually
   loaded. */
.img-fade { transition: filter 320ms ease; }
.img-fade.img-fade-loading { filter: brightness(0); }

/* ── Dashboard (player.parelvr.parelllc.com) ─────────────────────────── */
/* Purple "control room" theme: same tonal structure as a typical dark
   companion-app dashboard (near-black shell, pill nav, bordered cards on a
   faint diagonal grid) but built entirely from the site's own brand purple
   (--accent, 258° hue) rather than borrowing anyone else's palette. */
:root {
  --dash-shell: hsl(258, 32%, 7%);
  --dash-bg: hsl(258, 28%, 9%);
  --dash-card: hsl(258, 24%, 13%);
  --dash-card-border: hsla(258, 60%, 70%, 0.16);
  --dash-pill: hsl(258, 52%, 29%);
  --dash-pill-hover: hsl(258, 55%, 35%);
  --dash-pill-text: hsl(258, 85%, 90%);
  --dash-nav-text: hsl(258, 65%, 76%);
  --dash-nav-active-bg: hsl(258, 85%, 93%);
  --dash-nav-active-text: hsl(258, 45%, 16%);
  --dash-bright: hsl(258, 90%, 74%);
}

/* Scoped to dashboard pages only (any page whose body contains the
   dashboard layout) — the shared .topbar rule stays untouched everywhere
   else on the site, so this never bleeds onto the marketing/docs pages. */
body:has(.dash-layout) {
  background-color: #000;
}
/* Blurred, oversized so the blur's soft edge never reveals the viewport
   boundary — the source image is low-res, blur hides the upscale/cover
   pixelation that showed at full sharpness.
   A real element (injected by dashboard.js), not a ::before, so JS can
   swap its background-image and fade its brightness per-page — e.g. the
   player detail page fades this to black then back in showing that
   player's own banner instead of the default splash image. */
#dash-bg-layer {
  position: fixed;
  z-index: -1;
  inset: -30px;
  background-image: url('/assets/bg-splash.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(8px) brightness(0.5);
  transform: scale(1.05);
  transition: filter 450ms ease, background-image 0ms;
}
body:has(.dash-layout) .topbar {
  background: rgba(0, 0, 0, 0.45) !important;
  border-bottom: 1px solid var(--dash-card-border);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body:has(.dash-layout) .topbar .pill { background: var(--dash-pill); color: var(--dash-pill-text); }
body:has(.dash-layout) .topbar .pill:hover { background: var(--dash-pill-hover); }

/* ── Dashboard topbar: icon row + search + text links + logout pill ──
   The icon row and search box are structural — Notifications and Settings
   link to real pages, Events has no backing feature yet so it's inert,
   and search is visually complete but not wired up until a search API
   exists. Built to be visually whole either way, not a half-finished
   stub. */
/* justify-content: flex-start (overriding .topbar's space-between) is the
   fix for icons drifting away from the logo — space-between spreads every
   gap between every child evenly, which pushed the icon row toward center
   instead of sitting right next to the brand the way the reference has it.
   The search box (flex: 1) is what absorbs the middle space instead, and
   the link/logout group is pinned to the far right via margin-left: auto
   on the search box's sibling. */
.dash-topbar { display: flex; align-items: center; gap: 14px; justify-content: flex-start; }
.dash-topbar .brand { margin-right: 0; flex: none; }
.dash-topbar-icons { display: flex; align-items: center; gap: 2px; flex: none; }
/* Plain icon glyphs, no persistent pill/box — only a faint highlight on
   hover, matching a normal toolbar icon rather than a filled button. */
.dash-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 6px;
  background: none; border: none;
  color: var(--dash-nav-text); cursor: pointer; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.dash-icon-btn:hover { background: hsla(258, 55%, 65%, 0.14); color: var(--text); }
/* Wide, solid white bar (not a subtle tinted outline) — the one light
   element against the dark topbar, matching the reference exactly, and
   flex:1 with no max-width so it actually fills the space between the
   icon row and the right-side links instead of staying pill-sized. */
.dash-search {
  flex: 1 1 auto; min-width: 120px; margin: 0 20px;
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid transparent;
  border-radius: 8px; padding: 9px 16px; color: hsl(258, 20%, 40%);
  transition: box-shadow 0.15s ease;
}
.dash-search:focus-within { box-shadow: 0 0 0 2px var(--dash-bright); }
.dash-search svg { flex: none; color: hsl(258, 20%, 45%); }
.dash-search input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: hsl(258, 30%, 15%); font-family: 'Roboto', sans-serif; font-size: 13.5px;
}
.dash-search input::placeholder { color: hsl(258, 15%, 60%); }
/* margin-left: auto pins this group (and everything after it) to the far
   right edge regardless of how much space the search box actually takes. */
.dash-topbar-links { display: flex; align-items: center; gap: 20px; flex: none; margin-left: auto; }
.dash-topbar-links a {
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px;
  color: var(--dash-bright); text-decoration: none;
}
.dash-topbar-links a:hover { color: var(--text); }
.dash-topbar-links a.dash-link-soon { color: var(--dash-nav-text); cursor: default; }
.dash-topbar-links a.dash-link-soon:hover { color: var(--dash-nav-text); }
.dash-logout-pill {
  display: flex; align-items: center; gap: 7px; flex: none;
  background: hsl(4, 62%, 47%); color: #fff; border: none;
  border-radius: 8px; padding: 8px 16px; font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 13px; cursor: pointer;
  transition: background 0.15s ease;
}
.dash-logout-pill:hover { background: hsl(4, 62%, 40%); }

/* ── Notification bell dropdown — replaces the old standalone
   /Notifications/ page. Anchored under the bell (position: relative on the
   wrap, absolute on the panel) with its own max-height/scroll, so it never
   depends on page scroll position and is never clipped by an ancestor —
   nothing between it and the topbar sets overflow:hidden. */
.notif-bell-wrap { position: relative; }
.notif-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
  background: hsl(4, 70%, 55%); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
  font-family: 'Montserrat', sans-serif;
}
.notif-panel {
  display: none;
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 1000;
  width: 380px; max-width: calc(100vw - 32px); max-height: 70vh;
  background: var(--dash-card); border: 1px solid var(--dash-card-border);
  border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  overflow: hidden; flex-direction: column;
}
.notif-panel.open { display: flex; }
.notif-panel-header {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--dash-card-border); flex: none;
}
.notif-panel-clear-all {
  background: none; border: none; cursor: pointer;
  color: var(--dash-bright); font-family: 'Montserrat', sans-serif;
  font-weight: 600; font-size: 12.5px;
}
.notif-panel-clear-all:hover { color: var(--text); }
.notif-panel-list { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.notif-panel-empty { color: var(--dash-nav-text); font-size: 13px; text-align: center; padding: 30px 10px; }

.notif-card {
  position: relative;
  background: hsl(258, 22%, 16%); border: 1px solid var(--dash-card-border);
  border-radius: 12px; padding: 14px 14px 12px;
}
.notif-card-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: hsla(258, 60%, 55%, 0.22); color: var(--dash-bright);
  border-radius: 6px 6px 0 0; padding: 4px 9px; margin: -14px 0 10px -14px;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.notif-card-close {
  position: absolute; top: 10px; right: 10px;
  background: none; border: none; color: var(--dash-nav-text);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 2px;
}
.notif-card-close:hover { color: var(--text); }
.notif-card-main { display: flex; gap: 12px; }
.notif-banner {
  position: relative; flex: none; width: 64px; height: 64px; border-radius: 10px;
  background: linear-gradient(135deg, hsl(258, 45%, 22%), hsl(258, 35%, 13%));
  background-size: cover; background-position: center;
}
.notif-banner-icon { display: flex; align-items: center; justify-content: center; color: var(--dash-nav-text); }
.notif-banner-avatar {
  position: absolute; right: -4px; bottom: -4px;
  width: 28px; height: 28px; border-radius: 50%;
  background-color: hsl(258, 35%, 20%); background-size: cover; background-position: center;
  border: 2px solid hsl(258, 22%, 16%);
}
.notif-card-body { flex: 1; min-width: 0; padding-right: 14px; }
.notif-card-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; color: var(--text); margin-bottom: 4px; }
.notif-card-desc { font-size: 11.5px; color: var(--dash-nav-text); line-height: 1.4; }
.notif-card-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.notif-card-actions button {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px; border: none; cursor: pointer;
  background: hsla(258, 45%, 60%, 0.12); color: var(--dash-nav-text);
  transition: background 0.15s ease, color 0.15s ease;
}
.notif-card-actions button[data-notif-accept]:hover { background: hsla(140, 55%, 45%, 0.25); color: hsl(140, 70%, 70%); }
.notif-card-actions button[data-notif-decline]:hover { background: hsla(4, 70%, 55%, 0.25); color: hsl(4, 80%, 75%); }
.notif-card-actions button[data-notif-clear]:hover,
.notif-card-actions button[data-notif-clear-alert]:hover { background: hsla(258, 45%, 60%, 0.24); color: var(--text); }
@media (max-width: 480px) {
  .notif-panel { left: -50px; }
}
@media (max-width: 1100px) {
  .dash-search { display: none; }
}
@media (max-width: 760px) {
  .dash-topbar-links a:not(.dash-link-soon):not([href^="/Plus"]) { display: none; }
  .dash-topbar { gap: 10px; }
}

.gate { display: none; max-width: 420px; margin: 100px auto; text-align: center; padding: 0 24px; }
.gate.active { display: block; }
.gate h1 { font-family: 'Montserrat', sans-serif; font-size: 22px; margin: 0 0 10px; }
.gate p { color: var(--text-secondary); font-size: 14px; margin: 0 0 24px; }

.dash-app { display: none; position: relative; z-index: 1; }
.dash-app.active { display: block; }

.dash-layout {
  display: grid;
  grid-template-columns: 268px 1fr;
  background: transparent;
}

@media (max-width: 900px) {
  .dash-layout { grid-template-columns: 1fr; }
  .dash-sidebar {
    position: static !important; height: auto !important;
    border-right: none !important; border-bottom: 1px solid var(--dash-card-border);
    flex-direction: row !important; overflow-x: auto; padding: 12px 16px !important;
  }
  .dash-sidebar-profile { display: none; }
  .dash-sidebar-nav { flex-direction: row !important; gap: 4px; }
  .dash-sidebar-divider { display: none; }
  .sidebar-tab-btn { white-space: nowrap; width: auto; }
  #logout-btn { margin-top: 0 !important; }
}

.dash-sidebar {
  position: sticky;
  top: 65px;
  height: calc(100vh - 65px);
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.45);
  border-right: 1px solid var(--dash-card-border);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
}
/* ── Sidebar profile card: banner (currently-worn avatar) + overlapping
   profile-picture icon + name, Discord-card style. ─────────────────────── */
/* From Uiverse.io by bhaveshxrawat — neumorphic card, adapted: full-width,
   the banner photo as its background instead of the flat gradient (the
   gradient survives as the fallback behind it), shadow re-tinted for a
   dark sidebar instead of the light-mode grey/white pairing. */
.dash-sidebar-profile {
  position: relative;
  height: 130px;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 18px;
  background: linear-gradient(145deg, #2B86C5 0%, #FF3CAC 100%);
  box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.4), -4px -4px 14px rgba(130, 100, 220, 0.06);
  transition: box-shadow 0.7s ease;
}
.dash-sidebar-profile:hover {
  box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.5), -4px -4px 20px rgba(130, 100, 220, 0.1);
}
.profile-banner {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, hsl(258, 55%, 24%), hsl(258, 45%, 15%));
  background-size: cover; background-position: center;
}
/* The bottom bar — transparent black over the same banner, with
   backdrop-filter blurring only what's behind IT (the banner), so the
   card reads sharp above the bar and blurred behind it. */
.profile-banner-footer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 54px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.profile-avatar-wrap { position: relative; flex: none; }
.dash-sidebar-profile .profile-avatar-sm {
  width: 40px; height: 40px; font-size: 15px;
  border: 3px solid rgba(10, 10, 12, 0.9);
  position: relative; z-index: 1;
}
/* Sits in a row with the status text now (left-aligned under the display
   name), not pinned to the avatar's corner. */
.profile-status-row { display: flex; align-items: center; gap: 5px; }
.profile-status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--patch);
}
/* The dot's color is the one true status identifier — whatever custom text
   a player sets below their name, the color always matches this. */
.profile-status-dot.dnd { background: var(--delete); }
.profile-status-dot.active { background: var(--patch); }
.profile-status-dot.online-joinable { background: var(--status-green); }
.profile-status-dot.free-join { background: var(--get); }
.profile-status-dot.offline { background: var(--dash-card); border-color: #9a9a9a; }
.profile-banner-text { min-width: 0; }
.profile-banner-name {
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Now shows the player's status text (was the raw account id). */
.dash-sidebar-profile-id { min-width: 0; font-size: 10.5px; color: var(--dash-nav-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Status picker (Profile Settings) ── */
.status-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.status-option {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 10px 13px; cursor: pointer; transition: border-color .15s, background .15s;
}
.status-option:hover { border-color: var(--border); }
.status-option.selected { border-color: var(--accent); background: var(--accent-soft); }
.status-option-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.status-option-dot.dnd { background: var(--delete); }
.status-option-dot.active { background: var(--patch); }
.status-option-dot.online-joinable { background: var(--status-green); }
.status-option-dot.free-join { background: var(--get); }
.status-option-label { font-size: 13px; color: var(--text); }

.profile-avatar-sm {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px;
  flex: none; background-size: cover; background-position: center;
}

.dash-sidebar-nav { display: flex; flex-direction: column; gap: 9px; }

/* From Uiverse.io by niat786 */
.sidebar-tab-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  border-radius: .25rem;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 400;
  padding-left: 25px;
  padding-right: 25px;
  color: #fff;
  text-decoration: none;
  clip-path: polygon(0 0,0 0,100% 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 100%);
  height: 40px;
  font-size: 0.7rem;
  line-height: 14px;
  letter-spacing: 1.2px;
  transition: .2s .1s;
  background-image: linear-gradient(90deg,#1c1c1c,#6220fb);
  border: 0 solid;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
}
.sidebar-tab-btn svg, .sidebar-tab-btn-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  flex: none;
}
.sidebar-tab-btn-icon { width: 17px; height: 17px; object-fit: contain; }

.sidebar-tab-btn:hover {
  cursor: pointer;
  transition: all .3s ease-in;
  padding-right: 30px;
  padding-left: 30px;
}

#logout-btn { margin-top: auto; }

.dash-sidebar-divider { height: 1px; background: var(--dash-card-border); margin: 10px 4px; }

/* No tight max-width here on purpose — content should fill the space next
   to the sidebar on normal/wide monitors, not float as a fixed-width
   column with dead space on both sides. The cap only kicks in on very
   wide (4K-class) displays to avoid absurd line lengths. */
.dash-main { max-width: 1700px; width: 100%; margin: 0 auto; padding: 0 40px 100px; min-width: 0; }
@media (max-width: 900px) { .dash-main { padding: 0 20px 80px; } }

.dash-greeting {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 28px;
  color: var(--text); margin: 0;
}
.dash-section-title {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 19px;
  color: var(--text); text-align: center; margin: 40px 0 16px;
}

/* Left-aligned title + optional "See all" action, replacing the old
   centered title / full-width button-below pattern on the Home page. */
.dash-section-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 40px 0 16px;
}
.dash-section-header .dash-section-title { margin: 0; text-align: left; }
.dash-section-link {
  flex: none; text-decoration: none; color: var(--dash-nav-text);
  font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 12.5px;
  padding: 7px 15px 7px 14px; background: hsla(258, 45%, 60%, 0.1);
  border: 1px solid var(--dash-card-border);
  clip-path: polygon(0 0, 100% 0, 100% 62%, calc(100% - 9px) 100%, 0 100%);
  transition: background 0.15s ease, color 0.15s ease;
}
.dash-section-link:hover { background: hsla(258, 55%, 65%, 0.18); color: var(--text); }

.dash-greeting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 32px 0 28px;
}
.dash-greeting-divider {
  height: 1px;
  background: var(--dash-card-border);
  margin: 0 0 28px;
}
.dash-greeting-friends-btn {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--dash-pill); color: var(--dash-pill-text);
  transition: background 0.15s ease;
}
.dash-greeting-friends-btn:hover { background: var(--dash-pill-hover); }

/* ── Featured card: large thumbnail + info + action, one prominent item —
   same plain card language as the rest of the site (var(--dash-card) etc.),
   used for Your Avatar. ───────────────────────────────────────────────── */
.feature-card {
  display: flex; align-items: stretch; gap: 20px;
  background: var(--dash-card); border: 1px solid var(--dash-card-border);
  border-radius: 16px; padding: 16px; margin-bottom: 12px;
}
@media (max-width: 700px) { .feature-card { flex-direction: column; } }
.feature-card-thumb {
  width: 260px; aspect-ratio: 16/9; flex: none; border-radius: 12px;
  background: linear-gradient(135deg, hsl(258, 45%, 22%), hsl(258, 35%, 13%));
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  color: var(--dash-nav-text); font-size: 13px;
}
@media (max-width: 700px) { .feature-card-thumb { width: 100%; } }
.feature-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.feature-card-body h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 17px; color: var(--text); margin: 0 0 6px; }
.feature-card-desc { color: var(--dash-nav-text); font-size: 13px; margin: 0; line-height: 1.5; }
.feature-card-actions { flex: none; display: flex; align-items: center; }
@media (max-width: 700px) { .feature-card-actions { justify-content: flex-end; } }

/* ── "Continue Where You Left Off": a horizontal scroll strip so it reads
   as a short, personal rail rather than another browsable grid. ───────── */
.card-strip { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.card-strip > .wcard { flex: none; scroll-snap-align: start; }
.card-strip::-webkit-scrollbar { height: 6px; }
.card-strip::-webkit-scrollbar-thumb { background: var(--dash-card-border); border-radius: 3px; }


/* ── Discover grid: thumbnail-forward cards, 3-up (the "Completely
   Random Worlds" grid layout) — used for Discover Worlds. ────────────── */
.discover-grid { display: flex; flex-wrap: wrap; gap: 16px; }

/* World card — from Uiverse.io by ElSombrero2 (3D flip card). Shared by the
   world grids (Discover Worlds, My Worlds, Favorites, search, Home strip).
   Resting face = blurred world photo + cropped icon + title. Hover flips to
   the sharp photo with tags, title and description. */
.wcard {
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: visible;
  width: 190px;
  height: 254px;
  perspective: 1000px;
}
.wcard-flip {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 300ms;
  box-shadow: 0px 0px 10px 1px #000000ee;
  border-radius: 5px;
}
.wcard:hover .wcard-flip { transform: rotateY(180deg); }

.wcard-front, .wcard-back {
  background-color: #151515;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 5px;
  overflow: hidden;
}
.wcard-front { transform: rotateY(180deg); color: white; }

.wcard-back { display: flex; align-items: center; justify-content: center; position: relative; }
.wcard-back-content {
  position: relative;
  width: 99%;
  height: 99%;
  background-color: #151515;
  border-radius: 5px;
  overflow: hidden;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.wcard-back-bg {
  position: absolute;
  inset: -10px;
  background-size: cover;
  background-position: center;
  filter: blur(10px);
  transform: scale(1.1);
}
.wcard-icon {
  position: relative;
  width: 64px; height: 64px; border-radius: 50%; flex: none;
  background-size: cover; background-position: center;
  border: 2px solid rgba(255, 255, 255, 0.25);
}
.wcard-back-title {
  position: relative;
  font-size: 13px; font-weight: 700; text-align: center;
  max-width: 85%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wcard-front-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.wcard-front-content {
  position: absolute;
  width: 100%; height: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wcard-front-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.wcard-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.wcard-tag {
  background-color: #00000055;
  padding: 2px 10px;
  border-radius: 10px;
  backdrop-filter: blur(2px);
  font-size: 10px;
  color: #fff;
  white-space: nowrap;
}
.wcard-fav-btn {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0; border: none; cursor: pointer;
  background-color: #00000055; backdrop-filter: blur(2px); border-radius: 50%;
  color: #fff; transition: color 0.15s ease;
}
.wcard-fav-btn:hover { color: #ff5c8a; }
.wcard-fav-btn.active { color: #ff3d71; }
.wcard-fav-btn svg { width: 12px; height: 12px; fill: none; transition: fill 0.15s ease; }
.wcard-fav-btn.active svg { fill: currentColor; }

.wcard-desc-box {
  box-shadow: 0px 0px 10px 5px #00000088;
  width: 100%;
  padding: 10px;
  background-color: #00000099;
  backdrop-filter: blur(5px);
  border-radius: 5px;
  box-sizing: border-box;
}
.wcard-title {
  margin: 0 0 5px;
  font-size: 12px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wcard-desc {
  margin: 0;
  color: #ffffff88; font-size: 10px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* My Worlds toolbar — search + category tabs + statistics sort. */
.worlds-toolbar { margin: 4px 0 20px; display: flex; flex-direction: column; gap: 12px; }
.worlds-search-wrap { position: relative; display: flex; align-items: center; }
.worlds-search-wrap svg { position: absolute; left: 14px; color: var(--dash-nav-text); pointer-events: none; }
.worlds-search-input {
  width: 100%; background: var(--dash-card, var(--surface)); border: 1px solid var(--dash-card-border, var(--border));
  border-radius: 10px; padding: 11px 14px 11px 40px; color: var(--text); font-size: 13.5px;
  font-family: 'Roboto', sans-serif;
}
.worlds-search-input:focus { outline: none; border-color: var(--dash-bright); }
.worlds-search-input::placeholder { color: var(--dash-nav-text); }
.worlds-filter-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.worlds-category-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.worlds-tab {
  background: transparent; border: 1px solid var(--dash-card-border, var(--border)); color: var(--dash-nav-text);
  border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 600;
  font-family: 'Montserrat', sans-serif; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.worlds-tab:hover { color: var(--text); border-color: var(--dash-bright); }
.worlds-tab.active { background: var(--accent); color: #fff; border-color: transparent; }
.worlds-stats-filter {
  background: var(--dash-card, var(--surface)); border: 1px solid var(--dash-card-border, var(--border));
  color: var(--text); border-radius: 10px; padding: 9px 12px; font-size: 12.5px;
  font-family: 'Montserrat', sans-serif; font-weight: 600; cursor: pointer;
}
.worlds-stats-filter:focus { outline: none; border-color: var(--dash-bright); }

/* auto-fit collapses empty tracks so 1-2 items stretch to fill the row
   instead of sitting stranded on the left with dead space trailing off. */
/* Fixed-width flex-wrap, matching .social-mini-list/.social-mini-card
   exactly (212px) — was an auto-fit grid that let cards stretch to fill
   the row, which is what made them look oversized next to the friend cards. */
.card-grid { display: flex; flex-wrap: wrap; gap: 16px; }

.item-card {
  display: block; text-decoration: none; color: inherit;
  width: 212px;
  border: 1px solid var(--dash-card-border); background: var(--dash-card);
  border-radius: 14px; overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.item-card:hover { border-color: var(--dash-bright); transform: translateY(-2px); }
.item-thumb.world { aspect-ratio: 16/9; }
.item-thumb.avatar { aspect-ratio: 1; }
.item-thumb {
  background: linear-gradient(135deg, hsl(258, 45%, 22%), hsl(258, 35%, 13%));
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  color: var(--dash-nav-text); font-size: 12px; position: relative;
}
.status-flag {
  position: absolute; top: 8px; left: 8px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
  padding: 3px 7px; border-radius: 5px;
  background: rgba(0,0,0,0.55); color: var(--dash-pill-text);
  text-transform: capitalize;
}
.item-card .meta { padding: 13px 14px; }
.item-card h4 { font-family: 'Montserrat', sans-serif; font-size: 13.5px; margin: 0 0 3px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-card .author { color: var(--dash-nav-text); font-size: 11.5px; margin-bottom: 10px; }
.item-card .row-actions { display: flex; gap: 6px; }
.item-card .row-actions .btn { flex: 1; padding: 7px; font-size: 11.5px; }

.empty-block { color: var(--dash-nav-text); font-size: 14px; text-align: center; padding: 48px 0; grid-column: 1 / -1; }

.subheading-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.subheading-row h3 { margin: 0; font-family: 'Montserrat', sans-serif; font-size: 15px; }

@media (max-width: 640px) {
  .dash-main { padding: 0 16px 72px; }
  .page-title-row { padding: 24px 0 18px; }
}