/* Avalis S54 — hiscores, player records, weekly progress and compare.
   Every selector is scoped to .scores-page (body class on hiscores.php,
   hiscores-weekly.php and hiscores-compare.php).
   Note: anything horizontally scrollable here is position: relative so that
   visually-hidden (absolutely positioned) text inside it stays clipped by the
   scroller instead of widening the page on phones. */

/* Hero ---------------------------------------------------------------------- */
.scores-page .scores-hero { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(34px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.scores-page .scores-hero__art { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: 62% 40%; opacity: .72; }
.scores-page .scores-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 11, 25, .97) 0%, rgba(5, 11, 25, .84) 34%, rgba(5, 11, 25, .3) 68%, rgba(5, 11, 25, .55) 100%),
    linear-gradient(180deg, rgba(5, 11, 25, .4), transparent 35%, rgba(5, 11, 25, .75) 100%); }
.scores-page .scores-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); gap: clamp(24px, 4vw, 64px); align-items: end; padding-bottom: clamp(26px, 3.4vw, 40px); }
.scores-page .scores-hero__copy { min-width: 0; }
.scores-page .scores-hero h1 { margin: 0 0 10px; font-size: clamp(1.89rem, 3.61vw, 2.92rem); text-shadow: 0 4px 24px rgba(0, 0, 0, .55); }
.scores-page .scores-hero .lede { margin: 0; color: #d0dcef; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.scores-page .scores-hero--compact { padding-top: clamp(30px, 4.4vw, 54px); }
.scores-page .scores-hero--compact .scores-hero__inner { padding-bottom: clamp(24px, 3vw, 34px); }
.scores-page .scores-hero--compact h1 { font-size: clamp(1.72rem, 3.1vw, 2.58rem); }
.scores-page .scores-hero__facts { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 20px 0 0; padding: 0; list-style: none; color: var(--mist); font-size: .9rem; }
.scores-page .scores-hero__facts li { display: inline-flex; align-items: center; gap: 8px; }
.scores-page .scores-hero__facts svg { width: 18px; height: 18px; color: var(--ice); }
.scores-page .scores-hero__facts b { font-size: 1.1rem; }
.scores-page .scores-hero .breadcrumbs { margin-bottom: 18px; }
.scores-page .scores-hero .breadcrumbs li { color: var(--dim); }

/* Player lookup — the primary control ------------------------------------------ */
.scores-page .lookup { position: relative; padding: 18px 20px 16px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(16, 34, 66, .84), rgba(8, 18, 38, .92)); border: 1px solid var(--line-2); box-shadow: var(--shadow-2), inset 0 1px 0 rgba(200, 225, 255, .12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.scores-page .lookup::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, rgba(160, 210, 255, .5), transparent 42%, transparent 70%, rgba(110, 160, 255, .35)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.scores-page .lookup__label { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 700 .85rem/1.2 var(--font-display); color: var(--ice); }
.scores-page .lookup__row { display: flex; gap: 8px; }
.scores-page .lookup__field { flex: 1; min-width: 0; }
.scores-page .lookup__row .btn { flex: none; min-height: 46px; }
.scores-page .lookup__hint { margin: 10px 0 0; color: var(--dim); font-size: .82rem; line-height: 1.4; }

/* Hiscores view tabs, sitting on the bottom edge of the hero ----------------------- */
.scores-page .scores-views { background: rgba(4, 9, 22, .66); border-top: 1px solid var(--line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.scores-page .scores-views__inner { position: relative; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.scores-page .scores-views__inner::-webkit-scrollbar { display: none; }
.scores-page .scores-views a { position: relative; display: inline-flex; align-items: center; gap: 9px; flex: none; min-height: 54px; padding: 0 16px; color: var(--mist); font: 700 .91rem/1 var(--font-display); transition: color .18s; }
.scores-page .scores-views a:first-child { padding-left: 0; }
.scores-page .scores-views a svg { width: 18px; height: 18px; flex: none; color: var(--dim); transition: color .18s; }
.scores-page .scores-views a:hover { color: #fff; }
.scores-page .scores-views a:hover svg { color: var(--ice); }
.scores-page .scores-views a[aria-current="page"] { color: #fff; }
.scores-page .scores-views a[aria-current="page"] svg { color: var(--ice); filter: drop-shadow(0 0 6px rgba(147, 214, 255, .6)); }
.scores-page .scores-views a[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--sapphire), var(--ice)); box-shadow: 0 0 10px rgba(110, 170, 255, .8); }
.scores-page .scores-views a:first-child[aria-current="page"]::after { left: 0; }
.scores-page .scores-views a:focus-visible { outline-offset: -3px; }
.scores-page .scores-views .label-short { display: none; }

/* Body --------------------------------------------------------------------------- */
.scores-page .scores-body { padding-top: clamp(22px, 3vw, 34px); padding-bottom: clamp(56px, 8vw, 104px); }
.scores-page .scores-body > .alert { margin-bottom: 18px; }

/* Account-mode rail ------------------------------------------------------------- */
.scores-page .mode-rail { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 20px; padding: 0; }
.scores-page .mode-rail__set { position: relative; display: flex; flex-wrap: wrap; gap: 8px 6px; }
.scores-page .mode-rail__set--groups { padding-left: 18px; }
.scores-page .mode-rail__set--groups::before { content: ""; position: absolute; left: 3px; top: 21px; width: 6px; height: 6px; margin-top: -3px; transform: rotate(45deg); background: var(--line-3); }
.scores-page .mode-pill { position: relative; display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 42px; padding: 4px 6px 4px 4px; border-radius: 999px; background: rgba(12, 26, 50, .7); border: 1px solid var(--line-2); color: var(--mist); font: 700 .84rem/1 var(--font-display); white-space: nowrap; transition: border-color .15s, background .15s, color .15s, box-shadow .15s; }
.scores-page .mode-pill__icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: radial-gradient(circle, rgba(147, 214, 255, .16), transparent 70%), rgba(3, 9, 22, .55); border: 1px solid var(--line); }
.scores-page .mode-pill__icon img { width: auto; height: auto; max-width: 20px; image-rendering: pixelated; }
.scores-page .mode-pill__icon .mode-pill__img { width: 15px; height: 15px; }
.scores-page .mode-pill small { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: rgba(255, 255, 255, .06); color: var(--dim); font: 700 .72rem/1 var(--font-text); letter-spacing: 0; }
.scores-page .mode-pill:hover { color: #fff; border-color: var(--line-3); background: rgba(20, 40, 76, .75); }
.scores-page .mode-pill.is-active { color: #fff; background: linear-gradient(180deg, rgba(60, 110, 230, .55), rgba(30, 64, 160, .55)); border-color: #6c9dff; box-shadow: 0 6px 18px rgba(40, 100, 255, .25); }
.scores-page .mode-pill.is-active small { background: rgba(255, 255, 255, .18); color: #fff; }

/* Category sidebar + ranking board ------------------------------------------------ */
.scores-page .scores-layout { display: grid; grid-template-columns: 284px minmax(0, 1fr); gap: 24px; align-items: start; }
.scores-page .cat-panel { min-width: 0; padding: 14px 10px 12px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(16, 33, 62, .78), rgba(8, 18, 36, .9)); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.scores-page .cat-tabs { display: none; }
.scores-page .cat-group + .cat-group { margin-top: 14px; }
.scores-page .cat-group--fold + .cat-group--fold { margin-top: 4px; }
.scores-page .cat-group--fold[open] + .cat-group--fold { margin-top: 10px; }
.scores-page .cat-group__title { display: flex; align-items: center; gap: 10px; margin: 0 8px 6px; font: 700 .8rem/1 var(--font-display); color: var(--dim); }
.scores-page .cat-group__title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); }
.scores-page .cat-group__links { display: grid; gap: 2px; }
.scores-page .cat-group--skills .cat-group__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scores-page .cat-link { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 36px; padding: 4px 8px 4px 5px; border-radius: 8px; color: var(--mist); font: 700 .86rem/1.15 var(--font-text); transition: background .15s, color .15s; }
.scores-page .cat-group--skills .cat-link { font-size: .82rem; gap: 7px; }
.scores-page .cat-link img { flex: none; width: 26px; height: 26px; object-fit: scale-down; }
.scores-page .cat-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scores-page .cat-link:hover { color: var(--frost); background: rgba(47, 107, 255, .1); }
.scores-page .cat-link.is-active { color: #fff; background: linear-gradient(90deg, rgba(47, 107, 255, .34), rgba(47, 107, 255, .08)); box-shadow: inset 2px 0 0 var(--ice), inset 0 0 0 1px rgba(110, 160, 255, .26); }
.scores-page .cat-link:focus-visible { outline-offset: -2px; }
/* Folding groups (bosses, raids, clues) — the group being viewed is rendered open. */
.scores-page .cat-group--fold > summary { list-style: none; min-height: 40px; margin: 0; padding: 0 8px; border-radius: 8px; cursor: pointer; transition: color .15s, background .15s; }
.scores-page .cat-group--fold > summary::-webkit-details-marker { display: none; }
.scores-page .cat-group--fold > summary::after { order: 1; }
.scores-page .cat-group--fold > summary small { order: 2; display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--dim); font: 700 .7rem/1 var(--font-text); letter-spacing: 0; }
.scores-page .cat-group--fold > summary::before { content: ""; order: 3; flex: none; width: 7px; height: 7px; margin: -4px 4px 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s var(--ease); }
.scores-page .cat-group--fold[open] > summary { margin-bottom: 4px; color: var(--mist); }
.scores-page .cat-group--fold[open] > summary::before { margin-top: 3px; transform: rotate(-135deg); }
.scores-page .cat-group--fold > summary:hover { color: var(--frost); background: rgba(47, 107, 255, .08); }
.scores-page .cat-group--fold > summary:focus-visible { outline-offset: -2px; }

.scores-page .board { position: relative; min-width: 0; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(16, 33, 62, .8), rgba(8, 18, 36, .92)); border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: hidden; }
.scores-page .board::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(160, 205, 255, .4), transparent); pointer-events: none; }
.scores-page .board__head { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 18px; padding: 20px 22px; border-bottom: 1px solid var(--line); background: radial-gradient(520px 170px at 0 0, rgba(47, 107, 255, .18), transparent 70%); }
.scores-page .board__head--compact { padding: 16px 20px; }
.scores-page .board__icon { flex: none; display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; color: var(--ice); background: radial-gradient(circle at 50% 32%, #21468a, #0b1836 70%); box-shadow: 0 0 0 1px rgba(170, 210, 255, .42), 0 0 0 5px rgba(8, 18, 38, .92), 0 0 0 6px var(--line-2), 0 10px 26px rgba(0, 0, 0, .45); }
.scores-page .board__icon img { width: 38px; height: 38px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.scores-page .board__icon .board__mode-img { width: 26px; height: 26px; }
.scores-page .board__icon svg { width: 30px; height: 30px; }
.scores-page .board__title { flex: 1 1 240px; min-width: 0; }
.scores-page .board__title .eyebrow { margin-bottom: 6px; }
.scores-page .board__title h2 { margin: 0; font-size: clamp(1.29rem, 2.06vw, 1.72rem); overflow-wrap: anywhere; }
.scores-page .board__head--compact h2 { font-size: clamp(1.12rem, 1.72vw, 1.38rem); }
.scores-page .board__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 0; color: var(--dim); font-size: .88rem; }
.scores-page .board__meta span + span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 10px; transform: rotate(45deg); background: var(--line-3); vertical-align: 2px; }
.scores-page .board__aside { margin: 0 0 0 auto; color: var(--dim); font-size: .86rem; max-width: 36ch; }
.scores-page .board__back { display: inline-block; margin-bottom: 8px; color: var(--mist); font-size: .86rem; }
.scores-page .board__back:hover { color: #fff; }
.scores-page .board__filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 0 1 390px; margin-left: auto; }
.scores-page .board__filter .input-icon { flex: 1 1 180px; min-width: 0; }
.scores-page .board__filter .btn { min-height: 46px; }
.scores-page .board__clear { padding: 8px 2px; font: 700 .84rem/1 var(--font-display); color: var(--ice); }
.scores-page .board__clear:hover { color: #fff; }
.scores-page .board__alert { margin: 16px 22px 0; }
.scores-page .board__subhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; padding: 14px 22px; border-bottom: 1px solid var(--line); color: var(--dim); font-size: .88rem; }
.scores-page .board__subhead b { font: 700 .87rem/1 var(--font-display); color: var(--frost); }
.scores-page .board__foot { margin: 0; padding: 12px 22px 14px; color: var(--dim); font-size: .8rem; background: rgba(3, 9, 22, .32); border-top: 1px solid var(--line); }
.scores-page .board__empty { margin: 22px; }
.scores-page .board .s53-pagination { margin: 0; padding: 16px 22px; }
.scores-page .board .table-scroll { border: 0; border-radius: 0; background: transparent; }

/* Podium — top three on page one of a ranking --------------------------------------- */
.scores-page .podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 14px; margin: 0; padding: 26px 22px 0; list-style: none; border-bottom: 1px solid var(--line-2); background: radial-gradient(60% 90% at 50% 100%, rgba(47, 107, 255, .2), transparent 70%), linear-gradient(180deg, transparent, rgba(3, 9, 22, .35)); }
.scores-page .podium__place { --medal: rgba(201, 214, 234, .55); --medal-soft: rgba(201, 214, 234, .1); min-width: 0; }
.scores-page .podium__place--1 { --medal: rgba(255, 203, 102, .7); --medal-soft: rgba(255, 203, 102, .14); order: 2; }
.scores-page .podium__place--2 { order: 1; }
.scores-page .podium__place--3 { --medal: rgba(217, 154, 98, .6); --medal-soft: rgba(217, 154, 98, .12); order: 3; }
.scores-page .podium__card { position: relative; display: grid; justify-items: center; align-content: end; gap: 4px; min-width: 0; min-height: 188px; padding: 20px 12px 16px; text-align: center; border-radius: 14px 14px 0 0; color: var(--mist); background: linear-gradient(180deg, var(--medal-soft), rgba(14, 30, 58, .55) 55%, rgba(10, 22, 44, .75)); border: 1px solid var(--line-2); border-bottom: 0; box-shadow: inset 0 2px 0 var(--medal); transition: border-color .18s, background-color .18s, transform .25s var(--ease); }
.scores-page .podium__place--1 .podium__card { min-height: 222px; border-color: rgba(255, 203, 102, .32); box-shadow: inset 0 2px 0 var(--medal), 0 -10px 40px rgba(255, 203, 102, .07); }
.scores-page .podium__place--3 .podium__card { min-height: 172px; }
.scores-page .podium__card:hover { color: var(--mist); border-color: var(--line-3); transform: translateY(-2px); }
.scores-page .podium__card:hover .player-name { text-decoration: underline; text-decoration-color: rgba(147, 214, 255, .55); text-underline-offset: 3px; }
.scores-page .podium__card:focus-visible { outline-offset: -3px; }
.scores-page .podium__portrait { position: relative; margin-bottom: 12px; }
.scores-page .podium__avatar { --avatar: 66px; box-shadow: 0 0 0 2px var(--medal), 0 0 0 6px rgba(8, 18, 38, .9), 0 0 0 7px var(--line-2), 0 12px 26px rgba(0, 0, 0, .45); }
.scores-page .podium__place--1 .podium__avatar { --avatar: 82px; box-shadow: 0 0 0 2px var(--medal), 0 0 0 6px rgba(8, 18, 38, .9), 0 0 0 7px rgba(255, 203, 102, .3), 0 0 34px rgba(255, 203, 102, .22); }
.scores-page .podium__portrait .rank { position: absolute; left: 50%; bottom: -12px; width: 28px; min-width: 28px; height: 28px; transform: translateX(-50%); font-size: .9rem; }
.scores-page .podium__place--1 .podium__portrait .rank { width: 32px; min-width: 32px; height: 32px; bottom: -14px; font-size: 1rem; }
.scores-page .podium__name { display: inline-flex; align-items: center; justify-content: center; gap: 7px; max-width: 100%; min-width: 0; font-size: 1.05rem; line-height: 1.25; }
.scores-page .podium__name .player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scores-page .podium__place--1 .podium__name { font-size: 1.18rem; }
.scores-page .podium__stat { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: center; }
.scores-page .podium__stat b { font-size: 1.45rem; line-height: 1.1; color: var(--frost); }
.scores-page .podium__place--1 .podium__stat b { font-size: 1.7rem; color: #fff; text-shadow: 0 0 18px rgba(255, 203, 102, .3); }
.scores-page .podium__stat small { font: 700 .76rem/1 var(--font-display); color: var(--dim); }
.scores-page .podium__sub { color: var(--dim); font-size: .82rem; }

/* Tables ------------------------------------------------------------------------ */
.scores-page .classic-table th, .scores-page .classic-table td { padding: 11px 16px; }
.scores-page .classic-table th.num, .scores-page .classic-table td.num { text-align: right; }
.scores-page .classic-table td.num { font: 700 1rem/1.2 var(--font-display); color: var(--mist); font-variant-numeric: tabular-nums; white-space: nowrap; }
.scores-page .classic-table td.num.is-key { color: var(--frost); font-size: 1.08rem; }
.scores-page .classic-table td.num.is-zero { color: var(--dim); }
.scores-page .ranking-table td:first-child, .scores-page .group-ranking-table td:first-child, .scores-page .weekly-table td:first-child, .scores-page .group-member-table td:first-child { width: 76px; text-align: center; font: 700 1rem/1 var(--font-display); color: var(--dim); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.scores-page .ranking-table thead th:first-child, .scores-page .group-ranking-table thead th:first-child, .scores-page .weekly-table thead th:first-child, .scores-page .group-member-table thead th:first-child { text-align: center; }
.scores-page .ranking-table td.empty-row:first-child, .scores-page td.empty-row { width: auto; padding: 40px 20px; text-align: center; color: var(--dim); font: 400 .95rem/1.5 var(--font-text); }
.scores-page .classic-table .rank { vertical-align: middle; }
.scores-page .classic-table tbody tr:has(.rank--1) { background: linear-gradient(90deg, rgba(255, 203, 102, .13), rgba(255, 203, 102, .02) 60%); }
.scores-page .classic-table tbody tr:has(.rank--2) { background: linear-gradient(90deg, rgba(201, 214, 234, .1), rgba(201, 214, 234, .01) 60%); }
.scores-page .classic-table tbody tr:has(.rank--3) { background: linear-gradient(90deg, rgba(217, 154, 98, .11), rgba(217, 154, 98, .01) 60%); }
.scores-page .classic-table tbody tr:has(.rank--1):hover, .scores-page .classic-table tbody tr:has(.rank--2):hover, .scores-page .classic-table tbody tr:has(.rank--3):hover { background-color: rgba(47, 107, 255, .08); }
.scores-page .rank-player { display: inline-flex; align-items: center; gap: 10px; min-height: 30px; color: var(--frost); white-space: nowrap; }
.scores-page .group-ranking-table td, .scores-page .group-member-table td, .scores-page .weekly-table td { white-space: nowrap; }
.scores-page .classic-table td.empty-row { white-space: normal; }
.scores-page .rank-player b { font-size: .98rem; }
.scores-page .rank-player:hover b { text-decoration: underline; text-decoration-color: rgba(147, 214, 255, .55); text-underline-offset: 3px; }
.scores-page .hiscore-mode-icon { flex: none; width: 13px; height: 13px; image-rendering: pixelated; }
.scores-page .group-link { display: grid; color: var(--frost); }
.scores-page .group-link small { color: var(--dim); font-size: .78rem; }
.scores-page .group-link:hover b { text-decoration: underline; text-underline-offset: 3px; }
.scores-page .group-summary { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 0 auto; }
.scores-page .group-summary dt { font: 700 .78rem/1.2 var(--font-display); color: var(--dim); }
.scores-page .group-summary dd { margin: 4px 0 0; font: 700 1.35rem/1 var(--font-display); color: var(--frost); font-variant-numeric: tabular-nums; }
.scores-page .gain-sign { margin-right: 1px; color: var(--success); }

/* Player record ----------------------------------------------------------------- */
.scores-page .player-banner { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px); min-width: 0; }
.scores-page .player-banner__text { min-width: 0; }
.scores-page .player-banner__avatar { --avatar: clamp(84px, 9vw, 112px); box-shadow: 0 0 0 2px rgba(170, 210, 255, .5), 0 0 0 7px rgba(8, 18, 38, .88), 0 0 0 8px var(--line-2), 0 16px 36px rgba(0, 0, 0, .5); }
.scores-page .player-banner h1 { margin: 0 0 12px; font-size: clamp(1.81rem, 3.78vw, 3.01rem); overflow-wrap: anywhere; }
.scores-page .player-banner .eyebrow { margin-bottom: 8px; }
.scores-page .player-banner__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.scores-page .player-banner__chips .game-mode-icon { width: 13px; height: 13px; vertical-align: 0; }
.scores-page .player-banner__chips [aria-hidden], .scores-page .duel__mode [aria-hidden] { display: inline-flex; }
.scores-page .presence { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.scores-page .presence.is-online { background: var(--success); box-shadow: 0 0 8px var(--success); }

.scores-page .stat-band { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0 0 24px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(14, 30, 60, .86), rgba(8, 18, 38, .94)); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); overflow: hidden; }
.scores-page .stat-band > div { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 18px 20px; }
.scores-page .stat-band > div + div { border-left: 1px solid var(--line); }
.scores-page .stat-band dt { font: 700 .8rem/1.2 var(--font-display); color: var(--dim); }
.scores-page .stat-band dd { margin: 0; font: 700 clamp(1.16rem, 1.81vw, 1.55rem)/1 var(--font-display); color: var(--frost); letter-spacing: .02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.scores-page .stat-band > div:first-child dd { color: #fff; text-shadow: 0 0 18px rgba(110, 170, 255, .45); }

.scores-page .profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }

/* Skills grid — laid out like the in-game skills tab */
.scores-page .skill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 14px; list-style: none; }
.scores-page .skill-tile { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 12px; min-height: 66px; padding: 9px 12px 9px 9px; border-radius: 12px; color: var(--mist); background: linear-gradient(180deg, rgba(20, 40, 76, .55), rgba(8, 18, 38, .7)); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(200, 225, 255, .05); transition: border-color .15s, background-color .15s, transform .2s var(--ease); }
.scores-page .skill-tile:hover { color: var(--mist); border-color: var(--line-3); background-color: rgba(47, 107, 255, .12); transform: translateY(-1px); }
.scores-page .skill-tile:focus-visible { outline-offset: 2px; }
.scores-page .skill-tile__icon { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(47, 107, 255, .26), rgba(3, 9, 22, .7) 72%); box-shadow: 0 0 0 1px var(--line-2); }
.scores-page .skill-tile__icon img { width: 28px; height: 28px; object-fit: scale-down; }
.scores-page .skill-tile__name { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .84rem/1.2 var(--font-display); color: var(--dim); }
.scores-page .skill-tile__level { grid-column: 2; grid-row: 2; justify-self: start; font-size: 1.6rem; line-height: 1; color: var(--frost); }
.scores-page .skill-tile__rank { grid-column: 3; grid-row: 1; justify-self: end; color: var(--dim); font-size: .82rem; }
.scores-page .skill-tile__xp { grid-column: 2 / 4; grid-row: 2; justify-self: end; align-self: end; color: var(--dim); font-size: .8rem; white-space: nowrap; }
.scores-page .skill-tile:hover .skill-tile__name { color: var(--frost); }
.scores-page .skill-tile.is-max { border-color: rgba(147, 214, 255, .3); }
.scores-page .skill-tile.is-max .skill-tile__level { color: var(--ice-2); text-shadow: 0 0 14px rgba(147, 214, 255, .55); }
.scores-page .skill-tile--total { background: linear-gradient(180deg, rgba(47, 107, 255, .26), rgba(16, 36, 80, .6)); border-color: rgba(110, 160, 255, .38); }
.scores-page .skill-tile--total .skill-tile__name { color: var(--ice); }
.scores-page .skill-tile--total .skill-tile__level { color: #fff; }

.scores-page .record-stack { display: grid; gap: 16px; }
.scores-page .record-card { position: relative; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(16, 33, 62, .78), rgba(8, 18, 36, .9)); border: 1px solid var(--line); overflow: hidden; }
.scores-page .record-card > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.scores-page .record-card h2 { margin: 0; font-size: 1.3rem; }
.scores-page .record-card .eyebrow { margin-bottom: 6px; font-size: .7rem; }
.scores-page .record-card__total { color: var(--dim); font-size: .8rem; white-space: nowrap; }
.scores-page .record-card__total b { margin-right: 3px; font-size: 1.12rem; color: var(--frost); }
.scores-page .record-card__empty { margin: 0; padding: 18px; color: var(--dim); font-size: .9rem; }
.scores-page .record-list { display: grid; gap: 2px; margin: 0; padding: 6px; list-style: none; }
.scores-page .record-list a { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 10px 7px 7px; border-radius: var(--r-sm); color: var(--mist); transition: background .15s; }
.scores-page .record-list a:hover { background: rgba(47, 107, 255, .1); }
.scores-page .record-list__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: radial-gradient(circle at 50% 35%, rgba(47, 107, 255, .2), rgba(3, 9, 22, .6) 70%); border: 1px solid var(--line); }
.scores-page .record-list__icon img { width: 30px; height: 30px; object-fit: scale-down; }
.scores-page .record-list__name { min-width: 0; }
.scores-page .record-list__name b { display: block; color: var(--frost); font-size: .95rem; line-height: 1.25; }
.scores-page .record-list__name small { color: var(--dim); font-size: .78rem; }
.scores-page .record-list a:hover .record-list__name b { text-decoration: underline; text-decoration-color: rgba(147, 214, 255, .55); text-underline-offset: 3px; }
.scores-page .record-list strong { font: 700 1.3rem/1 var(--font-display); color: var(--frost); font-variant-numeric: tabular-nums; }

