/* 太い白枠＋角のカギ括弧、青紫の半透明パネル、
   オレンジ→黄→薄紫のゲージ、数字は水色で黒縁。角丸は使わない。 */
:root {
  --bg: #10131c; --panel: #1b2a8a; --line: rgba(255,255,255,.5); --fg: #eef1ff; --muted: #93a7d8;
  --green: #5dfb5d;              /* 読み値・枠。当時の緑のワイヤー */
  --cyan: #7fdfff;               /* 数字 */
  --yellow: #ffe14d;             /* 名前・選択中 */
  --orange: #ff5a1f;             /* シャッターだけ */
  --accent: var(--cyan); --accent2: var(--yellow); --ink: #0b0d16;
  --danger: #ff7a7a;
  --ok: var(--green);
  --r: 0px;                      /* 角丸なし＝当時のHUD */
  --pop: 0 0 0 2px #000, 0 4px 0 rgba(0,0,0,.6);
  /* パネル: 青の板。ぼかしは使わない（ドット絵の平面感を残す） */
  --glass-bg: none;
  --glass-tint: rgba(20,32,120,.86);
  --glass-edge: 2px solid #8fa8ff;
  --glass-in: inset 0 0 0 2px #0b1030;
  --gauge: linear-gradient(90deg, #ff5a1f, #ff9d1f 30%, #ffe14d 55%, #fffbe0 80%, #cbb8ff);
  /* 見出し・記号はドット、日本語もドット。無ければ monospace に落ちる */
  --pixel: 'Press Start 2P', 'DotGothic16', ui-monospace, monospace;
  --dot: 'DotGothic16', ui-monospace, monospace;
}
/* ゲージ: 白枠の中にオレンジ→黄→薄紫 */
.gauge { width: 64px; height: 9px; border: 2px solid #fff; background: rgba(0,0,0,.55);
  cursor: ew-resize; touch-action: none; }   /* 掴んで動かせる（main.js の dragGauge） */
.gauge:hover { border-color: var(--yellow); }
.gauge > i { display: block; height: 100%; background: var(--gauge); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--fg);
  font: 13px/1.6 var(--dot); }
#view { position: fixed; inset: 0; display: block; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
button { font: inherit; color: var(--fg);
  background: rgba(12,20,70,.85);
  border: 2px solid #8fa8ff; border-radius: 0; padding: 4px 10px; cursor: pointer;
  box-shadow: 0 0 0 2px #000; transition: none; }
button:hover:not(:disabled) { border-color: var(--yellow); color: var(--yellow); }
button:active:not(:disabled) { background: var(--yellow); color: var(--ink); }
button:disabled { opacity: .35; cursor: default; }
button.danger { color: var(--danger); }
button.link { background: none; border: none; color: var(--accent); text-decoration: underline;
  padding: 0; box-shadow: none; }
input, select { font: inherit; background: #000; color: var(--green);
  border: 2px solid #4a63c8; border-radius: 0; padding: 3px 7px;
  font-variant-numeric: tabular-nums; }
input:focus, select:focus { outline: none; border-color: var(--yellow); color: var(--yellow); }
input[type=range] { padding: 0; }
input, select { accent-color: var(--muted); }   /* スライダー・チェックの色も無彩色に */

/* ---- 画面下の隅に寄せた HUD（左下=カメラ設定 / 右下=それ以外）----
   上のバーは廃止。構えている間(body.locked)は全部消して、画に何も乗せない。 */
.hud { position: fixed; bottom: 10px; z-index: 30; display: flex; gap: 5px;
  transition: opacity .2s, bottom .2s; }
/* 枠の「外」に貼る HUD。枠を基準にしたいので #vf-frame の子だが、上下は枠の外へ逃がす。
   #vf は pointer-events:none なので、触れるのはこの3つだけに戻す */
.vf-out { position: absolute; bottom: auto; pointer-events: auto; }
#hud-left { left: 0; bottom: 100%; margin-bottom: 8px; }        /* 枠の上・左 */
#vf-dof { right: 0; bottom: 100%; margin-bottom: 8px; }         /* 枠の上・右 */
/* 枠の下・右: FORMAT と NEAR/FAR の3つ。横に並べると長いので、ゲージと余白を詰める */
#vf-clip { right: 0; top: 100%; margin-top: 8px; gap: 12px; }
#vf-clip .ctl { gap: 5px; }
#vf-clip .gauge { width: 44px; }
#vf-clip .ctl input[type=number] { width: 40px; font-size: 13px; }
#vf-bottom { left: 0; top: 100%; margin-top: 8px; align-items: center; }   /* 枠の下・左 */
#vf-dof .tag, #vf-clip .tag { font: 9px/1 var(--pixel); color: #fff; letter-spacing: .06em; }
#hud-left .tag { font: 9px/1 var(--pixel); color: #fff; letter-spacing: .06em; }
#hud-left .readout { display: flex; align-items: center; gap: 7px;
  font: 12px/1.2 var(--pixel); color: var(--green); text-shadow: 0 2px 0 #000; }
#hud-left .readout select { background: none; border: none; color: var(--green); padding: 0;
  font: 12px/1.2 var(--pixel); }
