/* ---------------------------------------------------------------------------
   Captcha Trainer (/captcha-trainer). Landing/concept page only for now — see
   system/apps/captcha_trainer/views/home.php for why nothing here is wired.
   Kept out of assets/css/main.css on purpose, loaded via $app_styles, same
   move every other game's own CSS file makes.

   No --wp-capt-cor of its own: this page borrows --wp-app-cor straight off
   .wp-app-marca/.wp-app-frame like a plain content app does, since there is
   no gameplay identity to protect yet — only a concept, still up for grabs.
   Every var(--wp-app-cor) below carries the same #39FF14 fallback the seed
   row itself uses, so a blank/missing apps.color value dims the accent
   instead of leaving it to resolve to nothing.

   Hard rule for this file: main.css sets no default text `color` anywhere
   in the ancestor chain (body, .wp-container, .wp-app-frame*) — every single
   rule below MUST set its own `color`, or the text renders in the browser's
   default black, invisible on this page's black background. That exact
   mistake is why .wp-auth-flash is never used bare on this page (see
   .wp-capt-honestidade further down) — it ships with no color/background of
   its own, only spacing, same as the rest of the site's "flash" boxes.
   --------------------------------------------------------------------------- */

.wp-capt-titulo {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.25rem;
  line-height: 1.5;
  text-align: center;
  color: #fff;
  text-shadow: 0 0 18px var(--wp-app-cor, #39FF14);
  margin: 0 0 0.75rem;
  animation: wp-capt-flicker 6s infinite;
}

/* the title stutters like a connection that is about to ask you to prove
   you're human again — thematic, not just decorative */
@keyframes wp-capt-flicker {
  0%, 19%, 21%, 23%, 54%, 56%, 100% { opacity: 1; }
  20%, 22%, 55% { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .wp-capt-titulo {
    animation: none;
  }
}

.wp-capt-tagline {
  font-family: system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  max-width: 44ch;
  margin: 0 auto 1.75rem;
}

.wp-capt-cta-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 0.5rem;
}

/* .wp-auth-submit alone is width: 100% — fine inside a narrow auth card, but
   this page's body is the full app-frame width, so left bare it stretched
   into one giant edge-to-edge pill. Same fix ppc.php's own
   .wp-ppc-compra__btn applies to the same base class. */
.wp-capt-cta {
  width: auto;
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

/* Difficulty ladder — one row per level, numbered like an arcade cabinet's
   stage select, all inert: div/span only, nothing here is a link or button
   because there is nowhere yet for it to go. */

.wp-capt-niveis {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
}

.wp-capt-nivel {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.25));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 3px solid var(--wp-app-cor);
  border-radius: 5px;
  padding: 0.9rem 1.1rem;
}

.wp-capt-nivel__rank {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.85rem;
  color: var(--wp-app-cor, #39FF14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.35);
}

.wp-capt-nivel__corpo {
  flex: 1 1 auto;
  min-width: 0;
}

.wp-capt-nivel__titulo {
  font-family: system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
  margin: 0 0 0.3rem;
}

.wp-capt-nivel__texto {
  font-family: system-ui, sans-serif;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.wp-capt-nivel__selo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: system-ui, sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.45);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  padding: 0.3rem 0.65rem;
  white-space: nowrap;
}

.wp-capt-nivel__selo svg {
  font-size: 0.9em;
}

/* the final boss reads hotter than the rest of the ladder — red instead of
   the app's own accent, same "danger" language .wp-alta/.wp-vermelho carry
   everywhere else on the site */
.wp-capt-nivel--boss {
  border-left-color: var(--wp-vermelho, #ff0033);
}

.wp-capt-nivel--boss .wp-capt-nivel__rank {
  color: var(--wp-vermelho, #ff0033);
}

@media (max-width: 560px) {
  .wp-capt-nivel {
    flex-wrap: wrap;
  }

  .wp-capt-nivel__selo {
    margin-left: calc(2.5rem + 1.1rem);
  }
}

/* Captcha-type gallery — the "50+" catalog, shown as inert chips rather than
   as a promise: see the honesty note right under the section title. */

.wp-capt-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
  margin: 1.25rem 0 0.6rem;
}

.wp-capt-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  padding: 0.85rem 0.5rem;
}

.wp-capt-chip svg {
  font-size: 1.3rem;
  color: var(--wp-app-cor, #39FF14);
  opacity: 0.85;
}

.wp-capt-chip span {
  font-family: system-ui, sans-serif;
  font-size: 0.7rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.6);
}

.wp-capt-chip--mais {
  border-style: dashed;
  opacity: 0.65;
}

.wp-capt-galeria-nota,
.wp-capt-secao-nota {
  font-family: system-ui, sans-serif;
  font-size: 0.74rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.4);
  margin: 0.6rem 0 0;
}

/* sits right under a section's h2, before its content starts */
.wp-capt-secao-nota {
  margin: -0.5rem 0 1.25rem;
}

/* .wp-auth-flash's own rules (main.css) are spacing/type only — every real
   use on the site pairs it with a modifier for color+background
   (--erro, --sucesso). This is this page's modifier, paired the same way. */
.wp-capt-honestidade {
  background: rgba(57, 255, 20, 0.05);
  border: 1px solid rgba(57, 255, 20, 0.25);
  color: rgba(255, 255, 255, 0.7);
}

.wp-capt-honestidade strong {
  color: #fff;
}