/* Weekly -------------------------------------------------------------------------- */
.scores-page .period-card { position: relative; padding: 18px 20px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(16, 34, 66, .84), rgba(8, 18, 38, .92)); border: 1px solid var(--line-2); box-shadow: var(--shadow-2), inset 0 1px 0 rgba(200, 225, 255, .12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.scores-page .period-card p { margin: 0; }
.scores-page .period-card__label { display: flex; align-items: center; gap: 8px; font: 700 .84rem/1.2 var(--font-display); color: var(--ice); }
.scores-page .period-card__label svg { width: 17px; height: 17px; }
.scores-page .period-card .period-card__range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 0 8px; font: 700 1.4rem/1.1 var(--font-display); color: var(--frost); }
.scores-page .period-card__arrow svg { display: block; width: 20px; height: 20px; color: var(--ice); }
.scores-page .period-card__note { color: var(--dim); font-size: .85rem; line-height: 1.45; }
.scores-page .weekly-table td.is-key { color: var(--frost); }

/* Compare ------------------------------------------------------------------------ */
.scores-page .versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: end; gap: 14px 16px; margin: 0 0 24px; padding: 20px 22px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(16, 33, 62, .8), rgba(8, 18, 36, .92)); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); }
.scores-page .versus__field { display: grid; gap: 7px; min-width: 0; }
.scores-page .versus__vs { position: relative; isolation: isolate; display: grid; place-items: center; width: 46px; height: 46px; font: 700 .95rem/1 var(--font-display); color: #fff; }
.scores-page .versus__vs::before { content: ""; position: absolute; inset: 5px; z-index: -1; transform: rotate(45deg); border-radius: 7px; background: linear-gradient(135deg, #7fb4ff, #2f6bff 50%, #15309a); box-shadow: 0 0 0 2px rgba(200, 225, 255, .35), 0 6px 18px rgba(47, 107, 255, .45); }
.scores-page .versus__submit { min-height: 46px; }

.scores-page .duel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; margin: 0 0 24px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(14, 30, 60, .86), rgba(8, 18, 38, .94)); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); overflow: hidden; }
.scores-page .duel__side { display: flex; align-items: center; gap: 18px; min-width: 0; padding: 22px 24px; }
.scores-page .duel__side--b { flex-direction: row-reverse; text-align: right; }
.scores-page .duel__side.is-leading { background: radial-gradient(420px 200px at 0 50%, rgba(47, 107, 255, .2), transparent 70%); }
.scores-page .duel__side--b.is-leading { background: radial-gradient(420px 200px at 100% 50%, rgba(47, 107, 255, .2), transparent 70%); }
.scores-page .duel__avatar { --avatar: 76px; box-shadow: 0 0 0 2px rgba(170, 210, 255, .45), 0 0 0 6px rgba(8, 18, 38, .9), 0 0 0 7px var(--line-2); }
.scores-page .duel__side.is-leading .duel__avatar { box-shadow: 0 0 0 2px var(--ice), 0 0 0 6px rgba(8, 18, 38, .9), 0 0 0 7px rgba(147, 214, 255, .5), 0 0 26px rgba(95, 155, 255, .45); }
.scores-page .duel__who { min-width: 0; }
.scores-page .duel__mode { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 6px; font: 700 .8rem/1.2 var(--font-display); color: var(--ice); }
.scores-page .duel__mode .game-mode-icon { width: 13px; height: 13px; vertical-align: 0; }
.scores-page .duel h2 { margin: 0 0 10px; font-size: clamp(1.2rem, 2.06vw, 1.63rem); overflow-wrap: anywhere; }
.scores-page .duel h2 a:hover .player-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.scores-page .duel__stats { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.scores-page .duel__side--b .duel__stats { justify-content: flex-end; }
.scores-page .duel__stats dt { font: 700 .76rem/1.2 var(--font-display); color: var(--dim); }
.scores-page .duel__stats dd { margin: 2px 0 0; font: 700 1.2rem/1.1 var(--font-display); color: var(--frost); font-variant-numeric: tabular-nums; }
.scores-page .duel__score { display: grid; place-content: center; justify-items: center; gap: 4px; min-width: 170px; padding: 18px 22px; text-align: center; border-inline: 1px solid var(--line); background: rgba(3, 9, 22, .35); }
.scores-page .duel__score p { margin: 0; }
.scores-page .duel__tally { display: flex; align-items: center; gap: 12px; font: 700 2.34rem/1 var(--font-display); color: #fff; }
.scores-page .duel__tally span { color: var(--dim); font-size: 1.6rem; }
.scores-page .duel__caption { font: 700 .8rem/1.2 var(--font-display); color: var(--ice); }
.scores-page .duel__minor { color: var(--dim); font-size: .82rem; }
.scores-page .duel__minor .num { color: var(--mist); }

/* Side-by-side table: first player's column reads right-aligned towards the
   centre line, second player's column reads left-aligned away from it. */
.scores-page .compare-board + .compare-board { margin-top: 24px; }
.scores-page .compare-table { table-layout: fixed; }
.scores-page .compare-table .compare-table__skill { width: 30%; }
.scores-page .compare-table thead th { color: var(--mist); }
.scores-page .compare-table thead .player-name { font: inherit; letter-spacing: inherit; }
.scores-page .compare-table .side-a { text-align: right; padding-right: 20px; }
.scores-page .compare-table .side-b { text-align: left; padding-left: 20px; border-left: 1px solid var(--line-2); }
.scores-page .compare-table tbody th { font: 700 .95rem/1.2 var(--font-text); color: var(--frost); text-align: left; }
.scores-page .compare-skill { display: inline-flex; align-items: center; gap: 12px; min-width: 0; max-width: 100%; }
.scores-page .compare-skill img { flex: none; width: 26px; height: 26px; object-fit: scale-down; }
.scores-page .compare-table td { position: relative; padding-block: 9px; }
.scores-page .compare-table td b { display: block; font-size: 1.05rem; color: var(--dim); }
.scores-page .compare-table td small { display: block; margin-top: 2px; color: var(--dim); font-size: .8rem; opacity: .85; }
.scores-page .compare-table td.is-winner b { color: #fff; }
.scores-page .compare-table td.is-winner small { color: var(--ice-2); opacity: 1; }
.scores-page .compare-table td.side-a.is-winner { background: linear-gradient(270deg, rgba(47, 107, 255, .28), rgba(47, 107, 255, .07) 45%, transparent 92%); }
.scores-page .compare-table td.side-b.is-winner { background: linear-gradient(90deg, rgba(47, 107, 255, .28), rgba(47, 107, 255, .07) 45%, transparent 92%); }
.scores-page .lead-mark { position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -5px; transform: rotate(45deg); background: linear-gradient(135deg, #e0f3ff, var(--sapphire-2) 55%, var(--sapphire-deep)); box-shadow: 0 0 10px rgba(110, 170, 255, .95); }
.scores-page .side-a .lead-mark { right: -5px; z-index: 1; }
.scores-page .side-b .lead-mark { left: -5px; }
.scores-page .compare-empty { margin-top: 8px; }
.scores-page .compare-empty h2 { font-size: 1.4rem; }

/* Responsive ---------------------------------------------------------------------- */
@media (max-width: 1340px) {
  .scores-page .mode-pill { gap: 6px; padding-right: 5px; }
  .scores-page .mode-pill__icon { width: 26px; height: 26px; }
}
@media (max-width: 1180px) {
  .scores-page .stat-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scores-page .stat-band > div:nth-child(4) { border-left: 0; }
  .scores-page .stat-band > div:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .scores-page .profile-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .scores-page .skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1020px) {
  .scores-page .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .scores-page .skill-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scores-page .record-stack { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
  .scores-page .record-stack > .btn { grid-column: 1 / -1; }
  .scores-page .versus { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .scores-page .versus__submit { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  /* One column: category group tabs, then the chosen group's categories. */
  .scores-page .scores-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .scores-page .cat-panel { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .scores-page .cat-tabs { position: relative; display: flex; gap: 2px; margin: 0 0 12px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .scores-page .cat-tabs::-webkit-scrollbar { display: none; }
  .scores-page .cat-tabs a { position: relative; flex: 1 0 auto; display: grid; place-items: center; min-height: 46px; padding: 0 12px; color: var(--dim); font: 700 .85rem/1 var(--font-display); }
  .scores-page .cat-tabs a:hover { color: var(--frost); }
  .scores-page .cat-tabs a.is-active { color: #fff; }
  .scores-page .cat-tabs a.is-active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--sapphire), var(--ice)); box-shadow: 0 0 10px rgba(110, 170, 255, .8); }
  .scores-page .cat-tabs a:focus-visible { outline-offset: -3px; }
  .scores-page .cat-group { display: none; }
  .scores-page .cat-group.is-current { display: block; }
  .scores-page .cat-group + .cat-group { margin-top: 0; }
  .scores-page .cat-group__title, .scores-page .cat-group--fold > summary { display: none; }
  .scores-page .cat-group__links { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 2px 36px 8px 2px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .scores-page .cat-group__links::-webkit-scrollbar { display: none; }
  .scores-page .cat-link { flex: none; gap: 8px; min-height: 44px; padding: 5px 16px 5px 7px; border-radius: 999px; background: rgba(12, 26, 50, .7); border: 1px solid var(--line-2); font: 700 .85rem/1 var(--font-display); }
  .scores-page .cat-link span { overflow: visible; }
  .scores-page .cat-link.is-active { background: linear-gradient(180deg, rgba(60, 110, 230, .55), rgba(30, 64, 160, .55)); border-color: #6c9dff; box-shadow: 0 6px 18px rgba(40, 100, 255, .25); }
  /* Skills become an icon grid, like the in-game skills tab; names stay for screen readers. */
  .scores-page .cat-group--skills .cat-group__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; overflow: visible; padding: 2px 0 6px; -webkit-mask-image: none; mask-image: none; }
  .scores-page .cat-group--skills .cat-link { justify-content: center; min-height: 44px; padding: 0; border-radius: 12px; }
  .scores-page .cat-group--skills .cat-link img { width: 28px; height: 28px; }
  .scores-page .cat-group--skills .cat-link span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .scores-page .cat-group--skills .cat-link.is-active { box-shadow: 0 0 0 1px #6c9dff, 0 6px 18px rgba(40, 100, 255, .3); }
}
@media (max-width: 860px) {
  .scores-page .scores-hero__inner { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 22px; }
  .scores-page .scores-hero__art { background-position: 70% 30%; }
  .scores-page .scores-hero::before { background: linear-gradient(90deg, rgba(5, 11, 25, .94), rgba(5, 11, 25, .6)), linear-gradient(180deg, rgba(5, 11, 25, .3), transparent 30%, rgba(5, 11, 25, .85) 100%); }
  .scores-page .duel { grid-template-columns: minmax(0, 1fr); }
  .scores-page .duel__side--b { flex-direction: row; text-align: left; }
  .scores-page .duel__side--b .duel__stats { justify-content: flex-start; }
  .scores-page .duel__side--b.is-leading { background: radial-gradient(420px 200px at 0 50%, rgba(47, 107, 255, .2), transparent 70%); }
  .scores-page .duel__score { order: 3; grid-template-columns: auto auto; place-content: center; gap: 4px 14px; border-inline: 0; border-top: 1px solid var(--line); min-width: 0; padding: 14px 18px; }
  .scores-page .duel__tally { font-size: 1.9rem; grid-row: span 2; }
  .scores-page .duel__caption { align-self: end; justify-self: start; }
  .scores-page .duel__minor { align-self: start; justify-self: start; }
  .scores-page .duel__side--b { border-top: 1px solid var(--line); }
}
@media (max-width: 960px) {
  /* Account modes: one swipeable row with a fade hinting at more. */
  .scores-page .mode-rail { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px 44px 6px var(--gutter); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .scores-page .mode-rail::-webkit-scrollbar { display: none; }
  /* The sets dissolve into one row so the selected mode can lead it (the page
     cannot scroll the row to it without script). Same for long activity rows. */
  .scores-page .mode-rail__set { display: contents; }
  .scores-page .mode-rail__set--groups::before { content: none; }
  .scores-page .mode-pill.is-active, .scores-page .cat-group--fold:not(.cat-group--skills) .cat-link.is-active { order: -1; }
  .scores-page .mode-pill { min-height: 44px; }
  .scores-page .mode-pill:focus-visible, .scores-page .cat-group__links .cat-link:focus-visible { outline-offset: -3px; }
}
@media (max-width: 760px) {
  .scores-page .skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .scores-page .board__head { padding: 16px; gap: 14px; }
  .scores-page .board__icon { width: 54px; height: 54px; }
  .scores-page .board__icon img { width: 32px; height: 32px; }
  .scores-page .board__filter { flex: 1 1 100%; margin-left: 0; }
  .scores-page .board__aside { margin-left: 0; }
  .scores-page .board .s53-pagination, .scores-page .board__foot { padding-inline: 16px; }
  .scores-page .board__subhead { padding-inline: 16px; }
  .scores-page .board__empty { margin: 16px; }
  .scores-page .group-summary { margin-left: 0; flex: 1 1 100%; }
  .scores-page .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scores-page .stat-band > div { padding: 14px 16px; }
  .scores-page .stat-band > div:nth-child(4) { border-left: 1px solid var(--line); }
  .scores-page .stat-band > div:nth-child(odd) { border-left: 0; }
  .scores-page .stat-band > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .scores-page .classic-table th, .scores-page .classic-table td { padding: 10px 12px; }
  .scores-page .ranking-table td:first-child, .scores-page .group-ranking-table td:first-child, .scores-page .weekly-table td:first-child, .scores-page .group-member-table td:first-child { width: 52px; }
  .scores-page .podium { gap: 8px; padding: 20px 12px 0; }
  .scores-page .podium__card { min-height: 156px; padding: 16px 6px 12px; gap: 3px; }
  .scores-page .podium__place--1 .podium__card { min-height: 180px; }
  .scores-page .podium__place--3 .podium__card { min-height: 144px; }
  .scores-page .podium__avatar { --avatar: 52px; }
  .scores-page .podium__place--1 .podium__avatar { --avatar: 62px; }
  .scores-page .podium__portrait { margin-bottom: 10px; }
  .scores-page .podium__portrait .rank { width: 24px; min-width: 24px; height: 24px; bottom: -10px; font-size: .8rem; }
  .scores-page .podium__place--1 .podium__portrait .rank { width: 28px; min-width: 28px; height: 28px; bottom: -12px; font-size: .9rem; }
  .scores-page .podium__name, .scores-page .podium__place--1 .podium__name { gap: 5px; font-size: .9rem; }
  .scores-page .podium__name .hiscore-mode-icon { display: none; }
  .scores-page .podium__stat { gap: 0 4px; }
  .scores-page .podium__stat b { font-size: 1.15rem; }
  .scores-page .podium__place--1 .podium__stat b { font-size: 1.35rem; }
  .scores-page .podium__stat small { font-size: .6rem; }
  .scores-page .podium__sub { font-size: .72rem; }
  .scores-page .versus { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .scores-page .versus__vs { justify-self: center; width: 40px; height: 40px; margin: -4px 0 -6px; font-size: .85rem; }
  .scores-page .duel__side { padding: 16px; gap: 14px; }
  .scores-page .duel__avatar { --avatar: 60px; }
  .scores-page .compare-table .compare-table__skill { width: 34%; }
  .scores-page .compare-skill { gap: 8px; }
  .scores-page .compare-skill img { width: 22px; height: 22px; }
}
@media (max-width: 560px) {
  .scores-page .scores-views__inner { gap: 0; }
  .scores-page .scores-views a { flex: 1 1 0; justify-content: center; gap: 7px; min-height: 50px; padding: 0 6px; font-size: .8rem; }
  .scores-page .scores-views a:first-child { padding-left: 6px; }
  .scores-page .scores-views a[aria-current="page"]::after, .scores-page .scores-views a:first-child[aria-current="page"]::after { left: 6px; right: 6px; }
  .scores-page .scores-views .label-long { display: none; }
  .scores-page .scores-views .label-short { display: inline; }
  .scores-page .cat-tabs a { padding: 0 8px; font-size: .76rem; }
  .scores-page .skill-tile { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; gap: 1px 8px; min-height: 0; padding: 8px 10px 9px 8px; }
  .scores-page .skill-tile__icon { grid-row: 1; width: 32px; height: 32px; margin-bottom: 3px; }
  .scores-page .skill-tile__level { grid-row: 1; align-self: center; }
  .scores-page .skill-tile__name { grid-column: 1 / 4; grid-row: 2; }
  .scores-page .skill-tile__xp { grid-column: 1 / 4; grid-row: 3; }
  .scores-page .skill-tile__icon img { width: 22px; height: 22px; }
  .scores-page .skill-tile__level { font-size: 1.35rem; }
  .scores-page .skill-tile__rank { align-self: start; font-size: .76rem; }
  .scores-page .skill-tile__name { font-size: .68rem; }
  .scores-page .skill-tile__xp { justify-self: start; font-size: .74rem; }
}
@media (max-width: 460px) {
  .scores-page .lookup { padding: 16px; }
  .scores-page .lookup__row .btn { padding-inline: 16px; }
  .scores-page .player-banner { gap: 14px; }
  .scores-page .player-banner__avatar { --avatar: 68px; }
  .scores-page .classic-table th, .scores-page .classic-table td { padding: 9px 8px; }
  .scores-page .rank-player { gap: 7px; }
  .scores-page .skill-grid { gap: 6px; padding: 10px; }
  .scores-page .record-list a { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; }
  .scores-page .record-list__icon { width: 38px; height: 38px; }
  .scores-page .compare-table tbody th { font-size: .82rem; }
  .scores-page .compare-skill { flex-direction: column; align-items: flex-start; gap: 4px; }
  .scores-page .compare-table td b { font-size: .95rem; }
  .scores-page .compare-table td small { font-size: .72rem; }
  .scores-page .compare-table .side-a { padding-right: 14px; }
  .scores-page .compare-table .side-b { padding-left: 14px; }
  .scores-page .board__head { gap: 12px 14px; }
  .scores-page .board__icon { width: 48px; height: 48px; box-shadow: 0 0 0 1px rgba(170, 210, 255, .42), 0 0 0 4px rgba(8, 18, 38, .92), 0 0 0 5px var(--line-2); }
  .scores-page .board__icon img { width: 28px; height: 28px; }
  .scores-page .board__title { flex-basis: 150px; }
  .scores-page .board__filter .input-icon { flex-basis: 120px; }
  .scores-page .board__filter .btn { padding-inline: 16px; }
}
@media (max-width: 360px) {
  .scores-page .lookup__row { flex-direction: column; }
  .scores-page .lookup__row .btn { width: 100%; }
  .scores-page .board__title h2 { font-size: 1.3rem; }
  .scores-page .board__head > .board__icon { display: none; }
  .scores-page .scores-views a svg { display: none; }
  .scores-page .cat-tabs a { padding: 0 6px; font-size: .72rem; }
  .scores-page .podium { gap: 5px; padding-inline: 8px; }
  .scores-page .podium__sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scores-page .podium__card:hover, .scores-page .skill-tile:hover { transform: none; }
}