/* ============================================================
   Backlog — UI Components
   Buttons, cards, inputs, badges, modals, flash messages
   ============================================================ */

/* ── Buttons ─────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  padding: 0.5625rem var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), opacity var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
  user-select: none;
}

.btn:active { transform: translateY(1px); }

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

.btn--secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border-color: var(--border);
}
.btn--secondary:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: transparent;
}
.btn--ghost:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.btn--danger {
  background: transparent;
  color: var(--error);
  border-color: transparent;
}
.btn--danger:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

.btn--sm {
  font-size: var(--text-xs);
  padding: var(--s-1) var(--s-3);
}

.btn--lg {
  font-size: var(--text-base);
  padding: var(--s-3) var(--s-6);
}

.btn--full { width: 100%; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.btn--random {
  font-size: var(--text-xs);
  padding: var(--s-1) var(--s-3);
  background: linear-gradient(135deg, var(--accent), #a855f7);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 12px rgba(99,102,241,.35);
  animation: random-btn-pulse 3s ease-in-out infinite;
}
.btn--random:hover {
  background: linear-gradient(135deg, var(--accent-light), #c084fc);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(99,102,241,.55);
  animation: none;
}
.btn--random:active { transform: translateY(0); }

@keyframes random-btn-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(99,102,241,.35); }
  50%       { box-shadow: 0 0 22px rgba(168,85,247,.6);  }
}

.btn--ai {
  font-size: var(--text-xs);
  padding: var(--s-1) var(--s-3);
  background: linear-gradient(135deg, #f59e0b, #f97316);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 12px rgba(245,158,11,.3);
  animation: ai-btn-pulse 3s ease-in-out infinite;
}
.btn--ai:hover {
  background: linear-gradient(135deg, #fbbf24, #fb923c);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(245,158,11,.55);
  animation: none;
}
.btn--ai:active { transform: translateY(0); }

@keyframes ai-btn-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(245,158,11,.3); }
  50%       { box-shadow: 0 0 22px rgba(249,115,22,.55); }
}

/* ── Role badges ─────────────────────────────────────────────── */

.role-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  line-height: 1.4;
  vertical-align: middle;
  margin-left: var(--s-2);
}
.role-badge--user {
  background: rgba(113,113,122,.18);
  color: #a1a1aa;
  border: 1px solid rgba(113,113,122,.3);
}
.role-badge--premium {
  background: linear-gradient(135deg, rgba(245,158,11,.2), rgba(249,115,22,.2));
  color: #fbbf24;
  border: 1px solid rgba(245,158,11,.4);
  box-shadow: 0 0 8px rgba(245,158,11,.15);
}
.role-badge--admin {
  background: rgba(239,68,68,.15);
  color: #f87171;
  border: 1px solid rgba(239,68,68,.3);
}

/* ── Forms ───────────────────────────────────────────────────── */

.form-group { display: flex; flex-direction: column; gap: var(--s-2); }

.form-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
}

.form-input,
.form-textarea,
.form-select {
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
}
.form-input::placeholder,
.form-textarea::placeholder { color: var(--text-muted); }

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.form-textarea { resize: vertical; min-height: 100px; }

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
  padding-right: var(--s-8);
  cursor: pointer;
  accent-color: var(--accent);
}

/* ── Custom select (accent-colored hover, replaces native <select>) ── */

.custom-select {
  position: relative;
  display: inline-block;
  width: 100%;
}

.custom-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
}

.custom-select__trigger:focus,
.custom-select--open .custom-select__trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.custom-select__arrow {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: var(--text-muted);
  transition: transform var(--t-fast);
}

.custom-select--open .custom-select__arrow {
  transform: rotate(180deg);
}

.custom-select__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hover);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t-fast), transform var(--t-fast);
  pointer-events: none;
}

.custom-select--open .custom-select__dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.custom-select__option {
  display: block;
  width: 100%;
  padding: var(--s-2) var(--s-4);
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.custom-select__option:hover,
.custom-select__option:focus {
  background: var(--accent);
  color: #fff;
  outline: none;
}

.custom-select__option--active {
  color: var(--accent);
  font-weight: 500;
}

.custom-select__option--active:hover,
.custom-select__option--active:focus {
  color: #fff;
}

.form-error {
  font-size: var(--text-xs);
  color: var(--error);
}

.form-hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* ── Media Card ──────────────────────────────────────────────── */

.card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.card__cover {
  width: 100%;
  aspect-ratio: 2/3;   /* poster ratio — good for all types */
  object-fit: cover;
  background: var(--bg-elevated);
  display: block;
}

/* Games: RAWG gives landscape art — use wider aspect ratio to reduce zoom */
.card[data-media-type="game"] .card__cover {
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center top;
}

.card__body {
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  flex: 1;
}

.card__title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  min-height: calc(var(--text-sm) * 1.35); /* reserve 1 line even for short titles */
}

