/* ZQ Stage4 — ミラボ拡大画面を「メタバースのAoI」と同じ形に v0.7.0
 *
 * ★Ryu指示（2026-08-14）＝Mirabotはメタバースの AoI をベースに。入力欄はもう少し大きく。
 *   参考実装＝metaverse/questmap-night/himezia-city.html の右下 AoI（#aoi-panel）。
 *   ・白いカードの箱をやめる＝**枠なし・背景は透ける**。立ち絵が主役で街（盤面）に立っている。
 *   ・吹き出しは立ち絵の上に浮かぶ白い角丸（下向きの尻尾つき）。
 *   ・入力は下に横1行（入力欄＋送信）。AoIより**大きめ**にする（Ryu指示）。
 *
 * ★既存の DOM 構造（.mira-h / .mira-stage / .mira-b / .mira-apply）は組み替えない。
 *   見た目だけをこのCSSで作る＝外せば元の白いパネルに戻る（非破壊・可逆）。
 */

/* ===== パネル本体＝枠なし・透ける ===== */
#mira{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
  width:330px !important;
  max-width:calc(100vw - 24px) !important;
  max-height:none !important;
  /* ★右下のボタン1段ぶん上げる（v1.14.2・Ryu指摘 2026-08-16「提出ボタンが効かない」）。
     ★ただしこれは「一度も動かしていないとき」だけ効く。
       動かした位置は覚えてあり、left/top で置き直されるため（実測でそうなった）。
       重なったときに上へ逃がす仕事は stage4-fit.js の keepMiraOff が受け持つ。 */
  bottom:66px !important;
  align-items:stretch;
}

/* ===== ヘッダ＝名前と×だけの細い行（AoIには無いが閉じる手段は要る） ===== */
#mira .mira-h{
  background:transparent !important;
  color:#eaf3ff !important;
  padding:0 2px 4px !important;
  font-size:12px !important;
  font-weight:800 !important;
  text-shadow:0 2px 10px rgba(0,0,0,.85), 0 0 4px rgba(0,0,0,.7);
  order:1;
}
#mira .mira-h .x{
  width:26px; height:26px; line-height:24px; text-align:center;
  border-radius:50%; background:rgba(10,25,45,.72); color:#e9f3ff;
  border:1px solid rgba(255,255,255,.28); font-size:15px;
}

/* ===== 吹き出し（会話ログ）＝立ち絵の上に浮かぶ白い角丸 ===== */
#mira .mira-b{
  order:2;
  position:relative;
  background:rgba(252,253,255,.96) !important;
  color:#16232f !important;
  border:1px solid rgba(127,211,255,.5);
  border-radius:14px;
  box-shadow:0 10px 34px rgba(0,0,0,.35);
  padding:13px 14px !important;
  max-height:44vh;
  min-height:170px !important;   /* ★もっと大きく見やすく（Ryu指示 2026-08-14） */
  overflow-y:auto;
  flex:0 1 auto !important;
  margin-bottom:6px;
}
#mira .mira-b::after{
  content:''; position:absolute; right:56px; bottom:-9px;
  border:9px solid transparent; border-top-color:rgba(252,253,255,.96); border-bottom:0;
}
/* ★文字色は必ず明示する（Ryu指摘「文字が見えない」2026-08-14）。
   盤面は暗い背景用に body へ明るい文字色（rgb(219,230,255)）が入っている。
   白地の吹き出しや入力欄で色を指定しないと、それを継承して**白地に白**になる。 */
#mira .msg{ font-size:13.5px; line-height:1.85; color:#16232f; margin:0 0 9px; }
#mira .msg.bot{ background:#fff; border:1px solid #d9e9fb; color:#16232f; }
#mira .msg.me{ color:#fff; }
#mira .mira-b b, #mira .mira-b strong{ color:#0d5b8c; }

/* ===== 立ち絵＝AoIと同じ「背景に溶ける大きな立ち絵」 ===== */
/* ★大きさ＝常駐（小）の1.5倍（Ryu指示 2026-08-14）。
   常駐の絵は実測 96×125px なので、拡大時は 144×188px を目安にする。 */
#mira .mira-stage{
  order:3;
  flex:0 0 auto;
  height:188px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:visible;
  background:transparent;
  border:0;
  margin-top:-6px;
  cursor:pointer;               /* ★体を押すと小さくなる（Ryu指示） */
}
#mira .mira-stage svg{
  height:100%;
  width:auto;
  max-width:100%;
  display:block;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.45));
}

/* ★拡大・縮小はアニメーションで（Ryu指示 2026-08-14）。
   ぱっと切り替わらず、下から立ち上がるように出て、押すと縮んで消える。
   ★動かす時だけクラスを付ける（v0.9.1）。以前は常時 animation を当てていたが、
     **タブが前面でない間は CSS アニメーションも進まない**ため、開始前の状態
     （縮小72%・半透明）のまま固定されていた（本番実測＝立ち絵が135pxに縮んだ）。
     いまは開いた瞬間だけ .zqmb-anim を付け、JS のタイマーで必ず外す
     （タイマーは前面でなくても動く）。＝アニメが走らない環境でも通常表示に戻る。 */
#mira.zqmb-anim.open{ animation:zqmb-in .26s cubic-bezier(.2,.9,.3,1.2); }
#mira.zqmb-anim .mira-stage svg{ animation:zqmb-grow .3s cubic-bezier(.2,.9,.3,1.2); }
#mira.zqmb-anim .mira-b{ animation:zqmb-pop .3s .06s cubic-bezier(.2,.9,.3,1.2); }
@keyframes zqmb-in{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
@keyframes zqmb-grow{ from{ opacity:.2; transform:translateY(26px) scale(.72) } to{ opacity:1; transform:none } }
@keyframes zqmb-pop{ from{ opacity:0; transform:translateY(10px) scale(.96) } to{ opacity:1; transform:none } }

/* ===== 入力＝下に横1行。★AoIより大きく（Ryu指示） ===== */
#mira .mira-apply{ order:4; padding:0 !important; background:transparent !important; border:0 !important; }
#mira .mira-in{
  display:flex; gap:6px; align-items:stretch; margin-top:6px;
}
#mira .mira-in input{
  flex:1; min-width:0;
  background:rgba(10,25,45,.72);
  border:1px solid rgba(255,255,255,.28);
  border-radius:12px;
  padding:14px 14px;          /* ★大きく */
  min-height:52px;            /* ★大きく */
  color:#f2f6fb; font-size:15px; outline:none; font-family:inherit;
}
#mira .mira-in input::placeholder{ color:rgba(233,243,255,.62); }
#mira .mira-in input:focus{ border-color:#7fd3ff; box-shadow:0 0 0 3px rgba(127,211,255,.22); }
#mira .mira-in button{
  flex:0 0 auto; border:1px solid rgba(255,255,255,.28);
  background:rgba(10,25,45,.72); color:#e9f3ff;
  border-radius:12px; padding:0 18px; min-height:52px;
  font-size:14px; font-weight:800; cursor:pointer; font-family:inherit;
}
#mira .mira-in button:hover{ background:#7fd3ff; color:#0d2440; }
#mira .mira-apply .note{
  color:rgba(233,243,255,.85) !important; font-size:10.5px !important;
  text-shadow:0 2px 8px rgba(0,0,0,.6); margin:4px 2px 0 !important;
}

