/* マニュアルメーカー（手元用・スマホ）
   ⚠ 外部CDN・Google Fonts は読まない。端末のフォントに落とす（Windows も想定） */

:root,[data-theme="brand"]{      /* ブランド（ブラウン×ゴールド・アイボリー） */
 --bg:#f3efe8;--card:#fff;--ink:#3a2c1e;--sub:#8a8178;--mute:#b3aa9c;--line:#ece6dc;
 --pill:#412e19;--brown:#7c6355;--gold:#e69d4e;--green:#5a7d4f;--red:#c9584f;
 --shadow:0 8px 24px rgba(60,45,25,.09)}
[data-theme="dark"]{             /* 暗室（セーフライトの赤）。着付けの部屋が暗いとき用 */
 --bg:#17151a;--card:#232028;--ink:#efe9e4;--sub:#a9a1a8;--mute:#6f6873;--line:#332e39;
 --pill:#efe9e4;--brown:#b4404a;--gold:#e0a04a;--green:#6aa87e;--red:#d4454f;
 --shadow:0 10px 30px rgba(0,0,0,.45)}
[data-theme="dark"] .tag{background:#2c2733;color:#a9a1a8}
[data-theme="dark"] .cue{background:#2c2733;color:#e0a04a}
[data-theme="dark"] .cue.hit{background:#e0a04a;color:#231f28}
[data-theme="dark"] .b.sm2{background:#2c2733;color:var(--ink)}
[data-theme="dark"] .now{background:#1d1a22}
[data-theme="dark"] .warn{background:#2e1f22;color:#e7a9ad}
[data-theme="dark"] .warn b{color:#f0959c}
[data-theme="dark"] .sm{background:#2c2733;border-color:#3d3646;color:var(--sub)}
[data-theme="dark"] .cp.sub{background:#2c2733;color:var(--ink)}
[data-theme="dark"] .out{background:#0f0d12}
[data-theme="dark"] .bar{background:rgba(23,21,26,.92)}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.75;-webkit-font-smoothing:antialiased;
 font-family:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Yu Gothic UI','Meiryo',sans-serif;
 overscroll-behavior-y:none}

/* 下の操作バーのぶんだけ本文を空ける（セーフエリア込み） */
.wrap{max-width:680px;margin:0 auto;padding:22px 16px calc(150px + env(safe-area-inset-bottom));}

.head{display:flex;align-items:flex-start;gap:12px}
.tag{font-weight:700;font-size:10px;letter-spacing:.18em;background:#efe7dc;color:#7a6550;
 padding:4px 11px;border-radius:999px;display:inline-block}
h1{font-weight:900;font-size:23px;letter-spacing:-.02em;margin:9px 0 5px}
.themes{display:flex;gap:6px;margin-left:auto;flex-shrink:0}
.th{border:1px solid var(--line);background:var(--card);color:var(--sub);border-radius:999px;
 width:38px;height:38px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.th.on{background:var(--pill);color:var(--bg);border-color:var(--pill)}
.th:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lede{color:var(--sub);font-size:13.5px;margin:0}
.lede b{color:var(--ink)}

/* ── カメラ ───────────────────────────────── */
.deck{margin-top:16px}
.view{position:relative;width:100%;aspect-ratio:3/4;max-height:46vh;background:#12100f;border-radius:18px;
 overflow:hidden;box-shadow:var(--shadow)}
.view video{width:100%;height:100%;object-fit:cover;display:block;background:#12100f}
.view .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 text-align:center;color:#cdc3b6;font-size:14px;padding:24px;line-height:1.9}
.view .ph b{color:#fff}
.hud{position:absolute;left:0;right:0;top:0;padding:12px 14px;display:flex;align-items:center;gap:10px;
 background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));pointer-events:none}
.chip{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#cdc3b6}
.chip.rec{color:#ff6b62;display:flex;align-items:center;gap:6px}
.chip.rec::before{content:"";width:8px;height:8px;border-radius:50%;background:#ff6b62;
 box-shadow:0 0 0 0 rgba(255,107,98,.6);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,107,98,.5)}
 70%{box-shadow:0 0 0 11px rgba(255,107,98,0)}100%{box-shadow:0 0 0 0 rgba(255,107,98,0)}}
.bigtm{font-variant-numeric:tabular-nums;font-weight:700;font-size:26px;line-height:1;
 letter-spacing:-.03em;color:#fff;margin-left:auto;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.cnt{font-size:12px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.cnt b{font-variant-numeric:tabular-nums;font-size:15px}
.ear{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:7px;
 background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:999px;padding:8px 14px;
 font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;min-height:34px}
.ear .dot{width:7px;height:7px;border-radius:50%;background:#7ede9a}
.ear.ng{background:rgba(201,88,79,.92)}
.ear.ng .dot{background:#fff}

/* ── いま聞こえている言葉 ──────────────────────── */
.now{background:var(--card);border-radius:14px;padding:13px 16px;margin-top:12px;min-height:62px;
 font-size:14px;color:var(--mute);box-shadow:var(--shadow)}
.now b{color:var(--ink);font-weight:500}
.cues{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.cue{background:#eef3ec;color:#3f6a49;border-radius:999px;padding:5px 11px;font-size:11.5px;font-weight:700}
.cue.hit{background:#3f6a49;color:#fff}
.opt{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:14px;
 padding:13px 15px;margin-top:12px;box-shadow:var(--shadow);font-size:12.5px;color:var(--sub);
 cursor:pointer;min-height:52px}
.opt input{width:24px;height:24px;flex-shrink:0;accent-color:var(--brown)}
.opt b{color:var(--ink)}
.stat{font-size:12.5px;color:var(--sub);margin:12px 0 0}
.stat b{color:var(--ink)}

/* ── 見出し ───────────────────────────────── */
h2.sec{font-weight:900;font-size:18px;margin:32px 0 5px;display:flex;align-items:baseline;gap:10px;
 letter-spacing:-.01em}
h2.sec::before{content:attr(data-en);font-size:9.5px;font-weight:700;letter-spacing:.2em;
 color:var(--mute);text-transform:uppercase}
.secsub{color:var(--sub);font-size:12.5px;margin:0 0 12px}
.secsub b{color:var(--ink)}

/* ── 切り出したコマ（縦持ちなので1枚ずつ大きく） ───── */
.shots{display:flex;flex-direction:column;gap:14px}
.sh{background:var(--card);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.sh .pic{position:relative;background:#12100f;line-height:0}
.sh .pic img{width:100%;max-height:52vh;object-fit:contain;display:block}
.sh .wait{height:180px;display:flex;align-items:center;justify-content:center;color:#8c8278;font-size:12.5px}
.sh .no{position:absolute;left:11px;top:10px;background:rgba(0,0,0,.62);color:#fff;
 font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:3px 9px;border-radius:5px}
.sh .hid{position:absolute;right:11px;top:10px;background:rgba(90,125,79,.92);color:#fff;
 font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:5px}
.si{padding:12px 15px 0}
.st{font-weight:700;font-size:11.5px;color:var(--gold);font-variant-numeric:tabular-nums;margin:0 0 3px}
.sw{font-size:13.5px;margin:0}
.sa{display:flex;gap:7px;padding:12px 15px 14px;flex-wrap:wrap}
.sm{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 13px;min-height:42px;
 font-family:inherit;font-size:12.5px;font-weight:700;color:var(--sub);cursor:pointer;flex:1}
.sm:disabled{opacity:.4}
.sm.del{flex:0 0 auto}
.sm.del:active{border-color:var(--red);color:var(--red)}

/* ── 喋った内容 ───────────────────────────── */
.log{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px;
 font-size:13px;line-height:1.85;max-height:300px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.l{margin:0 0 5px;display:flex;gap:9px}
.l .t{font-size:10.5px;color:var(--mute);font-weight:700;font-variant-numeric:tabular-nums;
 flex-shrink:0;padding-top:3px}
.l.cue .x{color:#3f6a49;font-weight:700}
.empty{color:var(--mute);margin:0;font-size:13px}

/* ── 書き出し ─────────────────────────────── */
.outbar{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:32px 0 10px}
.outbar h2{margin:0;flex:1 0 100%}
.cp{border:none;border-radius:999px;padding:12px 22px;min-height:46px;font-family:inherit;font-size:13.5px;
 font-weight:700;background:var(--brown);color:#fff;cursor:pointer;flex:1}
.cp:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cp.done{background:var(--green)}
.cp.sub{background:#e9e3d8;color:var(--ink)}
.out{background:#2e241a;color:#f0e9df;border-radius:14px;padding:18px;margin-top:12px;
 white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
 font-size:11.5px;line-height:1.8;user-select:all;max-height:320px;overflow-y:auto}
.warn{background:#fdeeee;border-radius:14px;padding:15px 18px;margin-top:26px;font-size:12.5px;color:#8a4a4a}
.warn b{color:#b84f4f}
.foot{font-size:11px;color:var(--mute);text-align:center;margin:22px 0 0}

/* ── 下に固定する操作ボタン（片手で押せる大きさ） ───── */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:10px;align-items:stretch;
 padding:12px 16px calc(12px + env(safe-area-inset-bottom));
 background:rgba(243,239,232,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.b{border:none;border-radius:16px;font-family:inherit;font-weight:700;cursor:pointer;
 transition:transform .08s;-webkit-tap-highlight-color:transparent}
.b:active{transform:scale(.97)}
.b:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.b.go{flex:1;min-height:62px;font-size:18px;background:var(--red);color:#fff}
.b.mk{flex:1;min-height:76px;font-size:21px;background:var(--gold);color:#3a2c1e;
 box-shadow:0 6px 18px rgba(230,157,78,.35)}
.b.mk:disabled{background:#d8d2c8;color:#a49b8f;box-shadow:none}
.b.sm2{flex:0 0 88px;min-height:76px;font-size:13.5px;background:#e9e3d8;color:var(--ink);
 display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.35}
.b.sm2.done{background:var(--brown);color:#fff}

/* 印を打った瞬間のフラッシュ */
.flash{position:fixed;inset:0;background:var(--gold);opacity:0;pointer-events:none;z-index:99}
.flash.go{animation:fl .5s ease-out}
@keyframes fl{0%{opacity:.22}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.flash.go{animation:none}.chip.rec::before{animation:none}}

/* ── 隠す（ぼかし）の画面 ───────────────────── */
.setup{position:fixed;inset:0;background:rgba(20,15,10,.82);z-index:60;display:flex;
 align-items:center;justify-content:center;padding:12px}
.setup[hidden]{display:none}
/* ⚠ 画面の中で完結させる。スマホだと「この形で隠す」が画面の外に出てしまうため、
   絵の方を縮めて、ボタンは必ず下に居させる */
.sheet{background:var(--card);border-radius:16px;padding:14px;width:100%;max-width:640px;
 max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);
 display:flex;flex-direction:column;gap:10px}
.sh-top{flex:0 0 auto}
.sh-t{font-weight:900;font-size:17px;margin:0 0 5px}
.sh-s{font-size:12px;color:var(--sub);margin:0;line-height:1.65}
.stage{position:relative;flex:1 1 auto;min-height:0;background:#111;border-radius:10px;overflow:hidden;
 display:flex;align-items:center;justify-content:center}
.stage canvas{display:block;width:auto;height:auto;max-width:100%;max-height:100%;
 touch-action:none;cursor:crosshair}
.sh-n{font-size:12px;color:var(--mute);margin:0;flex:0 0 auto}
.sh-b{display:flex;gap:8px;flex:0 0 auto;padding-bottom:env(safe-area-inset-bottom)}

/* 横持ち・大きい画面では左右に並べる */
@media(min-width:720px){
  .view{aspect-ratio:16/9;max-height:none}
  .wrap{padding-bottom:calc(130px + env(safe-area-inset-bottom))}
}