/* 見出し用の極太フォント（Noto Sans JP Black、英数字だけに絞ったもの。SIL OFL 1.1、fonts/OFL.txt）。外部には接続しない */
@font-face { font-family: "Dummy13 Display"; src: url("fonts/NotoSansJP-Black-latin.woff2") format("woff2"); font-weight: 900; font-display: swap; }

/* 色はここで決める（OS の設定に関係なく常に暗い画面、差し色はくすんだライム。光る効果・大きな角丸・影は使わない）。label.html（点付けツール）も同じ変数を使う */
:root {
  --bg: #0d0f14; --bg2: #141821; --fg: #e9edf3; --muted: #8a93a3; --card: #161b24; --card2: #1c222d;
  --line: #262d3a; --accent: #b4d64a; --accent2: #d4ea94;
  --left: #35c8ff; --right: #ff4fd8; --center: #f4f6fa; --good: #39d98a; --low: #ffb020;
  --radius: 4px;
  color-scheme: dark;  /* スクロールバーや入力欄も暗くする */
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  background: var(--bg);
}
header, .controls, main, footer { max-width: 1440px; margin: 0 auto; padding: 12px 20px; }
button, select, input { font: inherit; }
a { color: inherit; }

/* ---- ヘッダー ---- */
header { padding-top: 20px; }
header.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
/* ロゴ：立方体のアイコン（favicon.svg と同じ） */
.logo { width: 56px; height: 56px; flex: none; display: block; }
/* タイトル：差し色の DUMMY13 と白の VRM VIEWER を同じ大きさで横に並べる */
h1 { margin: 0; font-family: "Dummy13 Display", system-ui, sans-serif; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .35em; line-height: 1.05;
  font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 900; letter-spacing: .02em; text-transform: uppercase; }
h1 .kicker { color: var(--accent); }
h1 .main { color: var(--fg); }
.sub { margin: 8px 0 0; color: var(--muted); font-size: .8rem; letter-spacing: .02em; }

/* 言語の切り替え（ヘッダーの右、JP / EN） */
.lang { display: inline-flex; margin-left: auto; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; font-size: .78rem; }
.lang button { padding: 5px 10px; border: none; background: var(--card2); color: var(--muted); cursor: pointer; font: inherit; font-weight: 700; letter-spacing: .04em; }
.lang button + button { border-left: 1px solid var(--line); }
.lang button[aria-pressed="true"] { background: var(--accent); color: #0d0f14; }
.lang button:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }

/* カメラの枠の見出しの右に出す、速度と検出（app.js が .chip を入れる）。飾らずに文字だけ */
.status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; margin-left: auto; min-width: 0; color: var(--muted); font-size: .78rem; }
.chip { white-space: nowrap; }
.chip b { margin-left: 4px; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; display: inline-block; text-align: right; }
.chip.fps b { min-width: 5.2em; }  /* 120.0 fps まで、数字が変わっても幅が動かない */
.chip.det b { min-width: 2.8em; }  /* 100% まで */

