/* Photoshop / Clip Studio ダークモード級の明度。 ニュートラル寄りのグレーで青みは抑えめ */
  :root { --bg:#3a3c40; --panel:#46484c; --panel2:#525559; --line:#2c2d30; --txt:#e6e6e8; --sub:#a8a9ad;
    --accent:#e0a44b;        /* 署名アクセント=ブラス/琥珀 (既定)。 ヘッダー「UI color」でユーザーが自由変更→localStorage 永続 */
    --accent-ink:#1c1408;    /* アクセント上の文字/印の色。 UI color 変更時に明度で自動 dark/light 切替 (どの色でも可読) */
    --accent2:#5ab1f6;       /* 旧シアン=副アクセント (情報/補助。 一時 #08121d ペアの暗インクは流用) */
    --font-ui:"Segoe UI","Yu Gothic UI","Meiryo",system-ui,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;   /* Windows標準を明示先頭(Segoe UI/游ゴシックUI/メイリオ)→system-ui フォールバック。 webフォントは不使用=普通のツールの質感 */
    --font-display:var(--font-ui);                                 /* 見出しもOS標準フォント (Sairaの"なめらか/デザインされた"感を排除) */
    --font-mono:Consolas,ui-monospace,"Cascadia Mono",Menlo,monospace; }   /* 数値=Windows標準の等幅 Consolas (計器感は維持しつつネイティブ) */
  /* tip ボタンの返事フキダシ: ボタン下に出てバイバイみたいに揺れ、 最後に上にふっこむ */
  .tip-thanks { position:fixed; transform-origin:50% 0%; transform:translate(-50%,0); background:#f5d76e; color:#1a1a1a; padding:6px 12px; border-radius:2px; font-weight:800; font-size:14px; letter-spacing:0.5px; pointer-events:none; white-space:nowrap; z-index:9999; box-shadow:0 2px 8px rgba(0,0,0,.4); animation:tipThanksWave 2.4s ease-out forwards; }
  /* しっぽは上向き三角 (ボタンの下に出るので上を指す) */
  .tip-thanks::after { content:''; position:absolute; left:50%; top:-6px; transform:translateX(-50%); width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:7px solid #f5d76e; }
  @keyframes tipThanksWave {
    0%   { transform:translate(-50%,-6px) scale(0.7); opacity:0; }
    12%  { transform:translate(-50%,0)    scale(1);   opacity:1; }
    25%  { transform:translate(calc(-50% - 7px),0) scale(1) rotate(-3deg); opacity:1; }
    40%  { transform:translate(calc(-50% + 7px),0) scale(1) rotate(3deg);  opacity:1; }
    55%  { transform:translate(calc(-50% - 5px),0) scale(1) rotate(-2deg); opacity:1; }
    70%  { transform:translate(calc(-50% + 5px),0) scale(1) rotate(2deg);  opacity:1; }
    82%  { transform:translate(-50%,0) scale(1); opacity:1; }
    100% { transform:translate(-50%,-8px) scale(0.2); opacity:0; }
  }
  * { box-sizing:border-box; }
  /* scrollbars: track blends with panel, thumb a muted dark gray */
  * { scrollbar-width:thin; scrollbar-color:#3a3d4a transparent; }
  ::-webkit-scrollbar { width:12px; height:12px; }
  ::-webkit-scrollbar-track { background:transparent; }
  ::-webkit-scrollbar-thumb { background:#3a3d4a; border-radius:2px; border:3px solid transparent; background-clip:content-box; }
  ::-webkit-scrollbar-thumb:hover { background:#4a4e60; background-clip:content-box; }
  ::-webkit-scrollbar-corner { background:transparent; }
  html,body { margin:0; height:100%; overflow:hidden; background:var(--bg); color:var(--txt); font-family:var(--font-ui); font-size:13px; }
  .app { display:flex; height:100%; }
  .col { background:var(--panel); overflow-y:auto; flex:0 0 auto; }
  .col.left { width:430px; border-right:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; }
  .col.right { width:420px; border-left:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; }
  .leftcols, .rightcols { display:flex; flex:1; min-height:0; }
  .subcol { flex:1 1 0; width:0; overflow-y:auto; }
  .subcol+.subcol { border-left:1px solid var(--line); }
  .subcol.col-empty { display:none; }
  .col.col-hidden { display:none !important; }
  .brand { padding:7px 12px 3px; font-size:15px; font-weight:700; font-family:var(--font-display); letter-spacing:.01em; }
  .brand small { display:block; color:var(--sub); font-weight:400; font-size:10.5px; margin-top:2px; }
  .brand .ver { display:inline-block; margin-left:6px; padding:1px 6px; border:1px solid var(--accent); border-radius:2px; font-size:10px; font-weight:600; color:var(--accent); letter-spacing:.3px; vertical-align:1px; }
  .dock { border-bottom:1px solid var(--line); }
  .dock-head { padding:4px 12px; font-size:11.5px; font-family:var(--font-display); font-weight:600; color:var(--sub); text-transform:uppercase; letter-spacing:.07em; cursor:grab; user-select:none; display:flex; align-items:center; gap:6px; touch-action:none; }
  /* セクション開閉マーカー: CSSボーダー製シェブロン(∨)。 大きめ&くっきり&テーマ色追従。 開=下向き / 閉=右向き */
  .dock-head::before { content:''; box-sizing:border-box; flex:0 0 auto; width:9px; height:9px; margin-right:2px; border-top:2px solid var(--sub); border-right:2px solid var(--sub); transform:rotate(135deg); transition:transform .12s; }
  .dock-head:hover::before { border-color:var(--txt); }
  .dock.collapsed .dock-head::before { transform:rotate(45deg); }
  .dock.collapsed .dock-body { display:none; }
  .dock.dock-dragging { opacity:.45; }
  .dock.drop-above { box-shadow:inset 0 3px 0 var(--accent); }
  .dock.drop-below { box-shadow:inset 0 -3px 0 var(--accent); }
  .col.dock-target { background:#262935; }
  .dock-body { padding:3px 12px 8px; }
  .row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:6px; }
  .row:first-child { margin-top:0; }
  button, select, input[type=number] { font:inherit; color:var(--txt); background:var(--panel2); border:1px solid var(--line); border-radius:2px; padding:3px 8px; cursor:pointer; transition:.12s; }
  button:hover, select:hover { border-color:var(--accent); }
  button.on { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600; }
  button:disabled { opacity:.4; cursor:default; }
  .seg { display:flex; gap:5px; width:100%; }
  .seg button { flex:1; padding:3px 3px; }
  /* 自作スライダー: フラットな溝＋真鍮つまみ(工具フェーダー感)。 つまみは大きめ=掴みやすい */
  input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:18px; background:transparent; cursor:pointer; }
  input[type=range]::-webkit-slider-runnable-track { height:4px; border-radius:2px; background:var(--line); }
  input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:6px; height:16px; margin-top:-6px; border-radius:0; background:var(--accent); border:1px solid rgba(0,0,0,.45); }
  input[type=range]:hover::-webkit-slider-thumb { background:#ecb45e; }
  input[type=range]::-moz-range-track { height:4px; border-radius:2px; background:var(--line); }
  input[type=range]::-moz-range-thumb { width:6px; height:16px; border-radius:0; background:var(--accent); border:1px solid rgba(0,0,0,.45); }
  input[type=number] { width:60px; cursor:text; }
  /* テキスト入力: 既定の真っ白は暗UIで悪目立ち→薄いグレー地+黒文字(視認性は維持)。 .nmedit 等は高specで個別の暗地が勝つ */
  input[type=text] { font:inherit; color:#1a1a1a; background:#c4c4c8; border:1px solid var(--line); border-radius:2px; padding:3px 6px; }
  input[type=text]:focus { outline:none; border-color:var(--accent); background:#d4d4d7; }
  /* 自作チェック: 真鍮塗り＋暗インクのチェックマーク (ネイティブ accent-color をやめる) */
  input[type=checkbox] { -webkit-appearance:none; appearance:none; width:16px; height:16px; border:1.5px solid var(--sub); border-radius:2px; background:var(--panel2); cursor:pointer; margin:0; position:relative; flex:0 0 auto; transition:.12s; }
  input[type=checkbox]:hover { border-color:var(--accent); }
  input[type=checkbox]:checked { background:var(--accent); border-color:var(--accent); }
  input[type=checkbox]:checked::after { content:''; position:absolute; left:4px; top:1px; width:4px; height:8px; border:solid var(--accent-ink); border-width:0 2px 2px 0; transform:rotate(45deg); }
  input[type=color] { width:28px; height:24px; padding:0; border:1px solid var(--line); border-radius:2px; background:none; cursor:pointer; flex:0 0 auto; }
  input[type=color]:hover { border-color:var(--accent); }
  input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
  input[type=color]::-webkit-color-swatch { border:none; border-radius:2px; }
  /* select: ネイティブ三角を消して独自シェブロン */
  select { -webkit-appearance:none; appearance:none; padding-right:24px; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="%23a8a9ad" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>'); background-repeat:no-repeat; background-position:right 8px center; }
  /* 数値=計器のように桁揃え。 専用バッジは等幅で"ゲージ"感 */
  #topbar { font-variant-numeric:tabular-nums; }
  #mapSizeLbl, #spInfo, #perspAngVal, #perspVertVal, .crtrow b, .texrow b { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
  label.chk { display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none; }
  label.f { font-size:11px; color:var(--sub); display:block; margin-top:8px; margin-bottom:4px; }
  .val { color:var(--sub); font-size:11px; }
  .pal { display:grid; grid-template-columns:repeat(8,1fr); gap:4px; }
  .sw { aspect-ratio:1; border-radius:2px; border:2px solid transparent; cursor:pointer; position:relative; }
  .sw.on { border-color:#fff; box-shadow:0 0 0 1px #000 inset; }
  /* アニメ循環対象: 角に黄色マーカー + 軽くパルス */
  .sw.anim::after { content:''; position:absolute; top:1px; right:1px; width:6px; height:6px; background:#f5d76e; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.6); animation:swAnimPulse 1s ease-in-out infinite; }
  @keyframes swAnimPulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(0.55); opacity:0.5; } }
  #palAnimToggle.on { background:var(--accent); color:#fff; }
  .curcol { width:34px; height:34px; border-radius:2px; border:2px solid var(--line); flex:0 0 auto; cursor:pointer; }
  /* ゴーストドット色ボックス: スウォッチ(.sw)と同形状・同寸(19px・角丸5px) */
  .ghostsw { width:19px; height:19px; border-radius:2px; border:1px solid var(--line); display:inline-block; background:#888; }
  /* color picker */
  #pickSV { width:100%; height:150px; border-radius:2px; cursor:crosshair; position:relative; touch-action:none; }
  #pickSV canvas { width:100%; height:100%; border-radius:2px; display:block; }
  #pickSV .cur { position:absolute; width:12px; height:12px; border:2px solid #fff; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 1px #000; pointer-events:none; }
  #pickHue { width:100%; height:16px; border-radius:2px; cursor:pointer; touch-action:none; margin-top:8px;
    background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); position:relative; }
  #pickHue .cur { position:absolute; top:-2px; width:6px; height:20px; border:2px solid #fff; border-radius:2px; box-shadow:0 0 0 1px #000; transform:translateX(-50%); pointer-events:none; }
  .pickrow { display:flex; gap:6px; align-items:center; margin-top:8px; }
  .pickrow input { width:48px; }
  .pickprev { width:40px; height:40px; border-radius:2px; border:1px solid var(--line); flex:0 0 auto; }
  .hint { font-size:11px; color:var(--sub); line-height:1.6; margin-top:8px; }
  kbd { background:#2e3033; border:1px solid var(--line); border-bottom-width:2px; border-radius:2px; padding:1px 5px; font-size:10.5px; }
  .lbtns button { flex:1; padding:6px 2px; font-size:12px; }
  .lrow { display:flex; flex-direction:column; align-items:stretch; gap:3px; padding:3px 6px; border:1px solid transparent; border-radius:2px; margin-top:3px; cursor:default; background:#62656a; user-select:none; }
  /* レイヤー上段=ボタン群+サムネ、 下段=名前 の2段組み (フォルダは上段1行=名前のみ) */
  .lhead { display:flex; align-items:center; gap:4px; }
  .lhead .f-badge { margin-left:auto; }
  .lhead .nm, .lhead input.nmedit { flex:1; }
  .lrow > .nm { padding-left:4px; }
  /* レイヤー grip: ハンバーガー形のラック取手アイコン。 ここを掴むだけドラッグ可能 */
  .lrow .lgrip { flex:0 0 auto; width:14px; text-align:center; color:var(--sub); cursor:grab; font-size:14px; line-height:1; letter-spacing:-2px; user-select:none; }
  .lrow .lgrip:hover { color:var(--txt); }
  body.layer-grabbing .lrow .lgrip { cursor:grabbing; }
  .lrow.dragging { opacity:0.4; }
  /* レイヤー DnD のフローティングゴースト: ポインタ位置に半透明 row を浮かべる */
  .layer-ghost { position:fixed; pointer-events:none; z-index:99999; opacity:0.85; transform:translate(-12px, -50%); box-shadow:0 4px 16px rgba(0,0,0,.5); background:var(--panel); border:1px solid var(--accent); border-radius:2px; padding:3px 8px; display:flex; align-items:center; gap:6px; font-size:12px; color:var(--txt); white-space:nowrap; }
  .layer-ghost .lg-thumb { width:24px; height:24px; image-rendering:pixelated; border-radius:2px; border:1px solid rgba(0,0,0,.4); }
  .lrow.sel { background:#5b6481; } .lrow.active { border-color:var(--accent); background:#4d5876; }
  .lrow.grp { background:#56595f; } .lrow.grp.sel { background:#5b6481; }
  .lrow.dragging { opacity:.4; }
  .lrow.drop-before { box-shadow:inset 0 3px 0 var(--accent); } .lrow.drop-after { box-shadow:inset 0 -3px 0 var(--accent); } .lrow.drop-into { outline:2px solid var(--accent); outline-offset:-2px; }
  .lrow .tw { flex:0 0 auto; width:14px; text-align:center; color:var(--sub); background:none; border:none; padding:0; font-size:10px; cursor:pointer; }
  .lrow .eye { flex:0 0 auto; width:18px; text-align:center; background:none; border:none; padding:0; color:var(--txt); cursor:pointer; }
  /* レイヤーサムネ (Photoshop ライク、 サイズ可変) */
  .lrow .lthumb { flex:0 0 auto; width:28px; height:28px; border-radius:2px; image-rendering:pixelated; }
  body.lthumb-large .lrow .lthumb { width:48px; height:48px; }
  body.lthumb-medium .lrow .lthumb { width:28px; height:28px; }
  body.lthumb-small .lrow .lthumb { display:none; }
  /* 右クリック ブラシサイズ調整 HUD */
  .brush-size-hud { position:fixed; z-index:99998; pointer-events:none; background:rgba(20,21,26,.92); color:var(--txt); border:1px solid var(--accent); border-radius:2px; padding:4px 10px; font-size:13px; font-weight:700; white-space:nowrap; box-shadow:0 2px 10px rgba(0,0,0,.5); }
  /* ヘルプ本文を 多カラム グリッドに (幅広モーダル前提) */
  #helpBody { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px 22px; align-content:start; }
  #helpBody h4 { margin:0 0 6px !important; }
  #helpBody dl { break-inside:avoid; page-break-inside:avoid; }
  /* ヘルプ開中: メニューバーの他ボタンをグレーアウト (help/tip/言語のみ点灯) */
  .menubar.help-open .menu,
  .menubar.help-open > button,
  .menubar.help-open > .menubtn { pointer-events:none; opacity:0.32; transition:opacity .15s; }
  .menubar.help-open #mSettings,
  .menubar.help-open #helpBtn,
  .menubar.help-open #tipBtn { pointer-events:auto; opacity:1; }
  /* 汎用コンテキストメニュー (レイヤー右クリック等で再利用) */
  .ctx-menu { position:fixed; z-index:9999; background:var(--panel); border:1px solid var(--line); border-radius:2px; box-shadow:0 6px 24px rgba(0,0,0,.5); padding:4px; min-width:160px; font-size:12px; color:var(--txt); }
  .ctx-menu .ctx-item { padding:3px 12px; border-radius:2px; cursor:pointer; display:flex; align-items:center; gap:8px; }
  .ctx-menu .ctx-item:hover { background:var(--panel2); }
  .ctx-menu .ctx-item .ctx-check { width:14px; text-align:center; color:var(--accent); }
  .ctx-menu .ctx-sep { height:1px; background:var(--line); margin:4px 0; }
  .ctx-menu .ctx-head { padding:4px 10px; color:var(--sub); font-size:10px; text-transform:uppercase; letter-spacing:0.5px; }
  /* クリッピングボタン: 押すと下のレイヤーにクリップ */
  .lrow .animbtn { flex:0 0 auto; width:16px; height:15px; text-align:center; background:none; border:1px solid var(--sub); border-radius:2px; padding:0; color:var(--sub); cursor:pointer; font-size:9px; font-weight:700; line-height:13px; }
  .lrow .animbtn:hover { color:var(--txt); border-color:var(--txt); }
  .lrow .animbtn.on { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
  .lrow .animbtn:disabled { opacity:0.2; cursor:not-allowed; }
  .lrow .clipbtn { flex:0 0 auto; width:18px; text-align:center; background:none; border:none; padding:0; color:var(--sub); cursor:pointer; font-size:14px; line-height:1; }
  .lrow .clipbtn:hover { color:var(--txt); }
  .lrow .clipbtn.on { color:var(--accent); }
  .lrow .clipbtn:disabled { opacity:0.25; cursor:not-allowed; }
  /* クリッピング ON 時の row 左へこみ (Photoshop/CSP ライク) */
  .lrow.clipped { background:linear-gradient(90deg, rgba(90,177,246,.10), transparent 40%); margin-left:14px; border-left:2px solid var(--accent); border-top-left-radius:0; border-bottom-left-radius:0; }
  .lrow .nm { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px; }
  .lrow.grp .nm { font-weight:600; }
  /* グループのレイヤー群を枠線で囲む (展開時のみ)。 アニメグループは金枠で区別 */
  .lgroup-box.open { border:1px solid rgba(90,177,246,.5); border-radius:2px; padding:1px 3px 3px; margin-top:3px; background:rgba(90,177,246,.05); }
  .lgroup-box.open.anim { border-color:rgba(255,210,74,.55); background:rgba(255,210,74,.05); }
  /* 最前面レイヤを示す F バッジ (lrow 右端、 accent 円形) */
  .lrow .f-badge { flex:0 0 auto; width:16px; height:16px; line-height:14px; text-align:center; font-size:10px; font-weight:700; background:var(--accent); color:var(--accent-ink); border-radius:50%; margin-left:4px; }
  .lrow input.nmedit { flex:1; min-width:0; font:inherit; font-size:12px; background:#2e3033; color:var(--txt); border:1px solid var(--accent); border-radius:2px; padding:2px 5px; cursor:text; }
  .main { flex:1; display:flex; flex-direction:column; min-width:0; }
  .topbar { padding:4px 14px; border-bottom:1px solid var(--line); font-size:12px; color:var(--sub); white-space:nowrap; overflow:hidden; }
  .topbar b { color:var(--txt); }
  .stage { flex:1; overflow:auto; padding:24px; }
  /* margin:50vh 50vw = キャンバスの四方に半ビューポート分の余白 → 手のひらツールで四方八方どこへでもパン可。
     中央化は centerScroll()(setMode/newDoc/enterFrame/enterChipEdit が呼ぶ)が scroll で行う。 (旧 margin:auto は中央固定で可動域が padding 分しか無かった) */
  .board { display:grid; grid-template-columns:auto auto auto; grid-template-rows:auto auto auto; margin:50vh 50vw; width:max-content; }
  .board canvas { display:block; }
  #rulerCorner,#rulerCornerTR,#rulerCornerBL,#rulerCornerBR,#rulerTop,#rulerLeft,#rulerRight,#rulerBottom { background:#3f4247; }
  .board.norulers #rulerCorner,.board.norulers #rulerCornerTR,.board.norulers #rulerCornerBL,.board.norulers #rulerCornerBR,.board.norulers #rulerTop,.board.norulers #rulerLeft,.board.norulers #rulerRight,.board.norulers #rulerBottom { display:none; }
  .canvas-wrap { position:relative; }
  canvas#view { touch-action:none; cursor:crosshair; box-shadow:0 10px 40px rgba(0,0,0,.45); }
  .badge { position:absolute; top:8px; left:8px; font-size:12px; padding:5px 11px; border-radius:2px; background:rgba(0,0,0,.5); color:var(--sub); pointer-events:none; backdrop-filter:blur(4px); }
  .badge.pixel { background:var(--accent); color:var(--accent-ink); font-weight:700; }
  .menubar { display:flex; gap:6px; align-items:center; padding:3px 10px; border-bottom:1px solid var(--line); background:var(--panel); position:relative; z-index:30; }
  .menubar .menu { position:relative; }
  /* UI color: ヘッダー右端のアクセント色ピッカー (Windowsのアクセントカラー風) */
  .uicolor { display:flex; align-items:center; gap:5px; font-size:11px; font-weight:400; letter-spacing:0; font-family:var(--font-ui); color:var(--sub); white-space:nowrap; cursor:pointer; }
  .uicolor input[type=color] { width:22px; height:18px; }
  /* UI color をツール名ヘッダー(.brand)右端へ: 名前は左で伸び、 色ボックスは右寄せ */
  .brand .brand-top { display:flex; align-items:center; gap:8px; }
  .brand .brand-top .brand-name { flex:1 1 auto; min-width:0; }
  .brand .uicolor { margin-left:auto; }
  .menubar .menubtn { padding:3px 11px; background:var(--panel2); border:1px solid var(--line); border-radius:2px; color:var(--txt); font:inherit; cursor:pointer; display:flex; align-items:center; gap:6px; white-space:nowrap; transition:.12s; }
  .menubar .menubtn:hover { border-color:var(--accent); }
  .menubar .menu.open .menubtn { border-color:var(--accent); background:#2b3344; }
  .menubar .menubtn i { font-style:normal; font-size:9px; color:var(--sub); }
  .menubar .menubtn .tag { font-size:11px; color:var(--accent); font-weight:600; }
  .menubar .menubtn .tag.sz { color:var(--txt); }
  .menubar .modebtn { font-weight:700; }
  .menupop { position:absolute; top:calc(100% + 5px); left:0; min-width:190px; background:var(--panel); border:1px solid var(--line); border-radius:2px; box-shadow:0 10px 28px rgba(0,0,0,.5); padding:4px; display:none; z-index:40; }
  .menu.open .menupop { display:block; }
  .menupop.pad { min-width:236px; padding:7px; }
  .menupop .mi { display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:4px 10px; background:none; border:1px solid transparent; border-radius:2px; color:var(--txt); cursor:pointer; font:inherit; }
  .menupop .mi:hover { background:var(--panel2); }
  .menupop .mi.on { background:var(--accent); color:var(--accent-ink); font-weight:600; }
  /* モード選択: 名前(左) + ツール説明(右・薄め) を項目内に表示 */
  #modePop { min-width:230px; }
  #modePop .mi { justify-content:space-between; gap:16px; }
  #modePop .mi .mode-nm { font-weight:600; flex:0 0 auto; }
  #modePop .mi .mode-desc { font-size:10px; color:var(--sub); white-space:nowrap; flex:0 0 auto; }
  #modePop .mi.on .mode-desc { color:rgba(8,18,29,.72); }
  .msep { width:1px; align-self:stretch; background:var(--line); margin:3px 2px; }
  .dirtybadge { font-size:11px; color:#ffcd75; margin-left:4px; }
  .mbspace { flex:1; }
  .menubar .tipbtn { background:#3a2a14; border-color:#7a5a2a; color:#ffd28a; }
  .menubar .tipbtn:hover { border-color:#ffcd75; background:#4a361a; color:#fff0c4; }
  /* palette select (custom dropdown) */
  .palSelMenu .menupop { position:absolute; top:calc(100% + 4px); left:0; right:0; min-width:0; max-height:280px; overflow:auto; padding:4px; }
  .palSelMenu.open .menupop { display:block; }
  .palrow { display:flex; align-items:center; gap:6px; padding:3px 8px; border-radius:2px; cursor:pointer; }
  .palrow:hover { background:var(--panel2); }
  .palrow.active { background:#34405a; }
  .palrow .nm { flex:1; font-size:12px; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .palrow .cnt { font-size:10px; color:var(--sub); }
  .palrow .del { flex:0 0 auto; background:none; border:1px solid transparent; color:var(--sub); padding:0 6px; border-radius:2px; cursor:pointer; font-size:14px; line-height:1.2; }
  .palrow .del:hover { color:#ff5db1; border-color:#ff5db1; }
  button.palNew { padding:3px 10px; flex:0 0 auto; }
  body.mode-sprite .draw-only, body.mode-map .draw-only { display:none !important; }
  body.mode-draw .map-only, body.mode-sprite .map-only { display:none !important; }
  body.mode-draw .sprite-only, body.mode-map .sprite-only { display:none !important; }
  /* スプライトモードはレイヤー/下絵 dock を使わないので非表示 (各コマ=1レイヤー、 下絵もスプライトでは未使用) */
  body.mode-sprite .dock[data-dock="レイヤー"], body.mode-sprite .dock[data-dock="下絵"] { display:none !important; }
  /* キャンバスのサイズ変更は draw/sprite で可、 map(チップ固定)では隠す */
  body.mode-map #resizeRow { display:none !important; }
  /* map mode: split left(chip edit) | right(map) */
  body:not(.mode-map) .mapMain { display:none; }
  .mapMain { display:flex; flex:1 1 0; min-width:0; flex-direction:column; border-left:1px solid var(--line); overflow:hidden; }
  body.mode-map #mapStage { flex:1 1 0; min-height:0; border-left:0; }
  /* タイルセット dock 全 UI (登録/グリッド/吸着/辺ガイド/タイル一覧) が見切れないよう min-height を増やす */
  /* width:100% で .subcol の width:0 を確実に上書き(column flex 内で auto では 0 になるブラウザ挙動回避) */
  .mapBottom { flex:0 0 auto; width:100%; align-self:stretch; max-height:55%; min-height:280px; border-top:1px solid var(--line); border-left:0; overflow-y:auto; }
  /* マップ上下分割ハンドル: #mapStage と #colMapB1 の間に挿入、ドラッグで colMapB1 高さ可変 */
  .map-splitbar { flex:0 0 6px; height:6px; background:var(--line); cursor:row-resize; transition:background .15s; }
  .map-splitbar:hover, .map-splitbar.dragging { background:var(--accent); }
  /* 編集ビュー(#stage)とループプレビュー(#loopPanel)の境界ハンドル */
  .edit-splitbar { flex:0 0 6px; height:6px; background:var(--line); cursor:row-resize; transition:background .15s; }
  .edit-splitbar:hover, .edit-splitbar.dragging { background:var(--accent); }
  .mapBottom.col-empty { display:none; }
  body.mode-map .editwrap { display:flex; flex:1; min-height:0; min-width:0; }
  body:not(.mode-map) .editwrap { display:flex; flex:1; min-height:0; min-width:0; flex-direction:column; }
  .editwrap { flex:1; min-height:0; min-width:0; }
  .main { overflow:hidden; }
  #leftEdit { display:flex; flex-direction:column; min-width:0; min-height:0; }
  body:not(.mode-map) #leftEdit { flex:1; }
  /* map モード: flex:0 0 auto だと view canvas 拡大時にカラム外まで押し広げる → 固定幅+max-width+overflow:hidden で隔離 */
  /* max-width 50→85% に緩和。splitbar で画面右端近くまで引っ張って広げられる */
  body.mode-map #leftEdit { flex:0 0 480px; min-width:280px; max-width:85%; overflow:hidden; }
  #stage { flex:1; }
  body.mode-map #stage { display:block; flex:1 1 0; min-height:0; }
  /* ループプレビュー（マップ・チップ編集の下半分） */
  #loopPanel { display:flex; flex-direction:column; min-height:0; border-top:1px solid var(--line); }
  body:not(.mode-map) #loopPanel { display:none; }
  body.mode-map #loopPanel { display:flex; flex:0 0 42%; }
  .loopbar { padding:4px 10px; font-size:11px; color:var(--sub); background:#3f4247; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .loopbar select { padding:2px 4px; }
  .loopwrap { flex:1; overflow:auto; display:flex; align-items:center; justify-content:center; padding:7px; background:#2c2e31; }
  #loopCanvas { image-rendering:pixelated; }
  .splitbar { flex:0 0 6px; background:var(--line); cursor:col-resize; }
  body:not(.mode-map) .splitbar { display:none; }
  .chiplabel { padding:4px 10px; font-size:11px; color:var(--accent); background:#3f4247; border-bottom:1px solid var(--line); }
  .map-iso-only { display:none; }
  body.map-iso .map-iso-only { display:flex; }
  /* display 形式を問わず「iso マップ時だけ表示」する汎用クラス (button/row/label すべて適用可) */
  body:not(.map-iso) .iso-grid-only { display:none !important; }
  body:not(.mode-map) .chiplabel { display:none; }
  .cells { display:grid; gap:4px; }
  .cell { position:relative; aspect-ratio:1; border:2px solid var(--line); border-radius:2px; overflow:hidden; cursor:pointer; background:#2e3033; }
  .cell.on { border-color:var(--accent); box-shadow:0 0 0 2px rgba(65,166,246,.4); }
  .cell.playing { border-color:#ffd24a; box-shadow:0 0 0 2px rgba(255,210,74,.55), 0 0 10px rgba(255,210,74,.7); }
  .cell[draggable="true"] { cursor:grab; }
  .cell.cell-drag { opacity:.4; }
  .cell.cell-drop { outline:2px solid var(--accent); outline-offset:-2px; box-shadow:0 0 8px rgba(65,166,246,.6); }
  .cell.onion { outline:2px dashed #ffcd75; outline-offset:-2px; }
  .cell canvas { width:100%; height:100%; image-rendering:pixelated; display:block; }
  .cell .cid { position:absolute; top:1px; left:2px; font-size:9px; color:#fff; background:rgba(0,0,0,.55); padding:0 3px; border-radius:2px; }
  .cell.empty::after { content:'空'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--sub); font-size:10px; }
  .spidchip { border:1px solid var(--line); border-radius:2px; background:var(--panel2); color:var(--sub); cursor:pointer; }
  .spidchip.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:700; opacity:1 !important; }
  #mapStage { flex:1 1 0; min-width:0; min-height:0; overflow:auto; padding:0; }
  #mapStage .mapwrap { margin:50vh 50vw; width:max-content; }
  #mapCanvas { display:block; image-rendering:pixelated; touch-action:none; cursor:crosshair; }
  /* dock-head 右側のアクションボタン群 (タイルセット の 登録/新規/削除) */
  .dock-head .head-actions { margin-left:auto; display:flex; gap:4px; }
  .dock-head .head-actions button { font-size:11px; padding:3px 8px; cursor:pointer; }
  .dock-head .head-actions button:hover { background:var(--panel2); }
  /* タイルセット dock の 2 カラムレイアウト: 左=タイル一覧(可変) / 右=設定ボタン群(固定260px) */
  .tileset-body { display:flex; flex-direction:row; gap:12px; align-items:flex-start; padding:4px 12px 8px; }
  .tileset-tiles { flex:1 1 0; min-width:0; }
  .tileset-controls { flex:0 0 260px; max-width:260px; display:flex; flex-direction:column; gap:0; }
  /* タイル一覧: 4列に詰めて、登録枚数が増えても流れる形に */
  .tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
  /* 全幅サムネ領域 (タイルセット dock 一体化): 6列で広く並べる */
  .tiles.tiles-wide { grid-template-columns:repeat(6,1fr); }
  .tile { position:relative; aspect-ratio:1; border:2px solid var(--line); border-radius:2px; overflow:hidden; cursor:pointer; background:#2e3033; }
  .tile.on { border-color:var(--accent); }
  .tile.editing { box-shadow:0 0 0 2px #ffcd75 inset; }
  .tile canvas { width:100%; height:100%; image-rendering:pixelated; display:block; }
  .tile .del { position:absolute; top:1px; right:1px; width:16px; height:16px; line-height:14px; text-align:center; font-size:11px; background:rgba(0,0,0,.6); border-radius:2px; color:#fff; cursor:pointer; }
  .tile .ix { position:absolute; bottom:1px; left:2px; font-size:9px; color:var(--sub); background:rgba(0,0,0,.5); padding:0 3px; border-radius:2px; }
  /* ロックボタン (左上): クリックで toggle、locked 時はタイル全体に accent 色のリング+塗りつぶし */
  .tile .lock { position:absolute; top:1px; left:1px; width:16px; height:16px; line-height:14px; text-align:center; font-size:10px; font-weight:bold; background:rgba(0,0,0,.6); border-radius:2px; color:#fff; cursor:pointer; user-select:none; }
  .tile.locked .lock { background:var(--accent); color:var(--accent-ink); }
  .tile.locked { box-shadow:0 0 0 2px var(--accent) inset; }
  .tile.locked canvas { opacity:.92; }
  .modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:10; }
  .modal[hidden] { display:none; }
  .modal-box { background:var(--panel); border:1px solid var(--line); border-radius:2px; padding:13px; width:280px; }
  .modal-box h3 { margin:0 0 14px; font-size:15px; }
  .modal-box label { display:flex; justify-content:space-between; align-items:center; margin:10px 0; }
  /* サイクル非破壊プレビュー窓 (右下フロート) */
  .palprev-win { position:fixed; right:16px; bottom:16px; z-index:60; background:var(--panel); border:1px solid var(--line); border-radius:2px; box-shadow:0 8px 30px rgba(0,0,0,.55); padding:5px; }
  .palprev-win[hidden] { display:none; }
  .palprev-head { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11px; color:var(--txt); margin-bottom:6px; }
  .palprev-close { background:none; border:1px solid var(--line); color:var(--sub); border-radius:2px; cursor:pointer; padding:0 7px; font-size:13px; line-height:1.4; }
  .palprev-close:hover { color:#ff5db1; border-color:#ff5db1; }
  #palPrevCanvas { display:block; image-rendering:pixelated; border-radius:2px; background:#1f2125; background-image:linear-gradient(45deg,#2a2c30 25%,transparent 25%,transparent 75%,#2a2c30 75%),linear-gradient(45deg,#2a2c30 25%,transparent 25%,transparent 75%,#2a2c30 75%); background-size:16px 16px; background-position:0 0,8px 8px; }
  .palprev-hint { color:var(--sub); font-size:10px; margin-top:5px; max-width:240px; line-height:1.4; }
  /* ドット・レンダリング パラメータパネル (左下フロート) */
  .texpanel { position:fixed; left:16px; bottom:16px; z-index:60; width:236px; background:var(--panel); border:1px solid var(--line); border-radius:2px; box-shadow:0 8px 30px rgba(0,0,0,.55); padding:7px; max-height:calc(100vh - 20px); overflow-y:auto; }
  .texpanel[hidden] { display:none; }
  .texpanel-head { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--txt); margin-bottom:8px; cursor:move; user-select:none; touch-action:none; }
  .texpanel-head b { color:var(--accent); font-weight:700; }
  .texrow { display:flex; align-items:center; gap:8px; margin:5px 0; font-size:11px; color:var(--sub); }
  .texrow label { flex:0 0 48px; }
  .texrow input[type=range] { flex:1; min-width:0; }
  .texrow b { flex:0 0 34px; text-align:right; color:var(--txt); font-variant-numeric:tabular-nums; }
  /* パラメータ別ロック: バー横のロックトグル (ロック中はバーをグレーアウト無効化、 ロックボタンは明るいまま) */
  .texrow .tex-lock { flex:0 0 auto; width:20px; height:18px; padding:0; line-height:1; font-size:10px; background:transparent; border:1px solid var(--line); border-radius:2px; opacity:.45; cursor:pointer; }
  .texrow .tex-lock:hover { opacity:.85; }
  .texrow .tex-lock.on { opacity:1; background:var(--accent); border-color:var(--accent); }
  .texrow.tex-locked input[type=range] { opacity:.3; pointer-events:none; }
  .texrow.tex-locked label, .texrow.tex-locked b { opacity:.45; }
  /* CRT サブパラメータ (RGBサブ/走査線/ボケ) */
  .crtrow { display:flex; align-items:center; }
  .crtrow .crtlab { flex:0 0 56px; font-size:11px; color:var(--sub); }
  .crtrow input[type=range] { flex:1; min-width:0; }
  .crtrow b { flex:0 0 32px; text-align:right; font-size:11px; color:var(--txt); font-variant-numeric:tabular-nums; font-weight:normal; }
  #crtParams.crt-off { opacity:.4; pointer-events:none; }
  .texpanel-btns { display:flex; align-items:center; gap:6px; margin-top:10px; }
  #txRandom { padding:3px 10px; }
  #txApply.on { background:var(--accent); color:var(--accent-ink); }
  /* ヘルプ: 左=目次(index) / 右=詳細(カードグリッド)。 見出しと内容をカードで近接させ列割れ防止 */
  .help-index { flex:0 0 156px; overflow-y:auto; border-right:1px solid var(--line); padding-right:10px; }
  .help-index-h { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.07em; font-size:11px; color:var(--sub); margin:2px 0 6px; }
  .help-idx { display:block; padding:3px 8px; border-radius:2px; color:var(--txt); font-size:12px; cursor:pointer; text-decoration:none; }
  .help-idx:hover { background:var(--panel2); }
  .help-idx.active { background:var(--accent); color:var(--accent-ink); }
  .help-detail { flex:1; min-width:0; overflow-y:auto; padding-right:6px; font-size:12.5px; line-height:1.5; display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:12px; align-content:start; }
  .help-sec { break-inside:avoid; background:var(--panel2); border-radius:2px; padding:6px 12px; }
  .help-sec h4 { font-family:var(--font-display); color:var(--accent); font-size:14px; margin:0 0 8px; padding-bottom:5px; border-bottom:1px solid rgba(224,164,75,.35); letter-spacing:.02em; }
  .help-sec dl { margin:0; }
  .help-sec dt { font-weight:700; color:var(--txt); margin-top:7px; }
  .help-sec dt:first-of-type { margin-top:0; }
  .help-sec dd { margin:2px 0 0 0; color:var(--sub); }
  .kb-sub { font-size:11px; color:var(--sub); margin:2px 0 6px; }
  .kb-table { width:100%; border-collapse:collapse; }
  .kb-table td { padding:3px 0; vertical-align:middle; }
  .kb-table td:last-child { text-align:right; width:96px; }
  .kb-key { font-family:var(--font-mono); min-width:64px; padding:4px 8px; }
  .kb-key.capturing { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  .kb-reset { margin-top:8px; font-size:11px; padding:4px 10px; }
  /* パースガイド popup */
  #perspPop .persp-modes { display:flex; gap:4px; }
  #perspPop .persp-m { flex:1; text-align:center; padding:5px 2px; }
  #perspPop .persp-m.active { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  #perspPop .persp-ctl { margin-top:8px; }
  #perspPop .persp-ctl label { display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--sub); margin-bottom:2px; }
  #perspPop .persp-ctl label b { color:var(--txt); font-weight:normal; font-variant-numeric:tabular-nums; }
  #perspPop .persp-ctl input[type=range] { width:100%; }
  #perspPop .persp-hint { margin-top:8px; font-size:11px; line-height:1.4; color:var(--sub); opacity:.8; }
  /* スナップアニメーション セクション */
  .texanim { margin-top:10px; border-top:1px solid var(--line); padding-top:8px; }
  .texanim-head { font-size:11px; font-weight:700; color:var(--sub); margin-bottom:6px; }
  .texanim-row { display:flex; align-items:center; gap:6px; margin-bottom:6px; }
  .texanim-row button { padding:3px 8px; font-size:11px; }
  #txPlay.on { background:var(--accent); color:var(--accent-ink); }
  #palAnimPreview.on { background:var(--accent) !important; border-color:var(--accent) !important; color:var(--accent-ink) !important; }
  .texanim-holder { display:flex; gap:5px; overflow-x:auto; min-height:8px; padding-bottom:2px; }
  .texthumb { position:relative; flex:0 0 auto; border:2px solid var(--line); border-radius:2px; overflow:hidden; cursor:pointer; background:#1f2125; }
  .texthumb.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
  .texthumb.playing { border-color:#ffd24a; box-shadow:0 0 0 2px #ffd24a, 0 0 8px rgba(255,210,74,.6); }
  .texthumb-cv { display:block; width:42px; height:42px; image-rendering:pixelated; }
  .texthumb-lab { position:absolute; top:1px; left:2px; font-size:9px; font-weight:700; color:#fff; background:rgba(0,0,0,.6); padding:0 3px; border-radius:2px; }
  .texthumb-del { position:absolute; top:1px; right:1px; width:14px; height:14px; line-height:12px; text-align:center; font-size:10px; background:rgba(0,0,0,.6); color:#fff; border:none; border-radius:2px; cursor:pointer; padding:0; }
  .texthumb-del:hover { color:#ff5db1; }
  /* AnimDev パネル */
  .animdev { width:262px; max-height:74vh; overflow-y:auto; }
  .animdev-head { display:flex; align-items:center; }
  .animdev-close { margin-left:auto; background:none; border:none; color:var(--sub); font-size:15px; line-height:1; cursor:pointer; padding:0 2px; }
  .animdev-close:hover { color:#ff5db1; }
  .animdev-hint { font-size:10px; color:var(--sub); margin:4px 0 8px; line-height:1.4; }
  .animdev-sec { margin-bottom:10px; }
  .animdev-sechead { font-size:11px; font-weight:700; color:var(--sub); margin-bottom:5px; }
  .animdev-empty { font-size:10px; color:var(--sub); opacity:.7; padding:2px 0 6px; }
  .animdev-cand { display:flex; align-items:center; gap:6px; font-size:12px; padding:3px 4px; border-radius:2px; cursor:pointer; }
  .animdev-cand:hover { background:rgba(255,255,255,.06); }
  .animdev-groupbtn { margin-top:6px; width:100%; padding:5px; font-size:11px; }
  .animdev-card { border:1px solid var(--line); border-radius:2px; padding:7px; margin-bottom:7px; background:rgba(0,0,0,.15); }
  .animdev-cardhead { display:flex; align-items:center; gap:6px; margin-bottom:5px; }
  .animdev-cardname { flex:1; font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .animdev-ungroup { flex:0 0 auto; font-size:10px; padding:2px 6px; }
  .animdev-srow { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
  .animdev-srow label { flex:0 0 60px; font-size:10px; color:var(--sub); }
  .animdev-srow input[type=range] { flex:1; min-width:0; }
  .animdev-srow b { flex:0 0 44px; font-size:10px; color:var(--sub); text-align:right; font-weight:normal; }
  .animdev-fadetoggle { display:flex; align-items:center; gap:6px; font-size:11px; margin:6px 0 5px; cursor:pointer; }
  .animdev-fadewrap { padding-left:7px; border-left:2px solid var(--line); margin-left:2px; }
  #animDevBtn.on { background:var(--accent); color:var(--accent-ink); }
  /* AnimDev ボタン頭の □A マーク (レイヤー行の □A と同型・連動点灯) */
  .menubtn .amk { display:inline-block; min-width:13px; height:13px; line-height:11px; text-align:center; border:1px solid currentColor; border-radius:2px; font-size:9px; font-weight:700; vertical-align:middle; opacity:.6; }
  .menubtn .amk.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); opacity:1; }
  #animDevBtn.on .amk.on { background:var(--accent-ink); color:var(--accent); border-color:var(--accent-ink); }
  /* アートビュー回転キーパネル (表示・操作 dock) */
  .rotkeys { margin-top:5px; display:flex; flex-direction:column; gap:3px; }
  .rotkeys-row { display:flex; align-items:center; gap:5px; font-size:10px; color:var(--sub); }
  .rotkeys-row .rk-lbl { flex:0 0 auto; }
  .rotkeys-row .rotkey-in + .rk-lbl { margin-left:8px; }
  .rotkey-in { flex:0 0 auto; width:20px; height:16px; text-align:center; font-size:10px; font-weight:700; padding:0; border:1px solid var(--line); border-radius:2px; background:var(--panel2); color:var(--txt); cursor:pointer; }
  .rotkey-in:focus { border-color:var(--accent); outline:none; background:#2b3344; }

  /* ===== 作業タイマー (おまけ) ===== */
  .timerbtn #timerDisp { font-variant-numeric:tabular-nums; letter-spacing:.3px; }
  /* ちぎって浮かせるヘッダ (ドラッグハンドル) */
  #timerPop .tm-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:-3px -3px 6px; padding:5px 7px; cursor:grab; border-bottom:1px solid var(--line); user-select:none; touch-action:none; border-radius:2px 2px 0 0; }
  #timerPop .tm-head:active { cursor:grabbing; }
  #timerPop .tm-headtitle { font-size:11px; font-weight:700; color:var(--sub); letter-spacing:.5px; }
  #timerPop .tm-close { width:20px; height:20px; padding:0; line-height:18px; font-size:14px; flex:0 0 auto; }
  #timerPop.tm-floating { position:fixed; z-index:250; box-shadow:0 10px 34px rgba(0,0,0,.55); }
  #timerPop.tm-floating .tm-head { background:var(--panel2); }
  #timerPop .seg { display:flex; gap:0; }
  #timerPop .seg button { flex:1; }
  #timerPop .row { display:flex; align-items:center; gap:6px; margin-top:6px; }
  #timerPop .row .val { flex:0 0 auto; font-size:11px; color:var(--sub); }
  #timerPop input[type=number] { background:var(--panel2); color:var(--txt); border:1px solid var(--line); border-radius:2px; padding:3px 4px; }
  #tmStart.running { background:#c0524a; color:#fff; }
  #tmPhase.work { color:var(--accent); font-weight:700; }
  #tmPhase.break { color:#6fcf72; font-weight:700; }
  .tm-lap-row { display:flex; justify-content:space-between; padding:2px 4px; border-bottom:1px solid var(--line); }
  .tm-lap-row .ix { color:var(--sub); }
  .tm-lap-row .dl { color:var(--sub); font-size:10px; }
  /* ポモドーロ ブラインド: 休憩中の全画面ロック */
  #blindOverlay { position:fixed; inset:0; z-index:6000; background:rgba(10,12,17,.94); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(3px); }
  #blindOverlay[hidden] { display:none; }
  #blindOverlay .blind-card { text-align:center; color:#eceae6; display:flex; flex-direction:column; align-items:center; gap:14px; padding:32px; }
  #blindOverlay .blind-title { font-size:22px; font-weight:800; letter-spacing:2px; color:#6fcf72; }
  #blindOverlay .blind-msg { font-size:15px; max-width:440px; line-height:1.6; color:#cfcdc8; }
  #blindOverlay .blind-time { font-size:54px; font-weight:800; letter-spacing:3px; font-variant-numeric:tabular-nums; }
  #blindOverlay #blindSkip { margin-top:6px; padding:8px 18px; font-size:13px; opacity:.7; }
  #blindOverlay #blindSkip:hover { opacity:1; }

  /* ============================================================
     GameDev: マップ(地形)+スプライト(キャラ) 合体ゲームプレビュー
     フルスクリーンoverlay。 コリジョン編集 + モックパッド + キーコンフィグ
     ============================================================ */
  .gamedevbtn { color:var(--accent); font-weight:700; }
  .gamedev { position:fixed; inset:0; z-index:6000; background:#1b1d20; display:flex; flex-direction:column; font-family:var(--font-ui); }
  .gamedev[hidden] { display:none; }
  .gd-topbar { flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:6px 10px; background:var(--panel); border-bottom:1px solid var(--line); }
  .gd-title { font-weight:800; font-size:15px; color:var(--accent); letter-spacing:.5px; }
  .gd-title .gd-sub { color:var(--sub); font-weight:600; font-size:12px; margin-left:4px; }
  .gd-spacer { flex:1; }
  .gd-tb { background:var(--panel2); color:var(--txt); border:1px solid var(--line); border-radius:2px; padding:5px 11px; font-size:12px; font-weight:700; cursor:pointer; font-family:var(--font-ui); }
  .gd-tb:hover { background:#5d6064; }
  .gd-tb.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  .gd-close { font-size:16px; font-weight:800; padding:3px 10px; line-height:1; }
  .gd-stage { flex:1; position:relative; overflow:hidden; background:#0e0f11; }
  #gdCanvas { position:absolute; inset:0; width:100%; height:100%; display:block; image-rendering:pixelated; cursor:default; }
  .gamedev.collide-on #gdCanvas { cursor:crosshair; }
  .gd-status { position:absolute; top:8px; left:10px; font-size:12px; color:#cfd0d3; background:rgba(0,0,0,.45); padding:3px 8px; border-radius:2px; pointer-events:none; font-variant-numeric:tabular-nums; }
  .gd-help { position:absolute; top:8px; left:50%; transform:translateX(-50%); font-size:12px; color:#cfd0d3; background:rgba(0,0,0,.45); padding:3px 10px; border-radius:2px; pointer-events:none; }
  .gamedev.collide-on .gd-help { color:#ffd0d0; }
  .gd-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; color:var(--sub); font-size:15px; line-height:1.9; padding:24px; white-space:pre-line; }
  /* モックパッド (D-pad): 十字配置 */
  .gd-pad { position:absolute; left:18px; bottom:18px; display:grid; grid-template-columns:repeat(3,46px); grid-template-rows:repeat(3,46px); gap:4px; opacity:.85; user-select:none; touch-action:none; }
  .gd-pbtn { background:var(--panel2); color:var(--txt); border:1px solid var(--line); border-radius:2px; font-size:18px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; user-select:none; }
  .gd-pbtn:active, .gd-pbtn.held { background:var(--accent); color:var(--accent-ink); }
  .gd-up { grid-area:1/2; } .gd-left { grid-area:2/1; } .gd-right { grid-area:2/3; } .gd-down { grid-area:3/2; }
  /* キーコンフィグパネル */
  .gd-keys { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:300px; background:var(--panel); border:1px solid var(--line); border-radius:2px; box-shadow:0 8px 30px rgba(0,0,0,.6); padding:12px; }
  .gd-keys[hidden] { display:none; }
  .gd-keys-head { font-weight:800; font-size:14px; color:var(--accent); margin-bottom:10px; }
  .gd-krow { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
  .gd-krow .gd-klabel { flex:1; font-size:13px; color:var(--txt); }
  .gd-kbtn { min-width:96px; text-align:center; background:var(--panel2); color:var(--txt); border:1px solid var(--line); border-radius:2px; padding:5px 8px; font-size:12px; font-weight:700; cursor:pointer; font-family:var(--font-mono); }
  .gd-kbtn.listening { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  .gd-keys-foot { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
  .gd-keys-foot button { background:var(--panel2); color:var(--txt); border:1px solid var(--line); border-radius:2px; padding:5px 12px; font-size:12px; font-weight:700; cursor:pointer; }
  .gd-keys-foot button.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

  /* ============================================================
     pdConfirm: 画面内 confirm ポップ (ブラウザ confirm/alert の置換)
     ============================================================ */
  .pdpop-overlay { position:fixed; inset:0; z-index:7000; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; font-family:var(--font-ui); }
  .pdpop-card { background:var(--panel); border:1px solid var(--line); border-radius:2px; box-shadow:0 10px 40px rgba(0,0,0,.6); width:min(420px, calc(100vw - 48px)); padding:16px 16px 14px; }
  .pdpop-title { font-weight:800; font-size:15px; color:var(--txt); margin-bottom:8px; }
  .pdpop-msg { font-size:13px; line-height:1.6; color:var(--sub); margin-bottom:14px; white-space:pre-line; }
  .pdpop-btns { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
  .pdpop-btn { background:var(--panel2); color:var(--txt); border:1px solid var(--line); border-radius:2px; padding:6px 14px; font-size:13px; font-weight:700; cursor:pointer; font-family:var(--font-ui); }
  .pdpop-btn:hover { background:#5d6064; }
  .pdpop-btn.on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
  .pdpop-btn.danger { border-color:#c2484d; color:#ffb4b6; }
  .pdpop-btn.danger:hover { background:#5a2c2e; }

  /* Object Align: 非オブジェクトレイヤー選択時はグレーアウト */
  .dock.obj-locked .dock-body { opacity:.5; }
  /* Object Align: X/Y 4スライダのラベル幅を揃える(スライダ開始位置を統一) */
  .objalign-lbl { flex:0 0 auto; width:64px; text-align:left; }
  /* マップレイヤー種別マーク (G=グラウンド / O=オブジェクト)。 レイヤーの A マークと同じ=矩形+文字のみ、色付けなし。 右詰め */
  .lrow .lkind { flex:0 0 auto; width:16px; height:15px; text-align:center; background:none; border:1px solid var(--sub); border-radius:2px; padding:0; color:var(--sub); cursor:pointer; font-size:9px; font-weight:700; line-height:13px; margin-left:auto; }
  .lrow .lkind:hover { color:var(--txt); border-color:var(--txt); }
  /* タイルが乗っているレイヤーは O/G マークを点灯 (空マップは枠のみ) */
  .lrow .lkind.lit { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
  .lrow .lkind.lit:hover { color:var(--accent-ink); border-color:var(--accent); }
  /* マップレイヤー行は横一列: 表示 │ 命名 │ マーク(右) */
  #mapLayerList .lrow { flex-direction:row; align-items:center; }
  #mapLayerList .lrow .nm { flex:1; min-width:0; }

  /* 非破壊アライン子行 (オブジェクトレイヤー直下にインデント) */
  #mapLayerList .lrow.alignrow { margin-left:18px; padding:1px 4px; background:#3a3d42; border-left:2px solid #5b6481; gap:4px; min-height:18px; }
  #mapLayerList .lrow.alignrow.active { background:#4d5876; border-left-color:var(--accent); }
  #mapLayerList .lrow.alignrow::before { content:'∟'; color:var(--sub); font-size:10px; flex:0 0 auto; margin-right:2px; }
  #mapLayerList .lrow.alignrow .nm { flex:1; min-width:0; font-size:10px; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* Apply ボタン: 色付きフチの矩形 / Fixed=グレー */
  .alignapply { flex:0 0 auto; padding:1px 7px; font-size:9px; font-weight:700; line-height:13px; border-radius:2px; cursor:pointer; background:none; border:1px solid var(--accent); color:var(--accent); }
  .alignapply:hover { background:var(--accent); color:#15171a; }
  .alignapply.fixed { border-color:#5a5e64; color:#7c8088; cursor:default; }
  .alignapply.fixed:hover { background:none; color:#7c8088; }
  /* アライン行 個別×削除 */
  .aligndel { flex:0 0 auto; width:15px; height:15px; padding:0; font-size:11px; line-height:13px; text-align:center; border-radius:2px; cursor:pointer; background:none; border:1px solid var(--sub); color:var(--sub); }
  .aligndel:hover { border-color:#e06b6b; color:#e06b6b; background:rgba(224,107,107,.12); }

  /* +O / +G ボタン内の □囲み英字 (マーク=Aマークと同系の矩形) */
  .lbtns .kbx { display:inline-block; min-width:13px; height:13px; line-height:11px; text-align:center; border:1px solid currentColor; border-radius:2px; font-size:9px; font-weight:700; margin-left:3px; vertical-align:middle; }