/* ===== RESET & BASE ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #050505;
  --bg-card: #141414;
  --bg-card-hover: #1c1c1c;
  --bg-nav: rgba(0, 0, 0, 0.85);
  --red: #e60012;
  --red-hover: #ff1424;
  --red-deep: #b00010;
  --white: #ffffff;
  --gray: #8a8a8a;
  --gray-light: #b3b3b3;
  --gray-dark: #444;
  --font: 'Geist', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --transition: 0.25s ease;
  --card-radius: 8px;
  --hero-height: 92vh;
  --nav-height: 72px;
}

html {
  scroll-behavior: smooth;
  background: #000;
}

body {
  background-color: var(--bg);
  color: var(--white);
  font-family: var(--font);
  overflow-x: hidden;
  min-height: 100vh;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ===== NAVBAR ===== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 100%);
  transition: background var(--transition), backdrop-filter var(--transition);
}

.navbar.scrolled {
  background: var(--bg-nav);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 16px rgba(0,0,0,0.6);
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 36px;
}

/* LIVE NOW badge — centred horizontally in the navbar, only visible when
   the configured Twitch channel is streaming */
.live-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--red);
  color: var(--white);
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(230, 0, 18, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.live-badge[hidden] { display: none; }
.live-badge:hover {
  background: var(--red-hover);
  transform: translate(-50%, calc(-50% - 2px));
  box-shadow: 0 6px 20px rgba(230, 0, 18, 0.5);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: live-pulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.65); opacity: 1; }
  70%  { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);   opacity: 0.85; }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);     opacity: 1; }
}

.navbar-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.navbar-logo {
  height: 38px;
  width: auto;
  display: block;
  transition: transform var(--transition);
}

.navbar-brand:hover .navbar-logo {
  transform: scale(1.04);
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.navbar-links a {
  color: var(--white);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  transition: color var(--transition);
}

.navbar-links a:hover {
  color: var(--red);
}

/* Disabled nav link (e.g. "Merch" while it's not live yet) — shows a
   "Coming Soon" tooltip on hover and doesn't navigate anywhere. */
.navbar-links .nav-disabled {
  cursor: not-allowed;
  position: relative;
}

.navbar-links .nav-disabled:hover {
  color: var(--gray);
}

.navbar-links .nav-disabled::after {
  content: 'Coming Soon';
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: rgba(15, 15, 15, 0.96);
  border: 1px solid rgba(230, 0, 18, 0.55);
  color: var(--red);
  padding: 6px 12px;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

.navbar-links .nav-disabled:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  /* So the absolutely-positioned .search-input-inline anchors to the right
     edge of the navbar-right, not the navbar itself. */
  position: relative;
}

.social-icon,
.search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--white);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--transition), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  text-decoration: none;
}

.social-icon svg,
.search-icon svg {
  width: 18px;
  height: 18px;
}

.search-icon {
  /* The circle outline is invisible until hover */
  border: 2px solid transparent;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  transition: color var(--transition), transform var(--transition),
              opacity 0.25s ease, border-color var(--transition);
}

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

.social-icon:hover,
.search-icon:hover {
  color: var(--red);
  transform: scale(1.15);
}

.search-icon:hover {
  border-color: var(--red);
}

/* ===== HERO ===== */
.hero {
  position: relative;
  height: var(--hero-height);
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.85);
  transform: scale(1.05);
  transition: transform 6s ease, filter 1s ease;
}

.hero-bg.loaded {
  transform: scale(1);
}

/* Vignette: dark edges only, no red wash */
.hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.95) 0%, transparent 70%);
}

.hero-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.55) 35%, rgba(5,5,5,0.05) 65%, transparent 100%),
    /* Bottom-up shadow now stops earlier (38% instead of 55%) so it doesn't
       creep into the upper portion of the thumbnail. */
    linear-gradient(to top, rgba(5,5,5,1) 0%, rgba(5,5,5,0.45) 18%, transparent 38%);
}

.hero-content {
  position: relative;
  z-index: 10;
  padding: 0 56px 14% 56px;
  max-width: min(1100px, 80vw);
}

.hero-tags {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
  flex-wrap: wrap;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
}

.hero-tag-mature {
  height: 24px;
  width: auto;
  display: block;
  filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.6));
}

.hero-tag-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.55);
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--white);
  line-height: 1.4;
}

.hero-tag-sep {
  color: rgba(255,255,255,0.4);
  margin: 0 2px;
}

.hero-title {
  /* JS adds .title-medium / .title-long / .title-x-long based on character
     count so long titles scale down and stay fully visible. Wrapping is on
     so the title can break to a second line when scaling alone isn't enough. */
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -2px;
  text-transform: uppercase;
  margin-bottom: 14px;
  text-shadow: 3px 3px 12px rgba(0,0,0,0.9);
  font-family: var(--font);
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}
.hero-title.title-medium   { font-size: clamp(2.1rem, 5vw, 4.2rem); letter-spacing: -1.5px; }
.hero-title.title-long     { font-size: clamp(1.7rem, 4vw, 3.4rem); letter-spacing: -1px; }
.hero-title.title-x-long   { font-size: clamp(1.4rem, 3.2vw, 2.7rem); letter-spacing: -0.6px; }

@media (max-width: 600px) {
  .hero-title              { font-size: clamp(1.8rem, 8vw, 2.6rem); letter-spacing: -1px; }
  .hero-title.title-medium { font-size: clamp(1.6rem, 7vw, 2.3rem); letter-spacing: -0.8px; }
  .hero-title.title-long   { font-size: clamp(1.35rem, 6vw, 2rem); letter-spacing: -0.5px; }
  .hero-title.title-x-long { font-size: clamp(1.15rem, 5vw, 1.7rem); letter-spacing: -0.3px; line-height: 1.1; }
}

.hero-description {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  margin-bottom: 24px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 580px;
  text-shadow: 1px 1px 6px rgba(0,0,0,0.85);
  font-weight: 400;
}

.hero-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn-play,
.btn-subscribe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 32px;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: all var(--transition);
  min-width: 140px;
}

.btn-play {
  background: var(--white);
  color: #000;
}

.btn-play:hover {
  background: rgba(255,255,255,0.85);
  transform: translateY(-1px);
}

.btn-subscribe {
  background: var(--red);
  color: var(--white);
}

.btn-subscribe:hover {
  background: var(--red-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(230,0,18,0.35);
}

.btn-play svg,
.btn-subscribe svg {
  width: 20px;
  height: 20px;
}

/* ── Hero loader (centered circle spinner) ── */
/* Anchored to the whole hero, ignoring the hero-content's bottom alignment,
   so the spinner sits in the middle of the viewport while data loads. */
.hero-loader-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

.hero-loader {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.08);
  border-top-color: var(--red);
  animation: hero-loader-spin 0.9s linear infinite;
  box-shadow: 0 0 32px rgba(230, 0, 18, 0.35);
}

@keyframes hero-loader-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-loader { animation-duration: 2.4s; }
}

@media (max-width: 600px) {
  .hero-loader { width: 52px; height: 52px; border-width: 3.5px; }
}

/* ===== MAIN CONTENT ===== */
.content {
  position: relative;
  z-index: 10;
  /* Less overlap with the hero so the first category title starts lower */
  margin-top: -20px;
  padding-bottom: 80px;
  background: linear-gradient(to bottom, transparent 0, var(--bg) 60px);
}

/* ===== CATEGORY SECTIONS ===== */
.category-section {
  margin-bottom: 48px;
  padding: 0 56px;
  /* When the page jumps to #movies / #tvshows / #more, leave room above
     the title so it isn't hidden under the fixed navbar. */
  scroll-margin-top: calc(var(--nav-height) + 24px);
  /* Hidden by default; an IntersectionObserver flips .is-revealed on each
     section as it scrolls into view, giving a clean cascade as the user
     scrolls down the page. */
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.category-section.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .category-section {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

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

/* Whole title block is clickable → category.html#<id> */
.category-title-link {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.category-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.3px;
  transition: color 0.2s ease;
}

.category-title-link:hover .category-title { color: var(--gray-light); }

/* "Explore all ›" affordance — hidden until you hover the title (Netflix style) */
.category-explore {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--red);
  letter-spacing: 0.4px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.category-explore .arrow {
  display: inline-block;
  margin-left: 4px;
  font-weight: 700;
}
.category-title-link:hover .category-explore {
  opacity: 1;
  transform: translateX(0);
}

/* ===== CAROUSEL ===== */
.carousel-wrapper {
  position: relative;
  /* clip-x hides off-screen cards; clip (not hidden) doesn't create a scroll
     container, so overflow-y: visible is respected → card panels show below.
     overflow-clip-margin lets the hovered card's box-shadow paint past the
     clip edge so it doesn't get cut on the sides. */
  overflow-x: clip;
  overflow-y: visible;
  overflow-clip-margin: 40px;
}

.carousel-btn {
  position: absolute;
  top: 0;
  height: 100%;
  /* Below hovered cards (z-index 20 via JS) so the hovered card's shadow
     paints above the arrow. Above non-hovered cards (z-index 1). */
  z-index: 5;
  color: var(--white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 18px;
  transition: opacity var(--transition), background var(--transition);
  opacity: 0;
}

/* Symmetric SVG chevron — replaces the text character which had a built-in
   visual offset that made it look "not lined up". */
.carousel-btn svg {
  width: 28px;
  height: 28px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.carousel-wrapper:hover .carousel-btn:not(:disabled) { opacity: 1; }
.carousel-btn:disabled { opacity: 0 !important; pointer-events: none; }

.carousel-btn:hover svg { transform: scale(1.15); }

/* The shadow gradient behind each arrow covers the peeking edge — solid dark
   on the side where the arrow lives, fading to transparent toward the
   visible cards. */
.carousel-btn.prev {
  left: 0;
  width: 80px;
  justify-content: flex-start;
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.55) 55%,
    transparent 100%);
}

.carousel-btn.next {
  right: 0;
  /* Wider on the right because the peeking 6th card is ~70 px and we want
     the dark wash to cover it cleanly. */
  width: 100px;
  justify-content: flex-end;
  background: linear-gradient(to left,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.55) 55%,
    transparent 100%);
}

.carousel-btn.prev:hover {
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0.97) 0%,
    rgba(0, 0, 0, 0.7) 55%,
    transparent 100%);
}
.carousel-btn.next:hover {
  background: linear-gradient(to left,
    rgba(0, 0, 0, 0.97) 0%,
    rgba(0, 0, 0, 0.7) 55%,
    transparent 100%);
}

