:root {
  --bg: #f6f9ff;
  --bg2: #fff6fb;
  --surface: rgba(255, 255, 255, .78);
  --surface2: rgba(255, 255, 255, .62);
  --text: #17162a;
  --muted: #4a4764;
  --border: rgba(23, 22, 42, .14);
  --shadow: 0 10px 30px rgba(23, 22, 42, .10);
  --shadow2: 0 6px 16px rgba(23, 22, 42, .10);

  --accent: #6b66ff;
  --accent2: #ff6ab3;
  --focus: #2f7cff;

  /* NEW: tests button glow */
  --test-glow: rgba(0, 200, 83, .38);
  --test-glow-border: rgba(0, 200, 83, .42);
  --test-glow-ring: rgba(0, 200, 83, .16);

  /* NEW: profile button glow (orange) */
  --profile-glow: rgba(255, 160, 70, .30);
  --profile-glow-border: rgba(255, 160, 70, .52);
  --profile-glow-ring: rgba(255, 160, 70, .16);

  /* NEW: favourites button glow (pink) */
  --fav-glow: rgba(255, 106, 179, .30);
  --fav-glow-border: rgba(255, 106, 179, .56);
  --fav-glow-ring: rgba(255, 106, 179, .16);

  /* NEW: form error color */
  --danger: #c0183c;

  /* NEW: status/chip tokens (subtle, theme-safe) */
  --success: rgba(0, 200, 83, 1);
  --warning: rgba(255, 193, 7, 1);
  --chip-bg: rgba(255, 255, 255, .12);
  --chip-bg-strong: rgba(255, 255, 255, .18);
  --status-bg: rgba(107, 102, 255, .08);
  --status-border: rgba(107, 102, 255, .18);

  --radius: 18px;
  --radius2: 22px;
  /* Layout tuning: a bit wider on desktop so the UI doesn't feel "zoomed out" */
  --max: 1040px;
  --gutter: 18px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

/* Wider layout + slightly larger spacing on desktop */
@media (min-width: 1100px) {
  :root {
    --max: 1180px;
    --gutter: 22px;
  }
}

@media (min-width: 1500px) {
  :root {
    --max: 1280px;
    --gutter: 24px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1020;
    --bg2: #121125;
    --surface: rgba(20, 20, 40, .72);
    --surface2: rgba(20, 20, 40, .58);
    --text: #f2f1ff;
    --muted: #b7b6d8;
    --border: rgba(242, 241, 255, .14);
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --shadow2: 0 6px 16px rgba(0, 0, 0, .28);
    --focus: #7ab0ff;

    /* NEW: tests button glow (dark mode tweaks) */
    --test-glow: rgba(0, 255, 136, .34);
    --test-glow-border: rgba(0, 255, 136, .46);
    --test-glow-ring: rgba(0, 255, 136, .18);

    /* NEW: profile button glow (orange, dark mode tweaks) */
    --profile-glow: rgba(255, 160, 70, .28);
    --profile-glow-border: rgba(255, 160, 70, .58);
    --profile-glow-ring: rgba(255, 160, 70, .18);

    /* NEW: favourites button glow (pink, dark mode tweaks) */
    --fav-glow: rgba(255, 106, 179, .26);
    --fav-glow-border: rgba(255, 106, 179, .60);
    --fav-glow-ring: rgba(255, 106, 179, .18);

    /* NEW: form error color (dark mode) */
    --danger: #ff5f86;

    /* NEW: status/chip tokens (dark mode tweaks) */
    --chip-bg: rgba(255, 255, 255, .06);
    --chip-bg-strong: rgba(255, 255, 255, .10);
    --status-bg: rgba(107, 102, 255, .10);
    --status-border: rgba(122, 176, 255, .22);
  }
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1100px 520px at 15% 10%, var(--bg2), transparent 60%),
    radial-gradient(900px 520px at 85% 20%, rgba(107, 102, 255, .18), transparent 60%),
    radial-gradient(900px 520px at 25% 90%, rgba(255, 106, 179, .12), transparent 55%),
    linear-gradient(180deg, var(--bg), var(--bg));
}

a {
  color: inherit
}

a:hover {
  text-decoration: none
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px
}

.muted {
  color: var(--muted)
}

/* -------------------------------------------------
   NEW: Emoji helpers (consistent alignment + spacing)
-------------------------------------------------- */
.emoji {
  display: inline-block;
  line-height: 1;
  vertical-align: -0.12em;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", emoji;
}

/* Covers emojis inserted without the .emoji class (e.g., profile view strings) */
.nav-link span[aria-hidden="true"],
.btn span[aria-hidden="true"],
.label span[aria-hidden="true"],
.page-title span[aria-hidden="true"],
.page-subtitle span[aria-hidden="true"],
.detail-title span[aria-hidden="true"],
.card-title span[aria-hidden="true"],
.eyebrow span[aria-hidden="true"],
.hero-title span[aria-hidden="true"],
.hero-subtitle span[aria-hidden="true"] {
  display: inline-block;
  line-height: 1;
  vertical-align: -0.12em;
  transform: translateY(0.5px);
}

/* If using <small class="emoji">…</small> */
small.emoji {
  font-size: .95em;
}

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter)
}

.skip-link {
  position: absolute;
  left: 14px;
  top: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow2);
  transform: translateY(-140%);
  transition: transform .18s ease;
  z-index: 1000;
}

.skip-link:focus {
  transform: translateY(0)
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, var(--surface), rgba(255, 255, 255, 0));
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  gap: 12px;
}

/* Mobile header layout: wrap brand + nav so nothing squishes/overflows */
@media (max-width: 560px) {
  .header-inner {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 8px 0;
    min-height: auto;
  }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 10px 10px;
  border-radius: 999px;
}

.brand:hover {
  background: var(--surface2)
}

.brand-mark {
  width: 16px;
  height: 16px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 8px 16px rgba(107, 102, 255, .25);
}

/* Heart shape (keeps gradient fill). Falls back to rounded square if mask not supported. */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .brand-mark {
    border-radius: 0;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%2021.35l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.35z%27/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%2021.35l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.35z%27/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
}

.brand-text {
  font-weight: 750;
  letter-spacing: .2px
}

.site-nav {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 560px) {
  .site-nav {
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
  }
}

.nav-link {
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 560px) {
  .nav-link {
    padding: 8px 10px;
    font-size: 14px;
  }
}

.nav-link:hover {
  background: var(--surface2);
  border-color: var(--border)
}

.nav-link.is-active {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow2);
}

/* -------------------------------------------------
   NEW: Nav badge (optional favourites count)
-------------------------------------------------- */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .10);
  box-shadow: none;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  color: var(--muted);
}

@media (prefers-color-scheme: dark) {
  .nav-badge {
    background: rgba(255, 255, 255, .06);
  }
}

.site-main {
  padding: 26px 0 34px
}

.hero {
  padding: 18px 0 8px
}

.eyebrow {
  margin: 0 0 10px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--muted);
}

.hero-title {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 54px);
  line-height: 1.08;
  letter-spacing: -.6px;
}

