/* Neuriosity — app shell
   ------------------------------------------------------------------
   Palette and type are inherited from the Brain Power website so the app,
   the site and the mailing list all look like one brand.

   Layout rules that matter on a phone:
   - the app is exactly one viewport tall and never scrolls as a whole;
     only .scroll scrolls, so the nav bar and header never drift away
   - every fixed edge respects env(safe-area-inset-*) for notches and
     the iOS home indicator
   - the game stage is a fixed-height box, because the game kit sizes
     everything from min(width, height) of its mount */

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-latin-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --navy: #062b63;
  --navy-deep: #041f4c;
  --blue: #0878e8;
  --blue-bright: #19a4f3;
  --blue-soft: #dff4ff;
  --blue-pale: #eff8ff;
  --teal: #13aa8b;
  --yellow: #ffc835;
  --coral: #f15f6d;
  --ink-soft: #526b8e;
  --line: #d8e7f4;
  --white: #fff;
  /* The wordmark on light grounds. The header is a gradient, --navy at the
     left edge running to --blue, so the wordmark takes the header's own
     starting color rather than an eyedropped approximation of it. */
  --wordmark: var(--navy);

  --nav-h: 60px;
  --pad: 16px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

/* A class that sets display beats the UA rule for [hidden], and this app
   toggles a lot of boxes that carry both. Make the attribute win. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  min-width: 320px;
  color: var(--navy);
  font-family: "Poppins", -apple-system, "Segoe UI", system-ui, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: var(--blue-pale);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

.sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================ WORDMARK ============================
   The logo. One component for the name wherever it appears - splash, home
   header, unlock card - so the brand can never drift between screens.
   Full specification and rationale: /brand/logo-spec.html

   Only SIZE and COLOR may change per placement. Font, weight, case and
   tracking are fixed and must not be overridden.

   Tracking is +0.02em (Photoshop tracking +20). It was -0.035em, which
   packed the letters so tightly that the ink of T and Y actually touched:
   rendering the word at 120px and scanning for blank columns found 8 gaps
   between 10 letters instead of 9. At +0.02em every pair separates, with
   the tightest gap 1.5px and the median 3.3px at the 26px used in the app. */

.wordmark {
  margin: 0;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================ SPLASH ============================ */

.splash {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--blue) 100%);
  transition: opacity 420ms ease, visibility 420ms ease;
}

.splash[data-hide="true"] { opacity: 0; visibility: hidden; }

.splash__mascot {
  width: 120px; height: auto;
  margin-bottom: 14px;
  animation: rise 620ms cubic-bezier(.2,.9,.3,1.2) both;
}

.splash__word { color: #fff; font-size: var(--wm); }

/* ---------- Brand lockup ----------
   The app is "Neuriosity Brain Games", so BRAIN GAMES is locked beneath the
   wordmark everywhere the mark appears: splash, home header, unlock card.
   Only --wm changes between placements; everything else is derived from it,
   so the mark stays identical in proportion wherever it is used. */

.lockup {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-width: 0;
}

.brand__sub {
  margin: 0.24em -0.54em 0 0;
  color: var(--yellow);
  font-size: calc(var(--wm) * 0.5);
  font-weight: 800;
  line-height: 1;
  /* Tracked out so the sub-line spans the wordmark above it. Letter-spacing
     also adds a gap after the final letter, so the negative right margin
     pulls that back and keeps both lines optically flush. */
  letter-spacing: 0.54em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* On a light ground the yellow disappears, so the sub-line takes the blue. */
.brand__sub--ink { color: var(--blue); }

.lockup--splash {
  --wm: 2.15rem;
  align-items: center;
  animation: rise 620ms 90ms cubic-bezier(.2,.9,.3,1.2) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px) scale(.94); }
  to { opacity: 1; transform: none; }
}

/* ============================ FRAME ============================ */

.app { height: 100%; }

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--nav-h) + var(--safe-b));
}

.screen[hidden] { display: none; }

/* Game screens keep the same protected bottom-navigation clearance as the
   rest of the app. The stage flexes only inside the space between the fixed
   header and navigation, so controls cannot disappear behind either edge. */
