/* ============================================================
   NuttleWorks — style.css  ·  "Liquid Glass" edition
   Dark mode · purple neon · wet-glass surfaces

   Surface system (used everywhere):
   - Glass: translucent fill + backdrop blur + 1px light-catch
     border + inset top highlight (the "wet" edge)
   - Sheen: a diagonal specular streak via ::before
   - Neon: diffused purple glow, embedded with inset shadows
   - Motion: liquid easing  cubic-bezier(0.22, 1, 0.36, 1)
   ============================================================ */

:root {
  /* palette */
  --purple:       #8e2af9;
  --purple-deep:  #4401fc;
  --accent:       #c15bfb;   /* orchid highlight from the mark */
  --good:         #4ade80;
  --bad:          #fb7185;
  --warn:         #fbbf24;

  --text:         #f1eaff;
  --text-dim:     #9b8fc4;

  /* glass tokens */
  --glass:        rgba(255, 255, 255, 0.045);
  --glass-strong: rgba(255, 255, 255, 0.075);
  --glass-edge:   rgba(255, 255, 255, 0.16);
  --glass-shine:  rgba(255, 255, 255, 0.24);
  --glass-blur:   blur(18px) saturate(1.5);

  --glow-soft:    0 0 26px rgba(142, 42, 249, 0.32);
  --glow-med:     0 0 34px rgba(142, 42, 249, 0.55);
  --inset-light:  inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --inset-neon:   inset 0 0 20px rgba(142, 42, 249, 0.10);

  --ease-liquid:  cubic-bezier(0.22, 1, 0.36, 1);

  --font-display: "Rajdhani", sans-serif;
  --font-body:    "Inter", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* The hidden attribute must always win, even over display:flex on the same element */
[hidden] { display: none !important; }

html, body { height: 100%; }

/* ---- Deep violet atmosphere: layered light, never flat black ---- */
body {
  font-family: var(--font-body);
  color: var(--text);
  background:
    radial-gradient(ellipse 90% 55% at 18% -8%,  rgba(68, 1, 252, 0.40), transparent 58%),
    radial-gradient(ellipse 70% 45% at 85% 12%,  rgba(193, 91, 251, 0.14), transparent 52%),
    radial-gradient(ellipse 80% 60% at 50% 115%, rgba(56, 6, 180, 0.28), transparent 65%),
    linear-gradient(175deg, #030107 0%, #030107 45%, #04020e 100%);
  background-attachment: fixed;
  display: flex;
  justify-content: center;
  min-height: 100vh;
}

/* Ultra-subtle grain so the glass never reads as plastic */
body::after {
  content: "";
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- The device pane: a tall sheet of glass ---- */
.phone {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background: linear-gradient(178deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0.012) 30%, rgba(90, 18, 245, 0.035) 100%);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-left:  1px solid rgba(255, 255, 255, 0.07);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow:
    0 0 80px rgba(68, 1, 252, 0.14),
    var(--inset-light);
  overflow: hidden;
}

/* tall specular streak down the pane */
.phone::before {
  content: "";
  position: absolute;
  top: -10%; bottom: -10%;
  left: 8%;
  width: 18%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.030), transparent);
  transform: skewX(-12deg);
  pointer-events: none;
}

/* ============================================================
   Header & XP strip — floating glass bar
   ============================================================ */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 10px;
}

/* Wordmark: NUTTLE in white, WORKS in the brand gradient, set in the logo's geometric face */
.brand {
  display: inline-flex;
  align-items: center;
  font-family: "Montserrat", var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: #fff;
}
.brand__works {
  background: linear-gradient(90deg, #ab5fff 0%, #7d35ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(142, 42, 249, 0.45));
}

.level-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(142, 42, 249, 0.35);
  box-shadow: var(--glow-soft), var(--inset-light), var(--inset-neon);
  font-family: var(--font-display);
  font-weight: 700;
}
.level-chip__label {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--text-dim);
}
#header-level { font-size: 1.02rem; color: var(--text); }

.xp-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 12px;
}
.xp-strip__bar {
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.xp-strip__fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--purple-deep), var(--purple), var(--accent));
  box-shadow: 0 0 12px rgba(142, 42, 249, 0.65);
  position: relative;
  transition: width 0.7s var(--ease-liquid);
}
/* liquid light traveling along the filled bar */
.xp-strip__fill::after {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: xpSheen 3.2s var(--ease-liquid) infinite;
  border-radius: inherit;
}
@keyframes xpSheen {
  0%   { background-position: 130% 0; }
  60%, 100% { background-position: -120% 0; }
}
.xp-strip__text {
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ============================================================
   Screens
   ============================================================ */

#screens {
  flex: 1;
  overflow-y: auto;
  padding: 10px 20px 110px;
  scrollbar-width: thin;
  scrollbar-color: rgba(142, 42, 249, 0.35) transparent;
}

.screen { display: none; }
.screen.active { display: block; animation: screenIn 0.45s var(--ease-liquid); }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

.page-title {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  margin: 6px 0 2px;
  background: linear-gradient(180deg, #ffffff 0%, #dcc6ff 55%, #b27cfb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(142, 42, 249, 0.55));
}
.page-sub {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.86rem;
  margin-bottom: 18px;
}
.eyebrow {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);   /* the brighter purple: small text in --purple is too dark to read (3.5:1) */
  text-shadow: 0 0 14px rgba(142, 42, 249, 0.75);
  margin-top: 8px;
}

/* ============================================================
   Glass panel — the core surface
   ============================================================ */

.panel {
  position: relative;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 38%, rgba(90, 18, 245, 0.06) 100%), linear-gradient(165deg, rgba(22, 12, 40, 0.62), rgba(8, 4, 18, 0.72));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-shine);          /* light catches the top edge */
  border-radius: 20px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.35),
    var(--inset-light),
    var(--inset-neon);
  overflow: hidden;
}
/* diagonal wet-shine streak */
.panel::before {
  content: "";
  position: absolute;
  top: -60%; left: -25%;
  width: 55%; height: 220%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.055), transparent);
  transform: rotate(8deg);
  pointer-events: none;
}
.panel__label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}

/* ============================================================
   Action buttons (home) — glossy bars with light sweep
   ============================================================ */

.action-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 18px;
  margin-bottom: 12px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,0.065) 0%, rgba(255,255,255,0.018) 50%, rgba(90, 18, 245, 0.07) 100%), linear-gradient(165deg, rgba(22, 12, 40, 0.60), rgba(8, 4, 18, 0.70));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-shine);
  box-shadow: 0 10px 26px rgba(0,0,0,0.30), var(--inset-light), var(--inset-neon);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.35s var(--ease-liquid), box-shadow 0.35s var(--ease-liquid), border-color 0.35s var(--ease-liquid);
}
/* light sweeping across the wet surface on hover */
.action-btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.10), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease-liquid);
  pointer-events: none;
}
.action-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(142, 42, 249, 0.45);
  box-shadow: 0 14px 32px rgba(0,0,0,0.35), var(--glow-med), var(--inset-light);
}
.action-btn:hover:not(:disabled)::after { left: 125%; }
.action-btn:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.action-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.action-btn .icn {
  flex: 0 0 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 25%, rgba(193, 91, 251,0.25), rgba(142, 42, 249,0.10) 70%);
  border: 1px solid rgba(142, 42, 249, 0.40);
  box-shadow: var(--glow-soft), var(--inset-light);
  font-size: 1rem;
}
.action-btn .meta {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-dim);
  max-width: 45%;
  text-align: right;
}
.action-btn .chev { margin-left: auto; color: var(--text-dim); }

/* ============================================================
   Progress ring — light suspended in glass
   ============================================================ */

.home-dots { display: flex; justify-content: center; gap: 7px; margin: 2px 0 6px; }
.home-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.18); transition: background 0.3s, transform 0.3s; }
.home-dot.active { background: var(--purple); transform: scale(1.35); box-shadow: 0 0 6px rgba(142, 42, 249,0.7); }

.ring-wrap { display: flex; justify-content: center; margin: 8px 0 18px; }
.ring { position: relative; width: 150px; height: 150px; filter: drop-shadow(0 0 30px rgba(142, 42, 249, 0.45)); }
.ring svg { transform: rotate(-90deg); }
.ring__track { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 9; }
.ring__value {
  fill: none;
  stroke: url(#ringGrad);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s var(--ease-liquid);
}
.ring__center {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ring__pct {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  text-shadow: 0 0 18px rgba(142, 42, 249, 0.6);
}
.ring__label {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ============================================================
   Progress topic dropdown
   ============================================================ */

.prog-topic-wrap { position: relative; margin: 6px 0 14px; }
.prog-topic-btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 11px 16px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; cursor: pointer;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--text);
  transition: border-color 0.2s, background 0.2s;
}
.prog-topic-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(142, 42, 249,0.4); }
.prog-topic-btn__chev { color: var(--text-dim); font-size: 0.8rem; margin-left: 8px; }

.prog-topic-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  background: rgba(18, 10, 35, 0.97);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.prog-topic-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 12px 16px; text-align: left;
  background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; color: var(--text-dim);
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.prog-topic-opt:last-child { border-bottom: none; }
.prog-topic-opt:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.prog-topic-opt.active {
  color: var(--opt-color, var(--purple));
  background: rgba(142, 42, 249, 0.1);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .prog-topic-opt.active {
    background: color-mix(in srgb, var(--opt-color, var(--purple)) 10%, transparent);
  }
}

/* ============================================================
   Stat boxes — small glass tiles
   ============================================================ */

.stat-row { display: flex; gap: 10px; }
.stat-box {
  flex: 1;
  padding: 10px 8px;
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.13);
  box-shadow: var(--inset-light);
  text-align: center;
}
.stat-box__name { font-size: 0.66rem; color: var(--text-dim); margin-bottom: 4px; }
.stat-box__val { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.stat-box__val.low  { color: var(--bad);  text-shadow: 0 0 12px rgba(251, 113, 133, 0.5); }
.stat-box__val.mid  { color: var(--warn); text-shadow: 0 0 12px rgba(251, 191, 36, 0.45); }
.stat-box__val.high { color: var(--good); text-shadow: 0 0 12px rgba(74, 222, 128, 0.45); }

.topic-card__right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.topic-card__pct {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(193, 91, 251, 0.5);
}

.mini-bar {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  margin-top: 6px;
}
.mini-bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--purple-deep), var(--purple), var(--accent));
  box-shadow: 0 0 8px rgba(142, 42, 249, 0.55);
  transition: width 0.8s var(--ease-liquid);
}

/* ============================================================
   Level / topic cards — translucent slabs with embedded neon
   ============================================================ */

.level-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 15px 16px;
  margin-bottom: 12px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.014) 45%, rgba(142, 42, 249, 0.08) 100%), linear-gradient(165deg, rgba(22, 12, 40, 0.60), rgba(8, 4, 18, 0.70));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.13);
  border-left: 3px solid rgba(142, 42, 249, 0.65);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.32),
    var(--inset-light),
    inset 0 0 22px rgba(142, 42, 249, 0.04);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.35s var(--ease-liquid), box-shadow 0.35s var(--ease-liquid), border-color 0.35s var(--ease-liquid);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .level-card {
    background: linear-gradient(160deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.014) 45%, color-mix(in srgb, var(--lvl-color, var(--purple)) 8%, transparent) 100%), linear-gradient(165deg, rgba(22, 12, 40, 0.60), rgba(8, 4, 18, 0.70));
    border-left: 3px solid color-mix(in srgb, var(--lvl-color, var(--purple)) 65%, transparent);
    box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.32),
    var(--inset-light),
    inset 0 0 22px color-mix(in srgb, var(--lvl-color, var(--purple)) 4%, transparent);
  }
}
.level-card::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -70%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.09), transparent);
  transform: skewX(-18deg);
  transition: left 0.7s var(--ease-liquid);
  pointer-events: none;
}
.level-card:not(.locked):hover {
  transform: translateY(-2px);
  border-color: rgba(142, 42, 249, 0.45);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.38),
    0 0 26px rgba(142, 42, 249, 0.28),
    var(--inset-light);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .level-card:not(.locked):hover {
    border-color: color-mix(in srgb, var(--lvl-color, var(--purple)) 45%, transparent);
    box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.38),
    0 0 26px color-mix(in srgb, var(--lvl-color, var(--purple)) 28%, transparent),
    var(--inset-light);
  }
}
.level-card:not(.locked):hover::after { left: 125%; }

