/* ============================================================
   taihi88 — Deep Luxury Dark Theme
   Brand: taihi88 | Domain: taihi88apk.com
   Prefix: cd | Naming: BEM
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Open+Sans:wght@400;500;600;700&display=swap');

/* ============================================================
   0. CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* ---- Brand Palette ---- */
  --cd-accent: #64bde3;
  --cd-bg: #1a2123;
  --cd-ink: #e7edee;
  --cd-muted: #adc5cc;
  --cd-surface: #202e31;
  --cd-btn-ink: #13232a;
  --cd-line: #2c3d41;
  --cd-radius: 12px;

  /* ---- CTA Gradients ---- */
  --cd-grad-dl-from: #7b73e7;
  --cd-grad-dl-to: #7c7fe4;
  --cd-grad-login-from: #21e4c0;
  --cd-grad-login-to: #31f2a8;
  --cd-grad-reg-from: #ec74ce;
  --cd-grad-reg-to: #d01b7e;

  /* ---- color-mix Aliases ---- */
  --cd-accent-5: color-mix(in srgb, var(--cd-accent) 5%, transparent);
  --cd-accent-8: color-mix(in srgb, var(--cd-accent) 8%, transparent);
  --cd-accent-10: color-mix(in srgb, var(--cd-accent) 10%, transparent);
  --cd-accent-14: color-mix(in srgb, var(--cd-accent) 14%, transparent);
  --cd-accent-18: color-mix(in srgb, var(--cd-accent) 18%, transparent);
  --cd-accent-22: color-mix(in srgb, var(--cd-accent) 22%, transparent);
  --cd-accent-30: color-mix(in srgb, var(--cd-accent) 30%, transparent);
  --cd-accent-40: color-mix(in srgb, var(--cd-accent) 40%, transparent);
  --cd-accent-50: color-mix(in srgb, var(--cd-accent) 50%, transparent);

  /* ---- Spacing ---- */
  --cd-gutter: clamp(1rem, 3vw, 2rem);
  --cd-section-py: clamp(3rem, 6vw, 5.5rem);
  --cd-max-w: 1200px;

  /* ---- Typography (fluid) ---- */
  --cd-fs-hero: clamp(2rem, 5vw + 0.5rem, 3.75rem);
  --cd-fs-h2: clamp(1.5rem, 3vw + 0.25rem, 2.5rem);
  --cd-fs-h3: clamp(1.15rem, 2vw + 0.2rem, 1.55rem);
  --cd-fs-body: clamp(0.925rem, 1vw + 0.5rem, 1.05rem);
  --cd-fs-small: clamp(0.78rem, 0.8vw + 0.4rem, 0.88rem);
  --cd-fs-badge: 0.69rem;

  /* ---- Transitions ---- */
  --cd-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --cd-dur: 0.22s;
}

/* ============================================================
   1. KEYFRAMES  (5 + bonus)
   ============================================================ */

/* 1 — Rise (entrance) */
@keyframes cd-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2 — Pulse (CTA glow) */
@keyframes cd-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--cd-accent-30);
  }
  50% {
    box-shadow: 0 0 22px 4px var(--cd-accent-22);
  }
}

/* 3 — Bob (floating) */
@keyframes cd-bob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* 4 — Shimmer (loading / deco stripe) */
@keyframes cd-shimmer {
  0% {
    background-position: -600px 0;
  }
  100% {
    background-position: 600px 0;
  }
}

/* 5 — Drip (background texture scroll) */
@keyframes cd-drip {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 800px;
  }
}

/* 6 — Cascade hero stagger */
@keyframes cd-cascade {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 7 — Spin for loaders */
@keyframes cd-spin {
  to {
    transform: rotate(360deg);
  }
}

/* 8 — Gradient shift for backgrounds */
@keyframes cd-gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: 'Open Sans', system-ui, -apple-system, sans-serif;
  font-size: var(--cd-fs-body);
  line-height: 1.65;
  color: var(--cd-ink);
  /* GRADIENT 1,2,3 — multi-layer radial background */
  background:
    radial-gradient(1100px 560px at 82% -12%, color-mix(in srgb, var(--cd-accent) 13%, transparent), transparent 60%),
    radial-gradient(880px 520px at -8% 18%, color-mix(in srgb, var(--cd-accent) 9%, transparent), transparent 55%),
    radial-gradient(650px 650px at 50% 110%, color-mix(in srgb, var(--cd-accent) 6%, transparent), transparent 70%),
    var(--cd-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---- Drip background animation overlay ---- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* GRADIENT 4 — animated drip texture */
  background:
    repeating-linear-gradient(
      180deg,
      transparent,
      transparent 120px,
      color-mix(in srgb, var(--cd-accent) 2%, transparent) 120px,
      transparent 240px
    );
  animation: cd-drip 40s linear infinite;
  opacity: 0.5;
}

body > * {
  position: relative;
  z-index: 1;
}

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

a {
  color: var(--cd-accent);
  text-decoration: none;
  transition: color var(--cd-dur) var(--cd-ease);
}

/* HOVER 1 */
a:hover {
  color: color-mix(in srgb, var(--cd-accent) 80%, #fff);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cd-ink);
}

ul, ol {
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* ============================================================
   3. ACCESSIBILITY
   ============================================================ */

/* Skip link */
.cd-skip {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--cd-accent);
  color: var(--cd-btn-ink);
  font-weight: 700;
  border-radius: var(--cd-radius);
  z-index: 9999;
  transition: top 0.15s;
}

.cd-skip:focus {
  top: 1rem;
}

/* Focus-visible global */
:focus-visible {
  outline: 2px solid var(--cd-accent);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */
.cd-container {
  width: 100%;
  max-width: var(--cd-max-w);
  margin-inline: auto;
  padding-inline: var(--cd-gutter);
}

.cd-section {
  padding-block: var(--cd-section-py);
  position: relative;
}

/* GRADIENT 5 — alternating section overlay */
.cd-section:nth-of-type(even) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cd-surface) 55%, transparent), transparent);
}