.hero-subtitle {
  margin: 14px 0 0;
  max-width: 64ch;
  color: var(--muted);
  font-size: clamp(15px, 1.1vw + 12px, 18px);
  line-height: 1.6;
}

@media (min-width: 1100px) {
  .site-main {
    padding: 34px 0 46px
  }
}

/* ✅ Responsive grid that auto-adjusts to screen width */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

/* On wider screens, increase the minimum card width so they grow instead of packing into extra columns */
@media (min-width: 1100px) {
  .card-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
  }
}

/* Single-column safety for very small screens */
@media (max-width: 360px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

.card {
  display: flex;
  align-items: stretch;
  gap: 14px;
  text-decoration: none;
  padding: 16px 16px;
  border-radius: var(--radius2);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow2);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* Default hover (kept for cards without glow) */
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(107, 102, 255, .22);
}

.card:active {
  transform: translateY(0px) scale(.99)
}

.card--primary {
  border-color: rgba(107, 102, 255, .24);
  background:
    radial-gradient(640px 220px at 0% 0%, rgba(107, 102, 255, .16), transparent 60%),
    radial-gradient(640px 240px at 100% 0%, rgba(255, 106, 179, .12), transparent 62%),
    var(--surface);
}

.card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: rgba(107, 102, 255, .10);
  color: var(--accent);
  flex: 0 0 auto;
}

.card--primary .card-icon {
  background: rgba(255, 106, 179, .10);
  color: var(--accent2)
}

.card-body {
  flex: 1 1 auto;
  min-width: 0
}

.card-title {
  margin: 2px 0 6px;
  font-size: 18px;
  letter-spacing: -.2px
}

.card-text {
  margin: 0;
  color: var(--muted);
  line-height: 1.55
}

.card-cta {
  align-self: center;
  font-weight: 700;
  color: var(--muted);
  padding-left: 8px;
}

@media (min-width: 1100px) {
  .card {
    padding: 18px 18px
  }

  .card-title {
    font-size: 19px
  }
}

/* -------------------------------------------------
   Cyber glow hover for "pills" (cards with data-glow)
-------------------------------------------------- */
.card[data-glow] {
  --glow: rgba(0, 255, 136, .35);
  --glow-border: rgba(0, 255, 136, .85);
  position: relative;
}

/* Hide CTA on any glow cards (Home + Resources), even if present */
.card[data-glow] .card-cta {
  display: none
}

.card[data-glow]:hover,
.card[data-glow]:focus-visible {
  transform: translateY(-2px);
  border-color: var(--glow-border);
  box-shadow:
    0 0 0 1px var(--glow-border),
    0 0 28px 6px var(--glow),
    var(--shadow);
}

/* Palette: green / yellow / red / blue / pink / orange / purple */
.card[data-glow="green"] {
  --glow: rgba(0, 255, 136, .35);
  --glow-border: rgba(0, 255, 136, .85);
}

.card[data-glow="yellow"] {
  --glow: rgba(255, 230, 70, .30);
  --glow-border: rgba(255, 230, 70, .85);
}

.card[data-glow="red"] {
  --glow: rgba(255, 70, 90, .28);
  --glow-border: rgba(255, 70, 90, .85);
}

.card[data-glow="blue"] {
  --glow: rgba(90, 160, 255, .28);
  --glow-border: rgba(90, 160, 255, .85);
}

.card[data-glow="pink"] {
  --glow: rgba(255, 106, 179, .26);
  --glow-border: rgba(255, 106, 179, .85);
}

.card[data-glow="orange"] {
  --glow: rgba(255, 160, 70, .28);
  --glow-border: rgba(255, 160, 70, .88);
}

.card[data-glow="purple"] {
  --glow: rgba(170, 110, 255, .26);
  --glow-border: rgba(170, 110, 255, .88);
}

.card[data-glow="gold"] {
  --glow: rgba(255, 200, 60, .40);
  --glow-border: rgba(255, 200, 60, .95);
}

/* NEW: IELS glow (keep glow, use normal card fill) */
.card[data-glow="iels"] {
  --glow-border: rgba(255, 255, 255, .26);
  --glow: rgba(255, 255, 255, .14);
  background: var(--surface);
}

.card[data-glow="iels"]:hover,
.card[data-glow="iels"]:focus-visible {
  border-color: rgba(255, 255, 255, .32);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .22),
    0 0 0 4px rgba(107, 102, 255, .10),
    0 0 22px 6px rgba(107, 102, 255, .22),
    0 0 28px 10px rgba(0, 230, 140, .14),
    0 0 34px 14px rgba(255, 230, 70, .12),
    0 0 40px 18px rgba(255, 70, 90, .12),
    0 0 46px 22px rgba(255, 106, 179, .14),
    var(--shadow);
}

/* Base icon background on glow cards */
.card[data-glow] .card-icon {
  background: rgba(255, 255, 255, .06);
}

/* ✅ Match icon color to glow */
.card[data-glow="green"] .card-icon {
  background: rgba(0, 255, 136, .12);
  color: rgba(0, 255, 136, .95);
}

.card[data-glow="red"] .card-icon {
  background: rgba(255, 70, 90, .12);
  color: rgba(255, 70, 90, .95);
}

.card[data-glow="blue"] .card-icon {
  background: rgba(90, 160, 255, .12);
  color: rgba(90, 160, 255, .95);
}

.card[data-glow="pink"] .card-icon {
  background: rgba(255, 106, 179, .12);
  color: var(--accent2);
}

.card[data-glow="yellow"] .card-icon {
  background: rgba(255, 230, 70, .12);
  color: rgba(255, 230, 70, .95);
}

.card[data-glow="orange"] .card-icon {
  background: rgba(255, 160, 70, .12);
  color: rgba(255, 160, 70, .95);
}

.card[data-glow="purple"] .card-icon {
  background: rgba(170, 110, 255, .12);
  color: rgba(170, 110, 255, .95);
}

.card[data-glow="gold"] .card-icon {
  background: rgba(255, 200, 60, .15);
  color: rgba(255, 200, 60, .95);
}

/* NEW: IELS icon — multi colour, consistent shape */
.card[data-glow="iels"] .card-icon {
  background:
    radial-gradient(18px 18px at 20% 20%, rgba(0, 230, 140, .22), transparent 60%),
    radial-gradient(18px 18px at 80% 20%, rgba(255, 230, 70, .20), transparent 60%),
    radial-gradient(20px 20px at 30% 90%, rgba(90, 160, 255, .22), transparent 62%),
    radial-gradient(20px 20px at 90% 85%, rgba(255, 106, 179, .20), transparent 62%),
    rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .92);
}

/* Keep primary styling consistent */
.card.card--primary[data-glow] .card-icon {
  background: rgba(255, 106, 179, .10);
  color: var(--accent2);
}

/* ✅ Resources primary icon should be green */
.card.card--primary[data-glow="green"] .card-icon {
  background: rgba(0, 230, 140, .12);
  color: rgba(0, 230, 140, .95);
}