/* ★「▶ 提案を盤面に反映」は隠す（v0.7.0・Ryu指摘）。
   このボタンは会話を一切見ず、コードに直書きされた見本データで盤面を上書きしていた
   （会話が長いほど何が入るか分からない＝入力を失う事故になる）。
   代わりに、ミラボの発言ごとに「この提案を反映」を出す＝その発言の分だけ入る。
   ★この1行を消せば元のボタンが戻る（stage4.js は不触）。 */
#mira #applyBtn{ display:none !important; }

/* ===== 会話の中の「この提案を反映」 ===== */
#mira .zqmb-apply{
  display:inline-block; margin-top:7px;
  border:0; border-radius:8px; padding:5px 10px;
  background:linear-gradient(135deg,#48a8ee,#2b6df0); color:#fff;
  font-size:10.5px; font-weight:800; cursor:pointer; font-family:inherit;
  box-shadow:0 3px 10px rgba(43,109,240,.26);
}
#mira .zqmb-apply:hover{ filter:brightness(1.06); }
#mira .zqmb-plan{
  margin-top:8px; border:1px solid #d9e9fb; border-radius:10px;
  background:#f4f9ff; padding:9px 10px; font-size:12px; line-height:1.7; color:#16232f;
}
#mira .zqmb-plan b{ color:#0d5b8c; }
#mira .zqmb-plan ul{ margin:5px 0 0; padding-left:1.1em; }
#mira .zqmb-row{ display:flex; gap:6px; margin-top:8px; }
#mira .zqmb-row button{
  flex:1; border:0; border-radius:8px; padding:6px 6px;
  font-size:11px; font-weight:800; cursor:pointer; font-family:inherit;
}
#mira .zqmb-ok{ background:#2b6df0; color:#fff; }
#mira .zqmb-no{ background:#e9eff7; color:#4a5a70; }
#mira .zqmb-done{
  margin-top:8px; font-size:11.5px; color:#0d5b8c;
  background:#eaf6ff; border:1px solid #d9e9fb; border-radius:9px; padding:7px 9px;
}

/* ★artが実際に踏んだ罠への自衛：まばたきは「光るリングと弧の切り替え」方式。
   目のグループを transform で潰すルールが他所にあると閉じ目がずれる。 */
#mira .mira-stage #hp-eye-l,
#mira .mira-stage #hp-eye-r{ transform:none !important; }

/* ===== 常駐（小）＝AoIと同じ「小さく立っている」 ===== */
#miralaunch{ z-index:50; }

/* ★重なりを避ける（Ryu指摘 2026-08-14）
   ①「あなたが入力中」バッジ（zq-party の .zql-bar・右上に固定）＝
     ミラボを開いている間はパネルの幅ぶん左へ逃がす。
   ②「のこり時間／チームHP」（#zq-teamstat）＝ミラボの文字に重なるので上へ上げる。 */
body.zqmb-open .zql-bar{ right:360px !important; transition:right .2s; }
/* ★v0.9.8：ミラボを開いている間は、帯をミラボの入力欄の上に連れてくる。
   固定配置をやめて、ふつうの1行として並べる（＝パネルを動かせば一緒に動く）。 */
#mira .zql-bar.zqmb-inbar{
  position:static !important; right:auto !important; top:auto !important; bottom:auto !important;
  transform:none !important; margin:0 0 6px !important; width:100% !important;
  justify-content:center; border-radius:12px !important;
  font-size:12px; z-index:auto !important;
}
body.zqmb-open #zq-teamstat{ transform:translateY(-96px); transition:transform .2s; }
@media (max-width:640px){
  body.zqmb-open .zql-bar{ right:8px !important; top:auto !important; bottom:calc(100vh - 120px) !important; }
  body.zqmb-open #zq-teamstat{ transform:translateY(-150px); }
}

/* ===== スマホ ===== */


/* 動きを減らす設定の人には揺らさない */
@media (prefers-reduced-motion:reduce){
  #mira.zqmb-anim.open, #mira.zqmb-anim .mira-stage svg, #mira.zqmb-anim .mira-b{ animation:none !important; }
}

/* ★ミラボの中の「選択肢」を白パネル用に直す（Ryu指摘 2026-08-15）
   もともと暗い背景用の配色（白い文字・薄い枠）だったため、
   白い吹き出しの中では **理由の行が見えず、ただの空白** になっていた。
   ＝ボタンだけが縦に間延びして見えていた原因。 */
#mira .zqm-choices{ gap:6px !important; margin:8px 0 2px !important; }
#mira .zqm-choice{
  border:1.5px solid #cfe0f7 !important;
  background:#f6faff !important;
  color:#16232f !important;
  border-radius:10px !important;
  padding:8px 11px !important;
}
#mira .zqm-choice:hover{ background:#eaf4ff !important; border-color:#9dc6f0 !important; }
#mira .zqm-choice b{ font-size:13px !important; color:#0d5b8c !important; }
#mira .zqm-choice span{
  font-size:11.5px !important; opacity:1 !important; color:#4a5a70 !important;
  margin-top:2px !important; line-height:1.5 !important;
}

/* ★会話欄をもう少し高く（Ryu指示 2026-08-15） */
#mira .mira-b{ min-height:240px !important; max-height:52vh !important; }

/* =========================================================================
 * ★v0.9.7（Ryu指示 2026-08-15）
 *   ①立ち絵をもう少し小さく ②好きな場所へ動かせる ③おまかせで3枚のボタン
 *   ここから下だけを消せば v0.9.6 の見た目に戻る。
 * ======================================================================= */

/* ① 立ち絵を小さく（188px → 140px）。盤面のカードを隠す面積を減らす */
#mira .mira-stage{ height:140px !important; margin-top:-4px !important; }
#mira{ width:310px !important; }
#mira .mira-b{ min-height:200px !important; }