#hud-left .readout .tag { color: var(--green); }
/* 左上: カメラの引き（配置モードだけ）。グラデーションのバーを摘んで4段を選ぶ
   配置モードでは #hud-left が消えるので、その位置をそのまま使う */
#dist-bar { position: fixed; left: 10px; top: 10px; z-index: 30; display: none;
  align-items: center; gap: 7px; padding: 5px 10px; background: rgba(0,0,0,.8);
  border: 3px solid #fff; color: #fff; font: 11px/1.6 var(--pixel); }
body.place #dist-bar { display: inline-flex; }
#dist-bar .tag { color: var(--orange); }
#dist-bar .gauge { width: 120px; height: 12px; cursor: ew-resize;
  background: linear-gradient(to right, var(--yellow), var(--orange), var(--panel)); }
/* 今の段を白い縦線で示す（塗りつぶしだとグラデーションが隠れる） */
#dist-bar .gauge > i { width: 4px; height: 100%; background: #fff; box-shadow: 0 0 0 2px #000;
  margin-left: 0; transition: margin-left .12s; }
/* 選んだモデルのそばに出るメニュー。位置は main.js が毎フレーム合わせる */
#obj-menu { position: fixed; left: 0; top: 0; z-index: 28; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; gap: 4px; padding: 6px; background: rgba(0,0,0,.82);
  border: 3px solid #fff; box-shadow: 0 0 0 2px #000; color: #fff; font: 10px/1.6 var(--pixel); }
#obj-menu.hidden { display: none; }
#om-name { color: var(--yellow); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#obj-menu .om-row { display: flex; gap: 4px; }
#obj-menu .om-row.hidden, #obj-menu button.hidden { display: none; }
#obj-menu button { font: 10px/1.6 var(--pixel); padding: 5px 7px; border: 2px solid #fff;
  background: var(--glass-tint); color: #fff; cursor: pointer; white-space: nowrap; }
#obj-menu button:hover { background: var(--panel); }
#obj-menu button.active, #obj-menu button.on { background: var(--orange); }
/* エモート／キャラの一覧。数が増えるので縦に積む */
#obj-menu .om-pop { display: flex; flex-direction: column; gap: 3px; max-height: 40vh; overflow-y: auto; }
#obj-menu .om-pop.hidden { display: none; }
/* 動きの一覧はプルダウン1つ+シーク1行に畳む。吹き出しを縦に伸ばさないため */
#om-motion-pop { width: 210px; }
#om-motion-pop select { width: 100%; font: 10px/1.6 var(--pixel); padding: 4px;
  border: 2px solid #fff; background: var(--glass-tint); color: #fff; }
#om-motion-pop .om-seek { display: flex; align-items: center; gap: 4px; }
#om-motion-pop input[type=range] { flex: 1; min-width: 0; }
#om-motion-pop #anim-time { font: 9px/1.6 var(--pixel); white-space: nowrap; }

