:root{
  --bg: #0b0f14;
  --card: #121826;
  --muted: rgba(255,255,255,.6);
  --text: rgba(255,255,255,.92);
  --line: rgba(255,255,255,.08);
  --accent: #5cd6ff;
  --accent2: #8a5cff;
  --shadow: 0 12px 40px rgba(0,0,0,.35);
  --radius: 16px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing: border-box; }
body{
  margin:0;
  font-family: var(--sans);
  background: radial-gradient(1200px 800px at 20% 0%, rgba(138,92,255,.18), transparent 60%),
              radial-gradient(900px 600px at 80% 20%, rgba(92,214,255,.14), transparent 60%),
              var(--bg);
  color: var(--text);
  font-size: 15px;
}

.topbar{
  position: sticky;
  top:0;
  z-index: 10;
  backdrop-filter: blur(10px);
  background: rgba(11,15,20,.68);
  border-bottom: 1px solid var(--line);
}
.topbar__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.brand__title{
  font-size: 18px;
  letter-spacing: .2px;
  font-weight: 700;
}
.brand__meta{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}
.controls{
  display:flex;
  align-items:center;
  gap: 10px;
}
.rankingSwitch{
  flex: 1 1 auto;
  min-width: 260px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
}
.rankingSwitch__label{
  min-width: 150px;
  padding: 8px 14px;
  border: 1px solid rgba(88,255,255,.28);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 20%, rgba(92,214,255,.22), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  color: rgba(235,255,255,.92);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-align:center;
  white-space: nowrap;
  text-shadow: 0 0 10px rgba(92,214,255,.28);
  box-shadow:
    inset 0 0 12px rgba(92,214,255,.08),
    0 0 18px rgba(92,214,255,.10);
}
.rankingSwitch__buttons{
  display:inline-flex;
  align-items:center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(92,214,255,.28);
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  box-shadow:
    inset 0 0 12px rgba(92,214,255,.08),
    0 0 18px rgba(92,214,255,.10);
}
.rankingSwitch__btn{
  min-width: 92px;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,.62);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  cursor: pointer;
  transition: transform .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease, text-shadow .16s ease;
}
.rankingSwitch__btn:hover:not(:disabled),
.rankingSwitch__btn:focus-visible:not(:disabled){
  color: rgba(255,255,255,.92);
  text-shadow: 0 0 10px rgba(92,214,255,.45);
  outline: none;
}
.rankingSwitch__btn.is-active{
  color: rgba(224,255,222,.98);
  background:
    linear-gradient(180deg, rgba(88,255,144,.24), rgba(92,214,255,.13));
  box-shadow:
    inset 0 0 12px rgba(96,255,108,.13),
    0 0 14px rgba(96,255,108,.16),
    0 0 20px rgba(92,214,255,.10);
  text-shadow:
    0 0 5px rgba(96,255,108,.62),
    0 0 13px rgba(92,214,255,.34);
}
.rankingSwitch__btn:disabled{
  opacity: .38;
  cursor: not-allowed;
}
.search{
  width: 260px;
  max-width: 48vw;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline: none;
}
.sort{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
  outline: none;
}

.layout{
  max-width: 1200px;
  margin: 16px auto 40px;
  padding: 0 16px;
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
}
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card__title{
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  letter-spacing: .2px;
}

.tablewrap{ overflow:auto; }
.table{
  width: 100%;
  border-collapse: collapse;
}
thead th{
  position: sticky;
  top: 0;
  background: rgba(18,24,38,.9);
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  color: var(--muted);
  text-align:left;
  padding: 10px 12px;
  white-space: nowrap;
}
tbody td{
  border-bottom: 1px solid var(--line);
  padding: 14px 14px;
  vertical-align: middle;
  font-size: 18px;
}
tbody tr:hover{
  background: rgba(255,255,255,.03);
}

.col-rank{ width: 52px; font-family: var(--mono); color: rgba(255,255,255,.75); }
.col-user{ min-width: 320px; }
.col-msg, .col-xp, .col-vc, .col-points{ width: 120px; font-family: var(--mono); }
.col-level{ width: 140px; }