.level-card__num {
  flex: 0 0 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--lvl-color, var(--purple));
  text-shadow: 0 0 12px rgba(142, 42, 249, 0.6);
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.10), transparent 65%),
              rgba(142, 42, 249, 0.09);
  border: 1px solid rgba(142, 42, 249, 0.4);
  border-radius: 13px;
  box-shadow: var(--inset-light), 0 0 16px rgba(142, 42, 249, 0.16);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .level-card__num {
    text-shadow: 0 0 12px color-mix(in srgb, var(--lvl-color, var(--purple)) 60%, transparent);
    background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.10), transparent 65%),
              color-mix(in srgb, var(--lvl-color, var(--purple)) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--lvl-color, var(--purple)) 40%, transparent);
    box-shadow: var(--inset-light), 0 0 16px color-mix(in srgb, var(--lvl-color, var(--purple)) 16%, transparent);
  }
}
.level-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.level-card__name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.level-card__goal { font-size: 0.78rem; color: var(--text-dim); line-height: 1.4; }

.level-card.locked { opacity: 0.42; cursor: not-allowed; }
.level-card.locked .level-card__num {
  color: var(--text-dim);
  text-shadow: none;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}

.level-card.topic-head { min-height: 78px; }
.level-card.topic-soon { opacity: 0.55; cursor: pointer; border-style: dashed; }
.level-card.topic-soon:hover { opacity: 0.8; transform: none; box-shadow: 0 12px 28px rgba(0,0,0,0.32), var(--inset-light); }

/* topic accordion */
.topic-head.open {
  border-color: rgba(142, 42, 249, 0.45);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.36),
    var(--glow-med),
    var(--inset-light),
    inset 0 0 24px rgba(142, 42, 249, 0.08);
}
.topic-chev { display: block; text-align: right; color: var(--text-dim); font-size: 0.9rem; margin-top: 2px; }
.topic-levels {
  margin: -4px 0 14px 14px;
  padding-left: 12px;
  border-left: 1px dashed rgba(142, 42, 249, 0.30);
  animation: dropIn 0.45s var(--ease-liquid);
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Topics: postcards on a wheel */
.wheel {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  margin: 0 -20px 4px;                       /* out to the edges of the phone */
  padding: 10px 12% 14px;                    /* so the first and last card can rest in the middle */
  scrollbar-width: none;
}
.wheel::-webkit-scrollbar { display: none; }
.postcard {
  position: relative;
  flex: 0 0 calc(100% - 14px);
  max-width: none;
  margin: 0 7px;
  padding: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
  scroll-snap-align: center;
  border-radius: 20px;
  overflow: hidden;
  color: var(--text);
  cursor: pointer;
  background: linear-gradient(165deg, rgba(22, 12, 40, 0.92), rgba(8, 4, 18, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.36), var(--inset-light);
  opacity: 0.62;
  transform: scale(0.94);
  transition: transform 0.35s var(--ease-liquid), opacity 0.35s var(--ease-liquid), border-color 0.35s, box-shadow 0.35s;
}
.postcard.open, .postcard--sim { opacity: 1; transform: none; }
.postcard.open {
  border-color: var(--lvl-color, var(--purple));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42), var(--glow-med), var(--inset-light);
}
.postcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* a heading is given focus so a screen reader announces the new screen: it needs no ring */
.page-title:focus, .page-title:focus-visible, .quiz-q:focus, .quiz-q:focus-visible { outline: none; box-shadow: none; }
.postcard__pic {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 168px;
  background: #0a0612;
  border-bottom: 2px solid var(--lvl-color, var(--purple));
  color: var(--text-dim);
}
.postcard__pic img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.postcard__tag {
  position: absolute;
  top: 10px; left: 10px;
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(8, 4, 18, 0.78);
  border: 1px solid var(--lvl-color, var(--purple));
}
.postcard__tag .ico { margin-right: 5px; color: var(--lvl-color, var(--purple)); }
.postcard__body { display: block; padding: 12px 14px 14px; }
.postcard__name { display: block; font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.25; }
.postcard__sub { display: block; margin-top: 4px; font-size: 0.8rem; line-height: 1.4; color: var(--text-dim); }
.postcard__bar { display: flex; align-items: center; margin-top: 10px; }
.postcard__bar .mini-bar { flex: 1; margin: 0 10px 0 0; }
.postcard.topic-soon { border-style: dashed; }

.wheel-dots { display: flex; justify-content: center; margin: 0 0 16px; }
.wheel-dots span { width: 6px; height: 6px; margin: 0 4px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); transition: background 0.3s, transform 0.3s; }
.wheel-dots span.on { background: var(--purple); transform: scale(1.5); }

.wheel-title {
  display: flex;
  align-items: center;
  margin: 6px 0 2px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.wheel-title .ico { margin-right: 7px; color: var(--purple); }
.wheel-title span { margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 0.7rem; letter-spacing: 0; background: rgba(142, 42, 249, 0.16); color: var(--text); }

/* a topic's simulators: smaller cards, the next one always peeking in */
.wheel--sims { scroll-snap-type: x proximity; padding: 10px 13px 16px; margin-bottom: 6px; }
.postcard--sim { flex: 0 0 60%; max-width: 240px; scroll-snap-align: start; scroll-margin-left: 20px; border-radius: 16px; }
.postcard--sim .postcard__pic { height: 118px; border-bottom-width: 1px; }
.postcard--sim .postcard__pic img { object-position: center; }
.postcard--sim .postcard__name { font-size: 0.88rem; }
.postcard--sim .postcard__sub { font-size: 0.74rem; }
.postcard--sim:active { transform: scale(0.97); }

#topic-detail .topic-levels { margin: 8px 0 14px; padding-left: 0; border-left: none; }
/* On a phone the levels, the main training path, come before the simulators; a computer shows both at once */
@media (max-width: 999px) {
  #topic-detail { display: flex; flex-direction: column; }
  #topic-detail > .detail-sims { order: 2; min-width: 0; }
}
.levels-hint--on { display: flex; flex-direction: column; align-items: center; padding: 28px 12px; border: 1px dashed rgba(142, 42, 249, 0.28); border-radius: 20px; color: var(--text-dim); font-size: 0.9rem; }
.levels-hint--on .ico { color: var(--purple); opacity: 0.8; margin-bottom: 10px; }

@media (prefers-reduced-motion: reduce) { .postcard { transition: none; } }

@media (min-width: 1000px) {
  /* on a computer the postcards sit in a row and wrap: nothing to swipe */
  .wheel { flex-wrap: wrap; overflow: visible; margin: 0 -7px 4px; padding: 10px 0 14px; }
  .postcard { flex: 0 0 250px; opacity: 0.8; transform: none; }
  .postcard:hover { opacity: 1; }
  .postcard__pic { height: 150px; }
  .wheel-dots { display: none; }
  .wheel--sims { padding: 10px 0 16px; }
  .postcard--sim { flex: 0 0 210px; }
  #topic-detail .topic-levels { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 14px; }
  #topic-detail .topic-levels > .cta, #topic-detail .topic-levels > div { grid-column: 1 / -1; }
}

/* Home: what to do next comes first, then the simulators */
.home-title { font-size: 1.5rem; margin: 2px 0 12px; }
.continue-card { display: flex; flex: none; width: 100%; margin: 0 0 14px; opacity: 1; transform: none; border-color: var(--lvl-color, var(--purple)); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42), var(--glow-med), var(--inset-light); }
.continue-card:active { transform: scale(0.985); }
.continue-card[disabled] { cursor: default; }
.continue-card .postcard__pic { height: 150px; }
.continue-card .postcard__tag { font-size: 0.74rem; padding: 6px 12px; background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), var(--lvl-color, var(--purple)); color: #0a0612; border-color: transparent; }   /* lightened so the dark words read on any topic colour */
.continue-card .postcard__tag .ico { color: #0a0612; }
.continue-card .postcard__name { font-size: 1.18rem; margin-top: 2px; }
.continue-card__where { margin-top: 0; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; }
.postcard__note { display: block; margin-top: 3px; font-size: 0.72rem; color: var(--accent); }
.panel--tap { display: block; width: 100%; text-align: left; color: var(--text); cursor: pointer; font: inherit; }
.panel--tap .panel__label { display: block; }
.panel__big { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; }
.panel__hint { display: block; margin-top: 4px; font-size: 0.76rem; color: var(--text-dim); }

/* Home: simulators grouped by topic */
.sim-groups { margin-bottom: 8px; }
.sim-group__title { display: flex; align-items: center; margin: 10px 0 0; font-family: var(--font-display); font-size: 0.98rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text); }
.sim-group__dot { width: 10px; height: 10px; margin-right: 9px; border-radius: 50%; background: var(--lvl-color, var(--purple)); box-shadow: 0 0 8px var(--lvl-color, var(--purple)); }
.sim-group__count { margin-left: 9px; padding: 1px 8px; border-radius: 999px; font-family: var(--font-body, inherit); font-size: 0.7rem; font-weight: 600; letter-spacing: 0; color: var(--text-dim); background: rgba(255, 255, 255, 0.06); }
.sim-groups .wheel--sims { padding-top: 8px; padding-bottom: 12px; margin-bottom: 0; }
/* five rows share the page, so these cards are a little smaller than the ones under a topic */
.sim-groups .postcard--sim { flex: 0 0 50%; max-width: 210px; }
.sim-groups .postcard--sim .postcard__pic { height: 100px; }
.sim-groups .postcard--sim .postcard__body { padding: 10px 12px 12px; }

/* Lessons and quizzes get the room: the XP line steps aside on a phone */
@media (max-width: 999px) {
  .phone[data-screen="lesson"] .xp-strip, .phone[data-screen="quiz"] .xp-strip { display: none; }
  .phone[data-screen="lesson"] .app-header, .phone[data-screen="quiz"] .app-header { padding-top: 8px; padding-bottom: 6px; }
}
@media (min-width: 1000px) {
  .continue-card { max-width: 420px; }
}

/* ============================================================
   Learning path
   ============================================================ */

.path { display: flex; flex-direction: column; align-items: center; padding: 6px 0 24px; }

.path-divider {
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 20px 0 12px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}
.path-divider::before, .path-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(142, 42, 249, 0.30), transparent);
}

.path-node {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 330px;
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012)), linear-gradient(165deg, rgba(20, 11, 36, 0.58), rgba(8, 4, 18, 0.68));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-top-color: rgba(255, 255, 255, 0.11);
  box-shadow: 0 8px 20px rgba(0,0,0,0.26), var(--inset-light);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform 0.35s var(--ease-liquid), box-shadow 0.35s var(--ease-liquid), border-color 0.35s var(--ease-liquid);
}
.path-node:not(.locked):hover {
  transform: translateY(-2px);
  border-color: rgba(142, 42, 249, 0.40);
  box-shadow: 0 12px 26px rgba(0,0,0,0.32), var(--glow-soft), var(--inset-light);
}

.path-node__circle {
  flex: 0 0 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 0.95rem;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.10), transparent 60%), rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--inset-light);
}
.path-node__title { font-size: 0.86rem; font-weight: 500; line-height: 1.35; }
.path-node__title small { color: var(--text-dim); font-weight: 400; font-size: 0.72rem; }

.path-node.done .path-node__circle {
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.18), transparent 60%), rgba(74, 222, 128, 0.10);
  border-color: rgba(74, 222, 128, 0.55);
  color: var(--good);
  box-shadow: 0 0 16px rgba(74, 222, 128, 0.30), var(--inset-light);
}
.path-node.current {
  border-color: rgba(142, 42, 249, 0.55);
  box-shadow: 0 10px 24px rgba(0,0,0,0.30), var(--glow-med), var(--inset-light), inset 0 0 20px rgba(142, 42, 249, 0.08);
  animation: glowPulse 2.6s var(--ease-liquid) infinite;
}
.path-node.current .path-node__circle {
  border-color: rgba(193, 91, 251, 0.7);
  box-shadow: 0 0 18px rgba(193, 91, 251, 0.45), var(--inset-light);
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(0,0,0,0.30), 0 0 22px rgba(142, 42, 249,0.26), var(--inset-light), inset 0 0 20px rgba(142, 42, 249,0.07); }
  50%      { box-shadow: 0 10px 24px rgba(0,0,0,0.30), 0 0 36px rgba(142, 42, 249,0.42), var(--inset-light), inset 0 0 26px rgba(142, 42, 249,0.12); }
}
.path-node.locked { opacity: 0.40; cursor: not-allowed; }

