/* ===== バトル画面 UI v2 (画面イメージv2 / assets_README.md 準拠) =====
   1920×1080 設計の .bstage を JS で等倍スケール (--bscale) して中央表示。
   盤面 SVG の中身 (ユニット/タワー/カプセル/エフェクト) は render.js のまま不変で、
   その外側のクロムだけを装飾アセット (緑背景除去済 assets/ui/**, assets/bg/**) で構成する。
   9-slice は border-image、文字/数値/HP/CP/タイマー進行は HTML/CSS/SVG で描く。 */

/* バトル中はページ全体をフルスクリーンのステージに切り替える (他画面の .wrap は不変)。 */
body.battle-on { overflow: hidden; }
#scBattle.on {
  position: fixed; inset: 0; z-index: 50; overflow: hidden;
  background: #0a0806;            /* レターボックスの下地 (ステージはこの中央に等倍配置) */
}
/* 設計キャンバス。 --bscale は main.js が min(vw/1920, vh/1080) を流し込む。
   translate(-50%,-50%) で自身を中央に置いてから等倍スケール (grid の安全センタリングで
   オーバーフロー時に左寄せされる問題を回避)。 */
.bstage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--bscale, 1));
  transform-origin: center center;
  /* バトルシーン背景 (テーブル・盤面・手札トレイ・装飾を含む一枚絵)。
     盤面グリッドと手札カプセルはこの絵の盤面/スロットに合わせて重ねる。 */
  background: url("bg/battle_scene.webp") center / 100% 100% no-repeat;
  --gold: #d8b84a;
  font-family: var(--font-body);
  color: var(--ink);
}

/* 左右端の装飾 (本/コンパス・羊皮紙/羽ペン)。主要UIには重ねない。 */
.bdecor { display: none; }   /* 装飾はシーン背景に描き込み済み */

/* ---- 共通パネル ----
   暗色パネル・羊皮紙とも「金属枠＋角飾り」構造。引き延ばすと角飾りが歪み、9-slice の
   中央ストレッチは内側のビネットで継ぎ目が出る。そこで:
   ・枠/角飾り … border-image (fill なし) でくっきり保持
   ・内側 … 枠やビネットを避けて切り出した「実素材テクスチャ」を padding-box に伸縮
   テクスチャの伸縮は紙/革の地模様なので歪みも継ぎ目も見えない。 */
.bpanel { position: relative; color: var(--ink); }
.bpanel-dark {
  border: 22px solid transparent;
  border-image: url("ui/common/04_panel_dark_frame.png") 16% / 22px / 0 stretch;
  background: url("ui/common/04_panel_dark_center.png") center / cover border-box;
}
.bpanel-parch {
  border: 30px solid transparent; padding: 4px 6px;
  border-image: url("ui/common/05_panel_parchment_frame.png") 16% / 30px / 0 stretch;
  background: url("ui/common/05_panel_parchment_center.png") center / cover border-box;
}

