/* SCPランキング（スーパー /scp/ ・ハイパー /scp/hyper/ の共通の見た目）。
   色は :root(ダーク=既定) と :root.light の2ブロックだけで決める(全ツール共通ルール)。
   役割色はリーグの色（スーパー=青・ハイパー=黄・GBLのリーグタブと同じ系統）。body[data-cap] で切り替える */
:root{
  --ink:#eef1fb; --sub:#8b96c2; --line:#2a3560;
  --accent:#5b8cff; --accent2:#43e0ff; --violet:#b06cff; --gold:#ffd54a;
  --bgimg:
    radial-gradient(900px 520px at -10% -10%, rgba(91,140,255,.17), transparent 62%),
    radial-gradient(820px 540px at 112% 6%, rgba(176,108,255,.12), transparent 62%),
    radial-gradient(950px 620px at 50% 115%, rgba(67,224,255,.12), transparent 62%),
    linear-gradient(165deg,#0b1023 0%,#101a33 48%,#141229 100%);
  --panel:linear-gradient(180deg,rgba(26,35,66,.94),rgba(19,26,51,.94));
  --panelsh:0 18px 34px -20px rgba(91,140,255,.5), 0 1px 0 rgba(255,255,255,.06) inset;
  --rkbg:#1a2342; --barbg:#121a38; --rowline:#232c4f; --field:#0f1630;
  --tab:linear-gradient(180deg,#1e2850,#151d38); --tabsh:rgba(0,0,0,.4); --tabin:rgba(255,255,255,.06);
  --mgold:#f2c14e; --msilver:#c8d3de; --mbronze:#c98d5f;
  --m1line:#8a6c1e; --m2line:#5a6b7d; --m3line:#7a5231;
  --ongold:#4a3200; --onsilver:#26313c; --onbronze:#3c2413;
  --role:#7aa8ff; --role2:#3f7cff; --eb:#4f7fe0;
  --ivbar:#f59b3a; --ivfull:#e8566a;
  --tbadge:inset 0 0 0 1px rgba(255,255,255,.16);
  --tcolor:#0b1023;
}
body[data-cap="2500"]{ --role:#ffd54a; --role2:#e0a21a; --eb:#c9a227; }
:root.light{
  --ink:#20263a; --sub:#6a7391; --line:#dfe6f5;
  --accent:#3b6ef0; --accent2:#08b4c9; --violet:#8b5cf6; --gold:#b07a00;
  --bgimg:
    radial-gradient(900px 520px at -10% -10%, rgba(91,140,255,.18), transparent 62%),
    radial-gradient(820px 540px at 112% 6%, rgba(176,108,255,.13), transparent 62%),
    radial-gradient(950px 620px at 50% 115%, rgba(67,224,255,.15), transparent 62%),
    linear-gradient(165deg,#e9f1ff 0%,#eef1fb 48%,#f1edfa 100%);
  --panel:rgba(255,255,255,.9);
  --panelsh:0 14px 30px -16px rgba(59,110,240,.3), 0 1px 0 rgba(255,255,255,.8) inset;
  --rkbg:#edf1f9; --barbg:#e8edf8; --rowline:#eceffa; --field:#fff;
  --tab:linear-gradient(180deg,#fff,#eff3fc); --tabsh:rgba(30,40,90,.13); --tabin:#fff;
  --msilver:#b9c6d4;
  --m1line:#e0b53a; --m2line:#9fb0c1; --m3line:#bd8557;
  --role:#3f62b8; --role2:#6f93e8; --eb:#3f62b8;
  --ivbar:#e8862a; --ivfull:#d6455a;
  --tbadge:none;
  --tcolor:#e9f1ff;
}
:root.light body[data-cap="2500"]{ --role:#8a6a12; --role2:#d9a62a; --eb:#8a6a12; }
:root.light .tbadge[title="でんき"],:root.light .tbadge[title="こおり"],
:root.light .tbadge[title="いわ"],:root.light .tbadge[title="じめん"]{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.tbadge{box-shadow:var(--tbadge)}

*{box-sizing:border-box}
body{margin:0;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",system-ui,sans-serif;
  color:var(--ink);background:var(--bgimg);background-attachment:fixed;min-height:100vh}
.wrap{max-width:860px;margin:0 auto;padding:14px 12px 40px}
header{margin:4px 2px 14px}
/* eyebrow＝そのツールの色を暗くした濃い色(全ツール共通の3色構成) */
.eyebrow{font-family:"Oswald",sans-serif;font-size:.68rem;letter-spacing:.34em;color:var(--eb);text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-bottom:8px}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--eb),transparent);opacity:.6}
h1{font-size:1.45rem;margin:0;line-height:1.35}
@media (max-width:430px){h1{font-size:1.28rem}}
h1 .grp{white-space:nowrap}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--panelsh);padding:14px;margin-bottom:14px}

/* ── リーグの切り替え（2ページを行き来する・横いっぱいの2択） ── */
.lgtabs{margin:0 0 10px}
.lgtabs .gseg{display:flex;width:100%}
.lgtabs .gseg button{flex:1 1 0}

/* ── 絞り込み ── */
.rhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.rhead .gtabs{margin:0}
/* 表示のしかたの段は、2〜3択のまとまり（PL・個体値の見せ方・件数）どうしを少し離す */
.rhead .gtabs.segs{gap:6px 12px}
/* 「メーター」の見出し＋2択（見出しはボタンの外の小さな文字・切り替えと1つのまとまり） */
.seglbl{display:flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0}
.seglbl>em{font-style:normal;font-size:.68rem;font-weight:700;color:var(--sub);white-space:nowrap}
.searchbox{position:relative;flex:1 1 180px;min-width:150px}
.searchbox input{width:100%;font:inherit;font-size:.9rem;padding:8px 32px 8px 12px;border-radius:11px;
  border:1px solid var(--line);background:var(--field);color:var(--ink);outline:none}
.searchbox input:focus{border-color:var(--role);box-shadow:0 0 0 2px rgba(122,168,255,.25)}
.searchbox input::placeholder{color:var(--sub)}
.searchbox input::-webkit-search-cancel-button,.searchbox input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.searchbox .clr{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;
  color:var(--sub);font:inherit;font-size:1rem;cursor:pointer;padding:2px 6px;display:none}
.searchbox.has .clr{display:block}
@media (max-width:540px){.searchbox input{font-size:16px}}
.note{font-size:.68rem;color:var(--sub);margin:0 0 6px;line-height:1.6}
.cond{font-size:.72rem;color:var(--sub);margin:0 0 10px}
.cnt{font-size:.72rem;color:var(--sub);margin:0 0 8px}
.expl{display:none}
.explain .expl{display:revert}

/* ── ランキングの行(耐久指数ランキングと同じ形) ── */
.rank-row{display:flex;align-items:center;gap:10px;padding:7px 6px;border-bottom:1px solid var(--rowline);position:relative}
.rank-row:last-child{border-bottom:none}
.rank-row.md1,.rank-row.md2,.rank-row.md3{border-radius:12px;margin:3px 0;overflow:hidden;padding-left:12px;border-bottom:none}
.rank-row.md1{border:1px solid var(--m1line);--mbar:linear-gradient(180deg,#ffe08a,var(--mgold) 55%,#c99a14)}
.rank-row.md2{border:1px solid var(--m2line);--mbar:linear-gradient(180deg,#f2f6fb,var(--msilver) 55%,#8f9dad)}
.rank-row.md3{border:1px solid var(--m3line);--mbar:linear-gradient(180deg,#e8b489,var(--mbronze) 55%,#a06437)}
.rank-row.md1::before,.rank-row.md2::before,.rank-row.md3::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--mbar)}
.rk{min-width:42px;text-align:center;font-weight:800;color:var(--sub);font-size:.8rem;line-height:1.3;flex-shrink:0;
  background:var(--rkbg);border-radius:8px;padding:4px 4px}
.rank-row.md1 .rk,.rank-row.md2 .rk,.rank-row.md3 .rk{box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.rank-row.md1 .rk{background:linear-gradient(160deg,#ffe08a 0%,var(--mgold) 55%,#c99a14 100%);color:var(--ongold)}
.rank-row.md2 .rk{background:linear-gradient(160deg,#f2f6fb 0%,var(--msilver) 55%,#8f9dad 100%);color:var(--onsilver)}
.rank-row.md3 .rk{background:linear-gradient(160deg,#e8b489 0%,var(--mbronze) 55%,#a06437 100%);color:var(--onbronze)}
.rmain{flex:1;min-width:0}
.rname{display:flex;align-items:center;gap:5px;font-size:.88rem;font-weight:700;white-space:nowrap;min-width:0}
.rname>*{flex-shrink:0}
.rname .nm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.rname .ty{display:inline-flex;gap:2px;margin-left:2px}
.rsub{font-size:.72rem;color:var(--sub);display:flex;flex-wrap:wrap;column-gap:8px;margin-top:1px}
.rsub b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.bar{height:6px;background:var(--barbg);border-radius:99px;margin-top:4px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--role2),var(--role));border-radius:99px}
.rval{width:74px;text-align:right;font-weight:800;font-size:1rem;flex-shrink:0;font-variant-numeric:tabular-nums}
.rval small{display:block;font-weight:400;font-size:.58rem;color:var(--sub)}
.tag-m2{display:inline-block;background:linear-gradient(90deg,#d63384,#7a3cc4);color:#fff;font-size:.62rem;font-weight:800;border-radius:5px;padding:1px 5px;vertical-align:1px}
.tag-p2{background:linear-gradient(90deg,#e8452f,#1e6fd9)}
.tag-lg{display:inline-block;color:var(--gold);border:1px solid currentColor;font-size:.58rem;font-weight:800;border-radius:5px;padding:0 4px;opacity:.85}
.tag-low{display:inline-block;color:var(--sub);border:1px solid currentColor;font-size:.58rem;font-weight:700;border-radius:5px;padding:0 4px}
/* 個体値を3本の棒で見せる形（B）。15は赤、それ以外は橙（ゲーム内の評価の棒と同じ考え方） */
.ivb{display:flex;gap:6px;margin-top:4px}
.ivb span{flex:1 1 0;min-width:0;font-size:.62rem;color:var(--sub);line-height:1.2}
.ivb span b{color:var(--ink);font-weight:700;margin-left:2px}
.ivb u{display:block;height:5px;border-radius:3px;background:var(--barbg);margin-top:2px;overflow:hidden;text-decoration:none}
.ivb u s{display:block;height:100%;background:var(--ivbar);border-radius:3px;text-decoration:none}
.ivb span.full u s{background:var(--ivfull)}
.empty{color:var(--sub);font-size:.82rem;text-align:center;padding:18px 0}
.more{display:block;width:100%;margin-top:8px;font:inherit;font-size:.8rem;font-weight:700;color:var(--sub);
  background:var(--tab);border:1px solid var(--line);border-radius:11px;padding:9px;cursor:pointer;
  box-shadow:0 2px 0 var(--tabsh),inset 0 1px 0 var(--tabin)}

@media (max-width:560px){
  /* 絞り込みの段は横いっぱいにそろえる（タイプ別火力と同じ）。表示のしかたの段は2〜3択を詰めて並べ、入らなければ次の行へ */
  .rhead .gtabs{width:100%}
  .rhead .gtabs button{flex:1 1 auto}
  .rhead .gtabs.segs .gseg{flex:1 1 auto}
  .rhead .gtabs.segs .seglbl{flex:1 1 auto}
  .rhead .gtabs.segs{gap:6px 8px}
  /* PLの上限と個体値の見せ方（2択×2）で1行・件数（3択）で1行にそろえる */
  .rhead .gtabs.segs .gseg button{padding:8px 10px}
  .rhead .gtabs.segs #cntSeg{flex-basis:100%}
  .rval{width:62px;font-size:.92rem}
  .rname{flex-wrap:wrap;row-gap:2px}
  .rname .nm{overflow:visible;flex-shrink:0;max-width:100%;white-space:normal}
}