/* ============================================================
   04-glass.css — Surfaces
   No glassmorphism. No blur. Solid concrete surfaces.
   The old "glass" classes are kept for compatibility but
   redefined as flat dark surfaces with sharp borders.
   ============================================================ */

/* ── Compatibility shims (old class names → new styles) ───── */

.glass-surface {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
}

.glass-panel {
  background: var(--color-bg-panel);
  border-color: var(--color-border);
}

.glass-modal {
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border);
}

.glass-input {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--dur-fast) ease;
  padding: 0 var(--space-4) 0 calc(var(--space-4) + 28px);
  height: 40px;
  border-radius: var(--radius-xs);
}

.glass-input::placeholder { color: var(--color-text-faint); }
.glass-input:focus { border-color: var(--color-accent); }

.glass-divider {
  height: 1px;
  background: var(--color-border);
  border: none;
}

/* ── Surface variants ────────────────────────────────────────
   ──────────────────────────────────────────────────────────── */

.surface {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
}

.surface-raised {
  background: var(--color-bg-surface-2);
  border: 1px solid var(--color-border);
}

/* ── Accent border states ────────────────────────────────────
   ──────────────────────────────────────────────────────────── */

.border-accent { border-color: var(--color-accent) !important; }
.border-blue   { border-color: var(--color-accent-blue) !important; }

/* ── Ripple ──────────────────────────────────────────────────
   ──────────────────────────────────────────────────────────── */

.ripple {
  position: relative;
  overflow: hidden;
}

.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 20, 147, 0.2);
  transform: scale(0);
  animation: rippleExpand 0.5s linear forwards;
  pointer-events: none;
}

@keyframes rippleExpand { to { transform: scale(4); opacity: 0; } }

/* ── Rating badge ────────────────────────────────────────────
   Mono font, top-right corner of cards.
   ──────────────────────────────────────────────────────────── */

.rating-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-accent-gold);
  z-index: 2;
  pointer-events: none;
  border-radius: var(--radius-xs);
}

/* ── Episode badge ───────────────────────────────────────────
   ──────────────────────────────────────────────────────────── */

.episode-badge {
  position: absolute;
  bottom: var(--space-2);
  left: var(--space-2);
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  z-index: 2;
  border-radius: var(--radius-xs);
}

/* ── Sidebar active state ────────────────────────────────────
   ──────────────────────────────────────────────────────────── */

.sidebar-item.active {
  background: var(--accent-tint-sm);
  border-left: 3px solid var(--color-accent);
  color: var(--color-accent);
}

.sidebar-item.active .sidebar-icon {
  color: var(--color-accent);
}

/* ── Tag/chip ────────────────────────────────────────────────
   Bebas Neue, uppercase, sharp.
   ──────────────────────────────────────────────────────────── */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--color-bg-surface-2);
  border: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

.tag-accent {
  background: var(--accent-tint-md);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.tag-blue {
  background: var(--blue-tint-sm);
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.tag-gold {
  background: var(--gold-tint-sm);
  border-color: var(--color-accent-gold);
  color: var(--color-accent-gold);
}