#hud-mode { right: 10px; top: 10px; bottom: auto; }   /* 右上。今のモードを出す */
/* 左上。配置モードでは DIST バーが左端にいるので、その右に並べる */
#hud-undo { left: 10px; top: 10px; bottom: auto; }
body.place #hud-undo { left: 218px; }   /* DIST バー(約197px)の右 */
#hud-right { right: 10px; align-items: center; }   /* 1段に収める（フレームの下の帯からはみ出さない） */
.hud-row { display: flex; gap: 5px; }
/* LENS の箱: 白3px枠＋ゲージ＋大きな水色の数字 */
.hud .ctl { display: inline-flex; align-items: center; gap: 7px; color: #fff;
  padding: 3px 8px; background: rgba(0,0,0,.8); border: 3px solid #fff; border-radius: 0; }
.hud .unit { font: 15px/1 var(--pixel); color: var(--cyan); }
.hud .ctl input[type=number] { width: 46px; color: var(--cyan); font: 15px/1 var(--pixel);
  font-variant-numeric: tabular-nums;
  background: none; border: none; padding: 0; text-align: right; -moz-appearance: textfield; }
.hud .ctl input[type=number]::-webkit-inner-spin-button { display: none; }
.hud .ctl select { background: none; border: none; padding: 0; color: var(--fg); }
/* 撮影モードでは邪魔しない程度に薄く。触りたくなったらホバーで戻る */
body.explore .hud { opacity: .4; }
body.explore .hud:hover { opacity: 1; }
/* 構えている間もヒントは読みたい（#hint は残す） */
body.locked .hud { opacity: 0; pointer-events: none; }

/* アイコンボタン: 正方形が基本、.wide でラベル付き */
.ico { display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 28px; height: 28px; padding: 0 8px; position: relative; border-radius: 0; }
.ico .i { font-size: 12px; line-height: 1; }
.ico .l { font: 10px/1 var(--pixel); letter-spacing: .04em; }
.ico:not(.wide) { padding: 0; }
/* シャッターだけ橙。ここだけ色が強いので迷わない */
.ico.primary { background: var(--orange); border-color: #ffb08a; color: #fff; height: 34px; }
.ico.primary .l { font-size: 12px; }
.ico.primary:hover { background: #ff7a45; color: #fff; }
.badge { position: absolute; top: -4px; right: -4px; background: var(--yellow); color: var(--ink);
  font: 9px/1.6 var(--pixel); border-radius: 0; padding: 0 4px; }

/* ヒントは画面の上。数秒で引っ込む（詳細は H）。
   下に置くとホットバーの一覧（3番・7番・フリードロー）と潰し合うので上へ逃がした */
#hint { position: fixed; left: 50%; transform: translateX(-50%); top: 52px; z-index: 29; max-width: 46vw;
  color: var(--muted); font-size: 12px; text-align: center; text-shadow: 0 1px 3px #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; transition: opacity .5s; }
/* 高さは両モード同じ（下の一列の上）。retro 側の #hint で決める */
#hint.gone, #hint-text.gone { opacity: 0; }
#hint-text { transition: opacity .5s; }
/* ヒントの上の段。ヒントは数秒で消えるが、こちらはモードを抜けるまで残る */
#modebar { position: fixed; left: 50%; transform: translateX(-50%); top: 8px; z-index: 29;
  display: flex; gap: 6px; pointer-events: none; color: #fff; font-size: 12px;
  text-shadow: 0 1px 3px #000; white-space: nowrap; }
#modebar .muted { color: var(--muted); margin-left: 8px; }
#crosshair { position: fixed; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 0 3px #000; z-index: 20; display: none; }
body.explore.locked #crosshair { display: block; }

/* ---- viewfinder ---- */
#vf { position: fixed; inset: 0; pointer-events: none; z-index: 15; }
/* 枠の外を落とすのは box-shadow の spread 一発で足りる */
#vf-frame { position: absolute; box-shadow: 0 0 0 9999px rgba(0,0,0,.55);
  outline: 1px solid rgba(255,255,255,.45); transition: box-shadow .2s; }
body.place #vf { display: none; }   /* TPS 中はファインダーを出さない（作業画面） */
#vf-corners i { position: absolute; width: 22px; height: 22px; border: 3px solid #fff;
  filter: drop-shadow(0 0 2px #000); }
#vf-corners i:nth-child(1) { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
#vf-corners i:nth-child(2) { right: -1px; top: -1px; border-left: 0; border-bottom: 0; }
#vf-corners i:nth-child(3) { left: -1px; bottom: -1px; border-right: 0; border-top: 0; }
#vf-corners i:nth-child(4) { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
/* 枠の外（すぐ下）に出す。画に文字を乗せない。当時のHUDに寄せて水色＋黒縁 */
/* 位置は親の #vf-bottom（枠の下・左）が持つ */
#vf-info { display: flex; gap: 16px; align-items: center;
  font: 700 14px/1 ui-monospace, monospace; color: var(--accent);
  letter-spacing: .06em; font-variant-numeric: tabular-nums;
  -webkit-text-stroke: .5px rgba(0,0,0,.9); text-shadow: 0 2px 0 rgba(0,0,0,.8); }
#vf-info span::before { content: ''; }
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 55; }
#flash.on { animation: flash .26s ease-out; }
@keyframes flash { from { opacity: .28; } to { opacity: 0; } }

/* 枠の外・上の帯に1行で出す（画には乗せない） */
#arm-prompt { position: fixed; left: 50%; top: 12px; transform: translateX(-50%); z-index: 26;
  max-width: 96vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center; pointer-events: none; padding: 3px 12px; border-radius: 3px;
  background: var(--glass-bg), var(--glass-tint); border: var(--glass-edge);
  backdrop-filter: blur(16px) saturate(.85); }
#arm-prompt b { font-weight: 700; }
#arm-prompt .muted { margin-left: 10px; font-size: 12px; }
#arm-prompt .on { display: none; }
body.locked #arm-prompt .off { display: none; }
body.locked #arm-prompt .on { display: inline; }
body.place #arm-prompt { display: none; }

/* 撮影直後のレビュー表示 */
#review { position: fixed; right: 14px; bottom: 14px; z-index: 28; width: 190px; pointer-events: none;
  border: 1px solid rgba(255,255,255,.5); border-radius: 2px; overflow: hidden; background: #000;
  animation: pop .25s ease-out; }
#review img { width: 100%; display: block; }
#review span { position: absolute; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,.6);
  font: 11px/1.7 ui-monospace, monospace; text-align: center; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }

#grid-thirds { position: absolute; inset: 0;
  background:
    linear-gradient(to right, transparent 33.33%, rgba(255,255,255,.35) 33.33%, rgba(255,255,255,.35) calc(33.33% + 1px), transparent calc(33.33% + 1px)),
    linear-gradient(to right, transparent 66.66%, rgba(255,255,255,.35) 66.66%, rgba(255,255,255,.35) calc(66.66% + 1px), transparent calc(66.66% + 1px)),
    linear-gradient(to bottom, transparent 33.33%, rgba(255,255,255,.35) 33.33%, rgba(255,255,255,.35) calc(33.33% + 1px), transparent calc(33.33% + 1px)),
    linear-gradient(to bottom, transparent 66.66%, rgba(255,255,255,.35) 66.66%, rgba(255,255,255,.35) calc(66.66% + 1px), transparent calc(66.66% + 1px)); }