/* GRADIENT 6 — section top decorative line */
.cd-section:nth-of-type(even)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cd-accent-30), transparent);
}

/* Section title — GRADIENT 7 gradient text */
.cd-section__title {
  font-size: var(--cd-fs-h2);
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  background: linear-gradient(180deg, #ffffff 0%, var(--cd-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cd-rise 0.6s var(--cd-ease) both;
}

/* ============================================================
   5. HEADER (sticky)
   ============================================================ */
.cd-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* GRADIENT 8 — header bg with transparency */
  background:
    linear-gradient(180deg, var(--cd-bg), color-mix(in srgb, var(--cd-bg) 92%, transparent));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cd-line);
  /* SHADOW 1 — sticky header shadow */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  transition: box-shadow var(--cd-dur) var(--cd-ease);
}

/* GRADIENT 9 — header bottom gradient line */
.cd-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cd-accent), transparent);
  opacity: 0.5;
}

.cd-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--cd-max-w);
  margin-inline: auto;
  padding: 0.75rem var(--cd-gutter);
  gap: 1rem;
}

/* Logo */
.cd-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--cd-ink);
  text-decoration: none;
  transition: transform var(--cd-dur) var(--cd-ease);
}

.cd-logo img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  /* SHADOW 2 — logo image glow */
  box-shadow: 0 0 14px var(--cd-accent-30);
}

/* HOVER 2 */
.cd-logo:hover {
  transform: scale(1.03);
}

/* ---- Navigation ---- */
.cd-nav {
  display: flex;
  align-items: center;
}

.cd-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  cursor: pointer;
  z-index: 110;
}

.cd-nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--cd-ink);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.25s;
}

.cd-nav-menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.cd-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.85rem;
  font-family: 'Poppins', sans-serif;
  font-size: var(--cd-fs-small);
  font-weight: 500;
  color: var(--cd-muted);
  border-radius: calc(var(--cd-radius) * 0.6);
  transition:
    color var(--cd-dur) var(--cd-ease),
    background var(--cd-dur) var(--cd-ease),
    box-shadow var(--cd-dur) var(--cd-ease);
}

/* HOVER 3 */
.cd-nav-link:hover {
  color: var(--cd-ink);
  background: var(--cd-accent-14);
}

/* Active nav link */
.cd-nav-link--active {
  color: var(--cd-accent);
  /* SHADOW 3 — active nav underline */
  box-shadow: inset 0 -2px 0 var(--cd-accent);
}

/* HOVER 4 */
.cd-nav-link--active:hover {
  color: var(--cd-accent);
  background: var(--cd-accent-8);
}

/* ============================================================
   6. HERO SECTION
   ============================================================ */
.cd-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* GRADIENT 10 — hero multi-layer bg */
  background:
    radial-gradient(800px 400px at 70% 20%, color-mix(in srgb, var(--cd-accent) 16%, transparent), transparent 65%),
    radial-gradient(600px 600px at 20% 80%, color-mix(in srgb, #7b73e7 10%, transparent), transparent 60%),
    linear-gradient(180deg, var(--cd-bg), color-mix(in srgb, var(--cd-surface) 60%, var(--cd-bg)));
}

/* GRADIENT 11 — hero bottom fade */
.cd-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to top, var(--cd-bg), transparent);
  pointer-events: none;
  z-index: 2;
}

.cd-hero__inner {
  position: relative;
  z-index: 3;
  max-width: var(--cd-max-w);
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 5rem) var(--cd-gutter);
  text-align: center;
}

.cd-hero__title {
  font-size: var(--cd-fs-hero);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1rem;
  /* GRADIENT 12 — hero gradient text */
  background: linear-gradient(135deg, #ffffff 0%, var(--cd-accent) 60%, #7b73e7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: cd-cascade 0.7s var(--cd-ease) both;
}

.cd-hero__sub {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--cd-muted);
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 1.75rem;
  animation: cd-cascade 0.7s 0.15s var(--cd-ease) both;
}

/* Hero perks row */
.cd-hero__perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  animation: cd-cascade 0.7s 0.3s var(--cd-ease) both;
}