@media (prefers-color-scheme: dark) {
  .card[data-glow] .card-icon {
    background: rgba(255, 255, 255, .08);
  }

  .card[data-glow="green"] .card-icon {
    background: rgba(0, 255, 136, .14);
    color: rgba(0, 255, 136, .95);
  }

  .card[data-glow="red"] .card-icon {
    background: rgba(255, 70, 90, .14);
    color: rgba(255, 70, 90, .95);
  }

  .card[data-glow="blue"] .card-icon {
    background: rgba(90, 160, 255, .14);
    color: rgba(90, 160, 255, .95);
  }

  .card[data-glow="pink"] .card-icon {
    background: rgba(255, 106, 179, .14);
    color: var(--accent2);
  }

  .card[data-glow="yellow"] .card-icon {
    background: rgba(255, 230, 70, .14);
    color: rgba(255, 230, 70, .95);
  }

  .card[data-glow="orange"] .card-icon {
    background: rgba(255, 160, 70, .16);
    color: rgba(255, 160, 70, .96);
  }

  .card[data-glow="purple"] .card-icon {
    background: rgba(170, 110, 255, .16);
    color: rgba(170, 110, 255, .96);
  }

  .card[data-glow="gold"] .card-icon {
    background: rgba(255, 200, 60, .18);
    color: rgba(255, 200, 60, .96);
  }

  .card[data-glow="iels"] .card-icon {
    background:
      radial-gradient(18px 18px at 20% 20%, rgba(0, 230, 140, .26), transparent 60%),
      radial-gradient(18px 18px at 80% 20%, rgba(255, 230, 70, .24), transparent 60%),
      radial-gradient(20px 20px at 30% 90%, rgba(90, 160, 255, .26), transparent 62%),
      radial-gradient(20px 20px at 90% 85%, rgba(255, 106, 179, .24), transparent 62%),
      rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .92);
  }

  .card.card--primary[data-glow] .card-icon {
    background: rgba(255, 106, 179, .12);
    color: var(--accent2);
  }

  .card.card--primary[data-glow="green"] .card-icon {
    background: rgba(0, 230, 140, .14);
    color: rgba(0, 230, 140, .95);
  }
}

/* If a card has no CTA, don't reserve space (safe either way) */
.card-cta:empty {
  display: none
}

/* -------------------------------------------------
   NEW: Tests page grouping (age sections)
   Used by assets/js/views/tests.js
-------------------------------------------------- */
.tests-section {
  margin-top: 18px;
}

.tests-section:first-child {
  margin-top: 14px;
}

.section-title {
  margin: 6px 0 10px;
  font-size: 16px;
  letter-spacing: -.2px;
  color: var(--muted);
  font-weight: 800;
}

@media (min-width: 1100px) {
  .tests-section {
    margin-top: 22px;
  }

  .section-title {
    font-size: 17px;
  }
}

/* -------------------------------------------------
   Featured Games Section (Games page)
-------------------------------------------------- */
.featured-section {
  margin-bottom: 24px;
}

.featured-section .card {
  max-width: 480px;
  padding: 20px 22px;
  background: linear-gradient(135deg, rgba(255, 200, 60, .08), rgba(255, 200, 60, .02)), var(--surface);
  border-color: rgba(255, 200, 60, .28);
}

.section-subheader {
  margin: 20px 0 10px;
  font-size: 15px;
  letter-spacing: -.2px;
  color: var(--muted);
  font-weight: 750;
  text-transform: uppercase;
}

.featured-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 200, 60, .20);
  color: rgba(200, 150, 30, 1);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
}

@media (prefers-color-scheme: dark) {
  .featured-section .card {
    background: linear-gradient(135deg, rgba(255, 200, 60, .10), rgba(255, 200, 60, .03)), var(--surface);
    border-color: rgba(255, 200, 60, .35);
  }

  .featured-badge {
    background: rgba(255, 200, 60, .15);
    color: rgba(255, 200, 60, .95);
  }
}

.page-top {
  margin-top: 8px
}

.breadcrumbs {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 8px
}

.breadcrumbs li::after {
  content: "/";
  opacity: .5
}

.breadcrumbs li:last-child::after {
  content: ""
}

.breadcrumbs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed transparent
}

.breadcrumbs a:hover {
  border-bottom-color: rgba(0, 0, 0, .25)
}

@media (prefers-color-scheme: dark) {
  .breadcrumbs a:hover {
    border-bottom-color: rgba(255, 255, 255, .25)
  }
}

.page-title {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 36px);
  letter-spacing: -.4px;
}

.page-subtitle {
  margin: 10px 0 0;
  max-width: 70ch;
  color: var(--muted);
  line-height: 1.6;
}

