/**
 * @author Uvin Vindula (IAMUVIN)
 * @website https://iamuvin.com
 * @company Terra Labz — terralabz.io
 *
 * iTV Viewer Survey — Design System (OKLCH + P3 progressive enhancement)
 */

/* ─── RESET ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}
body {
  min-height: 100vh; min-height: 100dvh;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
  text-wrap: pretty;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; touch-action: manipulation; }
input, textarea, select { font: inherit; color: inherit; font-size: max(16px, 1rem); /* prevent iOS zoom-to-input */ }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* Custom scrollbar — premium dark */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: var(--r-full); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-lo); background-clip: padding-box; border: 3px solid transparent; }
@supports (scrollbar-color: auto) { html { scrollbar-color: var(--hairline-2) transparent; scrollbar-width: thin; } }

/* ─── DESIGN TOKENS ─────────────────────────────────────────────────── */
:root {
  /* Color — sRGB fallback (older browsers) */
  --bg:           #07060f;
  --bg-elev:     #0e0c1a;
  --surface:     rgba(28, 25, 50, 0.55);
  --hairline:    rgba(255, 255, 255, 0.08);
  --hairline-2:  rgba(255, 255, 255, 0.14);

  --text-hi:     #fafaff;
  --text-md:     #b8b4cc;
  --text-lo:     #6a6580;

  --gold:        #ffb547;
  --gold-soft:   rgba(255, 181, 71, 0.18);
  --teal:        #4dc8d2;
  --teal-soft:   rgba(77, 200, 210, 0.18);
  --violet:      #9d6bff;
  --violet-soft: rgba(157, 107, 255, 0.20);
  --coral:       #ff7a6b;
  --coral-soft:  rgba(255, 122, 107, 0.20);

  /* Type — fallback chain: English glyphs use Inter/Plus Jakarta,
     Sinhala glyphs fall through to Noto Sans Sinhala / Yaldevi.
     The browser picks per-character — works for mixed content. */
  --font-display: 'Plus Jakarta Sans', 'Yaldevi', 'Noto Sans Sinhala', system-ui, sans-serif;
  --font-body:    'Inter', 'Noto Sans Sinhala', 'Yaldevi', system-ui, sans-serif;

  --t-12: 0.75rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-22: 1.375rem;
  --t-28: 1.75rem;
  --t-38: 2.375rem;
  --t-56: 3.5rem;
  --t-80: 5rem;
  --t-120: 7.5rem;

  /* Space */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;
  --s-12: 3rem;    --s-16: 4rem;   --s-20: 5rem;   --s-24: 6rem;

  /* Radius */
  --r-1: 8px;   --r-2: 14px;   --r-3: 22px;   --r-4: 32px;   --r-full: 999px;

  /* Motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 180ms;
  --d-med:  320ms;
  --d-slow: 640ms;
  --d-cinema: 1800ms;

  /* Layout */
  --max-content: 1180px;
  --max-prose: 680px;

  /* Safe-area insets (notched / Dynamic Island / Android gestures) */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);

  /* Touch target minimums (Apple HIG 44, Material 48 — we use 48) */
  --touch-min: 48px;

  /* Modern viewport units (svh ≈ small, dvh ≈ dynamic, lvh ≈ large) */
  --vh-d: 100dvh;
  --vh-s: 100svh;
}

/* P3 progressive enhancement — wider gamut on capable displays */
@supports (color: oklch(0 0 0)) {
  :root {
    --bg:          oklch(0.10 0.025 280);
    --bg-elev:     oklch(0.14 0.030 280);
    --surface:     oklch(0.20 0.035 280 / 0.55);
    --hairline:    oklch(1 0 0 / 0.08);
    --hairline-2:  oklch(1 0 0 / 0.14);

    --text-hi:     oklch(0.98 0.005 280);
    --text-md:     oklch(0.78 0.020 280);
    --text-lo:     oklch(0.55 0.025 280);

    --gold:        oklch(0.82 0.155 78);
    --gold-soft:   oklch(0.82 0.155 78 / 0.18);
    --teal:        oklch(0.78 0.130 200);
    --teal-soft:   oklch(0.78 0.130 200 / 0.18);
    --violet:      oklch(0.68 0.220 295);
    --violet-soft: oklch(0.68 0.220 295 / 0.20);
    --coral:       oklch(0.74 0.180 28);
    --coral-soft:  oklch(0.74 0.180 28 / 0.20);
  }
}

/* ─── BASE ──────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  color: var(--text-hi);
  background: var(--bg);
  font-size: var(--t-16);
  line-height: 1.55;
  letter-spacing: -0.005em;
  overflow-x: hidden;
}

::selection { background: var(--gold); color: var(--bg); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: var(--text-hi); }
p { color: var(--text-md); }

/* ─── AURORA MESH BACKGROUND ────────────────────────────────────────── */
.aurora {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: radial-gradient(ellipse at top, rgba(157,107,255,0.12), transparent 55%), var(--bg);
  contain: strict;
}
.aurora::before, .aurora::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.55;
  will-change: transform;
}
.aurora::before {
  width: min(60vw, 720px); height: min(60vw, 720px); left: -10vw; top: -15vw;
  background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
  animation: drift-a 28s var(--ease) infinite alternate;
}
.aurora::after {
  width: min(55vw, 660px); height: min(55vw, 660px); right: -10vw; bottom: -15vw;
  background: radial-gradient(circle, var(--violet) 0%, transparent 70%);
  animation: drift-b 32s var(--ease) infinite alternate;
}
.aurora__blob {
  position: absolute; width: min(45vw, 540px); height: min(45vw, 540px);
  border-radius: 50%; filter: blur(140px); opacity: 0.45;
  left: 30vw; top: 30vh;
  background: radial-gradient(circle, var(--teal) 0%, transparent 70%);
  animation: drift-c 24s var(--ease) infinite alternate;
  will-change: transform;
}
.aurora__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes drift-a { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(10vw, 8vh) scale(1.1); } }
@keyframes drift-b { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-12vw, -6vh) scale(1.15); } }
@keyframes drift-c { 0% { transform: translate(0, 0) scale(0.9); } 100% { transform: translate(-15vw, 10vh) scale(1.1); } }