.cd-hero__perks span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  font-size: var(--cd-fs-badge);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cd-accent);
  background: var(--cd-accent-10);
  border: 1px solid var(--cd-accent-22);
  border-radius: 50px;
}

/* Hero CTA group */
.cd-hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  animation: cd-cascade 0.7s 0.45s var(--cd-ease) both;
}

/* ---- Particles (decorative glow spheres) ---- */
.cd-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.cd-particles span {
  position: absolute;
  border-radius: 50%;
  /* GRADIENT 13 — particle radial glow */
  background: radial-gradient(circle, var(--cd-accent-40), transparent 70%);
  animation: cd-bob 6s ease-in-out infinite;
}

.cd-particles span:nth-child(1) {
  width: 180px;
  height: 180px;
  top: 10%;
  left: 5%;
  opacity: 0.4;
  animation-delay: 0s;
}

.cd-particles span:nth-child(2) {
  width: 120px;
  height: 120px;
  top: 60%;
  right: 8%;
  opacity: 0.3;
  animation-delay: -2s;
}

.cd-particles span:nth-child(3) {
  width: 90px;
  height: 90px;
  bottom: 20%;
  left: 35%;
  opacity: 0.25;
  animation-delay: -4s;
  /* GRADIENT 14 — particle 3 alternate color */
  background: radial-gradient(circle, color-mix(in srgb, #7b73e7 35%, transparent), transparent 70%);
}

.cd-particles span:nth-child(4) {
  width: 60px;
  height: 60px;
  top: 25%;
  right: 25%;
  opacity: 0.35;
  animation-delay: -1s;
  background: radial-gradient(circle, color-mix(in srgb, #21e4c0 30%, transparent), transparent 70%);
}

/* ============================================================
   7. CAROUSEL
   ============================================================ */
.cd-carousel {
  position: relative;
  max-width: 800px;
  margin: 2rem auto 0;
  border-radius: var(--cd-radius);
  overflow: hidden;
  /* SHADOW 4 — carousel deep shadow */
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
}

.cd-carousel__slide {
  display: none;
  position: relative;
}

.cd-carousel__slide.is-active {
  display: block;
  animation: cd-rise 0.45s var(--cd-ease);
}

.cd-carousel__slide img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* GRADIENT 15 — carousel image bottom overlay */
.cd-carousel__slide::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, var(--cd-bg) 0%, transparent 100%);
  pointer-events: none;
}

.cd-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 0;
  position: absolute;
  bottom: 0.75rem;
  left: 0;
  right: 0;
  z-index: 5;
}

.cd-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cd-ink) 30%, transparent);
  border: none;
  cursor: pointer;
  transition: background var(--cd-dur), transform var(--cd-dur);
}

/* HOVER 5 */
.cd-carousel__dot:hover {
  background: var(--cd-accent-50);
  transform: scale(1.2);
}

.cd-carousel__dot.is-active {
  background: var(--cd-accent);
  /* SHADOW 5 — active dot glow */
  box-shadow: 0 0 8px var(--cd-accent-40);
}

/* ============================================================
   8. BUTTONS (CTA)
   ============================================================ */
.cd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-family: 'Poppins', sans-serif;
  font-size: var(--cd-fs-small);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--cd-radius);
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform var(--cd-dur) var(--cd-ease),
    box-shadow var(--cd-dur) var(--cd-ease),
    filter var(--cd-dur) var(--cd-ease);
}

/* Download button — GRADIENT 16 */
.cd-btn--dl {
  background: linear-gradient(135deg, var(--cd-grad-dl-from), var(--cd-grad-dl-to));
  color: #fff;
  /* SHADOW 6 — download button shadow */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
  animation: cd-pulse 3s ease-in-out infinite;
}

/* HOVER 6 */
.cd-btn--dl:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  /* SHADOW 7 — download button hover shadow */
  box-shadow: 0 9px 20px color-mix(in srgb, var(--cd-grad-dl-from) 22%, rgba(0, 0, 0, 0.32));
}

/* Login button — GRADIENT 17 */
.cd-btn--login {
  background: linear-gradient(135deg, var(--cd-grad-login-from), var(--cd-grad-login-to));
  color: var(--cd-btn-ink);
  /* SHADOW 8 — login button shadow */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
}

/* HOVER 7 */
.cd-btn--login:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 9px 20px color-mix(in srgb, var(--cd-grad-login-from) 22%, rgba(0, 0, 0, 0.32));
}

/* Register button — GRADIENT 18 */
.cd-btn--reg {
  background: linear-gradient(135deg, var(--cd-grad-reg-from), var(--cd-grad-reg-to));
  color: #fff;
  /* SHADOW 9 — register button shadow */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
}

/* HOVER 8 */
.cd-btn--reg:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 9px 20px color-mix(in srgb, var(--cd-grad-reg-from) 22%, rgba(0, 0, 0, 0.32));
}

/* Generic / outline button */
.cd-btn--outline {
  background: transparent;
  color: var(--cd-accent);
  border: 1px solid var(--cd-accent-40);
  /* SHADOW 10 — outline button shadow */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* HOVER 9 */
.cd-btn--outline:hover {
  background: var(--cd-accent-10);
  border-color: var(--cd-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--cd-accent) 12%, rgba(0, 0, 0, 0.28));
}

