:root {
  --taitype-bg: #eef4f6;
  --taitype-surface: #ffffff;
  --taitype-surface-soft: #f6fbfc;
  --taitype-border: rgba(16, 72, 97, 0.12);
  --taitype-primary: #123f72;
  --taitype-primary-strong: #0d325d;
  --taitype-zahra: #009688;
  --taitype-text: #183b5b;
  --taitype-muted: #647f95;
  --taitype-shadow: 0 18px 42px rgba(18, 63, 114, 0.08);
  --taitype-radius-xl: 28px;
  --taitype-radius-lg: 22px;
  --taitype-radius-md: 16px;
}

body {
  background:
    radial-gradient(circle at top center, rgba(0, 150, 136, 0.08), transparent 24%),
    linear-gradient(180deg, #f5fbfd 0%, #edf4f7 100%);
  color: var(--taitype-text);
}

body.dark {
  --taitype-bg: #09131b;
  --taitype-surface: #0d1924;
  --taitype-surface-soft: #10202d;
  --taitype-border: rgba(214, 235, 255, 0.12);
  --taitype-primary: #d8e6fb;
  --taitype-primary-strong: #ffffff;
  --taitype-zahra: #27c1b4;
  --taitype-text: #e8f2ff;
  --taitype-muted: #95a9bb;
  --taitype-shadow: 0 18px 42px rgba(0, 0, 0, 0.3);
  background:
    radial-gradient(circle at top center, rgba(39, 193, 180, 0.08), transparent 24%),
    linear-gradient(180deg, #09131b 0%, #0c1824 100%);
}

.taiPie-page {
  padding: 0.7rem 0 1.4rem;
}

.taitype-tabs.container,
.taitype-app.container {
  width: min(1760px, calc(100vw - 36px)) !important;
  max-width: 1760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.taitype-tabs {
  display: flex;
  justify-content: center;
  gap: 1.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.taitype-tab {
  position: relative;
  padding-bottom: 0.3rem;
  color: var(--taitype-primary);
  font-size: clamp(1.05rem, 1.9vw, 1.55rem);
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -0.04em;
}

.taitype-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--taitype-zahra);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.16s ease;
}

.taitype-tab:hover {
  color: var(--taitype-primary-strong);
}

.taitype-tab.is-active {
  color: var(--taitype-primary-strong);
}

.taitype-tab.is-active::after {
  transform: scaleX(1);
}

.taitype-app {
  max-width: 1760px;
}

.taitype-stage-card {
  background: var(--taitype-surface);
  border: 1px solid var(--taitype-border);
  border-radius: 34px;
  box-shadow: var(--taitype-shadow);
  padding: 1rem 1.2rem 0.95rem;
}

.taitype-stage-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.taitype-stage-head-copy {
  display: none;
}

.taitype-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.34rem 0.72rem;
  border-radius: 999px;
  background: rgba(0, 150, 136, 0.12);
  color: var(--taitype-zahra);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.taitype-stage-head h1 {
  margin: 0.45rem 0 0.1rem;
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--taitype-primary-strong);
}

.taitype-lesson-title {
  margin: 0;
  font-size: 0.88rem;
  color: var(--taitype-muted);
}

.taitype-stage-head-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
  min-width: 0;
  width: 100%;
}

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

.taitype-select {
  width: min(100%, 300px);
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid var(--taitype-border);
  background: var(--taitype-surface-soft);
  color: var(--taitype-text);
  padding: 0.58rem 0.82rem;
  font-size: 0.84rem;
  font-weight: 700;
  outline: none;
}

