/* ============================================================
   TierBeat — Design System & Styles (v2 — Dark Navy Redesign)
   ============================================================ */

/* ── Fonts loaded via HTML <link> tags for better performance ── */

/* ── Tokens ── */
:root {
  /* Backgrounds */
  --bg-base: #12121a;
  --bg-surface: linear-gradient(-16deg, #1a1e2d -12%, #14151f, 34%, #0d0d14 80%, #161a25 116%);
  --bg-raised: #18182a;
  --bg-glass: rgba(255, 255, 255, 0.025);
  --bg-glass-hover: rgba(255, 255, 255, 0.05);
  --bg-glass-active: rgba(255, 255, 255, 0.07);

  /* Borders */
  --border: #43475c;
  --border-hover: rgba(255, 255, 255, 0.12);
  --border-accent: rgba(168, 85, 247, 0.3);

  /* Text */
  --text-100: #f0f0f5;
  --text-200: #b0b0c0;
  --text-300: #a9a9af;
  --text-400: #353542;

  /* Accent */
  --accent: #a855f7;
  --accent-hover: #c084fc;
  --accent-glow: rgba(168, 85, 247, 0.25);

  /* Danger */
  --danger: #ef4444;
  --danger-hover: #f87171;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 20px;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 150ms var(--ease);
  --t-normal: 250ms var(--ease);
  --t-slow: 400ms var(--ease);

  /* Sizing */
  --header-h: 60px;
  --album-size-raw: 76px;               /* the user's cover-size setting (JS-driven) */
  --album-size: var(--album-size-raw);  /* effective size — phones scale it down */
  /* Tier list */
  --tier-label-w: 75px;
  --search-panel-w: 288px;

  /* Fonts */
  --font: 'Inter', -apple-system, sans-serif;
  --font-serif: 'PT Serif', serif;

  /* Font Weights */
  --fw-light: 340;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 500;
  --fw-bold: 600;
  --fw-extrabold: 750;

  /* Tier colors */
  --tier-s-from: #ff2d55;  --tier-s-to: #ff6b9d;
  --tier-a-from: #e74c3c;  --tier-a-to: #ff6b6b;
  --tier-b-from: #f39c12;  --tier-b-to: #ffb347;
  --tier-c-from: #c4d400;  --tier-c-to: #dfef00;
  --tier-d-from: #a8e600;  --tier-d-to: #c5f700;
  --tier-f-from: #ff2d55;  --tier-f-to: #ff6b9d;

  /* Settings values */
  --neon-intensity: 1.0;
}


/* ── Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--bg-base);
  color: var(--text-100);
  min-height: 100vh;
  line-height: 1.5;
  overflow-x: clip;
  padding-top: var(--header-h);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: var(--font);
}


/* ── Utility ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}

.hidden {
  display: none !important;
}


/* ============================================================
   Header
   ============================================================ */
.header.glass-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-h);
  background: linear-gradient(90deg, #1d1e26, #151721);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}


/* ── Logo ── */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-100);
  font-weight: var(--fw-extrabold);
  font-size: 18px;
  letter-spacing: -0.03em;
  transition: opacity var(--t-fast);
  flex-shrink: 0;
}
.logo-img {
  height: 46px;
  width: auto;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.logo:hover .logo-img {
  transform: scale(1.03);
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  font-size: 13px;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.logo-accent {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Stacked logo variant (two lines) */
.logo-stacked .logo-line {
  display: block;
  line-height: 1.1;
}


/* ── Header Center Navigation ── */
.header-nav-center {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: #ebedf0;
  border-radius: var(--r-sm);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  background: transparent;
}
.nav-link:hover {
  transform: translateY(-2px);
}
.nav-link.active {
  color: var(--text-100);
}
/* Short single-word labels (Create / Lists / Ratings) are swapped in only on narrow
   screens where the full labels don't fit — see the phone media query. */
.nav-label-short {
  display: none;
}


/* ── Header Right (user info) ── */
.header-nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}


.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: #ebedf0;
  cursor: pointer;
  transition: color var(--t-fast);
}
.user-info:hover {
  color: var(--text-100);
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 1px solid var(--border-hover);
  object-fit: cover;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-300);
}

/* Legacy header-nav (for existing HTML) */
.header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
  line-height: 1.2;
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent), #9333ea);
  color: #cdd1dd;
  box-shadow: 0 2px 12px var(--accent-glow);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-hover), #a855f7);
  box-shadow: 0 4px 20px var(--accent-glow);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-200);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  color: var(--text-100);
  border-color: var(--border-hover);
  background: var(--bg-glass-hover);
}

.btn-outline {
  background: transparent;
  color: var(--text-200);
  border: 1px solid var(--border);
}
.btn-outline:hover {
  color: var(--text-100);
  border-color: var(--border-hover);
  background: var(--bg-glass-hover);
}

.btn-danger {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
  color: var(--danger-hover);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-full {
  width: 100%;
  justify-content: center;
  padding: 10px;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-400);
  cursor: pointer;
  transition: all var(--t-fast);
  font-size: 14px;
}
.btn-icon:hover {
  background: var(--bg-glass-hover);
  color: var(--text-200);
}


/* ============================================================
   Main Layout — Two Column
   ============================================================ */
.main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 80px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

/* Left column: tier list header + tiers + pool */
.main-left {
  flex: 1;
  min-width: 0;
}

/* Right column: search panel + score panel stacked */
.main-right {
  width: var(--search-panel-w);
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--header-h) + 14px);
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Inside the wrapper the panel keeps its own positioning context (so the
   absolute footer stays anchored to it) but drops its standalone sticky. */
.main-right > .search-panel {
  position: relative;
  top: auto;
  width: 100%;
  align-self: auto;
}


/* ============================================================
   Tier List Header / Title
   ============================================================ */
.tierlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  /* Reserve room for a two-line title so the tier list below never shifts when the
     title wraps or its font auto-shrinks. The title is centered within. */
  min-height: 74px;
}

.tierlist-title {
  flex: 1;
  min-width: 140px;
  background: transparent;
  border: none;
  border-bottom: 1px dashed transparent;
  outline: none;
  color: #d7dbe0;
  font-family: var(--font);
  font-size: 38px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.035em;
  padding: 4px 0 6px;
  transition: border-color var(--t-fast), max-width 0.2s ease;
  line-height: 1.15;
}
/* Editor title is a textarea so long names can auto-shrink and wrap to 2 lines.
   Strip the default control chrome and let JS size the font + row count. */
textarea.tierlist-title {
  display: block;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}
.tierlist-title:placeholder-shown:not(:focus) {
  border-bottom-color: var(--text-400);
  max-width: 120px;
}

.tierlist-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}


/* ============================================================
   Filter Bar (pills + share icon)
   /* ── Filters (Genre, Year, etc) ── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.filter-pill {
  height: 36px;
  padding: 0 16px;
  border-radius: 12px;
  background: linear-gradient(18deg, var(--btn-grad-start) 0%, #11111c 85%, var(--btn-grad-end) 170%);
  border: 1px solid var(--btn-border);
  color: #c0c4d1;
  font-family: var(--font);
  font-weight: var(--fw-light);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: background var(--t-fast), border-color var(--t-fast);

  --btn-grad-start: #25253a;
  --btn-grad-end: #1e2435;
  --btn-border: #2a2b41;
  --btn-grad-hover-start: #30304a;
  --btn-grad-hover-mid1: #1d1f33;
  --btn-grad-hover-mid2: #252b3d;
  --btn-grad-hover-end: #36425c;
  --btn-border-hover: #303b51;
  --btn-cursor-glow: rgb(100 113 170 / 8%);
}

.filter-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(75px 75px at var(--local-mouse-x, 0) var(--local-mouse-y, 0), var(--btn-cursor-glow, rgba(255,255,255,0.05)), transparent 100%);
  pointer-events: none;
}

.filter-pill:hover {
  background: linear-gradient(18deg, var(--btn-grad-hover-start) 0%, #11111c 85%, var(--btn-grad-hover-end) 170%);
  border-color: var(--btn-border-hover);
  color: #cdd1dd;
}
.filter-pill .pill-close {
  font-size: 11px;
  opacity: 0.6;
  margin-left: 2px;
}
.filter-pill:hover .pill-close {
  opacity: 1;
}

.filter-pill-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(18deg, var(--btn-grad-start) 0%, #11111c 85%, var(--btn-grad-end) 170%);
  border: 1px solid var(--btn-border);
  color: #e7e9e9;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: background var(--t-fast), border-color var(--t-fast);

  --btn-grad-start: #25253a;
  --btn-grad-end: #1e2435;
  --btn-border: #2a2b41;
  --btn-grad-hover-start: #30304a;
  --btn-grad-hover-mid1: #1d1f33;
  --btn-grad-hover-mid2: #252b3d;
  --btn-grad-hover-end: #36425c;
  --btn-border-hover: #303b51;
  --btn-cursor-glow: rgb(100 113 170 / 8%);
}

.filter-pill-icon svg {
  width: 14px;
  height: 14px;
}

.filter-pill-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(75px 75px at var(--local-mouse-x, 0) var(--local-mouse-y, 0), var(--btn-cursor-glow, rgba(255,255,255,0.05)), transparent 100%);
  pointer-events: none;
}

.filter-pill-icon:hover {
  background: linear-gradient(18deg, var(--btn-grad-hover-start) 0%, #11111c 85%, var(--btn-grad-hover-end) 170%);
  border-color: var(--btn-border-hover);
  color: #cdd1dd;
}

/* Small red close button to leave the tier-list editor */
.editor-close-btn {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(220, 60, 70, 0.10);
  border: 1px solid rgba(220, 60, 70, 0.35);
  color: #e0606a;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.editor-close-btn:hover {
  background: rgba(220, 60, 70, 0.85);
  border-color: rgba(220, 60, 70, 0.95);
  color: #fff;
}

/* Empty state on the Item Ratings list when search/filters match nothing */
.ratings-empty-state {
  width: 100%;
  padding: 48px 24px;
  text-align: center;
  color: var(--text-300, #8a8da0);
  font-size: 15px;
}

.filter-close {
  font-size: 14px;
  line-height: 1;
  opacity: 0.6;
  max-width: 0;
  overflow: hidden;
  margin-left: 0;
  display: inline-block;
  vertical-align: middle;
  transition: all var(--t-fast);
  color: #b6a2fc;
}
.filter-pill.active .filter-close {
  max-width: 14px;
  margin-left: 2px;
}
.filter-menu-header .filter-close {
  max-width: 14px;
  margin-left: 2px;
}
.filter-pill.active:hover .filter-close {
  opacity: 1;
}

/* ── Filter Menu Popover ── */
.filter-dropdown-wrap {
  position: relative;
  width: 74px;
  height: 36px;
}
.filter-pill#filterGenreBtn {
  display: none;
}
.filter-menu {
  position: absolute;
  top: 0;
  right: 0; /* Anchor to right */
  left: auto;
  border-radius: 12px;
  background: linear-gradient(var(--panel-grad-angle, 18deg), var(--btn-grad-start) 0%, #11111c 85%, var(--btn-grad-end) 170%);
  overflow: hidden;
  z-index: 200;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  box-shadow: inset 0 0 0 1px var(--btn-border);
  transition: max-height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow var(--t-fast), background var(--t-fast);

  font-family: var(--font);
  font-weight: var(--fw-light);
  font-size: 13px;
  color: #e7e9e9;

  /* Configure Genre Button colors in default state here */
  --btn-grad-start: #25253a;
  --btn-grad-end: #1e2435;
  --btn-border: #2a2b41;
  --btn-grad-hover-start: #30304a;
  --btn-grad-hover-mid1: #1d1f33;
  --btn-grad-hover-mid2: #252b3d;
  --btn-grad-hover-end: #36425c;
  --btn-border-hover: #303b51;
  --btn-cursor-glow: rgb(100 113 170 / 8%);

  /* Configure Genre Panel colors in default expanded state here */
  --panel-grad-angle: 18deg;
  --panel-grad-start: #0a101b;
  --panel-grad-end: #202238;
  --panel-border: #2a2b41;
  --panel-grad-hover-start: #25253a;
  --panel-grad-hover-mid1: #171826 32%;
  --panel-grad-hover-mid2: #11111c 68%;
  --panel-grad-hover-end: #1e2435 140%;
  --panel-border-hover: #303b51;
  --panel-cursor-glow: rgb(100 113 170 / 8%);
}

/* Border element for active state */
.filter-custom-overlay {
  position: absolute !important;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  box-sizing: border-box;
  border-radius: inherit;
  background: 
    radial-gradient(120px 96px at var(--mouse-x, 0) var(--mouse-y, 0), rgba(255, 255, 255, 0.15), transparent 100%) border-box,
    linear-gradient(-45deg, var(--panel-border-hover), var(--panel-border) 20%, var(--panel-border) 80%, var(--panel-border-hover)) border-box;
  background-blend-mode: screen, normal;
  border: 1px solid transparent;
  -webkit-mask: linear-gradient(#cdd1dd 0 0) padding-box, linear-gradient(#cdd1dd 0 0) border-box;
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Panel active backgrounds */
.filter-menu-panel-bg,
.year-menu-panel-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.filter-menu-panel-bg.normal-bg {
  background: 
    radial-gradient(120px 96px at var(--mouse-x, 0) var(--mouse-y, 0), rgb(100 113 170 / 8%), transparent 100%),
    linear-gradient(18deg, #25253a 0%, #171826 32%, #11111c 68%, #1e2435 140%);
}

.filter-menu-panel-bg.filtered-bg {
  background: 
    radial-gradient(120px 96px at var(--mouse-x, 0) var(--mouse-y, 0), rgb(113 40 255 / 25%), transparent 100%),
    linear-gradient(18deg, #0f0a1a 0%, #26155c 68%, #47148c 85%, #ac49f0 120%);
}

.filter-menu.active:not(.has-filters) .filter-menu-panel-bg.normal-bg {
  opacity: 1;
}

.filter-menu.active.has-filters .filter-menu-panel-bg.filtered-bg {
  opacity: 1;
}

.year-menu-panel-bg.normal-bg {
  background: radial-gradient(120px 96px at var(--mouse-x, 0) var(--mouse-y, 0), rgb(100 113 170 / 8%), transparent 100%), linear-gradient(178deg, #141623 0%, #1c1e2d 50%, #25273d 100%);
}

.year-menu-panel-bg.filtered-bg {
  background: 
    radial-gradient(120px 96px at var(--mouse-x, 0) var(--mouse-y, 0), rgb(13 107 237 / 25%), transparent 100%),
    linear-gradient(178deg, #0f1021 0%, #062c70 69%, #0e8fea 125%);
}

.year-menu.active:not(.has-filters) .year-menu-panel-bg.normal-bg {
  opacity: 1;
}

.year-menu.active.has-filters .year-menu-panel-bg.filtered-bg {
  opacity: 1;
}

.filter-menu:not(.active) {
  cursor: pointer;
  width: 74px;
  max-height: 36px;
  min-height: 36px;
}

.filter-menu::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.3s ease;
}

.filter-menu:not(.active)::after {
  background: radial-gradient(75px 75px at var(--local-mouse-x, 0) var(--local-mouse-y, 0), var(--btn-cursor-glow), transparent 100%);
}

.filter-menu.active::after {
  background: radial-gradient(75px 75px at var(--local-mouse-x, 0) var(--local-mouse-y, 0), var(--panel-cursor-glow), transparent 100%);
}

.filter-menu:not(.active):hover {
  background: linear-gradient(var(--panel-grad-angle, 18deg), var(--btn-grad-hover-start) 0%, #11111c 85%, var(--btn-grad-hover-end) 170%);
  box-shadow: inset 0 0 0 1px var(--btn-border-hover);
}

.filter-menu:not(.active):hover .filter-menu-header {
  color: #cdd1dd;
}

.filter-menu.has-filters {
  /* Configure Genre Button colors in active/has-filters state here */
  --btn-grad-start: #100e21;
  --btn-grad-end: #402b81;
  --btn-border: #7c69bf;
  --btn-grad-hover-start: #0f0a1a;
  --btn-grad-hover-mid1: #2c1869;
  --btn-grad-hover-mid2: #4b1099;
  --btn-grad-hover-end: #8f28ff;
  --btn-border-hover: #8956b7;
  --btn-cursor-glow: rgb(113 40 255 / 25%);

  /* Configure Genre Panel colors in active/has-filters state here */
  --panel-grad-angle: 18deg;
  --panel-grad-start: #100e21;
  --panel-grad-end: #402b81;
  --panel-border: #5b499b;
  --panel-grad-hover-start: #0f0a1a;
  --panel-grad-hover-mid1: #26155c 68%;
  --panel-grad-hover-mid2: #47148c 85%;
  --panel-grad-hover-end: #ac49f0 120%;
  --panel-border-hover: #232351;
  --panel-cursor-glow: rgb(113 40 255 / 25%);
}
.filter-menu.has-filters:not(.active) {
  background: linear-gradient(180deg, var(--btn-grad-start) 0%, var(--btn-grad-end) 100%);
  box-shadow: inset 0 0 0 1px var(--btn-border);
}
.filter-menu.has-filters:not(.active):hover {
  background: linear-gradient(180deg, var(--btn-grad-hover-start) 0%, var(--btn-grad-hover-mid1) 64%, var(--btn-grad-hover-mid2) 86%, var(--btn-grad-hover-end) 108%);
  box-shadow: inset 0 0 0 1px var(--btn-border-hover);
}


.filter-menu.active {
  max-height: 180px; /* Reduced from 240px to fit 5 rows compactly */
  width: 440px; /* Reduced from 480px */
  box-shadow: 0 32px 64px rgb(11 3 20 / 23%);
  border-color: transparent;
  overflow: visible; /* Prevent clipping of the custom border overlay */
}

/* Show border overlay when active */
.filter-custom-overlay.normal-border {
  --panel-border: #2a2b41;
  --panel-border-hover: #303b51;
}
.filter-menu.active:not(.has-filters) .filter-custom-overlay.normal-border {
  opacity: 1;
}

.filter-custom-overlay.filtered-border {
  --panel-border: #5b499b;
  --panel-border-hover: #232351;
}
.filter-menu.active.has-filters .filter-custom-overlay.filtered-border {
  opacity: 1;
}

.year-menu .filter-custom-overlay.normal-border {
  --panel-border: #2b2c40;
  --panel-border-hover: #57596a;
}
.year-menu.active:not(.has-filters) .filter-custom-overlay.normal-border {
  opacity: 1;
}

.year-menu .filter-custom-overlay.filtered-border {
  --panel-border: #4566b5;
  --panel-border-hover: #3d5188;
}
.year-menu.active.has-filters .filter-custom-overlay.filtered-border {
  opacity: 1;
}

.filter-menu.active.has-filters,
.year-menu.active.has-filters {
  border-color: transparent;
}

.filter-menu.active > *:not(.filter-custom-overlay):not(.filter-menu-panel-bg),
.year-menu.active > *:not(.filter-custom-overlay):not(.year-menu-panel-bg) {
  position: relative;
  z-index: 2;
}

/* Grid Area (Left) */
.filter-menu-grid-wrap {
  flex-grow: 1;
  padding: 16px 20px; /* Adjusted padding from borders */
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.filter-menu.active .filter-menu-grid-wrap {
  opacity: 1;
  transition-delay: 0.1s;
}
.filter-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 1fr);
  grid-auto-flow: column;
  gap: 10px 28px; /* Adjusted vertical and horizontal gaps */
}
.filter-menu-genre {
  color: #c0c4d1;
  font-family: var(--font);
  font-size: 13px; /* Reduced to 13px to match Genre button text */
  font-weight: var(--fw-light); /* Styled to match Genre button light weight */
  cursor: pointer;
  transition: color var(--t-fast);
}
.filter-menu-genre.selected {
  color: #ffffff;
  font-weight: 500;
}

.filter-menu.has-filters .filter-menu-genre:not(.selected) {
  color: rgba(255, 255, 255, 0.3);
}
.filter-menu.has-filters .filter-menu-genre:not(.selected):hover {
  color: rgba(255, 255, 255, 0.6);
}

#ratingsGenreMenuGrid.has-selection .filter-menu-genre {
  color: rgba(255, 255, 255, 0.3);
}
#ratingsGenreMenuGrid.has-selection .filter-menu-genre:hover {
  color: rgba(255, 255, 255, 0.6);
}
#ratingsGenreMenuGrid .filter-menu-genre.selected {
  color: #ffffff !important;
  font-weight: 500;
}

/* Sidebar Area (Right) */
.filter-menu-sidebar {
  position: relative;
  z-index: 1;
  width: 74px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.filter-menu-sidebar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: rgb(213 218 239 / 8%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.filter-menu.active .filter-menu-sidebar::before {
  opacity: 1;
}
.filter-menu-header {
  height: 36px;
  flex-shrink: 0; /* Prevents squishing when closed */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c0c4d1;
  font-family: var(--font);
  font-size: 13px;
  font-weight: var(--fw-light);
  cursor: pointer;
  transition: color 0.3s ease, opacity 0.2s ease;
}

/* Genre button disabled when no applicable media type is selected */
.genre-disabled .filter-menu-header {
  opacity: 0.35;
  cursor: not-allowed;
}
.genre-disabled .filter-menu {
  pointer-events: none;
}
.filter-menu.has-filters .filter-menu-header,
.filter-menu.active .filter-menu-header {
  color: #ebedf0;
}
.filter-menu.has-filters:not(.active):hover .filter-menu-header {
  color: #cdd1dd;
}

/* Action Buttons */
.filter-sidebar-actions {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.filter-menu.active .filter-sidebar-actions {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.1s;
}
.filter-menu-invert,
.filter-menu-clear {
  background: transparent;
  border: none;
  color: #d8dcf17a;
  font-family: var(--font);
  font-weight: var(--fw-light);
  font-size: 13px; /* Reduced to match design screenshot */
  padding: 4px 0; /* Reduced vertical padding */
  cursor: pointer;
  transition: color var(--t-fast);
  text-align: center;
}
.filter-menu-invert:hover,
.filter-menu-clear:hover {
  color: #ebedf0;
}
.filter-pill:hover .filter-close {
  opacity: 1;
}

.year-filter-wrap {
  position: relative;
  display: inline-block;
}

/* Year button (editor, viewer, ratings): fixed width + explicit text size so it
   matches the other filter buttons (it was content-sized and read as smaller/shifted). */
#filterYearBtn,
#viewFilterYearBtn,
#ratingsFilterYearBtn {
  width: 74px;
  font-size: 13px;
  line-height: 1;
}

.year-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: -50px;
  width: 250px;
  height: 38px; /* Strict height to match button */
  background: linear-gradient(180deg, var(--panel-grad-start) 0%, var(--panel-grad-end) 100%);
  border: 1px solid transparent;
  border-radius: 12px;
  z-index: 199;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  
  /* Animation states */
  max-height: 0; /* will animate to 36px */
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: max-height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), 
              opacity 0.2s ease, 
              transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              background 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
              border-color 0.4s cubic-bezier(0.2, 0, 0.09, 0.98);

  /* Configure Year Panel colors in default state here */
  --panel-grad-angle: 180deg;
  --panel-grad-hover-start: #0a101b;
  --panel-grad-hover-mid: #141624;
  --panel-grad-hover-end: #202238;
  --panel-border: #2b2c40;
  --panel-border-hover: #57596a;
  --panel-cursor-glow: rgb(100 113 170 / 8%);
}

.year-menu.active {
  max-height: 38px;
  height: 38px;
  min-height: 38px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  box-shadow: 0 32px 64px rgb(0 0 0 / 32%);
  overflow: visible; /* Prevent clipping of the custom border overlay */
}

.year-menu.has-filters {
  /* Configure Year Panel colors in active/has-filters state here */
    --panel-grad-angle: 178deg;
    --panel-grad-hover-start: #0f1021;
    --panel-grad-hover-mid: #062c70 69%;
    --panel-grad-hover-end: #0e8fea 125%;
    --panel-border: #4566b5;
    --panel-border-hover: #3d5188;
    --panel-cursor-glow: rgb(13 107 237 / 25%);
}

.year-menu.active.has-filters {
  border-color: transparent;
}

/* Year menu overlays are handled by class-based background elements above */

/* Year button active state (Blue theme) — editor, viewer and ratings buttons */
#filterYearBtn.has-filters,
#viewFilterYearBtn.has-filters,
#ratingsFilterYearBtn.has-filters {
    --btn-grad-start: #0e0c1c;
    --btn-grad-end: #083b7b;
    --btn-border: #4b71cd;
    --btn-grad-hover-start: #03040a;
    --btn-grad-hover-mid1: #07165b 51%;
    --btn-grad-hover-mid2: #07368b 90%;
    --btn-grad-hover-end: #0f5ec1 98%;
    --btn-border-hover: #1a6aaf;
    --btn-cursor-glow: rgb(13 78 237 / 25%);
    background: linear-gradient(180deg, var(--btn-grad-start) 0%, var(--btn-grad-end) 100%);
    border-color: transparent;
    box-shadow: inset 0 0 0 1px var(--btn-border);
}
#filterYearBtn.has-filters:hover,
#viewFilterYearBtn.has-filters:hover,
#ratingsFilterYearBtn.has-filters:hover {
    background: linear-gradient(180deg, var(--btn-grad-hover-start) 0%, var(--btn-grad-hover-mid1) 64%, var(--btn-grad-hover-mid2) 86%, var(--btn-grad-hover-end) 108%);
    border-color: transparent;
    box-shadow: inset 0 0 0 1px var(--btn-border-hover);
}

/* Panel Content */
.year-menu-content {
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
}

.year-input {
  background: transparent;
  border: 1px solid transparent;
  color: #d9e1ed;
  font-size: 14px;
  font-weight: var(--fw-light);
  font-family: var(--font);
  width: 40px;
  text-align: center;
  -moz-appearance: textfield; /* Hide arrows in Firefox */
  transition: border-color 0.2s, background 0.2s;
  border-radius: 6px;
  outline: none;
}

/* Hide arrows in Webkit */
.year-input::-webkit-outer-spin-button,
.year-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Slider Track */
.year-slider-track {
  position: relative;
  flex-grow: 1;
  height: 2px;
  background: #404e7b;
  border-radius: 1px;
}

/* Active Fill */
.year-slider-fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: linear-gradient(to right, #707a91, #8ba1d1);
  border-radius: 1px;
  left: 0%;
  right: 0%;
}

/* Thumbs */
.year-slider-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 12px;
  background: #9da4b9;
  border: 1px solid #7b8eb5;
  border-radius: 4px;
  cursor: grab;
  z-index: 2;
}

