.overlayPanel {
  position: fixed;
  background: rgba(8, 10, 16, 0.78);
  border: 1px solid rgba(111, 211, 255, 0.22);
  padding: 8px 10px;
  line-height: 1.55;
}
#debugPanel  { top: 10px; left: 10px; min-width: 210px; pointer-events: none; }
#audioPanel  { top: 10px; right: 10px; width: 260px; }
/* 操作説明は読む文章なので行間を広めに取る。
   常時出しておく情報ではないので、下の開閉ボタンのぶん持ち上げる。 */
#helpPanel {
  bottom: 44px; left: 10px; max-width: 74ch;
  pointer-events: none; line-height: 1.75;
}
#helpToggleButton { position: fixed; bottom: 10px; left: 10px; }
#helpToggleButton[hidden] { display: none; }
#messagePanel {
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  max-width: 46ch; padding: 14px 16px;
  border-color: rgba(255, 138, 128, 0.5); color: #ffd9d4; font-size: 12px;
}
#messagePanel[hidden] { display: none; }

/* 数値は等幅＋等幅数字。桁が変わっても幅が動かないので、毎フレーム更新
   される値でも表示が横に揺れない。 */
#debugFps, #debugCameraPosition, #debugCameraDistance, #debugAvatarPosition,
#debugAvatarGrounded, #debugRootMeanSquare, #debugBeatsPerMinute,
#debugBeatCount, #debugFlux, #timeText, .bandMeterValue,
input[type="number"] {
  font-family: var(--fontNumeric);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.debugRow { display: flex; justify-content: space-between; gap: 12px; }
.debugLabel { color: rgba(207, 214, 228, 0.55); }
/* 見出しは字間を大きく開ける。放送グラフィックでよく使われる処理で、
   小さくても見出しとして認識される。 */
.panelTitle {
  color: rgba(207, 214, 228, 0.6);
  margin: 0 0 7px; font-size: 10px; font-weight: 400;
  letter-spacing: 0.14em;
}
.sectionDivider {
  border-top: 1px solid rgba(111, 211, 255, 0.15);
  margin: 7px 0 6px;
}

/* 帯域メーター: 幅をstyle.widthで動かす。canvasを増やさずに済む */
.bandMeterRow { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.bandMeterName { width: 52px; color: rgba(207, 214, 228, 0.55); }
.bandMeterTrack {
  flex: 1; height: 7px; background: rgba(255, 255, 255, 0.07); position: relative;
}
.bandMeterFill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; }
.bandMeterValue { width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

button, label.fileButton {
  background: rgba(111, 211, 255, 0.1);
  border: 1px solid rgba(111, 211, 255, 0.22);
  color: #cfd6e4;
  /* font: inherit だと字の大きさまで本文に揃ってしまう。操作要素は本文より
     少し大きくないと、情報密度の高い画面の中で押せる場所として目立たない。 */
  font-family: inherit; font-size: 12px; letter-spacing: 0.04em;
  padding: 5px 9px; cursor: pointer;
}
button:hover, label.fileButton:hover { background: rgba(111, 211, 255, 0.2); }
button:disabled { opacity: 0.35; cursor: default; }
button:focus-visible, label.fileButton:focus-within {
  outline: 2px solid #6fd3ff; outline-offset: 1px;
}
input[type="file"] { display: none; }
.controlRow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
input[type="range"] { width: 100%; accent-color: #6fd3ff; }
input[type="number"] {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(111, 211, 255, 0.22);
  color: #cfd6e4; font-size: 12px; padding: 3px 4px; width: 62px;
}
input[type="number"]:focus-visible { outline: 2px solid #6fd3ff; outline-offset: 1px; }
select {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(111, 211, 255, 0.22);
  color: #cfd6e4; font-family: inherit; font-size: 12px;
  padding: 3px 4px;
}
select:focus-visible { outline: 2px solid #6fd3ff; outline-offset: 1px; }
.penlightColorButton {
  width: 20px; height: 20px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.penlightColorButton[data-selected="true"] {
  outline: 2px solid #ffffff; outline-offset: 1px;
}

/* 入室前の選択画面。背景は暗くするだけで、後ろで実際のアバターが回っている。 */
#lobbyBackdrop {
  position: fixed; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  background: linear-gradient(to bottom, rgba(3, 4, 8, 0) 40%, rgba(3, 4, 8, 0.9) 100%);
  padding-bottom: 6vh;
}
#lobbyBackdrop[hidden] { display: none; }
#lobbyCard {
  background: rgba(8, 10, 16, 0.9);
  border: 1px solid rgba(111, 211, 255, 0.28);
  padding: 18px 22px;
  text-align: center;
  min-width: 340px;
  /* 子要素も含めて丸ゴシックにする。ここだけ世界観が違う。 */
  font-family: var(--fontLobby);
  letter-spacing: 0.06em;
}
#lobbyTitle { margin: 0 0 14px; font-size: 15px; }
#lobbyKindRow { display: flex; gap: 8px; justify-content: center; }
.lobbyKindButton {
  min-width: 104px; padding: 9px 10px;
  font-family: var(--fontLobby); font-size: 13px; letter-spacing: 0.06em;
}
.lobbyKindButton[data-selected="true"] {
  background: rgba(111, 211, 255, 0.3);
  border-color: #6fd3ff;
}
#lobbyDescription {
  margin: 10px 0 6px; min-height: 1.5em;
  color: rgba(207, 214, 228, 0.65);
}
#lobbyEnterButton {
  margin-top: 14px; padding: 9px 26px;
  font-family: var(--fontLobby); font-size: 14px; letter-spacing: 0.1em;
}
#lobbyDescription { font-size: 12px; }
#lobbyIdHint {
  margin: 5px 0 0; font-size: 11px;
  color: rgba(207, 214, 228, 0.45);
}
#lobbyHint {
  margin: 12px 0 0; font-size: 11px; line-height: 1.7;
  color: rgba(207, 214, 228, 0.45);
}
/* 「管理者として入る」はほとんどの訪問者には不要なので、
 * 目立たないリンク然とした見た目にする（控えめな導線）。 */
#lobbyAdminLinkRow { margin: 8px 0 0; }
#lobbyAdminLinkButton {
  background: none; border: none; padding: 0;
  font-family: var(--fontLobby); font-size: 10px;
  color: rgba(207, 214, 228, 0.35);
  text-decoration: underline; cursor: pointer;
}
#lobbyAdminLinkButton:hover { color: rgba(207, 214, 228, 0.6); }
#statusText { color: rgba(207, 214, 228, 0.5); margin-top: 6px; min-height: 2.4em; }