/* ============================================================
   BMSprint - 1:1 spec layout
   基準解像度: 1920 × 919 (base-window)
   x座標は /1920、y座標は /919 を100%に換算
   ============================================================ */

:root {
  --hi-speed: 1.0;
  --note-scroll-duration: 0.1s;
  /* 譜面オフセット: hi-speed 1.0 で 1ノート間 = 64.25px (= (716-202)/8)  */
  /* lane-base-3 高さ 723px に対して 8.886% */
  --note-base-offset-pct: 8.886;
  --color-scratch: #be0707;
  --color-white: #e1e1e1;
  --color-blue: #1107be;
  --color-judgment: #db0000;
  --note-stop-offset-px: -12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Kosugi Maru", sans-serif;
}

body {
  background-color: #001b33;
  color: #c8d4e0;
  font-size: clamp(11px, 1.1vw, 20px);
}

/* ============================================================
   base-window: ブラウザの実質描画区域 = 100vw × 100vh
   ============================================================ */
#base-window {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #001b33;
  overflow: hidden;
}

/* ============================================================
   セパレータ (中央用 1px 黒線)
   ============================================================ */
#left-separate {
  position: absolute;
  left: 28.125%;  /* 540/1920 */
  top: 0;
  width: 0.05208%; /* 1/1920 */
  height: 100%;
  background-color: #000000;
  z-index: 10;
}
#right-separate {
  position: absolute;
  left: 71.823%; /* 1379/1920 */
  top: 0;
  width: 0.05208%;
  height: 100%;
  background-color: #000000;
  z-index: 10;
}

/* ============================================================
   ロゴ: (797, 29) 314×91, bg=#000, "BMSprint" テキスト
   ============================================================ */
#logo {
  position: absolute;
  left: 41.510%;  /* 797/1920 */
  top: 3.156%;    /* 29/919 */
  width: 16.354%; /* 314/1920 */
  height: 9.902%; /* 91/919 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "WDXL Lubrifont JP N", sans-serif;
  font-size: clamp(2.0em, 3.2vw, 3.8em);
  letter-spacing: 0.02em;
  z-index: 5;
}
.logo-bms {
  color: #f84828;
  text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 4px 4px 0 #000;
}
.logo-print {
  color: #68c0c0;
  text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 4px 4px 0 #000;
  margin-left: -0.04em;
}

/* ============================================================
   SP ベース (左右)
   ============================================================ */
.sp-base {
  position: absolute;
  top: 0;
  width: 28.125%; /* 540/1920 */
  height: 100%;
  background-color: #002233;
}
#sp-left-base { left: 0; }
#sp-right-base { left: 71.875%; /* 1380/1920 */ }

/* ============================================================
   レーン3層ボーダー
   lane-base-1: (71,0) 440×727 #000
   lane-base-2: (73,0) 436×725 #fff  -> 内側 2px の白い枠
   lane-base-3: (75,0) 432×723 #535353 -> 灰の本体
   ============================================================ */
.lane-base-1 {
  position: absolute;
  top: 0;
  width: 81.481%;  /* 440/540 */
  height: 79.108%; /* 727/919 */
  background-color: #000000;
}
#sp-left-base .lane-base-1 { left: 13.148%; /* 71/540 */ }
/* 右側はミラー */
#sp-right-base .lane-base-1 { right: 13.148%; }

.lane-base-2 {
  position: absolute;
  left: 0.4545%;  /* 2/440 */
  top: 0;
  width: 99.091%; /* 436/440 */
  height: 99.725%; /* 725/727 */
  background-color: #ffffff;
}
/* 右側のミラー (lane-base-2 は親 lane-base-1 が既にミラー済みなのでそのまま) */
#sp-right-base .lane-base-2 {
  left: auto;
  right: 0.4545%;
}

.lane-base-3 {
  position: absolute;
  left: 0.4587%;  /* 2/436 */
  top: 0;
  width: 99.083%; /* 432/436 */
  height: 99.724%; /* 723/725 */
  background-color: #535353;
  overflow: hidden;
}
#sp-right-base .lane-base-3 {
  left: auto;
  right: 0.4587%;
}

/* ============================================================
   ノートベース (8レーンのカラー帯)
   ============================================================ */
.notebases {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.notebase {
  position: absolute;
  top: 0;
  height: 100%;
}

/* ============================================================
   ノーツコンテナ (スクロール)
   ============================================================ */
.notes-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}
.notes-display {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* ============================================================
   判定ライン: (75, 716) 432×7, #db0000
   lane-base-3 内では top=716/723=99.031%, h=7/723=0.968%
   ============================================================ */
.judgment-line {
  position: absolute;
  left: 0;
  width: 100%;
  top: 99.031%;
  height: 0.968%;
  background-color: var(--color-judgment);
  z-index: 5;
  pointer-events: none;
}

/* ============================================================
   ノーツ (動的に生成)
   高さ 12/723=1.659% (lane-base-3 内)
   left/width はレーンごとに JS が設定
   ============================================================ */
.note {
  position: absolute;
  height: 1.659%;
}
.note.hit { visibility: hidden; }
.note.missed { opacity: 0.35; filter: grayscale(1); }

/* 小節線: 2px (= 2/723=0.277%) */
.bar-line-note {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.277%;
  background-color: #7f7f7f;
  pointer-events: none;
}

/* ============================================================
   タイマーゲージ
   gage-1: (46,54) 14×636  #4a4a4c
   gage-2: (48,56) 10×632  #010103 -> gage-1 内で (2,2,10,632)
   timer: (51,Y) 4×12     #e7bf5d -> gage-2 内で (3,Y-56,4,12)
   ============================================================ */
.timer-gage-1 {
  position: absolute;
  top: 5.876%;     /* 54/919 */
  width: 2.593%;   /* 14/540 */
  height: 69.205%; /* 636/919 */
  background-color: #4a4a4c;
}
#sp-left-base .timer-gage-1 { left: 8.519%; /* 46/540 */ }
#sp-right-base .timer-gage-1 { right: 8.519%; }

.timer-gage-2 {
  position: absolute;
  left: 14.286%;   /* 2/14 */
  top: 0.314%;     /* 2/636 */
  width: 71.429%;  /* 10/14 */
  height: 99.371%; /* 632/636 */
  background-color: #010103;
}

.timer-current {
  position: absolute;
  left: 30%;       /* 3/10 */
  top: 0%;         /* 動的に変更 (0%〜98.101%) */
  width: 40%;      /* 4/10 */
  height: 1.899%;  /* 12/632 */
  background-color: #e7bf5d;
  transition: top 0.1s linear;
}

/* ============================================================
   キーインジケータ (動的に配置されるベース + 内側)
   ============================================================ */
.keys-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* スクラッチ (円形): (34,740) 112×112 #414141 */
.key-scratch {
  position: absolute;
  top: 80.522%;    /* 740/919 */
  width: 20.741%;  /* 112/540 */
  height: 12.187%; /* 112/919 */
  background-color: #414141;
  border-radius: 50%;
  transition: background-color 0.08s;
}
#sp-left-base .key-scratch { left: 6.296%; /* 34/540 */ }
#sp-right-base .key-scratch { right: 6.296%; }

.key-scratch.pressed {
  background-color: #c04e30;
}

/* キーベース (黒枠) + 内側のキー */
.key-base {
  position: absolute;
  background-color: #000000;
}
.key-inner {
  position: absolute;
  background-color: #e1e1e1;
  transition: background-color 0.08s;
}
.key-inner.pressed {
  background-color: #c04e30;
}

/* white タイプ (1,3,5,7) のキーベース: 44×73, 内側 (3,2) 38×69 */
.key-base.white { width: 8.148%; height: 7.943%; top: 80.196%; }
.key-base.white .key-inner {
  left: 6.818%;  /* 3/44 */
  top: 2.740%;   /* 2/73 */
  width: 86.364%; /* 38/44 */
  height: 94.521%; /* 69/73 */
}

/* blue タイプ (2,4,6) のキーベース: 36×62, 内側 (3,2) 30×58 */
.key-base.blue { width: 6.667%; height: 6.746%; top: 79.434%; }
.key-base.blue .key-inner {
  left: 8.333%;  /* 3/36 */
  top: 3.226%;   /* 2/62 */
  width: 83.333%; /* 30/36 */
  height: 93.548%; /* 58/62 */
}

/* 左サイドの個別 left% (各キーベース) */
#sp-left-base .key-base[data-key="1"] { left: 31.667%; } /* 171/540 */
#sp-left-base .key-base[data-key="2"] { left: 41.296%; } /* 223/540 */
#sp-left-base .key-base[data-key="3"] { left: 49.444%; } /* 267/540 */
#sp-left-base .key-base[data-key="4"] { left: 59.074%; } /* 319/540 */
#sp-left-base .key-base[data-key="5"] { left: 67.222%; } /* 363/540 */
#sp-left-base .key-base[data-key="6"] { left: 76.852%; } /* 415/540 */
#sp-left-base .key-base[data-key="7"] { left: 85.000%; } /* 459/540 */

/* 右サイドはミラー (right: で指定) */
#sp-right-base .key-base[data-key="1"] { right: 85.000%; }
#sp-right-base .key-base[data-key="2"] { right: 76.852%; }
#sp-right-base .key-base[data-key="3"] { right: 67.222%; }
#sp-right-base .key-base[data-key="4"] { right: 59.074%; }
#sp-right-base .key-base[data-key="5"] { right: 49.444%; }
#sp-right-base .key-base[data-key="6"] { right: 41.296%; }
#sp-right-base .key-base[data-key="7"] { right: 31.667%; }

/* ============================================================
   中央 UI (logo の下: stats, controls, start button, result)
   center area = x:541 to x:1378 (838 wide)
   ============================================================ */
#center-ui {
  position: absolute;
  left: 28.177%;  /* 541/1920 */
  top: 14.0%;     /* logo (29+91 = 120) の下から */
  width: 43.646%; /* 838/1920 */
  height: 86%;
  padding: 1vh 1.2vw;
  display: flex;
  flex-direction: column;
  gap: 1vh;
  overflow: hidden;
  box-sizing: border-box;
}

.center-stats, .center-controls {
  display: flex;
  gap: 0.8vw;
}

.stat-box, .ctrl-box {
  flex: 1 1 0;
  background-color: rgba(10, 20, 30, 0.6);
  border: 1px solid #345;
  border-radius: 6px;
  padding: 0.4vh 0.5vw;
  text-align: center;
  min-width: 0;
}

.stat-label, .ctrl-label {
  display: block;
  font-family: "WDXL Lubrifont JP N", sans-serif;
  font-size: 0.85em;
  color: #9ab;
  margin-bottom: 2px;
}
.stat-value, .ctrl-value {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  color: #f0f0f0;
  line-height: 1.1;
}

.speed-control {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 0.3vw;
}
.speed-control button {
  background: #4a4e69;
  border: none;
  color: white;
  font-family: "Kosugi Maru", sans-serif;
  font-size: 1em;
  font-weight: bold;
  border-radius: 50%;
  width: 1.4vw;
  height: 1.4vw;
  min-width: 22px;
  min-height: 22px;
  cursor: pointer;
}
.speed-control button:hover { background: #6a6e89; }

.setting-input {
  background-color: #0d0d1a;
  border: 1px solid #345;
  border-radius: 4px;
  color: #f0f0f0;
  font-family: "Kosugi Maru", sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
  width: 100%;
  padding: 2px 0;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 3vw;
  height: 1.6vw;
  min-width: 44px;
  min-height: 24px;
  margin-top: 4px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background-color: #444;
  border-radius: 999px;
  cursor: pointer;
  transition: 0.2s;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  top: 4px;
  left: 4px;
  background-color: #f0f0f0;
  border-radius: 50%;
  transition: 0.2s;
}
.toggle-switch input:checked + .toggle-slider { background-color: #f84828; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(100%); }

.mode-selector { display: flex; justify-content: center; gap: 0.2vw; margin-top: 4px; }
.mode-btn {
  background: #333; border: 1px solid #555; color: #ccc;
  font-family: "Kosugi Maru", sans-serif;
  font-size: 0.9em; font-weight: bold;
  padding: 3px 8px; border-radius: 4px; cursor: pointer;
}
.mode-btn.active { background: #f84828; border-color: #fff; color: #fff; }
.mode-btn.disabled { opacity: 0.4; cursor: not-allowed; }

.center-start {
  display: flex;
  justify-content: center;
  margin: 0.5vh 0;
}
#start-button {
  background: linear-gradient(to bottom, #f85838, #f04020);
  color: white;
  font-size: 1.3em;
  font-weight: bold;
  font-family: "WDXL Lubrifont JP N", sans-serif;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
  padding: 0.8vh 2.5vw;
  border: none;
  border-radius: 8px;
  border-bottom: 4px solid #c03010;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  cursor: pointer;
  white-space: nowrap;
}
#start-button:hover { background: linear-gradient(to bottom, #fa6848, #f25030); }
#start-button:active {
  background: #d03010;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#start-button:disabled {
  background: #555; border-bottom-color: #444; color: #999;
  cursor: not-allowed; box-shadow: none; text-shadow: none;
}

#progress-container {
  width: 100%;
  height: 1.5vh;
  background-color: #0a1a2a;
  border: 1px solid #345;
  border-radius: 20px;
  padding: 2px;
  flex-shrink: 0;
}
#progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(to right, #ffc107, #f84828);
  border-radius: 15px;
  transition: width 0.2s ease-out;
}

#countdown {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  font-size: clamp(4em, 9vw, 9em);
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 20px rgba(255,255,255,0.7), 0 0 40px rgba(0,0,0,0.5);
  z-index: 1000;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
  opacity: 1;
}
.hidden#countdown { opacity: 0; }

/* ============================================================
   リザルト / ランキング (中央UI下部)
   ============================================================ */
#bottom-wrapper {
  display: flex;
  flex-direction: row;
  gap: 1vw;
  margin-top: 1vh;
  flex: 1 1 auto;
  overflow: hidden;
}
#result-display, #ranking-display {
  background: rgba(10, 20, 30, 0.85);
  color: #f0f0f0;
  border-radius: 8px;
  padding: 0.8vh 1vw;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  flex: 1 1 0;
  min-width: 0;
}
#result-display { border: 2px solid #68c0c0; }
#ranking-display { border: 1px solid #345; position: relative; }
#result-display h2, #ranking-display h2 {
  font-family: "WDXL Lubrifont JP N", sans-serif;
  font-size: 1.4em;
  margin: 0 0 0.5vh 0;
}
#result-display h2 { color: #f84828; }
#result-display p {
  font-size: 0.95em;
  margin: 0.3vh 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #345;
  padding-bottom: 0.2vh;
}
#result-display .final-score-p {
  font-size: 1.3em; font-weight: bold; color: #ffc107;
}
.score-label-tooltip { text-decoration: underline dashed; cursor: help; }
.result-actions { display: flex; justify-content: flex-end; margin-top: 0.5vh; }
.result-actions button {
  background: #1da1f2; color: white;
  font-family: "Kosugi Maru", sans-serif;
  padding: 0.3vh 0.7vw; border: none; border-radius: 16px; cursor: pointer;
}
.result-actions button:hover { background: #0d8ddf; }

#ranking-info.hidden { display: none; }
#ranking-info { font-size: 0.78em; color: #9ab; }
#ranking-list { list-style: none; padding: 0; margin: 0; }
#ranking-list li {
  display: flex; align-items: baseline;
  font-size: 0.9em; padding: 0.25vh 0.3vw;
  border-bottom: 1px solid #234;
}
.rank { flex-basis: 15%; text-align: left; }
.score { flex-basis: 50%; text-align: right; font-weight: bold; }
.miss { flex-basis: 35%; text-align: right; font-size: 0.8em; color: #9ab; }
#ranking-list li:last-child { border-bottom: none; }
.new-record { color: #ffc107; font-weight: bold; }

#reset-ranking-btn {
  position: absolute; top: 0.5vh; right: 0.4vw;
  width: 2vw; height: 2vw; min-width: 28px; min-height: 28px;
  background: #0a1a2a; border: 1px solid #345; border-radius: 50%;
  color: #9ab; font-size: 0.9em;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: color 0.2s, transform 0.2s;
}
#reset-ranking-btn:hover { color: #ffc107; transform: rotate(-90deg); }

/* ============================================================
   設定トグルボタン (右上)
   ============================================================ */
.toggle-btn {
  position: absolute;
  top: 1vh;
  width: 2.2vw; height: 2.2vw; min-width: 32px; min-height: 32px;
  background: #0a1a2a; border: 1px solid #345; border-radius: 50%;
  color: #9ab; font-family: "Kosugi Maru", sans-serif;
  font-size: 0.95em;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s;
  z-index: 1500;
}
.toggle-btn:hover { background: #345; color: white; }
.settings-toggle-btn { right: 28.5vw; }
.advanced-settings-toggle-btn { right: 31.3vw; }
.help-toggle-btn { right: 34.1vw; }
.repo-toggle-btn { right: 36.9vw; }

/* ============================================================
   オーバーレイ設定パネル
   ============================================================ */
.overlay-panel {
  display: none;
  position: absolute;
  top: 6vh; right: 28.5vw;
  width: 42vw; max-width: 42vw;
  max-height: 90vh;
  background: #0a1a2a;
  color: #f0f0f0;
  border: 2px solid #68c0c0;
  border-radius: 12px;
  padding: 1.5vh 1.8vw;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  z-index: 2000;
  overflow-y: auto;
}
.overlay-panel h3 {
  font-family: "WDXL Lubrifont JP N", sans-serif;
  font-size: 1.5em;
  margin: 0 0 1vh 0;
  text-align: center;
}
#advanced-settings-panel h3 { color: #ffc107; }
.setting-divider { border: none; border-top: 1px solid #345; margin: 1.2vh 0; }

.setting-item {
  display: flex; flex-direction: column;
  margin-bottom: 0.8vh; gap: 4px;
}
.setting-item label {
  font-size: 1em;
  display: flex; justify-content: space-between; align-items: center;
}
.setting-description { font-size: 0.75em; color: #9ab; margin: 3px 0 0 0; text-align: left; }
.label-text-group { display: flex; align-items: baseline; }
.sound-status { font-size: 0.7em; color: #ffc107; margin-left: 6px; }
.reset-single-sound-btn {
  background: #555; color: white; border: none; border-radius: 50%;
  width: 22px; height: 22px; font-size: 14px; line-height: 22px;
  cursor: pointer; padding: 0; flex-shrink: 0;
}
.reset-single-sound-btn:hover { background: #f84828; }
.sound-file-input { font-family: "Kosugi Maru", sans-serif; font-size: 0.85em; }

.volume-control { display: flex; align-items: center; gap: 8px; }
#volume-slider, #animation-speed-slider { flex-grow: 1; }
#volume-display, #animation-speed-display {
  font-size: 0.95em; font-weight: bold; min-width: 34px; text-align: right;
}

.setting-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 1vh; }
.setting-actions button {
  background: #4a4e69; border: none; color: white;
  font-family: "Kosugi Maru", sans-serif;
  padding: 0.5vh 0.9vw; border-radius: 4px; cursor: pointer;
}
.setting-actions button:hover { background: #6a6e89; }

.key-config-tabs { display: flex; justify-content: center; gap: 5px; margin-bottom: 0.8vh; }
.key-tab-btn {
  background: #333; border: 1px solid #555; color: #ccc;
  font-family: "Kosugi Maru", sans-serif; font-weight: bold;
  padding: 3px 14px; border-radius: 4px; cursor: pointer;
}
.key-tab-btn.active { background: #f84828; border-color: #fff; color: #fff; }

.key-config-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6vh 0.6vw;
}
.key-config-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.key-config-item label { font-size: 0.82em; color: #9ab; }
.key-config-btn {
  background: #333; border: 2px solid #666; color: white;
  font-family: monospace; font-size: 1em; font-weight: bold;
  width: 100%; padding: 5px 0; border-radius: 5px; cursor: pointer;
}
.key-config-btn:hover { background: #444; }

.key-guide { list-style: none; padding: 0; text-align: left; }
.key-guide li { margin: 5px 0; }
.key-icon {
  display: inline-block; padding: 2px 7px;
  border: 1px solid #999; border-radius: 3px;
  background: #333; font-family: monospace;
  margin: 0 4px;
}
.key-guide-divider { border: none; border-top: 1px solid #345; margin: 8px 0; }

.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}
#bottom-wrapper.hidden { display: none; }
.key-config-section.hidden { display: none; }

.page-footer {
  position: absolute;
  bottom: 0.1vh;
  left: 28.177%;
  width: 43.646%;
  font-size: 0.55em;
  color: #557;
  text-align: center;
  pointer-events: none;
  z-index: 1;
}
.page-footer a { color: #88a; text-decoration: none; pointer-events: auto; }
.page-footer a:hover { text-decoration: underline; }