/* ─── LAYOUT ────────────────────────────────────────────────────────── */
.shell {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  padding-top:    max(var(--s-5), var(--sat));
  padding-right:  max(var(--s-5), var(--sar));
  padding-bottom: max(var(--s-5), var(--sab));
  padding-left:   max(var(--s-5), var(--sal));
}
@media (min-width: 768px) {
  .shell {
    padding-top:    max(var(--s-8), var(--sat));
    padding-right:  max(var(--s-10), var(--sar));
    padding-bottom: max(var(--s-8), var(--sab));
    padding-left:   max(var(--s-10), var(--sal));
  }
}

.container { width: 100%; max-width: var(--max-content); margin-inline: auto; }
.prose { max-width: var(--max-prose); }

/* ─── HEADER ────────────────────────────────────────────────────────── */
.brand-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--s-6);
  gap: var(--s-3); flex-wrap: wrap;
}
@media (min-width: 768px) { .brand-bar { padding-bottom: var(--s-8); } }
.brand {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-display); font-weight: 800; font-size: var(--t-14);
  letter-spacing: 0.02em;
  min-width: 0;
}
@media (min-width: 480px) { .brand { font-size: var(--t-16); } }
.brand__mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, var(--gold), var(--coral));
  display: grid; place-items: center;
  color: var(--bg); font-weight: 900; font-size: 14px;
}
.brand__sub { color: var(--text-lo); font-weight: 400; font-size: var(--t-12); text-transform: uppercase; letter-spacing: 0.18em; }

.nav-meta { color: var(--text-lo); font-size: var(--t-12); letter-spacing: 0.18em; text-transform: uppercase; }

/* ─── BRAND RIGHT (language toggle + nav meta) ──────────────────────── */
.brand-right {
  display: flex; align-items: center; gap: var(--s-4);
  flex-wrap: nowrap;
  min-width: 0;
}
@media (max-width: 560px) {
  .brand-right { gap: var(--s-3); }
  .brand-right .nav-meta { display: none; }
}

/* ─── LANGUAGE TOGGLE ───────────────────────────────────────────────── */
.lang-toggle {
  display: inline-flex; align-items: center;
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-full);
  padding: 3px;
  gap: 2px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.lang-btn {
  padding: 6px 12px;
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-md);
  min-width: 38px;
  min-height: 32px;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
  touch-action: manipulation;
  white-space: nowrap;
  line-height: 1;
}
.lang-btn.is-active {
  background: var(--text-hi);
  color: var(--bg);
}
.lang-btn:not(.is-active):hover { color: var(--text-hi); }

/* Sinhala script needs a tiny bit more vertical space */
:root[lang="si"] .q-prompt { line-height: 1.18; }
:root[lang="si"] .opt, :root[lang="si"] .chip-opt { line-height: 1.45; }
:root[lang="si"] .hero__title { line-height: 1.05; }