.card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

/* ── Status badge ────────────────────────────────────────────── */

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
}

/* Bootstrap Icons in status dots — icon replaces the old circle dot */
.status-dot::before {
  font-family: "bootstrap-icons";
  font-style: normal;
  font-size: 0.7rem;
  line-height: 1;
  flex-shrink: 0;
}

.status-dot[data-status="planned"]     { color: var(--status-planned);     }
.status-dot[data-status="in_progress"] { color: var(--status-in-progress); }
.status-dot[data-status="on_hold"]     { color: var(--status-on-hold);     }
.status-dot[data-status="dropped"]     { color: var(--status-dropped);     }
.status-dot[data-status="completed"]   { color: var(--status-completed);   }
.status-dot[data-status="replaying"]   { color: var(--status-replaying);   }

.status-dot[data-status="planned"]::before     { content: "\f145"; } /* bi-bookmark        */
.status-dot[data-status="in_progress"]::before { content: "\f4f4"; } /* bi-play-fill        */
.status-dot[data-status="on_hold"]::before     { content: "\f4b2"; } /* bi-pause-circle     */
.status-dot[data-status="dropped"]::before     { content: "\f622"; } /* bi-x-circle         */
.status-dot[data-status="completed"]::before   { content: "\f26b"; } /* bi-check-circle-fill*/
.status-dot[data-status="replaying"]::before   { content: "\f130"; } /* bi-arrow-repeat     */

/* ── Modal status picker ─────────────────────────────────────── */

.status-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.status-picker__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

.status-picker__btn:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.status-picker__btn--active[data-value="planned"]     { border-color: var(--status-planned);     color: var(--status-planned);     background: rgba(59,130,246,.12);  }
.status-picker__btn--active[data-value="in_progress"] { border-color: var(--status-in-progress); color: var(--status-in-progress); background: rgba(34,197,94,.12);   }
.status-picker__btn--active[data-value="on_hold"]     { border-color: var(--status-on-hold);     color: var(--status-on-hold);     background: rgba(245,158,11,.12);  }
.status-picker__btn--active[data-value="dropped"]     { border-color: var(--status-dropped);     color: var(--status-dropped);     background: rgba(239,68,68,.12);   }
.status-picker__btn--active[data-value="completed"]   { border-color: var(--status-completed);   color: var(--status-completed);   background: rgba(16,185,129,.12);  }
.status-picker__btn--active[data-value="replaying"]   { border-color: var(--status-replaying);   color: var(--status-replaying);   background: rgba(168,85,247,.12);  }

/* ── Rating stars ────────────────────────────────────────────── */

.rating {
  font-size: var(--text-xs);
  color: #f59e0b;
  font-weight: 600;
}
.rating::before { content: '★ '; }

/* ── Favorite indicator ──────────────────────────────────────── */

.card__favorite {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  color: #f59e0b;
  font-size: 0.7rem;
  background: rgba(0,0,0,0.6);
  border-radius: var(--r-full);
  padding: 2px 4px;
  line-height: 1;
}

/* ── Flash messages ──────────────────────────────────────────── */

.flash-container {
  position: fixed;
  top: calc(var(--nav-h) + var(--s-4));
  right: var(--s-6);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  pointer-events: none;
}

.flash {
  pointer-events: all;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  font-size: var(--text-sm);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 260px;
  max-width: 380px;
  box-shadow: var(--shadow-md);
  animation: flash-in var(--t-normal) ease both;
}

.flash--success { border-color: rgba(34, 197, 94, 0.4); }
.flash--error   { border-color: rgba(239, 68, 68, 0.4); }
.flash--warning { border-color: rgba(245, 158, 11, 0.4); }
.flash--info    { border-color: rgba(59, 130, 246, 0.4); }

.flash__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.flash--success .flash__dot { background: var(--success); }
.flash--error   .flash__dot { background: var(--error);   }
.flash--warning .flash__dot { background: var(--warning); }
.flash--info    .flash__dot { background: var(--info);    }