.year-slider-thumb.left-thumb {
  left: 0%;
}

.year-slider-thumb.right-thumb {
  left: 100%;
}

.year-slider-thumb:active {
  cursor: grabbing;
}

/* Search icon inside panel input */
.search-icon {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
  color: var(--text-400);
  pointer-events: none;
  z-index: 1;
}

.tier-label-text {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
  box-sizing: border-box;
}


/* ============================================================
   Tier List
   ============================================================ */
.tierlist {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}

/* Border radius for first and last rows since overflow: hidden is removed */
.tierlist > .tier-row:first-child .tier-label {
  border-top-left-radius: var(--r-lg);
}
.tierlist > .tier-row:first-child .tier-content {
  border-top-right-radius: var(--r-lg);
}
.tierlist > .tier-row:last-child .tier-label {
  border-bottom-left-radius: var(--r-lg);
}
.tierlist > .tier-row:last-child .tier-content {
  border-bottom-right-radius: var(--r-lg);
}

/* Prevent glass-panel child selector from forcing a stacking context on tier-row, which would isolate mix-blend-modes */
.tierlist.glass-panel > .tier-row {
  z-index: auto;
}

/* Single tier row */
.tier-row {
  display: flex;
  align-items: stretch;
  min-height: calc(var(--album-size) + 18px);
  position: relative;
  transition: background var(--t-fast);
}

/* Separator lines between tiers */
.tier-row::after {
  content: '';
  position: absolute;
  left: var(--tier-label-w); right: 0; bottom: 0; height: 1px;
  background: 
    radial-gradient(150px 150px at var(--global-mouse-x, 0px) var(--global-mouse-y, 0px), rgba(180, 190, 255, 0.21), transparent 100%) fixed,
    linear-gradient(to left, rgb(105 115 162 / 31%), rgb(114 120 192 / 15%) 50%, rgba(82, 88, 117, 0.25));
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}
.tier-row:last-child::after {
  display: none;
}

/* ── Tier Glow Overlays (Dual Layer Neon Effect) ── */
/* Layer 1: Under the albums, color-dodge blend mode, wider spread and more blurred for a soft neon background wash */
.tier-glow-dodge {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--tier-label-w);
  background: var(--tier-color, #ff2d55);
  box-shadow: 5px 0 80px 15px var(--tier-color, #ff2d55);
  mix-blend-mode: color-dodge;
  opacity: calc(0.2333 * var(--neon-intensity));
  filter: blur(5px);
  pointer-events: none;
  z-index: 1;
}

/* Layer 2: On top of the albums, screen blend mode, tighter glow cast directly onto album covers */
.tier-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--tier-label-w);
  background: var(--tier-color, #ff2d55);
  box-shadow: 5px 0 50px -5px var(--tier-color, #ff2d55);
  mix-blend-mode: screen;
  opacity: calc(0.4 * var(--neon-intensity));
  pointer-events: none;
  z-index: 3;
}

@keyframes tierImpactGlow {
  0% {
    opacity: calc(0.6667 * var(--neon-intensity));
    filter: brightness(1);
    box-shadow: 5px 0 30px -5px var(--tier-color, #ff2d55);
  }
  15% {
    opacity: calc(0.6333 * var(--neon-intensity));
    filter: brightness(1.3);
    box-shadow: 0px 0 50px 0px var(--tier-color, #ff2d55);
  }
  100% {
    opacity: calc(0.3667 * var(--neon-intensity));
    filter: brightness(1);
    box-shadow: 5px 0 50px -5px var(--tier-color, #ff2d55);
  }
}

@keyframes tierImpactDodge {
  0% {
    opacity: calc(0.4667 * var(--neon-intensity));
    box-shadow: 5px 0 70px 5px var(--tier-color, #ff2d55);
  }
  15% {
    opacity: calc(0.5667 * var(--neon-intensity));
    box-shadow: 0px 0 140px 15px var(--tier-color, #ff2d55);
  }
  100% {
    opacity: calc(0.2333 * var(--neon-intensity));
    box-shadow: 5px 0 100px 10px var(--tier-color, #ff2d55);
  }
}

.tier-row.tier-impact::before {
  animation: tierImpactGlow 0.9s cubic-bezier(0.02, 0.27, 0.46, 0.97) forwards;
}

.tier-row.tier-impact .tier-glow-dodge {
  animation: tierImpactDodge 0.9s cubic-bezier(0.02, 0.27, 0.46, 0.97) forwards;
}

/* ── Tier Label (left column) ── */
.tier-label {
  width: var(--tier-label-w);
  min-width: var(--tier-label-w);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: var(--fw-medium);
  color: #ffffff;
  text-shadow: 0 3px 10px rgb(23 27 150 / 58%), 0px 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  user-select: none;
  position: relative;
  z-index: 4; /* Above the glow layer */
  transition: filter var(--t-fast);
  letter-spacing: 0;
  padding: 8px 6px;
  text-align: center;
  word-break: break-word;
  line-height: 1.15;
  overflow: hidden; /* Clip the shading overlay */
}

/* Shading overlay with built-in bevel edges — all in overlay blend mode.
   Main gradient: #6f7180 (dark) top → #fff4f0 (light) bottom.
   Extra-dark at very top and extra-bright at very bottom create chamfer
   at tier junctions when adjacent blocks stack. */
.tier-label::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    #f4f2f0 0%,
    #1a1a1c 2%,
    #464646 50%,
    #aaaaaa 98%,
    #3a3a46 100%
  );
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 5;
}
.tier-label:hover {
  filter: brightness(1.15);
}

/* Settings gear on hover */
.tier-label::after {
  content: '⚙';
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 10px;
  opacity: 0;
  transition: opacity var(--t-fast);
  z-index: 6; /* Above the bevel shading */
}
.tier-label:hover::after {
  opacity: 0.7;
}

/* Long custom tier names: smaller text */
.tier-label[data-long-name="true"],
.tier-label.tier-label--long {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
}


/* ── Tier Content (drop zone) ── */
.tier-content {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 6px;
  padding: 8px 10px;
  min-height: calc(var(--album-size) + 18px);
  transition: background var(--t-fast);
  position: relative;
  z-index: 2;
}

/* Vertical line separating label and dropzone */


/* ── Tier Actions (right side buttons) ── */
.tier-actions {
  display: flex;
  align-items: flex-start;
  padding: 6px 4px;
}

/* Taller rows in Movies, Books & Games mode */
[data-media="movies"] .tier-row,
[data-media="books"] .tier-row,
[data-media="games"] .tier-row {
  min-height: calc(var(--album-size) * 1.5 + 18px);
}
[data-media="movies"] .tier-content,
[data-media="books"] .tier-content,
[data-media="games"] .tier-content {
  min-height: calc(var(--album-size) * 1.5 + 18px);
}

/* Drop zone highlight */
.tier-content.sortable-drag-over,
.tier-content.drag-over {
  background: var(--bg-glass-active);
}

/* ── Add Tier Row ── */
.add-tier-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  border: 1.5px dashed rgba(213, 218, 239, 0.07);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.005);
  color: rgb(213 218 239 / 24%);
  font-family: var(--font);
  font-size: 13px;
  font-weight: var(--fw-light);
  text-transform: capitalize;
  letter-spacing: normal;
  cursor: pointer;
  transition: border-color var(--t-normal), color var(--t-normal), background-color var(--t-normal), transform var(--t-fast);
}

.add-tier-row:hover {
  border-color: rgba(213, 218, 239, 0.2);
  color: var(--text-200);
  background-color: rgba(255, 255, 255, 0.015);
}

.add-tier-row:active {
  transform: scale(0.993);
}

.add-tier-row svg {
  width: 12px;
  height: 12px;
  opacity: 0.6;
  transition: opacity var(--t-normal);
}

.add-tier-row:hover svg {
  opacity: 0.95;
}


/* ============================================================
   Album Card
   ============================================================ */
.album-card {
  width: var(--album-size);
  cursor: grab;
  user-select: none;
  transition: opacity 0.25s ease-out,
              width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              min-width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              max-width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              margin 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              padding 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow var(--t-fast);
  position: relative;
}
.album-card:active {
  cursor: grabbing;
}

.album-cover-wrap {
  width: var(--album-size);
  height: var(--album-size);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  background: var(--bg-raised);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  /* Transform is fully driven by JS animation loop with physics-based damping */
  transition: box-shadow 0.15s ease-out;
  transform-origin: bottom center;
}

.album-card:hover {
  z-index: 10;
}

.album-card:hover .album-cover-wrap {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.album-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Movie Card: portrait poster (2:3 ratio) ── */
.movie-card .album-cover-wrap {
  height: auto;
  aspect-ratio: 2 / 3;
}

/* Fixed portrait size inside tier rows */
.tier-content .movie-card .album-cover-wrap {
  height: calc(var(--album-size) * 1.5);
  aspect-ratio: unset;
}

/* Gradient placeholder when no image */
.album-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: var(--fw-extrabold);
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}


/* ── Album Info Overlay (on hover) ── */
.album-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px 5px 5px;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  border-radius: 0 0 5px 5px;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--t-fast);
}
.album-card:hover .album-info {
  opacity: 1;
}

.album-info-title {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.2;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.album-fav-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  pointer-events: auto;
  padding: 0 4px;
  font-size: 13px;
  transition: color var(--t-fast), transform var(--t-fast);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}
.album-fav-btn:hover {
  color: #f1c40f;
  transform: scale(1.1);
}
.album-fav-btn.is-fav {
  color: #f1c40f;
}

/* ── Remove Button ── */
.album-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t-fast), color var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2px;
  z-index: 5;
}

/* Расширенная невидимая зона клика, чтобы компенсировать прыжок обложки при увеличении */
.album-remove::after {
  content: '';
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
}
.album-card:hover .album-remove {
  opacity: 1;
}
.album-remove:hover {
  color: #cdd1dd;
}

/* Debug score badge */
.debug-score-badge {
  position: absolute;
  top: 3px;
  left: 3px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  padding: 1px 4px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 20;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

/* Debug toggle button in filter bar */
.debug-scores-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: var(--text-200);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  user-select: none;
}
.debug-scores-label:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text-100);
}
.debug-scores-label.active {
  background: rgba(110, 231, 135, 0.12);
  border-color: rgba(110, 231, 135, 0.35);
  color: #6ee787;
}


/* ============================================================
   SortableJS States
   ============================================================ */
.sortable-ghost {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* Album-card drop placeholder: keep the FULL card slot so a clear, stable gap
   opens up exactly where the item will land. The old rule collapsed the ghost to
   0x0, so no gap was ever reserved — the slot only briefly appeared via Sortable's
   shift animation, which is why it "worked only sometimes". The card content is
   hidden and the cover box becomes an empty dashed outline marking the spot.
   (More specific than .sortable-ghost above, so it wins; the search-result ghost
   keeps the collapsed behaviour.) */
.album-card.sortable-ghost {
  opacity: 1 !important;
  width: var(--album-size) !important;
  min-width: var(--album-size) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: visible !important;
}
.album-card.sortable-ghost .album-cover,
.album-card.sortable-ghost .album-cover-placeholder,
.album-card.sortable-ghost .album-info,
.album-card.sortable-ghost .album-remove {
  visibility: hidden !important;
}
.album-card.sortable-ghost .album-cover-wrap {
  background: transparent !important;
  border: 1px dashed rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important;
  transform: none !important;
}

.tier-content::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, color-mix(in srgb, var(--tier-color) 14%, transparent), #00000000 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  /* Медленное затухание для эффекта красивого следа (trail) */
  transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: inherit;
}

.tier-row:has(.sortable-ghost) .tier-content::after {
  opacity: 1;
  /* Плавное загорание (fade-in) при наведении */
  transition: opacity 0.25s ease-out;
}

.sortable-chosen .album-cover-wrap {
  transform: scale(1.08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 24px var(--accent-glow);
}

/* Touch tap-to-move: the currently selected item (see tapSelectedCard in app.js). */
.album-card.tap-selected {
  z-index: 11;
}
.album-card.tap-selected .album-cover-wrap {
  transform: scale(1.08);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55), 0 0 24px var(--accent-glow);
}

.sortable-drag {
  z-index: 9999;
}

.sortable-fallback {
  opacity: 0.9 !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  /* SortableJS positions the fallback clone via inline transform on every move; a
     transform transition would make it ease toward each target and lag behind the
     cursor (looking frozen). Snap instantly. (Used by the search panel's drag.) */
  transition: none !important;
}


/* ============================================================
   Pool Section
   ============================================================ */
.pool-section {
  position: relative; /* positioning context for the absolute clear/trash button */
  margin-top: 28px;
}

.pool-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pool-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.pool-title {
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--text-200);
  letter-spacing: -0.01em;
}

.pool {
  position: relative;
  min-height: 80px;
  padding: 12px 40px 12px 12px;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  align-content: flex-start;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.pool:empty {
  min-height: 50px;
}

/* Pool Album Cards Background Spotlight Halos (scales automatically with --album-size!) */
.pool .album-card::before {
  content: '';
  position: absolute;
  inset: calc(var(--album-size) * -0.9);
  background-image: 
    radial-gradient(rgb(136 141 166 / 25%) 1.5px, transparent 1.5px),
    radial-gradient(rgb(136 141 166 / 22%) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
  background-attachment: fixed;
  -webkit-mask-image: radial-gradient(circle at center, black calc(var(--album-size) * 0.25), transparent calc(var(--album-size) * 1.0));
  mask-image: radial-gradient(circle at center, black calc(var(--album-size) * 0.25), transparent calc(var(--album-size) * 1.0));
  opacity: 1;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.5s var(--ease);
}

.pool .album-card.filtered-out::before {
  opacity: 0;
}

.pool.drag-over,
.pool.sortable-drag-over {
  border-color: var(--border-accent);
  background-color: rgba(168, 85, 247, 0.03);
}

.clear-pool-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  color: #cdd1dd;
  opacity: 0.45;
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-fast), opacity var(--t-fast);
}
.modal-close {
  background: transparent;
  border: none;
  color: #d7d7db;
  font-size: 24px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color var(--t-fast);
  margin-top: -4px;
}
.clear-pool-btn:hover {
  color: #e05c5c;
  opacity: 1;
}

