/* ============================================================
   Distracted! Player Wiki — visual theme
   Layered on top of MkDocs Material. Works in light + dark.
   Styled to match the game thumbnail: neon-violet night city,
   glossy red arcade logotype, chunky rounded display type.
   ============================================================ */

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

:root {
  /* ---- brand palette (from the game thumbnail) ---- */
  --df-violet:    #7c3aed;   /* neon purple */
  --df-violet-lo: #4c1d95;   /* deep purple */
  --df-magenta:   #d946ef;   /* hot magenta glow */
  --df-red:       #f0324b;   /* glossy logo red */
  --df-red-lo:    #b91530;
  --df-night:     #1a0f2e;   /* dark violet night */
  --df-cyan:      #38bdf8;   /* cool neon accent */

  --df-display: "Baloo 2", var(--md-text-font-family, system-ui), sans-serif;

  /* thumbnail used behind the header + hero (drop the file to enable) */
  --df-header-img: url('/images/header-bg.png');

  /* ---- per-topic colours (nav order is stable across EN + UK) ----
     0 Home · 1 Getting Started · 2 Classes · 3 Distractors
     4 Mechanics · 5 Economy · 6 Progression · 7 Levels */
  --topic-0: #d946ef;  /* magenta   */
  --topic-1: #22c55e;  /* green      */
  --topic-2: #ff7043;  /* orange     */
  --topic-3: #ef5350;  /* red        */
  --topic-4: #42a5f5;  /* blue       */
  --topic-5: #ffb300;  /* amber      */
  --topic-6: #ab47bc;  /* purple     */
  --topic-7: #38bdf8;  /* cyan       */


  /* stat / role accent colours (shared light+dark) */
  --acc-speed:     #ff7043;
  --acc-awareness: #42a5f5;
  --acc-rescue:    #66bb6a;
  --acc-recovery:  #ab47bc;
  --acc-carry:     #ffca28;
  --acc-threat:    #ef5350;

  --tier1: #9e9e9e;
  --tier2: #42a5f5;
  --tier3: #ffb300;

  --easy:   #66bb6a;
  --medium: #ffa726;
  --hard:   #ef5350;

  --card-radius: 14px;
}

/* Slightly roomier content column */
.md-grid { max-width: 62rem; }

