/*!
 * © 2025 パソコンサロンゆうらく (Pasokon Salon Yuuraku). All rights reserved.
 * Project: ゆうらく学習トレーニングポータルYuuraku Leaning station
 * File: Supwer Rhythm Typing
 * BUILD_ID: YR-2025-1002-K15                 // ← 公開用の可視ビルドID
 * CANARY_ZW
 * SPDX-License-Identifier: LicenseRef-Yuuraku-Proprietary
 * Contact: yuurakunomori@gmail.com  |  URL: https://yuurakus.jp/
 *
 * 重要
 * 
* [日本語 / Japanese]
 * 本スタイルシートおよび関連ファイルの著作権（著作権法上の権利）は、パソコンサロンゆうらくに専属します。
 * 法令で明示的に認められる場合を除き、当社の事前の書面許諾なく、複製・複写・転載・転用・編集・改変・翻案・
 * 逆コンパイル／リバースエンジニアリング・再配布・商用利用・公衆送信（Webへのアップロードを含む）・
 * 自動取得／スクレイピング等の二次利用を固く禁じます。侵害が判明した場合、警告なく直ちに
 * 差止請求・損害賠償請求等の法的措置を厳格に行います。
 * 【重要】本スタイルシートには検証用のBUILD IDおよび不可視の「カナリア文字（ウォーターマーク）」が埋め込まれ、
 * ソースには識別用IDが隠されています。これらの削除・改変は契約違反・不正競争・著作権侵害等として追及します。
 *
 * [English]
 * Copyright in this stylesheet and related files is owned exclusively by
 * Pasokon Salon Yuuraku unless otherwise stated. Except as expressly permitted by law,
 * any reproduction, modification, adaptation, reverse engineering, redistribution,
 * commercial use, public transmission (including posting on the web), or automated
 * collection/scraping without prior written permission is strictly prohibited.
 * Upon detection of infringement, we will immediately pursue legal remedies including
 * injunctive relief and damages. IMPORTANT: This stylesheet embeds a verifiable BUILD ID
 * and invisible “canary” watermark characters, and an identification ID is hidden in the source.
 * Removal or alteration will be treated as a violation and strictly enforced.
 *
 * [中文 / Chinese (Simplified)]
 * 本样式表及相关文件之著作权，除非另有说明，专属于「Pasokon Salon Yuuraku」。
 * 未经事先书面许可，严禁复制、转载、修改、改编、逆向工程、再分发、商业使用、
 * 公开传播（含上传至网络）及自动抓取/爬取等二次利用。一经发现侵权，将立即采取包括
 * 禁令与损害赔偿在内的法律措施。重要：本样式表内已嵌入可验证的BUILD ID与不可见
 * “金丝雀”水印字符，且源代码中隐藏有识别用ID。擅自删除或篡改将被视为违规并依法追究。
 *
 * [한국어 / Korean]
 * 본 스타일시트 및 관련 파일의 저작권은 별도 고지가 없는 한
 * ‘파소콘 살롱 유우라쿠(Pasokon Salon Yuuraku)’에 전속됩니다.
 * 사전 서면 허가 없이 복제, 전재, 전용, 수정, 각색, 리버스 엔지니어링,
 * 재배포, 상업적 이용, 공중송신(웹 게시 포함), 자동 수집·스크래핑 등의 2차 이용을 엄격히 금합니다.
 * 위반 시 예고 없이 즉시 금지청구 및 손해배상 청구 등 법적 조치를 취합니다.
 * 중요: 본 스타일시트에는 검증 가능한 BUILD ID와 보이지 않는 ‘카나리아(워터마크) 문자’가 포함되며,
 * 소스 내부에는 식별용 ID가 숨겨져 있습니다. 이를 삭제·변조하는 행위는 위반으로 간주되어 엄정 대응합니다.
 */


/* =========================================================
 * Super Rhythm Typing - UI Styles
 * 目的：
 *  - 見やすいインデント/段落
 *  - 意味が分かるコメントを付与
 *  - 右カラムのランキングは「キーボード行」から開始
 * =======================================================*/

/* ========== テーマ変数（色・トークン） ========== */
:root {
  --bg:       #0e0f12;  /* 背景（全体） */
  --panel:    #171a1f;  /* パネル系の面色 */
  --ink:      #e8eef7;  /* 文字色（メイン） */
  --muted:    #a5b0c1;  /* 文字色（弱め） */
  --accent:   #38b48a;  /* ブランドのアクセント */
  --accent-2: #b8f1de;  /* サブ・アクセント */
  --danger:   #ff6b6b;  /* エラー/ミス強調 */
  --ok:       #2dd4bf;  /* 成功/OK */
  --warn:     #fbbf24;  /* 注意/警告 */
}

/* ========== ベースリセット/タイポグラフィ ========== */
* { box-sizing: border-box; }

html,
body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family:
    system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", sans-serif;

  /* ★ 既定の 8px 余白をゼロにして、完全に端まで使う */
  margin: 0;
}


h1, h2, h3 { margin: 0 0 .4rem; }
button, input, select { font: inherit; }

/* ========== ヘッダー（固定・操作ボタン帯） ========== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #2a2f3a;
  background: linear-gradient(180deg, #10131a, #0d0f14);
  position: sticky; /* スクロールしても上部に固定 */
  top: 0;
  z-index: 5;
}

.app-header h1 {
  font-size: clamp(18px, 2.2vw, 28px);
  letter-spacing: .06em;
}

/* ========== ヘッダー内ツール群（ボタン等） ========== */
.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap; /* 画面幅が狭いときは折り返す */
}

.toolbar .ghost {
  border: 1px solid #3a4555;
  background: transparent;
  color: var(--ink);
  padding: .6rem .8rem;
  border-radius: 10px;
  text-decoration: none;
}

.toolbar button {
  padding: .6rem .8rem;
  border-radius: 10px;
  border: 1px solid #313846;
  background: #1a1f29;
  color: var(--ink);
  cursor: pointer;
}

