/* =========================================================
   ROOT
========================================================= */

:root{
  --bg:#0b0d11;
  --card:#13161c;
  --border:#1f2228;
  --text:#e6e9ee;
  --accent:#3aa6ff;
}

/* ================= FONT SCALE ================= */
/* font scale handled via document.documentElement.style.zoom in themeService.js */





/* ================= DISPLAY MODES ================= */

/* ================= UMENU FONT SCALE + MODE CONTROLS ================= */

.umenu-font-scale-row {
  display: flex;
  gap: 8px;
}

.umenu-scale-btn {
  flex: 1;
  padding: 8px 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-weight: 600;
}

.umenu-scale-btn:nth-child(1) { font-size: 11px; }
.umenu-scale-btn:nth-child(2) { font-size: 14px; }
.umenu-scale-btn:nth-child(3) { font-size: 17px; }

.umenu-scale-btn.is-active,
.umenu-scale-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--accent);
  color: var(--accent);
}






/* =========================================================
   BASE
========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background: transparent !important; /* always transparent — #theme-bg handles the background */
  background-image: none !important;
  color:var(--text);
  margin:0;
  padding:24px 0;
  min-height:100vh;
  transition:color .35s;
}

/* html background matches #theme-bg fallback colour so any gap revealed
   by mobile browser chrome show/hide shows dark, never white */
html {
  background: #080808;
}

/* spacing when logged in */
body.logged-in .container{
  padding-top:10px;
  margin-top:0;
  gap:16px;
}


/* =========================================================
   GLOBAL LINK STYLING
========================================================= */

a{
  color:var(--accent);
  text-decoration:none;
  font-weight:500;
  transition:opacity .2s ease, color .2s ease;
}

a:hover{
  opacity:.8;
}

a:visited{
  color:var(--accent);
}

.public-add-btn{
  padding:6px 10px;
  font-size:12px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  background:var(--accent);
  color:white;
  font-weight:600;
  transition:.2s ease;
}

.public-add-btn:hover{
  opacity:.85;
}

.public-add-btn.disabled{
  background:#444;
  cursor:default;
  opacity:.6;
}


/* =========================================================
   LAYOUT CONTAINER
========================================================= */

.container{
  max-width:1200px;
  margin:0 auto 40px;
  padding:0 16px;
  padding-top:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:16px;
}

.container h2,
.container .show-card{
  width:100%;
}

#shows{
  display:block;
  width:100%;
}


/* =========================================================
   GLOBAL INPUTS
========================================================= */

input,
select,
button{
  padding:8px 12px;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  font-size:14px;
  font-family:inherit;
}

button{
  cursor:pointer;
  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease,
    filter .2s ease,
    box-shadow .2s ease,
    opacity .2s ease;
}

/* base hover lift
   Excluded from footer buttons via .no-lift and .footer-feedback-btn —
   transform on hover moves the button away from cursor → hover lost →
   snaps back → cursor over it again → rapid flicker loop. */
button:not(.no-lift):hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
}

button:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
  filter:none;
}

/* #theme-bg defined below with full styles */

/* =========================================================
   BUTTON VARIANTS
========================================================= */

.primary-btn{
  background:var(--accent);
  color:#fff;
  border:none;
}

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

.danger-btn{
  background:#e74c3c;
  color:#fff;
  border-color:#e74c3c;
}


/* =========================================================
   FILTER + LIST BUTTON SYSTEM (MERGED)
========================================================= */

/* base state */
.filter-btn,
.list-btn{
  background:var(--card);
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:none;
  opacity:.9;
  transition:
    opacity .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.filter-btn:hover,
.list-btn:hover{
  opacity:1;
}

/* active state — single source of truth */
.filter-btn.active,
.list-btn.active{
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translateY(-1px);
  font-weight: 600;
}


/* =========================================================
   DASHBOARD BASE (MERGED DUPLICATES)
========================================================= */

#dashboardView{
  display:flex;
  flex-direction:column;
  gap:16px;

  opacity:0;
  transform:translateY(8px);

  transition:
    opacity .35s ease,
    transform .35s ease;
}

/* when logged in */
body.logged-in #dashboardView{
  display:flex;
  opacity:1;
  transform:translateY(0);
  margin-top:0;
}

.public-add-btn {
  position:absolute;
  top:10px;
  right:10px;
  background:var(--accent);
  color:#fff;
  border:none;
  padding:6px 10px;
  border-radius:6px;
  font-size:12px;
  cursor:pointer;
  z-index:2;
}

.public-add-btn.disabled {
  background:#444;
  opacity:.7;
  cursor:default;
}


/* =========================================================
   AUTH VISIBILITY
========================================================= */

body:not(.logged-in) #dashboardControls{
  display:none;
}

body:not(.logged-in) .list-tabs{
  display:none;
}

/* =========================================================
   SPLASH VIEW
========================================================= */

.splash-view{
  padding-top:16px;
  contain: layout style;
}

body.logged-in .splash-view{
  padding-top:0;
}


.splash-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  letter-spacing: 0.5px;
}

.splash-badge.shared {
  background: #8e44ad;
}

.splash-badge.personal {
  background: #3498db;
}

.splash-badge.both {
  background: #e67e22;
}


/* =========================================================
   SPLASH HERO
========================================================= */

.splash-hero{
  text-align:center;
  margin-bottom:0;
  background: var(--card-glass, var(--card));
  border: 1px solid var(--border);
  border-top: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 16px;
  padding: 24px 20px;
}

.splash-hero h1{
  font-size:32px;
  margin-bottom:12px;
}

.splash-hero p{
  opacity:.75;
  margin-bottom:20px;
}

.splash-section-title{
  margin:40px 0 15px;
}

.next-episode-block.today {
  color: var(--accent);
  font-weight: 600;
  animation: pulseToday 1.5s ease-in-out infinite;
}

@keyframes pulseToday {
  0%   { opacity: 1; }
  50%  { opacity: 0.6; }
  100% { opacity: 1; }
}


/* =========================================================
   NETFLIX STYLE ROW
========================================================= */

.splash-section{
  margin-bottom:16px;
  contain: content;
}

/* ── Splash card-table (matches list-card / dashboard table aesthetic) ── */
.splash-card-table {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--card, rgba(255,255,255,0.03));
}

.splash-card-table-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.splash-card-table-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
  color: var(--text);
}

.splash-card-table-body {
  padding: 12px 0 12px;
}

.splash-card-table .row-wrapper {
  border-radius: 0;
}

.splash-card-table .splash-row {
  padding: 0 16px;

  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.row-wrapper{
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
}
.splash-card-table .row-wrapper {
  overflow: visible;
  padding: 4px 0;
}


/* =========================================================
   ROW SCROLLER
========================================================= */

.splash-row{
  display:flex;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  /* scroll-behavior:smooth removed — interferes with native momentum on iOS */
  padding:10px 60px;
  scrollbar-width:none;
}

.splash-row::-webkit-scrollbar{
  display:none;
}


/* =========================================================
  public profile
========================================================= */


.profile-avatar {
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  border-radius: 50%;
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--accent) 30%, var(--card));
  border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: bold;
  flex-shrink: 0;
  overflow: hidden;
}

.profile-name {
  margin: 0;
  font-size: 26px;
}

.profile-meta {
  margin-top: 6px;
  opacity: 0.75;
  font-size: 14px;
  display: flex;
  gap: 10px;
}

.profile-actions button {
  padding: 10px 18px;
}


.hero-compact {
  /* padding handled by inner sections */
}


.hero-username {
  margin-top: 12px;
  justify-content: center;
}

.username-row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.username-row input {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}

.username-status {
  font-size: 12px;
  opacity: 0.75;
  margin-top: 4px;
}

.username-label {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.username-hint {
  font-size: 0.75rem;
  opacity: 0.6;
  margin-top: 4px;
}

.username-cooldown {
  font-size: 0.85rem;
  opacity: 0.8;
}


.secondary-btn.small {
  padding: 6px 10px;
  font-size: 13px;
}


.hero-username {
  margin-top: 14px;
  text-align: center;
}

.username-label {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.username-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.username-row input {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color, #ccc);
  font-size: 0.9rem;
  min-width: 160px;
}

.username-hint {
  font-size: 0.75rem;
  opacity: 0.6;
  margin-top: 4px;
}

.username-status {
  font-size: 0.8rem;
  margin-top: 4px;
}

.username-cooldown.centered {
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.85;
}

.username-label-inline {
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.username-timer {
  font-size: 0.85rem;
}

.mo-t-b {
  display: inline-block;
  padding: 8px 14px;
  background: var(--accent);
  color: #ffffff !important;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none !important;
  border: none;
  transition: opacity 0.2s ease;
}

.modal-trailer-btn {
  all: unset;
  display: inline-block;
  padding: 8px 14px;
  background: var(--accent);
  color: #ffffff;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.modal-trailer-btn:hover {
  opacity: 0.85;
}

body.modal-open {
  overflow: hidden;
}


body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}


.profile-stat strong {
  font-size: 1.4rem;
}


/* =========================================================
   SPLASH CARDS
========================================================= */

.splash-card {
  flex: 0 0 160px;
  cursor: pointer;
  transition: transform .25s ease;
  position: relative;
  will-change: transform;
  /* Promote to own compositor layer — reduces repaint cost during parent scroll */
  transform: translateZ(0);
}

.splash-card:hover {
  transform: scale(1.08);
  z-index: 3;
}

/* =========================================================
   POSTER
========================================================= */

.splash-poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  position: relative;
  overflow: visible;
}

/* =========================================================
   ADD OVERLAY
========================================================= */


/* Always visible on touch devices */
@media (hover: none) {
  
}

/* =========================================================
   public profile
========================================================= */
/* ================= PUBLIC PROFILE ================= */

.public-profile {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}

.public-profile.hidden {
  display: none;
}

/* =========================================================
   SHARED VIEW — BACK BAR
========================================================= */

.pub-view-bar {
  display: flex;
  align-items: center;
  padding: 8px 0 16px;
}

.pub-view-back-btn {
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.15s ease;
}

.pub-view-back-btn:hover {
  opacity: 1;
  border-color: var(--accent);
  color: var(--accent);
  transform: none;
  filter: none;
}

/* =========================================================
   FOLDER CARD — matches list-card pattern
========================================================= */

/* the floating profile tab above the card — same as list-card-tab */
/* pub-folder-card: tab + contents in normal flow, tab has no bottom border
   so it visually merges with the list card below */
.pub-folder-card {
  display: flex;
  flex-direction: column;
}

.pub-folder-tab {
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: 14px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: visible;
}

.pub-folder-tab-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.pub-folder-tab-right {
  flex-shrink: 0;
}

.pub-folder-identity {
  flex: 1;
  min-width: 0;
}

.pub-folder-tab-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* badge glow fix */
.pub-folder-badges-row .badge-shelf,
.pub-badge-shelf .badge-shelf {
  overflow: visible !important;
  margin-top: 0;
  min-height: unset;
}

/* codex chips need overflow:visible too — overflow:hidden clips filter:drop-shadow */
.codex-chip {
  overflow: visible !important;
}

.pub-folder-badges-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  overflow: visible;
}

.pub-folder-badges-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.35;
  margin-bottom: 4px;
  text-align: center;
}

.pub-folder-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  align-self: center;
  width: 100%;
  text-align: center;
}


.profile-avatar {
  width: 84px;
  height: 84px;
  min-width: 84px;
  min-height: 84px;
  border-radius: 50%;
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--accent) 30%, var(--card));
  border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}

.profile-name {
  font-size: 26px;
  font-weight: 600;
}


.profile-stats {
  margin-top: 24px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.profile-stat {
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  font-size: 14px;
}

.profile-stat strong {
  display: block;
  font-size: 18px;
}


/* =========================================================
   ADD BUTTONS
========================================================= */

.splash-add-btn {
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: rgba(0,0,0,.75);
  color: white;
  transition: transform .15s ease, background .2s ease;
}

.splash-add-btn {
  position: absolute;
  top: 8px;
  right: 8px;
}

.splash-badge {
  position: absolute;
  top: 8px;
  left: 8px;
}


.splash-add-btn:hover {
  transform: scale(1.05);
  background: var(--accent);
}

/* =========================================================
   ADDED BADGE
========================================================= */


/* =========================================================
   GRADIENT EDGE MASKS
========================================================= */

.row-wrapper::before,
.row-wrapper::after{
  content:"";
  position:absolute;
  top:0;
  width:80px;
  height:100%;
  pointer-events:none;
  z-index:2;
}

.row-wrapper::before{
  left:0;
  background:linear-gradient(
    to right,
    var(--bg) 0%,
    var(--bg) 40%,
    rgba(0,0,0,0) 100%
  );
}

.row-wrapper::after{
  right:0;
  background:linear-gradient(
    to left,
    var(--bg) 0%,
    var(--bg) 40%,
    rgba(0,0,0,0) 100%
  );
}


/* =========================================================
   ROW ARROWS
========================================================= */

.row-arrow{
  /* Flex child — flexbox on .row-wrapper handles vertical centering perfectly.
     No position:absolute, no top:50%, no transform on the button itself.
     This is the only approach that never jumps on hover. */
  position: relative;
  z-index: 5;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 70px;
  padding: 0;
  margin: 0;

  background: rgba(0,0,0,.55);
  border: none;
  outline: none;
  border-radius: 6px;
  font-size: 0;

  cursor: pointer;
  opacity: 0;

  transition: opacity .2s ease, background .2s ease;
}

/* CSS-only chevron — pure border, zero font metrics */
.row-arrow::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2.5px solid #fff;
  border-right: 2.5px solid #fff;
  flex-shrink: 0;
}
.row-arrow.left::before  { transform: rotate(-135deg) translate(-2px,  2px); }
.row-arrow.right::before { transform: rotate(45deg)   translate(-2px,  2px); }

/* show arrows on row hover */
.row-wrapper:hover .row-arrow{
  opacity:1;
}

.row-arrow:hover{
  background:rgba(0,0,0,.85);
}

.row-arrow:hover,
.row-arrow:focus{
  outline: none;
  /* no transform needed — flexbox centers the button, nothing to override */
}

/* left/right positioning removed — arrows are flex children, order in DOM handles it */


/* =========================================================
   ANTICIPATED SECTION
========================================================= */

#anticipatedSection{
  display:none;
}


/* =========================================================
   MOBILE SPLASH GRID
========================================================= */

@media (max-width:768px){

  .splash-section-title::after{
    content:" • Top 10";
    opacity:.6;
    font-size:14px;
  }

  /* hide arrows on mobile for main content rows */
  .row-arrow{
    display:none;
  }
  /* keep search panel arrows visible on mobile — scroller stays active */
  .search-row-wrapper .row-arrow {
    display: flex;
    width: 32px;
    font-size: 22px;
    opacity: 0.85; /* always visible on mobile, no hover needed */
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* remove gradient edges on main rows */
  .row-wrapper::before,
  .row-wrapper::after{
    display:none;
  }

  /* convert horizontal row to grid */
  .splash-row{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:14px;
    overflow:visible;
    padding:0 10px;
  }

  .splash-card{
    flex:unset;
    transform:none !important;
  }

  .splash-card:hover{
    transform:none;
  }
}
/* =========================================================
   WELCOME BANNER
========================================================= */

.welcome-banner{
  margin:12px 0 18px 0;
  padding:16px 20px;
  border-radius:14px;
  background:var(--card);
  border:1px solid var(--border);
}

/* layout */
.welcome-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}

/* text block */
.welcome-text h2{
  margin:0;
  font-size:1.15rem;
  font-weight:600;
}

.welcome-text span{
  color:var(--accent);
}

.welcome-text p{
  margin:4px 0 0 0;
  font-size:0.85rem;
  opacity:.65;
}

/* tabs */
.welcome-tabs{
  display:flex;
  gap:10px;
}

/* slightly smaller tabs inside banner */
.welcome-tabs .list-btn{
  padding:8px 14px;
}

.welcome-tabs{
  display:flex;
  gap:10px;
  justify-content:center;
}

/* share button row */
.welcome-share{
  display:flex;
  justify-content:flex-end;
  width:100%;
  margin-top:8px;
}

/* small screens */
@media (max-width:600px){

  .welcome-banner{
    padding:14px 16px;
  }

  .welcome-top{
    gap:14px;
  }
}


/* =========================================================
   DASHBOARD OFFSET (already merged in pass 1)
   (No duplicate blocks remain)
========================================================= */


/* =========================================================
   LIST SECTION TITLE (preserved)
========================================================= */

.list-section-title{
  margin:0 0 18px 0;
  font-size:20px;
  font-weight:600;
  color:var(--accent);
  letter-spacing:.2px;
}


/* =========================================================
   FILTER LAYOUT
========================================================= */

/* ================= DASHBOARD CONTROLS ================= */

.dashboard-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* ================= WATCH STATE ================= */


/* ================= FILTER PILLS ================= */

.filter-pill {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.filter-pill:hover {
  background: rgba(179,71,107,.15);
}

.filter-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ================= STATUS DROPDOWN ================= */

.status-filter-wrapper {
  position: relative;
}

.status-filter-menu {
  position: absolute;
  top: 110%;
  left: 0;

  display: none;
  flex-direction: column;
  gap: 6px;

  min-width: 180px;
  padding: 8px;

  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;

  box-shadow: 0 10px 25px rgba(0,0,0,.4);
  z-index: 1200;
}

.status-filter-menu.open {
  display: flex;
}

.filter-option {
  background: transparent;
  border: none;
  text-align: left;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.filter-option:hover {
  background: rgba(179,71,107,.15);
}

/* ================= FILTER GROUP ================= */

.filter-group {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* ================= DROPDOWN ================= */

.filter-dropdown {
  position:relative;
}

.dropdown-menu {
  position:absolute;
  top:110%;
  left:0;
  display:none;
  flex-direction:column;
  gap:6px;
  min-width:160px;
  padding:8px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,.4);
  z-index:1200;
}

.dropdown-menu.open {
  display:flex;
}

.dropdown-option {
  background:transparent;
  border:none;
  text-align:left;
  padding:6px 8px;
  border-radius:8px;
  cursor:pointer;
}

.dropdown-option:hover {
  background:rgba(179,71,107,.15);
}

.filter-results {
  font-size:13px;
  opacity:.7;
}

.dropdown-option.active {
  background: var(--accent);
  color: #fff;
}


/* =========================================================
   MOBILE ADJUSTMENTS
========================================================= */

@media (max-width:768px){

  .splash-section-title::after{
    content:" • Top " attr(data-count);
    opacity:.6;
    font-size:14px;
  }

  .dashboard-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .watch-state-filters {
    justify-content: center;
  }

  .status-filter-wrapper {
    align-self: center;
  }

  .menu-toggle{
    display:block;
  }

  .toolbar{
    display:none;
    flex-direction:column;
  }

  .toolbar.open{
    display:flex;
  }

  .filters{
    flex-direction:column;
  }

  /* show modal mobile handled by @media block in modal section */
  .watch-state-filters {
  padding-bottom: 2px;
}

}


/* =========================================================
   PUBLIC HERO
========================================================= */

.public-hero{
  margin-bottom:24px;
}

.public-hero h2{
  margin-bottom:6px;
}

.public-hero p{
  opacity:.7;
}


/* =========================================================
   PUBLIC NOTICE
========================================================= */


/* =========================================================
   MODAL CORE (CRITICAL — DO NOT REMOVE)
========================================================= */

.modal{
  position:fixed;
  inset:0;

  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow-y:auto;
  padding: 20px 0;

  background:rgba(0,0,0,.65);
  backdrop-filter:blur(8px);

  opacity:0;
  pointer-events:none;

  transition:opacity .25s ease;
  z-index:2000;
}

.modal.open{
  opacity:1;
  pointer-events:auto;
}

/* show modal always renders on top of other modals */
#showModal.open {
  z-index: 3000;
}

/* push notification modal must appear above the show modal */
#pushNotifModal.open {
  z-index: 3500;
}

/* snapshot opens on top of community modal */
#profileSnapshotModal.open {
  z-index: 2500;
}

/* login modal always on top of everything including show modal */
#loginModal.open {
  z-index: 4000;
}

/* modalBody is the scrollable area — X stays fixed above it */
#modalBody {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  padding: 0;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100dvh - 120px); /* leaves room for header + padding */
}

/* other modal-content variants still need padding since they don't use this pattern */
.sub-modal-content,
.user-menu-content,
.recommend-modal-content,
.profile-snapshot-content {
  padding: 28px;
  overflow-y: auto;
}

/* X — absolute inside modal-content, modal-content uses flex so body scrolls not header */
.show-modal-close {
  position: absolute;
  top: 16px;
  right: 12px;
  z-index: 3010;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.show-modal-close:hover {
  opacity: 1;
  transform: scale(1.08);
}

@media (max-width: 540px) {
  .show-modal-close {
    width: 32px;
    height: 32px;
    font-size: 14px;
    top: 12px;
    right: 12px;
  }
}

/* =========================================================
   MODAL HELPERS
========================================================= */

.modal-small{ max-width:420px; }
.modal-center{ text-align:center; }


.modal-actions{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:24px;
  margin-bottom:8px;
}

.modal-close{
  position:absolute;
  top:16px;
  right:16px;

  width:40px;
  height:40px;

  box-shadow:0 4px 12px rgba(0,0,0,.3);
  border: 1px solid var(--border);

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:16px;
  font-weight:600;

  border-radius:50%;
  cursor:pointer;

  background:rgba(255,255,255,.06);
  opacity: 0.75;

  transition:
    background .2s ease,
    transform .15s ease,
    opacity .2s ease;

  opacity:.8;
}

.modal-close:hover{
  background:rgba(255,255,255,.12);
  transform:scale(1.08);
  opacity:1;
}


/* =========================================================
   LOGIN MODAL CONTENT
========================================================= */

.login-modal-content{
  max-width:400px;
  width:100%;
  text-align:center;
  padding: 28px 32px 24px !important;
  overflow-x:hidden;
  box-sizing: border-box;
}

.login-modal-content h2 {
  margin-bottom: 16px;
}

.login-modal-content input{
  width:100%;
  margin-bottom:12px;
  box-sizing: border-box;
}

.login-modal-content button{
  width: calc(100% - 0px);
  margin-bottom:10px;
  box-sizing: border-box;
}

/* ensure pw-input-wrap also respects padding */
.login-modal-content .pw-input-wrap {
  width: 100%;
  box-sizing: border-box;
}

/* sign in / sign up tabs */
.login-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.login-tab {
  flex: 1;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: none;
  color: var(--text);
  opacity: 0.45;
  cursor: pointer;
  transition: all 0.15s ease;
  border-radius: 8px;
}

.login-tab.active {
  background: var(--accent);
  color: #fff;
  opacity: 1;
}

.login-tab:hover:not(.active) {
  opacity: 0.7;
  background: rgba(255,255,255,0.06);
  transform: none;
  filter: none;
}

/* text-only link button (forgot password / back) */
.login-text-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  opacity: 0.7;
  padding: 0;
  margin-bottom: 10px;
  transition: opacity 0.15s ease;
}