/* ============================================================
   Lessons
   ============================================================ */

.lesson-section { position: relative; }
.lesson-section h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
  color: #e9dcff;
}
.lesson-section p { font-size: 0.88rem; line-height: 1.65; color: #cfc3e8; margin-bottom: 12px; }
.lesson-section + .lesson-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.lesson-section h3:focus { outline: none; }
/* A picture inside a lesson. Tap to enlarge, like a quiz picture. */
.lesson-img { display: block; width: 100%; height: auto; margin: 4px 0 12px; border-radius: 12px; background: #f4f1ea; cursor: zoom-in; }

/* On a phone a lesson is read one section at a time: the simulator button first, then the
   section in hand, with Back and Next under it and the finish button on the last one.
   (A computer shows the whole lesson with its list of sections: see the desktop rules.) */
.lesson-pages .lesson-section:not(.is-current) { display: none; }
.lesson-pages .lesson-section:not(.on-check) .section-quiz { display: none; }
.lesson-pages .lesson-section.on-check > p, .lesson-pages .lesson-section.on-check > .keypoints, .lesson-pages .lesson-section.on-check > .lesson-img { display: none; }
.lesson-pages .lesson-section.on-check .section-quiz { margin-top: 0; padding-top: 0; border-top: 0; }
.lesson-pages .lesson-section + .lesson-section { margin-top: 0; padding-top: 0; border-top: 0; }
.lesson-step { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 10px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.lesson-dots { display: flex; gap: 5px; }
.lesson-dots i { width: 18px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); }
.lesson-dots i.on { background: var(--accent); }
.lesson-nav { display: flex; gap: 10px; margin: 0 0 14px; }
.lesson-nav .cta { margin: 0; }
.lesson-nav #lesson-prev { flex: 0 0 34%; }
.lesson-nav #lesson-prev:disabled { opacity: 0.35; }
.lesson-grid:not(.at-end) #lesson-done, .lesson-grid.at-end #lesson-next { display: none; }
.lesson-grid.at-end #lesson-prev { flex: 1 1 auto; }
#open-sim-side { display: none; }
#screen-lesson #open-sim { margin-top: 2px; }

.keypoints { list-style: none; }
.keypoints li {
  position: relative;
  padding-left: 22px;
  font-size: 0.84rem;
  line-height: 1.55;
  color: #d6cbef;
  margin-bottom: 7px;
}
.keypoints li::before {
  content: "◆";
  position: absolute;
  left: 2px;
  font-size: 0.68rem;
  top: 4px;
  color: var(--purple);
  text-shadow: 0 0 8px rgba(142, 42, 249, 0.7);
}

.section-quiz { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.07); }
.section-quiz__label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 10px; display: flex; align-items: center; gap: 5px; }
.section-q { margin-bottom: 14px; }
.section-q__text { font-size: 0.86rem; font-weight: 600; color: #e9dcff; margin-bottom: 8px; }
.section-q__opts { display: flex; flex-direction: column; gap: 6px; }
/* Self-check answers are quiz answers (.opt): the same size, letter keys and marks */
.section-q__opts .opt { margin-bottom: 0; min-height: 48px; }
.section-q__exp { display: none; font-size: 0.8rem; color: var(--text-dim); margin-top: 8px; line-height: 1.55; padding: 8px 10px; background: rgba(255,255,255,0.04); border-radius: 6px; }
.section-q__exp.visible { display: block; }
.section-q__exp strong { display: inline-flex; align-items: center; gap: 4px; margin-right: 2px; }
.section-q__exp.good strong { color: var(--good); }
.section-q__exp.bad strong { color: var(--bad); }

/* ============================================================
   CTAs — molded glass with a neon core
   ============================================================ */

.cta {
  position: relative;
  display: block;
  width: 100%;
  padding: 15px;
  margin: 14px 0 10px;
  border-radius: 16px;
  border: 1px solid rgba(193, 91, 251, 0.40);
  background:
    linear-gradient(170deg, rgba(255,255,255,0.10) 0%, transparent 40%),
    linear-gradient(90deg, rgba(68, 1, 252, 0.80), rgba(142, 42, 249, 0.80));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 12px 30px rgba(68, 1, 252, 0.35),
    0 0 34px rgba(142, 42, 249, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  transition: transform 0.35s var(--ease-liquid), box-shadow 0.35s var(--ease-liquid), filter 0.35s var(--ease-liquid);
}
.cta::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.30), transparent);
  transform: skewX(-18deg);
  transition: left 0.65s var(--ease-liquid);
  pointer-events: none;
}
.cta:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 16px 36px rgba(68, 1, 252, 0.42),
    0 0 48px rgba(142, 42, 249, 0.60),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
.cta:hover:not(:disabled)::after { left: 125%; }
.cta:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.cta:disabled { opacity: 0.45; cursor: not-allowed; }

.cta.ghost {
  background: linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-dim);
  box-shadow: var(--inset-light);
}
/* On a phone the cards in scrolling lists are not blurred behind: they sit on a near-black ground,
   so the blur shows almost nothing, and dozens of blur layers cost the phone's graphics chip on
   every scroll. The header and the bottom bar keep theirs. */
@media (max-width: 999px) {
  :root { --glass-blur: none; }
  .simcard, .simcard__play, .postcard.topic-head { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Team: when the progress was loaded, and a way to load it again */
.team-updated { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; font-size: 0.8rem; color: var(--text-dim); }
.team-updated .back-link { margin: 0; }

/* Reset all progress: last on Progress, and red so it is never mistaken for an everyday button */
.cta.ghost.danger { color: var(--bad); border-color: rgba(251, 113, 133, 0.35); margin-top: 26px; }
.cta.ghost.danger:hover:not(:disabled) { color: var(--bad); border-color: rgba(251, 113, 133, 0.6); }
.cta.ghost:hover:not(:disabled) {
  color: var(--text);
  border-color: rgba(142, 42, 249, 0.40);
  box-shadow: var(--glow-soft), var(--inset-light);
}

/* A one-line note under a button, such as the one that marks an advanced lesson as optional */
.cta-note { font-size: 0.74rem; color: var(--text-dim); text-align: center; margin: -6px 0 12px; }

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* a full-size tap target */
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 6px 2px;
  margin-bottom: 4px;
  transition: color 0.3s var(--ease-liquid), text-shadow 0.3s var(--ease-liquid);
}
.back-link:hover { color: var(--accent); text-shadow: 0 0 10px rgba(193, 91, 251, 0.5); }
/* Exit quiz asks "again?" on the link itself. All three wordings sit in one cell, so the link
   is always as wide as the longest and nothing moves when it changes. */
.back-link--ask { display: inline-grid; justify-items: start; text-align: left; }
.back-link--ask > span { grid-area: 1 / 1; visibility: hidden; }
.back-link--ask:not([data-asking]) > [data-say="exit"],
.back-link--ask[data-asking="tap"] > [data-say="tap"],
.back-link--ask[data-asking="back"] > [data-say="back"] { visibility: visible; }
.back-link--ask[data-asking] { color: var(--accent); }

/* ============================================================
   Quiz
   ============================================================ */

.quiz-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.76rem;
  color: var(--text-dim);
  margin: 12px 0;
}
.quiz-progress .mini-bar { flex: 1; margin-top: 0; }

.quiz-q { font-size: 1.04rem; font-weight: 600; line-height: 1.55; margin-bottom: 6px; }
.quiz-img { width: 100%; max-width: 340px; display: block; margin: 10px auto 4px; border-radius: 8px; background: #fff; cursor: zoom-in; border: 2px solid transparent; transition: border-color .15s; }
.quiz-img:hover { border-color: var(--purple); }
.quiz-img-hint { display: block; text-align: center; font-size: 0.7rem; color: var(--text-dim); margin-bottom: 12px; }
.img-lightbox { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.88); display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; padding: 16px; animation: fadeIn .15s ease; }
.img-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; object-fit: contain; box-shadow: 0 8px 40px rgba(0,0,0,.6); }
.quiz-hint { font-size: 0.74rem; color: var(--text-dim); margin-bottom: 14px; }

.opt {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 13px 15px;
  margin-bottom: 10px;
  border-radius: 15px;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.014)), linear-gradient(165deg, rgba(20, 11, 36, 0.58), rgba(8, 4, 18, 0.68));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--inset-light);
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.45;
  cursor: pointer;
  transition: transform 0.3s var(--ease-liquid), border-color 0.3s var(--ease-liquid), box-shadow 0.3s var(--ease-liquid), background 0.3s var(--ease-liquid);
}
.opt:hover:not(:disabled) {
  border-color: rgba(142, 42, 249, 0.40);
  box-shadow: var(--glow-soft), var(--inset-light);
  transform: translateX(2px);
}
.opt__letter {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--purple);
  text-shadow: 0 0 8px rgba(142, 42, 249, 0.5);
}
.opt.selected {
  border-color: rgba(193, 91, 251, 0.60);
  background: linear-gradient(160deg, rgba(193, 91, 251,0.10), rgba(142, 42, 249,0.05));
  box-shadow: 0 0 20px rgba(193, 91, 251, 0.22), var(--inset-light), inset 0 0 16px rgba(193, 91, 251, 0.06);
}
.opt.correct {
  border-color: rgba(74, 222, 128, 0.60);
  background: linear-gradient(160deg, rgba(74,222,128,0.10), rgba(74,222,128,0.04));
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.22), var(--inset-light);
}
.opt.correct .opt__letter { color: var(--good); text-shadow: 0 0 8px rgba(74, 222, 128, 0.6); }
.opt.wrong {
  border-color: rgba(251, 113, 133, 0.60);
  background: linear-gradient(160deg, rgba(251,113,133,0.10), rgba(251,113,133,0.04));
  box-shadow: 0 0 20px rgba(251, 113, 133, 0.20), var(--inset-light);
}
.opt.wrong .opt__letter { color: var(--bad); text-shadow: 0 0 8px rgba(251, 113, 133, 0.6); }
/* The right answer the trainee did not pick: as plain as a right answer they did pick, and labelled */
.opt.missed {
  border-color: rgba(74, 222, 128, 0.70);
  border-width: 2px;
  padding: 12px 14px;
  background: linear-gradient(160deg, rgba(74,222,128,0.12), rgba(74,222,128,0.05));
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.22), var(--inset-light);
}
.opt.missed .opt__letter { color: var(--good); }
.opt__tag {
  flex: none; align-self: center; margin-left: auto; padding: 3px 8px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
  color: #06130b; background: var(--good);
}
.opt:disabled { cursor: default; }

.feedback {
  padding: 13px 15px;
  border-radius: 15px;
  font-size: 0.84rem;
  line-height: 1.55;
  margin-bottom: 4px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  animation: feedbackIn 0.4s var(--ease-liquid);
  box-shadow: var(--inset-light);
}
@keyframes feedbackIn {
  from { opacity: 0; transform: translateY(6px); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.feedback.good {
  background: linear-gradient(160deg, rgba(74,222,128,0.10), rgba(74,222,128,0.03));
  border: 1px solid rgba(74, 222, 128, 0.40);
  color: #d3f9e0;
}
.feedback.bad {
  background: linear-gradient(160deg, rgba(251,113,133,0.10), rgba(251,113,133,0.03));
  border: 1px solid rgba(251, 113, 133, 0.40);
  color: #ffdde2;
}

.diff-chip {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--inset-light);
}
.diff-chip.d1 { color: var(--good); border: 1px solid rgba(74, 222, 128, 0.45);  background: rgba(74, 222, 128, 0.07); }
.diff-chip.d2 { color: var(--warn); border: 1px solid rgba(251, 191, 36, 0.45);  background: rgba(251, 191, 36, 0.07); }
.diff-chip.d3 { color: var(--bad);  border: 1px solid rgba(251, 113, 133, 0.45); background: rgba(251, 113, 133, 0.07); }

/* ---- Results ---- */

.result-score {
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 700;
  text-align: center;
  margin-top: 8px;
  background: linear-gradient(180deg, #ffffff, #c9a8ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(142, 42, 249, 0.45));
}
.result-line { text-align: center; color: var(--text-dim); font-size: 0.86rem; margin-bottom: 16px; }

.pass-banner {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 13px;
  border-radius: 16px;
  margin: 14px 0 6px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  animation: feedbackIn 0.5s var(--ease-liquid);
}
.pass-banner.pass {
  color: var(--good);
  background: linear-gradient(160deg, rgba(74,222,128,0.10), rgba(74,222,128,0.03));
  border: 1px solid rgba(74, 222, 128, 0.45);
  box-shadow: 0 0 26px rgba(74, 222, 128, 0.20), var(--inset-light);
}
.pass-banner.fail {
  color: var(--bad);
  background: linear-gradient(160deg, rgba(251,113,133,0.10), rgba(251,113,133,0.03));
  border: 1px solid rgba(251, 113, 133, 0.45);
  box-shadow: var(--inset-light);
}

/* ---- Badge ---- */

.badge-panel {
  display: flex;
  align-items: center;
  gap: 14px;
  border-color: rgba(74, 222, 128, 0.45);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.35),
    0 0 28px rgba(74, 222, 128, 0.16),
    var(--inset-light);
}
.badge-panel__icon {
  flex: 0 0 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.16), transparent 60%), rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.45);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(74, 222, 128, 0.25), var(--inset-light);
}
.badge-panel--locked { border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 14px 34px rgba(0,0,0,0.35), var(--inset-light); opacity: 0.85; }
.badge-panel--locked .badge-panel__icon {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: var(--inset-light);
  filter: grayscale(1);
}