.carousel-overflow {
  /* horizontal clipping handled by .carousel-wrapper (overflow-x: clip) */
}

.carousel-track {
  display: flex;
  gap: 14px;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* No will-change here: it would create a stacking context that traps the
     cards' z-index inside the track, so the carousel arrow (which is a
     wrapper-level sibling) would always paint on top of a hovered card and
     cut its shadow. */
}

/* ===== VIDEO CARDS ===== */
.video-card {
  /* The "- 70px" reserves a peek strip on the right where the next-card
     pokes through and the round arrow button sits on top of it. */
  flex: 0 0 calc((100% - 4 * 14px - 70px) / 5);
  position: relative;
  background: var(--bg-card);
  border-radius: var(--card-radius);
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
  transition: transform 0.28s ease, background 0.2s ease, box-shadow 0.3s ease;
  transform-origin: center center;
  /* translateZ(0) on base + hover keeps the card on a GPU layer the whole
     time, which kills the start-of-hover jitter and the sub-pixel sliver
     that otherwise appears above the thumbnail when scale() lands on a
     fractional pixel. backface-visibility nails the same fix on Safari. */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.video-card:hover {
  transform: translateZ(0) scale(1.18);
  background: var(--bg-card-hover);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75);
  /* z-index is managed by JS (initVideoCardHovers) so the actively-hovered
     card stays on top of any card still mid-animation from a previous hover. */
}

/* Edge anchoring is applied at all times (not just on :hover) so the
   shrink-back animation uses the same origin as the grow animation
   and the card doesn't visibly jump when the cursor leaves. The actual
   "leftmost / rightmost visible" cards are flagged dynamically by JS
   using these data attributes. */
.video-card[data-edge="left"]  { transform-origin: left center; }
.video-card[data-edge="right"] { transform-origin: right center; }

/* The "6th" peeking card is hint-only — not clickable, doesn't zoom on hover,
   and gets a fade-to-black overlay so it visually dissolves into the page. */
.video-card[data-peek="true"] {
  pointer-events: none;
}
.video-card[data-peek="true"]:hover {
  transform: none;
  background: var(--bg-card);
  box-shadow: none;
}
.video-card[data-peek="true"]::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Subtle fade — the carousel arrow's gradient shadow does most of the
     darkening on hover, this is just the "always-on" hint that the card
     is hint-only. */
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
  pointer-events: none;
  z-index: 4;
  border-radius: inherit;
}

/* ── View All card (only shown when a category has > CAROUSEL_VIDEO_LIMIT videos) ── */
.view-all-card {
  /* Same width as a regular card so it sits flush with the right edge of
     the carousel when scrolled to the end. No aspect-ratio so the flex
     row stretches it to match the height of the surrounding video cards. */
  flex: 0 0 calc((100% - 4 * 14px - 70px) / 5);
  background: var(--bg-card);
  border: 1.5px solid rgba(230, 0, 18, 0.28);
  border-radius: var(--card-radius);
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  transition: transform 0.25s ease, background-color 0.25s ease,
              border-color 0.25s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 1;
}
.view-all-card:hover {
  transform: scale(1.04);
  background: var(--bg-card-hover);
  border-color: var(--red);
  box-shadow: 0 12px 30px rgba(230, 0, 18, 0.22);
}
.view-all-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.view-all-card svg {
  width: 36px;
  height: 36px;
  color: var(--red);
  transition: transform 0.25s ease;
}
.view-all-card:hover svg { transform: translateX(4px); }
.view-all-label {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--red);
}
@media (max-width: 1400px) { .view-all-card { flex: 0 0 calc((100% - 3 * 14px - 60px) / 4); } }
@media (max-width: 1100px) { .view-all-card { flex: 0 0 calc((100% - 2 * 14px - 50px) / 3); } }
@media (max-width: 800px)  { .view-all-card { flex: 0 0 calc((100% - 14px - 40px) / 2); } }
@media (max-width: 600px)  { .view-all-card { flex: 0 0 75%; } }

.card-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #0a0a0a;
}

.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* No transform/transition on the img itself. The card-level scale(1.18)
     already produces the hover zoom; layering an extra scale(1.04) on the
     img caused it to creep past the card's rounded-corner clip during the
     transition, leaking thin slivers along the left/right edges. */
}

/* Duration badge — bottom-left */
.card-duration {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0,0,0,0.85);
  color: var(--white);
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  z-index: 2;
}

/* (Category lives inline in .card-meta now, not on the thumbnail.) */

/* NEW badge — top-left */
.card-badge-new {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--red);
  color: var(--white);
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(230,0,18,0.4);
}

/* Play overlay on hover */
.card-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 1;
}

.video-card:hover .card-play-overlay { opacity: 1; }

.card-play-icon {
  width: 64px;
  height: 64px;
  background: rgba(0,0,0,0.72);
  border: 2.5px solid var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition);
  /* No padding offset — the triangle path itself is shaped so its visual
     centre-of-mass lands exactly at the viewBox centre. */
}

.video-card:hover .card-play-icon { transform: scale(1.06); }

.card-play-icon svg {
  width: 36px;
  height: 36px;
  fill: var(--white);
  display: block;
}

/* Card body — always-visible info section */
.card-body {
  padding: 12px 14px 14px;
}

.card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.card-channel {
  font-size: 0.78rem;
  color: var(--gray-light);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--gray);
  flex-wrap: wrap;
  row-gap: 4px;
}

.card-category-text {
  /* Match the views / reviews look — no special weight or color */
  white-space: nowrap;
}

.card-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 0.85rem;
  line-height: 1;
  letter-spacing: 0.5px;
}

.card-stars .star {
  color: var(--gray-dark);
}
.card-stars .star.filled {
  color: var(--red);
}

.card-dot {
  color: var(--gray-dark);
  font-size: 0.7rem;
}

.card-stat {
  white-space: nowrap;
}

/* ===== SKELETON LOADING ===== */
.skeleton-card {
  flex: 0 0 calc((100% - 4 * 14px - 70px) / 5);
  aspect-ratio: 16/10.5;
  background: linear-gradient(90deg, #141414 25%, #1f1f1f 50%, #141414 75%);
  background-size: 200% 100%;
  animation: skeleton-slide 1.5s infinite;
  border-radius: var(--card-radius);
}

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

/* ===== PLACEHOLDER (No Videos) ===== */
.no-videos-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 50px;
  border: 2px dashed #1a1a1a;
  border-radius: 8px;
  background: rgba(255,255,255,0.015);
}

.placeholder-icon {
  font-size: 3.5rem;
  opacity: 0.4;
}

.placeholder-text h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--gray-light);
}

.placeholder-text p {
  font-size: 0.85rem;
  color: var(--gray);
}

.placeholder-text a {
  color: var(--red);
  text-decoration: none;
  font-weight: 600;
}

.placeholder-text a:hover {
  text-decoration: underline;
}

/* ===== ERROR STATE ===== */
.error-state {
  padding: 24px;
  background: rgba(230,0,18,0.08);
  border: 1px solid rgba(230,0,18,0.3);
  border-radius: 8px;
  color: var(--gray-light);
  font-size: 0.875rem;
  line-height: 1.6;
}

.error-state strong { color: var(--red); }

.error-state code {
  background: rgba(255,255,255,0.08);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.8rem;
}