.taitype-mini-stats {
  display: flex;
  gap: 0.38rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.taitype-mini-stats span,
.taitype-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 28px;
  padding: 0.28rem 0.58rem;
  border-radius: 999px;
  border: 1px solid var(--taitype-border);
  background: var(--taitype-surface-soft);
  color: var(--taitype-muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.taitype-mini-stats strong {
  color: var(--taitype-primary-strong);
}

/* ZCoins pill: subtle gold, reserved for rewards/progress only (everywhere
   else in the UI stays teal/navy), so it reads as "you earned this" rather
   than blending in with the neutral live stats next to it. */
.taitype-zcoins-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  min-height: 28px;
  padding: 0.28rem 0.62rem;
  border-radius: 999px;
  border: 1px solid rgba(184, 138, 44, 0.28);
  background: rgba(212, 165, 74, 0.12);
  color: #8a6a1f;
  font-size: 0.7rem;
  font-weight: 700;
}

body.dark .taitype-zcoins-pill {
  border-color: rgba(226, 187, 110, 0.3);
  background: rgba(226, 187, 110, 0.1);
  color: #e2bb6e;
}

.taitype-zcoins-pill i {
  font-size: 0.72rem;
  opacity: 0.85;
}

.taitype-zcoins-pill strong {
  color: inherit;
  font-size: 0.78rem;
}

/* Shown when typo debt has pushed the effective balance below zero (see
   getEffectiveZcoinBalance() in taiPie.js) -- a plain red tint, no alarm
   iconography, since this never blocks the learner from continuing. */
.taitype-zcoins-pill.is-negative {
  border-color: rgba(197, 56, 58, 0.32);
  background: rgba(197, 56, 58, 0.12);
  color: #c5383a;
}

body.dark .taitype-zcoins-pill.is-negative {
  border-color: rgba(255, 138, 140, 0.32);
  background: rgba(255, 138, 140, 0.12);
  color: #ff8a8c;
}

.taitype-text-shell {
  position: relative;
  min-height: 82px;
  padding: 0.9rem 1rem 0.72rem;
  margin-bottom: 0.42rem;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  border: 1px solid rgba(16, 72, 97, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  cursor: text;
}

body.dark .taitype-text-shell {
  background: linear-gradient(180deg, #101d29 0%, #0d1823 100%);
}

.taitype-start-bubble {
  position: absolute;
  top: -11px;
  left: 1.2rem;
  background: var(--taitype-zahra);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.52rem 0.82rem;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 150, 136, 0.24);
}

.taitype-start-bubble::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: -8px;
  border-width: 8px 8px 0 0;
  border-style: solid;
  border-color: var(--taitype-zahra) transparent transparent transparent;
}

.taitype-text {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: clamp(1.3rem, 2.3vw, 2rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-break: break-word;
  color: var(--taitype-primary-strong);
  max-width: fit-content;
  margin: 0 auto;
  text-align: center;
}

body.dark .taitype-text {
  color: #edf6ff;
}

/* All letters are bold (set on .taitype-text above); the three states below
   only change colour/opacity/background, never weight, so the text doesn't
   visually "jump" in thickness as you type. Line-height is generous (1.5)
   so the active cursor and error background have room to breathe without
   crowding the next line. */
.taitype-text span {
  border-radius: 8px;
  padding: 0 0.02em;
}

/* Typed correctly: fades back so the eye is drawn forward to what's still
   ahead, not backward at what's already done. */
.taitype-text .correct {
  color: var(--taitype-muted);
  opacity: 0.65;
}

body.dark .taitype-text .correct {
  color: #7f97ab;
  opacity: 0.75;
}

/* Typed incorrectly: stays full-strength and clearly red -- mistakes should
   never fade, since the whole point is that they remain easy to spot. */
.taitype-text .incorrect {
  color: #c5383a;
  background: rgba(197, 56, 58, 0.16);
  opacity: 1;
}

/* The current letter: a soft teal cursor pill, not just a thin line, so
   it's unmistakable at a glance -- with a slow, gentle blink rather than a
   hard on/off flash. */
.taitype-text .active {
  position: relative;
  color: var(--taitype-primary-strong);
  background: color-mix(in srgb, var(--taitype-zahra) 16%, transparent);
}

.taitype-text .active::after {
  content: "";
  position: absolute;
  left: 0.02em;
  right: 0.02em;
  bottom: -0.12em;
  height: 3px;
  border-radius: 999px;
  background: var(--taitype-zahra);
  animation: taitype-cursor-blink 1.1s ease-in-out infinite;
}

@keyframes taitype-cursor-blink {
  0%, 55% { opacity: 1; }
  75%, 100% { opacity: 0.25; }
}

.taitype-hidden-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.taitype-control-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-bottom: 0.28rem;
}

.taitype-icon-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--taitype-primary);
  font-size: 1.2rem;
  cursor: pointer;
}

.taitype-progress-track {
  position: relative;
  width: min(100%, 180px);
  height: 10px;
  border-radius: 999px;
  background: #dbe3ea;
}

.taitype-progress-track #progress-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--taitype-primary), var(--taitype-zahra));
  transition: width 0.2s ease;
}

/* Reward pill: appears once, only on lesson completion (never per
   keypress), as a small gold pop-in above the progress bar. Kept understated
   -- no confetti, no bounce loop -- in line with "subtle, not childish". */
.taitype-reward-pill {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 4px);
  white-space: nowrap;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  background: #b8862c;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 18px rgba(184, 134, 44, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.taitype-reward-pill.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Typo penalties (per-mistake ZCoin deductions) show the same pill in a
   muted red instead of gold, so a loss reads visually distinct from a gain. */
.taitype-reward-pill.is-penalty {
  background: #b3403a;
  box-shadow: 0 8px 18px rgba(179, 64, 58, 0.28);
}

.taitype-instruction-wrap {
  text-align: center;
  margin-bottom: 0.2rem;
}