/* ---- Skill rows ---- */

.skill-row { margin-bottom: 12px; }
.skill-row__top {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  margin-bottom: 5px;
}
.skill-row__pct { font-family: var(--font-display); font-weight: 700; }

/* ============================================================
   Bottom nav — floating glass dock
   ============================================================ */

.bottom-nav {
  position: absolute;
  left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  border-radius: 22px;
  /* near opaque: page text scrolling under it must not show through the labels */
  background: linear-gradient(170deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.022) 45%, rgba(90, 18, 245, 0.08) 100%), linear-gradient(165deg, rgb(20, 11, 36), rgb(8, 4, 18));
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.45),
    var(--glow-soft),
    var(--inset-light);
  overflow: hidden;
}
.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 11px 0 9px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: color 0.35s var(--ease-liquid);
}
.nav-btn svg { width: 21px; height: 21px; fill: currentColor; transition: filter 0.35s var(--ease-liquid), transform 0.35s var(--ease-liquid); }
.nav-btn:hover { color: var(--text); }
.nav-btn.active { color: var(--accent); }
.nav-btn.active svg {
  filter: drop-shadow(0 0 11px rgba(193, 91, 251, 0.95));
  transform: translateY(-1px);
}

/* ============================================================
   Toast — small glass slip
   ============================================================ */

.toast {
  position: absolute;
  bottom: 86px;
  left: 50%;
  transform: translate(-50%, 14px);
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(170deg, rgba(255,255,255,0.09), rgba(90, 18, 245, 0.10));
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid rgba(142, 42, 249, 0.45);
  box-shadow: var(--glow-med), var(--inset-light);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  white-space: normal;
  width: max-content;
  max-width: calc(100% - 32px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s var(--ease-liquid), transform 0.45s var(--ease-liquid);
  z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   Focus mode — a quiz question on a phone
   The tab bar steps aside and the action button is pinned to the
   bottom of the screen, so no question needs a scroll to answer.
   script.js sets .focus on .phone while a question is showing.
   ============================================================ */

@media (max-width: 999px) {
  .phone.focus .bottom-nav { display: none; }
  .phone.focus #screens { padding-bottom: 0; }
  .phone.focus #screen-quiz.active { display: flex; flex-direction: column; min-height: 100%; }
  .phone.focus #screen-quiz .back-link { align-self: flex-start; }
  .phone.focus .dock {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: auto -20px 0;                 /* pushed to the bottom when the question is short */
    padding: 18px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(5, 2, 14, 0.97) 60%, rgba(5, 2, 14, 0));
  }
  .phone.focus .dock .cta { margin: 0; }
  .phone.focus #feedback { scroll-margin-bottom: 100px; }   /* the explanation scrolls clear of the pinned button */
  .phone.focus #opts { padding-bottom: 8px; }
  .phone.focus .toast { bottom: auto; top: calc(74px + env(safe-area-inset-top, 0px)); }   /* messages stay off the button */
}

/* ============================================================
   Accessibility & quality floor
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

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

@media (max-width: 430px) {
  .phone { border-left: none; border-right: none; }
  .phone::before { display: none; }
}

/* ============================================================
   Custom icon system — neon strokes embedded in the glass
   ============================================================ */

.ico {
  vertical-align: -3px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 5px currentColor);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .ico {
    filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 55%, transparent));
  }
}

.panel__label .ico { vertical-align: -2px; margin-right: 3px; color: var(--purple); }
.stat-box__name .ico { vertical-align: -2px; margin-right: 2px; color: var(--text-dim); filter: none; }

.action-btn .icn { color: var(--accent); }
.brand-mark {
  width: 22px; height: 22px;
  display: block;
  margin-right: 9px;   /* gap after the mark only — NUTTLE and WORKS are one word */
  filter: drop-shadow(0 0 8px rgba(142, 42, 249, 0.55));
}

.path-node__circle .ico { filter: drop-shadow(0 0 5px currentColor); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .path-node__circle .ico {
    filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 60%, transparent));
  }
}
.path-node .path-node__circle { color: var(--text-dim); }
.path-node:not(.locked):not(.done) .path-node__circle { color: var(--purple); }
.path-node.current .path-node__circle { color: var(--accent); }
.path-node.done .path-node__circle { color: var(--good); }

.badge-panel__icon { color: var(--good); }
.badge-panel--locked .badge-panel__icon { color: var(--text-dim); }

.level-card__num .ico { filter: drop-shadow(0 0 6px currentColor); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .level-card__num .ico {
    filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 55%, transparent));
  }
}
.pass-banner .ico, .feedback .ico { vertical-align: -2.5px; margin-right: 4px; }
.skill-row__pct .ico { vertical-align: -1.5px; }
.cta .ico { vertical-align: -3px; margin-right: 5px; }
.eyebrow .ico { vertical-align: -2.5px; margin-right: 3px; }

/* Glass text inputs (backup/restore) */
.glass-input {
  width: 100%;
  resize: vertical;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012)), linear-gradient(165deg, rgba(18, 10, 32, 0.6), rgba(8, 4, 18, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top-color: rgba(255, 255, 255, 0.18);
  box-shadow: var(--inset-light);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.5;
  transition: border-color 0.3s var(--ease-liquid), box-shadow 0.3s var(--ease-liquid);
}
.glass-input::placeholder { color: var(--text-dim); opacity: 0.7; }
.glass-input:focus {
  outline: none;
  border-color: rgba(193, 91, 251, 0.55);
  box-shadow: 0 0 18px rgba(193, 91, 251, 0.20), var(--inset-light);
}

/* Quiz Blitz timer */
.blitz-secs {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  min-width: 30px;
  text-align: center;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(193, 91, 251, 0.6);
  transition: color 0.3s var(--ease-liquid);
}
.blitz-secs.low {
  color: var(--bad);
  text-shadow: 0 0 14px rgba(251, 113, 133, 0.75);
  animation: blitzPulse 1s var(--ease-liquid) infinite;
}
@keyframes blitzPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

/* ===== Simulator screen ===== */
.screen--sim {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Landing page inside the sim screen (topic launcher, no iframe) */
.sim-landing {
  flex: 1;
  overflow-y: auto;
  padding: 10px 20px 110px;
  scrollbar-width: thin;
  scrollbar-color: rgba(142, 42, 249, 0.35) transparent;
}

.sim-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  gap: 10px;
}

.sim-back {
  margin: 0;
  font-size: 0.88rem;
}

.sim-done-btn {
  padding: 8px 18px;
  font-size: 0.84rem;
  white-space: nowrap;
}

.sim-frame {
  border: none;
  flex: 1;
  width: 100%;
  min-height: 0;
  background: #030107;
}

.sim-launch-btn {
  background: linear-gradient(135deg, #0e7490, #8e2af9);
  margin-bottom: 10px;
}

/* ===== Full-viewport simulator overlay ===== */
.sim-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  background: #030107;
  animation: overlayIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes overlayIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.sim-overlay__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: calc(6px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 6px calc(12px + env(safe-area-inset-left, 0px));
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.sim-overlay__bar .back-link { min-height: 44px; min-width: 76px; margin: 0; padding: 0 12px 0 4px; display: inline-flex; align-items: center; }
.sim-overlay__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(193, 91, 251, 0.65);
}
/* A simulator's way to its training */
.sim-overlay__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-overlay__train {
  flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--purple); background: rgba(142, 42, 249, 0.18); color: var(--text);
  font: inherit; font-family: var(--font-display); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.sim-overlay__train .ico { margin-right: 7px; color: var(--accent); }
.sim-overlay__train:focus-visible, .sim-overlay__lesson:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sim-overlay__lessons { flex-shrink: 0; max-height: 46vh; overflow-y: auto; padding: 12px 14px 6px; background: #0e0a1a; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.sim-overlay__lesson {
  display: block; width: 100%; min-height: 48px; margin: 0 0 8px; padding: 9px 14px; text-align: left;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: var(--text); font: inherit; cursor: pointer;
}
.sim-overlay__lesson b { display: block; font-size: 0.92rem; font-weight: 600; }
.sim-overlay__lesson span { display: block; margin-top: 2px; font-size: 0.74rem; color: var(--text-dim); }
.sim-overlay__lesson[disabled] { opacity: 0.5; cursor: default; }
@media (max-width: 420px) {
  .sim-overlay__bar { gap: 8px; }
  .sim-overlay__title { font-size: 0.82rem; letter-spacing: 0.06em; }
  .sim-overlay__train { padding: 0 11px; font-size: 0.8rem; }
}

.sim-overlay__frame {
  border: none;
  flex: 1;
  width: 100%;
  min-height: 0;
}

/* ============================================================
   Auth overlay
   ============================================================ */

.auth-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 2, 8, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 24px;
}

.auth-card {
  width: 100%;
  max-width: 320px;
}

.auth-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 0;
}

.auth-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(142, 42, 249, 0.2);
  border-top-color: var(--purple);
  border-radius: 50%;
  animation: auth-spin 0.8s linear infinite;
}

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

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.auth-lockup {
  display: block;
  width: min(100%, 260px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 0 22px rgba(142, 42, 249, 0.35));
}
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text);
  margin-bottom: 6px;
}

.auth-sub {
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.4;
  margin-bottom: 20px;
}

.auth-error {
  font-size: 0.78rem;
  color: var(--bad);
  min-height: 1.3em;
  margin-bottom: 10px;
}

/* Fields have real labels, and type at 16 px so an iPhone does not zoom the page in. */
.auth-label { display: block; margin: 0 0 4px 2px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-dim); }
.auth-input { font-size: 16px; margin-bottom: 10px; }
.auth-pass { position: relative; }
.auth-pass .auth-input { padding-right: 68px; }
.auth-show {
  position: absolute; top: 0; right: 0; height: calc(100% - 10px); min-width: 60px; padding: 0 12px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--accent);
}
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.auth-row .auth-remember-label { margin-bottom: 0; }
.auth-link { background: none; border: 0; padding: 8px 2px; min-height: 36px; cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--accent); }
.auth-privacy { margin: 14px 0 0; font-size: 0.72rem; line-height: 1.45; color: var(--text-dim); text-align: center; }
.auth-show:focus-visible, .auth-link:focus-visible, .auth-skip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sim-count { display: block; margin-top: 2px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; opacity: 0.85; }
.sim-count:empty { display: none; }
.account-line { margin: 10px 2px 4px; font-size: 0.82rem; line-height: 1.45; color: var(--text-dim); }
.account-line b { color: var(--text); font-weight: 600; word-break: break-all; }