.note {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.feedback-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-right: 8px;
  color: #00b894; /* Success green */
  background: rgba(0, 184, 148, 0.12);
  border-radius: 50%;
  padding: 4px;
  animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.feedback-icon svg {
  width: 22px;
  height: 22px;
}

@keyframes popIn {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.note.is-correct {
  border-left: 5px solid #00b894;
  background: rgba(0, 184, 148, 0.05);
  animation: slideIn 0.3s ease-out;
}

@media (prefers-color-scheme: dark) {
  .note.is-correct {
    background: rgba(0, 255, 136, 0.08);
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow2);
  font-weight: 700;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.btn:hover {
  box-shadow: var(--shadow);
  transform: translateY(-1px)
}

.btn:active {
  transform: translateY(0px) scale(.99)
}

.btn--primary {
  border-color: rgba(107, 102, 255, .28);
  background: linear-gradient(135deg, rgba(107, 102, 255, .14), rgba(255, 106, 179, .10)), var(--surface);
}

/* -------------------------------------------------
   NEW: Tests buttons glow green on hover/focus
   Apply to any .btn inside a .tests-page wrapper
-------------------------------------------------- */
.tests-page .btn:hover,
.tests-page .btn:focus-visible {
  box-shadow:
    0 0 0 3px var(--test-glow-ring),
    0 0 22px var(--test-glow),
    var(--shadow);
  border-color: var(--test-glow-border);
}

/* -------------------------------------------------
   NEW: Profile page buttons glow orange on hover/focus
   Apply to any .btn inside a .profile-page wrapper
-------------------------------------------------- */
.profile-page .btn:hover,
.profile-page .btn:focus-visible {
  box-shadow:
    0 0 0 3px var(--profile-glow-ring),
    0 0 22px var(--profile-glow),
    var(--shadow);
  border-color: var(--profile-glow-border);
}

/* -------------------------------------------------
   NEW: Favourites page buttons glow pink on hover/focus
   Apply to any .btn inside a .favourites-page wrapper
-------------------------------------------------- */
.favourites-page .btn:hover,
.favourites-page .btn:focus-visible {
  box-shadow:
    0 0 0 3px var(--fav-glow-ring),
    0 0 22px var(--fav-glow),
    var(--shadow);
  border-color: var(--fav-glow-border);
}

/* NEW: small + disabled buttons (used on resource cards) */
.btn--small {
  padding: 8px 12px;
  font-size: 14px;
}

.btn--disabled {
  opacity: .6;
  pointer-events: none;
  box-shadow: none;
}

/* -------------------------------------------------
   NEW: Icon-like button (favourite toggle)
-------------------------------------------------- */
.btn--icon {
  gap: 8px;
}

.fav-btn {
  border-color: rgba(255, 106, 179, .24);
}

.fav-btn span[aria-hidden="true"] {
  display: inline-block;
  line-height: 1;
  transform: translateY(0.5px);
}

.fav-btn.is-on {
  border-color: rgba(255, 106, 179, .55);
  background:
    radial-gradient(320px 140px at 20% 0%, rgba(255, 106, 179, .16), transparent 58%),
    radial-gradient(320px 140px at 80% 100%, rgba(107, 102, 255, .12), transparent 60%),
    var(--surface);
  box-shadow: var(--shadow2);
}

@media (prefers-color-scheme: dark) {
  .fav-btn {
    border-color: rgba(255, 106, 179, .22);
  }

  .fav-btn.is-on {
    border-color: rgba(255, 106, 179, .60);
  }
}

/* -------------------------------------------------
   NEW: File input styling helpers (optional)
-------------------------------------------------- */
.file-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.file-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
}

/* -------------------------------------------------
   NEW: Form system (inputs + accessible errors)
-------------------------------------------------- */

.label {
  display: block;
  font-weight: 750;
  letter-spacing: .1px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Use these classes where possible; also keep ARIA-based invalid styling for inline-styled inputs. */
.input,
.textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: var(--font);
}

.textarea {
  resize: vertical
}

.field-error {
  color: var(--danger);
  font-weight: 750;
  line-height: 1.4;
}

.field-error:empty {
  display: none
}

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

@media (min-width: 1100px) {
  .form-grid {
    gap: 16px
  }
}

/* -------------------------------------------------
   NEW: TTS controls (Audio settings panel on tests)
   Used by assets/js/views/test-detail.js
-------------------------------------------------- */
[data-tts-panel] {
  /* panel already uses .note styles; keep it compact and aligned */
  margin-top: 14px;
}

[data-tts-panel] label {
  display: block;
  font-weight: 750;
  letter-spacing: .1px;
  color: var(--text);
}

/* Make native controls match existing input styling */
[data-tts-panel] select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-family: var(--font);
  box-shadow: none;
}

/* Keep hint text subtle + readable */
[data-tts-panel] small {
  display: block;
  color: var(--muted);
  line-height: 1.4;
}

/* Range slider polish (keeps a native feel but matches theme) */
[data-tts-panel] input[type="range"] {
  width: 100%;
  background: transparent;
  accent-color: var(--accent);
}

/* WebKit (Chrome/Edge/Safari) */
[data-tts-panel] input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(107, 102, 255, .12);
}

[data-tts-panel] input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow2);
  margin-top: -5px;
  /* centers thumb on 8px track */
}

/* Firefox */
[data-tts-panel] input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(107, 102, 255, .12);
}

[data-tts-panel] input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow2);
}

/* Dark mode slider track tweak */
@media (prefers-color-scheme: dark) {
  [data-tts-panel] input[type="range"]::-webkit-slider-runnable-track {
    background: rgba(122, 176, 255, .14);
  }

  [data-tts-panel] input[type="range"]::-moz-range-track {
    background: rgba(122, 176, 255, .14);
  }
}

/* ARIA-invalid styling (works for both .input/.textarea and inline-styled fields) */
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: rgba(192, 24, 60, .60);
  box-shadow: 0 0 0 3px rgba(192, 24, 60, .10);
}

@media (prefers-color-scheme: dark) {

  input[aria-invalid="true"],
  textarea[aria-invalid="true"] {
    border-color: rgba(255, 95, 134, .70);
    box-shadow: 0 0 0 3px rgba(255, 95, 134, .12);
  }
}

.contact-status {
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.contact-status[data-kind="error"] {
  color: var(--danger);
  font-weight: 750;
}

/* -------------------------------------------------
   NEW: Skill resources grid + cards (uniform)
-------------------------------------------------- */

.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

@media (min-width: 1100px) {
  .resource-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 360px) {
  .resource-grid {
    grid-template-columns: 1fr;
  }
}

.resource-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.resource-card {
  width: 100%;
  text-align: left;
  border-radius: var(--radius2);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow2);
  padding: 16px 16px;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  font-family: var(--font);
  color: var(--text);
}

.resource-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: rgba(107, 102, 255, .22);
}

.resource-card:active {
  transform: translateY(0px) scale(.99)
}

.resource-title {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: -.2px;
  line-height: 1.25;
}

.resource-desc {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

@media (min-width: 1100px) {
  .resource-card {
    padding: 18px 18px
  }

  .resource-title {
    font-size: 19px
  }
}

.resource-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* -------------------------------------------------
   NEW: Chip / status polish (used by profile + tests)
-------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 28px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--muted);
  font-size: 13px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .1px;
  user-select: none;
}

.chip:empty {
  display: none
}

/* Optional variants (safe even if unused) */
.chip--ok {
  border-color: rgba(0, 200, 83, .35);
  background: rgba(0, 200, 83, .10);
  color: var(--success);
}

.chip--warn {
  border-color: rgba(255, 193, 7, .35);
  background: rgba(255, 193, 7, .10);
  color: var(--text);
}

.chip--error {
  border-color: rgba(192, 24, 60, .35);
  background: rgba(192, 24, 60, .10);
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  .chip--ok {
    border-color: rgba(0, 255, 136, .38);
    background: rgba(0, 255, 136, .12);
    color: var(--success);
  }

  .chip--warn {
    border-color: rgba(255, 230, 70, .34);
    background: rgba(255, 230, 70, .10);
    color: var(--text);
  }

  .chip--error {
    border-color: rgba(255, 95, 134, .38);
    background: rgba(255, 95, 134, .12);
    color: var(--text);
  }
}

/* -------------------------------------------------
   NEW: Status regions (ARIA live) — subtle “chip/status” look
   Applies to: <p role="status">…</p> and aria-live blocks inside cards.
-------------------------------------------------- */
.detail-card [role="status"],
.detail-card [aria-live="polite"],
.detail-card [aria-live="assertive"] {
  display: block;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px dashed var(--border);
  background: var(--status-bg);
  color: var(--muted);
}

.detail-card [role="status"]:empty,
.detail-card [aria-live="polite"]:empty,
.detail-card [aria-live="assertive"]:empty {
  display: none;
}

/* Keep existing muted text behavior inside status blocks */
.detail-card [role="status"].muted,
.detail-card [aria-live].muted {
  color: var(--muted);
}

/* Featured (Best Set) styling: subtle highlight, still consistent */
.resource-item.is-featured .resource-card {
  border-color: rgba(255, 106, 179, .28);
  background:
    radial-gradient(640px 240px at 100% 0%, rgba(255, 106, 179, .10), transparent 62%),
    var(--surface);
}

/* Detail page card */
.detail-card {
  margin-top: 14px;
  padding: 16px 16px;
  border-radius: var(--radius2);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow2);
}

.detail-title {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 34px);
  letter-spacing: -.4px;
  line-height: 1.15;
}

.detail-desc {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.detail-section {
  margin-top: 16px;
}

.detail-section h2 {
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: -.2px;
}

.detail-section p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.detail-section ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.7;
}

.detail-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* -------------------------------------------------
   Test detail experience
-------------------------------------------------- */
.test-detail-page {
  --test-accent: #6c63ff;
  --test-accent-2: #ff8a65;
  --test-accent-soft: rgba(108, 99, 255, .18);
  --test-accent-age: #59c3ff;
}

.test-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(240px, .85fr);
  gap: 22px;
  margin-top: 14px;
  padding: 28px;
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--test-accent) 28%, var(--border));
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)),
    radial-gradient(680px 260px at 0% 0%, color-mix(in srgb, var(--test-accent) 22%, transparent), transparent 70%),
    radial-gradient(620px 260px at 100% 0%, color-mix(in srgb, var(--test-accent-2) 22%, transparent), transparent 72%),
    radial-gradient(520px 220px at 50% 100%, color-mix(in srgb, var(--test-accent-age) 18%, transparent), transparent 72%),
    var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 26px 54px rgba(23, 22, 42, .16);
}

.test-hero__copy,
.test-detail-shell,
.test-runner-shell {
  position: relative;
  z-index: 1;
}

.test-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .20);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--test-accent) 70%, var(--text));
}

.test-hero__title {
  margin-top: 18px;
}

.test-hero__subtitle {
  max-width: 60ch;
}

.test-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.test-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  font-size: 13px;
  font-weight: 800;
}

.test-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.test-stat-card {
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05)),
    rgba(255, 255, 255, .04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}

.test-stat-card__label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.test-stat-card strong {
  display: block;
  font-size: 15px;
  line-height: 1.45;
}

.test-hero__art {
  position: relative;
  min-height: 250px;
  display: grid;
  place-items: center;
}

.test-hero__panel,
.test-hero__orb,
.test-hero__spark {
  position: absolute;
}

.test-hero__panel {
  display: grid;
  place-items: center;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)),
    rgba(14, 18, 35, .12);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 18px 36px rgba(23, 22, 42, .18);
  backdrop-filter: blur(14px);
}

.test-hero__panel svg {
  width: 52px;
  height: 52px;
}

.test-hero__panel--main {
  width: 128px;
  height: 128px;
  color: color-mix(in srgb, var(--test-accent) 72%, white);
}

.test-hero__panel--side {
  top: 24px;
  right: 18px;
  width: 82px;
  height: 82px;
  color: color-mix(in srgb, var(--test-accent-age) 72%, white);
}

.test-hero__panel--side svg {
  width: 34px;
  height: 34px;
}

.test-hero__orb {
  border-radius: 50%;
  filter: blur(18px);
  opacity: .88;
  animation: testFloat 12s ease-in-out infinite;
}

.test-hero__orb--one {
  top: 2%;
  left: 6%;
  width: 160px;
  height: 160px;
  background: color-mix(in srgb, var(--test-accent) 35%, transparent);
}

.test-hero__orb--two {
  right: 2%;
  bottom: 14%;
  width: 180px;
  height: 180px;
  background: color-mix(in srgb, var(--test-accent-2) 34%, transparent);
  animation-delay: -4s;
}

.test-hero__orb--three {
  left: 28%;
  bottom: -8%;
  width: 140px;
  height: 140px;
  background: color-mix(in srgb, var(--test-accent-age) 28%, transparent);
  animation-delay: -8s;
}

.test-hero__spark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 0 22px rgba(255, 255, 255, .58);
  animation: testSparkle 3.3s ease-in-out infinite;
}

.test-hero__spark--one {
  top: 24%;
  left: 20%;
}

.test-hero__spark--two {
  right: 24%;
  bottom: 22%;
  animation-delay: -1.5s;
}

.test-detail-shell {
  position: relative;
  margin-top: 18px;
  padding: 22px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--test-accent) 26%, var(--border));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)),
    radial-gradient(720px 260px at 0% 0%, color-mix(in srgb, var(--test-accent) 12%, transparent), transparent 72%),
    radial-gradient(720px 260px at 100% 0%, color-mix(in srgb, var(--test-accent-2) 10%, transparent), transparent 72%),
    var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 22px 48px rgba(23, 22, 42, .16);
}

.test-detail-shell::before,
.test-runner-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.test-detail-shell::before {
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(255, 255, 255, .05) 18% 19%, transparent 19% 41%, rgba(255, 255, 255, .04) 41% 42%, transparent 42% 100%);
  opacity: .55;
}

.test-detail-shell__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.test-detail-shell__summary {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.test-detail-shell__icon {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  color: color-mix(in srgb, var(--test-accent) 76%, white);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)),
    color-mix(in srgb, var(--test-accent-soft) 72%, rgba(255, 255, 255, .04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
}

.test-detail-shell__title {
  margin: 0;
  font-size: clamp(20px, 2vw, 28px);
}

.test-detail-shell__desc {
  max-width: 62ch;
}

.test-stage-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--test-accent-2) 28%, rgba(255, 255, 255, .18));
  background: rgba(255, 255, 255, .10);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--test-accent-2) 76%, var(--text));
}

.test-audio-panel {
  margin-top: 18px !important;
  padding: 18px 18px !important;
  border-radius: 24px;
  border-color: color-mix(in srgb, var(--test-accent) 24%, var(--border));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .05)),
    color-mix(in srgb, var(--test-accent-soft) 55%, var(--surface2));
}

.test-audio-panel select,
.test-audio-panel input[type="range"] {
  accent-color: var(--test-accent);
}

.test-audio-panel select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--test-accent) 24%, var(--border));
  background: rgba(255, 255, 255, .12);
  color: var(--text);
}

.test-runner-shell {
  margin-top: 18px;
  padding: 20px;
  border-radius: 28px;
  border: 1px solid color-mix(in srgb, var(--test-accent) 22%, var(--border));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03)),
    radial-gradient(640px 240px at 0% 0%, color-mix(in srgb, var(--test-accent) 13%, transparent), transparent 72%),
    radial-gradient(640px 240px at 100% 0%, color-mix(in srgb, var(--test-accent-2) 12%, transparent), transparent 72%),
    var(--surface2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 18px 38px rgba(23, 22, 42, .12);
  overflow: hidden;
}

.test-runner-shell::before {
  background:
    linear-gradient(90deg, transparent 0 23%, rgba(255, 255, 255, .04) 23% 24%, transparent 24% 49%, rgba(255, 255, 255, .04) 49% 50%, transparent 50% 75%, rgba(255, 255, 255, .04) 75% 76%, transparent 76% 100%);
  opacity: .45;
  mask-image: radial-gradient(circle at center, black, transparent 84%);
}

.tests-page [data-test-runner-root] {
  position: relative;
  z-index: 1;
}