.pool-hint {
  margin-top: 10px;
  text-align: center;
  color: var(--text-400);
  font-size: 12px;
  font-weight: var(--fw-medium);
  transition: opacity var(--t-normal);
}
.pool-hint.hidden {
  opacity: 0;
}


/* ============================================================
   Search Panel (Right Sidebar)
   ============================================================ */
.search-panel {
  width: var(--search-panel-w);
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--header-h) + 14px);
  margin-top: 0;
  border-radius: var(--r-lg);
  background: linear-gradient(-16deg, #1a1e2d -12%, #14151f 34%, #0d0d14 80%, #161a25 116%);
  box-shadow: 0px 10px 32px rgb(5 6 8 / 22%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-self: flex-start;
  height: calc(6 * (var(--album-size) + 18px));
}

/* Increased specificity to override .glass-panel > * */
.search-panel .search-panel-input-wrap {
  position: relative;
  padding: 14px 14px 0;
}

.search-panel-input {
  width: 100%;
  height: 34px;
  padding: 0 36px 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 100%), rgba(255, 255, 255, 0.03);
  color: #d1d5db;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  outline: none;
}
.search-panel-input::placeholder {
  color: rgba(255,255,255,0.2);
}

.search-clear-btn {
  position: absolute;
  right: 24px;
  top: calc(14px + 16.5px);
  transform: translateY(-50%);
  z-index: 101; /* Must sit above the input which has z-index 100 */
  height: 20px;
  margin: 0;
  width: 20px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--text-200);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  padding-bottom: 1px; /* Optical center for times icon */
  transition: color var(--t-fast), background var(--t-fast);
  opacity: 0;
  pointer-events: none;
}
.search-clear-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ── Search Type Toggle ── */
.search-type-toggle {
  display: none;
  padding: 8px 14px 0;
}
.search-type-toggle.visible {
  display: block;
}
.search-toggle-movies,
.search-toggle-music {
  display: none;
  gap: 4px;
}
.search-type-toggle.is-movies .search-toggle-movies { display: flex; }
.search-type-toggle.is-music  .search-toggle-music  { display: flex; }
.search-type-btn {
  flex: 1;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: var(--fw-light);
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.32);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.search-type-btn:hover {
  color: rgba(255,255,255,0.6);
}
.search-type-btn.active {
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
}
/* Deep Search — full width, same pill style as film tabs */

.search-clear-btn:hover {
  color: #cdd1dd;
  background: transparent;
}


/* Wrapper around toggle + results + footer. Transparent to layout on desktop
   (children flow as before); becomes an absolute dropdown overlay on phones. */
.search-dropdown {
  display: contents;
}

/* ── Search Results (inline, scrollable) ── */
.search-panel-results {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 8px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
  position: relative;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000000 75%, #00000000 96%, #00000000 100%);
}

/* Soft shadow cast directly by the search input */
.search-panel:not(.is-empty) .search-panel-input {
  box-shadow: 0px 14px 18px -2px rgb(13 13 24);
  position: relative;
  z-index: 100;
}
.search-panel-results::-webkit-scrollbar {
  width: 5px;
}
.search-panel-results::-webkit-scrollbar-track {
  background: transparent;
}
.search-panel-results::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  cursor: default;
  transition: background var(--t-fast);
  user-select: none;
}
.search-result-item:hover {
  background: var(--bg-glass-hover);
}

.search-drag-handle {
  margin-left: auto;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.2);
  cursor: grab;
  display: flex;
  align-items: center;
  padding: 4px 2px;
  border-radius: 3px;
  transition: color var(--t-fast), background var(--t-fast);
}
.search-drag-handle:hover {
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
}
.search-drag-handle:active {
  cursor: grabbing;
}

.search-result-cover {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--bg-raised);
  object-fit: cover;
  flex-shrink: 0;
  cursor: grab;
}
.search-result-cover:active {
  cursor: grabbing;
}

.search-result-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 2px;
  cursor: pointer;
}

.search-result-title {
  font-size: 13px;
  font-weight: var(--fw-semibold);
  color: var(--text-100);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.search-result-artist {
  font-size: 11px;
  color: #a19fab;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* ── Search Panel Footer ── */
.search-panel.is-empty #addManualBtn {
  display: none;
}
.search-panel:not(.is-empty) .add-manual-empty {
  display: none;
}
/* Manual add: hidden for all media types except misc (controlled via editView data-media) */
#editView:not([data-media="misc"]) #addManualBtn,
#editView:not([data-media="misc"]) #addManualEmptyBtn {
  display: none !important;
}


/* ── Editor score panel (below search panel; reuses .view-ratio-bar/info) ── */
.editor-score-panel {
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.search-panel .search-panel-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  pointer-events: none;
  padding-top: 70px;
  background: transparent;
}
.search-panel-footer a {
  display: inline-block;
  padding: 14px 14px 14px;
  color: var(--text-200);
  transition: color var(--t-fast);
  text-decoration: none;
  pointer-events: auto; /* Re-enable clicks only for the text */
}
.search-panel-footer a:hover {
  color: var(--text-100);
}

.search-panel-footer a,
.search-panel-footer span {
  font-size: 11px;
  color: #626273;
  transition: color var(--t-fast);
  cursor: pointer;
}
.search-panel-footer a:hover,
.search-panel-footer span:hover,
.add-manual-empty:hover {
  color: var(--text-200);
}

.add-manual-empty {
  display: inline-block;
  padding: 14px 14px 14px;
  font-size: 11px;
  color: #626273;
  text-decoration: none;
  transition: color var(--t-fast);
  pointer-events: auto;
}


/* ── Loading / Empty States ── */
.search-loading,
.search-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* Take full height of results container for perfect centering */
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-400);
}

.search-result-dummy {
  height: 45px;
  pointer-events: none;
}

/* Search result ghost — keeps the original item visible (faded) in the list while dragging */
#searchResults .search-result-item.sortable-ghost {
  opacity: 0.4 !important;
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border: 0 !important;
  overflow: visible !important;
}

/* Search result item while being dragged — collapses to album-card size */
.sortable-drag.search-result-item,
.sortable-fallback.search-result-item {
  width: var(--album-size) !important;
  height: var(--album-size) !important;
  border-radius: 5px !important;
  overflow: hidden !important;
  padding: 0 !important;
  gap: 0 !important;
  background: var(--bg-raised) !important;
  display: block !important;
}
.sortable-drag.search-result-item .search-result-info,
.sortable-fallback.search-result-item .search-result-info,
.sortable-drag.search-result-item .search-drag-handle,
.sortable-fallback.search-result-item .search-drag-handle {
  display: none !important;
}
.sortable-drag.search-result-item .search-result-cover,
.sortable-fallback.search-result-item .search-result-cover {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* ============================================================
   Glass Panel Cursor Effects
   ============================================================ */
.glass-panel {
  position: relative;
  overflow: hidden;
}

/* The actual panel content must sit above the glow */
.glass-panel > * {
  position: relative;
  z-index: 2;
}

.glass-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(120px 96px at var(--mouse-x, 0) var(--mouse-y, 0), rgb(133 143 213 / 4%), transparent 100%);
  filter: blur(15px); /* Gaussian blur effect */
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--t-fast);
}

/* Border spotlight glow */
.glass-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: 
    radial-gradient(120px 96px at var(--mouse-x, 0) var(--mouse-y, 0), rgba(180, 190, 255, 0.35), transparent 100%) border-box,
    linear-gradient(-45deg, #525875, 5%, #242533, 80%, #3f4359) border-box;
  background-blend-mode: screen, normal;
  /* Use mask to cutout the inside, leaving only the 1px border area */
  border: 1px solid transparent;
  -webkit-mask: linear-gradient(#cdd1dd 0 0) padding-box, linear-gradient(#cdd1dd 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 20; /* Keep above all inner gradients/elements to preserve glare */
}

/* specific bottom border override since header doesn't use standard full border */
.header.glass-panel::after {
  top: auto;
  bottom: 0; /* Overlap the existing bottom border */
  height: 1px;
  border: none;
  -webkit-mask: none;
  mask-composite: auto;
  border-radius: 0;
  background: 
    radial-gradient(120px 96px at var(--mouse-x, 0) var(--mouse-y, 0), rgba(180, 190, 255, 0.35), transparent 100%) fixed,
    #2c2e38;
  background-blend-mode: screen, normal;
}


/* ============================================================
   Legacy Search UI (existing HTML classes)
   ============================================================ */
.search-container {
  position: relative;
  flex: 1;
  max-width: 320px;
}

.search-input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-surface) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%236a6a80" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>') no-repeat 10px center;
  color: var(--text-100);
  font-family: var(--font);
  font-size: 13px;
  outline: none;
  transition: all var(--t-fast);
}
.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  background-color: var(--bg-raised);
}
.search-input::placeholder {
  color: var(--text-400);
}

.search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-width: 400px;
  background: var(--bg-raised);
  border: 1px solid var(--border-hover);
  border-radius: var(--r-md);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  z-index: 200;
  max-height: 300px;
  overflow-y: auto;
  display: none;
}
.search-results.active {
  display: block;
  animation: fadeInUp 0.2s var(--ease);
}


/* ============================================================
   Modal
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 11, 20, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-normal), visibility var(--t-normal);
}
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: #14151f;
  border: none;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.7);
  transform: translateY(12px) scale(0.97);
  transition: transform var(--t-normal), box-shadow var(--t-fast);
  display: flex;
  flex-direction: column;
}
.modal-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: 
    radial-gradient(120px 96px at var(--mouse-x, 0) var(--mouse-y, 0), rgb(133 143 213 / 4%), transparent 100%),
    linear-gradient(to bottom, rgba(30, 20, 20, 0.4), #14151f 80%);
  flex: 1;
}

.modal-overlay.active .modal {
  transform: translateY(0) scale(1);
}
.modal-sm {
  max-width: 320px;
}
.modal-md {
  max-width: 500px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.modal-header h3 {
  font-size: 18px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
}

/* Let the scroll list run all the way to the modal's bottom edge (like
   .popout-page-stats fills the popout), instead of clipping in a box with
   solid padding below it. */
/* Give the modal a height cap so the list can fill it instead of
   relying on max-height: 400px inline on #favItemsList. */
#editFavouritesModalInner {
  max-height: min(85vh, 560px);
}

#editFavouritesModalInner .modal-content {
  padding-bottom: 0;
  flex: 1;
  min-height: 0;
}

/* The body is just a relative container — the "9/9" counter floats above
   the list, and the list itself is the scroll container that carries the
   mask (exactly like .popout-page-stats: the fade lives on the scrolling
   element so it coincides with the clip edge). */
#editFavouritesModalInner .modal-body {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: visible;
  gap: 0 !important;
}

#editFavouritesModalInner #favInstructionText {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  margin-bottom: 0 !important;
}

.fav-drag-ghost {
  opacity: 0.25;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}
.fav-drag-chosen {
  opacity: 0.85;
}

/* ── Inline lists edit mode ── */
.home-card.list-editing {
  cursor: default;
}
/* Edit-mode action cluster on list cards (main star + trash), kept on one baseline */
.list-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.list-main-toggle,
.list-delete-toggle {
  width: 18px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  transition: transform 0.15s ease, color 0.15s ease;
}
/* Star matches the favourites popout star exactly: thin outline, no glow/gold;
   filled translucent white when active. */
.list-main-toggle svg {
  width: 18px;
  height: 18px;
}
.list-main-toggle svg polygon {
  fill: none;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1.2;
  transition: fill 0.15s ease, stroke 0.15s ease;
}
.list-main-toggle:hover { transform: scale(1.12); }
.list-main-toggle.is-main svg polygon {
  fill: rgba(255, 255, 255, 0.6);
  stroke: rgba(255, 255, 255, 0);
}
/* Trash mirrors the favourites-edit trash: neutral, red only on hover */
.list-delete-toggle {
  color: #cdd1dd;
  opacity: 0.45;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.list-delete-toggle:hover {
  color: #e05c5c;
  opacity: 1;
}

/* ── Inline favourites edit mode (replaces the old modal) ── */
.profile-section-edit-btn.active {
  color: #6ee787;
}
.profile-fav-grid.editing .item-rating-card {
  cursor: default;
}
.profile-fav-grid.editing .card-content-horizontal {
  padding-right: 32px;
}
.fav-edit-controls {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px 6px;
  z-index: 5;
}
.fav-edit-drag {
  color: #cdd1dd;
  opacity: 0.45;
  cursor: grab;
  padding: 2px;
  display: flex;
}
.fav-edit-drag:active {
  cursor: grabbing;
}
.fav-edit-delete {
  background: transparent;
  border: none;
  color: #cdd1dd;
  opacity: 0.45;
  cursor: pointer;
  padding: 4px;
  font-size: 13px;
  transition: color 0.15s ease;
}
.fav-edit-delete:hover {
  color: #e05c5c;
  opacity: 1;
}
.fav-edit-quote {
  width: 100%;
  flex: 1;
  min-height: 44px;
  margin-top: 6px;
  resize: none;
  padding: 6px 8px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  line-height: 1.4;
  color: var(--text-100);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s ease;
}
.fav-edit-quote:focus {
  border-color: rgba(255, 255, 255, 0.25);
}
.fav-edit-quote::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

#app-notification {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(20, 10, 10, 0.85);
  border: 1px solid rgba(171, 58, 58, 0.5);
  color: #e05c5c;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 8px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  /* Stay inside the viewport on narrow screens: wrap long messages and cap the
     width instead of overflowing off both edges (the old white-space:nowrap). */
  max-width: calc(100vw - 24px);
  white-space: normal;
  text-align: center;
  line-height: 1.35;
  word-break: break-word;
}
#app-notification.app-notification--neutral {
  background: rgba(22, 22, 24, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f2f2f2;
}
#app-notification.app-notification--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#favItemsList {
  flex: 1 !important;
  max-height: none !important;
  min-height: 0;
  overflow-y: auto;
  /* Top transparent zone clears the floating "9/9" counter, then fades in;
     bottom fades out before the modal edge. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, transparent 18px, #000 68px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0px, transparent 18px, #000 68px, #000 calc(100% - 48px), transparent 100%);
  padding-top: 68px;
  padding-bottom: 48px;
}

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-300);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t-fast);
}
.modal-close:hover {
  color: var(--text-100);
}

.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Modal Glow (for rendering the color in background of modal, matching popout) */
.modal-glow {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  background: var(--modal-glow-bg, transparent);
  filter: blur(40px) saturate(1.5);
  opacity: 0.8;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
  transform: scale(1.3) translateY(-10%);
  background-position: calc(50% + var(--parallax-x, 0) * -30px) calc(50% + var(--parallax-y, 0) * -30px);
  -webkit-mask-image: linear-gradient(to bottom, #000000 10%, #00000000 60%);
  mask-image: linear-gradient(120deg, #000000 20%, #ffffffab 50%,  #000000 80%);
  transition: background var(--t-fast);
}

#addAlbumModalInner,
#tierlistSettingsModalInner,
#publishModalInner,
#mediaChoiceModalInner,
#profileSettingsModalInner,
#editFavouritesModalInner,
#editListsModalInner {
  --modal-glow-bg: rgb(85, 100, 123);
}

/* Viewer opens the same settings modal for display tweaks only (cover size / neon);
   the editor-only rows (Show Rating, Delete) are hidden. */
#tierlistSettingsModal.viewer-mode .settings-editor-only {
  display: none;
}

#authModalInner {
  --modal-glow-bg: rgb(80, 120, 160);
}

#deleteListModalInner {
  --modal-glow-bg: rgb(190, 45, 55);
}

#reassignMainModalInner {
  --modal-glow-bg: rgb(85, 100, 123);
}
/* Reassign confirmation stacks above the create/publish modals that trigger it */
#reassignMainModal { z-index: 1100; }

.modal-glow-solid {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  background-color: var(--modal-glow-bg, transparent);
  filter: blur(30px) saturate(1.5);
  opacity: 0.8;
  mix-blend-mode: normal;
  pointer-events: none;
  z-index: 0;
  transition: background-color var(--t-fast);
}

.modal-btn {
  flex: 1;
  --btn-grad-start: #141521;
  --btn-grad-end: #252631;
  --btn-border: #4f516d;
  --btn-grad-hover-start: #12131e;
  --btn-grad-hover-mid1: #282939;
  --btn-grad-hover-mid2: #33354b;
  --btn-grad-hover-end: #4b4e5f;
  --btn-border-hover: #565a7f;
  
  background: linear-gradient(180deg, var(--btn-grad-start) 0%, var(--btn-grad-end) 100%);
  border: 1px solid var(--btn-border);
  border-radius: 12px;
  padding: 12px;
  color: #e7e9e9;
  font-weight: var(--fw-medium);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.modal-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(75px 75px at var(--local-mouse-x, 0) var(--local-mouse-y, 0), var(--btn-cursor-glow, rgba(255,255,255,0.05)), transparent 100%);
  pointer-events: none;
}
.modal-btn:hover {
  background: linear-gradient(180deg, var(--btn-grad-hover-start) 0%, var(--btn-grad-hover-mid1) 64%, var(--btn-grad-hover-mid2) 86%, var(--btn-grad-hover-end) 108%);
  border-color: var(--btn-border-hover);
}

/* Hero "Create Tier List" button — distinct weight from other modal-btns */
#heroStartBtn { font-weight: var(--fw-medium); }

/* Variations */
.modal-btn-save {
  --btn-grad-start: #181925;
  --btn-grad-end: #143f1d;
  --btn-border: #2c5136;
  --btn-grad-hover-start: #0d1611;
  --btn-grad-hover-mid1: #104b0d;
  --btn-grad-hover-mid2: #2d6f03;
  --btn-grad-hover-end: #8eb90a;
  --btn-border-hover: #257739;
  --btn-cursor-glow: rgb(57 189 33 / 22%);
}

.modal-btn-delete {
  --btn-grad-start: #181925;
  --btn-grad-end: #43171a;
  --btn-border: #4b272b;
  --btn-grad-hover-start: #251819;
  --btn-grad-hover-mid1: #69151a;
  --btn-grad-hover-mid2: #ad0e1d;
  --btn-grad-hover-end: #ff5128;
  --btn-border-hover: #932731;
  --btn-cursor-glow: rgb(247 59 25 / 25%);
}

/* Locked Unpublish button on main lists: no hover/glow, default cursor. */
.modal-btn.publish-locked {
  cursor: default;
}
.modal-btn.publish-locked:hover {
  background: linear-gradient(180deg, var(--btn-grad-start) 0%, var(--btn-grad-end) 100%);
  border-color: var(--btn-border);
}
.modal-btn.publish-locked::after {
  background: none;
}

.modal-btn-add {
  --btn-grad-start: #292038;
  --btn-grad-end: #221a2e;
  --btn-border: #36294a;
  --btn-grad-hover-start: #292038;
  --btn-grad-hover-mid1: #38204b;
  --btn-grad-hover-mid2: #581880;
  --btn-grad-hover-end: #8a18c0;
  --btn-border-hover: #463460;
  --btn-cursor-glow: rgba(130, 80, 250, 0.25);
  width: 100%;
}

/* Modal Form */
.modal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  font-weight: var(--fw-semibold);
  color: var(--text-300);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-label[style*="text-transform: none"] {
  gap: 2px !important;
}
.required {
  color: #ab3a3a;
}
.optional {
  color: #8b8b99;
  text-transform: none;
  font-weight: var(--fw-regular);
  letter-spacing: 0;
}

.form-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  color: var(--text-100);
  padding: 10px 12px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-input:focus {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 12px rgba(255, 255, 255, 0.05);
  outline: none;
}
.form-input::placeholder {
  color: var(--text-400);
}

.form-color {
  width: 100%;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--r-md);
  cursor: pointer;
  padding: 4px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-color:focus {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 12px rgba(255, 255, 255, 0.05);
  outline: none;
}
.form-color::-webkit-color-swatch-wrapper {
  padding: 2px;
}
.form-color::-webkit-color-swatch {
  border: none;
  border-radius: 4px;
}