/* ----- Training record: a plain sheet on screen, and the only thing on the page when printed ----- */
.record { margin: 6px 0 16px; padding: 18px 16px; border-radius: 16px; background: #f6f3ee; color: #1a1622; }
.record__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid #1a1622; }
.record__brand { font-family: var(--font-display); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #5a2fc2; }
.record__title { margin: 0; font-size: 1.5rem; letter-spacing: 0.02em; text-align: left; color: #1a1622; text-shadow: none; background: none; -webkit-text-fill-color: currentColor; filter: none; }   /* a filter would print the title as a picture, not as text */
.record__date { font-size: 0.8rem; white-space: nowrap; }
.record__name { display: block; margin: 12px 0 4px; font-size: 0.76rem; font-weight: 600; color: #4b4560; }
.record #record-name { color: #1a1622; background: #fff; border: 1px solid #b9b2c8; box-shadow: none; }
.record__who { display: flex; flex-direction: column; gap: 2px; margin: 12px 0 4px; }
.record__who b { font-size: 1.15rem; }
.record__who span { font-size: 0.8rem; color: #4b4560; word-break: break-all; }
.record__topic { margin-top: 16px; }
.record__topic h2 { margin: 0; font-family: var(--font-display); font-size: 1.1rem; }
.record__sum { margin: 2px 0 8px; font-size: 0.8rem; line-height: 1.45; color: #3a3450; }
.record__table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.78rem; }
.record__table th:nth-child(1) { width: 46%; } .record__table th:nth-child(2) { width: 15%; } .record__table th:nth-child(3) { width: 12%; }
.record__table th { text-align: left; padding: 4px 6px 4px 0; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: #4b4560; border-bottom: 1px solid #1a1622; }
.record__table td { padding: 5px 6px 5px 0; border-bottom: 1px solid #d5cfdf; vertical-align: top; }
.record__table th:not(:first-child), .record__table td:not(:first-child) { white-space: nowrap; }
.record__level td { padding-top: 9px; font-weight: 700; border-bottom-color: #9a93ab; }
.record__foot { margin: 16px 0 0; font-size: 0.72rem; line-height: 1.45; color: #4b4560; }

/* ----- Team (supervisors): a list of people, each a button to their record ----- */
.team-pick { display: block; margin: 0 0 14px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; color: var(--text-dim); }
.team-pick select { display: block; margin: 4px 0 0; }
.team-pick select option { color: #111; }
.team-list { display: flex; flex-direction: column; }
.team-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 9px 2px; background: none; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.team-row:first-child { border-top: 0; }
.team-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.team-row__who, .team-row__nums { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.team-row__who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-row__who small, .team-row__nums small { font-size: 0.72rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-row__nums { align-items: flex-end; flex-shrink: 0; }
.team-row__nums i { font-style: normal; font-size: 0.84rem; font-weight: 600; white-space: nowrap; }
.team-done { color: var(--good); }

@media print {
  @page { margin: 14mm; }
  html, body { height: auto !important; min-height: 0 !important; background: #fff !important; display: block !important; }
  body::after, .phone::before, .app-header, .xp-strip, .bottom-nav, .toast, .auth-overlay, .no-print { display: none !important; }
  .phone { max-width: none !important; min-height: 0 !important; display: block !important; overflow: visible !important; background: none !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  #screens { overflow: visible !important; padding: 0 !important; height: auto !important; }
  .screen.active { animation: none !important; }
  .record { margin: 0; padding: 0; border-radius: 0; background: #fff; color: #000; }
  .record__topic { break-inside: avoid; }
  .record__table tr { break-inside: avoid; }
}

/* Read out by a screen reader, not shown. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.auth-skip-btn {
  display: block;
  width: 100%;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  padding: 10px;
  opacity: 0.85;
  transition: opacity 0.2s;
}

.auth-skip-btn:hover { opacity: 1; }

.auth-remember-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-size: 0.78rem;
  color: var(--text-dim);
  cursor: pointer;
  margin-bottom: 10px;
  user-select: none;
}

.auth-remember-label input[type="checkbox"] {
  accent-color: var(--purple);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* ============================================================
   Cloud-sync status pill (XP strip) + auth overlay note
   ============================================================ */
.sync-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.66rem; letter-spacing: 0.3px; white-space: nowrap;
  color: var(--text-dim);
}
.sync-pill__dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--text-dim);
  box-shadow: 0 0 6px currentColor;
}
.sync-pill[data-state="saving"]  .sync-pill__dot { background: var(--purple); animation: syncPulse 1s ease-in-out infinite; }
.sync-pill[data-state="saved"]   .sync-pill__dot { background: var(--good); }
.sync-pill[data-state="offline"] .sync-pill__dot { background: var(--warn); }
.sync-pill[data-state="error"]   .sync-pill__dot { background: var(--bad); }
@keyframes syncPulse { 50% { opacity: 0.3; } }

.auth-note { font-size: 0.78rem; line-height: 1.45; color: var(--warn); margin: 0 0 12px; }

/* ============================================================
   Desktop / laptop layout (>= 1000px)
   Every wrapper below is display:contents on phones, so the phone
   layout is untouched. Above 1000px the app becomes a workspace:
   a left nav rail, a wide scrolling stage, and per-screen grids
   instead of one 430px column.
   ============================================================ */
.home-grid, .home-col, .levels-grid, .ms-grid, .ms-side, .ms-main,
.lesson-grid, .lesson-main, .lesson-side, .prog-grid, .prog-actions { display: contents; }
.lesson-toc, .levels-hint { display: none; }

@media (min-width: 1000px) {
  .phone {
    max-width: 1320px;
    height: 100vh;
    min-height: 0;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "nav header"
      "nav xp"
      "nav screens";
  }
  .app-header { grid-area: header; padding: 18px 36px 10px; }
  .xp-strip   { grid-area: xp; padding: 0 36px 14px; }
  #screens    { grid-area: screens; padding: 14px 40px 48px; }
  .auth-card  { width: min(100% - 40px, 440px); }
  .toast      { bottom: 28px; }
  .page-title { font-size: 2.2rem; }

  /* The bottom tab bar becomes a left rail */
  .bottom-nav {
    grid-area: nav;
    position: static;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    padding: 22px 8px;
    border-radius: 0;
    border-width: 0 1px 0 0;
    box-shadow: var(--inset-light);
  }
  .nav-btn { flex: 0 0 auto; padding: 14px 0; border-radius: 14px; }
  .nav-btn.active { background: rgba(142, 42, 249, 0.10); }

  /* Home: hero stays put on the left while actions + insight scroll on the right */
  .home-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 12px 36px; align-items: start; }
  .home-col  { display: block; min-width: 0; }
  .home-col--hero { position: sticky; top: 0; }

  /* Levels: topic list on the left, the open topic levels on the right */
  .levels-grid {
    display: grid;
    grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
    grid-template-rows: repeat(var(--topics, 5), max-content) 1fr;
    gap: 0 32px;
    align-items: start;
  }
  .levels-grid .topic-head { grid-column: 1; }
  .levels-grid .topic-levels, .levels-hint { grid-column: 2; grid-row: 1 / -1; }
  .levels-grid .topic-levels {
    margin: 0; padding: 0; border-left: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-content: start;
  }
  .levels-grid .topic-levels > .cta,
  .levels-grid .topic-levels > div { grid-column: 1 / -1; }
  .levels-hint {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    min-height: 260px; border: 1px dashed rgba(142, 42, 249, 0.28); border-radius: 20px;
    color: var(--text-dim); font-size: 0.9rem;
  }
  .levels-hint .ico { color: var(--purple); opacity: 0.8; }

  /* Milestones: sticky level summary on the left, path on the right */
  .ms-grid { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 0 36px; align-items: start; }
  .ms-side { display: block; position: sticky; top: 0; }
  .ms-main { display: block; min-width: 0; }
  .ms-main .path-node { max-width: 520px; }

  /* Lesson: a reading column with a sticky rail (section jump-list + actions) */
  .lesson-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 36px; align-items: start; }
  .lesson-main { display: block; min-width: 0; max-width: 820px; }
  .lesson-side { display: block; position: sticky; top: 0; }
  .lesson-section p { font-size: 0.95rem; line-height: 1.7; }
  /* the whole lesson at once, with the list of sections beside it */
  .lesson-pages .lesson-section:not(.is-current) { display: block; }
  .lesson-pages .lesson-section:not(.on-check) .section-quiz, .lesson-pages .lesson-section.on-check .section-quiz { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.07); }
  .lesson-pages .lesson-section.on-check > p { display: block; }
  .lesson-pages .lesson-section.on-check > .keypoints { display: block; }
  .lesson-pages .lesson-section.on-check > .lesson-img { display: block; }
  .lesson-pages .lesson-section + .lesson-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
  .lesson-step, .lesson-nav, #screen-lesson #open-sim { display: none; }
  #open-sim-side { display: block; }
  .lesson-grid:not(.at-end) #lesson-done { display: block; }
  .lesson-img { max-width: 560px; }
  .lesson-toc { display: block; margin-bottom: 14px; }
  .lesson-toc .panel__label { margin-bottom: 6px; }
  .lesson-toc__item {
    display: block; width: 100%; text-align: left;
    padding: 9px 12px; margin-bottom: 3px; border-radius: 12px;
    background: none; border: 1px solid transparent;
    color: var(--text-dim); font: inherit; font-size: 0.84rem; line-height: 1.35; cursor: pointer;
    transition: color 0.25s, background 0.25s, border-color 0.25s;
  }
  .lesson-toc__item:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); border-color: rgba(142, 42, 249, 0.3); }

  /* Quiz: stays focused and centred */
  #screen-quiz { max-width: 800px; margin: 0 auto; }

  /* Progress: a dashboard, not a stack */
  .prog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; align-items: start; }
  .prog-grid > .stat-row, .prog-grid > .badge-panel, .prog-actions { grid-column: 1 / -1; }
  .prog-actions { display: flex; gap: 12px; }
  .prog-actions .cta { flex: 1; margin: 0; }
}

/* ============================================================
   Daily streak + goal (home) and post-quiz answer review
   ============================================================ */
.daily {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 14px;
  margin: 2px 0 16px; font-size: 0.78rem; color: var(--text-dim);
}
.daily__streak {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--glass); border: 1px solid rgba(251, 191, 36, 0.35);
  color: var(--warn);
}
.daily__streak b { font-family: var(--font-display); font-size: 0.98rem; color: var(--text); }
.daily__streak .ico { color: var(--warn); }
.daily__goal { display: flex; align-items: center; gap: 8px; min-width: 170px; }
.daily__goal .mini-bar { flex: 1; }
.daily__goal.met { color: var(--good); }
.daily__goal.met .mini-bar__fill { background: linear-gradient(90deg, #15803d, var(--good)); box-shadow: 0 0 12px rgba(74, 222, 128, 0.6); }

.review-list { margin: -6px 0 14px; }
.review-item {
  padding: 12px 14px; margin-bottom: 8px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.07);
}
.review-item__q { font-size: 0.88rem; font-weight: 600; line-height: 1.45; margin-bottom: 7px; }
.review-item__row { font-size: 0.8rem; margin-bottom: 3px; line-height: 1.4; }
.review-item__row.bad  { color: var(--bad); }
.review-item__row.good { color: var(--good); }
.review-item__row .ico { vertical-align: -2px; margin-right: 3px; }
.review-item__exp { font-size: 0.78rem; color: var(--text-dim); margin-top: 6px; line-height: 1.5; }
#res-review.open { border-color: var(--purple); color: var(--text); }

/* Load screen and welcome */
.splash, .auth-overlay {
  background-color: #05030b;
  background-image:
    radial-gradient(ellipse 70% 16% at 50% 100%, rgba(110, 60, 250, 0.34), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 38%, rgba(70, 30, 160, 0.20), transparent 75%),
    url("Images/splash-left.svg"),
    url("Images/splash-right.svg");
  background-repeat: no-repeat;
  background-position: center, center, left -70px top 4%, right -90px bottom 3%;
  background-size: auto, auto, auto 52%, auto 50%;
}
.splash {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: opacity 0.26s ease;
}
.splash--out { opacity: 0; pointer-events: none; }
.splash__mid { width: 100%; max-width: 560px; text-align: center; }
.splash__logo { display: block; width: min(86%, 440px); height: auto; margin: 0 auto 14px; filter: drop-shadow(0 0 26px rgba(142, 42, 249, 0.45)); }
.splash__tag { margin: 0 0 10px; font-size: 1.12rem; color: #cfc6ee; letter-spacing: 0.01em; }
.splash__topics { margin: 0 0 30px; font-size: 0.78rem; line-height: 1.9; color: #b9b0d8; }
.splash__topics span { white-space: nowrap; }
.splash__topics span + span::before { content: "\2022"; margin: 0 6px 0 3px; color: var(--purple); }
.splash__bar { width: min(78%, 420px); height: 8px; margin: 0 auto 14px; border-radius: 999px; border: 1px solid rgba(160, 140, 255, 0.38); background: rgba(255, 255, 255, 0.04); overflow: hidden; }
.splash__fill { height: 100%; width: 8%; border-radius: 999px; background: linear-gradient(90deg, #5a22f5, #9a5cff 70%, #e9dcff); box-shadow: 0 0 14px rgba(150, 90, 255, 0.8); animation: splashFill 0.86s cubic-bezier(0.3, 0.1, 0.2, 1) forwards; }
@keyframes splashFill { to { width: 100%; } }
.splash__note { margin: 0; font-size: 0.8rem; color: #a99fc9; }

.auth-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
.auth-welcome { display: flex; flex-direction: column; text-align: center; }
.auth-welcome[hidden] { display: none; }
.auth-welcome__top .auth-lockup { margin-bottom: 14px; }
.auth-welcome .splash__topics { margin-bottom: 26px; }
.auth-start { margin: 0 0 10px; min-height: 58px; font-size: 1.08rem; letter-spacing: 0.14em; }
.auth-welcome__hint { margin: 0; font-size: 0.76rem; color: var(--text-dim); }
.auth-welcome__register { margin-top: 34px; padding: 16px 16px 6px; border-radius: 18px; border: 1px solid rgba(160, 140, 255, 0.22); background: rgba(14, 9, 28, 0.82); }
.auth-welcome__label { font-family: var(--font-display); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); }
.auth-welcome__register p { margin: 6px 0 12px; font-size: 0.78rem; line-height: 1.5; color: var(--text-dim); }
.auth-welcome__register .cta { margin: 0 0 10px; }

@media (max-width: 999px) {
  /* a phone is tall and narrow: the drawings sit behind the top and the bottom, clear of the words */
  .splash, .auth-overlay { background-position: center, center, left -34px top -4%, right -44px bottom 1%; background-size: auto, auto, auto 40%, auto 37%; }
}
@media (prefers-reduced-motion: reduce) {
  .splash { transition: none; }
  .splash__fill { animation: none; width: 100%; }
}

/* ============================================================
   Home: a hero, the four main subjects as cards, then what to do
   next beside your progress. On a computer the bar at the foot
   becomes a named rail down the left, with the brand at its head.
   On a phone what to do next comes before the subjects.
   ============================================================ */
.home { display: flex; flex-direction: column; }
.home > .home-top { display: contents; }
.home-box--continue { order: 1; }
.home-box--progress { order: 3; }
.home > .home-subjects { order: 2; }
.home > .badge-panel { order: 4; }
.home > .home-practice { order: 5; }
.home-hero { margin: 2px 0 12px; }
.home-hero .eyebrow, .home-hero .home-title { text-align: left; }
.home-hero .eyebrow { margin-top: 4px; }
.home-title { letter-spacing: 0.04em; text-transform: none; }
.home-title em { font-style: normal; -webkit-text-fill-color: #a35bff; }
.home-hero__lead, .home-hero__tags { display: none; }

/* the four subjects */
.home-subjects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 10px; margin: 0 0 16px; }
.subject-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0; border-radius: 18px; overflow: hidden;
  text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: linear-gradient(170deg, rgba(22, 12, 40, 0.94), rgba(8, 4, 18, 0.98));
  border: 1px solid var(--lvl-color, var(--purple));
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4), 0 0 24px -8px var(--lvl-color, var(--purple)), var(--inset-light);
  transition: transform 0.3s var(--ease-liquid), box-shadow 0.3s;
}
.subject-card:active { transform: scale(0.98); }
.subject-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.subject-card__pic { position: relative; display: block; height: 92px; background: #0a0612; }
.subject-card__pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.subject-card__pic::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(10, 5, 20, 0.55) 0%, transparent 34%, transparent 50%, rgba(10, 5, 20, 0.96) 100%); }
.subject-card__icon {
  position: absolute; top: 8px; left: 8px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px;
  color: var(--lvl-color, var(--purple)); background: rgba(8, 4, 18, 0.82); border: 1px solid var(--lvl-color, var(--purple));
}
.subject-card__chev {
  position: absolute; top: 8px; right: 8px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  font-size: 1rem; line-height: 1; color: var(--text); background: rgba(8, 4, 18, 0.82); border: 1px solid rgba(255, 255, 255, 0.2);
}
.subject-card__body { display: flex; flex-direction: column; flex: 1; padding: 8px 12px 12px; }
.subject-card__name { font-family: var(--font-display); font-size: 1.18rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.15; }
.subject-card__sub { display: none; }
.subject-card__count { display: flex; align-items: center; margin-top: 5px; font-size: 0.72rem; line-height: 1.3; color: var(--text-dim); }
.subject-card__count .ico { flex: none; margin-right: 6px; color: var(--lvl-color, var(--purple)); }
.subject-card__bar { display: flex; align-items: center; margin-top: auto; padding-top: 8px; }
.subject-card__bar .mini-bar { flex: 1; margin: 0 8px 0 0; }
.subject-card__go {
  display: block; margin-top: 9px; padding: 9px 8px; border-radius: 10px; text-align: center;
  font-family: var(--font-display); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.05em; color: #fff;
  background: linear-gradient(90deg, #4318c9, #7c3aed); box-shadow: 0 0 16px rgba(124, 58, 237, 0.4), var(--inset-light);
}

/* Continue Learning, and Your Progress */
.home-top { margin-bottom: 4px; }
.home-box { margin: 0 0 14px; padding: 12px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(14, 9, 28, 0.6); }
.home-box__head { display: flex; align-items: center; margin-bottom: 10px; }
.home-box__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-right: 10px; border-radius: 50%; color: var(--accent); border: 1px solid var(--purple); box-shadow: 0 0 14px -3px var(--purple); }
.home-box__icon--plain { width: auto; border: none; box-shadow: none; color: var(--purple); }
.home-box__titles { flex: 1; min-width: 0; }
.home-box__title { font-family: var(--font-display); font-size: 1.06rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2; }
.home-box__sub { font-size: 0.74rem; color: var(--text-dim); }
.home-box__all { padding: 10px 2px 10px 8px; background: none; border: none; cursor: pointer; white-space: nowrap; font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; color: var(--accent); }
.home-box__all:hover { color: #fff; }
.home-box__all:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.home-box .continue-card { margin: 0; }
.home-box .continue-card .postcard__pic { height: 118px; }
.continue-card__go {
  display: inline-flex; align-items: center; align-self: flex-start;
  margin: 0 14px 14px; padding: 8px 14px; border-radius: 10px;
  font-family: var(--font-display); font-size: 0.86rem; font-weight: 700; letter-spacing: 0.06em; color: #fff;
  background: linear-gradient(90deg, #6d28f5, #a855f7);
  box-shadow: 0 0 18px rgba(142, 42, 249, 0.45), var(--inset-light);
}
.continue-card__go span { margin-left: 8px; }
.continue-card .topic-card__pct { white-space: nowrap; color: var(--accent); }

.home-stats { display: block; }
.stat-tile {
  display: flex; align-items: center; width: 100%; min-width: 0; margin: 0 0 8px; padding: 10px 12px; border-radius: 14px;
  text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: rgba(8, 4, 18, 0.6); border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.3s, transform 0.3s var(--ease-liquid);
}
.stat-tile:last-child { margin-bottom: 0; }
.stat-tile:hover { border-color: rgba(142, 42, 249, 0.55); }
.stat-tile:active { transform: scale(0.985); }
.stat-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stat-tile__icon { flex: none; display: flex; width: 30px; margin-right: 12px; color: var(--purple); filter: drop-shadow(0 0 10px rgba(142, 42, 249, 0.7)); }
.stat-tile--streak .stat-tile__icon { color: #fb923c; filter: drop-shadow(0 0 10px rgba(251, 146, 60, 0.7)); }
.stat-tile__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.stat-tile__big { font-family: var(--font-display); font-size: 0.86rem; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.stat-tile__big b { font-size: 1.25rem; font-weight: 700; color: var(--text); }
.stat-tile__label { font-size: 0.74rem; color: var(--text-dim); }
.stat-tile__foot { flex: 0 0 32%; }
.stat-tile__foot .mini-bar { display: block; margin: 0; }
.stat-tile--today.met .mini-bar__fill { background: linear-gradient(90deg, #15803d, var(--good)); box-shadow: 0 0 12px rgba(74, 222, 128, 0.6); }
.home-practice { margin-top: 4px; }

@media (min-width: 1000px) {
  /* the shell: brand and rail on the left, rank and XP at the top right */
  .phone {
    max-width: 1500px;
    grid-template-columns: 208px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "brand top" "nav screens";
  }
  .phone::after {
    content: ""; grid-area: 1 / 1 / 3 / 2; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(20, 11, 36, 0.78), rgba(8, 4, 18, 0.9));
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
  .app-header { display: contents; }
  .brand { grid-area: brand; position: relative; z-index: 1; padding: 26px 22px 20px; font-size: 1.06rem; }
  .brand-mark { width: 28px; height: 28px; margin-right: 10px; }
  .level-chip { grid-area: top; justify-self: end; align-self: center; margin: 16px 392px 10px 0; }
  .xp-strip { grid-area: top; justify-self: end; align-self: center; width: 340px; margin: 16px 0 10px; padding: 0 40px 0 0; }
  #screens { grid-area: screens; padding: 8px 40px 48px 32px; }
  .bottom-nav {
    grid-area: nav; position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: 1; align-items: stretch;
    padding: 6px 14px 22px; background: none; border: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; overflow: visible;
  }
  .nav-btn {
    flex-direction: row; justify-content: flex-start; gap: 14px; padding: 13px 14px; border-radius: 12px;
    font-size: 0.95rem; letter-spacing: 0.04em;
  }
  .nav-btn.active { color: #fff; background: rgba(142, 42, 249, 0.18); box-shadow: inset 3px 0 0 var(--purple), var(--inset-light); }
  .nav-btn.active svg { transform: none; color: var(--accent); }

  /* Home */
  .home { display: block; }
  .home-hero {
    display: flex; align-items: flex-start; justify-content: space-between;
    min-height: 236px; margin: -8px -40px 0 -32px; padding: 30px 40px 70px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background:
      linear-gradient(90deg, rgba(5, 3, 11, 0.92) 0%, rgba(5, 3, 11, 0.5) 40%, rgba(5, 3, 11, 0) 100%),
      radial-gradient(ellipse 60% 110% at 74% 20%, rgba(124, 58, 237, 0.55), transparent 72%),
      url("Images/splash-right.svg") right -30px center / auto 165% no-repeat,
      url("Images/splash-left.svg") 52% center / auto 135% no-repeat,
      #05030b;
  }
  .home-hero .eyebrow { font-size: 0.82rem; }
  .home-title { font-size: 3.4rem; line-height: 1; margin: 8px 0 12px; letter-spacing: 0.02em; }
  .home-hero__lead { display: block; max-width: 500px; font-size: 1.08rem; line-height: 1.5; color: #cfc6ee; }
  .home-hero__tags {
    display: block; position: relative; list-style: none; margin-top: 6px; padding: 8px 0 22px 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
    font-family: var(--font-display); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.18em; line-height: 2.1;
    text-transform: uppercase; color: #b9b0d8;
  }
  .home-hero__tags::after { content: ""; position: absolute; left: 18px; bottom: 8px; width: 32px; height: 3px; border-radius: 2px; background: var(--purple); box-shadow: 0 0 10px var(--purple); }

  .home-subjects { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 18px; margin: -50px 0 20px; }
  .subject-card { border-radius: 20px; }
  .subject-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5), 0 0 34px -6px var(--lvl-color, var(--purple)), var(--inset-light); }
  .subject-card__pic { height: 190px; }
  .subject-card__icon { top: 14px; left: 14px; width: 46px; height: 46px; border-radius: 12px; }
  .subject-card__icon .ico { width: 26px; height: 26px; }
  .subject-card__chev { top: 14px; right: 14px; width: 30px; height: 30px; }
  .subject-card__body { padding: 6px 20px 20px; }
  .subject-card__name { font-size: 1.8rem; }
  .subject-card__sub { display: block; min-height: 2.9em; margin-top: 6px; font-size: 0.92rem; line-height: 1.45; color: #cfc6ee; }
  .subject-card__count { margin-top: 12px; font-size: 0.86rem; }
  .subject-card__bar { padding-top: 12px; }
  .subject-card__go { margin-top: 14px; padding: 12px 10px; border-radius: 12px; font-size: 1rem; }

  .home > .home-top { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(310px, 1fr); grid-gap: 18px; align-items: stretch; margin: 0 0 8px; }
  .home-box { margin: 0; padding: 18px 20px; border-radius: 20px; }
  .home-box--continue { display: flex; flex-direction: column; }
  .home-box--continue .continue-card { flex: 1; }
  .home-box__head { margin-bottom: 14px; }
  .home-box__icon { width: 44px; height: 44px; margin-right: 14px; }
  .home-box__title { font-size: 1.32rem; }
  .home-box__sub { font-size: 0.84rem; }
  .home-box__all { font-size: 0.88rem; }
  .home-box .continue-card { max-width: none; flex-direction: row; align-items: center; opacity: 1; border-color: rgba(255, 255, 255, 0.08); box-shadow: var(--inset-light); background: rgba(8, 4, 18, 0.6); }
  .home-box .continue-card:hover { border-color: var(--lvl-color, var(--purple)); }
  .home-box .continue-card .postcard__pic { flex: 0 0 32%; height: 150px; border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, 0.08); }
  .continue-card .postcard__pic img { object-fit: contain; object-position: center; padding: 8px; }
  .continue-card .postcard__tag { display: none; }
  .continue-card .postcard__body { flex: 1; min-width: 0; padding: 16px 22px; }
  .continue-card .postcard__name { font-size: 1.28rem; margin-top: 6px; }
  .continue-card .postcard__bar { margin-top: 16px; }
  .continue-card__go { flex: none; align-self: center; margin: 0 22px 0 0; padding: 12px 18px; font-size: 0.94rem; }
  .stat-tile { padding: 13px 14px; }
  .stat-tile__big b { font-size: 1.4rem; }
  .stat-tile__label { font-size: 0.8rem; }

  .home-practice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-gap: 16px; align-items: start; margin-top: 22px; }
  .home-practice > * { margin: 0; }
}
/* a short laptop screen: the pictures give way so what to do next stays in reach */
@media (min-width: 1000px) and (max-height: 820px) {
  .home-hero { min-height: 196px; padding-top: 20px; }
  .home-title { font-size: 2.8rem; }
  .subject-card__pic { height: 120px; }
  .subject-card__sub { min-height: 0; }
}

/* ============================================================
   Topics: four main subjects, each on a nameplate; the topics
   filed under a subject follow it. On a computer, Topics in the
   rail pulls down the same list.
   ============================================================ */
.group-plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 10px; margin: 0 0 16px; }
.group-plate {
  position: relative; display: flex; align-items: center; min-width: 0; min-height: 86px; padding: 12px 12px 12px 10px;
  border-radius: 18px; text-align: left; font: inherit; color: var(--text); cursor: pointer; overflow: hidden;
  background: linear-gradient(165deg, rgba(22, 12, 40, 0.92), rgba(8, 4, 18, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.10); border-left: 4px solid var(--lvl-color, var(--purple));
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32), var(--inset-light);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease-liquid);
}
.group-plate:active { transform: scale(0.98); }
.group-plate:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.group-plate.open { border-color: var(--lvl-color, var(--purple)); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.42), 0 0 26px -4px var(--lvl-color, var(--purple)), var(--inset-light); }
.group-plate__num { flex: none; width: 34px; margin-right: 8px; text-align: center; font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--lvl-color, var(--purple)); text-shadow: 0 0 16px var(--lvl-color, var(--purple)); }
.group-plate__body { flex: 1; min-width: 0; }
.group-plate__name { display: block; font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1.15; text-transform: uppercase; }
.group-plate__sub { display: block; margin-top: 3px; font-size: 0.72rem; line-height: 1.3; color: var(--text-dim); }
.group-plate .postcard__bar { margin-top: 7px; }
.group-plate__icon { display: none; }
#group-title { margin-top: 2px; }
.nav-sub { display: none; }

@media (min-width: 1000px) {
  .group-plates { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-gap: 16px; margin: 6px 0 26px; }
  .group-plate { min-height: 128px; padding: 20px 18px 20px 16px; border-radius: 20px; border-left-width: 5px; }
  .group-plate__num { width: 52px; margin-right: 12px; font-size: 3.4rem; }
  .group-plate__name { font-size: 1.5rem; padding-right: 30px; }
  .group-plate__sub { font-size: 0.84rem; margin-top: 5px; }
  .group-plate .postcard__bar { margin-top: 12px; }
  .group-plate__icon { display: flex; position: absolute; top: 14px; right: 14px; color: var(--lvl-color, var(--purple)); opacity: 0.85; }

  .nav-sub { display: block; margin: 2px 0 8px 22px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
  .nav-sub__item {
    display: flex; align-items: center; width: 100%; padding: 9px 10px; border-radius: 10px; text-align: left; cursor: pointer;
    background: none; border: none; font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.03em; line-height: 1.25; color: var(--text-dim);
  }
  .nav-sub__item:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
  .nav-sub__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .nav-sub__item.on { color: #fff; background: rgba(142, 42, 249, 0.16); }
  .nav-sub__num { flex: none; width: 18px; margin-right: 6px; font-weight: 700; color: var(--lvl-color, var(--purple)); }
  .nav-sub__item--child { padding: 7px 10px 7px 34px; font-family: var(--font-body); font-size: 0.78rem; font-weight: 500; letter-spacing: 0; }
  .bottom-nav { overflow-y: auto; }
}
@media (max-width: 999px) {
  /* two across on a phone: the number sits over the name so a long name has the whole plate */
  .group-plate { flex-direction: column; align-items: flex-start; padding: 10px 12px 12px; }
  .group-plate__num { width: auto; margin: 0 0 2px; font-size: 1.7rem; }
  .group-plate__body { width: 100%; }
}

/* The four subjects' logos: on Home's cards, on the Topics nameplates and in the rail's list */
.subject-card__icon--logo { top: 8px; left: 8px; width: 52px; height: 52px; padding: 0; border: none; border-radius: 13px; overflow: hidden; background: #07040f; box-shadow: 0 0 18px -2px var(--lvl-color, var(--purple)), 0 4px 10px rgba(0, 0, 0, 0.5); }
.subject-card__icon--logo img, .group-plate__icon--logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.group-plate__icon--logo { display: block; position: absolute; top: 10px; right: 10px; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; opacity: 1; box-shadow: 0 0 16px -3px var(--lvl-color, var(--purple)); }
.nav-sub__logo { flex: none; width: 22px; height: 22px; margin-right: 8px; border-radius: 6px; }
@media (min-width: 1000px) {
  .subject-card__icon--logo { top: 14px; left: 14px; width: 72px; height: 72px; border-radius: 18px; }
  .group-plate__icon--logo { top: 14px; right: 14px; width: 60px; height: 60px; border-radius: 15px; }
  .group-plate__name { padding-right: 62px; }
}
/* a nameplate with a logo: the logo leads, and the number rides on its corner */
.group-plate--logo .group-plate__icon--logo { position: relative; top: auto; right: auto; order: -1; flex: none; width: 48px; height: 48px; margin: 0 0 6px; }
.group-plate--logo .group-plate__num {
  position: absolute; top: 6px; left: 46px; z-index: 1; width: 22px; height: 22px; margin: 0; border-radius: 50%;
  font-size: 0.86rem; line-height: 22px; text-shadow: none; color: #0a0612; background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), var(--lvl-color, var(--purple)); box-shadow: 0 0 10px var(--lvl-color, var(--purple));
}
@media (min-width: 1000px) {
  .group-plate--logo .group-plate__icon--logo { width: 72px; height: 72px; margin: 0 16px 0 0; border-radius: 18px; }
  .group-plate--logo .group-plate__num { top: 14px; left: 76px; width: 26px; height: 26px; font-size: 1rem; line-height: 26px; }
  .group-plate--logo .group-plate__name { padding-right: 0; font-size: 1.36rem; }
}

/* The subjects' artwork. On Home it heads each card whole: the logo and the arrow are drawn into it,
   so the card's own are not shown. On Topics it lies behind each nameplate, fading out under the words. */
.subject-card--art .subject-card__pic { height: 0; padding-top: 64.4%; }
.subject-card--art .subject-card__pic > img { position: absolute; top: 0; left: 0; }
.subject-card--art .subject-card__pic::after { background: linear-gradient(180deg, transparent 70%, rgba(10, 5, 20, 0.96) 100%); }
.subject-card--art .subject-card__icon, .subject-card--art .subject-card__chev { display: none; }
.subject-card--art .subject-card__body { padding-top: 6px; }
.group-plate--art::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 5, 20, 0.96) 0%, rgba(10, 5, 20, 0.9) 50%, rgba(10, 5, 20, 0.72) 100%), var(--art) 78% 62% / 190% auto no-repeat;
}
.group-plate--art > * { position: relative; z-index: 1; }
.group-plate--art .group-plate__num { position: absolute; }
@media (min-width: 1000px) {
  .subject-card--art .subject-card__pic { height: 0; }
  .group-plate--art::before { background: linear-gradient(90deg, rgba(10, 5, 20, 0.97) 0%, rgba(10, 5, 20, 0.9) 55%, rgba(10, 5, 20, 0.66) 100%), var(--art) 80% 60% / 150% auto no-repeat; }
}

/* ============================================================
   Simulator cards: a plate of frosted glass with a lit edge, the
   picture set into it like a screen, corner marks in the topic's
   color and the tasks as a row of pips, as a game would show them.
   ============================================================ */
.simcard {
  border-radius: 18px; overflow: hidden;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.035) 34%, rgba(255, 255, 255, 0.015) 62%, rgba(255, 255, 255, 0.07) 100%),
    rgba(16, 10, 32, 0.58);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.42);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -14px 24px -18px var(--lvl-color, var(--purple)),
    0 16px 32px rgba(0, 0, 0, 0.5),
    0 0 26px -10px var(--lvl-color, var(--purple));
  transition: transform 0.35s var(--ease-liquid), box-shadow 0.35s, border-color 0.35s;
}
/* the light that lies across the top of the glass */
.simcard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 46%; z-index: 2; pointer-events: none;
  border-radius: 18px 18px 60% 60% / 18px 18px 22% 22%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 60%, transparent);
  opacity: 0.55;
}
/* corner marks, drawn in the topic's color */
.simcard::after {
  content: ""; position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; z-index: 3; pointer-events: none; border-radius: 14px;
  background:
    linear-gradient(var(--lvl-color, var(--purple)), var(--lvl-color, var(--purple))) top left / 16px 2px no-repeat,
    linear-gradient(var(--lvl-color, var(--purple)), var(--lvl-color, var(--purple))) top left / 2px 16px no-repeat,
    linear-gradient(var(--lvl-color, var(--purple)), var(--lvl-color, var(--purple))) top right / 16px 2px no-repeat,
    linear-gradient(var(--lvl-color, var(--purple)), var(--lvl-color, var(--purple))) top right / 2px 16px no-repeat,
    linear-gradient(var(--lvl-color, var(--purple)), var(--lvl-color, var(--purple))) bottom left / 16px 2px no-repeat,
    linear-gradient(var(--lvl-color, var(--purple)), var(--lvl-color, var(--purple))) bottom left / 2px 16px no-repeat,
    linear-gradient(var(--lvl-color, var(--purple)), var(--lvl-color, var(--purple))) bottom right / 16px 2px no-repeat,
    linear-gradient(var(--lvl-color, var(--purple)), var(--lvl-color, var(--purple))) bottom right / 2px 16px no-repeat;
  opacity: 0.7; transition: opacity 0.35s, top 0.35s var(--ease-liquid), right 0.35s var(--ease-liquid), bottom 0.35s var(--ease-liquid), left 0.35s var(--ease-liquid);
}
/* the picture: a screen set into the plate */
.simcard .postcard__pic {
  height: 112px; margin: 10px 10px 0; border-radius: 11px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); border-bottom-width: 1px;
  background: #07040f; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 22px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.12);
}
.simcard .postcard__pic::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 3px), linear-gradient(180deg, transparent 55%, rgba(7, 4, 15, 0.7));
}
.simcard__play {
  position: absolute; right: 8px; bottom: 8px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  color: #fff; background: linear-gradient(160deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.06));
  -webkit-backdrop-filter: blur(10px) saturate(1.6);
  backdrop-filter: blur(10px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 16px -2px var(--lvl-color, var(--purple)), 0 4px 10px rgba(0, 0, 0, 0.5);
  transition: transform 0.35s var(--ease-liquid), box-shadow 0.35s;
}
.simcard--done .simcard__play { color: #06130b; background: linear-gradient(160deg, #86efac, #22c55e); border-color: rgba(255, 255, 255, 0.6); }
.simcard .postcard__body { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; padding: 10px 14px 14px; }
.simcard .postcard__name { font-size: 0.92rem; letter-spacing: 0.05em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
.simcard .postcard__sub { margin-top: 4px; font-family: var(--font-display); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }   /* small text: the bright purple, readable on every card */
.simcard__pips { display: flex; margin-top: auto; padding-top: 10px; }
.simcard__pips i { flex: 1; height: 6px; margin-right: 4px; border-radius: 2px; transform: skewX(-22deg); background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.5); }
.simcard__pips i:last-child { margin-right: 0; }
.simcard__pips i.on { background: var(--lvl-color, var(--purple)); box-shadow: 0 0 10px var(--lvl-color, var(--purple)), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.simcard__pips--free i.on { opacity: 0.45; }
.simcard:active { transform: scale(0.97); }
.simcard:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) {
  .simcard:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.34); border-top-color: rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -18px 28px -18px var(--lvl-color, var(--purple)), 0 24px 40px rgba(0, 0, 0, 0.55), 0 0 34px -6px var(--lvl-color, var(--purple));
  }
  .simcard:hover::after { opacity: 1; top: 3px; right: 3px; bottom: 3px; left: 3px; }
  .simcard:hover .simcard__play { transform: scale(1.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 22px var(--lvl-color, var(--purple)), 0 4px 10px rgba(0, 0, 0, 0.5); }
}
@media (min-width: 1000px) {
  .simcard.postcard--sim { flex: 0 0 228px; margin-bottom: 16px; opacity: 1; }
  .simcard .postcard__pic { height: 128px; }
  .simcard .postcard__name { font-size: 0.98rem; }
}
@media (prefers-reduced-motion: reduce) { .simcard, .simcard::after, .simcard__play { transition: none; } }

/* ============================================================
   The same glass through the rest of the app: topic cards, level
   cards, a level's path, quiz answers and the figures on Progress
   are plates with a lit top edge, a glow in their own color from
   below, and marks at their corners, as the simulator cards are.
   ============================================================ */
.level-card, .path-node, .opt, .stat-box, .postcard.topic-head { --mk: var(--lvl-color, var(--purple)); }
.level-card, .path-node, .opt, .stat-box { position: relative; }
.level-card, .path-node, .opt, .stat-box, .panel, .postcard.topic-head {
  border-top-color: rgba(255, 255, 255, 0.36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -14px 22px -18px var(--mk, var(--purple)), 0 12px 26px rgba(0, 0, 0, 0.42);
}
.level-card::before, .path-node::before, .opt::before, .stat-box::before, .postcard.topic-head::after, .group-plate::after {
  content: ""; position: absolute; top: 5px; right: 5px; bottom: 5px; left: 5px; z-index: 2; pointer-events: none; border-radius: 10px;
  background:
    linear-gradient(var(--mk, var(--lvl-color, var(--purple))), var(--mk, var(--lvl-color, var(--purple)))) top left / 12px 2px no-repeat,
    linear-gradient(var(--mk, var(--lvl-color, var(--purple))), var(--mk, var(--lvl-color, var(--purple)))) top left / 2px 12px no-repeat,
    linear-gradient(var(--mk, var(--lvl-color, var(--purple))), var(--mk, var(--lvl-color, var(--purple)))) top right / 12px 2px no-repeat,
    linear-gradient(var(--mk, var(--lvl-color, var(--purple))), var(--mk, var(--lvl-color, var(--purple)))) top right / 2px 12px no-repeat,
    linear-gradient(var(--mk, var(--lvl-color, var(--purple))), var(--mk, var(--lvl-color, var(--purple)))) bottom left / 12px 2px no-repeat,
    linear-gradient(var(--mk, var(--lvl-color, var(--purple))), var(--mk, var(--lvl-color, var(--purple)))) bottom left / 2px 12px no-repeat,
    linear-gradient(var(--mk, var(--lvl-color, var(--purple))), var(--mk, var(--lvl-color, var(--purple)))) bottom right / 12px 2px no-repeat,
    linear-gradient(var(--mk, var(--lvl-color, var(--purple))), var(--mk, var(--lvl-color, var(--purple)))) bottom right / 2px 12px no-repeat;
  opacity: 0.5; transition: opacity 0.3s;
}
.path-node::before, .opt::before, .stat-box::before { top: 4px; right: 4px; bottom: 4px; left: 4px; opacity: 0.38; }
.level-card.locked::before, .path-node.locked::before { opacity: 0.15; }
.postcard.topic-head.open::after, .group-plate.open::after, .path-node.current::before, .opt.selected::before { opacity: 1; }

/* topic cards inside a subject: glass, with the picture set in like a screen */
.postcard.topic-head {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 36%, rgba(255, 255, 255, 0.015) 64%, rgba(255, 255, 255, 0.06) 100%), rgba(16, 10, 32, 0.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  backdrop-filter: blur(20px) saturate(1.7);
  border-color: rgba(255, 255, 255, 0.18);
}
.postcard.topic-head.open { border-color: var(--lvl-color, var(--purple)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -16px 26px -18px var(--mk), 0 18px 36px rgba(0, 0, 0, 0.5), 0 0 30px -6px var(--mk); }
.postcard.topic-head .postcard__pic { margin: 10px 10px 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.12); }
.postcard.topic-head .postcard__name { letter-spacing: 0.05em; text-transform: uppercase; }

/* level cards: the number is a lit key */
.level-card { border-radius: 16px; }
.level-card__num { border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 16px -4px var(--lvl-color, var(--purple)); }
.level-card__name { letter-spacing: 0.03em; }

/* a level's path: each step joined to the one before it */
.path-node + .path-node::after { content: ""; position: absolute; left: 33px; top: -11px; width: 2px; height: 10px; border-radius: 1px; background: linear-gradient(180deg, transparent, var(--purple)); opacity: 0.7; }
.path-node.current { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -16px 26px -18px var(--purple), 0 14px 28px rgba(0, 0, 0, 0.45), 0 0 26px -6px var(--purple); }
.path-node__circle { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 12px -3px var(--purple); }

/* quiz answers: the letter is a key cap */
.opt { align-items: center; }
.opt__letter {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px;
  color: #fff; background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04)); border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 12px -3px var(--purple);
}
.opt.selected { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -16px 26px -18px var(--purple), 0 0 24px -6px var(--purple); }
.opt.selected .opt__letter { background: linear-gradient(160deg, #a855f7, #6d28f5); border-color: rgba(255, 255, 255, 0.55); }
.opt.correct .opt__letter, .opt.missed .opt__letter { color: #06130b; background: linear-gradient(160deg, #86efac, #22c55e); text-shadow: none; }
.opt.wrong .opt__letter { color: #1a0509; background: linear-gradient(160deg, #fda4af, #f43f5e); text-shadow: none; }
.opt.correct, .opt.missed { --mk: var(--good); }
.opt.wrong { --mk: var(--bad); }

/* figures and bars */
.stat-box__val { font-size: 1.4rem; }
.mini-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); }
.mini-bar__fill { border-radius: 3px; background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.22) 0, rgba(255, 255, 255, 0.22) 3px, transparent 3px, transparent 9px), linear-gradient(90deg, var(--purple-deep), var(--purple), var(--accent)); box-shadow: 0 0 10px rgba(142, 42, 249, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.panel__label { letter-spacing: 0.18em; }

@media (hover: hover) {
  .level-card:not(.locked):hover::before, .path-node:not(.locked):hover::before, .opt:not(:disabled):hover::before, .postcard.topic-head:hover::after, .group-plate:hover::after { opacity: 1; }
  .opt:not(:disabled):hover { transform: translateY(-2px); }
}

/* Five subjects in a row on the Topics screen: the plates are narrower, so their names a touch smaller */
@media (min-width: 1000px) {
  .group-plates .group-plate--logo { flex-direction: column; align-items: flex-start; }
  .group-plates .group-plate--logo .group-plate__icon--logo { margin: 0 0 12px; }
  .group-plates .group-plate--logo .group-plate__name { font-size: 1.22rem; letter-spacing: 0.03em; }
}

/* ============================================================
   Polish: the same finish as the production line. The buttons inside the cards get a gloss and a shade
   under them, and light up with their card; the bottom tabs light the one you are on; bars have a sheen.
   ============================================================ */
.subject-card__go, .continue-card__go {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 55%), linear-gradient(90deg, #4f1fd6, #8b3df0);
  border: 1px solid rgba(196, 181, 253, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 6px 16px -8px rgba(109, 40, 217, 0.95);
  transition: transform 0.18s var(--ease-liquid), box-shadow 0.25s var(--ease-liquid), filter 0.25s var(--ease-liquid);
}
.subject-card:active .subject-card__go, .continue-card:active .continue-card__go { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45); }
.mini-bar__fill, .xp-strip__fill { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 60%), linear-gradient(90deg, var(--purple-deep), var(--purple), var(--accent)); box-shadow: 0 0 8px rgba(193, 91, 251, 0.55); }
.level-chip { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 60%); }
.back-link { border-radius: 10px; padding-inline: 8px; margin-left: -8px; transition: color 0.3s var(--ease-liquid), text-shadow 0.3s var(--ease-liquid), background 0.3s var(--ease-liquid); }
@media (hover: hover) {
  .subject-card:hover .subject-card__go, .continue-card:hover .continue-card__go { filter: brightness(1.12); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 12px 26px -8px rgba(139, 92, 246, 1); }
  .back-link:hover { background: rgba(142, 42, 249, 0.12); }
  .stat-tile { transition: transform 0.25s var(--ease-liquid), box-shadow 0.25s var(--ease-liquid), border-color 0.25s; }
  .stat-tile:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(142, 42, 249, 0.75), var(--inset-light); }
  .home-box .continue-card { transition: transform 0.25s var(--ease-liquid), box-shadow 0.25s var(--ease-liquid), border-color 0.25s; }
  .home-box .continue-card:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px var(--lvl-color, rgba(142, 42, 249, 0.8)), var(--inset-light); }
  .prog-topic-btn:hover { box-shadow: 0 10px 24px -12px rgba(142, 42, 249, 0.8), var(--inset-light); }
}
/* the bottom tabs on a phone: the tab you are on sits in a soft lit pocket, with a bar of light above it */
@media (max-width: 999px) {
  .nav-btn { position: relative; border-radius: 16px; transition: color 0.35s var(--ease-liquid), background 0.35s var(--ease-liquid); }
  .nav-btn.active { color: #d49bff; background: radial-gradient(70% 80% at 50% 35%, rgba(193, 91, 251, 0.2), rgba(193, 91, 251, 0) 75%); }   /* a lighter label, easy to read on its glow */
  .nav-btn.active svg { color: var(--accent); }
  .nav-btn.active::before { content: ""; position: absolute; top: 0; left: 32%; right: 32%; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--purple), var(--accent)); box-shadow: 0 0 12px rgba(193, 91, 251, 0.9), 0 0 24px rgba(142, 42, 249, 0.6); }
}
/* the side tabs on a computer: a lit edge and a glow under the pointer */
@media (min-width: 1000px) {
  .nav-btn { transition: color 0.3s var(--ease-liquid), background 0.3s var(--ease-liquid), box-shadow 0.3s var(--ease-liquid), transform 0.2s var(--ease-liquid); }
  .nav-btn:not(.active):hover { background: rgba(142, 42, 249, 0.1); box-shadow: 0 8px 20px -12px rgba(142, 42, 249, 0.85), var(--inset-light); transform: translateX(2px); }
  .nav-btn.active { background-image: linear-gradient(90deg, rgba(142, 42, 249, 0.28), rgba(142, 42, 249, 0.08)); box-shadow: inset 3px 0 0 var(--accent), 0 8px 22px -12px rgba(142, 42, 249, 0.9), var(--inset-light); }
}
@media (prefers-reduced-motion: reduce) {
  .subject-card__go, .continue-card__go, .stat-tile, .home-box .continue-card, .nav-btn { transition: none; transform: none !important; }
}