.login-text-btn:hover {
  opacity: 1;
  transform: none;
  filter: none;
}

.login-subtext{
  opacity:.7;
  font-size:14px;
  margin-bottom:16px;
}

.login-slow-note {
  font-size: 12px;
  opacity: 0.55;
  margin: 4px 0 16px;
  text-align: center;
}

/* login divider */
.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
  color: var(--text);
  opacity: 0.35;
  font-size: 12px;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* existing user notice */
.login-existing-notice {
  font-size: 11px;
  line-height: 1.5;
  opacity: 0.6;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0;
  text-align: left;
}

/* password input with show/hide toggle */
.pw-input-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 12px;
}

.pw-input-wrap .sub-modal-input,
.pw-input-wrap input {
  width: 100%;
  padding-right: 42px; /* room for toggle btn */
  margin-bottom: 0;
  box-sizing: border-box;
}

.pw-show-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  opacity: 0.5;
  padding: 0;
  width: auto !important;
  margin: 0 !important;
  line-height: 1;
  transition: opacity 0.15s ease;
}

.pw-show-btn:hover {
  opacity: 1;
  transform: translateY(-50%);
  filter: none;
}

/* password strength indicator */
.password-strength {
  font-size: 11px;
  text-align: left;
  margin: -6px 0 8px;
  min-height: 16px;
  transition: color 0.2s ease;
}

.pw-weak   { color: #e74c3c; }
.pw-fair   { color: #e67e22; }
.pw-good   { color: #f1c40f; }
.pw-strong { color: #2ecc71; }

.login-status{
  margin-top:10px;
  font-size:13px;
  opacity:.8;
  min-height: 18px;
}

/* ================= ADD MODAL ================= */

.add-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.add-modal.hidden {
  display: none;
}

.add-modal-content {
  background: var(--card-bg, #1c1c1c);
  padding: 24px;
  border-radius: 12px;
  width: 280px;
  text-align: center;
  animation: fadeIn .2s ease;
}

.add-modal-content h3 {
  margin-bottom: 18px;
}

.add-option {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease;
}

.add-option:hover {
  transform: scale(1.05);
}

.add-cancel {
  width: 100%;
  padding: 8px;
  border: none;
  background: transparent;
  color: #aaa;
  cursor: pointer;
}

.splash-add-btn.added {
  background: var(--accent);
  opacity: 0.9;
  cursor: default;
}


.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  padding: 14px 22px;
  border-radius: 10px;
  font-size: 14px;
  letter-spacing: 0.4px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-8px);
}

#addListModal {
  transition: opacity 0.15s ease, transform 0.15s ease;
}

#addListModal.closing {
  opacity: 0;
  transform: scale(0.95);
}


/* =========================================================
   MOBILE EMAIL WRAP FIX
========================================================= */

@media (max-width:600px){

  .user-placeholder{
    font-size:13px;
    word-break:break-all;
    overflow-wrap:anywhere;
  }

  .login-text{
    font-size:13px;
    overflow-wrap:anywhere;
    word-break:break-word;
    min-width:0;
  }
}

/* =========================================================
   SHOW CARDS
========================================================= */

.show-card{
  display:flex;
  width:100%;
  gap:14px;
  padding:14px;
  margin-bottom:12px;
  border-radius:16px;
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  box-sizing:border-box;
  overflow:visible;

  opacity:0;
  animation:cardReveal .35s ease forwards;

  transition:
    transform .22s ease,
    opacity .25s ease;
}

.show-card:hover,
.show-card:active {
  will-change: transform;
}

.show-card:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 0 1px var(--accent),
    0 12px 26px rgba(0,0,0,.55);
}

@keyframes cardReveal{
  to{ opacity:1; }
}


@keyframes pulseGlow{
  0%   { box-shadow: 0 0 0px var(--show-accent), 0 0 0 1px var(--show-accent); }
  50%  { box-shadow: 0 0 20px var(--show-accent), 0 0 0 1px var(--show-accent); }
  100% { box-shadow: 0 0 0px var(--show-accent), 0 0 0 1px var(--show-accent); }
}


.modal-episode.stacked{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.95rem;
}

.episode-indicator{
  margin-top: 6px;
  font-size: 0.85rem;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  transition: all 0.2s ease;
}


.show-card .episode-indicator.today{
  background: color-mix(in srgb, var(--show-accent) 30%, transparent);
  color: var(--text);
  font-weight: 600;
  border-left: 3px solid var(--show-accent);
}

.show-card .episode-indicator.upcoming{
  background: color-mix(in srgb, var(--show-accent) 20%, transparent);
  color: var(--text);
  border-left: 2px solid color-mix(in srgb, var(--show-accent) 60%, transparent);
}

.show-card .episode-indicator.recent{
  background: color-mix(in srgb, var(--show-accent) 15%, transparent);
  color: var(--text);
}

.show-card .episode-indicator.ended{
  opacity: 0.6;
}

/* Modal root */
#showModal{
  --modal-accent: var(--accent);
}

/* Title */
#showModal h2{
  color: var(--modal-accent);
}

/* Status badge */
#showModal .status-badge{
  background: color-mix(in srgb, var(--modal-accent) 20%, transparent);
  color: var(--modal-accent);
}

/* Watch toggle */
#showModal .watch-toggle{
  background: color-mix(in srgb, var(--modal-accent) 15%, transparent);
}

/* Episode lines */
#showModal .episode-line.latest,
#showModal .episode-line.today{
  background: color-mix(in srgb, var(--modal-accent) 20%, transparent);
  color: var(--text);
  border-left: 3px solid var(--modal-accent);
}

#showModal .episode-line.next{
  background: color-mix(in srgb, var(--modal-accent) 12%, transparent);
  color: var(--text);
  border-left: 3px solid color-mix(in srgb, var(--modal-accent) 60%, transparent);
}

/* IMDb link */
#showModal .modal-imdb a{
  color: var(--modal-accent);
}

/* Buttons */
#showModal .primary-btn{
  background: var(--modal-accent);
  border-color: var(--modal-accent);
}


.episode-line{
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  line-height: 1.4;
}

.episode-line.latest{
  background: rgba(255,140,0,0.15);
  color: #ffb347;
}

.episode-line.next{
  background: rgba(58,166,255,0.15);
  color: #6ec6ff;
}

.episode-line.ended{
  background: rgba(255,255,255,0.08);
}

.episode-line.status{
  background: rgba(255,255,255,0.08);
}


/* =========================================================
   SHOW CONTENT LAYOUT
========================================================= */

.poster{
  width:75px;
  height:110px;
  border-radius:10px;
  background:#222 center/cover no-repeat;
  flex-shrink:0;
}

.show-content{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.show-name{
  font-weight:600;
  font-size:16px;
  line-height:1.3;
  /* leave room for the card action buttons in top-right */
  padding-right: 72px;
  word-break: break-word;
}

.show-meta{
  font-size:14px;
  opacity:.9;
}

.watch-on{
  font-size:13px;
}


/* =========================================================
   REMOVE BUTTON
========================================================= */

.remove-btn{
  position:absolute;
  top:10px;
  right:10px;

  width:28px;
  height:28px;

  border-radius:50%;
  border: 1px solid var(--border);

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:13px;
  color:var(--text);
  background:rgba(255,255,255,.06);
  opacity: 0.75;

  cursor:pointer;
  z-index:4;

  transition: all .2s ease;
}

/* prevent global button hover lift */
.remove-btn:hover,
.remove-btn:focus{
  transform: none;
  filter: none;
  opacity: 1;
  background: rgba(231,76,60,0.8);
  border-color: rgba(231,76,60,0.6);
  color: #fff;
}


/* =========================================================
   DRAG + REORDER MODE
========================================================= */

.drag-handle{
  cursor:grab;
  padding:6px 10px;
  opacity:.6;
  user-select:none;
  font-size:18px;
  flex-shrink:0;
  touch-action:none;
}

body.reorder-mode .drag-handle{
  display:block;
}

body:not(.reorder-mode) .drag-handle{
  display:none;
}

body.dragging{
  overflow:hidden;
  touch-action:none;
}

.show-card.dragging{
  opacity:.85;
  transform:scale(1.02);
  box-shadow:
    0 0 0 2px var(--accent),
    0 20px 40px rgba(0,0,0,.6);
}


/* =========================================================
   WATCH TOGGLE
========================================================= */

.watch-toggle{
  cursor:pointer;
  user-select:none;
  transition:.2s ease;
}

.watch-toggle:hover{
  transform:translateY(-1px);
  filter:brightness(1.15);
}

.badge.watch-toggle{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.5);
  text-transform: none;
  font-size: 10px !important;
  padding: 2px 7px !important;
  letter-spacing: 0.02em;
}

.badge.watch-toggle.watching{
  background: rgba(243,156,18,0.15);
  border: 1px solid rgba(243,156,18,0.4);
  color: #f39c12;
}

.badge.watch-toggle.not-watching{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.35);
}

/* Manga reading states */
.badge.watch-toggle.reading{
  background: rgba(52,152,219,0.15);
  border: 1px solid rgba(52,152,219,0.4);
  color: #3498db;
}

.badge.watch-toggle.plan-to-read{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.35);
}

/* Card with episodes quick-row needs bottom padding to clear the strip */
.show-card.has-ep-row {
  padding-bottom: 34px;
}

/* =========================================================
   EPISODES QUICK-ACCESS ROW
========================================================= */

.card-ep-row {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 7px 14px;
  background: rgba(255,255,255,0.04);
  border: none;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-radius: 0 0 16px 16px;
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  z-index: 2;
}

.card-ep-row:hover,
.card-ep-row:focus {
  background: rgba(255,255,255,0.08);
  color: var(--text);
  transform: none;
  filter: none;
}

.card-ep-row-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.card-ep-row-label {
  flex: 1;
}

.card-ep-row-arrow {
  font-size: 16px;
  opacity: 0.4;
  line-height: 1;
}

.card-ep-hint {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
/* Episode hint loading state — shown while prefetch is in flight */
.card-ep-hint--loading {
  display: inline-block;
  width: 80px;
  height: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.07);
  animation: shimmer 1.4s ease-in-out infinite;
  vertical-align: middle;
}

.grid-ep-hint--loading {
  display: inline-block;
  width: 52px;
  height: 12px;
  border-radius: 20px;
  background: rgba(255,255,255,0.07);
  animation: shimmer 1.4s ease-in-out infinite;
  vertical-align: middle;
}


.card-ep-hint--caught {
  background: rgba(46, 213, 115, 0.12);
  color: #2ed573;
}

.card-ep-hint--new {
  background: rgba(243, 156, 18, 0.15);
  color: #f39c12;
}

.card-ep-hint--start {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.4);
  font-style: italic;
  font-weight: 400;
}


/* =========================================================
   BADGES
========================================================= */