/* ② ヘッダをつかんで動かす。つかめる所だと分かるように手の形にする */
#mira .mira-h.zqmb-grab{
  cursor:grab; user-select:none; -webkit-user-select:none;
  padding:4px 6px 6px !important; border-radius:8px;
  background:rgba(10,25,45,.42) !important;
}
#mira .mira-h.zqmb-grab::before{
  content:'⠿'; margin-right:6px; opacity:.75; font-size:13px; letter-spacing:-1px;
}
#mira .mira-h.zqmb-grab .x{ cursor:pointer; }
/* 動かしたあとは、画面の左上からの位置で置く（右下貼りつきをやめる）
   ★v0.9.9：つかんだ瞬間に left/top へ固定するので、跳ねない。
     transition が残っていると、その固定が「動いて」見えてしまうので必ず切る。 */
#mira.zqmb-moved{
  position:fixed !important; right:auto !important; bottom:auto !important;
  margin:0 !important; transition:none !important; animation:none !important;
}
#miralaunch.zqmb-moved{
  position:fixed !important; right:auto !important; bottom:auto !important;
  margin:0 !important; transition:none !important;
}
/* つかんでいる間は、中の文字を選ばない（ドラッグが文字選択にならないように） */
#mira.zqmb-dragging, #mira.zqmb-dragging *,
#miralaunch.zqmb-dragging, #miralaunch.zqmb-dragging *{
  user-select:none !important; -webkit-user-select:none !important;
}
#mira .mira-h.zqmb-grab, #miralaunch.zqmb-grab{ touch-action:none; }
#mira.zqmb-dragging{ cursor:grabbing; opacity:.94; transition:none !important; }
#mira.zqmb-dragging .mira-h.zqmb-grab{ cursor:grabbing; }
/* 動かしたあとは「入力中」バッジの逃がしは要らない（重ならない） */
body.zqmb-open #mira.zqmb-moved ~ .zql-bar{ right:8px !important; }

/* ③ 小さいミラボ（v0.9.8・Ryu指摘 2026-08-15）
 *   ・こちらも動かせる（つかんで運ぶ）
 *   ・「質問があったら聞いてね」がカードの内容欄に重なっていた。
 *     ふだんは出さず、**近づいたときだけ**ミラボの上に出す。 */
#miralaunch{ cursor:grab; touch-action:none; }
#miralaunch.zqmb-dragging{ cursor:grabbing; opacity:.9; }
#miralaunch .mira-bubble{
  position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%);
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .18s;
  background:rgba(10,25,45,.92); color:#eaf3ff; border:1px solid rgba(255,255,255,.28);
  border-radius:999px; padding:5px 12px; font-size:11.5px; font-weight:800;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
#miralaunch:hover .mira-bubble{ opacity:1; }
#miralaunch.zqmb-dragging .mira-bubble{ opacity:0 !important; }

/* ===== スマホ（最後に置いて上書きを効かせる） =====*/
/* ★v0.9.8（Ryu指示 2026-08-15）
 *   「スマホ画面では、Mirabotのみ拡大表示するようにして。背景は同じでOK。
 *     縮小、移動は不要です。」
 *   ＝スマホでは、開いたミラボを**画面いっぱい**に出す。盤面（背景）はそのまま。
 *     動かす・縮めるは出さない（狭い画面では手間が増えるだけ）。 */
@media (max-width:640px){
  #mira{
    width:calc(100vw - 12px) !important;
    left:6px !important; right:6px !important;
    bottom:6px !important; top:auto !important;
    max-height:calc(100vh - 12px) !important;
  }
  /* 動かす仕掛けは出さない＝もとの位置に固定する */
  #mira.zqmb-moved{
    position:fixed !important;
    left:6px !important; top:auto !important; bottom:6px !important; right:6px !important;
  }
  #mira .mira-h.zqmb-grab{ cursor:default; background:transparent !important; }
  #mira .mira-h.zqmb-grab::before{ content:none; }
  #mira .mira-stage{ height:200px !important; cursor:default; }
  #mira .mira-b{ min-height:38vh !important; max-height:46vh !important; font-size:15px; }
  #mira .msg{ font-size:15px !important; line-height:1.9 !important; }
  #mira .mira-in input{ font-size:16px; min-height:54px; }  /* iOSの自動ズーム回避＝16px */
  #mira .mira-in button{ min-height:54px; font-size:15px; }

  /* 小さいミラボも、スマホでは動かさない */
  #miralaunch{ cursor:pointer; }
  #miralaunch.zqmb-moved{
    position:fixed !important; right:14px !important; bottom:14px !important;
    left:auto !important; top:auto !important;
  }
}

/* =========================================================================
 * ★入力欄を欄の中に収める（v0.9.7・Ryu指摘 2026-08-15）
 *   高さは stage4-fit.js が中身に合わせて伸ばす。
 *   ここでは「中でスクロールさせない」「下限だけ決める」を受け持つ。
 *   ＝この塊と stage4-fit.js を外せば、元の固定高さに戻る。
 * ======================================================================= */
.armor textarea{
  min-height:52px !important;
  overflow-y:hidden !important;
  resize:none !important;
  line-height:1.45 !important;
}
.cont textarea{
  overflow-y:hidden !important;
  resize:none !important;
}
.corner.tl textarea{ overflow-y:hidden !important; }
/* 王者の列は、中身が伸びた分だけ縦に伸びてよい */
.armor .col{ overflow:visible !important; }
.armorwrap{ overflow:visible !important; }

/* 上書き確認の見た目（v0.9.8） */
#mira .zqmb-warn{
  margin-top:7px; padding:7px 9px; border-radius:8px;
  background:#fff6e6; border:1px solid #f0d3a0; color:#7a4a00;
  font-size:11.5px; line-height:1.6;
}
#mira .zqmb-warn b{ color:#a35a00; }
#mira .zqmb-over{ background:#e8791f; color:#fff; }

/* =========================================================================
 * ★白い吹き出しの中の文字を、必ず読める色にする（v1.0.0）
 *   Ryu指摘 2026-08-15「Mirabotの文字が見えない」
 *
 * ■なにが起きていたか
 *   ミラボの中身（戦略案・筋道・効きそうなカード・「置きますか？」）は
 *   stage4-support.css が**暗い背景のパネル**を前提に色を決めている
 *   （文字が #fff / #dbe6f8 / #94a7c4 など、白っぽい色）。
 *   v0.7.0 でミラボの吹き出しを**白い角丸**に作り替えたため、
 *   「白地に白い文字」になって読めなくなっていた。
 *   ＝2026-08-15 に直した .zqm-choice と**まったく同じ型の見落とし**。
 *   あのとき選択肢だけを直して、他の塊を見ていなかった。
 *
 * ■どう直したか
 *   #mira の中に出るものは、すべて白地用の色で上書きする。
 *   stage4-support.css / stage4-confirm.css は1文字も触らない
 *   （盤面の他の場所では、これまで通り暗い背景用の色が使われる）。
 *   この塊を消せば元に戻る。
 * ======================================================================= */