.screen--game { padding-bottom: calc(var(--nav-h) + var(--safe-b)); }

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  padding: calc(var(--safe-t) + 13px) calc(var(--pad) + var(--safe-r)) 13px calc(var(--pad) + var(--safe-l));
  color: #fff;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 118%);
}

.topbar__mascot { width: 46px; height: auto; flex: 0 0 auto; }
.topbar__text { min-width: 0; }

/* The home header is the brand lockup: mascot, then the name as large as
   the row allows, then the tagline filling whatever is left. The wordmark
   scales with the viewport so it stays the biggest thing in the row on a
   large phone without crowding the tagline off a small one. */

/* Mascot, then the lockup, then the tagline in whatever room is left. On a
   narrow phone the tagline wraps to its own full-width line rather than
   squeezing the mark. */
.topbar--brand { gap: 11px; flex-wrap: wrap; }

.lockup--bar { --wm: clamp(1.05rem, 5.6vw, 1.62rem); }

.topbar__word {
  color: #fff;
  /* 90% of the size used on light grounds. White type on a dark ground
     optically blooms, so the same size reads heavier and tighter here than
     it does on the unlock card; dropping it 10% makes the two match. */
  font-size: var(--wm);
}

.topbar__tag {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  flex: 1 1 120px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #bcdcff;
  font-size: clamp(0.6rem, 2.7vw, 0.76rem);
  font-weight: 600;
  line-height: 1.28;
}

