/* =========================================================================
   The Luck Index and the Luck Report (rebuilt 27 Oct 2026).

   John: "the main page for a league is bland and static, and the luck
   reports don't exactly pop out to you ... I also want it to have graphs and
   visuals when possible, like the ones you've made for instagram videos."

   The report is a story: full-bleed cards, each in its own colour world
   (paper, ink, red, green, gold), a chart wherever the numbers allow, and
   motion when a card arrives. It plays itself like an Instagram story; tap
   to skip, hold to pause. The charts stay plain and serious (John, 26 Oct:
   "look serious, not cartoony"): flat bars, hairline rules, real labels.
   Reduced motion turns every animation and the autoplay off.

   Loaded by luck.html and luck_league.html only.
   ========================================================================= */

.luck { --lucky: #2d6a1f; }

/* ---- colour worlds ------------------------------------------------------ */
.w-paper { --bg: #fffdf8; --fg: #111111; --mute: #6b6050; --acc: #b3141c; --up: #2d6a1f; --down: #b3141c;
           --rule: rgba(17,17,17,.2); --soft: rgba(17,17,17,.07); --chip: #111111; --chip-fg: #fffdf8; }
.w-ink   { --bg: #131211; --fg: #fffdf8; --mute: rgba(255,253,248,.62); --acc: #ff6b6b; --up: #7cc96a; --down: #ff6b6b;
           --rule: rgba(255,253,248,.22); --soft: rgba(255,253,248,.08); --chip: #fffdf8; --chip-fg: #111111; }
.w-red   { --bg: #9b1117; --fg: #fffdf8; --mute: rgba(255,253,248,.74); --acc: #ffd84d; --up: #c9f2bd; --down: #fffdf8;
           --rule: rgba(255,253,248,.3); --soft: rgba(255,253,248,.14); --chip: #fffdf8; --chip-fg: #9b1117; }
.w-green { --bg: #1e4a16; --fg: #fffdf8; --mute: rgba(255,253,248,.74); --acc: #ffd84d; --up: #fffdf8; --down: #ffb4b4;
           --rule: rgba(255,253,248,.3); --soft: rgba(255,253,248,.14); --chip: #fffdf8; --chip-fg: #1e4a16; }
.w-gold  { --bg: #e2b600; --fg: #111111; --mute: rgba(17,17,17,.68); --acc: #111111; --up: #1e4a16; --down: #9b1117;
           --rule: rgba(17,17,17,.26); --soft: rgba(17,17,17,.1); --chip: #111111; --chip-fg: #e2b600; }

/* paper grain, as on the videos */
.grain::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
    opacity: .16; mix-blend-mode: multiply;
}
.w-ink.grain::after, .lr-stage.grain::after { mix-blend-mode: screen; opacity: .07; }

/* =========================================================================
   The stage: the report, full bleed
   ========================================================================= */
.lr {
    position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-top: -8px;
}
.lr-stage {
    position: relative; overflow: hidden;
    background: #0f0e0d;
    padding: 34px 16px 40px;
    display: flex; justify-content: center; align-items: center;
}
.lr-stage::before {      /* the verdict's colour glowing behind the card */
    content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
    background: radial-gradient(closest-side at 50% 46%, var(--glow, rgba(179,20,28,.55)), transparent 72%);
    filter: blur(10px); opacity: .9;
}
.lr.world-gold  { --glow: rgba(226,182,0,.5); }
.lr.world-green { --glow: rgba(46,120,34,.6); }
.lr.world-paper { --glow: rgba(255,253,248,.22); }
.lr.world-red   { --glow: rgba(179,20,28,.62); }
.lr.world-ink   { --glow: rgba(179,20,28,.42); }

.lr-frame {
    position: relative; z-index: 1;
    width: min(440px, 100%);
    height: min(800px, calc(100vh - 120px));
    min-height: 600px;
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
    background: #131211;
}
.lr-track {
    height: 100%; display: flex; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    outline: none;
}
.lr-track::-webkit-scrollbar { display: none; }

.lr-slide {
    position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
    background: var(--bg); color: var(--fg);
    display: flex; flex-direction: column; justify-content: center;
    padding: 56px 24px 58px; overflow: hidden; text-align: center;
}
.lr-slide > * { position: relative; z-index: 1; }

/* progress: one bar per card, filling while the card plays */
.lr-progress { position: absolute; z-index: 4; top: 12px; left: 12px; right: 12px; display: flex; gap: 4px; pointer-events: none; }
.lr-progress span { flex: 1; height: 3px; border-radius: 2px; overflow: hidden; background: rgba(127,127,127,.35); }
.lr-progress span i { display: block; height: 100%; width: 0; background: #fffdf8; }
.lr-progress span.done i { width: 100%; }
.lr[data-fg="dark"] .lr-progress span i { background: #111; }
.lr.js .lr-progress span.on i { animation: lr-fill var(--dur, 6.5s) linear both; }
.lr.paused .lr-progress span.on i, .lr.held .lr-progress span.on i { animation-play-state: paused; }
.lr.static .lr-progress span.on i { animation: none; width: 100%; }
@keyframes lr-fill { from { width: 0; } to { width: 100%; } }

.lr-pause {
    position: absolute; z-index: 5; top: 22px; right: 12px; width: 30px; height: 30px; border-radius: 50%;
    border: 0; background: transparent; color: #fffdf8; cursor: pointer; display: grid; place-items: center; opacity: .8;
}
.lr[data-fg="dark"] .lr-pause { color: #111; }
.lr-pause svg { width: 14px; height: 14px; fill: currentColor; }
.lr-pause .i-play { display: none; }
.lr.paused .lr-pause .i-play { display: block; }
.lr.paused .lr-pause .i-pause { display: none; }
.lr.static .lr-pause { display: none; }

.lr-nav {
    position: relative; z-index: 2; flex: 0 0 auto; width: 48px; height: 48px; margin: 0 18px; border-radius: 50%;
    border: 1px solid rgba(255,253,248,.3); background: rgba(255,253,248,.06); color: #fffdf8;
    font-size: 20px; cursor: pointer; transition: background .2s, opacity .2s, transform .2s;
}
.lr-nav:hover { background: rgba(255,253,248,.16); transform: scale(1.06); }
.lr.at-start .lr-prev, .lr.at-end .lr-next { opacity: .25; pointer-events: none; }

/* ---- type, shared by every card ---------------------------------------- */
.lr-kicker {
    align-self: center; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 14px;
    letter-spacing: 2.4px; text-transform: uppercase; color: var(--acc);
    padding-bottom: 6px; margin-bottom: 14px; border-bottom: 2px solid currentColor;
}
.lr-eyebrow { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 21px; line-height: 1.2; }
.lr-eyebrow .lr-pos {
    display: inline-block; vertical-align: 3px; margin-left: 6px; padding: 1px 6px 0; border-radius: 3px;
    background: var(--chip); color: var(--chip-fg); font-family: "Barlow Condensed", sans-serif; font-size: 13px; letter-spacing: 1px;
}
.lr-big {
    font-family: "Anton", sans-serif; font-weight: 400; line-height: .95; letter-spacing: -1px;
    font-size: clamp(76px, 24vw, 112px); margin: 6px 0 10px;
}
.lr-big.mid { font-size: clamp(54px, 16vw, 76px); }
.tone-up .lr-big.tint { color: var(--up); }
.tone-down .lr-big.tint { color: var(--down); }
.lr-line { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 20px; line-height: 1.28; max-width: 360px; margin: 0 auto; }
.lr-sub { font-family: Georgia, serif; font-style: italic; font-size: 16.5px; color: var(--mute); margin-top: 10px; }
.lr-sub.loud { font-family: "Anton", sans-serif; font-style: normal; font-size: 26px; letter-spacing: .4px; color: var(--fg); text-transform: uppercase; }
.lr-folio {
    position: absolute; left: 24px; right: 24px; bottom: 14px; display: flex; justify-content: space-between;
    font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 11.5px; letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--mute); border-top: 1px solid var(--rule); padding-top: 7px;
}
.lr-hint { font-family: "Barlow Condensed", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--acc); }
.lr-hint .touch { display: none; }
@media (hover: none) { .lr-hint .touch { display: inline; } .lr-hint .mouse { display: none; } }

/* ---- charts: shared ---------------------------------------------------- */
.lr-fig { width: 100%; margin: 14px 0 12px; }
.lr-fig svg { width: 100%; height: auto; display: block; overflow: visible; }
.lr-fig text { font-family: "Barlow Condensed", sans-serif; font-weight: 600; fill: var(--mute); font-size: 11px; letter-spacing: .6px; }
.lr-fig .t-strong { fill: var(--fg); font-size: 12.5px; font-weight: 700; }
.lr-fig .axis { stroke: var(--rule); stroke-width: 1.2; }
.lr-fig .avg { stroke: var(--fg); stroke-width: 1.4; stroke-dasharray: 5 4; opacity: .8; }
.lr-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 8px;
          font-family: "Barlow Condensed", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--mute); }
.lr-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.lr-key i.k-up { background: var(--up); } .lr-key i.k-down { background: var(--down); }
.lr-key i.k-avg { width: 14px; height: 0; border-top: 2px dashed var(--fg); border-radius: 0; vertical-align: 3px; }
.lr-key i.k-soft { background: var(--soft); outline: 1px solid var(--rule); }

/* =========================================================================
   The cards
   ========================================================================= */

/* 1. cover: a front page, the verdict sealed */
.k-cover { justify-content: space-between; text-align: left; padding-top: 44px; }
.lr-mast { border-top: 3px double var(--rule); border-bottom: 1px solid var(--rule); padding: 8px 0 7px; text-align: center; }
.lr-mast b { display: block; font-family: "Playfair Display", Georgia, serif; font-weight: 900; font-size: 30px; letter-spacing: -.3px; line-height: 1; }
.lr-mast span { display: flex; justify-content: space-between; margin-top: 7px;
                font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--mute); }
.lr-extra { display: inline-block; margin-bottom: 12px; padding: 3px 9px 2px; background: var(--acc); color: #131211;
            font-family: "Anton", sans-serif; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; transform: rotate(-2deg); }
.lr-head { font-family: "Playfair Display", Georgia, serif; font-weight: 900; font-size: clamp(36px, 10.5vw, 50px); line-height: 1.02; letter-spacing: -.6px; }
.lr-deck { font-family: Georgia, serif; font-style: italic; font-size: 17px; color: var(--mute); margin-top: 12px; }
.lr-byline { font-size: 13.5px; line-height: 1.45; color: var(--mute); margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 10px; }
.lr-sealed { position: relative; margin-top: 18px; padding: 14px 14px 12px; border: 1px solid var(--rule); }
.lr-sealed small { display: block; font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--mute); }
.lr-sealed .bars { display: block; margin-top: 8px; }
.lr-sealed .bars i { display: block; height: 15px; margin: 6px 0; background: var(--fg); opacity: .9; }
.lr-sealed .bars i:nth-child(1) { width: 86%; } .lr-sealed .bars i:nth-child(2) { width: 64%; } .lr-sealed .bars i:nth-child(3) { width: 40%; }
.lr-sealed .seal {
    position: absolute; right: 12px; top: 50%; translate: 0 -50%; rotate: -10deg;
    border: 3px solid var(--acc); color: var(--acc); padding: 4px 10px 2px;
    font-family: "Anton", sans-serif; font-size: 22px; letter-spacing: 2px; text-transform: uppercase; background: var(--bg);
}

/* 2. the record: the wins you have against the wins you earned */
.lr-meter { position: relative; margin: 26px 8px 34px; height: 64px; }
.lr-meter .rail { position: absolute; left: 0; right: 0; top: 29px; height: 6px; background: var(--soft); border-radius: 3px; }
.lr-meter .tick { position: absolute; top: 26px; width: 1px; height: 12px; background: var(--rule); }
.lr-meter .tick b { position: absolute; top: 16px; left: 50%; translate: -50% 0; font: 600 11px "Barlow Condensed", sans-serif; color: var(--mute); }
.lr-meter .gap { position: absolute; top: 27px; height: 10px; border-radius: 5px; }
.lr-meter .gap.up { background: var(--up); } .lr-meter .gap.down { background: var(--down); }
.lr-meter .pin { position: absolute; top: 20px; width: 0; }
.lr-meter .pin::before { content: ""; position: absolute; left: -11px; top: -1px; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--bg); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.lr-meter .pin.have::before { background: var(--fg); }
.lr-meter .pin.earned::before { background: var(--bg); border-color: var(--fg); }
.lr-meter .pin span { position: absolute; bottom: 26px; left: 50%; translate: -50% 0; white-space: nowrap;
                      font: 700 13px "Barlow Condensed", sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.lr-meter .pin.earned span { bottom: auto; top: 40px; }
.lr-meter .pin.earned span { color: var(--acc); }
.lr-meter .pin span em { font-style: normal; font-family: "Anton", sans-serif; font-size: 20px; margin-left: 5px; letter-spacing: 0; }

/* 3. week by week */
.k-season .col.W { fill: var(--up); } .k-season .col.L { fill: var(--down); } .k-season .col.T { fill: var(--mute); }
.k-season .col-back { fill: var(--soft); }
.k-season .half { stroke: var(--fg); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .7; }
.k-season .tag { font-family: "Anton", sans-serif; font-weight: 400; font-size: 11px; letter-spacing: 1px; }
.k-season .tag.robbed { fill: var(--down); } .k-season .tag.gift { fill: var(--up); }
.k-season .pct { font-family: "Anton", sans-serif; font-size: 12px; fill: var(--fg); letter-spacing: 0; }

/* 4. the whole league's scores that week */
.lr-board { list-style: none; margin: 14px 0 6px; text-align: left; }
.lr-board li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 46px; align-items: center; gap: 8px; height: 22px; }
.lr-board .pl { font: 600 12px "Barlow Condensed", sans-serif; color: var(--mute); text-align: right; }
.lr-board .bar { position: relative; height: 15px; }
.lr-board .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--soft); }
.lr-board .bar span { position: absolute; left: 7px; top: 0; line-height: 15px; font: 600 11.5px "Barlow", sans-serif; color: var(--fg);
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 10px); opacity: .85; }
.lr-board .pts { font: 400 14px "Anton", sans-serif; text-align: right; color: var(--mute); }
.lr-board li.me .bar i { background: var(--fg); }
.lr-board li.me .bar span { color: var(--bg); opacity: 1; font-weight: 700; }
.lr-board li.me .pts, .lr-board li.opp .pts { color: var(--fg); }
.lr-board .bar i { transition: background .5s, opacity .5s, box-shadow .5s; }
.k-week.b2 li.beaten .bar i { background: var(--up); opacity: .45; }
.k-week.b3 li.opp .bar i { background: var(--acc); opacity: 1; box-shadow: 0 0 0 2px var(--fg); }
.k-week.b3 li.opp .bar span { opacity: 1; font-weight: 700; color: var(--bg); }
.k-week.b3 li.opp .pts { color: var(--fg); }
.lr-board .who { font-family: "Anton", sans-serif; font-weight: 400; font-size: 10px; letter-spacing: 1px; margin-left: 5px; padding: 0 4px; border-radius: 2px; background: var(--acc); color: var(--bg); vertical-align: 1px; }
.lr-board li.me .who { background: var(--bg); color: var(--fg); }

