/* 神楽レイの打ちっぱなしゴルフ（range.html）専用のCSS。

   style.css の :root（--bg / --fg / --accent など）を参照するだけで、style.css 側は一切触らない。
   ゲームを消したくなったら、このファイルと range.* を消せば元通りになる。

   クラス名の接頭辞は rg-。counter / count / stat / access / hit / track / ad / banner の語は
   URLにもクラス名にも使わないこと。広告ブロッカーの装飾フィルタがパス文字列とクラス名の両方で
   照合し、「直接開けば見えるのにページからは消える」という形で現れる（js/record.js 冒頭、2026-08-24 の経緯）。

   文字は canvas に描かず、すべてこちら側（DOM）に置いている。
   canvas の fillText はアンチエイリアスでにじみ、拡大率ごとに位置がずれ、読み上げソフトからも読めない。
   canvas が描くのは絵と、5x7 のビットマップで打った数字だけ。 */

/* ゲーム中に画面上部が固定ヘッダーで隠れると、狙う方向の上半分が押せなくなる。
   このページだけヘッダーの追従を解く。 */
.range-page .site-header { position: static; }

.rg-noscript {
  padding: 1rem 1.2rem; margin: 0 0 1.5rem;
  background: var(--card); border: 1px solid var(--accent); border-radius: 6px;
}

/* ---- ステージ ---- */

/* ゲームだけ本文（.block の900px）より広く使う。
   右端は60px空ける。js/scrollbar.js の自前スクロールバーが右端に居て、
   そこへ canvas が届くと狙ったクリックを吸われる。
   body{overflow-x:clip} があるので、はみ出しても横スクロールは生まれない。 */
.rg-wide {
  width: calc(100vw - 60px);
  max-width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
}

.rg-stage {
  position: relative;
  width: max-content; max-width: 100%;
  margin: 0 auto 1rem;
  line-height: 0;   /* canvas の下に行間ぶんの隙間ができるのを防ぐ */
}

.rg-canvas {
  display: block;
  /* 論理幅（320〜480）すら入らないほど狭い端末では、CSS側で縮めて表示だけは守る。
     にじむが、はみ出して切れるよりはよい。 */
  max-width: 100%; height: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  image-rendering: pixelated;
  /* 無いとタッチで押した瞬間にページがスクロールする。
     html{scroll-behavior:smooth} があるので「なめらかに逃げていく」という
     分かりにくい形で出る。 */
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  cursor: crosshair;
}

/* ---- canvas に重ねる幕（開始前・結果） ---- */
.rg-veil {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; padding: 1.5rem; text-align: center;
  background: rgba(15, 19, 26, .88);
  line-height: 1.7;
}
.rg-veil[hidden] { display: none; }

.rg-lead { margin: 0; font-size: .95rem; color: var(--fg); }
.rg-note { margin: 0; font-size: .72rem; color: var(--sub); }

.rg-start {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.35rem; letter-spacing: .18em;
  padding: .7rem 2.4rem; cursor: pointer;
  color: var(--fg); background: rgba(8, 12, 18, .75);
  border: 2px solid var(--accent); border-radius: 4px;
  transition: background .15s, transform .1s;
}
.rg-start:hover { background: rgba(224, 50, 60, .22); transform: translateY(-1px); }
.rg-start:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; }
.rg-start[disabled] { opacity: .45; cursor: default; border-color: var(--line); transform: none; }

/* ---- 失敗の瞬間の「はやい／おそい」 ---- */
.rg-verdict {
  position: absolute; left: 0; right: 0; top: 38%;
  margin: 0; pointer-events: none; text-align: center;
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.2rem; letter-spacing: .3em; line-height: 1;
  color: var(--accent); text-shadow: 0 0 18px rgba(224, 50, 60, .65), 0 2px 0 #000;
  animation: rg-verdict-in .25s ease-out both;
}
.rg-verdict[hidden] { display: none; }
@keyframes rg-verdict-in { from { opacity: 0; transform: scale(1.25); } to { opacity: 1; transform: none; } }

/* ---- いま何をする番か ----
   「きく」＝手本を聞いている最中、「たたく」＝自分が返す番。
   この2つの区別が付かないと遊べないので、画面のいちばん目に入る位置に大きく出す。
   色も変える（灰＝待ち／琥珀＝自分の番）。 */
.rg-state {
  position: absolute; left: 0; right: 0; top: 12%;
  margin: 0; pointer-events: none; text-align: center;
  font-family: var(--font-display), var(--font-ui);
  font-weight: 700; font-size: 2.6rem; line-height: 1; letter-spacing: .28em;
  text-indent: .28em;                 /* letter-spacing の右余白ぶんを打ち消して中央に見せる */
  color: var(--sub);
  text-shadow: 0 2px 0 #000, 0 0 24px rgba(0, 0, 0, .8);
}
.rg-state[hidden] { display: none; }
.rg-state.is-play {
  color: #ffd646;
  text-shadow: 0 2px 0 #000, 0 0 28px rgba(255, 214, 70, .45);
}
.rg-state.is-small { font-size: 1.5rem; letter-spacing: .18em; text-indent: .18em; }