/* ===== API KEY BANNER ===== */
.api-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: linear-gradient(135deg, #1a0508, #2a0810);
  border-top: 2px solid var(--red);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.api-banner-text {
  font-size: 0.875rem;
  color: var(--gray-light);
  line-height: 1.5;
}

.api-banner-text strong { color: var(--white); }

.api-banner-text a {
  color: var(--red);
  text-decoration: none;
  font-weight: 600;
}

.api-banner-text a:hover { text-decoration: underline; }

.api-banner-text code {
  background: rgba(255,255,255,0.08);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.8rem;
}

.api-banner-close {
  background: none;
  border: none;
  color: var(--gray);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 4px;
  flex-shrink: 0;
  transition: color var(--transition);
}

.api-banner-close:hover { color: var(--white); }

/* ===== VIDEO MODAL ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

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

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.92);
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.modal-container {
  position: relative;
  z-index: 10;
  width: 92%;
  max-width: 1600px;
  max-height: 95vh;
  background: #0a0a0a;
  border-radius: 10px;
  overflow: hidden;
  transform: scale(0.95) translateY(20px);
  transition: transform 0.3s ease;
  box-shadow: 0 30px 80px rgba(0,0,0,0.95);
}

.modal.active .modal-container {
  transform: scale(1) translateY(0);
}

.modal-video-wrapper {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
}

.modal-video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
  background: rgba(0,0,0,0.7);
  color: var(--white);
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.modal-close:hover {
  background: var(--red);
  transform: scale(1.08);
}

.modal-body {
  padding: 22px 26px 26px;
}

.modal-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.3;
}

.modal-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  font-size: 0.85rem;
  color: var(--gray);
  flex-wrap: wrap;
}

.modal-meta-year {
  color: var(--red);
  font-weight: 700;
}

.modal-description {
  font-size: 0.9rem;
  color: var(--gray-light);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

.btn-yt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red);
  color: var(--white);
  border: none;
  padding: 10px 22px;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
}

.btn-yt:hover {
  background: var(--red-hover);
  transform: translateY(-1px);
}

/* ===== FOOTER ===== */
.footer {
  position: relative;
  padding: 60px 24px 36px;
  background: var(--bg);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.footer-signature {
  height: 45px;
  width: auto;
  display: block;
  filter: invert(1) brightness(0.85);
  margin-bottom: 4px;
  user-select: none;
  pointer-events: none;
}

.footer-copy {
  font-size: 0.78rem;
  color: #6a6a6a;
  letter-spacing: 0.2px;
  text-align: center;
}

.footer-admin-link {
  position: absolute;
  bottom: 12px;
  right: 18px;
  font-size: 0.65rem;
  color: #2a2a2a;
  text-decoration: none;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color var(--transition);
}

.footer-admin-link:hover { color: var(--red); }

/* ===== INLINE SEARCH ===== */

/* The bar morphs out of where the search icon sits — it's positioned
   absolutely against the right edge so it grows to the LEFT when expanding.
   This lets the icon disappear and the bar appear from the same point. */
.search-input-inline {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(20, 20, 20, 0.95);
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0;
  height: 32px;
  width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.3s ease,
    border-color 0.3s ease,
    opacity 0.2s ease;
}
.search-input-inline:focus-within { border-color: var(--red); }

.search-input-inline svg {
  width: 16px;
  height: 16px;
  color: var(--gray);
  flex-shrink: 0;
  transition: color var(--transition);
}
.search-input-inline:focus-within svg { color: var(--red); }

.search-input-inline input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--white);
  font-size: 0.9rem;
  font-family: var(--font);
  font-weight: 500;
  /* Fade in slightly after the bar has expanded */
  opacity: 0;
  transition: opacity 0.18s ease 0.22s;
}
.search-input-inline input::placeholder { color: #4a4a4a; }

.search-clear {
  background: transparent;
  border: none;
  color: var(--gray);
  font-size: 1.2rem;
  cursor: pointer;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
  /* Same delayed fade-in as the input field so it appears once the morph
     has finished expanding. */
  opacity: 0;
  transition:
    opacity 0.18s ease 0.22s,
    background-color var(--transition),
    color var(--transition);
}
.search-clear:hover { background: #2a2a2a; color: var(--white); }
body.searching .search-clear { opacity: 1; }

/* When body has .searching: socials slide left + fade out (so the morph
   reads as them being pushed aside by the expanding bar), the standalone
   search icon fades + shrinks out, and the inline bar expands width 0→320. */
body.searching .navbar-right .social-icon {
  transform: translateX(-22px);
  opacity: 0;
  pointer-events: none;
}
body.searching .navbar-right .search-icon {
  transform: scale(0.6);
  opacity: 0;
  pointer-events: none;
}

body.searching .search-input-inline {
  width: 320px;
  padding: 0 12px;
  border-color: #2c2c2c;
  opacity: 1;
  pointer-events: auto;
}

body.searching .search-input-inline input {
  opacity: 1;
}

/* Results popup occupies the full screen below the navbar with a blurred backdrop */
.search-popup {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  overflow-y: auto;
  padding: 30px 56px 60px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
/* Popup (and its blurred backdrop) only appears once the user starts typing,
   not when the bar first morphs in. */
body.searching-typing .search-popup {
  display: block;
  opacity: 1;
}

.search-popup-content {
  max-width: 1600px;
  margin: 0 auto;
}

.search-hint {
  text-align: center;
  color: #4a4a4a;
  font-size: 0.95rem;
  padding: 80px 20px;
  font-style: italic;
}

.search-meta {
  font-size: 0.95rem;
  color: var(--gray);
  margin-bottom: 22px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 700;
}
.search-meta strong { color: var(--white); }

.search-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.search-no-results {
  text-align: center;
  padding: 80px 20px;
  color: var(--gray);
}
.search-no-results-icon { font-size: 3rem; opacity: 0.3; margin-bottom: 12px; }
.search-no-results h4 { color: var(--gray-light); font-size: 1.05rem; font-weight: 600; margin-bottom: 6px; }
.search-no-results p { font-size: 0.85rem; color: var(--gray); }

/* ===== CATEGORY PAGE ===== */
.category-page {
  padding: calc(var(--nav-height) + 32px) 56px 80px;
  min-height: calc(100vh - 200px);
}

.category-page-header {
  margin-bottom: 32px;
}

.category-back {
  color: var(--gray);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-block;
  margin-bottom: 14px;
  letter-spacing: 0.3px;
  transition: color var(--transition);
}
.category-back:hover { color: var(--red); }

/* Category switcher tabs */
.category-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.category-tab {
  padding: 9px 20px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--gray-light);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.category-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.18);
}

.category-tab.active {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
  box-shadow: 0 6px 16px rgba(230, 0, 18, 0.28);
}

.category-tab.active:hover {
  transform: translateY(-1px);
}

.category-page-title {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -1px;
  margin-bottom: 6px;
}

.category-page-count {
  color: var(--gray);
  font-size: 0.9rem;
  letter-spacing: 0.4px;
  margin: 0;
  white-space: nowrap;
}

.category-page-description {
  color: var(--gray-light);
  font-size: 1rem;
  margin: 4px 0 0 0;
  letter-spacing: 0.1px;
}

/* Toolbar row: filters on the left, video count pinned to the right */
.category-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.category-toolbar .category-filters { margin-top: 0; }
.category-toolbar .category-page-count { margin-left: auto; }

.category-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

/* ── Filter selects ── */
.category-filters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-select {
  background: #131313;
  color: var(--white);
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 9px 38px 9px 14px;
  font-size: 0.88rem;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.2s ease, color 0.2s ease;
  min-width: 180px;
}

.filter-select:hover,
.filter-select:focus {
  border-color: var(--red);
}

.filter-select option {
  background: #131313;
  color: var(--white);
}

@media (max-width: 1100px) {
  .category-page { padding: calc(var(--nav-height) + 24px) 24px 60px; }
}

/* ===== SOCIALS PAGE ===== */
.socials-body { background: #050505; min-height: 100vh; }

.socials-page {
  position: relative;
  padding: calc(var(--nav-height) + 80px) 56px 100px;
  max-width: 1300px;
  margin: 0 auto;
  min-height: calc(100vh - 200px);
  /* Clip the 900px bg-glow so it doesn't push the document wider than the
     viewport on mobile (which was causing horizontal scroll). */
  overflow-x: clip;
}

/* Soft red glow behind everything */
.socials-bg-glow {
  position: absolute;
  top: 0;
  left: 50%;
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(230, 0, 18, 0.18) 0%, transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}

.socials-header {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 70px;
}

.socials-logo {
  display: block;
  width: clamp(180px, 26vw, 280px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 0 70px rgba(230, 0, 18, 0.55));
  animation: socials-logo-pulse 4s ease-in-out infinite;
  user-select: none;
  pointer-events: none;
}

@keyframes socials-logo-pulse {
  0%, 100% { filter: drop-shadow(0 0 70px rgba(230, 0, 18, 0.55)); }
  50%      { filter: drop-shadow(0 0 110px rgba(230, 0, 18, 0.78)); }
}

.socials-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
}

/* Staggered scale-in entrance for the social cards */
@keyframes social-card-enter {
  from { opacity: 0; transform: scale(0.78); }
  to   { opacity: 1; transform: scale(1); }
}

.socials-grid .social-card {
  /* `backwards` keeps each card invisible during its individual delay window */
  animation: social-card-enter 0.42s cubic-bezier(0.34, 1.32, 0.64, 1) backwards;
}

/* Tight 60 ms cascade so each card starts well before the previous one
   finishes — gives an overlapping wave instead of a one-by-one queue. */
.socials-grid .social-card:nth-child(1) { animation-delay: 0s; }
.socials-grid .social-card:nth-child(2) { animation-delay: 0.06s; }
.socials-grid .social-card:nth-child(3) { animation-delay: 0.12s; }
.socials-grid .social-card:nth-child(4) { animation-delay: 0.18s; }
.socials-grid .social-card:nth-child(5) { animation-delay: 0.24s; }
.socials-grid .social-card:nth-child(6) { animation-delay: 0.30s; }
.socials-grid .social-card:nth-child(7) { animation-delay: 0.36s; }
.socials-grid .social-card:nth-child(8) { animation-delay: 0.42s; }

.social-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 22px 24px;
  border-radius: 14px;
  background: #121212;
  border: 1px solid #1e1e1e;
  text-decoration: none;
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.social-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.social-card:hover { transform: translateY(-6px); }
.social-card:hover::before { opacity: 0.18; }

.social-card-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  transition: background 0.3s ease, transform 0.3s ease;
  align-self: flex-start;
}
.social-card-icon svg {
  width: 26px;
  height: 26px;
  color: var(--white);
}
.social-card:hover .social-card-icon { transform: scale(1.08); }