.taitype-instruction {
  margin: 0;
  color: var(--taitype-primary);
  font-size: clamp(0.94rem, 1.5vw, 1.18rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.taitype-focus-keys {
  display: inline-flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0 0.2rem;
}

.taitype-focus-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  min-height: 1.28em;
  padding: 0.06em 0.22em;
  border-radius: 10px;
  border: 2px solid var(--taitype-primary);
  color: var(--taitype-primary);
  background: #ffffff;
  font-weight: 800;
}

/* Text stand-in for the (currently disabled) hand illustration: names the
   finger for the next key, kept quiet/small since it's a hint, not a
   headline. Empty and invisible on the very first render (no lesson typed
   yet), populated the moment updateKeyboardTarget() has a target key. */
.taitype-finger-hint {
  margin: 0.2rem 0 0;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--taitype-muted);
  letter-spacing: -0.01em;
}

.taitype-finger-hint strong {
  color: var(--taitype-zahra);
  font-weight: 800;
  text-transform: capitalize;
}

.taitype-status-row {
  display: none;
}

.taitype-status-pill {
  color: var(--taitype-primary);
}

.taitype-note {
  display: none;
}

.taitype-keyboard-wrap {
  padding: 0.1rem 0 0;
  max-width: 920px;
  margin: 0 auto;
}

.taitype-keyboard-stage {
  position: relative;
  padding-bottom: 4.3rem;
}

.taitype-keyboard {
  display: grid;
  gap: 0.34rem;
  position: relative;
  z-index: 2;
}

.taitype-key-row {
  display: flex;
  gap: 0.34rem;
}

.taitype-key {
  min-width: 0;
  min-height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--taitype-text);
  border: 1px solid rgba(16, 72, 97, 0.08);
  box-shadow: inset 0 -2px 0 rgba(16, 72, 97, 0.08);
}

/* Eight-zone finger colour coding (mirrored left/right, ratatype-style
   pastel palette). Each class also carries a matching darker --key-accent
   custom property used by .is-target below, so the highlighted key glows
   in the same colour family as the finger responsible for it. */
.taitype-key.left-pinky {
  background: #cdc6ff;
  --key-accent: #6a5bd6;
}

.taitype-key.left-ring {
  background: #b7ecc9;
  --key-accent: #2f9e5e;
}

.taitype-key.left-middle {
  background: #ffc7d1;
  --key-accent: #e0577a;
}

.taitype-key.left-index {
  background: #9de8de;
  --key-accent: #1a9c8c;
}

.taitype-key.right-index {
  background: #ffe78b;
  --key-accent: #c99a12;
}

.taitype-key.right-middle {
  background: #ffcda3;
  --key-accent: #d97a2b;
}

.taitype-key.right-ring {
  background: #b7ecc9;
  --key-accent: #2f9e5e;
}

.taitype-key.right-pinky {
  background: #cdc6ff;
  --key-accent: #6a5bd6;
}

.taitype-key.thumbs,
.taitype-key.special {
  background: #d3dbe3;
  --key-accent: #647f95;
}

.taitype-key.is-target {
  outline: 2px solid var(--key-accent, rgba(135, 107, 0, 0.9));
  outline-offset: -2px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--key-accent, #876b00) 22%, transparent);
  transform: translateY(-1px);
}

.taitype-key.thumbs.is-target {
  outline: 2px solid var(--taitype-zahra);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--taitype-zahra) 24%, transparent);
}

/* Physical-keyboard-style bump on F and J, so the home row is easy to find
   without looking down -- a small, calm detail rather than an illustration. */
.taitype-key.is-home {
  position: relative;
}

.taitype-key.is-home::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 14px;
  height: 3px;
  border-radius: 999px;
  background: var(--key-accent, var(--taitype-zahra));
  opacity: 0.55;
  transform: translateX(-50%);
}

/* A wrong keypress briefly flashes the matching on-screen key, so mistakes
   are visible on the keyboard itself, not only in the text above it. */
.taitype-key.is-wrong {
  animation: taitype-key-wrong 0.22s ease;
}

/* background-color is intentionally omitted from 0%/100%: leaving it unset
   there makes the browser use each key's own tinted colour (set by the
   .taitype-key.left-pinky etc. rules above) as the implicit start/end
   value, so the flash returns to the correct colour instead of an
   unrelated one. */
@keyframes taitype-key-wrong {
  0% { outline: 2px solid rgba(197, 56, 58, 0); }
  35% {
    outline: 2px solid #c5383a;
    box-shadow: 0 0 0 5px rgba(197, 56, 58, 0.22);
    background-color: rgba(197, 56, 58, 0.4);
  }
  100% { outline: 2px solid rgba(197, 56, 58, 0); box-shadow: none; }
}

/* TypingHandGuide placeholder -- intentionally empty/disabled for now (see
   the comment in taiPie.html for why). It still reserves layout space so
   the keyboard doesn't jump around once real hand artwork lands here, and
   still carries data-active-finger + .is-thumbs for the thumb glow below. */
.taitype-hand-guide {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -0.4rem;
  height: 9.5rem;
  pointer-events: none;
  z-index: 1;
}

/* Soft glow behind the thumbs' spot when the space bar is next -- an
   abstract "next key" cue, not a hand illustration, so it's safe to keep
   even while TypingHandGuide itself is disabled. */