/* ---- 操作バー ---- */
.controls { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; font-size: .88rem; }
.controls .group { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 8px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.field { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
select { padding: 6px 28px 6px 10px; border-radius: 3px; border: 1px solid var(--line); color: var(--fg);
  background: var(--card2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a93a3'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none; max-width: 100%; }
.btn, .controls button, .primary { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 3px;
  border: 1px solid var(--line); background: var(--card2); color: var(--fg); cursor: pointer; transition: .15s; white-space: nowrap; }
.btn:hover, .controls button:hover { border-color: var(--accent); }
.primary, .controls button.primary { border: none; color: var(--bg); font-weight: 700;
  background: var(--accent); }
.primary:hover { background: var(--accent2); }
.file input { display: none; }
.btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.file[hidden] { display: none; }

/* スライダー */
input[type="range"] { accent-color: var(--accent); width: 120px; }
#confVal { color: var(--fg); font-variant-numeric: tabular-nums; min-width: 2.6em; }

/* スイッチ（checkbox を見た目だけ差し替え） */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; color: var(--fg); }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch i { position: relative; width: 34px; height: 20px; border-radius: 3px; background: var(--line); transition: .2s; flex: none; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 2px;
  background: #fff; transition: .2s; }
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { transform: translateX(14px); }
.switch input:focus-visible + i { outline: 2px solid var(--accent2); outline-offset: 2px; }

/* ---- メイン ---- */
main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 230px; gap: 16px; align-items: stretch; }
main aside { align-self: start; }  /* カメラとアバターの枠は同じ高さにそろえ、関節の角度は中身の高さのまま */
@media (max-width: 1150px) { main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } main aside { grid-column: 1 / -1; } }
@media (max-width: 760px) { main { grid-template-columns: 1fr; } header, .controls, main, footer { padding-left: 16px; padding-right: 16px; } }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-width: 0; }
.panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 8px; margin-bottom: 10px; border-bottom: 1px solid var(--line); font-size: .78rem; }
.tag { font-weight: 700; font-size: .85rem; color: var(--fg); }
.hint { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* カメラ画像の下の、点の色の説明 */
.legend-pts { margin: 8px 4px 0; color: var(--muted); font-size: .78rem; }
.c-l { color: var(--left); } .c-r { color: var(--right); } .c-c { color: var(--fg); }

.view { position: relative; background: #000; border-radius: 2px; overflow: hidden; }
/* カメラの枠はアバターの表示と同じ 4:3。映像の縦横比が違うときは上下（または左右）に黒い余白を付けて収める */
.camera-view { aspect-ratio: 4 / 3; container-type: size; background: #12161e; display: flex; align-items: center; justify-content: center; }
.stage { position: relative; }
.stage #canvas { width: min(100cqw, calc(100cqh * var(--ar, 1.3333))); height: auto; }
/* 枠（cqw/cqh）に収まる一番大きい大きさにする。--ar は映像の横÷縦（app.js が入れる）。小さい解像度のカメラも枠いっぱいに広げる */
canvas { display: block; width: 100%; height: auto; }
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(8, 10, 14, .72); backdrop-filter: blur(3px); font-size: .95rem; text-align: center; padding: 16px; }
.overlay[hidden] { display: none; }
.overlay3d { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.overlay3d[hidden] { display: none; }
.overlay3d.mirror { transform: scaleX(-1); }

/* アバター：単色の背景 */
.avatar-view { background: #12161e; }
/* 「背景を明るく」をオンにしたとき（avatar.js が付ける。撮影用ページでは body に付く） */
.light-bg { background: #e3e7ed !important; }
#avatar { width: 100%; aspect-ratio: 4 / 3; height: auto; cursor: grab; }
#avatar:active { cursor: grabbing; }
.panel-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 4px 2px; font-size: .85rem; }
.note { margin: 6px 4px 2px; color: var(--muted); font-size: .75rem; }

/* 関節の角度 */
aside { font-size: .85rem; }
table { width: 100%; border-collapse: collapse; }
caption { text-align: left; font-weight: 600; margin-bottom: 4px; }
td { padding: 6px 2px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
td:first-child { white-space: nowrap; padding-right: 8px; }  /* 英語の関節名（Right shoulder など）を折り返さない */
td:nth-child(2) { width: 46%; }
td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; width: 3.2em; }
.meter { height: 6px; border-radius: 0; background: var(--line); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .15s; }
.meter.l i { background: var(--left); }
.meter.r i { background: var(--right); }
.legend { color: var(--muted); font-size: .78rem; margin: 10px 2px 0; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; margin: 0 4px 0 8px; }
.dot:first-child { margin-left: 0; }
.dot.good { background: var(--bg); border: 2px solid var(--fg); } .dot.low { border: 2px dashed var(--low); }

footer { color: var(--muted); font-size: .78rem; line-height: 1.7; padding-top: 18px; padding-bottom: 28px; }
footer .privacy { margin: 0 0 6px; }