.tier-name-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
  color: #cdd1dd;
  font-family: var(--font-serif);
  font-size: 32px;
  text-align: center;
  padding: 4px 0 8px;
  outline: none;
  transition: border-color var(--t-fast);
}
.tier-name-input:focus {
  border-bottom-color: rgba(255, 255, 255, 0.4);
}
.tier-name-input::placeholder {
  color: rgba(255, 255, 255, 0.15);
}

.tier-color-preview-wrap {
  width: 100%;
  height: 60px;
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.tier-color-preview-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    #f4f2f0 0%,
    #1a1a1c 2%,
    #464646 50%,
    #aaaaaa 98%,
    #3a3a46 100%
  );
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 5;
}

.form-color-invisible {
  position: absolute;
  top: -10px;
  left: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  opacity: 0;
  cursor: pointer;
}


/* ============================================================
   Animations
   ============================================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.tier-row {
  animation: fadeInUp 0.35s var(--ease) backwards;
}
.tier-row:nth-child(1) { animation-delay: 0.00s; }
.tier-row:nth-child(2) { animation-delay: 0.04s; }
.tier-row:nth-child(3) { animation-delay: 0.08s; }
.tier-row:nth-child(4) { animation-delay: 0.12s; }
.tier-row:nth-child(5) { animation-delay: 0.16s; }
.tier-row:nth-child(6) { animation-delay: 0.20s; }
.tier-row:nth-child(7) { animation-delay: 0.24s; }

.album-card {
  animation: fadeInUp 0.3s var(--ease) backwards;
}

.search-panel {
  animation: fadeIn 0.4s var(--ease) both;
  animation-delay: 0.15s;
}


/* ============================================================
   Scrollbar (global)
   ============================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.14);
}


/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  :root {
    --search-panel-w: 260px;
  }
  .main {
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .main {
    flex-direction: column;
  }
  .main-right {
    width: 100%;
    position: static;
    order: -1;
  }
  .search-panel {
    width: 100%;
    position: static;
    order: -1;
  }
  .search-panel-results {
    max-height: 240px;
  }
  /* Keep the section links visible on tablets/phones (no burger menu) — all three
     stay on ONE row; on phones each link's TEXT wraps to two lines instead of the
     buttons stacking (see the phone block). */
  .header-nav-center {
    flex: 1;
    flex-wrap: nowrap;
    justify-content: center;
    min-width: 0;
    gap: 6px;
  }
}

@media (max-width: 640px) {
  :root {
    /* Phones: shrink covers to the 64px-equivalent (default 76 → 64 = ×0.842),
       proportional to whatever cover size the user set. */
    --album-size: calc(var(--album-size-raw) * 0.842);
    --tier-label-w: 56px;
    --header-h: 52px; /* compact: short one-word section labels fit one line */
  }

  /* ── Topbar (phones) ── smaller logo, hide the (non-essential) nickname so only
     the avatar remains, and swap the section links to short one-word labels so the
     three of them sit comfortably on one row. */
  .header-inner { padding: 0 12px; gap: 8px; }
  .logo-img { height: 30px; }
  .user-name { display: none; }
  .nav-label-full { display: none; }
  .nav-label-short { display: inline; }
  .nav-link {
    padding: 6px 10px;
    font-size: 13px;
    white-space: nowrap;
  }

  .main {
    /* Leave just enough room at the bottom for the fixed Unrated bar so the last
       tier / "Add tier" button clears it (+ the device safe-area on notch phones). */
    padding: 16px 12px calc(var(--album-size) + 32px + env(safe-area-inset-bottom, 0px));
    flex-direction: column;
  }

  /* ── Search (phones) ── a sticky thin input bar at the top; results drop down as
     an overlay over the tiers instead of pushing them down. main-right is set to
     display:contents so the search becomes a direct flex child of .main and its
     sticky positioning holds through the whole tier scroll (not just while the
     short right column is on screen). */
  .main-right {
    display: contents;
  }
  /* `.main-right > .search-panel` (the desktop wrapper rule) is more specific than
     a bare `.search-panel`, so it must be matched here too or the panel stays
     position:relative and scrolls away (leaving an empty page gap below). */
  .main-right > .search-panel,
  .search-panel {
    order: -1;
    width: 100%;
    position: sticky;
    top: var(--header-h);
    /* Above the genre filter menu (z-index 200) so it doesn't poke through the
       results dropdown. */
    z-index: 210;
    height: auto;
    overflow: visible;
    align-self: stretch;
  }
  .search-panel .search-panel-input-wrap {
    padding: 8px;
  }
  /* Concentric corners: inner radius = outer (12) − padding (8). */
  .search-panel-input {
    border-radius: 5px;
  }
  /* Center the clear (×) in the input — the desktop top calc assumes 14px padding. */
  .search-clear-btn {
    top: 50%;
    right: 18px;
  }
  /* Dropdown overlay: floats under the input, over the tiers. */
  .search-dropdown {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(-16deg, #1a1e2d -12%, #14151f 34%, #0d0d14 80%, #161a25 116%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-lg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    z-index: 70;
  }
  /* Collapse to just the thin input bar when there's no query, or when the user
     tapped outside the search (search-collapsed is toggled in search.js). */
  .search-panel.is-empty .search-dropdown,
  .search-panel.search-collapsed .search-dropdown {
    display: none;
  }
  /* Results flow inside the (scrolling) dropdown — drop the desktop flex sizing,
     fixed height and fade mask. */
  .search-panel-results {
    max-height: none;
    overflow: visible;
    flex: none;
    -webkit-mask-image: none;
    mask-image: none;
    padding: 4px 0;
  }
  /* Footer flows at the bottom of the dropdown instead of pinned to the panel. */
  .search-panel .search-panel-footer {
    position: static;
  }
  /* display:contents on main-right would otherwise drop the score panel to the
     very bottom of the column (a big empty gap above the fixed Unrated bar). Keep
     it up top next to the search, like before, and stretch it to full width
     (otherwise flex-start shrinks the ratings strip to its content width). */
  .editor-score-panel {
    order: -1;
    width: 100%;
    align-self: stretch;
  }

  .tierlist-title {
    font-size: 26px;
  }

  .tierlist-header {
    flex-wrap: wrap;
    gap: 10px;
    min-height: 56px;
  }

  .tier-row {
    min-height: calc(var(--album-size) + 18px);
  }

  .tier-label {
    font-size: 18px;
  }

  /* ── Unrated bar (phones) ──────────────────────────────────────────────────
     The pool becomes a single horizontally-scrollable row of covers pinned to the
     bottom of the screen. Drag is disabled in JS (so a swipe scrolls the row);
     tap a cover to select it, then tap a tier to drop it. The trash sits at the
     right edge. */
  .pool-section {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    margin-top: 0;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(14, 14, 20, 0.92);
    border-top: 1px solid var(--border-hover);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
    overflow: hidden;
  }

  /* "Unrated" label isn't needed in the bar — covers + trash only. */
  .pool-section .pool-header {
    display: none;
  }

  .pool {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    align-items: center;
    align-content: center;
    gap: 8px;
    padding: 4px 46px 4px 6px; /* right gap clears the trash button */
    min-height: calc(var(--album-size) + 10px);
    border: none;
    scrollbar-width: none;
  }
  .pool::-webkit-scrollbar { display: none; }
  .pool:empty {
    min-height: calc(var(--album-size) + 10px);
  }

  /* Covers keep their size in the track instead of being squeezed. */
  .pool .album-card {
    flex: 0 0 auto;
  }

  /* The big dotted halo behind each cover would expand the scroll area — drop it. */
  .pool .album-card::before {
    display: none;
  }

  /* Trash centered vertically at the right of the bar. */
  .pool-section .clear-pool-btn {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    right: 10px;
    font-size: 16px;
  }

  .search-container {
    max-width: 100%;
  }

  .filter-bar {
    width: 100%;
  }

  .filter-pill {
    font-size: 11px;
    padding: 4px 10px;
  }

  .header-inner {
    padding: 0 14px;
  }

  .logo {
    font-size: 15px;
  }

  .user-info span {
    display: none;
  }
}

.album-card.filtered-out {
  opacity: 0 !important;
  transform: scale(0.6) !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-width: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  
  /* Delay width and margin collapsing so opacity fades out first */
  transition: opacity 0.18s ease-out,
              transform 0.18s ease-out,
              width 0.24s cubic-bezier(0.4, 0, 0.2, 1) 0.06s,
              min-width 0.24s cubic-bezier(0.4, 0, 0.2, 1) 0.06s,
              max-width 0.24s cubic-bezier(0.4, 0, 0.2, 1) 0.06s,
              margin 0.24s cubic-bezier(0.4, 0, 0.2, 1) 0.06s,
              padding 0.24s cubic-bezier(0.4, 0, 0.2, 1) 0.06s;
}

.pool .album-card.filtered-out {
  margin-right: -8px !important;
}

.tier-content .album-card.filtered-out {
  margin-right: -6px !important;
}

/* ============================================================
   Album Info Popout (Modal)
   ============================================================ */
/* Popout wrapper: stacks nav buttons + card in a column */
.popout-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  max-width: 360px;
  width: 100%;
  position: relative;
  overflow: visible;
  height: 700px;
  flex-shrink: 0;
  transition: height var(--t-normal);
}

#albumInfoModal[data-source="editor"][data-media="movies"] .popout-frame,
#albumInfoModal[data-source="editor"][data-media="books"] .popout-frame,
#albumInfoModal[data-source="editor"][data-media="games"] .popout-frame {
  max-width: 300px;
  height: 740px;
}

.album-info-popout {
  position: relative;
  width: 100%;
  max-width: 360px;
  height: 700px;
  background: #0e0f12;
  border: none;
  border-radius: 16px;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.7);
  transform: translateY(12px) scale(0.97);
  transition: transform var(--t-normal), height var(--t-normal);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  overscroll-behavior: contain;
}

#albumInfoModal[data-media="movies"] .album-info-popout,
#albumInfoModal[data-media="books"] .album-info-popout,
#albumInfoModal[data-media="games"] .album-info-popout,
#albumInfoModal[data-media="movies"] .popout-frame,
#albumInfoModal[data-media="books"] .popout-frame,
#albumInfoModal[data-media="games"] .popout-frame {
  max-width: 320px;
  height: 760px;
}

#albumInfoModal[data-source="editor"][data-media="movies"] .album-info-popout,
#albumInfoModal[data-source="editor"][data-media="books"] .album-info-popout,
#albumInfoModal[data-source="editor"][data-media="games"] .album-info-popout {
  max-width: 300px;
  height: 740px;
}

/* Phones: the fixed 700px+ popout filled the screen, hiding the nav toggle (which
   sits 58px below the frame) and leaving no overlay margin to tap-to-close. Size it
   to the viewport with room for the toggle + an outside-tap margin. */
@media (max-width: 640px) {
  .modal-overlay { padding: 16px; }
  #albumInfoModal .popout-frame,
  #albumInfoModal .album-info-popout {
    height: calc(100vh - 130px) !important;
    height: calc(100dvh - 130px) !important;
    max-height: calc(100dvh - 130px) !important;
    max-width: 84vw !important;
  }
  /* Portrait media (movies/games/books): use a narrower popout (like the desktop
     portrait format) so the full-width cover fills it without big side gaps, while
     the shorter cover leaves plenty of room for the text below. */
  #albumInfoModal[data-media="movies"] .popout-frame,
  #albumInfoModal[data-media="books"]  .popout-frame,
  #albumInfoModal[data-media="games"]  .popout-frame,
  #albumInfoModal[data-media="movies"] .album-info-popout,
  #albumInfoModal[data-media="books"]  .album-info-popout,
  #albumInfoModal[data-media="games"]  .album-info-popout {
    max-width: min(72vw, 280px) !important;
  }
}

.popout-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.popout-page {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  scrollbar-width: none;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.popout-page::-webkit-scrollbar {
  display: none;
}

.popout-page-info {
  /* Safety net for very long titles/artists/genres: the info page scrolls when
     its content can't fit the fixed-height popout, instead of clipping the notes
     field (and its scroll) off the bottom. Scrollbar stays hidden (see .popout-page). */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
}

.popout-page-info .album-popout-content {
  /* min-height (not a rigid height) lets the content grow past the popout and
     scroll when the cover + long title/artist/meta + notes exceed the height. */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}

.popout-page-info #albumInfoNotesWrap {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin-top: auto;
  flex-shrink: 0; /* keep the notes box usable; don't let it get squeezed away */
}

.popout-page-info #albumInfoNotes {
  flex-grow: 1;
  /* A low floor so the notes fill the leftover space and stay fully visible on
     entry for normal popouts (incl. tall game/movie covers). The page only scrolls
     (the long-title safety net) when even this floor can't fit. */
  min-height: 56px;
}

/* Guaranteed breathing room below the notes when the info page scrolls, so the
   notes box doesn't butt up against the popout's bottom edge (ID beats the shared
   .popout-page rule). */
#popoutPageInfo .album-popout-content {
  padding-bottom: 28px;
}

.popout-page-stats {
  overflow-y: auto !important;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0px, transparent var(--header-height, 74px), #000 calc(var(--header-height, 74px) + 16px), #000 calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0px, transparent var(--header-height, 74px), #000 calc(var(--header-height, 74px) + 16px), #000 calc(100% - 60px), transparent 100%);
  overscroll-behavior: contain;
}

.popout-page-stats .album-popout-content {
  padding-top: calc(var(--header-height, 74px) + 12px);
  padding-bottom: 250px;
}

.popout-viewport.show-stats .popout-page {
  transform: translateY(-100%);
}

.popout-nav-toggle {
  position: absolute;
  bottom: -58px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1010;
  transition: all var(--t-fast), transform var(--t-fast);
  backdrop-filter: blur(8px) !important;
}

.popout-nav-toggle::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 100%);
  border-radius: 50%;
  pointer-events: none;
}

.popout-nav-toggle:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  transform: translateX(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important;
}

.popout-page .album-popout-content {
  padding-bottom: 24px;
}

.modal-overlay.active .album-info-popout {
  transform: translateY(0) scale(1);
}

.album-info-popout.glass-panel::after,
.modal.glass-panel::after {
  background: 
    radial-gradient(120px 96px at var(--mouse-x, 0) var(--mouse-y, 0), rgb(188 188 188), transparent 100%) border-box,
    linear-gradient(-45deg, rgba(255,255,255,0.10), rgba(255,255,255,0.01) 20%, rgba(255,255,255,0.03) 80%, rgba(255,255,255,0.10)) border-box;
  background-blend-mode: color-dodge, normal;
  mix-blend-mode: color-dodge; /* Blends the border outline with the dynamic modal glow underneath in color-dodge mode */
}

/* Remove fixed from before to allow local gradients, set white color dodge glow reacting to dynamic bg */
.album-info-popout.glass-panel::before,
.modal.glass-panel::before {
  background: radial-gradient(120px 96px at var(--mouse-x, 0) var(--mouse-y, 0), rgba(255, 255, 255, 0.8), transparent 100%);
  mix-blend-mode: overlay;
}

/* Cover wrapper border overlay in album info modal, using color-dodge blend mode to highlight the cover in the album's glow */
.album-popout-cover-wrap.glass-panel::after {
  background: 
    radial-gradient(120px 96px at var(--mouse-x, 0) var(--mouse-y, 0), rgb(188 188 188), transparent 100%) border-box,
    linear-gradient(-45deg, rgba(255,255,255,0.08), rgba(255,255,255,0) 20%, rgba(255,255,255,0.02) 80%, rgba(255,255,255,0.08)) border-box;
  background-blend-mode: color-dodge, normal;
  mix-blend-mode: color-dodge;
}

.album-popout-glow {
  position: absolute;
  /* 130% size via geometry instead of transform:scale(1.3). With a transform the
     filter is rasterised at natural size then magnified, which blows the blur up
     ~1.3x (spread thinner → dimmer) and couples saturate to the scaled blur. Sizing
     by geometry keeps the filter in true on-screen pixels so blur/saturate behave. */
  top: -15%; left: -15%;
  width: 130%; height: 130%;
  background-size: cover;
  background-position: center;
  background-image: var(--album-glow-img, none);
  background-color: transparent;
  filter: saturate(1.4) blur(30px);
  opacity: 0.9;
  mix-blend-mode: add;
  pointer-events: none;
  z-index: 0;
  /* Cache the blur in its own GPU layer so the popout's open animation just moves a
     cached texture (will-change promotes a layer even with no transform value). */
  will-change: transform;
  /* Параллакс за счет сдвига самого изображения внутри элемента (сначала сдвиг, потом кроп) */
  background-position: calc(50% + var(--parallax-x, 0) * -45px) calc(50% + var(--parallax-y, 0) * -45px);
  
  /* Эту маску вы можете настраивать: она контролирует градиент затухания свечения сверху вниз */
  -webkit-mask-image: linear-gradient(to bottom, #000000 10%, #00000000 60%);
  mask-image: linear-gradient(160deg, #000000e6 20%, #00000075 50%, #000000c7 80%, #000000 100%);;
}

.album-popout-glow-solid {
  position: absolute;
  /* 130% via geometry (not transform:scale) — see .album-popout-glow. */
  top: -15%; left: -15%;
  width: 130%; height: 130%;
  background-size: cover;
  background-position: center;
  background-image: var(--album-glow-img, none);
  background-color: var(--album-glow-color, #00000000);
  filter: saturate(1.4) blur(25px);
  opacity: 0.4;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
  will-change: transform;       /* cache the blur in a GPU layer (see .album-popout-glow) */
  /* Параллакс за счет сдвига самого изображения внутри элемента */
  background-position: calc(50% + var(--parallax-x, 0) * -60px) calc(50% + var(--parallax-y, 0) * -60px);
  
  /* Меньший радиус: радиальная маска */
  -webkit-mask-image: radial-gradient(100% 100% at 50% 0%, black 0%, #00000000 45%);
  mask-image: linear-gradient(160deg, #000000 20%, #00000075 50%, #00000078 80%, #000000 100%);
}

.album-popout-content {
  position: relative;
  z-index: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.album-popout-cover-wrap {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 8px;
  border: none; /* Для glass-panel */
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 16px 30px -4px rgb(8 11 18 / 59%);
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#albumInfoModal[data-media="movies"] .album-popout-cover-wrap,
#albumInfoModal[data-media="books"] .album-popout-cover-wrap,
#albumInfoModal[data-media="games"] .album-popout-cover-wrap {
  aspect-ratio: 2/3;
}

.album-popout-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.album-popout-title {
  font-family: 'PT Serif', serif;
  font-size: 28px;
  font-weight: var(--fw-regular);
  color: #ebeef9;
  margin: 0 0 4px 0;
  line-height: 1.2;
  overflow: hidden; /* JS (fitBigTitle) handles 1-line shrink vs 2-line wrap */
  min-width: 0; /* flex item: never grow to the text width (would inflate the fit measurement) */
}

.album-popout-artist {
  font-family: 'PT Serif', serif;
  font-style: italic;
  font-size: 17px;
  font-weight: var(--fw-regular);
  color: #d1d5db; /* gray-300 */
  margin: 0 0 24px 0;
  line-height: 1.2;
  overflow: hidden; /* JS (fitBigTitle) shrinks/wraps long artist & dev names */
}

.album-popout-meta {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #d0d4dbc4; /* gray-400 */
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.album-popout-meta p {
  margin: 0;
}

.album-popout-notes-wrap {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  padding: 12px;
  position: relative;
  overflow: hidden;
}

.album-popout-notes-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 100%);
  pointer-events: none;
}

.album-popout-notes {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: #d1d5db;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: var(--fw-light);
  line-height: 1.5;
  min-height: 80px;
  position: relative;
  z-index: 1;
}

.album-popout-notes-text {
  width: 100%;
  color: #d1d5db;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: var(--fw-light);
  line-height: 1.5;
  white-space: pre-wrap;
  position: relative;
  z-index: 1;
}

.album-popout-notes::placeholder {
  color: rgba(255,255,255,0.2);
}

/* ── Album Info Popout: Rating Statistics (replaces notes in ratings view) ── */
.album-popout-stats {
  position: relative;
}

.stats-chart-wrap {
  width: 75%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.stats-chart {
  width: 100%;
  height: 80px;
  display: block;
  overflow: visible;
}

.stats-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #d0d4dbc4;
}

.stats-summary {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.stats-rank {
  font-family: 'PT Serif', serif;
  font-size: 56px;
  font-weight: var(--fw-regular);
  color: #ebeef9;
  line-height: 1;
  margin-bottom: 12px;
}

.stats-pct {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-ratio-green);
}

.stats-count {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #dbe2ef9c;
  margin-top: 2px;
}

/* ── Popout: User Reviews Section ── */
.popout-reviews-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 4px;
}

.popout-stats-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  padding: 24px 24px 16px 24px;
  box-sizing: border-box;
  pointer-events: none;
}

.popout-stats-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 36px;
  right: 36px;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  opacity: 0;
  transition: opacity var(--t-fast);
}

.popout-scrolled .popout-stats-header::after {
  opacity: 1;
}

.popout-reviews-divider {
  position: sticky;
  top: var(--header-height, 74px);
  z-index: 20;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 24px 12px 16px 12px;
}

.popout-reviews-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 4px;
}

.popout-reviews-heading {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
}

.popout-reviews-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.popout-reviews-sort .sort-btn {
  background: none;
  border: none;
  padding: 0;
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  font-weight: 600;
  transition: color var(--t-fast);
}

.popout-reviews-sort .sort-btn:hover {
  color: rgba(255, 255, 255, 0.65);
}

.popout-reviews-sort .sort-btn.active {
  color: #cdd1dd;
  font-weight: 600;
}

.popout-reviews-sort .sort-separator {
  color: rgba(255, 255, 255, 0.15);
  user-select: none;
}

.popout-review-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.popout-review-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.popout-review-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  line-height: 1;
}

