/* ============================================================
   lesson.css — shared "match-day tactical board" theme for the
   volleyball substitution lessons + glossary. Mirrors rotation.html.
   Class names match the lessons' existing markup (do not rename).
   ============================================================ */
:root{
  --bg:#070b11; --ink:#eaf2f1; --muted:#7e94a0; --stroke:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.08); --card:#0d1620;
  --orange:#ff5a1f; --gold:#ffc23d;
  /* mapped tokens the lesson markup references */
  --accent:#ff5a1f; --accent-soft:rgba(255,90,31,.15);
  --good:#2fd6a6; --good-soft:rgba(47,214,166,.16);
  --bad:#ff6b6b;  --bad-soft:rgba(255,107,107,.16);
  --lib:#4db5ff;  --lib-soft:rgba(77,181,255,.16);
  --reg:#ff9d2f;
  --ds:#38c6e0;   --ds-soft:rgba(56,198,224,.16);
  --warn:#ffc23d; --warn-soft:rgba(255,194,61,.12);
  --a:#ff5a1f; --b:#ffc23d;
  --font-display:'Anton','Oswald','Arial Narrow Bold',system-ui,sans-serif;
  --font-ui:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-cond:'Barlow Semi Condensed','Barlow',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--ink); font-family:var(--font-ui); font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  background:radial-gradient(130% 90% at 50% -10%, #11363f 0%, #0a1721 42%, var(--bg) 100%) fixed;
}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.045;mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.wrap{max-width:760px; margin:0 auto; padding:24px 20px 110px; position:relative}

/* ---- top back-link + lesson nav (added chrome) ---- */
.backlink{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;
  color:var(--muted);border:1px solid var(--stroke);border-radius:9px;padding:8px 12px;margin-bottom:22px;
  transition:color .2s,border-color .2s}
.backlink:hover{color:var(--orange);border-color:var(--orange)}
.lnav{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px;padding-top:20px;border-top:1px solid var(--stroke)}
.lnav a{flex:1 1 auto;text-decoration:none;background:#13202d;border:1px solid var(--stroke);border-radius:11px;
  padding:11px 14px;color:var(--ink);font-family:var(--font-cond);font-weight:600;transition:border-color .2s,transform .08s}
