* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #f4f1ea; color: #222;
  font-family: -apple-system, "Hiragino Sans", "Yu Gothic UI", sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#stage { position: fixed; inset: 0; touch-action: none; }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ov { pointer-events: none; }

button {
  font: inherit; font-size: 14px; color: #222;
  background: rgba(255,255,255,.92); border: 1px solid #cfc8bb; border-radius: 10px;
  padding: 7px 11px; touch-action: manipulation; cursor: pointer;
}
button.on, button[aria-pressed="true"] { background: #2b2b2b; color: #fff; border-color: #2b2b2b; }
button.primary { background: #2e86ab; color: #fff; border-color: #2e86ab; }

.bars {
  position: fixed; left: 0; right: 0; top: 0;
  padding: calc(env(safe-area-inset-top) + 8px) 8px 0;
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.bar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; pointer-events: auto; width: fit-content; }
.group { display: inline-flex; gap: 0; }
.group button { border-radius: 0; margin-left: -1px; }
.group button:first-child { border-radius: 10px 0 0 10px; margin-left: 0; }
.group button:last-child { border-radius: 0 10px 10px 0; }

.layer { position: fixed; inset: 0; z-index: 5; }
.pop {
  position: absolute; width: min(340px, calc(100vw - 16px));
  max-height: calc(100vh - 120px); overflow-y: auto;
  background: #fff; border: 1px solid #cfc8bb; border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 4px 14px 12px; font-size: 14px;
}
.pop h3 { font-size: 12px; color: #888; font-weight: 600; margin: 12px 0 2px; }
.sw-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.sw {
  width: 46px; height: 28px; padding: 0; border-radius: 14px; flex: none;
  background: #d9d3c7; border: none; position: relative; transition: background .15s;
}
.sw::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s;
}
.sw[aria-pressed="true"] { background: #2e86ab; }
.sw[aria-pressed="true"]::after { left: 21px; }
button:disabled { opacity: .4; }
.note { font-size: 12px; color: #777; line-height: 1.5; margin: 0 0 4px; }
.help { font-size: 12px; color: #777; line-height: 1.6; margin: 10px 0 0; border-top: 1px solid #eee; padding-top: 8px; }

#panel {
  position: fixed; left: calc(env(safe-area-inset-left) + 8px); bottom: calc(env(safe-area-inset-bottom) + 8px);
  width: min(450px, calc(100vw - 16px));
  background: rgba(255,255,255,.95); border: 1px solid #cfc8bb; border-radius: 14px;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 8px;
}
.prow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fields { justify-content: flex-start; flex-wrap: wrap; }
.fields label { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; }
.fields input {
  width: 64px; font: inherit; font-weight: 400; font-size: 16px; padding: 5px 6px;
  border: 1px solid #cfc8bb; border-radius: 8px; background: #fff;
}
.def { padding: 5px 8px; font-size: 13px; }
#deselect { width: 34px; height: 34px; border-radius: 50%; padding: 0; }
#miniBox {
  position: fixed; left: calc(env(safe-area-inset-left) + 8px); bottom: calc(env(safe-area-inset-bottom) + 112px);
  width: 190px; height: 190px; border-radius: 14px;
  overflow: hidden;
}
#mini { width: 100%; height: 100%; display: block; touch-action: none; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 4px 0 0; font-size: 12px; color: #555; }
.keys dt { font-family: ui-monospace, Consolas, monospace; color: #222; }
.keys dd { margin: 0; }
.keysBox { margin-top: 12px; }
.keysBox summary { font-size: 12px; color: #888; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.keysBox summary::-webkit-details-marker { display: none; }
.keysBox summary::before { content: '▸'; font-size: 11px; transition: transform .15s; }
.keysBox[open] summary::before { transform: rotate(90deg); }
.keysBox h4 { font-size: 11px; color: #999; font-weight: 600; margin: 8px 0 2px; }
button.icon { display: inline-flex; align-items: center; justify-content: center; padding: 6px 9px; }
#sizeLock[aria-pressed="true"] { background: #fff; color: #222; border-color: #cfc8bb; }
#sizeLock { font-size: 13px; }

/* 記号のボタン */
.ic { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; flex: none; }
.ic .fk { fill: currentColor; stroke: none; }
.ic .vp { fill: #e4572e; stroke: none; }
.ic .hz { stroke: #2e86ab; stroke-width: 1.3; }
.ic .thin { stroke-width: 1; stroke-dasharray: 2 2; opacity: .6; }
button.on .ic .hz, button.primary .ic .hz { stroke: #8fd3ee; }
button.icon { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 9px; min-height: 34px; }
button.it { display: inline-flex; align-items: center; gap: 8px; }
#openPattern .caret { font-size: 10px; color: #888; }
#patternIcon .ic { width: 20px; height: 20px; }
#zoomLabel { font-size: 11px; font-weight: 600; letter-spacing: -.02em; }
.ic-label .ic { width: 20px; height: 20px; color: #555; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; padding: 4px 0 6px; }
.tiles button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px; font-size: 12px; }
.tiles .ic { width: 28px; height: 28px; }
.modes { display: flex; flex-direction: column; gap: 6px; }
.modes button { justify-content: flex-start; }
#sizeLock { gap: 6px; font-size: 13px; }
#tip {
  position: fixed; z-index: 20; background: #2b2b2b; color: #fff; font-size: 13px;
  padding: 5px 10px; border-radius: 8px; pointer-events: none; white-space: nowrap;
}
.count-row { display: flex; align-items: center; gap: 10px; padding: 8px 0 2px; font-size: 14px; }
.count-row input { flex: 1; }
#countValue, .cv { min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
#patternLayer .pop { max-height: calc(100vh - 80px); overflow-y: auto; }
.slide { display: inline-flex; align-items: center; gap: 8px; }
.slide input { width: 120px; }
#gridStepValue { min-width: 34px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
#selCount { font-size: 12px; }
.group button { white-space: nowrap; }
.lensSlide { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.92); border: 1px solid #cfc8bb; border-radius: 10px; padding: 3px 10px; }
.lensSlide input { width: 200px; }
#focalValue { min-width: 50px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
#focalBadge { font-size: 12px; }

/* 向きの切り替え（右上の XYZ） */
#axes {
  position: fixed; right: calc(env(safe-area-inset-right) + 6px); top: calc(env(safe-area-inset-top) + 6px);
  width: 84px; height: 84px; border-radius: 50%; touch-action: none; cursor: pointer;
}
#axes:hover { background: rgba(0,0,0,.05); }
@media (max-width: 600px) { #axes { top: calc(env(safe-area-inset-top) + 168px); } }

/* 右の縦の列（カメラ）。XYZ の玉の真下 */
#camCol {
  position: fixed; right: calc(env(safe-area-inset-right) + 29px); top: calc(env(safe-area-inset-top) + 96px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
@media (max-width: 600px) { #camCol { top: calc(env(safe-area-inset-top) + 258px); } }
#camCol button { width: 38px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.vgroup { display: inline-flex; flex-direction: column; }
.vgroup button { border-radius: 0; margin-top: -1px; }
.vgroup button:first-child { border-radius: 10px 10px 0 0; margin-top: 0; }
.vgroup button:last-child { border-radius: 0 0 10px 10px; }
#camCol #camPick { height: 50px; flex-direction: column; gap: 1px; position: relative; }
#camPick .ic { width: 20px; height: 20px; }
/* 番号は右上、▾ はカメラの真下 */
#camNo { position: absolute; top: 3px; right: 4px; font-size: 10px; font-weight: 700; line-height: 1; }
#camPick .chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#camPop { width: 210px; padding: 8px; }
#camItems { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
#camItems .it, .cam-actions .it { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; }
.cam-actions { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #eee5d6; }
.cam-actions .it { justify-content: center; font-size: 13px; padding: 6px 4px; gap: 4px; }
.cam-actions .it:disabled { opacity: .4; }

/* スライダーはすべて同じ見た目（iPhone の標準に似せる）。つまみの左を青く塗る（--p は app.js が入れる） */
input[type=range] { -webkit-appearance: none; appearance: none; height: 30px; margin: 0; background: none; --p: 50%; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, #0a7aff var(--p), #e3e3e8 var(--p)); }
input[type=range][dir=rtl]::-webkit-slider-runnable-track { background: linear-gradient(to left, #0a7aff var(--p), #e3e3e8 var(--p)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; border: none; box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.25); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: #e3e3e8; }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: #0a7aff; }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: none; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
/* 大きさの最小・最大：2本を重ね、つまみだけ押せるようにする。つまみの間を青く塗る */
.dual { flex: 1; position: relative; height: 30px; --a: 0%; --b: 100%; }
.dual input { position: absolute; left: 0; right: 0; top: 0; width: 100%; pointer-events: none; }
.dual input::-webkit-slider-runnable-track { background: linear-gradient(to right, #e3e3e8 var(--a), #0a7aff var(--a), #0a7aff var(--b), #e3e3e8 var(--b)); }
.dual input + input::-webkit-slider-runnable-track { background: none; }
.dual input::-webkit-slider-thumb { pointer-events: auto; }
.dual input::-moz-range-thumb { pointer-events: auto; }
.dual input::-moz-range-progress { background: none; }
#sizeValue { font-size: 13px; color: #555; min-width: 74px; text-align: right; }

/* 集中モード：目のボタンだけ残す */
body.focus .bars, body.focus #axes, body.focus #camCol, body.focus #panel, body.focus #miniBox, body.focus #placeBar { visibility: hidden; }
/* 集中モードのボタンは右下。iPhone で箱を選んで下に欄が出ている間は、欄の上へよける */
#focusBtn { position: fixed; right: calc(env(safe-area-inset-right) + 8px); bottom: calc(env(safe-area-inset-bottom) + 8px); width: 42px; height: 40px; padding: 0; }
@media (max-width: 600px) { body:not(.focus) #panel:not([hidden]) ~ #focusBtn { bottom: calc(env(safe-area-inset-bottom) + 118px); } }
/* スマホの縦画面では右上（上の段のボタンの右の空き）に置く */
@media (max-width: 600px) and (orientation: portrait) { #focusBtn, body:not(.focus) #panel:not([hidden]) ~ #focusBtn { top: calc(env(safe-area-inset-top) + 8px); bottom: auto; } }

button.icon.withText { gap: 5px; padding-right: 11px; font-weight: 600; }

.count-row > span:first-child { min-width: 64px; }

/* 箱を置く時の欄。並べ方の吹き出しと同じく、ボタンのすぐ下に出す（外を押しても閉じない） */
#placeBar {
  position: fixed; z-index: 4; padding: 8px 12px 10px;
  display: flex; flex-direction: column; gap: 6px;
}
#placeBar .note { margin: 0; }
#placeBar .count-row { padding: 0; }
#placeBar .group button { padding: 5px 12px; }
#placeClose { width: 30px; height: 30px; border-radius: 50%; padding: 0; flex: none; }
body.placing #stage { cursor: crosshair; }
#placeBar .group button { padding: 5px 9px; }
#placePoseRow { align-items: flex-start; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 240px; }
.chips button { padding: 4px 9px; font-size: 13px; }

/* カメラのモード（ピンチ・2本指）のボタンは、指で触る端末だけに出す */
@media (hover: hover) and (pointer: fine) { #walkMode { display: none !important; } }