.popout-review-user {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  flex: 1;
}

.popout-review-userlink {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  text-decoration: none;
}
a.popout-review-userlink {
  cursor: pointer;
}
a.popout-review-userlink:hover .popout-review-user {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: underline;
}

.popout-review-pct {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ratio-green);
}
a.popout-review-pct {
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--t-fast);
}
a.popout-review-pct:hover {
  text-decoration: underline;
  opacity: 0.85;
}

.popout-review-text {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.5);
  cursor: default;
  user-select: text;
}

/* ── Settings Sliders (matches the year range slider track and thumb style) ── */
.settings-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(to right, rgb(44, 49, 67) 0%, rgb(58, 63, 81) 100%);
  outline: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 12px;
  border-radius: 4px;
  background: #9da4b9;
  border: 1px solid #7b8eb5;
  cursor: grab;
  transition: transform var(--t-fast), background var(--t-fast);
}

.settings-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.15);
  background: #cdd1dd;
}

.settings-slider::-moz-range-thumb {
  width: 8px;
  height: 12px;
  border-radius: 4px;
  background: #9da4b9;
  border: 1px solid #7b8eb5;
  cursor: grab;
  transition: transform var(--t-fast), background var(--t-fast);
}

.settings-slider::-moz-range-thumb:active {
  cursor: grabbing;
  transform: scale(1.15);
  background: #cdd1dd;
}

/* ── Publish / Share Modal Styling ── */
.publish-options-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 4px;
}

.publish-option-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.option-details {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.option-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-200);
  margin-bottom: 2px;
}

.option-description {
  display: block;
  font-size: 11px;
  color: #8b8b99;
  line-height: 1.15;
}

/* Toggle Switch */
.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider.round {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: .25s ease;
  border-radius: 20px;
}

.slider.round::before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 3px;
  bottom: 3px;
  background-color: var(--text-200);
  transition: .25s ease;
  border-radius: 50%;
}

.switch input:checked + .slider {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.05);
}

.switch input:checked + .slider::before {
  transform: translateX(18px);
  background-color: var(--text-100);
  box-shadow: none;
}

/* Copy Link Wrap */
.copy-link-wrap {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 4px 4px 4px 12px;
  align-items: center;
  transition: border-color 0.2s;
}

.copy-link-wrap:focus-within {
  border-color: rgba(118, 143, 183, 0.4);
}

.copy-link-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-200);
  font-size: 12px;
  flex-grow: 1;
  font-family: monospace;
}

.copy-link-btn {
  background: transparent;
  border: none;
  color: var(--text-200);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.copy-link-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-100);
}

.copy-link-btn.copied {
  background: transparent;
  border: none;
  color: #2ecc71;
}

/* ============================================================
   Routing / View Panels
   ============================================================ */
.view-panel {
  display: none !important;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

#editView.view-panel.active,
#listView.view-panel.active {
  display: flex !important;
  opacity: 1;
}

#homeView.view-panel.active {
  display: flex !important;
  opacity: 1;
}

#communityView.view-panel.active,
#ratingsView.view-panel.active {
  display: flex !important;
  flex-direction: column;
  opacity: 1;
  overflow-x: hidden;
}

#notFoundView.view-panel.active {
  display: flex !important;
  opacity: 1;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-h));
}
.notfound-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 40px 24px;
}
.notfound-code {
  font-family: var(--font);
  font-size: 96px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.04em;
  line-height: 1;
  color: #2f3650;
}
.notfound-text {
  font-size: 16px;
  color: var(--text-200);
}
.notfound-home {
  margin-top: 6px;
  padding: 10px 22px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-100);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--t-fast);
}
.notfound-home:hover { background: rgba(255, 255, 255, 0.12); }

/* Read-only title — identical look to the editor title input but non-editable */
#listView .tierlist-title {
  cursor: default;
  pointer-events: none;
  border-bottom-color: transparent !important;
}

/* ============================================================
   Landing Page / Home View Styles
   ============================================================ */
.home-view {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 24px 120px;
  position: relative;
  overflow-y: auto;
}

.hero-container {
  max-width: 680px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  animation: heroFadeIn 0.8s var(--ease);
  margin-bottom: 120px;
  padding: 0 16px; /* keep the hero logo off the screen edges on narrow viewports */
}

.hero-logo-group {
  width: 100%;
  max-width: 580px; /* fluid: scales down on narrow screens instead of overflowing */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 24px;
  position: relative;
}

.lottie-logo-wrap {
  width: 100%;
  height: 380px;
  position: relative;
  background: radial-gradient(ellipse at center, rgba(160, 200, 255, 0.08) 0%, transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s var(--ease);
  cursor: pointer;
}

.lottie-hover-trigger {
  position: absolute;
  top: 90px;
  bottom: 90px;
  left: 80px;
  right: 80px;
  z-index: 10;
  cursor: pointer;
}

.lottie-logo-wrap.is-hovered {
  transform: scale(1.02);
}

.hero-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-300);
  margin: 0;
  /* Percentage offsets (≈220px / 360px at the 580px design width) so the subtitle
     stays aligned under the wordmark and scales with the logo on narrow screens
     instead of getting squeezed by a fixed 220px indent. */
  margin-left: 38%;
  margin-top: -96px;
  margin-bottom: 42px;
  line-height: 1.5;
  text-align: left !important;
  width: 62%;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* Scroll cue — on phones the hero fills the screen, so a gently bouncing chevron at
   the bottom signals there's more below. Hidden on desktop and once the user scrolls. */
.home-scroll-hint {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: none;
  border: none;
  padding: 6px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  z-index: 60;
  opacity: 1;
  transition: opacity 0.35s ease;
  animation: scrollHintBounce 1.8s ease-in-out infinite;
}
.home-scroll-hint.hidden {
  opacity: 0;
  pointer-events: none;
}
@keyframes scrollHintBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}
@media (max-width: 640px) {
  .home-view.active .home-scroll-hint {
    display: block;
  }
}

.hero-btn-explore {
  min-width: 180px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--btn-grad-start) 0%, var(--btn-grad-end) 100%);
  border: 1px solid var(--btn-border);
  color: #e7e9e9;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background var(--t-fast), border-color var(--t-fast);

  --btn-grad-start: #141521;
  --btn-grad-end: #252631;
  --btn-border: #4f516d;
  --btn-grad-hover-start: #12131e;
  --btn-grad-hover-mid1: #282939;
  --btn-grad-hover-mid2: #33354b;
  --btn-grad-hover-end: #4b4e5f;
  --btn-border-hover: #565a7f;
  --btn-cursor-glow: rgb(147 194 221 / 8%);
}

.hero-btn-explore::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(75px 75px at var(--local-mouse-x, 0) var(--local-mouse-y, 0), var(--btn-cursor-glow, rgba(255,255,255,0.05)), transparent 100%);
  pointer-events: none;
}

.hero-btn-explore:hover {
  background: linear-gradient(180deg, var(--btn-grad-hover-start) 0%, var(--btn-grad-hover-mid1) 64%, var(--btn-grad-hover-mid2) 86%, var(--btn-grad-hover-end) 108%);
  border-color: var(--btn-border-hover);
  color: #cdd1dd;
}

@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   Home Content Sections and Grids
   ============================================================ */
.home-sections-container {
  max-width: 1152px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 64px;
  margin-top: 40px;
  z-index: 2;
  animation: heroFadeIn 1s var(--ease);
}

.home-section {
  width: 100%;
}

.home-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  border-bottom: none;
  padding-bottom: 12px;
}

.home-section-title {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #cdd1dd;
  margin: 0;
  letter-spacing: -0.02em;
}

.home-section-link {
  color: var(--text-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-fast), transform var(--t-fast);
}

.home-section-link:hover {
  color: var(--text-100);
  transform: translate(2px, -2px);
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1024px) {
  .home-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .home-grid {
    grid-template-columns: 1fr;
  }
  .home-sections-container {
    gap: 64px;
  }
}

/* Home Page Card Aesthetics */
.home-card {
  height: 190px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  contain: layout style paint;
  padding: 16px 16px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.4s var(--ease);
  cursor: pointer;
  box-shadow: 0px 10px 32px rgb(5 6 8 / 22%);
}

.home-card:hover {}

.home-card:hover::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120px 96px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.4), transparent 100%);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 5;
}

/* Layer aesthetics matching panelMenu.html */
.layer-base {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #1a2941 -14%, #121523 9%, #101018 33%, #12121c 69%, #1c2533 131%);
  z-index: 0;
}