/* 戦略案（A） */
#mira .zqm-plan{
  background:#f6faff !important;
  border:1.5px solid #cfe0f7 !important;
}
#mira .zqm-plan-h{ color:#16232f !important; }
#mira .zqm-plan-h b{ color:#0d5b8c !important; }
#mira .zqm-plan-l{ color:#2b3a4d !important; }
#mira .zqm-plan-l span{ color:#5f708a !important; }
#mira .zqm-plan-c{ color:#5f708a !important; }
#mira .zqm-pc{
  background:#e6f2ff !important; color:#0d5b8c !important;
  border:1px solid #c7dcf5 !important;
}
#mira .zqm-plan-go{
  color:#fff !important;
  background:linear-gradient(180deg,#48a8ee,#2b6df0) !important;
}
#mira .zqm-plan-no{
  color:#4a5a70 !important; background:#eef3fa !important;
  border:1px solid #d4dfec !important;
}

/* 「置きますか？」の確認（C） */
#mira .zqm-place{
  background:#fff8e8 !important; border:1.5px solid #f0d3a0 !important;
}
#mira .zqm-place-q{ color:#3a2a08 !important; }
#mira .zqm-place-q b{ color:#a35a00 !important; }
#mira .zqm-place-w{ color:#6b5a38 !important; }
#mira .zqm-place-a button{ border-color:#e8c88a !important; }
#mira .zqm-place-a .go{ color:#3a2a08 !important; }
#mira .zqm-place-a .no{ color:#6b5a38 !important; background:#f3ece0 !important; }

/* 念のための総取り：白い吹き出しの中で「白い文字」を残さない。
   ボタンなど、自分で色を決めているものは上のルールが勝つ。 */
#mira .mira-b{ color:#16232f !important; }
#mira .mira-b *:not(button):not(.zqm-plan-go):not(.zqm-plan-no):not(.zqmb-apply):not(.zqmb-ok):not(.zqmb-no){
  text-shadow:none !important;
}

/* =========================================================================
 * ★登場と誘導（v1.1.0・Ryu指示 2026-08-15）
 *   BATTLE START が消えてから小さいミラボが出る。その上に矢印を出して押してもらう。
 * ======================================================================= */
#miralaunch.zqmb-appear{ animation:zqmbAppear .5s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes zqmbAppear{
  from{ opacity:0; transform:translateY(18px) scale(.86) }
  to{ opacity:1; transform:none }
}

#zqmb-arrow{
  position:fixed; z-index:9200; transform:translate(-50%,-100%);
  pointer-events:none; text-align:center;
  animation:zqmbPoint 1.1s ease-in-out infinite;
}
#zqmb-arrow b{
  display:block; background:linear-gradient(135deg,#ffb43d,#ff8a00); color:#fff;
  font-size:14px; font-weight:900; padding:7px 16px; border-radius:999px;
  box-shadow:0 6px 20px rgba(255,138,0,.5); white-space:nowrap;
}
#zqmb-arrow i{
  display:block; font-style:normal; font-size:11px; font-weight:800;
  color:#ffd8a8; margin-top:3px; text-shadow:0 2px 8px rgba(0,0,0,.8);
}
/* 下向きの三角＝ミラボを指す */
#zqmb-arrow s{
  display:block; margin:2px auto 0; width:0; height:0; text-decoration:none;
  border:11px solid transparent; border-top-color:#ff9a12; border-bottom:0;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
@keyframes zqmbPoint{
  0%,100%{ transform:translate(-50%,-100%) }
  50%{ transform:translate(-50%,calc(-100% - 9px)) }
}
@media (prefers-reduced-motion:reduce){
  #zqmb-arrow{ animation:none; }
  #miralaunch.zqmb-appear{ animation:none; }
}

/* ★つかめる場所を増やした（v1.1.0）。
   ヘッダのほかに、ミラボ本体（立ち絵）と会話欄の上のふち22pxでも動かせる。 */
#mira .mira-stage.zqmb-grab{ cursor:grab; }
#mira.zqmb-dragging .mira-stage.zqmb-grab{ cursor:grabbing; }
#mira .mira-b.zqmb-grab{ position:relative; }
/* 会話欄の上に、つかめることが分かる細い帯を出す（読む邪魔をしない薄さ） */
#mira .mira-b.zqmb-grab::before{
  content:''; position:absolute; left:50%; top:5px; transform:translateX(-50%);
  width:38px; height:4px; border-radius:2px; background:#c9dcf0; opacity:.9;
}
#mira .mira-b.zqmb-grab{ padding-top:16px !important; }

/* =========================================================================
 * ★パネル全体が画面に収まるようにする（v1.2.0・Ryu指摘 2026-08-15
 *   「拡大後の最初のミラボの位置が低すぎて入力欄が見えない」）
 *
 * パネルは 会話欄＋立ち絵＋「入力中」の帯＋入力欄 が縦に積み上がる。
 * 会話欄の上限が 44vh のままだと、画面が低いときに合計が画面を超えて、
 * いちばん下の入力欄が画面の外に出てしまう。
 * 会話欄の伸びしろを「画面の高さから、他の部品のぶんを引いた残り」に縛る。
 * ＝どんな画面でも、入力欄まで必ず見える。
 * ======================================================================= */
#mira{ max-height:calc(100vh - 20px) !important; }
#mira .mira-b{
  /* 300px ＝ 立ち絵140＋入力欄52＋帯30＋ヘッダ24＋すき間ぶん */
  max-height:min(44vh, calc(100vh - 300px)) !important;
  min-height:min(240px, calc(100vh - 330px)) !important;
}
@media (max-width:640px){
  /* スマホは立ち絵を大きく出しているので、その分だけ引く */
  #mira .mira-b{
    max-height:min(46vh, calc(100vh - 360px)) !important;
    min-height:min(38vh, calc(100vh - 390px)) !important;
  }
}