/* ============================================================
   9. CARDS (generic)
   ============================================================ */
.cd-card {
  position: relative;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  overflow: hidden;
  /* SHADOW 11 — card default shadow */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
  transition:
    transform var(--cd-dur) var(--cd-ease),
    box-shadow 0.3s var(--cd-ease),
    border-color 0.3s var(--cd-ease);
  animation: cd-rise 0.5s var(--cd-ease) both;
}

/* HOVER 10 */
.cd-card:hover {
  transform: translateY(-4px);
  border-color: var(--cd-accent-30);
  /* SHADOW 12 — card hover elevated shadow */
  box-shadow: 0 14px 30px color-mix(in srgb, var(--cd-accent) 15%, transparent);
}

.cd-card__img {
  position: relative;
  overflow: hidden;
}

.cd-card__img img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.35s var(--cd-ease), filter 0.35s var(--cd-ease);
}

/* HOVER 11 */
.cd-card:hover .cd-card__img img {
  transform: scale(1.03);
  filter: brightness(1.08);
}

/* GRADIENT 19 — card image bottom mask */
.cd-card__img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, var(--cd-surface) 0%, transparent 100%);
  pointer-events: none;
}

.cd-card__body {
  padding: 1.25rem;
}

.cd-card__title {
  font-size: var(--cd-fs-h3);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

/* HOVER 12 */
.cd-card__title a {
  color: var(--cd-ink);
  transition: color var(--cd-dur);
}

.cd-card__title a:hover {
  color: var(--cd-accent);
}

.cd-card__desc {
  color: var(--cd-muted);
  font-size: var(--cd-fs-small);
  line-height: 1.6;
}

/* ---- Badge / Tag ---- */
.cd-card__badge {
  display: inline-block;
  font-size: var(--cd-fs-badge);
  font-family: 'Poppins', monospace;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border-radius: 50px;
  background: var(--cd-accent-10);
  color: var(--cd-accent);
  border: 1px solid var(--cd-accent-22);
}

/* ============================================================
   10. GAME CARDS
   ============================================================ */
.cd-game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.cd-game-card {
  position: relative;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  overflow: hidden;
  text-align: center;
  /* SHADOW 13 — game card shadow */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
  transition:
    transform var(--cd-dur) var(--cd-ease),
    box-shadow 0.3s var(--cd-ease),
    border-color 0.3s var(--cd-ease);
  animation: cd-rise 0.5s var(--cd-ease) both;
}

/* HOVER 13 */
.cd-game-card:hover {
  transform: translateY(-3px);
  border-color: var(--cd-accent-30);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--cd-accent) 15%, transparent);
}

.cd-game-card__img {
  position: relative;
  overflow: hidden;
}

.cd-game-card__img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.35s var(--cd-ease), filter 0.35s;
}

/* HOVER 14 */
.cd-game-card:hover .cd-game-card__img img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* GRADIENT 20 — game card image overlay */
.cd-game-card__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--cd-surface) 0%, transparent 60%);
  pointer-events: none;
}

.cd-game-card__body {
  padding: 1rem 1.25rem 1.25rem;
}

.cd-game-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.cd-game-card__rating {
  color: #f4c542;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

/* ============================================================
   11. COMPARE TABLE
   ============================================================ */
.cd-compare {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--cd-radius);
  border: 1px solid var(--cd-line);
  /* SHADOW 14 — compare table shadow */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
}

.cd-compare__table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: var(--cd-fs-small);
}

.cd-compare__table th {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  text-align: left;
  padding: 0.85rem 1rem;
  /* GRADIENT 21 — table header gradient */
  background: linear-gradient(135deg, var(--cd-surface), color-mix(in srgb, var(--cd-accent) 8%, var(--cd-surface)));
  color: var(--cd-accent);
  border-bottom: 2px solid var(--cd-line);
  white-space: nowrap;
}

.cd-compare__table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--cd-line);
  color: var(--cd-muted);
}

/* Alternating rows */
.cd-compare__table tr:nth-of-type(even) td {
  background: color-mix(in srgb, var(--cd-surface) 50%, transparent);
}

/* HOVER 15 */
.cd-compare__table tr:hover td {
  background: var(--cd-accent-8);
}

/* ============================================================
   12. ARTICLES
   ============================================================ */
.cd-articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.cd-article-card {
  position: relative;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
  transition:
    transform var(--cd-dur) var(--cd-ease),
    box-shadow 0.3s var(--cd-ease),
    border-color 0.3s var(--cd-ease);
  animation: cd-rise 0.5s var(--cd-ease) both;
}

/* HOVER 16 */
.cd-article-card:hover {
  transform: translateY(-3px);
  border-color: var(--cd-accent-30);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--cd-accent) 15%, transparent);
}

.cd-article-card__img {
  position: relative;
  overflow: hidden;
}

.cd-article-card__img img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.35s var(--cd-ease);
}

/* HOVER 17 */
.cd-article-card:hover .cd-article-card__img img {
  transform: scale(1.03);
}