.badges{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.badge{
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
}

/* special badges */
.badge.production{ background:#6c5ce7; color:#fff; }
.badge.anime{ display:none; } /* removed */

/* media type badges */
.media-type-badge {
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.badge-tv {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.badge-movie {
  background: rgba(255, 165, 0, 0.12);
  color: #f5a623;
  border: 1px solid rgba(255, 165, 0, 0.3);
}

.badge-manga {
  background: rgba(160, 80, 220, 0.12);
  color: #b06ee0;
  border: 1px solid rgba(160, 80, 220, 0.3);
}


/* clean pill style for status badges — matches media type badge */
.badge-status-pill {
  font-size: 10px !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  text-transform: none !important;
}

/* status badges — bordered pill style matching Show/Movie badges */
.badge.airing     { background: rgba(46,204,113,0.12);  color: #2ecc71; border: 1px solid rgba(46,204,113,0.3); }
.badge.renewed    { background: rgba(52,152,219,0.12);  color: #3498db; border: 1px solid rgba(52,152,219,0.3); }
.badge.tbd        { background: rgba(155,89,182,0.12);  color: #9b59b6; border: 1px solid rgba(155,89,182,0.3); }
.badge.ended      { background: rgba(231,76,60,0.12);   color: #e74c3c; border: 1px solid rgba(231,76,60,0.3); }
.badge.new        { background: rgba(52,152,219,0.12);  color: #3498db; border: 1px solid rgba(52,152,219,0.3); }
.badge.released   { background: rgba(149,165,166,0.12); color: #95a5a6; border: 1px solid rgba(149,165,166,0.3); }
.badge.miniseries { background: rgba(155,89,182,0.12);  color: #9b59b6; border: 1px solid rgba(155,89,182,0.3); }
.badge.continuing { background: rgba(46,204,113,0.12);  color: #2ecc71; border: 1px solid rgba(46,204,113,0.3); }

.badge.updated{
  background:var(--accent);
  color:#fff;
  animation:fadePulse 2s ease-in-out infinite;
}

@keyframes fadePulse{
  0%{ opacity:1; }
  50%{ opacity:.6; }
  100%{ opacity:1; }
}


/* =========================================================
   STREAMING PLATFORMS
========================================================= */

.platform{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:4px 10px;
  border-radius:999px;

  font-size:11px;
  font-weight:600;
  letter-spacing:.3px;
  line-height:1.2;

  border:1px solid var(--border);
  background:rgba(255,255,255,.08);

  white-space:nowrap;
}

.platform.netflix{
  background:#e50914;
  color:#fff;
  border-color:#b20710;
}

.platform.disney{ background:#0b3c5d; color:#fff; }
.platform.prime{ background:#1a98ff; color:#fff; }
.platform.apple{ background:#111; color:#fff; }
.platform.max{ background:#3a1aff; color:#fff; }
.platform.tbd{ background:#555; color:#eee; }


/* =========================================================
   SHOW MODAL — SECTIONED LAYOUT (matches user menu)
========================================================= */

/* override modal-content padding — sections handle their own */
#showModal .modal-content {
  padding: 0;
  max-width: 580px;
}

/* ---- SECTION 1: header (poster + title) ---- */
.ms-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 24px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  border-radius: 22px 22px 0 0;
}

.ms-poster-wrap { flex-shrink: 0; }

.ms-poster {
  width: 110px;
  height: 160px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  background-color: rgba(255,255,255,0.04);
}

.ms-title-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* reserve space for 2 corner buttons (86px) + X (40px) + gaps - header padding */
  padding-right: 130px;
  overflow: hidden;
}

/* Manga modal only has 1 corner button — less padding needed */
.manga-modal-context .ms-title-block {
  padding-right: 80px;
}

/* On mobile the header stacks vertically so padding-right is irrelevant — zero it out */
@media (max-width: 540px) {
  .manga-modal-context .ms-title-block {
    padding-right: 0;
  }
}

.ms-title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.ms-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.modal-rating-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  background: rgba(255,200,0,0.1);
  border: 1px solid rgba(255,200,0,0.25);
  color: #ffc800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.modal-vote-count {
  font-weight: 400;
  opacity: 0.6;
  font-size: 10px;
}

.ms-episode {
  display: flex;
  align-items: center;
}

.modal-all-seen-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: #2ecc71;
  background: rgba(46,204,113,0.12);
  border: 1px solid rgba(46,204,113,0.3);
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}

.ms-quick-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---- SECTIONS (overview / providers / watch / lists) ---- */
.ms-section {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}

.ms-section:last-child {
  border-bottom: none;
  border-radius: 0 0 22px 22px;
}

.ms-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 10px;
}

.ms-overview {
  font-size: 13px;
  line-height: 1.65;
  opacity: 0.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ms-providers-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.providers-loading {
  font-size: 12px;
  opacity: 0.35;
}

.modal-watch-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.modal-watch-badge.watching {
  background: rgba(243,156,18,0.15);
  border: 1px solid rgba(243,156,18,0.4);
  color: #f39c12;
}

.modal-watch-badge.not-watching {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text);
  opacity: 0.65;
}

.modal-watch-badge.reading {
  background: rgba(52,152,219,0.15);
  border: 1px solid rgba(52,152,219,0.4);
  color: #3498db;
}

.modal-watch-badge.plan-to-read {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text);
  opacity: 0.65;
}

.modal-watch-badge:hover {
  opacity: 1;
  filter: brightness(1.1);
}

/* lists section */
.ms-lists-section {
  background: rgba(255,255,255,0.01);
}

.ms-list-btns {
  display: flex;
  gap: 8px;
}

.ms-picks-used {
  font-size: 11px;
  opacity: 0.35;
  margin-top: 8px;
}

.ms-login-prompt {
  font-size: 13px;
  opacity: 0.5;
  margin: 0 0 12px;
}

/* ---- unified modal button system ---- */
.modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-decoration: none;
}

.modal-btn:hover { transform: none; filter: brightness(1.1); }
.modal-btn:disabled { opacity: 0.4; cursor: default; filter: none; }

.modal-btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  flex: 1;
}

.modal-btn-danger {
  background: rgba(231,76,60,0.1);
  color: #e74c3c;
  border-color: rgba(231,76,60,0.3);
  flex: 1;
}
.modal-btn-danger:hover { background: rgba(231,76,60,0.2); }

.modal-btn-ghost {
  background: rgba(255,255,255,0.05);
  color: var(--text);
  border-color: var(--border);
}
.modal-btn-ghost:hover { background: rgba(255,255,255,0.1); }

/* ---- corner icon buttons (pick + recommend) ---- */
.modal-corner-btns {
  position: absolute;
  top: 16px;
  right: 58px;  /* sits left of .modal-close at right:16px + 40px width */
  display: flex;
  gap: 6px;
  z-index: 10;
}

/* show modal padding on mobile */
@media (max-width: 540px) {
  #showModal .modal-content {
    padding-top: 0;
  }
}

.modal-corner-btn {
  width: 40px;  /* match modal-close size */
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  opacity: 0.75;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

.modal-corner-btn:hover {
  opacity: 1;
  background: rgba(255,255,255,0.12);
  transform: scale(1.08);
  filter: none;
}

.modal-corner-btn:disabled { opacity: 0.25; cursor: default; transform: none; }

.modal-corner-btn.modal-pick-btn.is-featured {
  background: rgba(255,200,0,0.15);
  border-color: rgba(255,200,0,0.4);
  color: #ffc800;
  opacity: 1;
}

/* ---- mobile ---- */
@media (max-width: 540px) {
  .ms-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
  }

  /* pin corner buttons to top-right of modal-content on mobile — left of X */
  .modal-corner-btns {
    top: 12px;
    right: 50px; /* clear the X at right:12px */
  }

  /* shrink corner buttons to match X on mobile */
  .modal-corner-btn {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  /* push poster down to clear the button row */
  .ms-header .ms-poster-wrap {
    margin-top: 12px;
  }

  .ms-title-block {
    padding-right: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    align-items: center;  /* centre all flex children on mobile */
    text-align: center;
  }
  .ms-title { font-size: 17px; word-break: break-word; }
  .ms-meta-row { justify-content: center; }
  .ms-episode { text-align: center; }
  .ms-quick-btns { justify-content: center; flex-wrap: wrap; }
  .modal-watch-badge { align-self: center; }
  .ms-overview { word-break: break-word; overflow-wrap: anywhere; }
  .ms-meta-row { justify-content: center; flex-wrap: wrap; }
  .ms-episode { justify-content: center; }
  .ms-quick-btns { justify-content: center; flex-wrap: wrap; }
  .ms-list-btns { flex-direction: column; }
  .ms-section { overflow: hidden; }
  .modal-btn-primary, .modal-btn-danger { flex: unset; width: 100%; }
}

/* =========================================================
   AVATAR UPLOAD MODAL
========================================================= */

.avatar-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}

.avatar-preview {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 20%, var(--card));
  border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  font-size: 32px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-upload-label {
  padding: 8px 20px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.avatar-upload-label:hover {
  border-color: var(--accent);
  background: rgba(255,255,255,0.08);
}

/* has-avatar: image fills the circle */
.umenu-avatar.has-avatar,
.profile-avatar.has-avatar,
.hero-avatar.has-avatar,
.snapshot-avatar.has-avatar {
  background: none !important;
  border: none !important;
  padding: 0;
  overflow: hidden;
}

/* =========================================================
   SPLASH INTRO (logged-out hero)
========================================================= */

.splash-intro {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* tagline block */
.splash-tagline-block {
  text-align: center;
  padding: 8px 0 4px;
}

.splash-logo-row {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  opacity: 0.9;
}

.splash-logo-text {
  font-size: 22px;
}

.splash-headline {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

.splash-sub {
  font-size: 15px;
  opacity: 0.65;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto;
}

/* feature cards grid */
.splash-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

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

@media (max-width: 380px) {
  .splash-features {
    grid-template-columns: 1fr;
  }
}

.splash-feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.splash-feature-card:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  transform: translateY(-2px);
}

.splash-feature-icon {
  font-size: 22px;
  line-height: 1;
}

.splash-feature-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.splash-feature-desc {
  font-size: 12px;
  opacity: 0.6;
  line-height: 1.5;
}

/* how it works card */
.splash-steps-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 20px 16px;
}

.splash-steps-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.4;
  margin-bottom: 14px;
}

.splash-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.splash-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  opacity: 0.8;
  line-height: 1.5;
}

.splash-step a {
  color: var(--accent);
  text-decoration: none;
}

.splash-step-num {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* splash profile chips */
.splash-profiles-row {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.splash-profiles-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.35;
}

.splash-profiles-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.splash-profile-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
  font-size: 12px;
  text-align: left;
}

.splash-profile-chip:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  transform: translateY(-1px);
}

.splash-profile-chip-avatar {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 25%, var(--card));
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.splash-profile-chip-name {
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
}

.splash-profile-chip-count {
  font-size: 10px;
  opacity: 0.5;
  line-height: 1.2;
}

.splash-profile-chip-skeleton {
  width: 130px;
  height: 42px;
  border-radius: 24px;
  background: rgba(255,255,255,0.05);
  animation: shimmer 1.4s ease-in-out infinite;
}

/* CTA button */
.splash-cta-btn {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 14px;
  letter-spacing: 0.01em;
}

/* =========================================================
   FOOTER & FEEDBACK
========================================================= */

.site-footer {
  text-align: center;
  padding: 16px 16px 24px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0.85;
}

/* Exact same style as .footer-credits-btn — proven to work across all themes */
.footer-appeal-link {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.footer-appeal-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.footer-feedback-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
  letter-spacing: 0.04em;
}

.footer-feedback-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* feedback modal tabs */
.feedback-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.feedback-tab {
  flex: 1;
  padding: 10px 8px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  opacity: 0.5;
  transition: all 0.15s ease;
  margin-bottom: -1px;
}

.feedback-tab:hover {
  opacity: 0.8;
  transform: none;
  filter: none;
}

.feedback-tab.is-active {
  opacity: 1;
  border-bottom-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* panels */
.feedback-panel {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.feedback-panel.is-active {
  display: flex;
}

.feedback-textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-size: 13px;
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.feedback-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.feedback-char {
  font-size: 11px;
  opacity: 0.35;
  text-align: right;
  margin-top: -4px;
}

/* hero picks styles moved to HERO DASHBOARD section above */

/* ---- legacy selectors kept for compatibility ---- */
.modal-header  { display: contents; }
.modal-info    { display: contents; }
.modal-badges  { display: contents; }
.modal-overview { display: contents; }
.modal-watch    { display: contents; }
.modal-season   { display: contents; }

/* .modal-actions intentionally NOT display:contents — buttons must be clickable */

/* =========================================================
   LIGHT THEME OVERRIDES (porcelainRed)
========================================================= */

[data-theme-mode="light"] .modal-content {
  border-top-color: var(--accent);
}

/* flip rgba white overlays to rgba black for light bg */
[data-theme-mode="light"] .ms-header,
[data-theme-mode="light"] 

[data-theme-mode="light"] .modal-btn-ghost,
[data-theme-mode="light"] .umenu-action-btn,
[data-theme-mode="light"] .modal-corner-btn {
  background: rgba(0,0,0,0.04);
}

[data-theme-mode="light"] .modal-btn-ghost:hover,
[data-theme-mode="light"] .umenu-action-btn:hover,
[data-theme-mode="light"] .modal-corner-btn:hover {
  background: rgba(0,0,0,0.08);
}

[data-theme-mode="light"] .show-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

[data-theme-mode="light"] .show-card:hover {
  box-shadow: 0 0 0 1px var(--accent), 0 8px 20px rgba(0,0,0,0.15);
}

[data-theme-mode="light"] .modal-content {
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

[data-theme-mode="light"] .hero-compact {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

[data-theme-mode="light"] .badge-chip {
  border-color: rgba(0,0,0,0.15);
}

[data-theme-mode="light"] .modal-btn-danger {
  background: rgba(231,76,60,0.08);
}

[data-theme-mode="light"] .umenu-copy-link-btn {
  border-color: rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.02);
}

/* theme grid in user menu */
.umenu-theme-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 4px;
}

/* last button if orphaned — don't stretch across full row */
.umenu-theme-btn:last-child:nth-child(4n+1):not(.umenu-theme-btn-rose):not(.umenu-theme-btn-half) {
  grid-column: span 4;
}
.umenu-theme-btn:last-child:nth-child(4n+2):not(.umenu-theme-btn-rose):not(.umenu-theme-btn-half) {
  grid-column: 2 / span 3;
}
.umenu-theme-btn:last-child:nth-child(4n+3):not(.umenu-theme-btn-rose):not(.umenu-theme-btn-half) {
  grid-column: 3 / span 2;
}

.umenu-theme-btn {
  padding: 6px 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  box-sizing: border-box;
}

.umenu-theme-btn:hover {
  border-color: var(--accent);
  background: rgba(255,255,255,0.07);
  transform: none;
  filter: none;
}

.umenu-theme-btn.is-active {
  border-color: var(--accent);
  background: rgba(255,255,255,0.08);
  color: var(--accent);
  font-weight: 600;
}

/* Rose — full width featured default theme button */
.umenu-theme-btn-rose {
  grid-column: 1 / -1;
  border-style: dashed;
  opacity: 0.8;
}

.umenu-theme-btn-rose.is-active {
  border-style: solid;
  opacity: 1;
}

/* Light / Dark mode — two equal buttons spanning the full row */
.umenu-theme-btn-half {
  grid-column: span 2;
}

/* Onboarding section sub-labels */
.onb-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted, #888);
  align-self: flex-start;
  width: 100%;
}

/* Font size picker */
.onb-size-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.onb-size-btn {
  flex: 1;
  padding: 10px 4px;
  border-radius: 10px;
  border: 1px solid var(--border, #2A2D33);
  background: rgba(255,255,255,0.03);
  color: var(--text, #F4EDEE);
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  text-align: center;
}

.onb-size-btn:hover {
  border-color: var(--accent, #B3476B);
  background: rgba(255,255,255,0.07);
  transform: none;
  filter: none;
}

.onb-size-active {
  border-color: var(--accent, #B3476B) !important;
  background: rgba(255,255,255,0.08) !important;
  color: var(--accent, #B3476B) !important;
}

.umenu-share-profile-btn {
  border-color: rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.02);
}

[data-theme-mode="light"] .snapshot-section,
[data-theme-mode="light"] .ms-section {
  background: transparent;
}

/* light theme readability fixes */
[data-theme-mode="light"] .list-hint {
  background: rgba(0,0,0,0.04);
  color: var(--text);
}

[data-theme-mode="light"] .picks-hint {
  background: rgba(0,0,0,0.04);
}

[data-theme-mode="light"] 

[data-theme-mode="light"] .hero-stat strong {
  color: var(--accent);
}

[data-theme-mode="light"] 

[data-theme-mode="light"] 

[data-theme-mode="light"] .show-name {
  color: var(--accent);
}

[data-theme-mode="light"] .drag-handle {
  color: var(--text);
  background: rgba(0,0,0,0.05);
}

[data-theme-mode="light"] .card-move-top-btn {
  background: rgba(0,0,0,0.05);
  color: var(--accent);
}

[data-theme-mode="light"] .card-position-badge {
  background: rgba(0,0,0,0.06);
  color: var(--text);
}

[data-theme-mode="light"] 

[data-theme-mode="light"] .list-card-body {
  background: var(--card);
}

[data-theme-mode="light"] .hero-pick-poster {
  background-color: rgba(0,0,0,0.04);
  transform: translateZ(0);
  will-change: transform;
}

[data-theme-mode="light"] .search-recent-poster {
  background-color: rgba(0,0,0,0.04);
}

[data-theme-mode="light"] .search-panel-label {
  color: var(--text);
}

[data-theme-mode="light"] .community-user-meta {
  color: var(--text);
}

/* light theme: hint backgrounds and gold text */
[data-theme-mode="light"] .picks-hint {
  background: rgba(0,0,0,0.06);
  color: #7a5e00;
}

[data-theme-mode="light"] .recommend-hint {
  background: rgba(0,0,0,0.06);
  color: var(--accent);
}

[data-theme-mode="light"] .list-hint {
  background: rgba(0,0,0,0.06);
  color: var(--text);
}

/* light theme: star buttons — use darker gold */
[data-theme-mode="light"] .card-star-btn {
  color: #8a7030;
  border-color: rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.04);
}

[data-theme-mode="light"] .card-star-btn.is-featured,
[data-theme-mode="light"] .card-star-btn.is-featured:hover {
  color: #7a5500;
  border-color: rgba(140,100,0,0.5);
  background: rgba(180,130,0,0.12);
  text-shadow: none;
}

[data-theme-mode="light"] .card-star-btn:hover {
  color: #7a5500;
  border-color: rgba(140,100,0,0.4);
  background: rgba(180,130,0,0.08);
  text-shadow: none;
}

/* light theme: modal pick button */
[data-theme-mode="light"] .modal-pick-btn {
  color: #7a5500;
  border-color: rgba(140,100,0,0.35);
  background: rgba(180,130,0,0.08);
}

[data-theme-mode="light"] .modal-pick-btn.is-featured {
  color: #5a3e00;
  border-color: rgba(140,100,0,0.6);
  background: rgba(180,130,0,0.15);
}

/* light theme: modal corner pick btn */
[data-theme-mode="light"] .modal-corner-btn.modal-pick-btn.is-featured {
  background: rgba(180,130,0,0.15);
  border-color: rgba(140,100,0,0.5);
  color: #7a5500;
}

/* light theme: watching badge — lime green on light blue is unreadable */
[data-theme-mode="light"] .modal-watch-badge.watching {
  background: rgba(0,130,60,0.1);
  border-color: rgba(0,130,60,0.35);
  color: #006830;
}

[data-theme-mode="light"] .modal-watch-badge.not-watching {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.15);
  color: var(--text);
  opacity: 0.8;
}

/* light theme: card watch toggle badge */
[data-theme-mode="light"] .badge.watch-toggle.watching {
  background: rgba(0,130,60,0.12);
  color: #006830;
  border-color: rgba(0,130,60,0.3);
}

[data-theme-mode="light"] .badge.watch-toggle.not-watching {
  background: rgba(0,0,0,0.06);
  color: var(--text);
}

/* light theme modal fixes */
[data-theme-mode="light"] .ms-title {
  padding-right: 110px; /* clear the corner buttons */
}

[data-theme-mode="light"] .badge {
  color: #fff;
}

/* status badges on light — keep saturated and readable */
[data-theme-mode="light"] .badge.airing,
[data-theme-mode="light"] .badge.renewed,
[data-theme-mode="light"] .badge.tbd,
[data-theme-mode="light"] .badge.ended,
[data-theme-mode="light"] .badge.production,
[data-theme-mode="light"] .badge.miniseries,
[data-theme-mode="light"] .badge.continuing {
  filter: brightness(1.15) saturate(1.2);
  color: #fff;
}

/* rating pill on light — gold on white is invisible */
[data-theme-mode="light"] .modal-rating-pill {
  background: rgba(180,140,0,0.12);
  border: 1px solid rgba(180,140,0,0.3);
  color: #7a5e00;
}

[data-theme-mode="light"] .modal {
  background: rgba(0,0,0,0.4);
}

/* =========================================================
   MODAL CONTENTS
========================================================= */
.modal-content{
  position:relative;

  width:92%;
  max-width:680px;
  max-height:none;

  /* flex column so X stays fixed at top, body scrolls */
  display:flex;
  flex-direction:column;
  overflow:hidden;

  background:var(--card); /* uses theme card color */
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  border:1px solid var(--border);
  border-radius:22px;
  padding:0;

  box-shadow:0 25px 60px rgba(0,0,0,.45);
  border-top:3px solid var(--accent);

  transform:translateY(15px) scale(.97);
  transition:transform .25s ease;
}
.modal-content a{
  color:var(--accent);
  text-decoration:none;
  font-weight:500;
}

.modal-content a:hover{
  opacity:.8;
}

.modal-content a:visited{
  color:var(--accent);
}


/* =========================================================
   SUB-MODAL
========================================================= */

.sub-modal .modal-content {
  max-width: 360px;
  width: 100%;
}

.sub-modal-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 24px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.sub-modal-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

.sub-modal-hint {
  font-size: 12px;
  opacity: 0.5;
  margin: 0;
  line-height: 1.5;
}

.sub-modal-input {
  width: 100%;
  border-radius: 10px;
  font-size: 14px;
  padding: 10px 14px;
  letter-spacing: 0.02em;
}

.sub-modal-status {
  font-size: 12px;
  opacity: 0.7;
  min-height: 16px;
}

.sub-modal-btn {
  width: 100%;
  border-radius: 12px;
  padding: 11px;
  font-size: 14px;
}

/* =========================================================
   ONBOARDING MODAL
========================================================= */

.onb-card {
  background: var(--card, #1A1C20);
  border: 1px solid var(--border, #2A2D33);
  border-radius: 20px;
  padding: 36px 32px 28px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  position: relative;
}

/* Progress dots */
.onb-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}

.onb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border, #2A2D33);
  transition: background 0.3s ease, transform 0.3s ease;
}

.onb-dot-active {
  background: var(--accent, #B3476B);
  transform: scale(1.25);
}

/* Steps */
.onb-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  animation: onbFadeIn 0.3s ease;
}

.onb-step-hidden {
  display: none;
}

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

.onb-icon {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 2px;
}

.onb-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text, #F4EDEE);
  margin: 0;
  letter-spacing: -0.02em;
}

.onb-hint {
  font-size: 13px;
  color: var(--muted, #888);
  margin: 0;
  line-height: 1.6;
  max-width: 320px;
}

/* Username input */
.onb-input {
  width: 100%;
  border-radius: 12px;
  font-size: 15px;
  padding: 11px 16px;
  letter-spacing: 0.02em;
  box-sizing: border-box;
  text-align: center;
}

.onb-status {
  font-size: 12px;
  min-height: 16px;
  color: var(--muted, #888);
}

/* Buttons */
.onb-btn-primary {
  width: 100%;
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  background: var(--accent, #B3476B);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.onb-btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.onb-btn-primary:not(:disabled):hover {
  opacity: 0.88;
  transform: none;
  filter: none;
}

.onb-btn-ghost {
  width: 100%;
  background: none;
  border: none;
  color: var(--muted, #888);
  font-size: 12px;
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s ease;
  margin-top: -6px;
}

.onb-btn-ghost:hover {
  color: var(--text, #F4EDEE);
  transform: none;
  filter: none;
}

/* Theme swatches */
.onb-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}

.onb-theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px 10px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: var(--sw-bg, #121315);
  color: var(--sw-text, #F4EDEE);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
  position: relative;
  overflow: hidden;
  transform: none;
  filter: none;
}

.onb-theme-swatch::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--sw-accent, #B3476B);
  border-radius: 0 0 10px 10px;
}

.onb-theme-swatch:hover {
  border-color: var(--sw-accent, #B3476B);
  transform: none;
  filter: none;
}

.onb-theme-active {
  border-color: var(--sw-accent, #B3476B) !important;
  box-shadow: 0 0 0 1px var(--sw-accent, #B3476B);
}

.onb-theme-active::before {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 10px;
  color: var(--sw-accent, #B3476B);
  font-weight: 800;
}

/* Feature list */
.onb-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  text-align: left;
}

.onb-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, #2A2D33);
  border-radius: 12px;
}

.onb-feature-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1.3;
}

.onb-feature div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.onb-feature strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #F4EDEE);
}

.onb-feature span {
  font-size: 12px;
  color: var(--muted, #888);
  line-height: 1.5;
}

/* =========================================================
   USER MENU ACTION BUTTONS
========================================================= */

.umenu-action-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.umenu-action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease;
}

.umenu-action-btn:hover {
  background: rgba(255,255,255,0.08);
  transform: none;
  filter: none;
}

.umenu-action-locked {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  opacity: 0.5;
  margin-left: auto;
  letter-spacing: 0.04em;
}

/* =========================================================
   NOTIFICATION DOT
========================================================= */

.user-avatar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* person icon inside avatar */
.user-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
}

.avatar-person-icon {
  width: 14px;
  height: 14px;
  opacity: 0.9;
  flex-shrink: 0;
}

.avatar-initial {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  /* when containing an avatar image, become a fixed circle */
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* when avatar image is present, fix size and hide the person icon */
.avatar-initial:has(img) {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
}

.avatar-initial:has(img) ~ .avatar-person-icon,
.avatar-initial:has(img) + .avatar-person-icon {
  display: none;
}

/* hide person icon when avatar-initial has an image — target parent */
.user-avatar:has(.avatar-initial img) .avatar-person-icon {
  display: none;
}

/* hide initial when logged out — just show icon */
.avatar-initial:empty {
  display: none;
}

.notif-dot {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e74c3c;
  border: 2.5px solid var(--bg);
  animation: notifPulse 1.6s ease-in-out infinite;
  z-index: 10;
}

.notif-dot.hidden {
  display: none;
}

/* ---- NOTIFICATION COUNT BADGE ---- */
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #e74c3c;
  border: 2px solid var(--bg);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: inherit;
  line-height: 14px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: notifPulse 2s ease-in-out infinite;
  z-index: 10;
  letter-spacing: -0.02em;
  pointer-events: none;
}

.notif-badge.hidden {
  display: none;
}

/* when count is just a dot (empty / 0 shown) show as circle */
.notif-badge:empty,
.notif-badge[data-count="0"] {
  min-width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 50%;
  top: 0px;
  right: 0px;
}

@keyframes notifPulse {
  0%   { box-shadow: 0 0 0 0 rgba(231,76,60,0.7); transform: scale(1); }
  50%  { box-shadow: 0 0 0 5px rgba(231,76,60,0); transform: scale(1.08); }
  100% { box-shadow: 0 0 0 0 rgba(231,76,60,0); transform: scale(1); }
}

.notif-dot-inline {
  display: inline-block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  background: #e74c3c;
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(231,76,60,0.6);
}

/* =========================================================
   USER MENU NOTIFICATION SECTION
========================================================= */

.umenu-notif-section {
  border-bottom: 1px solid var(--border);
  background: rgba(231,76,60,0.05);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.umenu-notif-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  opacity: 0.5;
}

.umenu-notif-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.6;
}

.umenu-notif-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.umenu-notif-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  cursor: default;
  transition: background 0.15s ease;
}

.umenu-notif-chip:hover {
  background: rgba(255,255,255,0.07);
}

.umenu-notif-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.umenu-notif-info {
  flex: 1;
  min-width: 0;
}

.umenu-notif-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.umenu-notif-sub {
  font-size: 11px;
  opacity: 0.45;
  margin-top: 1px;
}

.umenu-notif-time {
  font-size: 10px;
  opacity: 0.35;
  margin-top: 3px;
  letter-spacing: 0.02em;
}

.umenu-react-btn {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  flex-shrink: 0;
}
.umenu-react-btn:hover {
  background: rgba(255,255,255,0.1);
  transform: scale(1.12);
}
.umenu-react-btn:active {
  transform: scale(0.95);
}

.umenu-notif-load-more {
  width: 100%;
  margin-top: 6px;
  padding: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
  text-align: center;
}
.umenu-notif-load-more:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}

.umenu-notif-arrow {
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
  padding: 4px 6px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.umenu-notif-arrow:hover {
  background: rgba(255,255,255,0.08);
}

.umenu-notif-dismiss {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.5;
  padding: 0;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.umenu-notif-dismiss:hover {
  background: rgba(231,76,60,0.2);
  opacity: 1;
  transform: none;
  filter: none;
}

.umenu-badge-notif-section {
  background: rgba(200,168,75,0.05);
  border-color: rgba(200,168,75,0.15);
}

.umenu-badge-notif-section .umenu-notif-header {
  color: #c8a84b;
}

.umenu-badge-notif-section .notif-dot-inline {
  background: #c8a84b;
}

.umenu-badge-notif-section .umenu-notif-dismiss-all {
  background: rgba(200,168,75,0.08);
  color: #c8a84b;
  border-color: rgba(200,168,75,0.2);
}

.umenu-badge-notif-section .umenu-notif-dismiss-all:hover {
  background: rgba(200,168,75,0.18);
}

.umenu-notif-dismiss-all {
  width: 100%;
  margin-top: 4px;
  padding: 7px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(231,76,60,0.08);
  color: #e74c3c;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.umenu-notif-dismiss-all:hover {
  background: rgba(231,76,60,0.18);
  transform: none;
  filter: none;
}

/* =========================================================
   USER MENU MODAL
========================================================= */

.user-menu-content {
  max-width: 420px;
  width: 100%;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 85dvh;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.user-menu-content::-webkit-scrollbar {
  width: 4px;
}

.user-menu-content::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
}

/* webkit scrollbar thumb styled via ::-webkit-scrollbar-thumb (Chrome/Safari only) */
.user-menu-content::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 999px; }
.user-menu-content::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.umenu-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 24px 20px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border);
}

.umenu-avatar {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 30%, var(--card));
  border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}

.umenu-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.umenu-name {
  font-size: 16px;
  font-weight: 600;
}

.umenu-username {
  font-size: 13px;
  color: var(--accent);
  opacity: 0.9;
}

.umenu-email {
  font-size: 12px;
  opacity: 0.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.umenu-joined {
  font-size: 11px;
  opacity: 0.4;
  margin-top: 2px;
}

.umenu-section {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}

.umenu-section:last-child {
  border-bottom: none;
}

.umenu-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 12px;
}

.umenu-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.umenu-stat-block {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}

.umenu-stat-views {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  gap: 0;
}

.umenu-stat-views .umenu-stat-row {
  flex-direction: row;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
}

.umenu-view-profile-section {
  padding: 12px 24px;
}

/* share profile button in user menu */
.umenu-share-profile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 8px;
  opacity: 0.8;
}

.umenu-share-profile-btn:hover {
  border-color: var(--accent);
  background: rgba(255,255,255,0.06);
  opacity: 1;
  transform: none;
  filter: none;
}

.umenu-share-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.umenu-share-label {
  font-size: 11px;
  opacity: 0.5;
  margin-left: auto;
  font-weight: 400;
}

/* share profile modal */
.share-profile-modal-content {
  align-items: center;
  text-align: center;
}

.share-qr-wrap {
  padding: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#shareQrCode img,
#shareQrCode canvas {
  display: block;
  border-radius: 8px;
}

.share-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}

.share-link-text {
  flex: 1;
  font-size: 12px;
  opacity: 0.6;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-copy-btn {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 8px;
  flex-shrink: 0;
}

.umenu-copy-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px dashed rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 8px;
  letter-spacing: 0.01em;
  opacity: 0.8;
}

.umenu-copy-link-btn:hover {
  border-color: var(--accent);
  background: rgba(255,255,255,0.06);
  opacity: 1;
  transform: none;
  filter: none;
}

.umenu-copy-link-btn.copied {
  border-color: #2ecc71;
  background: rgba(46,204,113,0.08);
  color: #2ecc71;
  opacity: 1;
}

.umenu-copy-link-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.umenu-view-profile-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.umenu-view-profile-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.umenu-view-profile-btn:visited {
  color: var(--accent);
}

.umenu-view-profile-btn:hover {
  color: #fff;
}

.umenu-stat-title {
  font-size: 11px;
  opacity: 0.5;
  margin-bottom: 6px;
}

.umenu-stat-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 13px;
  font-weight: 500;
}

.umenu-username-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}

.umenu-input {
  flex: 1;
  border-radius: 10px;
  font-size: 13px;
  padding: 7px 12px;
}


.umenu-profile-link {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  opacity: 0.6;
  margin-top: 8px;
}

.umenu-link-text {
  font-weight: 500;
  opacity: 1;
  color: var(--accent);
}


.umenu-danger {
  padding: 16px 24px 20px;
}

.umenu-logout-btn {
  width: 100%;
  border-radius: 12px;
  padding: 10px;
  font-size: 14px;
}

/* =========================================================
   BADGES
========================================================= */

.badge-shelf {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  min-height: 36px; /* prevent collapse when empty/loading */
}

/* base chip */
/* badge skeleton chip — same size as real badge, shimmer animation */
.badge-chip-skeleton {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  flex-shrink: 0;
  animation: shimmer 1.4s ease-in-out infinite;
}

.badge-chip {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.badge-chip:hover {
  transform: scale(1.15);
}

.badge-icon {
  position: relative;
  z-index: 2;
  line-height: 1;
}

/* ---- COMMON ---- */
.badge-chip.tier-common {
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.15);
}

.badge-chip.tier-common:hover {
  box-shadow: 0 0 10px rgba(255,255,255,0.15);
}

/* ---- RARE ---- */
.badge-chip.tier-rare {
  background: rgba(180,100,255,0.12);
  border: 1.5px solid rgba(180,100,255,0.5);
  animation: rarePulse 2.5s ease-in-out infinite;
}

@keyframes rarePulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(180,100,255,0.4)); }
  50%       { filter: drop-shadow(0 0 8px rgba(180,100,255,0.8)) drop-shadow(0 0 14px rgba(180,100,255,0.35)); }
}

