/* Figma podium, in TokenWhale's existing paper / ink / violet palette. */
.view-rank { --rank-accent:#5a52ff; }
html[data-theme="dark"] .view-rank { --rank-accent:#a49dff; }
@media(prefers-color-scheme:dark) { html:not([data-theme="light"]) .view-rank { --rank-accent:#a49dff; } }
.view-rank #app .rank-head { align-items:center; gap:24px; }
.view-rank #app .rank-head h2 { font-size:clamp(30px,3.8vw,48px); letter-spacing:-.045em; }
.view-rank #app #period-seg button::after { background:var(--rank-accent); height:3px; }
.view-rank #app .rank-ctl { margin:20px 0 24px; padding:0; border:0; }
.view-rank #app #scope-seg { gap:22px; }
.view-rank #app #scope-seg .sep { display:none; }
.view-rank #app #scope-seg button { font-size:15px; }
.view-rank #app #board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:20px; align-items:end; border:0; }
.view-rank #app #board > li { grid-column:1/-1; }
.view-rank #app #board:not(:has([data-podium="3"])) { grid-template-columns:repeat(2,minmax(0,1fr)); }
.view-rank #app #board .rank-player { position:relative; display:grid; grid-template-columns:48px minmax(140px,1.5fr) minmax(120px,1fr) minmax(90px,.7fr) minmax(130px,1fr); grid-template-areas:"place name tier tokens amount"; align-items:center; gap:16px; padding:18px 16px; margin:0; border:0; border-bottom:1px solid var(--hair); background:none; color:var(--ink); min-width:0; }
.view-rank #app #board .rank-player.me { background:var(--wash); box-shadow:inset 3px 0 var(--rank-accent); }
.view-rank #app #board .rank-player .rk { grid-area:place; font-size:28px; font-weight:850; padding:0; line-height:1; color:var(--ink2); }
.view-rank #app #board .rank-player .name { grid-area:name; display:flex; align-items:center; gap:10px; margin:0; min-width:0; width:100%; text-align:left; font-size:18px; line-height:1.3; }
.view-rank #app #board .rank-player .name::after { content:""; position:absolute; inset:0; }
.view-rank #app #board .rank-player:has(.name:focus-visible) { outline:3px solid var(--rank-accent); outline-offset:3px; }
.view-rank #app #board .rank-player .name:focus-visible { outline:none; }
.view-rank #app #board .rank-player .nm { font-size:inherit; font-weight:800; letter-spacing:-.025em; overflow-wrap:anywhere; text-wrap:pretty; }
.view-rank #app #board .rank-player .handle { font-size:11px; overflow-wrap:anywhere; }
.view-rank #app #board .rank-player .av { width:32px; height:32px; flex:none; }
.view-rank #app #board .rank-player .rank-you { display:inline-block; margin-left:6px; font-size:11px; font-weight:700; color:var(--rank-accent); vertical-align:middle; }
.view-rank #app #board .rank-player .rank-tier { grid-area:tier; flex-direction:row; width:auto; gap:8px; text-align:left; font-size:12px; line-height:1.3; color:var(--ink2); }
.view-rank #app #board .rank-player .tier-art { width:52px; height:52px; flex:none; }
.view-rank #app #board .rank-player .rank-tokens { grid-area:tokens; display:block; margin:0; font-size:12px; color:var(--ink2); }
.view-rank #app #board .rank-player .amt-cell { grid-area:amount; display:flex; flex-direction:column; align-items:flex-end; justify-self:stretch; min-width:0; width:auto; gap:10px; }
.view-rank #app #board .rank-player .amt-cell::after { display:none; }
.view-rank #app #board .rank-player .amt { font-size:30px; letter-spacing:-.045em; line-height:1.1; font-weight:850; }
.view-rank #app #board .rank-player .mix { width:100%; height:4px; margin:0; --track:100%; --bar:4px; }
.view-rank #app #board .rank-player .mix::after { display:none; }
.view-rank #app #board .rank-row-action { display:flex; align-items:center; justify-content:flex-end; grid-column:2/-1; justify-self:end; position:relative; z-index:1; margin-top:-8px; }
.view-rank #app #board .rank-row-action .linkish { font-size:11px; min-height:28px; margin:0; padding:4px; }
.view-rank #app #board .rank-row-action.is-pending { min-height:28px; pointer-events:none; }
.view-rank #app #board .rank-leader { grid-column:auto; grid-row:1; align-self:end; grid-template-columns:112px minmax(0,1fr); grid-template-areas:"place label" "emblem name" "amount amount" "tokens tokens" "services services"; grid-template-rows:36px minmax(120px,auto) auto auto auto; gap:12px; padding:22px; margin:24px 0 28px; border:1px solid var(--hair); border-top:3px solid var(--ink); background:var(--paper); box-shadow:none; }
.view-rank #app #board .rank-leader[data-podium="1"] { grid-column:2; margin-top:0; padding-top:34px; padding-bottom:34px; border-top-color:var(--rank-accent); }
.view-rank #app #board .rank-leader[data-podium="2"] { grid-column:1; }
.view-rank #app #board .rank-leader[data-podium="3"] { grid-column:3; }
.view-rank #app #board .rank-leader.me { background:var(--paper); box-shadow:none; }
.view-rank #app #board .rank-leader .rk { font-size:36px; color:var(--ink); }
.view-rank #app #board .rank-leader[data-podium="1"] .rk { color:var(--rank-accent); }
.view-rank #app #board .rank-leader .rank-tier { display:contents; }
.view-rank #app #board .rank-leader .tier-label { grid-area:label; text-align:right; align-self:center; font-size:12px; font-weight:800; color:var(--ink2); }
.view-rank #app #board .rank-leader .tier-art { grid-area:emblem; width:112px; height:112px; background-image:url('./whale-tiers-v1.webp'); }
.view-rank #app #board .rank-leader .tier-crest { grid-area:emblem; position:relative; isolation:isolate; display:grid; place-items:center; width:max-content; justify-self:center; }
.view-rank #app #board .rank-leader .tier-crest::before { content:""; position:absolute; inset:-10% -20%; z-index:0; pointer-events:none; background:radial-gradient(ellipse at 50% 62%, color-mix(in srgb,var(--tier-dark) 32%,transparent),color-mix(in srgb,var(--tier-dark) 12%,transparent) 36%,transparent 68%); filter:blur(9px); }
.view-rank #app #board .rank-leader .tier-crest .tier-art { position:relative; z-index:1; grid-area:auto; filter:drop-shadow(0 2px 3px color-mix(in srgb,var(--tier-dark) 30%,transparent)) drop-shadow(0 5px 9px color-mix(in srgb,var(--tier-dark) 18%,transparent)); }
.view-rank #app #board .rank-leader .name { gap:8px; flex-wrap:nowrap; font-size:21px; }
.view-rank #app #board .rank-leader .rank-name { flex:1; }
.view-rank #app #board .rank-leader .amt-cell { align-items:stretch; border-top:1px solid var(--hair); padding-top:16px; gap:14px; }
.view-rank #app #board .rank-leader .amt { font-size:clamp(32px,3.2vw,46px); }
.view-rank #app #board .rank-leader .mix { height:5px; --bar:5px; }
.view-rank #app #board .rank-leader .rank-tokens { font-size:12px; }
.view-rank #app #board .rank-services { grid-area:services; display:flex; flex-wrap:wrap; gap:8px 16px; font-size:11px; font-weight:650; line-height:1.4; }
.view-rank #app #board .rank-services .service-logo { width:17px; height:17px; }
.view-rank #app #board .rank-leader .rank-row-action { grid-column:1/-1; margin:0; }
.view-rank #app #board .rank-leader .rank-row-action:empty { min-height:28px; }
.view-rank #app #board:not(:has([data-podium="3"])) .rank-leader { grid-column:auto; }
.view-rank #app #board:not(:has([data-podium="2"])) .rank-leader { grid-column:1/-1; }
.view-rank #app .board-foot { margin-top:18px; }
@media(hover:hover) {
 .view-rank #app #board .rank-player:hover { background:var(--wash); }
 .view-rank #app #board .rank-leader:hover { border-color:var(--ink3); border-top-color:var(--rank-accent); }
}
@media(min-width:700px) and (max-width:1023px) {
 .view-rank #app #board { gap:0 12px; }
 .view-rank #app #board .rank-player { grid-template-columns:32px minmax(120px,1fr) 115px 90px 120px; gap:10px; padding:16px 8px; }
 .view-rank #app #board .rank-leader { grid-template-columns:1fr; grid-template-areas:"place" "label" "emblem" "name" "amount" "tokens" "services"; grid-template-rows:auto; padding:16px; }
 .view-rank #app #board .rank-leader .tier-label { text-align:left; }
 .view-rank #app #board .rank-leader .tier-art { justify-self:center; }
 .view-rank #app #board .rank-leader .name { min-height:68px; }
 .view-rank #app #board .rank-player .amt { font-size:27px; }
}
@media(max-width:699px) {
 .view-rank #app > .rank { padding-top:22px; }
 .view-rank #app .rank-head { display:block; }
 .view-rank #app .rank-head h2 { font-size:28px; line-height:1.2; }
 .view-rank #app #period-seg { margin-top:10px; gap:24px; }
 .view-rank #app #period-seg button { font-size:22px; }
 .view-rank #app .rank-ctl { margin:6px 0 12px; }
 .view-rank #app #scope-seg { gap:18px; }
 .view-rank #app #scope-seg button { font-size:13px; }
 .view-rank #app #board { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 10px; align-items:stretch; }
 .view-rank #app #board .rank-player { grid-template-columns:24px minmax(0,1fr) auto; grid-template-areas:"place name amount" "place tier amount" "place tokens amount"; gap:2px 8px; padding:14px 0; }
 .view-rank #app #board .rank-player .rk { font-size:22px; align-self:center; }
 .view-rank #app #board .rank-player .name { font-size:16px; gap:7px; }
 .view-rank #app #board .rank-player .rank-name { min-width:0; }
 .view-rank #app #board .rank-player .nm { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .view-rank #app #board .rank-player .av { width:24px; height:24px; }
 .view-rank #app #board .rank-player .handle { display:none; }
 .view-rank #app #board .rank-player .rank-tier { font-size:11px; gap:5px; }
 .view-rank #app #board .rank-player .tier-art { width:24px; height:24px; }
 .view-rank #app #board .rank-player .rank-tokens { font-size:11px; padding-left:29px; }
 .view-rank #app #board .rank-player .amt-cell { width:88px; gap:8px; }
 .view-rank #app #board .rank-player .amt { font-size:24px; }
 .view-rank #app #board .rank-player .mix { height:3px; --bar:3px; }
 .view-rank #app #board .rank-player.me { padding-left:10px; padding-right:10px; }
 /* Give the identity its own breathing room above the smaller tier details. */
 .view-rank #app #board .rank-player:not(.rank-leader) { row-gap:6px; padding-top:18px; padding-bottom:18px; }
 .view-rank #app #board .rank-player:not(.rank-leader) .rank-tier { margin-top:2px; gap:7px; font-size:12px; }
 .view-rank #app #board .rank-player:not(.rank-leader) .tier-label { line-height:1.4; }
 .view-rank #app #board .rank-player:not(.rank-leader) .rank-tokens { padding-left:31px; }
 .view-rank #app #board .rank-leader { grid-column:auto; grid-row:2; align-self:stretch; grid-template-columns:30px minmax(0,1fr); grid-template-areas:"place label" "emblem emblem" "name name" "amount amount" "tokens tokens" "services services"; grid-template-rows:auto 66px minmax(24px,1fr) auto auto auto; gap:7px; padding:12px; margin:0 0 14px; }
 .view-rank #app #board .rank-leader[data-podium="2"] { grid-column:1; }
 .view-rank #app #board .rank-leader[data-podium="3"] { grid-column:2; }
 .view-rank #app #board .rank-leader.me { padding:12px; }
 .view-rank #app #board .rank-leader .rk { font-size:23px; }
 .view-rank #app #board .rank-leader .tier-label { text-align:right; font-size:10px; }
 .view-rank #app #board .rank-leader .tier-art { width:66px; height:66px; }
 .view-rank #app #board .rank-leader .tier-crest::before { inset:-8% -16%; filter:blur(7px); }
 .view-rank #app #board .rank-leader .name { font-size:16px; align-content:start; align-self:start; gap:6px; }
 .view-rank #app #board .rank-leader .av { width:20px; height:20px; }
 .view-rank #app #board .rank-leader .rank-name { flex:1; }
 .view-rank #app #board .rank-leader .amt-cell { width:100%; gap:9px; padding-top:9px; }
 .view-rank #app #board .rank-leader .amt { font-size:28px; }
 .view-rank #app #board .rank-leader .rank-tokens { padding:0; font-size:11px; }
 .view-rank #app #board .rank-services { font-size:11px; gap:6px 12px; min-height:16px; }
 .view-rank #app #board .rank-services .service-name { gap:4px; }
 .view-rank #app #board .rank-services .service-title { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
 .view-rank #app #board .rank-services .service-logo { width:16px; height:16px; }
 .view-rank #app #board .rank-leader[data-podium="1"] { grid-column:1/-1; grid-row:1; grid-template-columns:84px minmax(0,1fr); grid-template-areas:"place label" "emblem name" "emblem amount" "bar bar" "tokens services"; grid-template-rows:auto auto auto auto auto; padding:14px; margin:0 0 10px; gap:9px 12px; }
 .view-rank #app #board .rank-leader[data-podium="1"] .tier-label { text-align:right; font-size:11px; }
 .view-rank #app #board .rank-leader[data-podium="1"] .tier-art { width:84px; height:84px; }
 .view-rank #app #board .rank-leader[data-podium="1"] .name { align-self:end; font-size:21px; }
 .view-rank #app #board .rank-leader[data-podium="1"] .av { width:24px; height:24px; }
 .view-rank #app #board .rank-leader[data-podium="1"] .handle { display:block; font-size:11px; }
 .view-rank #app #board .rank-leader[data-podium="1"] .amt-cell { display:contents; }
 .view-rank #app #board .rank-leader[data-podium="1"] .amt { grid-area:amount; align-self:start; font-size:clamp(28px,9vw,36px); }
 .view-rank #app #board .rank-leader[data-podium="1"] .mix { grid-area:bar; }
 .view-rank #app #board .rank-leader[data-podium="1"] .rank-services { justify-content:flex-end; }
 .view-rank #app #board:not(:has([data-podium="3"])) .rank-leader[data-podium="2"] { grid-column:1/-1; }
 .view-rank #app #board .rank-row-action { margin:0; }
 .view-rank #app #board .rank-row-action .linkish { min-height:36px; min-width:44px; }
 .view-rank #app #board .rank-leader .rank-row-action:empty { display:none; }
 .view-rank #app #board .rank-row-action.is-pending,
 .view-rank #app #board .rank-leader .rank-row-action.is-pending { display:block; min-height:36px; }
 .view-rank #app .board-foot { font-size:12px; gap:12px; }
}
@media(max-width:359px) {
 .view-rank #app .rank-head h2 { font-size:27px; }
 .view-rank #app #board { column-gap:8px; }
 .view-rank #app #board .rank-leader { padding:10px; }
 .view-rank #app #board .rank-leader .amt { font-size:25px; }
 .view-rank #app #board .rank-player:not(.rank-leader) .amt-cell { width:73px; }
 .view-rank #app #board .rank-player:not(.rank-leader) .amt { font-size:21px; }
}

@media(max-width:699px) {
 .view-rank #app #board .rank-player:not(.rank-leader) { grid-template-columns:24px minmax(0,1fr) 70px; grid-template-areas:"place name tier" "place amount tier" "place tokens tokens"; gap:8px 12px; padding-top:20px; padding-bottom:20px; }
 .view-rank #app #board .rank-player:not(.rank-leader) .rk { align-self:start; padding-top:3px; }
 .view-rank #app #board .rank-player:not(.rank-leader) .name { font-size:18px; gap:9px; }
 .view-rank #app #board .rank-player:not(.rank-leader) .rank-tier { justify-self:end; flex-direction:column; width:70px; margin:0; gap:3px; text-align:center; font-size:10px; }
 .view-rank #app #board .rank-player:not(.rank-leader) .tier-art { width:46px; height:46px; }
 .view-rank #app #board .rank-player:not(.rank-leader) .amt-cell { width:auto; align-items:flex-start; gap:6px; }
 .view-rank #app #board .rank-player:not(.rank-leader) .mix { max-width:100px; }
 .view-rank #app #board .rank-player:not(.rank-leader) .rank-tokens { padding:0; text-align:left; }
 /* Keep every mobile podium identity left and its crest / label together at the right. */
 .view-rank #app #board .rank-leader[data-podium] { grid-column:1/-1; grid-row:auto; grid-template-columns:24px minmax(0,1fr) 70px; grid-template-areas:"place name emblem" "place amount emblem" "place tokens label" "bar bar bar" "services services services"; grid-template-rows:auto; gap:8px 12px; padding:14px; margin:0 0 10px; }
 .view-rank #app #board .rank-leader[data-podium] .name { align-self:center; font-size:18px; }
 .view-rank #app #board .rank-leader[data-podium] .tier-crest { justify-self:center; align-self:center; }
 .view-rank #app #board .rank-leader[data-podium] .tier-art { width:64px; height:64px; }
 .view-rank #app #board .rank-leader[data-podium] .tier-label { width:70px; text-align:center; font-size:10px; }
 .view-rank #app #board .rank-leader[data-podium] .amt-cell { display:contents; }
 .view-rank #app #board .rank-leader[data-podium] .amt { grid-area:amount; font-size:28px; }
 .view-rank #app #board .rank-leader[data-podium] .mix { grid-area:bar; }
 .view-rank #app #board .rank-leader[data-podium] .rank-services { justify-content:flex-start; }
}