.social-card-info {
  margin-top: auto;
}

.social-card-name {
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.8px;
  margin-bottom: 4px;
}

.social-card-handle {
  font-size: 0.82rem;
  color: var(--gray-light);
  font-family: 'SF Mono', 'Menlo', monospace;
}

/* ── Per-platform brand treatments ── */
.social-youtube::before {
  background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
}
.social-youtube:hover {
  border-color: #ff0000;
  box-shadow: 0 18px 44px rgba(255,0,0,0.35);
}
.social-youtube:hover .social-card-icon { background: rgba(255,0,0,0.25); }

.social-twitch::before {
  background: linear-gradient(135deg, #9146ff 0%, #6441a5 100%);
}
.social-twitch:hover {
  border-color: #9146ff;
  box-shadow: 0 18px 44px rgba(145,70,255,0.35);
}
.social-twitch:hover .social-card-icon { background: rgba(145,70,255,0.28); }

.social-discord::before {
  background: linear-gradient(135deg, #5865f2 0%, #404eed 100%);
}
.social-discord:hover {
  border-color: #5865f2;
  box-shadow: 0 18px 44px rgba(88,101,242,0.35);
}
.social-discord:hover .social-card-icon { background: rgba(88,101,242,0.28); }

.social-patreon::before {
  background: linear-gradient(135deg, #ff424d 0%, #d4313a 100%);
}
.social-patreon:hover {
  border-color: #ff424d;
  box-shadow: 0 18px 44px rgba(255,66,77,0.35);
}
.social-patreon:hover .social-card-icon { background: rgba(255,66,77,0.28); }

.social-x::before {
  background: linear-gradient(135deg, #2a2a2a 0%, #000 100%);
}
.social-x:hover {
  border-color: #555;
  box-shadow: 0 18px 44px rgba(255,255,255,0.08);
}
.social-x:hover .social-card-icon { background: rgba(255,255,255,0.14); }

.social-instagram::before {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.social-instagram:hover {
  border-color: #dc2743;
  box-shadow: 0 18px 44px rgba(220,39,67,0.35);
}
.social-instagram:hover .social-card-icon {
  background: linear-gradient(135deg, rgba(240,148,51,0.3), rgba(188,24,136,0.3));
}

.social-tiktok::before {
  background: linear-gradient(135deg, #69c9d0 0%, #ee1d52 100%);
}
.social-tiktok:hover {
  border-color: #ee1d52;
  box-shadow: 0 18px 44px rgba(238,29,82,0.35);
}
.social-tiktok:hover .social-card-icon {
  background: linear-gradient(135deg, rgba(105,201,208,0.3), rgba(238,29,82,0.3));
}

@media (max-width: 1100px) {
  .socials-page { padding: calc(var(--nav-height) + 48px) 24px 80px; }
}
@media (max-width: 600px) {
  /* The big DOZA logo in the socials-header is the branding on this page;
     the navbar wordmark is redundant on mobile and just eats screen space. */
  .socials-body .navbar-logo { display: none; }

  /* With the wordmark gone, pull the content up a bit since the navbar
     visually has less weight now. */
  .socials-page { padding: calc(var(--nav-height) + 16px) 16px 60px; }
  .socials-header { margin-bottom: 28px; }
  .socials-logo { width: clamp(140px, 44vw, 220px); }

  .socials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .social-card {
    padding: 14px;
    gap: 10px;
    min-height: auto;
  }
  .social-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
  }
  .social-card-icon svg { width: 18px; height: 18px; }
  .social-card-name { font-size: 1rem; letter-spacing: -0.5px; }
  .social-card-handle { font-size: 0.7rem; }
}

/* ===== ADMIN PAGE ===== */
.admin-body {
  background: #050505;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--white);
}

.admin-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

.login-card {
  background: #0f0f0f;
  border: 1px solid #1f1f1f;
  border-radius: 12px;
  padding: 48px;
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.login-logo-img {
  height: 48px;
  margin: 0 auto 12px;
  display: block;
}

.login-subtitle {
  color: var(--gray);
  font-size: 0.875rem;
  margin-bottom: 32px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-form input {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  color: var(--white);
  padding: 14px 16px;
  border-radius: 6px;
  font-size: 1rem;
  outline: none;
  transition: border-color var(--transition);
  width: 100%;
  font-family: var(--font);
}

.login-form input:focus { border-color: var(--red); }
.login-form input::placeholder { color: #555; }

.btn-login {
  background: var(--red);
  color: var(--white);
  border: none;
  padding: 14px;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  width: 100%;
}

.btn-login:hover {
  background: var(--red-hover);
  transform: translateY(-1px);
}

.login-error {
  color: #ff4444;
  font-size: 0.8rem;
  text-align: center;
  display: none;
}

.login-error.visible { display: block; }

.admin-panel {
  display: none;
  max-width: 920px;
  margin: 0 auto;
  padding: 36px 24px;
}

.admin-panel.visible { display: block; }

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

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

.admin-logo-img {
  height: 30px;
  display: block;
}

.admin-badge {
  background: rgba(230,0,18,0.15);
  border: 1px solid rgba(230,0,18,0.4);
  color: var(--red);
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.btn-logout {
  background: transparent;
  border: 1px solid #2a2a2a;
  color: var(--gray);
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font);
}

.btn-logout:hover {
  border-color: var(--white);
  color: var(--white);
}

.admin-section {
  background: #0f0f0f;
  border: 1px solid #1c1c1c;
  border-radius: 10px;
  padding: 28px;
  margin-bottom: 24px;
}

.admin-section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-section-title .icon {
  background: rgba(230,0,18,0.15);
  color: var(--red);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.admin-section-title .category-count {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--red);
}

/* Collapsible section ("More" Videos list) */
.admin-collapsible { padding: 0; }
.admin-collapsible > summary {
  cursor: pointer;
  list-style: none;
  padding: 28px;
  user-select: none;
  border-radius: 10px;
  transition: background-color 0.2s ease;
}
.admin-collapsible > summary:hover { background: rgba(255, 255, 255, 0.015); }
.admin-collapsible > summary::-webkit-details-marker { display: none; }
.admin-collapsible > summary::marker { display: none; }
.admin-collapsible > summary > .admin-section-title { margin-bottom: 0; }
.admin-collapsible > div { padding: 0 28px 28px 28px; }

.admin-collapsible-chevron {
  margin-left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--gray);
  transition: transform 0.25s ease, color 0.2s ease;
}
.admin-collapsible-chevron svg { width: 16px; height: 16px; }
.admin-collapsible[open] > summary > .admin-section-title > .admin-collapsible-chevron {
  transform: rotate(180deg);
  color: var(--white);
}

.add-video-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.add-video-form input,
.add-video-form textarea {
  flex: 1;
  min-width: 200px;
  background: #050505;
  border: 1px solid #2a2a2a;
  color: var(--white);
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--transition);
  font-family: var(--font);
  line-height: 1.4;
  resize: vertical;
}

.add-video-form input:focus,
.add-video-form textarea:focus { border-color: var(--red); }
.add-video-form input::placeholder,
.add-video-form textarea::placeholder { color: #444; }

.btn-add {
  background: var(--red);
  color: var(--white);
  border: none;
  padding: 12px 22px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
}

.btn-add:hover { background: var(--red-hover); }
.btn-add:disabled { opacity: 0.5; cursor: not-allowed; }

.add-form-feedback {
  margin-top: 10px;
  font-size: 0.8rem;
  min-height: 20px;
}

.add-form-feedback.success { color: var(--red); }
.add-form-feedback.error { color: #ff4444; }

.admin-video-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}

.admin-video-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #050505;
  border: 1px solid #1a1a1a;
  border-radius: 6px;
  padding: 6px;
  transition: border-color var(--transition);
  min-width: 0;
}

.admin-video-item:hover { border-color: #333; }

.admin-video-thumb {
  width: 70px;
  flex-shrink: 0;
  aspect-ratio: 16/9;
  border-radius: 4px;
  object-fit: cover;
  background: #1a1a1a;
}

.admin-video-info {
  flex: 1;
  min-width: 0;
}

.admin-video-title {
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.admin-video-id {
  font-size: 0.66rem;
  color: var(--gray);
  font-family: 'SF Mono', Monaco, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-delete {
  background: rgba(255,68,68,0.1);
  border: 1px solid rgba(255,68,68,0.3);
  color: #ff4444;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition);
  font-family: var(--font);
}

.btn-delete:hover {
  background: rgba(255,68,68,0.25);
  border-color: #ff4444;
}

/* Icon-only remove button on the compact admin video cards */
.btn-delete-icon {
  background: transparent;
  border: 1px solid transparent;
  color: var(--gray);
  width: 26px;
  height: 26px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: all var(--transition);
}
.btn-delete-icon:hover {
  background: rgba(255,68,68,0.15);
  border-color: rgba(255,68,68,0.4);
  color: #ff4444;
}

.admin-empty {
  text-align: center;
  padding: 40px;
  color: var(--gray);
}

.admin-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  opacity: 0.4;
}

.admin-hint {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
  font-size: 0.75rem;
  color: var(--gray);
  line-height: 1.55;
}

.admin-hint strong { color: var(--gray-light); }

.admin-hint code {
  background: rgba(255,255,255,0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 0.75rem;
  color: #ddd;
}

/* ── Admin tabs ── */
.admin-tabs {
  display: flex;
  gap: 4px;
  margin: 8px 0 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.admin-tab {
  background: transparent;
  border: none;
  color: var(--gray-light);
  padding: 12px 22px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
  letter-spacing: 0.2px;
}
.admin-tab:hover { color: var(--white); }

.admin-tab.is-active { color: var(--white); }
.admin-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--red);
  border-radius: 2px 2px 0 0;
}

.admin-tab-panel { display: none; }
.admin-tab-panel.is-active {
  display: block;
  animation: tab-panel-fade 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes tab-panel-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .admin-tabs { gap: 2px; }
  .admin-tab { padding: 10px 16px; font-size: 0.88rem; }
}

/* ── Achievements admin form ── */
.add-achievement-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.add-achievement-form input[type="text"] {
  background: #050505;
  border: 1px solid #2a2a2a;
  color: var(--white);
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--transition);
  font-family: var(--font);
}
.add-achievement-form input[type="text"]:focus { border-color: var(--red); }

.add-achievement-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.add-achievement-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--gray-light);
}
.add-achievement-field select {
  background: #050505;
  border: 1px solid #2a2a2a;
  color: var(--white);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: var(--font);
  outline: none;
  cursor: pointer;
  min-width: 180px;
}
.add-achievement-field select:focus { border-color: var(--red); }

.add-achievement-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--gray-light);
  cursor: pointer;
  user-select: none;
  padding-top: 18px; /* align with select label baseline */
}
.add-achievement-check input { accent-color: var(--red); width: 16px; height: 16px; cursor: pointer; }

/* ── Achievements admin list ── */
.achievement-admin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.achievement-admin-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #050505;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.achievement-admin-item:hover { background: #0a0a0a; }

.achievement-admin-item.is-completed.rarity-common { border-color: rgba(255,255,255,0.3); }
.achievement-admin-item.is-completed.rarity-rare { border-color: rgba(245,197,24,0.5); }
.achievement-admin-item.is-completed.rarity-legendary { border-color: rgba(230,0,18,0.6); }

.achievement-admin-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-light);
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
  padding: 0;
}
.achievement-admin-toggle:hover { background: rgba(255,255,255,0.06); color: var(--white); }
.achievement-admin-toggle.on { color: #4ade80; }
.achievement-admin-toggle svg { width: 18px; height: 18px; }

.achievement-admin-content { flex: 1; min-width: 0; }

.achievement-admin-title {
  color: var(--white);
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 4px;
  word-break: break-word;
}

.achievement-admin-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.72rem;
}

.achievement-admin-rarity {
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: var(--gray-light);
  font-weight: 700;
}
.achievement-admin-rarity.rarity-rare { background: rgba(245,197,24,0.14); color: #f5c518; }
.achievement-admin-rarity.rarity-legendary { background: rgba(230,0,18,0.18); color: var(--red); }

.achievement-admin-time {
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(245,197,24,0.1);
  color: #f5c518;
  border: 1px solid rgba(245,197,24,0.2);
  font-weight: 600;
}

.achievement-admin-state {
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  color: var(--gray-light);
  font-weight: 600;
}
.achievement-admin-item.is-completed .achievement-admin-state {
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
}

/* ── Featured thumbnail override ── */
.featured-thumb-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.featured-thumb-preview {
  width: 280px;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  background-color: #050505;
  background-size: cover;
  background-position: center;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.featured-thumb-preview.has-image {
  border-color: rgba(230, 0, 18, 0.4);
}

.featured-thumb-placeholder {
  font-size: 0.78rem;
  color: #555;
  font-style: italic;
  text-align: center;
  padding: 12px;
}

.featured-thumb-controls {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.featured-thumb-controls .btn-add,
.featured-thumb-controls .btn-delete {
  margin: 0;
}

.featured-thumb-source {
  font-size: 0.85rem;
  color: var(--gray-light);
  margin: 0;
}

.featured-thumb-source::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

/* ===== ACHIEVEMENTS PAGE ===== */
.achievements-body { background: #050505; min-height: 100vh; }

.achievements-page {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: calc(var(--nav-height) + 56px) 56px 100px;
  min-height: calc(100vh - 200px);
  /* Clip the 800px bg-glow so it doesn't push the document wider than the
     viewport on mobile (which was causing horizontal scroll). */
  overflow-x: clip;
}

/* Soft red glow behind the top of the page */
.achievements-bg-glow {
  position: absolute;
  top: 0;
  left: 50%;
  width: 800px;
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(230, 0, 18, 0.16) 0%, transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}

.achievements-header {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 64px;
  padding: 24px 0 4px;
  animation: achievements-header-enter 0.55s ease backwards;
}

/* Simple year mark — no background, just red bold text above the title */
.achievements-year-tape {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--red);
  font-family: var(--font);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 3px;
  position: relative;
  z-index: 1;
}

@keyframes achievements-header-enter {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .achievements-header { animation: none; }
}

.achievements-title {
  font-family: var(--font);
  font-size: clamp(2.8rem, 9vw, 5.5rem);
  font-weight: 900;
  color: var(--white);
  letter-spacing: -2.5px;
  line-height: 0.95;
  margin: 0 auto 16px;
  position: relative;
  z-index: 1;
}

.achievements-subtitle {
  font-size: 0.95rem;
  color: var(--gray-light);
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

.achievements-meta {
  display: flex;
  justify-content: center;
}

.achievements-progress {
  width: min(100%, 420px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.achievements-progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.achievements-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--red) 0%, var(--red-hover) 100%);
  box-shadow: 0 0 12px rgba(230, 0, 18, 0.5);
  /* Small delay so the bar fills AFTER the header has settled into place,
     giving a sequenced "page comes alive" feel rather than everything at once. */
  transition: width 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s;
}

.achievements-progress-text {
  font-size: 0.85rem;
  color: var(--gray-light);
  letter-spacing: 0.3px;
}
.achievements-progress-text strong {
  color: var(--white);
  font-weight: 700;
}

/* ── List ── */
.achievements-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.achievements-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--gray-light);
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.achievements-empty-hint {
  font-size: 0.85rem;
  margin-top: 6px;
  opacity: 0.7;
}

/* ── Pill ── */
.achievement {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px 16px 18px;
  background: #0d0d0d;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  transition: background 0.25s ease, border-color 0.25s ease,
              box-shadow 0.35s ease, transform 0.25s ease;
  /* Staggered entrance — each pill cascades in. The :nth-child delays below
     apply 60ms increments for an overlapping wave (rather than a queue). */
  animation: achievement-enter 0.55s cubic-bezier(0.25, 1.1, 0.4, 1) backwards;
}

@keyframes achievement-enter {
  from {
    opacity: 0;
    transform: translateX(-24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.achievement:nth-child(1)  { animation-delay: 0.00s; }
.achievement:nth-child(2)  { animation-delay: 0.06s; }
.achievement:nth-child(3)  { animation-delay: 0.12s; }
.achievement:nth-child(4)  { animation-delay: 0.18s; }
.achievement:nth-child(5)  { animation-delay: 0.24s; }
.achievement:nth-child(6)  { animation-delay: 0.30s; }
.achievement:nth-child(7)  { animation-delay: 0.36s; }
.achievement:nth-child(8)  { animation-delay: 0.42s; }
.achievement:nth-child(9)  { animation-delay: 0.48s; }
.achievement:nth-child(10) { animation-delay: 0.54s; }
.achievement:nth-child(n+11) { animation-delay: 0.60s; }

@media (prefers-reduced-motion: reduce) {
  .achievement { animation: none; }
}

.achievement:hover { transform: translateX(3px); }

.achievement-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.achievement-icon svg { width: 100%; height: 100%; display: block; }

.achievement-content { flex: 1; min-width: 0; }

.achievement-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
  letter-spacing: -0.2px;
}

.achievement-desc {
  font-size: 0.82rem;
  color: var(--gray-light);
  margin-top: 4px;
  line-height: 1.4;
}

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

.achievement-rarity-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--gray-light);
}

.achievement-countdown {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(245, 197, 24, 0.12);
  color: #f5c518;
  border: 1px solid rgba(245, 197, 24, 0.3);
  white-space: nowrap;
}

/* ── Pending state ── */
.achievement.is-pending {
  opacity: 0.75;
}
.achievement.is-pending .achievement-title { color: var(--gray-light); }

/* ── Completed (common) ── */
.achievement.is-completed {
  border-color: rgba(255, 255, 255, 0.45);
  background: #131313;
}
.achievement.is-completed .achievement-icon { color: var(--white); }

/* ── Rare ── */
.achievement.rarity-rare.is-pending {
  border-color: rgba(245, 197, 24, 0.25);
}
.achievement.rarity-rare.is-pending .achievement-rarity-badge {
  background: rgba(245, 197, 24, 0.1);
  color: #f5c518;
}
.achievement.rarity-rare.is-completed {
  border-color: #f5c518;
  background: linear-gradient(135deg, #131313 0%, #1a1608 100%);
  box-shadow:
    0 0 36px rgba(245, 197, 24, 0.4),
    0 0 12px rgba(245, 197, 24, 0.25),
    inset 0 0 20px rgba(245, 197, 24, 0.05);
}
.achievement.rarity-rare.is-completed .achievement-icon { color: #f5c518; }
.achievement.rarity-rare.is-completed .achievement-title { color: #f5c518; }
.achievement.rarity-rare.is-completed .achievement-rarity-badge {
  background: rgba(245, 197, 24, 0.18);
  color: #f5c518;
}

/* ── Legendary ── */
.achievement.rarity-legendary.is-pending {
  border-color: rgba(230, 0, 18, 0.3);
}
.achievement.rarity-legendary.is-pending .achievement-rarity-badge {
  background: rgba(230, 0, 18, 0.12);
  color: var(--red);
}
.achievement.rarity-legendary.is-completed {
  border-color: var(--red);
  background: linear-gradient(135deg, #131313 0%, #1c0608 100%);
  box-shadow:
    0 0 48px rgba(230, 0, 18, 0.55),
    0 0 16px rgba(230, 0, 18, 0.35),
    inset 0 0 28px rgba(230, 0, 18, 0.08);
  animation: legendary-pulse 3s ease-in-out infinite;
}
.achievement.rarity-legendary.is-completed .achievement-icon { color: var(--red); }
.achievement.rarity-legendary.is-completed .achievement-title { color: var(--red); }
.achievement.rarity-legendary.is-completed .achievement-rarity-badge {
  background: rgba(230, 0, 18, 0.2);
  color: var(--red);
}

@keyframes legendary-pulse {
  0%, 100% {
    box-shadow:
      0 0 48px rgba(230, 0, 18, 0.55),
      0 0 16px rgba(230, 0, 18, 0.35),
      inset 0 0 28px rgba(230, 0, 18, 0.08);
  }
  50% {
    box-shadow:
      0 0 64px rgba(230, 0, 18, 0.75),
      0 0 22px rgba(230, 0, 18, 0.5),
      inset 0 0 32px rgba(230, 0, 18, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .achievement.rarity-legendary.is-completed { animation: none; }
}

@media (max-width: 1100px) {
  .achievements-page { padding: calc(var(--nav-height) + 40px) 24px 80px; }
}
@media (max-width: 600px) {
  .achievements-page { padding: calc(var(--nav-height) + 24px) 16px 60px; }
  .achievements-header { margin-bottom: 40px; padding: 12px 0 4px; }
  .achievements-header .about-header-marks { display: none; }
  .achievements-header .about-stripes { width: 50px; height: 18px; }
  .achievements-year-tape { font-size: 0.8rem; padding: 6px 14px; letter-spacing: 2px; margin-bottom: 14px; }
  .achievements-title { font-size: clamp(2.2rem, 11vw, 4rem); letter-spacing: -1.5px; }
  .achievements-subtitle { font-size: 0.85rem; margin-bottom: 20px; }
  .achievement { padding: 14px 18px 14px 14px; gap: 12px; border-radius: 18px; }
  .achievement-icon { width: 26px; height: 26px; }
  .achievement-title { font-size: 0.92rem; }
  .achievement-desc { font-size: 0.75rem; }
  .achievement-rarity-badge { font-size: 0.58rem; padding: 2px 7px; }
  .achievement-countdown { font-size: 0.65rem; padding: 3px 8px; }
}

/* ===== ABOUT PAGE ===== */
.about-body { background: #050505; min-height: 100vh; }

.about-page {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: calc(var(--nav-height) + 56px) 56px 100px;
  min-height: calc(100vh - 200px);
  overflow-x: clip;
}

.about-bg-glow {
  position: absolute;
  top: 0;
  left: 50%;
  width: 800px;
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(230, 0, 18, 0.16) 0%, transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
}

.about-header {
  position: relative;
  z-index: 1;
  margin-bottom: 80px;
  padding: 0 0 10px;
  animation: about-header-enter 0.55s ease backwards;
}

/* ── Surveillance HUD top bar ── */
.surveillance-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  margin-bottom: 28px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(230, 0, 18, 0.35);
  border-radius: 2px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gray-light);
  position: relative;
}
/* Detection-bracket corners on the surveillance bar */
.surveillance-bar::before,
.surveillance-bar::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid var(--red);
}
.surveillance-bar::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.surveillance-bar::after  { bottom: -2px; right: -2px; border-left: none; border-top: none; }

.surveillance-bar-left,
.surveillance-bar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cam-id    { color: var(--red); font-weight: 800; }
.cam-feed  { opacity: 0.7; }
.cam-rec   { display: inline-flex; align-items: center; gap: 6px; color: var(--white); font-weight: 700; }
.cam-rec-dot {
  width: 7px;
  height: 7px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(230, 0, 18, 0.8);
  animation: cam-rec-pulse 1.2s ease-in-out infinite;
}
@keyframes cam-rec-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.cam-time {
  color: var(--white);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 70px;
  text-align: right;
}

/* ── Header grid (text left, agent portrait right) ── */
.header-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: end;
}
.header-left { min-width: 0; }
.header-right { display: flex; justify-content: flex-end; }

@media (max-width: 800px) {
  .header-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 28px;
  }
  .header-right { justify-content: center; }
}

/* The subtitle is left-aligned now; only constrain its width */
.about-header .about-subtitle {
  margin-left: 0;
  margin-right: 0;
}

/* ── Agent ID card (data block) ── */
.agent-id-card {
  display: inline-block;
  margin-top: 26px;
  padding: 14px 18px 12px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(230, 0, 18, 0.4);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  position: relative;
  text-align: left;
  min-width: 280px;
}
.agent-id-corner {
  position: absolute;
  width: 14px;
  height: 14px;
}
.agent-id-corner-tl { top: -2px; left: -2px; border-top: 2px solid var(--red); border-left: 2px solid var(--red); }
.agent-id-corner-br { bottom: -2px; right: -2px; border-bottom: 2px solid var(--red); border-right: 2px solid var(--red); }

.agent-id-row {
  display: flex;
  gap: 14px;
  padding: 3px 0;
  line-height: 1.5;
}
.agent-key {
  color: var(--red);
  font-weight: 800;
  min-width: 60px;
  letter-spacing: 1px;
}
.agent-val { color: var(--white); }
.agent-val-online {
  color: #4ade80;
  letter-spacing: 0;
}

/* ── Agent portrait placeholder / image frame ── */
.agent-portrait {
  position: relative;
  width: 240px;
  height: 300px;
  background: #0a0a0a;
  border: 1.5px solid rgba(230, 0, 18, 0.55);
  overflow: hidden;
}
.agent-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* When the image doesn't load, .is-empty hides the empty img element and
   surfaces the placeholder. Default state shows the placeholder behind the
   image so even if the image is missing visually, the area looks intentional. */
.agent-portrait-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--gray-light);
  font-size: 0.72rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background:
    linear-gradient(rgba(230,0,18,0.05), rgba(230,0,18,0.05)),
    repeating-linear-gradient(0deg, transparent 0, transparent 7px, rgba(255,255,255,0.02) 7px, rgba(255,255,255,0.02) 8px);
  pointer-events: none;
  z-index: 0;
}
.agent-portrait:not(.is-empty) .agent-portrait-placeholder { display: none; }
.agent-portrait-plus {
  font-size: 2.2rem;
  font-weight: 300;
  color: rgba(230, 0, 18, 0.7);
  line-height: 1;
}
.agent-portrait-placeholder small {
  font-size: 0.6rem;
  opacity: 0.55;
  letter-spacing: 1px;
}

/* "HUMAN" tag floating above the frame, like the references */
.agent-portrait-tag {
  position: absolute;
  top: -12px;
  left: 12px;
  padding: 3px 12px;
  background: var(--red);
  color: var(--white);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 2px;
  z-index: 3;
}
.agent-portrait-code {
  position: absolute;
  bottom: 8px;
  right: 10px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.75);
  color: var(--red);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  z-index: 3;
}

/* Detection bracket corners on the portrait frame */
.agent-portrait-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  z-index: 2;
}
.agent-portrait-corner-tl { top: -3px; left: -3px; border-top: 3px solid var(--red); border-left: 3px solid var(--red); }
.agent-portrait-corner-tr { top: -3px; right: -3px; border-top: 3px solid var(--red); border-right: 3px solid var(--red); }
.agent-portrait-corner-bl { bottom: -3px; left: -3px; border-bottom: 3px solid var(--red); border-left: 3px solid var(--red); }
.agent-portrait-corner-br { bottom: -3px; right: -3px; border-bottom: 3px solid var(--red); border-right: 3px solid var(--red); }
@keyframes about-header-enter {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Clean bold title — no ghost layers. The period acts as the only accent. */
.about-title {
  font-family: var(--font);
  font-size: clamp(3.5rem, 11vw, 7rem);
  font-weight: 900;
  letter-spacing: -3px;
  line-height: 0.9;
  margin: 0 0 18px;
  color: var(--white);
  position: relative;
  z-index: 1;
}
/* Smaller scaling for the FAQ quote — "What do you use?" is much longer
   than a single word, so the type needs to shrink to fit cleanly on one
   line at most widths. */
.about-title.about-title-quote {
  font-size: clamp(2.4rem, 7.5vw, 4.8rem);
  letter-spacing: -2px;
}
/* Red curly quote marks bracketing the question */
.faq-q {
  color: var(--red);
  display: inline-block;
  padding: 0 0.04em;
}

/* Small angled red tape badge above the title — matches the section tapes
   so the page feels consistent with itself. */
.faq-badge {
  display: inline-block;
  padding: 7px 18px;
  margin-bottom: 16px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font);
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 3px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 1;
}

.about-subtitle {
  font-size: 0.95rem;
  color: var(--gray-light);
  max-width: 540px;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

/* Floating + and × marks scattered around the header */
.about-header-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.about-header-marks .mark {
  position: absolute;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 1.4rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.18);
  user-select: none;
}
.about-header-marks .mark.mark-red { color: rgba(230, 0, 18, 0.6); }
/* Single + mark anchored to the top-right corner of the header */
.about-header-marks .mark:nth-child(1) {
  top: 6px;
  right: 4px;
  font-size: 2rem;
}

/* Diagonal stripe accents in corners */
.about-stripes {
  position: absolute;
  width: 70px;
  height: 24px;
  background: repeating-linear-gradient(
    -45deg,
    var(--red) 0,
    var(--red) 4px,
    transparent 4px,
    transparent 10px
  );
  z-index: 0;
  pointer-events: none;
}
.about-stripes-tl { top: 0; left: 0; }
.about-stripes-tr { top: 0; right: 0; }
.about-stripes-br { bottom: 0; right: 0; transform: rotate(180deg); }

/* ── Section header with tape label + extending rule + numeral ── */
.about-section {
  position: relative;
  z-index: 1;
  margin-bottom: 64px;
}

.about-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 26px;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--white);
  text-transform: uppercase;
}