.taitype-thumb-glow {
  position: absolute;
  left: 50%;
  bottom: 1.55rem;
  width: 34%;
  height: 1.4rem;
  border-radius: 999px;
  transform: translateX(-50%) scaleX(0.6);
  background: var(--taitype-zahra);
  opacity: 0;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.taitype-hand-guide.is-thumbs .taitype-thumb-glow {
  opacity: 0.55;
  transform: translateX(-50%) scaleX(1);
}

/* LessonCompleteModal: a calm, centered card -- no confetti or mascot,
   just the numbers that matter and two clear next actions. */
.taitype-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(9, 22, 33, 0.42);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.taitype-modal-overlay[hidden] {
  display: none;
}

.taitype-modal-overlay.is-open {
  opacity: 1;
}

.taitype-modal-card {
  position: relative;
  width: min(420px, 100%);
  background: var(--taitype-surface);
  border: 1px solid var(--taitype-border);
  border-radius: var(--taitype-radius-lg);
  box-shadow: 0 30px 70px rgba(9, 22, 33, 0.28);
  padding: 1.6rem 1.5rem 1.4rem;
  text-align: center;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.18s ease;
}

.taitype-modal-overlay.is-open .taitype-modal-card {
  transform: translateY(0) scale(1);
}

.taitype-modal-close {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--taitype-surface-soft);
  color: var(--taitype-muted);
  cursor: pointer;
}

.taitype-modal-kicker {
  display: inline-flex;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(0, 150, 136, 0.12);
  color: var(--taitype-zahra);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.taitype-modal-card h2 {
  margin: 0.6rem 0 1.1rem;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  color: var(--taitype-primary-strong);
}

.taitype-modal-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.taitype-modal-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.7rem 0.3rem 0.6rem;
  border-radius: 14px;
  background: var(--taitype-surface-soft);
  border: 1px solid var(--taitype-border);
}

/* Achievement-badge-style icon per stat, echoing Ratatype's badge language
   (lightning = speed, target = accuracy, star = typos) but with our own
   colors/shapes -- kept purely iconographic, no extra wording. */
.taitype-modal-stat-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.85rem;
  margin-bottom: 0.1rem;
}

.taitype-modal-stat-speed .taitype-modal-stat-icon {
  background: rgba(230, 168, 55, 0.16);
  color: #a9711f;
}

.taitype-modal-stat-accuracy .taitype-modal-stat-icon {
  background: rgba(0, 150, 136, 0.14);
  color: var(--taitype-zahra);
}

.taitype-modal-stat-time .taitype-modal-stat-icon {
  background: rgba(90, 120, 200, 0.14);
  color: #4a63b0;
}

.taitype-modal-stat-typos .taitype-modal-stat-icon {
  background: rgba(197, 56, 58, 0.12);
  color: #c5383a;
}

.taitype-modal-stat span {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--taitype-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.taitype-modal-stat strong {
  font-size: 1.15rem;
  color: var(--taitype-primary-strong);
}

/* IMPORTANT: [hidden] must be repeated on every selector below that also
   sets `display`. An element's own `display` rule (even at equal
   specificity) beats the browser default `[hidden] { display: none }`,
   so without this the `.hidden` property set from JS is silently ignored
   and the element stays visible forever -- this was the root cause of
   signed-in users still seeing the "sign in" banner/modal row. */
.taitype-modal-reward {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 auto 1.2rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: rgba(212, 165, 74, 0.14);
  border: 1px solid rgba(184, 138, 44, 0.28);
  color: #8a6a1f;
  font-size: 0.78rem;
  font-weight: 700;
}

.taitype-modal-reward[hidden] {
  display: none;
}

.taitype-modal-reward.is-penalty {
  background: rgba(197, 56, 58, 0.14);
  border-color: rgba(197, 56, 58, 0.32);
  color: #c5383a;
}

body.dark .taitype-modal-reward.is-penalty {
  background: rgba(255, 138, 140, 0.14);
  border-color: rgba(255, 138, 140, 0.32);
  color: #ff8a8c;
}

body.dark .taitype-modal-reward {
  background: rgba(226, 187, 110, 0.1);
  border-color: rgba(226, 187, 110, 0.3);
  color: #e2bb6e;
}

.taitype-modal-perfect-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.5rem auto 0;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background: rgba(212, 165, 74, 0.16);
  color: #8a6a1f;
  font-size: 0.72rem;
  font-weight: 800;
}

.taitype-modal-perfect-badge[hidden] {
  display: none;
}

body.dark .taitype-modal-perfect-badge {
  background: rgba(226, 187, 110, 0.14);
  color: #e2bb6e;
}

.taitype-modal-lesson-bonus {
  background: rgba(0, 150, 136, 0.14);
  border-color: rgba(0, 150, 136, 0.3);
  color: var(--taitype-zahra);
}