/* ---- 補足の一行 ---- */
.rg-guide {
  position: absolute; left: 0; right: 0; top: 12%; margin-top: 3.2rem;
  margin-left: 0; margin-right: 0; margin-bottom: 0;
  pointer-events: none; text-align: center;
  font-family: var(--font-mono); font-size: .82rem; letter-spacing: .12em;
  color: var(--fg); text-shadow: 0 1px 4px #000, 0 0 12px rgba(0,0,0,.9);
}
.rg-guide[hidden] { display: none; }

@media (max-width: 600px) {
  .rg-state { font-size: 1.9rem; }
  .rg-state.is-small { font-size: 1.15rem; }
  .rg-guide { font-size: .72rem; margin-top: 2.4rem; }
}

/* ---- 練習中の札 ----
   出しっぱなしにすることに意味がある。状況によって文言が変わる一行に混ぜると、
   「いま練習なのかどうか」が読み取れなくなる。 */
.rg-badge {
  position: absolute; left: 10px; top: 30px; margin: 0;
  pointer-events: none;
  display: flex; flex-direction: column; gap: .15rem;
  padding: .3rem .7rem;
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .12em; line-height: 1.3;
  color: #ffd646;
  background: rgba(8, 12, 18, .82);
  border: 1px solid rgba(255, 214, 70, .55);
  border-radius: 3px;
}
.rg-badge span { font-size: .62rem; letter-spacing: .06em; color: var(--sub); }
.rg-badge[hidden] { display: none; }

/* ---- 結果 ---- */
.rg-dist {
  margin: 0; font-family: var(--font-mono);
  font-size: 3.2rem; line-height: 1; letter-spacing: .06em; color: var(--fg);
  text-shadow: 0 0 20px rgba(224, 50, 60, .35);
}
.rg-dist .rg-unit { font-size: 1.1rem; margin-left: .4rem; color: var(--sub); letter-spacing: .12em; }
.rg-sub { margin: 0; font-size: .85rem; color: var(--sub); font-family: var(--font-mono); letter-spacing: .06em; }

.rg-form { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; margin: 0; }
.rg-name {
  width: 15rem; max-width: 100%; box-sizing: border-box;
  padding: .55rem .8rem;
  background: rgba(8, 12, 18, .8); color: var(--fg);
  border: 1px solid var(--line); border-radius: 4px;
  font-family: var(--font-ui); font-size: .95rem;
}
.rg-name:focus { outline: none; border-color: var(--accent); }

.rg-send, .rg-retry {
  font-family: var(--font-mono); font-size: .85rem; letter-spacing: .08em;
  padding: .55rem 1.1rem; cursor: pointer;
  color: var(--fg); background: rgba(8, 12, 18, .8);
  border: 1px solid var(--line); border-radius: 4px;
  transition: border-color .15s, color .15s;
}
.rg-send:hover, .rg-retry:hover { border-color: var(--accent); }
.rg-send[disabled] { opacity: .45; cursor: default; border-color: var(--line); }
.rg-retry { border-color: var(--accent); }
.rg-formmsg { margin: 0; font-size: .8rem; color: var(--sub); }
.rg-formmsg[hidden] { display: none; }

/* ---- canvas の外の操作列 ---- */
.rg-bar {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  justify-content: center; margin: 0 0 1.2rem;
}
.rg-zoom { display: flex; gap: .3rem; align-items: center; }

/* 何を変えるボタンなのかを書いておく札。ボタンではないので枠は付けない */
.rg-zoom-label {
  font-size: .75rem; letter-spacing: .08em; color: var(--sub);
  margin-right: .1rem; white-space: nowrap;
}

/* played.html の .pl-filter と同じ見た目に揃える（サイト内で操作系の顔を1つにする） */
.rg-tool {
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .05em;
  padding: .35rem .7rem; cursor: pointer;
  background: rgba(8, 12, 18, .75); color: var(--sub);
  border: 1px solid var(--line); border-radius: 4px;
  transition: border-color .15s, color .15s;
}
.rg-tool:hover { color: var(--fg); border-color: var(--sub); }

/* いまの窓幅では入らない倍率。押せそうに見えて何も起きないのがいちばん困るので、
   押せないことを見た目で出す（2026-09-07「x2と×3同じサイズじゃね？」） */
.rg-tool[disabled] { opacity: .35; cursor: not-allowed; }
.rg-tool[disabled]:hover { color: var(--sub); border-color: var(--line); }
.rg-tool.is-on { color: var(--fg); border-color: var(--accent); }