/* =========================================================================
 * ★「つながりモードを開く」が押せない（v1.3.0・Ryu指摘 2026-08-15
 *   「販売チャネルにカードを２枚重ねると、つながりモードにならない／ボタンが押せない」）
 *
 * ■なにが起きていたか（実測）
 *   カードのマス（#board .cell）は position 付きの箱で、
 *   カードを2枚置いて内容欄が伸びると、下の「つながりモードを開く」の帯に
 *   **24px かぶさっていた**。
 *   position 付きの箱は、position の無い箱より手前に描かれる決まりなので、
 *   見た目はボタンが見えていても、**押した指はマスのほうに吸われて**いた。
 *   （実測：ボタンの真ん中を指したとき、そこにあるのは .cell だった）
 *   ★画面が低いときは、カードが0枚でも同じことが起きていた。
 *
 * ■どう直したか
 *   帯とボタンを「手前」に置くだけ（z-index）。位置も大きさも変えない。
 *   実測：押したら つながりモードが開くところまで確認した。
 *   ★stage4.js / board.html は触っていない。この塊を消せば元に戻る。
 * ======================================================================= */
.connbar{ position:relative !important; z-index:40 !important; }
#connBtn, #submitBtn, #conngauge{ position:relative !important; z-index:41 !important; }
#board .cell{ z-index:1; }

/* ★内容欄に上限は掛けない（v1.6.0）。
   v1.3.0 では 34vh で切っていたが、切ると2枚目の内容が読めなくなるうえ、
   下の帯が上に乗ったままで**触れない**ことが実測で分かった。
   いまは .you を中身なりの高さにして帯を押し下げるので、切る必要がない。 */


/* =========================================================================
 * ★上下4つの欄（企業名／ビジネス概要／事業名／ビジネスアイデア）
 *   v1.5.0・Ryu指示 2026-08-15
 *   「おいおい重なりまくってるよ。全体を少し上に上げて、
 *     企業名、ビジネス概要、事業名、ビジネスアイデアを1行に、
 *     スペースを節約して、全て入るように。」
 *
 * ■v1.4.0 でやったこと＝2行の欄にした → **重なって崩れた**（私のミスです）
 *   欄が縦に伸びたぶん、下にある「事業名／ビジネスアイデア」やカードの内容欄と
 *   ぶつかった。この盤面は縦の余りがほとんど無いので、縦に伸ばしてはいけない。
 *
 * ■v1.5.0 の考え方
 *   **1行のまま、横に広げる**。文字が切れていたのは幅が280pxしか無かったから。
 *   ・下線をやめて枠のある入力欄にする（Ryu指示）
 *   ・幅を 280px → 画面に合わせて最大560pxまで広げる＝1行でもほぼ切れない
 *   ・高さと余白を詰める（1欄あたり 8px ぶん節約）＝全体が上に上がる
 *   ここを消せば元の下線の見た目に戻る。
 * ======================================================================= */
#kingwrap input.uline,
#playerbar input.uline,
#kingwrap input[type=text],
#playerbar input[type=text]{
  display:block !important;
  /* ★上下とも同じ幅にそろえる（v1.6.0・Ryu指示 2026-08-16
     「上段の企業名とビジネス概要を、下段の事業名・ビジネスアイデアの幅に合わせて」）。
     下段はメンバーの絵より手前で止める必要があるので 430px。上段もそれに合わせる。 */
  width:clamp(240px, 34vw, 430px) !important;
  max-width:none !important;
  height:30px !important;
  background:rgba(10,25,45,.55) !important;
  border:1px solid rgba(150,190,255,.42) !important;
  border-bottom:1px solid rgba(150,190,255,.42) !important;
  border-radius:8px !important;
  color:#fff !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  padding:4px 9px !important;
  margin:0 !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3);
}
#kingwrap input.uline:focus,
#playerbar input.uline:focus{
  outline:none !important;
  border-color:#7fd3ff !important;
  box-shadow:0 0 0 3px rgba(127,211,255,.2) !important;
}
#kingwrap input::placeholder,
#playerbar input::placeholder{ color:#8ea4c8 !important; font-weight:600; }

/* 行の高さを詰める＝全体が上に上がる（1欄あたり約8px） */
#kingwrap .fld, #playerbar .fld{ margin-bottom:5px !important; align-items:center !important; }
#kingwrap .fl,  #playerbar .fl{ width:82px !important; font-size:10.5px !important; }
#kingwrap{ margin-bottom:4px !important; }

/* ★下の2つ（事業名・ビジネスアイデア）がメンバーの絵より手前で止まること。
   実測：メンバーの絵のいちばん左は563px。幅430pxなら右端558pxで重ならない。
   （v1.6.0 からは上段も同じ幅なので、ここは念のための明示） */
#playerbar input.uline,
#playerbar input[type=text]{
  width:clamp(240px, 34vw, 430px) !important;
}

/* =========================================================================
 * ★「あなたが入力中」が STAGE4 の札にかぶる（v1.6.0・Ryu指摘 2026-08-16）
 *   実測：バッジ x1131〜1268 / STAGE4の札 x1170〜1266、どちらも画面のいちばん上。
 *   ミラボを閉じている間、右上で完全に重なっていた。
 *   ＝バッジを札の下へ落とす。札は動かさない（元のデザインのまま）。
 *   ★ミラボを開いている間は入力欄の上へ連れて行くので、この指定は効かない。
 * ======================================================================= */
.zql-bar:not(.zqmb-inbar){ top:56px !important; }
@media (max-width:900px){
  .zql-bar:not(.zqmb-inbar){ top:52px !important; }
}

/* =========================================================================
 * ★狭い画面でも重ならない（v1.6.0・Ryu指示 2026-08-16
 *   「重なって入力ができないなどの事態は避けたい。
 *     しっかり画面サイズが小さくても崩れないように」）
 *
 * ■実測で見つけた最後の当たり
 *   判定チップの列（カテゴリー／つながり／王者の強み／カードの内容＝#zq-goal）が、
 *   「つながりモードを開く」に 51×28px かぶっていた。
 *   チップは横1列に並ぶので、画面が狭いほどボタン側へせり出す。
 *
 * ■直し方
 *   チップの列を**折り返せる**ようにして、はみ出したら下の段へ落とす。
 *   ボタンの手前で必ず止まるよう、右側に余白を確保する。
 * ======================================================================= */
/* ■判定チップ（#zq-goal）が浮いた配置で、ボタンの上に乗っていた
     position:absolute で帯の左に貼りついていたため、
     画面が狭いほどボタン側へせり出していた。
     → 帯を「折り返せる横並び」にして、3つを同じ流れに置く。 */
