/* ===================================================================
   ランキング（絞り込み・表彰台・順位表）の見た目
   /ranking と /seiseki の両方が読む。中身は rank-board.js。
   色は読み込んだページのトークン（--blue / --line / --glass-* …）に乗る。
   ここは ranking.html から切り出したもので、見た目は変えていない。
   =================================================================== */
  /* ===== 絞り込み ===== */
  .note-sample{max-width:1010px;margin:0 auto 26px;display:flex;align-items:flex-start;gap:9px;
    padding:12px 16px;font-size:12.5px;line-height:1.75;font-weight:600;
    color:var(--gold-c,var(--gold,#e8b04b));background:rgba(255,206,84,.09);border:1px solid rgba(255,206,84,.3)}
  .note-sample::before{content:"⚠";flex:0 0 auto;font-size:13px;line-height:1.5}

  /* 絞り込み。列の数は幅に合わせて自動で増減する（項目を足しても崩れない） */
  .filters{max-width:1010px;margin:0 auto 34px;padding:18px 20px;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
    gap:14px 16px;align-items:end;
    background:var(--glass-face);
    -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
    border:1px solid var(--glass-brd);box-shadow:var(--glass-shadow)}
  .fl-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
    gap:14px;flex-wrap:wrap;border-top:1px solid var(--line-soft);padding-top:13px}
  .fl-count{font-size:12.5px;font-weight:700;color:var(--text-2)}
  .fl-count b{color:var(--blue-deep);font-weight:800}
  @media(max-width:480px){.filters{grid-template-columns:1fr}}
  .fl{display:flex;flex-direction:column;gap:7px;min-width:0}
  .fl-lb{font-size:11.5px;font-weight:800;color:var(--text-2);letter-spacing:.03em}
  .fl select{-webkit-appearance:none;appearance:none;width:100%;font-family:inherit;
    font-size:13.5px;font-weight:700;color:var(--text);line-height:1.5;
    padding:11px 34px 11px 14px;cursor:pointer;
    border:1px solid var(--line-soft);background-color:rgba(255,255,255,.06);
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234d8dff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 13px center;background-size:11px 8px}
  .fl select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(77,141,255,.20)}
  /* 選択肢そのものは OS が描くので、黒地でも読めるよう色を明示する */
  .fl select option,.fl select optgroup{background:#0d131f;color:var(--text)}
  .fl-reset{font-family:inherit;font-size:12.5px;font-weight:700;color:var(--text-3);cursor:pointer;
    padding:11px 4px;border:none;background:none;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
  .fl-reset:hover{color:var(--blue-2)}

  /* ===== 表彰台（TOP3） ===== */
  .podium-lb{text-align:center;margin-bottom:24px}
  .podium-lb .t{font-size:clamp(17px,2.2vw,21px);font-weight:800;line-height:1.5}
  .podium-lb .s{font-size:12.5px;color:var(--text-3);font-weight:600;margin-top:6px}
  .podium{display:grid;grid-template-columns:1fr 1.18fr 1fr;gap:clamp(10px,1.6vw,18px);
    max-width:900px;margin:0 auto;align-items:end}
  @media(max-width:720px){.podium{grid-template-columns:1fr;max-width:420px;align-items:stretch;gap:14px}}
  /* カードは黒い板。ガラスではなく、下へ向かって沈む面にする（測定会サイトの gcard と同じ手） */
  .pod{--face:#111c33;position:relative;text-align:center;
    padding:clamp(22px,2.6vw,28px) clamp(14px,1.8vw,20px) clamp(18px,2vw,22px);
    background:linear-gradient(180deg,var(--face) 0%,#080e1b 100%);
    border:1px solid rgba(122,169,255,.30);box-shadow:var(--shadow-box);
    transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s ease}
  .pod:hover{transform:translateY(-4px);box-shadow:var(--shadow-box-hi),0 0 0 6px rgba(77,141,255,.09)}
  @media(prefers-reduced-motion:reduce){.pod:hover{transform:none}}
  /* 1位だけ金の枠。黒地なので、白地のときより枠と光を強めに出せる */
  .pod--1{order:2;--face:#1b2338;padding-top:clamp(30px,3.4vw,40px);
    border-color:rgba(255,206,84,.62);
    box-shadow:var(--shadow-box),0 0 0 4px rgba(255,206,84,.10),0 0 40px rgba(255,206,84,.14)}
  .pod--2{order:1}
  .pod--3{order:3}
  @media(max-width:720px){.pod--1{order:1}.pod--2{order:2}.pod--3{order:3}}
  .pod-medal{width:clamp(46px,5.4vw,58px);height:clamp(46px,5.4vw,58px);border-radius:50%;margin:0 auto 12px;
    display:flex;align-items:center;justify-content:center;
    font-family:Anton,"Noto Sans JP",sans-serif;font-size:clamp(21px,2.6vw,26px);font-weight:400;
    line-height:1;padding-top:2px;color:#2a1a00;
    box-shadow:0 10px 22px rgba(0,0,0,.55),inset 0 2px 0 rgba(255,255,255,.55)}
  .pod--1 .pod-medal{background:var(--gold)}
  .pod--2 .pod-medal{background:var(--silver)}
  .pod--3 .pod-medal{background:var(--bronze)}
  .pod-crown{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-size:22px;line-height:1;
    filter:drop-shadow(0 3px 8px rgba(255,206,84,.5))}
  .pod-name{font-family:Anton,"Noto Sans JP",sans-serif;font-weight:400;
    font-size:clamp(22px,2.8vw,29px);letter-spacing:.03em;line-height:1.2;color:#fff}
  .pod-meta{font-size:12px;color:var(--text-2);font-weight:700;margin-top:8px;line-height:1.6}
  .pod-club{font-size:11px;color:var(--text-3);font-weight:600;margin-top:3px;line-height:1.5;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pod-rule{height:1px;background:var(--line-soft);margin:14px 0 12px}
  .pod-val{display:flex;align-items:baseline;justify-content:center;gap:2px;line-height:1}
  .pod-val .v{font-family:Anton,"Noto Sans JP",sans-serif;font-weight:400;
    font-size:clamp(28px,3.6vw,38px);letter-spacing:-.01em;
    font-variant-numeric:tabular-nums;background:var(--grad-blue-text);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .pod-val .u{font-size:13px;font-weight:800;color:var(--text-2);align-self:flex-end;margin-bottom:2px}
  .pod-cap{font-size:11px;color:var(--text-3);font-weight:600;margin-top:8px}

  /* ===== ランキング表 ===== */
  .rk-wrap{max-width:900px;margin:34px auto 0;overflow:hidden;
    background:var(--glass-face);
    -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
    border:1px solid var(--glass-brd);box-shadow:var(--shadow-box)}
  .rk-head{display:grid;grid-template-columns:60px 1fr 128px;gap:10px;align-items:center;
    padding:11px 18px;background:rgba(77,141,255,.12);border-bottom:1px solid var(--line-soft);
    font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--text-2)}
  .rk-head span:last-child{text-align:right}
  .rk-row{display:grid;grid-template-columns:60px 1fr 128px;gap:10px;align-items:center;
    padding:13px 18px;border-bottom:1px solid rgba(255,255,255,.07);
    background:rgba(255,255,255,.02);transition:background .16s ease}
  .rk-row:last-child{border-bottom:none}
  .rk-row:hover{background:rgba(77,141,255,.10)}
  .rk-no{font-family:Anton,"Noto Sans JP",sans-serif;font-weight:400;font-size:17px;
    letter-spacing:.01em;color:var(--text-3);font-variant-numeric:tabular-nums}
  .rk-no small{font-size:10px;font-weight:700;margin-left:1px;font-family:"Noto Sans JP",sans-serif}
  .rk-row.top .rk-no{color:var(--blue-2)}
  .rk-who{min-width:0}
  .rk-nm{font-size:14px;font-weight:800;letter-spacing:.02em;line-height:1.4;color:#fff}
  .rk-nm .tag{display:inline-block;margin-left:7px;font-size:10px;font-weight:800;padding:2px 7px;
    background:rgba(77,141,255,.16);color:var(--blue-deep);border:1px solid var(--line-soft);
    letter-spacing:.02em;vertical-align:1px}
  .rk-sub{font-size:11px;color:var(--text-3);font-weight:600;line-height:1.5;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rk-val{text-align:right;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;color:#fff}
  .rk-val .u{font-size:11px;font-weight:700;color:var(--text-3);margin-left:1px}
  @media(max-width:560px){
    .rk-head,.rk-row{grid-template-columns:46px 1fr 92px;gap:8px;padding-left:13px;padding-right:13px}
    .rk-nm{font-size:13px}.rk-val{font-size:14.5px}
  }
  /* ===== クラブランキング =====
     力を選ぶ帯と、クラブの並び。並びは選手の順位表（.rk-*）を使い回す */
  .cl-tabs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
    max-width:900px;margin:0 auto}
  .cl-tab{padding:7px 13px;border:1px solid var(--line-soft);background:var(--glass-bg);
    font:inherit;font-size:12px;font-weight:800;color:var(--text-2);cursor:pointer;
    transition:color .16s ease,border-color .16s ease,background .16s ease}
  .cl-tab:hover{color:#fff;border-color:var(--cl-c,var(--blue))}
  .cl-tab[aria-pressed="true"]{color:#fff;border-color:var(--cl-c,var(--blue));
    background:color-mix(in srgb,var(--cl-c,var(--blue)) 18%,var(--glass-bg))}
  @supports not (background:color-mix(in srgb,red 10%,blue)){
    .cl-tab[aria-pressed="true"]{background:rgba(77,141,255,.16)}
  }
  /* 力ごとの色。測定項目ページのタブと同じ */
  .cl-tab[data-k="total"]   {--cl-c:#4d8dff}
  .cl-tab[data-k="ax:run"]  {--cl-c:#f2c94c}
  .cl-tab[data-k="ax:quick"]{--cl-c:#ef5a5a}
  .cl-tab[data-k="ax:jump"] {--cl-c:#f2994a}
  .cl-tab[data-k="ax:power"]{--cl-c:#9b6bdf}
  .cl-tab[data-k="ax:endu"] {--cl-c:#c3a9ee}
  .cl-tab[data-k="ax:bal"]  {--cl-c:#63c8e8}
  .cl-tab[data-k="ax:tech"] {--cl-c:#5cc98d}
  .cl-tab[data-k="ax:flex"] {--cl-c:#ef86b5}
  /* 人数。クラブ名のとなりに小さく置く（足切りを置かないぶん、必ず見せる） */
  .cl-n{display:inline-block;margin-left:7px;padding:2px 7px;
    border:1px solid var(--line-soft);font-size:10px;font-weight:800;color:var(--text-2)}
  .cl-1 .rk-no{color:var(--gold)}

  .rk-empty{padding:40px 20px;text-align:center;font-size:13.5px;color:var(--text-3);line-height:1.9;
    background:rgba(255,255,255,.02)}
  .rk-more{width:100%;padding:15px;font-family:inherit;font-size:13px;font-weight:800;color:var(--blue-2);
    cursor:pointer;background:rgba(77,141,255,.08);border:none;border-top:1px solid var(--line-soft);
    transition:background .16s ease}
  .rk-more:hover{background:rgba(77,141,255,.18)}
  .rk-note{max-width:900px;margin:16px auto 0;text-align:center;font-size:11.5px;line-height:1.85;color:var(--text-3)}