/* Learn page (/learn): rules and plays as chapters of cards, each with a looping SVG animation (lib/explain.js). */
.lmain { max-width: 1440px; margin: 0 auto; padding: 16px 24px 48px; display: grid; gap: 28px; }
.lintro { font-size: 1.02rem; color: var(--ink-2); }

/* Chapter chips: sticky, scroll sideways on phones. */
.ltoc { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ltoc-in { max-width: 1440px; margin: 0 auto; padding: 8px 24px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ltoc-in::-webkit-scrollbar { display: none; }
.ltoc a { flex: none; padding: 5px 13px; border: 1px solid var(--line); border-radius: 99px; background: var(--paper); color: var(--ink-2); font-weight: 600; font-size: .86rem; text-decoration: none; white-space: nowrap; }
.ltoc a:hover { border-color: var(--ink-2); color: var(--ink); }
.ltoc a.new { border-color: var(--gold); }

/* Chapters */
.lchap { scroll-margin-top: 56px; display: grid; gap: 12px; }
.lchap-h { display: flex; gap: 12px; align-items: baseline; }
.lchap-n { font: 800 1.6rem/1 var(--display); color: var(--brand); min-width: 1.6em; }
.lchap-h h2 { font-family: var(--display); font-stretch: 92%; font-size: 1.35rem; font-weight: 800; margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lchap-h h2 .np { font-size: .9rem; font-weight: 500; color: var(--muted); font-family: var(--deva); font-stretch: 100%; }
.lchap-h p { margin: 2px 0 0; font-size: .92rem; }
.lchap--new .lchap-n { color: var(--gold); }
.pill--new { color: #0e1a33; background: var(--gold); border-color: var(--gold); }

.lgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); align-items: start; }
@media (min-width: 820px) { .lcard--wide { grid-column: span 2; } }
.lcard { display: grid; gap: 10px; padding: 14px 16px 16px; }
.lcard h3 { font-family: var(--display); font-stretch: 92%; font-size: 1.05rem; font-weight: 700; margin: 0; }
.lpts { margin: 0; padding-left: 18px; font-size: .9rem; color: var(--ink-2); }
.lpts li + li { margin-top: 3px; }

.ltiles { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.ltiles div { background: var(--paper-2); border-radius: var(--r-sm); padding: 9px 11px; display: grid; gap: 2px; }
.ltiles b { font-family: var(--display); font-size: .95rem; }
.ltiles span { font-size: .84rem; color: var(--ink-2); line-height: 1.35; }
.lmain > .note { font-size: .82rem; }

@media (max-width: 600px) {
  .lmain { padding: 12px 10px 40px; gap: 22px; }
  .ltoc-in { padding: 8px 10px; }
  .lchap-h { padding: 0 4px; }
  .lchap-n { font-size: 1.3rem; }
  .lchap-h h2 { font-size: 1.2rem; }
  .lcard { padding: 12px 12px 14px; }
  .lcard .ex { margin: 0 -12px; border-radius: 0; border-left: 0; border-right: 0; }
  .ltiles { grid-template-columns: 1fr 1fr; }
}

/* ---------- Explainer figure ---------- */
.ex {
  --grass: #3f8a4f; --grass-2: #4a9759; --pitch: #dcc796; --chalk: #fff; --wood: #f1deb0; --wood-ink: #7a5b2e; --trail: #1f4fbf; --red: #c8102e;
  --sky: #e6eef8; --skin: #b9825a; --kit: #1f4fbf; --kit-d: #0e1a33; --kit2: #c8102e; --kit2-d: #7d0a1d; --coat: #f4efe2; --trou: #1d1f24;
  margin: 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--paper);
}
/* Dark theme (data-theme set by theme-init.js from the toggle or the system setting) */
:root[data-theme="dark"] .ex { --grass: #1f4b2c; --grass-2: #245533; --pitch: #7c6d4a; --chalk: #e8eef8; --trail: #9cc0ff; --red: #f2556a; --sky: #16213a; --kit: #3a6fe0; --trou: #0b0c0f; }
.ex-stage { aspect-ratio: 2 / 1; background: var(--paper-2); }
.ex--sq .ex-stage { aspect-ratio: 1; max-width: 400px; margin: 0 auto; width: 100%; background: none; }
.ex svg { display: block; width: 100%; height: 100%; }
.ex-cap { padding: 10px 12px 2px; min-height: 2.9em; font-size: .95rem; line-height: 1.4; }

/* Player bar: progress segments (walk-through) or chips (tabs), plus play/pause. */
.ex-bar { display: flex; gap: 8px; align-items: center; padding: 6px 10px 10px; }
.ex-steps { flex: 1; min-width: 0; display: flex; gap: 4px; }
.ex-steps button { flex: 1; border: 0; background: none; padding: 9px 0; cursor: pointer; }
.ex-steps i { display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.ex-steps i::after { content: ""; display: block; height: 100%; background: var(--brand-2); transform: scaleX(0); transform-origin: 0 50%; }
.ex-steps .done i::after, .ex-steps .on i::after { transform: none; }
.ex-steps .run i::after { animation: exfill var(--d, 3s) linear both; }
@keyframes exfill { from { transform: scaleX(0); } }

.ex-steps--tabs { overflow-x: auto; scrollbar-width: none; gap: 6px; }
.ex-steps--tabs::-webkit-scrollbar { display: none; }
.ex-steps--tabs button { flex: none; position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); border-radius: 99px; padding: 5px 13px; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.ex-steps--tabs button:hover { border-color: var(--ink-2); color: var(--ink); }
.ex-steps--tabs button.on { background: var(--brand-2); border-color: var(--brand-2); color: #fff; }
.ex-steps--tabs i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 0; background: none; }
.ex-steps--tabs i::after { background: rgba(255, 255, 255, .7); }
.ex-steps--tabs .on:not(.run) i::after { transform: scaleX(0); }

.ex-pp { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: .8rem; cursor: pointer; display: grid; place-items: center; }
.ex-pp:hover { border-color: var(--ink-2); }

.v { display: inline-block; font: 800 .78rem/1.5 var(--display); letter-spacing: .03em; padding: 0 7px; border-radius: var(--r-xs); color: #fff; vertical-align: 1px; }
.v--out { background: var(--brand); }
.v--in { background: var(--win); }
.v--call { background: var(--gold); color: #0e1a33; }

/* Motion: show/hide by step, glide anything a step moves. */
.ex [data-s], .ex [data-k] { transition: opacity .5s ease, transform .85s cubic-bezier(.45, .05, .25, 1), fill .3s; transform-box: fill-box; transform-origin: center; }
.ex [data-k="ball"] { transition: opacity .5s; }
.ex .off { opacity: 0; }
.ex .o-l { transform-origin: 0 50%; }
.ex .o-t { transform-origin: 50% 0; }
.ex [data-k].o-0 { transform-box: view-box; transform-origin: 0 0; }
.ex--init *, .ex--init [data-s] { transition: none !important; }
.ex.idle *, .ex .off * { animation-play-state: paused !important; }

.ex .a-four { animation: exfour 1.1s ease-in-out infinite; }
@keyframes exfour { 0%, 100% { transform: rotate(-100deg); } 50% { transform: rotate(45deg); } }
.ex .a-free { animation: exfree 1.1s linear infinite; }
@keyframes exfree { 0%, 100% { transform: rotate(-162deg) scaleY(1); } 25% { transform: rotate(-180deg) scaleY(.8); } 50% { transform: rotate(-198deg) scaleY(1); } 75% { transform: rotate(-180deg) scaleY(1.06); } }
.ex .a-deadl { animation: exdeadl .9s ease-in-out infinite; }
.ex .a-deadr { animation: exdeadr .9s ease-in-out infinite; }
@keyframes exdeadl { 0%, 100% { transform: rotate(15deg); } 50% { transform: rotate(-32deg); } }
@keyframes exdeadr { 0%, 100% { transform: rotate(-15deg); } 50% { transform: rotate(32deg); } }
.ex .rain .g-drop { animation: exrain .7s linear infinite; }
@keyframes exrain { to { stroke-dashoffset: -10; } }

@media (prefers-reduced-motion: reduce) { .ex *, .ex [data-s] { transition: none !important; animation: none !important; } }

/* People */
.p-shadow { fill: rgba(0, 0, 0, .18); }
.p-skin { fill: var(--skin); }
.p-coat { fill: var(--coat); stroke: #c9c0aa; stroke-width: .8; }
.p-shirt { fill: #fff; }
.p-btn { stroke: #b5ab93; stroke-width: 1.2; stroke-dasharray: 1.5 6; }
.p-trou { fill: var(--trou); }
.p-shoe { fill: #222; }
.p-shade { fill: #111; }
.p-hat { fill: #fff; stroke: #d7d2c4; stroke-width: .6; }
.p-hat2 { fill: #f4efe2; }
.p-band { fill: #111; }
.p-kit { fill: var(--kit); }
.p-kitl { stroke: var(--kit-d); stroke-width: 2; }
.p-kit2 { fill: var(--kit2); }
.p-pad { fill: #fff; stroke: #c9ced8; stroke-width: .8; }
.p-padl { stroke: #c9ced8; stroke-width: .8; }
.p-helm { fill: var(--kit-d); }
.p-helm2 { fill: var(--kit2); }
.p-grille { fill: none; stroke: #9aa3b5; stroke-width: 1.2; }
.p-glove { fill: #fff; stroke: #9aa3b5; stroke-width: .8; }
.p-cap { fill: var(--kit2); }
.p-thigh, .p-thigh2, .p-padS, .p-torso, .p-arm, .p-torso2, .p-arm2, .p-shin { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.p-thigh { stroke: var(--kit-d); stroke-width: 7.5; }
.p-thigh2 { stroke: var(--kit2-d); stroke-width: 7; }
.p-padS { stroke: #f6f6f6; stroke-width: 8.5; }
.p-padK { stroke: #c3c9d4; stroke-width: 1; }
.p-shin { stroke: var(--kit2-d); stroke-width: 12; }
.p-sock { fill: none; stroke: #f6f6f6; stroke-width: 20; }
.p-sole { fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; }
.p-shoe2 { fill: #fff; stroke: #9aa3b5; stroke-width: .8; }
.p-kitd { fill: var(--kit-d); }
.p-hndl { fill: #333; }
.p-mouth { fill: none; stroke: #6b3d24; stroke-width: 1.2; stroke-linecap: round; }
.p-hand { stroke: #5a3420; stroke-width: .7; stroke-linejoin: round; }
.p-see { opacity: .55; }
/* Hands and the raised knee are swapped in by hl. */
.ex .p-fing, .ex .p-palm, .ex .p-leg2 { opacity: 0; }
.ex .p-fing.hl, .ex .p-palm.hl, .ex .p-lr.hl .p-leg2 { opacity: 1; }
.ex .p-lr.hl .p-leg1 { opacity: 0; }
.ex .p-leg1, .ex .p-leg2 { transition: opacity .4s; }
.p-torso { stroke: var(--kit); stroke-width: 13; }
.p-arm { stroke: var(--kit); stroke-width: 5.5; }
.p-torso2 { stroke: var(--kit2); stroke-width: 12; }
.p-arm2 { stroke: var(--kit2); stroke-width: 5; }
.p-blade { stroke: #e3c48a; stroke-width: 6; stroke-linecap: round; }
.p-handle { stroke: #333; stroke-width: 3; stroke-linecap: round; }

/* SVG paint */
.g-sky { fill: var(--sky); }
.g-grass { fill: var(--grass); }
.g-mow { fill: var(--grass-2); }
.g-mow2 { fill: var(--grass-2); }
.g-pitch { fill: var(--pitch); }
.g-crease { fill: none; stroke: var(--chalk); stroke-width: 2; }
.g-crease-s { fill: var(--chalk); }
.g-stumps circle, .g-stump, .g-bail { fill: var(--wood); stroke: var(--wood-ink); stroke-width: .8; }
.g-pad { fill: #fff; stroke: #0e1a33; stroke-width: .8; }
.g-ball { fill: var(--red); stroke: #fff; stroke-width: 1; }
.g-ball--big { stroke-width: 1.5; }
.g-ctr { fill: #fff; }
.trail { fill: none; stroke: var(--trail); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.g-proj { fill: none; stroke: var(--trail); stroke-width: 2.5; stroke-dasharray: 5 4; }
.g-proj.trail { stroke-dasharray: 1; }
.g-mark { fill: none; stroke: #fff; stroke-width: 1.5; }
.g-mark--bad { stroke: var(--red); stroke-width: 2.5; }
.g-hit { fill: none; stroke: var(--red); stroke-width: 2.5; }
.g-band { fill: rgba(255, 255, 255, .38); }
.g-no { fill: rgba(200, 16, 46, .38); }
.g-guide { fill: none; stroke: var(--chalk); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .85; }
.g-bat { fill: #e3c48a; stroke: var(--wood-ink); stroke-width: .8; }
.g-shoe { fill: #fff; stroke: #0e1a33; stroke-width: 1; }
.g-shoe.hl, .hl .g-shoe { fill: var(--red); }
.g-stripe { fill: none; stroke: var(--kit); stroke-width: 3.5; stroke-linecap: round; }
.g-tongue { fill: #eef1f6; stroke: #9aa3b5; stroke-width: 1; }
.g-print { fill: rgba(0, 0, 0, .22); }
.g-glove { fill: var(--gold); stroke: var(--wood-ink); stroke-width: .8; }
.g-z { fill: rgba(255, 255, 255, .3); }
.g-z.hl { fill: var(--gold); }
.g-zone { fill: color-mix(in srgb, var(--gold) 16%, transparent); stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 3; }

/* Field */
.g-rope { fill: none; stroke: var(--chalk); stroke-width: 2; }
.g-ring { fill: none; stroke: var(--chalk); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: .85; }
.g-fld { fill: var(--kit2); stroke: #fff; stroke-width: 1.2; }
.g-fld.hl { fill: var(--gold); stroke: #0e1a33; }
.g-fld--k, .g-keep { fill: #0e1a33; stroke: #fff; stroke-width: 1; }
.g-batter { fill: var(--kit); }

/* DRS: TV screen, T sign, timer */
.g-tv { fill: #0d1526; stroke: #2a3550; stroke-width: 3; }
.g-tvs { fill: #2a3550; }
.g-tvh { fill: var(--gold); font: 800 10px var(--display); letter-spacing: .12em; }
.g-tvt { fill: #e8eef8; font: 600 11px var(--body); }
.g-tvok { fill: #4fd17a; font-weight: 700; font-size: 12px; }
.g-tvb { fill: #e8eef8; }
.g-tee { fill: #0e1a33; }
.g-tee-bg { fill: var(--gold); }
.g-ring-t { stroke: var(--gold); stroke-width: 5; }
.g-tile { fill: #17213a; stroke: #2a3550; stroke-width: 1.5; }
.g-tile-v { fill: #ff5a6e; font: 800 13px var(--display); }
.g-tvd { stroke: var(--brand-2); stroke-width: 3; }
.g-tvdim { fill: #9aa3b5; }
.g-tvbat { fill: #e3c48a; stroke: #7a5b2e; stroke-width: 1; }
.g-gap { fill: none; stroke: #4fd17a; stroke-width: 1.5; }
.g-room { fill: #dfe6f1; }
.g-chalkb { fill: var(--chalk); }
.g-lace { fill: none; stroke: #9aa3b5; stroke-width: 1.2; }
.g-hkb { fill: rgba(10, 18, 36, .82); }
.g-hkt { fill: #e8eef8; font: 700 9.5px var(--body); letter-spacing: .04em; }
.g-hkv { fill: #ff5a6e; font: 800 10.5px var(--display); letter-spacing: .03em; }
.g-hkv--ok { fill: #4fd17a; }
/* Dark theme (data-theme set by theme-init.js from the toggle or the system setting) */
:root[data-theme="dark"] .g-room { fill: #0f1830; }

/* DLS bars and rain */
.g-track { fill: var(--paper); stroke: var(--line); }
.g-res { fill: var(--s2); }
.g-res--b { fill: var(--s1); }
.g-bar-t { fill: #fff; font: 700 12px var(--body); }
.g-cloud { fill: #9aa6ba; }
.g-drop { fill: none; stroke: #5b8fe0; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 6; }

/* SVG text */
.g-t { fill: #fff; font: 600 11px var(--body); paint-order: stroke; stroke: rgba(0, 0, 0, .45); stroke-width: 2.5px; stroke-linejoin: round; }
.g-t--s { font-size: 9.5px; letter-spacing: .02em; }
.g-t--xs { font-size: 8.5px; }
.g-k { fill: var(--ink); font: 600 12px var(--body); }
.g-big { fill: var(--ink); font: 800 26px var(--display); }
.g-sig { fill: var(--brand-2); }
.g-ok { fill: var(--win); }
.g-bad { fill: var(--brand); }
.g-gold { fill: var(--gold); paint-order: stroke; stroke: rgba(0, 0, 0, .35); stroke-width: 3px; }