/* ─── BUTTONS ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-6);
  min-height: var(--touch-min);
  border-radius: var(--r-full);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-16);
  letter-spacing: -0.005em;
  transition: transform var(--d-fast) var(--ease), background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
  position: relative; isolation: isolate;
  white-space: nowrap;
  touch-action: manipulation;
  user-select: none;
}
.btn--primary {
  color: var(--bg);
  background: linear-gradient(135deg, var(--gold) 0%, var(--coral) 100%);
  box-shadow: 0 12px 40px -10px var(--gold-soft), 0 0 0 1px rgba(255,255,255,0.06) inset;
  padding: var(--s-5) var(--s-8);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 20px 60px -12px var(--gold-soft), 0 0 0 1px rgba(255,255,255,0.10) inset; }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  color: var(--text-hi);
  background: var(--hairline);
  border: 1px solid var(--hairline-2);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.btn--ghost:hover { background: var(--hairline-2); transform: translateY(-1px); }

.btn--icon { width: 48px; height: 48px; padding: 0; border-radius: var(--r-full); background: var(--hairline); border: 1px solid var(--hairline-2); }
.btn--icon:hover { background: var(--hairline-2); }
.btn--icon:disabled { opacity: 0.3; cursor: not-allowed; }

.btn__arrow { display: inline-block; transition: transform var(--d-fast) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ─── LANDING ───────────────────────────────────────────────────────── */
.hero {
  flex: 1; display: grid; place-items: center; padding: var(--s-12) 0;
}
.hero__inner { text-align: center; max-width: 980px; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-full);
  background: var(--gold-soft); color: var(--gold);
  font-size: var(--t-12); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: var(--s-6);
}
.hero__eyebrow::before { content: ''; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 12px var(--gold); animation: pulse 2s ease infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.hero__title {
  font-size: clamp(var(--t-38), 9vw, var(--t-120));
  font-weight: 800; letter-spacing: -0.045em; line-height: 0.95;
  margin-bottom: var(--s-6);
}
.hero__title .grad {
  background: linear-gradient(135deg, var(--gold) 0%, var(--coral) 40%, var(--violet) 100%);
  background-clip: text; -webkit-background-clip: text; color: transparent;
}
.hero__title .kin { display: inline-block; }

.hero__sub {
  font-size: clamp(var(--t-16), 2.2vw, var(--t-22));
  color: var(--text-md); max-width: 640px; margin: 0 auto var(--s-10);
  line-height: 1.5;
}

.hero__cta-row { display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap; }

.hero__meta-row {
  display: flex; gap: var(--s-8); justify-content: center; flex-wrap: wrap;
  margin-top: var(--s-12); padding-top: var(--s-8);
  border-top: 1px solid var(--hairline);
}
.meta-cell { text-align: center; }
.meta-cell__num { font-family: var(--font-display); font-weight: 800; font-size: var(--t-28); color: var(--text-hi); font-variant-numeric: tabular-nums; }
.meta-cell__label { color: var(--text-lo); font-size: var(--t-12); letter-spacing: 0.16em; text-transform: uppercase; margin-top: var(--s-1); }

/* ─── ARCHETYPE PREVIEW STRIP ───────────────────────────────────────── */
.archetype-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-3);
  margin-top: var(--s-10);
}
.archetype-chip {
  padding: var(--s-4) var(--s-3);
  border-radius: var(--r-2);
  background: var(--surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--hairline);
  text-align: center;
  transition: transform var(--d-med) var(--ease), border-color var(--d-med) var(--ease);
}
.archetype-chip:hover { transform: translateY(-3px); border-color: var(--hairline-2); }
.archetype-chip__glyph {
  display: inline-grid; place-items: center; width: 36px; height: 36px;
  border-radius: var(--r-1);
  font-family: var(--font-display); font-weight: 800; font-size: var(--t-16);
  color: var(--bg);
  margin-bottom: var(--s-2);
}
.archetype-chip__glyph[data-accent="gold"]   { background: linear-gradient(135deg, var(--gold), var(--coral)); }
.archetype-chip__glyph[data-accent="teal"]   { background: linear-gradient(135deg, var(--teal), var(--violet)); }
.archetype-chip__glyph[data-accent="violet"] { background: linear-gradient(135deg, var(--violet), var(--coral)); }
.archetype-chip__glyph[data-accent="coral"]  { background: linear-gradient(135deg, var(--coral), var(--gold)); }
.archetype-chip__name { color: var(--text-md); font-size: var(--t-12); font-weight: 600; letter-spacing: 0.02em; }

/* ─── LANGUAGE PICKER SCREEN ────────────────────────────────────────── */
.lang-picker {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--s-10) 0;
  animation: fade-up 0.6s var(--ease-out) both;
}
.lang-picker__inner {
  width: 100%;
  max-width: 880px;
  text-align: center;
}
.lang-picker__eyebrow {
  display: inline-block;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full);
  background: var(--gold-soft); color: var(--gold);
  font-size: var(--t-12); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-bottom: var(--s-6);
}
.lang-picker__title {
  font-size: clamp(var(--t-28), 4.5vw, var(--t-56));
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.1;
  margin-bottom: var(--s-10);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.lang-picker__title-en { color: var(--text-hi); }
.lang-picker__title-si { color: var(--text-md); font-size: 0.65em; font-weight: 600; }

.lang-picker__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s-4);
  margin-bottom: var(--s-8);
}
@media (min-width: 640px) {
  .lang-picker__grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
}

.lang-card {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-4); padding: var(--s-10) var(--s-6);
  min-height: 240px;
  background: var(--surface);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-3);
  text-align: center;
  transition: transform var(--d-med) var(--ease), border-color var(--d-med) var(--ease), box-shadow var(--d-med) var(--ease), background var(--d-med) var(--ease);
  position: relative; overflow: hidden;
  touch-action: manipulation;
  isolation: isolate;
}
.lang-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, var(--gold-soft), var(--violet-soft));
  opacity: 0; transition: opacity var(--d-med) var(--ease);
}
.lang-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 30px 80px -24px var(--gold-soft);
}
.lang-card:hover::before { opacity: 1; }
.lang-card:active { transform: scale(0.98); }