/* ---------- Hero (homepage banner) ---------- */
.hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  margin: .4rem 0 2rem;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.2rem, 5vw, 3rem);
  color: #fff;
  background:
    linear-gradient(135deg, rgba(94,53,177,.92), rgba(38,50,140,.92)),
    var(--hero-img, radial-gradient(circle at 30% 20%, #7e57c2, #311b92));
  background-size: cover;
  background-position: center;
  box-shadow: 0 12px 34px rgba(49,27,146,.35);
}
.hero h1 {
  margin: 0 0 .4rem;
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}
.hero p {
  margin: 0;
  max-width: 42rem;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(255,255,255,.92);
}
.hero .hero-cta {
  margin-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.hero .hero-cta a {
  display: inline-block;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.hero .hero-cta a.primary { background: #fff; color: #4527a0; }
.hero .hero-cta a.ghost   { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.hero .hero-cta a:hover   { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.25); }

/* ---------- Card grid (categories, class/NPC galleries) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .9rem;
  margin: 1.2rem 0 2rem;
}
.card-grid.wide { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.game-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
  padding: 1.1rem .8rem 1rem;
  border-radius: var(--card-radius);
  background: var(--md-default-bg-color);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.06);
  border: 1px solid rgba(120,120,140,.14);
  color: var(--md-default-fg-color);
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  position: relative;
  overflow: hidden;
}
.game-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--card-accent, var(--md-primary-fg-color));
  opacity: .9;
}
.game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  border-color: var(--card-accent, var(--md-primary-fg-color));
}
.game-card[data-accent="speed"]     { --card-accent: var(--acc-speed); }
.game-card[data-accent="awareness"] { --card-accent: var(--acc-awareness); }
.game-card[data-accent="rescue"]    { --card-accent: var(--acc-rescue); }
.game-card[data-accent="recovery"]  { --card-accent: var(--acc-recovery); }
.game-card[data-accent="carry"]     { --card-accent: var(--acc-carry); }
.game-card[data-accent="threat"]    { --card-accent: var(--acc-threat); }

.game-card-portrait {
  width: 92px; height: 92px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 2.4rem;
  background:
    radial-gradient(circle at 50% 35%,
      color-mix(in srgb, var(--card-accent, #7e57c2) 26%, transparent),
      color-mix(in srgb, var(--card-accent, #7e57c2) 6%, transparent));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--card-accent, #7e57c2) 40%, transparent);
  overflow: hidden;
}
.game-card-portrait img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.game-card-portrait.img-missing img { display: none; }
.game-card-portrait::after { content: ""; }
.game-card-portrait.img-missing::after,
.game-card-portrait.no-img::after { content: attr(data-emoji); }

.game-card-title { font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.game-card-sub   { font-size: .8rem; color: var(--md-default-fg-color--light); line-height: 1.35; }

/* Small emoji-only card when no image expected (category tiles) */
.game-card.category .game-card-portrait { font-size: 2.1rem; }

/* ---------- Page hero (class / NPC header) ---------- */
.entity-header {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 1.1rem 1.2rem;
  margin: .2rem 0 1.4rem;
  border-radius: var(--card-radius);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--entity-accent, #7e57c2) 16%, var(--md-default-bg-color)),
      var(--md-default-bg-color) 70%);
  border: 1px solid rgba(120,120,140,.16);
}
.entity-header[data-accent="speed"]     { --entity-accent: var(--acc-speed); }
.entity-header[data-accent="awareness"] { --entity-accent: var(--acc-awareness); }
.entity-header[data-accent="rescue"]    { --entity-accent: var(--acc-rescue); }
.entity-header[data-accent="recovery"]  { --entity-accent: var(--acc-recovery); }
.entity-header[data-accent="carry"]     { --entity-accent: var(--acc-carry); }
.entity-header[data-accent="threat"]    { --entity-accent: var(--acc-threat); }

.entity-portrait {
  flex: 0 0 auto;
  width: 128px; height: 128px;
  border-radius: 18px;
  display: grid; place-items: center;
  font-size: 3.6rem;
  background:
    radial-gradient(circle at 50% 35%,
      color-mix(in srgb, var(--entity-accent, #7e57c2) 30%, transparent),
      color-mix(in srgb, var(--entity-accent, #7e57c2) 8%, transparent));
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--entity-accent, #7e57c2) 45%, transparent);
  overflow: hidden;
}
.entity-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.entity-portrait.img-missing img { display: none; }
.entity-portrait::after { content: ""; }
.entity-portrait.img-missing::after,
.entity-portrait.no-img::after { content: attr(data-emoji); }

.entity-meta { flex: 1 1 240px; min-width: 220px; }
.entity-meta .entity-tagline {
  margin: .3rem 0 .7rem;
  color: var(--md-default-fg-color--light);
  font-size: .98rem;
  line-height: 1.5;
}

/* ---------- Badges & chips ---------- */
.badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .01em;
  background: color-mix(in srgb, var(--md-default-fg-color) 8%, transparent);
  color: var(--md-default-fg-color);
  white-space: nowrap;
}
.badge.tier-1 { background: color-mix(in srgb, var(--tier1) 22%, transparent); }
.badge.tier-2 { background: color-mix(in srgb, var(--tier2) 22%, transparent); }
.badge.tier-3 { background: color-mix(in srgb, var(--tier3) 26%, transparent); }
.badge.easy   { background: color-mix(in srgb, var(--easy) 24%, transparent); }
.badge.medium { background: color-mix(in srgb, var(--medium) 26%, transparent); }
.badge.hard   { background: color-mix(in srgb, var(--hard) 24%, transparent); }
.badge.fs { background: color-mix(in srgb, #7e57c2 22%, transparent); }
.badge.rt { background: color-mix(in srgb, #26a69a 24%, transparent); }
.badge.dc { background: color-mix(in srgb, #ffca28 28%, transparent); }

/* ---------- Stat bars ---------- */
.stats { margin: 1rem 0 1.4rem; display: grid; gap: .55rem; }
.statbar {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  align-items: center;
  gap: .7rem;
}
.statbar-label { font-weight: 600; font-size: .86rem; }
.statbar-track {
  height: 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--md-default-fg-color) 10%, transparent);
  overflow: hidden;
}
.statbar-fill {
  display: block; height: 100%;
  width: calc(var(--v, 3) / 5 * 100%);
  border-radius: 999px;
  background: var(--sb-accent, var(--md-primary-fg-color));
}
.statbar[data-stat="speed"]     { --sb-accent: var(--acc-speed); }
.statbar[data-stat="awareness"] { --sb-accent: var(--acc-awareness); }
.statbar[data-stat="detection"] { --sb-accent: var(--acc-awareness); }
.statbar[data-stat="rescue"]    { --sb-accent: var(--acc-rescue); }
.statbar[data-stat="recovery"]  { --sb-accent: var(--acc-recovery); }
.statbar[data-stat="charisma"]  { --sb-accent: var(--acc-recovery); }
.statbar[data-stat="carry"]     { --sb-accent: var(--acc-carry); }
.statbar[data-stat="distract"]  { --sb-accent: var(--acc-threat); }
.statbar[data-stat="targets"]   { --sb-accent: var(--acc-threat); }
.statbar-val { font-size: .8rem; color: var(--md-default-fg-color--light); white-space: nowrap; }

@media (max-width: 480px) {
  .statbar { grid-template-columns: 5rem 1fr; }
  .statbar-val { grid-column: 2; text-align: right; }
}

/* ---------- Section label above card grids ---------- */
.section-label {
  font-size: .82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--md-default-fg-color--light);
  margin: 1.6rem 0 .2rem;
}

/* ---------- Inline currency icons (real in-game art) ---------- */
/* scoped under .md-typeset to beat Material's `.md-typeset img` reset */
.md-typeset img.cur-ico {
  height: 1.4em;
  width: 1.4em;
  vertical-align: -.32em;
  margin-left: .2em;
  display: inline-block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.28));
}

/* ---------- Screenshot figures ---------- */
.shot { margin: 1.2rem 0; }
.shot img { width: 100%; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.14); display: block; }
.shot figcaption { margin-top: .5rem; font-size: .82rem; color: var(--md-default-fg-color--light); text-align: center; }
.shot.img-missing img { display: none; }
.shot.img-missing::before {
  content: "🖼️ " attr(data-emoji);
  display: grid; place-items: center;
  min-height: 150px; border-radius: 12px;
  border: 2px dashed color-mix(in srgb, var(--md-default-fg-color) 24%, transparent);
  color: var(--md-default-fg-color--light);
  font-size: .9rem;
}

/* ============================================================
   DISPLAY TYPE — chunky rounded arcade headings
   ============================================================ */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.hero h1,
.game-card-title,
.entity-meta h1 {
  font-family: var(--df-display);
  font-weight: 800;
  letter-spacing: -.01em;
}
.md-typeset h1 { font-size: 2.1rem; line-height: 1.1; }
.md-typeset h2 {
  font-size: 1.5rem;
  margin-top: 2.2rem;
  padding-bottom: .2rem;
  border-bottom: 2px solid color-mix(in srgb, var(--df-violet) 30%, transparent);
}
.md-typeset h3 { font-size: 1.2rem; }

/* ============================================================
   HEADER — neon night bar + glossy red logotype
   ============================================================ */
.md-header {
  /* thumbnail strip behind the bar; dark overlay keeps text legible.
     if the image is missing the gradient layer still reads as a purple bar */
  background:
    linear-gradient(100deg, rgba(26,15,46,.90) 0%, rgba(76,29,149,.78) 55%, rgba(124,58,237,.72) 100%),
    var(--df-header-img, none);
  background-size: cover;
  background-position: center 32%;
  box-shadow: 0 2px 0 var(--df-magenta), 0 6px 22px rgba(76,29,149,.5);
}
/* logo image (the Roblox game icon) in the header */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 2.1rem;
  width: 2.1rem;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 2px 8px rgba(0,0,0,.4);
}
.md-header__title {
  font-family: var(--df-display);
  font-weight: 800;
  font-size: 1.28rem;
}
/* glossy red logotype like the thumbnail */
.md-header__title .md-ellipsis {
  color: #fff;
  background: linear-gradient(180deg, #ff5d70 0%, var(--df-red) 52%, var(--df-red-lo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45));
  letter-spacing: .01em;
}
.md-header__topic { min-width: 0; }
/* tabs/search sit on the same dark bar */
.md-search__form { background: rgba(255,255,255,.14); border-radius: 999px; }
.md-search__form:hover { background: rgba(255,255,255,.22); }

/* ---- EN <> UA language toggle switch ---- */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  height: 2.4rem;
  padding: 0 .35rem;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.lang-toggle__side {
  font-family: var(--df-display);
  font-weight: 800;
  font-size: .82rem;
  line-height: 1;
  color: rgba(255,255,255,.5);
  transition: color .15s ease, text-shadow .15s ease;
}
.lang-toggle__track {
  position: relative;
  width: 44px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  transition: background .2s ease;
  flex: 0 0 auto;
}
.lang-toggle__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
  transition: left .22s cubic-bezier(.34,1.56,.64,1);
}
.lang-toggle:hover .lang-toggle__track { filter: brightness(1.1); }
.lang-toggle:hover .lang-toggle__knob  { box-shadow: 0 2px 7px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.12); }

/* the active language's real flag fills the pill (knob rides on top) */
.lang-toggle__track {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* EN active — knob left, EN bright, Union Jack in the pill */
.lang-toggle[data-lang="en"] .lang-toggle__side--en {
  color: #fff; text-shadow: 0 0 10px rgba(255,255,255,.35);
}
.lang-toggle[data-lang="en"] .lang-toggle__track {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2060%2030%27%3E%3CclipPath%20id%3D%27s%27%3E%3Cpath%20d%3D%27M0%2C0%20v30%20h60%20v-30%20z%27%2F%3E%3C%2FclipPath%3E%3CclipPath%20id%3D%27t%27%3E%3Cpath%20d%3D%27M30%2C15%20h30%20v15%20z%20v15%20h-30%20z%20h-30%20v-15%20z%20v-15%20h30%20z%27%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%27url%28%23s%29%27%3E%3Cpath%20d%3D%27M0%2C0%20v30%20h60%20v-30%20z%27%20fill%3D%27%23012169%27%2F%3E%3Cpath%20d%3D%27M0%2C0%20L60%2C30%20M60%2C0%20L0%2C30%27%20stroke%3D%27%23fff%27%20stroke-width%3D%276%27%2F%3E%3Cpath%20d%3D%27M0%2C0%20L60%2C30%20M60%2C0%20L0%2C30%27%20clip-path%3D%27url%28%23t%29%27%20stroke%3D%27%23C8102E%27%20stroke-width%3D%274%27%2F%3E%3Cpath%20d%3D%27M30%2C0%20v30%20M0%2C15%20h60%27%20stroke%3D%27%23fff%27%20stroke-width%3D%2710%27%2F%3E%3Cpath%20d%3D%27M30%2C0%20v30%20M0%2C15%20h60%27%20stroke%3D%27%23C8102E%27%20stroke-width%3D%276%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
/* UA active — knob right, UA bright, Ukraine flag in the pill */
.lang-toggle[data-lang="uk"] .lang-toggle__knob { left: 24px; }
.lang-toggle[data-lang="uk"] .lang-toggle__side--uk {
  color: #fff; text-shadow: 0 0 10px rgba(255,214,0,.5);
}
.lang-toggle[data-lang="uk"] .lang-toggle__track {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%203%202%27%20preserveAspectRatio%3D%27none%27%3E%3Crect%20width%3D%273%27%20height%3D%271%27%20fill%3D%27%230057b7%27%2F%3E%3Crect%20y%3D%271%27%20width%3D%273%27%20height%3D%271%27%20fill%3D%27%23ffd700%27%2F%3E%3C%2Fsvg%3E");
}
@media screen and (max-width: 44.9375em) {
  /* tighten on small headers */
  .lang-toggle { gap: .28rem; padding: 0 .2rem; }
  .lang-toggle__track { width: 40px; }
  .lang-toggle[data-lang="uk"] .lang-toggle__knob { left: 20px; }
}

/* ============================================================
   TOP NAV — hover drop-down menus (desktop only)
   ============================================================ */
.df-topnav {
  display: none; /* mobile: hidden, use the drawer */
  background: linear-gradient(180deg, var(--df-violet-lo), var(--df-night));
  border-bottom: 2px solid color-mix(in srgb, var(--df-magenta) 60%, transparent);
}
.df-topnav__inner {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 .6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: .1rem;
}
.df-topnav__group { position: relative; display: flex; }
.df-topnav__label {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .7rem .95rem;
  font-family: var(--df-display);
  font-weight: 700;
  font-size: .92rem;
  color: rgba(255,255,255,.86);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.df-topnav__label:hover,
.df-topnav__group:hover .df-topnav__label,
.df-topnav__group:focus-within .df-topnav__label {
  color: #fff;
  background: rgba(255,255,255,.08);
}
.df-topnav__label.df-active,
.df-topnav__group.df-active .df-topnav__label {
  color: #fff;
  border-bottom-color: var(--df-magenta);
}
.df-caret { font-size: .7rem; opacity: .8; transition: transform .15s ease; }
.df-topnav__group:hover .df-caret,
.df-topnav__group:focus-within .df-caret { transform: rotate(180deg); }

/* the falling pop-up */
.df-topnav__menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 15rem;
  padding: .4rem;
  display: grid;
  gap: .1rem;
  background: var(--md-default-bg-color);
  border: 1px solid color-mix(in srgb, var(--df-violet) 24%, transparent);
  border-top: 3px solid var(--df-magenta);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 18px 40px rgba(26,15,46,.32);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 30;
}
.df-topnav__group:hover .df-topnav__menu,
.df-topnav__group:focus-within .df-topnav__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.df-topnav__link {
  display: block;
  padding: .5rem .7rem;
  border-radius: 8px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
  text-decoration: none;
  transition: background .12s ease, color .12s ease, padding-left .12s ease;
}
.df-topnav__link:hover,
.df-topnav__link:focus {
  background: color-mix(in srgb, var(--df-violet) 16%, transparent);
  color: var(--df-violet);
  padding-left: 1rem;
}
.df-topnav__link.df-active {
  background: color-mix(in srgb, var(--df-magenta) 16%, transparent);
  color: var(--df-magenta);
}

/* show the top bar + reclaim the left rail on desktop */
@media screen and (min-width: 76.25em) {
  .df-topnav { display: block; }
  .md-sidebar--primary { display: none; }
  .md-content { max-width: none; }
}

/* ============================================================
   HERO — neon violet/magenta glow to match the key art
   ============================================================ */
.hero {
  /* the thumbnail COVERS the whole hero, anchored to the top so its own
     DISTRACTED! logo shows up top; a vertical fade (clear → dark) keeps the
     lower text readable. Content is pushed to the bottom so it reads
     DISTRACTED! (art) → the "…Wiki" heading below it. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(430px, 50vw, 570px);
  background:
    linear-gradient(180deg,
      rgba(18,9,32,.10) 0%,
      rgba(18,9,32,.28) 40%,
      rgba(18,9,32,.80) 74%,
      rgba(18,9,32,.96) 100%),
    var(--hero-img, none),
    radial-gradient(circle at 50% 28%, var(--df-violet-lo), var(--df-night));
  background-size: cover, cover, cover;
  background-position: center, center top, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  box-shadow: 0 14px 40px rgba(76,29,149,.45), inset 0 0 0 1px rgba(255,255,255,.06);
}
.hero h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.hero p { text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.hero .hero-cta a.primary { background: #fff; color: var(--df-violet-lo); }
.hero .hero-cta a.primary:hover { box-shadow: 0 6px 22px rgba(255,255,255,.35); }

/* card accent for the "threat" tiles leans on the neon red */
.card-grid { gap: 1rem; }
.game-card:hover { box-shadow: 0 12px 30px rgba(76,29,149,.22); }

/* ============================================================
   PER-TOPIC COLOUR — each section keeps its own accent, so the
   nav tab, its drop-down, and every page under it share a colour.
   `data-topic` (0–7) is set on nav groups (server) and <body> (JS).
   ============================================================ */
[data-topic="0"] { --topic: var(--topic-0); }
[data-topic="1"] { --topic: var(--topic-1); }
[data-topic="2"] { --topic: var(--topic-2); }
[data-topic="3"] { --topic: var(--topic-3); }
[data-topic="4"] { --topic: var(--topic-4); }
[data-topic="5"] { --topic: var(--topic-5); }
[data-topic="6"] { --topic: var(--topic-6); }
[data-topic="7"] { --topic: var(--topic-7); }

/* nav: tint the active tab underline + each drop-down by its topic */
.df-topnav__group .df-topnav__menu { border-top-color: var(--topic, var(--df-magenta)); }
.df-topnav__label.df-active,
.df-topnav__group.df-active .df-topnav__label { border-bottom-color: var(--topic, var(--df-magenta)); }
.df-topnav__link:hover,
.df-topnav__link:focus {
  background: color-mix(in srgb, var(--topic, var(--df-violet)) 16%, transparent);
  color: color-mix(in srgb, var(--topic, var(--df-violet)) 78%, var(--md-default-fg-color));
}

/* page: give each topic's pages a soft matching wash + accents */
body[data-topic] .md-main {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--topic) 9%, transparent) 0,
      transparent 460px);
}
body[data-topic] .md-typeset h1 {
  border-left: 6px solid var(--topic);
  padding-left: .7rem;
}
body[data-topic] .md-typeset h2 {
  border-bottom-color: color-mix(in srgb, var(--topic) 55%, transparent);
}
body[data-topic] .md-typeset blockquote { border-left-color: var(--topic); }
/* right-hand TOC: mark the active topic */
body[data-topic] .md-nav__link--active { color: var(--topic); }