/* ---- filmstrip ---- */
#film-strip { display: flex; flex-wrap: wrap; gap: 6px; overflow-y: auto;
  max-height: calc(100vh - 260px); align-content: flex-start; margin-bottom: 8px; }
#film-strip:empty::after { content: 'まだ1枚も撮っていません'; color: var(--muted); }
#film-actions { display: flex; gap: 6px; justify-content: center; }
.frame { position: relative; flex: none; height: 74px; border: 1px solid var(--line); border-radius: 3px;
  overflow: hidden; cursor: pointer; background: #000; }
.frame img { height: 74px; display: block; }
.frame:hover { border-color: var(--accent); }
.frame .cap { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.65);
  font: 10px/1.5 ui-monospace, monospace; text-align: center; }
.frame .del { position: absolute; top: 1px; right: 1px; background: rgba(0,0,0,.6); border: none;
  color: #fff; border-radius: 3px; padding: 0 4px; line-height: 1.3; }
.frame .n { position: absolute; top: 1px; left: 3px; font: 10px/1.4 ui-monospace, monospace;
  color: rgba(255,255,255,.8); text-shadow: 0 1px 2px #000; }

/* ---- hotbar（配置モードだけ出る。マイクラ風に 1〜6 で置く）---- */
#hotbar { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 26;
  display: none; gap: 5px; padding: 5px 6px; background: var(--glass-bg), var(--glass-tint);
  border: var(--glass-edge); border-radius: var(--r);
  box-shadow: var(--pop), var(--glass-in); backdrop-filter: blur(18px) saturate(.85); }
body.place #hotbar { display: flex; }
#hotbar .slot { width: 44px; height: 42px; padding: 0; border-radius: 2px;
  background: var(--glass-bg), rgba(255,255,255,.04); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; position: relative; }
#hotbar .slot:hover { border-color: var(--accent); background: var(--glass-bg), rgba(255,255,255,.16); transform: translateY(-2px); }
#hotbar .slot .i { font-size: 16px; line-height: 1; }
#hotbar .slot .l { font-size: 9px; color: var(--muted); }
/* 枠の絵は線画の SVG。色は文字色に従うので、ホバー・選択中の色替えがそのまま効く */
#hotbar .slot .ic { display: flex; color: var(--muted); }
#hotbar .slot .ic svg { width: 18px; height: 18px; }
#hotbar .slot .n { position: absolute; top: 2px; left: 5px; font-size: 9px; color: var(--muted); }
#hotbar .slot.just { animation: pip .26s ease-out; border-color: var(--accent2); }
@keyframes pip { 50% { transform: translateY(-8px) scale(1.08); } }

/* ---- panels ---- */
/* overflow は出さない（角のカギ括弧が切れる）。伸びるのはモデル一覧だけなので、そこを巻く */
.panel { position: fixed; top: 10px; bottom: 90px; width: 320px; z-index: 20;
  background: var(--glass-bg), var(--glass-tint); border: var(--glass-edge); border-radius: var(--r);
  padding: 12px 14px; box-shadow: var(--pop), var(--glass-in); backdrop-filter: blur(18px) saturate(.85); }
/* 右だと画の主役に被るので左へ。下はホットバーに譲る。 */
#inspector { left: 10px; }
.panel h2 { font-size: 12px; color: var(--accent); letter-spacing: .04em; font-weight: 700;
  margin: 14px 0 6px; border-bottom: 2px dotted var(--line); padding-bottom: 4px; }