.section-tape {
  display: inline-block;
  padding: 8px 18px 8px 22px;
  background: var(--red);
  color: var(--white);
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 0.95rem;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  position: relative;
  box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.08);
}

.section-index {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--gray-light);
  letter-spacing: 1px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  white-space: nowrap;
}

.about-section-note {
  font-size: 0.8rem;
  color: var(--gray-light);
  margin-top: 14px;
  opacity: 0.7;
}
.about-section-note code {
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  color: #ddd;
}

/* ── Hardware specs ── */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.spec-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  position: relative;
  overflow: visible;
}
/* Detection-bracket corners (top-left and bottom-right) — surveillance vibe */
.spec-card::before,
.spec-card::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  transition: border-color 0.25s ease;
}
.spec-card::before {
  top: -2px;
  left: -2px;
  border-top: 2px solid rgba(230, 0, 18, 0.7);
  border-left: 2px solid rgba(230, 0, 18, 0.7);
}
.spec-card::after {
  bottom: -2px;
  right: -2px;
  border-bottom: 2px solid rgba(230, 0, 18, 0.7);
  border-right: 2px solid rgba(230, 0, 18, 0.7);
}
.spec-card:hover {
  border-color: var(--red);
  background: #131313;
  transform: scale(1.02);
}
.spec-card:hover::before,
.spec-card:hover::after { border-color: var(--red); }