/* ---- ULTRA RARE ---- */
.badge-chip.tier-ultra-rare {
  background: rgba(0,200,255,0.1);
  border: 1.5px solid rgba(0,200,255,0.6);
  animation: glitchFlicker 3s infinite;
}

@keyframes glitchFlicker {
  0%,89%,91%,93%,100% {
    filter: drop-shadow(0 0 4px rgba(0,200,255,0.6));
    border-color: rgba(0,200,255,0.6);
    opacity: 1;
  }
  90% {
    filter: drop-shadow(4px 0 6px rgba(255,0,80,0.7)) drop-shadow(-4px 0 6px rgba(0,200,255,0.7));
    border-color: rgba(255,0,80,0.8);
    opacity: 0.85;
    transform: translateX(1.5px);
  }
  92% {
    filter: drop-shadow(-3px 0 6px rgba(255,0,80,0.6)) drop-shadow(3px 0 6px rgba(0,200,255,0.6));
    border-color: rgba(0,200,255,0.9);
    opacity: 0.9;
    transform: translateX(-1px);
  }
}

/* ---- LEGENDARY ---- */
.badge-chip.tier-legendary {
  background: linear-gradient(135deg, #1a1000, #2e1f00);
  border: 1.5px solid #c8a84b;
  animation: legendaryPulse 2s ease-in-out infinite;
}

@keyframes legendaryPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(200,168,75,0.5)) drop-shadow(0 0 8px rgba(200,168,75,0.2)); }
  50%       { filter: drop-shadow(0 0 8px rgba(200,168,75,0.9)) drop-shadow(0 0 18px rgba(200,168,75,0.5)); }
}

.badge-shimmer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,215,0,0.35) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 2.2s linear infinite;
  z-index: 1;
  pointer-events: none; /* don't intercept badge clicks */
}

@keyframes shimmerSweep {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

/* ── Pause non-critical animations during scroll for mobile perf ── */
.is-scrolling .badge-shimmer,
.is-scrolling .hero-badge-chip,
.is-scrolling .notif-badge,
.is-scrolling .hero-airing-slot.is-today,
.is-scrolling [style*="animation"],
.is-scrolling .notifPulse {
  animation-play-state: paused !important;
}

/* Freeze card transitions during scroll — prevents layout thrash on mobile */
.is-scrolling .show-card {
  transition: none !important;
  will-change: auto !important;
}

/* During scroll, simplify box-shadows to reduce repaint cost */
@media (max-width: 900px) {
  .is-scrolling .search-recent-poster,
  .is-scrolling .hero-pick-slot,
  .is-scrolling .splash-card {
    box-shadow: none !important;
    transition: none !important;
  }
}

/* ---- EPIC (Beta Tester) ---- */
.badge-chip.tier-epic {
  background: linear-gradient(135deg, #1a0000, #2e0a00);
  border: 1.5px solid #c0392b;
  animation: epicPulse 2s ease-in-out infinite;
}

@keyframes epicPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(192,57,43,0.6)) drop-shadow(0 0 8px rgba(192,57,43,0.25)); }
  50%       { filter: drop-shadow(0 0 8px rgba(192,57,43,1)) drop-shadow(0 0 18px rgba(200,100,50,0.6)); }
}

.badge-chip.tier-epic .badge-shimmer {
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,100,50,0.35) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 2s linear infinite;
}

/* ---- SPECIAL (Founder) ---- */
.badge-chip.tier-special {
  background: linear-gradient(135deg, #1a0010, #0d001a, #001a1a);
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
  animation: specialPulse 1.8s ease-in-out infinite;
}

/* holographic rotating border */
.badge-chip.tier-special::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(
    from var(--holo-angle, 0deg),
    #ff6ec7,
    #c8a4d4,
    #b5d4f4,
    #a8e6cf,
    #ffd6a5,
    #c8a84b,
    #ff6ec7
  );
  animation: holoRotate 3s linear infinite;
  z-index: 0;
}

@property --holo-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes holoRotate {
  to { --holo-angle: 360deg; }
}

@keyframes specialPulse {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255,110,199,0.5)) drop-shadow(0 0 10px rgba(200,168,75,0.25)); }
  50%       { filter: drop-shadow(0 0 10px rgba(255,110,199,0.9)) drop-shadow(0 0 20px rgba(200,168,75,0.5)); }
}

.badge-chip.tier-special .badge-shimmer {
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,182,219,0.5) 40%,
    rgba(200,168,75,0.4) 50%,
    rgba(181,212,244,0.4) 60%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 1.8s linear infinite;
}

/* ---- ROSEDAY ---- */
.badge-chip.tier-roseday {
  background: linear-gradient(135deg, #1a0010, #2e0020);
  border: 1.5px solid #e91e8c;
  animation: rosedayPulse 2s ease-in-out infinite;
}

@keyframes rosedayPulse {
  0%, 100% {
    box-shadow:
      0 0 6px rgba(233,30,140,0.5),
      0 0 12px rgba(233,30,140,0.2);
  }
  50% {
    box-shadow:
      0 0 16px rgba(233,30,140,0.9),
      0 0 30px rgba(233,30,140,0.5),
      0 0 45px rgba(233,30,140,0.2);
  }
}

.badge-chip.tier-roseday .badge-shimmer {
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(233,30,140,0.5) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 1.6s linear infinite;
}

/* ---- REDEEMABLE ---- */
.badge-chip.tier-redeemable {
  background: linear-gradient(135deg, #1a0a2e, #0d0020);
  border: 1.5px solid rgba(168,85,247,0.6);
  animation: redeemablePulse 2s ease-in-out infinite;
}

/* custom redeemable — uses inline background, keeps shimmer but no purple pulse */
.badge-chip.tier-redeemable-custom {
  border: 1.5px solid rgba(168,85,247,0.5);
  animation: redeemableCustomPulse 2.5s ease-in-out infinite;
}

@keyframes redeemableCustomPulse {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(168,85,247,0.3)); }
  50%       { filter: drop-shadow(0 0 8px rgba(168,85,247,0.6)); }
}
@keyframes redeemablePulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(168,85,247,0.5)) drop-shadow(0 0 8px rgba(168,85,247,0.2)); }
  50%       { filter: drop-shadow(0 0 10px rgba(168,85,247,1)) drop-shadow(0 0 20px rgba(168,85,247,0.5)); }
}

/* ---- UNCOMMON ---- */
.badge-chip.tier-uncommon {
  background: rgba(46,204,113,0.08);
  border: 1.5px solid rgba(46,204,113,0.45);
  animation: uncommonPulse 3s ease-in-out infinite;
}
@keyframes uncommonPulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(46,204,113,0.3)); }
  50%       { filter: drop-shadow(0 0 6px rgba(46,204,113,0.8)) drop-shadow(0 0 12px rgba(46,204,113,0.3)); }
}

/* ---- SILVER ---- */
.badge-chip.tier-silver {
  background: rgba(180,190,210,0.08);
  border: 1.5px solid rgba(180,190,210,0.45);
  animation: silverPulse 3.5s ease-in-out infinite;
}
@keyframes silverPulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(180,190,210,0.3)); }
  50%       { filter: drop-shadow(0 0 5px rgba(200,210,230,0.6)) drop-shadow(0 0 10px rgba(180,190,210,0.25)); }
}

/* ---- BRONZE ---- */
.badge-chip.tier-bronze {
  background: rgba(184,115,51,0.1);
  border: 1.5px solid rgba(184,115,51,0.5);
  animation: bronzePulse 4s ease-in-out infinite;
}
@keyframes bronzePulse {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(184,115,51,0.3)); }
  50%       { filter: drop-shadow(0 0 5px rgba(184,115,51,0.7)) drop-shadow(0 0 10px rgba(184,115,51,0.3)); }
}

/* user menu badge shelf sits below profile section */
.umenu-badges {
  padding: 12px 24px 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}

/* =========================================================
   PUBLIC PROFILE TWO-COLUMN LAYOUT
========================================================= */

/* =========================================================
   PUBLIC PROFILE CARD (redesigned)
========================================================= */


/* top row: avatar + identity + follow btn */

.pub-profile-avatar {
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 30%, var(--card));
  border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}


.pub-profile-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.pub-profile-meta {
  font-size: 12px;
  opacity: 0.5;
  margin-top: 2px;
}


/* stats row */
.pub-profile-stats {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}

.pub-profile-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  opacity: 0.6;
  border-right: 1px solid var(--border);
}

.pub-profile-stat:last-child {
  border-right: none;
}

.pub-profile-stat strong {
  font-size: 18px;
  font-weight: 700;
  opacity: 1;
  color: var(--accent);
  line-height: 1;
}

/* clickable stat buttons */
.pub-profile-stat-btn {
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  color: var(--text);
  transition: background 0.15s ease;
  padding: 0;
}

.pub-profile-stat-btn strong {
  color: var(--accent) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.pub-profile-stat-btn span {
  color: var(--accent);
  opacity: 0.7;
}

.pub-profile-stat-btn:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  transform: none;
  filter: none;
}

.pub-profile-stat-btn:hover strong {
  text-decoration-color: var(--accent);
}

/* badges section */

.pub-badge-shelf .badge-shelf {
  max-height: 84px;
  overflow: clip; /* clip not hidden — lets box-shadow/glow show outside */
  margin-top: 0;
  min-height: unset;
}

.pub-badge-more-btn {
  font-size: 11px;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline;
}

.pub-badge-more-btn:hover {
  opacity: 1;
  text-decoration: underline;
  transform: none;
  filter: none;
}

/* own-profile notice banner */
.pub-own-profile-notice {
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--accent);
  line-height: 1.4;
  opacity: 0.9;
}

/* fleshed-out follow list modal */
.follow-modal-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  max-height: 60dvh;
  overflow-y: auto;
}

.follow-modal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
  border: 1px solid transparent;
}

.follow-modal-item:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--border);
}

.follow-modal-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 25%, var(--card));
  border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.follow-modal-info {
  flex: 1;
  min-width: 0;
}

.follow-modal-name {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.follow-modal-username {
  font-size: 12px;
  opacity: 0.5;
  margin-top: 1px;
}

@media (max-width: 500px) {
  .pub-profile-stat strong {
    font-size: 16px;
  }
}

/* folder contents — connects seamlessly to tab above, same border color */
.pub-folder-contents {
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: var(--card);
  padding: 16px;
  min-height: 60px;
  margin-bottom: 16px;
  margin-top: 0 !important;
}

/* =========================================================
   FOLLOW BUTTON
========================================================= */

.follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  margin-top: 8px;
  align-self: flex-start;
  width: auto;
}

.follow-btn:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-1px);
  filter: none;
}

.follow-btn.is-following {
  background: var(--accent);
  color: #fff;
  opacity: 0.85;
}

.follow-btn.is-following:hover {
  opacity: 1;
  background: #e74c3c;
  border-color: #e74c3c;
}

/* =========================================================
   FOLLOW CHIPS
========================================================= */

.follow-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.follow-chip {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.follow-chip:hover {
  transform: scale(1.15);
  border-color: var(--accent);
}

.follow-chip-more {
  font-size: 10px;
  font-weight: 600;
  opacity: 0.5;
  cursor: default;
  letter-spacing: -0.02em;
}

.follow-chip-more:hover {
  transform: none;
  border-color: var(--border);
}

.follow-empty {
  font-size: 12px;
  opacity: 0.4;
}

.umenu-follow-count {
  font-weight: 400;
  opacity: 0.5;
  margin-left: 4px;
  font-size: 10px;
}

/* =========================================================
   FOLLOW POPOVER
========================================================= */

.follow-popover {
  position: absolute;
  z-index: 9999;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  animation: popoverIn 0.15s ease;
}

.follow-popover-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 3px;
}

.follow-popover-link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  pointer-events: all;
}

/* =========================================================
   SKELETON CARD
========================================================= */

/* =========================================================
   SEARCH SECTION
========================================================= */


/* =========================================================
   STANDALONE SEARCH BAR
========================================================= */

.search-bar-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 16px;
  padding: 14px 20px;
  margin-top: 16px;
  position: relative;
}

.search-bar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.search-bar-wrap .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  opacity: 0.45;
  pointer-events: none;
  z-index: 1;
  line-height: 1;
}

.search-bar-wrap #search {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.search-bar-wrap #search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 58,166,255), 0.12);
}

.search-bar-wrap #search::placeholder {
  opacity: 0.4;
}

/* results dropdown still positions relative to the wrap */
.search-bar-wrap .search-results {
  left: 0;
  width: 100%;
}

/* =========================================================
   DISCOVERY PANELS (below search bar)
========================================================= */

.discovery-section {
  background: var(--card-glass, var(--card));
  border: 1px solid var(--border);
  border-top: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 16px;
  padding: 12px 20px;
  margin-top: 16px;
  overflow: hidden;
  contain: layout style;
}


/* recent searches: sits to the right of input */
.search-panel {
  flex: 1;
  min-width: 0;
}

/* stacked panel holds both previous searches and staff picks */
.search-stacked-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  border-left: none !important;
  padding-left: 0 !important;
}

/* Staff picks label — accented and distinct from previous searches */
.search-picks-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
  margin-bottom: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 5px;
}

.search-picks-label::before {
  content: "⭐";
  font-size: 9px;
  opacity: 0.9;
}

/* Subtle glow behind the staff picks row */
.search-row-wrapper {
  overflow: visible; /* allow arrows to show outside bounds */
  position: relative;
}

/* clip only the scroll row horizontally, not the arrows */
.search-row-wrapper .splash-row {
  overflow-x: auto !important;
  overflow-y: visible;
}

.search-row-wrapper .splash-row {
  scroll-behavior: unset;
  padding: 8px 12px;
  align-items: flex-start; /* arrows align to poster, not full slot+text height */
}

/* Search row arrows: slightly smaller, always visible on mobile */
/* top/transform overrides removed — arrows now centered via flexbox on .row-wrapper */

.search-picks-row-wrap {
  position: relative;
  padding: 4px 0;
  background: transparent;
  border: none;
  overflow: visible;
  min-width: 0;
}

/* spread both rows evenly to align with each other */
.search-stacked-panel .search-recent-row {
  padding: 8px 8px;
  gap: 12px;
}

.search-picks-row-wrap .search-recent-row {
  padding: 8px 12px;
  gap: 12px;
}

.search-discover-panel,
.search-community-panel {
  flex: none;
  border-left: none;
  padding-left: 0;
}

/* bottom row not needed — panels are direct flex children now */
.search-bottom-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
  min-width: 0;
  overflow: hidden;
}

/* stacked community panels on the right */
.search-community-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;
  width: 220px;
  border-left: 1px solid var(--border);
  padding-left: 20px;
  align-self: flex-start;
  padding-top: 4px;
}

/* prev searches wrapper — hides on mobile */
.search-recent-prev {
  margin-bottom: 8px;
}

.search-panel-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* recent searches: horizontal row of 5 posters */
.search-recent-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-width: 0;
}

.search-recent-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: transform 0.15s ease;
  flex: 0 0 84px; /* fixed width for horizontal scroller */
}

.search-recent-slot:not(.is-skeleton):hover {
  transform: translateY(-2px);
}

.search-recent-slot.is-skeleton {
  cursor: default;
  pointer-events: none;
}

.search-recent-poster {
  width: 84px;
  height: 120px;
  flex-shrink: 0;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);
  transform: translateZ(0);
  will-change: transform;
}

.search-recent-poster.is-skeleton,
.search-recent-slot.is-skeleton .search-recent-poster {
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.08);
  box-shadow: none;
  animation: none;
}

.staff-pick-poster {
  position: relative;
  overflow: hidden;
}

.staff-pick-type-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}

.staff-pick-picker-chip {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.6);
  object-fit: cover;
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
  pointer-events: none;
  z-index: 2;
}

.staff-pick-picker-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  letter-spacing: 0;
}

.search-recent-name {
  font-size: 10px;
  opacity: 0.55;
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
}

/* community panel */
.search-community-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: stretch;
}

/* community panel skeletons — full width so they stack vertically like real items */
.community-user-item-skeleton {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 7px;
  width: 100%;
}

.community-user-item-skeleton::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  animation: shimmer 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

.community-user-item-skeleton::after {
  content: "";
  display: block;
  flex: 1;
  height: 28px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  animation: shimmer 1.4s ease-in-out infinite;
  animation-delay: 0.1s;
}

.community-see-more-skeleton {
  width: 70px;
  height: 14px;
  border-radius: 6px;
  margin-top: 6px;
  background: rgba(255,255,255,0.05);
  animation: shimmer 1.4s ease-in-out infinite;
}

.community-user-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  border: 1px solid transparent;
}

.community-user-item:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--border);
}

.community-see-more-btn {
  width: 100%;
  margin-top: 6px;
  padding: 5px 7px;
  font-size: 11px;
  color: var(--accent);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.community-see-more-btn:hover {
  opacity: 1;
  opacity: 0.7;
  text-align: left;
  transition: opacity 0.15s ease;
}

.community-see-more-btn:hover {
  opacity: 1;
  transform: none;
  filter: none;
}

.community-modal-content {
  max-width: 420px;
  width: 92%;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 85dvh;
}

.community-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.community-modal-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 3px;
}

.community-modal-sub {
  font-size: 12px;
  opacity: 0.45;
  line-height: 1.4;
}

.community-modal-header .modal-close {
  position: static;
  flex-shrink: 0;
  margin-top: -2px;
  box-shadow: none;
}

.community-modal-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  padding: 10px 12px;
  flex: 1;
}

/* Make community items in modal look great */
.community-modal-grid .community-user-item {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
}

.community-modal-grid .community-user-item:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--border);
}

.community-modal-grid .community-user-avatar {
  width: 36px;
  height: 36px;
  font-size: 15px;
}

.community-modal-grid .community-user-name {
  font-size: 13px;
  font-weight: 600;
}

.community-modal-grid .community-user-meta {
  font-size: 11px;
}

.community-modal-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.community-modal-pager .community-see-more-btn {
  margin: 0;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
}

.community-modal-pager .community-see-more-btn:hover {
  border-color: var(--accent);
}

/* =========================================================
   SIMILAR PROFILES BUTTON + MODAL
========================================================= */

.similar-profiles-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 9px 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  letter-spacing: 0.02em;
}
.similar-profiles-btn:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: var(--accent);
  transform: none;
  filter: none;
}
.similar-profiles-btn-icon {
  font-size: 11px;
  flex-shrink: 0;
}
.similar-profiles-btn-arrow {
  margin-left: auto;
  opacity: 0.6;
  font-size: 14px;
}

.similar-modal-content {
  max-width: 480px;
  width: 94%;
  max-height: 80dvh;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
}