/* 5. the opponent's season */
.k-opponent .bar { fill: var(--soft); }
.k-opponent .bar.vs { fill: var(--acc); }
.k-opponent.tone-down .bar.vs { fill: var(--down); } .k-opponent.tone-up .bar.vs { fill: var(--up); }
.k-opponent .you line { stroke: var(--fg); stroke-width: 3; }
.k-opponent .you text { fill: var(--fg); font-weight: 700; }
.k-opponent .val { fill: var(--fg); font-family: "Anton", sans-serif; font-size: 14px; }

/* 6. the players: a photo, then his weeks for you */
.lr-photo { width: 116px; height: 116px; margin: 0 auto 12px; border-radius: 50%; overflow: hidden;
            background: var(--soft); border: 3px solid var(--fg); box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.lr-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.k-player.tone-down .lr-photo img { filter: grayscale(1) contrast(1.05); }
.k-player .lr-big { margin: 2px 0 2px; font-size: clamp(64px, 19vw, 92px); }
.k-player .bar { fill: var(--soft); }
.k-player .bar.hit { transition: fill .5s; }
.k-player.b3 .bar.hit, .lr.static .k-player .bar.hit { fill: var(--fg); }
.k-player .val { fill: var(--fg); font-family: "Anton", sans-serif; font-size: 14px; }

/* 7. coin flips */
.lr-coins { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; margin: 16px 0 14px; perspective: 600px; }
.lr-coin { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 70px; }
.lr-coin .face {
    width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
    font-family: "Anton", sans-serif; font-size: 28px; color: #fffdf8;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,.35), inset 0 0 0 6px rgba(0,0,0,.15), 0 6px 14px rgba(0,0,0,.25);
}
.lr-coin.W .face { background: #1e4a16; } .lr-coin.L .face { background: #9b1117; }
.lr-coin small { font: 600 11.5px "Barlow Condensed", sans-serif; letter-spacing: .8px; text-transform: uppercase; color: var(--mute); line-height: 1.25; }

/* 8. not luck: the swap */
.lr-pair { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: start; gap: 6px; margin: 16px 0 14px; }
.lr-sw { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lr-sw-role { font: 700 11.5px "Barlow Condensed", sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--mute); }
.lr-sw-pic { position: relative; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background: var(--soft); display: grid; place-items: center; }
.lr-sw-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.lr-sw-pos { font: 400 22px "Anton", sans-serif; color: var(--mute); }
.lr-sw.out .lr-sw-pic { border: 3px solid var(--down); }
.lr-sw.out .lr-sw-pic img { filter: grayscale(1); opacity: .75; }
.lr-sw.out .lr-sw-pic::after { content: ""; position: absolute; left: -10%; right: -10%; top: 50%; height: 4px; background: var(--down); rotate: -32deg; }
.lr-sw.in .lr-sw-pic { border: 3px solid var(--up); }
.lr-sw-name { font-weight: 600; font-size: 14px; line-height: 1.2; }
.lr-sw-pts { font: 400 28px "Anton", sans-serif; }
.lr-sw.out .lr-sw-pts { color: var(--down); } .lr-sw.in .lr-sw-pts { color: var(--up); }
.lr-sw-arrow { align-self: center; margin-top: 18px; }
.lr-sw-arrow svg { width: 34px; height: 24px; fill: none; stroke: var(--fg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* 9. the verdict */
.k-verdict { justify-content: center; }
.lr-vnum { position: relative; display: inline-block; align-self: center; }
.lr-vnum .lr-big { font-size: clamp(110px, 34vw, 158px); margin: 0; }
.lr-unit { font: 700 15px "Barlow Condensed", sans-serif; letter-spacing: 3px; text-transform: uppercase; color: var(--mute); }
.lr-stamp {
    display: inline-block; align-self: center; margin: 16px 0 6px; padding: 6px 18px 3px;
    border: 4px solid currentColor; outline: 1px solid currentColor; outline-offset: 3px;
    font-family: "Anton", sans-serif; font-size: 36px; letter-spacing: 4px; text-transform: uppercase; rotate: -6deg;
}
.k-verdict.tone-up .lr-stamp { color: var(--up); }
.k-verdict.tone-down .lr-stamp { color: var(--down); }
.w-gold.k-verdict .lr-stamp, .w-red.k-verdict .lr-stamp, .w-green.k-verdict .lr-stamp { color: var(--fg); }
.lr-quip { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 700; font-size: 20px; line-height: 1.3; margin-top: 12px; max-width: 340px; align-self: center; }
.lr-vrec { margin-top: 12px; font: 600 14px "Barlow Condensed", sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--mute); }
.lr-sharebtn {
    align-self: center; margin-top: 22px; display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 26px; border-radius: 999px; border: 0; cursor: pointer;
    background: var(--fg); color: var(--bg); font: 700 15px "Barlow Condensed", sans-serif; letter-spacing: 2px; text-transform: uppercase;
    box-shadow: 0 8px 22px rgba(0,0,0,.25); transition: transform .15s;
}
.lr-sharebtn:hover { transform: translateY(-2px); }
.lr-sharebtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lr-more { display: flex; justify-content: center; gap: 16px; margin-top: 12px; }
.lr-more a, .lr-more button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--fg);
    font: 700 12px "Barlow Condensed", sans-serif; letter-spacing: 1.4px; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
.lr-copied { margin-top: 8px; font-size: 13px; color: var(--mute); }
.lr-crack { position: absolute; inset: 0; z-index: 3; pointer-events: none; width: 100%; height: 100%; opacity: 0; }
.lr-crack path { fill: none; stroke: rgba(255,253,248,.75); stroke-width: 1.4; stroke-linecap: round; }
.lr-confetti { position: absolute; z-index: 3; top: -12px; width: 8px; height: 13px; pointer-events: none; animation: lr-fall 2s cubic-bezier(.2,.6,.4,1) both; }
@keyframes lr-fall { 80% { opacity: 1; } to { transform: translate(var(--dx), 760px) rotate(var(--r)); opacity: 0; } }

/* 10. your league */
.lr-ranks { list-style: none; margin: 14px 0 4px; text-align: left; }
.lr-ranks li { display: grid; grid-template-columns: 20px minmax(0, 1fr) 96px 40px; align-items: center; gap: 8px; height: 24px; }
.lr-ranks .pl { font: 600 12px "Barlow Condensed", sans-serif; color: var(--mute); text-align: right; }
.lr-ranks .nm { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-ranks .dv { position: relative; height: 12px; }
.lr-ranks .dv::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--rule); }
.lr-ranks .dv i { position: absolute; top: 0; bottom: 0; }
.lr-ranks .dv i.up { left: 50%; background: var(--up); border-radius: 0 3px 3px 0; }
.lr-ranks .dv i.down { right: 50%; background: var(--down); border-radius: 3px 0 0 3px; }
.lr-ranks .vl { font: 400 14px "Anton", sans-serif; text-align: right; }
.lr-ranks li.me { background: var(--fg); color: var(--bg); border-radius: 4px; margin: 0 -6px; padding: 0 6px; }
.lr-ranks li.me .pl { color: var(--bg); opacity: .7; }
.lr-ranks li.me .nm { font-weight: 700; }
.lr-ranks li.me .dv i.up { background: #7cc96a; } .lr-ranks li.me .dv i.down { background: #ff6b6b; }
.lr-ranks a { color: inherit; text-decoration: none; }
.lr-rhead { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 22px; line-height: 1.2; }

/* 11. the country */
.k-country .lr-big { font-size: clamp(82px, 26vw, 116px); }
.k-country .col { fill: var(--soft); } .k-country .col.up { fill: rgba(124,201,106,.35); } .k-country .col.down { fill: rgba(255,107,107,.32); }
.k-country .col.me { fill: var(--fg); }
.k-country .you { stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 3 3; }
.lr-split { margin: 14px auto 0; width: 100%; max-width: 330px; }
.lr-split div { display: grid; grid-template-columns: 104px minmax(0, 1fr) 46px; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--rule); }
.lr-split span { font: 700 12px "Barlow Condensed", sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--mute); text-align: left; }
.lr-split b { font: 400 17px "Anton", sans-serif; text-align: right; }
.lr-split .dv { position: relative; height: 10px; }
.lr-split .dv::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--rule); }
.lr-split .dv i { position: absolute; top: 0; bottom: 0; }
.lr-split .dv i.up { left: 50%; background: var(--up); } .lr-split .dv i.down { right: 50%; background: var(--down); }
.lr-onward { margin-top: 18px; display: inline-block; align-self: center; color: var(--fg); font: 700 13px "Barlow Condensed", sans-serif;
             letter-spacing: 1.6px; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--acc); padding-bottom: 2px; }

