* { margin: 0; padding: 0; box-sizing: border-box; }
/* ページスクロールバーの領域を常時予約し、ポリシー展開などでスクロールバーが現れても
   ゲーム画面の横位置がずれないようにする */
html { scrollbar-gutter: stable; }
body {
  background: #0e1116;
  color: #dfe6ee;
  font-family: "Segoe UI", "Hiragino Sans", "Meiryo", sans-serif;
  min-height: 100vh;
  display: flex;
  /* 縦 flex:画面は上下 margin:auto で残り空間の中央、フッターは最下部に置く */
  flex-direction: column;
  align-items: center;
}
.screen { display: none; text-align: center; width: min(760px, 92vw); }
.screen.active { display: block; margin-top: auto; margin-bottom: auto; }
/* タイトルロゴ:開始画面(h1)とリザルト見出し(#result-title)で同一デザイン */
h1, #result-title { font-size: 3.2rem; letter-spacing: 0.25em; color: #7fd8e8; }
h1 { margin-bottom: 0.4em; }
.logo-key { color: #e8c97f; } /* 「key」の部分は称号と同じ金色 */
h2 { font-size: 2.2rem; margin-bottom: 0.8em; }
.desc { line-height: 1.9; margin-bottom: 1.6em; color: #aab6c4; }
.desc strong { color: #7fd8e8; }
.desc .accent { color: #7fd8e8; } /* 「"高く"」は strong と同じ水色の細字 */
.desc ruby { color: #e8c97f; } /* 「モスキート音(むしのね)」は称号と同じ金色 */
.howto { margin-bottom: 1.6em; display: flex; gap: 0.8em; justify-content: center; }
kbd {
  background: #1c2430; border: 1px solid #3a4656; border-bottom-width: 3px;
  border-radius: 5px; padding: 0.1em 0.55em; font-family: inherit; font-size: 0.9em;
}
.warn { color: #e8b84f; font-size: 0.92rem; }
/* プレイ中・リザルトの下部ボタン行:ミュート(左)と「開始画面に戻る」(右)を横並びに */
.hint {
  margin-top: 2.2em; color: #5d6b7c; font-size: 0.85rem;
  display: flex; gap: 0.8rem; justify-content: center; align-items: center;
}
/* ボタンの高さは全画面で標準サイズ(1rem 基準)に統一する。.hint 自体の
   font-size(0.85rem)は margin-top の em 計算の基準なので変えない */
.hint button { font-size: 1rem; }
/* 開始画面とプレイ画面の縦位置合わせ:プレイ画面 .hint の margin-top は
   フォントレンダリングの環境差があるため CSS の固定値ではなく、ゲーム開始時に
   app.js(alignHintToStart)が両画面の実高さを測って設定する。崩れは受け入れテスト
   (ミュートボタンの縦位置一致、誤差1px未満)で監視する */

.mosquito {
  /* 薄暗い点(丸)。明るい光点だと蛍っぽくなるため暗めの色にする */
  position: fixed; left: 0; top: 0; width: 9px; height: 9px;
  border-radius: 50%; background: #46525f;
  pointer-events: none; user-select: none;
  will-change: transform;
}
/* 隠し要素:低確率で蚊の代わりに現れる蛍。明るく光り、ゆっくり明滅する */
.mosquito.firefly {
  background: #d9f07a;
  box-shadow: 0 0 12px 4px rgba(217, 240, 122, 0.55);
  animation: firefly-glow 1.8s ease-in-out infinite;
}
@keyframes firefly-glow {
  0%, 100% { opacity: 1; box-shadow: 0 0 12px 4px rgba(217, 240, 122, 0.55); }
  50% { opacity: 0.5; box-shadow: 0 0 5px 2px rgba(217, 240, 122, 0.25); }
}
/* 終了時、蛍は落ちずに飛び続けて光がすうっと消える。
   明滅アニメーションは opacity を上書きするため止め、JS の opacity でフェードさせる */
.mosquito.firefly.fading { animation: none; }

.status {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.5em;
}
/* 3ブロックを等幅の左・中央・右に固定し、周波数・コンボの桁が変わっても横位置がずれないようにする */
.status > div { flex: 1; }
.freq { font-size: 2.6rem; color: #7fd8e8; font-variant-numeric: tabular-nums; text-align: left; }
.freq small { font-size: 1.1rem; color: #5d8fa0; }
.combo { font-size: 1.3rem; color: #aab6c4; font-variant-numeric: tabular-nums; text-align: right; }
.level { font-size: 1.3rem; color: #e8c97f; font-variant-numeric: tabular-nums; text-align: center; }
.gain { font-size: 1.05rem; }
/* レベルアップゲージ:起点0(左1/3の位置)から右へ0〜100、左へ0〜-50(マイナスはプラスの半分の長さ) */
/* トラック:マイナス側(左1/3)は塗られていないとき暗い赤、プラス側(右2/3)は暗い青灰 */
/* 幅は「飛翔力 1（+1 Hz/打）」のテキスト幅に合わせる(実測181px) */
.lvmeter { position: relative; width: 181px; height: 4px; background: linear-gradient(to right, #3a2222 0%, #3a2222 33.333%, #1c2430 33.333%, #1c2430 100%); border-radius: 2px; margin: 6px auto 0; overflow: visible; }
/* 起点0の目盛(縦棒):ゲージが中途半端な位置から始まって見えないよう基準線を出す。バーの上下にはみ出す長さに、色はプラス側ゲージ(#lv-bar-pos の金)と区別するためくすんだグレー寄りのオレンジに */
.lvmeter::before { content: ''; position: absolute; left: 33.333%; top: -4px; width: 2px; height: 12px; margin-left: -1px; background: #a9825a; z-index: 1; }
#lv-bar-pos, #lv-bar-neg { position: absolute; top: 0; height: 100%; width: 0%; }
#lv-bar-pos { left: 33.333%; background: #e8c97f; transition: width 0.15s; } /* プラス側:金 */
/* Lv. MAX 中は Lv. 表記と満タン固定のゲージを金色のグローでゆっくり明滅させる。
   max クラスは .level(#level-wrap)に付き、ミスすると外れてそのプレイ中は光らない */
.level.max { animation: level-glow 1.6s ease-in-out infinite; }
.level.max #lv-bar-pos { animation: gauge-glow 1.6s ease-in-out infinite; }
@keyframes level-glow {
  0%, 100% { text-shadow: 0 0 3px rgba(232, 201, 127, 0.5); }
  50% { text-shadow: 0 0 10px #ffe9b0, 0 0 18px rgba(255, 233, 176, 0.6); }
}
@keyframes gauge-glow {
  0%, 100% { box-shadow: 0 0 3px #e8c97f; filter: brightness(1); }
  50% { box-shadow: 0 0 10px #ffe9b0, 0 0 18px rgba(255, 233, 176, 0.6); filter: brightness(1.35); }
}
/* マイナス側:赤(ミスペナルティ)。初期 left を起点に固定し、初回ミスでも右端(起点)基準で左へ塗られるように(left が auto だと初回だけ transition が効かず左→右に見えるバグ) */
#lv-bar-neg { left: 33.333%; background: #e86a6a; transition: width 0.15s, left 0.15s; }
.progress {
  height: 10px; background: #1c2430; border-radius: 5px; overflow: hidden;
  margin-bottom: 2.5em;
}
#progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #2e8fa8, #7fd8e8);
  transition: width 0.1s linear;
}
#kanji { font-size: 1.35rem; color: #8b98a8; margin-bottom: 0.35em; } /* 漢字かな交じり表記(表示専用) */
#kana { font-size: 1.7rem; margin-bottom: 0.45em; }
#romaji {
  font-size: 2.1rem; letter-spacing: 0.12em; font-family: Consolas, monospace; word-break: break-all;
  /* 長いお題で2行になるのはローマ字行のみ(かな・漢字行は最長お題でも幅に収まる)。
     短いお題でも2行分の高さを確保し、上下中央配置の中央がずれないようにする */
  line-height: 1.4; min-height: 2.8em;
}
#romaji .done { color: #7fd8e8; }
#romaji .current { color: #dfe6ee; border-bottom: 3px solid #7fd8e8; }
#romaji .rest { color: #5d6b7c; }
#romaji.miss { animation: shake 0.15s; }
@keyframes shake {
  25% { transform: translateX(-8px); color: #e86a6a; }
  75% { transform: translateX(8px); color: #e86a6a; }
}

/* リザルト表:項目名・値ともメイリオで統一する。
   既定のフォント順(Segoe UI 先頭)だと日本語=メイリオ・数字=Segoe UI の混在になり、
   同じ行なのに文字の背丈・太さ・位置決めが違って揃って見えないため */
.result-table { margin: 0 auto; border-collapse: collapse; font-size: 1.15rem; font-family: "Meiryo", sans-serif; }
/* 称号は表の先頭行:
   文字は金色 2.6rem 太字。padding は em 指定のままだと
   2.6rem 基準で膨らみ文字の右端が他の値より内側にずれるため、他セルと同じ実寸に固定 */
#r-rank {
  font-size: 2.6rem; color: #e8c97f; font-weight: bold;
  padding: calc(0.45em * 1.15 / 2.6) calc(1.2em * 1.15 / 2.6);
}
/* 称号行だけ下揃え:文字サイズが違う「称号」と値を下端で揃える(既定の middle だと
   項目名が値の縦中央に浮く)。さらに行ボックスの下揃えだけではディセント(ベースライン
   下の余白)差で大きい文字の字面が浮いて見えるため、その分(0.24em、実測較正)を下げる */
.rank-row th, .rank-row td { vertical-align: bottom; }
#r-rank { position: relative; top: 0.24em; }
.result-table th, .result-table td { padding: 0.45em 1.2em; text-align: left; }
.result-table th { color: #aab6c4; font-weight: normal; }
.result-table td { color: #dfe6ee; font-variant-numeric: tabular-nums; text-align: right; }
#result-title.clear { color: #7fd8e8; }
/* タイトルと称号行の間隔:開始画面の「タイトル文字→説明文の文字」の
   インク間隔(実測23px)に合わせる。表内に構造的な上余白(称号セルの padding+2.6rem の
   行ボックス余白)が margin 0 でも 29px あるため、負マージンで相殺する(ピクセル実測で較正) */
#result-title { margin-bottom: -0.117em; }

/* ランキング表はモーダル(#rd-*)のみで表示する。
   #ranking-status はリザルトの登録状態表示(登録中・登録しました・エラー)に使う。
   項目名(#rd-head)とデータ(#rd-table)は別テーブルにし、項目名は
   スクロール要素(#rd-scroll)の外で固定。列幅は表示時に JS(alignRankingHeader)で同期する */
#rd-head { margin: 0.5em auto 0; border-collapse: collapse; font-size: 0.95rem; box-shadow: 0 1px 0 #3a4656; }
#rd-head th { padding: 0.25em 0.55em; color: #5d6b7c; font-weight: normal; font-size: 0.85em; box-sizing: border-box; }
#rd-table { margin: 0 auto; border-collapse: collapse; font-size: 0.95rem; }
/* 列が8つに増えたため左右パディングは控えめに */
#rd-table td { padding: 0.25em 0.55em; font-variant-numeric: tabular-nums; box-sizing: border-box; }
/* 列の揃え:名前(2列目)・登録日時(9列目)=左、それ以外=右 */
#rd-head th, #rd-table td { text-align: right; }
#rd-head th:nth-child(2), #rd-table td:nth-child(2),
#rd-head th:nth-child(9), #rd-table td:nth-child(9) { text-align: left; }
/* データ行だけを枠内で縦スクロールする。スクロールバーはダークデザインに:
   溝=暗い面 #0e1116+枠線 #3a4656(ダイアログと同じデザイン言語)、つまみ=ひと段明るく */
#rd-scroll { overflow-y: auto; min-height: 0; align-self: stretch; }
/* ページ全体(html)のスクロールバーも同じダークデザインに */
#rd-scroll::-webkit-scrollbar, html::-webkit-scrollbar { width: 10px; }
#rd-scroll::-webkit-scrollbar-track, html::-webkit-scrollbar-track { background: #0e1116; border: 1px solid #3a4656; border-radius: 5px; }
#rd-scroll::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb { background: #4a5868; border-radius: 5px; }
#rd-scroll::-webkit-scrollbar-thumb:hover, html::-webkit-scrollbar-thumb:hover { background: #5d6b7c; }
/* Firefox は ::-webkit-scrollbar 非対応で既定の明るいスクロールバーになるため、標準プロパティで
   同系色(つまみ #4a5868・溝 #0e1116)に。標準プロパティは thin+2色のみで、幅の px 指定・枠線・
   ホバー色は表現できない。Chromium では標準プロパティの指定が webkit 装飾を無効化してしまうため、
   ::-webkit-scrollbar を解さない環境(=Firefox)だけに適用する */
@supports not selector(::-webkit-scrollbar) {
  #rd-scroll, html { scrollbar-width: thin; scrollbar-color: #4a5868 #0e1116; }
}
.ranking-me td { color: #7fd8e8; }
/* 1〜3位は金・銀・銅の文字色+グロー(金は称号と同色)。同順位なら全員光る。
   .ranking-me より後に書き、自分が1〜3位のときは金銀銅を優先する */
#rd-table tr.rank-1 td { color: #e8c97f; text-shadow: 0 0 12px rgba(232, 201, 127, 0.55); }
#rd-table tr.rank-2 td { color: #c8d2dc; text-shadow: 0 0 12px rgba(200, 212, 224, 0.9); }
#rd-table tr.rank-3 td { color: #d29a6d; text-shadow: 0 0 12px rgba(210, 154, 109, 0.55); }
#ranking-status, #rd-status, #rd-you { color: #aab6c4; font-size: 0.9rem; margin-top: 0.5em; }
#ranking-status { margin-top: 1.4em; }

.overlay {
  position: fixed; inset: 0; background: rgba(4, 8, 12, 0.75);
  display: flex; align-items: center; justify-content: center;
}
.dialog {
  background: #141b24; border: 1px solid #3a4656; border-radius: 10px;
  padding: 1.6em 2em; text-align: center;
}
.dialog .dialog-title { font-size: 1.2rem; margin-bottom: 0.4em; }
/* ランキングモーダルの見出し:タイトルロゴと同じ太字の水色 */
.dialog .dialog-heading { font-size: 1.1rem; color: #7fd8e8; font-weight: bold; letter-spacing: 0.2em; }
/* 枠は高さ・幅とも固定(読み込み中→完了で変わらないように、100件は
   #rd-scroll 内の縦スクロールで見る)。左右 padding は 0:12文字名+全9列の表(実測772px)と
   縦スクロールバー(10px)が内容領域(798px)に収まるように。
   表は中央揃えのため見た目の余白は「枠幅−表幅」で決まり、padding を狭めても見た目は変わらない */
#ranking-dialog .dialog {
  width: min(50em, 94vw); height: 32.1em; padding-left: 0; padding-right: 0;
  display: flex; flex-direction: column; align-items: center;
}
#rd-head th, #rd-table td { white-space: nowrap; } /* 12文字の名前でもセルを折り返さず、行の高さを一定に保つ */
#ranking-dialog .dialog-buttons { margin-top: auto; padding-top: 1.1em; } /* 閉じるボタンは下端に固定 */
.dialog .dialog-msg { color: #aab6c4; font-size: 0.9rem; }
.dialog input {
  margin-top: 0.9em; font-size: 1.2rem; padding: 0.3em 0.5em; width: 12em;
  background: #0e1116; color: #dfe6ee; border: 1px solid #3a4656;
  border-radius: 6px; text-align: center;
}
.dialog-buttons { margin-top: 1.1em; display: flex; gap: 0.8em; justify-content: center; }
/* 名前入力ダイアログ:登録する=水色枠、登録しない=赤枠で選択の性質を示す */
#name-ok { border-color: #7fd8e8; }
#name-skip { border-color: #e86a6a; }
/* 操作はすべてクリック可能なボタン+「ラベル+キー(右)」表記に統一 */
button {
  font: inherit; padding: 0.4em 1.2em; border-radius: 6px;
  border: 1px solid #3a4656; background: #1c2430; color: #dfe6ee; cursor: pointer;
}
button:hover { background: #26313f; }
#result-buttons {
  margin-top: 1.4em; display: flex; gap: 0.8em; justify-content: center; align-items: center;
}
button kbd {
  background: #2d3a4a; border-bottom-width: 1px; font-size: 0.8em; padding: 0.05em 0.4em;
}

#finish-overlay .finish {
  font-size: 4.5rem; letter-spacing: 0.2em; color: #7fd8e8; font-weight: bold;
  text-shadow: 0 0 30px rgba(127, 216, 232, 0.6);
  animation: finish-pop 0.35s ease-out;
}
/* ノーミスクリアの PERFECT! は称号と同じ金色に */
#finish-overlay .finish.perfect {
  color: #e8c97f;
  text-shadow: 0 0 30px rgba(232, 201, 127, 0.6);
}
@keyframes finish-pop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ミュートボタン:開始画面は音の注意書きの下(.mute-wrap)、プレイ中は
   「開始画面に戻る」ボタンの左に横並び(.hint 内)。
   リザルト画面には不要 */
.mute-wrap { margin-top: 0.9em; display: flex; gap: 0.8rem; justify-content: center; }
.mute, #btn-quit-play, #btn-quit-result { color: #aab6c4; } /* 戻るボタンはミュートと同じ控えめな文字色に */
/* 下部ボタン行の横位置合わせ:開始画面(.mute-wrap)とプレイ画面(.hint)の行を
   [ミュート 14rem][ギャップ 0.8rem][幅 12.5rem の塊(小中大 or 開始画面に戻る)] の同一構造に
   固定し、中央揃えのまま横位置・左右端が全ボタンで一致するようにする。
   ギャップ 0.8rem は howto(スタート・ランキング行)の 0.8em と同値。
   小中大の各幅は「塊の幅 12.5rem から内側ギャップ2つ分を引いた残りの3等分」 */
.mute { width: 14rem; } /* ミュートする/ミュート中…のどちらでも幅が変わらないよう固定 */
/* ラベル部分も固定幅・左揃えにし、ミュートする/ミュート中…の文字幅の差で kbd(Ctrl+M)の
   位置がずれないようにする。7.8em = 実測の最大ラベル幅 7.28em(♪ ミュートする)+余白 */
.mute .mute-label { display: inline-block; width: 7.8em; text-align: left; }
/* 記号(♪/✕)も固定幅にし、字幅差(実測 ♪=1em・✕=0.82em)で「ミュート」の開始位置が
   ずれないようにする。1.3em = 記号の最大幅 1em+空白ぶんの余白 */
.mute .mute-icon { display: inline-block; width: 1.3em; }
#btn-quit-play, #btn-quit-result { width: 12.5rem; }
.vol { width: calc((12.5rem - 2 * 0.8rem) / 3); }
.mute.muted { color: #e8b84f; border-color: #e8b84f; }
/* 音量ボタン(開始画面のみ):選択中は選ばれていることがわかるよう強調する。
   ミュート中は音が鳴らないことがわかるよう、ミュートボタンと同じオレンジにする */
.vol.active { color: #7fd8e8; border-color: #7fd8e8; }
body.muted .vol.active { color: #e8b84f; border-color: #e8b84f; }

/* フッターとプライバシーポリシー。
   バージョン表示(#version)は右下隅の固定表示からフッター内へ統合。
   ポリシーはフッター内のバージョンの上に、リンク風のトグルで配置 */
footer {
  width: min(760px, 92vw); margin-top: 2em; padding: 1.2em 0 1.5em;
  border-top: 1px solid #232b36; text-align: center;
  color: #5d6b7c; font-size: 0.85rem; line-height: 1.8;
}
/* リンク色は青(#1da1f2) */
footer a { color: #1da1f2; }
footer a:hover { color: #4fc3f7; }
#privacy-container { margin: 0.2em 0; }
/* トグルはボタンでなくリンク風に(共通ボタンスタイルを打ち消す)。
   バージョン表示の「localhost」も同じリンク風 */
#privacy-toggle, #debug-token-copy {
  background: none; border: none; padding: 0; font: inherit;
  color: #1da1f2; text-decoration: underline; cursor: pointer;
}
#privacy-toggle:hover, #debug-token-copy:hover { background: none; color: #4fc3f7; }
/* プレイ中は P キーが打鍵(ポリシーを開くキーが使えない)ため、リンクをグレーアウトし
   クリックも無効化(X リンク・localhost 表示も同様、表示との一貫性のため)。
   footer は画面 div の後続兄弟のため、プレイ画面のときだけ ~ で切り替えられる */
#screen-play.active ~ footer #privacy-toggle,
#screen-play.active ~ footer #privacy-toggle:hover,
#screen-play.active ~ footer #debug-token-copy,
#screen-play.active ~ footer #debug-token-copy:hover,
#screen-play.active ~ footer a,
#screen-play.active ~ footer a:hover { color: #5d6b7c; pointer-events: none; }
#privacy-content {
  display: none; margin: 0.9em auto; max-width: 620px;
  text-align: left; color: #aab6c4; font-size: 0.88rem; line-height: 1.9;
  background: #141b24; border: 1px solid #3a4656; border-radius: 8px;
  padding: 1em 1.2em;
}
#version { font-family: Consolas, monospace; }
/* モーダル(ランキング・名前入力)表示中はフッター(ポリシー含む)を隠す */
body.modal-open footer { display: none; }