.cd-article-card__body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cd-article-card__title {
  font-size: var(--cd-fs-h3);
  margin-bottom: 0.5rem;
}

/* HOVER 18 */
.cd-article-card__title a {
  color: var(--cd-ink);
  transition: color var(--cd-dur);
}

.cd-article-card__title a:hover {
  color: var(--cd-accent);
}

.cd-article-card__excerpt {
  color: var(--cd-muted);
  font-size: var(--cd-fs-small);
  flex: 1;
}

.cd-article-card__meta {
  margin-top: 0.75rem;
  font-size: var(--cd-fs-badge);
  color: var(--cd-muted);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ============================================================
   13. FORUM
   ============================================================ */
.cd-forum {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cd-forum__post {
  display: flex;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  /* SHADOW 15 — forum post shadow */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  transition:
    transform var(--cd-dur) var(--cd-ease),
    box-shadow 0.3s var(--cd-ease),
    border-color 0.3s var(--cd-ease);
}

/* HOVER 19 */
.cd-forum__post:hover {
  transform: translateY(-2px);
  border-color: var(--cd-accent-22);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--cd-accent) 10%, rgba(0, 0, 0, 0.28));
}

.cd-forum__avatar {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cd-accent-30);
  /* SHADOW 16 — avatar glow */
  box-shadow: 0 0 10px var(--cd-accent-18);
}

.cd-forum__content {
  flex: 1;
  min-width: 0;
}

.cd-forum__author {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: var(--cd-fs-small);
  color: var(--cd-accent);
}

.cd-forum__text {
  color: var(--cd-muted);
  font-size: var(--cd-fs-small);
  margin-top: 0.35rem;
  line-height: 1.6;
}

.cd-forum__time {
  font-size: var(--cd-fs-badge);
  color: color-mix(in srgb, var(--cd-muted) 60%, transparent);
  margin-top: 0.35rem;
}

/* ============================================================
   14. ROADMAP / STEPS
   ============================================================ */
.cd-steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
  counter-reset: step;
}

.cd-steps__item {
  position: relative;
  padding: 1.5rem;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  counter-increment: step;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  transition:
    transform var(--cd-dur) var(--cd-ease),
    box-shadow 0.3s var(--cd-ease),
    border-color 0.3s var(--cd-ease);
}

/* HOVER 20 */
.cd-steps__item:hover {
  transform: translateY(-3px);
  border-color: var(--cd-accent-30);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--cd-accent) 12%, rgba(0, 0, 0, 0.3));
}

.cd-steps__item::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  /* GRADIENT 22 — step number gradient text */
  background: linear-gradient(135deg, var(--cd-accent), #7b73e7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.75rem;
}

.cd-steps__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.cd-steps__desc {
  color: var(--cd-muted);
  font-size: var(--cd-fs-small);
  line-height: 1.6;
}

/* ============================================================
   15. SCREENSHOTS / GALLERY
   ============================================================ */
.cd-screenshots {
  padding-block: var(--cd-section-py);
}

.cd-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.cd-gallery__item {
  position: relative;
  border-radius: var(--cd-radius);
  overflow: hidden;
  cursor: pointer;
  /* SHADOW 17 — gallery item shadow */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.32);
  transition:
    transform var(--cd-dur) var(--cd-ease),
    box-shadow 0.3s var(--cd-ease);
}

/* HOVER 21 */
.cd-gallery__item:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--cd-accent) 15%, transparent);
}

.cd-gallery__item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.35s var(--cd-ease), filter 0.35s;
}

/* HOVER 22 */
.cd-gallery__item:hover img {
  transform: scale(1.04);
  filter: brightness(1.1);
}

/* GRADIENT 23 — gallery item hover overlay */
.cd-gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--cd-bg) 70%, transparent) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s var(--cd-ease);
  pointer-events: none;
}

/* HOVER 23 */
.cd-gallery__item:hover::after {
  opacity: 1;
}

/* ============================================================
   16. PERKS
   ============================================================ */
.cd-perks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.cd-perks__card {
  padding: 1.5rem;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  transition:
    transform var(--cd-dur) var(--cd-ease),
    box-shadow 0.3s var(--cd-ease),
    border-color 0.3s var(--cd-ease);
}

/* HOVER 24 */
.cd-perks__card:hover {
  transform: translateY(-3px);
  border-color: var(--cd-accent-22);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--cd-accent) 10%, rgba(0, 0, 0, 0.28));
}

.cd-perks__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1rem;
  border-radius: 50%;
  font-size: 1.5rem;
  /* GRADIENT 24 — perk icon gradient bg */
  background: linear-gradient(135deg, var(--cd-accent-22), var(--cd-accent-8));
  /* SHADOW 18 — perk icon glow */
  box-shadow: 0 0 16px var(--cd-accent-18);
  animation: cd-bob 5s ease-in-out infinite;
}

.cd-perks__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.cd-perks__desc {
  font-size: var(--cd-fs-small);
  color: var(--cd-muted);
  line-height: 1.6;
}

/* ============================================================
   17. FAQ (details/summary)
   ============================================================ */
