/* Rank rows respond to their content width, including space taken by the sidebar. */
.players-page{container:player-directory / inline-size}
.player-ranking{--ranking-columns:104px minmax(0,1fr) minmax(190px,23%) 64px;margin-top:24px;color:var(--theme-ink,#193f4c)}
.ranking-head,.ranking-player{display:grid;grid-template-columns:var(--ranking-columns);align-items:center;gap:16px;padding:0 16px}
.ranking-head{padding-block:0 12px;color:var(--theme-muted,#537480);font-size:11px;font-weight:600;letter-spacing:.04em}
.ranking-head>span:last-child{text-align:right}
.ranking-rows{display:grid;gap:7px}
/* Pigment and reflected light are separate: clanless cards stay quiet. */
.ranking-player{--ranking-tone:var(--theme-accent,#159aaa);--ranking-color-strength:6%;--ranking-color-mid:4%;--ranking-color-end:1%;--ranking-light:color-mix(in srgb,var(--ranking-tone) 24%,white);--ranking-edge:#ffffffd9;--ranking-reflection:#ffffff8a;position:relative;isolation:isolate;overflow:hidden;min-height:70px;padding-block:10px;border:1px solid color-mix(in srgb,var(--ranking-tone) 16%,var(--theme-line,#c0dddf));border-radius:12px;background:linear-gradient(150deg,var(--theme-surface,#fff),var(--theme-soft,#edf6f5));box-shadow:0 3px 10px #071e3212;transition:border-color .18s,box-shadow .18s;scroll-margin-top:24px}
.ranking-player.has-clan{--ranking-tone:var(--clan-tone);--ranking-color-strength:32%;--ranking-color-mid:16%;--ranking-color-end:4%}
.ranking-player::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at 15% 125%,color-mix(in srgb,var(--ranking-tone) var(--ranking-color-strength),transparent),transparent 72%),linear-gradient(100deg,color-mix(in srgb,var(--ranking-tone) var(--ranking-color-strength),transparent),color-mix(in srgb,var(--ranking-tone) var(--ranking-color-mid),transparent) 34%,color-mix(in srgb,var(--ranking-tone) var(--ranking-color-end),transparent) 62%,transparent 92%)}
/* A crisp rim, shallow reflection and shaded foot give a polished, still surface.
   Fixed reflection heights keep the mobile cards from becoming milky panels. */
.ranking-player::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 var(--ranking-edge),inset 0 -1px 0 #071e3226;background:radial-gradient(ellipse 48% 24px at 28% -6px,var(--ranking-reflection),transparent 100%),linear-gradient(to bottom,#ffffff24,transparent 16px),linear-gradient(to top,#071e320c,transparent 12px)}
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) .ranking-player{--ranking-color-strength:12%;--ranking-color-mid:18%;--ranking-color-end:5%;--ranking-edge:#e2f8ff85;--ranking-reflection:#e4faff70;box-shadow:0 4px 12px #050b192a}
:root[data-theme="aura"] .ranking-player{--ranking-color-strength:7%;--ranking-color-mid:8%;--ranking-color-end:2%}
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) .ranking-player.has-clan{--ranking-color-strength:58%;--ranking-color-mid:24%;--ranking-color-end:8%;--ranking-light:color-mix(in srgb,var(--ranking-tone) 75%,white)}
.ranking-player.is-self{border-color:var(--theme-accent,#159aaa);box-shadow:inset 3px 0 var(--theme-accent,#159aaa),0 4px 14px #071e3220}
.ranking-player:hover,.ranking-player:focus-within{border-color:var(--theme-accent,#159aaa);box-shadow:0 5px 18px #071e3225}
.ranking-player>div,.ranking-avatar,.ranking-name,.ranking-clan{position:relative;z-index:1;min-width:0}
.ranking-place{display:flex;align-items:center;justify-content:flex-start;gap:4px}
.ranking-place .rank-movement{display:inline-flex;align-items:center;justify-content:center;gap:2px;flex-shrink:0;min-width:34px;min-height:32px;padding:2px;border:0;border-radius:4px;background:none;box-shadow:none;line-height:1.2;font-family:inherit;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0;white-space:nowrap;cursor:help;color:var(--theme-muted,#537480)}
.ranking-place .rank-movement svg{display:block;flex:none;width:15px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ranking-place .rank-movement.rank-up{color:#287348}
.ranking-place .rank-movement.rank-down{color:#a33d4d}
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) .rank-movement.rank-up{color:#8bd4ad}
:root:is([data-theme="dark"],[data-theme="aura"],[data-theme="obsidian"]) .rank-movement.rank-down{color:#eda1ad}
.ranking-place .rank-movement:focus-visible{outline:2px solid var(--theme-accent,#159aaa);outline-offset:1px}
.rank-movement-hint{max-width:min(290px,calc(100vw - 24px));padding:9px 12px;border:1px solid var(--theme-line,#c0dddf);border-radius:8px;background:var(--theme-surface,#fff);color:var(--theme-ink,#193f4c);line-height:1.5;font-family:inherit;font-size:12px;box-shadow:0 4px 16px #071e3220}
@supports (top:anchor(bottom)){.rank-movement-hint{inset:auto;top:anchor(bottom);left:anchor(left);margin:4px 0 0;position-try-fallbacks:flip-inline,flip-block}}
.ranking-place .rank-compact{min-width:44px;min-height:44px}
.ranking-place .rank-standard{clip-path:none;overflow:hidden;border-radius:12px;min-width:46px;min-height:46px;background:var(--theme-line,#c0dddf);color:var(--theme-muted,#537480)}
.ranking-place .rank-standard::before{border-radius:10px;background:var(--theme-surface,#fff)}
.ranking-place .rank-standard::after,.ranking-place .rank-glint{display:none}
.ranking-identity{display:grid;grid-template-columns:44px minmax(120px,.9fr) minmax(130px,1fr);gap:13px;align-items:center}
.ranking-avatar{grid-column:1;grid-row:1;align-self:center;line-height:0;width:44px;height:44px;border-radius:50%;box-shadow:0 0 0 2px var(--theme-line,#c0dddf),0 4px 14px #071e3228;overflow:visible;isolation:isolate}
.has-clan .ranking-avatar{box-shadow:0 0 0 2px color-mix(in srgb,var(--clan-tone) 65%,var(--theme-line,#c0dddf)),0 4px 14px #071e3228}
/* Static concentric light behind the portrait, clipped by the tile edge. */
.ranking-avatar::before{content:"";position:absolute;z-index:-1;inset:-7px;border-radius:50%;pointer-events:none;border:1px solid color-mix(in srgb,var(--ranking-light) 38%,transparent);background:color-mix(in srgb,var(--ranking-tone) 10%,transparent);box-shadow:0 0 0 8px color-mix(in srgb,var(--ranking-light) 10%,transparent),0 0 0 16px color-mix(in srgb,var(--ranking-light) 6%,transparent),inset 0 1px 0 #ffffff20}
.ranking-avatar img{border-radius:50%;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.ranking-name{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;grid-column:2;align-self:center}
.ranking-identity:not(:has(.ranking-clan)) .ranking-name{grid-row:1;align-self:center}
.ranking-name a{font-size:14px;font-weight:650;color:var(--theme-ink,#193f4c);text-decoration:none;overflow-wrap:anywhere}
.ranking-name a:hover{text-decoration:underline;text-underline-offset:4px}
.ranking-you{padding:3px 7px;border-radius:5px;background:var(--theme-soft,#e4f2f1);color:var(--theme-ink,#193f4c);font-size:10px;line-height:1.2}
.ranking-clan{grid-column:3;display:flex;align-items:center;gap:9px;max-width:100%;padding:4px 0;border:0;background:none;color:var(--theme-ink,#193f4c);font-size:12px;text-decoration:none;line-height:1.35}
.ranking-clan img{flex:none;width:27px;height:27px;border-radius:6px;object-fit:cover}
.ranking-clan span{min-width:0;overflow-wrap:anywhere}
.ranking-clan small{display:block;font-size:8px;letter-spacing:.15em;color:var(--theme-muted,#537480);margin-bottom:2px}
.ranking-clan b{font-size:10px;color:var(--theme-muted,#537480);margin-left:5px}
.ranking-clan:hover{border-color:var(--clan-tone);text-decoration:underline}
.ranking-name a:focus-visible,.ranking-clan:focus-visible{outline:2px solid var(--theme-accent,#159aaa);outline-offset:4px;border-radius:5px}
.ranking-race{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;font-size:12px}
.ranking-race-name{font-weight:500}
.ranking-level{order:-1;font-size:11px;color:var(--theme-muted,#537480);white-space:nowrap}
.ranking-race .online-dot,.ranking-inactive{font-size:10px;white-space:nowrap}
.ranking-ki{text-align:right;font-variant-numeric:tabular-nums}
.ranking-ki strong{font-size:16px;font-weight:700;overflow-wrap:anywhere}
.ranking-ki small{display:none}
@container player-directory (min-width:701px) and (max-width:1150px){.player-ranking{--ranking-columns:98px minmax(0,1fr) 155px 56px}.ranking-head,.ranking-player{gap:10px;padding-inline:12px}.ranking-identity{grid-template-columns:38px minmax(95px,1fr) minmax(105px,1fr);gap:10px}.ranking-avatar{width:38px;height:38px}.ranking-race{font-size:11px}}
@container player-directory (max-width:700px){
 .player-ranking{margin-top:20px}.ranking-head{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}
 /* The clan slot is reserved even without membership. All portraits, names
    and race lines retain the same baseline while the directory refreshes. */
 .ranking-player{grid-template-columns:42px 40px minmax(0,1fr) 52px;grid-template-rows:40px 24px 18px;gap:7px 10px;padding:12px;border-radius:13px;min-height:122px}
 .ranking-place{grid-column:1;grid-row:1 / span 3;align-self:center;flex-direction:column;gap:0}.ranking-place .rank-compact{min-width:42px;min-height:44px;padding:9px 7px}
 .ranking-identity{display:contents}
 .ranking-avatar{grid-column:2;grid-row:1;width:40px;height:40px}
 .ranking-name,.ranking-identity:not(:has(.ranking-clan)) .ranking-name{grid-column:3;grid-row:1;align-self:center;gap:5px;flex-wrap:nowrap}
 .ranking-name a{font-size:13px;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.35}
 .ranking-you{flex:none;padding:3px 5px}
 .ranking-clan{grid-column:2 / -1;grid-row:2;padding:0 7px;font-size:10px}.ranking-clan small{display:none}.ranking-clan img{width:20px;height:20px}.ranking-clan span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking-clan b{flex:none}
 .ranking-race{grid-column:2 / -1;grid-row:3;gap:5px 9px;font-size:11px;flex-wrap:nowrap}.ranking-race-name{flex-basis:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .ranking-ki{grid-column:4;grid-row:1;align-self:center;min-width:0}.ranking-ki strong{display:block;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking-ki small{display:block;font-size:8px;letter-spacing:.12em;color:var(--theme-muted,#537480);margin-top:3px}
}
@container player-directory (max-width:380px){.ranking-player{grid-template-columns:36px 32px minmax(0,1fr) 43px;gap:8px;padding:12px 8px}.ranking-avatar{width:32px;height:32px}.ranking-place .rank-compact{min-width:36px;min-height:38px;padding:8px 5px}.ranking-name a{font-size:12px}.ranking-ki strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){.ranking-player{transition:none}}

.players-page .directory-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding:14px 2px 0;border-top:1px solid var(--theme-line,#c0dddf);color:var(--theme-muted,#537480);font-size:12px}

/* Directory controls follow the shared PageHero; search geometry lives in page-layout.css. */
.players-page .directory-panel{margin-top:0;padding:14px 18px 18px}
.players-page .directory-filters{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 8px;padding:0;border:0;background:none;border-radius:0}
.directory-name-search{flex:1 1 230px;max-width:310px;min-width:0}
/* Cached rows may precede race options during startup. Reserve their control's
   width so the online switch and actions do not move as the options arrive. */
.players-page .directory-filters>select{flex:0 0 150px;width:150px;min-width:0;max-width:100%;min-height:36px;height:36px;padding:7px 11px;font-size:13px;line-height:20px;border-radius:10px}
.directory-filter-actions{display:flex;align-items:center;gap:6px}
.players-page .directory-icon{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;box-sizing:border-box;padding:0;border:1px solid var(--theme-line,#bddcde);border-radius:10px;color:var(--theme-ink,#23505d);background:var(--theme-soft,#ecf7f5);cursor:pointer}
.directory-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.players-page .directory-icon:hover{color:var(--theme-accent,#159aaa);border-color:currentColor}
.players-page .directory-icon:focus-visible{outline:2px solid var(--theme-accent,#159aaa);outline-offset:3px}
.players-page .directory-filters .online-filter{position:relative;display:flex;align-items:center;gap:8px;min-height:36px;width:auto;margin:0;font-size:12px;cursor:pointer;user-select:none}
.players-page .online-switch{position:relative;display:block;width:38px;height:22px;box-sizing:border-box;flex:none;border:1px solid var(--theme-line,#bddcde);border-radius:999px;background:var(--theme-soft,#e9f7f5);box-shadow:inset 0 1px 3px #071e3226;transition:background-color .16s,border-color .16s}
.players-page .online-switch::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--theme-muted,#537480);box-shadow:0 1px 3px #071e3226,inset 0 1px 0 #ffffff50;transition:transform .16s,background-color .16s}
.players-page .online-switch svg{position:absolute;left:3px;top:5px;width:11px;height:11px;stroke:var(--theme-surface,#fff);stroke-width:1.8;fill:none;opacity:0;transition:opacity .16s}
.players-page .online-filter input:checked+.online-switch{border-color:var(--theme-accent,#159aaa);background:var(--theme-accent,#159aaa)}
.players-page .online-filter input:checked+.online-switch::after{transform:translateX(16px);background:var(--theme-surface,#fff)}
.players-page .online-filter input:checked+.online-switch svg{opacity:1}
.players-page .online-filter input:checked~.online-filter-label::after{content:none}
.players-page .online-filter input:focus-visible+.online-switch{outline:2px solid var(--theme-accent,#159aaa);outline-offset:3px}
.players-page .directory-rules{margin:0;padding:0;border:0;background:none;font-size:11px;color:var(--theme-muted,#537480)}
.directory-rules summary{cursor:pointer;width:fit-content;padding:4px 0}
.directory-rules .directory-note{margin:8px 0 0;max-width:90ch}
.players-page .player-ranking{margin-top:12px}
.directory-error{font-size:12px;color:var(--theme-muted,#537480)}
.directory-error button,.directory-pagination button{padding:4px 0;border:0;background:none;color:var(--theme-accent,#159aaa);font:inherit;cursor:pointer}
@container player-directory (max-width:550px){
 .players-page .directory-filters{display:flex;gap:8px}
 .directory-name-search{flex-basis:100%;max-width:none}
 .players-page .directory-filters>select{flex:1;min-width:0;padding-inline:8px}
 .players-page .directory-panel{padding:10px 12px 14px}
}
@media(pointer:coarse){.players-page .directory-filters>select,.players-page .directory-icon,.players-page .directory-filters .online-filter{min-height:44px}.players-page .directory-icon{width:44px;flex-basis:44px}.directory-pagination button{min-height:44px}}
@media(prefers-reduced-motion:reduce){.players-page .online-switch,.players-page .online-switch::after,.players-page .online-switch svg{transition:none}}
@media(forced-colors:active){.players-page .online-filter input:checked+.online-switch{background:Highlight;border-color:Highlight}.players-page .online-switch::after{background:ButtonText}.players-page .online-filter input:checked+.online-switch::after{background:HighlightText}}
/* Clear the portrait halo without changing the card columns. */
.ranking-name{padding-left:10px}
.ranking-name a{font-size:15px}
@container player-directory (min-width:701px) and (max-width:1150px){.ranking-name a{font-size:14px}}
@container player-directory (max-width:700px){.ranking-name{padding-left:7px}.ranking-name a{font-size:14px}}
@container player-directory (max-width:380px){.ranking-name{padding-left:5px}.ranking-name a{font-size:13px}}