.toolbar button:hover,
.toolbar .ghost:hover {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ========== オプション帯（ステッパー等） ========== */
.options {
  display: grid;
/* 1列目の“見た目幅”を抑えつつ、2〜4列目も少し絞って横並びを確保 */
  grid-template-columns: minmax(220px, 1.35fr) minmax(220px, 1.05fr) minmax(160px, .85fr) minmax(160px, .85fr) minmax(200px, .95fr) minmax(220px, 1.05fr);
grid-template-areas:
    "stage music custom custom custom custom"
    "minutes tempo volume start start start";
  gap: 12px 14px;
  align-items: end;
  padding: 12px 16px;
  border-bottom: 1px solid #2a2f3a;
  background: #10141a;
}


.options .opt {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.options label {
  color: var(--muted);
  font-size: .92rem;
}

/* ========== オプション帯：配置（v2） ========== */
.options .opt-stage   { grid-area: stage; }
.options .opt-music   { grid-area: music; }
.options .opt-minutes { grid-area: minutes; }
.options .opt-tempo   { grid-area: tempo; }
.options .opt-volume  { grid-area: volume; }
.options .opt-start   { grid-area: start; }
.options .opt-custom  { grid-area: custom; }

/* ラベル行（ボリューム + BPM連動） */
.label-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.label-row .mini-toggle{ margin: 0; }

/* セレクトもステッパーと高さを揃える */
.options select{
  width: 100%;
  height: 44px;
  border: 1px solid #303846;
  border-radius: 12px;
  background: #0f1319;
  color: var(--ink);
  padding: 0 .8rem;
}

/* MUSIC（BGM）コントロール */
.music-ctrl{
  display: flex;
  gap: 8px;
  align-items: center;
}

.music-ctrl select{
  flex: 1;
  min-width: 0;
}

.btn-ghost{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #3a4555;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.btn-ghost:hover{
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.btn-ghost:disabled{
  opacity: .45;
  cursor: not-allowed;
  outline: none;
}


/* 開始ボタンは“縦に揃った塔”として存在感を出す */
.opt.start .primary{
  width: 100%;
  height: 44px;
}


/* カスタムセットは2段目に回すので、上マージンを抑える */
.opt-custom .custom-set{ margin-top: 0; }


/* ミニ切替（BPM連動など） */
.mini-toggle{
  display: flex;
  gap: 8px;
  align-items: center;
  user-select: none;
  margin-top: -2px;
  margin-bottom: 2px;
}

.mini-toggle label{
  color: var(--muted);
  font-size: .85rem;
  margin: 0;
  cursor: pointer;
}

.mini-toggle input{
  accent-color: var(--accent);
  cursor: pointer;
}


/* ステッパー（数値入力+増減ボタン） */
.stepper {
  display: flex;
  align-items: center;
  height: 44px;
  border: 1px solid #303846;
  border-radius: 12px;
  overflow: hidden;
  background: #0f1319;
}

.stepper input {
  width: 100%;
  text-align: center;
  padding: .55rem .3rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.0rem;
}
/* === Hide native number spinners (WebKit/Chromium & Firefox) === */
.stepper input[type="number"]::-webkit-outer-spin-button,
.stepper input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stepper input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.stepper button {
  width: 44px;
  height: 44px;
  border: 0;
  background: #181f27;
  color: var(--ink);
  cursor: pointer;
}

.stepper button:hover { background: #1e2631; }
.opt.start { align-self: stretch; }
/* ★ カスタム文字セット（ステージ直下の5枠+SET） */
.custom-set{
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;        /* ★ 折り返さない */
}
.custom-set input.char{
  width: 2.2em;     /* ★ 少しだけ細身に */
  height: 2.2em;    /* ★ */
  text-align: center;
  border: 1px solid #313846;
  border-radius: 8px;
  background: #0f141b;
  color: var(--ink);
  font-weight: 700;
  text-transform: uppercase; /* 見た目も常に大文字 */
}
.custom-set button{
  padding: .4rem .7rem; /* ★ ほんの少しだけ小さく */
  white-space: nowrap;  /* ★ 文言が長くても折り返さない */
  border-radius: 10px;
  border: 1px solid #3a4555;
  background: #121821;
  color: var(--ink);
  cursor: pointer;
}
.custom-set button:hover{ outline: 2px solid var(--accent); outline-offset: 1px; }
/* ★ 追加：RESET の見た目（控えめな危険色） */
.custom-set .danger:hover{ outline-color: var(--danger); }


/* プライマリーボタン（開始など） */
.primary {
  background: linear-gradient(180deg, #2bdbb2, #0aa283);
  border: 0;
  color: #04231a;
  padding: .8rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}

.primary:hover { filter: brightness(1.05); }

/* ========== メイン2カラム+3行グリッド（上:五線譜 / 中:ヒント / 下:キーボード） ========== */
/* 右カラム（ランキング）を「下段＝キーボード行」から開始させるため、行を3段に分割 */
.grid-outer {
  display: grid;
  grid-template-columns: 4fr 1fr; /* 左: ゲーム領域 / 右: ランキング */
  grid-template-rows: auto auto auto; /* 上:五線譜 / 中:ヒント / 下:キーボード */
  gap: 12px;
  padding: 12px 16px;
  min-height: calc(100vh - 220px); /* 画面高からヘッダー等を差し引いて最低高さを担保 */
}

/* 左カラムはラッパーだけにして「中身を直接グリッド子要素化」 */
.left-col { display: contents; }

/* ========== 五線譜ラッパー ========== */
/* 画面左右いっぱいに“はみ出させる”（full-bleed） */
.staff-wrap {
  background: var(--panel);
  border: 1px solid #2b3340;
  border-radius: 0;
  padding: 8px 0;
  box-shadow: 0 10px 30px #00000040;
  position: relative;

  /* ★ 幅そのものをビューポート幅に固定（背景/枠も端まで届く） */
  width: 100vw;      /* 既定 */
  width: 100dvw;     /* 新しい “動的” ビューポート単位（対応環境で優先） */

  /* ★ 親グリッドの左右パディングを“相殺”してフルブリード */
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* dvw 対応ブラウザではこちらが効く（スクロールバー幅ズレ対策） */
  margin-left:  calc(50% - 50dvw);
  margin-right: calc(50% - 50dvw);

  max-width: none;   /* 100vw の上限で止まらないように明示 */
}



/* 五線譜Canvas
   - 横幅に応じて高さが決まるよう「aspect-ratio」を指定（つぶれ防止）
   - 3:1はUIバランスから決定（必要に応じて微調整可） */
canvas#gameCanvas {
  display: block;

  /* JS 実行前に“仮”で端まで見せる。dvw でスクロールバー差も吸収 */
  width: 100vw;
  width: 100dvw;
  max-width: 100dvw;
  height: auto;

  aspect-ratio: 3 / 1;
  border-radius: 0;
  background: linear-gradient(180deg, #11151b, #0e1217);
}



/* ========== グリッド内の配置（左カラム3段の割当） ========== */
/* ★ フルブリードさせるため、列1→最終列までを占有させる */
.staff-wrap    { grid-column: 1 / -1; grid-row: 1; } /* 上段：五線譜（全幅） */
.keyboard-hint { grid-column: 1;      grid-row: 2; } /* 中段：ヒント（左カラム） */
.keyboard      { grid-column: 1;      grid-row: 3; } /* 下段：キーボード（左カラム） */

/* ========== キーボード領域 ========== */
.keyboard-hint { font-size: .95rem; color: var(--accent-2); }

.keyboard {
  background: var(--panel);
  border: 1px solid #2b3340;
  border-radius: 16px;
  padding: 16px;
  display: grid;

  /* 行間が勝手に広がらないように固定化 */
  row-gap: 4px;
  column-gap: 4px;
  align-content: start;        /* ← 余白は上に寄せ、行間へ配分しない */
  grid-auto-rows: min-content; /* ← 各行は内容サイズで確定 */
}


/* 1行ぶんのキー並び */
.keyrow {
  display: flex;
  gap: 4px;
  justify-content: center;

  /* 余白配分・フォント行高の影響を排除し、縦方向を確定 */
  align-items: center;
  min-height: 56px;  /* = .key(52px) + α。見た目を一定に */
  line-height: 0;    /* テキストノード由来の行間増幅を無効化 */
}


/* 各キー */
.key {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 52px;
  border-radius: 10px;
  background: #0c1016;
  border: 1px solid #2a3140;
  color: #dce6f5;
  user-select: none;
  box-shadow: inset 0 -2px 0 #00000070; /* 下辺の陰影 */
  padding: 0 8px;
}

/* 幅広キー（Shiftなど） */
.key.wide  { min-width: 72px; }

/* スペースキー（横長） */
.key.space { min-width: 360px; }

.key .legend {
  font-size: 1.45rem;
  line-height: 1;  /* 見出し文字が行高を押し上げないように */
}


/* 入力ターゲット（ハイライト） */
.key.target {
  outline: 3px solid #ff4d4f;
  outline-offset: 0;
  border-color: #ff9a9b;
}

/* ヒット時の見た目 */
.key.hit {
  background: #11321f;
  border-color: #26d39b;
  box-shadow: 0 0 0 2px #1dd4b9aa inset;
}

/* ミス時の見た目 */
.key.miss {
  background: #2a1515;
  border-color: var(--danger);
  box-shadow: 0 0 0 2px #ff6b6baa inset;
}

/* ========== 右カラム（ランキングパネル） ========== */
/* grid-row:3 により、ランキングは「キーボード行」と上端が揃う */
.right-col {
  background: var(--panel);
  border: 1px solid #2b3340;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  grid-column: 2;
  grid-row: 3;
  align-self: start; /* 行の先頭（上）に揃える */
}

/* ランキング一覧（縦に長くなる場合はスクロール） */
.rank-list {
  margin: 0;
  padding-left: 1.1rem;
  max-height: 380px;
  overflow: auto;
}

.rank-list li { padding: 2px 0; color: #d0d8e3; }

/* 名前入力/保存ボタン列 */
.rank-controls {
  display: grid;
  grid-template-columns: 1fr auto auto; /* 入力:広め / ボタン2つ:自動幅 */
  gap: 8px;
  align-items: start;       /* 行の高さに合わせたストレッチを防ぎ、要素自身の高さにする */
}

.rank-controls input{
  /* フォントサイズ基準（em）で、自然な高さに */
  line-height: 1.2;
  height: 2.6em;          /* およそ 1 行 + 余白ぶん：標準的な見た目 */
  padding: .5em .75em;    /* 文字の上下左右の余白 */
  align-self: start;      /* 念のため個別にもストレッチ抑止 */

  /* 既存スタイル（そのまま維持） */
  border-radius: 10px;
  border: 1px solid #313846;
  background: #0f141b;
  color: var(--ink);
}
.rank-controls button{
  height: 2.6em;
}

/* 共有（X/Instagram） */
.share {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.share button {
  padding: .6rem .8rem;
  border-radius: 10px;
  border: 1px solid #313846;
  background: #18212a;
  color: var(--ink);
}

/* ========== フッター ========== */
.app-footer {
  padding: 12px 16px;
  color: var(--muted);
  border-top: 1px solid #2a2f3a;
}

/* ========== モーダル（リザルト等） ========== */
.modal {
  position: fixed;
  inset: 0; /* 上下左右0：全画面覆い */
  display: grid;
  place-items: center; /* 中央寄せ */
  background: #0008; /* 半透明黒 */
}

.modal.hidden { display: none; }

.modal-card {
  width: min(720px, 92vw);
  background: #0e131a;
  border: 1px solid #314054;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 20px 70px #000;
}

.modal-card h3 {
  font-size: 2.0rem;   /* モーダルのフォントサイズを拡大 */
  margin-bottom: 8px;
}


.result-body {
   background: #0a0d12;
   border: 1px dashed #2b3340;
   border-radius: 12px;
   padding: 12px;
   font-size: 1.15rem;
   white-space: pre-wrap;
   color: #e0e9f6;
 }

 /* ★ 追加：ミス強調 */
 .result-body .mistake-title { color: var(--warn); }
 .result-body .mistake-badge { color: var(--warn); font-weight: 700; padding: 0 4px; }
 .result-body .ok { color: var(--ok); }
 .result-body .mistake-list { line-height: 1.5; margin-top: 6px; }




.modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

/* ========== レスポンシブ ========== */
/* オプション帯：画面幅が狭い場合は段組みに切替 */
@media (max-width: 1100px) {
  .options{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "stage stage"
      "music music"
      "custom custom"
      "minutes tempo"
      "volume volume"
      "start start";
  }
  .opt.start .primary{ min-height: 52px; }
}

@media (max-width: 560px) {
  .options{
    grid-template-columns: 1fr;
    grid-template-areas:
      "stage"
      "music"
      "custom"
      "minutes"
      "tempo"
      "volume"
      "start";
  }
}

/* 画面幅に応じてスペースキーの最小幅を縮小 */
@media (max-width: 1280px) {
  .key.space { min-width: 240px; }
}

/* 幅が狭い場合は1カラムに（ランキングは下へ回り込み） */
@media (max-width: 980px) {
  .grid-outer { grid-template-columns: 1fr; }
}

/* ========== コンボ演出（画面左上のポップ） ========== */
.combo {
  position: absolute;
  left: 16px;
  top: 10px;
  font-weight: 900;
  font-size: 34px;
  letter-spacing: .04em;
  color: #e9fff9;
  opacity: 0;
  pointer-events: none;
  text-shadow:
    0 0 12px #3af0c5,
    0 0 28px #3af0c5;
  transform: translateY(-8px) scale(.95);
  transition:
    transform .18s ease,
    opacity .18s ease,
    filter .18s ease;
}

.combo .num { font-size: 44px; margin-right: 6px; }

.combo.show { opacity: 1; transform: translateY(0) scale(1.04); }

.combo.good {
  text-shadow:
    0 0 12px #9ef27d,
    0 0 26px #9ef27d;
}

.combo.excellent {
  text-shadow:
    0 0 12px #7bd7ff,
    0 0 26px #7bd7ff;
  filter: brightness(1.1);
}

.combo.marvelous {
  text-shadow:
    0 0 16px #4ef0c7,
    0 0 40px #4ef0c7;
  filter: brightness(1.25);
}

/* ======================================================================
   UI THEME: NeoSynth / Futuristic HUD (Scope: body.ui-neo)
   - 既存のID/クラス構造は維持し、見た目だけを上書き
   - 無効化したいとき：index.html の body から ui-neo を外すだけ
====================================================================== */

body.ui-neo{
  /* ---- tokens (既存の --bg などを「上書き」する) ---- */
  --bg:       #05070b;
  --panel:    rgba(10, 15, 23, .74);
  --ink:      #eaf2ff;
  --muted:    #9aacbf;

  --accent:   #37f3c4;  /* メインの発光色 */
  --accent-2: #9af7ff;  /* サブの発光色 */
  --danger:   #ff4d72;
  --ok:       #33f0a0;
  --warn:     #ffcc4a;

  --stroke:   rgba(255,255,255,.10);
  --stroke2:  rgba(154,247,255,.20);
  --shine:    rgba(255,255,255,.18);
  --shadow:   rgba(0,0,0,.55);

  /* ---- “未来感”の背景（画像なしで雰囲気を作る） ---- */
  background:
    radial-gradient(1200px 700px at 10% -10%, rgba(55,243,196,.18), transparent 60%),
    radial-gradient(900px 520px at 110% 20%, rgba(154,247,255,.14), transparent 55%),
    radial-gradient(900px 520px at 40% 120%, rgba(255,77,114,.10), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, #04060a, #070b11 40%, #05070b);
  background-attachment: fixed;
}

/* クリックしやすさ・フォーカス可視化 */
body.ui-neo :focus-visible{
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: 12px;
}

/* ===== Header (近未来トップバー) ===== */
body.ui-neo .app-header{
  border-bottom: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(12,18,28,.92), rgba(8,11,17,.72));
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
body.ui-neo .app-header::after{
  content:"";
  position:absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(55,243,196,.85), rgba(154,247,255,.85), transparent);
  opacity: .32;
  pointer-events:none;
}
body.ui-neo .app-header h1{
  letter-spacing: .10em;
  text-shadow: 0 0 18px rgba(154,247,255,.14);
}

/* ===== Button system (カード化・奥行き) ===== */
body.ui-neo .toolbar button,
body.ui-neo .toolbar .ghost,
body.ui-neo .share button,
body.ui-neo .rank-controls button,
body.ui-neo .custom-set button,
body.ui-neo .btn-ghost{
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background:
    radial-gradient(140% 160% at 15% 0%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color: var(--ink);
  box-shadow:
    0 12px 30px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, filter .12s ease;
}
body.ui-neo .toolbar button:hover,
body.ui-neo .toolbar .ghost:hover,
body.ui-neo .share button:hover,
body.ui-neo .rank-controls button:hover,
body.ui-neo .custom-set button:hover,
body.ui-neo .btn-ghost:hover{
  border-color: rgba(154,247,255,.35);
  box-shadow:
    0 14px 42px rgba(0,0,0,.42),
    0 0 0 2px rgba(154,247,255,.10) inset,
    inset 0 1px 0 rgba(255,255,255,.14);
}
body.ui-neo .toolbar button:active,
body.ui-neo .toolbar .ghost:active,
body.ui-neo .share button:active,
body.ui-neo .rank-controls button:active,
body.ui-neo .custom-set button:active,
body.ui-neo .btn-ghost:active{
  transform: translateY(1px);
  filter: brightness(.98);
}

body.ui-neo .primary{
  border: 0;
  color: #001812;
  background: linear-gradient(180deg, rgba(55,243,196,.95), rgba(10,168,158,.65));
  box-shadow:
    0 18px 52px rgba(55,243,196,.18),
    0 22px 70px rgba(0,0,0,.45);
}
body.ui-neo .ghost.danger{
  border-color: rgba(255,77,114,.30);
}

/* ===== Options (各項目を“モジュールカード”化) ===== */
body.ui-neo .options{
  border-bottom: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(10,15,23,.78), rgba(6,9,14,.55));
}
body.ui-neo .options .opt{
  position: relative;
  padding: 12px 12px 10px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background:
    radial-gradient(140% 160% at 20% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: 0 18px 44px rgba(0,0,0,.26);
  backdrop-filter: blur(10px);
}
body.ui-neo .options .opt::before{
  content:"";
  position:absolute;
  left: 12px; right: 12px; top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(55,243,196,.85), rgba(154,247,255,.85), transparent);
  opacity: .22;
  pointer-events:none;
}
body.ui-neo .options label{
  color: rgba(234,242,255,.72);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* セレクト・入力系（近未来ガラス） */
body.ui-neo .options select{
  border: 1px solid rgba(154,247,255,.18);
  background: rgba(6,10,16,.65);
  border-radius: 14px;
}
body.ui-neo .stepper{
  border: 1px solid rgba(154,247,255,.18);
  background: rgba(6,10,16,.65);
  border-radius: 14px;
}
body.ui-neo .stepper button{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
}
body.ui-neo .stepper button:hover{
  background: linear-gradient(180deg, rgba(154,247,255,.12), rgba(255,255,255,.02));
}
body.ui-neo .mini-toggle label{
  color: rgba(234,242,255,.60);
}

/* カスタム入力（小さな端末感） */
body.ui-neo .custom-set input.char,
body.ui-neo .rank-controls input{
  border: 1px solid rgba(154,247,255,.18);
  background: rgba(6,10,16,.65);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

/* ===== Main panels (Keyboard / Ranking / Staff) ===== */
body.ui-neo .keyboard,
body.ui-neo .right-col{
  border: 1px solid var(--stroke);
  background:
    radial-gradient(140% 160% at 20% 0%, rgba(255,255,255,.09), transparent 65%),
    linear-gradient(180deg, rgba(12,18,28,.72), rgba(8,11,17,.62));
  box-shadow: 0 22px 60px rgba(0,0,0,.40);
  backdrop-filter: blur(10px);
}
body.ui-neo .keyboard{
  position: relative;
  overflow: hidden;
}
body.ui-neo .keyboard::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.020) 0 1px, transparent 1px 18px);
  opacity: .35;
  pointer-events:none;
}

/* フルブリードの五線譜枠も“未来パネル”寄りに */
body.ui-neo .staff-wrap{
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(12,18,28,.68), rgba(8,11,17,.56));
  box-shadow: 0 26px 80px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
body.ui-neo canvas#gameCanvas{
  background: linear-gradient(180deg, rgba(12,18,28,.92), rgba(8,11,17,.72));
}

/* ===== Keyboard keys (未来のキーキャップ) ===== */
body.ui-neo .key{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(120% 140% at 18% 10%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -12px 20px rgba(0,0,0,.38);
  transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease, filter .12s ease;
}
body.ui-neo .key:hover{
  border-color: rgba(154,247,255,.30);
}
body.ui-neo .key:active{
  transform: translateY(1px);
  box-shadow:
    0 8px 18px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -10px 18px rgba(0,0,0,.44);
}

/* ターゲット：赤い輪郭 + 脈動 */
@keyframes neoPulse{
  0%,100% { filter: brightness(1.02); }
  50%     { filter: brightness(1.14); }
}
body.ui-neo .key.target{
  outline: none;
  border-color: rgba(255,77,114,.85);
  box-shadow:
    0 0 0 2px rgba(255,77,114,.62),
    0 0 26px rgba(255,77,114,.35),
    inset 0 1px 0 rgba(255,255,255,.16);
  animation: neoPulse 1.0s ease-in-out infinite;
}

/* ヒット / ミス */
body.ui-neo .key.hit{
  border-color: rgba(55,243,196,.90);
  box-shadow:
    0 0 0 2px rgba(55,243,196,.35),
    0 0 26px rgba(55,243,196,.20),
    inset 0 1px 0 rgba(255,255,255,.14);
}
body.ui-neo .key.miss{
  border-color: rgba(255,77,114,.90);
  box-shadow:
    0 0 0 2px rgba(255,77,114,.30),
    0 0 26px rgba(255,77,114,.18),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* 動きが苦手な方の設定 */
@media (prefers-reduced-motion: reduce){
  body.ui-neo .key,
  body.ui-neo .toolbar button,
  body.ui-neo .toolbar .ghost,
  body.ui-neo .share button,
  body.ui-neo .rank-controls button,
  body.ui-neo .custom-set button{
    transition: none !important;
  }
  body.ui-neo .key.target{ animation: none !important; }
}

/* ===== Modal (ガラスの未来UI) ===== */
body.ui-neo .modal{
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
body.ui-neo .modal-card{
  border: 1px solid rgba(154,247,255,.22);
  background:
    radial-gradient(140% 160% at 20% 0%, rgba(255,255,255,.10), transparent 65%),
    linear-gradient(180deg, rgba(10,15,23,.84), rgba(6,9,14,.68));
  box-shadow: 0 30px 90px rgba(0,0,0,.65);
}

/* ===== Footer ===== */
body.ui-neo .app-footer{
  border-top: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(8,11,17,.40), rgba(8,11,17,.15));
}

/* ======================================================================
   Luxe Minimal (High Glow + White Space)
   有効化：<body class="ui-neo ui-luxe">
====================================================================== */

body.ui-neo.ui-luxe{
  /* “線”の主張を減らして、光と余白で高級感 */
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(55,243,196,.22), transparent 58%),
    radial-gradient(900px 540px at 100% 14%, rgba(154,247,255,.18), transparent 55%),
    radial-gradient(900px 520px at 42% 120%, rgba(255,77,114,.10), transparent 62%),
    linear-gradient(180deg, #03050a, #060911 55%, #04060b);
  background-attachment: fixed;
}

/* ヘッダー：余白増＋艶は残す（光量は多め） */
body.ui-neo.ui-luxe .app-header{
  padding: 18px 22px;
  background: linear-gradient(180deg, rgba(12,18,28,.88), rgba(8,11,17,.64));
  box-shadow: 0 26px 70px rgba(0,0,0,.58);
}
body.ui-neo.ui-luxe .app-header::after{
  opacity: .42; /* ui-neo より少し強く */
}
body.ui-neo.ui-luxe .toolbar{
  gap: 14px;
}

/* ツールバーボタン：ミニマル高級（ピル形状）＋発光強め */
body.ui-neo.ui-luxe .toolbar button,
body.ui-neo.ui-luxe .toolbar .ghost{
  min-height: 56px;
  padding: 0 26px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(140% 160% at 18% 10%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.28));
  box-shadow:
    0 18px 44px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10);
  letter-spacing: .06em;
}

body.ui-neo.ui-luxe .toolbar button:hover,
body.ui-neo.ui-luxe .toolbar .ghost:hover{
  border-color: rgba(154,247,255,.36);
  box-shadow:
    0 0 0 2px rgba(154,247,255,.18),
    0 0 34px rgba(154,247,255,.28),
    0 18px 44px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.10);
}

/* ★開始ボタン：一段“主役”に（光量多め） */
body.ui-neo.ui-luxe #btnStart{
  border-color: rgba(154,247,255,.60);
  box-shadow:
    0 0 0 3px rgba(154,247,255,.18),
    0 0 46px rgba(154,247,255,.34),
    0 18px 44px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.12);
}
body.ui-neo.ui-luxe #btnStart:hover{
  border-color: rgba(154,247,255,.80);
  box-shadow:
    0 0 0 3px rgba(154,247,255,.24),
    0 0 56px rgba(154,247,255,.42),
    0 18px 44px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.12);
}

/* Options：余白重視＋“開始カード”廃止に合わせて再レイアウト */
body.ui-neo.ui-luxe .options{
  gap: 16px 16px;
  padding: 18px 22px;

  /* 既存の start エリアを消し、volume を横に広げる */
  grid-template-columns:
    minmax(220px, 1.15fr)
    minmax(220px, 1.00fr)
    minmax(160px, .90fr)
    minmax(160px, .90fr)
    minmax(200px, 1.00fr)
    minmax(220px, 1.05fr);
  grid-template-areas:
    "stage  music  custom custom custom custom"
    "minutes tempo  volume volume volume volume";
}

/* 念のため：opt-start が残っていても表示しない */
body.ui-neo.ui-luxe .opt-start{ display: none; }

body.ui-neo.ui-luxe .options .opt{
  padding: 16px 16px 14px;
  border-radius: 20px;
  box-shadow: 0 14px 36px rgba(0,0,0,.24);
}
body.ui-neo.ui-luxe .options .opt::before{ display: none; }

/* 入力系：少し大きめで“高級オーディオ機器感” */
body.ui-neo.ui-luxe .options select,
body.ui-neo.ui-luxe .stepper{
  height: 48px;
}
body.ui-neo.ui-luxe .stepper button{
  width: 48px;
  height: 48px;
}
body.ui-neo.ui-luxe .btn-ghost{
  width: 48px;
  height: 48px;
}

/* レスポンシブ：start エリア無し版で上書き */
@media (max-width: 1100px){
  body.ui-neo.ui-luxe .options{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "stage stage"
      "music music"
      "custom custom"
      "minutes tempo"
      "volume volume";
  }
}
@media (max-width: 560px){
  body.ui-neo.ui-luxe .options{
    grid-template-columns: 1fr;
    grid-template-areas:
      "stage"
      "music"
      "custom"
      "minutes"
      "tempo"
      "volume";
  }
}

/* ======================================================================
   PATCH: options を 1段（横一列）に固定 + Start を緑発光へ戻す
   - 既存の ui-neo / ui-luxe を上書きするだけ（JS不要）
====================================================================== */

/* 1) OPTIONS：常に1段。狭い画面は横スクロールで維持 */
body.ui-neo.ui-luxe .options{
  /* 既存の2段 areas を上書きして1段に */
  grid-template-areas: "stage music custom minutes tempo volume";

  /* 6枚カードを横一列で成立させるため、カラム幅を明示 */
  grid-template-columns:
    minmax(240px, 1.20fr)  /* stage */
    minmax(240px, 1.05fr)  /* music */
    minmax(520px, 2.10fr)  /* custom（5枠+SET/RESETがあるので広め） */
    minmax(240px, .95fr)   /* minutes */
    minmax(240px, .95fr)   /* tempo */
    minmax(320px, 1.10fr); /* volume */

  /* 余白はラグジュアリー寄りに */
  gap: 16px;
  padding: 18px 22px;

  /* 画面が狭い場合も「折り返さず1段」を維持（横スクロール） */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* 1段固定のとき、カードが潰れすぎないよう最低幅を確保（保険） */
body.ui-neo.ui-luxe .options .opt{ min-width: 220px; }
body.ui-neo.ui-luxe .options .opt-custom{ min-width: 520px; }

/* 2) 念のため：ui-luxe に残っている「2段化メディアクエリ」を無効化（後勝ち） */
@media (max-width: 1100px){
  body.ui-neo.ui-luxe .options{
    grid-template-columns:
      240px 240px 520px 240px 240px 320px;
    grid-template-areas: "stage music custom minutes tempo volume";
  }
}
@media (max-width: 560px){
  body.ui-neo.ui-luxe .options{
    grid-template-columns:
      240px 240px 520px 240px 240px 320px;
    grid-template-areas: "stage music custom minutes tempo volume";
  }
}

/* 3) START：元の“緑に光る主役ボタン”へ戻す
      （現在は ui-luxe の #btnStart 上書きでシアン寄りになっているため） */
body.ui-neo.ui-luxe .toolbar #btnStart.primary{
  /* 緑系の面（ui-neo.primary に近い） */
  background: linear-gradient(180deg, rgba(55,243,196,.95), rgba(10,168,158,.65));
  color: #001812;

  /* 枠は消して、光（グロー）で主役感 */
  border: 0;

  /* 緑グローを強めに戻す */
  box-shadow:
    0 0 0 3px rgba(55,243,196,.20),
    0 0 58px rgba(55,243,196,.36),
    0 18px 44px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.14);
}

body.ui-neo.ui-luxe .toolbar #btnStart.primary:hover{
  box-shadow:
    0 0 0 3px rgba(55,243,196,.26),
    0 0 72px rgba(55,243,196,.44),
    0 18px 44px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.14);
}


/* ======================================================================
   PATCH v7R: 2段構成を“詰め詰め”に最適化
   - 上段：stage / music / minutes / tempo / volume(WORD)
   - 下段：custom（minutes〜volumeの下に跨がせる）
   - 余白の原因（align-items:end / 行のstretch）を根本除去
====================================================================== */

body.ui-neo.ui-luxe .options{
  display: grid !important;

  /* 5列：stage / music / time / rhythm / word */
  grid-template-columns:
    minmax(210px, 1.10fr)  /* stage */
    minmax(210px, 1.00fr)  /* music */
    minmax(150px, .70fr)   /* minutes */
    minmax(160px, .75fr)   /* tempo */
    minmax(180px, .80fr);  /* volume(WORD) */

  /* 2行：行の高さを“内容分だけ”に固定（←ここが最重要） */
  grid-template-rows: min-content min-content;
  grid-template-areas:
    "stage  music  minutes tempo  volume"
    ".      .      custom  custom custom";

  /* 行間を詰める（線で区切るので gap はゼロ寄り） */
  gap: 0;
  padding: 8px 12px;

  /* ★ 余白の根本対策：上詰め＆行の余りスペースを配らない */
  align-items: start;     /* 各セルの中で下に落ちない */
  align-content: start;   /* 2行が“上に詰まる” */
  height: auto;

  overflow: hidden;       /* 横スクロールは使わない */
}

/* grid-area を明示（確実化） */
body.ui-neo.ui-luxe .options .opt-stage   { grid-area: stage; }
body.ui-neo.ui-luxe .options .opt-music   { grid-area: music; }
body.ui-neo.ui-luxe .options .opt-minutes { grid-area: minutes; }
body.ui-neo.ui-luxe .options .opt-tempo   { grid-area: tempo; }
body.ui-neo.ui-luxe .options .opt-volume  { grid-area: volume; }
body.ui-neo.ui-luxe .options .opt-custom  { grid-area: custom; }

/* モジュールは“境界線で仕切る”＋上下を詰める */
body.ui-neo.ui-luxe .options .opt{
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;

  min-width: 0;
  padding: 8px 10px 6px;   /* ←上下を攻めて詰める */
  gap: 4px;                /* ← label と中身の間隔も詰める */

  align-self: start;       /* 念押し（下に落ちない） */
}

/* 縦セパレータ（上段） */
body.ui-neo.ui-luxe .options .opt-music,
body.ui-neo.ui-luxe .options .opt-minutes,
body.ui-neo.ui-luxe .options .opt-tempo,
body.ui-neo.ui-luxe .options .opt-volume{
  border-left: 1px solid rgba(255,255,255,.10);
}

/* 下段：custom は minutes列から始まるので、その位置に線を揃える */
body.ui-neo.ui-luxe .options .opt-custom{
  border-left: 1px solid rgba(255,255,255,.10);
  border-top:  1px solid rgba(255,255,255,.10);

  /* ★ 上下の“変な空き”を作らない */
  padding-top: 6px;        /* 12px → 6px */
  padding-bottom: 6px;
  align-self: start;
}

/* custom 内も詰める（ラベル〜5枠までの間隔） */
body.ui-neo.ui-luxe .opt-custom .custom-set{ margin-top: 4px; gap: 6px; }

/* 1280px付近：列を少し詰めても切れないように */
@media (max-width: 1280px){
  body.ui-neo.ui-luxe .options{
    grid-template-columns:
      minmax(200px, 1.05fr)
      minmax(200px, 0.95fr)
      minmax(140px, .70fr)
      minmax(150px, .75fr)
      minmax(170px, .80fr);
    padding: 8px 10px;
  }
}

/* 980px以下：2カラム（詰めたまま破綻回避） */
@media (max-width: 980px){
  body.ui-neo.ui-luxe .options{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content min-content min-content min-content;
    grid-template-areas:
      "stage  music"
      "minutes tempo"
      "volume volume"
      "custom custom";
  }

  body.ui-neo.ui-luxe .options .opt-music,
  body.ui-neo.ui-luxe .options .opt-minutes,
  body.ui-neo.ui-luxe .options .opt-tempo,
  body.ui-neo.ui-luxe .options .opt-volume,
  body.ui-neo.ui-luxe .options .opt-custom{
    border-left: 0;
  }

  body.ui-neo.ui-luxe .options .opt-minutes,
  body.ui-neo.ui-luxe .options .opt-tempo,
  body.ui-neo.ui-luxe .options .opt-volume,
  body.ui-neo.ui-luxe .options .opt-custom{
    border-top: 1px solid rgba(255,255,255,.10);
  }
}

/* 560px以下：1カラム */
@media (max-width: 560px){
  body.ui-neo.ui-luxe .options{
    grid-template-columns: 1fr;
    grid-template-rows: repeat(6, min-content);
    grid-template-areas:
      "stage"
      "music"
      "minutes"
      "tempo"
      "volume"
      "custom";
  }
}


/* ======================================================================
   PATCH v8: Compact UI @ <=1280px（文字/ボタン/余白を縮小してキーボードを見せる）
   - ヘッダーを1段維持（タイトルは省略表示、ツールバーは横スクロール可）
   - options / staff / grid / keyboard を総合的に圧縮
====================================================================== */