.cd-faq-list {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cd-faq-item {
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  overflow: hidden;
  transition: border-color 0.3s var(--cd-ease);
}

/* HOVER 25 */
.cd-faq-item:hover {
  border-color: var(--cd-accent-22);
}

.cd-faq-item[open] {
  border-color: var(--cd-accent-30);
}

.cd-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: var(--cd-fs-body);
  color: var(--cd-ink);
  cursor: pointer;
  list-style: none;
  transition: background var(--cd-dur), color var(--cd-dur);
}

.cd-faq-item summary::-webkit-details-marker {
  display: none;
}

.cd-faq-item summary::after {
  content: '+';
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--cd-accent);
  transition: transform 0.25s var(--cd-ease);
}

.cd-faq-item[open] summary::after {
  content: '−';
  transform: rotate(180deg);
}

/* HOVER 26 */
.cd-faq-item summary:hover {
  background: var(--cd-accent-8);
}

.cd-faq-item__answer {
  padding: 0 1.25rem 1.25rem;
  color: var(--cd-muted);
  font-size: var(--cd-fs-small);
  line-height: 1.7;
  animation: cd-rise 0.3s var(--cd-ease);
}

/* ============================================================
   18. CODE TABS & CODE BLOCK
   ============================================================ */
.cd-code-tabs {
  border-radius: var(--cd-radius);
  overflow: hidden;
  border: 1px solid var(--cd-line);
  background: color-mix(in srgb, var(--cd-surface) 80%, #000);
}

.cd-code-tabs__header {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--cd-line);
  overflow-x: auto;
}

.cd-code-tab {
  padding: 0.6rem 1.1rem;
  font-family: 'Poppins', monospace;
  font-size: var(--cd-fs-badge);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cd-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--cd-dur), border-color var(--cd-dur), background var(--cd-dur);
}

/* HOVER 27 */
.cd-code-tab:hover {
  color: var(--cd-ink);
  background: var(--cd-accent-8);
}

.cd-code-tab.is-active {
  color: var(--cd-accent);
  border-bottom-color: var(--cd-accent);
}

.cd-code-panel {
  display: none;
  padding: 1.25rem;
}

.cd-code-panel.is-active {
  display: block;
}

.cd-code-panel pre {
  margin: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cd-code-panel code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--cd-ink);
}

/* Standalone code block */
.cd-code-block {
  background: color-mix(in srgb, var(--cd-surface) 70%, #000);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  padding: 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.cd-code-block code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--cd-ink);
}

.cd-copy-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.35rem 0.7rem;
  font-size: var(--cd-fs-badge);
  font-weight: 600;
  color: var(--cd-accent);
  background: var(--cd-accent-10);
  border: 1px solid var(--cd-accent-22);
  border-radius: calc(var(--cd-radius) * 0.5);
  cursor: pointer;
  transition: background var(--cd-dur), transform var(--cd-dur);
}

/* HOVER 28 */
.cd-copy-btn:hover {
  background: var(--cd-accent-22);
  transform: translateY(-1px);
}

/* ============================================================
   19. SEARCH
   ============================================================ */
.cd-search-input {
  width: 100%;
  padding: 0.75rem 1.15rem;
  font-family: 'Open Sans', sans-serif;
  font-size: var(--cd-fs-body);
  color: var(--cd-ink);
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cd-search-input::placeholder {
  color: color-mix(in srgb, var(--cd-muted) 50%, transparent);
}

.cd-search-input:focus {
  border-color: var(--cd-accent);
  /* SHADOW 19 — search focus glow */
  box-shadow: 0 0 0 3px var(--cd-accent-18);
  outline: none;
}

.cd-search-results {
  margin-top: 1.5rem;
}

/* ============================================================
   20. BREADCRUMB
   ============================================================ */
.cd-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 0;
  font-size: var(--cd-fs-small);
  color: var(--cd-muted);
}

.cd-breadcrumb a {
  color: var(--cd-muted);
  transition: color var(--cd-dur);
}

/* HOVER 29 */
.cd-breadcrumb a:hover {
  color: var(--cd-accent);
}

.cd-breadcrumb__sep {
  color: color-mix(in srgb, var(--cd-muted) 40%, transparent);
  font-size: 0.7em;
}

/* ============================================================
   21. CHANNEL HERO
   ============================================================ */
.cd-ch-hero {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  text-align: center;
  /* GRADIENT 25 — channel hero gradient */
  background:
    radial-gradient(700px 350px at 50% 0%, var(--cd-accent-14), transparent 70%),
    linear-gradient(180deg, var(--cd-surface), var(--cd-bg));
}

.cd-ch-hero__title {
  font-size: var(--cd-fs-h2);
  margin-bottom: 0.75rem;
  /* GRADIENT 26 — channel hero gradient text */
  background: linear-gradient(180deg, #ffffff 0%, var(--cd-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cd-ch-hero__desc {
  color: var(--cd-muted);
  max-width: 600px;
  margin-inline: auto;
  font-size: var(--cd-fs-body);
}

/* ============================================================
   22. TOC (Table of Contents)
   ============================================================ */
.cd-toc {
  padding: 1.25rem;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  margin-bottom: 2rem;
}

.cd-toc__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: var(--cd-fs-body);
  margin-bottom: 0.75rem;
  color: var(--cd-accent);
}

