.rankings-compact { --ranking-accent: #38bdf8; --ranking-accent-rgb: 56, 189, 248; width: 100%; height: 100%; min-width: 0; display: flex; flex-direction: column; position: relative; overflow: visible; border: 1px solid rgba(var(--ranking-accent-rgb),0.5); border-bottom-width: 4px; border-bottom-color: rgba(var(--ranking-accent-rgb),0.78); border-radius: 9px; background-color: rgba(7,9,18,0.97); background-image: linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px), radial-gradient(circle at 8% 0%, rgba(var(--ranking-accent-rgb),0.18), transparent 42%); background-size: 20px 20px, 20px 20px, 100% 100%; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 28px rgba(0,0,0,0.5), 0 0 18px rgba(var(--ranking-accent-rgb),0.14); contain: layout; transform: translate3d(0,0,0); backface-visibility: hidden; will-change: transform, opacity; animation: rankingsCompactEntry 0.64s cubic-bezier(0.34, 1.56, 0.64, 1) both; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease, box-shadow 0.3s ease; }
.rankings-compact[data-ranking-mode="ranked"] { --ranking-accent: #38bdf8; --ranking-accent-rgb: 56, 189, 248; }
.rankings-compact[data-ranking-mode="reverse"] { --ranking-accent: #e879f9; --ranking-accent-rgb: 232, 121, 249; animation-delay: 0.08s; }
.rankings-compact[data-ranking-mode="fast"] { --ranking-accent: #fbbf24; --ranking-accent-rgb: 251, 191, 36; animation-delay: 0.16s; }
.rankings-compact[data-ranking-mode="xp"] { --ranking-accent: #c084fc; --ranking-accent-rgb: 192, 132, 252; animation-delay: 0.24s; }
.rankings-compact[data-ranking-mode="ranked"] .rankings-compact__heading img, .rankings-compact[data-ranking-mode="xp"] .rankings-compact__heading img { left: -20px; }
.rankings-compact::before, .rankings-compact::after { content: ""; width: 3px; height: 62%; position: absolute; top: 19%; z-index: 8; border-radius: 3px; background: var(--ranking-accent); opacity: 0.72; box-shadow: 0 0 8px #fff, 0 0 18px rgba(var(--ranking-accent-rgb),0.9); pointer-events: none; transition: height 0.3s ease, top 0.3s ease, opacity 0.3s ease; }
.rankings-compact::before { left: 0; }
.rankings-compact::after { right: 0; }
.rankings-compact:hover { border-color: rgba(var(--ranking-accent-rgb),0.82); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 14px 30px rgba(0,0,0,0.58), 0 0 25px rgba(var(--ranking-accent-rgb),0.24); transform: translate3d(0,-3px,0); }
.rankings-compact:hover::before, .rankings-compact:hover::after { top: 10%; height: 80%; opacity: 1; }
.rankings-compact__header { height: 59px; min-height: 59px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; position: relative; z-index: 6; overflow: visible; border-bottom: 1px solid rgba(var(--ranking-accent-rgb),0.3); border-radius: 8px 8px 0 0; background: linear-gradient(90deg, rgba(var(--ranking-accent-rgb),0.16), rgba(0,0,0,0.36) 78%); }
.rankings-compact__heading { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 0; position: relative; overflow: visible; }
.rankings-compact__heading img { width: 84px; height: 84px; position: absolute; top: 50%; left: -30px; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 0 10px rgba(var(--ranking-accent-rgb),0.58)); transform: translate3d(0,calc(-50% - 4px),0); backface-visibility: hidden; will-change: transform; }
.rankings-compact__heading div { min-width: 0; flex: 1 1 auto; margin-left: 62px; }
.rankings-compact__heading h2 { margin: 0; overflow: hidden; color: #fff; font-family: "Kanit", sans-serif; font-size: 1.24rem; font-weight: 900; letter-spacing: 0.01em; line-height: 1; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; text-shadow: 0 0 14px rgba(var(--ranking-accent-rgb),0.36); }
.rankings-compact__heading p { margin: 4px 0 0; overflow: hidden; color: var(--ranking-accent); font-family: "JetBrains Mono", monospace; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.07em; line-height: 1; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.rankings-compact__access { flex: 0 0 auto; padding: 0.5rem 1.2rem; position: relative; z-index: 10; color: #fff; border: 2px solid var(--ranking-accent); border-radius: 5px 15px; background: rgba(var(--ranking-accent-rgb),0.2); box-shadow: 0 0 14px rgba(0,0,0,0.25), 0 0 7px var(--ranking-accent); font-family: "Kanit", sans-serif; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.05em; line-height: 1; text-decoration: none; text-transform: uppercase; white-space: nowrap; transform: translate3d(0,0,0); transform-style: preserve-3d; backface-visibility: hidden; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, box-shadow 0.3s ease; }
.rankings-compact__access::before, .rankings-compact__access::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; border: 1px solid var(--ranking-accent); border-radius: inherit; pointer-events: none; transform-style: preserve-3d; transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease; }
.rankings-compact__access:hover, .rankings-compact__access:focus-visible { color: #fff; background: rgba(var(--ranking-accent-rgb),0.28); box-shadow: 0 0 20px rgba(0,0,0,0.3), 0 0 12px var(--ranking-accent); transform: translate3d(0,-2px,0); }
.rankings-compact__access:hover::before, .rankings-compact__access:focus-visible::before { opacity: 0.45; transform: translate3d(4px,-4px,-15px); }
.rankings-compact__access:hover::after, .rankings-compact__access:focus-visible::after { opacity: 0.65; transform: translate3d(0,0,-5px); }
.rankings-compact__list { min-height: 0; flex: 1 1 auto; margin: 0; padding: 0; position: relative; z-index: 3; overflow: hidden; list-style: none; }
.rankings-compact__row { min-height: 43px; display: grid; grid-template-columns: 54px minmax(0,1fr) auto auto; align-items: center; gap: 8px; padding: 0 12px 0 8px; position: relative; isolation: isolate; overflow: hidden; color: #e2e8f0; border-bottom: 1px solid rgba(148,163,184,0.13); background: rgba(15,23,42,0.16); transform: translate3d(0,0,0); backface-visibility: hidden; }
.rankings-compact__row:last-child { border-bottom: none; }
.rankings-compact__row::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--rankings-compact-avatar); background-repeat: no-repeat; background-size: auto 120%; background-position: -10px center; opacity: 0.96; filter: saturate(1.08) contrast(1.06) brightness(1.04); pointer-events: none; transform: translate3d(0,0,0); backface-visibility: hidden; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease, opacity 0.25s ease; }
.rankings-compact__row::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(3,6,15,0.08) 0%, rgba(3,6,15,0.18) 24%, rgba(3,6,15,0.78) 58%, rgba(3,6,15,0.96) 100%); pointer-events: none; transition: background 0.25s ease; }
.rankings-compact__row:hover::before { opacity: 1; filter: saturate(1.16) contrast(1.08) brightness(1.1); transform: translate3d(3px,0,0); }
.rankings-compact__row:hover::after { background: linear-gradient(90deg, rgba(3,6,15,0) 0%, rgba(3,6,15,0.04) 32%, rgba(3,6,15,0.7) 60%, rgba(3,6,15,0.94) 100%); }
.rankings-compact__row--1 { color: #fff3b0; background: linear-gradient(90deg, rgba(250,204,21,0.15), rgba(15,23,42,0.1)); box-shadow: inset 4px 0 0 #facc15; }
.rankings-compact__row--2 { color: #e0e7ff; box-shadow: inset 4px 0 0 #cbd5e1; }
.rankings-compact__row--3 { color: #fed7aa; box-shadow: inset 4px 0 0 #fb923c; }
.rankings-compact__position { position: relative; z-index: 2; font-family: "Kanit", sans-serif; font-size: 1.02rem; font-weight: 900; text-align: center; text-shadow: 0 0 8px currentColor, 0 2px 4px rgba(0,0,0,0.9); }
.rankings-compact__name { min-width: 0; position: relative; z-index: 2; overflow: hidden; color: #fff; font-family: "Kanit", sans-serif; font-size: 1rem; font-weight: 800; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 4px rgba(0,0,0,0.94); }
.rankings-compact__name:hover { color: var(--ranking-accent); }
.rankings-compact__rank-badge { width: 28px; height: 28px; position: relative; z-index: 2; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255,255,255,0.3)); transform: translate3d(0,0,0); backface-visibility: hidden; }
.rankings-compact__value { position: relative; z-index: 2; color: var(--ranking-accent); font-family: "JetBrains Mono", monospace; font-size: 0.92rem; font-weight: 900; text-align: right; white-space: nowrap; text-shadow: 0 0 8px rgba(var(--ranking-accent-rgb),0.28); }
.rankings-compact__value small { color: rgba(241,245,249,0.8); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }
.rankings-compact__empty { min-height: 129px; display: flex; align-items: center; justify-content: center; padding: 12px; color: rgba(226,232,240,0.76); font-family: "Kanit", sans-serif; font-size: 0.78rem; font-weight: 600; text-align: center; }
.rankings-compact__row.is-masked { grid-template-columns: 48px 38px minmax(0,1fr) auto; opacity: 0.78; filter: blur(0.2px); }
.rankings-compact__row.is-masked::before { display: none; }
.rankings-compact__masked-avatar { width: 34px; height: 30px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; color: rgba(196,181,253,0.76); border: 1px solid rgba(139,92,246,0.34); border-radius: 5px; background: rgba(13,10,31,0.76); }
.rankings-compact.is-masked .rankings-compact__list::after { content: ""; position: absolute; inset: 0; z-index: 4; background: linear-gradient(90deg, rgba(8,8,22,0.34), transparent 28%, rgba(8,8,22,0.4)); pointer-events: none; }
.rankings-compact__footer { display: flex; align-items: center; justify-content: flex-end; position: absolute; top: 8px; right: 10px; z-index: 11; pointer-events: none; }
.rankings-compact__footer .rankings-compact__access { pointer-events: auto; }
@keyframes rankingsCompactEntry { 0% { opacity: 0; transform: translate3d(0,18px,0) scale(0.96); } 100% { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@media (max-width: 1279.98px) {
  .rankings-compact { min-height: 220px; }
  .rankings-compact__row { min-height: 43px; }
}
@media (max-width: 767px) {
  .rankings-compact__header { height: 56px; min-height: 56px; padding: 6px 8px; }
  .rankings-compact__heading img { width: 74px; height: 74px; left: -20px; transform: translate3d(0,calc(-50% - 4px),0); }
  .rankings-compact__heading div { margin-left: 46px; }
  .rankings-compact[data-ranking-mode="ranked"] .rankings-compact__heading img, .rankings-compact[data-ranking-mode="xp"] .rankings-compact__heading img { left: -14px; }
  .rankings-compact__heading h2 { font-size: 0.9rem; }
  .rankings-compact__heading p { font-size: 0.58rem; }
  .rankings-compact__access { padding: 0.4rem 0.55rem; border-width: 1px; border-radius: 4px 11px; font-size: 0.58rem; }
  .rankings-compact__row { grid-template-columns: 44px minmax(0,1fr) auto; gap: 5px; padding-right: 8px; }
  .rankings-compact__row::before { background-size: auto 112%; background-position: -18px center; }
  .rankings-compact__rank-badge { display: none; }
  .rankings-compact__name { font-size: 0.75rem; }
  .rankings-compact__value { font-size: 0.68rem; }
  .rankings-compact__value small { font-size: 0.52rem; }
}
@media (max-width: 767px) {
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact { min-height: 0; }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__header { height: 52px; min-height: 52px; gap: 4px; padding: 5px 6px; }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__heading img { width: 62px; height: 62px; left: -28px; }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact[data-ranking-mode="ranked"] .rankings-compact__heading img, body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact[data-ranking-mode="xp"] .rankings-compact__heading img { left: -24px; }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__heading div { margin-left: 52px; }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__heading h2 { font-size: 0.68rem; letter-spacing: -0.02em; text-overflow: clip; }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__heading p { margin-top: 3px; font-size: 0.48rem; letter-spacing: 0.035em; }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__footer { min-height: 30px; display: flex; justify-content: center; position: static; margin: 7px auto 10px; }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__footer .rankings-compact__access { min-height: 26px; padding: 0.34rem 0.72rem; border-width: 1px; border-radius: 4px 10px; font-size: 0.54rem; }
}
/* PANTHEON:ATTENUATION-2026-08-01:START */
@media (min-width: 1280px) {
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact { border-color: rgba(var(--ranking-accent-rgb),0.3); border-bottom-color: rgba(var(--ranking-accent-rgb),0.5); background-color: rgba(7,9,18,0.92); background-image: linear-gradient(rgba(255,255,255,0.016) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.016) 1px,transparent 1px),radial-gradient(circle at 8% 0%,rgba(var(--ranking-accent-rgb),0.08),transparent 42%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04),0 7px 18px rgba(0,0,0,0.38),0 0 8px rgba(var(--ranking-accent-rgb),0.05); }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact::before, body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact::after { width: 2px; opacity: 0.3; box-shadow: 0 0 4px rgba(255,255,255,0.72),0 0 8px rgba(var(--ranking-accent-rgb),0.46); }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__header { height: 52px; min-height: 52px; padding: 6px 10px; border-bottom-color: rgba(var(--ranking-accent-rgb),0.18); background: linear-gradient(90deg,rgba(var(--ranking-accent-rgb),0.055),rgba(0,0,0,0.36) 78%); }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__heading img { width: 76px; height: 76px; filter: drop-shadow(0 0 5px rgba(var(--ranking-accent-rgb),0.22)); }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__heading div { margin-left: 54px; }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__heading h2 { font-size: 1.05rem; text-shadow: 0 0 9px rgba(var(--ranking-accent-rgb),0.2); }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__heading p { margin-top: 3px; font-size: 0.68rem; opacity: 0.82; }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__access { padding: 0.42rem 0.82rem; border-width: 1px; background: rgba(var(--ranking-accent-rgb),0.085); box-shadow: 0 0 7px rgba(0,0,0,0.22),0 0 3px rgba(var(--ranking-accent-rgb),0.62); font-size: 0.66rem; }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__row { min-height: 34px; grid-template-columns: 45px minmax(0,1fr) auto auto; gap: 6px; padding-right: 10px; border-bottom-color: rgba(148,163,184,0.08); background: rgba(15,23,42,0.1); }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__row::before { opacity: 0.62; filter: saturate(0.82) contrast(1.02) brightness(0.86); }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__row::after { background: linear-gradient(90deg,rgba(3,6,15,0.2) 0%,rgba(3,6,15,0.4) 28%,rgba(3,6,15,0.86) 62%,rgba(3,6,15,0.97) 100%); }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__position { font-size: 0.84rem; text-shadow: 0 0 5px currentColor,0 2px 4px rgba(0,0,0,0.9); }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__name { font-size: 0.84rem; }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__rank-badge { width: 22px; height: 22px; filter: drop-shadow(0 0 4px rgba(255,255,255,0.2)); }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__value { font-size: 0.78rem; text-shadow: 0 0 5px rgba(var(--ranking-accent-rgb),0.18); }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__value small { font-size: 0.6rem; }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__empty { min-height: 170px; }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact:hover { border-color: rgba(var(--ranking-accent-rgb),0.56); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07),0 10px 22px rgba(0,0,0,0.46),0 0 14px rgba(var(--ranking-accent-rgb),0.12); }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact:hover::before, body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact:hover::after { opacity: 0.62; box-shadow: 0 0 5px #fff,0 0 12px rgba(var(--ranking-accent-rgb),0.68),0 0 18px rgba(var(--ranking-accent-rgb),0.38); }
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__row:hover::before { opacity: 0.94; filter: saturate(1.02) contrast(1.05) brightness(1.02); }
}
/* PANTHEON:ATTENUATION-2026-08-01:END */
body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__row::before { background-position: 96px center; }
body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__row::before { background-size: auto 100%; opacity: 0.78; filter: saturate(0.98) contrast(1.04) brightness(0.96); }
body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__row::after { background: linear-gradient(90deg, rgba(3,6,15,0.08) 0%, rgba(3,6,15,0.12) 24%, rgba(3,6,15,0.34) 58%, rgba(3,6,15,0.76) 100%); }
body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__row:hover::before { opacity: 1; filter: saturate(1.12) contrast(1.08) brightness(1.08); }
body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__row:hover::after { background: linear-gradient(90deg, rgba(3,6,15,0.04) 0%, rgba(3,6,15,0.08) 32%, rgba(3,6,15,0.38) 58%, rgba(3,6,15,0.78) 100%); }
@media (max-width: 767px) {
  body.page-rankings.rankings-home-page .rankings-home__rankings .rankings-compact__row::before { background-position: 32px center; }
}