.connbar{
  display:flex !important; flex-wrap:wrap !important;
  align-items:center !important; justify-content:center !important;
  gap:8px 16px !important;
}
#zq-goal{
  position:static !important; left:auto !important; top:auto !important; bottom:auto !important;
  order:1; flex:1 1 260px; min-width:0; width:auto !important;
  display:flex !important; flex-wrap:wrap !important; gap:6px !important;
}
#connBtn{ position:relative !important; left:auto !important; order:2; flex:0 0 auto; }
#conngauge{
  position:static !important; left:auto !important; top:auto !important; bottom:auto !important;
  order:3; flex:1 1 220px; min-width:0; width:auto !important; justify-content:flex-end;
}

/* 入力欄は、どんなに狭くても画面からはみ出さない */
#kingwrap input.uline, #playerbar input.uline,
#kingwrap input[type=text], #playerbar input[type=text]{
  max-width:calc(100vw - 130px) !important;
}


/* =========================================================================
 * ★上段をなくして縦を空ける＋王者HPを外す（v1.7.0・Ryu指示 2026-08-16）
 *   実測：上段（.corner.tl）は高さ104px。箱ごと畳むと盤面が112px→6pxへ上がる。
 *   その106pxで、カードの内容欄と判定チップの重なりが消える。
 *   ただし盤面が上がると王者HPが「王者の強み」に重なるので、HPは外す。
 *   この塊と stage4-fit.js の boot2 を外せば、元の上段とHPが戻る。
 * ======================================================================= */
/* 上段＝タイトル／チーム／あなた を消し、箱ごと畳む（STAGE4の札だけ残す） */
.corner.tl .ct,
.corner.tl .cs{ display:none !important; }
.corner.tl{
  height:0 !important; min-height:0 !important;
  padding:0 !important; margin:0 !important; overflow:visible !important;
}
/* ★「STAGE 4」の札も出さない（Ryu指示 2026-08-16「STAGE4の表示も不要」）。
   どのSTAGEかは会場で分かっている。画面はカードと欄に集中させる。 */
.corner.tl .pill{ display:none !important; }
/* ★全体（王者の強み以下）を少しだけ下げて、ラスボスの顔を見せる
   （v1.12.0・Ryu指示「やりすぎると下が詰まるので気をつけて」）。
   ■実測で決めた
     6px → 30px（＝24px 下げ）。
     .wrap は高さが決まった縦並びなので、上の余白を足すと**盤面だけが縮み**、
     下のメンバー欄（画面の下から5pxしか余裕がない）は動かない。
     24px 下げてもカードの最下端は 524px で、事業名の帯（584px）には届かない。 */
.wrap{ padding-top:30px !important; }

/* 王者HP＝外す（提出の演出だけで使う表示。盤面の邪魔になる） */
#hpwrap{ display:none !important; }

/* チーム名＝右上、STAGE4の札のとなり */
#zqs4-team{
  position:fixed; right:16px; top:12px; z-index:60;
  pointer-events:none; white-space:nowrap;
  font-size:12px; font-weight:800; color:#aebfe0;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}
#zqs4-team .zqs4-tlab{ font-size:10px; opacity:.85; margin-right:5px; }
#zqs4-team b{ color:#7fd3ff; font-size:14px; }

/* 自分の名前だけ色を変える */
#heroes figcaption.zqs4-me{
  color:#ffd24a !important; font-weight:900 !important;
  text-shadow:0 2px 8px rgba(0,0,0,.85);
}

/* =========================================================================
 * ★小さい画面では「1画面に詰め込む」のをやめる（v1.7.0・Ryu指摘 2026-08-16
 *   「画面サイズを変えても崩れないか？」）
 *
 * ■実測で分かったこと
 *   この盤面は「高さ100%の1画面」に全部を押し込む作りで、
 *   下の3つ（事業名の欄・のこり時間・メンバー）は画面に貼りついている。
 *   画面が小さいと、流れの中の盤面だけが下へ伸びて画面の外に出てしまい、
 *   貼りついた3つと重なって**押せない場所**ができた（635×564で実測）。
 *
 * ■どう直したか
 *   狭い／低い画面では、貼りつけをやめて**縦に並べ、ページごとスクロール**させる。
 *   重ねて隠すより、スクロールして全部に届くほうが確実に使える。
 *   実測（635×564）：重なり なし／スクロールすれば全部の欄とボタンに触れる。
 * ======================================================================= */
@media (max-width:1000px), (max-height:620px){
  html, body{ overflow-y:auto !important; height:auto !important; }
  .wrap{ height:auto !important; min-height:0 !important; display:block !important; padding-bottom:24px !important; }
  .mat{ display:block !important; height:auto !important; }
  .you{ flex:none !important; min-height:0 !important; height:auto !important; }
  #boardwrap{ height:auto !important; min-height:0 !important; }

  /* 貼りつきをやめて、順番に縦へ並べる */
  #playerbar, #zq-teamstat, #heroes{
    position:static !important;
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    transform:none !important; width:auto !important; max-width:none !important;
    margin:10px auto 0 !important;
  }
  #heroes{ max-width:340px !important; }

  #zqs4-team{
    position:static !important; display:block; text-align:center;
    margin:6px 0 0 !important; right:auto; top:auto;
  }
  #kingwrap input.uline, #playerbar input.uline,
  #kingwrap input[type=text], #playerbar input[type=text]{
    width:calc(100vw - 120px) !important; max-width:none !important;
  }
}

/* =========================================================================
 * ★下の帯をすっきりさせる（v1.8.0・Ryu指示 2026-08-16）
 *   「この欄も全部消す／チームHPも消す／残り時間の上につながりボタンを置く」
 *
 * 消すもの
 *   ・判定チップの列（カテゴリー／つながり／王者の強み／カードの内容）
 *   ・つながり数のゲージ
 *   ・チームHP（のこり時間の箱の2行目）
 * 残すもの
 *   ・のこり時間
 *   ・「つながりモードを開く」→ のこり時間のすぐ上へ
 *
 * ★消すのは「見た目」だけ。数え方やクリア判定の中身（stage4.js）は触っていない。
 *   この塊を外せば、全部そのまま戻る。
 * ======================================================================= */
#zq-goal{ display:none !important; }
#conngauge{ display:none !important; }
/* チームHP＝のこり時間の箱の2行目だけを消す（1行目のこり時間は残す） */
#zq-teamstat .zq-ts-row:nth-child(2){ display:none !important; }


/* 帯そのものは、中身が減るので詰める（中のボタンは右下の箱へ移した） */
.connbar{ min-height:0 !important; margin:6px 0 0 !important; }