.cd-toc ol {
  list-style: decimal;
  padding-left: 1.25rem;
}

.cd-toc li {
  padding: 0.25rem 0;
  font-size: var(--cd-fs-small);
}

.cd-toc a {
  color: var(--cd-muted);
  transition: color var(--cd-dur);
}

/* HOVER 30 */
.cd-toc a:hover {
  color: var(--cd-accent);
}

/* ============================================================
   23. GUIDE CARD
   ============================================================ */
.cd-guide-card {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem;
  background: var(--cd-surface);
  border: 1px solid var(--cd-line);
  border-radius: var(--cd-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  transition:
    transform var(--cd-dur) var(--cd-ease),
    box-shadow 0.3s var(--cd-ease),
    border-color 0.3s var(--cd-ease);
}

/* HOVER 31 */
.cd-guide-card:hover {
  transform: translateY(-2px);
  border-color: var(--cd-accent-22);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--cd-accent) 10%, rgba(0, 0, 0, 0.28));
}

.cd-guide-card__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cd-radius);
  font-size: 1.3rem;
  background: var(--cd-accent-10);
  color: var(--cd-accent);
}

.cd-guide-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

/* HOVER 32 */
.cd-guide-card__title a {
  color: var(--cd-ink);
  transition: color var(--cd-dur);
}

.cd-guide-card__title a:hover {
  color: var(--cd-accent);
}

.cd-guide-card__desc {
  font-size: var(--cd-fs-small);
  color: var(--cd-muted);
}

/* ============================================================
   24. HELP SECTION
   ============================================================ */
.cd-help-section {
  max-width: 760px;
  margin-inline: auto;
}

.cd-help-section h2 {
  font-size: var(--cd-fs-h2);
  margin-bottom: 1rem;
}

.cd-help-section h3 {
  font-size: var(--cd-fs-h3);
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.cd-help-section p {
  color: var(--cd-muted);
  margin-bottom: 1rem;
  line-height: 1.7;
}

/* ============================================================
   25. BYLINE & SRC BOX
   ============================================================ */
.cd-byline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
  font-size: var(--cd-fs-small);
  color: var(--cd-muted);
  border-bottom: 1px solid var(--cd-line);
  margin-bottom: 1.5rem;
}

.cd-byline__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  /* SHADOW 20 — byline avatar shadow */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.cd-byline__name {
  font-weight: 600;
  color: var(--cd-ink);
}

.cd-src-box {
  padding: 1rem 1.25rem;
  background: var(--cd-accent-5);
  border-left: 3px solid var(--cd-accent);
  border-radius: 0 var(--cd-radius) var(--cd-radius) 0;
  font-size: var(--cd-fs-small);
  color: var(--cd-muted);
  margin-block: 1.5rem;
}

.cd-src-box a {
  color: var(--cd-accent);
  text-decoration: underline;
  text-decoration-color: var(--cd-accent-30);
  text-underline-offset: 2px;
}

/* HOVER 33 */
.cd-src-box a:hover {
  text-decoration-color: var(--cd-accent);
}

/* ============================================================
   26. STORY IMAGES
   ============================================================ */
.cd-story-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-block: 1.5rem;
}

.cd-story-images img {
  border-radius: var(--cd-radius);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--cd-line);
  transition: transform 0.3s var(--cd-ease), filter 0.3s;
}

/* HOVER 34 */
.cd-story-images img:hover {
  transform: scale(1.02);
  filter: brightness(1.08);
}

/* ============================================================
   27. FOOTER
   ============================================================ */
.cd-footer {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem;
  background: color-mix(in srgb, var(--cd-bg) 90%, #000);
  border-top: 1px solid var(--cd-line);
}

/* GRADIENT 27 — footer top gradient line */
.cd-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cd-accent), transparent);
  opacity: 0.5;
}

.cd-footer__inner {
  max-width: var(--cd-max-w);
  margin-inline: auto;
  padding-inline: var(--cd-gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.cd-footer__heading {
  font-family: 'Poppins', sans-serif;
  font-size: var(--cd-fs-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cd-accent);
  margin-bottom: 1rem;
}

.cd-footer__link {
  display: block;
  padding: 0.3rem 0;
  font-size: var(--cd-fs-small);
  color: var(--cd-muted);
  transition: color var(--cd-dur), padding-left var(--cd-dur);
}

/* HOVER 35 */
.cd-footer__link:hover {
  color: var(--cd-ink);
  padding-left: 0.3rem;
}

.cd-footer__bottom {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cd-line);
  text-align: center;
  font-size: var(--cd-fs-badge);
  color: color-mix(in srgb, var(--cd-muted) 60%, transparent);
  max-width: var(--cd-max-w);
  margin-inline: auto;
  padding-inline: var(--cd-gutter);
}

/* ============================================================
   28. MOBILE BANNER (fixed bottom)
   ============================================================ */
.cd-mobile-banner {
  display: none;
}

@media (max-width: 768px) {
  .cd-mobile-banner {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem var(--cd-gutter);
    /* GRADIENT 28 — mobile banner bg */
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--cd-bg) 95%, transparent), var(--cd-bg));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--cd-line);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
  }

  .cd-mobile-banner .cd-btn {
    flex: 1;
    text-align: center;
    padding: 0.65rem 0.75rem;
    font-size: var(--cd-fs-badge);
  }
}