.similar-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.similar-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 2px;
}

.similar-modal-sub {
  font-size: 12px;
  opacity: 0.5;
}

.similar-modal-header .modal-close {
  margin-left: 12px;
  flex-shrink: 0;
}

.similar-modal-body {
  overflow-y: auto;
  padding: 12px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.similar-modal-empty,
.similar-modal-loading {
  text-align: center;
  padding: 40px 20px;
  opacity: 0.5;
  font-size: 13px;
}

.similar-modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.similar-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.similar-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.similar-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.similar-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 25%, var(--card));
  border: 1.5px solid color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.similar-card-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.similar-card-info {
  flex: 1;
  min-width: 0;
}
.similar-card-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.similar-card-meta {
  font-size: 11px;
  opacity: 0.45;
  margin-top: 1px;
}

.similar-card-overlap {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.similar-card-count {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.similar-card-label {
  font-size: 9px;
  opacity: 0.45;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 1px;
}

.similar-card-posters {
  display: flex;
  gap: 4px;
  margin-top: 10px;
}
.similar-card-poster {
  width: 36px;
  height: 54px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.community-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 25%, var(--card));
  border: 1.5px solid color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

/* side panels — show avatar + name inline as compact rows */
.search-community-panel .community-user-info,
.search-discover-panel .community-user-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.search-community-panel .community-user-item,
.search-discover-panel .community-user-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 5px 7px !important;
  border-radius: 8px !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: background 0.15s, border-color 0.15s;
  overflow: visible;
}

.search-community-panel .community-user-item:hover,
.search-discover-panel .community-user-item:hover {
  background: rgba(255,255,255,0.05) !important;
  border-color: var(--border) !important;
}

.search-community-panel .community-user-item .community-user-avatar,
.search-discover-panel .community-user-item .community-user-avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  font-size: 12px !important;
  flex-shrink: 0;
}

.search-community-panel .community-user-name,
.search-discover-panel .community-user-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-community-panel .community-user-meta,
.search-discover-panel .community-user-meta {
  font-size: 10px;
  opacity: 0.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* hide the @username row — just show display name + shows count */
.search-community-panel .community-user-meta:first-of-type,
.search-discover-panel .community-user-meta:first-of-type {
  display: none;
}

.community-user-info {
  min-width: 0;
}

.community-user-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.community-user-meta {
  font-size: 10px;
  opacity: 0.4;
}

/* ≤900px: stack everything vertically, show all panels */
@media (max-width: 900px) {
  /* stack all panels vertically */
  .search-bottom-row {
    flex-direction: column;
    gap: 0;
  }

  /* When New Users panel stacks below Staff Picks, collapse it to buttons */
  .search-community-panel {
    display: none !important;
  }
  .search-community-stack {
    flex-direction: row !important;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    align-items: stretch;
  }
  .similar-profiles-btn,
  .mobile-new-users-btn {
    flex: 1 !important;
    width: auto !important;
    justify-content: center;
  }
  .mobile-new-users-btn {
    display: flex !important;
  }

  /* on mobile use slightly smaller cards to show partial 6th as scroll hint */
  .search-recent-slot { flex: 0 0 72px; }
  .search-recent-poster { width: 72px; height: 102px; }

  /* tighter discovery section padding on mobile */
  .discovery-section { padding: 10px 12px; border-radius: 12px; }

  /* stacked panel: full width, no left border in column mode */
  .search-stacked-panel {
    display: flex;
    flex: none;
    width: 100%;
    border-left: none;
    padding-left: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
  }

  /* community stack: side by side on tablet, vertical on small mobile */
  .search-community-stack {
    border-left: none;
    padding-left: 0;
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
    flex-shrink: 0;
  }

  .search-community-panel {
    flex: none;
    width: 100%;
    padding-left: 0;
    border-left: none;
    background: rgba(255,255,255,0.02);
    border-radius: 12px;
    padding: 12px 10px;
    border: 1px solid var(--border);
  }

  /* show names on tablet too */
  .search-community-panel .community-user-info,
  .search-discover-panel .community-user-info {
    display: flex !important;
  }

  .search-community-panel .community-user-item,
  .search-discover-panel .community-user-item {
    width: 100% !important;
  }

  /* button stays compact at this breakpoint */
  .similar-profiles-btn {
    width: auto;
    align-self: flex-start;
  }
}

@media (max-width: 600px) {
  /* On small mobile: hide the full New Users panel,
     show two compact side-by-side buttons instead */
  .search-community-panel {
    display: none !important;
  }
  .search-community-stack {
    flex-direction: row !important;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
    align-items: stretch;
  }
  /* Both buttons fill equally */
  .similar-profiles-btn,
  .mobile-new-users-btn {
    flex: 1 !important;
    width: auto !important;
    justify-content: center;
    font-size: 11px !important;
    padding: 9px 8px !important;
  }
  .similar-profiles-btn-arrow {
    display: none;
  }
  /* Mobile new users button hidden on desktop */
}


/* mobile */
@media (max-width: 640px) {

/* =========================================================
   DISCOVER PANEL — similar taste profiles
========================================================= */

.discover-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  border: 1px solid transparent;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.discover-card:hover {
  background: rgba(255,255,255,0.05);
  border-color: var(--border);
}


.discover-card-avatar {
  width: 26px;
  height: 26px;
  min-width: 26px;
  max-width: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 25%, var(--card));
  border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  line-height: 26px;
  text-align: center;
}

.discover-card-name {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.discover-card-overlap {
  font-size: 10px;
  opacity: 0.45;
  white-space: nowrap;
}

.discover-card-posters {
  display: flex;
  gap: 4px;
  margin-left: 33px;
}

.discover-card-poster {
  width: 28px;
  height: 40px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.08);
}

.discover-card-poster.is-skeleton {
  animation: shimmer 1.4s ease-in-out infinite;
}

.discover-empty {
  font-size: 11px;
  opacity: 0.35;
  padding: 4px 6px;
  line-height: 1.4;
}


  /* community panels on small mobile */
  .search-community-panel .community-user-avatar,
  .search-discover-panel .community-user-avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 12px !important;
  }

  .search-community-panel .community-user-name,
  .search-discover-panel .community-user-name {
    font-size: 11px;
  }

  /* hide poster thumbs in the side panel — too cramped */
  .search-discover-panel .discover-card-posters {
    display: none;
  }

  /* hide the @username line — just name + count */
  .search-discover-panel .discover-card .community-user-meta:first-of-type {
    display: none;
  }

  .community-see-more-btn {
    width: auto;
    margin-top: 4px;
    padding: 4px 7px;
    font-size: 11px;
  }
}

/* search-section-label removed */

.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 14px;
  font-size: 15px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

.search-input-wrap #search {
  width: 100%;
  padding: 13px 16px 13px 42px;
  font-size: 15px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.search-input-wrap #search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 58,166,255), 0.15);
}

.search-input-wrap #search::placeholder {
  opacity: 0.4;
}


/* =========================================================
   HERO DASHBOARD
========================================================= */

.hero-compact {
  /* border/background removed — .splash-hero already provides the card container */
  overflow: hidden;
  margin-bottom: 0;
  padding-bottom: 4px;
}

/* hero: three zones — identity | my picks | airing soon */
.hero-main-row {
  display: flex;
  align-items: flex-start;
  padding: 20px 24px;
  gap: 24px;
  flex-wrap: nowrap;
}

/* identity — far left, fixed */
.hero-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.hero-left-clickable {
  cursor: pointer;
  border-radius: 10px;
  padding: 6px 10px;
  margin: -6px -10px;
  transition: background 0.15s ease;
}

.hero-left-clickable:hover {
  background: rgba(255,255,255,0.05);
}

.hero-left-clickable:hover .hero-avatar {
  border-color: var(--accent);
}

.hero-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 30%, var(--card));
  border: 2.5px solid color-mix(in srgb, var(--accent) 75%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}

.hero-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hero-display-name {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.hero-since {
  font-size: 11px;
  opacity: 0.35;
  white-space: nowrap;
}

/* hidden on desktop — only shown on mobile where hero-since is hidden */
.hero-mobile-menu-hint {
  display: none;
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
}

/* stats — center, takes remaining space */


.hero-stat strong {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

.hero-stat span {
  font-size: 10px;
  opacity: 0.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}


/* picks — fills available space */
.hero-picks-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
}

/* badges group hidden — now inline in identity */
.hero-badges-group {
  display: none;
}

/* inline badges below name/since */
.hero-badges-inline {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* airing soon always visible */
.hero-airing-picks {
  display: flex;
}

/* My Picks — center zone, fixed */
.hero-picks-group:not(.hero-airing-picks) {
  flex-shrink: 0;
}

/* Airing Soon — right zone, wraps content as space reduces */
.hero-airing-picks {
  flex: 1 1 auto;
  flex-shrink: 1;            /* can shrink — grid wraps when space runs out */
  min-width: 78px;           /* min = one poster (70px) + gap */
  border-left: 1px solid var(--border);
  padding-left: 24px;
  align-self: flex-start;
}

.hero-airing-picks .hero-picks-grid {
  flex-wrap: wrap;           /* slots drop to next row as space runs out */
  gap: 8px;
  overflow: visible;
}

/* Each slot never shrinks — always full poster size */
.hero-airing-picks .hero-pick-slot {
  flex-shrink: 0;
}

/* airing soon slot — subtle border for upcoming, pulse for today */
.hero-airing-slot {
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.15);
  border-radius: 8px;
}

/* days until next episode badge */
.airing-days-badge {
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  padding: 2px 0;
  text-transform: uppercase;
  pointer-events: none;
  border-radius: 0 0 6px 6px;
}

.airing-days-badge.is-today {
  background: color-mix(in srgb, var(--accent) 80%, rgba(0,0,0,0.4));
}

/* poster needs position:relative for badge */
.hero-airing-slot .hero-pick-poster {
  position: relative;
  overflow: hidden;
}

.hero-airing-slot:hover {
  box-shadow: 0 0 0 2px var(--accent), 0 0 10px var(--accent);
}

/* today episode — always glowing */
.hero-airing-slot.is-today {
  animation: airingTodayPulse 2s ease-in-out infinite;
  box-shadow: 0 0 0 2px var(--accent);
}

@keyframes airingTodayPulse {
  0%   { box-shadow: 0 0 0 2px var(--accent), 0 0 0px var(--accent); }
  50%  { box-shadow: 0 0 0 2px var(--accent), 0 0 12px var(--accent); }
  100% { box-shadow: 0 0 0 2px var(--accent), 0 0 0px var(--accent); }
}

/* skeleton placeholder slots */
.hero-airing-skeleton .skeleton-poster {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  animation: shimmer 1.5s infinite linear;
  background-size: 200% 100%;
}

.hero-picks-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.35;
}

.hero-picks-grid {
  display: flex;
  gap: 8px;
}

.hero-pick-slot {
  cursor: pointer;
  transition: transform 0.15s ease;
}

.hero-pick-slot.has-pick:hover {
  transform: translateY(-3px);
}

.hero-pick-slot.is-empty {
  cursor: default;
  opacity: 0.2;
}

/* desktop poster size — matches card poster */
.hero-pick-poster {
  width: 70px;
  height: 100px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}

.hero-pick-slot.has-pick .hero-pick-poster {
  border-color: rgba(200,168,75,0.4);
}

.hero-pick-slot.has-pick:hover .hero-pick-poster {
  border-color: rgba(200,168,75,0.8);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

.hero-pick-empty-icon {
  font-size: 16px;
  opacity: 0.4;
}

/* bottom row: tabs + reorder */
/* hero-bottom-row removed — list tabs moved to list-switcher below hero */

/* show modal mobile — X button sizing */
@media (max-width: 540px) {
  #showModal .modal-close {
    width: 32px;
    height: 32px;
    font-size: 14px;
    top: 12px;
    right: 12px;
  }
}

/* ---- MOBILE: identity + picks on top ---- */
@media (max-width: 900px) {
  .hero-main-row {
    flex-wrap: wrap;
    padding: 14px 16px;
    gap: 12px;
  }

  /* identity takes available space next to picks */
  .hero-left {
    flex: 1;
    min-width: 0;
    order: 1;
  }

  /* picks stay right on top row */
  .hero-picks-group {
    order: 2;
    flex-shrink: 0;
  }

  /* airing soon — full width row below identity+picks */
  .hero-airing-picks {
    order: 3;
    width: 100%;
    flex-basis: 100%;
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 12px;
    min-width: 0;
  }

  .hero-airing-picks .hero-picks-grid {
    overflow: visible;
    flex-wrap: wrap;
    gap: 6px;
  }

  .hero-pick-poster { width: 44px; height: 62px; }
  .search-recent-poster { width: 56px; height: 80px; border-radius: 6px; }

  .hero-display-name { font-size: 14px; }
  .hero-since { display: none; }
  .hero-mobile-menu-hint { display: block; }
}

/* hero picks skeleton */
.hero-pick-slot .skeleton-poster {
  width: 70px;
  height: 100px;
  border-radius: 8px;
  margin: 0;
}

@media (max-width: 900px) {
  .hero-pick-slot .skeleton-poster {
    width: 44px;
    height: 62px;
  }
}


.skeleton-card {
  display: flex;
  gap: 14px;
  padding: 14px;
  pointer-events: none;
  animation: skeletonFadeIn 0.2s ease forwards;
}

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

.skeleton-poster {
  width: 60px;
  height: 85px;
  border-radius: 8px;
  flex-shrink: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmerPulse 1.4s ease infinite;
}

.skeleton-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.skeleton-line {
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmerPulse 1.4s ease infinite;
}

.skeleton-title {
  height: 16px;
  width: 55%;
}

.skeleton-meta {
  height: 12px;
  width: 35%;
  animation-delay: 0.1s;
}

.skeleton-badge {
  height: 20px;
  width: 80px;
  border-radius: 20px;
  animation-delay: 0.2s;
}

@keyframes shimmerPulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =========================================================
   RECOMMEND MODAL
========================================================= */

.recommend-modal-content {
  max-width: 420px;
  padding: 24px;
}

.recommend-header {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.recommend-poster {
  width: 48px;
  height: 68px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.05);
  flex-shrink: 0;
}

.recommend-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.recommend-meta {
  font-size: 12px;
  opacity: 0.45;
  margin-top: 3px;
}

.recommend-section {
  margin-bottom: 16px;
}

.recommend-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.45;
  margin-bottom: 8px;
}

.recommend-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.6;
}

.recommend-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.recommend-tab {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.recommend-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.recommend-tab:hover:not(.active) {
  background: rgba(255,255,255,0.06);
  transform: none;
  filter: none;
}

.recommend-follower-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.recommend-follower-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: background 0.15s ease;
}

.recommend-follower-row:hover {
  background: rgba(255,255,255,0.07);
}

.recommend-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.recommend-follower-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.recommend-follower-name {
  font-size: 13px;
  font-weight: 500;
}

.recommend-follower-sub {
  font-size: 11px;
  opacity: 0.45;
}

.recommend-broadcast-note {
  font-size: 13px;
  opacity: 0.6;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  line-height: 1.5;
}

.recommend-textarea {
  width: 100%;
  border-radius: 10px;
  font-size: 13px;
  padding: 10px 12px;
  resize: vertical;
  min-height: 72px;
  font-family: inherit;
}

.recommend-char-count {
  font-size: 11px;
  opacity: 0.35;
  text-align: right;
  margin-top: 4px;
}

.recommend-empty {
  font-size: 13px;
  opacity: 0.4;
  text-align: center;
  padding: 16px 0;
}

.recommend-send-btn {
  width: 100%;
  border-radius: 12px;
  padding: 12px;
  font-size: 14px;
}

/* card recommend button */
.card-recommend-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--accent);
  font-size: 13px;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  opacity: 0.75;
  transition: all 0.15s ease;
  line-height: 1;
  position: relative;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-recommend-btn:hover {
  opacity: 1;
  background: rgba(255,255,255,0.07);
  transform: none;
  filter: none;
}

/* tooltip — desktop only */
@media (hover: hover) {
  .card-recommend-btn::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: #fff;
    font-size: 11px;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 100;
  }

  .card-recommend-btn:hover::after {
    opacity: 1;
  }
}

/* modal recommend button */
.modal-recommend-btn {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.modal-recommend-btn:hover {
  background: rgba(255,255,255,0.07);
  transform: none;
  filter: none;
}

/* recommendation notification section */
.umenu-rec-notif-section {
  background: rgba(100,180,255,0.05);
  border-color: rgba(100,180,255,0.15);
}

.umenu-rec-notif-section .umenu-notif-header {
  color: #64b4ff;
}

.umenu-rec-notif-section .notif-dot-inline {
  background: #64b4ff;
}

.umenu-rec-notif-section .umenu-notif-dismiss-all {
  background: rgba(100,180,255,0.08);
  color: #64b4ff;
  border-color: rgba(100,180,255,0.2);
}

.umenu-rec-notif-section .umenu-notif-dismiss-all:hover {
  background: rgba(100,180,255,0.18);
}

.umenu-rec-poster {
  width: 32px;
  height: 44px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.06);
  flex-shrink: 0;
}

/* =========================================================
   PROFILE SNAPSHOT MODAL
========================================================= */

.profile-snapshot-content {
  max-width: 400px;
  padding: 0;
  overflow: hidden;
}

.snapshot-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 64px 16px 20px; /* right padding leaves room for X */
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.snapshot-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 30%, var(--card));
  border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}

.snapshot-identity {
  flex: 1;
  min-width: 0;
}

.snapshot-name {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.snapshot-username {
  font-size: 12px;
  opacity: 0.45;
  margin-top: 2px;
}

.snapshot-follow-btn {
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  margin-left: auto;
  /* stay right of name but clear of X button */
  max-width: calc(100% - 76px);
}

.snapshot-follow-btn.is-following {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
  opacity: 0.7;
}

.snapshot-follow-btn:hover {
  opacity: 1;
  transform: none;
  filter: none;
}

.snapshot-follow-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.snapshot-section {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.snapshot-section:last-child {
  border-bottom: none;
}

.snapshot-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 10px;
}

.snapshot-stats-row {
  display: flex;
  gap: 0;
}

.snapshot-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.snapshot-stat strong {
  font-size: 18px;
  font-weight: 700;
}

.snapshot-stat span {
  font-size: 11px;
  opacity: 0.45;
}

/* poster grid */
.snapshot-poster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.snapshot-poster-wrap {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: transform 0.15s ease;
  position: relative;
}

.snapshot-poster-wrap:hover {
  transform: translateY(-2px);
}

/* pick highlight — gold border + glow */
.snapshot-poster-wrap.is-pick .snapshot-poster {
  box-shadow: 0 0 0 2px #c8a84b, 0 0 14px rgba(200,168,75,0.5);
}

/* star badge on pick posters */
.snapshot-pick-star {
  position: absolute;
  top: 5px;
  left: 5px;
  font-size: 11px;
  color: #c8a84b;
  background: rgba(0,0,0,0.65);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  line-height: 1;
}

.snapshot-poster {
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.05);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}

.snapshot-poster-skeleton {
  width: 100%;
  aspect-ratio: 2/3;
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.09) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmerPulse 1.4s ease infinite;
}