/* =========================================================================
 * ★クリア条件をはずす（v1.9.0・Ryu指示 2026-08-16「クリア条件も解除」）
 *   提出ボタンを、条件に関係なくいつでも出す。
 *   ★数え方そのもの（stage4.js）は触っていない。この2行を外せば元に戻る。
 * ======================================================================= */
#submitBtn{ display:inline-flex !important; }
.zq-need{ animation:none !important; box-shadow:none !important; border-color:inherit !important; }






/* =========================================================================
 * ★右下に3つ横並び（v1.11.0・Ryu指示 2026-08-16）
 *   「右下に３つのボタンを横に同じサイズで並べて（色は変える）」
 *   「提出ボタンは『提出する』のみでOK」
 *   「カード内容欄は３行で表示、スクロールバーはデフォルトでは出さない」
 *   「残り時間はチーム名の左横に、もう少し目立つように」
 *
 *   ★位置の計算はしない。箱（#zqs4-dock）に3つ入れて flex で並べるだけ。
 *     v1.10.0 は1つずつ座標を測って積んでいたため、
 *     「入力中」バーの幅が1280pxに化けた瞬間に全部が重なった（実測）。
 * ======================================================================= */
#zqs4-dock{
  position:fixed; right:16px; bottom:14px; z-index:62;
  display:flex; gap:10px; align-items:center; pointer-events:none;
  /* ★横は2つまで。3つ目（誰かが入力中のとき）は上へ折り返す。
     3つ横に並べると、メンバーのアバター欄にぶつかって
     置き場所ごと上へ飛んでしまうため（実測 470px 必要／空きは390px）。
     下を基準に上へ伸びるので、右下の位置は動かない。 */
  flex-wrap:nowrap; justify-content:flex-end;
}
/* 3つとも同じ大きさ。位置の指定は全部いったん打ち消す（元のCSSが残るため） */
#zqs4-dock #connBtn,
#zqs4-dock #submitBtn{
  pointer-events:auto;
  position:static !important;
  left:auto !important; top:auto !important; right:auto !important; bottom:auto !important;
  transform:none !important; margin:0 !important; float:none !important;
  width:150px !important; min-width:150px !important; max-width:150px !important;
  height:42px !important; min-height:42px !important;
  box-sizing:border-box !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  gap:6px !important;
  font-size:13px !important; font-weight:800 !important; line-height:1.2 !important;
  padding:0 10px !important; border-radius:11px !important;
  white-space:nowrap !important; text-align:center !important;
  box-shadow:0 4px 14px rgba(0,0,0,.45) !important;
  animation:none !important;
}
/* ★並び順を明示する。元のCSSで #connBtn に order:2 が付いていて、
   何も指定しないと「提出 → つながり」と逆に並んだ（実測）。 */
#zqs4-dock #connBtn{ order:2 !important; }
#zqs4-dock #submitBtn{ order:3 !important; }

/* ★色はミラボ拡大時と同じ系統（濃紺＋淡いふち）。役割の色は「ふちと文字」で分ける。
   Ryu指摘「色が醜い」＝ベタ塗りの青・橙・赤が盤面から浮いていた。 */
#zqs4-dock #connBtn{
  background:rgba(10,25,45,.78) !important;
  color:#ffd27a !important;
  border:1px solid rgba(255,210,122,.6) !important;
}
#zqs4-dock #submitBtn{
  background:rgba(10,25,45,.78) !important;
  color:#ffb3a6 !important;
  border:1px solid rgba(255,145,132,.62) !important;
}
#zqs4-dock #submitBtn:hover{ filter:brightness(1.08); }
#zqs4-dock #connBtn:hover{ filter:brightness(1.08); }

/* 小さい画面では、貼りつけずに流れの中へ（縦に潰れないよう折り返す） */
@media (max-width:1000px), (max-height:620px){
  #zqs4-dock{
    position:static !important; justify-content:center; flex-wrap:wrap;
    margin:12px auto 22px !important;
  }
}

/* ★「あなたが入力中」＝のこり時間の左どなり（位置は stage4-fit.js が実測）。
   色はミラボ拡大時と同じ＝濃紺の半透明に淡いふち（Ryu指示 v1.12.0）。
   元は白地に薄い文字で、盤面の上ではほとんど読めなかった（実測 bg=#fff／字=#dbe6ff）。 */
.zql-bar.zqs4-atstat{
  position:fixed !important;
  right:auto !important; bottom:auto !important; margin:0 !important;
  z-index:60 !important;
  background:rgba(10,25,45,.78) !important;
  color:#e9f3ff !important;
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius:12px !important;
  padding:7px 13px !important;
  font-size:12px !important; font-weight:800 !important;
  box-shadow:0 4px 14px rgba(0,0,0,.45) !important;
  /* ★幅を必ず内容ぶんにする。指定しないと画面いっぱい（1280px）に伸びて、
     まわりを全部押しのけた（v1.10.0の崩れの元）。 */
  width:auto !important; max-width:300px !important; min-width:0 !important;
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  white-space:nowrap !important;
}
.zql-bar.zqs4-atstat b,
.zql-bar.zqs4-atstat strong{ color:#7fd3ff !important; }

/* ★アバターの上に小さくHPゲージ（v1.12.0・Ryu指示）。
   #heroes は横並びなので、折り返しを許して1本目の行に置く。 */
/* ★高さを足さないように「アバター欄の上」に重ねて置く。
   足すとアバターの名前が画面からはみ出して切れた（実測 7px 切れ）。
   すぐ上の帯（つながりボタンを移したので空いている）を使う。 */
#heroes{ position:relative !important; }
#zqs4-hp{
  position:absolute; left:25%; right:25%; top:-14px;   /* ★幅は半分（Ryu指示 v1.13.0） */
  display:flex; align-items:center; gap:7px;
  height:11px;
  font-size:9.5px; font-weight:800; color:#cfe0ff;
  text-shadow:0 2px 6px rgba(0,0,0,.8);
  pointer-events:none;
}
#zqs4-hp b{                       /* 下地（からっぽの分） */
  flex:1 1 auto; display:block; height:7px; border-radius:99px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  overflow:hidden;
}
#zqs4-hp i{                       /* 残っている分 */
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#5ce08a,#2fbf6a);
  box-shadow:0 0 8px rgba(92,224,138,.5);
  transition:width .3s;
}
#zqs4-hp.zqs4-hp-low i{ background:linear-gradient(90deg,#ff8a5c,#e0473a); box-shadow:0 0 8px rgba(224,71,58,.5); }
#zqs4-hp span{ flex:0 0 auto; white-space:nowrap; }

