/* リズムゲームの入口・曲一覧・ランキング。**攻略サイトの土台（明るい画面）に載る。**
   遊ぶ画面（play.html）の style.css とは別。あちらは暗い全画面 */

/* ===== メダル =====
   **自作の丸。** 絵文字の 🥇🥈 は「1位・2位」に見えるので使わない
   （数字の無い 🏅 はあるが、対になる銀が無い）。
   金＝パーフェクトフルコンボ、銀＝フルコンボ */
.rh-medal {
  display: inline-block; width: 1.15em; height: 1.15em; border-radius: 50%;
  vertical-align: -.2em; position: relative; flex: none;
  box-shadow: inset 0 0 0 .09em rgba(0, 0, 0, .18), 0 .05em .15em rgba(0, 0, 0, .25);
}
.rh-medal.gold   { background: radial-gradient(circle at 35% 30%, #fff6c8, #f5c84a 45%, #c9921a); }
.rh-medal.silver { background: radial-gradient(circle at 35% 30%, #ffffff, #d4d9e2 45%, #8e97a6); }
/* 真ん中の星。**飾りで、数ではない** */
.rh-medal::after {
  content: "★"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: .62em; line-height: 1; color: rgba(255, 255, 255, .9);
  text-shadow: 0 0 .1em rgba(0, 0, 0, .35);
}

/* 曲の札の右側。**メダルと最大の☆** */
.rh-clear { display: inline-flex; align-items: center; gap: .35em; margin-left: auto;
  font-size: .9em; white-space: nowrap; order: 9; }   /* いちばん右（曲の情報のあと） */
.rh-stars { color: #d99a00; font-weight: 700; font-variant-numeric: tabular-nums; }
.rh-legend { margin: .3em 0 .2em; font-size: .78em; color: #6b7688; text-align: right; }
.rh-legend span { white-space: nowrap; margin-left: .8em; }

/* ===== ランキング =====
   **ストライクバトルのランキングと同じ形。** 色だけ明るい画面に合わせてある */
.rk-head { display: flex; align-items: flex-start; gap: .4em; margin: .2em 0 .7em; }
.rk-heads { flex: 1 1 auto; min-width: 0; text-align: center; }
.rk-title {
  margin: 0;
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
  font-weight: 800; font-size: clamp(26px, 7vw, 40px); line-height: 1.1;
  color: #ff6fae;
  text-shadow:
     0.05em 0 0 #fff, -0.05em 0 0 #fff, 0 0.05em 0 #fff, 0 -0.05em 0 #fff,
     0 0.08em 0.12em rgba(120, 40, 90, .35);
}
.rk-sub2 { margin: .15em 0 0; font-size: .85em; color: #6b7688; }
/* 自動で切り替えるかの入切。**見出しの右上。** */
.rk-sw {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: .4em;
  font-size: .72em; color: #4a5566; cursor: pointer;
  padding: .6em .6em; border-radius: .5em;   /* 指で押せる高さにする */
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(0, 0, 0, .12);
  white-space: nowrap;
}
.rk-sw input { margin: 0; cursor: pointer; }
/* 切り替える先が2つ無いときは**見えなくするだけ**（消すと見出しが動く） */
.rk-sw.is-off { visibility: hidden; }

.rk-picks { margin: 0 0 1em; }
.rk-line { display: flex; gap: .5em; justify-content: center;
  align-items: center; margin-bottom: .4em; }
.rk-picks select {
  flex: 0 1 22em; max-width: 100%;
  padding: .3em 1.6em .3em .6em; border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .2); background: #fff; color: #2b3446;
  font-size: 16px;              /* 16px未満だとiOSが拡大する */
  font-family: inherit;
}

.rk-list { list-style: none; margin: 0; padding: 0; }
/* 1行は「順位・名前・点・日時」。**点は右端でそろえる**（見比べる列なので） */
.rk-row { display: flex; align-items: baseline; gap: .6em;
  padding: .3em .4em; font-size: .92em; color: #2b3446;
  border-bottom: 1px solid rgba(0, 0, 0, .06); }
.rk-no { flex: 0 0 1.8em; text-align: right; color: #6b7688; font-size: .85em; }
/* **1〜3位は大きく。** 並びの上のほうだけ見る人が多い */
.rk-row.is-top { padding: .45em .5em; border-radius: 8px; border-bottom: 0;
  background: rgba(255, 255, 255, .7); margin-bottom: .25em; }
.rk-row.is-top .rk-name { font-size: 1.15em; font-weight: bold; }
.rk-row.is-top .rk-val { font-size: 1.25em; }
.rk-row.is-top .rk-no { flex: 0 0 1.6em; text-align: center; font-size: 1.3em; }
.rk-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.rk-val { flex: 0 0 auto; font-weight: bold; font-variant-numeric: tabular-nums; }
/* 出した日時。**小さく薄く**（主役は名前と点） */
.rk-when { flex: 0 0 auto; font-size: .72em; color: #8a93a6;
  font-variant-numeric: tabular-nums; }
.rk-empty { font-size: .85em; color: #6b7688; margin: 0; }

/* ===== 曲一覧：曲名ごとにたたむ =====
   曲名の行（summary）を押すと、遊び方（人数・枚数・おにむず）が下に並ぶ */
.rh-song > summary { list-style: none; cursor: pointer; }
.rh-song > summary::-webkit-details-marker { display: none; }
.rh-song > summary::after {
  content: "▾"; margin-left: .2em; color: #8a93a6; transition: transform .15s;
}
.rh-song[open] > summary::after { transform: rotate(180deg); }
.rh-count, .rh-played { font-size: .78em; color: #6b7688; white-space: nowrap; }
.rh-styles { display: flex; flex-direction: column; gap: .5em; margin: .5em 0 .2em 1.2em; }
.rh-style { padding: .75em 1em; }
.rh-style .gm-item-title { display: inline-flex; gap: .4em; flex-wrap: wrap; font-weight: 400; }
.gm-badge.unit { background: #fff1c9; color: #7a5a12; }
.gm-badge.pre { background: #e8e1ff; color: #4b3a9a; }   /* 先行プレイ */