/* 消音中。手本が音でしか流れないゲームなので、これは設定ではなく警告として見せる */
.rg-tool.is-warn {
  color: var(--accent); border-color: var(--accent);
  background: rgba(224, 50, 60, .10);
}
.rg-tool.is-warn:hover { color: #ff7a82; }

.rg-help {
  max-width: 640px; margin: 0 auto 2.5rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  padding: .8rem 1.2rem;
}
.rg-help summary {
  cursor: pointer; font-family: var(--font-mono); font-size: .85rem;
  letter-spacing: .08em; color: var(--sub);
}
.rg-help summary:hover { color: var(--fg); }
.rg-help ul { margin: .8rem 0 .4rem; padding-left: 1.2rem; font-size: .9rem; }
.rg-help li { margin-bottom: .35rem; }
.rg-help strong { color: var(--accent2); }
.rg-help-note { margin: .8rem 0 .2rem; font-size: .8rem; color: var(--sub); }

/* 指しかない端末では、キーボードの案内を出さない */
body.is-touch .rg-desktop-only { display: none; }

/* ---- ランキング ---- */
.rg-tabs { display: flex; gap: .4rem; margin: 0 0 1rem; }

.rg-board { list-style: none; padding: 0; margin: 0; }
.rg-board li {
  display: grid; grid-template-columns: 2.6rem 1fr auto 6rem;
  gap: .2rem .9rem; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid var(--line);
}
.rg-rank { font-family: var(--font-mono); font-size: .9rem; color: var(--sub); letter-spacing: .04em; }
/* 上位ほど赤へ寄せる。played.html の .pl-star と同じ色運び */
.rg-board li[data-rank="1"] .rg-rank { color: #ff5a64; text-shadow: 0 0 10px rgba(224, 50, 60, .6); font-weight: bold; }
.rg-board li[data-rank="2"] .rg-rank { color: var(--accent); }
.rg-board li[data-rank="3"] .rg-rank { color: #e8a13c; }

/* 名前は必ず textContent で入れること（js/range.js の putBoard のコメント参照）。
   結合文字を積まれても行が伸びないよう、CSS 側でも高さを止めておく。 */
.rg-who { overflow: hidden; max-height: 2.4em; line-height: 1.2; overflow-wrap: anywhere; }
.rg-yd {
  /* 折り返させないこと。4桁（6614 yd）が2行に割れて、行の高さが倍になる。
     打数の欄を足したときに狭くなって実際そうなった（2026-09-07） */
  white-space: nowrap;
  font-family: var(--font-mono); text-align: right; letter-spacing: .06em;
  background: rgba(8, 12, 18, .75); border: 1px solid rgba(255, 220, 0, .18);
  padding: .1rem .5rem;
}
/* 打数と日付。飛距離の左に、控えめに置く。
   ここが飛距離と同じ強さで出ていると、どれが順位を決めている数字なのか分からなくなる。 */
.rg-meta {
  font-family: var(--font-mono); font-size: .75rem; color: var(--sub);
  white-space: nowrap; text-align: right; letter-spacing: .04em;
}

.rg-board li.is-mine { background: linear-gradient(to right, rgba(224, 50, 60, .12), transparent 70%); }

.rg-boardmsg { font-family: var(--font-mono); font-size: .8rem; color: var(--sub); margin: 1rem 0 0; }
.rg-boardmsg[hidden] { display: none; }
.rg-privacy { font-size: .75rem; color: var(--sub); margin: 1.5rem 0 0; line-height: 1.8; }

/* 狭い画面では自前スクロールバーが出ない（style.css の hover:hover 判定）ので、
   右端に空けている60pxも要らない */
@media (max-width: 700px) {
  .rg-wide { width: calc(100vw - 16px); }
}

@media (max-width: 600px) {
  /* 幕(START・結果)の中身は canvas の高さ270pxに収める。
     文字が大きいままだとスマホでは幕からはみ出す */
  .rg-veil { gap: .55rem; padding: .8rem; line-height: 1.5; }
  .rg-lead { font-size: .8rem; }
  .rg-note { font-size: .64rem; }
  .rg-start { font-size: 1.05rem; padding: .5rem 1.8rem; letter-spacing: .14em; }
  .rg-dist { font-size: 2.4rem; }
  .rg-verdict { font-size: 1.6rem; }
  /* 狭い画面では日付を落とす。順位・なまえ・打数・飛距離のほうが先。 */
  .rg-board li { grid-template-columns: 2.2rem 1fr auto 5.6rem; gap: .2rem .5rem; }
  .rg-date { display: none; }
}

/* 動きを減らす設定のとき。止めるのは飾りだけで、
   ノーツの流れと判定リングのパルスは「いつ押すか」を伝える機能そのものなので止めない
   （style.css の .units .sprite.anim を止めている書き方をここへコピーしないこと）。 */
@media (prefers-reduced-motion: reduce) {
  .rg-verdict { animation: none; }
  .rg-start { transition: none; }
}