.usercell{
  display:flex;
  align-items:center;
  gap: 10px;
}
.avatar{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.usercell__name{
  font-weight: 700;
  line-height: 1.1;
}
.usercell__id{
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(255,255,255,.55);
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.ring{
  position: relative;
  width: 50px;
  height: 50px;
}
.ring svg{
  transform: rotate(-90deg);
  width: 54px;
  height: 54px;
}
.ring__bg{
  fill: none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 5;
}
.ring__fg{
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
}
.ring__text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}
.ring .ring__text{
  font-size: 12px; /* 中央の Lv文字 */
}

.pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 16px;
  gap: 12px;
}
.btn{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 700;
}
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.pager__hint{
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
}

.card--side{
  padding-bottom: 10px;
  display:flex;
  flex-direction: column;
  gap: 14px;
}
.limits,
.roles{
  padding: 10px 12px 0;
  display:flex;
  flex-direction: column;
  gap: 8px;
  max-height: none;
  overflow: visible;
}
.limit,
.role{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 10px 12px;
  display:flex;
  gap: 22px;
  align-items:center;
}
.limit__lv,
.role__lv{
  font-family: var(--mono);
  font-weight: 800;
  color: rgba(255,255,255,.86);
  flex: 0 0 96px;
  width: 96px;
  white-space: nowrap;
}
.limit__name,
.role__name{
  font-weight: 700;
  color: rgba(255,255,255,.9);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.limit__name{
  font-size: 14px;
}
.roles__note{
  padding: 10px 16px 0;
  color: var(--muted);
  font-size: 12px;
}
/* ---- sort dropdown fix ---- */
select, option {
  background: #0f1420;
  color: #e8eefc;
}
select {
  border: 1px solid rgba(255,255,255,0.18);
}

/* ---- center numeric columns ---- */
.table th, .table td { vertical-align: middle; }
.table .col-user { text-align: left; }

/* numeric */
.table .col-msg,
.table .col-vc,
.table .col-points,
.table .col-level {
  text-align: center;
}


/* Level列：リングをセル中央に */
td.col-level { text-align: center; }

td.col-level .ring{
  display: inline-flex;        /* 幅を中身に合わせる */
  justify-content: center;
  align-items: center;
}

/* PCもスマホもヘッダは使わない（行内ラベルに統一） */
thead { display: none; }

/* data-label を上に出す（ただし # と User 列は除外） */
tbody td[data-label]{
  position: relative;
}

/* ← ここがポイント：rank と user 以外だけラベルを出す */
tbody td[data-label]:not(.col-rank):not(.col-user)::before{
  content: attr(data-label);
  display: block;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

/* 値側を少しだけ太く（ただし # と User 列は除外） */
tbody td[data-label]:not(.col-rank):not(.col-user){
  font-weight: 600;
}


:root{
  /* グローの主役色（好みで微調整OK） */
  --glow: rgba(64, 180, 255, .55);
  --glow2: rgba(64, 180, 255, .22);
  --line: rgba(64, 180, 255, .18);  /* 罫線も青寄せ */
}

/* 外枠カードにも青い縁とグロー */
.card{
  border: 3px solid var(--line);
  box-shadow:
    0 0 0 1px rgba(64,180,255,.08) inset,
    0 12px 40px rgba(0,0,0,.45),
    0 0 24px var(--glow2);
}


/* テーブルの各行を“横長カード”っぽく */
tbody tr{
  border-bottom: 1px solid var(--line);
}
tbody tr:hover{
  background: rgba(64,180,255,.06);
}
/* =========================
   Level Roles collapsible
========================= */
.rolesDetails{
  border: 0;
}
.rolesDetails__summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 800;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.rolesDetails__summary::-webkit-details-marker{ display:none; }
.rolesDetails__chev{
  font-size: 12px;
  opacity: .8;
  transform: rotate(0deg);
  transition: transform .15s ease;
}
.rolesDetails[open] .rolesDetails__chev{
  transform: rotate(180deg);
}
.rolesDetails__body{
  padding-bottom: 10px;
}

/* PCでは従来どおり右サイドの見た目 */
@media (min-width: 981px){
  .card--side{ padding-bottom: 0; }
  .rolesDetails__summary{ padding: 14px 16px; }
}

/* =========================
   Mobile: layout + topbar + leaderboard cards
========================= */
@media (max-width: 980px){
  /* Topbar: title on first row, controls on second row */
  .topbar__inner{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .rankingSwitch{
    width: 100%;
    min-width: 0;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .rankingSwitch__label{
    flex: 1 1 180px;
    min-width: 0;
  }
  .rankingSwitch__buttons{
    flex: 0 0 auto;
  }
  .controls{
    width: 100%;
  }
  .search{
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
  }
  .sort{
    flex: 0 0 auto;
    min-width: 140px;
  }

  /* Layout: Level Roles first, then leaderboard */
  .layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "roles"
      "board";
  }
  .layout > section.card{ grid-area: board; }
  .layout > aside.card--side{ grid-area: roles; }
}

@media (max-width: 768px){
  /* Stop horizontal scroll wrappers */
  .tablewrap{ overflow: visible; }

  /* Make each row a card grid */
  .table thead{ display:none; }
  .table, .table tbody{ display:block; width:100%; }

  .table tbody tr{
    display:grid;
    grid-template-columns: 40px 1fr 96px; /* rank | user | level */
    grid-template-rows: auto auto;
    gap: 10px 12px;
    margin: 12px 12px 14px;
    padding: 14px 14px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: rgba(255,255,255,.03);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    overflow: hidden;
  }

  /* reset td display */
  .table td{
    display:block;
    width:auto;
    border-bottom: 0;
    padding: 0;
  }

  /* Place cells */
  td.col-rank{ grid-column: 1; grid-row: 1; align-self:start; opacity:.85; font-size:21px; }
  td.col-user{ grid-column: 2; grid-row: 1; min-width:0; }
  td.col-level{ grid-column: 3; grid-row: 1; justify-self:end; align-self:start; }

  td.col-msg{ grid-column: 1; grid-row: 2; text-align:center; }
  td.col-vc{ grid-column: 2; grid-row: 2; text-align:center; }
  td.col-points{ grid-column: 3; grid-row: 2; text-align:center; }

  /* Labels */
  tbody td[data-label]::before{
    display:block;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .75;
    margin-bottom: 6px;
  }
  /* Hide labels for rank and user */
  td.col-user[data-label]::before{ display:none; }


  /* User cell text overflow */
  .usercell__text{ min-width: 0; }
  .usercell__name{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .usercell__id{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Level ring size */
  td.col-level .ring{
    transform: scale(.95);
    transform-origin: top right;
  }
}


@media (max-width: 520px){
  .rankingSwitch{
    align-items: stretch;
    gap: 8px;
  }
  .rankingSwitch__label,
  .rankingSwitch__buttons{
    width: 100%;
  }
  .rankingSwitch__buttons{
    justify-content: center;
  }
  .rankingSwitch__btn{
    flex: 1 1 0;
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* =========================
   Rank medal decoration
========================= */
.col-rank{
  position: relative;
  font-weight: 800;
  text-align: center;
}

/* 丸＋グロー（疑似要素） */
.col-rank::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  opacity: 1;
  /* デフォルト（ベース） */
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,.06) 45%, rgba(0,0,0,0) 70%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 0 18px rgba(255,255,255,.08);
  z-index: 0;
}

/* 文字を前面へ */
.col-rank{
  z-index: 1;
}
.col-rank{
  /* 文字が丸の上に来るように */
}
.col-rank{
  /* 念のため */
}
.col-rank{
  /* 文字前面 */
}
.col-rank{
  /* 実際は span なくてもOKだが、確実にするなら次 */
}
.col-rank{
  /* nothing */
}
.col-rank{
  /* テキスト前面化は after で行うと簡単 */
}
.col-rank::after{
  content: attr(data-rank);
  display:none;
}

/* 金 */
.rank--gold{
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 210, 90, .35);
}
.rank--gold::before{
  background: radial-gradient(circle at 30% 30%,
    rgba(255, 245, 210, .95),
    rgba(255, 210, 90, .55) 40%,
    rgba(255, 170, 30, .18) 68%,
    rgba(0,0,0,0) 72%);
  box-shadow:
    0 0 0 1px rgba(255, 220, 120, .35),
    0 0 26px rgba(255, 200, 80, .35),
    0 0 48px rgba(255, 170, 30, .18);
}

/* 銀 */
.rank--silver{
  color: #fff;
  text-shadow: 0 0 10px rgba(210, 230, 255, .28);
}
.rank--silver::before{
  background: radial-gradient(circle at 30% 30%,
    rgba(245, 250, 255, .95),
    rgba(210, 230, 255, .55) 40%,
    rgba(150, 190, 255, .18) 68%,
    rgba(0,0,0,0) 72%);
  box-shadow:
    0 0 0 1px rgba(220, 235, 255, .30),
    0 0 26px rgba(180, 215, 255, .30),
    0 0 48px rgba(120, 175, 255, .16);
}

/* 銅 */
.rank--bronze{
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 190, 140, .22);
}
.rank--bronze::before{
  background: radial-gradient(circle at 30% 30%,
    rgba(255, 235, 215, .90),
    rgba(230, 160, 100, .50) 40%,
    rgba(190, 120, 70, .18) 68%,
    rgba(0,0,0,0) 72%);
  box-shadow:
    0 0 0 1px rgba(255, 200, 160, .24),
    0 0 26px rgba(230, 160, 100, .26),
    0 0 48px rgba(190, 120, 70, .14);
}

/* =========================
   Back to top button
========================= */
.toTop{
  position: fixed;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 52px;
  height: 52px;
  border-radius: 999px;

  /* 見た目 */
  background:
    radial-gradient(circle at 30% 30%,
      #7aa2ff,
      #4b6bff 45%,
      #2b3fd6 70%);
  border: 1px solid rgba(255,255,255,.35);

  box-shadow:
    0 0 0 2px rgba(90,120,255,.25),
    0 10px 28px rgba(20,30,80,.55),
    0 0 28px rgba(90,120,255,.55);

  cursor: pointer;
  z-index: 9999;

  /* 表示制御 */
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(.92);
  transition:
    opacity .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

/* 表示時 */
.toTop.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

/* ホバー */
.toTop:hover{
  box-shadow:
    0 0 0 2px rgba(120,150,255,.45),
    0 14px 34px rgba(20,30,80,.65),
    0 0 38px rgba(120,150,255,.75);
}

/* 押下 */
.toTop:active{
  transform: translateY(2px) scale(.96);
}

/* =========================
   Arrow icon (CSS only)
========================= */
.toTop::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:14px;
  border-left: 3px solid #fff;
  border-top: 3px solid #fff;
  transform: translate(-50%, -30%) rotate(45deg);
}

/* モバイル少し大きめ */
@media (max-width: 768px){
  .toTop{
    width: 56px;
    height: 56px;
  }
}

/* =========================
   GTA Series Community Header
========================= */

.ranking-hero {
  position: relative;
  z-index: 11;
  padding: clamp(26px, 4.4vh, 48px) 16px clamp(20px, 3vh, 32px);
  border-bottom: 1px solid rgba(92, 214, 255, 0.14);
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(84, 255, 255, 0.12),
      rgba(84, 255, 255, 0.0) 38%
    ),
    radial-gradient(
      circle at 18% 20%,
      rgba(255, 74, 230, 0.10),
      rgba(255, 74, 230, 0.0) 44%
    ),
    linear-gradient(
      180deg,
      rgba(6, 8, 16, 0.92),
      rgba(11, 15, 20, 0.76)
    );
  box-shadow:
    0 12px 42px rgba(0, 0, 0, 0.26),
    0 0 36px rgba(92, 214, 255, 0.08);
}

.ranking-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.ranking-hero__logo {
  pointer-events: none;
}

.ranking-hero__title {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 0.24em;
  row-gap: 0;
  color: rgba(208, 255, 202, 0.12);
  font-family:
    "凸版文久見出しゴシック StdN",
    "Toppan Bunkyu Midashi Gothic StdN",
    "Toppan Bunkyu Midashi Gothic",
    Impact,
    "Arial Black",
    "Yu Gothic",
    sans-serif;
  font-size: clamp(1.82rem, 4.2vw, 3.65rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.03em;
  line-height: 0.96;
  -webkit-text-stroke: 1.4px rgba(79, 255, 73, 0.92);
  text-shadow:
    0 0 2px rgba(230, 255, 220, 0.90),
    0 0 7px rgba(61, 255, 66, 0.74),
    0 0 17px rgba(38, 255, 42, 0.46),
    0 0 32px rgba(0, 255, 36, 0.28),
    4px 4px 0 rgba(0, 0, 0, 0.50);
  transform: skewX(-7deg);
  filter: brightness(1.08) saturate(1.12);
  animation: rankingLogoGlow 6.8s ease-in-out infinite alternate;
}

.ranking-hero__title span {
  display: inline-block;
}

.ranking-hero__subtitle {
  display: inline-block;
  margin-top: clamp(8px, 1.2vh, 14px);
  color: rgba(255, 255, 178, 0.14);
  font-family:
    "凸版文久見出しゴシック StdN",
    "Toppan Bunkyu Midashi Gothic StdN",
    "Toppan Bunkyu Midashi Gothic",
    Impact,
    "Arial Black",
    "Yu Gothic",
    sans-serif;
  font-size: clamp(1rem, 2.35vw, 2.05rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.045em;
  line-height: 1;
  -webkit-text-stroke: 1px rgba(255, 253, 71, 0.90);
  text-shadow:
    0 0 2px rgba(255, 255, 225, 0.88),
    0 0 6px rgba(255, 250, 55, 0.76),
    0 0 14px rgba(255, 240, 20, 0.42),
    0 0 28px rgba(255, 225, 0, 0.26),
    3px 3px 0 rgba(0, 0, 0, 0.50);
  transform: skewX(-7deg);
  filter: brightness(1.04) saturate(1.10);
  animation: rankingLogoGlow 7.6s ease-in-out infinite alternate;
}

.ranking-site-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 1.8vw, 22px);
  width: min(900px, 100%);
  margin: clamp(18px, 2.8vh, 30px) auto 0;
  pointer-events: auto;
}

.ranking-site-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(116px, 14vw, 180px);
  min-height: 44px;
  padding: 12px 22px 11px;
  border: 1px solid rgba(88, 255, 255, 0.72);
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      rgba(15, 26, 40, 0.60),
      rgba(5, 9, 18, 0.78)
    );
  color: rgba(230, 255, 255, 0.96);
  font-family:
    "凸版文久見出しゴシック StdN",
    "Toppan Bunkyu Midashi Gothic StdN",
    "Toppan Bunkyu Midashi Gothic",
    Impact,
    "Arial Black",
    "Yu Gothic",
    sans-serif;
  font-size: clamp(0.82rem, 1.08vw, 1rem);
  font-weight: 900;
  letter-spacing: 0.10em;
  line-height: 1;
  text-decoration: none;
  text-shadow:
    0 0 5px rgba(84, 255, 255, 0.58),
    0 0 14px rgba(84, 255, 255, 0.24);
  box-shadow:
    inset 0 0 12px rgba(84, 255, 255, 0.12),
    0 0 13px rgba(84, 255, 255, 0.14),
    0 10px 24px rgba(0, 0, 0, 0.34);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    text-shadow 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.ranking-site-nav__link:hover,
.ranking-site-nav__link:focus-visible {
  color: #ffffff;
  border-color: rgba(255, 74, 230, 0.88);
  background:
    linear-gradient(
      180deg,
      rgba(42, 18, 54, 0.70),
      rgba(8, 10, 24, 0.84)
    );
  text-shadow:
    0 0 5px rgba(255, 255, 255, 0.76),
    0 0 14px rgba(255, 74, 230, 0.62),
    0 0 28px rgba(84, 255, 255, 0.38);
  box-shadow:
    inset 0 0 14px rgba(255, 74, 230, 0.16),
    0 0 16px rgba(255, 74, 230, 0.24),
    0 0 28px rgba(84, 255, 255, 0.14),
    0 12px 28px rgba(0, 0, 0, 0.40);
  transform: translateY(-2px);
  outline: none;
}

.ranking-site-nav__link--active {
  border-color: rgba(88, 255, 144, 0.84);
  color: rgba(224, 255, 222, 0.98);
  text-shadow:
    0 0 5px rgba(96, 255, 108, 0.72),
    0 0 15px rgba(96, 255, 108, 0.32);
  box-shadow:
    inset 0 0 12px rgba(96, 255, 108, 0.13),
    0 0 14px rgba(96, 255, 108, 0.14),
    0 10px 24px rgba(0, 0, 0, 0.34);
}

@keyframes rankingLogoGlow {
  0% {
    filter: brightness(0.98) saturate(1.06);
  }

  100% {
    filter: brightness(1.16) saturate(1.20);
  }
}

@media (max-width: 768px) {
  .ranking-hero {
    padding-top: 24px;
  }

  .ranking-site-nav {
    flex-wrap: wrap;
    gap: 10px;
    width: min(390px, 100%);
  }

  .ranking-site-nav__link {
    flex: 1 1 calc(50% - 10px);
    min-width: 0;
    padding-inline: 16px;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
  }
}