.lang-card__flag {
  font-size: 4rem; line-height: 1;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3));
}
.lang-card__name {
  font-family: var(--font-display);
  font-size: clamp(var(--t-28), 3.5vw, var(--t-38));
  font-weight: 800; letter-spacing: -0.02em;
  color: var(--text-hi);
  line-height: 1;
}
.lang-card__meta {
  color: var(--text-md);
  font-size: var(--t-14);
  letter-spacing: 0.01em;
}
.lang-card__arrow {
  margin-top: auto;
  font-size: var(--t-22);
  color: var(--text-lo);
  transition: transform var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.lang-card:hover .lang-card__arrow {
  transform: translateX(6px);
  color: var(--gold);
}

.lang-picker__back {
  font-size: var(--t-14);
  padding: var(--s-3) var(--s-5);
  min-height: 40px;
  background: transparent;
  color: var(--text-lo);
}
.lang-picker__back:hover { color: var(--text-hi); }

@media (max-width: 480px) {
  .lang-card { min-height: 180px; padding: var(--s-8) var(--s-5); }
  .lang-card__flag { font-size: 3rem; }
}

/* ─── SURVEY SCREEN ─────────────────────────────────────────────────── */
.survey {
  flex: 1; display: flex; flex-direction: column; padding-top: var(--s-4);
}

.progress {
  display: flex; flex-direction: column; gap: var(--s-3); padding-bottom: var(--s-8);
}
.progress__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  font-size: var(--t-12); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-lo);
  font-variant-numeric: tabular-nums;
}
.progress__title { color: var(--text-md); font-weight: 600; letter-spacing: 0.02em; text-transform: none; font-size: var(--t-14); }
.progress__bar {
  position: relative; height: 3px; border-radius: var(--r-full);
  background: var(--hairline); overflow: hidden;
}
.progress__fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--coral), var(--violet));
  border-radius: var(--r-full);
  transition: width var(--d-slow) var(--ease-out);
  box-shadow: 0 0 24px var(--gold-soft);
}

.section-mark {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-lo); font-size: var(--t-14); text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.section-mark__num { color: var(--gold); margin-right: var(--s-2); }

.q-stage {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  view-transition-name: q-stage;
}
.q-card {
  max-width: 820px; width: 100%; margin: 0 auto;
}
.q-prompt {
  font-size: clamp(var(--t-28), 4.5vw, var(--t-56));
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.05;
  margin-bottom: var(--s-4);
  view-transition-name: q-prompt;
}
.q-helper {
  font-size: var(--t-16); color: var(--text-md); margin-bottom: var(--s-8);
  view-transition-name: q-helper;
}

/* Option list */
.opt-list { display: flex; flex-direction: column; gap: var(--s-3); }
.opt {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  min-height: 64px;
  border-radius: var(--r-2);
  background: var(--surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--hairline);
  text-align: left; width: 100%;
  transition: transform var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
  font-size: var(--t-16); color: var(--text-hi); font-weight: 500;
  line-height: 1.35;
}
.opt:hover { border-color: var(--gold); transform: translateX(4px); }
.opt[aria-pressed="true"] {
  border-color: var(--gold);
  background: linear-gradient(135deg, var(--gold-soft), var(--coral-soft));
  box-shadow: 0 12px 40px -16px var(--gold-soft);
}
.opt__check {
  width: 24px; height: 24px; border-radius: var(--r-full);
  border: 1.5px solid var(--hairline-2); flex-shrink: 0;
  display: grid; place-items: center;
  transition: all var(--d-fast) var(--ease);
}
.opt[aria-pressed="true"] .opt__check {
  background: var(--gold); border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-soft);
}
.opt__check svg { width: 14px; height: 14px; color: var(--bg); opacity: 0; transition: opacity var(--d-fast) var(--ease); }
.opt[aria-pressed="true"] .opt__check svg { opacity: 1; }
.opt__label { flex: 1; }
.opt__kbd {
  font-family: var(--font-body); font-size: var(--t-12); color: var(--text-lo);
  background: var(--hairline); padding: 2px 8px; border-radius: var(--r-1);
  font-variant-numeric: tabular-nums;
}

/* Scale (Likert) */
.scale-wrap { padding-top: var(--s-2); }
.scale-row {
  display: flex; gap: var(--s-2); margin-bottom: var(--s-4); justify-content: space-between;
}
@media (min-width: 480px) { .scale-row { gap: var(--s-3); } }
.scale-btn {
  flex: 1; max-width: 120px;
  min-height: var(--touch-min);
  aspect-ratio: 1.5 / 1;
  border-radius: var(--r-2);
  background: var(--surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--hairline);
  font-family: var(--font-display); font-weight: 700; font-size: var(--t-18);
  color: var(--text-md);
  font-variant-numeric: tabular-nums;
  transition: all var(--d-fast) var(--ease);
  touch-action: manipulation;
}
@media (min-width: 480px) { .scale-btn { font-size: var(--t-22); } }
.scale-btn:hover { border-color: var(--gold); color: var(--text-hi); transform: scale(1.04); }
.scale-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--gold), var(--coral));
  color: var(--bg); border-color: var(--gold);
  box-shadow: 0 12px 40px -12px var(--gold-soft);
}
.scale-labels { display: flex; justify-content: space-between; color: var(--text-lo); font-size: var(--t-12); letter-spacing: 0.04em; }

/* Multi-select chips */
.chip-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-2); }
@media (min-width: 560px) { .chip-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); } }
.chip-opt {
  padding: var(--s-4) var(--s-5); border-radius: var(--r-2);
  min-height: var(--touch-min);
  background: var(--surface); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--hairline);
  text-align: left; color: var(--text-hi); font-weight: 500; font-size: var(--t-16);
  transition: all var(--d-fast) var(--ease);
  display: flex; align-items: center; gap: var(--s-3);
  line-height: 1.35;
  touch-action: manipulation;
}
.chip-opt:hover { border-color: var(--gold); transform: translateY(-2px); }
.chip-opt[aria-pressed="true"] {
  border-color: var(--gold);
  background: linear-gradient(135deg, var(--gold-soft), var(--coral-soft));
}
.chip-opt__dot {
  width: 18px; height: 18px; border-radius: var(--r-1);
  border: 1.5px solid var(--hairline-2); flex-shrink: 0;
  display: grid; place-items: center;
  transition: all var(--d-fast) var(--ease);
}
.chip-opt[aria-pressed="true"] .chip-opt__dot { background: var(--gold); border-color: var(--gold); }
.chip-opt[aria-pressed="true"] .chip-opt__dot::after { content: ''; width: 8px; height: 8px; background: var(--bg); border-radius: 2px; }