.spec-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(230, 0, 18, 0.12);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
}
.spec-icon svg { width: 24px; height: 24px; display: block; }

.spec-content { flex: 1; min-width: 0; }
.spec-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--gray-light);
  margin-bottom: 3px;
}
.spec-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.2px;
}

/* ── Software ── */
.software-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.software-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px 20px 26px;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  transition: border-color 0.25s ease, background 0.25s ease,
              transform 0.25s ease, box-shadow 0.35s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
/* Red accent bar on the left edge */
.software-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: rgba(255, 255, 255, 0.15);
  transition: background 0.25s ease;
  z-index: 1;
}

.software-icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 1;
}
.software-icon svg,
.software-icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.software-content { flex: 1; min-width: 0; }
.software-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}
.software-purpose {
  font-size: 0.85rem;
  color: var(--gray-light);
  line-height: 1.4;
}

/* Brand-tinted hover accents — the left edge bar takes the brand color */
.software-premiere:hover {
  background: linear-gradient(135deg, #0d0d0d 0%, #160a1f 100%);
  box-shadow: 0 8px 30px rgba(153, 153, 255, 0.22);
  transform: scale(1.02);
}
.software-premiere:hover::before { background: #9999FF; }

.software-aftereffects:hover {
  background: linear-gradient(135deg, #0d0d0d 0%, #0f0824 100%);
  box-shadow: 0 8px 30px rgba(216, 180, 254, 0.22);
  transform: scale(1.02);
}
.software-aftereffects:hover::before { background: #D8B4FE; }

.software-blender:hover {
  background: linear-gradient(135deg, #0d0d0d 0%, #1f1208 100%);
  box-shadow: 0 8px 30px rgba(234, 118, 0, 0.28);
  transform: scale(1.02);
}
.software-blender:hover::before { background: #EA7600; }

.software-hlae:hover {
  background: linear-gradient(135deg, #0d0d0d 0%, #1c0608 100%);
  box-shadow: 0 8px 30px rgba(230, 0, 18, 0.24);
  transform: scale(1.02);
}
.software-hlae:hover::before { background: var(--red); }

/* External-link arrow shown on any software card that is an <a>. Makes it
   obvious that HLAE is clickable and opens an external site. */
.external-link-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  color: var(--gray-light);
  opacity: 0.55;
  transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.external-link-icon svg { width: 100%; height: 100%; display: block; }
.software-card[href]:hover .external-link-icon {
  opacity: 1;
  color: var(--red);
  transform: translate(2px, -2px);
}

/* ── Game tabs (inside the Games section on About) ── */
.game-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.game-tab {
  background: transparent;
  border: none;
  color: var(--gray-light);
  padding: 10px 22px;
  font-size: 0.9rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  position: relative;
  transition: color 0.2s ease;
}
.game-tab:hover { color: var(--white); }
.game-tab.is-active { color: var(--white); }
.game-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--red);
  border-radius: 2px 2px 0 0;
}

.game-panel { display: none; }
.game-panel.is-active {
  display: block;
  animation: tab-panel-fade 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Side-by-side settings + config on desktop, stacked on mobile */
.game-content {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 800px) {
  .game-content { grid-template-columns: 1fr; }
  .game-tab { padding: 9px 16px; font-size: 0.82rem; letter-spacing: 1.2px; }
}

/* ── Settings table — data printout / punch card vibe ── */
.settings-card {
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px 14px 28px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
  transition: background 0.15s ease;
  position: relative;
}
.settings-row:last-child { border-bottom: none; }
.settings-row:hover { background: rgba(230, 0, 18, 0.04); }

.settings-label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--gray-light);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.settings-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: -0.2px;
}

/* Small section label between groups of settings (Input / Performance / Graphics) */
.settings-group {
  padding: 12px 22px 6px 28px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--red);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

/* Collapsible Performance / Graphics groups — native <details> with custom
   styling. Click the group label to expand or collapse. */
.settings-details {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.settings-details:last-child { border-bottom: none; }

.settings-details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px 12px 28px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--red);
  transition: background 0.15s ease;
}
.settings-details > summary::-webkit-details-marker { display: none; }
.settings-details > summary::marker { display: none; }
.settings-details > summary:hover { background: rgba(230, 0, 18, 0.05); }

/* Chevron — rotates 180° when open */
.settings-details > summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-bottom: 3px;
}
.settings-details[open] > summary::after {
  transform: rotate(-135deg);
  margin-bottom: -3px;
}

/* Copyable value (crosshair code, viewmodel string) */
.settings-value-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 62%;
  min-width: 0;
}
.copy-value {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 8px;
  border-radius: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.copy-btn {
  background: rgba(230, 0, 18, 0.15);
  color: var(--red);
  border: 1px solid rgba(230, 0, 18, 0.35);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.copy-btn:hover {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.copy-btn.is-copied {
  background: #22c55e;
  color: var(--white);
  border-color: #22c55e;
}

/* Stack multiple config cards in the same right column */
.config-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Configs — file-sticker vibe with diagonal corner cut ── */
.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

.config-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 10px;
  align-items: center;
  padding: 16px 20px;
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  position: relative;
  overflow: hidden;
  /* Diagonal cut on the bottom-right gives the "ripped sticker" feel */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}
/* Icon spans both rows, vertically centered; name on row 1, action on row 2 */
.config-card .config-icon    { grid-column: 1; grid-row: 1 / span 2; }
.config-card .config-content { grid-column: 2; grid-row: 1; min-width: 0; }
.config-card .config-action  { grid-column: 2; grid-row: 2; justify-self: start; }
/* Red triangle fills the cut corner for emphasis */
.config-card::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, transparent 50%, var(--red) 50%);
  opacity: 0.6;
  transition: opacity 0.25s ease;
}
/* Halftone trail across the top */
.config-card::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 18px;
  width: 60px;
  height: 14px;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.18) 1px, transparent 1.5px);
  background-size: 6px 6px;
  pointer-events: none;
  opacity: 0.5;
}
.config-card:hover {
  border-color: var(--red);
  background: #131313;
  transform: scale(1.02);
}
.config-card:hover::before { opacity: 1; }

