/* Leagues, profile stats, results, match detail and the league-up moment (reels/feed-leagues.js, docs/app/LEAGUES.md).
   From the approved mockups (company brain notes/leagues-mockups, leagues.css), on the shipped feed CSS: Direction D
   surfaces (--d-paper sheets, --d-face keycaps, --d-well wells), Baloo 2 figures, Geist UI, Geist Mono labels. Money
   earned stays --hb-win green. New tokens are prefixed --lg-. */
:root{
 --lg-fire-1:#ffd23f;--lg-fire-2:var(--hb-orange);--lg-fire-3:var(--hb-red);
 --lg-star:url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 viewBox%3D%220 0 100 100%22%3E%3Cpath d%3D%22M77.27 50.00L77.30 50.71L77.34 51.43L77.39 52.15L77.44 52.88L77.50 53.61L77.56 54.35L77.64 55.10L77.72 55.87L77.81 56.64L77.91 57.44L78.02 58.25L78.15 59.09L78.28 59.95L78.44 60.83L78.60 61.75L78.79 62.70L79.00 63.70L79.23 64.74L79.49 65.83L79.78 66.99L80.11 68.22L80.49 69.53L80.93 70.95L81.45 72.49L82.06 74.19L82.80 76.09L83.74 78.26L84.97 80.83L86.78 84.10L91.18 90.08L84.99 85.98L81.64 84.32L79.01 83.20L76.79 82.35L74.85 81.69L73.12 81.14L71.54 80.69L70.09 80.30L68.75 79.97L67.49 79.69L66.31 79.44L65.19 79.22L64.12 79.02L63.10 78.85L62.13 78.70L61.18 78.57L60.27 78.45L59.39 78.34L58.53 78.25L57.70 78.17L56.88 78.10L56.08 78.03L55.29 77.98L54.51 77.93L53.74 77.90L52.99 77.87L52.23 77.84L51.49 77.83L50.74 77.82L50.00 77.81L49.26 77.82L48.51 77.83L47.77 77.84L47.01 77.87L46.26 77.90L45.49 77.93L44.71 77.98L43.92 78.03L43.12 78.10L42.30 78.17L41.47 78.25L40.61 78.34L39.73 78.45L38.82 78.57L37.87 78.70L36.90 78.85L35.88 79.02L34.81 79.22L33.69 79.44L32.51 79.69L31.25 79.97L29.91 80.30L28.46 80.69L26.88 81.14L25.15 81.69L23.21 82.35L20.99 83.20L18.36 84.32L15.01 85.98L8.82 90.08L13.22 84.10L15.03 80.83L16.26 78.26L17.20 76.09L17.94 74.19L18.55 72.49L19.07 70.95L19.51 69.53L19.89 68.22L20.22 66.99L20.51 65.83L20.77 64.74L21.00 63.70L21.21 62.70L21.40 61.75L21.56 60.83L21.72 59.95L21.85 59.09L21.98 58.25L22.09 57.44L22.19 56.64L22.28 55.87L22.36 55.10L22.44 54.35L22.50 53.61L22.56 52.88L22.61 52.15L22.66 51.43L22.70 50.71L22.73 50.00L22.72 49.29L22.72 48.57L22.70 47.85L22.68 47.13L22.65 46.40L22.61 45.66L22.57 44.92L22.51 44.16L22.45 43.39L22.38 42.60L22.31 41.80L22.22 40.97L22.11 40.13L22.00 39.25L21.87 38.35L21.73 37.41L21.56 36.44L21.38 35.42L21.17 34.34L20.93 33.21L20.65 32.02L20.34 30.74L19.97 29.36L19.53 27.86L19.01 26.22L18.37 24.39L17.57 22.30L16.49 19.83L14.92 16.71L11.02 11.02L16.71 14.92L19.83 16.49L22.30 17.57L24.39 18.37L26.22 19.01L27.86 19.53L29.36 19.97L30.74 20.34L32.02 20.65L33.21 20.93L34.34 21.17L35.42 21.38L36.44 21.56L37.41 21.73L38.35 21.87L39.25 22.00L40.13 22.11L40.97 22.22L41.80 22.31L42.60 22.38L43.39 22.45L44.16 22.51L44.92 22.57L45.66 22.61L46.40 22.65L47.13 22.68L47.85 22.70L48.57 22.72L49.29 22.72L50.00 22.73L50.71 22.72L51.43 22.72L52.15 22.70L52.87 22.68L53.60 22.65L54.34 22.61L55.08 22.57L55.84 22.51L56.61 22.45L57.40 22.38L58.20 22.31L59.03 22.22L59.87 22.11L60.75 22.00L61.65 21.87L62.59 21.73L63.56 21.56L64.58 21.38L65.66 21.17L66.79 20.93L67.98 20.65L69.26 20.34L70.64 19.97L72.14 19.53L73.78 19.01L75.61 18.37L77.70 17.57L80.17 16.49L83.29 14.92L88.98 11.02L85.08 16.71L83.51 19.83L82.43 22.30L81.63 24.39L80.99 26.22L80.47 27.86L80.03 29.36L79.66 30.74L79.35 32.02L79.07 33.21L78.83 34.34L78.62 35.42L78.44 36.44L78.27 37.41L78.13 38.35L78.00 39.25L77.89 40.13L77.78 40.97L77.69 41.80L77.62 42.60L77.55 43.39L77.49 44.16L77.43 44.92L77.39 45.66L77.35 46.40L77.32 47.13L77.30 47.85L77.28 48.57L77.28 49.29Z%22 fill%3D%22%233faff3%22 stroke%3D%22%233faff3%22 stroke-width%3D%2217.638496737467797%22 stroke-linejoin%3D%22round%22%2F%3E%3Cellipse cx%3D%2240%22 cy%3D%2248%22 rx%3D%224.25%22 ry%3D%228.5%22 fill%3D%22%230a0c12%22%2F%3E%3Cellipse cx%3D%2260%22 cy%3D%2248%22 rx%3D%224.25%22 ry%3D%228.5%22 fill%3D%22%230a0c12%22%2F%3E%3C%2Fsvg%3E");
 --lg-promo:var(--hb-orange);--lg-down:var(--hb-red);
 --lg-coin:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216.6%22%20r%3D%2215%22%20fill%3D%22%23c8901c%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2215.4%22%20r%3D%2214.4%22%20fill%3D%22%23f6c945%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2215.4%22%20r%3D%2210.6%22%20fill%3D%22none%22%20stroke%3D%22%23fff3c4%22%20stroke-opacity%3D%22.75%22%20stroke-width%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M11.4%209.6h3.2v4.2h2.8V9.6h3.2v11.6h-3.2v-4.4h-2.8v4.4h-3.2z%22%20fill%3D%22%235a3a00%22%2F%3E%3C%2Fsvg%3E")
}
/* ---------- The tall sheet (the shipped .sheet, taken to just under the nav bar) ---------- */
.sheet.lg-sheet{top:calc(var(--sa-safe-top) + 58px);height:auto;max-height:none;flex-direction:column;overflow:hidden;padding-bottom:0}
.sheet.lg-sheet[open]{display:flex}
.lg-sheet .sheet-head{flex:none;margin-bottom:14px}
.lg-sheet .sheet-head>div{min-width:0;flex:1}
.lg-sheet .sheet-head .eyebrow{display:block;margin:0 0 4px;font:600 12px var(--hb-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--d-soft)}
.lg-sheet .sheet-head .glass-button.back svg{width:20px;height:20px;stroke-width:2.2}
.lg-scroll{flex:1;min-height:0;overflow:auto;margin:0 -16px;padding:2px 16px 24px;scrollbar-width:none}
.lg-scroll::-webkit-scrollbar{display:none}
.lg-label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:18px 4px 8px;font:600 12px/1.2 var(--hb-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--d-soft)}
.lg-label small{font:600 12px var(--hb-font-ui);letter-spacing:0;text-transform:none;color:var(--d-muted)}

/* ---------- Atoms ---------- */
.lg-coin{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.12em;background:var(--lg-coin) center/contain no-repeat}
.lg-hc{display:inline-flex;align-items:center;gap:5px;font:800 17px/1 var(--hb-font-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.lg-hc .lg-coin{width:16px;height:16px;margin-top:-3px}
.lg-hc.win{color:var(--hb-win)}
.lg-hc.loss{color:var(--d-soft)}
.lg-hc small{font:600 10px var(--hb-font-mono);letter-spacing:.08em;color:var(--d-muted);margin-left:1px;padding-top:2px}
.lg-badge{display:block;flex:none;aspect-ratio:120/124;height:auto}
.lg-chip{display:inline-flex;align-items:center;gap:4px;height:20px;padding:1px 8px 0;border-radius:99px;background:var(--d-well);color:var(--d-soft);font:700 10.5px/1 var(--hb-font-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.lg-chip.win{background:var(--hb-win);color:#06210f}
.lg-chip.loss{background:color-mix(in srgb,var(--hb-loss) 18%,var(--d-well));color:#ff9a98}
.lg-chip.pvp{background:color-mix(in srgb,var(--hb-accent) 18%,var(--d-well));color:var(--hb-accent)}
.lg-chip.solo{background:color-mix(in srgb,var(--hb-purple) 20%,var(--d-well));color:#d3b2ff}
.lg-chip.promo{background:color-mix(in srgb,var(--lg-promo) 20%,var(--d-well));color:#ffc58a}
.lg-chip.down{background:color-mix(in srgb,var(--lg-down) 18%,var(--d-well));color:#ff9a98}

/* Avatar: the commenter's flat star in their own colour, on a sunken disc (the shipped .comment-avatar recipe). */
.lg-av{--s:44px;--av:var(--hb-blue);position:relative;display:block;flex:none;width:var(--s);height:var(--s);border-radius:50%;background:var(--d-well);box-shadow:inset 0 2px 0 var(--d-well-lip)}
.lg-av:before{content:"";position:absolute;inset:16%;background:var(--av);-webkit-mask:var(--lg-star) center/contain no-repeat;mask:var(--lg-star) center/contain no-repeat}
.lg-av:after{content:"";position:absolute;inset:16%;background:radial-gradient(ellipse 4.3% 8.5% at 40% 48%,var(--hb-night) 98%,transparent),radial-gradient(ellipse 4.3% 8.5% at 60% 48%,var(--hb-night) 98%,transparent)}
.lg-av.me{box-shadow:0 0 0 2.5px var(--hb-accent),inset 0 2px 0 var(--d-well-lip)}
.lg-avwrap{position:relative;isolation:isolate;display:block;flex:none}

/* ---------- 01 · League hero ---------- */
.lg-hero{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);gap:6px 14px;align-items:center;padding:12px 14px 10px;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:var(--d-well);box-shadow:inset 0 2px 0 var(--d-well-lip);overflow:hidden}
.lg-hero:before{content:"";position:absolute;left:0;top:0;width:150px;height:130px;background:radial-gradient(closest-side,color-mix(in srgb,var(--lg-glow,#f6c945) 30%,transparent),transparent);pointer-events:none}
.lg-hero .lg-badge{position:relative;width:76px;grid-row:span 2}
.lg-reset{display:flex;flex-direction:column;gap:6px}
.lg-reset>span{font:600 11px var(--hb-font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--d-soft)}
.lg-count{display:flex;gap:6px}
.lg-count b{display:flex;align-items:baseline;gap:2px;min-width:0;padding:6px 8px 3px;border-radius:11px;background:var(--d-face);box-shadow:0 3px 0 var(--d-face-lip),inset 0 1px 0 rgba(255,255,255,.07);font:800 21px/1 var(--hb-font-display);color:var(--d-ink);font-variant-numeric:tabular-nums}
.lg-count b small{font:600 12px var(--hb-font-mono);color:var(--d-soft)}
.lg-rule{margin:0;font:500 12.5px/1.3 var(--hb-font-ui);color:var(--d-soft);white-space:nowrap}
.lg-rule b{color:#ffc58a;font-weight:700}
.lg-rule i{font-style:normal;color:#ff9a98;font-weight:700}
.lg-ladder{grid-column:1/-1;position:relative;display:flex;justify-content:space-between;align-items:center;margin:6px 2px 0;padding:8px 10px 0;border-top:1px solid rgba(255,255,255,.06)}
.lg-ladder:before{content:"";position:absolute;left:24px;right:24px;top:calc(50% + 4px);height:4px;border-radius:2px;background:linear-gradient(90deg,var(--hb-accent) 0 var(--lg-at,50%),var(--d-face) var(--lg-at,50%))}
.lg-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:52px}
.lg-step img{width:30px}
.lg-step span{font:600 9.5px var(--hb-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--d-muted)}
.lg-step.next img{filter:saturate(.25) brightness(.65)}
.lg-step.now img{width:38px;margin-top:-6px}
.lg-step.now span{color:var(--d-ink)}

/* ---------- 01 · Leaderboard rows ---------- */
.lg-cols{display:grid;grid-template-columns:30px 44px minmax(0,1fr) auto;gap:10px;margin:16px 12px 6px 10px;font:600 10px var(--hb-font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--d-muted)}
.lg-cols span:nth-child(2){grid-column:2/4}
.lg-board{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.lg-row{position:relative;display:grid;grid-template-columns:28px 44px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:58px;padding:7px 12px 7px 8px;border:1px solid rgba(255,255,255,.05);border-radius:18px;background:var(--d-face);box-shadow:0 4px 0 var(--d-face-lip),inset 0 1px 0 rgba(255,255,255,.07);color:var(--d-ink)}
.lg-rank{justify-self:center;font:800 19px/1 var(--hb-font-display);color:var(--d-soft);font-variant-numeric:tabular-nums;padding-top:3px}
.lg-rank.r1,.lg-rank.r2,.lg-rank.r3{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;padding-top:3px;font-size:16px;color:#2b1a08;box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.lg-rank.r1{background:radial-gradient(circle at 35% 30%,#ffe7a1,#e0a92e);color:#3a2700}
.lg-rank.r2{background:radial-gradient(circle at 35% 30%,#f4f6fa,#9aa3b5);color:#1c2230}
.lg-rank.r3{background:radial-gradient(circle at 35% 30%,#f2c79b,#b9773e)}
.lg-who{display:flex;flex-direction:column;gap:4px;min-width:0}
.lg-who strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 15px/1.15 var(--hb-font-ui);letter-spacing:-.01em}
.lg-who strong em{margin-left:6px;font:700 10px var(--hb-font-mono);font-style:normal;letter-spacing:.1em;color:var(--hb-accent);vertical-align:1px}
.lg-stat{display:flex;align-items:center;gap:8px;font:500 12.5px/1 var(--hb-font-ui);color:var(--d-soft);white-space:nowrap}
.lg-stat b{font-weight:700;color:var(--d-ink)}
.lg-stat i{width:3px;height:3px;border-radius:50%;background:var(--d-muted)}
.lg-earn{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.lg-earn small{font:600 9.5px var(--hb-font-mono);letter-spacing:.1em;color:var(--d-muted)}
/* Zones */
.lg-row.promo{background:color-mix(in srgb,var(--lg-promo) 9%,var(--d-face))}
.lg-row.down{background:color-mix(in srgb,var(--lg-down) 8%,var(--d-face))}
.lg-row.down .lg-rank{color:#ff9a98}
.lg-zone{display:flex;align-items:center;gap:8px;margin:16px 4px 2px;font:600 11px var(--hb-font-mono);letter-spacing:.12em;text-transform:uppercase}
.lg-zone svg{width:14px;height:14px;stroke-width:2.6}
.lg-zone small{margin-left:auto;font:600 12px var(--hb-font-ui);letter-spacing:0;text-transform:none;color:var(--d-muted)}
.lg-zone.promo{color:#ffb36b}
.lg-zone.down{color:#ff8a87}
.lg-line{position:relative;height:18px;margin:2px 4px}
.lg-line:before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed currentColor;opacity:.55}
.lg-line span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:0 10px;background:var(--d-paper);font:600 10px var(--hb-font-mono);letter-spacing:.12em;text-transform:uppercase}
.lg-line.promo{color:#ffb36b}
.lg-line+.lg-zone{margin-top:6px}
.lg-line.down{color:#ff8a87}
.lg-gap{display:flex;justify-content:center;gap:5px;padding:2px 0}
.lg-gap i{width:5px;height:5px;border-radius:50%;background:var(--d-face)}
/* Your sticky row: pinned over the list's foot on a fade of the paper. */
.lg-me{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:26px 16px calc(var(--sa-safe-bottom) + 2px);background:linear-gradient(180deg,transparent,var(--d-paper) 30px)}
.lg-me .lg-row{border-color:transparent;box-shadow:0 0 0 2px var(--hb-accent),0 6px 0 var(--d-face-lip),0 14px 30px rgba(0,0,0,.45);background:color-mix(in srgb,var(--hb-accent) 10%,var(--d-face))}
.lg-me .lg-rank{color:var(--hb-accent)}
.lg-nudge{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 10px;font:600 12.5px var(--hb-font-ui);color:#ffc58a}
.lg-nudge svg{width:14px;height:14px;stroke-width:2.6}

/* ---------- 02 · Profile ---------- */
.lg-id{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:4px 2px 0}
.lg-id .lg-avwrap{width:84px;height:84px}
.lg-id .lg-av{--s:84px}
.lg-id .lg-avwrap .lg-badge{position:absolute;right:-10px;bottom:-12px;width:42px;z-index:1}
.lg-id h3{margin:0;font:800 30px/1 var(--hb-font-display);letter-spacing:-.01em;padding-top:4px}
.lg-id p{margin:4px 0 10px;font:500 13px var(--hb-font-ui);color:var(--d-soft)}
.lg-pill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 6px;border:1px solid rgba(255,255,255,.05);border-radius:99px;background:var(--d-face);box-shadow:0 3px 0 var(--d-face-lip),inset 0 1px 0 rgba(255,255,255,.07);font:700 13px var(--hb-font-ui);white-space:nowrap}
.lg-pill img{width:24px}
.lg-pill small{font:600 13px var(--hb-font-ui);color:var(--d-soft)}
.lg-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.lg-tile{position:relative;display:flex;flex-direction:column;gap:6px;min-height:88px;padding:12px 14px 11px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:var(--d-well);box-shadow:inset 0 2px 0 var(--d-well-lip);overflow:hidden}
.lg-tile>span{font:600 13px var(--hb-font-ui);color:var(--d-soft)}
.lg-tile>b{display:flex;align-items:center;gap:7px;font:800 32px/1 var(--hb-font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;padding-top:3px}
.lg-tile>b .em{font-size:26px;line-height:1;margin-top:-6px}
.lg-tile>b .lg-coin{width:24px;height:24px;margin-top:-5px}
.lg-tile>b.win{color:var(--hb-win)}
.lg-tile>small{font:600 12px/1.2 var(--hb-font-mono);color:var(--d-muted)}
.lg-ratio{display:flex;height:8px;margin-top:2px;border-radius:99px;overflow:hidden;background:var(--d-face)}
.lg-ratio i{background:var(--hb-win)}
.lg-ratio u{background:color-mix(in srgb,var(--hb-loss) 70%,var(--d-face))}
.lg-form{display:flex;align-items:center;gap:6px;padding:12px;border:1px solid rgba(255,255,255,.05);border-radius:18px;background:var(--d-face);box-shadow:0 4px 0 var(--d-face-lip),inset 0 1px 0 rgba(255,255,255,.07)}
.lg-dot{display:grid;place-items:center;flex:1;max-width:28px;aspect-ratio:1;border-radius:50%;font:800 12px/1 var(--hb-font-display);padding-top:2px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.lg-dot.w{background:var(--hb-win);color:#06210f}
.lg-dot.l{background:color-mix(in srgb,var(--hb-loss) 75%,var(--d-face));color:#2c0606}
.lg-dot.now{box-shadow:0 0 0 2px var(--d-face),0 0 0 4px var(--d-ink),inset 0 -2px 0 rgba(0,0,0,.25)}
.lg-form small{margin-left:auto;padding-left:6px;font:600 12px var(--hb-font-mono);color:var(--d-soft);white-space:nowrap}
.lg-best{display:grid;gap:10px}
.lg-best .list-row{width:100%;align-items:center}
.lg-best .list-text{display:flex;flex-direction:column;gap:6px;min-width:0}
.lg-best .list-text strong{font:800 18px/1 var(--hb-font-display);padding-top:3px}
.lg-best .lg-stat{order:2}
.lg-best .list-text small{font:500 12.5px var(--hb-font-ui);color:var(--d-soft)}

/* ---------- 03 · Results ---------- */
.lg-search{position:relative;display:block}
.lg-search input{width:100%;height:48px;padding:0 14px 0 42px;border:0;border-radius:16px;background:var(--d-well);box-shadow:inset 0 2px 0 var(--d-well-lip);color:var(--d-ink);font:500 15px var(--hb-font-ui);outline:none}
.lg-search input::placeholder{color:var(--d-muted)}
.lg-search svg{position:absolute;left:14px;top:14px;width:20px;height:20px;color:var(--d-muted);stroke-width:2}
.lg-filters{display:flex;gap:8px;margin:12px -16px 0;padding:0 16px 6px;overflow:auto;scrollbar-width:none}
.lg-filters::-webkit-scrollbar{display:none}
.lg-filter{display:inline-flex;align-items:center;gap:6px;flex:none;height:38px;padding:2px 14px 0;border:1px solid rgba(255,255,255,.05);border-radius:99px;background:var(--d-face);box-shadow:0 3px 0 var(--d-face-lip),inset 0 1px 0 rgba(255,255,255,.07);color:var(--d-ink);font:800 16px/1 var(--hb-font-display)}
.lg-filter svg{width:14px;height:14px;margin-top:-2px;stroke-width:2.6;color:var(--d-soft)}
.lg-filter[aria-pressed=true]{border-color:transparent;background:var(--hb-accent);color:var(--d-key-ink);box-shadow:0 3px 0 var(--hb-accent-shade),inset 0 2px 0 var(--hb-accent-gloss)}
.lg-filter img{width:20px;height:20px;border-radius:6px;object-fit:cover;margin-top:-2px}
.lg-sum{position:relative;margin-top:12px;padding:14px 16px 0;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:var(--d-well);box-shadow:inset 0 2px 0 var(--d-well-lip);overflow:hidden}
.lg-sum-head{display:flex;justify-content:space-between;align-items:baseline}
.lg-sum-head span{font:600 14px var(--hb-font-ui);color:var(--d-soft)}
.lg-sum-head small{font:600 11px var(--hb-font-mono);letter-spacing:.1em;color:var(--d-muted)}
.lg-sum-grid{display:grid;grid-template-columns:1fr 1fr 1.25fr;margin-top:8px}
.lg-sum-grid div{display:flex;flex-direction:column;gap:4px}
.lg-sum-grid div+div{padding-left:12px;border-left:1px solid rgba(255,255,255,.07)}
.lg-sum-grid b{font:800 30px/1 var(--hb-font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;padding-top:3px}
.lg-sum-grid b.win{display:flex;align-items:center;gap:6px;color:var(--hb-win)}
.lg-sum-grid b.win .lg-coin{width:22px;height:22px;margin-top:-4px}
.lg-sum-grid small{font:600 11px var(--hb-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--d-muted)}
.lg-bars{display:flex;align-items:flex-end;gap:3px;height:46px;margin:12px 4px 0}
.lg-bars i{flex:1;height:var(--h);min-height:4px;border-radius:3px 3px 0 0;background:var(--hb-accent);-webkit-mask:var(--hb-bayer-12) 0 0/4px 4px;mask:var(--hb-bayer-12) 0 0/4px 4px}
.lg-bars i.dn{background:var(--d-muted);-webkit-mask:var(--hb-bayer-6) 0 0/4px 4px;mask:var(--hb-bayer-6) 0 0/4px 4px}
.lg-bars i.today{background:var(--hb-accent-gloss);-webkit-mask:none;mask:none}
.lg-list{display:grid;gap:10px}
.lg-match{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:8px 12px 8px 8px;border:1px solid rgba(255,255,255,.05);border-radius:18px;background:var(--d-face);box-shadow:0 4px 0 var(--d-face-lip),inset 0 1px 0 rgba(255,255,255,.07);color:var(--d-ink);text-align:left}
.lg-match>img,.lg-poster{width:52px;height:52px;border-radius:14px;object-fit:cover}
.lg-mid{display:flex;flex-direction:column;gap:5px;min-width:0}
.lg-mid>div{display:flex;align-items:center;gap:6px;min-width:0}
.lg-mid strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 17px/1 var(--hb-font-display);padding-top:3px}
.lg-mid>small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 12.5px var(--hb-font-ui);color:var(--d-soft)}
.lg-mid>small b{color:var(--d-ink);font-weight:700}
.lg-right{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.lg-meta{font:600 10.5px var(--hb-font-mono);color:var(--d-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-mid>div .lg-chip{flex:none;margin-top:-1px}
.lg-right small{font:600 10.5px var(--hb-font-mono);color:var(--d-muted)}
/* Solo: your score against the break-even score on one track. */
.lg-be{position:relative;height:6px;margin:3px 0 2px;border-radius:99px;background:var(--d-well);box-shadow:inset 0 1px 0 var(--d-well-lip)}
.lg-be i{position:absolute;left:0;top:0;bottom:0;width:var(--score);border-radius:99px;background:var(--hb-purple)}
.lg-be i.under{background:color-mix(in srgb,var(--hb-purple) 45%,var(--d-face))}
.lg-be u{position:absolute;top:-4px;bottom:-4px;left:var(--be);width:2px;margin-left:-1px;border-radius:1px;background:var(--d-ink)}
.lg-besub{display:flex;justify-content:space-between;font:600 10.5px var(--hb-font-mono);color:var(--d-muted)}
.lg-besub b{color:var(--d-ink);font-weight:600}

/* ---------- 04 · Match detail ---------- */
.lg-face{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;padding:16px 12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:var(--d-well);box-shadow:inset 0 2px 0 var(--d-well-lip);overflow:hidden}
.lg-face:before{content:"";position:absolute;left:-40px;top:-50px;width:200px;height:200px;background:radial-gradient(closest-side,color-mix(in srgb,var(--hb-accent) 26%,transparent),transparent);pointer-events:none}
.lg-player{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.lg-player .lg-av{--s:62px}
.lg-player strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 15px/1.1 var(--hb-font-ui)}
.lg-player>span{display:inline-flex;align-items:center;gap:4px;font:600 11px var(--hb-font-mono);color:var(--d-soft)}
.lg-player>span img{width:16px}
.lg-player .lg-chip{position:absolute;top:-8px;left:50%;transform:translateX(18px);z-index:2}
.lg-score{display:flex;flex-direction:column;align-items:center;gap:4px}
.lg-score b{font:800 52px/1 var(--hb-font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;padding-top:6px}
.lg-score b span{color:var(--d-muted);margin:0 4px}
.lg-score b em{font-style:normal;color:var(--d-soft)}
.lg-score small{font:600 11px var(--hb-font-mono);letter-spacing:.12em;color:var(--d-muted)}
.lg-pot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;padding:12px 14px;border:1px solid rgba(255,255,255,.05);border-radius:16px;background:var(--d-face);box-shadow:0 4px 0 var(--d-face-lip),inset 0 1px 0 rgba(255,255,255,.07)}
.lg-pot>div{display:flex;flex-direction:column;gap:4px}
.lg-pot>div:last-child{align-items:flex-end}
.lg-pot small{font:500 12px var(--hb-font-ui);color:var(--d-soft)}
.lg-pot b{font:700 14px var(--hb-font-ui)}
.lg-pot .lg-hc{font-size:22px}
.lg-pot .lg-hc .lg-coin{width:20px;height:20px}
.lg-chart{position:relative;padding:12px 12px 8px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:var(--d-well);box-shadow:inset 0 2px 0 var(--d-well-lip)}
.lg-chart svg{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:none}
.lg-legend{display:flex;gap:14px;margin:0 2px 6px;font:600 12px var(--hb-font-ui);color:var(--d-soft)}
.lg-legend span{display:inline-flex;align-items:center;gap:6px}
.lg-legend i{width:12px;height:4px;border-radius:2px;background:var(--c)}
.lg-replays{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.lg-replays.one{grid-template-columns:1fr}
.lg-replay.off{opacity:.55}
.lg-replay{display:flex;align-items:center;gap:10px;height:56px;padding:0 12px 0 8px;border:1px solid rgba(255,255,255,.05);border-radius:18px;background:var(--d-face);box-shadow:0 4px 0 var(--d-face-lip),inset 0 1px 0 rgba(255,255,255,.07);color:var(--d-ink);text-align:left}
.lg-replay>i{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:var(--c);box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.lg-replay>i svg{width:16px;height:16px;fill:var(--hb-night);stroke:none;margin-left:2px}
.lg-replay span{display:flex;flex-direction:column;gap:2px;min-width:0}
.lg-replay b{font:800 16px/1 var(--hb-font-display);padding-top:3px;white-space:nowrap}
.lg-replay small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 12px var(--hb-font-ui);color:var(--d-soft)}
.lg-tl{position:relative;margin:0;padding:4px 0 0 4px;list-style:none}
.lg-tl li{position:relative;display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:start;padding:0 2px 14px 0}
.lg-tl li:before{content:"";position:absolute;left:10px;top:14px;bottom:-2px;width:2px;background:var(--d-face)}
.lg-tl li:last-child:before{display:none}
.lg-tl li>i{position:relative;z-index:1;width:22px;height:22px;border-radius:50%;background:var(--d-face);box-shadow:inset 0 0 0 5px var(--d-face),inset 0 0 0 11px var(--d-muted)}
.lg-tl li.key>i{box-shadow:inset 0 0 0 5px var(--d-face),inset 0 0 0 11px var(--hb-accent)}
.lg-tl li.won>i{box-shadow:inset 0 0 0 5px var(--d-face),inset 0 0 0 11px var(--hb-win)}
.lg-tl strong{display:block;font:600 14px/1.25 var(--hb-font-ui)}
.lg-tl small{display:block;margin-top:2px;font:500 12px var(--hb-font-ui);color:var(--d-soft)}
.lg-tl time{font:500 12px var(--hb-font-mono);color:var(--d-muted);padding-top:2px}
.lg-ids{display:grid;gap:8px}
.lg-ids .account-id{text-align:left}
.lg-ids .account-id>span:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-width:70%}
.lg-ids .account-id small{font:600 10px var(--hb-font-mono);letter-spacing:.12em;color:var(--d-muted)}
.lg-ids .account-id b{font:500 14px var(--hb-font-mono);color:var(--d-ink);overflow:hidden;text-overflow:ellipsis}

/* ---------- 05 · League up ---------- */
.lg-up{position:relative;width:100%;height:100dvh;overflow:hidden;background:radial-gradient(90% 55% at 50% 38%,color-mix(in srgb,#1d7d8d 70%,transparent),transparent 72%),var(--hb-night);color:var(--d-ink);text-align:center}
.lg-up-field{position:absolute;inset:0;background:#52d3e3;opacity:.16;-webkit-mask:var(--hb-bayer-2) 0 0/8px 8px,radial-gradient(60% 45% at 50% 38%,#000,transparent);-webkit-mask-composite:source-in;mask:var(--hb-bayer-2) 0 0/8px 8px,radial-gradient(60% 45% at 50% 38%,#000,transparent);mask-composite:intersect;image-rendering:pixelated}
.lg-rays{position:absolute;left:50%;top:262px;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;background:radial-gradient(closest-side,rgba(220,253,255,.5),rgba(220,253,255,.1) 45%,transparent 70%),repeating-conic-gradient(rgba(150,235,245,.24) 0 9deg,transparent 9deg 22.5deg);-webkit-mask:radial-gradient(closest-side,#000 38%,transparent);mask:radial-gradient(closest-side,#000 38%,transparent);animation:hr-spin 14s linear infinite}
.lg-up-top{position:absolute;left:0;right:0;top:calc(var(--sa-safe-top) + 10px);display:flex;justify-content:space-between;align-items:center;padding:0 16px}
.lg-up-top .hb-label{color:var(--d-soft)}
.lg-up-badge{position:absolute;left:50%;top:262px;width:184px;margin:-100px 0 0 -92px;animation:hr-bob 1.8s ease-in-out infinite;filter:drop-shadow(0 18px 24px rgba(0,0,0,.45))}
.lg-from{position:absolute;left:50%;top:104px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 6px;border-radius:99px;background:color-mix(in srgb,var(--d-paper) 88%,transparent);border:1px solid rgba(255,255,255,.08);font:700 13px var(--hb-font-ui);color:var(--d-soft);white-space:nowrap}
.lg-from img{width:24px}
.lg-from svg{width:14px;height:14px;stroke-width:2.6;color:var(--d-muted)}
.lg-from b{color:#7fe6f1}
.lg-up h1{position:absolute;left:0;right:0;top:386px;margin:0;font:800 60px/1 var(--hb-font-display);letter-spacing:-.02em;color:#fff;text-shadow:0 4px 0 var(--hb-night),3px 0 0 var(--hb-night),-3px 0 0 var(--hb-night),0 -3px 0 var(--hb-night),3px 4px 0 var(--hb-night),-3px 4px 0 var(--hb-night),0 10px 24px rgba(0,0,0,.4)}
.lg-up h2{position:absolute;left:0;right:0;top:452px;margin:0;font:800 26px/1 var(--hb-font-display);color:#7fe6f1;letter-spacing:-.01em}
.lg-up-card{position:absolute;left:16px;right:16px;top:500px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:26px;background:var(--d-paper);box-shadow:0 7px 0 var(--d-lip),0 20px 34px rgba(0,0,0,.45);text-align:left}
.lg-up-card .lg-avwrap{width:64px;height:64px;margin:6px}
.lg-up-card .lg-av{--s:64px}
.lg-up-card strong{display:block;font:800 19px/1.1 var(--hb-font-display);padding-top:3px}
.lg-up-card p{margin:4px 0 0;font:500 12.5px var(--hb-font-ui);color:var(--d-soft)}
.lg-up-stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lg-up-stats div{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 9px;border-radius:14px;background:var(--d-well);box-shadow:inset 0 2px 0 var(--d-well-lip)}
.lg-up-stats b{display:inline-flex;align-items:center;gap:5px;font:800 22px/1 var(--hb-font-display);padding-top:3px}
.lg-up-stats b.win{color:var(--hb-win)}
.lg-up-stats b .lg-coin{width:18px;height:18px;margin-top:-3px}
.lg-up-stats small{font:600 10px var(--hb-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--d-muted)}
.lg-up-go{position:absolute;left:16px;right:16px;bottom:calc(var(--sa-safe-bottom) + 50px);display:grid;place-items:center;height:60px;border-radius:99px;font-size:22px;padding-top:3px;overflow:hidden}
.lg-up-go:after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background-image:radial-gradient(rgba(6,18,28,.5) 1.3px,transparent 1.6px);background-size:4px 4px;-webkit-mask:linear-gradient(transparent,#000);mask:linear-gradient(transparent,#000);pointer-events:none}
.lg-up-share{position:absolute;left:0;right:0;bottom:calc(var(--sa-safe-bottom) + 6px);border:0;background:none;color:var(--hb-accent);font:800 18px/1 var(--hb-font-display);padding:12px}
.lg-confetti i{position:absolute;width:var(--w,9px);height:var(--h,16px);border-radius:3px;background:var(--c);transform:rotate(var(--r));box-shadow:inset 0 -2px 0 rgba(0,0,0,.22)}
.lg-confetti i.s{border-radius:50%;width:9px;height:9px}

/* Fire ring (the live promotion zone): Harsh's flame texture (reels/leagues/fire-ring-*.webp, flames on black) screened
   over the avatar so the black drops out, turning once every 9 s. feed-leagues.js adds it only to promotion-zone
   avatars and pauses rings that are off screen; reduced motion keeps a still ring. */
.lg-av>.lg-ring{--ring:2.2;position:absolute;left:50%;top:50%;z-index:-1;width:calc(var(--s) * var(--ring));height:calc(var(--s) * var(--ring));margin:calc(var(--s) * var(--ring) / -2) 0 0 calc(var(--s) * var(--ring) / -2);max-width:none;mix-blend-mode:screen;pointer-events:none;animation:lg-spin 9s linear infinite;will-change:transform}
.lg-av>.lg-ring.paused{animation-play-state:paused}
@keyframes lg-spin{to{transform:rotate(360deg)}}
/* The ring sits under the avatar's disc, in its row's (or card's) isolated group, so screen drops the black against
   the surface behind it; the avatar itself must not form a stacking context. Rows use a tighter ring. */
.lg-row,.lg-player,.lg-id,.lg-face,.lg-up-card{isolation:isolate}
.lg-row .lg-av>.lg-ring{--ring:1.75}
@media (prefers-reduced-motion:reduce){.lg-av>.lg-ring,.lg-up-badge,.lg-rays{animation:none}}

/* ---------- Feed glue (not in the mockups) ---------- */
.lg-sheet .sheet-head .glass-button.back[hidden],.lg-me[hidden]{display:none}
.lg-sheet .sheet-head{gap:12px}
.lg-poster{flex:none;width:52px;height:52px;border-radius:14px;object-fit:cover;background:var(--d-well)}
.lg-best .lg-poster{width:58px;height:58px}
.lg-poster.blank{background:linear-gradient(135deg,var(--d-face),var(--d-well))}
.lg-best .list-row{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:14px;padding:10px 12px 10px 10px;border:1px solid rgba(255,255,255,.05);border-radius:18px;background:var(--d-face);box-shadow:0 4px 0 var(--d-face-lip),inset 0 1px 0 rgba(255,255,255,.07)}
.lg-empty{margin:18px 4px;padding:18px 16px;border-radius:18px;background:var(--d-well);box-shadow:inset 0 2px 0 var(--d-well-lip);font:500 14px/1.45 var(--hb-font-ui);color:var(--d-soft);text-align:center;list-style:none}
.lg-form-empty{margin:0 auto!important;padding:0!important;font-family:var(--hb-font-ui)!important}
.lg-ratio.empty u{background:var(--d-face)}
.lg-dot.d{background:var(--d-muted);color:var(--hb-night)}
.lg-spacer{height:150px}
.lg-row[role=button]{cursor:pointer}
.lg-row[role=button]:active{transform:translateY(2px);box-shadow:0 2px 0 var(--d-face-lip),inset 0 1px 0 rgba(255,255,255,.07)}
.lg-match:active,.lg-replay:active,.lg-filter:active,.lg-pill:active,.lg-more:active{transform:translateY(2px)}
button.lg-pill{color:var(--d-ink);cursor:pointer}
.lg-more{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:50px;margin-top:16px;border:1px solid rgba(255,255,255,.05);border-radius:18px;background:var(--d-face);box-shadow:0 4px 0 var(--d-face-lip),inset 0 1px 0 rgba(255,255,255,.07);color:var(--d-ink);font:800 17px/1 var(--hb-font-display);padding-top:3px}
.lg-more svg,.lg-acct-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lg-sheet svg path,.lg-zone svg,.lg-nudge svg,.lg-filter svg,.lg-search svg,.lg-from svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.lg-select{position:relative;cursor:pointer}
.lg-select select{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;cursor:pointer}
.lg-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.lg-face.solo{grid-template-columns:1fr 1fr}
.lg-results{min-height:200px}
/* The account sheet's league card, where the old skill tier was. */
.lg-acct{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;margin:0 0 14px;padding:10px 14px 10px 10px;border:1px solid rgba(255,255,255,.05);border-radius:18px;background:var(--d-face);box-shadow:0 4px 0 var(--d-face-lip),inset 0 1px 0 rgba(255,255,255,.07);color:var(--d-ink);text-align:left}
.lg-acct[hidden]{display:none}
.lg-acct img{width:40px}
.lg-acct-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.lg-acct-text strong{font:800 18px/1 var(--hb-font-display);padding-top:3px}
.lg-acct-text small{font:500 12.5px var(--hb-font-ui);color:var(--d-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-acct-go{display:inline-flex;align-items:center;gap:4px;font:600 13px var(--hb-font-ui);color:var(--hb-accent)}
/* League up: a full-screen dialog over everything. */
.lg-up-dialog{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:var(--hb-night);color:var(--d-ink)}
.lg-up-dialog::backdrop{background:var(--hb-night)}
.lg-up-dialog[open]{animation:sa-fade .3s var(--sa-ease)}
.lg-up .close{z-index:2}
.lg-up-card .lg-av{--s:64px}
@media (prefers-reduced-motion:reduce){.lg-up-dialog[open]{animation:none}}

/* Coin leaderboard tab (docs/app/BETA_LEADERBOARD.md) */
.lg-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin:0 0 12px;padding:4px;border-radius:16px;background:var(--d-well);box-shadow:inset 0 2px 0 var(--d-well-lip)}
.lg-tab{min-height:38px;padding:0 10px;border:0;border-radius:12px;background:transparent;color:var(--d-soft);font:700 13.5px var(--hb-font-ui);cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lg-tab.on{background:var(--d-face);color:var(--d-ink);box-shadow:0 3px 0 var(--d-face-lip),inset 0 1px 0 rgba(255,255,255,.07)}
.lg-tab:focus-visible{outline:2px solid var(--hb-accent);outline-offset:1px}
.lg-coin-trophy{position:relative;grid-row:span 2;display:grid;place-items:center;width:76px;height:76px;font-size:54px;line-height:1}
.lg-prizes{display:flex;flex-wrap:wrap;gap:6px}
.lg-prize-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 8px 4px;border-radius:10px;background:var(--d-face);box-shadow:0 2px 0 var(--d-face-lip);font:800 13px/1 var(--hb-font-display);color:var(--d-ink);font-variant-numeric:tabular-nums}
.lg-prize-chip b{font:600 10.5px var(--hb-font-mono);letter-spacing:.06em;color:var(--d-soft);margin-right:2px}
.lg-prize-chip .lg-coin{width:13px;height:13px}
.lg-coin-rule{margin:12px 4px;font:500 12.5px/1.4 var(--hb-font-ui);color:var(--d-soft)}
.lg-prize{display:inline-flex;align-items:center;gap:4px;font:600 11.5px var(--hb-font-ui);color:#ffd57a}
.lg-prize .lg-coin{width:12px;height:12px}
.lg-hc.bal{color:var(--d-ink)}
.lg-coin-row.prize{background:color-mix(in srgb,#f6c945 8%,var(--d-face))}