.tests-page [data-test-runner-root] .note {
  border-color: color-mix(in srgb, var(--test-accent) 18%, var(--border));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--test-accent-soft) 58%, rgba(255, 255, 255, .08)), rgba(255, 255, 255, .08)),
    var(--surface2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.tests-page [data-test-runner-root] fieldset {
  border-color: color-mix(in srgb, var(--test-accent) 20%, var(--border)) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03)),
    radial-gradient(560px 180px at 0% 0%, color-mix(in srgb, var(--test-accent) 10%, transparent), transparent 70%),
    var(--surface2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.tests-page [data-test-runner-root] legend {
  color: var(--text);
  letter-spacing: -.02em;
}

.tests-page [data-test-runner-root] label[for^="opt-"] {
  border-color: color-mix(in srgb, var(--test-accent) 18%, var(--border));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .04)),
    var(--surface2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.actions--test-footer {
  position: relative;
  z-index: 1;
}

@keyframes testFloat {
  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes testSparkle {
  0%,
  100% {
    opacity: .45;
    transform: scale(.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@media (max-width: 900px) {
  .test-hero {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .test-hero__art {
    min-height: 180px;
  }

  .test-stat-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .test-detail-shell,
  .test-runner-shell {
    padding: 18px;
  }

  .test-hero {
    border-radius: 26px;
  }

  .test-hero__panel--main {
    width: 104px;
    height: 104px;
  }

  .test-hero__panel--side {
    width: 68px;
    height: 68px;
  }
}

/* -------------------------------------------------
   NEW: Progress element polish (profile progress bars)
-------------------------------------------------- */
progress {
  width: 100%;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .08);
}

progress::-webkit-progress-bar {
  background: rgba(255, 255, 255, .08);
  border-radius: 999px;
}

progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(107, 102, 255, .85), rgba(255, 106, 179, .75));
}

progress::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(107, 102, 255, .85), rgba(255, 106, 179, .75));
}

@media (prefers-color-scheme: dark) {
  progress {
    background: rgba(255, 255, 255, .06);
  }

  progress::-webkit-progress-bar {
    background: rgba(255, 255, 255, .06);
  }
}

.site-footer {
  margin-top: auto;
  padding: 30px 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.footer-right a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent
}

.footer-right a:hover {
  border-bottom-color: rgba(0, 0, 0, .25)
}

@media (prefers-color-scheme: dark) {
  .footer-right a:hover {
    border-bottom-color: rgba(255, 255, 255, .25)
  }
}

.noscript {
  margin-top: 18px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--muted);
}

/* -------------------------------------------------
   GAMES SECTION STYLES
   Interactive games with animations and playful UI
-------------------------------------------------- */

/* Games page wrapper - yellow glow theme */
.games-page {
  --game-glow: rgba(255, 230, 70, .30);
  --game-glow-border: rgba(255, 230, 70, .52);
  --game-glow-ring: rgba(255, 230, 70, .16);
}

.games-page .btn:hover,
.games-page .btn:focus-visible {
  box-shadow:
    0 0 0 3px var(--game-glow-ring),
    0 0 22px var(--game-glow),
    var(--shadow);
  border-color: var(--game-glow-border);
}

/* Age emoji icons */
.game-age-emoji {
  font-size: 24px;
  line-height: 1;
}

.game-emoji-large {
  font-size: 48px;
  line-height: 1;
}

.card-icon .game-age-emoji {
  font-size: 28px;
}

/* Game count badge */
.game-count-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 230, 70, .15);
  border: 1px solid rgba(255, 230, 70, .35);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

/* Game card enhancements */
.game-card .card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-emoji {
  font-size: 32px;
  line-height: 1;
}

.game-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.difficulty-stars {
  font-size: 12px;
  letter-spacing: -1px;
}

.high-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 215, 0, .15);
  border: 1px solid rgba(255, 215, 0, .35);
  font-size: 12px;
  font-weight: 700;
  color: #d4a800;
}

.mic-badge {
  font-size: 14px;
}

/* Stats summary */
.games-stats-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0;
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: 14px;
}

/* Game play page */
.game-play-page .game-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.game-title-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.game-description {
  margin: 6px 0 0;
  color: var(--muted);
}

.game-high-score {
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 215, 0, .12);
  border: 1px solid rgba(255, 215, 0, .32);
  font-size: 14px;
}

/* Game container */
.game-container {
  position: relative;
  min-height: 400px;
  padding: 20px;
  border-radius: var(--radius2);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow2);
  overflow: hidden;
}

/* Game loading state */
.game-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  gap: 16px;
  color: var(--muted);
}

.game-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* Game error state */
.game-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  gap: 12px;
  text-align: center;
  color: var(--muted);
}

.game-error .emoji {
  font-size: 48px;
}

/* Game controls */
.game-controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.game-start-btn {
  min-width: 140px;
}

/* Microphone note */
.game-mic-note {
  margin-top: 16px;
  background: rgba(255, 106, 179, .08);
  border-color: rgba(255, 106, 179, .25);
}

/* Game HUD */
.game-hud {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 12px 20px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: var(--surface2);
  border: 1px solid var(--border);
}

.hud-score,
.hud-combo,
.hud-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.hud-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
}

.hud-value {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.hud-combo .hud-value {
  color: var(--accent2);
}

.timer-urgent {
  color: #ff5f5f;
  animation: pulse 0.5s ease-in-out infinite;
}

/* Game results overlay */
.game-results-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 16, 32, .85);
  backdrop-filter: blur(8px);
  border-radius: var(--radius2);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity .3s ease, transform .3s ease;
  z-index: 100;
}

.game-results-overlay.is-visible {
  opacity: 1;
  transform: scale(1);
}

.game-results {
  text-align: center;
  padding: 40px;
  max-width: 400px;
}

.game-results.is-high-score .results-title {
  background: linear-gradient(135deg, #ffd700, #ff6ab3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.high-score-badge {
  font-size: 18px;
  font-weight: 800;
  color: #ffd700;
  margin-bottom: 8px;
  animation: bounce 0.5s ease infinite;
}

.results-title {
  margin: 0 0 24px;
  font-size: 32px;
  color: #fff;
}

.results-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-value {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
}

.stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.results-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Animation classes for game engine */
.game-success-flash {
  animation: successFlash .5s ease;
}

@keyframes successFlash {

  0%,
  100% {
    box-shadow: none;
  }

  50% {
    box-shadow: 0 0 30px rgba(0, 255, 136, .7);
  }
}

.game-error-flash {
  animation: errorFlash .5s ease;
}

@keyframes errorFlash {

  0%,
  100% {
    box-shadow: none;
  }

  50% {
    box-shadow: 0 0 30px rgba(255, 70, 90, .7);
  }
}

/* Bounce animation */
@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

/* Pulse animation */
@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .5;
  }
}

/* Shake animation */
@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

/* Confetti container - particles are absolutely positioned */
.game-container {
  overflow: visible;
  /* Allow confetti to escape */
}

/* Game area styles for individual games */
.game-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.game-prompt {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

.game-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 500px;
}

.game-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  border-radius: 16px;
  background: var(--surface);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  min-height: 100px;
}

