/* The leaderboards page (site/src/leaderboards-page.ts). Built on /site/pages.css; the games' pictures are
   /site/tile-art.css. Wide: the list of games beside the board, which stays in view. Phones (760px and less):
   the list, then a board on its own. */
body.lb-body { margin: 0; min-height: 100vh; background: #04070a radial-gradient(ellipse 120% 70% at 50% -12%, #173039 0, #0a171f 38%, #04070a 72%) no-repeat; color: #f8f0dc; }
.gu-page #page { max-width: 1200px; margin: 0 auto; padding: calc(60px + env(safe-area-inset-top, 0px) + 44px) 24px 56px; box-sizing: border-box; font-family: var(--gu-sans); }
.lb { display: flex; flex-direction: column; gap: 28px; }
.lb .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lb-hero h1 { margin: 0; font: 400 52px/1.05 var(--gu-serif); color: #f8f0dc; letter-spacing: -.01em; }
.lb-lead { margin: 8px 0 0; font-size: 17px; line-height: 1.5; color: #d9cfbd; }


.lb-layout { display: grid; grid-template-columns: minmax(240px, 288px) minmax(0, 1fr); gap: 24px; align-items: start; }

/* the games: a search, and the list, by kind; on a wide screen it stays beside the board and scrolls on its own */
.lb-side { position: sticky; top: 84px; max-height: calc(100vh - 100px); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lb-search { position: relative; display: block; }
.lb-search-icon { position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; stroke: #c7d4d4; stroke-width: 2; fill: none; stroke-linecap: round; pointer-events: none; }
.gu-page .lb-search input[type=search] { box-sizing: border-box; width: 100%; height: 44px; margin: 0; padding: 0 14px 0 42px; border-radius: 12px; border: 1px solid #d7e3e75c; background: #0a161ecc; color: #f8f0dc; font: 15px var(--gu-sans); }
.gu-page .lb-search input[type=search]::placeholder { color: #8fa3a6; }
.gu-page .lb-search input[type=search]:focus { outline: 2px solid #dbbc76; outline-offset: 2px; border-color: #dbbc76a6; }
.lb-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #d7e3e73d transparent; display: flex; flex-direction: column; gap: 1px; padding: 6px 6px 28px;
  /* the foot fades, so it's plain there's more below (the padding lets the last game clear it) */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), #0000); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 32px), #0000); border: 1px solid #d7e3e73d; border-radius: 18px; background: linear-gradient(145deg, #14242ed9, #081117e6); }
.gu-page a.lb-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; padding: 4px 10px; box-sizing: border-box; border-radius: 10px; border: 1px solid transparent; color: #f8f0dc; text-decoration: none; transition: background .15s; }
.gu-page a.lb-item:hover { background: #ffffff0a; }
.gu-page a.lb-item[aria-current=true] { background: #dbbc761a; border-color: #dbbc7680; }
.gu-page a.lb-item:focus-visible { outline: 2px solid #dbbc76; outline-offset: 2px; }
.lb-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-item-name { font: 16px/1.2 var(--gu-serif); }
.lb-item-mine { min-width: 32px; height: 20px; padding: 0 7px; box-sizing: border-box; border-radius: 999px; border: 1px solid; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; }
/* their place on the podium: outlined in its medal's colour */
.lb-item-mine-1 { color: #f5dfaa; border-color: #dbbc76; }
.lb-item-mine-2 { color: #e3ecec; border-color: #c7d4d4; }
.lb-item-mine-3 { color: #e8b48a; border-color: #c58b5a; }
.lb-chev { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lb-item-chev { display: none; }
.lb-nomatch { margin: 4px 6px; color: #a9babd; font-size: 14px; }
/* signed in, the games played lately first; then the games by kind, each under a quiet heading, a rule between */
.lb-list-label { margin: 0; padding: 8px 10px 4px; font-size: 13px; font-weight: 600; color: #a9babd; }
.lb-list-label.lb-list-rest { margin-top: 6px; padding-top: 12px; border-top: 1px solid #d7e3e71f; }

/* the games' pictures, small */
.lb-art { display: flex; align-items: center; justify-content: center; flex: none; }
.lb-art-list { width: 36px; height: 30px; }
.lb-art-list .choice-art { zoom: .2; }
.lb-art-list .blockfall-art { zoom: .16; }
.lb-art-board { width: 72px; height: 60px; }
.lb-art-board .choice-art { zoom: .39; }
.lb-art-board .blockfall-art { zoom: .32; }

/* the board, kept in view beside the list (its top worked out so a tall board's foot shows too); signed in, the
   player's statistics follow it down the page instead */
.lb-main { position: sticky; top: var(--lb-top, 84px); min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.lb-main.lb-main-mine { position: static; }
.lb-board-slot, .lb-mine-slot { min-width: 0; }
.lb-mine-slot:empty { display: none; }
.lb-board { display: flex; flex-direction: column; gap: 20px; padding: 26px 30px; border: 1px solid #d7e3e73d; border-radius: 20px; background: linear-gradient(145deg, #14242ed9, #081117e6); box-shadow: 0 24px 60px #00000080, inset 0 1px #ffffff11; }
.lb-back, .lb-arrow, .lb-play-foot { display: none; }
.lb-board-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.lb-title { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lb-title h2 { margin: 0; font: 400 32px/1.1 var(--gu-serif); color: #f8f0dc; }
.lb-title h2:focus { outline: none; }
.lb-measure { margin: 0; font-size: 16px; line-height: 1.4; color: #d9cfbd; }
.gu-page a.lb-play { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; box-sizing: border-box; border-radius: 999px; background: #dbbc76; color: #081117; font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; transition: background .2s; }
.gu-page a.lb-play:hover { background: #e8cf92; }
.gu-page a.lb-play-foot { display: none; }
.gu-page a.lb-play:focus-visible, .gu-page .lb-board a:focus-visible { outline: 2px solid #dbbc76; outline-offset: 3px; }

/* Mode (Pure, Gravity), or Table and Board (pinball), and Computer (Normal, Hard) */
.lb-switches { display: flex; gap: 12px 28px; flex-wrap: wrap; align-items: center; }
.lb-switch { display: flex; align-items: center; gap: 10px; }
.lb-switch-label { min-width: 42px; font-size: 14px; color: #a9babd; }
.lb-modes:has(+ .lb-kinds) { flex-basis: 100%; }
.lb-segs { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid #d7e3e73d; background: #060d12; }
.lb-seg { min-height: 38px; padding: 0 16px; white-space: nowrap; border-radius: 999px; border: 0; background: transparent; color: #d9cfbd; font: 500 14px var(--gu-sans); cursor: pointer; transition: background .15s, color .15s; }
.lb-seg:hover { color: #f8f0dc; }
.lb-seg[aria-pressed=true] { background: #dbbc76; color: #081117; }
.lb-seg:focus-visible { outline: 2px solid #dbbc76; outline-offset: 2px; }

/* the top three: silver, gold (tallest, in the middle), bronze; low steps, so the rest of the ten are close by */
.lb-podium { list-style: none; margin: 0; padding: 4px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; }
.lb-step { grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.lb-step.lb-gold { grid-column: 2; }
.lb-step.lb-silver { grid-column: 1; }
.lb-step.lb-bronze { grid-column: 3; }
.lb-medal { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; box-sizing: border-box; border-radius: 50%; color: #081117; font-weight: 700; font-size: 17px; box-shadow: inset 0 -3px 0 #00000033; }
.lb-gold .lb-medal { background: #dbbc76; }
.lb-silver .lb-medal { background: #c7d4d4; }
.lb-bronze .lb-medal { background: #c58b5a; }
.lb-step .lb-name { display: block; max-width: 100%; font: 20px/1.2 var(--gu-serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-step-score { font-size: 15px; color: #f5dfaa; font-variant-numeric: tabular-nums; }
.lb-block { width: 100%; border-radius: 12px 12px 4px 4px; background: #ffffff0d; border-top: 3px solid; }
.lb-gold .lb-block { height: 52px; border-color: #dbbc76; }
.lb-silver .lb-block { height: 34px; border-color: #c7d4d4; }
.lb-bronze .lb-block { height: 20px; border-color: #c58b5a; }
.lb-step-me .lb-block { background: #dbbc7624; }
.lb-step-empty .lb-medal { background: transparent; box-shadow: none; border: 2px dashed #d7e3e75c; color: #a9babd; }
.lb-step-empty .lb-block { border-top-style: dashed; opacity: .55; }
.lb-nobody { color: #a9babd; font-style: italic; }
.lb-you { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #f5dfaa; color: #081117; font: 700 12px/1.3 var(--gu-sans); vertical-align: 2px; }
.lb-step .lb-you { margin: 0; vertical-align: 0; }

/* places 4 to 10 */
.lb-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.lb-table th, .lb-table td { height: 42px; padding: 0 12px; border-bottom: 1px solid #d7e3e71f; text-align: left; }
.lb-table tbody tr:last-child td { border-bottom: 0; }
.lb-table th { font-size: 13px; font-weight: 500; color: #a9babd; }
.lb-table .rank { width: 56px; color: #a9babd; font-variant-numeric: tabular-nums; }
.lb-table .who { color: #f8f0dc; word-break: break-word; }
.lb-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-table td.score { color: #f8f0dc; }
.lb-table .when { width: 120px; }
.lb-table td.when { color: #a9babd; }
.lb-table tr.me td { background: #dbbc761f; }
.lb-table tr.me td:first-child { border-radius: 10px 0 0 10px; color: #f5dfaa; font-weight: 700; }
.lb-table tr.me td:last-child { border-radius: 0 10px 10px 0; }
.lb-when-sm { display: none; }

/* the player's place below the top ten */
.lb-pinned { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 12px; border-radius: 14px; background: #dbbc761f; border: 1px solid #dbbc7666; }
.lb-pinned-rank { font-weight: 700; color: #f5dfaa; font-variant-numeric: tabular-nums; }
.lb-pinned-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lb-pinned-hint { font-size: 13px; color: #c7d4d4; }
.gu-page a.lb-pinned-play { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-weight: 600; font-size: 15px; color: #f5dfaa; }

/* a board nobody's on yet */
.lb-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px 24px; border: 1px dashed #d7e3e75c; border-radius: 16px; text-align: center; }
.lb-empty p { margin: 0; font-size: 15px; color: #c7d4d4; }
.lb-empty .lb-empty-title { font: 24px/1.25 var(--gu-serif); color: #f8f0dc; }
.gu-page a.lb-empty-play { display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px; font-weight: 600; color: #f5dfaa; }

.lb-board-foot { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid #d7e3e71f; font-size: 13px; line-height: 1.5; color: #a9babd; }

/* the player's own statistics for the game (pages.css draws the numbers, charts and scorecard: .room-page) */
.gu-page.room-page.lb-mine { container: lb-mine / inline-size; display: flex; flex-direction: column; gap: 20px; padding: 0; }
.lb-mine-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.lb-mine-head h2 { margin: 0; font: 400 32px/1.15 var(--gu-serif); color: #f8f0dc; }
.lb-mine-filter .lb-segs { flex-wrap: wrap; border-radius: 24px; }
.lb-mine .page.stats { gap: 20px; }
.lb-mine .page.stats > .fine { max-width: none; }
.lb-mine-note { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0; padding: 22px 26px; border-radius: 20px; border: 1px solid #d7e3e73d;
  background: linear-gradient(145deg, #14242ee6, #081117ee); color: #c7d4d4; font-size: 15px; }
.lb-mine-note p { margin: 0; }
.lb-mine-empty { padding: 40px 24px; }
@container lb-mine (max-width: 680px) {
  .lb-mine .charts { columns: 1; }
  .lb-mine .charts > .chart:last-child:nth-child(odd) { margin-top: 0; }
}

@media (max-width: 1000px) {
  .lb-layout { grid-template-columns: minmax(220px, 256px) minmax(0, 1fr); gap: 18px; }
  .lb-board { padding: 24px; }
  .lb-title h2 { font-size: 30px; }
  .lb-table .when { width: auto; }
}

/* phones: the list is one screen, a board another */
@media (max-width: 760px) {
  .gu-page #page { padding: calc(60px + env(safe-area-inset-top, 0px) + 24px) 16px 40px; }
  .lb { gap: 20px; }
  .lb-hero h1 { font-size: 34px; line-height: 1.1; }
  .lb-lead { margin-top: 6px; font-size: 15px; }
  .lb-lead-more { display: none; }
  .lb-layout { display: block; }
  .lb-side { position: static; max-height: none; }
  .lb-list { overflow: hidden; padding-bottom: 0; mask-image: none; -webkit-mask-image: none; }
  .lb[data-view=board] .lb-hero, .lb[data-view=board] .lb-side { display: none; }
  .lb[data-view=list] .lb-main { display: none; }
  .lb-main { position: static; gap: 24px; }
  .lb-mine-head { flex-direction: column; align-items: stretch; }
  .lb-mine-head h2 { font-size: 26px; }
  .lb-mine-filter .lb-segs { flex: 1 1 auto; display: flex; flex-wrap: wrap; border-radius: 22px; }
  .lb-mine-filter .lb-seg { flex: 1 1 auto; padding: 0 12px; white-space: nowrap; }
  .lb-mine-note { padding: 18px 16px; border-radius: 18px; }


  .gu-page .lb-search input[type=search] { font-size: 16px; }
  .lb-list { padding: 0; gap: 0; overflow: hidden; }
  .gu-page a.lb-item { grid-template-columns: 40px minmax(0, 1fr) auto 12px; min-height: 54px; padding: 8px 14px; border: 0; border-radius: 0; border-bottom: 1px solid #d7e3e71a; }
  .gu-page a.lb-item:last-of-type { border-bottom: 0; }
  .lb-list-label { padding: 12px 14px 6px; }
  .lb-list-label.lb-list-rest { margin-top: 0; }
  .gu-page a.lb-item[aria-current=true] { background: transparent; }
  .gu-page a.lb-item:focus-visible { outline-offset: -2px; }
  .lb-item-chev { display: block; width: 12px; height: 12px; stroke: #a9babd; stroke-width: 3; }

  .lb-board { gap: 16px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .gu-page a.lb-back { display: inline-flex; align-self: flex-start; align-items: center; gap: 4px; min-height: 44px; margin: -10px 0 -6px -8px; padding: 0 10px 0 6px; color: #f8f0dc; font-size: 16px; text-decoration: none; border-radius: 10px; }
  .lb-back .lb-chev { width: 18px; height: 18px; }
  .lb-board-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-areas: "prev art next" "prev title next"; gap: 12px 4px; justify-items: center; align-items: center; text-align: center; }
  .lb-arrow { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid #d7e3e73d; background: #0a161ecc; color: #f8f0dc; cursor: pointer; }
  .lb-arrow:first-child { grid-area: prev; }
  .lb-arrow:last-child { grid-area: next; }
  .lb-arrow:focus-visible { outline: 2px solid #dbbc76; outline-offset: 2px; }
  .lb-art-board { grid-area: art; width: 84px; height: 64px; }
  .lb-art-board .choice-art { zoom: .42; }
  .lb-art-board .blockfall-art { zoom: .35; }
  .lb-title { grid-area: title; align-items: center; }
  .lb-title h2 { font-size: 30px; }
  .lb-measure { font-size: 14px; }
  .gu-page a.lb-play-head { display: none; }
  .gu-page a.lb-play-foot { display: flex; min-height: 50px; font-size: 16px; }

  .lb-switches { flex-direction: column; align-items: stretch; gap: 10px; }
  .lb-switch { gap: 10px; }
  .lb-switch-label-sm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lb-switch-label { min-width: 0; }
  .lb-segs { flex: 1 1 auto; display: flex; }
  .lb-seg { flex: 1 1 0; padding: 0 8px; }

  .lb-podium { gap: 10px; padding-top: 6px; }
  .lb-step { gap: 6px; }
  .lb-medal { width: 34px; height: 34px; font-size: 15px; }
  .lb-step .lb-name { font-size: 16px; }
  .lb-step-score { font-size: 14px; }
  .lb-gold .lb-block { height: 44px; }
  .lb-silver .lb-block { height: 28px; }
  .lb-bronze .lb-block { height: 16px; }

  .lb-table { border-collapse: separate; border-spacing: 0; border: 1px solid #d7e3e73d; border-radius: 16px; background: linear-gradient(145deg, #14242ed9, #081117e6); }
  .lb-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lb-table td { height: 54px; padding: 6px 8px; border-bottom-color: #d7e3e71a; }
  .lb-table td:first-child { padding-left: 14px; }
  .lb-table td.score { padding-right: 14px; }
  .lb-table .rank { width: 30px; }
  .lb-table .when { display: none; }
  .lb-table .who { font-size: 16px; }
  .lb-when-sm { display: block; margin-top: 1px; font-size: 12px; color: #a9babd; }
  .lb-table tr.me td:first-child { border-radius: 0; }
  .lb-table tr.me td.score { border-radius: 0; }

  .lb-pinned { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 12px 14px; }
  .lb-empty { padding: 40px 20px; }
  .lb-empty .lb-empty-title { font-size: 22px; }
  .gu-page a.lb-empty-play { display: none; }
  .lb-board-foot { flex-direction: column; align-items: center; text-align: center; border-top: 0; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .gu-page a.lb-item, .gu-page a.lb-play, .lb-seg { transition: none; }
}

/* the casino games' achievements, under the member's statistics: a glass card like the charts beside it */
.lb-mine .cz-achievements { display: flex; flex-direction: column; gap: 4px; padding: 24px 26px; border-radius: 20px; border: 1px solid var(--edge); background: var(--glass); }
.lb-mine .cz-achievements > small { font-size: 14px; color: var(--mute); }
.lb-mine .cz-achievements h2 { margin: 0 0 12px; font: 400 24px/1.2 var(--gu-serif); color: var(--ink); }
.lb-mine .cz-achievements ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.lb-mine .cz-achievements li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: #ffffff08; border: 1px solid #d7e3e71f; opacity: .62; }
.lb-mine .cz-achievements li.earned { opacity: 1; border-color: #dbbc7666; background: #dbbc7612; }
.lb-mine .cz-achievements li i { font-style: normal; font-size: 20px; line-height: 1; color: var(--gold); }
.lb-mine .cz-achievements li strong { display: block; font-size: 15px; color: var(--ink); }
.lb-mine .cz-achievements li span { display: block; font-size: 13px; color: var(--mute); }
.lb-mine .cz-achievements li small { display: block; margin-top: 2px; font-size: 12px; color: var(--mute); }
@media (max-width: 640px) { .lb-mine .cz-achievements { padding: 18px 16px; border-radius: 18px; } }