.snapshot-poster-title {
  font-size: 10px;
  opacity: 0.55;
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.snapshot-footer {
  display: flex;
  justify-content: center;
}

.snapshot-view-profile {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  opacity: 0.8;
  transition: opacity 0.15s ease;
}

.snapshot-view-profile:hover {
  opacity: 1;
}

.snapshot-loading {
  padding: 24px 20px;
}

/* =========================================================
   FOLDER TAB REORDER
========================================================= */

.recommend-hint {
  color: var(--accent);
  opacity: 0.85;
}

/* =========================================================
   LIST CARD WRAPPER
========================================================= */

.list-card {
  border: 1px solid var(--border);
  border-radius: 0 12px 12px 12px;
  overflow: visible;
  margin-top: 52px;
  margin-bottom: 24px;
  position: relative;
}

/* list-card-tab styles now handled by .list-tab-row rules above */
.list-card-tab {
  user-select: none;
  min-width: 120px;
}

/* ===== UNIFIED TAB ROW ===== */
.list-tab-row {
  display: flex;
  align-items: flex-end;
  position: absolute;
  bottom: 100%;
  left: -1px;
  right: 1px;
  gap: 0;
}

/* base style — all tabs look like folder tabs */
.list-switch-tab,
.list-card-tab,
.list-filter-btn,
.list-grid-btn {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  border: 1px solid var(--border) !important;
  border-right: none !important;
  border-bottom: none !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
  opacity: 0.7 !important;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s !important;
  min-width: unset !important;
}

/* big primary tabs — Shared List / Personal List */
.list-switch-tab {
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 12px 12px 0 0 !important;
  height: 40px !important;
}

/* small utility tabs — Reorder / Filter / Grid */
.list-card-tab,
.list-filter-btn,
.list-grid-btn {
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 8px 8px 0 0 !important;
  height: 30px !important;
}

/* spacer between big and small groups */
.list-tab-divider {
  flex: 1 !important;
  border: none !important;
  background: none !important;
  cursor: default !important;
  min-width: 16px !important;
  opacity: 0 !important;
}

/* last tab gets right border to close the row */
.list-tab-row > :last-child {
  border-right: 1px solid var(--border) !important;
}

/* hover */
.list-switch-tab:hover,
.list-card-tab:hover,
.list-filter-btn:hover,
.list-grid-btn:hover {
  opacity: 0.85 !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* active primary switcher tab — merges with card below */
.list-switch-tab.active {
  opacity: 1 !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: var(--card) !important;
  margin-bottom: -1px !important;
  padding-bottom: 11px !important;
}

/* active reorder */
.list-card-tab.is-active {
  opacity: 1 !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* disabled reorder — filter is active */
.list-card-tab.is-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* disabled filter — reorder is active */
.list-filter-btn.is-disabled,
.list-filter-btn.is-disabled.is-active {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  background: rgba(255,255,255,0.04) !important;
}

/* active filter / grid */
.list-filter-btn.is-active,
.list-grid-btn.is-active {
  opacity: 1 !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
}

.list-card {
  position: relative;
}

.list-card-body {
  padding: 16px;
  background: var(--card);
  border-radius: 0 12px 12px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-top: none;
  min-height: 60px;
  overflow: visible;
}

/* extra top padding when list has recommended picks so badge isn't clipped */
.list-card-body > .show-card:first-child .recommended-badge {
  top: -8px;
}
.list-card-body:has(.recommended-badge) {
  padding-top: 22px;
}

/* remove margin-bottom from cards inside the wrapper */
.list-card-body .show-card:last-child {
  margin-bottom: 0;
}

/* list containers — hints float above, tab needs clearance */
#familyListContainer,
#personalListContainer {
  margin-top: 0;
}

/* empty state inside list card body */
/* list switcher replaced by .list-switch-tab inside .list-tab-row */

/* grid btn styles unified above */

/* ===== MOBILE TAB ROW ===== */
@media (max-width: 600px) {
  .list-tab-row {
    flex-wrap: wrap;
    position: static;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
  }

  .list-card {
    margin-top: 0;
    border-radius: 0 0 12px 12px;
  }

  .list-card-body {
    border-radius: 0 0 12px 12px !important;
  }

  /* switcher tabs full width row */
  .list-switch-tab {
    flex: 1 !important;
    justify-content: center !important;
    padding: 9px 8px !important;
    font-size: 13px !important;
    height: 36px !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: rgba(255,255,255,0.04) !important;
  }

  .list-switch-tab.active {
    border-bottom-color: var(--accent) !important;
    margin-bottom: 0 !important;
    padding-bottom: 9px !important;
  }

  /* utility tabs on second row */
  .list-tab-divider {
    display: none !important;
  }

  .list-card-tab,
  .list-filter-btn,
  .list-grid-btn {
    flex: 1 !important;
    justify-content: center !important;
    height: 32px !important;
    font-size: 11px !important;
    padding: 0 6px !important;
    border-radius: 0 !important;
    border: none !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 2px solid transparent !important;
    background: rgba(255,255,255,0.04) !important;
    color: var(--text) !important;
    opacity: 0.7 !important;
  }

  /* active states on mobile */
  .list-card-tab.is-active {
    border-radius: 0 !important;
    background: var(--accent) !important;
    color: #fff !important;
    opacity: 1 !important;
    border-bottom-color: transparent !important;
  }

  .list-filter-btn.is-active,
  .list-grid-btn.is-active {
    color: var(--accent) !important;
    opacity: 1 !important;
    background: color-mix(in srgb, var(--accent) 15%, transparent) !important;
    border-bottom-color: var(--accent) !important;
  }

  /* last utility tab gets right border removed */
  .list-tab-row > :last-child {
    border-right: none !important;
  }
}

/* ===== GRID VIEW LAYOUT ===== */
.list-card-body.grid-view {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 12px;
}

@media (max-width: 700px) {
  .list-card-body.grid-view {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}

/* grid card — poster only, fills cell */
.list-card-body.grid-view > .show-card {
  display: block;
  padding: 0;
  margin-bottom: 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 2/3;
  position: relative;
  width: 100%;
  height: auto;
  min-height: unset;
  min-width: 0;
  animation: none;
  opacity: 1;
  cursor: pointer;
  will-change: transform;
  contain: layout style;

  /* skip rendering off-screen grid cards during scroll */
}

/* poster fills entire card */
.list-card-body.grid-view > .show-card > .poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background-size: cover;
  background-position: center;
  flex-shrink: unset;
}

/* hide everything except poster and position badge — !important to beat reorder-mode specificity */
.list-card-body.grid-view > .show-card > .show-content,
.list-card-body.grid-view > .show-card > .recommended-badge,
.list-card-body.grid-view > .show-card > .card-actions,
.list-card-body.grid-view > .show-card > .drag-handle,
.list-card-body.grid-view > .show-card > .pick-indicator,
body .list-card-body.grid-view > .show-card > .drag-handle,
body.reorder-mode .list-card-body.grid-view > .show-card > .drag-handle {
  display: none !important;
}

/* hide move-to-top — only number badge shows in grid */
.list-card-body.grid-view .card-move-top-btn,
body.reorder-mode .list-card-body.grid-view .card-move-top-btn {
  display: none !important;
}

/* reorder controls in grid — just the number, positioned top-left */
.list-card-body.grid-view .card-reorder-controls {
  position: absolute;
  top: 6px;
  left: 6px;
  transform: none;
  flex-direction: row;
  z-index: 10;
}

/* position badge in grid looks like order number */
.list-card-body.grid-view .card-position-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  border: none;
  cursor: default;
}

/* always show position badge in grid (not just reorder mode) */
.list-card-body.grid-view .card-reorder-controls {
  display: flex !important;
}

/* title on hover */
.list-card-body.grid-view > .show-card::after {
  content: attr(data-title);
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 10px;
  text-align: center;
  line-height: 1.3;
  pointer-events: none;
  /* center text vertically */
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-card-body.grid-view > .show-card:hover::after {
  opacity: 1;
}

/* in grid reorder mode — whole card draggable, block clicks */
.reorder-mode .list-card-body.grid-view > .show-card {
  cursor: grab;
  user-select: none;
}
.reorder-mode .list-card-body.grid-view > .show-card:active {
  cursor: grabbing;
  opacity: 0.85;
}

/* dim card-actions in grid reorder so it's clear they're disabled */
.reorder-mode .list-card-body.grid-view > .show-card > .card-actions,
.reorder-mode .list-card-body.grid-view > .show-card > .grid-card-actions {
  display: none !important;
}

/* always-visible X button — top right of grid poster */
.grid-remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.65);
  color: rgba(255,255,255,0.75);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 20;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
.grid-remove-btn:hover {
  background: rgba(231,76,60,0.85);
  color: #fff;
  transform: scale(1.12);
}
.reorder-mode .grid-remove-btn {
  display: none !important;
}

/* Mobile-only New Users button — hidden on desktop */
.mobile-new-users-btn {
  display: none;
}
@media (max-width: 600px) {
  .mobile-new-users-btn {
    display: flex;
  }
}

.grid-ep-row {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 6px 7px;
  background: linear-gradient(transparent, rgba(0,0,0,0.82));
  border: none;
  border-radius: 0 0 10px 10px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  z-index: 12;
  transition: background 0.15s;
  letter-spacing: 0.02em;
}
.grid-ep-row:hover,
.grid-ep-row:focus {
  background: linear-gradient(transparent, rgba(0,0,0,0.95));
  color: #fff;
  transform: none;
  filter: none;
}
.reorder-mode .grid-ep-row {
  display: none !important;
}
/* bump up when glow banner is showing */
.grid-ep-hint {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
}
.grid-ep-hint--caught {
  background: rgba(46,213,115,0.2);
  color: #2ed573;
}
.grid-ep-hint--new {
  background: rgba(243,156,18,0.2);
  color: #f39c12;
}
.grid-ep-hint--start {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.45);
  font-style: italic;
  font-weight: 400;
}

.list-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 52px 24px;
  gap: 8px;
  text-align: center;
  /* span all grid columns when parent is in grid mode */
  grid-column: 1 / -1;
  width: 100%;
}

.list-empty-icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 6px;
  opacity: 0.4;
}

.list-empty-title {
  font-size: 15px;
  font-weight: 600;
  opacity: 0.6;
  letter-spacing: 0.01em;
}

.list-empty-sub {
  font-size: 12px;
  opacity: 0.35;
  max-width: 300px;
  line-height: 1.6;
}

/* in public view, kill all gap between profile hero and dashboard */
.public-profile ~ #dashboardView,
.public-profile + #dashboardView {
  margin-top: 0 !important;
}

#dashboardView .pub-folder-contents {
  margin-top: 0 !important;
}


/* reorder controls on each card */
.card-reorder-controls {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 5;
}

.reorder-mode .card-reorder-controls {
  display: flex;
}

.card-move-top-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
}

.card-move-top-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: none;
  filter: none;
}

.card-position-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text);
  opacity: 0.7;
}

.card-position-badge:hover {
  opacity: 1;
  border-color: var(--accent);
  background: rgba(255,255,255,0.12);
}

.card-position-input {
  width: 36px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--card);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  padding: 0 2px;
}

/* shift card content right in reorder mode to make room */
.reorder-mode .show-card {
  padding-left: 50px;
}

/* in reorder mode hide action buttons — reduces clutter and frees width */
.reorder-mode .show-card .card-actions {
  display: none !important;
}

/* with no action buttons, show-name doesn't need right padding */
.reorder-mode .show-card .show-name {
  padding-right: 0;
}

/* grid cards need no extra padding in reorder — controls are overlaid */
.reorder-mode .list-card-body.grid-view > .show-card {
  padding-left: 0;
}

/* hide drag handle when not in reorder mode */
.drag-handle {
  display: none;
}

.reorder-mode .drag-handle {
  display: flex;
}

/* =========================================================
   LIST CARD FILTER
========================================================= */

/* filter btn styles unified above */

.list-filter-wrap {
  position: relative;
  display: inline-flex;
}

.list-filter-panel {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  right: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px 12px 0 12px;
  padding: 12px 16px;
  z-index: 200;
  min-width: 260px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.list-filter-panel.is-open {
  display: block;
}

.list-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.list-filter-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.4;
  flex-shrink: 0;
}

.list-filter-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.list-filter-opt {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.list-filter-opt:hover {
  border-color: var(--accent);
  transform: none;
  filter: none;
}

.list-filter-opt.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.list-filter-result {
  font-size: 11px;
  opacity: 0.4;
  margin-top: 8px;
  text-align: right;
}

/* =========================================================
   BADGE CODEX MODAL
========================================================= */

.badge-codex-content {
  max-width: 520px;
}

.codex-section {
  margin-bottom: 28px;
}

.codex-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.codex-entries {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.codex-entry {
  display: flex;
  align-items: center;
  gap: 14px;
}

.codex-chip {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  font-size: 17px;
  cursor: pointer;
  position: relative;
}

/* locked state — grayscale but full effect on hover/tap */
.codex-entry.is-locked .codex-chip {
  filter: grayscale(1) brightness(0.5);
  transition: filter 0.3s ease;
}

.codex-entry.is-locked .codex-chip:hover,
.codex-entry.is-locked.is-revealed .codex-chip {
  filter: grayscale(0) brightness(1);
}

.codex-lock {
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 10px;
  line-height: 1;
  transition: opacity 0.2s ease;
}

.codex-entry.is-locked .codex-chip:hover .codex-lock,
.codex-entry.is-locked.is-revealed .codex-lock {
  opacity: 0;
}

.codex-info {
  flex: 1;
  min-width: 0;
}

.codex-name {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.codex-earned-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 20px;
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* owner pill — accent color */
.codex-owner-pill {
  background: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
}

/* viewer pill — green tint to distinguish */
.codex-viewer-pill {
  background: rgba(0, 160, 80, 0.15);
  color: #00c060;
  border: 1px solid rgba(0, 160, 80, 0.35);
}

/* comparison count bar at top of codex */
.codex-comparison-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.codex-count-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
}

.codex-holders {
  font-size: 10px;
  color: var(--muted, rgba(230,233,238,0.4));
  margin-top: 3px;
  letter-spacing: 0.02em;
}

.codex-req {
  font-size: 12px;
  opacity: 0.5;
  margin-top: 2px;
  line-height: 1.4;
}

.codex-entry.is-locked .codex-req {
  opacity: 0.35;
}

/* view all badges link in user menu */
.login-slow-note {
  font-size: 12px;
  opacity: 0.55;
  margin: 4px 0 16px;
  text-align: center;
}

.umenu-loading-line {
  font-size: 12px;
  opacity: 0.35;
  padding: 4px 0;
}

.umenu-loading-name {
  width: 120px;
  height: 18px;
  border-radius: 6px;
  background: rgba(255,255,255,0.1);
  animation: skeletonPulse 1.4s ease infinite;
  color: transparent;
  user-select: none;
}

.umenu-loading-sub,
.umenu-username-placeholder {
  display: block;
  width: 80px;
  height: 13px;
  border-radius: 5px;
  background: rgba(255,255,255,0.07);
  animation: skeletonPulse 1.4s ease infinite;
  color: transparent;
  user-select: none;
  margin-top: 3px;
}

.umenu-loading-joined {
  display: block;
  width: 140px;
  height: 11px;
  border-radius: 5px;
  background: rgba(255,255,255,0.05);
  animation: skeletonPulse 1.4s ease infinite;
  color: transparent;
  user-select: none;
  margin-top: 4px;
}

/* ── umenu skeleton pulse ───────────────────────────────────────────────────
   skeletonPulse was referenced by umenu-loading-* rules but never defined.
   umenu-pulse is used by the rec counter and exclusive-themes skeletons.
   Both share the same gentle opacity breath animation.
─────────────────────────────────────────────────────────────────────────── */
@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

@keyframes umenu-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

/* Skeleton state for the rec counter label — replaced with real text on load */
.umenu-skeleton-label {
  display: inline-block;
  width: 48px;
  height: 14px;
  border-radius: 4px;
  background: rgba(255,255,255,0.1);
  animation: skeletonPulse 1.4s ease infinite;
  color: transparent;
  user-select: none;
}

.umenu-badges-section {
  padding: 12px 32px 18px; /* extra horizontal padding gives glow room */
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 2-row cap in user menu via max-height, overflow visible for glows */
.umenu-badges-section .badge-shelf {
  max-height: 90px; /* 2 rows of 36px + 6px gap + 12px glow room */
  overflow: visible;
}

.umenu-codex-link {
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
  display: inline;
  align-self: flex-start; /* prevent stretching in flex column */
  width: auto;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
}

.umenu-codex-link:hover {
  opacity: 1;
  text-decoration: underline;
  transform: none;
  filter: none;
}

/* =========================================================
   CUSTOM SHOW BADGES
========================================================= */

/* base — shared by all custom badges */
.badge-chip.badge-custom {
  position: relative;
  overflow: hidden;
}

/* ---- SOLO LEVELING — deep purple shadow energy ---- */
.badge-chip[data-badge-id="solo_leveling"] {
  background: linear-gradient(135deg, #0a0015, #1a0035);
  border: 1.5px solid #7b2fff;
  animation: soloLevelingPulse 2s ease-in-out infinite;
}

@keyframes soloLevelingPulse {
  0%, 100% {
    box-shadow:
      0 0 6px rgba(123,47,255,0.5),
      0 0 12px rgba(123,47,255,0.2);
  }
  50% {
    box-shadow:
      0 0 16px rgba(123,47,255,0.9),
      0 0 32px rgba(80,0,255,0.5),
      0 0 48px rgba(123,47,255,0.2);
  }
}

.badge-chip[data-badge-id="solo_leveling"] .badge-shimmer {
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(180,100,255,0.5) 45%,
    rgba(40,0,180,0.3) 55%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 2s linear infinite;
}

/* ---- KNIGHT OF SEVEN KINGDOMS — silver steel + gold pulse ---- */
.badge-chip[data-badge-id="knight_seven_kingdoms"] {
  background: linear-gradient(135deg, #0d0d0d, #1a1a1a);
  border: 1.5px solid #a0a0a0;
  animation: knightPulse 3s ease-in-out infinite;
}

@keyframes knightPulse {
  0%, 100% {
    box-shadow:
      0 0 5px rgba(160,160,160,0.4),
      0 0 10px rgba(200,168,75,0.1);
  }
  50% {
    box-shadow:
      0 0 12px rgba(200,200,200,0.6),
      0 0 24px rgba(200,168,75,0.3),
      0 0 36px rgba(160,160,160,0.1);
  }
}

.badge-chip[data-badge-id="knight_seven_kingdoms"] .badge-shimmer {
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(220,220,220,0.4) 40%,
    rgba(200,168,75,0.5) 50%,
    rgba(220,220,220,0.4) 60%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 2.5s linear infinite;
}

/* ---- CHAINSAW MAN — aggressive red flicker + orange sparks ---- */
.badge-chip[data-badge-id="chainsaw_man"] {
  background: linear-gradient(135deg, #1a0000, #2a0500);
  border: 1.5px solid #ff2200;
  animation: chainsawFlicker 1.8s infinite;
}

@keyframes chainsawFlicker {
  0%,85%,87%,89%,100% {
    box-shadow:
      0 0 8px rgba(255,34,0,0.6),
      0 0 16px rgba(255,100,0,0.2);
    border-color: #ff2200;
    opacity: 1;
  }
  86% {
    box-shadow:
      0 0 20px rgba(255,34,0,0.9),
      4px 0 12px rgba(255,150,0,0.7),
      -4px 0 12px rgba(255,34,0,0.7);
    border-color: #ff6600;
    opacity: 0.8;
    transform: translateX(1px);
  }
  88% {
    box-shadow:
      0 0 14px rgba(255,34,0,0.7),
      -3px 0 10px rgba(255,100,0,0.5);
    border-color: #ff2200;
    opacity: 0.9;
    transform: translateX(-1px);
  }
}

.badge-chip[data-badge-id="chainsaw_man"] .badge-shimmer {
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(255,80,0,0.6) 45%,
    rgba(255,200,0,0.3) 50%,
    rgba(255,80,0,0.6) 55%,
    transparent 75%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 1.4s linear infinite;
}

/* ---- EMINENCE IN SHADOW — void black + atomic white/blue ---- */
.badge-chip[data-badge-id="eminence_in_shadow"] {
  background: linear-gradient(135deg, #000005, #000510);
  border: 1.5px solid #1a3a6a;
  animation: shadowPulse 2.2s ease-in-out infinite;
}

@keyframes shadowPulse {
  0%, 100% {
    box-shadow:
      0 0 4px rgba(20,80,200,0.3),
      0 0 8px rgba(255,255,255,0.05);
  }
  50% {
    box-shadow:
      0 0 14px rgba(20,120,255,0.7),
      0 0 28px rgba(100,180,255,0.3),
      0 0 42px rgba(255,255,255,0.1),
      inset 0 0 10px rgba(20,80,200,0.2);
  }
}

.badge-chip[data-badge-id="eminence_in_shadow"] .badge-shimmer {
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.6) 45%,
    rgba(100,180,255,0.5) 50%,
    rgba(255,255,255,0.6) 55%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 1.9s linear infinite;
}

/* ---- ONE PIECE — ocean blue wave + gold treasure ---- */
.badge-chip[data-badge-id="one_piece"] {
  background: linear-gradient(135deg, #001520, #002535);
  border: 1.5px solid #0077b6;
  animation: onePiecePulse 2.4s ease-in-out infinite;
}

@keyframes onePiecePulse {
  0%, 100% {
    box-shadow:
      0 0 6px rgba(0,119,182,0.5),
      0 0 12px rgba(200,168,75,0.1);
  }
  50% {
    box-shadow:
      0 0 14px rgba(0,180,255,0.7),
      0 0 28px rgba(0,119,182,0.4),
      0 0 42px rgba(200,168,75,0.2);
  }
}

.badge-chip[data-badge-id="one_piece"] .badge-shimmer {
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(0,180,255,0.5) 38%,
    rgba(200,168,75,0.6) 50%,
    rgba(0,180,255,0.5) 62%,
    transparent 80%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 2.1s linear infinite;
}

/* =========================================================
   BADGE POPOVER
========================================================= */

.badge-popover {
  position: fixed;
  z-index: 9999;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  animation: popoverIn 0.15s ease;
}

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

.badge-popover-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 3px;
}

.badge-popover-desc {
  font-size: 12px;
  opacity: 0.65;
  line-height: 1.4;
}

/* =========================================================
   RELEASE NOTES BUTTON
========================================================= */

.release-notes-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  font-size: 16px;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}
/* ── Changelog new release glow ── */
.release-notes-btn.has-new-release {
  animation: changelogPulse 2s ease-in-out infinite;
  position: relative;
}
.release-notes-btn.has-new-release::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg, #0d0d14);
}
@keyframes changelogPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 179,71,107), 0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(var(--accent-rgb, 179,71,107), 0); }
}


.release-notes-btn:hover {
  opacity: 1;
  transform: none;
  filter: none;
  background: var(--accent);
  border-color: var(--accent);
}

/* =========================================================
   CHANGELOG MODAL
========================================================= */

.changelog-modal-content {
  max-width: 560px;
  max-height: 80dvh;
  overflow-y: auto;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.changelog-header {
  margin-bottom: 24px;
}

.changelog-header h2 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 4px;
}

.changelog-subtext {
  font-size: 13px;
  opacity: 0.55;
  margin: 0;
}

.changelog-releases {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.changelog-release {
  border-left: 2px solid var(--border);
  padding-left: 16px;
}

.changelog-release.is-latest {
  border-left-color: var(--accent);
}

.changelog-release-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.changelog-version {
  font-size: 12px;
  font-weight: 600;
  font-family: monospace;
  color: var(--accent);
  background: rgba(255,255,255,0.06);
  padding: 2px 7px;
  border-radius: 6px;
}

.changelog-new-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  background: var(--accent);
  color: #fff;
  letter-spacing: 0.04em;
}

.changelog-title {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}

.changelog-date {
  font-size: 11px;
  opacity: 0.45;
  margin-left: auto;
}

.changelog-entries {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.changelog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}

.changelog-page-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.changelog-page-btn:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: none;
  filter: none;
}

.changelog-page-btn:disabled {
  opacity: 0.3;
  cursor: default;
  transform: none;
  filter: none;
}

.changelog-page-label {
  font-size: 12px;
  opacity: 0.5;
  min-width: 40px;
  text-align: center;
}

.changelog-entries li {
  font-size: 13px;
  opacity: 0.8;
  line-height: 1.5;
}

/* =========================================================
   APP BAR
========================================================= */

