/* Premodern player cards. S.H.O.P. house style: dark warm table, gold, Cinzel + EB Garamond.
   One deliberate dark look (the brand's), so no light theme. */
:root {
  --table: #17120c;
  --card: #211a11;
  --card-deep: #1a140d;
  --ink: #efe3c8;
  --muted: #b3a27f;
  --gold: #d6a34a;
  --gold-soft: #8a6a32;
  --rule: #3a2e1d;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "EB Garamond", Garamond, Georgia, serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--table); }
body {
  margin: 0;
  background: var(--table);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.45;
  padding-block: max(24px, env(safe-area-inset-top, 0px)) 48px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
a { color: var(--gold); }
.wrap { max-width: 900px; margin: 0 auto; display: grid; gap: 28px; }
header.site { display: grid; gap: 6px; }
.eyebrow { font-family: var(--display); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); text-decoration: none; }
header.site p { margin: 0; color: var(--muted); max-width: 62ch; }

.faces { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 760px) { .faces { grid-template-columns: minmax(0, 1fr); } .frontcol { max-width: 440px; width: 100%; justify-self: center; } }
.frontcol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0;
  container-type: inline-size; } /* so the card's own border and corners (cqw) scale with the card, not the window */

/* ---------- Front: an original frame in the spirit of the old border (1993 to 2003 cards) ----------
   True card proportions (63 x 88 mm), everything scales with the card. Old-border conventions:
   thick black border, a frame colored by the deck, name and type printed on the frame (no boxes),
   beveled art and text boxes of equal width, the rarity symbol at the end of the type line,
   power/toughness-style figure under the text box on the right, illustrator credit centered.
   The textures are our own CSS, not scans of real frames. */