/* ---- 上部コマンドバー ---- */
.btopbar {
  position: absolute; left: 24px; right: 24px; top: 16px; height: 60px;
  display: flex; align-items: center; gap: 12px; z-index: 20;
}
.bt-title { font-family: var(--font-head); font-weight: 800; font-size: 23px; color: #e7d6a6; letter-spacing: .04em;
  text-shadow: 0 2px 4px #000; margin-right: 8px; white-space: nowrap; }
.bt-ver { font-weight: 400; font-size: 13px; color: var(--sub); }
.bt-sp { flex: 1; }

/* ボタン: 丸ボタンは全面ストレッチ背景にして 9-slice の継ぎ目を出さない。
   文字は HTML で重ねる。アスペクトが近いので伸びは目立たない。 */
.bbtn {
  appearance: none; border: 0; color: #f3ecda; cursor: pointer;
  font-size: 19px; font-weight: 700; line-height: 1; letter-spacing: .02em;
  padding: 15px 28px; min-height: 50px; min-width: 156px;
  display: inline-flex; align-items: center; justify-content: center;
  background: center / 100% 100% no-repeat;
  text-shadow: 0 1px 2px rgba(0,0,0,.6); transition: filter .12s, transform .06s;
  white-space: nowrap;
}
.bbtn:hover { filter: brightness(1.12); }
.bbtn:active { transform: translateY(1px); }
/* 行動タイム中の作戦コマンド (行動開始 / 指示クリア) は非活性。 押せないことを見た目でも示す。 */
.bbtn:disabled { opacity: .42; filter: grayscale(.55) brightness(.85); cursor: default;
  pointer-events: none; transform: none; }
.bbtn-gold { color: #2a2207; text-shadow: 0 1px 0 rgba(255,255,255,.25);
  background-image: url("ui/common/09_button_gold_9slice.png"); }
.bbtn-dark { background-image: url("ui/common/11_button_dark_9slice.png"); }
.bbtn-red  { background-image: url("ui/common/10_button_red_9slice.png"); }
.bbtn-blue { background-image: url("ui/common/08_button_blue_9slice.png"); }

/* ---- 左パネル ---- */
.bleft { position: absolute; left: 40px; top: 96px; width: 312px;
  display: flex; flex-direction: column; gap: 18px; z-index: 10; }
.btimer-card { text-align: center; }
.bt-phase { font-size: 19px; font-weight: 800; color: var(--gold);
  text-shadow: 0 1px 2px #000; margin-bottom: 8px; line-height: 1.3; }

/* ターン時計: リング画像 + SVG 進行アーク (針/砂時計/中央大数字は無し)。 */
.btimer { position: relative; width: 180px; height: 180px; margin: 0 auto; cursor: pointer; }
.btimer-ring { position: absolute; inset: 0; background: url("ui/battle/23_timer_ring.png") center/contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.btimer-prog { position: absolute; inset: 0; transform: rotate(-90deg); }
.btp-track { fill: none; stroke: rgba(0,0,0,.35); stroke-width: 7; }
.btp-fill  { fill: none; stroke: var(--turn-color, #7bc77b); stroke-width: 7; stroke-linecap: round;
  stroke-dasharray: 314.159; stroke-dashoffset: var(--turn-dash, 0);
  transition: stroke-dashoffset .25s linear, stroke .4s linear; filter: drop-shadow(0 0 4px var(--turn-color, #7bc77b)); }
.btimer-lbl { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-size: 19px; font-weight: 700; color: #ffe; text-shadow: 0 1px 3px #000;
  font-variant-numeric: tabular-nums; cursor: pointer; padding: 10px 16px; }

/* CP 表示 (上=COM / 下=YOU)。 各段に CP 値 + CP40 を満タンとした進捗バー。 */
.bcp { display: flex; flex-direction: column; gap: 12px; font-variant-numeric: tabular-nums; }
.bcp-item { display: flex; flex-direction: column; gap: 5px; }
.bcp-row { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 700; }
.bcp-tag { font-size: 13px; font-weight: 800; padding: 2px 8px; border-radius: 4px; letter-spacing: .04em; }
.bcp-tag.you { background: #3a5a8c; color: #cfe0ff; }
.bcp-tag.com { background: #9c4a3a; color: #ffd9cf; }
.bcp-k { color: var(--sub); font-size: 14px; }
.bcp-row b { margin-left: auto; color: var(--gold); font-size: 27px; line-height: 1; }
.bcp-max { color: var(--sub); font-size: 14px; font-weight: 700; }
/* 進捗バー: トラック + 伸縮するフィル (render.js が width% を流し込む)。 */
.bcp-bar { height: 9px; border-radius: 5px; background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.12); overflow: hidden; }
.bcp-bar-fill { display: block; height: 100%; width: 0%; border-radius: 5px;
  transition: width .35s ease; }
.bcp-bar-fill.you { background: linear-gradient(90deg, #4a78b8, #8fc0ff); }
.bcp-bar-fill.com { background: linear-gradient(90deg, #b85a48, #ffae96); }

/* 勝利条件 */
.bwin { font-size: 16px; }
.bwin-h { font-weight: 800; color: var(--gold); margin-bottom: 6px; font-size: 17px; }
.bwin ul { margin: 0; padding-left: 18px; color: var(--sub); line-height: 1.7; }
.bwin li { list-style: disc; }

/* ---- 中央 盤面 ----
   傾き盤面画像 (board_tilt.png) を舞台として敷き、その紺色の面に合わせて render.js が
   6×6 グリッド (SVG) を bilinear で重ねる。当たり判定は SVG の .gcell が持つ。
   .bboard のアスペクトは画像 (1000×611) と SVG viewBox (640×391) に一致させ、
   背景 100% 100% と SVG (xMidYMid meet) がピクセル単位で揃うようにする。 */
/* 盤面オーバーレイのボックス。シーン背景に描かれた盤面に合わせた stage px。
   #boardsvg(viewBox 640×451) を meet で割り当て、render.js の四隅(局所座標)が背景の面に乗る。 */
.bboard {
  position: absolute; left: 400px; top: 40px;
  width: 1090px; height: 850px; background: none;
}
.bboard .boardwrap {
  position: absolute; inset: 0; width: 100%; height: 100%; background: none;
}
/* SVG ルートはクリックを拾わない (空き領域が上部ボタン等を塞がないように)。
   セル/ヒット矩形は .gcell / .sprhit が pointer-events:all で個別に受ける。 */
#boardsvg { pointer-events: none; }
/* 足元の影は暗いベタ塗りをやめ、 陣営色の柔らかい光だまり (ぼかし) にする。
   ※本体シルエットの drop-shadow グローは攻撃モーション (別レイヤ描画) 中に消えて
   　ちらつくため不採用。 常時描かれるこの足元グローだけで陣営色を表現する。 */
#boardsvg .sprshadow { filter: blur(3px); }
/* マス線は背景画像に描き込み済み。SVG の基本グリッド線は消す (ハイライト .gcell.mv/.at/.sm 等は維持)。
   セレクタは .gcell(0,1,0) でハイライト .gcell.mv(0,2,0) を上書きしないこと。 */
.gcell { stroke: transparent; }

/* ---- 右パネル (選択ユニット情報) ----
   デッキ編成のヒーロー詳細に寄せた縦レイアウト: 上に大きなカードイラスト、
   下に名前・種別・ステータスグリッド・能力・フレーバー。 */
.bright { position: absolute; right: 36px; top: 96px; width: 384px; bottom: 188px; z-index: 10;
  display: flex; }
/* 旧 .utt の暗色枠/固定幅を打ち消し、羊皮紙パネルとして表示 */
.bstage .utt {
  flex: 1; width: auto; max-width: none; align-self: stretch; margin: 0;
  border-radius: 0;
  border: 34px solid transparent; padding: 5px 11px;
  border-image: url("ui/common/05_panel_parchment_frame.png") 16% / 34px / 0 stretch;
  background: url("ui/common/05_panel_parchment_center.png") center / cover border-box;
  overflow: auto; color: #2a2114; font-size: 16px; line-height: 1.5;
  transition: box-shadow .2s ease;
}
/* 陣営の識別: 名前脇の「(YOU)/(COM)」 を廃し、 パネル枠を青(味方)/赤(敵)に光らせて示す。
   外側のハロー + 内側のにじみで、 羊皮紙のふちが色付いて見える。 中立 (空) 時は無色。 */
.bstage .utt.side-p { box-shadow: 0 0 0 2px rgba(96,164,255,.9),  0 0 26px 7px rgba(74,150,255,.7); }
.bstage .utt.side-e { box-shadow: 0 0 0 2px rgba(255,112,88,.9), 0 0 26px 7px rgba(232,94,70,.72); }
.bstage .utt .utt-empty { color: #6b5a3c; font-size: 16px; line-height: 1.9; }

/* 長押し (詳細表示 / カードのドラッグ) でスマホの文字選択・コピーメニュー (iOS callout) が
   起動して煩わしいのを抑制する。 盤面・手札・詳細シートは操作面なので文字選択させない。
   user-select / touch-callout は継承するので、 コンテナに指定すれば子要素にも効く。 */
#boardsvg, .bhand-tray, .bstage .utt {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* 手札カードはドラッグ&ドロップ召喚の掴み元。 touch-action:none でブラウザのスクロール横取りを
   止め、 タッチでも Pointer Events (pointermove) が最後まで届くようにする。 */
#hand .card { touch-action: none; }
/* ドラッグ中に指/カーソルへ追従するゴースト (カード複製)。
   .card 基底のパネル背景/枠が付いてくるとグレーの箱に見えるので、 背景・枠・影を消して
   カプセルの絵だけを浮かせる。 立体感は drop-shadow で付ける。 */
.card-drag-ghost {
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; opacity: .92; filter: drop-shadow(0 6px 10px rgba(0,0,0,.55));
}
/* ドラッグ中は掴み元カードを半透明にして「持ち上げている」感を出す。 */
body.card-dragging #hand .card.sel { opacity: .4; }

/* ヒーロー詳細レイアウト (デッキ編成と同じ構造・配色違い)。 上下を詰めてコンパクトに。 */
.bstage .uh { display: flex; flex-direction: column; gap: 7px; min-height: 100%; }
/* 立ち絵は縦長。 cover で横幅いっぱいに満たし、 上下をほんの少しだけトリミングする
   (切りすぎないよう高さは高めに確保。 ほぼ全身が残る)。 */
.bstage .uh-art {
  width: 100%; height: 336px; border-radius: 8px;
  background-color: rgba(0,0,0,.22); border: 1px solid rgba(90,61,22,.45);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* 設置物/タワーの立ち絵は切らずに全体表示 (contain)。 */
.bstage .uh-art.place { background-size: contain; background-position: center; }
.bstage .uh-art.emoji { display: flex; align-items: center; justify-content: center; font-size: 96px; }
.bstage .uh-mini .uh-art { height: 120px; }
.bstage .uh-body { display: flex; flex-direction: column; gap: 6px; }
.bstage .uh-name { font-size: 21px; font-weight: 800; color: #5a3d16; line-height: 1.2; }
.bstage .uh-name .side.p { color: #2f6aa8; } .bstage .uh-name .side.e { color: #a8462f; }
.bstage .uh-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bstage .uh-stars { font-size: 15px; letter-spacing: -1px; }
.bstage .uh-stars.r1 { color: #8f8f8f; } .bstage .uh-stars.r2 { color: #4f9a4f; }
.bstage .uh-stars.r3 { color: #3f86b8; } .bstage .uh-stars.r4 { color: #a13bb6; }
.bstage .uh-stars.r5 { color: #b8962a; }
.bstage .uh-no { font-size: 15px; color: #6b5a3c; font-weight: 700; }
.bstage .uh-no .uicon { width: 17px; height: 17px; vertical-align: -0.22em; margin: 0 3px; }
.bstage .uh-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; }
.bstage .uh-stat {
  background: rgba(90,61,22,.12); border: 1px solid rgba(90,61,22,.3); border-radius: 6px;
  padding: 4px 4px; text-align: center; color: #5a4a2c; font-size: 15px;
}
.bstage .uh-stat span { display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.bstage .uh-stat span .uicon { width: 16px; height: 16px; vertical-align: middle; }
.bstage .uh-stat b { display: block; font-size: 21px; color: #2a2114; margin-top: 2px;
  font-variant-numeric: tabular-nums; }
.bstage .uh-stat b.buffed { color: #2f6aa8; }
/* 能力欄はバトル中いちばん見たい情報。 枠で囲って目立たせ、 文字も大きめ・濃いめに。 */
.bstage .uh-ab { background: rgba(120,82,28,.14); border: 1px solid rgba(90,61,22,.4);
  border-radius: 8px; padding: 7px 10px 8px; }
.bstage .uh-lbl { font-size: 15px; font-weight: 800; color: #7a4e12; margin-bottom: 5px;
  letter-spacing: .04em; }
.bstage .uh-ab ul { margin: 0; padding-left: 19px; font-size: 17px; line-height: 1.65; }
.bstage .uh-ab li { color: #2a2012; font-weight: 600; margin-bottom: 3px; }
.bstage .uh-ab li::marker { color: #b07a2a; }
.bstage .uh-lore { font-size: 15px; color: #4a3c22; line-height: 1.7;
  border-left: 3px solid rgba(90,61,22,.45); padding-left: 10px; }

/* ---- 下部 手札トレイ ----
   傾き手札トレイ画像 (tray_tilt.png) を舞台にして、6 つの彫り込みスロットの中心へ
   カプセルを重ねる。スロット中心はコード側 (CSS の nth-child) で定義する固定6スロット。
   カードは render.js が #hand へ順に append するので nth-child = スロット番号で対応。 */
/* 手札トレイもシーン背景に描き込み済み。透明ボックスを背景のトレイ位置に重ね、
   6つの彫り込みスロット中心にカプセルを置く (stage px)。 */
.bhand { position: absolute; left: 460px; top: 900px; z-index: 12; }
.bhand-tray { position: relative; width: 950px; height: 130px; background: none; }
.bhand-tray .handov { position: absolute; inset: 0; margin: 0; padding: 0; display: block; overflow: visible; }
/* 各スロット中心。背景トレイの彫り込み 6 個に合わせた固定座標 (右へ下る遠近＋右側はわずかに圧縮)。 */
.bhand-tray .handov .card {
  position: absolute; transform: translate(-50%, -50%);
  width: 144px; height: 144px; padding: 4px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  /* カプセル (透過絵) の形なりに落ちる自然な影。 親 .card に掛けることで capcard の
     インライン brightness フィルタと衝突させない (子の描画結果からシルエット影を生成)。 */
  filter: drop-shadow(2px 9px 7px rgba(0,0,0,.6));
}
/* カプセル本体右下のセルフシェーディング (立体感)。 mask 用の image/size/position は
   capsuleMaskStyle がインラインで当て、 ここでは暗くするグラデ (右下ほど濃く) だけ定義する。 */
.bhand-tray .handov .card .capcard { position: relative; }
.bhand-tray .handov .card .capshade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(0,0,0,0) 44%, rgba(0,0,0,.34) 76%, rgba(0,0,0,.55) 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* スロット中心 (.bhand 原点 460,900 からの stage px)。背景の彫り込み 6 スロットの実測中心。
   トレイは右へ大きく下る傾きなので left を進めるごとに top も増やす。 */
.bhand-tray .handov .card:nth-child(1) { left: 70px;  top: -6px; }
.bhand-tray .handov .card:nth-child(2) { left: 238px; top: 7px; }
.bhand-tray .handov .card:nth-child(3) { left: 411px; top: 27px; }
.bhand-tray .handov .card:nth-child(4) { left: 571px; top: 39px; }
.bhand-tray .handov .card:nth-child(5) { left: 731px; top: 52px; }
.bhand-tray .handov .card:nth-child(6) { left: 881px; top: 63px; }
/* 選択中は自然な影に青いグローを重ねる (影を消さずに強調)。 */
.bhand-tray .handov .card.sel { filter: drop-shadow(2px 9px 7px rgba(0,0,0,.6)) drop-shadow(0 0 11px rgba(140,195,255,.95)); }
.bhand-tray .handov .card.no { opacity: .42; }
/* 汎用 .card:active も transform を上書きするので中央寄せを保ったまま押下表現にする。 */
.bhand-tray .handov .card:active { transform: translate(-50%,-50%) translateY(1px); }
.bhand-tray .handov .card .ci { font-size: 64px; line-height: 1; }
/* NEW カードの登場演出。 汎用 drawIn は transform を上書きしてトレイの中央寄せ
   (translate(-50%,-50%)) を打ち消し、 カード半分ぶん右下にズレてしまう。
   トレイ専用キーフレームで中央寄せを保ったまま pop させる。 */
.bhand-tray .handov .card.draw-in { animation-name: drawInTray; }
.bhand-tray .handov .card.no.draw-in { animation-name: drawInTrayNo; }
@keyframes drawInTray {
  0%   { transform: translate(-50%,-50%) translateY(24px) scale(.7) rotate(-6deg); opacity: 0; }
  15%  { transform: translate(-50%,-50%) translateY(-4px) scale(1.08) rotate(2deg); opacity: 1; }
  25%  { transform: translate(-50%,-50%) scale(1) rotate(0); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1) rotate(0); opacity: 1; }
}
@keyframes drawInTrayNo {
  0%   { transform: translate(-50%,-50%) translateY(24px) scale(.7) rotate(-6deg); opacity: 0; }
  15%  { transform: translate(-50%,-50%) translateY(-4px) scale(1.08) rotate(2deg); opacity: 1; }
  25%  { transform: translate(-50%,-50%) scale(1) rotate(0); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(1) rotate(0); opacity: .42; }
}
.bhand-tray .handov .card .ci.capcard { width: 100%; height: 100%; }

/* ---- 盤面オーバーレイ (ヒント) ---- */
.bboard .hintov { position: absolute; left: 8px; right: 8px; bottom: 18px; top: auto;
  text-align: center; font-size: 18px; color: #fff; background: rgba(10,8,6,.6);
  border-radius: 8px; padding: 7px 14px; text-shadow: 0 1px 2px #000;
  pointer-events: none; z-index: 5; line-height: 1.4; }
.bboard .hintov:empty { display: none; }
.bboard .logov { display: none; }   /* 盤面内の旧ログ枠は廃止 (ログは左パネル .blog へ移設) */

/* ---- 左パネル: 戦況ログ ---- */
.blog { display: flex; flex-direction: column; min-height: 0; }
.blog-h { font-weight: 800; color: var(--gold); font-size: 16px; margin-bottom: 6px;
  text-shadow: 0 1px 2px #000; }
/* 左パネルに収めるスクロール式ログ。 最新行が下に積もり自動で末尾へスクロール。 */
.blog .logov {
  display: block; height: 232px; overflow-y: auto; padding: 4px 6px;
  background: rgba(8,6,4,.4); border: 1px solid rgba(255,255,255,.08); border-radius: 6px;
  font-size: 13.5px; line-height: 1.5; color: #e9e2d2; text-shadow: 0 1px 1px #000;
}
.blog .logov .me { color: #9fd0ff; }
.blog .logov .en { color: #ffb29c; }
.blog .logov .sys { color: #cdbf9a; }

/* 旧バトルレイアウト (.battlearea/.gamewin/.menubar/.cpov/.phaseov) は v2 では未使用。 */

/* ============================================================
   スマホ縦画面 (portrait) — バトル画面の縦再レイアウト
   ------------------------------------------------------------
   PC 側 (1920×1080 の .bstage を --bscale で等倍縮小する構成) は
   @media 外の基底ルールのまま。 ここ (<=759px) でだけ固定キャンバスを
   解除し、上=HUD/ボタン → 中央=盤面 (主役・全幅) → 下=手札 の縦フローに
   組み替える。 盤面 SVG の中身 (render.js) は不変。
   ============================================================ */
@media (max-width:759px){
  /* バトル画面は縦スクロール可能な独立コンテナに (body の overflow:hidden の影響外) */
  #scBattle.on{ overflow-y:auto; overflow-x:hidden;
    padding-top:env(safe-area-inset-top); }

  /* 固定キャンバス解除: 中央配置・scale(var(--bscale)) を無効化し素の縦ブロックへ。
     横長のシーン背景一枚絵は縦では等倍で使えないので、 盤面はシーンから切り出した
     盤面クロップ (battle_board_portrait) を使い、 周囲は卓上を思わせる暗い木目調
     グラデーションで敷く。 */
  .bstage{
    position:static; left:auto; top:auto;
    width:100%; height:auto; min-height:100%;
    transform:none;
    background:radial-gradient(130% 80% at 50% 4%, #2b2015 0%, #1a1109 58%, #100b06 100%);
    display:flex; flex-direction:column; gap:6px;
    padding:6px calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));
  }

  /* ---- 上部コマンドバー (行動開始/指示クリア/ログ/終了) ---- */
  .btopbar{ position:static; left:auto; right:auto; top:auto; height:auto;
    order:1; display:flex; flex-wrap:wrap; gap:6px; }
  .bt-title{ display:none; }              /* タイトルはスペース節約で隠す */
  .bt-sp{ display:none; }
  .btopbar .bbtn{ flex:1 1 auto; min-width:0; min-height:44px;
    font-size:14px; padding:10px 8px; }
  .btopbar .bbtn#quitBtn{ flex:0 0 auto; }

  /* ---- HUD 帯 (フェーズ + タイマー + CP)。 勝利条件/サイドログは畳む ---- */
  .bleft{ position:static; left:auto; top:auto; width:auto;
    order:2; display:flex; flex-direction:row; align-items:center; gap:6px; }
  /* HUD の暗色パネルは太い border-image をやめ、薄枠でコンパクトに */
  .bleft .bpanel-dark{ border:1px solid rgba(255,255,255,.14); border-image:none;
    background:rgba(12,10,8,.62); border-radius:8px; padding:5px 8px; }
  .bleft .btimer-card{ flex:0 0 auto; display:flex; align-items:center; gap:8px; }
  .bt-phase{ font-size:13px; margin:0; white-space:nowrap; }
  .btimer{ width:40px; height:40px; margin:0; }
  .btimer-lbl{ font-size:12px; padding:0; }
  .bcp{ flex:1 1 auto; flex-direction:row; gap:12px; align-items:center; }
  .bcp-item{ flex:1 1 0; gap:3px; }
  .bcp-row{ font-size:12px; gap:5px; }
  .bcp-row b{ font-size:17px; margin-left:auto; }
  .bcp-tag{ font-size:11px; padding:1px 6px; }
  .bcp-k{ display:none; }                 /* 「CP」ラベルは省略 (桁と/40だけ) */
  .bcp-max{ font-size:12px; }
  .bwin, .blog{ display:none; }           /* ログは 📜 ボタンのモーダルで見る */

  /* ---- 中央 盤面 (主役・全幅) ----
     盤面クロップ (bboard ボックス領域をシーンから切り出したもの) を敷く。 render.js の
     グリッド/ユニットは PC と同じ homography で描かれ、 この画像のマス目にピクセル一致する
     (SVG viewBox 640×499 を meet で割り当てる比率も PC と同一)。 マス線は画像側にあるので
     SVG セルは PC 同様に透明のまま。 */
  /* 盤面は上寄せ (HUD の直下)。 下部の余白は詳細シートの居場所として空けておく
     (シートを開いても盤面/手札を覆わないための設計)。 */
  .bboard{ position:relative; left:auto; top:auto;
    order:3; width:100%; height:auto; aspect-ratio:640/499; }
  .bboard .boardwrap{ position:absolute; inset:0; width:100%; height:100%;
    background:url("bg/battle_board_portrait.webp") center / 100% 100% no-repeat; }

  /* ---- 下部 手札トレイ: 傾きトレイの絶対座標を解除して横並びに ----
     傾きトレイ画像 (6スロット遠近) は縦の flex 並びに合わないので、 卓上の「棚」風に
     暗い帯 (半透明＋真鍮色の細枠) を敷いて、 その上へカプセルを並べる。 */
  .bhand{ position:static; left:auto; top:auto; z-index:auto; order:4; width:100%; }
  .bhand-tray{ position:static; width:100%; height:auto;
    background:linear-gradient(180deg, rgba(28,20,12,.82), rgba(16,11,7,.9));
    border:1px solid rgba(120,90,50,.4); border-radius:10px;
    box-shadow:inset 0 1px 0 rgba(255,220,160,.08), 0 2px 6px rgba(0,0,0,.4); }
  .bhand-tray .handov{ position:static; inset:auto; display:flex; gap:6px;
    justify-content:center; flex-wrap:nowrap; overflow-x:auto; padding:4px 2px; }
  /* 傾き配置用の絶対座標/中央寄せ transform を打ち消してフロー配置に戻す */
  .bhand-tray .handov .card{ position:static; left:auto!important; top:auto!important;
    transform:none; width:15vw; max-width:64px; height:auto; aspect-ratio:1; padding:2px;
    filter:drop-shadow(1px 3px 4px rgba(0,0,0,.55)); }
  .bhand-tray .handov .card.sel{ filter:drop-shadow(1px 3px 4px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(140,195,255,.95)); }
  .bhand-tray .handov .card:active{ transform:translateY(1px); }
  /* トレイ専用の登場演出は中央寄せ前提なので縦では無効化 (カードはそのまま表示) */
  .bhand-tray .handov .card.draw-in{ animation:none; }
  .bhand-tray .handov .card .ci{ font-size:34px; }

  /* ---- ユニット詳細 (#utt): 下からのボトムシート ----
     既定は画面外 (translateY)。 長押しで showUnitTip が body.utt-sheet-open を付けて開く。 */
  /* 下部の余白ゾーンに収まる高さにして、 盤面/手札を覆わない peek にする。
     背が高い立ち絵は隠し、 名前・ステータス・能力・フレーバーだけをコンパクトに見せる。 */
  .bright{ position:fixed; left:0; right:0; bottom:0; top:auto; width:auto;
    max-height:46vh; z-index:60; display:flex; flex-direction:column;
    transform:translateY(103%); transition:transform .25s ease;
    padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  body.utt-sheet-open .bright{ transform:translateY(0); }
  .bright .msheet-close{ display:inline-flex; align-self:flex-end; margin:6px 8px 4px auto; }
  /* シートの中身: 太枠を圧縮し上端を角丸に */
  .bstage .utt{ border-width:16px; border-radius:14px 14px 0 0; max-height:44vh; }
  /* 詳細シートは横並びレイアウト: 左に縦長の立ち絵 (縮小)、 右にステータス＋能力。
     縦積みだと立ち絵が高さを食って能力まで届かないため、 立ち絵を左の細い縦帯にして
     残り幅すべてを情報 (名前・ステータス・能力) に使う。 フレーバーはバトル中は出さない。 */
  .bstage .bright .uh{ flex-direction:row; align-items:stretch; gap:11px; min-height:0; }
  .bstage .bright .uh-art{ flex:0 0 33%; max-width:128px; width:auto; height:auto;
    align-self:stretch; min-height:158px; }
  .bstage .bright .uh-body{ flex:1 1 auto; min-width:0; }
  /* 詳細シートの背景 (暗転のみ)。 タップは下の盤面へ通すため pointer-events:none。
     閉じるのは「シート外タップ (main.js) / ✕ ボタン」。 */
  #uttBackdrop{ display:none; }
  body.utt-sheet-open #uttBackdrop{ display:block; position:fixed; inset:0;
    background:rgba(0,0,0,.4); z-index:59; pointer-events:none; }
}