/* ★のこり時間＝チーム名の左どなり・目立たせる（位置は stage4-fit.js が実測） */
#zq-teamstat{
  right:auto !important; bottom:auto !important; margin:0 !important;
  transform:none !important;                 /* ミラボを開いても動かさない */
  padding:6px 14px !important;
  min-width:0 !important; width:auto !important;
  z-index:60 !important;
  background:rgba(10,16,30,.82) !important;
  border:1px solid #ffcf5a !important; border-radius:12px !important;
  box-shadow:0 4px 14px rgba(0,0,0,.5) !important;
}
body.zqmb-open #zq-teamstat{ transform:none !important; }
#zq-teamstat .zq-ts-row{ font-size:13px !important; line-height:1.25 !important; }
#zq-teamstat .zq-ts-row b,
#zq-teamstat .zq-ts-row strong,
#zq-teamstat .zq-ts-v{ font-size:19px !important; color:#ffd24a !important; font-weight:900 !important; }

/* ★カードの内容欄＝3行ぶん。ふだんはスクロールバーを出さない
   （元は .cont が max-height:38% + overflow:auto で、空でも棒が出ていた） */
.cont{ max-height:none !important; overflow:visible !important; }
.cont textarea{ overflow-y:hidden !important; }

/* 自分がアバター欄に出ていないとき（6人目以降）の逃げ道＝チーム札に併記 */
#zqs4-team .zqs4-mylab{
  display:block; margin-top:2px; font-size:10px; opacity:.95; color:#ffd24a;
}


/* =========================================================================
 * ★v1.13.0（Ryu指示 2026-08-16）
 *   ・ラスボスのHP（1000／つながり1本で100減る・小さめ）
 *   ・「あなたが入力中」の文字が読めない
 *   ・つながりが通らなかったときの説明が読めない＋ミラボに相談ボタン
 * ======================================================================= */

/* ---- ラスボスのHP＝王者の強みの列の真上・まんなか（位置は stage4-fit.js） ---- */
#zqs4-bosshp{
  position:fixed; z-index:41; pointer-events:none;
  display:flex; align-items:center; gap:7px;
  width:140px;                       /* ★アバターのHPと同じ幅（Ryu指示 v1.14.0） */
  font-size:9.5px; font-weight:800; color:#e6c9ff;
  text-shadow:0 2px 6px rgba(0,0,0,.85);
}
#zqs4-bosshp em{ font-style:normal; flex:0 0 auto; color:#d7b3ff; }
#zqs4-bosshp b{
  flex:1 1 auto; display:block; height:7px; border-radius:99px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(214,160,255,.42);
  overflow:hidden;
}
#zqs4-bosshp i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,#c07bff,#7a2fd6);
  box-shadow:0 0 8px rgba(160,80,240,.55);
  transition:width .3s;
}
#zqs4-bosshp.zqs4-hp-low i{ background:linear-gradient(90deg,#ff8a5c,#e0473a); }
#zqs4-bosshp span{ flex:0 0 auto; white-space:nowrap; }

/* ---- 「あなたが入力中」の文字（v1.13.0）
   中の <span class="zql-who"> に濃紺（#1b2637）が直接あたっていて、
   暗い地の上では**地と同じ色**になって読めなかった（実測）。 ---- */
.zql-bar.zqs4-atstat,
.zql-bar.zqs4-atstat *{ color:#e9f3ff !important; }
.zql-bar.zqs4-atstat .zql-who{ color:#ffffff !important; font-weight:800 !important; }
.zql-bar.zqs4-atstat .zql-dot{ background:#7fd3ff !important; }

/* ---- つながりが通らなかったときの説明（v1.13.0）
   #connResult.ng の地は**薄いピンク（rgb(255,240,240)）**なのに、
   中の文字は暗い地の前提で白（#fff）だった＝コントラスト 1.05 で読めない（実測）。
   地が明るいときだけ、文字を濃い色に置き換える。 ---- */
#connResult.connres.ng{ color:#3a2320 !important; }
#connResult.connres.ng .zqs-q{ color:#b5502a !important; }
#connResult.connres.ng .zqs-hint{ color:#241a17 !important; }
#connResult.connres.ng .zqs-note{ color:#6b5a55 !important; }
#connResult.connres.ng .zqs-force{
  color:#7a3a26 !important; background:#fff !important;
  border:1px solid rgba(181,80,42,.45) !important;
}
#connResult.connres.ng .zqs-force:hover{ background:#fff4f0 !important; }

/* ---- 「ミラボに相談する」ボタン（つながらなかったときだけ出る） ---- */
#connResult .zqs4-ask{
  display:inline-block; margin:9px 0 0 8px;
  padding:6px 12px; font-size:12px; font-weight:800; cursor:pointer;
  color:#241a05; background:linear-gradient(180deg,#ffd27a,#f0a020);
  border:0; border-radius:8px; font-family:inherit;
  box-shadow:0 3px 10px rgba(240,160,32,.3);
}
#connResult .zqs4-ask:hover{ filter:brightness(1.06); }


/* =========================================================================
 * ★v1.14.0（Ryu指示 2026-08-16）
 * ======================================================================= */

/* ---- ① ミラボのメッセージ欄が、右下のボタンの後ろに隠れる
   ミラボを開いている間だけ、ボタンの箱を後ろへ下げる。
   （ボタンの位置は変えない＝閉じれば同じ場所にある） ---- */
body.zqmb-open #zqs4-dock{ z-index:30 !important; }

/* ---- ② つながり画面が閉じられない
   #connModal の中身（.cm-box）は overflow:auto でスクロールする作りで、
   ✕ の載っている見出し行（.cm-h）が一緒に流れて画面から消えていた
   （実測：中身413px／見える高さ262px）。見出しを貼り付けて、常に出す。 ---- */
#connModal .cm-box{ max-height:78vh !important; }
#connModal .cm-h{
  position:sticky !important; top:0 !important; z-index:3 !important;
}
#connModal #connClose{
  position:relative; z-index:4;
  min-width:34px; min-height:34px;      /* 押しやすく */
  display:inline-flex; align-items:center; justify-content:center;
}

/* ---- ③ つながり判定は ○／✖ ---- */
#connResult.connres .zqs-mark{
  display:inline-block; margin-right:6px; font-size:15px; font-weight:900; vertical-align:-1px;
}
#connResult.connres.ng .zqs-mark{ color:#d94436; }
#connResult.connres.ok .zqs-mark{ color:#2fbf6a; }

/* ★作りかけの名残「提出プレビュー（生JSON）」は出さない（v1.14.1）。
   stage4.js の submit() が盤面の上に JSON を貼り出していた。 */
#preview{ display:none !important; }