.multi-hint { color: var(--text-lo); font-size: var(--t-14); margin-bottom: var(--s-4); font-style: italic; }

/* Survey controls */
.q-controls {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding-top: var(--s-8);
}
.q-controls__left, .q-controls__right { display: flex; align-items: center; gap: var(--s-3); }
.kbd-hint { color: var(--text-lo); font-size: var(--t-12); letter-spacing: 0.04em; }
.kbd-hint kbd {
  font-family: var(--font-body); background: var(--hairline); border: 1px solid var(--hairline-2);
  padding: 2px 7px; border-radius: var(--r-1); font-size: var(--t-12);
  margin: 0 2px;
}

/* ─── COMPUTE SCREEN (cinematic) ────────────────────────────────────── */
.compute {
  flex: 1; display: grid; place-items: center; padding: var(--s-12) 0;
  text-align: center;
}
.compute__ring {
  width: 180px; height: 180px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--gold), var(--coral), var(--violet), var(--teal), var(--gold));
  filter: blur(2px);
  animation: spin 2.4s linear infinite;
  margin: 0 auto var(--s-8);
  position: relative;
}
.compute__ring::before {
  content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--bg);
}
.compute__ring::after {
  content: ''; position: absolute; inset: 16px; border-radius: 50%;
  background: radial-gradient(circle, var(--gold-soft), transparent 70%);
  filter: blur(20px);
}
@keyframes spin { to { transform: rotate(360deg); } }

.compute__title { font-size: clamp(var(--t-28), 4vw, var(--t-38)); margin-bottom: var(--s-3); }
.compute__sub { color: var(--text-md); font-size: var(--t-16); max-width: 460px; margin: 0 auto; }
.compute__steps {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-top: var(--s-8); align-items: flex-start; max-width: 360px;
  margin-inline: auto;
}
.compute__step {
  color: var(--text-lo); font-size: var(--t-14);
  opacity: 0; transform: translateX(-8px);
  animation: fade-step 0.5s var(--ease-out) forwards;
  display: flex; align-items: center; gap: var(--s-2);
}
.compute__step::before { content: '→'; color: var(--gold); }
.compute__step:nth-child(1) { animation-delay: 0.3s; }
.compute__step:nth-child(2) { animation-delay: 0.9s; }
.compute__step:nth-child(3) { animation-delay: 1.6s; }
.compute__step:nth-child(4) { animation-delay: 2.3s; }
@keyframes fade-step { to { opacity: 1; transform: translateX(0); } }

/* ─── RESULT (bento layout) ─────────────────────────────────────────── */
.result {
  flex: 1; padding-top: var(--s-4);
  animation: fade-up 1s var(--ease-out) both;
}
@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.result__hero {
  text-align: center; padding: var(--s-12) 0 var(--s-16);
  position: relative;
}
.result__eyebrow {
  display: inline-block; padding: var(--s-2) var(--s-4); border-radius: var(--r-full);
  background: var(--gold-soft); color: var(--gold);
  font-size: var(--t-12); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.result__name {
  font-size: clamp(var(--t-56), 12vw, var(--t-120));
  font-weight: 800; letter-spacing: -0.05em; line-height: 0.92;
  margin-bottom: var(--s-4);
}
.result__name .grad {
  background: linear-gradient(135deg, var(--gold), var(--coral) 50%, var(--violet));
  background-clip: text; -webkit-background-clip: text; color: transparent;
}
.result__tagline {
  font-size: clamp(var(--t-18), 2.5vw, var(--t-28));
  color: var(--text-md); max-width: 700px; margin: 0 auto;
  font-weight: 400; font-style: italic;
}

.result__emblem {
  width: 140px; height: 140px; border-radius: 36px;
  display: grid; place-items: center;
  margin: 0 auto var(--s-8);
  font-family: var(--font-display); font-weight: 900; font-size: var(--t-80);
  color: var(--bg);
  transform: rotate(-6deg);
  box-shadow: 0 30px 80px -20px var(--gold-soft);
  animation: emblem-in 1.4s var(--ease-out) both;
}
@keyframes emblem-in {
  0% { opacity: 0; transform: rotate(-30deg) scale(0.3); }
  100% { opacity: 1; transform: rotate(-6deg) scale(1); }
}
.result__emblem[data-accent="gold"]   { background: linear-gradient(135deg, var(--gold), var(--coral)); }
.result__emblem[data-accent="teal"]   { background: linear-gradient(135deg, var(--teal), var(--violet)); }
.result__emblem[data-accent="violet"] { background: linear-gradient(135deg, var(--violet), var(--coral)); }
.result__emblem[data-accent="coral"]  { background: linear-gradient(135deg, var(--coral), var(--gold)); }

/* Bento grid */
.bento {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(80px, auto);
}
.bento__tile {
  background: var(--surface); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  padding: var(--s-6);
  position: relative; overflow: hidden;
}
.bento__tile--description { grid-column: span 12; }
.bento__tile--radar { grid-column: span 7; }
.bento__tile--strengths { grid-column: span 5; }
.bento__tile--features { grid-column: span 7; }
.bento__tile--projection { grid-column: span 5; }
.bento__tile--share { grid-column: span 12; text-align: center; padding: var(--s-10) var(--s-6); }

@media (max-width: 900px) {
  .bento__tile--radar,
  .bento__tile--strengths,
  .bento__tile--features,
  .bento__tile--projection { grid-column: span 12; }
}

.tile__eyebrow {
  font-size: var(--t-12); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-lo); margin-bottom: var(--s-3); font-weight: 600;
}
.tile__title {
  font-size: clamp(var(--t-22), 2.5vw, var(--t-28));
  margin-bottom: var(--s-4);
}
.tile__body { color: var(--text-md); font-size: var(--t-16); line-height: 1.6; }

