/* =========================================================================
   TRAIN & LEARN — the lesson system
   Unit cards → animated teach steps → real drills (Tactics generators,
   borrowed as-is, no rating attached) → a completion screen.
   ========================================================================= */

/* ----- The Train & Learn hero: same visual language as the home hero —
   floating gradient shapes, faint grid, gradient headline. Single-column,
   centered, since there's no showcase board to pair it with here. ----- */
.train-hero {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 64px 40px 40px;
  text-align: center;
  overflow: hidden;
}
.train-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg,   transparent 0 47px, rgba(255, 255, 255, .035) 47px 48px),
    repeating-linear-gradient(90deg,  transparent 0 47px, rgba(255, 255, 255, .035) 47px 48px);
  mask-image: radial-gradient(70% 90% at 50% 30%, #000 30%, transparent 100%);
  pointer-events: none;
}
.train-hero-copy { position: relative; }
.train-hero-copy h1 {
  font-size: 2.7rem;
  font-weight: 800;
  color: #FFFFFF;
  line-height: 1.1;
  letter-spacing: -1px;
}
.train-hero-sub { margin-left: auto; margin-right: auto; }
.train-hero .hero-ticks { text-align: center; }

/* ----- Difficulty tabs: All Units / Beginner / Difficult — a segmented
   pill control switching which units the grid below shows. ----- */
.train-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  max-width: 1120px;
  margin: 0 auto 8px;
  padding: 0 40px;
}
.train-tab {
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  transition: background .15s, border-color .15s, color .15s;
}
.train-tab:hover { color: var(--text-main); border-color: var(--text-muted); }
.train-tab.active {
  background: color-mix(in srgb, var(--accent-green) 18%, var(--bg-card));
  border-color: var(--accent-green);
  color: var(--text-main);
}

/* ----- The unit shelf: chess.com-discipline-card treatment — art box,
   hover lift, real shadow — instead of a flat list entry. ----- */
.train-units { max-width: 1120px; margin: 0 auto; padding: 10px 40px 70px; }
.train-units h2 {
  text-align: center;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.4px;
}
.train-note {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 30px;
}

.unit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}

.unit-card {
  position: relative;
  text-align: left;
  cursor: pointer;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1), border-color .2s, box-shadow .2s;
}
.unit-card:not(.locked):hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--unit-color, var(--accent-green)) 65%, var(--line));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45),
              0 0 24px color-mix(in srgb, var(--unit-color, var(--accent-green)) 22%, transparent);
}
.unit-card:not(.locked):active { transform: translateY(-2px); }
.unit-card.locked { cursor: not-allowed; opacity: .55; }

.unit-art {
  width: 92px; height: 92px;
  background: var(--bg-inset);
  border: 1px solid rgba(255, 255, 255, .05);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 0 24px color-mix(in srgb, var(--unit-color, transparent) 34%, transparent);
}
.unit-art svg { width: 64%; height: 64%; overflow: visible; }

.unit-card h3 { font-size: 19px; font-weight: 800; margin-bottom: 8px; }
.unit-card p { font-size: 14px; color: var(--text-muted); line-height: 1.6; }

.unit-card .unit-check,
.unit-card .unit-lock {
  position: absolute; top: 18px; right: 18px;
  font-size: 14px;
}
.unit-card .unit-check {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent-green); color: #16210c;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  font-weight: 900;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-green) 22%, transparent),
              0 3px 10px rgba(0, 0, 0, .4);
}

/* ----- Per-unit living art — each icon is the real puzzle art (same
   SvgKit shapes Tactics renders), animated to echo that unit's own
   lesson, so the card itself teases what you're about to learn. ----- */

/* Unit 1 · Shapes & Sides — the hexagon breathes, echoing the
   corner-counting teach step. */
