/* Clean & Friendly theme for the ability tests (reaction / typing / aim).
   Loaded AFTER tailwind + the per-app stylesheet, it retunes the shared
   Tailwind/indigo vocabulary to the relaunch design language. Scoped to
   body.test-page so it never touches other pages.
   Tokens: Plus Jakarta Sans · cream #FFF6EF · soft purple #8257E6 · coral. */
:root {
  --et-cream: #FFF6EF;
  --et-ink: #1F1733;
  --et-mute: #6B6480;
  --et-purple: #8257E6;
  --et-purple-dark: #6C3FD4;
  --et-purple-soft: #F3EFFB;
  --et-coral: #FF6B5E;
  --et-card-radius: 18px;
  --et-card-shadow: 0 18px 40px rgba(130, 87, 230, 0.12);
}

body.test-page {
  /* Remap easytest.css's dark design tokens to Clean & Friendly light. Most of
     the viraltest chrome (quiz card, options, progress, result, recommended)
     and easytest.css's own rules read these --et-* vars, so this single remap
     re-themes the whole page from dark to light. */
  --et-bg: #FFF6EF;       /* page */
  --et-bg-2: #FFFFFF;     /* cards / panels */
  --et-bg-3: #FAF8FE;     /* tiles / options / inputs */
  --et-bg-4: #EFEAF8;     /* tracks / progress base */
  --et-ink: #1F1733;
  --et-ink-2: #6B6480;
  --et-ink-3: #9A93AE;
  --et-line: #EEE8FA;
  --et-line-2: #F1ECF9;
  --et-line-3: #DDD3F2;
  --et-accent: #8257E6;       /* brand purple replaces amber */
  --et-accent-soft: #A98BF0;
  --et-accent-ink: #FFFFFF;   /* text on the purple accent */
  --et-shadow: 0 18px 40px rgba(130, 87, 230, 0.12);
  color-scheme: light;

  background: var(--et-cream) !important;
  color: var(--et-ink) !important;
  /* No !important on the font so per-app monospace areas (e.g. the typing
     target/input) keep their intended typeface; body.test-page already wins
     over the generic `body` rule by specificity. */
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Center the ad creative inside the dashed slot (it was left-stuck on mobile) */
body.test-page .easy-ad-slot { text-align: center; }
body.test-page .easy-ad-slot .adsbygoogle { margin-left: auto !important; margin-right: auto !important; text-align: center; }

/* Primary buttons (quiz Next, Share result, etc.) — brand purple, not dark ink */
body.test-page .et-btn--primary {
  background: var(--et-purple) !important;
  color: #fff !important;
  border-color: var(--et-purple) !important;
}
body.test-page .et-btn--primary:hover {
  background: var(--et-purple-dark) !important;
  border-color: var(--et-purple-dark) !important;
  color: #fff !important;
}

body.test-page h1,
body.test-page h2,
body.test-page h3 { color: var(--et-ink); font-weight: 800; letter-spacing: -0.01em; }

/* Accent + muted text */
body.test-page .text-indigo-700,
body.test-page .text-indigo-600,
body.test-page .text-indigo-500 { color: var(--et-purple) !important; }
body.test-page .text-gray-700,
body.test-page .text-gray-600,
body.test-page .text-gray-500 { color: var(--et-mute) !important; }

/* White panels -> soft rounded cards */
body.test-page .bg-white {
  background: #fff !important;
  border-radius: var(--et-card-radius) !important;
  box-shadow: var(--et-card-shadow) !important;
  border: 1px solid #F1ECF9;
}
body.test-page .rounded-lg { border-radius: var(--et-card-radius) !important; }

/* Stat / info tiles */
body.test-page .bg-gray-50 { background: #FAF8FE !important; border-color: #EEE8FA !important; border-radius: 14px !important; }
body.test-page .bg-indigo-50 { background: var(--et-purple-soft) !important; border-radius: 14px !important; }
body.test-page .border-gray-200,
body.test-page .border-gray-100 { border-color: #EEE8FA !important; }

/* Buttons -> purple pills */
body.test-page .btn.bg-indigo-600,
body.test-page .btn.bg-indigo-700,
body.test-page button.bg-indigo-600,
body.test-page button.bg-indigo-700 {
  background: var(--et-purple) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 22px rgba(130, 87, 230, 0.28) !important;
}
body.test-page .btn.bg-indigo-600:hover,
body.test-page button.bg-indigo-600:hover,
body.test-page .hover\:bg-indigo-700:hover { background: var(--et-purple-dark) !important; }

/* Accent icon colors -> brand */
body.test-page .text-yellow-500,
body.test-page .text-amber-500 { color: var(--et-coral) !important; }
body.test-page .text-blue-500 { color: var(--et-purple) !important; }
body.test-page .text-green-500 { color: #2BB673 !important; }

/* Progress + level fills */
body.test-page .progress-fill { background: linear-gradient(90deg, var(--et-purple) 0%, #A98BF0 100%) !important; }

/* Share buttons -> brand pills */
body.test-page .share-button {
  background: var(--et-purple) !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: 700;
}
body.test-page .share-button.is-copy {
  background: #fff !important;
  color: var(--et-purple) !important;
  border: 1.5px solid var(--et-purple) !important;
}
body.test-page .share-button:hover { filter: none; background: var(--et-purple-dark) !important; }
body.test-page .share-button.is-copy:hover { background: var(--et-purple-soft) !important; }

/* Ability pages are English-only (content is not data-i18n driven), so the
   KO/EN/JA switcher i18n.js injects would be a confusing no-op — hide it. */
body.test-page #language-selector { display: none !important; }

/* Home link + footer */
body.test-page .home-link { color: var(--et-purple); }
body.test-page footer { color: var(--et-mute); }

/* ============================================================
   Ability-test light surfaces. easytest.css (loaded before this)
   ships a full dark theme for body.test-page — including the bespoke
   ability-test classes. We keep easytest.css for its ad-slot behaviour
   and chrome, but re-skin every surface it darkens back to Clean &
   Friendly here (later load + matching specificity + !important wins).
   ============================================================ */

/* Home button pill */
body.test-page .fixed.top-4.left-4 a,
body.test-page .home-link {
  background: #fff !important;
  color: var(--et-purple) !important;
  border: 1px solid #E7E0F5 !important;
  box-shadow: 0 6px 16px rgba(130, 87, 230, 0.12) !important;
}
body.test-page .fixed.top-4.left-4 a:hover,
body.test-page .home-link:hover { background: var(--et-purple-soft) !important; color: var(--et-purple-dark) !important; }

/* Header */
body.test-page header h1 { color: var(--et-ink) !important; }
body.test-page header p { color: var(--et-mute) !important; }

/* Inputs / textareas */
body.test-page input[type="text"],
body.test-page input[type="number"],
body.test-page input[type="email"],
body.test-page textarea {
  background: #fff !important;
  color: var(--et-ink) !important;
  border: 1.5px solid #E7E0F5 !important;
}
body.test-page input:focus,
body.test-page textarea:focus {
  border-color: var(--et-purple) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(130, 87, 230, 0.12) !important;
}

/* Stats row */
body.test-page .stats-container {
  background: #fff !important;
  border: 1px solid #EEE8FA !important;
  border-radius: var(--et-card-radius) !important;
  box-shadow: var(--et-card-shadow) !important;
}
body.test-page .stats-container .stat { border-right-color: #EEE8FA !important; }
body.test-page .stat-value { color: var(--et-purple) !important; }
body.test-page .stat-label { color: var(--et-mute) !important; }

/* Typing target text */
body.test-page .text-container {
  background: #fff !important;
  border: 1px solid #EEE8FA !important;
  border-radius: var(--et-card-radius) !important;
  color: var(--et-ink) !important;
}
body.test-page .target-text { color: var(--et-mute); }
body.test-page .target-text .correct { color: #1F8A52 !important; background: #E5F6EC !important; }
body.test-page .target-text .incorrect { color: #C0392B !important; background: #FBE7E4 !important; }
body.test-page .target-text .current { border-bottom: 2px solid var(--et-purple) !important; background: var(--et-purple-soft) !important; color: var(--et-ink); }

/* Typing input */
body.test-page #typing-input {
  background: #fff !important;
  border: 1.5px solid #E7E0F5 !important;
  color: var(--et-ink) !important;
  border-radius: var(--et-card-radius) !important;
}
body.test-page #typing-input:focus { border-color: var(--et-purple) !important; }

/* Controls buttons */
body.test-page .controls .btn.primary {
  background: var(--et-purple) !important; color: #fff !important; border: none !important;
  box-shadow: 0 10px 22px rgba(130, 87, 230, 0.28) !important;
}
body.test-page .controls .btn.primary:hover { background: var(--et-purple-dark) !important; color: #fff !important; }
body.test-page .controls .btn.secondary,
body.test-page .controls .btn.facebook {
  background: #fff !important; color: var(--et-purple) !important; border: 1.5px solid var(--et-purple) !important;
}
body.test-page .controls .btn.secondary:hover,
body.test-page .controls .btn.facebook:hover { background: var(--et-purple-soft) !important; border-color: var(--et-purple) !important; }

/* Result container */
body.test-page .result-container {
  background: var(--et-purple-soft) !important;
  border: 1px solid #E7E0F5 !important;
  border-radius: var(--et-card-radius) !important;
  color: var(--et-ink) !important;
}
body.test-page .result-container h2 { color: var(--et-ink) !important; }
body.test-page .final-stat { border-bottom-color: #E0D7F4 !important; }
body.test-page .final-stat .label { color: var(--et-mute) !important; }
body.test-page .final-stat .value { color: var(--et-purple) !important; }

/* Comparison tables (reaction / aim) */
body.test-page table,
body.test-page table td { color: var(--et-ink) !important; }
body.test-page thead tr,
body.test-page table tr.bg-gray-50 { background: #F3EFFB !important; }
body.test-page table th { color: var(--et-mute) !important; }
body.test-page tbody tr { border-bottom-color: #EEE8FA !important; }

/* Custom-text panel */
body.test-page .custom-text-container {
  background: #fff !important;
  border: 1px solid #EEE8FA !important;
  border-radius: var(--et-card-radius) !important;
}
body.test-page .custom-text-container label { color: var(--et-ink) !important; }

/* Game container (reaction / aim) */
body.test-page .game-container {
  background: #fff !important;
  border: 1px solid #EEE8FA !important;
  border-radius: var(--et-card-radius) !important;
}

/* Ad slot wrapper (easytest gives it a dark bg) */
body.test-page .easy-ad-slot {
  background: #fff !important;
  border: 1px dashed #E7E0F5 !important;
  color: var(--et-mute) !important;
  border-radius: var(--et-card-radius) !important;
}
body.test-page .easy-ad-slot.is-local-ad-test::before {
  background: var(--et-purple-soft) !important;
  color: var(--et-mute) !important;
}

/* Progress + level indicators */
body.test-page .progress-bar { background: #EFEAF8 !important; }
body.test-page .level-indicator { background: #EFEAF8 !important; }
body.test-page .level-marker:after { color: var(--et-ink) !important; background: #fff !important; border: 1px solid #EEE8FA !important; }
body.test-page #userLevelMarker:after { background: var(--et-purple) !important; color: #fff !important; border-color: var(--et-purple) !important; }