.taitype-modal-sync-status,
.taitype-modal-lesson-progress {
  margin: 0 0 0.9rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--taitype-muted);
  text-align: center;
}

.taitype-modal-actions {
  display: flex;
  gap: 0.6rem;
}

.taitype-btn {
  flex: 1 1 0;
  min-height: 44px;
  border-radius: 14px;
  border: none;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

.taitype-btn-ghost {
  background: var(--taitype-surface-soft);
  color: var(--taitype-primary-strong);
  border: 1px solid var(--taitype-border);
}

.taitype-btn-primary {
  background: linear-gradient(135deg, var(--taitype-primary), var(--taitype-zahra));
  color: #ffffff;
}

/* ---- Exercise label + sign-in note ---- */
.taitype-exercise-label {
  margin: 0.1rem 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--taitype-zahra);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.taitype-signin-note,
.taitype-modal-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0 auto 0.55rem;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  background: rgba(0, 150, 136, 0.1);
  color: var(--taitype-zahra);
  font-size: 0.74rem;
  font-weight: 700;
  text-align: center;
  max-width: fit-content;
}

.taitype-modal-signin {
  margin: 0 auto 1.2rem;
}

.taitype-signin-note[hidden],
.taitype-modal-signin[hidden] {
  display: none;
}

body.dark .taitype-signin-note,
body.dark .taitype-modal-signin {
  background: rgba(39, 193, 180, 0.12);
}

/* ---- Hero: opt-in (Settings > Hero mode). Sits directly on top of the
   current letter, inline on whatever line it wraps to -- positioned in JS
   via plain left/top pixel values (positionHeroAtIndex in taiPie.js), not
   a fixed horizontal track, since text can wrap across multiple lines.
   Movement between letters is a lightweight CSS transition, not a
   physics/animation-library rig. ---- */
.taitype-hero-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.taitype-hero-figure {
  position: absolute;
  left: 0;
  top: 0;
  width: 1.7rem;
  height: 1.7rem;
  transform: translate(-50%, -50%);
  transition: left 0.15s ease-out, top 0.15s ease-out;
}

.taitype-hero-figure svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 8px rgba(9, 22, 33, 0.18));
}

/* The mouth gets its own light "chewing" animation while hero mode is on
   and the learner is actively typing -- a single CSS keyframe, not a
   rigged/skeletal animation. transform-box: fill-box is required so the
   scale animates around the ellipse's own center rather than the SVG's
   top-left corner (an SVG-in-CSS-transform quirk). */
.taitype-hero-figure .hero-mouth {
  transform-box: fill-box;
  transform-origin: center;
}

.taitype-hero-figure.is-chewing .hero-mouth {
  animation: taitype-hero-chew 0.45s ease-in-out infinite;
}

@keyframes taitype-hero-chew {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.35); }
}

/* Combo meter: appears once the streak crosses the first tier, gets a
   warmer glow at each higher tier. Hero mode (if on) picks up a matching
   glow via .is-combo-glow so the two reinforce each other. */
.taitype-combo-meter {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  min-height: 28px;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(230, 108, 44, 0.28);
  background: rgba(230, 108, 44, 0.1);
  color: #b6531f;
  font-size: 0.72rem;
  font-weight: 800;
}

.taitype-combo-meter[hidden] {
  display: none;
}

.taitype-combo-meter.tier-2 {
  border-color: rgba(230, 78, 44, 0.4);
  background: rgba(230, 78, 44, 0.16);
  color: #c4441c;
}

.taitype-combo-meter.tier-3 {
  border-color: rgba(230, 44, 44, 0.5);
  background: rgba(230, 44, 44, 0.2);
  color: #d4321c;
  animation: taitype-combo-pulse 0.9s ease-in-out infinite;
}

@keyframes taitype-combo-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

body.dark .taitype-combo-meter {
  border-color: rgba(255, 150, 100, 0.32);
  background: rgba(255, 150, 100, 0.12);
  color: #ff9664;
}

.taitype-hero-figure.is-combo-glow svg {
  filter: drop-shadow(0 4px 8px rgba(9, 22, 33, 0.18)) drop-shadow(0 0 10px rgba(255, 150, 60, 0.65));
}

/* Cosmetic hero accessory overlay (see ACCESSORIES/renderActiveHero in
   taiPie.js) -- sits just above the hero's own SVG, purely visual. */
.hero-accessory {
  position: absolute;
  left: 50%;
  top: -0.55rem;
  width: 1.1rem;
  height: 0.66rem;
  transform: translateX(-50%);
  pointer-events: none;
}

.hero-accessory svg {
  width: 100%;
  height: 100%;
}

/* Weekly goal progress bar (Settings > Weekly goal). Non-monetary --
   purely motivational, see updateWeeklyGoalProgress() in taiPie.js. */
.taitype-weekly-goal-track {
  height: 8px;
  border-radius: 999px;
  background: var(--taitype-surface-soft);
  border: 1px solid var(--taitype-border);
  overflow: hidden;
}

.taitype-weekly-goal-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #009688, #27c1b4);
  transition: width 0.3s ease;
}

/* End-of-lesson recap: plain CSS bars (no chart library), shown once in
   the completion modal the moment a lesson's last exercise is passed. */
.taitype-lesson-recap {
  margin: 0 0 1rem;
  text-align: left;
}

.taitype-lesson-recap[hidden] {
  display: none;
}

.taitype-lesson-recap-title {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--taitype-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.taitype-lesson-recap-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  height: 56px;
  padding: 0.3rem;
  border-radius: 12px;
  background: var(--taitype-surface-soft);
  border: 1px solid var(--taitype-border);
}

.taitype-lesson-recap-bar {
  flex: 1;
  display: flex;
  align-items: flex-end;
  height: 100%;
  min-width: 4px;
}

.taitype-lesson-recap-bar-fill {
  width: 100%;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #27c1b4, #009688);
}

/* Hero mode's "eating" effect: once the hero has passed a letter, it just
   disappears (opacity 0) rather than continuing to show the normal
   correct/incorrect fade -- see applyHeroEatenState() in taiPie.js. With
   hero mode off, this class is never applied. */
.taitype-text span.eaten {
  opacity: 0;
  transition: opacity 0.12s ease;
}

/* ---- Settings modal ---- */
.taitype-settings-card {
  width: min(560px, 100%);
  max-height: min(84vh, 720px);
  overflow-y: auto;
  text-align: left;
}

.taitype-settings-card h2 {
  text-align: center;
}

.taitype-settings-message {
  margin: 0 0 0.9rem;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  background: rgba(212, 165, 74, 0.14);
  border: 1px solid rgba(184, 138, 44, 0.28);
  color: #8a6a1f;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

.taitype-settings-summary {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--taitype-muted);
}

.taitype-settings-summary-zcoin {
  margin: 0 0 1rem;
  color: var(--taitype-zahra);
}

.taitype-settings-hint {
  margin: 0.4rem 0 0;
  font-size: 0.7rem;
  color: var(--taitype-muted);
  line-height: 1.4;
}

.taitype-select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  margin-bottom: 0.5rem;
  border-radius: 14px;
  background: var(--taitype-surface-soft);
  border: 1px solid var(--taitype-border);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--taitype-primary-strong);
}

.taitype-select-row:last-child {
  margin-bottom: 0;
}

.taitype-select-row .taitype-select {
  width: auto;
  min-width: 160px;
}

.taitype-settings-section {
  margin-bottom: 1.2rem;
}

.taitype-settings-section h3 {
  margin: 0 0 0.55rem;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--taitype-primary-strong);
  letter-spacing: -0.02em;
}

/* Hero grid */
.taitype-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.6rem;
}

.taitype-hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.65rem 0.4rem;
  border-radius: 16px;
  border: 2px solid var(--taitype-border);
  background: var(--taitype-surface-soft);
  cursor: pointer;
  text-align: center;
}

.taitype-hero-card.is-selected {
  border-color: var(--taitype-zahra);
  background: color-mix(in srgb, var(--taitype-zahra) 10%, var(--taitype-surface-soft));
}

.taitype-hero-card.is-locked {
  opacity: 0.72;
}

.taitype-hero-avatar {
  width: 46px;
  height: 46px;
}

.taitype-hero-avatar svg {
  width: 100%;
  height: 100%;
}

.taitype-hero-name {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--taitype-primary-strong);
}

.taitype-hero-cost {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--taitype-muted);
}

.taitype-hero-card.is-selected .taitype-hero-cost {
  color: var(--taitype-zahra);
}

/* Keyboard-visibility toggle */
.taitype-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-radius: 14px;
  background: var(--taitype-surface-soft);
  border: 1px solid var(--taitype-border);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--taitype-primary-strong);
  cursor: pointer;
}

.taitype-toggle-row input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.taitype-toggle-track {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #dbe3ea;
  flex-shrink: 0;
  transition: background 0.16s ease;
}

.taitype-toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(9, 22, 33, 0.24);
  transition: transform 0.16s ease;
}

.taitype-toggle-row input:checked + .taitype-toggle-track {
  background: var(--taitype-zahra);
}

.taitype-toggle-row input:checked + .taitype-toggle-track::after {
  transform: translateX(18px);
}

/* Lesson / exercise list */
.taitype-lesson-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.taitype-lesson-card {
  border-radius: 16px;
  border: 1px solid var(--taitype-border);
  background: var(--taitype-surface-soft);
  padding: 0.6rem 0.7rem;
}

.taitype-lesson-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--taitype-primary-strong);
}