/* Strengths list */
.strength-list { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.strength-list li {
  display: flex; gap: var(--s-3); align-items: flex-start;
  color: var(--text-md); font-size: var(--t-16); line-height: 1.5;
}
.strength-list li::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); margin-top: 8px; flex-shrink: 0;
  box-shadow: 0 0 12px var(--gold);
}

/* Feature bars */
.feature-list { display: flex; flex-direction: column; gap: var(--s-4); }
.feature {
  display: flex; flex-direction: column; gap: var(--s-2);
}
.feature__head {
  display: flex; justify-content: space-between; align-items: baseline;
  color: var(--text-hi); font-size: var(--t-14); font-weight: 500;
}
.feature__score { color: var(--text-lo); font-variant-numeric: tabular-nums; font-size: var(--t-12); }
.feature__bar {
  position: relative; height: 6px; border-radius: var(--r-full);
  background: var(--hairline); overflow: hidden;
}
.feature__fill {
  position: absolute; top: 0; left: 0; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--gold), var(--coral));
  border-radius: var(--r-full);
  transition: width 1.2s var(--ease-out);
}

/* Radar / spider chart */
.radar { display: grid; place-items: center; padding: var(--s-2); }
.radar svg { width: 100%; max-width: 360px; height: auto; }
.radar-grid { stroke: var(--hairline); fill: none; stroke-width: 1; }
.radar-axis { stroke: var(--hairline); stroke-width: 1; }
.radar-shape {
  fill: var(--gold-soft);
  stroke: var(--gold);
  stroke-width: 2;
  filter: drop-shadow(0 0 14px var(--gold-soft));
  transform-origin: center;
  animation: radar-pop 1.4s var(--ease-out) both;
  animation-delay: 0.5s;
}
@keyframes radar-pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.radar-label { fill: var(--text-md); font-size: 11px; font-family: var(--font-body); font-weight: 600; text-anchor: middle; }
.radar-dot { fill: var(--gold); }

/* Projection */
.projection {
  font-size: var(--t-18); color: var(--text-md); line-height: 1.55;
}

/* Share */
.share-wrap { display: flex; flex-direction: column; gap: var(--s-6); align-items: center; }
.share-row { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; }
.share-card-preview {
  max-width: 400px; width: 100%;
  border-radius: var(--r-3); overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
}
.share-card-preview canvas { display: block; width: 100%; height: auto; }

/* ─── CUSTOM CURSOR (desktop only) ──────────────────────────────────── */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width var(--d-fast) var(--ease), height var(--d-fast) var(--ease), background var(--d-fast) var(--ease);
  mix-blend-mode: difference;
  display: none;
}
.cursor.is-hover { width: 48px; height: 48px; background: var(--text-hi); }
@media (hover: hover) and (pointer: fine) {
  body.cursor-on { cursor: none; }
  body.cursor-on .cursor { display: block; }
  body.cursor-on a, body.cursor-on button { cursor: none; }
}

/* ─── FOOTER ────────────────────────────────────────────────────────── */
.foot {
  padding: var(--s-8) 0 var(--s-2);
  display: flex; justify-content: space-between; align-items: center;
  color: var(--text-lo); font-size: var(--t-12);
  letter-spacing: 0.1em;
  border-top: 1px solid var(--hairline);
  margin-top: var(--s-12);
  flex-wrap: wrap; gap: var(--s-3);
}
.foot a { color: var(--text-md); text-decoration: none; transition: color var(--d-fast) var(--ease); }
.foot a:hover { color: var(--gold); }

/* ─── VIEW TRANSITIONS ──────────────────────────────────────────────── */
@supports (view-transition-name: a) {
  ::view-transition-old(q-stage),
  ::view-transition-new(q-stage) {
    animation-duration: var(--d-med);
    animation-timing-function: var(--ease);
  }
  ::view-transition-old(q-stage) { animation-name: vt-out-left; }
  ::view-transition-new(q-stage) { animation-name: vt-in-right; }
  ::view-transition-old(q-stage).back { animation-name: vt-out-right; }
  ::view-transition-new(q-stage).back { animation-name: vt-in-left; }
}
@keyframes vt-out-left { to { opacity: 0; transform: translateX(-40px); } }
@keyframes vt-in-right { from { opacity: 0; transform: translateX(40px); } }
@keyframes vt-out-right { to { opacity: 0; transform: translateX(40px); } }
@keyframes vt-in-left { from { opacity: 0; transform: translateX(-40px); } }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINT MATRIX
   ═══════════════════════════════════════════════════════════════════════

   360  foldable inner / Galaxy Fold portrait    ── mobile-first base
   480  small phone (iPhone SE)
   640  large phone / phone landscape
   768  tablet portrait (iPad mini)
   1024 tablet landscape / small laptop
   1280 standard laptop
   1600 large desktop
   2400 4K / studio display

   Special:
   - (max-height: 480px) and (orientation: landscape) — phone landscape
   - (hover: none) and (pointer: coarse)             — touch-only
   - (hover: hover) and (pointer: fine)              — precise pointer
   - (prefers-reduced-motion)                        — calmer animation
   - (prefers-reduced-transparency)                  — flat surfaces
   - (prefers-contrast: more)                        — high contrast
   - (prefers-color-scheme: light)                   — opt-in light mode
   - (forced-colors: active)                         — Windows high-contrast

   The base styles target the smallest mobile viewport. Each query adds
   progressively. min-width preferred over max-width.
   ═════════════════════════════════════════════════════════════════════ */

/* ─── ULTRA-NARROW / FOLDABLE INNER (≤ 360 px) ──────────────────────── */
@media (max-width: 359px) {
  :root { --s-6: 1rem; --s-8: 1.5rem; --s-10: 2rem; --s-12: 2.5rem; }
  .brand__sub { display: none; }
  .nav-meta { font-size: 10px; }
  .hero__title { font-size: clamp(2rem, 11vw, 2.75rem); letter-spacing: -0.04em; }
  .hero__sub { font-size: var(--t-14); }
  .hero__meta-row { gap: var(--s-4); }
  .meta-cell__num { font-size: var(--t-22); }
  .archetype-strip { grid-template-columns: repeat(2, 1fr); }
  .q-prompt { font-size: clamp(1.5rem, 6vw, var(--t-28)); }
  .opt__kbd { display: none; }
  .result__emblem { width: 96px; height: 96px; border-radius: 24px; font-size: var(--t-56); }
  .result__name { font-size: clamp(2.5rem, 14vw, 3.5rem); }
  .compute__ring { width: 120px; height: 120px; }
  .bento__tile { padding: var(--s-5); }
  .scale-btn { font-size: var(--t-16); }
}

/* ─── SMALL PHONE (≥ 480 px) ────────────────────────────────────────── */
@media (min-width: 480px) {
  .archetype-strip { grid-template-columns: repeat(4, 1fr); }
}

/* ─── PHONE LANDSCAPE / LARGE PHONE (≥ 640 px) ──────────────────────── */
@media (min-width: 640px) {
  .archetype-strip { grid-template-columns: repeat(4, 1fr); }
  .hero { padding: var(--s-16) 0; }
}

/* ─── TABLET PORTRAIT (≥ 768 px) ────────────────────────────────────── */
@media (min-width: 768px) {
  .archetype-strip { grid-template-columns: repeat(8, 1fr); }
  .hero__meta-row { gap: var(--s-12); }
}

/* ─── TABLET LANDSCAPE / SMALL LAPTOP (≥ 1024 px) ───────────────────── */
@media (min-width: 1024px) {
  :root { --max-content: 1180px; }
  .bento { grid-auto-rows: minmax(120px, auto); gap: var(--s-5); }
}

/* ─── STANDARD LAPTOP (≥ 1280 px) ───────────────────────────────────── */
@media (min-width: 1280px) {
  :root { --max-content: 1240px; }
  .hero { padding: var(--s-20) 0; }
}

/* ─── LARGE DESKTOP (≥ 1600 px) ─────────────────────────────────────── */
@media (min-width: 1600px) {
  :root { --max-content: 1440px; --t-120: 9rem; }
  .bento { gap: var(--s-6); }
  .bento__tile { padding: var(--s-8); }
  .hero__title { letter-spacing: -0.055em; }
}

/* ─── 4K / STUDIO (≥ 2400 px) ───────────────────────────────────────── */
@media (min-width: 2400px) {
  :root { --max-content: 1680px; }
  html { font-size: 20px; }                /* gentle upscale of rem-based scale */
}

/* ─── BENTO REFLOW (mobile-first inversion of old max-width rule) ───── */
.bento__tile--radar,
.bento__tile--strengths,
.bento__tile--features,
.bento__tile--projection { grid-column: span 12; }
@media (min-width: 901px) {
  .bento__tile--radar      { grid-column: span 7; }
  .bento__tile--strengths  { grid-column: span 5; }
  .bento__tile--features   { grid-column: span 7; }
  .bento__tile--projection { grid-column: span 5; }
}

/* ─── PHONE LANDSCAPE (short viewport, wide aspect) ─────────────────── */
@media (max-height: 520px) and (orientation: landscape) {
  .shell { padding-top: max(var(--s-3), var(--sat)); padding-bottom: max(var(--s-3), var(--sab)); }
  .brand-bar { padding-bottom: var(--s-3); }
  .hero { padding: var(--s-4) 0; }
  .hero__eyebrow { margin-bottom: var(--s-3); }
  .hero__title { font-size: clamp(1.75rem, 5vw, 2.5rem); margin-bottom: var(--s-3); }
  .hero__sub { font-size: var(--t-14); margin-bottom: var(--s-4); max-width: 480px; }
  .hero__meta-row { display: none; }
  .archetype-strip { display: none; }
  .q-prompt { font-size: clamp(1.5rem, 3.5vw, 2rem); }
  .q-helper { margin-bottom: var(--s-4); font-size: var(--t-14); }
  .result__hero { padding: var(--s-6) 0 var(--s-8); }
  .result__name { font-size: clamp(2rem, 6vw, 3rem); }
  .result__emblem { width: 80px; height: 80px; border-radius: 20px; font-size: 2.5rem; margin-bottom: var(--s-4); }
  .compute__ring { width: 100px; height: 100px; margin-bottom: var(--s-4); }
}