.panel h2:first-child { margin-top: 0; }
.row { display: flex; gap: 6px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.row > input { flex: 1; min-width: 0; }
.name { font-weight: 600; margin-bottom: 6px; word-break: break-all; }
.seg { flex: 1; }
.seg.active { background: var(--accent); color: var(--ink); }
.num-grid { display: grid; grid-template-columns: 58px 1fr 1fr 1fr; gap: 4px; align-items: center; margin: 6px 0; }
/* ラベル列は狭いので、はみ出して数値に被らないよう横並びで畳む */
.num-grid > span { color: var(--muted); font-size: 11px; display: flex; align-items: center;
  white-space: nowrap; min-width: 0; }
.num-grid input { width: 100%; min-width: 0; }
/* アニメーション。クリップ名は長いことがあるので枠幅に収める */
#anim-clip { flex: 1; min-width: 0; }
#anim-seek { flex: 1; min-width: 0; }
#anim-time { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* モディファイア。畳んだ見出しは h2 と同じ見た目に寄せる */
#mod-box { margin: 8px 0; border: 1px solid var(--line); border-radius: 2px; padding: 4px 6px; }
#mod-box > summary { cursor: pointer; font-size: 11px; color: var(--accent); letter-spacing: .04em; list-style: none; }
#mod-box > summary::before { content: '▸ '; }
#mod-box[open] > summary::before { content: '▾ '; }
.mod-grid { display: grid; grid-template-columns: 1fr 68px; gap: 4px 6px; align-items: center; margin: 6px 0; }
.mod-grid > span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.mod-grid input { width: 100%; min-width: 0; text-align: right; }
/* 整列は XYZ の3行（軸ラベル / 個数 / すき間） */
.mod-grid3 { display: grid; grid-template-columns: 16px 1fr 1fr; gap: 4px 6px; align-items: center; margin: 6px 0; }
.mod-grid3 > span { color: var(--muted); font-size: 11px; text-align: center; }
.mod-grid3 input { width: 100%; min-width: 0; text-align: right; }
/* 数値はドラッグでも変えられる（左右ドラッグでスクラブ） */
input[data-scrub] { cursor: ew-resize; }
body.scrubbing { cursor: ew-resize; user-select: none; }
#model-list { list-style: none; margin: 0; padding: 0; max-height: 40vh; overflow-y: auto; }
#model-list li { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 2px; cursor: pointer; }
#model-list li:hover { background: #33363a; }
#model-list li.sel { background: #42464a; box-shadow: inset 0 0 0 2px var(--accent); }
#model-list li.sel2 { background: #3a3d41; box-shadow: inset 0 0 0 1px var(--accent); }
#model-list li button.twisty { width: 14px; padding: 0; flex: none; font-size: 10px; }
#model-list li button.twisty:disabled { opacity: 0; }
#model-list li span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#model-list li button { padding: 0 6px; background: none; border: none; color: var(--muted); }
#model-list li.grp { font-weight: 600; color: var(--muted); }
#model-list li.drop { box-shadow: inset 0 2px 0 var(--accent); }

/* クリックやドラッグで文字・画像が選択状態にならないようにする（入力欄と名前の編集中は別） */
body { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
img { -webkit-user-drag: none; }
/* W H D をつなぐトグル。押している間だけ光らせる */
.link-chain { margin-left: 3px; flex: none; padding: 0 3px; font: inherit; line-height: 1; background: #23262b;
  border: 1px solid var(--line); border-radius: 2px; color: var(--muted); cursor: pointer; }
.link-chain.on { background: var(--accent); border-color: var(--accent); color: #12151a; }
/* 名前は一覧で直接書き換える。編集中だけ枠を出す */
#model-list li span.edit-name { outline: none; cursor: text; }
#model-list li span.edit-name:focus { background: #1e2126; box-shadow: inset 0 0 0 1px var(--accent); overflow: visible; }

/* ---- shots ---- */
.shot { position: relative; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; cursor: pointer; }
.shot img { width: 100%; display: block; }
.shot:hover { border-color: var(--accent); }
.shot .meta { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6);
  font-size: 11px; padding: 1px 6px; display: flex; justify-content: space-between; }
.shot .del { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.6); border: none;
  color: #fff; border-radius: 2px; padding: 0 5px; }

/* ---- modal ---- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 40; display: flex;
  align-items: center; justify-content: center; }
.modal-box { width: min(560px, 92vw); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--glass-bg), rgba(30,31,34,.9); border: var(--glass-edge); border-radius: 2px;
  box-shadow: 0 16px 50px #000, var(--glass-in); backdrop-filter: blur(22px) saturate(.85); }
.modal-box.wide { width: min(1100px, 94vw); }
.modal-box > header { display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 600; }
.modal-close { background: none; border: none; color: var(--muted); font-size: 20px; line-height: 1; }
.modal-body { padding: 12px 14px; overflow-y: auto; overflow-anchor: none; }
.modal-body > section > input { width: 100%; margin-bottom: 8px; }
.tabs { display: flex; gap: 4px; padding: 8px 14px 0; }
/* 左パネルのタブは箱の中なので左右の余白は要らない */
#insp-tabs { padding: 0 0 8px; }
#insp-tabs button { font: 10px/1.6 var(--pixel); padding: 5px 8px; border: 2px solid #fff;
  background: var(--glass-tint); color: #fff; }
#insp-tabs b { color: var(--yellow); margin-left: 4px; }
#tab-shots { overflow: hidden; }
.tabs button { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.tabs button.active { background: var(--accent); color: var(--ink); }
.field { display: block; margin-bottom: 14px; color: var(--muted); }
.field input:not([type=checkbox]) { width: 100%; margin-top: 4px; }
.field small { display: block; margin-top: 3px; }
.field.inline { display: flex; align-items: center; gap: 6px; }
/* 色見本は中身が分かればいい大きさで揃える。横に並ぶボタンも同じ高さに */
.field.inline input[type=color] { width: 54px; height: 24px; flex: none; margin-top: 0; padding: 1px; }
.field.inline button { height: 24px; padding: 0 10px; }
.field output { color: var(--fg); font-variant-numeric: tabular-nums; }
.modal-body h3 { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em;
  margin: 16px 0 8px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.modal-body h3:first-child { margin-top: 0; }
kbd { background: #1e2023; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 2px;
  padding: 0 5px; font: 11px/1.5 ui-monospace, monospace; color: var(--fg); }
.status { min-height: 20px; color: var(--accent); margin-bottom: 8px; word-break: break-all; }
.status.err { color: var(--danger); }
.status a { color: var(--accent); }
.warn { background: #3a2e12; border: 1px solid #6b5320; border-radius: 2px; padding: 6px 10px; margin-bottom: 8px; }

/* ---- asset cards ---- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.card { background: var(--glass-bg), rgba(255,255,255,.04); border: var(--glass-edge); border-radius: 3px; padding: 5px; cursor: pointer; transition: transform .12s; }
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card .noimg { width: 100%; aspect-ratio: 4/3; display: grid; place-items: center; font-size: 32px; background: #000; border-radius: 2px; opacity: .5; }
.card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border-radius: 2px; background: #000; }
.card .t { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
#sf-more { width: 100%; margin-top: 10px; }
#drop-zone { border: 2px dashed var(--line); border-radius: 3px; padding: 40px 20px; text-align: center; color: var(--muted); }
#drop-zone button { margin-top: 12px; }
body.dragover #drop-zone { border-color: var(--accent); }

/* ---- projects ---- */
.proj { display: flex; align-items: center; gap: 8px; padding: 6px; border-top: 1px solid var(--line); }
.proj span { flex: 1; }

/* ---- busy / toast ---- */
#busy { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 60; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#toast { position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%); z-index: 70;
  display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
#toast div { background: rgba(0,0,0,.82); border: 1px solid var(--line); border-radius: 2px; padding: 5px 14px; }
#toast div.err { border-color: var(--danger); color: var(--danger); }
/* 裏で走っている処理の進捗。左下に出すので画面を止めずに済む */
/* 左下の隅。高さは下の一列（#bottombar）と揃える */
#progress { position: fixed; left: 10px; bottom: 10px; z-index: 70; width: 240px;
  display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
#progress .prog { background: rgba(0,0,0,.82); border: 1px solid var(--line); border-radius: 2px; padding: 6px 10px 8px; }
#progress .t { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; }
#progress .bar { height: 4px; background: var(--line); overflow: hidden; }
#progress .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s linear; }
/* 全体サイズが分からない間は流れるバー */
#progress .bar.indet i { width: 35%; animation: indet 1.1s ease-in-out infinite; transition: none; }
@keyframes indet { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* ---- 操作説明カード（H で開閉）---- */
#help-card { position: fixed; right: 8px; top: 10px; width: 330px; max-height: 70vh; overflow-y: auto;
  z-index: 32; padding: 0 0 10px; border-radius: var(--r);
  background: var(--glass-bg), var(--glass-tint); border: var(--glass-edge);
  box-shadow: var(--pop), var(--glass-in); backdrop-filter: blur(20px) saturate(.85);
  animation: slidein .18s ease-out; }
#help-card > header { display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; font-weight: 700; border-bottom: var(--glass-edge); }
#help-card #help-close { background: none; border: none; box-shadow: none; font-size: 18px;
  line-height: 1; color: var(--muted); padding: 0 4px; }
#help-body { display: grid; grid-template-columns: auto 1fr; gap: 5px 10px; align-items: center;
  padding: 10px 12px; color: var(--muted); }
#help-body .k { text-align: right; white-space: nowrap; }
@keyframes slidein { from { opacity: 0; transform: translateX(10px); } }
.inline-chk { color: var(--muted); gap: 8px; }
.inline-chk input { flex: none; }

/* ---- スターフォックス64風の上乗せ ---------------------------------------
   角のカギ括弧（.corners）で見た目の芯が決まる。
   （枠の内側だとパネル自身の白枠に埋もれるので、7px 外に浮かせる。
     スクロールする箱の中に入れると一緒に流れるので、.corners は必ず枠の直下に置く） */
.corners { position: absolute; inset: -7px; pointer-events: none; }
.corners i { position: absolute; width: 16px; height: 16px; border: 3px solid #fff; }
.corners i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.corners i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.corners i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.corners i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.panel h2 { color: #fff; border-bottom: 2px solid rgba(255,255,255,.55);
  font: 10px/1.6 var(--pixel); letter-spacing: .08em; }
#model-list li:hover { background: rgba(150,175,255,.22); }
#model-list li.sel { background: rgba(150,175,255,.3); box-shadow: inset 0 0 0 2px #fff; }
#model-list li.sel2 { background: rgba(150,175,255,.18); box-shadow: inset 0 0 0 1px #fff; }
/* 選択中は黄。当時の「今ここ」は必ず黄色だった */
.seg.active, .tabs button.active { background: var(--yellow); color: var(--ink); border-color: #fff; }

/* ファインダーは緑のワイヤー。三分割線も緑の点線 */
#vf-frame { outline: 2px solid var(--green); }
#vf-corners i { border-color: var(--green); }
#grid-thirds { background: none;
  border-left: 1px dashed rgba(93,251,93,.5); border-right: 1px dashed rgba(93,251,93,.5);
  border-top: 1px dashed rgba(93,251,93,.5); border-bottom: 1px dashed rgba(93,251,93,.5);
  inset: 33.33% 33.33%; }
#vf-info { color: var(--green); font: 12px/1 var(--pixel); gap: 20px; text-transform: uppercase; }

/* インスペクタは会話ウィンドウ。顔＋名前＋本文の並び */
#insp-head { display: flex; gap: 10px; align-items: flex-start;
  padding-bottom: 8px; border-bottom: 2px dashed rgba(255,255,255,.45); margin-bottom: 8px; }
#insp-name { font: 11px/1.4 var(--pixel); color: var(--yellow); margin-bottom: 4px; }
#insp-head .msg { font-size: 12px; color: #dfe6ff; line-height: 1.5; }

/* 数値は黒地の緑。ラベルはドット文字 */
.num-grid span { font: 8px/1 var(--pixel); color: #fff; letter-spacing: .06em; }
#mod-box > summary { font: 9px/1.6 var(--pixel); color: var(--yellow); }
#mod-box { border-color: rgba(255,255,255,.45); }
.mod-grid > span, .mod-grid3 > span { font: 8px/1.4 var(--pixel); color: #fff; letter-spacing: .06em; }
.num-grid input { text-align: right; padding: 3px 4px; font-size: 12px; }

/* ホットバーは「1:箱」の詰めた枠 */
#hotbar .slot { width: 46px; height: 38px; background: rgba(0,0,0,.6); border: 2px solid #8fa8ff; }
#hotbar .slot .n { position: static; font: 8px/1 var(--pixel); color: var(--cyan); }
#hotbar .slot .l { font-size: 11px; color: #fff; }
#hotbar .slot .ic { color: #fff; }
#hotbar .slot .ic svg { width: 16px; height: 16px; }
#hotbar .slot:hover, #hotbar .slot.just { border-color: var(--yellow); background: rgba(0,0,0,.6); transform: none; }
#hotbar .slot:hover .l, #hotbar .slot.just .l,
#hotbar .slot:hover .ic, #hotbar .slot.just .ic { color: var(--yellow); }
/* 操作の帯は会話ウィンドウ。上中央（DIST と PLACE の間は空いている）に出す */
#hint { left: 50%; transform: translateX(-50%); top: 52px; text-align: center; max-width: 56vw;
  padding: 0; background: none; border: 0; box-shadow: none; pointer-events: none; }
#hint-text, #modebar div { font: 12px/1.7 var(--pixel); color: #fff; padding: 12px 16px;
  background: var(--glass-tint); border: 3px solid #fff; border-radius: 0;
  box-shadow: 0 0 0 2px #000; }
#hint b, #modebar b { color: var(--yellow); }
#modebar div { padding: 6px 12px; }
#modebar .muted { color: var(--muted); margin-left: 8px; }

/* 世界の基準（身長）ゲージ。LENS / FOCUS と同じ白枠の箱に入れる */
#scale-ref { gap: 7px; }
#scale-ref #scale-val { min-width: 54px; text-align: right; }
/* ドット文字は字面が詰まるので行間を空けないと重なる */
/* 枠の上の帯に置くので1段に並べる（縦積みだと帯からはみ出す） */
#hud-left { flex-direction: row; align-items: center; gap: 12px; }
#hud-left .readout, #hud-left .readout select { line-height: 1.7; }
#scale-ref #scale-val { color: var(--accent); font: 700 12px/1 ui-monospace, monospace;
  font-variant-numeric: tabular-nums; }

/* 大きさ表示のトグルは入/切が分かるように光らせる */
#btn-dims.on { background: var(--gauge); color: var(--ink); }

/* 左パネルの開閉つまみ。閉じている間もこれだけは残す */
#btn-panel { position: fixed; left: 10px; top: 10px; z-index: 21; display: none;
  width: 26px; height: 26px; padding: 0; }
body.place #btn-panel { display: inline-flex; align-items: center; justify-content: center; }
body.place #inspector { top: 86px; }          /* 左上の LENS/FORMAT/BODY に被らない高さ */
/* 下中央の一列。SIZE/撮影 のあと、仕切りを挟んで右の箱（置けるブロック＋操作の案内） */
#bottombar { left: 50%; right: auto; transform: translateX(-50%);
  display: flex; gap: 10px; align-items: center; }
/* SIZE/撮影 と右の箱は仕切りで分ける */
#hud-center { align-items: stretch; padding-right: 10px; border-right: 3px solid #fff; }
/* 右の箱は1つ。中に置けるブロック（配置モードだけ）と案内（常時）が並ぶ */
/* 幅は固定（1〜7 が入る幅）。モードで中身が変わっても枠の位置と大きさは動かない */
#bottom-right { width: 344px; justify-content: center; position: relative;
  display: flex; gap: 8px; align-items: center; height: 38px; box-sizing: border-box;
  padding: 0 8px; background: var(--glass-tint); border: 3px solid #fff; box-shadow: 0 0 0 2px #000; }
/* 箱は #bottom-right が持つので、中の hotbar は枠を外す */
#hotbar { position: static; height: 100%; align-items: center; gap: 4px;
  padding: 0; background: none; border: 0; box-shadow: none; }