.taitype-lesson-card-level {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--taitype-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Boss lessons (every 5th one) get a subtle gold border + a small crown
   badge -- same content underneath, just marked as a milestone. */
.taitype-lesson-card.is-boss {
  border-color: rgba(212, 165, 74, 0.5);
  background: rgba(212, 165, 74, 0.08);
}

.taitype-boss-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(212, 165, 74, 0.2);
  color: #8a6a1f;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  vertical-align: middle;
}

body.dark .taitype-boss-badge {
  background: rgba(226, 187, 110, 0.18);
  color: #e2bb6e;
}

.taitype-exercise-list {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.taitype-exercise-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--taitype-border);
  background: var(--taitype-surface);
  color: var(--taitype-primary);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}

.taitype-exercise-item.is-current {
  border-color: var(--taitype-zahra);
  color: var(--taitype-zahra);
}

.taitype-exercise-item.is-completed {
  background: rgba(47, 158, 94, 0.12);
  border-color: rgba(47, 158, 94, 0.35);
  color: #2f9e5e;
}

.taitype-exercise-item.is-locked {
  opacity: 0.7;
}

/* Locked-but-purchasable items stay clickable (skip-ahead), so they get a
   pointer cursor and a small ZCoin-cost pill instead of the plain
   "not-allowed" locked look. */
.taitype-exercise-item.is-skippable {
  cursor: pointer;
  border-style: dashed;
}

.taitype-exercise-item.is-skippable:hover {
  opacity: 1;
  border-color: var(--taitype-zahra);
}

.taitype-exercise-skip-cost {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(230, 168, 55, 0.16);
  color: #a9711f;
  font-size: 0.65rem;
}

/* Hiding the on-screen keyboard via Settings also hides its layout space,
   so the typing card recenters instead of leaving a gap. */
.taitype-keyboard-wrap.is-hidden {
  display: none;
}

@media (max-width: 980px) {
  .taitype-stage-head {
    justify-content: center;
  }

  .taitype-stage-head-tools {
    justify-content: center;
    width: 100%;
  }

  .taitype-mini-stats {
    justify-content: center;
  }

  .taitype-text {
    font-size: 1.7rem;
  }

  .taitype-tabs.container,
  .taitype-app.container {
    width: calc(100vw - 24px) !important;
  }
}

@media (max-width: 760px) {
  .taiPie-page {
    padding-top: 0.6rem;
  }

  .taitype-tabs {
    gap: 0.85rem;
    margin-bottom: 0.8rem;
  }

  .taitype-tab {
    font-size: 1.05rem;
  }

  .taitype-stage-card {
    padding: 0.85rem;
    border-radius: 20px;
  }

  .taitype-text-shell {
    padding: 0.8rem 0.75rem 0.65rem;
    min-height: 72px;
    max-width: 100%;
  }

  .taitype-start-bubble {
    left: 0.9rem;
    font-size: 0.7rem;
  }

  .taitype-text {
    font-size: 1.08rem;
  }

  .taitype-control-row {
    gap: 0.55rem;
  }

  .taitype-icon-btn {
    width: 30px;
    height: 30px;
    font-size: 0.95rem;
  }

  .taitype-progress-track {
    width: min(100%, 120px);
  }

  .taitype-key {
    min-height: 34px;
    font-size: 0.68rem;
    border-radius: 8px;
  }

  .taitype-keyboard-stage {
    padding-bottom: 2.5rem;
  }

  .taitype-hand-guide {
    left: 2%;
    right: 2%;
    height: 5.6rem;
    bottom: 0;
  }

  .taitype-thumb-glow {
    bottom: 0.9rem;
    height: 1rem;
  }

  .taitype-finger-hint {
    font-size: 0.7rem;
  }

  .taitype-reward-pill {
    font-size: 0.62rem;
    padding: 0.2rem 0.5rem;
  }

  .taitype-modal-card {
    padding: 1.3rem 1.1rem 1.15rem;
  }

  .taitype-modal-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .taitype-modal-actions {
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------------
   Header "Buy ZCoins" button -- mirrors mind-maze.html's header icon
   buttons in placement/sizing, opening the same shared purchase modal
   used on the Vault page (site-zcoin-purchase.js) rather than a new,
   page-specific one.
--------------------------------------------------------------------- */
.taitype-header-buy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 36px;
  padding: 0 0.85rem;
  margin-right: 0.4rem;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #00897b, #004d40);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 137, 123, 0.28);
}

.taitype-header-buy-btn:hover {
  filter: brightness(1.05);
}

@media (max-width: 640px) {
  .taitype-header-buy-btn span {
    display: none;
  }

  .taitype-header-buy-btn {
    width: 36px;
    padding: 0;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------
   ZCoin purchase modal (ported from vault.html so the shared
   site-zcoin-purchase.js module renders correctly here too -- these
   class names are referenced directly by that script and must match).
--------------------------------------------------------------------- */
.vault-buy-backdrop {
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.62);
  z-index: 3200;
}

.vault-buy-backdrop.open {
  display: flex;
}

.vault-buy-sheet {
  width: min(100%, 480px);
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 26px 26px 0 0;
  padding: 22px 20px 26px;
  background: #111;
  color: #fff;
  box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.34);
}

body:not(.dark) .vault-buy-sheet {
  background: #fff;
  color: #1a1a1a;
}

.vault-buy-handle {
  width: 54px;
  height: 5px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

body:not(.dark) .vault-buy-handle {
  background: rgba(0, 0, 0, 0.15);
}

.vault-buy-sub,
.vault-buy-label {
  color: rgba(255, 255, 255, 0.56);
}

body:not(.dark) .vault-buy-sub,
body:not(.dark) .vault-buy-label {
  color: rgba(0, 0, 0, 0.5);
}

.vault-buy-label {
  display: block;
  margin: 18px 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.vault-number-wrap {
  position: relative;
  margin-bottom: 12px;
}

.vault-number-input,
.vault-dropdown-trigger,
.vault-search-input {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  font: inherit;
  box-sizing: border-box;
}

.vault-number-input {
  padding: 15px 98px 15px 16px;
  font-size: 17px;
  font-weight: 700;
}

.vault-number-suffix {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.56);
}

body:not(.dark) .vault-number-suffix {
  color: rgba(0, 0, 0, 0.45);
}

.vault-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.vault-chip {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}

.vault-chip.selected {
  background: rgba(0, 137, 123, 0.18);
  border-color: rgba(0, 137, 123, 0.6);
  color: #8de0d3;
}

body:not(.dark) .vault-chip {
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.04);
}

body:not(.dark) .vault-chip.selected {
  color: #0a6b5d;
}

.vault-dropdown-wrap {
  position: relative;
  margin-bottom: 20px;
}

.vault-dropdown-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
}