/* =========================================================================
   Motion: what happens when a card arrives (.is-on). Every animation runs
   from its start state ("both"), so a card that isn't playing shows its
   final picture. Reduced motion: none of it.
   ========================================================================= */
.lr.js .is-on .set { animation: lr-set .55s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
@keyframes lr-set { from { opacity: 0; transform: translateY(14px); } }
.lr.js .is-on .pop { animation: lr-pop .6s cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(var(--i, 0) * 110ms + 120ms); }
@keyframes lr-pop { from { opacity: 0; transform: scale(.6); } }
.lr.js .is-on .grow { transform-box: fill-box; transform-origin: 50% 100%; animation: lr-grow .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--d, 0s) + .35s); }
@keyframes lr-grow { from { transform: scaleY(0); } }
.lr.js .is-on .widen { transform-origin: 0 50%; animation: lr-widen .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--d, 0s) + .3s); }
.lr.js .is-on .dv i.down, .lr.js .is-on .lr-split .dv i.down { transform-origin: 100% 50%; }
@keyframes lr-widen { from { transform: scaleX(0); } }
.lr.js .is-on .fade { animation: lr-fade .5s ease both; animation-delay: calc(var(--d, 0s) + .5s); }
@keyframes lr-fade { from { opacity: 0; } }
.lr.js .is-on .draw { stroke-dasharray: 400; animation: lr-draw 1s ease both; animation-delay: .9s; }
@keyframes lr-draw { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
.lr.js .is-on .avg.draw { stroke-dasharray: 5 4; animation: lr-fade .6s ease both; animation-delay: .9s; }
.lr.js .is-on .lr-meter .pin.have { animation: lr-slide-in .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: .5s; }
.lr.js .is-on .lr-meter .pin.earned { animation: lr-slide-in .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: .8s; }
@keyframes lr-slide-in { from { left: 0; opacity: 0; } }
.lr.js .is-on .lr-meter .gap { animation: lr-fade .5s ease both; animation-delay: 1.5s; }
.lr.js .is-on .lr-coin .face { animation: lr-flip 1s cubic-bezier(.3,.7,.3,1) both; animation-delay: calc(var(--i, 0) * 220ms + .4s); }
@keyframes lr-flip { 0% { transform: rotateY(0) translateY(-30px); opacity: 0; background: #b8b8b8; color: transparent; }
                     20% { opacity: 1; } 60% { background: #b8b8b8; color: transparent; }
                     61% { color: #fffdf8; } 100% { transform: rotateY(1440deg) translateY(0); } }
.lr.js .is-on .lr-sealed .seal { animation: lr-slam .5s cubic-bezier(.2,1.6,.4,1) both; animation-delay: 1.1s; }
.lr.js .k-verdict .lr-stamp { opacity: 0; }
.lr.js .k-verdict.b2 .lr-stamp { opacity: 1; animation: lr-slam .55s cubic-bezier(.2,1.6,.4,1) both; animation-delay: .9s; }
@keyframes lr-slam { from { opacity: 0; transform: scale(2.6); } }
.lr.js .lr-crack.go { animation: lr-crack .2s steps(2) both; }
@keyframes lr-crack { to { opacity: 1; } }
.lr-frame.jolt { animation: lr-jolt .45s cubic-bezier(.36,.07,.19,.97); }
@keyframes lr-jolt { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }
.lr.js .is-on .lr-photo { animation: lr-pop .6s cubic-bezier(.2,1.3,.4,1) both; animation-delay: .1s; }

@media (prefers-reduced-motion: reduce) {
    .lr.js .is-on * { animation: none !important; }
    .lr-confetti, .lr-crack { display: none; }
    .lr-frame.jolt { animation: none; }
}

/* ---- phones: the report is the screen ---------------------------------- */
@media (max-width: 600px) {
    .lr-stage { padding: 0; display: block; background: #131211; }
    .lr-stage::before { display: none; }
    .lr-frame { width: 100%; height: 100svh; min-height: 560px; max-height: none; border-radius: 0; box-shadow: none; }
    .lr-nav { display: none; }
    .lr-slide { padding: 54px 18px 40px; }
    .lr-folio { left: 18px; right: 18px; }
}
@media (max-height: 700px) and (max-width: 600px) {
    .lr-big { font-size: 70px; }
    .lr-line { font-size: 18px; }
    .lr-board li { height: 19px; }
}

/* =========================================================================
   The league page
   ========================================================================= */
.lg-top { text-align: center; padding: 6px 0 0; }
.lg-title { font-family: "Playfair Display", Georgia, serif; font-weight: 900; font-size: clamp(34px, 6vw, 56px); line-height: 1.04; letter-spacing: -.6px; margin-top: 18px; }
.lg-deck { font-size: 18px; color: var(--ink-2); max-width: 620px; margin: 12px auto 0; }

.lg-mine {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin: 26px auto 0; max-width: 820px; padding: 16px 20px; background: #131211; color: #fffdf8; border-radius: 10px; text-decoration: none;
    box-shadow: 0 10px 30px rgba(0,0,0,.18); transition: transform .15s;
}
.lg-mine:hover { transform: translateY(-2px); }
.lg-mine small { display: block; font: 700 12px "Barlow Condensed", sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #ff6b6b; }
.lg-mine strong { font-family: "Playfair Display", Georgia, serif; font-size: 22px; }
.lg-mine span.go { font: 700 14px "Barlow Condensed", sans-serif; letter-spacing: 2px; text-transform: uppercase; border: 1px solid rgba(255,253,248,.35); border-radius: 999px; padding: 10px 18px; }

.lg-heroes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 28px 0 8px; }
.lg-hero {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px;
    padding: 22px 24px 20px; border-radius: 12px; text-decoration: none; background: var(--bg); color: var(--fg);
    box-shadow: 0 14px 34px rgba(0,0,0,.16); transition: transform .18s, box-shadow .18s;
}
.lg-hero > * { position: relative; z-index: 1; }
.lg-hero:hover { transform: translateY(-3px) rotate(-.3deg); box-shadow: 0 20px 44px rgba(0,0,0,.22); }
.lg-hero .k { font: 700 13px "Barlow Condensed", sans-serif; letter-spacing: 2.4px; text-transform: uppercase; color: var(--acc); }
.lg-hero .nm { font-family: "Playfair Display", Georgia, serif; font-weight: 900; font-size: clamp(24px, 3.2vw, 32px); line-height: 1.08; }
.lg-hero .num { font: 400 clamp(70px, 9vw, 104px) "Anton", sans-serif; line-height: .95; letter-spacing: -1px; margin-top: 6px; }
.lg-hero .num small { font: 700 14px "Barlow Condensed", sans-serif; letter-spacing: 2px; text-transform: uppercase; margin-left: 8px; color: var(--mute); }
.lg-hero .why { font-family: Georgia, serif; font-style: italic; font-size: 16px; color: var(--mute); }
.lg-hero .go { margin-top: 10px; font: 700 13px "Barlow Condensed", sans-serif; letter-spacing: 2px; text-transform: uppercase; }
.lg-hero .lg-stamp { position: absolute; right: 18px; top: 20px; z-index: 1; rotate: 8deg; border: 3px solid currentColor; padding: 2px 9px 0;
                  font: 400 18px "Anton", sans-serif; letter-spacing: 2px; text-transform: uppercase; opacity: .9; }

/* the standings, and the standings they earned */
.lg-slope { margin: 18px 0 6px; padding: 22px 22px 18px; background: #131211; color: #fffdf8; border-radius: 12px; position: relative; overflow: hidden; }
.lg-slope > * { position: relative; z-index: 1; }
.lg-slope-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 1.1fr) minmax(0, 1fr); gap: 0; margin-bottom: 10px;
                 font: 700 12.5px "Barlow Condensed", sans-serif; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,253,248,.6); }
.lg-slope-head span:last-child { text-align: left; }
.lg-slope-head span:first-child { text-align: right; }
.lg-slope-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, 1.1fr) minmax(0, 1fr); }
.lg-col { list-style: none; }
.lg-col li { height: 34px; display: flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
.lg-col a { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.lg-col a:hover { text-decoration: underline; }
.lg-col .pl { font: 600 12px "Barlow Condensed", sans-serif; color: rgba(255,253,248,.5); width: 18px; flex: 0 0 auto; text-align: right; }
.lg-col .rc { font: 400 14px "Anton", sans-serif; color: rgba(255,253,248,.75); flex: 0 0 auto; }
.lg-col.left li { justify-content: flex-end; text-align: right; }
.lg-col.left .pl { order: 3; text-align: left; }
.lg-col li.hot a { color: #fffdf8; font-weight: 700; }
.lg-col li.dim { color: rgba(255,253,248,.5); }
.lg-lines { width: 100%; display: block; overflow: hidden; align-self: start; }
.lg-lines line { stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lg-lines line.up { stroke: #7cc96a; } .lg-lines line.down { stroke: #ff6b6b; } .lg-lines line.even { stroke: rgba(255,253,248,.28); }
.lg-lines line.big { stroke-width: 3.5; }
.lg-lines circle { fill: #fffdf8; vector-effect: non-scaling-stroke; }
.lg-slope.js .lg-lines { clip-path: inset(0 100% 0 0); transition: clip-path 1.3s cubic-bezier(.3,.7,.2,1) .15s; }
.lg-slope.js.go .lg-lines { clip-path: inset(0 0 0 0); }
.lg-slope-note { margin-top: 12px; font-family: Georgia, serif; font-style: italic; font-size: 16px; color: rgba(255,253,248,.75); text-align: center; }
.lg-slope-note b { font-style: normal; color: #fffdf8; }
.lg-slope-key { display: flex; justify-content: center; gap: 18px; margin-top: 10px; font: 600 12px "Barlow Condensed", sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,253,248,.6); }
.lg-slope-key i { display: inline-block; width: 16px; height: 3px; vertical-align: 3px; margin-right: 6px; border-radius: 2px; }

/* every team, as a card */
.lg-teams { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.lg-team a {
    position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 10px; align-items: center;
    padding: 14px 14px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.lg-team a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.1); border-color: var(--ink); }
.lg-team .pl { grid-row: 1 / 3; font: 400 22px "Anton", sans-serif; color: var(--muted); }
.lg-team .nm { font-weight: 700; font-size: 15px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-team .sub { grid-column: 2; font-size: 12.5px; color: var(--muted); }
.lg-team .vl { grid-row: 1 / 3; grid-column: 3; font: 400 30px "Anton", sans-serif; }
.lg-team .vl.up { color: var(--lucky); } .lg-team .vl.down { color: var(--accent); }
.lg-team .bar { grid-column: 1 / 4; margin-top: 10px; position: relative; height: 6px; background: var(--cream); border-radius: 3px; }
.lg-team .bar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--ink); opacity: .35; }
.lg-team .bar i { position: absolute; top: 0; bottom: 0; }
.lg-team .bar i.up { left: 50%; background: var(--lucky); border-radius: 0 3px 3px 0; }
.lg-team .bar i.down { right: 50%; background: var(--accent); border-radius: 3px 0 0 3px; }
.lg-team .vd { grid-column: 1 / 4; margin-top: 8px; display: flex; justify-content: space-between; font: 700 11.5px "Barlow Condensed", sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.lg-team .vd b.up { color: var(--lucky); } .lg-team .vd b.down { color: var(--accent); }
.lg-team.mine a { border: 2px solid var(--ink); }
.lg-team.on a { background: #131211; color: #fffdf8; border-color: #131211; }
.lg-team.on .sub, .lg-team.on .pl, .lg-team.on .vd { color: rgba(255,253,248,.6); }

.lg-teams + .ar-intro { margin-top: 20px; }

/* the country, smaller */
.lk-nat .lk-nbar.up { fill: var(--lucky); }
.lk-nat .lk-nbar.down { fill: var(--accent); }
.lk-nat .ar-col.hot .lk-nbar { opacity: .75; }
.lk-you { stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 5 4; }
.lg-nat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 26px; align-items: center; margin-top: 16px; }
.lg-nat-big { font: 400 clamp(56px, 8vw, 84px) "Anton", sans-serif; line-height: 1; }
.lg-nat-cap { font-family: Georgia, serif; font-size: 17px; color: var(--ink-2); margin-top: 6px; }
.lg-nat-cap b { color: var(--ink); }

@media (max-width: 860px) {
    .lg-teams { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .lg-heroes { grid-template-columns: 1fr; gap: 12px; }
    .lg-teams { grid-template-columns: 1fr; gap: 8px; }
    .lg-slope { padding: 16px 12px 14px; margin-left: -6px; margin-right: -6px; }
    .lg-slope-head, .lg-slope-body { grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); }
    .lg-col li { font-size: 12.5px; gap: 5px; }
    .lg-col .rc { display: none; }
    .lg-slope-key { flex-direction: column; align-items: center; gap: 4px; }
    .lg-col .rc { font-size: 12px; }
    .lg-nat { grid-template-columns: 1fr; gap: 10px; }
}


/* =========================================================================
   The story (27 Oct, second pass). John: "it needs to tell a story. rn it is
   disjointed cards ... no red cards ... multiple animations ... half as fast."
   Chapters with one colour each, a lead-in line on every card, captions
   that change beat by beat, charts that build up beat by beat, and the case
   file at the foot that fills in as each chapter closes.
   ========================================================================= */
.lr-part {
    position: absolute; top: 26px; left: 24px; right: 60px; text-align: left;
    font: 700 11.5px "Barlow Condensed", sans-serif; letter-spacing: 1.8px; text-transform: uppercase; color: var(--mute);
}
.lr-lead { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 700; font-size: 22px; line-height: 1.25; margin: 0 auto 12px; max-width: 360px; }
.lr-caps { display: grid; margin: 14px auto 0; max-width: 370px; width: 100%; }
.lr-caps .cap {
    grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity .55s ease, transform .55s ease;
    font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 19px; line-height: 1.3;
}
.lr-caps .cap.on { opacity: 1; transform: none; }
.lr-caps .cap:only-child { opacity: 1; transform: none; }

/* beats: what arrives when */
.lr.js .lr-slide [data-at] { opacity: 0; transition: opacity .6s ease .1s; }
.lr.js .lr-slide.b2 [data-at="2"], .lr.js .lr-slide.b3 [data-at="3"] { opacity: 1; }
.lr.js .lr-slide .till-2, .lr.js .lr-slide .till-3 { transition: opacity .45s ease; }
.lr.js .lr-slide.b2 .till-2, .lr.js .lr-slide.b3 .till-3 { opacity: 0; }
.lr.js .lr-slide .g2 { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0);
                       transition: transform .85s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.lr.js .lr-slide.b2 .g2 { transform: scaleY(1); }
.lr.js .lr-slide .w2 { transform-origin: 0 50%; transform: scaleX(0); transition: transform .85s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0s); }
.lr.js .lr-slide .dv .w2.down { transform-origin: 100% 50%; }
.lr.js .lr-slide.b2 .w2 { transform: scaleX(1); }
.lr.js .is-on .w1 { transform-origin: 0 50%; animation: lr-widen .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: .45s; }
.lr.static [data-at] { opacity: 1 !important; }
.lr.static .till-2, .lr.static .till-3 { display: none; }
.lr.static .g2, .lr.static .w2 { transform: none !important; }
.lr.static .lr-caps .cap { grid-area: auto; opacity: 1; transform: none; margin-top: 6px; }
.lr.static .k-verdict .lr-stamp { opacity: 1; }

/* a number that becomes another number */
.lr-bigs { position: relative; display: grid; justify-items: center; align-self: stretch; }
.lr-bigs > * { grid-area: 1 / 1; }
.lr-boardwrap { position: relative; }
.lr-result {
    position: absolute; z-index: 2; right: 6%; top: 34%; rotate: -9deg; pointer-events: none;
    border: 4px solid currentColor; outline: 1px solid currentColor; outline-offset: 3px; padding: 4px 14px 0;
    font: 400 44px "Anton", sans-serif; line-height: 1.05; letter-spacing: 3px; text-transform: uppercase;
    background: color-mix(in srgb, var(--bg) 80%, transparent);
}
.lr-result.L { color: var(--down); } .lr-result.W { color: var(--up); }
.lr.js .lr-slide.b3 .lr-result { animation: lr-slam .5s cubic-bezier(.2,1.6,.4,1) both; animation-delay: .2s; }

/* the case file, at the foot of every story card */
.lr-ledger {
    position: absolute; z-index: 4; left: 18px; right: 18px; bottom: 12px; pointer-events: none;
    display: flex; align-items: baseline; gap: 16px; padding-top: 8px; border-top: 1px solid rgba(255,253,248,.24);
    font: 700 11.5px "Barlow Condensed", sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,253,248,.6);
    opacity: 0; transition: opacity .4s;
}
.lr-ledger.show { opacity: 1; }
.lr[data-fg="dark"] .lr-ledger { color: rgba(17,17,17,.58); border-top-color: rgba(17,17,17,.2); }
.lr-ledger .lab { margin-right: auto; }
.lr-ledger .it, .lr-ledger .lab { white-space: nowrap; }
.lr-ledger b { font: 400 16px "Anton", sans-serif; letter-spacing: .3px; margin-left: 6px; display: inline-block; }
.lr-ledger .v { display: none; color: #fffdf8; }
.lr[data-fg="dark"] .lr-ledger .v { color: #111; }
.lr-ledger .shown .v { display: inline-block; }
.lr-ledger .shown .q { display: none; }
.lr-ledger .pop .v { animation: lr-pop .7s cubic-bezier(.2,1.5,.4,1) both; }

/* points against: the board, as in the week cards */
.k-against .lr-board li.me .pts { color: var(--fg); }

/* the opponent: the gap between their average and that week */
.k-opponent .gapmark line { stroke: var(--fg); stroke-width: 1.6; }
.k-opponent .gapval { font-family: "Anton", sans-serif; font-weight: 400; font-size: 16px; letter-spacing: 0; }
.k-opponent.tone-down .gapval { fill: var(--down); } .k-opponent.tone-up .gapval { fill: var(--up); }
.k-opponent .val { fill: var(--fg); font-family: "Anton", sans-serif; font-size: 15px; }
.lr-key i.k-you { width: 14px; height: 0; border-top: 3px solid var(--fg); border-radius: 0; vertical-align: 3px; }

/* player luck: every starter, photos down the side */
.lr-lineup { list-style: none; margin: 6px 0 4px; text-align: left; }
.lr-lineup li { display: grid; grid-template-columns: 36px minmax(0, 1fr) 96px 42px; gap: 10px; align-items: center; height: 42px; border-top: 1px solid var(--rule); }
.lr-lineup li:last-child { border-bottom: 1px solid var(--rule); }
.lr-lineup .ph { position: relative; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--soft); display: grid; place-items: center; }
.lr-lineup .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.lr-lineup .ph em { font: 400 11px "Anton", sans-serif; font-style: normal; color: var(--mute); }
.lr-lineup .nm { font-weight: 600; font-size: 14px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-lineup .nm small { display: block; font-weight: 500; font-size: 11.5px; color: var(--mute); }
.lr-lineup .dv { position: relative; height: 12px; }
.lr-lineup .dv::before { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; width: 1px; background: var(--rule); }
.lr-lineup .dv i { position: absolute; top: 0; bottom: 0; }
.lr-lineup .dv i.up { left: 50%; background: var(--up); border-radius: 0 3px 3px 0; }
.lr-lineup .dv i.down { right: 50%; background: var(--down); border-radius: 3px 0 0 3px; }
.lr-lineup .vl { font: 400 16px "Anton", sans-serif; text-align: right; }
.lr-lineup li.up .vl { color: var(--up); } .lr-lineup li.down .vl { color: var(--down); }
.lr-total { margin-top: 12px; font: 700 13px "Barlow Condensed", sans-serif; letter-spacing: 2px; text-transform: uppercase; color: var(--mute); }
.lr-total b { font: 400 28px "Anton", sans-serif; color: var(--fg); margin: 0 6px; letter-spacing: 0; vertical-align: -3px; }

/* the bust and the boom: a bigger photo beside the name */
.lr-hero { display: flex; align-items: center; justify-content: center; gap: 18px; text-align: left; margin: 2px 0 4px; }
.lr-hero .lr-photo { position: relative; flex: 0 0 auto; width: 128px; height: 128px; margin: 0; display: grid; place-items: center; }
.lr-hero .lr-photo img { position: absolute; inset: 0; }
.lr-hero .lr-photo em { font: 400 30px "Anton", sans-serif; font-style: normal; color: var(--mute); }
.lr-hero .lr-big.mid { margin: 4px 0 0; font-size: clamp(52px, 15vw, 66px); }
.lr.js .is-on .lr-hero .lr-photo { animation: lr-pop .7s cubic-bezier(.2,1.3,.4,1) both; animation-delay: .25s; }
.k-player .avg { opacity: .85; }

/* the verdict: the case added up, then the number */
.lr-sum { margin: 6px auto 4px; width: 100%; max-width: 330px; }
.lr-sum div { display: grid; grid-template-columns: 104px minmax(0, 1fr) 50px; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--rule); }
.lr-sum div:last-child { border-bottom: 2px solid var(--fg); }
.lr-sum span { font: 700 12px "Barlow Condensed", sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: var(--mute); text-align: left; }
.lr-sum b { font: 400 19px "Anton", sans-serif; text-align: right; }
.lr-sum .dv { position: relative; height: 10px; }
.lr-sum .dv::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--rule); }
.lr-sum .dv i { position: absolute; top: 0; bottom: 0; }
.lr-sum .dv i.up { left: 50%; background: var(--up); } .lr-sum .dv i.down { right: 50%; background: var(--down); }
.k-verdict .lr-vnum .lr-big { font-size: clamp(96px, 30vw, 136px); }
.k-verdict .lr-stamp { margin-top: 10px; font-size: 32px; }
.k-verdict .lr-quip { font-size: 18px; margin-top: 10px; }

@media (max-height: 760px) and (max-width: 600px) {
    .lr-lead { font-size: 19px; margin-bottom: 8px; }
    .lr-caps .cap { font-size: 17px; }
    .lr-lineup li { height: 36px; }
    .lr-hero .lr-photo { width: 100px; height: 100px; }
    .lr-board li { height: 19px; }
    .k-verdict .lr-vnum .lr-big { font-size: 92px; }
}

/* =========================================================================
   28 Oct (John): "the bars need to not be dark grey. They are hard to see."
   A bar colour per world that reads against it: plain light bars on ink,
   plain mid-grey on paper. The track behind a bar stays --soft.
   ========================================================================= */
.w-paper { --bar: rgba(17,17,17,.2); }
.w-ink   { --bar: rgba(255,253,248,.34); }
.w-gold  { --bar: rgba(17,17,17,.22); }
.w-green, .w-red { --bar: rgba(255,253,248,.32); }
.k-opponent .bar { fill: var(--bar); }
.k-opponent.tone-down .bar.vs { fill: var(--down); } .k-opponent.tone-up .bar.vs { fill: var(--up); }
.k-opponent .avglab { fill: var(--fg); opacity: .85; }
.lr-board .bar i { background: var(--bar); }
.lr-key i.k-bar { background: var(--bar); }
.k-opponent .lr-eyebrow { margin: -2px 0 2px; }

/* a long lead line never rides up into "Part 2 · The schedule" */
.lr-slide { justify-content: safe center; }

/* a small word beside a big number: "avg", "pts short" */
.lr-bigcap { display: inline-block; margin-right: 8px; vertical-align: middle; font: 700 15px "Barlow Condensed", sans-serif;
             letter-spacing: 1.6px; text-transform: uppercase; color: var(--mute); }
.lr-big .lr-bigcap:last-child { margin: 0 0 0 8px; }

/* the players, plainly: his usual against what he did for you, every start */
.lr-herosub { font: 700 12.5px "Barlow Condensed", sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: var(--mute); margin-top: 3px; }
.lr-cmp { margin: 14px auto 6px; width: 100%; max-width: 360px; text-align: left; }
.lr-cmp .row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 52px; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--rule); }
.lr-cmp .row:last-child { border-bottom: 1px solid var(--rule); }
.lr-cmp .row > span:first-child { font: 700 12px "Barlow Condensed", sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); line-height: 1.2; }
.lr-cmp .tr { position: relative; height: 16px; background: var(--soft); border-radius: 3px; overflow: hidden; }
.lr-cmp .tr i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.lr-cmp .usual .tr i { background: var(--bar); }
.k-player.tone-down .lr-cmp .mine .tr i { background: var(--down); }
.k-player.tone-up .lr-cmp .mine .tr i { background: var(--up); }
.lr-cmp b { font: 400 22px "Anton", sans-serif; text-align: right; }
.k-player.tone-down .lr-cmp .mine b { color: var(--down); } .k-player.tone-up .lr-cmp .mine b { color: var(--up); }
.lr.js .is-on .grow-x { transform-origin: 0 50%; animation: lr-widen .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: .45s; }
.lr-starts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0 2px; }
.lr-starts span { padding: 4px 11px 3px; border-radius: 999px; border: 1px solid var(--rule);
                  font: 700 12px "Barlow Condensed", sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
.lr-starts b { font: 400 15px "Anton", sans-serif; letter-spacing: 0; margin-left: 6px; color: var(--fg); }
.lr-starts .below b { color: var(--down); } .lr-starts .above b { color: var(--up); }
.k-player .lr-hero .lr-big.mid { font-size: clamp(46px, 13vw, 58px); }

/* Not luck, spelled out (28 Oct): the bench number, then every loss with its
   margin, then whether the best possible lineup would have changed any. */
.k-skill .lr-unit { margin-top: -2px; }
.lr-losses { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px auto 2px; max-width: 360px; }
.lr-losses span { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 12px 4px; border-radius: 999px; border: 1px solid var(--rule);
                  font: 700 12px "Barlow Condensed", sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
.lr-losses small { font: inherit; letter-spacing: inherit; opacity: .8; }
.lr-losses b { font: 400 15px "Anton", sans-serif; letter-spacing: 0; color: var(--down); }
.lr.js .lr-slide.b2 .lr-losses span { animation: lr-pop .5s cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(var(--i, 0) * 120ms + .15s); }

/* =========================================================================
   The share sheet (28 Oct). Only for a browser with no share sheet of its
   own; a phone opens its native one. Slides up from the bottom on a phone,
   sits in the middle on a computer. Plain paper, ink icons, no brand logos.
   ========================================================================= */
html.lr-sheet-lock { overflow: hidden; }
.lr-sheet { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
.lr-sheet[hidden] { display: none; }
.lr-sheet-back { position: absolute; inset: 0; background: rgba(15,14,13,.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
                 opacity: 0; transition: opacity .2s ease; }
.lr-sheet.open .lr-sheet-back { opacity: 1; }
.lr-sheet-panel {
    position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow: auto;
    background: #f4f0e8; color: #111; border-radius: 18px 18px 0 0; padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 40px rgba(0,0,0,.25); transform: translateY(100%); transition: transform .24s cubic-bezier(.2,.8,.2,1);
    font-family: "Barlow", system-ui, sans-serif;
}
.lr-sheet.open .lr-sheet-panel { transform: none; }
@media (min-width: 601px) {
    .lr-sheet { align-items: center; }
    .lr-sheet-panel { border-radius: 18px; transform: translateY(16px) scale(.98); opacity: 0; transition: transform .2s ease, opacity .2s ease; }
    .lr-sheet.open .lr-sheet-panel { transform: none; opacity: 1; }
}
.lr-sheet-head { display: flex; align-items: center; gap: 12px; padding: 2px 2px 14px; border-bottom: 1px solid #ddd5c6; }
.lr-sheet-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: #e6dfd2; flex: 0 0 auto; }
.lr-sheet-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.lr-sheet-who b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-sheet-who span { font-size: 13.5px; color: #3a3a3a; }
.lr-sheet-who small { font-size: 12.5px; color: #8c8270; }
.lr-sheet-x { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #e3dccf; color: #3a3a3a; font-size: 22px; line-height: 1; cursor: pointer; }
.lr-sheet-x:hover { background: #d8cfbf; }
.lr-sheet-apps { display: flex; gap: 6px; overflow-x: auto; padding: 16px 2px 14px; scrollbar-width: none; }
.lr-sheet-apps::-webkit-scrollbar { display: none; }
.lr-app { flex: 0 0 76px; display: flex; flex-direction: column; align-items: center; gap: 7px; color: #111; text-decoration: none; font-size: 12.5px; font-weight: 500; }
.lr-app i { width: 58px; height: 58px; border-radius: 15px; background: #fffdf8; border: 1px solid #ddd5c6; display: grid; place-items: center; transition: transform .12s, background .12s; }
.lr-app svg { width: 26px; height: 26px; fill: none; stroke: #1f2f4a; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lr-app:hover i, .lr-app:focus-visible i { background: #fff; transform: translateY(-1px); }
.lr-app:focus-visible { outline: none; }
.lr-app:focus-visible i { box-shadow: 0 0 0 3px rgba(31,47,74,.25); }
.lr-sheet-list { list-style: none; margin: 0; background: #fffdf8; border: 1px solid #ddd5c6; border-radius: 12px; overflow: hidden; }
.lr-sheet-list li + li { border-top: 1px solid #ebe4d7; }
.lr-sheet-list a, .lr-sheet-list button {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px;
    background: none; border: 0; color: #111; text-decoration: none; font: 500 16px "Barlow", system-ui, sans-serif; cursor: pointer; text-align: left;
}
.lr-sheet-list a:hover, .lr-sheet-list button:hover { background: #f6f1e7; }
.lr-sheet-list svg { width: 22px; height: 22px; fill: none; stroke: #111; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }