/* rank area: leaderboard, bot page, player page. Loaded on every page, so every rule is scoped by .area-rank. */
.area-rank { --spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --d1: 0.15s; --d2: 0.25s; --d3: 0.45s; }
.area-rank [hidden] { display: none !important; }
.area-rank h2 { font-size: 1.25rem; margin: 2rem 0 0.7rem; }
.area-rank .page-head { margin: 1.5rem 0 1rem; }
.area-rank .page-head h1 { font-size: 1.9rem; }
.area-rank .page-head .lead { font-size: 1rem; margin-top: 0.4rem; }
.area-rank .fine { font-size: 0.8125rem; max-width: 80ch; }
.area-rank .glyph { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.area-rank .gi { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.area-rank .row-av { display: inline-block; flex: none; width: 36px; height: 36px; border-radius: 10px; overflow: hidden; border: 1px solid var(--rule); }
.area-rank .bot-cell { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.area-rank .bot-names { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.4rem; min-width: 0; }
.area-rank .bot-link { font-family: var(--font-head); font-weight: 500; font-size: 0.9375rem; color: var(--ink); text-decoration: none; }
.area-rank .bot-link:hover { color: var(--teal); text-decoration: underline; }
.area-rank .owner-line { flex-basis: 100%; color: var(--ink-2); font-size: 0.75rem; line-height: 1.2; }
.area-rank .owner-line a { color: var(--ink-2); }

/* game tabs and controls */
.area-rank .game-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0.5rem 0 0; }
.area-rank .game-tabs::-webkit-scrollbar { display: none; }
.area-rank .game-tabs a { display: inline-flex; flex: none; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 0.6rem; white-space: nowrap; transition: color var(--d1), background var(--d1); }
.area-rank .game-tabs a .gi { transition: color var(--d1), transform var(--d2) var(--spring); }
.area-rank .game-tabs a.on .gi { color: var(--teal); }
.area-rank .game-tabs a:hover .gi { transform: scale(1.15) rotate(-6deg); }
.area-rank .ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 1rem 0 0.6rem; }
.area-rank .game-title { margin: 0; font-size: 1.5rem; }
.area-rank .ctl .sort-btn { margin-left: auto; anchor-name: --rank-sort; }
.area-rank .tabs.small a { transition: background var(--d2), color var(--d2); }
/* the phone's game picker (style.css): the button is the full-width first control, the game's icon in teal */
.area-rank .game-menu-btn { width: 100%; margin: 0.5rem 0 0; }
.area-rank .game-menu-btn .gi { color: var(--teal); }
/* while rank.js fetches another view the ladder dims (after a beat, so a quick answer does not flicker) */
.area-rank .lb-view[aria-busy="true"] :is(.ladder, .crosstable) { opacity: 0.55; transition: opacity var(--d2) 0.12s; }

/* ladder card */
.area-rank .ladder { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet); margin: 0.5rem 0 1rem; padding-bottom: 0.05px; }
.area-rank .ladder.players, .area-rank .ladder.small-table { overflow-x: auto; }
.area-rank .ladder table { margin: 0; min-width: 0; }
.area-rank .ladder th { padding: 0.55rem 0.9rem; background: transparent; }
.area-rank .ladder td { padding: 0.55rem 0.9rem; vertical-align: middle; transition: background var(--d1); }
.area-rank .ladder tbody tr { animation: rk-row 0.45s var(--ease-out) both; }
.area-rank .ladder tbody tr:last-child td { border-bottom: 0; }
.area-rank .ladder tbody tr:hover td { background: var(--hover); }
.area-rank .ladder tr:nth-child(2) { animation-delay: 30ms; } .area-rank .ladder tr:nth-child(3) { animation-delay: 60ms; }
.area-rank .ladder tr:nth-child(4) { animation-delay: 90ms; } .area-rank .ladder tr:nth-child(5) { animation-delay: 120ms; }
.area-rank .ladder tr:nth-child(6) { animation-delay: 150ms; } .area-rank .ladder tr:nth-child(7) { animation-delay: 180ms; }
.area-rank .ladder tr:nth-child(8) { animation-delay: 210ms; } .area-rank .ladder tr:nth-child(9) { animation-delay: 240ms; }
.area-rank .ladder tr:nth-child(10) { animation-delay: 270ms; } .area-rank .ladder tr:nth-child(n+11) { animation-delay: 300ms; }
@keyframes rk-row { from { opacity: 0; transform: translateY(8px); } }
.area-rank .ladder tr.mine td { background: color-mix(in srgb, var(--teal) 6%, transparent); }
.area-rank .ladder tr.mine td:first-child { box-shadow: inset 3px 0 0 var(--teal); }
.area-rank .ladder td.rank { width: 3.2rem; color: var(--ink-2); }
.area-rank .ladder tr:nth-child(-n+3) td.rank { color: var(--ink); }
.area-rank .rt-line { display: inline-flex; align-items: center; gap: 0.5rem; justify-content: flex-end; }
.area-rank .rt-num { font-size: 0.9375rem; font-weight: 700; min-width: 2.6rem; text-align: right; }
.area-rank .sort-val { display: none; color: var(--ink); font-family: var(--font); font-size: 0.75rem; font-weight: 600; white-space: nowrap; margin-top: 0.1rem; }
.area-rank .est { display: block; color: var(--ink-2); font-family: var(--font); font-size: 0.75rem; font-weight: 400; white-space: nowrap; margin-top: 0.1rem; }
.area-rank .dl { display: inline-flex; align-items: center; padding: 0 0.45rem; border-radius: 999px; border: 1px solid currentColor; font: 500 0.75rem var(--font-mono); white-space: nowrap; }
.area-rank .dl.up { color: var(--check); } .area-rank .dl.dn { color: var(--coral); } .area-rank .dl.z { color: var(--ink-2); }
.area-rank .spk { display: block; width: 84px; height: 26px; overflow: visible; }
.area-rank .spk polyline { fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.area-rank .spk circle { fill: var(--teal); }
.area-rank .spk-none { font-size: 0.75rem; }
.area-rank .c-trend { width: 7rem; }
.area-rank .wdl { white-space: nowrap; min-width: 8.5rem; }
.area-rank .wdl-text { display: block; font-size: 0.75rem; }
.area-rank .wdl-text .muted { font-family: var(--font); }
.area-rank .wdl-bar { display: block; width: 100%; height: 6px; border-radius: 6px; margin-top: 0.3rem; background: var(--rule); overflow: hidden; }
.area-rank .wdl-bar.big { margin-top: 0.5rem; height: 8px; }
.area-rank .wdl-bar .bw { fill: var(--teal); }
.area-rank .wdl-bar .bd { fill: var(--rule-strong); }
.area-rank .wdl-bar .bl { fill: var(--coral); }
.area-rank .pips { display: inline-flex; gap: 0.25rem; vertical-align: middle; }
.area-rank .pip { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; font: 600 0.75rem var(--font-mono); border: 1.5px solid var(--rule-strong); color: var(--ink-2); }
.area-rank .pip.w { background: var(--teal); border-color: var(--teal); color: var(--on-action); }
.area-rank .pip.l { border-color: var(--coral); color: var(--coral); }
.area-rank .pip.d { border-style: dashed; }
.area-rank .empty-row td, .area-rank .empty-card { display: grid; justify-items: center; gap: 0.35rem; padding: 2.5rem 1rem; text-align: center; }
.area-rank .empty-row td { display: table-cell; }
.area-rank .empty p { margin: 0.2rem 0; }
.area-rank .empty-card { background: var(--sheet); border: 1px dashed var(--rule-strong); border-radius: var(--r-sheet); }
.area-rank .empty-card p { margin: 0; }
.area-rank .empty-ic { width: 40px; height: 40px; fill: none; stroke: var(--rule-strong); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 0.4rem; }
.area-rank .rchip { display: inline-flex; gap: 0.4rem; margin: 0.1rem 0.35rem 0.1rem 0; padding: 0 0.6rem; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink); font-size: 0.8125rem; text-decoration: none; transition: border-color var(--d1), background var(--d1); }
.area-rank .rchip:hover { border-color: var(--teal); background: var(--hover); }
.area-rank .you-row { position: sticky; bottom: 0.75rem; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; margin: 0.5rem 0.75rem 0.75rem; padding: 0.5rem 0.85rem; background: var(--hover); border: 1px solid var(--teal); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55); animation: rk-pop 0.5s var(--spring) 0.3s both; }
.area-rank .you-label { font-weight: 700; color: var(--teal); }
.area-rank .you-rating { font-size: 0.9375rem; }
.area-rank .you-row .ghost-link { margin-left: auto; }

/* crosstable */
.area-rank .card { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet); padding: 1rem 1.1rem 0.6rem; margin: 1.5rem 0; }
.area-rank .crosstable h2 { margin: 0 0 0.3rem; font-size: 1.1rem; }
.area-rank .crosstable > p { font-size: 0.8125rem; margin: 0 0 0.5rem; }
.area-rank .crosstable .table-wrap { border: 0; background: transparent; margin: 0; }
.area-rank table.xt { min-width: 36rem; }
.area-rank table.xt th, .area-rank table.xt td { text-align: center; white-space: nowrap; padding: 0.45rem 0.7rem; }
.area-rank table.xt tbody th { text-align: left; }
.area-rank table.xt td.diag { color: var(--rule-strong); }
.area-rank table.xt td.pos { background: color-mix(in srgb, var(--check) 7%, transparent); } .area-rank table.xt td.neg { background: color-mix(in srgb, var(--err) 7%, transparent); }

/* bot profile */
.area-rank .bot-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.25rem 1.5rem; align-items: center; margin: 1rem 0 1rem; padding: 1.25rem 1.4rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; position: relative; overflow: hidden; animation: rk-pop 0.5s var(--ease-out) both; }
.area-rank .bot-hero::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 1px solid var(--rule); box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.015), 0 0 0 60px rgba(255, 255, 255, 0.01); pointer-events: none; }
.area-rank .hero-av { display: block; width: 96px; height: 96px; border-radius: 24px; overflow: hidden; border: 2px solid var(--teal); }
.area-rank .hero-av.small-av { width: 64px; height: 64px; border-radius: 16px; }
.area-rank .player-head { display: flex; align-items: center; gap: 1rem; }
.area-rank .hero-main h1 { margin: 0; font-size: 2rem; overflow-wrap: anywhere; }
.area-rank .subline { margin: 0.2rem 0 0; color: var(--ink-2); font-size: 0.8125rem; }
.area-rank .hero-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0.4rem 0; color: var(--ink-2); font-size: 0.875rem; }
.area-rank .hero-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0; }
.area-rank .hero-rating { display: grid; justify-items: end; gap: 0.2rem; text-align: right; position: relative; }
.area-rank .hero-game { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ink-2); font-weight: 600; }
.area-rank .big-rating { font-family: var(--font-mono); font-size: 2.75rem; font-weight: 700; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.area-rank .hero-sub { color: var(--ink-2); font-size: 0.8125rem; }
.area-rank .hero-sub .tag { margin-left: 0.4rem; }
.area-rank .facts-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.6rem; margin: 0 0 0.5rem; }
.area-rank .fact { display: grid; align-content: start; gap: 0.3rem; padding: 0.7rem 0.9rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet); }
.area-rank .fact.wide { grid-column: span 2; }
.area-rank .fact-k { color: var(--ink-2); font-size: 0.75rem; }
.area-rank .fact-v { font-size: 0.875rem; }
.area-rank .fact-v.num { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700; }
.area-rank .game-pick { display: inline-flex; flex-wrap: wrap; margin: 0 0 0.75rem; }
.area-rank .game-pick a { display: inline-flex; align-items: center; gap: 0.4rem; }
.area-rank .game-pick a.on .gi { color: inherit; }

.area-rank .chartwrap { position: relative; padding: 0.75rem 0.85rem 0.6rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; }
.area-rank .chartwrap:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.area-rank .chart { display: block; width: 100%; height: auto; touch-action: pan-y; cursor: crosshair; }
.area-rank .chart .gl { stroke: var(--rule); stroke-width: 1; }
.area-rank .chart .ax { fill: var(--ink-2); font: 11px var(--font-mono); }
.area-rank .chart .chart-area { fill: var(--teal); fill-opacity: 0.07; stroke: none; }
.area-rank .chart .chart-line { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; animation: rk-draw 1.1s var(--ease-out) both; }
@keyframes rk-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.area-rank .chart .pt { fill: var(--teal); }
.area-rank .chart .xh { stroke: var(--ink-2); stroke-dasharray: 3 3; }
.area-rank .chart .hd { fill: var(--paper); stroke: var(--teal); stroke-width: 3; }
.area-rank .chart .tip rect { fill: var(--hover); stroke: var(--rule-strong); }
.area-rank .chart .tip text { fill: var(--ink); font: 12px var(--font-mono); }
.area-rank .chart-readout { margin: 0.4rem 0 0; font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink); }
.area-rank .tab-rt { font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.85; }

.area-rank .two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 1.5rem; align-items: start; }
.area-rank .rivals { display: grid; gap: 0.6rem; }
.area-rank .rival { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.7rem; padding: 0.7rem 0.9rem; background: var(--sheet); border: 1px solid var(--rule); border-left: 3px solid var(--rule-strong); border-radius: var(--r-sheet); font-size: 0.875rem; }
.area-rank .rival.nemesis { border-left-color: var(--coral); } .area-rank .rival.favourite { border-left-color: var(--teal); }
.area-rank .rv-k { flex-basis: 100%; font-size: 0.75rem; color: var(--ink-2); font-weight: 600; }
.area-rank .rv-name { font-family: var(--font-head); font-weight: 600; font-size: 1rem; }
.area-rank .rival .btn { margin-left: auto; }
.area-rank .small-table table { font-size: 0.8125rem; }

.area-rank .ach { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.6rem; margin: 0.75rem 0 0; padding: 0; }
.area-rank .ach li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 0.75rem; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-sheet); animation: rk-row 0.45s var(--ease-out) both; transition: border-color var(--d1), transform var(--d2) var(--spring); }
.area-rank .ach li.got { border-color: color-mix(in srgb, var(--teal) 45%, transparent); }
.area-rank .ach li:hover { transform: translateY(-2px); }
.area-rank .ach li.lk { background: transparent; border-style: dashed; }
.area-rank .ach li.lk b { color: var(--ink-2); }
.area-rank .ach small { display: block; color: var(--ink-2); font-size: 0.8125rem; margin-top: 0.15rem; }
.area-rank .ach .state { font-size: 0.75rem; font-weight: 600; padding: 0 0.4rem; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink-2); white-space: nowrap; }
.area-rank .ach li.got .state { color: var(--teal); border-color: var(--teal); }
.area-rank .medal { width: 44px; height: 44px; fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.area-rank .got .medal { stroke: var(--teal); fill: color-mix(in srgb, var(--teal) 10%, transparent); }
.area-rank .lk .medal circle { stroke-dasharray: 4 3; }

.area-rank .share-dialog { width: min(34rem, calc(100vw - 2rem)); padding: 1.1rem; }       /* the shared dialog look comes from .dlg */
.area-rank .share-dialog h2 { margin: 0 0 0.75rem; font-size: 1.1rem; }
.area-rank .share-card { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--teal); border-radius: var(--r-sheet); background: var(--sheet); }
.area-rank .sc-av { display: block; width: 84px; height: 84px; border-radius: 20px; overflow: hidden; border: 2px solid var(--teal); }
.area-rank .sc-body { display: grid; gap: 0.15rem; min-width: 0; }
.area-rank .sc-name { font: 600 1.25rem var(--font-head); overflow-wrap: anywhere; }
.area-rank .sc-game, .area-rank .sc-rec, .area-rank .sc-badges { color: var(--ink-2); font-size: 0.875rem; }
.area-rank .sc-rating { font: 700 2rem var(--font-mono); color: var(--ink); }
.area-rank .share-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; margin-top: 0.9rem; }

@media (max-width: 960px) {
  .area-rank .facts-grid { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  .area-rank .c-trend { display: none; }
  .area-rank .two-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) { .area-rank .c-last { display: none; } }
@media (max-width: 700px) {
  .area-rank .c-opt, .area-rank .c-wdl, .area-rank .c-sort { display: none; }
  .area-rank .sort-val { display: block; }
  .area-rank .ladder th, .area-rank .ladder td { padding: 0.5rem 0.55rem; }
  .area-rank .bot-hero { grid-template-columns: auto minmax(0, 1fr); padding: 1rem; }
  .area-rank .hero-rating { grid-column: 1 / -1; justify-items: start; text-align: left; }
  .area-rank .hero-av { width: 64px; height: 64px; border-radius: 16px; }
  .area-rank .hero-main h1 { font-size: 1.5rem; }
  .area-rank .fact.wide { grid-column: 1 / -1; }
  .area-rank .rival .btn { margin-left: 0; }
  .area-rank .share-card { grid-template-columns: 64px minmax(0, 1fr); }
  .area-rank .sc-av { width: 64px; height: 64px; border-radius: 16px; }
  .area-rank .ctl .sort-btn { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .area-rank *, .area-rank *::before { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .area-rank .chart .chart-line { stroke-dasharray: none; }
}
@keyframes rk-pop { from { opacity: 0; transform: translateY(12px) scale(0.92); } }

/* Phone: tighter cells so the ladder fits the screen; the wrapper scrolls as a last resort. */
.area-rank .ladder { overflow-x: auto; }
@media (max-width: 700px) { .area-rank .ladder th, .area-rank .ladder td { padding-inline: 0.3rem; } .area-rank .ladder th:first-child, .area-rank .ladder td:first-child { padding-left: 0.6rem; } }
/* A narrow phone: the 7-day change goes under the rating and the estimate wraps, so the rating column fits beside the bot. */
@media (max-width: 480px) { .area-rank .ladder .rt-line { flex-wrap: wrap; gap: 0.15rem 0.4rem; } .area-rank .ladder .est { white-space: normal; } }