.layer-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(145deg, #474e5e, #20242f 50%, var(--border-accent, #535770));
  -webkit-mask: linear-gradient(#cdd1dd 0 0) content-box, linear-gradient(#cdd1dd 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
  transition: filter 0.4s var(--ease);
}

.home-card:hover .layer-border {
  filter: brightness(1.3);
}

.layer-overlay {
  position: absolute;
  inset: 0;
  mix-blend-mode: color-dodge;
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
  z-index: 1;
}

.home-card:hover .layer-overlay {
  opacity: 1;
}

/* Custom Overlay Gradients and Borders for Categories */
.card-music {
  --border-accent: #ff7c67;
}
.card-music .layer-overlay {
  background: radial-gradient(ellipse 150px 100px at 15% 120%, #c35dc08c, transparent), radial-gradient(ellipse 240px 180px at 102% 108%, #fd056c -2%, #c31664cc 54%, transparent);
}

.card-movies {
  --border-accent: #06565f;
}
.card-movies .layer-overlay {
  background: radial-gradient(ellipse 150px 100px at 15% 120%, #d71deb9c, transparent), radial-gradient(ellipse 240px 180px at 102% 108%, #0fdaef -2%, #6437bd9c 54%, transparent);
}

.card-games {
  --border-accent: #837015;
}
.card-games .layer-overlay {
  background: radial-gradient(ellipse 150px 100px at 15% 120%, #0bd1d3c7, transparent), radial-gradient(ellipse 240px 180px at 102% 108%, #b9f10c -2%, #00b942a8 54%, transparent);
}

.card-books {
  --border-accent: #5f3204;
}
.card-books .layer-overlay {
  background: radial-gradient(ellipse 150px 100px at 15% 120%, #d66a0adb, transparent), radial-gradient(ellipse 240px 180px at 102% 108%, #feff4e -2%, #c88700c7 55%, transparent);
}

.card-misc, .empty-card {
  --border-accent: #3c3a53;
}
.card-misc .layer-overlay, .empty-card .layer-overlay {
  background: radial-gradient(ellipse 150px 100px at 15% 120%, #66acaddb, transparent), radial-gradient(ellipse 240px 180px at 102% 108%, #edd3ec -2%, #526075c7 57%, transparent);
}

/* ── Main vs non-main list cards ──
   Main lists keep their media gradient and get a colour-tinted media icon.
   Non-main lists borrow the misc gradient, but the second radial's first colour
   is swapped to the media's accent so the media still reads at a glance. */
.tl-main.card-music  .category-icon { color: #ff2d55; }
.tl-main.card-movies .category-icon { color: #2f6aeb; }
.tl-main.card-games  .category-icon { color: #8cd635; }
.tl-main.card-books  .category-icon { color: #ffb300; }

/* Non-main lists also borrow the misc border accent, not the media one. */
.tl-normal { --border-accent: #3c3a53; }

.tl-normal.card-music .layer-overlay {
  background: radial-gradient(ellipse 150px 100px at 15% 120%, #66acaddb, transparent), radial-gradient(ellipse 240px 180px at 102% 108%, #fd056c -2%, #526075c7 57%, transparent);
}
.tl-normal.card-movies .layer-overlay {
  background: radial-gradient(ellipse 150px 100px at 15% 120%, #66acaddb, transparent), radial-gradient(ellipse 240px 180px at 102% 108%, #0fdaef -2%, #526075c7 57%, transparent);
}
.tl-normal.card-games .layer-overlay {
  background: radial-gradient(ellipse 150px 100px at 15% 120%, #66acaddb, transparent), radial-gradient(ellipse 240px 180px at 102% 108%, #b9f10c -2%, #526075c7 57%, transparent);
}
.tl-normal.card-books .layer-overlay {
  background: radial-gradient(ellipse 150px 100px at 15% 120%, #66acaddb, transparent), radial-gradient(ellipse 240px 180px at 102% 108%, #feff4e -2%, #526075c7 57%, transparent);
}

/* List Card Styling */
.card-user-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  z-index: 10;
}

.user-avatar-small {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #cdd1dd;
  font-weight: 600;
}

.user-meta-small {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: -3px;
}

.user-name-small {
  font-size: 16px;
  font-weight: 420;
  color: #cdd1dd;
}

.user-stats-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: -2px;
}

.match-badge {
  font-size: 12px;
  color: var(--color-ratio-green);
  font-weight: 600;
  margin-top: 0;
}

.category-icon {
  font-size: 15px;
  color: #cdd1dd;
  opacity: 0.8;
}

.user-stats-dot {
  font-size: 10px;
  color: #747a8f;
  opacity: 0.6;
  margin: 0 1px;
  vertical-align: middle;
  line-height: 1;
}

.card-covers-grid {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
  z-index: 2;
}

.mini-cover {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid #12131a;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  background-size: cover;
  background-position: center;
  position: relative;
}

.mini-cover:not(:first-child) {
  margin-left: -12px;
}

.mini-cover:nth-child(1) { z-index: 4; }
.mini-cover:nth-child(2) { z-index: 3; }
.mini-cover:nth-child(3) { z-index: 2; }
.mini-cover:nth-child(4) { z-index: 1; }

/* Overrides for Movies, Games, and Books cards: 2:3 aspect ratio portrait posters */
.card-movies .mini-cover,
.card-games .mini-cover,
.card-books .mini-cover {
  width: 40px;
  height: 60px;
  aspect-ratio: 2 / 3;
}

.card-movies .mini-cover:not(:first-child),
.card-games .mini-cover:not(:first-child),
.card-books .mini-cover:not(:first-child) {
  margin-left: -8px;
}

.card-footer-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: #ebeef9;
  z-index: 10;
  margin-top: 0;
  /* Stay on one line from the first paint so a long title never renders huge /
     multi-line before adjustCardTitles() shrinks it to fit. */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Category Card Styling */
.category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  z-index: 10;
  margin-top: -5px;
}

.category-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.category-icon-large {
  font-size: 16px;
  opacity: 0.8;
}

.category-name {
  font-size: 16px;
  font-weight: 420;
  color: #cdd1dd;
}

.category-count {
  font-size: 12px;
  font-weight: 600;
  color: #747a8f;
  font-variant-numeric: tabular-nums;
}

.category-covers-cascade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 160px;
  overflow: hidden;
  z-index: 2;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgb(0 0 0 / 10%) 90%, rgb(0 0 0 / 0%) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgb(0 0 0 / 10%) 90%, rgb(0 0 0 / 0%) 100%);
}

.cascade-cover {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
  position: absolute;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Base properties for each index */
.cascade-cover.c1 {
  width: var(--w1);
  height: var(--h1);
  bottom: var(--b1, 0);
  left: var(--l1);
  z-index: 5; /* Foreground leftmost */
}

.cascade-cover.c2 {
  width: var(--w2);
  height: var(--h2);
  bottom: var(--b2, 0);
  left: var(--l2);
  z-index: 4; /* Foreground middle */
}

.cascade-cover.c3 {
  width: var(--w3);
  height: var(--h3);
  bottom: var(--b3, 0);
  left: var(--l3);
  z-index: 3; /* Foreground rightmost */
}

.cascade-cover.c4 {
  width: var(--w4);
  height: var(--h4);
  bottom: var(--b4, 24px);
  left: var(--l4);
  z-index: 2; /* Background left-shifted */
}

.cascade-cover.c5 {
  width: var(--w5);
  height: var(--h5);
  bottom: var(--b5, 24px);
  left: var(--l5);
  z-index: 1; /* Background right-shifted */
}

.home-card:hover .cascade-cover {
  transition: transform 0.12s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.home-card:hover .cascade-cover.c1 {
  transform: translateY(calc(-8px + var(--parallax-y, 0) * -7px)) translateX(calc(var(--parallax-x, 0) * -7px)) scale(1.03);
}
.home-card:hover .cascade-cover.c2 {
  transform: translateY(calc(-6px + var(--parallax-y, 0) * -5px)) translateX(calc(var(--parallax-x, 0) * -5px)) scale(1.03);
}
.home-card:hover .cascade-cover.c3 {
  transform: translateY(calc(-4px + var(--parallax-y, 0) * -4px)) translateX(calc(var(--parallax-x, 0) * -4px)) scale(1.03);
}
.home-card:hover .cascade-cover.c4 {
  transform: translateY(calc(-14px + var(--parallax-y, 0) * -9px)) translateX(calc(var(--parallax-x, 0) * -9px)) scale(1.03);
}
.home-card:hover .cascade-cover.c5 {
  transform: translateY(calc(-11px + var(--parallax-y, 0) * -7px)) translateX(calc(var(--parallax-x, 0) * -7px)) scale(1.03);
}

/* Card variables for Square categories (Music, Misc) */
.card-music, .card-misc, .empty-card {
  --w1: 100px; --h1: 100px; --b1: 0;
  --w2: 86px;  --h2: 86px;  --b2: 0;
  --w3: 72px;  --h3: 72px;  --b3: 0;
  --w4: 86px;  --h4: 110px;  --b4: 24px;
  --w5: 76px;  --h5: 98px;  --b5: 24px;

  /* Dynamically centered coordinates (Cluster width: 214px) */
  --l1: calc(50% - 107px);
  --l2: calc(50% - 33px);
  --l3: calc(50% + 35px);
  --l4: calc(50% - 63px);
  --l5: calc(50% + 17px);
}

/* Card variables for Portrait categories (Movies, Games, Books) */
.card-movies, .card-games, .card-books {
  --w1: 88px;  --h1: 106px; --b1: 0;
  --w2: 76px;  --h2: 92px;  --b2: 0;
  --w3: 64px;  --h3: 78px;  --b3: 0;
  --w4: 76px;  --h4: 110px; --b4: 24px;
  --w5: 64px;  --h5: 98px;  --b5: 24px;

  /* Dynamically centered coordinates (Cluster width: 214px) */
  --l1: calc(50% - 107px);
  --l2: calc(50% - 25px);
  --l3: calc(50% + 43px);
  --l4: calc(50% - 43px);
  --l5: calc(50% + 25px);
}

/* ============================================================
   Media Choice Modal Cards Grid
   ============================================================ */
.media-choices-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.media-choices-grid--3col {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 0;
}
.media-choice-card--hide .media-choice-icon {
  color: var(--text-200);
}
.media-choice-card--hide:hover {
  border-color: #e05c5c !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 10px rgba(224, 92, 92, 0.1) !important;
}
.media-choice-card--hide:hover .media-choice-icon {
  color: #e05c5c !important;
}
.media-choice-card--hide.selected {
  border-color: #e05c5c;
  background: rgba(224, 92, 92, 0.08);
}
.media-choice-card--hide.selected .media-choice-icon {
  color: #e05c5c;
}

.media-choice-card {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--ease);
}

.media-choice-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
  background: var(--bg-glass-hover);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.media-choice-icon {
  font-size: 20px;
  color: var(--text-200);
  margin-bottom: 6px;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

.media-choice-card:hover .media-choice-icon {
  transform: scale(1.08);
}

.media-choice-title {
  font-size: 12.5px;
  font-weight: var(--fw-semibold);
  color: var(--text-100);
  margin-bottom: 0;
}

.media-choice-desc {
  font-size: 12px;
  color: var(--text-200);
  font-weight: var(--fw-light);
  line-height: 1.3;
}

/* Selected state — persists the hover appearance on the chosen card */
.media-choice-card.selected {
  background: var(--bg-glass-hover);
}

.media-choice-card[data-media="music"].selected {
  border-color: #ff2d55;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 45, 85, 0.15);
}
.media-choice-card[data-media="music"].selected .media-choice-icon {
  color: #ff2d55;
}

.media-choice-card[data-media="games"].selected {
  border-color: #8cd635;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 10px rgba(140, 214, 53, 0.15);
}
.media-choice-card[data-media="games"].selected .media-choice-icon {
  color: #8cd635;
}

.media-choice-card[data-media="books"].selected {
  border-color: #ffb300;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 179, 0, 0.15);
}
.media-choice-card[data-media="books"].selected .media-choice-icon {
  color: #ffb300;
}

.media-choice-card[data-media="movies"].selected {
  border-color: #2f6aeb;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 10px rgba(47, 106, 235, 0.15);
}
.media-choice-card[data-media="movies"].selected .media-choice-icon {
  color: #2f6aeb;
}

.media-choice-card[data-media="misc"].selected {
  border-color: #7b83a6;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 10px rgba(123, 131, 166, 0.15);
}
.media-choice-card[data-media="misc"].selected .media-choice-icon {
  color: #7b83a6;
}

.media-choice-card.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.media-choice-card.disabled:hover {
  opacity: 0.75;
  transform: translateY(-1px);
}

.media-choice-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1px 3px;
  border-radius: 2px;
  font-size: 6.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-200);
  font-weight: var(--fw-medium);
  pointer-events: none;
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* Keep the media-type cards on a SINGLE row (the base 5-column grid) — just
     tighten the gap and shrink the cards so all five fit across a phone. We don't
     override grid-template-columns here, so the profile 3-col grid keeps its layout. */
  .media-choices-grid {
    gap: 6px;
  }
  .media-choice-card { padding: 10px 4px; }
  .media-choice-icon { font-size: 18px; margin-bottom: 4px; }
  .media-choice-title { font-size: 11px; }
  .hero-title {
    font-size: 40px;
  }
}

/* ============================================================
   Wizard Step 2 settings inside modal
   ============================================================ */
.media-choice-step {
  transition: opacity 0.3s var(--ease);
}

.creation-settings-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 28px;
}

.creation-setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tier-score-input {
  width: 48px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: var(--text-100);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  padding: 5px 4px;
  outline: none;
  text-align: center;
  appearance: textfield;
}
.tier-score-input::-webkit-inner-spin-button,
.tier-score-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tier-score-input:focus { border-color: rgba(255,255,255,0.28); }
.tier-score-input::placeholder { color: #5a5a6a; }

.tier-count-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tier-count-selector button {
  border: none;
  background: transparent;
  color: var(--text-100);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  outline: none;
  transition: opacity var(--t-fast);
  padding: 0;
}

.tier-count-selector button:hover {
  background: transparent !important;
  color: var(--text-100) !important;
  opacity: 0.7;
}

.tier-count-selector button:active {
  opacity: 0.4;
}

.label-style-select-wrap select {
  background: #141521;
  border: 1px solid var(--border);
  color: var(--text-100);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  font-size: 13px;
  outline: none;
  cursor: pointer;
  transition: border-color var(--t-fast);
}

.label-style-select-wrap select:hover {
  border-color: var(--accent);
}


/* ============================================================
   Community Lists View Styles
   ============================================================ */
/* Responsive like the home grid, but capped at three per row (not four). The column
   COUNT adapts (3 / 2 / 1) so the screen no longer breaks on narrow devices — the
   real cause of the breakage was the hard-fixed 3 columns, not the zoom. */
.community-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Enlarge the whole card proportionally (not just its width). */
.community-grid .home-card {
  zoom: 1.25;
}

@media (max-width: 1024px) {
  .community-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .community-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* Single full-width column is already large; drop the zoom so it can't overflow. */
  .community-grid .home-card {
    zoom: 1;
  }
}

.community-search-input {
  padding: 0 12px;
  border-radius: 12px;
}

/* Community header: the title + search/filters sit in a fixed space-between row, so
   on narrow screens the filters overlapped and clipped the title. Let them wrap —
   the filters drop onto their own row(s) under the title (like the editor's
   wrapping tierlist-header), and the big page title shrinks on phones. */
.community-header-container {
  flex-wrap: wrap;
  row-gap: 14px;
}

@media (max-width: 900px) {
  .community-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  /* The year panel is anchored right:-50px (for the editor's right-aligned filter
     bar), so once the filters wrap to a LEFT-aligned row it opened off the left
     edge. Anchor it to the button's left so it opens into the page instead. */
  #ratingsYearMenu,
  #viewYearMenu,
  #yearMenu {
    left: 0;
    right: auto;
  }
}

@media (max-width: 640px) {
  .community-search-wrap {
    width: 100% !important; /* override the inline 280px so it fits the viewport */
  }
  .community-header-container .tierlist-title {
    font-size: 28px;
  }
}

@media (max-width: 400px) {
  .community-header-container .tierlist-title {
    font-size: 24px;
  }
}


/* ============================================================
   Simple Dropdown (Media Type / Sort By)
   Mirrors filter-menu structure exactly: same CSS-var system,
   same cursor glow, same gradient logic.
   ::before on the wrap acts as a phantom sizer so the wrap
   always matches the current label width even when the menu
   is position:absolute (active/expanded).
   ============================================================ */

.simple-dropdown-wrap {
  position: relative;
  height: 36px;
  width: fit-content;
}

/* Phantom — provides intrinsic width matching the current label */
.simple-dropdown-wrap::before {
  content: attr(data-label);
  display: block;
  height: 36px;
  line-height: 36px;
  font-family: var(--font);
  font-weight: var(--fw-light);
  font-size: 13px;
  padding: 0 16px;
  white-space: nowrap;
  visibility: hidden;
  pointer-events: none;
}
/* When selected option has an icon, add space for it */
.simple-dropdown-wrap[data-has-icon]::before {
  padding-left: calc(16px + 14px + 8px);
}

@property --comm-theme-accent {
  syntax: '<color>';
  inherits: false;
  initial-value: #25253a;
}

@property --comm-theme-accent2 {
  syntax: '<color>';
  inherits: false;
  initial-value: #1e2435;
}

.simple-dropdown-menu {
  --dropdown-accent: #535770;

  /* Button (collapsed) — matched to panel glass vars */
  --btn-grad-start:       #25253a;
  --btn-grad-end:         #1e2435;
  --btn-border:           #2a2b41;
  --btn-grad-hover-start: #30304a;
  --btn-grad-hover-mid1:  #1d1f33;
  --btn-grad-hover-mid2:  #252b3d;
  --btn-grad-hover-end:   #36425c;
  --btn-border-hover:     #303b51;
  --btn-cursor-glow:      rgb(100 113 170 / 8%);

  /* Panel (expanded) — identical vars to filter-menu */
  --panel-grad-angle:   18deg;
  --panel-grad-start:   #25253a;
  --panel-grad-mid:     #11111c;
  --panel-grad-end:     #1e2435;
  --panel-border:       #2a2b41;
  --panel-border-hover: #303b51;
  --panel-cursor-glow:  rgb(100 113 170 / 8%);

  position: absolute;
  top: 0; left: 0;
  width: 100%;       /* collapsed: match wrap (sized by ::before phantom) */
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 200;
  isolation: isolate;
  max-height: 36px;
  transition: max-height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow var(--t-fast), background var(--t-fast), filter 0.25s ease, color var(--t-fast);
  cursor: pointer;
  font-family: var(--font);
  font-weight: var(--fw-light);
  font-size: 13px;
  color: #c0c4d1;

  /* Collapsed = glass panel styling, same as active panel but scaled stops */
  background: linear-gradient(var(--panel-grad-angle), var(--panel-grad-start) 0%, var(--panel-grad-mid) 85%, var(--panel-grad-end) 170%);
  box-shadow: inset 0 0 0 1px var(--panel-border);
}

/* Cursor glow — same logic as filter-menu::after */
.simple-dropdown-menu::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 100;
  border-radius: inherit;
}
.simple-dropdown-menu:not(.active)::after {
  background: radial-gradient(75px 75px at var(--local-mouse-x, 0) var(--local-mouse-y, 0),
    var(--panel-cursor-glow), transparent 100%);
}
.simple-dropdown-menu.active::after {
  background: radial-gradient(75px 75px at var(--mouse-x, 0) var(--mouse-y, 0),
    var(--panel-cursor-glow), transparent 100%);
}
/* Collapsed hover — matches panel hover border and subtle brightness increase */
.simple-dropdown-menu:not(.active):not(.has-selection):hover {
  background: linear-gradient(var(--panel-grad-angle), var(--panel-border-hover) 0%, var(--panel-grad-mid) 85%, var(--panel-grad-end) 170%);
  box-shadow: inset 0 0 0 1px var(--panel-border-hover);
}

/* Collapsed + selected hover — smooth brightness/glow increase */
.simple-dropdown-menu.has-selection:not(.active):hover {
  filter: brightness(1.25);
  box-shadow: inset 0 0 0 1px var(--panel-border-hover);
}

/* Media Type — collapsed + selected, glass panel + overlay */
#commMediaTypeMenu.has-selection:not(.active) {
  color: #cdd1dd;
}

/* Media Type — collapsed overlay (same radial gradient as cards) */
#commMediaTypeMenu:not(.active)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: color-dodge;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#commMediaTypeMenu.has-selection:not(.active)::before {
  opacity: 1;
}

#commMediaTypeMenu.has-selection:not(.active):has([data-media="music"].selected)::before {
  background: radial-gradient(ellipse 135px 90px at 115% 115%, #fd056c -2%, #c31664cc 54%, transparent);
}
#commMediaTypeMenu.has-selection:not(.active):has([data-media="games"].selected)::before {
  background: radial-gradient(ellipse 135px 90px at 115% 115%, #b9f10c -2%, #00b942a8 54%, transparent);
}
#commMediaTypeMenu.has-selection:not(.active):has([data-media="books"].selected)::before {
  background: radial-gradient(ellipse 135px 90px at 115% 115%, #ffe94e -2%, #d3a604c7 54%, transparent);
}
#commMediaTypeMenu.has-selection:not(.active):has([data-media="movies"].selected)::before {
  background: radial-gradient(ellipse 135px 90px at 115% 115%, #0fdaef -2%, #6437bd9c 54%, transparent);
}
#commMediaTypeMenu.has-selection:not(.active):has([data-media="misc"].selected)::before {
  background: radial-gradient(ellipse 135px 90px at 115% 115%, #edd3ec -2%, #526075c7 57%, transparent);
}

/* Sort By — collapsed + selected, glass panel + overlay */
#commSortByMenu.has-selection:not(.active) {
  color: #cdd1dd;
}

/* Sort By — collapsed overlay (same radial gradient as media menu but adjusted size/pos) */
#commSortByMenu:not(.active)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: color-dodge;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#commSortByMenu.has-selection:not(.active)::before {
  opacity: 1;
}

#commSortByMenu.has-selection:not(.active):has([data-sort="updated"].selected)::before,
#commSortByMenu.has-selection:not(.active):has([data-sort="rated"].selected)::before,
#commSortByMenu.has-selection:not(.active):has([data-sort="matching"].selected)::before {
  background: radial-gradient(ellipse 135px 90px at 115% 115%, #f6d711 -2%, #879309cc 54%, transparent);
}

/* Media Type — radial gradient overlay (same as card .layer-overlay) */
#commMediaTypeMenu.active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: color-dodge;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show overlay on option hover or when selected */
#commMediaTypeMenu.active:has(.simple-dropdown-option:hover)::before,
#commMediaTypeMenu.has-selection.active::before {
  opacity: 1;
}

/* Per-category radial gradient — same 3-color gradient as card overlays */
#commMediaTypeMenu.active:has([data-media="music"]:hover)::before,
#commMediaTypeMenu.has-selection.active:not(:has(.simple-dropdown-option:hover)):has([data-media="music"].selected)::before {
  background: radial-gradient(ellipse 240px 180px at 102% 108%, #fd056c -2%, #c31664cc 54%, transparent);
}
#commMediaTypeMenu.active:has([data-media="games"]:hover)::before,
#commMediaTypeMenu.has-selection.active:not(:has(.simple-dropdown-option:hover)):has([data-media="games"].selected)::before {
  background: radial-gradient(ellipse 240px 180px at 102% 108%, #b9f10c -2%, #00b942a8 54%, transparent);
}
#commMediaTypeMenu.active:has([data-media="books"]:hover)::before,
#commMediaTypeMenu.has-selection.active:not(:has(.simple-dropdown-option:hover)):has([data-media="books"].selected)::before {
  background: radial-gradient(ellipse 240px 180px at 102% 108%, #ffe94e -2%, #d3a604c7 54%, transparent);
}
#commMediaTypeMenu.active:has([data-media="movies"]:hover)::before,
#commMediaTypeMenu.has-selection.active:not(:has(.simple-dropdown-option:hover)):has([data-media="movies"].selected)::before {
  background: radial-gradient(ellipse 240px 180px at 102% 108%, #0fdaef -2%, #6437bd9c 54%, transparent);
}
#commMediaTypeMenu.active:has([data-media="misc"]:hover)::before,
#commMediaTypeMenu.has-selection.active:not(:has(.simple-dropdown-option:hover)):has([data-media="misc"].selected)::before {
  background: radial-gradient(ellipse 240px 180px at 102% 108%, #edd3ec -2%, #526075c7 57%, transparent);
}

/* Sort By — radial gradient overlay on collapsed selected button */
#commSortByMenu.has-selection:not(.active)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: color-dodge;
  opacity: 1;
  background: radial-gradient(ellipse 240px 180px at 102% 108%, #f6d711 -2%, #879309cc 54%, transparent);
}

/* Sort By — radial gradient overlay */
#commSortByMenu.active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: color-dodge;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show overlay on option hover or when selected */
#commSortByMenu.active:has(.simple-dropdown-option:hover)::before,
#commSortByMenu.has-selection.active::before {
  opacity: 1;
}

/* Per-option radial gradient — same 3-color gradient as option overlays */
#commSortByMenu.active:has([data-sort="updated"]:hover)::before,
#commSortByMenu.has-selection.active:not(:has(.simple-dropdown-option:hover)):has([data-sort="updated"].selected)::before,
#commSortByMenu.active:has([data-sort="rated"]:hover)::before,
#commSortByMenu.has-selection.active:not(:has(.simple-dropdown-option:hover)):has([data-sort="rated"].selected)::before,
#commSortByMenu.active:has([data-sort="matching"]:hover)::before,
#commSortByMenu.has-selection.active:not(:has(.simple-dropdown-option:hover)):has([data-sort="matching"].selected)::before,
#commSortByMenu.active:has([data-sort="reputation"]:hover)::before,
#commSortByMenu.has-selection.active:not(:has(.simple-dropdown-option:hover)):has([data-sort="reputation"].selected)::before {
  background: radial-gradient(ellipse 240px 180px at 102% 108%, #f6d711 -2%, #879309cc 54%, transparent);
}

/* Main-only toggle — same yellow gradient, no dropdown needed */
#commMainFilterBtn {
  cursor: pointer;
}
#commMainFilterBtn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: color-dodge;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(ellipse 240px 180px at 102% 108%, #f6d711 -2%, #879309cc 54%, transparent);
}
#commMainFilterBtn.has-selection::before {
  opacity: 1;
}

/* Expanded = glass panel, same diagonal gradient as genre panels */
.simple-dropdown-menu.active {
  min-width: 100%;
  max-height: 400px;
  background: linear-gradient(var(--panel-grad-angle),
    var(--panel-grad-start) 0%,
    #171826              32%,
    var(--panel-grad-mid)  68%,
    var(--panel-grad-end) 140%);
  box-shadow: inset 0 0 0 1px var(--panel-border);
  z-index: 210;
  cursor: default;
  transition: max-height 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow var(--t-fast), background var(--t-fast);
}

#commMediaTypeMenu.active { max-height: 222px; }
#commSortByMenu.active    { max-height: 150px; }

.simple-dropdown-header {
  height: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 16px;
  user-select: none;
  position: relative;
  z-index: 2;
  transition: color var(--t-fast);
}

.simple-dropdown-content {
  padding: 0 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
  position: relative;
  z-index: 2;
}
.simple-dropdown-menu.active .simple-dropdown-content {
  opacity: 1;
  transition-delay: 0.1s;
}

/* Options: color-only hover, no background block (like genre items) */
.simple-dropdown-option {
  padding: 7px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-fast);
  color: #d8dcf17a;
}
.simple-dropdown-option:hover,
.simple-dropdown-option.selected {
  color: #cdd1dd;
}

/* Icons — fixed color, same as main menu icons */
.simple-dropdown-option i {
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  color: #d8dcf17a;
  transition: color var(--t-fast);
}
.simple-dropdown-option:hover i,
.simple-dropdown-option.selected i {
  color: #cdd1dd;
}


/* Media Type active panel: cursor glow matched to theme color */
#commMediaTypeMenu.active::after {
  background: radial-gradient(75px 75px at var(--mouse-x, 0) var(--mouse-y, 0),
    var(--panel-cursor-glow), transparent 100%);
}

/* Icon in collapsed header — neutral by default, accent when media type selected */
.simple-dropdown-header i {
  width: 14px;
  text-align: center;
  flex-shrink: 0;
  margin-right: 8px;
  color: #d8dcf17a;
  transition: color var(--t-fast);
}
#commMediaTypeMenu.has-selection:has([data-media="music"].selected)  .simple-dropdown-header i { color: #ff2d55; }
#commMediaTypeMenu.has-selection:has([data-media="games"].selected)  .simple-dropdown-header i { color: #8cd635; }
#commMediaTypeMenu.has-selection:has([data-media="books"].selected)  .simple-dropdown-header i { color: #ffb300; }
#commMediaTypeMenu.has-selection:has([data-media="movies"].selected) .simple-dropdown-header i { color: #2f6aeb; }
#commMediaTypeMenu.has-selection:has([data-media="misc"].selected)   .simple-dropdown-header i { color: #7b83a6; }

/* Divider under header when expanded — matches genre sidebar line */
.simple-dropdown-menu.active .simple-dropdown-header {
  position: relative;
}
.simple-dropdown-menu.active .simple-dropdown-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 8px; right: 8px;
  height: 1px;
  background: rgb(213 218 239 / 8%);
}

/* ============================================================
   Ratings Dropdown Overrides — exact copy of comm selectors
   ============================================================ */
#ratingsMediaTypeMenu.has-selection:not(.active) { color: #cdd1dd; }

#ratingsMediaTypeMenu:not(.active)::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; mix-blend-mode: color-dodge; opacity: 0; transition: opacity 0.3s ease;
}
#ratingsMediaTypeMenu.has-selection:not(.active)::before { opacity: 1; }

#ratingsMediaTypeMenu.has-selection:not(.active):has([data-media="music"].selected)::before {
  background: radial-gradient(ellipse 135px 90px at 115% 115%, #fd056c -2%, #c31664cc 54%, transparent);
}
#ratingsMediaTypeMenu.has-selection:not(.active):has([data-media="games"].selected)::before {
  background: radial-gradient(ellipse 135px 90px at 115% 115%, #b9f10c -2%, #00b942a8 54%, transparent);
}
#ratingsMediaTypeMenu.has-selection:not(.active):has([data-media="books"].selected)::before {
  background: radial-gradient(ellipse 135px 90px at 115% 115%, #ffe94e -2%, #d3a604c7 54%, transparent);
}
#ratingsMediaTypeMenu.has-selection:not(.active):has([data-media="movies"].selected)::before {
  background: radial-gradient(ellipse 135px 90px at 115% 115%, #0fdaef -2%, #6437bd9c 54%, transparent);
}
#ratingsMediaTypeMenu.has-selection:not(.active):has([data-media="misc"].selected)::before {
  background: radial-gradient(ellipse 135px 90px at 115% 115%, #edd3ec -2%, #526075c7 57%, transparent);
}

#ratingsSortByMenu.has-selection:not(.active) { color: #cdd1dd; }

#ratingsSortByMenu:not(.active)::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; mix-blend-mode: color-dodge; opacity: 0; transition: opacity 0.3s ease;
}
#ratingsSortByMenu.has-selection:not(.active)::before { opacity: 1; }

#ratingsSortByMenu.has-selection:not(.active):has([data-sort="updated"].selected)::before,
#ratingsSortByMenu.has-selection:not(.active):has([data-sort="rated"].selected)::before,
#ratingsSortByMenu.has-selection:not(.active):has([data-sort="matching"].selected)::before {
  background: radial-gradient(ellipse 135px 90px at 115% 115%, #f6d711 -2%, #879309cc 54%, transparent);
}

#ratingsMediaTypeMenu.active::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; mix-blend-mode: color-dodge; opacity: 0; transition: opacity 0.3s ease;
}
#ratingsMediaTypeMenu.active:has(.simple-dropdown-option:hover)::before,
#ratingsMediaTypeMenu.has-selection.active::before {
  opacity: 1;
}

#ratingsMediaTypeMenu.active:has([data-media="music"]:hover)::before,
#ratingsMediaTypeMenu.has-selection.active:not(:has(.simple-dropdown-option:hover)):has([data-media="music"].selected)::before {
  background: radial-gradient(ellipse 240px 180px at 102% 108%, #fd056c -2%, #c31664cc 54%, transparent);
}
#ratingsMediaTypeMenu.active:has([data-media="games"]:hover)::before,
#ratingsMediaTypeMenu.has-selection.active:not(:has(.simple-dropdown-option:hover)):has([data-media="games"].selected)::before {
  background: radial-gradient(ellipse 240px 180px at 102% 108%, #b9f10c -2%, #00b942a8 54%, transparent);
}
#ratingsMediaTypeMenu.active:has([data-media="books"]:hover)::before,
#ratingsMediaTypeMenu.has-selection.active:not(:has(.simple-dropdown-option:hover)):has([data-media="books"].selected)::before {
  background: radial-gradient(ellipse 240px 180px at 102% 108%, #ffe94e -2%, #d3a604c7 54%, transparent);
}
#ratingsMediaTypeMenu.active:has([data-media="movies"]:hover)::before,
#ratingsMediaTypeMenu.has-selection.active:not(:has(.simple-dropdown-option:hover)):has([data-media="movies"].selected)::before {
  background: radial-gradient(ellipse 240px 180px at 102% 108%, #0fdaef -2%, #6437bd9c 54%, transparent);
}
#ratingsMediaTypeMenu.active:has([data-media="misc"]:hover)::before,
#ratingsMediaTypeMenu.has-selection.active:not(:has(.simple-dropdown-option:hover)):has([data-media="misc"].selected)::before {
  background: radial-gradient(ellipse 240px 180px at 102% 108%, #edd3ec -2%, #526075c7 57%, transparent);
}

#ratingsSortByMenu.active::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; mix-blend-mode: color-dodge; opacity: 0; transition: opacity 0.3s ease;
}
#ratingsSortByMenu.active:has(.simple-dropdown-option:hover)::before,
#ratingsSortByMenu.has-selection.active::before {
  opacity: 1;
}

#ratingsSortByMenu.active:has([data-sort="updated"]:hover)::before,
#ratingsSortByMenu.has-selection.active:not(:has(.simple-dropdown-option:hover)):has([data-sort="updated"].selected)::before,
#ratingsSortByMenu.active:has([data-sort="rated"]:hover)::before,
#ratingsSortByMenu.has-selection.active:not(:has(.simple-dropdown-option:hover)):has([data-sort="rated"].selected)::before,
#ratingsSortByMenu.active:has([data-sort="matching"]:hover)::before,
#ratingsSortByMenu.has-selection.active:not(:has(.simple-dropdown-option:hover)):has([data-sort="matching"].selected)::before {
  background: radial-gradient(ellipse 240px 180px at 102% 108%, #f6d711 -2%, #879309cc 54%, transparent);
}

#ratingsMediaTypeMenu.active::after {
  background: radial-gradient(75px 75px at var(--mouse-x, 0) var(--mouse-y, 0), var(--panel-cursor-glow), transparent 100%);
}

#ratingsMediaTypeMenu.has-selection:has([data-media="music"].selected)  .simple-dropdown-header i { color: #ff2d55; }
#ratingsMediaTypeMenu.has-selection:has([data-media="games"].selected)  .simple-dropdown-header i { color: #8cd635; }
#ratingsMediaTypeMenu.has-selection:has([data-media="books"].selected)  .simple-dropdown-header i { color: #ffb300; }
#ratingsMediaTypeMenu.has-selection:has([data-media="movies"].selected) .simple-dropdown-header i { color: #2f6aeb; }
#ratingsMediaTypeMenu.has-selection:has([data-media="misc"].selected)   .simple-dropdown-header i { color: #7b83a6; }

#ratingsMediaTypeMenu.active { max-height: 222px; }
#ratingsSortByMenu.active    { max-height: 150px; }


/* ============================================================
   Item Ratings Page Horizontal Cards
   ============================================================ */
.ratings-list-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}


/* Rating row: card left (~75%), stats panel right */
.rating-row {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}

.rating-row .item-rating-card {
  flex: 0 0 75%;
  width: 75%;
  position: relative;
  z-index: 1;
}

/* Stats panel sits to the right, visually "behind" the card */
.rating-outside-stats {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0 0 20px;
  position: relative;
  z-index: 0;
  overflow: hidden;
  gap: 6px;
  cursor: pointer;
}

.rating-outside-stats:hover .outside-pct {
  text-decoration: underline;
}

.rating-outside-stats:hover .outside-count {
  color: #cdd1dd;
}

.outside-top-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.outside-rank-num {
  font-family: 'PT Serif', serif;
  font-size: 52px;
  font-weight: var(--fw-regular);
  color: #ebeef9;
  line-height: 1;
}

.outside-text-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.outside-pct {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ratio-green);
}

.outside-count {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #dbe2ef9c;
}

.outside-chart {
  width: 100%;
  height: 60px;
  display: block;
  overflow: visible;
}

.outside-axis {
  display: flex;
  justify-content: space-between;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: #9ca3af80;
}

/* ── Item Ratings: narrow-screen simplifications ── */
@media (max-width: 768px) {
  /* Drop the distribution chart + axis; show just the rank with the score and
     rating count stacked beneath it. Frees width for the card too. */
  .rating-outside-stats .outside-chart,
  .rating-outside-stats .outside-axis {
    display: none;
  }
  .outside-top-row {
    flex-direction: column;
    align-items: flex-start; /* left-align rank + score + count */
    gap: 4px;
  }
  .outside-text-col {
    align-items: flex-start;
  }
  /* Card takes the freed width; the stats column shrinks to its content (the rank). */
  .rating-row .item-rating-card {
    flex: 1 1 auto;
    width: auto;
    /* Shorter, content-driven height + a smaller cover so the text gets more width
       (fewer genre lines) and never clips on tall/narrow phones (was a fixed 140px
       with overflow:hidden, which cropped the title + date). */
    height: auto;
    min-height: 92px;
    padding: 12px;
  }
  /* Bigger cover now that the title/artist sit tight at the top and free up room.
     NOTE: every rule here is scoped to .rating-row so the profile favourites grid
     (which reuses .item-rating-card) keeps its own layout untouched. */
  .rating-row .item-cover-wrap {
    width: 92px;
    height: 92px;
  }
  .rating-row .card-movies .item-cover-wrap,
  .rating-row .card-books .item-cover-wrap,
  .rating-row .card-games .item-cover-wrap {
    width: 62px;
    height: 92px;
  }
  /* New phone layout: title spans the top (clear of the + button), then the cover
     sits bottom-left with the tags/genres to its right. display:contents promotes
     the details wrapper's children into this grid so no markup change is needed.
     align-content:start keeps the title at the top (gap = padding, matching the
     left) instead of being vertically centred. */
  .rating-row .card-content-horizontal {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "title  title"
      "artist artist"
      "cover  info";
    column-gap: 14px;
    row-gap: 0;
    align-content: start;
  }
  .rating-row .item-details-wrap { display: contents; }
  .rating-row .item-cover-wrap { grid-area: cover; align-self: end; }
  .rating-row .item-title {
    grid-area: title;
    padding-right: 28px; /* keep the title clear of the absolute + button (top-right) */
    margin-top: -7px;    /* trim the serif leading so the title sits higher */
    font-size: 20px;     /* smaller than the desktop 24px (auto-fit shrinks from here) */
  }
  /* Pull the artist up tight under the title, with a small gap before the cover row. */
  .rating-row .item-artist { grid-area: artist; margin: -6px 0 8px 0; font-size: 14px; }
  .rating-row .item-extra-info { grid-area: info; align-self: center; }
  .rating-outside-stats {
    flex: 0 0 auto;
    padding-left: 14px;
  }
}

/* Hide the duration line when the text block would otherwise be taller than the
   cover (toggled per-card in JS: fitRatingsCardHeights). */
.item-rating-card.hide-duration .item-stats {
  display: none;
}

.item-rating-card .card-glow,
.item-rating-card .card-glow-solid {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  background-image: var(--album-glow-img, none);
  background-size: cover;
  background-repeat: no-repeat;
  filter: brightness(0.9) saturate(1.4) blur(14px);
  pointer-events: none;
  z-index: 0;
  transform: scale(calc(var(--glow-scale, 1) * 1.5));
  /* Cache the blur in a GPU layer so scrolling the ratings list just moves a cached
     texture instead of re-compositing the blur+blend for every card each frame. */
  will-change: transform;
  background-position: calc(50% + var(--parallax-x, 0) * -70px) calc(50% + var(--parallax-y, 0) * -70px);
}

.item-rating-card .card-glow {
  background-color: transparent;
  opacity: 1;
  mix-blend-mode: overlay;
  /* OVERLAY mask — rotate via --glow-mask-angle, resize band via the two transparent stops */
  -webkit-mask-image: linear-gradient(var(--glow-mask-angle, 90deg), #000 0%, transparent 38%, transparent 62%, #000 100%);
  mask-image: linear-gradient(var(--glow-mask-angle, 90deg), #000 0%, #000000 38%, transparent 62%, #000 100%);
}

.item-rating-card .card-glow-solid {
  background-color: var(--album-glow-color, #00000000);
  opacity: 1;
  mix-blend-mode: normal;
  mask-image: linear-gradient(var(--glow-solid-mask-angle, 90deg), #00000070 20%, #000000 70%);
}

.item-rating-card {
  --glow-scale: 1;
  --glow-mask-angle: -90deg;
  --glow-solid-mask-angle: 12deg;
  height: 140px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  contain: layout style paint;
  /* Skip rendering cards that are off-screen so scrolling a long ratings list
     doesn't pay for every card's blur/blend every frame. Fixed 140px height means
     the reserved size is exact, so there's no scroll jump. */
  content-visibility: auto;
  contain-intrinsic-size: auto 140px;
  background: #0e0f12;
  padding: 16px;
  display: flex;
  align-items: center;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  cursor: pointer;
  width: 100%;
}
/* ::after fill glow removed — border glow (layer-border) handles the cursor effect */

.item-rating-card:hover {
  box-shadow: 0px 14px 40px rgb(5 6 8 / 25%);
}

/* Border — same color-dodge technique as .album-info-popout border:
   a near-white ring that lights up in the album's glow colour underneath. */
.item-rating-card .layer-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0;
  border: 1px solid transparent;
  background:
    radial-gradient(120px 96px at var(--mouse-x, 0) var(--mouse-y, 0), rgb(188 188 188), transparent 100%) border-box,
    linear-gradient(-45deg, rgba(255,255,255,0.10), rgba(255,255,255,0.01) 20%, rgba(255,255,255,0.03) 80%, rgba(255,255,255,0.10)) border-box;
  background-blend-mode: color-dodge, normal;
  mix-blend-mode: color-dodge;
  -webkit-mask: linear-gradient(#cdd1dd 0 0) padding-box, linear-gradient(#cdd1dd 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 20;
}


.card-content-horizontal {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 24px;
  position: relative;
  z-index: 2;
  height: 100%;
}

.item-cover-wrap {
  width: 108px;
  height: 108px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.item-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 10%;
}

/* Movies/Books/Games use 2:3 portrait posters instead of square covers */
.card-movies .item-cover-wrap,
.card-books .item-cover-wrap,
.card-games .item-cover-wrap {
  width: 72px;
  height: 108px;
}

.item-details-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0px;
  flex-grow: 1;
  min-width: 0;
}

/* Item Ratings card: the text block is centred correctly but reads a touch low —
   nudge it up ~2px (visual only). Scoped to .rating-row so profile favourites are
   unaffected. */
.rating-row .item-details-wrap {
  transform: translateY(-2px);
}

.item-title {
  font-family: 'PT Serif', serif;
  font-size: 24px;
  font-weight: var(--fw-regular);
  color: #ebeef9;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-artist {
  font-family: 'PT Serif', serif;
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: 16px;
  color: #d1d5db; /* gray-300, same as .album-popout-artist */
  margin: -4px 0 8px 0;
}

.item-extra-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
}

.item-genres,
.item-stats,
.item-release-date {
  color: #dbe2ef9c; /* gray-400, same as .album-popout-meta */
}

.item-stats-right-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  height: 100%;
  min-width: 120px;
  text-align: right;
  padding-right: 12px;
}

.item-rank-num {
  font-family: 'PT Serif', serif;
  font-size: 48px;
  font-weight: var(--fw-regular);
  color: #ebeef9;
  line-height: 1;
  margin-top: 10px;
}

.item-rating-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.item-rating-percentage {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ratio-green);
}

.item-rating-count {
  font-size: 11px;
  color: #dbe2ef9c;
}

.item-add-plus-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: #ebeef9;
  font-size: 16px;
  cursor: pointer;
  transition: color var(--t-fast), transform var(--t-fast);
  z-index: 3;
}
.item-add-plus-btn:hover {
  transform: scale(1.1);
}
/* Already in the user's main list — dimmed check, not clickable. */
.item-add-plus-btn.added {
  color: #ebeef94d;
  cursor: default;
}
.item-add-plus-btn.added:hover {
  transform: none;
}

/* ============================================================
   Tier List Viewer / Read-Only View Styles
   ============================================================ */
:root {
  --color-ratio-green:  #1b943b;
  --color-ratio-yellow: #c29211;
  --color-ratio-red:    #ba1e1e;
}

#listView.view-panel.active {
  display: flex !important;
  align-items: flex-start;
  opacity: 1;
}

/* Read-only title shouldn't carry the editor input's vertical padding */
#listView .tierlist-title {
  padding-top: 0;
}

#viewSidePanel {
  height: auto; /* short author card — don't force the 6-tier search-panel height */
  background: linear-gradient(-16deg, #1a1e2d -12%, #14151f 34%, #0d0d14 80%, #161a25 116%);
  box-shadow: 0px 10px 32px rgb(5 6 8 / 22%);
}

/* Viewer: drop the author panel down so its top lines up with the tier list at load
   (the title + Genre/Year filters occupy the header row above it in the left column).
   The panel is still position:sticky, so on scroll it binds to the top as you go. */
#listView .main-right {
  margin-top: 94px; /* = tierlist-header height (min-height 74 + 20px margin-bottom) */
}
@media (max-width: 768px) {
  /* Stacked layout — the panel sits under the list, so no offset. */
  #listView .main-right {
    margin-top: 0;
  }
}

/* Match the home-card gradient border (overrides the glass-panel border) */
#viewSidePanel::after,
.search-panel::after {
  background:
    radial-gradient(120px 96px at var(--mouse-x, 0) var(--mouse-y, 0), rgba(180, 190, 255, 0.35), transparent 100%) border-box,
    linear-gradient(145deg, #474e5e, #20242f 50%, #535770) border-box;
  background-blend-mode: screen, normal;
}

/* Drop the border below the color-dodge overlay so the overlay tints it
   (mirrors .layer-border z-index 1 < .layer-overlay z-index 2 in the profile header) */
#viewSidePanel::after {
  z-index: 1;
}

/* ── View panel ring + overlay (same layering as profile header) ── */
.view-author-ring {
  position: absolute;
  left: 10px;
  top: 14px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #474950;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  pointer-events: none;
  z-index: 1 !important;
}

.view-author-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(-24deg, var(--view-overlay-color, #1d00ff00) -10%, #00000012 30%, transparent 25%, #00000012 65%, var(--view-overlay-color, transparent) 110%);
  mix-blend-mode: color-dodge;
  pointer-events: none;
  z-index: 2 !important;
}

#viewSidePanel .view-author-card {
  z-index: 3 !important;
}

/* ── Side panel author card (left-aligned) ── */
.view-author-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 16px;
}

.view-author-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.view-author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  color: #1a1b2e;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px #0d0e18;
}

.view-author-meta {
  display: flex;
  flex-direction: column;
}

.view-author-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #e8e9f0);
}

.view-author-handle {
  font-size: 12px;
  color: rgb(199 209 229 / 50%);
}