.game-option:hover {
  transform: scale(1.05);
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(107, 102, 255, .25);
}

.game-option.is-correct {
  border-color: #00ff88;
  box-shadow: 0 0 30px rgba(0, 255, 136, .5);
  animation: bounce .3s ease;
}

.game-option.is-wrong {
  border-color: #ff5f5f;
  box-shadow: 0 0 20px rgba(255, 95, 95, .5);
  animation: shake .3s ease;
}

.game-option-emoji {
  font-size: 48px;
  line-height: 1;
}

.game-option-text {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* Large touch targets for younger ages (0-3, 4-7) */
[data-game-age="0-3"] .game-option,
[data-game-age="4-7"] .game-option {
  min-height: 140px;
  padding: 24px;
}

[data-game-age="0-3"] .game-option-emoji,
[data-game-age="4-7"] .game-option-emoji {
  font-size: 64px;
}

.game-play-page[data-game-age-theme="0-3"] {
  --game-page-accent: #ff8a65;
  --game-page-accent-2: #ffd54f;
}

.game-play-page[data-game-age-theme="4-7"] {
  --game-page-accent: #ff6b6b;
  --game-page-accent-2: #ffd166;
}

.game-play-page[data-game-age-theme="8-10"] {
  --game-page-accent: #4dabf7;
  --game-page-accent-2: #845ef7;
}

.game-play-page[data-game-age-theme="11-12"] {
  --game-page-accent: #00b894;
  --game-page-accent-2: #6c5ce7;
}

.game-play-page[data-game-age-theme="13-18"] {
  --game-page-accent: #9c36ff;
  --game-page-accent-2: #ff6b6b;
}

.game-play-page[data-game-age-theme="featured"] {
  --game-page-accent: #f4b400;
  --game-page-accent-2: #ff6ab3;
}

.game-play-page {
  --game-page-accent: #6b66ff;
  --game-page-accent-2: #ff6ab3;
}

.game-hero-card {
  position: relative;
  margin-bottom: 18px;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .16);
  background:
    radial-gradient(520px 180px at 0% 0%, color-mix(in srgb, var(--game-page-accent) 20%, transparent), transparent 68%),
    radial-gradient(480px 220px at 100% 0%, color-mix(in srgb, var(--game-page-accent-2) 18%, transparent), transparent 66%),
    linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03)),
    var(--surface);
  box-shadow: 0 18px 40px rgba(23, 22, 42, .12);
  overflow: hidden;
}

.game-hero-card::before {
  content: "";
  position: absolute;
  inset: auto -10% -35% auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--game-page-accent-2) 28%, transparent), transparent 70%);
  opacity: .8;
  pointer-events: none;
}

.game-header-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.game-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.game-difficulty-badge,
.game-meta-chip,
.game-status-mini,
.game-start-badge,
.results-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(10px);
  font-size: 13px;
  font-weight: 800;
}

.game-high-score.is-muted {
  color: var(--muted);
}

.game-difficulty-badge strong {
  letter-spacing: .08em;
  color: var(--game-page-accent);
}

.game-meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.game-quick-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.game-quick-stat {
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .07);
}

.game-quick-stat__label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.game-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(260px, .8fr);
  gap: 18px;
  align-items: stretch;
}

.game-stage__main,
.game-tip-card {
  position: relative;
  z-index: 1;
}

.game-stage__backdrop {
  position: absolute;
  inset: -10px;
  border-radius: 32px;
  overflow: hidden;
  pointer-events: none;
}

.game-stage__orb,
.game-stage__spark {
  position: absolute;
  border-radius: 50%;
  opacity: .9;
}

.game-stage__orb {
  filter: blur(18px);
  animation: gameOrbFloat 12s ease-in-out infinite;
}

.game-stage__orb--one {
  top: 5%;
  left: 4%;
  width: 150px;
  height: 150px;
  background: color-mix(in srgb, var(--game-page-accent) 35%, transparent);
}

.game-stage__orb--two {
  top: 10%;
  right: 10%;
  width: 200px;
  height: 200px;
  background: color-mix(in srgb, var(--game-page-accent-2) 32%, transparent);
  animation-delay: -4s;
}

.game-stage__orb--three {
  bottom: 2%;
  left: 34%;
  width: 180px;
  height: 180px;
  background: rgba(255, 255, 255, .12);
  animation-delay: -8s;
}

.game-stage__spark {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 0 24px rgba(255, 255, 255, .55);
  animation: gameSparkle 3.2s ease-in-out infinite;
}

.game-stage__spark--one {
  top: 18%;
  left: 28%;
}

.game-stage__spark--two {
  top: 52%;
  right: 18%;
  animation-delay: -1.2s;
}

.game-stage__spark--three {
  bottom: 16%;
  left: 16%;
  animation-delay: -2s;
}

.game-status-bar,
.game-tip-card {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .05));
  box-shadow: 0 18px 34px rgba(23, 22, 42, .10);
  backdrop-filter: blur(14px);
}

.game-status-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

.game-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.game-status-pill[data-kind="loading"] {
  color: #f4b400;
}

.game-status-pill[data-kind="active"] {
  color: #00c27a;
}

.game-status-pill[data-kind="error"] {
  color: #ff6b6b;
}

.game-status-detail {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.game-status-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.game-container {
  min-height: 480px;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)),
    radial-gradient(700px 260px at 0% 0%, color-mix(in srgb, var(--game-page-accent) 15%, transparent), transparent 68%),
    radial-gradient(740px 320px at 100% 0%, color-mix(in srgb, var(--game-page-accent-2) 14%, transparent), transparent 68%),
    var(--surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 22px 48px rgba(23, 22, 42, .14);
  overflow: hidden;
}

.game-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 24%, rgba(255, 255, 255, .04) 24% 25%, transparent 25% 49%, rgba(255, 255, 255, .04) 49% 50%, transparent 50% 74%, rgba(255, 255, 255, .04) 74% 75%, transparent 75% 100%),
    linear-gradient(transparent 0 24%, rgba(255, 255, 255, .04) 24% 25%, transparent 25% 49%, rgba(255, 255, 255, .04) 49% 50%, transparent 50% 74%, rgba(255, 255, 255, .04) 74% 75%, transparent 75% 100%);
  opacity: .26;
  mask-image: radial-gradient(circle at center, black, transparent 88%);
  pointer-events: none;
}

.game-tip-card {
  padding: 20px;
}

.game-tip-card__eyebrow {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.game-tip-card__title {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.2;
}

.game-tip-card__text {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.6;
}

.game-tip-card__facts {
  display: grid;
  gap: 10px;
}

.game-tip-fact {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
}

.game-tip-fact__label {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.game-refresh-btn:disabled {
  opacity: .55;
  cursor: wait;
}

.game-hud {
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .08);
}

.hud-score,
.hud-combo,
.hud-timer {
  min-width: 88px;
  padding: 8px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
}

.hud-combo {
  opacity: .45;
  transform: scale(.98);
  transition: opacity .18s ease, transform .18s ease, border-color .18s ease;
}

.hud-combo.is-active {
  opacity: 1;
  transform: scale(1);
  border-color: color-mix(in srgb, var(--game-page-accent-2) 30%, rgba(255, 255, 255, .14));
}

.game-ambient-layer,
.game-score-burst-layer,
.game-feedback-stack {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.game-ambient-layer {
  z-index: 0;
  overflow: hidden;
}

.game-feedback-stack,
.game-score-burst-layer {
  z-index: 6;
}

.game-ambient-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, black, transparent 80%);
  opacity: .16;
}