.unit-art-breathe svg {
  animation: unit-icon-breathe 2.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes unit-icon-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

/* Unit 2 · Rotations — the arrow just keeps turning. */
.unit-art-spin svg {
  animation: unit-icon-spin 5s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes unit-icon-spin { to { transform: rotate(360deg); } }

/* Unit 3 · Color Logic — the three lit quadrants pulse in sequence,
   the OR rule made visible: blue, orange, and the green they combine
   into, each taking their turn to glow. */
.unit-art-quad rect.q-pulse {
  animation: unit-quad-pulse 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.unit-art-quad rect.q-b { animation-delay: 0s; }
.unit-art-quad rect.q-o { animation-delay: .3s; }
.unit-art-quad rect.q-g { animation-delay: .9s; }
@keyframes unit-quad-pulse {
  0%, 100% { opacity: .5;  transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

/* Unit 4 · Color Logic (XOR) — same quadrant pulse as Unit 3, plus the
   crossed-out cancel corner blinking on its own to draw the eye to the
   one new idea this unit adds. */
.unit-art-cancel rect.q-pulse {
  animation: unit-quad-pulse 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.unit-art-cancel rect.q-b { animation-delay: 0s; }
.unit-art-cancel rect.q-o { animation-delay: .3s; }
.unit-art-cancel rect.q-g { animation-delay: .9s; }
.unit-art-cancel .q-cancel-x {
  animation: unit-cancel-blink 1.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes unit-cancel-blink {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}

/* Unit 6 · Size Progression — the shape itself grows and shrinks,
   the rule made literal rather than just implied like Unit 1's breathe. */
.unit-art-grow svg {
  animation: unit-icon-grow 2.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes unit-icon-grow {
  0%, 100% { transform: scale(.7); }
  50%      { transform: scale(1.25); }
}

/* Unit 7 · Boss Round — a sharp red pulse, echoing the BOSS LEVEL
   takeover's own skull-pulse timing so this card reads as "the hard one." */
.unit-art-boss svg {
  animation: unit-icon-boss-pulse 1s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 10px rgba(239, 68, 68, .85));
}
@keyframes unit-icon-boss-pulse {
  from { transform: scale(1) rotate(0deg); }
  to   { transform: scale(1.12) rotate(8deg); }
}

/* ----- The lesson player's top bar: exit, progress, live score ----- */
.lesson-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--line);
}
.lesson-exit-btn {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
}
.lesson-exit-btn:hover { color: var(--text-main); border-color: var(--text-muted); }
.lesson-progress-track {
  flex: 1 1 auto;
  height: 10px;
  border-radius: 6px;
  background: var(--bg-inset);
  overflow: hidden;
}
.lesson-progress-fill {
  height: 100%; width: 0%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--accent-green), var(--accent-green-hover));
  transition: width .35s ease;
}
.lesson-score {
  flex: 0 0 auto;
  font-size: 13px; font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ----- The stage: one teach step or one drill, centered and roomy ----- */
.lesson-stage {
  max-width: 720px;
  margin: 0 auto;
  padding: 44px 24px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  min-height: 60vh;
}
.lesson-headline { font-size: 28px; font-weight: 800; margin: 0; }
.lesson-caption { font-size: 17.5px; line-height: 1.6; color: var(--text-muted); max-width: 52ch; margin: 0; }
.lesson-next-btn { min-width: 210px; margin-top: 4px; }

/* ----- Teach demo 1 (Unit 1): a shape draws itself, then its corners
   count themselves off one by one — the whole point made visible. ----- */
.count-demo { width: 340px; height: 340px; }
.count-demo svg { width: 100%; height: 100%; overflow: visible; }

.count-shape-path {
  fill: none;
  stroke: var(--accent-blue);
  stroke-width: 5;
  stroke-linejoin: round;
  animation: draw-shape 1.5s ease forwards;
}
@keyframes draw-shape { to { stroke-dashoffset: 0; } }

.corner-dot {
  fill: var(--accent-green);
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  animation: dot-pop .35s ease forwards;
}
@keyframes dot-pop { to { opacity: 1; transform: scale(1); } }

.corner-label {
  fill: var(--text-main);
  font-size: 14px;
  font-weight: 800;
  opacity: 0;
  animation: label-fade .3s ease forwards;
}
@keyframes label-fade { to { opacity: 1; } }

.count-final-label {
  font-size: 38px; font-weight: 900;
  color: var(--accent-green);
  opacity: 0;
  margin: 0;
  animation: final-pop .5s ease forwards;
}
@keyframes final-pop {
  0%   { opacity: 0; transform: scale(.4); }
  65%  { opacity: 1; transform: scale(1.16); }
  100% { opacity: 1; transform: scale(1); }
}

/* ----- Teach demo 2 (Unit 1): the actual Vertex Progression rule,
   shown as a shelf of shapes climbing one side at a time. ----- */
.climb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.climb-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: 0; transform: translateY(14px);
  animation: climb-in .45s ease forwards;
}
@keyframes climb-in { to { opacity: 1; transform: translateY(0); } }
.climb-tile .tile-shape {
  width: 104px; height: 104px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
}
.climb-tile .tile-shape svg { width: 76%; height: 76%; }
.climb-tile .tile-num { font-size: 18px; font-weight: 800; color: var(--accent-green); }
.climb-chevron { color: var(--text-muted); font-size: 28px; opacity: 0; animation: climb-in .35s ease forwards; }

/* ----- Teach demo 1 (Unit 2): one arrow, ticking through its turns
   around a compass ring, holding at each stop before it snaps on. ----- */
.spin-demo {
  position: relative;
  width: 320px; height: 320px;
  display: flex; align-items: center; justify-content: center;
}
.compass-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed var(--line); }
.compass-tick { position: absolute; font-size: 17px; font-weight: 700; color: var(--text-muted); }
.spin-arrow { width: 140px; height: 140px; animation: spin-steps 4.8s steps(1) infinite; }
@keyframes spin-steps {
  0%, 20%  { transform: rotate(0deg); }
  25%, 45% { transform: rotate(90deg); }
  50%, 70% { transform: rotate(180deg); }
  75%, 95% { transform: rotate(270deg); }
  100%     { transform: rotate(360deg); }
}

/* ----- Teach demo 2 (Unit 2): the row rule itself, three arrows
   snapping into place left to right, each one turn further. ----- */
.row-demo { display: flex; align-items: center; gap: 22px; }
.row-tile {
  width: 130px; height: 130px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.5);
  animation: row-pop .4s cubic-bezier(.3, 1.4, .5, 1) forwards;
}
@keyframes row-pop { to { opacity: 1; transform: scale(1); } }
.row-tile svg { width: 72%; height: 72%; }
.row-chevron { color: var(--text-muted); font-size: 30px; opacity: 0; animation: climb-in .3s ease forwards; }

/* ----- Teach demos (Unit 3): blue + orange tiles popping in, then the
   green result — same quadrant art the drill itself uses. The XOR
   variant adds a red ring flash on the result, the one visual cue
   that a corner just cancelled instead of surviving. ----- */
.overlay-demo { display: flex; align-items: center; justify-content: center; gap: 24px; margin: 10px 0; }
.overlay-tile {
  width: 130px; height: 130px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.6);
  animation: overlay-pop .45s cubic-bezier(.3, 1.4, .5, 1) forwards;
}
.overlay-tile svg { width: 74%; height: 74%; }
@keyframes overlay-pop {
  0%   { opacity: 0; transform: scale(.6); }
  60%  { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
.overlay-op {
  font-size: 44px; font-weight: 800; color: var(--text-muted);
  opacity: 0; animation: climb-in .35s ease forwards;
}
.overlay-result { position: relative; }
.overlay-xor .overlay-result::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 20px;
  border: 3px solid #EF4444;
  opacity: 0;
  animation: overlay-cancel-ring 1.3s ease-in-out 1.4s;
}
@keyframes overlay-cancel-ring {
  0%, 100% { opacity: 0; }
  25%, 55% { opacity: 1; }
}

/* ----- Teach demo (Unit 3, step 2): the real grid shape — three
   independent columns, each stacking blue/orange/green top to bottom,
   fading in one column at a time. ----- */
.overlay-columns { display: flex; gap: 22px; justify-content: center; }
.overlay-col {
  display: flex; flex-direction: column; gap: 8px;
  opacity: 0; animation: climb-in .4s ease forwards;
}
.overlay-col-tile {
  width: 72px; height: 72px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.overlay-col-tile svg { width: 74%; height: 74%; }
.overlay-col-result { border-color: color-mix(in srgb, var(--accent-emerald) 40%, var(--line)); }

/* ----- Teach demo (Unit 4 step 2 / Unit 5 step 1): OR vs. XOR results
   side by side, so the one differing corner is directly comparable. ----- */
.contrast-demo { display: flex; align-items: center; justify-content: center; gap: 26px; }
.contrast-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.contrast-label {
  font-size: 15px; font-weight: 800; letter-spacing: .04em;
  color: var(--accent-emerald);
}
.contrast-label-xor { color: var(--accent-orange); }
.contrast-vs { font-size: 15px; font-weight: 700; color: var(--text-muted); }

/* ----- Teach demo (Unit 6 step 2): the real 3×3 grid, size marching
   right and down at once. ----- */
.size-grid-demo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 340px;
  margin: 0 auto;
}

/* ----- Teach demo (Unit 7, Boss Round): a recap montage of every
   category learned, each tile popping in with the Boss's own red
   border/glow so the "final round" framing reads immediately. ----- */
.boss-recap-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.boss-recap-tile {
  width: 84px; height: 84px;
  background: var(--bg-card);
  border: 2px solid #EF4444;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.6);
  animation: overlay-pop .45s cubic-bezier(.3, 1.4, .5, 1) forwards;
  box-shadow: 0 0 16px rgba(239, 68, 68, .4);
}
.boss-recap-tile svg { width: 70%; height: 70%; }

/* ----- Drill stage: literally the Tactics grid + options, borrowed
   whole — same generators, same feel, just no Elo on the line. ----- */
.lesson-drill-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.drill-eyebrow {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .7px;
  font-weight: 800; color: var(--text-muted);
}
/* Wraps the grid + options so the praise word (GOOD!/GREAT!/...) has
   somewhere to anchor — same celebration system Tactics and Bots use. */
.lesson-drill-board {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 22px;
}

/* ----- Completion screen — themed per unit (--unit-color), with its
   own gold treatment for a perfect run so acing one always feels like
   a distinct, bigger moment than just "another finished unit." ----- */
#lesson-complete { display: flex; align-items: center; justify-content: center; min-height: 70vh; position: relative; }
.lesson-complete-card {
  position: relative;
  text-align: center; max-width: 420px; padding: 40px 36px 34px;
  background: linear-gradient(180deg, var(--bg-card), var(--bg-inset));
  border: 1px solid color-mix(in srgb, var(--unit-color, var(--line)) 45%, var(--line));
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .4),
              0 0 50px color-mix(in srgb, var(--unit-color, transparent) 20%, transparent);
  animation: lesson-complete-in .5s cubic-bezier(.25, 1, .4, 1);
}
@keyframes lesson-complete-in {
  0%   { opacity: 0; transform: translateY(18px) scale(.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.lesson-trophy-ring {
  width: 118px; height: 118px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, color-mix(in srgb, var(--unit-color, var(--accent-green)) 30%, transparent), transparent 72%);
}
.lesson-trophy { font-size: 72px; animation: final-pop .6s ease; }
.lesson-complete-card h2 { font-size: 26px; margin-bottom: 10px; }
.lesson-complete-score {
  display: inline-block;
  font-size: 14.5px; font-weight: 700;
  color: var(--text-main);
  background: color-mix(in srgb, var(--unit-color, var(--accent-green)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--unit-color, var(--accent-green)) 40%, transparent);
  border-radius: 20px;
  padding: 5px 16px;
  margin-bottom: 16px;
}
.lesson-complete-message {
  font-size: 15px; line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.lesson-complete-card .btn-green { margin-top: 22px; width: 100%; }

/* A perfect run overrides the unit's own color with gold everywhere —
   the one visual signal that means the exact same thing every time. */
.lesson-complete-card.perfect {
  border-color: color-mix(in srgb, var(--gold, #fde047) 55%, var(--line));
  box-shadow: 0 16px 40px rgba(0, 0, 0, .4),
              0 0 60px color-mix(in srgb, var(--gold, #fde047) 30%, transparent);
}
.lesson-complete-card.perfect .lesson-trophy-ring {
  background: radial-gradient(circle, color-mix(in srgb, var(--gold, #fde047) 38%, transparent), transparent 72%);
}
.lesson-complete-card.perfect .lesson-complete-score {
  color: #3a2f06;
  background: var(--gold, #fde047);
  border-color: var(--gold, #fde047);
}

.settings-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-top: 20px;
}

.settings-card h4 { margin-bottom: 8px; }

.danger-btn {
  margin-top: 14px;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #FCA5A5;
  background: rgba(239, 68, 68, .14);
  border: 1px solid rgba(239, 68, 68, .4);
  transition: background .15s;
}

.danger-btn:hover { background: rgba(239, 68, 68, .28); }