:root { color-scheme: light dark; }
body { font-family: system-ui, -apple-system, "Hiragino Sans", sans-serif; margin: 0 auto; padding: 12px; max-width: 760px; line-height: 1.5; }
h1 { font-size: 1.3rem; margin: 0; }
h1 small { font-size: .7rem; font-weight: normal; color: #888; }
h2 { font-size: 1rem; }
.note { margin: .2rem 0 1rem; color: #666; font-size: .85rem; }
section { margin-bottom: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 6px 0; }
button, .filebtn { font: inherit; padding: 8px 14px; border: 1px solid #888; border-radius: 6px; background: #f2f2f2; color: #111; cursor: pointer; }
.filebtn input { display: none; }
button:disabled { opacity: .5; }
select, input[type=number] { font: inherit; }
input.sec { width: 5em; }
#stage { position: relative; width: min(100%, 420px); margin: 0 auto; background: #000; }
#video { display: block; width: 100%; height: auto; }
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
#stage.skelonly #video { visibility: hidden; }
#slider { width: 100%; }
#frameinfo, #status, #fileinfo { font-size: .85rem; color: #555; font-variant-numeric: tabular-nums; }
progress { width: 200px; }
pre { background: #eee; color: #111; padding: 8px; overflow: auto; font-size: .8rem; }
/* 読み込み中の video を画面の外に置く（display:none だと iOS が読み込まない） */
#viewer.offscreen { position: fixed; left: -10000px; top: 0; width: 320px; }
#strip { display: block; width: 100%; height: 12px; margin: 2px 0 6px; }
#cliprect { position: absolute; border: 3px solid #ffe14d; box-sizing: border-box; pointer-events: none; background: rgba(255, 225, 77, .08); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000; }   /* 実線 3px + 黒い細い縁取り（明るい動画でも暗い動画でも見える） */
/* 枠の操作（ステップ 2）。枠の中と、つまみの上だけ touch-action: none。枠の外ではスクロールできる */
#stage.selecting #cliprect { pointer-events: auto; touch-action: none; cursor: move; }
#cliprect .h { display: none; position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; touch-action: none; }
#stage.selecting #cliprect .h { display: block; }
/* つまみは見えない（当たり判定の 44px だけ残す） */
#cliprect .h[data-h="nw"], #cliprect .h[data-h="n"], #cliprect .h[data-h="ne"] { top: 0; }
#cliprect .h[data-h="w"], #cliprect .h[data-h="e"] { top: 50%; }
#cliprect .h[data-h="sw"], #cliprect .h[data-h="s"], #cliprect .h[data-h="se"] { top: 100%; }
#cliprect .h[data-h="nw"], #cliprect .h[data-h="w"], #cliprect .h[data-h="sw"] { left: 0; }
#cliprect .h[data-h="n"], #cliprect .h[data-h="s"] { left: 50%; }
#cliprect .h[data-h="ne"], #cliprect .h[data-h="e"], #cliprect .h[data-h="se"] { left: 100%; }
table { border-collapse: collapse; margin: 6px 0; }
th { text-align: left; font-weight: normal; color: #666; padding: 3px 8px 3px 0; }
td { padding: 3px 18px 3px 0; font-variant-numeric: tabular-nums; min-width: 6em; }
td.bad { color: #b36b00; }
td.est { color: #888; }
.note.small { font-size: .8rem; }
#phasetable td, #phasetable th { padding: 4px 10px 4px 0; }
#phasetable button { padding: 4px 10px; }

[hidden] { display: none !important; }
/* ステップの表示 */
#stepbar { padding: 6px 0; margin-bottom: 8px; }
#steptext { font-size: 1.05rem; }
.dots { display: flex; gap: 4px; margin-bottom: 4px; }
.dots span { flex: 1; height: 6px; border-radius: 3px; background: #ccc; }
#stepbar[data-step="1"] .dots span:nth-child(-n+1), #stepbar[data-step="2"] .dots span:nth-child(-n+2), #stepbar[data-step="3"] .dots span, #stepbar[data-step="4"] .dots span { background: #2a7de1; }
#warn { margin-top: 6px; padding: 6px 8px; background: #fff3cd; color: #5c4400; border: 1px solid #e0c060; border-radius: 6px; font-size: .9rem; }
button.primary.stopping { background: #e4e4e4; color: #5a5a5a; border-color: #b8b8b8; }   /* 検出中の「止める」は薄い色（押したくならないように。読める濃さは残す） */
button.primary { font-size: 1.1rem; padding: 12px 22px; background: #2a7de1; color: #fff; border-color: #2a7de1; }
/* 表示領域の高さは、ステップ 2・3・結果で同じ（画面の高さの 50%）。ステップ 3 と結果では、中身だけを枠で拡大する */
#viewer[data-step="2"] #stage, #viewer[data-step="3"] #stage, #viewer[data-step="4"] #stage { width: min(100%, 420px, var(--w50, 420px)); }
#viewer[data-step="2"], #viewer[data-step="3"], #viewer[data-step="4"] { padding-left: 16px; padding-right: 16px; }
#viewer[data-step="3"] #stage { overflow: hidden; }
/* 結果画面は、動画・操作・スライダーを画面の上に固定する（局面のボタンを押した結果を、そのまま見られるように） */
#viewer[data-step="4"] { position: sticky; top: 0; z-index: 5; background: Canvas; padding-top: 0; padding-bottom: 4px; }
#viewer .row { margin: 4px 0; }

/* ボタンの並び: 戻るは左、進むボタンは右にそろえる */
#clipbtns, #again { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.row.center { justify-content: center; }
#again button { }
/* 結果画面: 枠の縦幅で拡大。表示領域（stage）は今のまま、中身（動画と骨格）だけを拡大する */
#zoomwrap { position: relative; }
#stage.zoomed #zoomwrap { position: absolute; }
#stage.zoomed #video { height: 100%; }
/* ステップ 3: 戻るは左、検出（止める）は中央。ボタンの大きさは変えない */
#analyze > .row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
#analyze > .row #reclip { justify-self: start; }
#analyze > .row #start { grid-column: 2; min-width: 11em; }
/* 横にスクロールさせない（誤操作のもと） */
html { overflow-x: hidden; }   /* body には付けない（body がスクロールの入れ物になって、sticky が効かなくなる） */
body { overflow-x: clip; }
#viewer[data-step="4"] #stage { overflow: hidden; }

/* 局面の表: 狭い画面（390px）で横にはみ出さないよう、行を折り返す */
#phasetable, #phasetable tbody { display: block; }
#phasetable tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 0; border-bottom: 1px solid #ddd; }
#phasetable th, #phasetable td { padding: 0; min-width: 0; }
#phasetable th { flex: 0 0 9em; }
#phasetable td:nth-child(2) { flex: 1 1 8em; }

/* ステップ 1: 「動画を選ぶ」を中央に */
#pick { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 55vh; text-align: center; }

/* ステップ 1: 「動画を選ぶ」は大きく（画面幅の 75%、高さ 64px） */
.filebtn { display: flex; align-items: center; justify-content: center; width: min(75vw, 420px); height: 64px; box-sizing: border-box; font-size: 1.35rem; font-weight: bold; padding: 0 12px; background: #2a7de1; color: #fff; border-color: #2a7de1; }
/* ステップ 2: 検出に使う時間の範囲 */
#rangebox { margin: 8px 0; }
#rangetext { font-size: .95rem; font-variant-numeric: tabular-nums; margin-bottom: 2px; }
#rangeinfo { margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
/* 結果画面の操作の段: 戻る（左端）◀ 再生 ▶（中央）終了（右端）。端のボタンは、中央と間をあける */
.row.ctl button { height: 44px; padding: 0 12px; white-space: nowrap; }

/* 結果画面: 局面のボタンを、動画の表示領域の左に縦に重ねる（半透明。高さ 44px）。ボタン以外は触れても通り抜ける */
#phasebar { position: absolute; left: 0; top: 0; z-index: 3; display: flex; flex-direction: column; gap: 4px; padding: 4px; width: 76px; box-sizing: border-box; pointer-events: none; }
#phasebar button { pointer-events: auto; height: 44px; padding: 2px 1px; font-size: 11px; line-height: 1.15; word-break: break-all; background: rgba(0, 0, 0, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .55); border-radius: 6px; }
#phasebar button:disabled { opacity: .35; }
#phasebar button.current { background: rgba(42, 125, 225, .9); border-color: #fff; font-weight: bold; }
/* 角度は、右側に縦に重ねる（半透明の黒、白文字） */
#angbar { position: absolute; right: 4px; top: 4px; z-index: 3; width: 108px; box-sizing: border-box; padding: 4px 6px; background: rgba(0, 0, 0, .55); color: #fff; border-radius: 6px; font-size: 11px; line-height: 1.4; pointer-events: none; font-variant-numeric: tabular-nums; }
#angbar div { display: flex; justify-content: space-between; gap: 4px; }
#angbar b { font-weight: normal; text-align: right; }
#angbar b.bad { color: #ffc266; }
#angbar b.est { color: #bbb; }
/* 「画像を保存」: 右下 */
#savebtn { position: absolute; right: 4px; bottom: 4px; z-index: 3; height: 44px; padding: 0 12px; font-size: 13px; background: rgba(0, 0, 0, .6); color: #fff; border: 1px solid rgba(255, 255, 255, .6); }
#savebtn:disabled { opacity: .35; }
/* 結果画面で動画を長押し（画像の保存）するとき、OS の選択やメニューが出ないように */

/* ステップ 2: 1 本のバーに、開始と終了の 2 つのつまみ（2 本の input[type=range] を重ねる。つまみの当たり判定は 44px） */
#rbar { position: relative; height: 44px; margin: 2px 0 6px; --l: 0; --r: 1; }
#rbar::before { content: ""; position: absolute; left: 22px; right: 22px; top: 20px; height: 4px; border-radius: 2px; background: #bbb; }
#rbar::after { content: ""; position: absolute; top: 20px; height: 4px; border-radius: 2px; background: #2a7de1;
  left: calc(22px + (100% - 44px) * var(--l)); width: calc((100% - 44px) * (var(--r) - var(--l))); }
#rbar input[type=range] { position: absolute; left: 0; top: 0; width: 100%; height: 44px; margin: 0; background: transparent; pointer-events: none; -webkit-appearance: none; appearance: none; }
#rbar input[type=range]::-webkit-slider-runnable-track { background: transparent; height: 44px; }
#rbar input[type=range]::-moz-range-track { background: transparent; height: 44px; }
#rbar input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 44px; height: 44px; border: 13px solid transparent; background: #2a7de1; background-clip: padding-box; border-radius: 50%; box-shadow: 0 0 0 2px #fff inset; }
#rbar input[type=range]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border: 13px solid transparent; background: #2a7de1; background-clip: padding-box; border-radius: 50%; }
/* 結果画面: 操作の段（戻る、再生、終了）。再生は中央 */
.row.ctl { display: grid; grid-template-columns: 1fr auto 1fr; }
.row.ctl #backres { justify-self: start; }
.row.ctl #restart { justify-self: end; }
.row.ctl #play { min-width: 96px; }
/* 結果画面は 1 画面に収める */
header .note { margin: .1rem 0 .4rem; font-size: .72rem; white-space: nowrap; }   /* 1 行にして、結果画面を 1 画面に収める */
/* 画像の保存: 画面全体を覆う表示。画像は長押しで「写真に追加」できる（touch-callout / user-select は無効にしない） */
#saved { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .88); display: flex; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; }
#saved .mbox { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; max-height: 100%; color: #fff; text-align: center; }
#saved p { margin: 0; font-size: .95rem; }
#savedimg { display: block; max-width: 100%; max-height: 62vh; background: #000; border: 1px solid #555; }
#saved .mrow { display: flex; gap: 16px; align-items: center; }
#saved a { color: #9cc7ff; font-size: .9rem; }
#saved button { min-width: 96px; height: 44px; }

/* サーブの選択（複数あるときだけ）: 動画の左下。局面ボタン（左上）の下 */
#servebar { position: absolute; left: 4px; bottom: 4px; z-index: 3; display: flex; align-items: center; gap: 2px; padding: 2px; background: rgba(0, 0, 0, .55); color: #fff; border-radius: 6px; font-size: 11px; }
#servebar button { width: 36px; height: 36px; padding: 0; font-size: 20px; line-height: 1; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .55); border-radius: 6px; }
#servebar button:disabled { opacity: .35; }
#servelabel { padding: 0 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 確認の表示（画面の中。暗い背景、中央にカード）。ボタンは高さ 44px 以上 */
#confirm { position: fixed; inset: 0; z-index: 110; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
#confirm .card { background: Canvas; color: CanvasText; border-radius: 12px; padding: 18px 16px 14px; width: min(100%, 340px); box-sizing: border-box; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
#confirm p { margin: 0 0 16px; font-size: 1.05rem; line-height: 1.5; }
#confirm .mrow { display: flex; gap: 12px; justify-content: flex-end; }
#confirm button { min-width: 100px; height: 48px; font-size: 1rem; }