/* ─── TOUCH / NO-HOVER DEVICES ──────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  .kbd-hint { display: none; }
  .opt__kbd { display: none; }
  /* Disable hover-only transforms that look weird on touch */
  .opt:hover { transform: none; }
  .chip-opt:hover { transform: none; }
  .archetype-chip:hover { transform: none; }
  .btn--primary:hover { transform: none; }
  .btn--ghost:hover { transform: none; }
  /* Press-feedback via :active instead */
  .opt:active, .chip-opt:active, .scale-btn:active, .btn:active { transform: scale(0.98); }
}

/* ─── PRECISE POINTER (mouse / trackpad) ────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  body.cursor-on { cursor: none; }
  body.cursor-on .cursor { display: block; }
  body.cursor-on a, body.cursor-on button { cursor: none; }
}

/* ─── REDUCED MOTION ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .aurora::before, .aurora::after, .aurora__blob { animation: none; }
  .cursor { display: none !important; }
}

/* ─── REDUCED TRANSPARENCY (macOS / iOS toggle) ─────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  .opt, .chip-opt, .scale-btn, .bento__tile, .archetype-chip, .btn--ghost, .btn--icon,
  .qr-card, .progress__fill {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .opt, .chip-opt, .scale-btn, .bento__tile, .archetype-chip, .btn--ghost, .btn--icon { background: var(--bg-elev); }
  .aurora::before, .aurora::after, .aurora__blob { opacity: 0.25; }
}

/* ─── HIGH CONTRAST PREFERENCE ──────────────────────────────────────── */
@media (prefers-contrast: more) {
  :root {
    --text-md: #ffffff;
    --text-lo: #cccccc;
    --hairline: rgba(255, 255, 255, 0.35);
    --hairline-2: rgba(255, 255, 255, 0.55);
  }
  .opt, .chip-opt, .scale-btn, .bento__tile, .btn--ghost { border-width: 2px; }
  .opt[aria-pressed="true"] { outline: 2px solid var(--gold); outline-offset: 2px; }
}

/* ─── WINDOWS FORCED-COLORS MODE ────────────────────────────────────── */
@media (forced-colors: active) {
  .opt, .chip-opt, .scale-btn, .bento__tile, .btn { border: 1px solid CanvasText; }
  .opt[aria-pressed="true"], .chip-opt[aria-pressed="true"], .scale-btn[aria-pressed="true"] {
    outline: 3px solid Highlight;
  }
  .aurora, .aurora__blob { display: none; }
}

/* ─── OPT-IN LIGHT MODE (user preference) ───────────────────────────── */
@media (prefers-color-scheme: light) {
  /* We intentionally remain dark — the brand is dark.
     Reserve this block for future light-theme opt-in. */
}

/* ─── COARSE POINTER + REDUCED MOTION → FORCE SIMPLE AURORA ─────────── */
@media (max-width: 640px) {
  /* Cheaper GPU pass on phones: less blur, fewer animated layers */
  .aurora::before, .aurora::after { filter: blur(70px); opacity: 0.45; }
  .aurora__blob { display: none; }
}
@media (max-width: 480px) {
  .aurora::before, .aurora::after { animation-duration: 48s; }  /* slower = less repaint pressure */
}

/* ─── UTILITIES ─────────────────────────────────────────────────────── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hidden { display: none !important; }
.fade-in { animation: fade-in var(--d-slow) var(--ease-out) both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ─── PRINT ─────────────────────────────────────────────────────────── */
@media print {
  @page { margin: 1.5cm; }
  :root {
    --bg: #ffffff; --bg-elev: #ffffff; --surface: #ffffff;
    --text-hi: #0a0a0a; --text-md: #2a2a2a; --text-lo: #555555;
    --hairline: #d0d0d0; --hairline-2: #b0b0b0;
    --gold: #b07a18; --coral: #b04c3c; --teal: #2a7378; --violet: #5c3eaa;
  }
  html, body { background: #ffffff !important; color: #0a0a0a !important; }
  .aurora, .cursor, .btn, .q-controls, .kbd-hint,
  .brand-bar .nav-meta, .foot, #btn-restart,
  .share-row, #screen-survey, #screen-computing, #screen-landing { display: none !important; }
  #screen-result { display: block !important; }
  .bento__tile {
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .result__emblem { box-shadow: none !important; }
  .feature__fill { background: #555 !important; }
  .strength-list li::before { background: #555 !important; box-shadow: none !important; }
  a { color: #0a0a0a !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; font-size: 90%; color: #555; }
  .radar-shape { fill: rgba(0,0,0,0.08) !important; stroke: #333 !important; filter: none !important; }
  .radar-dot { fill: #333 !important; }
  .radar-grid, .radar-axis { stroke: #aaa !important; }
  .radar-label { fill: #333 !important; }
}