#hotbar .corners { display: none; }
#hotbar .slot { width: 34px; height: 26px; }
#hotbar .slot.add { margin-left: 4px; }
/* フリードローは押している間ずっと ON（他の枠と違って「置く」ではなく「モード」） */
#hotbar .slot.on { border-color: var(--yellow); }
#hotbar .slot.on .ic { color: var(--yellow); }
body.drawing #view { cursor: crosshair; }
/* 枠を押すと上に開く一覧（人・坂・フリードローの面合わせ）。
   同時に開くことがあるので、重ならないよう入れ物の中で下から積む */
#picks { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; }
.pick { display: flex; flex-direction: column; gap: 4px; padding: 6px;
  background: var(--panel); border: 3px solid #fff; box-shadow: 0 0 0 2px #000; }
.pick.hidden { display: none; }
.pick button { font: 10px/1.7 var(--pixel); color: #fff; white-space: nowrap;
  padding: 5px 8px; background: var(--glass-tint); border: 2px solid #fff; }
.pick button:hover { background: var(--orange); }
#draw-view button.on { border-color: var(--yellow); color: var(--yellow); }
/* 中身は「絵＋名前」の一行。今の既定には枠の色を付ける */
#ramp-pick button { display: flex; align-items: center; gap: 6px; }
#ramp-pick button .ic { display: flex; }
#ramp-pick button .ic svg { width: 14px; height: 14px; }
#human-pick button.on, #ramp-pick button.on { border-color: var(--yellow); color: var(--yellow); }
/* 案内は箱の中に常時。1行の見出しだけ（細かい操作は下のダイアログと HELP に出る） */
#arm-prompt { position: static; transform: none; display: flex; align-items: center;
  padding: 0; background: none; border: 0; box-shadow: none;
  font: 10px/1.7 var(--pixel); color: #fff; white-space: nowrap; }
#arm-prompt b { color: var(--yellow); }
#arm-prompt .muted { display: none; }
/* 箱は同じまま、中身だけ入れ替える（配置＝1〜7 / 撮影＝案内） */
body.place #arm-prompt { display: none; }
/* 構えている間も案内だけは残す（下の一列の他は消す） */
body.locked #bottombar { opacity: 1; }
body.locked #hud-center, body.locked #hotbar { opacity: 0; pointer-events: none; }

#bottombar { position: fixed; bottom: 10px; z-index: 28; }
#hotbar { position: static; left: auto; bottom: auto; transform: none; }
#hud-center { display: flex; gap: 6px; align-items: center; }
/* 仕切りは置けるブロックが出ているときだけ */
/* 仕切りは #bottom-right の左辺に移した（幅が変わると撮影ボタンが動く） */
#hud-center .ico { width: 46px; height: 38px; padding: 0; flex-direction: column; gap: 1px; }
#hud-center .ico { justify-content: center; overflow: hidden; }
/* 46px角に絵文字と文字は入らない。文字だけで読める2つなのでアイコンは捨てる */
#hud-center .ico .i { display: none; }
#hud-center .ico .l { font-size: 10px; line-height: 1; }
#hud-center .ico.primary { height: 38px; }
/* 構えている間に消すのは #hud-center と #hotbar だけ（案内は残す）→ 上のまとめを参照 */

#hud-left .tag { line-height: 1.6; }

/* レンズ・画面比・身長は構えている間こそ見たい。触れないだけにして出しておく */
body.locked #hud-left, body.locked #vf-dof, body.locked #vf-clip, body.locked #vf-bottom {
  opacity: 1; pointer-events: none; }
/* 配置モードでは意味がないので消す（BODY だけは配置でも効くが、設定から変えられる） */
body.place #hud-left { display: none; }

/* 数字が見切れないだけの幅を取る（ドット文字は字幅が広い） */
.hud .ctl input[type=number] { width: 64px; }
#hud-left .readout, #hud-left .ctl { padding-bottom: 4px; }
body.no-panel #inspector { display: none; }
/* つまみはパネルの右肩に置く（閉じる印だと分かる）。閉じている間だけ画面の端へ戻る */
body.place #btn-panel { left: 240px; top: 86px; width: 26px; height: 26px; }
body.place.no-panel #btn-panel { left: 10px; top: 86px; }

/* ホットバー最後の「追加」枠は本体と少し離す */
#hotbar .slot.add { margin-left: 8px; }

/* ---- 寸法の札（Z で表示）。cm で大きさ、m で座標 ---- */
#dims { position: fixed; inset: 0; z-index: 24; pointer-events: none; }
#dims > div { position: absolute; transform: translate(-50%, -100%); white-space: pre;
  margin-top: -8px; padding: 3px 7px; text-align: center;
  font: 11px/1.45 var(--dot); font-variant-numeric: tabular-nums;
  color: var(--green); background: rgba(0,0,0,.8); border: 2px solid #fff;
  text-shadow: 0 1px 2px #000; }
#dims > div.me { color: #fff3a8; border-color: #fff3a8; }