.config-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(230, 0, 18, 0.12);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
}
.config-icon svg { width: 22px; height: 22px; }

.config-content { flex: 1; min-width: 0; }
.config-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  margin-bottom: 3px;
  word-break: break-word;
}
.config-meta {
  font-size: 0.78rem;
  color: var(--gray-light);
  line-height: 1.4;
}

.config-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(230, 0, 18, 0.12);
  color: var(--red);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.config-card:hover .config-action {
  background: var(--red);
  color: var(--white);
}
.config-action svg { width: 14px; height: 14px; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .about-page { padding: calc(var(--nav-height) + 40px) 24px 80px; }
  .about-title { letter-spacing: -2px; }
}
@media (max-width: 600px) {
  .about-page { padding: calc(var(--nav-height) + 24px) 16px 60px; }
  .about-header { margin-bottom: 56px; padding: 18px 0 4px; }
  .about-section { margin-bottom: 48px; }

  .about-title { font-size: clamp(2.6rem, 13vw, 4.5rem); letter-spacing: -1.5px; }
  .about-subtitle { font-size: 0.88rem; }

  /* Hide the right-side scattered marks on small screens — they cramp the
     header — and shrink corner stripes */
  .about-header-marks { display: none; }
  .about-stripes { width: 50px; height: 18px; }

  /* Tape label still bold but smaller; rule shortens */
  .about-section-title { gap: 10px; font-size: 0.85rem; }
  .section-tape { padding: 6px 14px 6px 18px; font-size: 0.82rem; letter-spacing: 1.5px; }
  .section-index { font-size: 0.7rem; padding: 3px 6px; }

  /* Cards */
  .spec-card { padding: 14px 16px; gap: 14px; }
  .spec-icon { width: 38px; height: 38px; }
  .spec-icon svg { width: 20px; height: 20px; }
  .spec-card::after { width: 40px; height: 16px; bottom: 6px; left: 6px; }
  .software-card { padding: 16px 18px 16px 22px; gap: 14px; }
  .software-icon { width: 50px; height: 50px; border-radius: 10px; }
  .software-name { font-size: 0.95rem; }
  .settings-row { padding: 12px 16px 12px 22px; }
  .settings-label { font-size: 0.7rem; letter-spacing: 1px; }
  .settings-value { font-size: 0.85rem; }
  .config-card { padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
  .config-action { padding: 6px 10px; font-size: 0.7rem; }
}

/* ===== MOBILE BURGER + DRAWER ===== */
/* Hidden on desktop; shown on ≤800px via the responsive block above */
.navbar-burger {
  display: none;
  background: transparent;
  border: none;
  color: var(--white);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s ease;
}
.navbar-burger:hover { background: rgba(255,255,255,0.1); }
.navbar-burger svg { width: 24px; height: 24px; display: block; }

/* The drawer covers the viewport with a backdrop + a right-side panel.
   z-index must beat the navbar (1000) so the close X isn't hidden behind it. */
.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 1100;
}
.mobile-drawer[hidden] { display: none !important; }

.drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.mobile-drawer.open .drawer-backdrop { opacity: 1; }

.drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 82%;
  max-width: 340px;
  height: 100%;
  background: #0a0a0a;
  padding: 72px 22px 28px;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: -8px 0 24px rgba(0,0,0,0.5);
}
.mobile-drawer.open .drawer-panel { transform: translateX(0); }

.drawer-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--white);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s ease;
}
.drawer-close:hover { background: rgba(255,255,255,0.08); }
.drawer-close svg { width: 20px; height: 20px; display: block; }

.drawer-search-btn {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--gray-light);
  padding: 12px 16px;
  border-radius: 24px;
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s ease, color 0.15s ease;
}
.drawer-search-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--white);
}
.drawer-search-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.drawer-nav a {
  color: var(--white);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 14px 8px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.drawer-nav a:hover { background: rgba(255,255,255,0.05); color: var(--red); }
.drawer-nav a.drawer-nav-disabled {
  color: rgba(255,255,255,0.3);
  cursor: not-allowed;
}
.drawer-nav a.drawer-nav-disabled:hover { background: transparent; color: rgba(255,255,255,0.3); }

.drawer-socials {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 12px;
}
.drawer-socials a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background 0.15s ease, transform 0.15s ease;
}
.drawer-socials a:hover {
  background: var(--red);
  transform: scale(1.05);
}
.drawer-socials a svg { width: 18px; height: 18px; display: block; fill: currentColor; }

body.drawer-open { overflow: hidden; }
/* Burger sits in the same screen corner as the drawer's X — hide it while
   the drawer is open so the close button is clearly the only target. */
body.drawer-open .navbar-burger { visibility: hidden; }

/* Search has no useful function on Achievements / About pages (no video
   registry to filter) — hide the desktop icon, the inline bar, and the
   drawer entry on those pages. */
.achievements-body .search-icon,
.achievements-body .search-input-inline,
.achievements-body #drawerSearchBtn,
.about-body .search-icon,
.about-body .search-input-inline,
.about-body #drawerSearchBtn {
  display: none !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1400px) {
  .video-card,
  .skeleton-card {
    flex: 0 0 calc((100% - 3 * 14px - 60px) / 4);
  }
}

@media (max-width: 1100px) {
  .navbar { padding: 0 24px; }
  .hero-content { padding: 0 24px 8% 24px; }
  .category-section { padding: 0 24px; }
  .footer { padding: 40px 24px 24px; }

  .video-card,
  .skeleton-card {
    flex: 0 0 calc((100% - 2 * 14px - 50px) / 3);
  }

  .navbar-links { gap: 18px; }
  .navbar-links a { font-size: 0.8rem; }
}

@media (max-width: 800px) {
  /* The burger drawer owns nav links on mobile, so hide the inline ones in
     the navbar entirely (including the previously mobile-only "Socials"). */
  .navbar-links { display: none; }

  /* On mobile, the navbar-right collapses into a single hamburger button.
     Hide the per-platform icons, the standalone search button, and the
     inline search bar (the drawer provides nav + search + socials). */
  .navbar-right .social-icon,
  .navbar-right .search-icon {
    display: none !important;
  }
  .navbar-burger { display: inline-flex; }

  /* When user activates search from the drawer, the inline search bar morphs
     into a full-width fixed bar pinned just below the navbar. */
  body.searching .search-input-inline {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    width: 100%;
    height: 48px;
    transform: none;
    padding: 0 16px;
    border-radius: 0;
    background: rgba(15, 15, 15, 0.98);
    border-color: transparent;
    border-bottom: 1px solid #2c2c2c;
    opacity: 1;
    pointer-events: auto;
    z-index: 105;
  }
  body.searching .search-input-inline input {
    opacity: 1;
    font-size: 1rem;
  }

  .navbar-right { gap: 10px; }

  .video-card,
  .skeleton-card {
    flex: 0 0 calc((100% - 14px - 40px) / 2);
  }
}

@media (max-width: 600px) {
  .hero { height: 75vh; min-height: 480px; }
  .hero-title { letter-spacing: -0.5px; }
  .btn-play, .btn-subscribe { padding: 10px 22px; font-size: 0.9rem; min-width: 0; }

  /* Push the first category section down so the hero buttons aren't crowded
     against the "Movies" title. The desktop layout uses negative margin to
     overlap the hero gradient; on mobile that overlap is too tight. */
  .content { margin-top: 24px; }
  .content > .category-section:first-child { margin-top: 16px; }

  .carousel-btn { display: none; }

  .carousel-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Claim horizontal swipes for the carousel so the browser doesn't get
       stuck routing them to the page's vertical scroll. */
    touch-action: pan-x;
    /* Stops the carousel's horizontal scroll from chaining into the page —
       this was the actual cause of "only the bottom carousel scrolls",
       since for upper carousels the touch was being handed off to vertical
       page scroll before the carousel got to consume it. */
    overscroll-behavior-x: contain;
  }
  .carousel-wrapper::-webkit-scrollbar { display: none; }

  /* The desktop carousel positions the track via JS-set translateX. On mobile
     we use native horizontal scroll on the wrapper, so any leftover transform
     would visually shift the track (and break what looks like "scrolling").
     Force the track back to its natural position. */
  .carousel-track {
    transform: none !important;
    transition: none;
  }

  /* The peek card is non-interactive on desktop (visual fade hint). On mobile
     we need it to participate in touch so users can swipe through it. */
  .video-card[data-peek="true"] { pointer-events: auto; }
  .video-card[data-peek="true"]::after { display: none; }

  .video-card,
  .skeleton-card {
    flex: 0 0 75%;
  }

  /* Modal stays centered in the viewport on mobile (the .modal flex parent
     handles vertical centering). Just make it edge-to-edge wide. */
  .modal-container {
    width: 100%;
    border-radius: 8px;
  }

  .search-header { padding: 16px 18px; }
  .search-content { padding: 20px 18px 40px; }
  .search-input-wrap { padding: 11px 14px; }
  .search-input-wrap input { font-size: 0.95rem; }
  .search-results-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }

  .footer-signature { height: 64px; }
}