/* ===== 射程比較表（range.html） ===== */

/* 並び替えトグル */
.sort-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:22px}
.sort-bar .sort-label{
  font-size:.72rem;font-weight:800;letter-spacing:.16em;color:var(--text-dim);
  text-transform:uppercase;margin-right:4px;
}

/* 凡例（カテゴリの色） */
.range-legend{
  display:flex;flex-wrap:wrap;gap:8px 16px;margin:-12px 0 30px;
  font-size:.72rem;color:var(--text-dim);
}
.range-legend .lg{display:flex;align-items:center;gap:6px;font-weight:700}
.range-legend .dot{width:11px;height:11px;border-radius:60% 40% 55% 45%;flex:none}

/* 比較リスト本体 */
.range-list{display:flex;flex-direction:column;gap:9px}
.range-row{
  display:grid;grid-template-columns:34px 44px minmax(150px,1.1fr) 3fr 58px;
  align-items:center;gap:14px;
  background:var(--card);border:1.5px solid var(--card-edge);border-radius:16px;
  padding:11px 18px 11px 12px;position:relative;
  opacity:0;transform:translateX(26px);transition:opacity .5s,transform .5s,border-color .2s;
}
.range-row.show{opacity:1;transform:translateX(0)}
.range-row.hidden{display:none}
.range-row:hover{border-color:var(--accent)}

.range-rank{
  font-family:var(--mono);font-weight:900;font-size:1.05rem;color:var(--text-dim);
  text-align:center;transform:skewX(-6deg);
}
.range-row.top .range-rank{color:var(--accent)}

.range-thumb{
  width:44px;height:44px;flex:none;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 45%,transparent));
}
.range-thumb img{width:100%;height:100%;object-fit:contain}

.range-meta .r-name{font-weight:900;font-size:1.02rem;transform:skewX(-4deg);line-height:1.25}
.range-meta .r-cat{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;font-weight:900;
  color:var(--accent);margin-top:2px;
}
.range-meta .r-kind{color:var(--text-dim);font-weight:700;letter-spacing:0}

/* 射程バー */
.range-track{height:16px;border-radius:99px;background:var(--bg);overflow:hidden;position:relative}
.range-fill{
  height:100%;border-radius:99px;background:var(--accent);
  width:0;transition:width .9s cubic-bezier(.22,1,.36,1);
  box-shadow:0 0 12px -2px color-mix(in srgb,var(--accent) 70%,transparent);
}
.range-val{
  font-family:var(--mono);font-weight:900;font-size:1.3rem;color:var(--text);
  text-align:right;
}
.range-val .u{font-size:.6rem;color:var(--text-dim);font-weight:700;display:block;margin-top:-4px}

/* スケール目盛り（リスト上の薄いグリッド） */
.range-scale{
  display:grid;grid-template-columns:34px 44px minmax(150px,1.1fr) 3fr 58px;
  gap:14px;padding:0 18px 0 12px;margin-bottom:8px;
}
.range-scale .ticks{
  grid-column:4;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:.64rem;color:var(--text-dim);opacity:.7;
  border-top:1px dashed var(--card-edge);padding-top:4px;
}

@media (max-width:760px){
  .range-row{
    grid-template-columns:30px 38px 1fr 52px;
    grid-template-areas:"rank thumb meta val" "bar bar bar bar";
    row-gap:10px;
  }
  .range-rank{grid-area:rank}
  .range-thumb{grid-area:thumb}
  .range-meta{grid-area:meta}
  .range-val{grid-area:val}
  .range-track{grid-area:bar}
  .range-scale{display:none}
}