.topbar__name {
  margin: 0;
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.topbar__sub {
  margin: 1px 0 0;
  overflow: hidden;
  color: #bcdcff;
  font-size: 0.775rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar--game { justify-content: space-between; }

.topbar__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__spacer { flex: 0 0 auto; width: 38px; }

.iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px; height: 38px;
  padding: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 0;
  border-radius: 50%;
}

.iconbtn:active { background: rgba(255, 255, 255, 0.28); }

.iconbtn svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- scrolling body ---------- */

.scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px calc(var(--pad) + var(--safe-r)) 26px calc(var(--pad) + var(--safe-l));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.section-head {
  margin: 20px 0 10px;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.scroll > .section-head:first-child { margin-top: 2px; }

.foot-note {
  margin: 18px 0 0;
  color: var(--ink-soft);
  font-size: 0.76rem;
  text-align: center;
}

/* ============================ GAME TILES ============================ */

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

@media (min-width: 560px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 820px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scroll > * { max-width: 900px; margin-inline: auto; }
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 13px 13px 14px;
  overflow: hidden;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 17px;
  box-shadow: 0 5px 16px rgba(6, 43, 99, 0.06);
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.tile:active { transform: scale(0.972); box-shadow: 0 2px 8px rgba(6, 43, 99, 0.08); }

.tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  color: #fff;
  background: var(--accent, var(--blue));
  border-radius: 13px;
}

.tile__icon svg {
  width: 23px; height: 23px;
  fill: none; stroke: currentColor;
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}

.tile__name {
  margin: 0;
  font-size: 0.93rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.tile__kind {
  margin: -4px 0 0;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
}

.tile__best {
  margin: 0;
  padding: 3px 9px;
  color: var(--navy);
  font-size: 0.67rem;
  font-weight: 800;
  background: var(--blue-soft);
  border-radius: 999px;
}

.tile--locked { background: #f7fbff; }
.tile--locked .tile__icon { background: #b9cde3; }
.tile--locked .tile__name,
.tile--locked .tile__kind { color: #8aa2bd; }

.tile__lock {
  position: absolute;
  top: 11px; right: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px; height: 23px;
  color: #fff;
  background: #97b0cb;
  border-radius: 50%;
}

.tile__lock svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}

/* ============================ PROMO SLOT ============================
   Bob's own affiliate offers. Filled from assets/data/promos.json so the
   offers can be changed on the server without shipping an app update.
   Every promo carries a visible "Ad" label: Play requires ads to be
   distinguishable from app content and the FTC requires disclosure. */

.promo-slot:empty { display: none; }

.promo {
  position: relative;
  display: block;
  width: 100%;
  padding: 14px 15px 15px;
  text-align: left;
  text-decoration: none;
  background: linear-gradient(135deg, #fff 0%, var(--blue-soft) 210%);
  border: 1px solid var(--line);
  border-radius: 17px;
  box-shadow: 0 5px 16px rgba(6, 43, 99, 0.06);
}

.promo:active { transform: scale(0.99); }

.promo__tag {
  display: inline-block;
  margin-bottom: 7px;
  padding: 2px 8px;
  color: var(--ink-soft);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(6, 43, 99, 0.07);
  border-radius: 999px;
}

.promo__head {
  margin: 0;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.24;
}

.promo__body {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 0.815rem;
  line-height: 1.42;
}

.promo__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: var(--blue);
  font-size: 0.815rem;
  font-weight: 800;
}

.promo__cta::after { content: "→"; }

/* ============================ UNLOCK BANNER ============================ */

/* The locked half of the grid, below the unlock banner. */
.tiles--locked { margin-top: 16px; }

.unlock-banner {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 16px;
  padding: 14px 15px;
  color: #fff;
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 130%);
  border-radius: 17px;
}

.unlock-banner__text { flex: 1 1 auto; min-width: 0; }

.unlock-banner__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.unlock-banner__sub {
  margin: 2px 0 0;
  color: #bcdcff;
  font-size: 0.77rem;
  line-height: 1.35;
}

/* ============================ GAME STAGE ============================ */

.stage {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  background: radial-gradient(circle at 50% 34%, #fff 0%, var(--blue-pale) 62%, #dcefff 100%);
}

/* The ready screen the kit restores between rounds. */
.ready {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%; height: 100%;
  padding: 24px 22px calc(24px + var(--safe-b));
  text-align: center;
}

.ready__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  margin-bottom: 3px;
  color: #fff;
  background: var(--accent, var(--blue));
  border-radius: 20px;
}

.ready__icon svg {
  width: 32px; height: 32px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Each game's own mascot pose, on both the ready screen and the
   not-yet-built screen. Height-capped as well as width-capped so a tall
   pose and a wide one take the same vertical room and the button below
   never moves between games. */
.ready__mascot {
  width: auto;
  max-width: min(190px, 52vw);
  height: min(150px, 21vh);
  object-fit: contain;
  margin-bottom: 2px;
}

.ready__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.ready__body {
  max-width: 330px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

.ready__best {
  margin: 2px 0 0;
  padding: 4px 13px;
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 800;
  background: var(--blue-soft);
  border-radius: 999px;
}

.ready .btn { margin-top: 10px; }

/* ============================ CARDS / FORMS ============================ */

.card {
  padding: 20px 18px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 8px 26px rgba(6, 43, 99, 0.07);
}

.card--hero { text-align: center; }

.lockup--card {
  --wm: clamp(1.3rem, 6.6vw, 1.65rem);
  align-items: center;
  margin-bottom: 8px;
}

.card__word { color: var(--wordmark); font-size: var(--wm); }

.card__mascot { width: 152px; height: auto; }

.card__title {
  margin: 8px 0 0;
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.card__body {
  margin: 7px 0 0;
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.5;
}

.stack { display: flex; flex-direction: column; gap: 9px; margin-top: 17px; }
.stack[hidden] { display: none; }

.field {
  width: 100%;
  height: 48px;
  padding: 0 17px;
  color: var(--navy);
  font-size: 1rem;
  background: #f6fbff;
  border: 1.6px solid var(--line);
  border-radius: 999px;
  text-align: center;
}

.field:focus {
  outline: none;
  background: #fff;
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 3.5px rgba(25, 164, 243, 0.19);
}

.field--code {
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.field--code::placeholder { font-weight: 500; letter-spacing: 0.02em; text-transform: none; }

.micro {
  margin: 1px 0 0;
  color: var(--ink-soft);
  font-size: 0.735rem;
  text-align: center;
}

.sent-note, .done-note {
  margin: 0;
  padding: 11px 13px;
  font-size: 0.83rem;
  line-height: 1.45;
  border-radius: 13px;
}

.sent-note { color: #0b5e4b; background: #e2f7f1; }
.done-note { color: #0b5e4b; font-weight: 700; background: #e2f7f1; text-align: center; }

.formnote {
  margin: 11px 0 0;
  min-height: 18px;
  color: var(--coral);
  font-size: 0.79rem;
  font-weight: 600;
  text-align: center;
}

.formnote:empty { margin: 0; min-height: 0; }

/* ============================ BUTTONS ============================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 22px;
  color: #fff;
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  background: var(--blue);
  border: 0;
  border-radius: 999px;
  transition: transform 130ms ease, background 130ms ease;
}

.btn:active { transform: scale(0.975); background: var(--navy); }
.btn--full { width: 100%; }
.page-back {
  display: flex;
  margin: 0 auto 14px;
}
.articles__back { margin-top: 14px; }

.btn--light {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 16px;
  color: var(--navy);
  font-size: 0.83rem;
  background: var(--yellow);
}

.btn--text {
  min-height: 38px;
  color: var(--ink-soft);
  font-size: 0.81rem;
  font-weight: 700;
  background: none;
}

.btn--danger { background: var(--coral); }
.btn--danger:active { background: #c83f51; }
.btn:disabled {
  color: #f4f7fb;
  background: #9db4cc;
  transform: none;
  cursor: not-allowed;
  opacity: 0.78;
}

/* ============================ PROGRESS ============================ */

.progress-status {
  min-height: 42px;
  margin: 0 auto 14px;
  padding: 10px 14px;
  color: #176a59;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  background: #e2f7f1;
  border-radius: 13px;
}

.progress-status[data-tone="warning"] {
  color: #805900;
  background: #fff3cf;
}

.progress-content { width: 100%; }

.progress-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.progress-metric {
  min-width: 0;
  padding: 14px 8px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: 0 7px 20px rgba(6, 43, 99, 0.05);
}

.progress-metric__value {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.35rem, 6vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
}

.progress-metric__label {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
}

.progress-bests {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.progress-best {
  position: relative;
  min-width: 0;
  padding: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: 0 7px 20px rgba(6, 43, 99, 0.05);
}

.progress-best::before {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 4px;
  background: var(--accent, var(--blue));
}

.progress-best__name {
  margin: 0;
  overflow: hidden;
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.progress-best__score {
  margin: 8px 0 0;
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.15;
}

.progress-best__score.is-empty { color: #9db4cc; }

.progress-best__trend {
  min-height: 1.2em;
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 0.67rem;
  font-weight: 600;
}

.progress-best__trend.is-up { color: #138269; }
.progress-best__trend.is-down { color: var(--coral); }

.progress-recent {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
}

.progress-result {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}

.progress-result:first-child { border-top: 0; }

.progress-result__mark {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  background: var(--accent, var(--blue));
  border-radius: 50%;
}

.progress-result__text {
  flex: 1 1 auto;
  min-width: 0;
}

.progress-result__name {
  margin: 0;
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 700;
}

.progress-result__date {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 0.67rem;
}

.progress-result__score {
  flex: 0 0 auto;
  margin: 0;
  color: var(--navy);
  font-size: 0.8rem;
  font-weight: 800;
  text-align: right;
}

.progress-empty {
  padding: 28px 20px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(6, 43, 99, 0.07);
}

.progress-empty__mascot {
  width: auto;
  height: 130px;
  object-fit: contain;
}

.progress-empty__title {
  margin: 12px 0 0;
  font-size: 1.2rem;
  font-weight: 800;
}

.progress-empty__body {
  max-width: 390px;
  margin: 8px auto 18px;
  color: var(--ink-soft);
  font-size: 0.84rem;
}

.progress__back { margin-top: 14px; }

@media (min-width: 620px) {
  .progress-bests { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .progress-bests { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================ EMAIL CONFIRMATION ============================ */

.confirmation-page {
  display: grid;
  place-items: center;
}

.confirmation-card {
  width: min(100%, 560px);
  padding: clamp(26px, 6vw, 42px) clamp(20px, 6vw, 38px);
  color: var(--navy);
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(6, 43, 99, 0.08);
}

.confirmation-card__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  background: #2eaa76;
  border-radius: 50%;
}

.confirmation-card__eyebrow {
  margin: 0 0 7px;
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.confirmation-card__title {
  margin: 0;
  font-size: clamp(1.35rem, 5vw, 1.8rem);
  line-height: 1.2;
}

.confirmation-card__body {
  margin: 12px auto 22px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

.confirmation-card[data-tone="pending"] .confirmation-card__icon {
  color: #704f00;
  background: #ffd35a;
}

.confirmation-card[data-tone="error"] {
  border-color: #f3c5cb;
}

.confirmation-card[data-tone="error"] .confirmation-card__icon {
  background: var(--coral);
}

/* ============================ ACCOUNT ============================ */

.account-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.account-intro,
.account-card {
  width: 100%;
  padding: 19px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 17px;
  box-shadow: 0 9px 25px rgba(6, 43, 99, 0.055);
}

.account-intro {
  color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  border: 0;
}

.account-intro__eyebrow,
.account-card__eyebrow {
  margin: 0 0 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.account-intro__eyebrow { color: #bfe2ff; }
.account-card__eyebrow { color: var(--coral); }

.account-intro__title,
.account-card__title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.account-intro__body,
.account-card__body {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.55;
}

.account-intro__body { color: #e4f2ff; }
.account-card--danger { border-color: #f3c5cb; }
.account-card--success {
  color: #0b5e4b;
  background: #e2f7f1;
  border-color: #b5e6da;
}
.account-card--success .account-card__body { color: #176a59; }

.field-label {
  margin-left: 4px;
  color: var(--navy);
  font-size: 0.76rem;
  font-weight: 700;
}

.field--confirm {
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.field--confirm::placeholder {
  font-weight: 600;
  letter-spacing: 0.08em;
}

.account-message[data-tone="success"] { color: #0b735b; }
.account-message[data-tone="warning"] { color: #805900; }
.account-message[data-tone="error"] { color: var(--coral); }

@media (min-width: 760px) {
  .account-page { max-width: 760px; margin-inline: auto; }
}

/* ============================ LISTS / ROWS ============================ */

.list { display: flex; flex-direction: column; gap: 9px; }

.article {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  text-align: left;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
}

.article:active { background: #f4faff; }

.article__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px; height: 30px;
  color: var(--blue);
  font-size: 0.76rem;
  font-weight: 800;
  background: var(--blue-soft);
  border-radius: 10px;
}

.article__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--navy);
  font-size: 0.865rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.015em;
}

.article__chev { flex: 0 0 auto; color: #a8c0d8; font-size: 1.25rem; line-height: 1; }

.rows {
  margin-bottom: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 15px;
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
}

.rows .row:first-child { border-top: 0; }
.row--action:active { background: #f4faff; }

.row__label { color: var(--navy); font-size: 0.875rem; font-weight: 700; }
.row__value { color: var(--ink-soft); font-size: 0.84rem; font-weight: 600; }
.row__chev { color: #a8c0d8; font-size: 1.25rem; line-height: 1; }
.row--danger .row__label { color: var(--coral); }

/* ============================ NAV ============================ */

.nav {
  position: absolute;
  right: 0; bottom: 0; left: 0;
  z-index: 20;
  display: flex;
  height: calc(var(--nav-h) + var(--safe-b));
  padding: 0 var(--safe-r) var(--safe-b) var(--safe-l);
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--line);
}

.nav[hidden] { display: none; }

.nav__btn {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  color: #9db4cc;
  font-size: 0.66rem;
  font-weight: 700;
  background: none;
  border: 0;
}

.nav__btn svg {
  width: 21px; height: 21px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

.nav__btn.is-on { color: var(--blue); }
.nav__btn.is-on svg { stroke-width: 2.3; }

/* ============================ TOAST ============================ */

.toast {
  position: fixed;
  right: 16px;
  bottom: calc(var(--nav-h) + var(--safe-b) + 14px);
  left: 16px;
  z-index: 50;
  margin-inline: auto;
  max-width: 380px;
  padding: 12px 16px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  background: var(--navy);
  border-radius: 13px;
  box-shadow: 0 10px 30px rgba(6, 43, 99, 0.3);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}

.toast[data-show="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}