@keyframes flash-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0);    }
}

.flash--dismiss {
  transition: opacity 0.3s, transform 0.3s;
  opacity: 0;
  transform: translateX(16px);
}

/* ── Empty state ─────────────────────────────────────────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-16) var(--s-6);
  text-align: center;
  color: var(--text-muted);
}

.empty-state__icon {
  font-size: 3rem;
  line-height: 1;
  opacity: 0.3;
}

.empty-state__title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-secondary);
}

/* ── Progress bar ────────────────────────────────────────────── */

.progress-bar {
  height: 3px;
  background: var(--bg-elevated);
  border-radius: var(--r-full);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-full);
  transition: width var(--t-normal);
  width: var(--progress-width, 0%);
}

/* ── Tag / Pill ──────────────────────────────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 2px var(--s-2);
}

/* ── Filter tabs ─────────────────────────────────────────────── */

.filter-tabs {
  display: flex;
  gap: var(--s-1);
  flex-wrap: wrap;
}

.filter-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: var(--s-1) var(--s-3);
  cursor: pointer;
  transition: all var(--t-fast);
  text-decoration: none;
  white-space: nowrap;
}
.filter-tab:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}
.filter-tab.active {
  color: var(--accent-contrast);
  background: var(--accent);
  border-color: var(--accent);
}

/* Per-type colored tabs */
.filter-tab {
  gap: var(--s-1);
}
.filter-tab__kanji {
  font-weight: 700;
  font-size: 0.9em;
  line-height: 1;
}

.filter-tab--game:hover  { color: #22c55e; border-color: rgba(34,197,94,.4); }
.filter-tab--movie:hover { color: #f87171; border-color: rgba(248,113,113,.4); }
.filter-tab--series:hover{ color: #60a5fa; border-color: rgba(96,165,250,.4); }
.filter-tab--book:hover  { color: #fbbf24; border-color: rgba(251,191,36,.4); }
.filter-tab--anime:hover { color: #e879f9; border-color: rgba(232,121,249,.4); }

.filter-tab--game.active  { background: rgba(34,197,94,.15);  border-color: rgba(34,197,94,.5);  color: #22c55e; }
.filter-tab--movie.active { background: rgba(248,113,113,.15); border-color: rgba(248,113,113,.5); color: #f87171; }
.filter-tab--series.active{ background: rgba(96,165,250,.15); border-color: rgba(96,165,250,.5);  color: #60a5fa; }
.filter-tab--book.active  { background: rgba(251,191,36,.15); border-color: rgba(251,191,36,.5);  color: #fbbf24; }
.filter-tab--anime.active { background: rgba(232,121,249,.15);border-color: rgba(232,121,249,.5); color: #e879f9; }

/* ── Search page ─────────────────────────────────────────────── */

.search-page {
  max-width: 960px;
}

.search-bar {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}

.search-bar__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.search-bar__icon {
  position: absolute;
  left: var(--s-4);
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}

.search-bar__input {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  color: var(--text-primary);
  font-size: var(--text-base);
  padding: var(--s-3) var(--s-4) var(--s-3) 2.75rem;
  transition: border-color var(--t-fast);
  outline: none;
}
.search-bar__input:focus {
  border-color: var(--accent);
}
.search-bar__input::placeholder { color: var(--text-muted); }

.search-bar__spinner {
  position: absolute;
  right: var(--s-4);
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-hover);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.search-section-title {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}

.search-loading {
  display: flex;
  justify-content: center;
  padding: var(--s-12) 0;
}
.search-loading__dots {
  display: flex;
  gap: var(--s-2);
  align-items: center;
}
.search-loading__dots span {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: dot-bounce 1.2s ease-in-out infinite;
}
.search-loading__dots span:nth-child(2) { animation-delay: 0.2s; }
.search-loading__dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%            { transform: scale(1);   opacity: 1;   }
}

/* ── Cover placeholder ───────────────────────────────────────── */

.cover-placeholder {
  width: 100%;
  aspect-ratio: 2/3;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 2rem;
}

/* ── Modal overlay ───────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  opacity: 0;
  pointer-events: none;        /* CRITICAL: don't block clicks when invisible */
  transition: opacity var(--t-normal);
}

/* When hidden attribute is set — fully remove from layout */
.modal-overlay[hidden] { display: none !important; }

.modal-overlay--visible {
  opacity: 1;
  pointer-events: auto;        /* Re-enable clicks only when modal is open */
}

.modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-hover);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  transform: translateY(-10px);
  transition: transform var(--t-normal);
}

.modal-overlay--visible .modal { transform: translateY(0); }

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
}

.modal__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

.modal__close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0 var(--s-1);
  line-height: 1;
  transition: color var(--t-fast);
  flex-shrink: 0;
}
.modal__close:hover { color: var(--text-primary); }

.modal__body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--border);
}

/* Confirm dialog — footer buttons right-aligned */
.modal--sm .modal__footer {
  justify-content: flex-end;
  gap: var(--s-3);
}

.modal__confirm-msg {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: 0;
}

/* Modal size variants */
.modal--sm { max-width: 380px; }
.modal--lg { max-width: 700px; }

/* Progress modal layout modifiers */
.modal-progress-group--fullspan { grid-column: 1 / -1; }

/* Confirm overlay on top of other modals */
.modal-overlay--confirm { z-index: 400; }

/* Solid danger button for destructive confirm actions */
.btn--danger-solid {
  background: var(--error);
  color: #fff;
  border-color: var(--error);
}
.btn--danger-solid:hover {
  background: #dc2626;
  border-color: #dc2626;
}

/* ── Toggle label ────────────────────────────────────────────── */

.toggle-label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  user-select: none;
}

.toggle-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── Statistics charts ───────────────────────────────────────── */

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-4);
}

.chart-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
}

.chart-card__title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-4);
}

/* ── Type completion rows ────────────────────────────────────── */

.type-row { margin-bottom: var(--s-3); }
.type-row:last-child { margin-bottom: 0; }

.type-row__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-1);
}

.type-row__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}

.type-row__label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  flex: 1;
}

.type-row__count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.type-row__bar {
  height: 4px;
  background: var(--bg-elevated);
  border-radius: var(--r-full);
  overflow: hidden;
}

.type-row__fill {
  width: var(--fill-width, 0%);
  height: 100%;
  border-radius: var(--r-full);
  transition: width var(--t-slow);
}

/* ── Utility classes for inline style removal ────────────────── */

.btn--success {
  background: transparent;
  color: var(--success);
  border-color: transparent;
}
.btn--success:hover {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

/* Color modifier for stat pill values */
.stat-pill__value--completed { color: var(--status-completed); }
.stat-pill__value--in-progress { color: var(--status-in-progress); }
.stat-pill__value--planned { color: var(--status-planned); }

/* Progress bar top margin */
.progress-bar--mt { margin-top: var(--s-2); }

/* Card action area */
.card__action { margin-top: auto; padding-top: var(--s-2); }

/* Genres text with small top margin */
.card__genres { margin-top: 2px; }

/* Accent color swatch (admin) */
.color-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  vertical-align: middle;
  background: var(--swatch-background, #999);
}

/* Inline form display */
.d-inline { display: inline; }

/* Search spinner centered */
.search-spinner--centered { margin: var(--s-6) auto; }

/* Scroll sentinel */
.scroll-sentinel { height: 1px; width: 100%; }

/* ── Skeleton card placeholders (infinite scroll loading) ────── */

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

/* Invisible row-filler — used to pad the last incomplete grid row
   so the skeleton row below aligns with the grid columns */
.card--ghost {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.skeleton-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.skeleton-card__cover {
  width: 100%;
  aspect-ratio: 2/3;
  background: linear-gradient(90deg,
    var(--bg-elevated) 25%,
    var(--bg-hover)    50%,
    var(--bg-elevated) 75%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-card__body {
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.skeleton-line {
  height: 9px;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg,
    var(--bg-elevated) 25%,
    var(--bg-hover)    50%,
    var(--bg-elevated) 75%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-line--title { width: 70%; }
.skeleton-line--meta  { width: 40%; }

/* ── Wiki tooltip ────────────────────────────────────────────── */

.wiki-tooltip {
  position: fixed;
  z-index: 500;
  width: 320px;
  max-height: 280px;
  background: var(--bg-surface);
  border: 1px solid var(--border-hover);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  display: flex;
  pointer-events: auto;
}

.wiki-tooltip[hidden] { display: none; }

.wiki-tooltip__img {
  width: 100px;
  min-height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

.wiki-tooltip__body {
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  overflow: hidden;
  flex: 1;
}

.wiki-tooltip__title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wiki-tooltip__desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.wiki-tooltip__loading {
  padding: var(--s-4);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* Mobile bottom-sheet variant */
.wiki-tooltip--mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  width: auto;
  max-height: 55vh;
  overflow: hidden;           /* body scrolls, not the whole sheet */
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  flex-direction: column;
  /* slide-up transition */
  transform: translateY(100%);
  transition: transform var(--t-normal);
}
.wiki-tooltip--mobile:not([hidden]) {
  transform: translateY(0);
}
/* Body scrolls; footer stays pinned at the bottom */
.wiki-tooltip--mobile .wiki-tooltip__body {
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

/* Backdrop — dims page behind mobile bottom sheet */
.wiki-backdrop {
  position: fixed;
  inset: 0;
  z-index: 499;               /* just below tooltip at 500 */
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.wiki-backdrop[hidden] { display: none; }

/* Footer row inside mobile tooltip (link + close button) */
.wiki-tooltip__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.wiki-tooltip__link {
  font-size: var(--text-xs);
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wiki-tooltip__close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-lg);
  cursor: pointer;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  line-height: 1;
  min-width: 2.5rem;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t-fast), background var(--t-fast);
}
.wiki-tooltip__close:hover,
.wiki-tooltip__close:active { color: var(--text-primary); background: var(--bg-elevated); }

/* ── Random picker modal ─────────────────────────────────────── */

.modal--random {
  width: min(460px, calc(100vw - 2 * var(--s-4)));
  max-height: calc(100dvh - 2 * var(--s-4));
  overflow-y: auto;
}

/* Body area */
.random-picker {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s-4) var(--s-4) var(--s-2);
}

/* Card wrapper — fixed height so modal doesn't jump between rolls */
.random-picker__card-wrap {
  width: 100%;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Spinning die shown while loading ── */
.random-picker__spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
}
.random-picker__die {
  font-size: 3rem;
  animation: random-die-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes random-die-spin {
  0%   { transform: rotate(0deg)   scale(1);    opacity: 1;   }
  40%  { transform: rotate(180deg) scale(1.15); opacity: 0.7; }
  100% { transform: rotate(360deg) scale(1);    opacity: 1;   }
}

/* ── The actual picked card (horizontal layout) ── */
.random-card {
  width: 100%;
  display: flex;
  gap: var(--s-4);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  /* entrance animation */
  animation: random-card-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes random-card-in {
  from { opacity: 0; transform: scale(0.82) translateY(16px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* Exit animation class added by JS before swapping */
.random-card--exit {
  animation: random-card-out 0.2s cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes random-card-out {
  from { opacity: 1; transform: scale(1)    translateY(0);     }
  to   { opacity: 0; transform: scale(0.88) translateY(-12px); }
}

.random-card__cover {
  width: 130px;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center top;
  background: var(--bg-elevated);
}

/* Cover placeholder when no image */
.random-card__cover--placeholder {
  width: 130px;
  flex-shrink: 0;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  min-height: 200px;
}

.random-card__body {
  flex: 1;
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  justify-content: center;
  overflow: hidden;
  min-width: 0;
}

.random-card__type {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.random-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  /* allow wrap — it's the hero text */
}

.random-card__meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.random-card__genres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}

.random-card__genre {
  font-size: var(--text-xs);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
}

.random-card__desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.55;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* Accept button pulsed highlight after card lands */
@keyframes random-accept-pulse {
  0%   { box-shadow: 0 0 0 0   var(--accent-muted); }
  60%  { box-shadow: 0 0 0 8px var(--accent-muted); }
  100% { box-shadow: 0 0 0 0   transparent; }
}
.random-accept--ready {
  animation: random-accept-pulse 0.6s 0.35s ease-out both;
}

/* ── Chart tooltip (dashboard) ───────────────────────────────── */

.chart-tooltip {
  position: fixed;
  background: var(--bg-elevated);
  border: 1px solid var(--border-hover);
  border-radius: var(--r-md);
  padding: 4px 8px;
  font-size: 11px;
  color: var(--text-primary);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms;
  z-index: 400;
  white-space: nowrap;
  left: var(--tooltip-x, 0);
  top: var(--tooltip-y, 0);
}

.chart-tooltip--visible { opacity: 1; }

/* ── Chart SVG ───────────────────────────────────────────────── */

.chart-svg {
  display: block;
  overflow: visible;
}

.chart-bar { cursor: default; }