@media (max-width: 1280px){

  /* 全体の基準文字サイズを一段下げる（効きが大きい） */
  html{ font-size: 15px; }

  /* ===== Header: 1段固定＋省スペース ===== */
  body.ui-neo.ui-luxe .app-header{
    padding: 10px 12px;
  }
  body.ui-neo.ui-luxe .app-header h1{
    font-size: 18px;
    line-height: 1.15;
    white-space: nowrap;         /* 2行化させない */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 34vw;             /* タイトルが長いときの保険 */
  }

  /* ツールバー：折り返し禁止 → 横スクロールで逃がす（縦を絶対に増やさない） */
  body.ui-neo.ui-luxe .toolbar{
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  /* ツールバーのボタンを小型化 */
  body.ui-neo.ui-luxe .toolbar button,
  body.ui-neo.ui-luxe .toolbar .ghost{
    min-height: 44px;
    padding: 0 16px;
    border-radius: 22px;
    font-size: .92rem;
    letter-spacing: .04em;
  }

  /* ===== Options: 高さを圧縮 ===== */
  body.ui-neo.ui-luxe .options{
    padding: 6px 10px;
  }

  body.ui-neo.ui-luxe .options label{
    font-size: .70rem;
    letter-spacing: .10em;
  }

  body.ui-neo.ui-luxe .options select{
    height: 38px;
    border-radius: 12px;
    padding: 0 .65rem;
  }

  body.ui-neo.ui-luxe .btn-ghost{
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  body.ui-neo.ui-luxe .stepper{
    height: 38px;
    border-radius: 12px;
  }
  body.ui-neo.ui-luxe .stepper button{
    width: 36px;
    height: 38px;
  }
  body.ui-neo.ui-luxe .stepper input{
    font-size: .95rem;
    padding: .30rem .18rem;
  }

  /* カスタム5枠＋ボタンも小型化（下段の圧縮に効く） */
  body.ui-neo.ui-luxe .custom-set{
    margin-top: 2px;
    gap: 6px;
  }
  body.ui-neo.ui-luxe .custom-set input.char{
    width: 1.9em;
    height: 1.9em;
    font-size: .95rem;
    border-radius: 12px;
  }
  body.ui-neo.ui-luxe .custom-set button{
    padding: .30rem .60rem;
    border-radius: 18px;
    font-size: .90rem;
  }

  /* ===== Grid: “余計な縦伸び”を止める（ここがキーボード可視に超重要） ===== */
  body.ui-neo.ui-luxe .grid-outer{
    padding: 8px 10px;
    gap: 8px;

    /* これがあると空き領域が伸びて中段/下段が押し下げられがち */
    min-height: auto;

    /* デフォルトstretchで行が伸びるのを止める */
    align-content: start;
  }

  /* ===== Staff(Canvas): 画面上部の占有を少し下げる ===== */
  body.ui-neo.ui-luxe .staff-wrap{
    padding: 4px 0;
  }
  body.ui-neo.ui-luxe canvas#gameCanvas{
    /* 縦を稼ぐ：比率を横長へ（高さが下がる） */
    aspect-ratio: 3.8 / 1;
  }

  /* ===== Keyboard: キー自体を縮小して“全体を見せる” ===== */
  body.ui-neo.ui-luxe .keyboard-hint{
    font-size: .86rem;
  }
  body.ui-neo.ui-luxe .keyboard{
    padding: 12px;
    border-radius: 14px;
    row-gap: 3px;
    column-gap: 3px;
  }
  body.ui-neo.ui-luxe .keyrow{
    gap: 3px;
    min-height: 48px;
  }
  body.ui-neo.ui-luxe .key{
    min-width: 34px;
    height: 44px;
    border-radius: 12px;
    padding: 0 6px;
  }
  body.ui-neo.ui-luxe .key.wide{
    min-width: 62px;
  }
  body.ui-neo.ui-luxe .key.space{
    min-width: 220px; /* 既存の240pxよりさらに圧縮 */
  }
  body.ui-neo.ui-luxe .key .legend{
    font-size: 1.12rem; /* 1.45rem → 圧縮 */
  }

  /* ===== Ranking: 少しだけ圧縮（全体の縦を返す） ===== */
  body.ui-neo.ui-luxe .right-col{
    border-radius: 14px;
    padding: 12px;
  }
  body.ui-neo.ui-luxe .rank-list{
    max-height: 320px;
  }
}

#gameCanvas:focus,
#gameCanvas:focus-visible{
  outline: none;
}

/* ======================================================================
   Pop Sweets Theme (Overlay)
   有効化：<body class="ui-neo ui-luxe ui-pop">
   - ui-neo/ui-luxe は“レイアウト/挙動”維持のため残し、色だけを上書きします
====================================================================== */

body.ui-neo.ui-luxe.ui-pop{
  /* ---- Pop token ---- */
  --bg:       #fff6fb;
  --panel:    rgba(255,255,255,.86);
  --ink:      #2b1b22;
  --muted:    #6a5560;

  --accent:   #ff4fa3;  /* ピンク（主役） */
  --accent-2: #2dd4bf;  /* ミント（差し色） */
  --danger:   #ff3b6e;
  --ok:       #22c55e;
  --warn:     #f59e0b;

  /* ui-neo が参照する追加トークンも上書き */
  --stroke:   rgba(60,18,36,.14);
  --stroke2:  rgba(255,79,163,.22);
  --shine:    rgba(255,255,255,.72);
  --shadow:   rgba(27,10,16,.18);

  /* 背景（スプリンクル風） */
  background:
    radial-gradient(1100px 620px at 10% -10%, rgba(255,79,163,.22), transparent 58%),
    radial-gradient(900px 560px at 100% 0%, rgba(45,212,191,.20), transparent 55%),
    radial-gradient(860px 520px at 45% 110%, rgba(255,186,73,.18), transparent 60%),
    repeating-radial-gradient(circle at 20% 30%,
      rgba(255,79,163,.08) 0 2px,
      transparent 2px 28px),
    linear-gradient(180deg, #fff6fb, #fffef6 60%, #fff6fb);
  background-attachment: fixed;
}

/* フォーカスを“かわいく” */
body.ui-neo.ui-luxe.ui-pop :focus-visible{
  outline: 3px solid rgba(255,79,163,.55);
  outline-offset: 2px;
  border-radius: 14px;
}

/* ===== Header ===== */
body.ui-neo.ui-luxe.ui-pop .app-header{
  border-bottom: 1px solid rgba(255,79,163,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  box-shadow: 0 18px 42px rgba(27,10,16,.16);
  backdrop-filter: blur(10px);
}
body.ui-neo.ui-luxe.ui-pop .app-header::after{
  opacity: .60;
  background: linear-gradient(90deg, transparent, rgba(255,79,163,.80), rgba(45,212,191,.75), transparent);
}
body.ui-neo.ui-luxe.ui-pop .app-header h1{
  color: var(--ink);
  text-shadow: 0 6px 18px rgba(255,79,163,.10);
}

/* ===== Toolbar buttons ===== */
body.ui-neo.ui-luxe.ui-pop .toolbar button,
body.ui-neo.ui-luxe.ui-pop .toolbar .ghost{
  border: 1px solid rgba(255,79,163,.18);
  background:
    radial-gradient(140% 160% at 18% 10%, rgba(255,255,255,.85), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.68));
  color: var(--ink);
  box-shadow:
    0 14px 34px rgba(27,10,16,.14),
    inset 0 1px 0 rgba(255,255,255,.78);
}
body.ui-neo.ui-luxe.ui-pop .toolbar button:hover,
body.ui-neo.ui-luxe.ui-pop .toolbar .ghost:hover{
  outline: none;
  border-color: rgba(45,212,191,.38);
  box-shadow:
    0 0 0 3px rgba(45,212,191,.16),
    0 16px 42px rgba(27,10,16,.16),
    inset 0 1px 0 rgba(255,255,255,.80);
}
body.ui-neo.ui-luxe.ui-pop .toolbar button:active,
body.ui-neo.ui-luxe.ui-pop .toolbar .ghost:active{
  transform: translateY(1px);
  filter: brightness(.99);
}

/* “開始”はキャンディっぽい主役に */
body.ui-neo.ui-luxe.ui-pop .toolbar #btnStart.primary{
  border: 0;
  background: linear-gradient(135deg, rgba(255,79,163,.92), rgba(255,186,73,.86));
  color: #2a0b18;
  box-shadow:
    0 0 0 3px rgba(255,79,163,.18),
    0 0 44px rgba(255,79,163,.22),
    0 18px 44px rgba(27,10,16,.18),
    inset 0 1px 0 rgba(255,255,255,.36);
}
body.ui-neo.ui-luxe.ui-pop .toolbar #btnStart.primary:hover{
  box-shadow:
    0 0 0 3px rgba(45,212,191,.18),
    0 0 54px rgba(255,79,163,.28),
    0 18px 44px rgba(27,10,16,.18),
    inset 0 1px 0 rgba(255,255,255,.42);
}