.game-ambient-orb,
.game-ambient-star {
  position: absolute;
}

.game-ambient-orb {
  border-radius: 50%;
  filter: blur(22px);
  opacity: .7;
  animation: gameOrbFloat 16s ease-in-out infinite;
}

.game-ambient-orb--one {
  top: -40px;
  left: -30px;
  width: 160px;
  height: 160px;
  background: color-mix(in srgb, var(--game-accent, var(--game-page-accent)) 30%, transparent);
}

.game-ambient-orb--two {
  top: 10%;
  right: -30px;
  width: 180px;
  height: 180px;
  background: color-mix(in srgb, var(--game-accent-2, var(--game-page-accent-2)) 28%, transparent);
  animation-delay: -5s;
}

.game-ambient-orb--three {
  bottom: -50px;
  left: 28%;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, .10);
  animation-delay: -10s;
}

.game-ambient-star {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 0 20px rgba(255, 255, 255, .55);
  animation: gameSparkle 3.4s ease-in-out infinite;
}

.game-ambient-star--one {
  top: 18%;
  left: 18%;
}

.game-ambient-star--two {
  top: 26%;
  right: 22%;
  animation-delay: -1.5s;
}

.game-ambient-star--three {
  bottom: 18%;
  right: 30%;
  animation-delay: -2.4s;
}

.game-feedback-stack {
  top: 16px;
  right: 16px;
  left: auto;
  display: grid;
  justify-items: end;
  gap: 10px;
}

.game-feedback-chip {
  transform: translateY(-6px) scale(.96);
  opacity: 0;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(15, 16, 32, .72);
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  transition: transform .2s ease, opacity .2s ease;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}

.game-feedback-chip.is-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.game-feedback-chip.is-success {
  border-color: rgba(0, 255, 136, .24);
}

.game-feedback-chip.is-warning {
  border-color: rgba(255, 209, 102, .26);
}

.game-score-burst {
  position: absolute;
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.8);
}

.game-score-burst.is-centered {
  left: 50%;
  top: 24%;
}

.game-score-burst.is-visible {
  animation: gameScoreBurst .9s ease forwards;
}

.game-start-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(9, 12, 24, .84), rgba(9, 12, 24, .94));
  backdrop-filter: blur(18px);
}

.game-start-card {
  width: min(560px, 100%);
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .16);
  background:
    radial-gradient(340px 180px at 0% 0%, color-mix(in srgb, var(--game-page-accent) 24%, transparent), transparent 68%),
    radial-gradient(360px 200px at 100% 0%, color-mix(in srgb, var(--game-page-accent-2) 22%, transparent), transparent 66%),
    rgba(255, 255, 255, .07);
  text-align: center;
  box-shadow: 0 28px 60px rgba(0, 0, 0, .32);
}

.game-start-badges,
.results-ribbons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.game-start-icon {
  margin: 18px 0 14px;
  font-size: 88px;
  line-height: 1;
}

.game-start-title {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 40px);
  color: #fff;
}

.game-start-description,
.results-summary {
  margin: 0 auto;
  max-width: 34ch;
  color: rgba(255, 255, 255, .76);
  line-height: 1.65;
}

.game-start-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0 24px;
}

.game-start-highlight {
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
}

.game-start-highlight__label,
.results-kicker {
  display: block;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, .62);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.results-kicker {
  margin-bottom: 10px;
}

.game-results {
  max-width: 480px;
  padding: 34px;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .16);
  background:
    radial-gradient(340px 180px at 0% 0%, color-mix(in srgb, var(--game-page-accent) 24%, transparent), transparent 68%),
    radial-gradient(360px 200px at 100% 0%, color-mix(in srgb, var(--game-page-accent-2) 22%, transparent), transparent 66%),
    rgba(15, 16, 32, .74);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .30);
}

.results-stats {
  margin-top: 22px;
  margin-bottom: 24px;
  gap: 14px;
}

.stat {
  min-width: 92px;
  padding: 12px 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
}

.results-ribbons {
  margin-top: 18px;
}

.game-container.is-pulse-success {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(0, 255, 136, .25), 0 22px 48px rgba(23, 22, 42, .14), 0 0 34px rgba(0, 255, 136, .14);
}

.game-container.is-pulse-warning {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(255, 209, 102, .28), 0 22px 48px rgba(23, 22, 42, .14), 0 0 34px rgba(255, 209, 102, .14);
}

.game-container.is-pulse-error {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(255, 107, 107, .28), 0 22px 48px rgba(23, 22, 42, .14), 0 0 34px rgba(255, 107, 107, .14);
}

@keyframes gameOrbFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -18px, 0) scale(1.06); }
}

@keyframes gameSparkle {
  0%, 100% { transform: scale(.85); opacity: .35; }
  50% { transform: scale(1.25); opacity: 1; }
}

@keyframes gameScoreBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.75); }
  20% { opacity: 1; transform: translate(-50%, -58%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -140%) scale(1.1); }
}

@media (max-width: 920px) {
  .game-quick-stats,
  .game-start-highlights,
  .game-stage {
    grid-template-columns: 1fr;
  }

  .game-header-side {
    align-items: flex-start;
  }

  .game-status-bar {
    flex-direction: column;
  }

  .game-status-meta {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .game-hero-card,
  .game-tip-card,
  .game-container,
  .game-results,
  .game-start-card {
    padding: 18px;
  }

  .game-title-row {
    align-items: flex-start;
  }

  .game-emoji-large {
    font-size: 40px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important
  }

  .card,
  .btn,
  .skip-link,
  .resource-card {
    transition: none !important
  }

  .card:hover,
  .btn:hover,
  .resource-card:hover {
    transform: none !important
  }

  .tests-page .btn:hover,
  .tests-page .btn:focus-visible {
    box-shadow: var(--shadow2) !important
  }

  .profile-page .btn:hover,
  .profile-page .btn:focus-visible {
    box-shadow: var(--shadow2) !important
  }

  .favourites-page .btn:hover,
  .favourites-page .btn:focus-visible {
    box-shadow: var(--shadow2) !important
  }

  .games-page .btn:hover,
  .games-page .btn:focus-visible {
    box-shadow: var(--shadow2) !important
  }

  .game-option:hover {
    transform: none !important
  }

  .game-loading-spinner {
    animation: none !important
  }

  .confetti-particle {
    display: none !important
  }

  .game-stage__orb,
  .game-stage__spark,
  .game-ambient-orb,
  .game-ambient-star,
  .game-score-burst.is-visible {
    animation: none !important
  }
}