/* スタート画面（速さ・強さを選ぶ）。プレイ画面は play.css が持つ */

/* 目盛り付きのバー。速さ（5段階）と強さ（4段階）で同じ形を使う */
.pbar { margin: .3em 0 .2em; }
.pbar-track {
  position: relative; height: 1.4em; border-radius: .7em;
  /* **色は下地に固定。** 速さも強さも、右へ行くほど強い＝赤 */
  background: linear-gradient(90deg, #4a90d9 0%, #6fd3ff 22%, #ffd640 55%, #ff9a3c 78%, #d94a58 100%);
  border: 2px solid #41556b; overflow: hidden;
}
/* 選んでいない側を覆う影。**色そのものは動かさない** */
.pbar-dim {
  position: absolute; right: 0; top: 0; bottom: 0;
  background: #16212e; opacity: .82;
  transition: width .16s ease;
}
/* 目盛り。**何段階あるかを見せる** */
.pbar-ticks { position: absolute; inset: 0; pointer-events: none; }
.pbar-tick {
  position: absolute; top: 50%; width: 2px; height: .62em;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, .55); border-radius: 1px;
}
.pbar-tick.base { width: 3px; height: 1.05em; background: #c9a227; }
.pbar-knob {
  position: absolute; top: 50%; width: 1.45em; height: 1.45em;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: #fff; border: 3px solid #c9a227;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
  transition: left .16s ease; pointer-events: none;
}
/* 押せる場所。バーの上下に少しはみ出させて指で押しやすくする */
.pbar-hits { position: absolute; inset: -.55em 0; display: grid; }
.pbar-hit { background: none; border: none; padding: 0; cursor: pointer; }

/* 目盛りの文字。目盛りと同じ位置に並ぶ */
/* **カードは白地。** 文字色を白にすると消える（実際に消えた） */
.pbar-labels {
  display: flex; justify-content: space-between;
  font-size: .76em; color: #7c8ba0; padding: .5em .1em 0;
}
.pbar-labels span { flex: 1; text-align: center; }
.pbar-labels span:first-child { text-align: left; }
.pbar-labels span:last-child  { text-align: right; }
.pbar-labels .base { color: #a9821a; }
.pbar-labels .on   { color: #17212e; font-weight: 700; }
.pbar-labels .base.on { color: #8a6a12; }
.pbar.off .pbar-knob { opacity: .35; }
.pbar.off .pbar-dim { opacity: .55; }

/* バーの下の一言。左右中央 */
.barnote {
  text-align: center; font-size: .8em; color: #7c8ba0; margin: .6em 0 .5em;
}
/* 見出しの行に部品を同居させる。**行を増やさないのが目的**。
   下線は h3 から行ごと受け取って、これまでどおり横いっぱいに引く */
.cardhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6em; margin: 0 0 .5em; padding-bottom: .35em;
  border-bottom: 2px solid #ff4fa3;
}
.cardhead h3 { margin: 0; padding: 0; border-bottom: none; flex: 0 0 auto; }
.cardhead .note {
  margin: 0; font-size: .8em; line-height: 1.4; text-align: right;
  /* **白いカードの上なので暗い色。** テーマの .dbsdv .note は淡い青で、
     そのままだと読めない（実際に読めなかった） */
  color: #555; min-width: 0;
  /* 狭い画面で2行になるとき、**語の途中で割らない**（「のど／こか」になった） */
  word-break: keep-all;
}

/* **ボタンと分かる幅にする。** 横いっぱいに伸ばすと帯に見える */
.rand {
  display: inline-block; width: auto; flex: 0 0 auto;
  font-family: inherit; font-size: .88em; padding: .38em 1.1em;
  border: 2px solid #41556b; border-radius: .6em;
  background: #1a2532; color: #dbe6f2; cursor: pointer;
}
.rand.on { background: #4a90d9; border-color: #8fc0ec; border-style: solid;
           color: #fff; font-weight: 700; }

/* ===== 1画面に収める。**上下のスクロールを出さない** =====
   行そのものを減らしたうえで、残りの余白を詰める */
.gauge-select .header { margin-bottom: .2em; }
.gauge-select .subtitle { font-size: .95em; margin-top: .35em; }
.gauge-select .card { margin: .7em 0; padding: .85em .9em; }
.gauge-select .barnote { margin: .5em 0 0; }
.gauge-select .menu-sub { margin: .8em 0 0; }
.gauge-select .menu-item { padding: .75em; }
.gauge-select .footer { margin-top: .6em; }

/* **ダブルタップ拡大を止める。** つまみ拡大は viewport と nozoom.js が受け持つ */
body.gauge-select { touch-action: manipulation; }