.app-bar{
  position:relative;
  z-index:1000;
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
  display:flex;
  flex-direction:column;
}


/* =========================================================
   HEADER
========================================================= */

.app-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 24px;
  background:var(--card-glass, var(--card));
  border:1px solid var(--border);
  border-radius:20px 20px 0 0;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

.header-left,
.header-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.app-logo{ font-size:20px; }

.app-title{
  display:flex;
  align-items:center;
  gap:0;
  font-size:18px;
  font-weight:600;
}

.brand-my{ opacity:.75; font-weight:500; }
.brand-rose{ color:var(--accent); font-weight:700; }
.brand-list{ opacity:.9; font-weight:600; }


/* =========================================================
   USER AREA
========================================================= */

.user-placeholder{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  cursor:pointer;
}

.user-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
}

.menu-toggle{ display:none; }


/* =========================================================
   TOOLBAR
========================================================= */

.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:10px 24px 8px 24px;
  justify-content:center;
  align-items:center;
  background:rgba(0,0,0,.15);
  border:1px solid var(--border);
  border-top:none;
  border-radius:0 0 20px 20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

#search{
  min-width:220px;
  width:100%;
}


/* =========================================================
   SEARCH DROPDOWN
========================================================= */

.search-results {
  position: absolute;
  top: 110%;
  left: 0;
  width: 100%;
  max-height: 380px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 6px;
  /* Paint solid dark base first, then --bg on top.
     --bg is always the darkest theme value, giving a clearly distinct
     dropdown that feels part of the theme without blending into content. */
  background-color: #080a0d;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,.9);
  z-index: 1300;
  padding: 6px;
  box-sizing: border-box;
}

.search-results:empty { display: none; }

.search-item {
  padding: 8px;
  cursor: pointer;
  border-radius: 10px;
  transition: background .15s ease;
}

.search-item:hover {
  background: rgba(255,255,255,.06);
}

.search-item-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-poster {
  width: 42px;
  height: 60px;
  background: center/cover no-repeat rgba(255,255,255,0.06);
  border-radius: 6px;
  flex-shrink: 0;
}

.search-poster-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-info {
  min-width: 0;
  flex: 1;
}

.search-title {
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.search-year {
  font-size: 11px;
  opacity: .5;
}

.search-type-pill {
  font-size: 10px;
  opacity: .55;
  background: rgba(255,255,255,0.07);
  padding: 1px 6px;
  border-radius: 20px;
}

.search-empty {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  opacity: 0.4;
}

.search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 18px;
}

.search-loading-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: searchDotPulse 1.2s ease-in-out infinite;
}

.search-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.search-loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes searchDotPulse {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40%            { opacity: 1;   transform: scale(1); }
}

/* =========================================================
   SEARCH LOAD MORE BUTTON
========================================================= */

.search-load-more {
  display: block;
  width: calc(100% - 20px);
  margin: 6px 10px 10px;
  padding: 9px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  opacity: .7;
  cursor: pointer;
  transition: opacity .2s ease, border-color .2s ease;
  text-align: center;
}

.search-load-more:hover {
  opacity: 1;
  border-color: var(--accent);
  color: var(--accent);
  transform: none; /* override the global button hover lift */
}

.search-load-more:disabled {
  opacity: .4;
  cursor: default;
  transform: none;
  filter: none;
}

.card-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 5;
}

@media (max-width: 480px) {
  .card-actions {
    gap: 2px;
  }

  .show-name {
    font-size: 14px;
    padding-right: 80px;
  }
}

/* override remove-btn's own absolute positioning when inside card-actions */
.card-actions .remove-btn {
  position: static;
  top: auto;
  right: auto;
}

.card-star-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  font-size: 13px;
  color: #666;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  filter: none;
  text-shadow: none;
  opacity: 0.75;
}
.card-star-btn:hover {
  opacity: 1;
  color: #c8a84b;
  border-color: rgba(200,168,75,0.4);
  background: rgba(200,168,75,0.1);
  transform: scale(1.08);
  filter: none;
  text-shadow: 0 0 8px rgba(200,168,75,0.5);
}
.card-star-btn.is-featured,
.card-star-btn.is-featured:hover {
  color: #f0c040;
  border-color: rgba(240,192,64,0.5);
  background: rgba(200,168,75,0.15);
  opacity: 1;
  filter: none;
  text-shadow: 0 0 6px rgba(240,192,64,0.9), 0 0 12px rgba(200,168,75,0.6);
  transform: scale(1.05);
}

/* featured card glow */
.featured-pick {
  border: 1.5px solid #c8a84b !important;
  outline: 3px solid rgba(200, 168, 75, 0.15);
  outline-offset: 2px;
  margin-top: 16px;
}

/* public view: full badge shown below poster */
.recommended-badge {
  position: absolute;
  top: -10px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(90deg, #b8860b, #d4a017);
  color: #fff8e1;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

/* ===== HERO BADGES CENTER ===== */

.hero-badges-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.hero-badges-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 148px; /* fits exactly 3 × 40px chips + gaps */
}

.hero-badge-chip {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.1);
  transition: transform 0.15s, border-color 0.15s;
  position: relative;
}

.hero-badge-chip:hover {
  transform: scale(1.15);
  border-color: var(--accent);
}

.hero-badge-chip.tier-legendary { border-color: rgba(200,168,75,0.6); animation: heroLegendaryPulse 2s ease-in-out infinite; }
.hero-badge-chip.tier-epic      { border-color: rgba(192,57,43,0.6);  animation: heroEpicPulse 2s ease-in-out infinite; }
.hero-badge-chip.tier-special   { border-color: rgba(255,110,199,0.6); animation: heroSpecialPulse 1.8s ease-in-out infinite; }
.hero-badge-chip.tier-rare      { border-color: rgba(180,100,255,0.5); animation: heroRarePulse 2.5s ease-in-out infinite; }
.hero-badge-chip.tier-ultra-rare { border-color: rgba(0,200,255,0.6); animation: heroGlitchFlicker 3s infinite; }
.hero-badge-chip.tier-redeemable { border-color: rgba(168,85,247,0.6); animation: heroRarePulse 2.5s ease-in-out infinite; }
.hero-badge-chip.tier-uncommon  { border-color: rgba(46,204,113,0.5); animation: heroUncommonPulse 3s ease-in-out infinite; }
.hero-badge-chip.tier-roseday   { border-color: rgba(233,30,140,0.6); animation: heroRosedayPulse 2s ease-in-out infinite; }

@keyframes heroLegendaryPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(200,168,75,0.5), 0 0 10px rgba(200,168,75,0.2); }
  50%       { box-shadow: 0 0 14px rgba(200,168,75,1),   0 0 28px rgba(200,168,75,0.5); }
}
@keyframes heroEpicPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(192,57,43,0.6), 0 0 10px rgba(192,57,43,0.3); }
  50%       { box-shadow: 0 0 14px rgba(192,57,43,1),   0 0 26px rgba(200,100,50,0.6); }
}
@keyframes heroSpecialPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255,110,199,0.5), 0 0 12px rgba(200,168,75,0.2); }
  50%       { box-shadow: 0 0 16px rgba(255,110,199,1),  0 0 30px rgba(200,168,75,0.5); }
}
@keyframes heroRarePulse {
  0%, 100% { box-shadow: 0 0 4px rgba(180,100,255,0.4); }
  50%       { box-shadow: 0 0 12px rgba(180,100,255,0.9), 0 0 22px rgba(180,100,255,0.4); }
}
@keyframes heroGlitchFlicker {
  0%,89%,91%,93%,100% { box-shadow: 0 0 6px rgba(0,200,255,0.7); border-color: rgba(0,200,255,0.6); opacity:1; }
  90% { box-shadow: 4px 0 10px rgba(255,0,80,0.8), -4px 0 10px rgba(0,200,255,0.8); border-color: rgba(255,0,80,0.9); opacity:0.85; transform:translateX(1.5px) scale(1.15); }
  92% { box-shadow: -3px 0 8px rgba(255,0,80,0.7), 3px 0 8px rgba(0,200,255,0.7); border-color: rgba(0,200,255,0.9); opacity:0.9; transform:translateX(-1px) scale(1.15); }
}
@keyframes heroUncommonPulse {
  0%, 100% { box-shadow: 0 0 3px rgba(46,204,113,0.3); }
  50%       { box-shadow: 0 0 8px rgba(46,204,113,0.8), 0 0 14px rgba(46,204,113,0.3); }
}
@keyframes heroRosedayPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(233,30,140,0.5), 0 0 12px rgba(233,30,140,0.2); }
  50%       { box-shadow: 0 0 16px rgba(233,30,140,0.9), 0 0 30px rgba(233,30,140,0.5); }
}

.hero-badge-empty {
  font-size: 11px;
  opacity: 0.35;
  letter-spacing: 0.04em;
}

/* ===== MOBILE UTILITY DROPDOWN ===== */
.list-mobile-util-wrap {
  position: relative;
  display: none;
}

.list-mobile-util-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border) !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 8px 8px 0 0 !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
  opacity: 0.7 !important;
  letter-spacing: 0.1em;
  padding-bottom: 4px;
}

.list-mobile-util-btn:hover {
  opacity: 1 !important;
  color: var(--accent) !important;
}

.list-mobile-util-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 1px);
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px 0 10px 10px;
  padding: 6px;
  z-index: 100;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.list-mobile-util-dropdown.is-open {
  display: flex;
}

.list-mobile-util-dropdown .list-card-tab,
.list-mobile-util-dropdown .list-grid-btn,
.list-mobile-util-dropdown .list-filter-btn,
.mobile-util-item {
  display: flex !important;
  align-items: center;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  width: 100%;
  text-align: left;
  padding: 8px 12px !important;
  font-size: 13px !important;
  height: auto !important;
  opacity: 0.8 !important;
  cursor: pointer;
  background: transparent;
  color: var(--text);
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}

.list-mobile-util-dropdown .list-card-tab:hover,
.list-mobile-util-dropdown .list-grid-btn:hover,
.list-mobile-util-dropdown .list-filter-btn:hover,
.mobile-util-item:hover {
  opacity: 1 !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.mobile-util-item.is-active {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  opacity: 1 !important;
}

.mobile-util-item.is-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* on mobile — show ⋯ button, hide desktop utility tabs */
@media (max-width: 768px) {
  .list-mobile-util-wrap { display: flex; align-items: flex-end; }
  .list-card-tab,
  .list-grid-btn,
  .list-filter-wrap { display: none !important; }
}

/* ===== PERSONAL LIST PROFILE STRIP ===== */

.personal-profile-strip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.personal-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.personal-strip-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.personal-strip-lock {
  font-size: 22px;
  flex-shrink: 0;
  opacity: 0.85;
}

.personal-strip-identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.personal-strip-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.personal-strip-sub {
  font-size: 11px;
  color: var(--muted, rgba(230,233,238,0.45));
  letter-spacing: 0.02em;
}

.personal-strip-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.personal-strip-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.personal-strip-stat-airing strong {
  color: #2ecc71 !important; /* green — actively airing */
}

.personal-strip-stat-reading strong {
  color: #e8a838 !important; /* amber — actively reading */
}

.personal-strip-stat strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.personal-strip-stat span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  opacity: 0.5;
}

.personal-strip-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
  flex-shrink: 0;
}

.personal-strip-hint {
  font-size: 11px;
  color: var(--accent);
  opacity: 0.7;
  letter-spacing: 0.02em;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 2px;
}

@media (max-width: 600px) {
  .personal-strip-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .personal-strip-left { width: 100%; }
  .personal-strip-stats {
    width: 100%;
    justify-content: space-between;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
  }
  .personal-strip-divider { display: none; }
  .personal-strip-stat { flex: 1; align-items: center; min-width: 48px; }
}

/* ===================================== */

.list-hint {
  font-size: 12px;
  color: var(--text);
  text-align: center;
  padding: 6px 14px;
  margin: 0 0 6px;
  letter-spacing: 0.02em;
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
  backdrop-filter: blur(4px);
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.picks-hint {
  font-size: 12px;
  color: #c8a84b;
  text-align: center;
  padding: 6px 14px;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  backdrop-filter: blur(4px);
  opacity: 0.9;
}

/* hint short/full switching */
.hint-short { display: none; }
.hint-full  { display: inline; }

@media (max-width: 600px) {
  .hint-short { display: inline; }
  .hint-full  { display: none; }

  .list-hint {
    font-size: 11px;
    padding: 5px 10px;
    margin-bottom: 6px;
    white-space: nowrap;
  }

  .picks-hint {
    font-size: 11px;
    padding: 5px 10px;
    margin-bottom: 10px;
    white-space: nowrap;
  }
}

/* owner view: compact gold dot in top-left corner of card */
.pick-indicator {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c8a84b;
  box-shadow: 0 0 6px rgba(200, 168, 75, 0.7);
  z-index: 4;
}

/* modal pick button */
.modal-pick-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid rgba(184, 134, 11, 0.35);
  background: rgba(184, 134, 11, 0.08);
  color: #b8860b;
  transition: background 0.15s;
}
.modal-pick-btn:hover { background: rgba(184, 134, 11, 0.15); }
.modal-pick-btn.is-featured {
  background: rgba(184, 134, 11, 0.15);
  border-color: #c8a84b;
}
.modal-pick-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* =========================================================
   ICON BUTTON (REFRESH)
========================================================= */

.icon-btn{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.icon-btn:hover{
  background:var(--accent);
  color:#fff;
  transform:rotate(20deg);
}

.icon-btn.spinning{
  animation:spin 1s linear infinite;
  box-shadow:0 0 12px var(--accent);
}

.icon-btn.spinning:hover{
  transform:none;
}

@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}


/* =========================================================
   THEME BACKGROUND
========================================================= */

#theme-bg{
  position:fixed;
  /* Extend slightly beyond all edges so mobile browser chrome
     show/hide never reveals a gap — extra 100px on bottom covers
     the full address bar height on all devices */
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -100px;
  z-index:0;
  background-color: #080808; /* pre-load fallback only */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:1;
  transform:translateZ(0);
  will-change:auto;
}

/* All page content must sit above #theme-bg */
.app-bar,
.container {
  position: relative;
  z-index: 1;
}

/* #theme-bg::before is managed dynamically by themeService.js
   — SVG pattern with radial mask, fades from edges inward */

#theme-bg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,0) 40%,
      rgba(0,0,0,.65) 100%
    );
}


/* =========================================================
   FOOTER
========================================================= */

.app-footer{
  margin-top:80px;
  padding:40px 0;
  text-align:center;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  opacity:.85;
}

.app-footer button{
  background:none;
  border:1px solid var(--border);
  color:var(--text);
  padding:8px 18px;
  border-radius:999px;
}

.app-footer button:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

.footer-brand{
  font-size:14px;
  letter-spacing:.3px;
}

.footer-note{
  font-size:13px;
  opacity:.65;
  letter-spacing:.4px;
}

.footer-note .brand-rose{
  font-weight:600;
}


/* ================= MOBILE PERFORMANCE ================= */
@media (max-width: 768px) {

  /* disable card stagger animation — show instantly */
  .show-card {
    animation: none !important;
    opacity: 1 !important;
  }

  /* strip all card transitions on mobile — they fire constantly during scroll
     even when nothing is changing, wasting compositor time */
  .show-card {
    transition: none !important;
    will-change: auto !important;
  }

  /* disable card hover lift — no hover on touch */
  .show-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* disable grid title hover — can't hover on touch */
  .list-card-body.grid-view > .show-card::after {
    display: none !important;
  }

  /* reduce glow animation cost on mobile — static glow instead of animation */  .list-card-body.grid-view >
  /* promote scroll containers to own compositor layer */
  .list-card-body {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  /* hide all grid overlays on mobile — tap poster opens modal instead */
  .list-card-body.grid-view > .show-card > .grid-card-actions,
  .list-card-body.grid-view > .show-card >}


/* =========================================================
   HERO BADGE SIZE OVERRIDE
   Hero badges now use .badge-chip (same as user menu) so all
   animations and effects work identically. This class just
   sets the larger hero size.
========================================================= */
.hero-badge-chip-sz {
  width: 32px !important;
  height: 32px !important;
  font-size: 16px !important;
}


/* =========================================================
   FLOATING BACK TO TOP BUTTON
========================================================= */

#floatingTopBtn,
#floatingBottomBtn {
  position: fixed;
  z-index: 1200;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#floatingTopBtn    { right: 28px; bottom: 80px; }
#floatingBottomBtn { right: 28px; bottom: 28px; }

#floatingTopBtn.is-visible,
#floatingBottomBtn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#floatingTopBtn:hover,
#floatingBottomBtn:hover {
  filter: brightness(1.15);
  transform: translateY(-2px);
}

@media (max-width: 540px) {
  #floatingTopBtn    { right: 18px; bottom: 68px; width: 40px; height: 40px; font-size: 16px; }
  #floatingBottomBtn { right: 18px; bottom: 18px; width: 40px; height: 40px; font-size: 16px; }
}


/* =========================================================
   PREMIUM / EXCLUSIVE THEMES
========================================================= */

.umenu-premium-theme-section {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 12px;
  margin-top: 4px;
}

.umenu-premium-label {
  background: linear-gradient(90deg, #c8a84b, #e8d090, #c8a84b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
}

.umenu-premium-theme-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.umenu-premium-btn {
  background: linear-gradient(135deg,
    rgba(200,168,75,0.08),
    rgba(255,255,255,0.04)
  ) !important;
  border-color: rgba(200,168,75,0.35) !important;
  color: #e8d090 !important;
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: left;
  padding: 11px 16px;
  font-size: 13px;
  border-radius: 10px;
}

.umenu-premium-btn::before {
  content: "✦";
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 7px;
  color: #c8a84b;
  opacity: 0.7;
}

.umenu-premium-btn:hover {
  border-color: rgba(200,168,75,0.7) !important;
  background: linear-gradient(135deg,
    rgba(200,168,75,0.15),
    rgba(255,255,255,0.06)
  ) !important;
  color: #f0e0a0 !important;
}

.umenu-premium-btn.is-active {
  border-color: #c8a84b !important;
  background: linear-gradient(135deg,
    rgba(200,168,75,0.2),
    rgba(255,255,255,0.08)
  ) !important;
  color: #f0e0a0 !important;
  font-weight: 600 !important;
}


/* ===== SEARCH MODE TOGGLE ===== */
.search-mode-toggle {
  display: flex;
  gap: 4px;
  padding: 0 8px;
  flex-shrink: 0;
}

/* On mobile, stack the toggle below the search input */
@media (max-width: 500px) {
  .search-bar-wrap {
    flex-wrap: wrap;
    gap: 6px;
  }
  .search-bar-wrap #search {
    flex: 1 1 100%;
    min-width: 0;
  }
  .search-mode-toggle {
    padding: 0;
    width: 100%;
    justify-content: center;
  }
  .search-mode-btn {
    flex: 1;
    text-align: center;
  }
}
.search-mode-btn {
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.search-mode-btn.active {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}
.search-mode-btn:hover:not(.active) {
  border-color: rgba(255,255,255,0.2);
  color: var(--text);
}

/* ===== MANGA MODAL ===== */
.manga-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
  z-index: 800;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.manga-modal-overlay.open { display: flex; }

.manga-modal-content {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 640px;
  max-height: 90dvh;
  overflow-y: auto;
  position: relative;
}

.manga-modal-loading {
  display: flex;
  justify-content: center;
  padding: 60px;
}

.manga-modal-inner {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.manga-modal-top {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.manga-modal-cover {
  flex-shrink: 0;
  width: 120px;
}
.manga-cover-img {
  width: 120px;
  height: 170px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.manga-cover-empty {
  width: 120px;
  height: 170px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}

.manga-modal-header {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.manga-type-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.manga-type-badge {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}
.manga-status-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
}
.manga-status-badge.ongoing  { color: #2ecc71; border-color: #2ecc7160; }
.manga-status-badge.completed { color: #3498db; border-color: #3498db60; }
.manga-status-badge.hiatus   { color: orange;  border-color: #ffa50060; }
.manga-status-badge.cancelled { color: var(--danger); border-color: var(--danger,#e74c3c)60; }


/* MangaDex attribution */
.mangadex-credit {
  font-size: 10px;
  color: var(--muted);
  opacity: 0.5;
  text-align: center;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}
.mangadex-credit a { color: var(--accent); text-decoration: none; }

@media (max-width: 480px) {
  .manga-modal-top { flex-direction: column; align-items: center; text-align: center; }
  .manga-type-badges, .manga-modal-stats, .manga-modal-list-btns { justify-content: center; }
  .manga-modal-cover { width: 100px; }
  .manga-cover-img { width: 100px; height: 142px; }
}

/* Prevent manga search results overflowing on mobile */
.search-item-inner { min-width: 0; overflow: hidden; }
.search-info { min-width: 0; overflow: hidden; }
.search-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-meta  { flex-wrap: wrap; }

/* ===== EPISODE TRACKER MODAL ===== */
.episode-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(6px);
  z-index: 4500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.episode-modal-overlay.open { display: flex; }

.episode-modal-content {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 100%;
  max-width: 720px;
  max-height: 88dvh;
  overflow-y: auto;
  position: relative;
}

.episode-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
  z-index: 2;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color 0.15s;
}
.episode-modal-close:hover { color: var(--text); }

.episode-modal-header {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 1;
}

.episode-modal-show-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.episode-modal-season-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ep-season-counter {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.45;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.ep-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
  line-height: 1;
}
.ep-nav-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.ep-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.ep-season-selector { flex: 1; }
.episode-season-select {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: dark;
}

.episode-modal-season-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.ep-mark-all-btn {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  margin-left: auto;
}
.ep-mark-all-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.ep-mark-upto-select {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: var(--text);
  font-size: 11px;
  padding: 4px 6px;
  cursor: pointer;
  max-width: 140px;
}
.ep-mark-upto-select:hover {
  border-color: var(--accent);
}
.ep-mark-upto-select option {
  background: var(--card);
  color: var(--text);
}

/* ── Bubble grid ── */
.episode-bubble-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 20px 24px 28px;
}

.ep-bubble {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  user-select: none;
  flex-shrink: 0;
}
.ep-bubble:hover:not(.is-future) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  transform: scale(1.08);
}
.ep-bubble.is-future {
  opacity: 0.3;
  cursor: default;
  border-style: dashed;
}
.ep-bubble.is-seen {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: var(--accent);
}

/* Latest aired episode — amber top-border marker, distinct from the airing-today glow */
.ep-bubble-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
  transition: opacity 0.15s;
}
.ep-bubble.is-seen .ep-bubble-num { opacity: 0; }
.ep-bubble-pop {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--accent);
}

/* Pop animation */
@keyframes epPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.35); }
  55%  { transform: scale(0.9); }
  75%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.ep-bubble.is-popping { animation: epPop 0.4s cubic-bezier(0.36,0.07,0.19,0.97) forwards; }

@media (max-width: 480px) {
  .episode-modal-content { border-radius: 12px; }
  .episode-bubble-grid { gap: 6px; padding: 14px 16px 20px; }
  .ep-bubble { width: 38px; height: 38px; }
  .ep-bubble-num { font-size: 10px; }
}

/* ===== CREDITS BUTTON ===== */
.footer-credits-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.footer-credits-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ===== CREDITS MODAL ===== */
.credits-modal-overlay {
  align-items: center;
  justify-content: center;
}
.credits-modal-content {
  max-width: 560px;
  border-radius: 20px;
  overflow: hidden;
  padding: 0;
}
.credits-modal-inner {
  display: flex;
  flex-direction: column;
  max-height: 88dvh;
  overflow-y: auto;
}

/* Header */
.credits-header {
  text-align: center;
  padding: 36px 28px 24px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--accent) 12%, transparent) 0%,
    transparent 60%);
  border-bottom: 1px solid var(--border);
}
.credits-rose {
  font-size: 40px;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 60%, transparent));
}
.credits-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--text);
}
.credits-subtitle {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  opacity: 0.7;
}