.vault-dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #181818;
  overflow: hidden;
  z-index: 3;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

body:not(.dark) .vault-dropdown-panel {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.12);
}

.vault-search-input {
  padding: 12px 14px;
  border-radius: 0;
  border-width: 0 0 1px;
}

.vault-currency-list {
  max-height: 240px;
  overflow-y: auto;
}

.vault-currency-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
}

.vault-currency-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

body:not(.dark) .vault-currency-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.vault-price-card {
  padding: 14px;
  margin-bottom: 24px;
  border-radius: 16px;
  border: 1px solid rgba(0, 137, 123, 0.3);
  background: rgba(0, 137, 123, 0.12);
}

.vault-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.vault-price-warning {
  display: none;
  margin-top: 6px;
  color: #ef5350;
  font-size: 11px;
  font-weight: 600;
}

.vault-buy-btn {
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #00897b, #004d40);
  box-shadow: 0 8px 20px rgba(0, 137, 123, 0.3);
}

.vault-buy-btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

@media (max-width: 640px) {
  .vault-buy-backdrop {
    padding: 0;
  }

  .vault-buy-sheet {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------
   Achievement badges (Settings > Achievements) + unlock toast.
--------------------------------------------------------------------- */
.taitype-achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.6rem;
}

.taitype-achievement-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.3rem;
  border-radius: 14px;
  border: 1px solid var(--taitype-border);
  background: var(--taitype-surface-soft);
  color: var(--taitype-muted);
  text-align: center;
  opacity: 0.55;
}

.taitype-achievement-badge i {
  font-size: 1.15rem;
}

.taitype-achievement-badge span {
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.2;
}

.taitype-achievement-badge.is-unlocked {
  opacity: 1;
  border-color: rgba(212, 165, 74, 0.4);
  background: rgba(212, 165, 74, 0.14);
  color: #8a6a1f;
}

body.dark .taitype-achievement-badge.is-unlocked {
  border-color: rgba(226, 187, 110, 0.35);
  background: rgba(226, 187, 110, 0.12);
  color: #e2bb6e;
}

.taitype-achievement-toast {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translate(-50%, 16px);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-radius: 16px;
  background: #0d325d;
  color: #ffffff;
  font-size: 0.78rem;
  box-shadow: 0 18px 42px rgba(9, 22, 33, 0.28);
  opacity: 0;
  pointer-events: none;
  z-index: 4000;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.taitype-achievement-toast i {
  font-size: 1.3rem;
  color: #e2bb6e;
}

.taitype-achievement-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------------
   Ghost race marker: a thin vertical line showing where your own best-ever
   run on this exercise was at the same elapsed time (see renderGhostMarker
   in taiPie.js). Deliberately faint/plain -- an indicator, not a character.
--------------------------------------------------------------------- */
.taitype-ghost-marker {
  position: absolute;
  width: 2px;
  border-radius: 999px;
  background: rgba(0, 150, 136, 0.45);
  z-index: 2;
  pointer-events: none;
  transition: left 0.25s linear, top 0.25s linear;
}

.taitype-ghost-marker[hidden] {
  display: none;
}

body.dark .taitype-ghost-marker {
  background: rgba(39, 193, 180, 0.55);
}