/* 変数とベーススタイル */
:root {
  /* 白基調の明るいパレット */
  --bg: #f7f6f5;
  --panel: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --accent: #ff7a3a; /* コーラル */
  --accent-strong: #ff5a14;
  --danger: #e11d48;
  --ok: #10b981;
  --shadow: 0 8px 24px rgba(0,0,0,.15);
  --radius: 14px;
  --gap: 14px;
  /* 撮影エリア（縦 9:16）の最大幅：端末/デスクトップで “もう少し大きく” したい時はここだけ変更 */
  --shoot-max-width: 860px; /* 旧:780px  例) 900px / 75vh なども可 */
}
/* ---- Custom Background Chooser Modal ---- */
.chooser-modal.hidden { display: none; }
.chooser-modal { position: fixed; inset:0; z-index:6000; display:flex; align-items:center; justify-content:center; font-family:inherit; }
.chooser-modal .chooser-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(3px); }
.chooser-modal .chooser-panel { position:relative; width:min(90%,420px); background:#1e1f23; color:#fff; border-radius:20px; padding:28px 28px 32px; box-shadow:0 10px 40px -10px rgba(0,0,0,.6); animation:popIn .28s ease; }
.chooser-modal h2 { margin:0 0 12px; font-size:1.25rem; font-weight:600; }
.chooser-modal .desc { margin:0 0 20px; font-size:.85rem; line-height:1.5; color:#cbd0d6; }
.chooser-modal .btns { display:flex; flex-direction:column; gap:12px; }
.chooser-modal button.primary { font-size:0.95rem; padding:12px 18px; }
.chooser-modal button.primary.outline { background:transparent; border:2px solid #4ea8ff; color:#4ea8ff; }
.chooser-modal button.primary.outline:active { background:#163248; }
.chooser-modal button.close { position:absolute; top:6px; right:10px; background:transparent; border:none; color:#9aa2ab; font-size:1.4rem; line-height:1; cursor:pointer; }
.chooser-modal button.close:hover { color:#fff; }
@keyframes popIn { from { transform:translateY(14px) scale(.92); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }
/* ===== Custom Digital 7-Segment Font ===== */
@font-face {
  font-family: 'DSEG7Modern';
  src: url('fonts/DSEG7Modern-Italic.ttf') format('truetype');
  font-display: swap;
}
.font-dseg7 { font-family: 'DSEG7Modern', monospace; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  /* 白基調の柔らかいグラデーション背景 */
  background: radial-gradient(1200px 800px at 70% -10%, #ffffff 0%, #f3f1ee 60%);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ==== 端末縦向き警告オーバーレイ ==== */
#orientationOverlay { position: fixed; inset:0; background: rgba(10,10,14,0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index:10000; display:none; align-items:center; justify-content:center; padding: clamp(24px,4vw,48px); color:#fff; font-family:inherit; }
#orientationOverlay.active { display:flex; animation: orientFade .35s ease; }
#orientationOverlay .inner { max-width: 520px; width:100%; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)); border:1px solid rgba(255,255,255,0.18); border-radius: 28px; padding: clamp(24px,4vw,46px) clamp(20px,3.2vw,42px); box-shadow:0 20px 60px -18px rgba(0,0,0,0.6), 0 4px 18px -4px rgba(0,0,0,0.5); text-align:center; position:relative; }
#orientationOverlay .icon { font-size: clamp(48px,10vw,90px); line-height:1; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4)); margin-bottom: clamp(10px,2vh,20px); }
#orientationOverlay h2 { margin:0 0 12px; font-size: clamp(22px,4.8vw,40px); letter-spacing:.5px; }
#orientationOverlay p { margin:0 0 18px; font-size: clamp(14px,3.2vw,18px); line-height:1.55; }
#orientationOverlay p.small { font-size: clamp(12px,2.8vw,14px); opacity:.75; margin-bottom: 0; }
#orientationOverlay .actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:10px; }
#orientationOverlay button { min-width:150px; }
@keyframes orientFade { from{ opacity:0; transform:scale(.96);} to{opacity:1; transform:scale(1);} }
@media (orientation: portrait){ #orientationOverlay.force-hide-when-portrait { display:none !important; } }
/* ページ全体の横はみ出しを抑止 */
html, body, #app { overflow-x: hidden; }

/* iOS Safari の自動文字拡大を抑制 */
html { -webkit-text-size-adjust: 100%; }

/* アプリ全体レイアウト（シェル） */
#app {
  position: relative;
  height: 100dvh;
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--gap);
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
/* 撮影時は余白を除去し全画面フィット＋スクロール抑止 */
body.shoot-mode html, body.shoot-mode body { overflow: hidden; }
body.shoot-mode #app { padding:0; gap:0; grid-template-rows: 1fr; height:100dvh; }
/* shoot 画面の自身の内部パディングで余白を管理（外側は 0 に） */
body.shoot-mode #screen-shoot.screen.active { padding-left:0; padding-right:0; }
/* iOS 等のセーフエリア下部を確保したい場合は shoot-ui に余白追加 */
body.shoot-mode .shoot-ui { padding-bottom: calc( max( env(safe-area-inset-bottom), 12px ) ); }

/* ==== Map Admin Status Toggle ==== */
.status-label { display:block; font-size:12px; font-weight:600; color:#334155; margin-top:2px; }
.status-toggle { display:inline-flex; align-items:center; gap:8px; background:#0f172a; border:1px solid #334155; padding:6px 10px 6px 8px; border-radius:999px; position:relative; cursor:pointer; user-select:none; }
.status-toggle input.statusToggle { position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; }
.status-switch { width:40px; height:20px; background:#475569; border-radius:999px; position:relative; transition:background .25s; box-shadow:inset 0 0 0 1px #64748b; }
.status-switch::after { content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; background:#fff; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,.4); transition: transform .28s cubic-bezier(.4,.7,.2,1), background .25s; }
.status-toggle input.statusToggle:checked + .status-switch { background:#059669; box-shadow:inset 0 0 0 1px #047857; }
.status-toggle input.statusToggle:checked + .status-switch::after { transform:translateX(20px); }
.status-toggle .status-text { font-size:11px; font-weight:600; color:#e2e8f0; letter-spacing:.5px; }
.status-toggle input.statusToggle:not(:checked) ~ .status-text { color:#94a3b8; }
.status-toggle:focus-within { outline:2px solid #3b82f6; outline-offset:2px; }
.map-admin-panel .adv-fields label.status-label { display:grid; gap:4px; }
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  position: relative; /* 右上固定用の基準 */
}
/* 撮影時ヘッダー非表示 (JS が body に .shoot-mode を付与) */
body.shoot-mode header { display:none !important; }
/* コンパクトボタン（フルスクリーン等） */
.btn-compact { padding: 6px 10px; border-radius: 10px; font-size: 0.9rem; }
.btn-compact.hidden { display: none !important; }
.title {
  font-weight: 700;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.title .logo {
  width: 150px; height: auto;
  object-fit: contain;
  display: inline-block;
}
.muted { color: var(--muted); font-size: 0.9rem; }
.hint { color: var(--muted); font-size: 0.95rem; text-align: center; }
/* 画面名（オープニング等）をヘッダー右上に固定 */
#headerStep { position: absolute; top: 0; right: 0; }

/* ステッパー（進行状況）をヘッダー直下の通常フローに配置 */
#stepperBar { position: relative; z-index: 10; padding: 6px 12px 2px; margin: -6px 0 2px; background: transparent; }
#stepperBar .inner { max-width: 960px; margin: 0 auto; pointer-events: none; }
.stepper { position: relative; width: 100%; padding: 6px 0 2px; pointer-events: auto; }
.stepper .track { position: absolute; top: 18px; left: 0; right: auto; height: 4px; background: rgba(0,0,0,.12); border-radius: 999px; }
.stepper .bar { position: absolute; top: 18px; left: 0; height: 4px; background: var(--accent); border-radius: 999px; width: 0%; transition: width .28s cubic-bezier(.2,.7,.2,1); box-shadow: 0 0 12px rgba(255,154,84,.35); }
.stepper .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stepper .step { text-align: center; position: relative; z-index: 1; }
.stepper .step .dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(0,0,0,.14); border: 2px solid rgba(0,0,0,.2); margin: 0 auto 4px; box-sizing: content-box; }
.stepper .step .label { font-size: 12px; color: var(--muted); white-space: nowrap; }
.stepper .step.active .dot { background: var(--accent); border-color: var(--accent); }
.stepper .step.done .dot { background: var(--accent); border-color: var(--accent); }
.stepper .step.active .label { color: var(--text); }

/* 各画面（オープニング/背景/キャラ/撮影/プレビュー） */
.screen { display: none; height: 100%; }
.screen.active { display: grid; grid-template-rows: 1fr auto; gap: var(--gap); min-height: 0; overflow: hidden; }
/* 最初の行（コンテンツ側）は縮小可能＋必要に応じて縦スクロール */
.screen.active > :first-child { min-height: 0; overflow-y: auto; overflow-x: hidden; }
.center {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
}
.card {
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
/* オープニングのロゴ */
.opening-logo {
  width: clamp(270px, 60%, 560px);
  height: auto;
  display: block;
  margin: 0 auto 16px;
}
.btnbar { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
button, .btn {
  appearance: none; border: 0; outline: 0; cursor: pointer;
  padding: 12px 18px; border-radius: 12px; font-weight: 700; letter-spacing: .3px;
  background: linear-gradient(180deg, #ffffff, #f3f4f6);
  color: var(--text); border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 6px 16px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
}
button.primary { background: linear-gradient(180deg, #ff9a63, #ff7a3a); color: #ffffff; border-color: rgba(0,0,0,.12); }
button.ghost { background: transparent; border: 1px dashed rgba(0,0,0,.25); }
button:disabled { opacity: .5; cursor: not-allowed; }

/* 背景サムネイルのグリッド */
/* 背景サムネ：横スクロールのレール（縦長カード＋スナップ） */
/* サムネイル列: 全体サイズ拡大 (以前: clamp(160px,26vw,220px)) */
.thumb-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(190px, 30vw, 260px);
  width: 100%;
  justify-self: stretch;
  align-self: center;
  align-items: center; /* アイテムを縦方向中央に */
  gap: 14px;
  padding: 12px 24px 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x; /* 横スクロールを優先 */
  scroll-padding-left: 50%;
  scroll-padding-right: 50%;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: none;
  /* スクロールバー非表示（機能は維持） */
  -ms-overflow-style: none; /* IE/旧Edge */
  scrollbar-width: none; /* Firefox */
}
/* レール左右のナビ矢印 */
.thumb-rail-wrap { position: relative; display: grid; align-items: center; justify-items: center; width: 100%; overflow: hidden; }
.rail-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5;
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.5);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  /* テキスト矢印の字面ズレを防ぐため、文字は視覚的に非表示にしCSS矢印を描画 */
  font-size: 0; line-height: 0;
}
.rail-nav::before {
  content: '';
  width: 12px; height: 12px;
  border: solid #fff;
  border-width: 0 3px 3px 0; /* ＞ を構成 */
  display: block;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.rail-nav.left::before { transform: translate(-50%, -50%) rotate(135deg); }
.rail-nav.left { left: 6px; }
.rail-nav.right { right: 6px; }
.rail-nav:disabled { opacity: .4; cursor: default; }
.thumb-rail::-webkit-scrollbar { display: none; width: 0; height: 0; background: transparent; }
.thumb-rail::-webkit-scrollbar-thumb { display: none; background: transparent; }
.thumb-rail::-webkit-scrollbar-track { display: none; background: transparent; }

.thumb {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 2/3; /* 縦長 */
  isolation: isolate;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transform-origin: center center;
  transition: transform .28s cubic-bezier(.25,.8,.25,1), box-shadow .25s ease, outline-color .25s ease;
  will-change: transform;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; }
.thumb .badge { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.55); color: #fff; padding: 4px 8px; border-radius: 999px; font-size: 12px; }
.thumb button.select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; background: transparent; cursor: pointer; }
.thumb.selected { outline: 3px solid var(--accent-strong); box-shadow: 0 4px 18px -2px rgba(0,0,0,.35), 0 0 0 4px rgba(255,122,58,.25); transform: scale(1.07); }

/* レール中央のカウンタ */
.bg-rail-header { display: none; }
.thumb-rail-wrap { position: relative; }
.bg-counter-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: auto;
  top: auto;
  transform: none;
  display: inline-block;
  background: rgba(255,255,255,.9);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  box-shadow: var(--shadow);
  pointer-events: none;
  z-index: 6;
}

/* 下部のボタンエリア固定（各画面内） */
.bottom-area { display: grid; gap: 10px; padding: 10px 0 2px; }
/* セーフエリア下部のパディングを確保 */
.bottom-area { padding-bottom: calc(2px + env(safe-area-inset-bottom)); }

/* キャラクター選択 */
.char-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; align-items: stretch; padding: 4px; }
.char-card { position: relative; padding: 14px; border-radius: 16px; border: 1px solid rgba(0,0,0,.08); background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
  display: grid; grid-template-rows: auto 1fr; min-height: clamp(220px, 30vh, 360px);
}
.char-card .name { font-weight: 800; font-size: 20px; }
.char-card .lit { color: var(--accent); font-weight: 900; }
.char-card img { width: 100%; height: 100%; object-fit: contain; display:block; align-self: center; justify-self: center; filter: drop-shadow(0 6px 24px rgba(0,0,0,.35)); }
.char-card.selected { outline: 3px solid var(--accent-strong); box-shadow: 0 0 0 4px rgba(255, 122, 58, .25); }

/* 撮影（ビデオ・オーバレイ・操作ボタン） */
.shoot-wrap { position: relative; /* aspect-ratio で 9:16 を直接維持 */
  width: 100%; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; border: 1px solid rgba(0,0,0,.1); background:#000; margin:0 auto; max-width: var(--shoot-max-width); }

/* ---- shoot 画面専用レイアウト調整（flex 縦並び） ---- */
/* 撮影画面：ビューポートに対して上下中央（縦余白があればセンタリング） */
#screen-shoot.screen.active {
  /* 画面全体を 1 カラムグリッドで確保し撮影エリアを中央寄せ */
  display:grid; grid-template-rows: 1fr auto 1fr; /* 上余白 / 本体 / 下余白 */
  /* iOS のアドレスバー差異を吸収しつつ縦方向センター */
  min-height: 100dvh; /* 動的ビューポート */
  padding: clamp(8px, 1.8vh, 28px) 0; /* 横は shoot-wrap が中央になるので 0 */
  box-sizing:border-box;
}
/* 中央ラッパ（shoot-wrap を中央のセルに配置） */
#screen-shoot.screen.active > .shoot-wrap {
  grid-row: 2; /* 真ん中 */
  justify-self: center; align-self: center;
  width:95%; max-width: min(95%, var(--shoot-max-width));
}
/* 旧レイアウト互換：内部のボタン行(s)は shoot-wrap 内に存在するので別途高さ調整不要 */
#screen-shoot.screen.active .btnbar { margin-top: clamp(8px, 1.6vh, 20px); }

/* 画面幅に可能な限りフィットさせたい場合（ヘッダー非表示時、端から端まで） */
body.shoot-edge-to-edge #screen-shoot.screen.active > .shoot-wrap {
  --shoot-max-width: 100%; border-radius:0; max-width:100%; margin:0;
}
body.shoot-edge-to-edge #screen-shoot.screen.active { padding-left:0; padding-right:0; }

/* オプション: サイズバリエーション（HTML または JS で body にクラス付与して即変更可能） */
body.shoot-size-large { --shoot-max-width: 920px; }
body.shoot-size-xl { --shoot-max-width: 1000px; }
/* デバッグ用にフル幅気味で確認したい場合 */
body.shoot-size-fluid { --shoot-max-width: 100%; }
@media (min-height: 920px){
  /* 背の高い画面では少し余白を増やし中央寄せ感を出す */
  #screen-shoot.screen.active { padding-top: clamp(24px, 6vh, 72px); padding-bottom: clamp(24px, 6vh, 72px); }
}
/* フィット完了までのブラー表示 */
.shoot-wrap.blurred canvas#videoCanvas,
.shoot-wrap.blurred canvas#overlayCanvas { filter: blur(18px); -webkit-filter: blur(18px); }
.shoot-wrap.blurred::after{ content:''; position:absolute; inset:0; pointer-events:none; background:rgba(0,0,0,.12); }
video#camVideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: none; }
canvas#videoCanvas, canvas#overlayCanvas { position:absolute; inset:0; width:100%; height:100%; transition: filter .85s cubic-bezier(.25,.8,.25,1), -webkit-filter .85s cubic-bezier(.25,.8,.25,1); will-change:filter; }
/* JS フォールバック用オーバーレイ（filter 未対応/無効化端末向け） */
.shoot-wrap .blur-fallback-layer { position:absolute; inset:0; pointer-events:none; opacity:1; transition: opacity .6s ease; mix-blend-mode:normal; }
.shoot-wrap .blur-fallback-layer.fade-out { opacity:0; }
/* 上部ボタン（位置は上中央） */
.shoot-top { position: absolute; left: 50%; transform: translateX(-50%); top: 8px; z-index: 6; display:flex; flex-direction:column; align-items:center; gap:6px; }
.shoot-top #btnToggleCam { background: rgba(0,0,0,.6); color: #fff; border: 1px solid rgba(255,255,255,.6); box-shadow: 0 6px 16px rgba(0,0,0,.28); font-weight: 800; }
.shoot-top #btnToggleCam:hover { background: rgba(0,0,0,.65); }

/* カメラ目線ヒント（画面中央） */
.cam-look-hint{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:min(92%, 540px); font-size:clamp(20px, 5.2vw, 42px); line-height:1.25; text-align:center; color:#fff; background:rgba(0,0,0,.55); padding: clamp(18px, 4.5vw, 34px) clamp(22px,5.2vw,42px); border-radius:32px; box-shadow:0 10px 36px -6px rgba(0,0,0,.55); font-weight:800; letter-spacing:.5px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; will-change:opacity,transform; pointer-events:none; }
.cam-look-hint .small{ font-weight:600; opacity:.92; font-size:clamp(14px, 3vw, 26px); display:block; margin-top:10px; letter-spacing:.4px; }
.cam-look-hint::after{ content:''; position:absolute; inset:0; border:2px solid rgba(255,255,255,.15); border-radius:inherit; pointer-events:none; }
/* Auto fade sequence: hold then fade out */
/* フェードシーケンス調整：中央に大きいので表示時間をやや短縮 */
.cam-look-hint.auto-fade{ animation:camLookPop .45s cubic-bezier(.25,.8,.25,1), camLookHold 2.4s linear .45s 1, camLookFade 1s ease forwards 2.85s; }
@keyframes camLookPop{ from{ opacity:0; transform:translate(-50%,-48%) scale(.92); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes camLookHold{ from{opacity:1;} to{opacity:1;} }
@keyframes camLookFade{ from{opacity:1; transform:translate(-50%,-50%) scale(1);} to{opacity:0; transform:translate(-50%,-54%) scale(.985);} }
@-webkit-keyframes camLookPop{ from{ opacity:0; -webkit-transform:translate(-50%,-48%) scale(.92); } to{ opacity:1; -webkit-transform:translate(-50%,-50%) scale(1); } }
@-webkit-keyframes camLookHold{ from{opacity:1;} to{opacity:1;} }
@-webkit-keyframes camLookFade{ from{opacity:1; -webkit-transform:translate(-50%,-50%) scale(1);} to{opacity:0; -webkit-transform:translate(-50%,-54%) scale(.985);} }
@media (prefers-reduced-motion: reduce){ .cam-look-hint.auto-fade{ animation:none; opacity:1; } }
.shoot-ui { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding: 14px 16px 18px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.45)); }
.shoot-ui .left, .shoot-ui .center, .shoot-ui .right { display:flex; align-items:center; gap:12px; }
.shoot-ui .left { flex:1 1 0; justify-content:flex-start; }
.shoot-ui .center { flex:0 0 auto; justify-content:center; }
.shoot-ui .right { flex:1 1 0; justify-content:flex-end; }
.shoot-ui .back-btn { font-weight:600; }
.shoot-ui button.primary { min-width: 110px; }
.camera-loading { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.5); z-index: 6; font-weight: 700; }
.camera-loading { grid-template-rows: auto auto; gap: 14px; }
.camera-loading .seq-spinner{ order:-1; }
.camera-loading .loading-text { color: #d1d5db; font-weight: 600; font-size: 0.95rem; text-align: center; line-height: 1.4; }
.spinner { width: 54px; height: 54px; border-radius: 50%; border: 5px solid rgba(255,255,255,.18); border-top-color: #ccc; animation: spin 0.9s linear infinite; box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset; }
/* 1.5x 速度バリエーション（必要時 body.fast-spin 付与）*/
body.fast-spin .spinner{ animation-duration:0.6s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* プレビュー（パン/ズーム UI） */
.preview-wrap { position: relative; height: 100%; display: grid; grid-template-rows: 1fr; gap: 12px; }
.edit-stage { position: relative; background: #000; aspect-ratio: 9/16; width: 100%; max-height: 100%; border-radius: 18px; overflow: hidden; }
.edit-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* 編集プレビュー: 4K 縦 (2160x3840 = 9:16) 比率を維持し白地の余白を出さない */

canvas#previewCanvas { width: 100%; height: 100%; background: radial-gradient(400px 240px at 80% -10%, #ffffff 0%, #f3f1ee 60%); border-radius: 12px; border: 1px solid rgba(0,0,0,.08); touch-action: none; }
.edit-stage { position: relative; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; }
/* レイヤ順: preview(0) < draw(2) < sticker(3) < 編集UI(50+) */
canvas#drawCanvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; z-index:2; }
canvas#stickerCanvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; z-index:3; }
.edit-topbar { z-index:50; }
.edit-bottombar { z-index:50; }
.sticker-vertical .sticker-extra { z-index:60; }
.edit-topbar { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 6; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.edit-topbar .left, .edit-topbar .right { display: inline-flex; gap: 6px; }
.edit-topbar .left{ align-items:center; }
.edit-topbar .right{ margin-left:auto; align-items:center; }
.btn.small { padding: 0px 0px; border-radius: 9px; font-size: 0.9rem; }
.btn.tool.active { background: var(--accent); color: #fff; border-color: rgba(0,0,0,.12); box-shadow: 0 0 0 2px rgba(255,122,58,.25) inset; }
.sticker-flyout { position: absolute; top: 52px; left: 8px; z-index: 6; background: rgba(255,255,255,.96); border: 1px solid rgba(0,0,0,.12); border-radius: 12px; padding: 8px; box-shadow: var(--shadow); }
.sticker-flyout{ max-width: min(92vw, 880px); }
.sticker-flyout .stickers{ display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; gap:6px; scroll-snap-type:x proximity; touch-action:pan-x; overscroll-behavior-x:contain; }
.sticker-flyout .stickers::-webkit-scrollbar{ display:none; height:0; }
.sticker-flyout .stickers{ scrollbar-width:none; }
.sticker-flyout .st{ flex:0 0 auto; scroll-snap-align:center; }
.edit-bottombar { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 6; display: flex; justify-content: center; }
.edit-bottombar .colors { background: rgba(255,255,255,.96); border: 1px solid rgba(0,0,0,.12); border-radius: 6px; padding: 6px 8px; box-shadow: var(--shadow); display:flex; flex-wrap:wrap; gap:6px; }
.edit-bottombar .colors .swatch { width:22px; height:22px; }
.edit-bottombar .pen-controls{ flex-basis:100%; justify-content:flex-start; }
.tool-row .group { display: inline-flex; gap: 8px; }
.pen-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.colors { display: inline-flex; gap: 6px; align-items: center; }
.colors .swatch { width: 24px; height: 24px; border-radius: 12%; border: 1px solid rgba(0,0,0,.15); background: var(--c); cursor: pointer; }
.colors .color-picker input[type="color"] { width: 32px; height: 24px; border: 0; background: transparent; padding: 0; }
.pen-row .size { display: inline-flex; align-items: center; gap: 6px; }
.pen-types .btn.toggle.active { background: var(--accent); color: #fff; }
.sticker-row { display: flex; align-items: center; gap: 12px; justify-content: center; }
.stickers { display: inline-flex; gap: 6px; }
.stickers .st { font-size: 20px; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(0,0,0,.12); background: #fff; }
.share-row { display: flex; gap: 10px; justify-content: center; }

/* ヘルパークラス */
.hidden { display: none !important; }
.grow { flex: 1; }

/* =============================
   モバイル最適化（崩れ対策）
   ============================= */
@media (max-width: 480px) {
  :root {
    --gap: 10px;
    --radius: 12px;
  }

  #app { padding: 10px; gap: var(--gap); }

  header { gap: 8px; }
  .title { font-size: 0.95rem; }
  .title .logo { width: 120px; height: auto; }
  #headerStep { font-size: 0.9rem; }

  /* ステッパー：モバイルではドットのみを表示（ラベル非表示） */
  #stepperBar { padding: 4px 8px 0; margin: -4px 0 0; }
  .stepper { padding: 4px 0 0; }
  .stepper .track { top: 14px; height: 3px; }
  .stepper .bar { top: 14px; height: 3px; }
  /* モバイルでもラベルを表示（小さめ） */
  .stepper .step .label { display: block; font-size: 10px; line-height: 1.2; margin-top: 2px; white-space: nowrap; }
  .stepper .step .dot { width: 10px; height: 10px; margin-bottom: 0; }

  /* 背景レールのカードをやや小さめに */
  /* モバイル時も拡大 (以前: clamp(128px,42vw,180px)) */
  .thumb-rail { grid-auto-columns: clamp(150px, 56vw, 210px); gap: 10px; padding: 20px 18px 40px; }
  /* タップしやすい大きさ（44px） */
  .rail-nav { width: 44px; height: 44px; }
  .rail-nav::before { width: 14px; height: 14px; border-width: 0 3px 3px 0; }
  .rail-nav.left { left: 4px; }
  .rail-nav.right { right: 4px; }
  /* カウンタは中央配置のまま、サイズだけ調整 */
  .bg-counter-badge { font-size: 11px; padding: 5px 8px; }

  /* キャラカードをコンパクトに */
  .char-card { padding: 10px; border-radius: 12px; min-height: 200px; }
  .char-card .name { font-size: 18px; }

  /* 極小幅では1カラムにフォールバック */
  .char-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* ヒント文を簡略化/非表示で高さ圧縮 */
  .hint { font-size: 0.85rem; }
}

@media (max-width: 360px) {
  /* 360px以下は1カラムに */
  .char-grid { grid-template-columns: 1fr; }
  .thumb-rail { grid-auto-columns: clamp(120px, 64vw, 160px); }
  .hint { display: none; }
}

/* iOS Safari のツールバー起因の高さ揺れ対策（影響小） */
@supports (-webkit-touch-callout: none) {
  #app { min-height: 100vh; height: 100dvh; }
}

/* ===== Custom Added: Sticker Size HUD & Pen Controls ===== */
.pen-controls{ display:inline-flex; align-items:center; gap:8px; margin-left:8px; }
.pen-controls:empty{ display:none; }
.pen-controls label{ font-size:11px; color:#444; display:inline-flex; align-items:center; gap:4px; }
.pen-controls input[type=range]{ width:110px; }
.pen-controls .btn.tiny{ padding:2px 8px; font-size:10px; }
/* ツール画像ボタン */
.tool-icon{ padding:4px 6px; }
.tool-icon img{ width:56px; height:56px; display:block; pointer-events:none; }
.tool-icon.active{ outline:2px solid var(--accent); box-shadow:0 0 0 3px rgba(255,122,58,.35); }
.neon-toggle{ z-index:1; padding:0px 0px; }
.neon-toggle img{ width:46px; height:46px; display:block; pointer-events:none; }
.neon-toggle.active{border-radius: 6px;outline:2px solid #ffd54b; box-shadow:0 0 0 3px rgba(255,213,75,.4); }
/* ペン太さボタン */
.pen-size-buttons{ display:inline-flex; gap:6px; align-items:center; margin-right:8px; }
.pen-size-buttons.vertical{ flex-direction:column; margin:6px 0 0; }
.pen-inline-panel{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-left:4px; }
.pen-inline-panel .neon-toggle{ width:40px; justify-content:center; }
.edit-topbar .pen-inline-panel{ position:relative; }
/* 新: 縦並びペンツール */
.pen-vertical{ position:relative; display:flex; flex-direction:column; align-items:center; }
/* 追加パネルは絶対配置で重ね、表示切替のみで親の幅/高さを変えない */
.pen-vertical .pen-extra{ position:absolute; top:100%; left:50%; transform:translate(-50%, 8px); display:flex; flex-direction:column; align-items:center; gap:8px; background:rgba(255,255,255,.96); border:1px solid rgba(0,0,0,.12); padding:8px 10px 10px; border-radius:14px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .22s cubic-bezier(.25,.8,.25,1); }
.pen-vertical .pen-extra::before{ content:''; position:absolute; top:-6px; left:50%; width:14px; height:14px; background:inherit; border:inherit; transform:translate(-50%,0) rotate(45deg); border-bottom:none; border-right:none; box-shadow:-2px -2px 4px rgba(0,0,0,.04); }
.pen-vertical .pen-extra .pen-size-buttons.vertical{ flex-direction:column; margin:4px 0 0; }
.pen-vertical .pen-extra .pen-size-buttons.vertical .pen-size-btn img{ width:26px; height:26px; }
/* アクティブ時に表示 */
.pen-vertical #toolPen.tool.active + .pen-extra{ opacity:1; pointer-events:auto; transform:translate(-50%, 4px); }
.btn-undo, .btn-next{ display:flex; align-items:center; justify-content:center; height:39px; width:52px; }
.btn-undo{ background:linear-gradient(180deg,#ffffff,#f0f2f5); }
.btn-next{ background:linear-gradient(180deg,#ffffff,#eef5ff); }
.btn-undo:hover{ background:linear-gradient(180deg,#fcfcfc,#e9edf1); }
.btn-next:hover{ background:linear-gradient(180deg,#ffffff,#e3f0ff); }
.pen-size-btn{ background:rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.15); padding:4px 6px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.12); }
.pen-size-btn img{ width:28px; height:28px; display:block; object-fit:contain; pointer-events:none; }
.pen-size-btn.active{ outline:2px solid var(--accent); box-shadow:0 0 0 3px rgba(255,122,58,.35); }
.pen-size-btn:focus-visible{ outline:2px solid #2563eb; }
/* シェアボタン（中央右寄せ） */
/* 右下フローティング SNS シェア */
.btn-share{ position:absolute; bottom:14px; right:14px; width:54px; height:54px; padding:0; border-radius:50%; background:rgba(255,255,255,.35); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center; color:#222; box-shadow:0 4px 18px -4px rgba(0,0,0,.32); transition:background .22s ease, transform .18s ease, box-shadow .25s ease; }
.btn-share.shift-up{ transform:translateY(-88px); }
.btn-share .icon-share{ width:28px; height:28px; stroke:currentColor; }
.btn-share:hover{ background:rgba(255,255,255,.55); box-shadow:0 6px 22px -4px rgba(0,0,0,.4); }
.btn-share:active{ transform:scale(.92); }
@media (max-width:640px){ .btn-share{ width:50px; height:50px; right:10px; bottom:10px; } .btn-share .icon-share{ width:24px; height:24px; } }
@media (prefers-color-scheme: dark){ .btn-share{ background:rgba(30,30,34,.45); border-color:rgba(255,255,255,.25); color:#f5f5f5; } .btn-share:hover{ background:rgba(60,60,66,.55); } }

/* ステッカーツール縦型展開 */
.sticker-vertical{ position:relative; display:flex; flex-direction:column; align-items:center; }
.sticker-vertical .sticker-extra{ position:absolute; top:100%; left:50%; transform:translate(-50%,8px); background:rgba(255,255,255,.96); border:1px solid rgba(0,0,0,.12); border-radius:14px; padding:10px 12px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .22s cubic-bezier(.25,.8,.25,1); max-width: min(92vw, 360px); }
.sticker-vertical .sticker-extra[aria-hidden="false"]{ pointer-events:auto; }
.sticker-vertical .sticker-extra::before{ content:''; position:absolute; top:-6px; left:50%; width:14px; height:14px; background:inherit; border:inherit; transform:translate(-50%,0) rotate(45deg); border-bottom:none; border-right:none; box-shadow:-2px -2px 4px rgba(0,0,0,.04); }
.sticker-vertical .stickers{ display:flex; gap:6px; overflow-x:auto; max-width:100%; padding-bottom:2px; }
.sticker-vertical .stickers::-webkit-scrollbar{ display:none; }
.sticker-vertical #toolSticker.tool.active + .sticker-extra{ opacity:1; pointer-events:auto; transform:translate(-50%,4px); }

/* カラーバー表示時 シェアボタン少し上へ (JS で .share-shift を付与)*/
.edit-stage.share-shift .btn-share{ transform:translateY(-48px); }
/* スクリーンリーダー専用 */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Manual Mode Prompt Overlay */
.camera-manual-prompt{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:10000; background:rgba(0,0,0,.45); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); padding:24px; }
.camera-manual-prompt.hidden{ display:none !important; }
.camera-manual-prompt .inner{ max-width:480px; width:100%; background:rgba(255,255,255,0.95); border:1px solid rgba(0,0,0,.12); border-radius:18px; padding:28px 26px 24px; box-shadow:0 12px 40px -4px rgba(0,0,0,.35); animation:popIn .28s cubic-bezier(.25,.8,.25,1); font-size:15px; line-height:1.6; }
.camera-manual-prompt .inner p{ margin:0 0 18px; font-weight:600; letter-spacing:.3px; }
.camera-manual-prompt .btnbar{ display:flex; gap:14px; justify-content:flex-end; }
.camera-manual-prompt button{ min-width:110px; font-size:14px; }
button.secondary{ background:linear-gradient(180deg,#f0f2f5,#e5e7eb); color:#374151; }
@keyframes popIn{ from{ transform:translateY(12px) scale(.96); opacity:0; } to{ transform:translateY(0) scale(1); opacity:1; } }

/* ===== ダウンロード生成中ローディング ===== */
.download-loading{ position:fixed; inset:0; display:grid; place-items:center; z-index:12000; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); grid-template-rows:auto auto; gap:18px; font-weight:700; text-align:center; padding:24px; }
.download-loading .loading-text{ color:#e5e7eb; font-size:.95rem; line-height:1.5; text-shadow:0 2px 4px rgba(0,0,0,.35); }
.download-loading .spinner{ width:60px; height:60px; border-width:6px; border-top-color:#ddd; }
.download-loading .seq-spinner{ order:-1; }

/* 共通シーケンススピナー */
.seq-spinner{ display:block; width:32px; height:32px; background:transparent; }

/* ===== カスタム配置 (タイプ06) ===== */
#screen-custom.screen.active{ grid-template-rows:1fr; }
#screen-custom .custom-stage{ position:relative; display:grid; grid-template-rows:1fr auto; height:100%; }
#screen-custom .compose-wrap{ position:relative; height:100%; border-radius:18px; overflow:hidden; background:#000; border:1px solid rgba(0,0,0,.1); }
#screen-custom canvas#customComposeCanvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; object-fit:contain; }
#screen-custom .compose-hint{ position:absolute; left:0; right:0; bottom:0; padding:14px 16px 20px; text-align:center; font-size:12px; font-weight:600; letter-spacing:.4px; color:#eee; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55)); pointer-events:none; }
#screen-custom .custom-ui{ display:flex; justify-content:center; gap:14px; padding:14px 0 4px; }
#screen-custom .custom-ui button{ background:rgba(255,255,255,.9); }
#screen-custom .custom-ui button.primary{ background:linear-gradient(180deg,#ff9a63,#ff7a3a); color:#fff; }