/* Sections */
.credits-section {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.credits-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 14px;
  opacity: 0.8;
}

/* People */
.credits-people {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.credits-person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s;
}
.credits-person:hover {
  background: rgba(255,255,255,0.06);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
.credits-person[data-username] {
  cursor: pointer;
}
.credits-person[data-username]:hover .credits-person-role::after {
  content: " · view profile →";
  color: var(--accent);
  opacity: 0.8;
}

  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.credits-person-info { flex: 1; min-width: 0; }
.credits-person-name {
  font-size: 14px;
  font-weight: 700;
}
.credits-person-role {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.credits-person-badge {
  font-size: 18px;
  flex-shrink: 0;
}

/* APIs */
.credits-apis {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.credits-api-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: all 0.15s;
}
.credits-api-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translateX(2px);
}
.credits-api-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.credits-api-info { flex: 1; min-width: 0; }
.credits-api-name {
  font-size: 13px;
  font-weight: 700;
}
.credits-api-desc {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  opacity: 0.7;
}
.credits-api-arrow {
  font-size: 14px;
  color: var(--muted);
  flex-shrink: 0;
  opacity: 0.5;
}

.credits-footer-note {
  padding: 16px 24px;
  font-size: 10px;
  color: var(--muted);
  opacity: 0.4;
  text-align: center;
  font-style: italic;
}

/* ================= MOBILE KEYBOARD GAP FIX ================= */
/* Use dynamic viewport height so layout adapts when keyboard appears/disappears */
@supports (height: 100dvh) {
  @media (max-width: 768px) {
    html, body {
      min-height: 100dvh;
    }
  }
}

/* Prevent white gap by ensuring body background fills any leftover space */
@media (max-width: 768px) {
  body::after {
    content: '';
    display: block;
    height: env(keyboard-inset-height, 0px);
    background: var(--bg, #0a0a0f);
  }
}

/* =========================================================
   TOUCH DEVICE HOVER OVERRIDES
   Disable hover lift/glow effects on touch screens —
   on iOS/Android hover is emulated as a sticky state
   after tap, causing cards to appear shifted/glowing
   until the user taps elsewhere.
========================================================= */
@media (hover: none) {
  button:hover {
    transform: none;
    filter: none;
  }
  .show-card:hover {
    transform: none;
    filter: none;
    box-shadow: none;
  }
  .list-card:hover,
  .splash-card:hover {
    transform: none;
    filter: none;
  }
  .stat-link:hover {
    transform: none;
    border-color: var(--border);
  }
  .pub-view-back-btn:hover {
    transform: none;
    border-color: var(--border);
    color: var(--text);
    opacity: 0.8;
  }
  .follow-btn:hover {
    transform: none;
    filter: none;
  }
}

/* =========================================================
   PUBLIC PROFILE — INSIGHTS / STATS
========================================================= */
.pub-insights {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.pub-insights-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
}
.pub-insights-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pub-insight-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text);
  white-space: nowrap;
}
.pub-insight-chip.watching-chip  { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pub-insight-chip.hours-chip     { color: #f39c12; border-color: rgba(243,156,18,0.25); background: rgba(243,156,18,0.07); }
.pub-insight-chip.genre-chip     { color: var(--muted); }
.pub-insight-chip.manga-chip     { color: #a855f7; border-color: rgba(168,85,247,0.25); background: rgba(168,85,247,0.07); }
.pub-insight-chip.platform-chip  { color: var(--muted); }

/* =========================================================
   PUBLIC PROFILE — COMPARE BUTTON
========================================================= */
.pub-compare-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  transition: border-color 0.2s ease, color 0.2s ease;
  margin-top: 8px;
  white-space: nowrap;
}
.pub-compare-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: none;
  filter: none;
}

/* Stack compare + follow vertically, aligned right */
.pub-folder-tab-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

/* =========================================================
   PUBLIC PROFILE — EXPORT BUTTON
========================================================= */
.pub-export-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
  transform: none;
  filter: none;
}
.pub-export-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: none;
  filter: none;
}

/* ── Push notification preference rows ── */
.push-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  gap: 12px;
}
.push-pref-row:last-child { border-bottom: none; }
.push-pref-label {
  font-size: 13px;
  flex: 1;
}
.push-pref-toggle {
  width: 36px;
  height: 20px;
  appearance: none;
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
  border: none;
  outline: none;
}
.push-pref-toggle:checked {
  background: var(--accent);
}
.push-pref-toggle::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: transform 0.2s;
}
.push-pref-toggle:checked::after {
  transform: translateX(16px);
}
/* Bell toggle in show modal */
.modal-notify-btn {
  min-width: 36px;
  padding: 0 8px !important;
}

/* ── Mobile performance: disable backdrop-filter on small screens ────────────
   backdrop-filter: blur() is GPU-expensive on mobile and causes scroll lag,
   especially on Chromium-based browsers (Brave, Chrome Android).
   We replace it with a slightly more opaque background to maintain readability.
   This only affects screens ≤768px — desktop keeps the blur effects. */
@media (max-width: 768px) {
  .modal {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0,0,0,0.82);
  }
  .modal-content,
  .sub-modal-content {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .session-warning,
  #sessionWarning {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0,0,0,0.88);
  }
  /* Any remaining backdrop-filter usage */
  [style*="backdrop-filter"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ── Fix background-attachment: fixed on mobile ──────────────────────────────
   'fixed' causes a repaint on every scroll frame on mobile browsers causing
   visible background shifting and scroll jank. Force 'scroll' on mobile.     */
@media (max-width: 768px) {
  body, #theme-bg {
    background-attachment: scroll !important;
  }
}

/* ── Manga Reader ──────────────────────────────────────────────────────────── */

.manga-reader-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: var(--bg);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
/* Solid fallback behind the semi-transparent --bg on TMDB themes */
.manga-reader-modal::before {
  content: '';
  position: fixed;
  inset: 0;
  background: #0d0e11;
  z-index: -1;
}
.manga-reader-modal.open { display: flex; }

.manga-reader-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

/* Header */
.manga-reader-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}
.manga-reader-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #0d0e11;
  z-index: -1;
}
.manga-reader-close {
  background: none;
  border: none;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  opacity: 0.7;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.manga-reader-close:hover { opacity: 1; }
.manga-reader-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.manga-reader-status {
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}

/* Chapter controls */
.manga-reader-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}
.manga-reader-controls::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #0d0e11;
  z-index: -1;
}
.manga-reader-nav-btn {
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.manga-reader-nav-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.manga-reader-nav-btn:disabled { opacity: 0.3; cursor: default; }
.manga-reader-chapter-select {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
  padding: 7px 10px;
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
.manga-reader-chapter-select option {
  background: #1a1a1a;
  color: #f0f0f0;
  font-size: 13px;
  padding: 6px;
}

/* Page content area — scrollable */
.manga-reader-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: #111;
  -webkit-overflow-scrolling: touch;
}

/* Individual pages */
.manga-reader-page {
  width: 100%;
  line-height: 0;
}
.manga-reader-img {
  width: 100%;
  height: auto;
  display: block;
  background: rgba(255,255,255,0.03);
}
.manga-reader-page.page-error::after {
  content: '⚠ Page failed to load';
  display: block;
  text-align: center;
  padding: 32px;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.03);
}

/* Loading / empty states */
.manga-reader-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px 20px;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
}
.manga-reader-empty {
  padding: 60px 24px;
  text-align: center;
  font-size: 14px;
  color: rgba(255,255,255,0.4);
  line-height: 1.6;
}

/* ── Notification modal show rows ─────────────────────────────────────────── */
.notif-show-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 6px;
}
.notif-show-poster {
  width: 30px;
  height: 44px;
  border-radius: 4px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.08) center/cover no-repeat;
}
.notif-show-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-show-toggles {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex-shrink: 0;
  align-items: flex-end;
}
.notif-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  user-select: none;
}
.notif-toggle-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.notif-toggle-label span {
  font-size: 11px;
  opacity: 0.7;
}
.notif-toggle-label:has(input:checked) span {
  opacity: 1;
  color: var(--text);
}

/* ── Notification Center button pill ─────────────────────────────────────── */
.umenu-notif-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 20px;
  background: rgba(255,255,255,0.1);
  color: var(--muted);
  margin-left: auto;
  vertical-align: middle;
}

/* =========================================================
   GAMES UI
========================================================= */

/* ── Games Button ────────────────────────────────────────────── */
.games-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Hide games button entirely when not logged in */
body:not(.logged-in) .games-btn {
  display: none;
}

.games-btn:hover {
  opacity: 1;
  transform: none;
  filter: none;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── Game Hub Stats ─────────────────────────────────────────── */
.game-hub-stats {
  display: flex;
  gap: 20px;
  padding: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 24px;
}

.game-hub-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.game-hub-stat-label {
  font-size: 0.85rem;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.game-hub-stat-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--accent);
}

/* ── Games Grid ─────────────────────────────────────────────── */
.games-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.games-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.games-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.games-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

/* ── Game Cards ─────────────────────────────────────────────── */
.game-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  min-height: 120px;
}

.game-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.game-card.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.game-card-icon {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  margin: 0 auto;
}

.game-card-info {
  flex: 1;
  text-align: center;
}

.game-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.game-card-desc {
  font-size: 0.8rem;
  opacity: 0.7;
  line-height: 1.3;
}

.game-card-status {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 1rem;
}

/* ── Rare Finds Info ───────────────────────────────────────── */
.game-hub-rare-finds {
  margin-top: 24px;
  padding: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.game-hub-rare-finds-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--accent);
}

.game-hub-rare-finds-desc {
  font-size: 0.9rem;
  opacity: 0.8;
  line-height: 1.4;
  margin-bottom: 12px;
}

.game-hub-rare-finds-current {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* ── Difficulty Selection ──────────────────────────────────── */
.game-difficulty-section {
  margin-bottom: 16px;
}

.game-rewards-info-btn {
  width: 100%;
  margin-top: 12px;
  padding: 9px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.game-rewards-info-btn:hover {
  background: rgba(58,166,255,0.08);
  border-color: var(--accent);
}

/* ── Rewards Modal Content ─────────────── */
.game-rewards-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.game-rewards-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #888);
  margin-bottom: 8px;
}
.game-rewards-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
  gap: 10px;
}
.game-rewards-row-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.game-rewards-row-name {
  font-weight: 600;
}
.game-rewards-row-desc {
  font-size: 0.75rem;
  opacity: 0.55;
}
.game-rewards-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.game-rewards-chance {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
}
.game-rewards-chance.rare { color: #a78bfa; }
.game-rewards-chance.legendary { color: #f39c12; }
.game-rewards-note {
  font-size: 0.7rem;
  opacity: 0.45;
}
.game-rewards-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}
.game-rewards-level-note {
  font-size: 0.8rem;
  opacity: 0.5;
  text-align: center;
  padding: 4px 0;
}



.game-difficulty-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
}

.game-difficulty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.game-difficulty-btn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  color: var(--text);
}

.game-difficulty-btn:hover {
  border-color: var(--accent);
  background: rgba(58, 166, 255, 0.05);
}

.game-difficulty-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.game-difficulty-label {
  font-size: 1rem;
  font-weight: 700;
}

.game-difficulty-reward {
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 600;
}

.game-difficulty-desc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.72rem;
  opacity: 0.6;
  line-height: 1.5;
  margin-top: 2px;
}

/* ── Poster Puzzle Game ────────────────────────────────────── */
.game-play-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.game-play-area.hidden {
  display: none;
}

.poster-puzzle-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.poster-puzzle-image-container {
  position: relative;
  width: 300px;
  height: 450px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--border);
}

.poster-puzzle-image {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background-color: rgba(255,255,255,0.04);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0;
  filter: blur(40px) brightness(0.2);
  transition: opacity 0.15s ease;
}

.poster-puzzle-canvas {
  display: none; /* no longer used */
}

.poster-puzzle-progress,
.poster-puzzle-score {
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
}

.poster-puzzle-progress {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
}

.stage-progress,
.reveal-progress {
  font-size: 0.9rem;
}

.poster-puzzle-score {
  color: var(--accent);
  font-weight: 600;
}

.poster-puzzle-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.poster-puzzle-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 400px;
}

.poster-puzzle-game-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}

.poster-puzzle-choice-btn {
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.poster-puzzle-choice-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(58, 166, 255, 0.05);
}

.poster-puzzle-choice-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transition: opacity 0.2s ease;
}

.poster-puzzle-choice-btn.correct {
  border-color: #2ecc71;
  background: rgba(46, 204, 113, 0.1);
  color: #2ecc71;
  animation: correct-pulse 0.5s ease-out;
}

.poster-puzzle-choice-btn.incorrect {
  border-color: #e74c3c;
  background: rgba(231, 76, 60, 0.08);
  color: #e74c3c;
  opacity: 0.5;
  animation: incorrect-shake 0.5s ease-out;
  cursor: not-allowed;
}

@keyframes correct-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes incorrect-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}

.poster-puzzle-game-controls button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.poster-puzzle-guess {
  /* Keep for backward compatibility but hide */
  display: none;
}

.poster-puzzle-feedback {
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  font-weight: 500;
  min-height: 20px;
}

.poster-puzzle-feedback.correct {
  background: rgba(46, 204, 113, 0.1);
  color: #2ecc71;
  border: 1px solid rgba(46, 204, 113, 0.3);
}

.poster-puzzle-feedback.incorrect {
  background: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
  border: 1px solid rgba(231, 76, 60, 0.3);
}

.poster-puzzle-feedback.hint {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

/* ── Mobile Responsiveness ─────────────────────────────────── */
@media (max-width: 768px) {
  .game-hub-stats {
    gap: 12px;
    padding: 12px;
  }
  
  .games-row {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
  }
  
  .game-card {
    padding: 12px;
    min-height: 100px;
  }
  
  .game-card-icon {
    width: 32px;
    height: 32px;
    font-size: 1.2rem;
  }
  
  .game-difficulty-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  
  .game-difficulty-btn {
    padding: 12px 8px;
  }
  
  .poster-puzzle-image-container {
    width: 250px;
    height: 375px;
  }
  
  .poster-puzzle-controls {
    gap: 12px;
    width: 100%;
  }
  
  .poster-puzzle-choices {
    gap: 8px;
    max-width: none;
  }
  
  .poster-puzzle-choice-btn {
    padding: 10px 12px;
    font-size: 0.85rem;
    min-height: 45px;
  }
  
  .poster-puzzle-game-controls {
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  
  .poster-puzzle-game-controls button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .game-hub-stats {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .games-section-title {
    font-size: 1rem;
  }
  
  .poster-puzzle-image-container {
    width: 200px;
    height: 300px;
  }
}

/* ── Badge Discovery Modal ─────────────────────────────────── */
.badge-discovery-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  padding: 20px 0;
}

.badge-discovery-icon {
  font-size: 4rem;
  animation: badge-discovery-bounce 0.6s ease-out;
}

.badge-discovery-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
  background: linear-gradient(45deg, var(--accent), #f39c12);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(58, 166, 255, 0.3);
}

.badge-discovery-badge {
  display: flex;
  justify-content: center;
  padding: 10px;
}

.badge-discovery-description {
  font-size: 0.95rem;
  line-height: 1.4;
  opacity: 0.9;
  max-width: 300px;
}

@keyframes badge-discovery-bounce {
  0% { transform: scale(0.3) rotate(-10deg); opacity: 0; }
  50% { transform: scale(1.1) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Badge discovery modal backdrop animation */
#badgeDiscoveryModal.open {
  animation: badge-discovery-backdrop 0.4s ease-out;
}

@keyframes badge-discovery-backdrop {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ── Daily Bonus Strip ─────────────────────────────────────── */
.game-daily-bonus-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.game-daily-bonus-strip-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.45;
  margin-right: 2px;
  white-space: nowrap;
}

.game-daily-bonus-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: default;
  transition: opacity 0.2s;
}

.game-daily-bonus-pill.claimed {
  background: rgba(46, 204, 113, 0.12);
  border-color: rgba(46, 204, 113, 0.3);
  color: #2ecc71;
}

.game-daily-bonus-pill.unclaimed {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border);
  color: var(--muted);
  opacity: 0.6;
}

/* ── Word Game Clues Panel ─────────────────────────────────── */
.word-game-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.word-clues-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
}

.word-clue {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  animation: clue-appear 0.3s ease;
}

@keyframes clue-appear {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.word-clue-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  margin-top: 1px;
}

.word-clue-body {
  flex: 1;
  min-width: 0;
}

.word-clue-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.45;
  margin-bottom: 2px;
}

.word-clue-value {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
}

.word-clue-value.letter-hint {
  font-family: monospace;
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.word-clue-poster {
  width: 100%;
  height: 140px;
  border-radius: 8px;
  background-size: cover;
  background-position: center top;
  background-color: rgba(255,255,255,0.04);
  filter: blur(20px) brightness(0.6);
  transition: filter 0.4s ease;
  margin-top: 4px;
}

.word-clue-poster.revealed {
  filter: blur(0px) brightness(1);
}

/* ── Game Completion Modal ─────────────────────────────────── */
.game-completion-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 12px 0 4px;
}

.game-completion-icon {
  font-size: 3.5rem;
  animation: badge-discovery-bounce 0.5s ease-out;
}

.game-completion-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0;
  color: var(--accent);
}

.game-completion-title.failed {
  color: var(--danger, #e74c3c);
}

.game-completion-stats {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 0.9rem;
}

.game-completion-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.game-completion-stat-label {
  opacity: 0.65;
}

.game-completion-stat-value {
  font-weight: 700;
  color: var(--accent);
}

.game-completion-stat-value.danger {
  color: var(--danger, #e74c3c);
}

.game-completion-rewards {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
}

.game-completion-reward-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  background: rgba(58,166,255,0.07);
  border: 1px solid rgba(58,166,255,0.15);
  border-radius: 8px;
}

.game-completion-reward-label {
  opacity: 0.8;
}

.game-completion-reward-value {
  font-weight: 700;
  color: var(--accent);
}

.game-completion-reward-value.gold {
  color: #f39c12;
}

.game-completion-reward-value.purple {
  color: #a78bfa;
}

/* ── Completion modal action buttons ── */
.game-completion-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
  flex-wrap: wrap;
}
.game-completion-actions .primary-btn {
  flex: 2;
  min-width: 120px;
}
.game-completion-actions .secondary-btn {
  flex: 1;
  min-width: 80px;
}

/* ── Game card score display ── */
.game-card-scores {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}
.game-card-score-item {
  font-size: 0.72rem;
  opacity: 0.6;
}
.game-card-score-item strong {
  color: var(--accent);
  opacity: 1;
}

/* ── Daily leaderboard ── */
.game-hub-leaderboard {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.game-hub-leaderboard-tabs {
  display: flex;
  gap: 6px;
}

.leaderboard-tab {
  flex: 1;
  padding: 6px 4px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  transition: all 0.15s;
}
.leaderboard-tab:hover,
.leaderboard-tab.active {
  background: rgba(58,166,255,0.1);
  border-color: var(--accent);
  color: var(--accent);
}

.game-hub-leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  font-size: 0.82rem;
}
.leaderboard-row.is-you {
  background: rgba(58,166,255,0.08);
  border-color: rgba(58,166,255,0.25);
}
.leaderboard-rank {
  font-weight: 700;
  width: 22px;
  text-align: center;
  opacity: 0.5;
  font-size: 0.75rem;
}
.leaderboard-rank.top { opacity: 1; }
.leaderboard-name {
  flex: 1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leaderboard-score {
  font-weight: 700;
  color: var(--accent);
}
.leaderboard-diff {
  font-size: 0.7rem;
  opacity: 0.5;
  min-width: 40px;
  text-align: right;
}
.leaderboard-loading,
.leaderboard-empty {
  text-align: center;
  padding: 16px;
  opacity: 0.4;
  font-size: 0.85rem;
}