.view-list-description {
  font-size: 13px;
  color: #c5c7d4;
  line-height: 1.55;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ── Reaction buttons (filter-pill idle → resting colored hover → bright active) ── */
.view-react-btns {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
}

.view-react-btn {
  flex: 1 1 auto;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast);
  background: linear-gradient(18deg, #25253a 0%, #11111c 85%, #1e2435 170%);
  border-color: #2a2b41;
  color: #c0c4d1;
}

/* Variant cursor glow — always the correct colour regardless of state */
.view-react-btn[data-variant="save"]   { --btn-cursor-glow: rgb(57 189 33 / 22%); }
.view-react-btn[data-variant="delete"] { --btn-cursor-glow: rgb(247 59 25 / 25%); }

/* Hover = resting save/delete colour */
.view-react-btn[data-variant="save"]:hover {
  background: linear-gradient(180deg, #181925 0%, #143f1d 100%);
  border-color: #2c5136;
  color: #e7e9e9;
}
.view-react-btn[data-variant="delete"]:hover {
  background: linear-gradient(180deg, #181925 0%, #43171a 100%);
  border-color: #4b272b;
  color: #e7e9e9;
}

/* Active = bright gradient */
.view-react-btn[data-variant="save"].btn-active,
.view-react-btn[data-variant="save"].btn-active:hover {
  background: linear-gradient(180deg, #0d1611 0%, #104b0d 64%, #2d6f03 86%, #8eb90a 108%);
  border-color: #257739;
  color: #cdd1dd;
}
.view-react-btn[data-variant="delete"].btn-active,
.view-react-btn[data-variant="delete"].btn-active:hover {
  background: linear-gradient(180deg, #251819 0%, #69151a 64%, #ad0e1d 86%, #ff5128 108%);
  border-color: #932731;
  color: #cdd1dd;
}

/* Glow on activation — instant max, fade to nothing (no build-up) */
@keyframes btn-glow-save {
  0%   { box-shadow: 0 0 16px 0px rgb(85 218 8 / 25%); }
  100% { box-shadow: 0 0 0px 0px rgba(27, 148, 59, 0); }
}
@keyframes btn-glow-delete {
  0%   { box-shadow: 0 0 16px 0px rgb(221 37 14 / 25%); }
  100% { box-shadow: 0 0 0px 0px rgba(186, 30, 30, 0); }
}
.view-react-btn[data-variant="save"].btn-active   { animation: btn-glow-save   0.6s linear; }
.view-react-btn[data-variant="delete"].btn-active { animation: btn-glow-delete 0.6s linear; }

#viewNeverRateBtn { justify-content: center; }

.view-react-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* ── Ratio bar + total ratings info ── */
.view-ratio-bar {
  height: 2px;
  border-radius: 1px;
  width: 100%;
}

.view-ratio-info {
  font-size: 11px;
  color: var(--text-secondary, #8b8fa8);
  opacity: 0.55;
}

.view-author-updated {
  font-size: 12px;
  color: var(--text-secondary, #8b8fa8);
}

/* ── Tier info popout (read-only, opens on tier label click) ── */
.tier-info-popout {
  position: fixed;
  z-index: 9000;
  width: 220px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg, #1e1f30 0%, #14151f 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px) scale(0.97);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.tier-info-popout.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0) scale(1);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0s;
}
.tier-info-bar {
  height: 4px;
  width: 100%;
}
.tier-info-body {
  padding: 12px 14px;
}
.tier-info-name {
  font-size: 14px;
  font-weight: 600;
  color: #cdd1dd;
}
.tier-info-notes {
  font-size: 12px;
  color: #b6b9c8;
  line-height: 1.5;
  margin: 6px 0 0 0;
}

/* listView tier labels are clickable (open the info popout), no editor caret */
#listView .tier-label::after { display: none !important; content: none !important; }
#listView .tier-label { cursor: pointer; }

/* ===== User Profile View Styling ===== */
#profileView.view-panel.active {
  display: flex !important;
  flex-direction: column;
  opacity: 1;
  overflow-x: hidden;
}

#profileView {
  max-width: 1200px;
  width: 100%;
  margin: 40px auto 60px auto;
  padding: 0 36px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
}

.profile-header-card {
  --border-accent: #535770;
  height: auto !important;
  padding: 18px 26px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 16px !important;
  background: linear-gradient(145deg, #1a2941 -14%, #121523 9%, #101018 33%, #12121c 69%, #1c2533 131%) !important;
}

.profile-header-card:hover {
  transform: none !important;
}

.profile-header-card:hover .layer-border {
  filter: none !important;
}

.profile-header-card .layer-overlay {
    background: linear-gradient(-24deg, var(--profile-overlay-color, #1d00ff00) -10%, #00000012 30%, transparent 25%, #00000012 65%, var(--profile-overlay-color, transparent) 110%);
  mix-blend-mode: color-dodge;
  opacity: 1;
  z-index: 2;
}

.profile-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 3;
  flex-wrap: wrap;
  gap: 24px;
}

.profile-avatar-wrap {
  display: flex;
  align-items: center;
}

/* Neutral ring around the avatar, rendered as a CARD layer BELOW the overlay
   (z-index 1 < overlay's 2) so the card's color-dodge gradient tints the ring the
   same way it tints the surface. Anchored to the top-left — exactly where the avatar
   always sits (first item of the content's first row) — so it tracks the avatar and
   no longer drifts down when the stats wrap and the card grows (the old top:50%
   anchored to the card centre, which moved). Offsets = card padding + avatar radius
   - ring radius (18+28-34=12 top, 26+28-34=20 left at desktop padding). */
.profile-avatar-ring {
  position: absolute;
  top: 12px;
  left: 20px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #474950;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  pointer-events: none;
  z-index: 1;
}

.profile-avatar-large {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #3a3f50;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 600;
  color: #12131a; /* Dark text inside avatar */
  border: none;
  box-shadow: 0 0 0 3px #0d0e18;
}

.profile-user-info {
  display: flex;
  flex-direction: column;
}

#profileUsername {
  font-size: 24px;
  font-weight: 500;
  color: #cdd1dd;
  margin: 0;
  letter-spacing: -0.5px;
}

#profileHandle {
  font-size: 12px;
  color: rgb(199 209 229 / 50%);
  font-weight: 400;
  margin-top: -2px;
}

.profile-stats-group {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.profile-stat-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.profile-stat-col span:first-child {
  font-size: 24px;
  font-weight: 500;
  color: #cdd1dd;
  letter-spacing: -0.5px;
}

.profile-stat-col span:last-child {
  font-size: 12px;
  color: rgb(199 209 229 / 50%);
  font-weight: 400;
  margin-top: -2px;
}

@media (max-width: 640px) {
  /* Profile header on phones: identity (avatar + ring, name, handle) on row 1, and
     ALL four stats compact on a single row 2 — instead of the stats breaking across
     multiple lines. Giving the stats group width:100% forces it onto its own row. */
  .profile-header-card { padding: 16px 18px !important; }
  /* Match the ring offsets to the smaller phone padding (16/18 + 28 - 34). */
  .profile-avatar-ring { top: 10px; left: 12px; }
  .profile-header-content { gap: 16px; }
  .profile-stats-group {
    width: 100%;
    gap: 14px;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .profile-stat-col { min-width: 0; }
  .profile-stat-col span:first-child { font-size: 18px; }
  .profile-stat-col span:last-child { font-size: 10px; white-space: nowrap; }
}

.profile-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.profile-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.profile-section-edit-btn {
  background: none;
  border: none;
  padding: 0;
  color: #cdd1dd;
  opacity: 0.45;
  font-size: 15px;
  cursor: pointer;
  transition: opacity var(--t-fast);
}

.profile-section-edit-btn:hover {
  opacity: 0.9;
}

.profile-header-edit-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  background: none;
  border: none;
  padding: 0;
  color: #cdd1dd;
  opacity: 0.45;
  font-size: 13px;
  cursor: pointer;
  transition: opacity var(--t-fast);
}

.profile-header-edit-btn:hover {
  opacity: 0.9;
}

.profile-section-title {
  font-size: 20px;
  font-weight: 600;
  color: #cdd1dd;
  margin: 0;
  letter-spacing: -0.2px;
}

.profile-section-empty {
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,0.28);
}

.profile-fav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

@media (max-width: 900px) {
  .profile-fav-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .profile-fav-grid {
    grid-template-columns: 1fr;
  }
}

.profile-carousel-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.profile-carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 0;
  margin-top: -10px;
  width: 100%;
  scrollbar-width: none; /* hide scrollbars in Firefox */
}

.profile-carousel-track::-webkit-scrollbar {
  display: none; /* hide scrollbars in Chrome/Safari/Edge */
}

.profile-carousel-track .home-card {
  flex: 0 0 calc((100% - 60px) / 4);
  min-width: calc((100% - 60px) / 4);
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .profile-carousel-track .home-card {
    flex: 0 0 calc((100% - 40px) / 3);
    min-width: calc((100% - 40px) / 3);
  }
}

@media (max-width: 768px) {
  .profile-carousel-track .home-card {
    flex: 0 0 calc((100% - 20px) / 2);
    min-width: calc((100% - 20px) / 2);
  }
}

@media (max-width: 480px) {
  .profile-carousel-track .home-card {
    flex: 0 0 100%;
    min-width: 100%;
  }
}

.profile-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #cdd1dd;
  width: 20px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  font-size: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}

.profile-carousel-btn.next-btn {
  right: -30px;
}

.profile-carousel-btn.prev-btn {
  left: -30px;
}

.profile-carousel-btn.visible {
  opacity: 0.8;
  pointer-events: auto;
}

.profile-carousel-btn:hover {
  opacity: 1;
}

.profile-recent-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 0;
  margin-top: -10px;
  width: 100%;
  scrollbar-width: none;
}

.profile-recent-track::-webkit-scrollbar {
  display: none;
}

.profile-recent-card {
  flex: 0 0 calc((100% - 112px) / 8);
  min-width: calc((100% - 112px) / 8);
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  align-self: flex-start;
}

.profile-recent-card.media-vertical {
  flex: 0 0 calc(0.9 * (100% - 112px) / 8);
  min-width: calc(0.9 * (100% - 112px) / 8);
}

/* Base music sizing must stay BEFORE the breakpoints below so they override it on
   small screens (it previously sat after them and forced 8-per-row everywhere). */
.profile-recent-card.media-music {
  flex: 0 0 calc(0.93 * (100% - 112px) / 8);
  min-width: calc(0.93 * (100% - 112px) / 8);
}

@media (max-width: 1200px) {
  .profile-recent-card {
    flex: 0 0 calc((100% - 80px) / 6);
    min-width: calc((100% - 80px) / 6);
  }
  .profile-recent-card.media-vertical {
    flex: 0 0 calc(0.9 * (100% - 80px) / 6);
    min-width: calc(0.9 * (100% - 80px) / 6);
  }
  /* media-music needs its own override too: its base rule is more specific (0,2,0)
     than the plain .profile-recent-card breakpoints, so without this music cards
     ignore the responsive sizing and stay 8-per-row (tiny) on small screens. */
  .profile-recent-card.media-music {
    flex: 0 0 calc(0.93 * (100% - 80px) / 6);
    min-width: calc(0.93 * (100% - 80px) / 6);
  }
}

@media (max-width: 900px) {
  .profile-recent-card {
    flex: 0 0 calc((100% - 48px) / 4);
    min-width: calc((100% - 48px) / 4);
  }
  .profile-recent-card.media-vertical {
    flex: 0 0 calc(0.9 * (100% - 48px) / 4);
    min-width: calc(0.9 * (100% - 48px) / 4);
  }
  .profile-recent-card.media-music {
    flex: 0 0 calc(0.93 * (100% - 48px) / 4);
    min-width: calc(0.93 * (100% - 48px) / 4);
  }
}

@media (max-width: 600px) {
  .profile-recent-card {
    flex: 0 0 calc((100% - 16px) / 2);
    min-width: calc((100% - 16px) / 2);
  }
  .profile-recent-card.media-vertical {
    flex: 0 0 calc(0.9 * (100% - 16px) / 2);
    min-width: calc(0.9 * (100% - 16px) / 2);
  }
  .profile-recent-card.media-music {
    flex: 0 0 calc(0.93 * (100% - 16px) / 2);
    min-width: calc(0.93 * (100% - 16px) / 2);
  }
}

.profile-recent-cover-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 12px 1px var(--recent-glow-color, rgba(255, 255, 255, 0.08));
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.profile-recent-cover-wrap.media-vertical {
  aspect-ratio: 2 / 3;
}

.profile-recent-cover-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(18, 19, 26, 0.6) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.profile-recent-cover-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: color;
  opacity: 0.8;
  background: var(--recent-glow);
  transition: opacity 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.profile-recent-cover-wrap:hover::before {
  opacity: 1;
}

.profile-recent-cover-wrap:hover {
  z-index: 2;
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.profile-recent-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-recent-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  color: var(--color-ratio-green);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 2px 7px;
  z-index: 3;
  backdrop-filter: blur(6px);
  text-shadow: 0 1px 4px rgba(0,0,0,1);
}

.profile-recent-title {
  font-family: 'PT Serif', serif;
  font-size: 14px;
  font-weight: 400;
  color: #ebeef9;
  text-align: left;
  line-height: 1.3;
  margin-top: 0px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

/* Clickable user headers and authors hover indicator styling */
.card-user-header, .view-author-header {
  cursor: pointer;
}
.card-user-header:hover .user-name-small {
  text-decoration: underline;
  color: #cdd1dd !important;
}
.view-author-header {
  transition: opacity 0.2s var(--ease);
}
.view-author-header:hover {
  opacity: 1;
}

/* Profile Favourites Specific Layout and Typography */
.profile-fav-grid .card-content-horizontal {
  align-items: flex-start;
}

/* When there is NO quote: larger fonts, top-aligned, title wraps up to 2 lines */
.profile-fav-grid .item-details-wrap.no-quote {
  height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
  flex-grow: 1;
  min-width: 0;
}
.profile-fav-grid .item-details-wrap.no-quote .item-details-top {
  display: flex;
  flex-direction: column;
  gap: 0px; /* Proportional gap */
}
.profile-fav-grid .item-details-wrap.no-quote .item-title {
  font-family: 'PT Serif', serif;
  font-size: 22px;
  font-weight: 400;
  color: #ebeef9;
  line-height: 1.25;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-fav-grid .item-details-wrap.no-quote .item-artist {
  font-family: 'PT Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 14px; /* Further increased */
  color: rgb(205 212 225 / 72%);
  margin: 0;
}

/* When there IS a quote: smaller fonts, aligned to top, title is in 1 line */
.profile-fav-grid .item-details-wrap.has-quote {
  height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
  flex-grow: 1;
  min-width: 0;
}
.profile-fav-grid .item-details-wrap.has-quote .item-details-top {
  display: flex;
  flex-direction: column;
  gap: 0px;
}
.profile-fav-grid .item-details-wrap.has-quote .item-title {
  font-family: 'PT Serif', serif;
  font-size: 20px;
  font-weight: 400;
  color: #ebeef9;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-fav-grid .item-details-wrap.has-quote .item-artist {
  font-family: 'PT Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  color: rgb(199 209 229 / 50%);
  margin: 0;
}
.profile-fav-grid .item-details-wrap.has-quote .item-quote {
  font-family: 'Inter';
  font-weight: 400;
  font-size: 12px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.75);
  margin: 6px 0 0 0;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Allow wrapping up to 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fav cards are small — less blur, stronger parallax multiplier */
.profile-fav-grid .card-glow,
.profile-fav-grid .card-glow-solid {
  filter: brightness(0.9) saturate(1.4) blur(12px);
  background-position: calc(50% + var(--parallax-x, 0) * -70px) calc(50% + var(--parallax-y, 0) * -90px);
}





/* ============================================================
   Pagination Controls
   ============================================================ */
.pagination-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  margin-bottom: 20px;
  width: 100%;
}

.pagination-btn {
  background: var(--bg-300);
  border: 1px solid var(--border-color);
  color: var(--text-200);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--bg-400);
  color: var(--text-100);
  border-color: var(--primary-color);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-pages {
  display: flex;
  gap: 6px;
}

.pagination-page-number {
  background: var(--bg-200);
  border: 1px solid var(--border-color);
  color: var(--text-200);
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  user-select: none;
}

.pagination-page-number:hover {
  background: var(--bg-300);
  color: var(--text-100);
  border-color: var(--text-300);
}

.pagination-page-number.active {
  background: var(--primary-color);
  color: #fff;
  border-color: var(--primary-color);
  cursor: default;
  pointer-events: none;
}

.pagination-ellipsis {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 6px;
  color: var(--text-300);
  font-size: 14px;
  user-select: none;
  min-width: 20px;
}

/* ============================================================
   Auth — header chip, sign-in button, login/register modal
   ============================================================ */
.auth-signin-btn {
  padding: 6px 14px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: #ebedf0;
  font-size: 13px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform var(--t-fast), color var(--t-fast);
}
.auth-signin-btn:hover {
  transform: translateY(-2px);
  color: #fff;
}

.user-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 2px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-300);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.user-logout-btn:hover {
  background: rgba(220, 60, 70, 0.12);
  border-color: rgba(220, 60, 70, 0.35);
  color: #e0606a;
}

/* Login / Sign-up tab switcher */
.auth-tabs {
  display: flex;
  position: relative;
  padding: 4px;
  border-radius: 12px;
}
.auth-tab-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: calc(50% - 4px);
  left: 4px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  overflow: hidden;
}
.auth-tab-indicator::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 100%);
}
.auth-tab-indicator.right {
  left: 50%;
}
.auth-tab {
  flex: 1;
  padding: 8px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text-300);
  font-size: 13px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color var(--t-fast);
}
.auth-tab:hover { color: var(--text-100); }
.auth-tab.active { color: #fff; }

/* Google button */
.auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px;
  border-radius: 12px;
  background: #f5f5f7;
  border: 1px solid #e2e2e8;
  color: #1f2330;
  font-size: 13px;
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.auth-google-btn:hover { background: #fff; }
.auth-google-btn svg { flex-shrink: 0; }

/* "or" divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-300);
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-hover);
}

/* Inline error message */
.auth-error {
  padding: 9px 12px;
  border-radius: 9px;
  background: rgba(220, 60, 70, 0.10);
  border: 1px solid rgba(220, 60, 70, 0.32);
  color: #e98a92;
  font-size: 12.5px;
  line-height: 1.4;
}

/* Auth form fields — normal-sized boxed inputs (not the serif tier-name style) */
.auth-password-wrap {
  position: relative;
}
.auth-password-wrap .auth-input {
  padding-right: 40px;
}
.auth-eye-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.35);
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color var(--t-fast);
}
.auth-eye-btn:hover {
  color: rgba(255,255,255,0.7);
}

.auth-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-hover);
  border-radius: 9px;
  color: var(--text-100);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 12px;
  outline: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.auth-input:focus {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
}
/* Hide the browser's own password reveal/clear icons so only our .auth-eye-btn
   shows (Edge/Chromium add a native eye → two eyes otherwise). */
.auth-input::-ms-reveal,
.auth-input::-ms-clear {
  display: none;
}
.auth-input::placeholder {
  color: var(--text-300);
  opacity: 0.5;
}

/* Verification step */
.auth-verify-msg {
  margin: 0;
  color: var(--text-200);
  font-size: 13px;
  line-height: 1.5;
}
.auth-code-input {
  text-align: center;
  letter-spacing: 8px;
  font-size: 20px;
  font-weight: var(--fw-bold);
}
.auth-resend-btn {
  background: none;
  border: none;
  color: var(--text-300);
  font-size: 12.5px;
  cursor: pointer;
  padding: 2px;
  transition: color var(--t-fast);
}
.auth-resend-btn:hover { color: var(--text-100); }
.auth-resend-btn:disabled { opacity: 0.5; cursor: default; }

/* Empty-state text for home sections / grids */
.home-empty {
  grid-column: 1 / -1;
  padding: 32px 8px;
  color: var(--text-300);
  font-size: 14px;
}

/* Album-info modal: user-notes empty/loading state */
.popout-reviews-empty {
  padding: 14px 4px;
  color: #d0d4dbc4;
  font-size: 13px;
}

/* ============================================================
   Touch / no-hover devices: kill cursor-driven cosmetics
   ============================================================
   The pointer-following glow and parallax are normally driven by JS writing
   --mouse-x/y, --local-mouse-x/y and --parallax-x/y. On touch we don't run that
   loop (see IS_TOUCH in app.js), so those vars would stay at 0 and leave a static
   glow blob in the corner of every glass panel/button. Here we:
     • push the glow gradients fully off-element (mouse coords → -9999px), and
     • make the glow colours transparent,
   which removes the spotlight while leaving each panel's static border/background
   intact. Parallax offsets are forced to 0. :hover rules are intentionally left
   untouched so they behave as tap/pressed states. */
@media (hover: none), (pointer: coarse) {
  :root {
    --mouse-x: -9999px;  --mouse-y: -9999px;
    --global-mouse-x: -9999px;  --global-mouse-y: -9999px;
  }
  * {
    --mouse-x: -9999px;  --mouse-y: -9999px;
    --local-mouse-x: -9999px;  --local-mouse-y: -9999px;
    --btn-cursor-glow: transparent !important;
    --panel-cursor-glow: transparent !important;
    --parallax-x: 0 !important;  --parallax-y: 0 !important;
  }

  /* Popout / modal performance: large filter:blur + mix-blend-mode + backdrop-filter
     layers re-rasterise every frame during the open animation and tank smoothness on
     mobile GPUs (the popout "lag"). Drop the heaviest ambient effects on touch — the
     popout/modal stay readable on their solid background, just without the blurred
     art glow. */
  /* Keep the album-art glow (the popout's signature look) — it's made cheap via the
     GPU layer caching on .album-popout-glow below. Only drop the generic ambient
     modal glow on touch. */
  .modal-glow,
  .modal-glow-solid {
    display: none !important;
  }
  .glass-panel::before {
    display: none !important; /* blurred cursor-glow blob — invisible on touch anyway */
  }
  .popout-nav-toggle {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* On touch, SortableJS adds a finger-following clone that floats over the list and
     overlaps the card beneath it. Hide that clone and instead let the original card
     reorder IN PLACE (visible ghost) — no floating duplicate, no overlap. */
  .fav-drag-fallback {
    opacity: 0 !important;
  }
  .fav-drag-ghost {
    opacity: 1 !important;
  }

  /* Tier-list cards on touch: no sticky :hover (a tap would otherwise leave the
     tapped card with its title + gradient overlay and remove button showing). The
     remove (×) is shown AND clickable only on the tap-selected item, and its hit
     area isn't enlarged so it's harder to mis-tap (opacity:0 alone still takes taps,
     so it also needs pointer-events:none). */
  .album-card:hover .album-cover-wrap { box-shadow: none; }
  .album-card:hover .album-info { opacity: 0; }
  .album-card:hover .album-remove { opacity: 0; }
  .album-remove { pointer-events: none; }
  /* The tap-selected item DOES show its title + gradient (and an interactive ×). */
  .album-card.tap-selected .album-info { opacity: 1; }
  .album-card.tap-selected .album-remove { opacity: 1; pointer-events: auto; }
  .album-remove::after { content: none; }
}