.lnav a:hover{border-color:var(--orange)} .lnav a:active{transform:scale(.99)}
.lnav a .lk{display:block;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lnav a.glos{flex:0 0 auto;color:var(--gold);border-color:rgba(255,194,61,.4)}

/* ---- headings ---- */
.kicker{font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.28em;
  font-size:.72rem;color:var(--orange)}
h1{font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:.5px;
  font-size:clamp(2rem,8vw,2.9rem);line-height:.95;margin:8px 0 6px;color:#fff}
.mission{color:#cddde0;font-size:15px;border-left:4px solid var(--orange);padding:4px 0 4px 14px;margin:16px 0 36px}
h2{font-family:var(--font-ui);font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  font-size:1.2rem;margin:40px 0 12px}
p{margin:12px 0;color:#d6e2ee} strong{color:#fff}
.sub{color:var(--muted);font-size:15px}

/* accent words */
.pa,.a{color:var(--orange);font-weight:700} .pb,.b{color:var(--gold);font-weight:700}
.lib,.libc{color:var(--lib);font-weight:700} .reg{color:var(--reg);font-weight:700}
.ds,.dsc{color:var(--ds);font-weight:700}

/* ---- cards / notes ---- */
.card{background:linear-gradient(180deg,rgba(20,33,46,.72),rgba(10,18,26,.72));
  border:1px solid var(--stroke);border-radius:16px;padding:22px;margin:18px 0;
  box-shadow:0 24px 50px -30px rgba(0,0,0,.8)}
.note{background:rgba(255,194,61,.1);border-left:3px solid var(--gold);border-radius:10px;
  padding:12px 16px;font-size:14.5px;color:#e6eef0}
.warn{background:var(--warn-soft);border:1px solid rgba(255,194,61,.3);border-radius:10px;
  padding:12px 16px;font-size:14.5px;color:#ffd98a}

/* ---- locked-pair diagram (0001) ---- */
.pair{display:flex;align-items:center;justify-content:center;gap:14px;margin:20px 0 6px;flex-wrap:wrap}
.token{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px;
  background:radial-gradient(120% 120% at 50% 22%,#16242f,#0a131b);border:2.5px solid #5a7390;
  box-shadow:0 9px 20px -7px rgba(0,0,0,.75)}
.token.a{border-color:var(--orange);box-shadow:0 9px 20px -7px rgba(0,0,0,.75),0 0 16px -3px rgba(255,90,31,.55)}
.token.b{border-color:var(--gold);box-shadow:0 9px 20px -7px rgba(0,0,0,.75),0 0 16px -3px rgba(255,194,61,.55)}
.token small{font-weight:600;font-size:10px;opacity:.8;display:block;margin-top:-2px}
.link{font-family:var(--font-cond);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:12px;color:var(--muted);text-align:center}
.swap{font-size:26px;color:var(--muted)}
.rules{list-style:none;padding:0;margin:8px 0 0}
.rules li{padding:12px 0 12px 38px;position:relative;border-top:1px solid var(--stroke)}
.rules li:first-child{border-top:0}
.rules li::before{content:"→";position:absolute;left:8px;top:11px;color:var(--orange);font-weight:800}

/* ---- court strip (0002) ---- */
.court{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 6px;max-width:320px}
.zone{aspect-ratio:1;border:1.5px solid var(--stroke);border-radius:10px;display:grid;place-items:center;
  font-size:12px;color:var(--muted);position:relative;background:rgba(255,255,255,.03)}
.zone b{position:absolute;top:5px;left:7px;font-size:10px;color:#6f8aa3}
.zone.libhere{border-color:var(--lib);background:var(--lib-soft);color:#bfe6ff;font-weight:700}
.zone.front{background:rgba(255,255,255,.06)}
.court-label{font-family:var(--font-cond);font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}

/* ---- rotation flow (0003) ---- */
.flow{display:flex;align-items:stretch;gap:8px;margin:16px 0 4px;flex-wrap:wrap}
.step{flex:1 1 0;min-width:120px;border:1.5px solid var(--stroke);border-radius:10px;padding:12px;font-size:13px;
  background:rgba(255,255,255,.03);color:#d6e2ee}
.step .n{font-family:var(--font-cond);font-size:11px;font-weight:700;color:var(--ds);letter-spacing:.05em;text-transform:uppercase}
.step.in{border-color:var(--ds);background:var(--ds-soft)}
.step b{color:#fff}

/* ---- tables (0002/0003) ---- */
table{width:100%;border-collapse:collapse;margin:6px 0;font-size:14.5px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--stroke);vertical-align:top;color:#d6e2ee}
th{font-family:var(--font-cond);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
td.pair{color:var(--orange);font-weight:600} td.libc{color:var(--lib);font-weight:600} td.dsc{color:var(--ds);font-weight:600}

/* ---- quiz engine (shared by all lessons) ---- */
.q{margin:14px 0 0}
.scenario{font-size:15px;color:#e6eef0}
.opts{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 0}
.opt{flex:1 1 calc(50% - 5px);min-width:160px;text-align:left;cursor:pointer;padding:12px 14px;
  border:1.5px solid var(--stroke);border-radius:10px;background:#13202d;color:var(--ink);
  font:inherit;font-size:14.5px;transition:.14s}
.opt:hover{border-color:var(--orange);background:#172534}
.opt:disabled{cursor:default}
.opt.correct{border-color:var(--good);background:var(--good-soft);color:#9af0d4}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft);color:#ffc2c2}
.fb{margin-top:14px;font-size:14.5px;padding:12px 16px;border-radius:10px;display:none}
.fb.show{display:block} .fb.ok{background:var(--good-soft);color:#9af0d4} .fb.no{background:var(--bad-soft);color:#ffc2c2}
.progress{font-family:var(--font-cond);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  font-size:13px;color:var(--muted);margin-top:0}
.scorebox{display:none;margin-top:18px;padding:16px 18px;border-radius:12px;background:rgba(255,90,31,.12);
  border:1px solid rgba(255,90,31,.25);font-size:15px;color:#e6eef0}
.scorebox.show{display:block}

/* ---- matcher (0001) ---- */
.match-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--stroke)}
.match-row:first-child{border-top:0}
.match-row .sit{flex:1 1 auto;font-size:14.5px;color:#d6e2ee}
.match-row select{flex:0 0 auto;font:inherit;font-size:13.5px;padding:8px 10px;border:1.5px solid var(--stroke);
  border-radius:9px;background:#0a131c;color:var(--ink);max-width:230px}
.match-row.right select{border-color:var(--good);background:var(--good-soft)}
.match-row.wrong select{border-color:var(--bad);background:var(--bad-soft)}

/* ---- buttons ---- */
.btn{cursor:pointer;padding:11px 18px;border:none;border-radius:11px;
  background:linear-gradient(180deg,#ff7a3f,#ec4a14);color:#1a0a04;
  font-family:var(--font-ui);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:14px;margin-top:14px;
  box-shadow:0 10px 20px -10px rgba(255,90,31,.8)}
.btn.ghost{background:transparent;color:var(--orange);border:1.5px solid var(--orange);box-shadow:none}
#matchFb{margin-top:12px;font-size:14.5px;display:none;color:#d6e2ee} #matchFb.show{display:block}

/* ---- citations / ask / footer ---- */
cite{display:block;font-size:12.5px;color:var(--muted);margin-top:6px;font-style:normal}
cite a,a{color:var(--orange)} cite a:hover,a:hover{color:#ff8a5c}
.ask{margin-top:48px;padding:18px 20px;border:1.5px dashed rgba(255,90,31,.5);border-radius:12px;
  background:rgba(255,90,31,.06);font-size:14.5px;color:#e6eef0}
footer{margin-top:30px;font-size:13px;color:var(--muted)}

/* ---- glossary ---- */
header{border-bottom:2px solid var(--orange);padding-bottom:18px;margin-bottom:8px}
dl{margin:0}
.term{padding:20px 0;border-bottom:1px solid var(--stroke)}
dt{font-family:var(--font-ui);font-weight:800;font-size:18px;color:#fff;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tag{font-family:var(--font-cond);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 9px;border-radius:99px;background:var(--accent-soft);color:#ff8a5c;border:1px solid rgba(255,90,31,.4)}
.tag.rule{background:var(--warn-soft);color:var(--gold);border-color:rgba(255,194,61,.4)}
dd{margin:8px 0 0;color:#d6e2ee}
dd .ex{display:block;margin-top:6px;font-size:14px;color:var(--muted)}
code{background:rgba(255,255,255,.08);padding:1px 6px;border-radius:5px;font-size:.9em;color:#cfe0e6}

@media (max-width:560px){ .wrap{padding:18px 14px 80px} .opt{flex:1 1 100%} }
@media print{ body{background:#fff;color:#000} .opt:hover{background:#fff} }