/* ===== Options strip ===== */
body.ui-neo.ui-luxe.ui-pop .options{
  border-bottom: 1px solid rgba(255,79,163,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
}
body.ui-neo.ui-luxe.ui-pop .options .opt{
  border: 1px solid rgba(255,79,163,.14);
  background:
    radial-gradient(120% 120% at 10% 10%, rgba(255,255,255,.92), rgba(255,255,255,.70));
  box-shadow: 0 14px 36px rgba(27,10,16,.10);
}
body.ui-neo.ui-luxe.ui-pop .options label{
  color: rgba(106,85,96,.95);
}
body.ui-neo.ui-luxe.ui-pop .options select,
body.ui-neo.ui-luxe.ui-pop .stepper,
body.ui-neo.ui-luxe.ui-pop .stepper input,
body.ui-neo.ui-luxe.ui-pop .custom-set input{
  border: 1px solid rgba(255,79,163,.16);
  background: rgba(255,255,255,.92);
  color: var(--ink);
}
body.ui-neo.ui-luxe.ui-pop .options select:focus,
body.ui-neo.ui-luxe.ui-pop .stepper input:focus,
body.ui-neo.ui-luxe.ui-pop .custom-set input:focus{
  outline: 3px solid rgba(255,79,163,.22);
  outline-offset: 1px;
}

/* ===== Main panels ===== */
body.ui-neo.ui-luxe.ui-pop .staff-wrap{
  border-top: 1px solid rgba(255,79,163,.14);
  border-bottom: 1px solid rgba(255,79,163,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.64));
  box-shadow: 0 26px 70px rgba(27,10,16,.14);
}
body.ui-neo.ui-luxe.ui-pop canvas#gameCanvas{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,246,251,.72));
}

body.ui-neo.ui-luxe.ui-pop .keyboard,
body.ui-neo.ui-luxe.ui-pop .right-col{
  border: 1px solid rgba(255,79,163,.14);
  background:
    radial-gradient(140% 160% at 20% 0%, rgba(255,255,255,.92), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.62));
  box-shadow: 0 22px 56px rgba(27,10,16,.12);
  backdrop-filter: blur(10px);
}
body.ui-neo.ui-luxe.ui-pop .keyboard::before{
  opacity: .26;
  background:
    repeating-linear-gradient(0deg, rgba(255,79,163,.06) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(45,212,191,.06) 0 1px, transparent 1px 18px);
}

/* ===== Keys ===== */
@keyframes popBounce{
  0%,100%{ transform: translateY(0); filter: brightness(1.00); }
  50%    { transform: translateY(-1px); filter: brightness(1.04); }
}
body.ui-neo.ui-luxe.ui-pop .key{
  border-radius: 16px;
  border: 1px solid rgba(255,79,163,.16);
  background:
    radial-gradient(120% 140% at 18% 10%, rgba(255,255,255,.92), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.62));
  color: var(--ink);
  box-shadow:
    0 12px 26px rgba(27,10,16,.14),
    inset 0 1px 0 rgba(255,255,255,.80),
    inset 0 -12px 18px rgba(255,79,163,.06);
}
body.ui-neo.ui-luxe.ui-pop .key:hover{
  border-color: rgba(45,212,191,.38);
}
body.ui-neo.ui-luxe.ui-pop .key:active{
  transform: translateY(1px);
}

body.ui-neo.ui-luxe.ui-pop .key.target{
  border-color: rgba(255,79,163,.72);
  box-shadow:
    0 0 0 3px rgba(255,79,163,.24),
    0 0 32px rgba(255,79,163,.18),
    inset 0 1px 0 rgba(255,255,255,.80);
  animation: popBounce 1.0s ease-in-out infinite;
}
body.ui-neo.ui-luxe.ui-pop .key.hit{
  border-color: rgba(45,212,191,.78);
  box-shadow:
    0 0 0 3px rgba(45,212,191,.18),
    0 0 26px rgba(45,212,191,.12),
    inset 0 1px 0 rgba(255,255,255,.80);
}
body.ui-neo.ui-luxe.ui-pop .key.miss{
  border-color: rgba(255,59,110,.78);
  box-shadow:
    0 0 0 3px rgba(255,59,110,.16),
    0 0 26px rgba(255,59,110,.10),
    inset 0 1px 0 rgba(255,255,255,.78);
}

/* ===== Right column text/inputs ===== */
body.ui-neo.ui-luxe.ui-pop .rank-list li{ color: rgba(43,27,34,.88); }
body.ui-neo.ui-luxe.ui-pop .rank-controls input{
  border: 1px solid rgba(255,79,163,.16);
  background: rgba(255,255,255,.92);
  color: var(--ink);
}
body.ui-neo.ui-luxe.ui-pop .share button{
  border: 1px solid rgba(255,79,163,.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.68));
  color: var(--ink);
}

/* ===== Modal ===== */
body.ui-neo.ui-luxe.ui-pop .modal{
  background: rgba(255,79,163,.12);
  backdrop-filter: blur(10px);
}
body.ui-neo.ui-luxe.ui-pop .modal-card{
  border: 1px solid rgba(255,79,163,.20);
  background:
    radial-gradient(140% 160% at 20% 0%, rgba(255,255,255,.92), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.70));
  box-shadow: 0 30px 90px rgba(27,10,16,.18);
}
body.ui-neo.ui-luxe.ui-pop .result-body{
  background: rgba(255,255,255,.92);
  border: 1px dashed rgba(255,79,163,.26);
  color: rgba(43,27,34,.95);
}

/* ===== Footer ===== */
body.ui-neo.ui-luxe.ui-pop .app-footer{
  border-top: 1px solid rgba(255,79,163,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.44));
  color: rgba(106,85,96,.92);
}