/* ============================================================
   29. SHIMMER / LOADING STATE
   ============================================================ */
.cd-shimmer {
  position: relative;
  overflow: hidden;
  background: var(--cd-surface);
  border-radius: var(--cd-radius);
}

/* GRADIENT 29 — shimmer stripe */
.cd-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--cd-accent) 6%, transparent) 40%,
    color-mix(in srgb, var(--cd-accent) 12%, transparent) 50%,
    color-mix(in srgb, var(--cd-accent) 6%, transparent) 60%,
    transparent 100%
  );
  background-size: 600px 100%;
  animation: cd-shimmer 1.8s linear infinite;
}

/* ============================================================
   30. DECORATIVE GRADIENT LINE (reusable)
   ============================================================ */

/* GRADIENT 30 — reusable deco line */
.cd-deco-line {
  height: 2px;
  border: none;
  /* GRADIENT 31 gradient deco line */
  background: linear-gradient(90deg, transparent, var(--cd-accent-50), transparent);
  margin-block: 2rem;
}

/* ============================================================
   31. RESPONSIVE
   ============================================================ */

/* ---- Tablet & below (≤768px) ---- */
@media (max-width: 768px) {
  .cd-nav-toggle {
    display: flex;
  }

  .cd-nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5rem 1.5rem 2rem;
    background: var(--cd-bg);
    border-left: 1px solid var(--cd-line);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.4);
    transition: right 0.3s var(--cd-ease);
    z-index: 105;
    overflow-y: auto;
  }

  .cd-nav-menu.is-open {
    right: 0;
  }

  .cd-nav-link {
    padding: 0.85rem 0.75rem;
    font-size: var(--cd-fs-body);
    border-bottom: 1px solid var(--cd-line);
    border-radius: 0;
  }

  .cd-hero__inner {
    text-align: center;
  }

  .cd-game-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
  }

  .cd-articles-grid {
    grid-template-columns: 1fr;
  }

  .cd-steps {
    grid-template-columns: 1fr;
  }

  .cd-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .cd-story-images {
    grid-template-columns: 1fr;
  }

  .cd-footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .cd-forum__post {
    flex-direction: column;
    align-items: flex-start;
  }

  .cd-guide-card {
    flex-direction: column;
  }

  /* Add bottom padding for mobile banner */
  body {
    padding-bottom: 80px;
  }
}

/* ---- Small screens (≤600px) ---- */
@media (max-width: 600px) {
  .cd-game-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .cd-gallery {
    grid-template-columns: 1fr;
  }

  .cd-footer__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .cd-hero__cta {
    flex-direction: column;
    align-items: center;
  }

  .cd-hero__cta .cd-btn {
    width: 100%;
    max-width: 320px;
  }

  .cd-perks {
    grid-template-columns: 1fr;
  }

  .cd-carousel {
    border-radius: calc(var(--cd-radius) * 0.6);
  }
}

/* ============================================================
   32. EXTRA HOVER & INTERACTION STATES
   ============================================================ */

/* HOVER 36 — generic anchor in article prose */
.cd-help-section a,
.cd-faq-item__answer a {
  color: var(--cd-accent);
  text-decoration: underline;
  text-decoration-color: var(--cd-accent-30);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--cd-dur);
}

.cd-help-section a:hover,
.cd-faq-item__answer a:hover {
  text-decoration-color: var(--cd-accent);
}

/* HOVER 37 — nav toggle animation */
.cd-nav-toggle:hover span {
  background: var(--cd-accent);
}

/* HOVER 38 — footer bottom link */
.cd-footer__bottom a {
  color: var(--cd-muted);
  transition: color var(--cd-dur);
}

.cd-footer__bottom a:hover {
  color: var(--cd-accent);
}

/* HOVER 39 — hero perk badge hover */
.cd-hero__perks span:hover {
  background: var(--cd-accent-18);
  border-color: var(--cd-accent-40);
}

/* HOVER 40 — card badge hover */
.cd-card__badge:hover {
  background: var(--cd-accent-18);
}

/* ============================================================
   33. PRINT STYLES
   ============================================================ */
@media print {
  body {
    background: #fff;
    color: #111;
  }

  .cd-header,
  .cd-footer,
  .cd-mobile-banner,
  .cd-particles,
  .cd-hero::after {
    display: none;
  }

  .cd-card,
  .cd-game-card,
  .cd-forum__post,
  .cd-steps__item {
    box-shadow: none;
    border: 1px solid #ddd;
  }

  a {
    color: #111;
    text-decoration: underline;
  }
}

/* ============================================================
   34. SELECTION & SCROLLBAR
   ============================================================ */
::selection {
  background: var(--cd-accent-40);
  color: #fff;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--cd-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--cd-line);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cd-accent-40);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--cd-line) var(--cd-bg);
}