.front {
  container-type: inline-size;
  aspect-ratio: 63 / 88;
  width: 100%;
  max-width: 100%;
  border-radius: 4.8cqw;
  padding: 4.4cqw;
  background: #0d0c0b;
  box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(214,163,74,.18);
  --frame-hi: #b9b2a2; --frame-lo: #8d8676; --frame-ink: #15110c; --box: #ece6d6; --box-lo: #d6ccb4; --box-ink: #1a140d;
}
.front.c-W { --frame-hi: #ddd5bf; --frame-lo: #b7ac90; --frame-ink: #15110c; --box: #f3eedf; --box-lo: #ddd3bb; }
.front.c-U { --frame-hi: #4f8cc8; --frame-lo: #1f5a96; --frame-ink: #0b1420; --box: #dfe9f2; --box-lo: #bfd2e4; }
.front.c-B { --frame-hi: #48433f; --frame-lo: #1f1c1a; --frame-ink: #f1ece4; --box: #d2ccc4; --box-lo: #b3aba1; }
.front.c-R { --frame-hi: #d06a45; --frame-lo: #9a3a22; --frame-ink: #1c0c06; --box: #f2e0d3; --box-lo: #e0c3ae; }
.front.c-G { --frame-hi: #4f9a5e; --frame-lo: #22623a; --frame-ink: #08160c; --box: #e1ecd8; --box-lo: #c4d8b5; }
.front.c-M { --frame-hi: #e0bf6a; --frame-lo: #a57f2e; --frame-ink: #1d1406; --box: #f4e8c6; --box-lo: #e2cf98; }
.front.c-C { --frame-hi: #a8a198; --frame-lo: #6f6860; --frame-ink: #120f0b; --box: #e7e2d9; --box-lo: #cfc7b9; }
.frame {
  height: 100%;
  border-radius: 2cqw;
  padding: 2.6cqw 3.4cqw 2cqw;
  background:
    radial-gradient(120% 60% at 30% 0%, rgba(255,255,255,.18), transparent 60%),
    repeating-radial-gradient(circle at 70% 120%, rgba(0,0,0,.05) 0 1.2cqw, transparent 1.2cqw 2.6cqw),
    linear-gradient(160deg, var(--frame-hi), var(--frame-lo));
  color: var(--frame-ink);
  display: flex; flex-direction: column; gap: 1.6cqw;
}
.frame > * { flex: none; }
.nameline { display: flex; align-items: baseline; padding: 0 .6cqw; min-width: 0; }
/* --fit is set by card.js so a wide handle or type line shrinks to fit instead of being cut off */
.handle { font-family: "Almendra", "Cinzel", Georgia, serif; font-weight: 700; font-size: calc(6.4cqw * var(--fit, 1)); line-height: 1.1; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.handle.long { font-size: calc(5cqw * var(--fit, 1)); }
.bevel { border: 1.1cqw solid; border-color: rgba(0,0,0,.42) rgba(255,255,255,.35) rgba(255,255,255,.35) rgba(0,0,0,.42); }
.art { position: relative; aspect-ratio: 1.36 / 1; width: 100%; background: radial-gradient(90% 90% at 50% 40%, #3a2a16, #120d08 75%); overflow: hidden; }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 6cqw 3cqw 2cqw; background: linear-gradient(180deg, transparent, rgba(8,6,4,.85) 50%); display: grid; gap: .3cqw; }
.art.noimg .cap { inset: 0; background: none; place-content: center; text-align: center; }
.art .label { font-family: var(--display); font-size: 2.5cqw; letter-spacing: .2em; text-transform: uppercase; color: #d9c9a6; }
.art .name { font-family: "Almendra", var(--display); font-weight: 700; font-size: 5.6cqw; line-height: 1.05; color: #f0c26b; text-shadow: 0 2px 0 #000; }
.typeline { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 0 .6cqw; font-family: "Almendra", var(--display); font-weight: 700; font-size: 3.9cqw; }
.typeline span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: calc(100% * var(--fit, 1)); }
.gem { flex: none; width: 3.6cqw; height: 3.6cqw; transform: rotate(45deg); border: .35cqw solid; margin-right: .8cqw; }
.gem.mythic { background: linear-gradient(135deg, #f6b06b, #e0732f 55%, #8e3a12); border-color: #3a1405; }
.gem.rare { background: linear-gradient(135deg, #f7dc8f, #d6a34a 55%, #7d5a1c); border-color: #3a2a08; }
.gem.uncommon { background: linear-gradient(135deg, #f2f6f8, #a9b8c3 55%, #5d6b75); border-color: #24292d; }
.gem.common { background: linear-gradient(135deg, #4a4a4a, #1b1b1b 60%, #000); border-color: #000; box-shadow: 0 0 0 .3cqw rgba(255,255,255,.55); }
.textbox-front {
  flex: 1 1 auto; min-height: 0;
  background: radial-gradient(120% 90% at 50% 0%, var(--box), var(--box-lo));
  color: var(--box-ink);
  padding: 2.4cqw 3.2cqw; display: grid; align-content: start; gap: 1.8cqw;
}
.statrow { display: grid; grid-template-columns: auto 1fr; column-gap: 2.6cqw; align-items: baseline; }
.big { font-family: "Almendra", var(--display); font-weight: 700; font-size: 6.6cqw; line-height: 1; font-variant-numeric: tabular-nums; }
.statrow b { font-weight: 600; font-size: 3.9cqw; }
.statrow small { grid-column: 2; font-size: 3.15cqw; line-height: 1.25; opacity: .78; }
.flavor { font-style: italic; border-top: .25cqw solid rgba(0,0,0,.18); padding-top: 1.6cqw; margin: 0; font-size: 3.3cqw; line-height: 1.28; opacity: .85; }
.bottomline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2cqw; padding: 0 .6cqw; min-height: 5cqw; }
.illus { grid-column: 2; font-size: 2.6cqw; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt { grid-column: 3; justify-self: end; font-family: "Almendra", var(--display); font-weight: 700; font-size: 4.4cqw; white-space: nowrap; }
.pt small { font-family: var(--body); font-weight: 500; font-size: 2.8cqw; }

/* ---------- Share ---------- */
.share { display: grid; gap: 8px; }
.sharebtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--table); background: linear-gradient(180deg, #f0c26b, var(--gold)); border: 0; border-radius: 10px; padding: 14px 18px; cursor: pointer; box-shadow: 0 6px 18px rgba(214,163,74,.25); }
.sharebtn::before { content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13M7 8l5-5 5 5M5 14v5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13M7 8l5-5 5 5M5 14v5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-5'/%3E%3C/svg%3E") center/contain no-repeat; }
.sharebtn:hover { filter: brightness(1.06); }
.sharebtn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.share pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--body); font-size: 14px; line-height: 1.4; color: var(--muted); padding: 0 4px; user-select: all; }

/* ---------- Back: the details ---------- */
.back { display: grid; gap: 14px; align-content: start; min-width: 0; }
.panel { border: 1px solid var(--rule); border-radius: 10px; padding: 14px 16px; display: grid; gap: 10px; background: linear-gradient(180deg, var(--card), var(--card-deep)); }
h2 { font-family: var(--display); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0; font-weight: 700; }
dl { margin: 0; display: grid; grid-template-columns: 1fr auto; row-gap: 6px; column-gap: 12px; }
dt { color: var(--muted); }
dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }
.seasons { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; align-items: end; height: 120px; }
.bar { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; height: 100%; gap: 3px; }
.bar .v { font-size: 13px; font-variant-numeric: tabular-nums; }
.bar .col { display: block; align-self: end; width: 100%; max-width: 26px; border-radius: 3px 3px 0 0; background: var(--gold-soft); }
.bar.led .col { background: linear-gradient(180deg, #f0c26b, var(--gold)); }
.bar .s { font-family: var(--display); font-size: 11px; color: var(--muted); }
.legend { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--gold); }
.legend i.now { margin-left: 10px; background: none; border: 2px solid var(--gold); width: 6px; height: 6px; }
.bar.leading .col { background: transparent; border: 2px solid var(--gold); border-bottom: 0; box-sizing: border-box; }
.decks { display: grid; gap: 5px; }
.deck { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.deck .track { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.deck .track span { display: block; height: 100%; background: var(--gold); }
.deck .c { font-variant-numeric: tabular-nums; color: var(--muted); }
.badges { display: grid; gap: 12px; }
.badge { display: grid; gap: 1px; }
.badge b { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .02em; color: var(--gold); }
.badge span { color: var(--muted); font-size: 14px; }

footer.site { color: var(--muted); font-size: 14px; display: grid; gap: 6px; max-width: 75ch; }
footer.site p { margin: 0; }

/* ---------- Share preview image (rendered at 1200 x 630 with ?og) ---------- */
.ogside { display: none; }
html.og body { padding: 0; width: 1200px; height: 630px; overflow: hidden;
  background: radial-gradient(80% 120% at 25% 50%, #2a1f12, var(--table) 70%); }
html.og .wrap { max-width: none; display: block; }
html.og header.site, html.og .share, html.og .back, html.og footer.site { display: none; }
html.og .faces { display: grid; grid-template-columns: 430px 1fr; gap: 56px; align-items: center; height: 630px; padding: 0 64px 0 72px; }
html.og .frontcol { max-width: none; }
html.og .ogside { display: grid; gap: 18px; color: var(--ink); }
.ogside .eyebrow { font-size: 18px; }
.ogside .who { font-family: "Almendra", var(--display); font-weight: 700; font-size: 64px; line-height: 1.05; margin: 0; overflow-wrap: anywhere; }
.ogside .line { font-size: 30px; line-height: 1.3; color: var(--muted); }
.ogside .site { font-family: var(--display); font-size: 18px; letter-spacing: .08em; color: var(--gold); }

/* ---------- Front page ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.home .wrap { max-width: 760px; }
.hometitle { font-family: "Almendra", var(--display); font-weight: 700; font-size: clamp(34px, 7vw, 52px); line-height: 1.05; margin: 2px 0 4px; color: var(--ink); text-wrap: balance; }
.search { position: relative; }
.search input { width: 100%; font: inherit; font-size: 19px; padding: 14px 16px 14px 46px; border-radius: 12px; border: 1px solid var(--gold-soft); background: var(--card-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3a27f' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center / 20px; color: var(--ink); }
.search input:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
#results { list-style: none; margin: 6px 0 0; padding: 6px; border: 1px solid var(--rule); border-radius: 12px; background: var(--card-deep); display: grid; gap: 2px; }
#results a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
#results li[aria-selected="true"] a, #results a:hover { background: rgba(214,163,74,.12); }
#results .h { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#results .m { color: var(--muted); font-size: 14px; white-space: nowrap; }
#results .none { padding: 9px 10px; color: var(--muted); }
#results .gem, .board .gem { width: 11px; height: 11px; margin: 0; border-width: 1px; }
.week { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.tile { border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; background: linear-gradient(180deg, var(--card), var(--card-deep)); display: grid; gap: 2px; min-width: 0; }
.tile .k { font-family: var(--display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.tile .v { font-family: "Almendra", var(--display); font-weight: 700; font-size: 24px; overflow-wrap: anywhere; }
.tile .v a { color: var(--ink); text-decoration: none; }
.tile .v a:hover { text-decoration: underline; }
.tile .sub { color: var(--muted); font-size: 14px; }
.tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
.seg { display: inline-flex; border: 1px solid var(--gold-soft); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { font: inherit; font-size: 15px; color: var(--muted); background: none; border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--gold); color: var(--table); font-weight: 600; }
.seg button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.board { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.board li { display: grid; grid-template-columns: 2.2em auto minmax(0, 1fr) auto; grid-template-areas: "rk gem name val" ". . dk pts"; column-gap: 10px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--rule); }
.board li:first-child { border-top: 0; }
.board li.none { display: block; color: var(--muted); }
.board .rk { grid-area: rk; font-family: "Almendra", var(--display); font-weight: 700; font-size: 20px; color: var(--gold); text-align: right; font-variant-numeric: tabular-nums; }
.board .gem { grid-area: gem; }
.board a { grid-area: name; color: var(--ink); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board a:hover { text-decoration: underline; }
.board .dk { grid-area: dk; color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .val { grid-area: val; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.board .pts.led { color: var(--gold); }
.board .pts { grid-area: pts; justify-self: end; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.boards .note { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

/* Small symbols outside the card (search results, leaderboards): sized in pixels. The black
   symbol gets a thin light edge, the way a black set symbol is outlined on a card, so it shows
   on the dark background. */
#results .gem.common, .board .gem.common { box-shadow: 0 0 0 1px rgba(239,227,200,.55); border-color: #000; }
/* Numbers in Cinzel: Almendra's numerals make 11 look like the Roman numeral II */
.big, .board .rk, .tile .v.num, .pt { font-family: var(--display); }

/* Front page inside the Fourthwall embed */
html.framed, html.framed body { background: transparent; }
html.framed body { padding-block: 8px 16px; }

/* ---------- Main site header and footer: matches squeeshouseofpizza.com (Fourthwall theme:
   #1c1d21 background, white Inter Tight menu) so the cards feel like part of the site ---------- */
/* The grey bar fades into the page over 56px, the same fade the Fourthwall section uses under the site header */
.mainsite { background: linear-gradient(180deg, #1c1d21 calc(100% - 56px), rgba(28,29,33,0) 100%); padding-bottom: 56px;
  margin: calc(-1 * max(24px, env(safe-area-inset-top, 0px))) calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
  padding-top: env(safe-area-inset-top, 0px); font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif; }
.msin { position: relative; max-width: 1340px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "logo nav icons"; align-items: center; column-gap: 2rem;
  padding: 14px max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px)); }
.mslogo { grid-area: logo; }
.mslogo img { display: block; width: 100px; height: auto; object-fit: contain; }
.msnav { grid-area: nav; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.msnav > a, .msdrop > a { color: #fff; text-decoration: none; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; }
.msnav a:hover, .msmenu a:hover, .msicons a:hover, .msicons summary:hover { color: rgba(255,255,255,.6); }
.chev { margin-left: 2px; width: 6px; height: 6px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translateY(-2px); }
.msdrop { position: relative; }
.msmenu { display: none; position: absolute; top: 100%; left: -14px; z-index: 20; min-width: 220px; background: #1c1d21; border: 1px solid #34363c; border-radius: 6px; padding: 8px 0; }
.msdrop:hover .msmenu, .msdrop:focus-within .msmenu { display: grid; }
.msmenu a { color: #fff; text-decoration: none; font-size: 0.875rem; padding: 7px 16px; white-space: nowrap; }
.msicons { grid-area: icons; display: flex; align-items: center; gap: 22px; justify-self: end; }
.msicons a, .msicons summary { color: #fff; display: grid; place-items: center; }
.msicons svg { width: 20px; height: 20px; }
.mssearch summary, .msburger summary { list-style: none; cursor: pointer; }
.mssearch summary::-webkit-details-marker, .msburger summary::-webkit-details-marker { display: none; }
.mssearch form { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: #1c1d21; border-top: 1px solid #34363c; padding: 12px max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px)); }
.mssearch input { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; color: #fff; background: transparent; border: 1px solid #4a4c53; border-radius: 6px; padding: 10px 12px; }
.msburger { grid-area: burger; display: none; }
.msburger summary { color: #fff; display: grid; place-items: center; width: 32px; height: 32px; }
.msburger summary svg { width: 20px; height: 20px; }
.msmobile { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: #1c1d21; border-top: 1px solid #34363c; display: grid; padding: 8px max(16px, env(safe-area-inset-left, 0px)) 16px; }
.msmobile a { color: #fff; text-decoration: none; padding: 9px 0; font-size: 16px; }
.msmobile a.kid { padding-left: 16px; color: #c9c9cf; font-size: 15px; }
@media (max-width: 900px) {
  .msin { grid-template-columns: 1fr auto 1fr; grid-template-areas: "burger logo icons"; column-gap: 12px; }
  .msnav, .msicons .soc { display: none; }
  .msburger { display: block; justify-self: start; }
  .mslogo img { width: auto; max-height: 48px; }
  .msicons svg { width: 22px; height: 22px; }
}
.mainfoot { max-width: 900px; margin: 40px auto 0; display: flex; gap: 10px; justify-content: center; color: var(--muted); font-size: 14px; }
.mainfoot a { color: var(--muted); }
html.og .mainsite, html.og .mainfoot { display: none; }
html.framed .mainsite, html.framed .mainfoot { display: none; }

/* Season trophy leaders: a quiet roll of past winners under the leaderboards */
.leaders ol { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.leaders li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 8px 4px; border-top: 1px solid var(--rule); }
.leaders li:first-child { border-top: 0; }
.leaders .ss { font-family: var(--display); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.leaders a { color: var(--ink); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaders a:hover { text-decoration: underline; }
.leaders .tt { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 520px) { .leaders li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ss ss" "nm tt"; row-gap: 2px; }
  .leaders .ss { grid-area: ss; font-size: 11px; } .leaders a { grid-area: nm; } .leaders .tt { grid-area: tt; } }

/* Top 8 list under Challenges, collapsed by default */
.t8 { border-top: 1px solid var(--rule); padding-top: 8px; }
.t8 summary { cursor: pointer; color: var(--gold); font-size: 15px; list-style: none; display: flex; align-items: center; gap: 8px; }
.t8 summary::-webkit-details-marker { display: none; }
.t8 summary::before { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.t8[open] summary::before { transform: rotate(45deg); }
.t8 ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; max-height: 22em; overflow-y: auto; }
.t8 li { display: grid; grid-template-columns: 7.2em 5.6em minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--rule); font-size: 15px; }
.t8 li:first-child { border-top: 0; }
.t8 .d a { color: var(--ink); }
.t8 .p { font-variant-numeric: tabular-nums; white-space: nowrap; }
.t8 .p small { color: var(--muted); font-size: 13px; }
.t8 .p.won { color: var(--gold); font-weight: 600; }
.t8 .k { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.og .t8 { display: none; }

/* Narrow phones: the leaderboard switches shrink instead of pushing the page sideways */
@media (max-width: 360px) { .seg button { padding: 6px 9px; font-size: 14px; } }