/* ============================================================
 battle_32_ui.css ― Dark SF Mythology Battle UI v2
 参考画像スタイル：黒基調・白細線・青味方・紫敵・赤ボスHP
 ============================================================ */

/* ── ルート ── */
#battle32-root {
 position: fixed;
 inset: 0;
 z-index: 160000;
 display: none;
 flex-direction: column;
 background: #060810;
 color: #e8e4dc;
 font-family: 'Noto Serif JP', serif;
 overflow: hidden;
 height: 100dvh;
 --cell-size: min(15vw, 56px);
}

/* 背景画像 */
#battle32-root::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--b32-battle-background-image, url('../images/battle_bg_01.webp')) center center / cover no-repeat;
  opacity: .42;
  pointer-events: none;
}

#battle32-root::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(90,140,210,.16) 0%, transparent 62%),
    linear-gradient(180deg, rgba(12,18,36,.12), rgba(4,6,16,.22));
  pointer-events: none;
}

#battle32-root > * {
 position: relative;
 z-index: 1;
}

/* ============================================================
 ヘッダー ── 参考画像: BATTLE 01 / UNREGISTERED DEITY + TURN
 ============================================================ */
#b32-header {
 flex-shrink: 0;
 display: grid;
 grid-template-columns: 1fr auto 1fr;
 align-items: center;
 padding: max(10px, env(safe-area-inset-top, 10px)) 14px 8px;
 background: rgba(0,0,0,.60);
 border-bottom: 1px solid rgba(255,255,255,.10);
 gap: 8px;
}

/* 左：BATTLE 01 + UNREGISTERED DEITY */
#b32-turn-box {
 display: flex;
 flex-direction: column;
 gap: 1px;
}

#b32-battle-title {
 font-family: 'Cinzel', serif;
 font-size: 15px;
 font-weight: 700;
 letter-spacing: 2px;
 color: rgba(232,228,220,.95);
 line-height: 1.2;
}

#b32-battle-subtitle {
 font-family: 'Cinzel', serif;
 font-size: 8px;
 letter-spacing: 3px;
 color: rgba(180,170,200,.55);
 line-height: 1.2;
}

/* 中央: TURN 05 / 12 */
#b32-phase-badge {
 font-family: 'Cinzel', serif;
 font-size: 10px;
 letter-spacing: 2px;
 color: rgba(180,200,240,.70);
 text-align: center;
 white-space: nowrap;
 padding: 0;
 border: none;
 border-radius: 0;
 background: none;
}

#b32-turn-center {
 display: flex;
 align-items: baseline;
 justify-content: center;
 gap: 4px;
}

#b32-turn-label {
 font-family: 'Cinzel', serif;
 font-size: 9px;
 letter-spacing: 3px;
 color: rgba(180,200,240,.50);
}

#b32-turn-num-large {
 font-family: 'Cinzel', serif;
 font-size: 22px;
 font-weight: 700;
 letter-spacing: 1px;
 color: rgba(232,228,220,.95);
 line-height: 1;
}

#b32-turn-slash {
 font-family: 'Cinzel', serif;
 font-size: 14px;
 color: rgba(180,200,240,.40);
}

#b32-turn-max {
 font-family: 'Cinzel', serif;
 font-size: 14px;
 color: rgba(180,200,240,.55);
}

/* 右: 神気マーカーエリア */
#b32-stage-label {
 text-align: right;
 display: flex;
 flex-direction: column;
 align-items: flex-end;
 gap: 2px;
}

#b32-stage-id {
 font-family: 'Cinzel', serif;
 font-size: 9px;
 letter-spacing: 2px;
 color: rgba(232,228,220,.35);
}

/* ── ヒントバー ── */
#b32-hint-bar {
 flex-shrink: 0;
 padding: 5px 16px;
 font-size: 10px;
 letter-spacing: 1px;
 text-align: center;
 display: none;
 transition: opacity .2s;
 border-bottom: 1px solid rgba(255,255,255,.05);
}

#b32-hint-bar.skill-hint {
 display: block;
 background: rgba(80,160,255,.08);
 border-bottom: 1px solid rgba(80,160,255,.18);
 color: rgba(140,200,255,.90);
}

/* ============================================================
 ボスHP UI ── 参考画像: BOSS | RESISTANCE | 2200/2200
 ============================================================ */
#b32-boss-hp-ui {
 flex-shrink: 0;
 padding: 7px 14px 8px;
 background: rgba(0,0,0,.55);
 border-bottom: 1px solid rgba(255,255,255,.10);
 position: relative;
}

/* 上下の細線 */
#b32-boss-hp-ui::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(255,80,80,.35), transparent);
}

/* 3カラム: 菱形+BOSS | バー+RESISTANCE | HP数値 */
#b32-boss-hp-layout {
 display: grid;
 grid-template-columns: auto 1fr auto;
 align-items: center;
 gap: 10px;
 max-width: 460px;
 margin: 0 auto;
}

/* 左: 菱形紋章 + BOSSラベル */
#b32-boss-hp-left {
 display: flex;
 align-items: center;
 gap: 6px;
 flex-shrink: 0;
}

/* 菱形装飾（CSS only） */
#b32-boss-hp-emblem {
 width: 18px;
 height: 18px;
 position: relative;
 flex-shrink: 0;
}

#b32-boss-hp-emblem::before {
 content: '';
 position: absolute;
 inset: 2px;
 background: rgba(220,60,60,.85);
 transform: rotate(45deg);
 border: 1px solid rgba(255,120,120,.70);
 box-shadow:
 0 0 6px rgba(255,60,60,.55),
 0 0 12px rgba(255,40,40,.28);
}

/* 小さい内側の菱形 */
#b32-boss-hp-emblem::after {
 content: '';
 position: absolute;
 inset: 5px;
 background: rgba(255,200,200,.90);
 transform: rotate(45deg);
 z-index: 1;
}

#b32-boss-hp-name {
 font-family: 'Cinzel', serif;
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 3px;
 color: rgba(255,140,140,.95);
 white-space: nowrap;
}

/* 中央: バー + RESISTANCE */
#b32-boss-hp-center {
 display: flex;
 flex-direction: column;
 gap: 3px;
 min-width: 0;
}

#b32-boss-hp-resistance-label {
 font-family: 'Cinzel', serif;
 font-size: 7px;
 letter-spacing: 3px;
 color: rgba(200,180,220,.45);
 text-align: center;
}

#b32-boss-hp-bar-wrap {
 width: 100%;
 height: 7px;
 border-radius: 1px;
 background: rgba(0,0,0,.65);
 border: 1px solid rgba(255,255,255,.12);
 overflow: hidden;
 position: relative;
}

#b32-boss-hp-bar {
 height: 100%;
 width: 100%;
 border-radius: 1px;
 background: linear-gradient(90deg,
 rgba(160,30,30,.95) 0%,
 rgba(230,80,60,.95) 60%,
 rgba(255,120,100,.90) 100%
 );
 transition: width .3s ease;
 position: relative;
}

/* バー内のキラ光 */
#b32-boss-hp-bar::after {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 3px;
 background: rgba(255,200,200,.30);
 border-radius: 1px;
}

/* 右: HP数値 */
#b32-boss-hp-text {
 font-family: 'Cinzel', serif;
 font-size: 13px;
 font-weight: 700;
 letter-spacing: 1px;
 color: rgba(255,180,160,.95);
 white-space: nowrap;
 text-shadow: 0 0 8px rgba(255,100,80,.55);
 flex-shrink: 0;
}

/* ============================================================
 スクロール領域
 ============================================================ */
#b32-scroll {
 flex: 1;
 min-height: 0;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 2px 8px 2px;
 gap: 0;
}

/* ── ボードラッパー ── */
#b32-board-wrap {
 position: relative;
 flex-shrink: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 perspective: 700px;
 padding-top: 4px;
 padding-bottom: 0;
}

/* ── ボード（5×8グリッド）── */
#b32-board {
 display: grid;
 grid-template-columns: repeat(5, var(--cell-size));
 grid-template-rows: repeat(8, var(--cell-size));
 gap: 2px;
 position: relative;
 /* 参考画像に合わせて傾斜を調整 */
 transform: rotateX(38deg);
 transform-origin: center center;
 transform-style: preserve-3d;
 overflow: visible;
}

/* ── セル基本 ── */
.b32-cell {
 width: var(--cell-size);
 height: var(--cell-size);
 border-radius: 2px;
 border: 1px solid rgba(160,140,220,.22);
 background: rgba(6,8,18,.38);
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: background .15s, border-color .15s, box-shadow .15s;
 cursor: default;
 overflow: visible;
 transform-style: preserve-3d;
}

/* セル内の菱形装飾（参考画像の空マスの◇） */
.b32-cell::before {
 content: '';
 position: absolute;
 width: 30%;
 height: 30%;
 border: 1px solid rgba(160,140,255,.10);
 transform: rotate(45deg);
 pointer-events: none;
}

/* 味方ゾーン (row 5〜7): 青発光 */
.b32-cell.ally-zone {
 background: rgba(8,20,40,.50);
 border-color: rgba(60,140,255,.30);
 box-shadow:
 inset 0 0 10px rgba(40,100,255,.08),
 0 0 4px rgba(40,100,255,.08);
}

.b32-cell.ally-zone::before {
 border-color: rgba(80,160,255,.14);
}

/* 敵ゾーン (row 0〜2): 紫発光 */
.b32-cell.enemy-zone {
 background: rgba(20,8,30,.48);
 border-color: rgba(140,80,200,.28);
 box-shadow:
 inset 0 0 10px rgba(120,60,200,.07),
 0 0 4px rgba(120,60,200,.07);
}

.b32-cell.enemy-zone::before {
 border-color: rgba(160,80,220,.12);
}

/* 境界ライン */
.b32-cell.row-divider {
 border-top: 1px solid rgba(200,180,255,.22);
}

/* 移動先ハイライト */
.b32-cell.movable {
 background:
 linear-gradient(145deg, rgba(60,180,255,.20), rgba(10,40,60,.38)),
 rgba(8,24,36,.52) !important;
 border-color: rgba(80,200,255,.70) !important;
 box-shadow:
 inset 0 0 14px rgba(60,200,255,.22),
 0 0 12px rgba(60,200,255,.25) !important;
 cursor: pointer;
}

/* 選択中マス: 水色のL字コーナーフレーム風 */
.b32-cell.movable::after {
 content: '';
 position: absolute;
 inset: -1px;
 border: 2px solid rgba(100,220,255,.80);
 border-radius: 2px;
 pointer-events: none;
 box-shadow:
 0 0 8px rgba(80,220,255,.50),
 inset 0 0 6px rgba(80,220,255,.18);
}

.b32-cell.movable:active {
 background:
 linear-gradient(145deg, rgba(80,220,255,.30), rgba(20,60,80,.45)),
 rgba(10,32,44,.60) !important;
}

/* 味方選択可能 */
.b32-cell.selectable-ally {
 box-shadow: inset 0 0 0 2px rgba(240,192,64,.55);
 cursor: pointer;
}

/* 選択中ユニット: 水色L字コーナー */
.b32-cell.selected-unit,
.b32-cell.skill-selected {
 border-color: rgba(100,220,255,.95) !important;
 box-shadow:
 inset 0 0 0 2px rgba(100,220,255,.80),
 inset 0 0 16px rgba(80,200,255,.18),
 0 0 18px rgba(80,200,255,.40) !important;
}

/* L字コーナーエフェクト */
.b32-cell.skill-selected::after {
 content: '';
 position: absolute;
 inset: -2px;
 border: 2px solid rgba(100,220,255,.90);
 border-radius: 2px;
 pointer-events: none;
 box-shadow: 0 0 12px rgba(80,220,255,.60);
}

/* スキル：行動可能な味方 */
.b32-cell.skill-selectable {
 box-shadow: inset 0 0 0 2px rgba(232,192,64,.45);
 cursor: pointer;
}

/* スキル：射程ハイライト */
.b32-cell.skill-range {
 background:
 linear-gradient(145deg, rgba(160,80,255,.18), rgba(40,16,64,.30)),
 rgba(16,8,24,.52) !important;
 border-color: rgba(180,100,255,.50) !important;
 box-shadow:
 inset 0 0 12px rgba(160,80,255,.18),
 0 0 12px rgba(160,80,255,.20) !important;
}

/* ============================================================
 ユニットチップ
 ============================================================ */
.b32-unit {
 position: absolute;
 left: 50%;
 bottom: 0px;
 width: calc(var(--cell-size) * 1.18);
 height: calc(var(--cell-size) * 1.68);
 transform: translateX(-50%);
 transform-origin: bottom center;
 transform-style: preserve-3d;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: flex-end;
 pointer-events: none;
 z-index: 2;
}

.b32-unit.ally {
 bottom: 0px;
 transform: translateX(-50%);
}

.b32-unit.enemy {
 bottom: 0px;
 transform: translateX(-50%);
}

.b32-unit.dead {
 opacity: .18;
 filter: grayscale(1);
}

.b32-unit.skill-done {
 opacity: .55;
}

.b32-unit-icon {
 width: 100%;
 height: calc(var(--cell-size) * 1.45);
 object-fit: contain;
 object-position: bottom center;
 display: block;
 pointer-events: none;
 image-rendering: auto;
 transform:
 translateY(var(--unit-offset-y, 0px))
 scale(var(--unit-scale, 1));
 transform-origin: center bottom;
}

.b32-unit-initial {
 width: calc(var(--cell-size) * 0.62);
 height: calc(var(--cell-size) * 0.62);
 border-radius: 50%;
 background: rgba(255,255,255,.08);
 border: 1px solid rgba(255,255,255,.2);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: calc(var(--cell-size) * 0.28);
 color: rgba(232,228,220,.7);
 flex-shrink: 0;
}

.b32-unit-name { display: none !important; }

.b32-hp-bar-wrap {
 position: absolute;
 bottom: 0px;
 left: 50%;
 width: calc(var(--cell-size) * 0.76);
 height: 3px;
 transform: translateX(-50%);
 border-radius: 1px;
 background: rgba(0,0,0,.55);
 overflow: hidden;
}

/* ally HP バー：2px の極細バー（数値なし・足元に重ねる） */
.b32-unit.ally .b32-hp-bar-wrap {
  display: block;
  height: 2px;
  bottom: 0px;
  background: rgba(0,0,0,.45);
}
.b32-unit.ally .b32-hp-bar {
  background: #60b8ff; /* 青系：敵（赤/黄/緑）と区別 */
  transition: width .3s ease;
}
.b32-unit.boss .b32-hp-bar-wrap { display: none; }

/* BOSSだけ大きく表示 ── 削除済み（#battle32-root スコープで一元管理） */
/* .b32-unit.boss { ... } */
/* .b32-unit.boss .b32-unit-icon { ... } */
/* .b32-unit.enemy.boss { bottom: -10px; } */
/* .b32-unit.enemy.boss .b32-unit-icon { transform: ... scale(1.55); } */

/* 中ボス ── 削除済み（#battle32-root スコープで一元管理） */
/* .b32-unit.enemy.midboss, .b32-unit.enemy.enemy-id-enemy_02b { width/height/scale } */
/* .b32-unit.enemy.midboss .b32-unit-icon, ... { scale(1.12) } */

/* 雑魚 enemy_02a ── 削除済み（#battle32-root スコープで一元管理） */
/* .b32-unit.enemy.enemy-id-enemy_02a { width/height } */
/* .b32-unit.enemy.enemy-id-enemy_02a .b32-unit-icon { scale(1.08) } */

.b32-hp-bar {
 height: 100%;
 border-radius: 1px;
 transition: width .3s ease;
}

.b32-shinki-dots {
 position: absolute;
 top: 2px; right: 2px;
 display: none;
 gap: 1px;
}

.b32-shinki-dot {
 width: 4px;
 height: 4px;
 border-radius: 50%;
 border: 1px solid rgba(255,255,255,.3);
}

.b32-shinki-dot.filled {
 background: #60c8ff;
 border-color: #60c8ff;
 box-shadow: 0 0 4px #60c8ff88;
}

.b32-boss-badge {
 position: absolute;
 top: 2px; left: 2px;
 font-size: 6px;
 letter-spacing: .5px;
 background: rgba(220,60,60,.85);
 color: #fff;
 border-radius: 2px;
 padding: 1px 3px;
 font-family: 'Cinzel', serif;
 display: none;
}

.b32-unit-done-mark {
 position: absolute;
 top: 2px; left: 2px;
 font-size: 10px;
 line-height: 1;
 opacity: .7;
}

/* ゾーンラベル */
.b32-zone-label {
 position: absolute;
 right: -36px;
 font-size: 8px;
 letter-spacing: 2px;
 writing-mode: vertical-rl;
 color: rgba(255,255,255,.14);
 font-family: 'Cinzel', serif;
 pointer-events: none;
}

/* ============================================================
 スキルパネル 共通ラッパー
 ============================================================ */
#b32-bottom-area {
 width: 100%;
 max-width: 440px;
 flex-shrink: 0;
 display: flex;
 flex-direction: column;
 gap: 4px;
 padding: 0 4px;
}

#b32-bottom-label {
 font-family: 'Cinzel', serif;
 font-size: 9px;
 letter-spacing: 3px;
 color: rgba(232,228,220,.3);
 text-align: center;
}

#b32-bottom-sub {
 font-family: 'Cinzel', serif;
 font-size: 9px;
 letter-spacing: 2px;
 color: rgba(232,228,220,.25);
 text-align: center;
}

/* ── スキルパネル ── */
#b32-skill-panel {
 width: 100%;
 display: flex;
 flex-direction: column;
 gap: 3px;
}

#b32-skill-chara-name {
 font-family: 'Cinzel', serif;
 font-size: 11px;
 letter-spacing: 3px;
 color: rgba(232,228,220,.8);
 text-align: center;
 padding: 3px 0 2px;
 border-bottom: 1px solid rgba(255,255,255,.07);
}

#b32-skill-list {
 display: flex;
 flex-direction: column;
 gap: 3px;
}

.b32-skill-row {
 display: flex;
 align-items: center;
 gap: 8px;
 padding: 6px 10px;
 border-radius: 4px;
 border: 1px solid rgba(255,255,255,.08);
 background: rgba(255,255,255,.03);
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
 transition: background .15s, border-color .15s;
 user-select: none;
}

.b32-skill-row:active {
 background: rgba(80,160,255,.10);
 border-color: rgba(80,160,255,.35);
}

.b32-skill-row.disabled {
 opacity: .3;
 pointer-events: none;
}

.b32-skill-name {
 font-family: 'Noto Serif JP', serif;
 font-size: 12px;
 font-weight: 500;
 letter-spacing: 1px;
 color: rgba(232,228,220,.9);
 flex: 0 0 auto;
}

.b32-skill-desc {
 flex: 1;
 font-size: 10px;
 letter-spacing: .5px;
 color: rgba(232,228,220,.4);
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.b32-skill-shinki {
 flex: 0 0 auto;
 display: flex;
 gap: 2px;
 align-items: center;
}

.b32-skill-shinki-dot {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: rgba(80,180,255,.18);
 border: 1px solid rgba(80,180,255,.35);
}

.b32-skill-shinki-dot.filled {
 background: #60c8ff;
 box-shadow: 0 0 4px #60c8ff88;
}

.b32-skill-reason {
 flex: 0 0 auto;
 font-size: 9px;
 letter-spacing: .5px;
 color: rgba(200,80,80,.7);
}

/* ── ログ（非表示） ── */
#b32-log-wrap { display: none; }

#b32-log {
 max-height: 56px;
 overflow-y: auto;
 background: rgba(0,0,0,.35);
 border-radius: 4px;
 border: 1px solid rgba(255,255,255,.06);
 padding: 6px 10px;
 font-size: 10px;
 color: rgba(232,228,220,.45);
 letter-spacing: .5px;
 line-height: 1.8;
 display: flex;
 flex-direction: column-reverse;
}

#b32-log .log-line { display: block; }
#b32-log .log-line:first-child { color: rgba(232,228,220,.75); }

/* ── アクションボタン ── */
#b32-actions {
 flex-shrink: 0;
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 padding: 8px 16px max(12px, env(safe-area-inset-bottom, 12px));
 background: rgba(0,0,0,.5);
 border-top: 1px solid rgba(255,255,255,.07);
}

.b32-btn {
 flex: 1;
 min-width: 60px;
 padding: 10px 6px;
 border-radius: 4px;
 border: 1px solid rgba(255,255,255,.12);
 background: rgba(255,255,255,.05);
 color: rgba(232,228,220,.75);
 font-family: 'Noto Serif JP', serif;
 font-size: 12px;
 letter-spacing: 1px;
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
 transition: background .15s, color .15s, border-color .15s;
}

.b32-btn:active {
 background: rgba(255,255,255,.12);
 color: rgba(232,228,220,1);
}

.b32-btn.primary {
 background: rgba(40,100,220,.16);
 border-color: rgba(60,140,255,.40);
 color: rgba(120,190,255,.9);
}

.b32-btn.primary:active { background: rgba(40,100,220,.32); }

.b32-btn.danger {
 background: rgba(200,60,60,.12);
 border-color: rgba(200,80,80,.30);
 color: rgba(255,140,140,.8);
}

.b32-btn.cancel-sel {
 background: rgba(80,160,255,.10);
 border-color: rgba(80,160,255,.28);
 color: rgba(140,200,255,.80);
}

.b32-btn:disabled {
 opacity: .3;
 pointer-events: none;
}

/* ── 結果オーバーレイ ── */
#b32-result-overlay {
 position: absolute;
 inset: 0;
 z-index: 10;
 display: none;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: 24px;
 background: rgba(0,0,0,.72);
 backdrop-filter: none;
}

#b32-result-overlay .b32-btn {
 flex: 0 0 auto !important;
 width: min(220px, 70vw);
 max-width: 220px;
 height: auto;
 min-height: 40px;
 padding: 10px 18px;
 align-self: center;
}

#b32-result-text {
 font-family: 'Cinzel', serif;
 font-size: 36px;
 letter-spacing: 8px;
 text-align: center;
}

#b32-result-text.win { color: #60c8ff; text-shadow: 0 0 30px #60c8ff88; }
#b32-result-text.lose { color: #d07878; text-shadow: 0 0 30px #d0787888; }

/* ============================================================
 パーティステータスパネル ── 参考画像: 3枚横並びカード
 ============================================================ */

#b32-party-status {
 width: 100%;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 5px;
}

.b32-party-card {
 position: relative;
 min-width: 0;
 border-radius: 4px;
 padding: 5px 4px 4px;
 border: 1px solid rgba(60,120,220,.28);
 background: linear-gradient(160deg, rgba(8,16,36,.88), rgba(4,8,18,.92));
 overflow: hidden;
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
 transition: opacity .15s, border-color .2s, box-shadow .2s, transform .12s;
 user-select: none;
 /* 青発光 */
 box-shadow:
 0 0 0 0px rgba(60,120,255,.0),
 inset 0 0 12px rgba(40,80,200,.06);
}

/* 上辺の青ライン */
.b32-party-card::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 2px;
 background: linear-gradient(90deg, transparent, rgba(60,140,255,.50), transparent);
 pointer-events: none;
}

/* 内側グロー */
.b32-party-card::after {
 content: '';
 position: absolute;
 inset: 0;
 border-radius: inherit;
 background: linear-gradient(135deg, rgba(80,140,255,.04) 0%, transparent 55%);
 pointer-events: none;
}

.b32-party-card:active {
 transform: scale(.96);
}

/* アクティブ（選択中）: 青く強発光 */
.b32-party-card.selected {
 border-color: rgba(60,160,255,.90);
 box-shadow:
 0 0 0 1px rgba(60,160,255,.25),
 0 0 16px rgba(40,140,255,.42),
 inset 0 0 12px rgba(40,100,255,.10);
 background: linear-gradient(160deg, rgba(10,24,58,.90), rgba(4,10,28,.94));
}

/* アクティブバッジ */
.b32-party-card.selected::before {
 background: linear-gradient(90deg, transparent, rgba(80,180,255,.75), transparent);
}

.b32-party-card.done {
 opacity: .42;
}

.b32-party-card.dead {
 opacity: .25;
 filter: grayscale(1);
 cursor: default;
 pointer-events: none;
}

/* ACTIVE バッジ（選択中カードの左上） */
.b32-party-card.selected .b32-party-active-badge {
 display: block !important;
}

.b32-party-active-badge {
 display: none;
 position: absolute;
 top: 2px; left: 3px;
 font-family: 'Cinzel', serif;
 font-size: 6px;
 letter-spacing: 1.5px;
 color: rgba(100,200,255,.95);
 z-index: 5;
 text-shadow: 0 0 6px rgba(60,180,255,.80);
}

/* 画像ラッパー */
.b32-party-img-wrap {
 height: 64px;
 display: flex;
 align-items: flex-start;
 justify-content: center;
 overflow: hidden;
 position: relative;
}

.b32-party-img {
 width: 100%;
 height: 72px;
 object-fit: contain;
 object-position: center bottom;
 filter: drop-shadow(0 4px 6px rgba(0,0,0,.65));
 display: block;
 position: relative;
 z-index: 1;
 transform:
 translateY(var(--panel-offset-y, 0px))
 scale(var(--panel-scale, 1));
 transform-origin: center center;
}

.b32-party-initial {
 width: 38px;
 height: 38px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(255,255,255,.06);
 border: 1px solid rgba(255,255,255,.14);
 color: rgba(232,228,220,.75);
 font-family: 'Cinzel', serif;
 font-size: 16px;
}

.b32-party-name { display: none !important; }

.b32-party-row {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 gap: 2px;
 margin-top: 3px;
}

/* HP バーセクション */
.b32-party-hp-section {
  padding: 0 2px;
}

/* HPブロック：数値が右上、バーが直下 */
.b32-party-hp-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

.b32-party-hp-num {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: .4px;
  color: rgba(232,238,255,.88);
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.b32-party-hp-bar-wrap {
  width: 100%;
  height: 4px;
  border-radius: 1px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(80,200,255,.18);
  overflow: hidden;
  margin: 0;
}

.b32-party-hp-bar {
  height: 100%;
  border-radius: 1px;
  transition: width .28s ease;
  background: linear-gradient(
    90deg,
    rgba(40,190,255,.95),
    rgba(120,240,255,.92)
  );
  box-shadow: 0 0 6px rgba(60,210,255,.60);
}

/* 最大HP：少し薄く */
.b32-party-hp-max {
  font-size: 8px;
  color: rgba(180,210,255,.50);
}

/* SHINKI ドット（菱形マーカー） */
.b32-party-shinki-badge {
 position: absolute;
 top: 3px; right: 3px;
 display: flex;
 gap: 2px;
 align-items: center;
 z-index: 5;
}

.b32-party-shinki-dot {
 width: 5px;
 height: 5px;
 /* 菱形に変更 */
 border-radius: 0;
 transform: rotate(45deg);
 border: 1px solid rgba(80,180,255,.30);
 background: rgba(60,140,255,.06);
 flex-shrink: 0;
 transition: background .15s, box-shadow .15s;
}

.b32-party-shinki-dot.filled {
 background: rgba(80,180,255,.95);
 box-shadow:
 0 0 4px rgba(60,160,255,.70),
 0 0 2px rgba(80,200,255,.90);
 border-color: rgba(100,210,255,.80);
}

/* アニマドット（青シアン） */
.b32-anima-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 border: 1px solid rgba(60,220,220,.35);
 background: rgba(60,220,220,.06);
 flex-shrink: 0;
 transition: background .15s, box-shadow .15s;
}

.b32-anima-dot.filled {
 background: rgba(60,220,220,.92);
 box-shadow:
 0 0 6px rgba(60,220,220,.60),
 0 0 2px rgba(60,220,220,.90);
 border-color: rgba(100,240,235,.75);
}

.b32-anima-text {
 font-family: 'Cinzel', serif;
 font-size: 11px;
 color: rgba(60,220,220,.9);
 letter-spacing: .5px;
}

.b32-anima-max {
 font-size: 9px;
 color: rgba(60,220,220,.5);
}

/* RETURN オーバーレイ（戦闘不能） */
.b32-party-return {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(0,0,0,.58);
 color: rgba(232,228,220,.70);
 font-family: 'Cinzel', serif;
 font-size: 10px;
 letter-spacing: 2px;
}

/* ============================================================
 32バトル 下部UI
 ============================================================ */

#battle32-root #b32-log-wrap {
 display: none !important;
 height: 0 !important;
 min-height: 0 !important;
 max-height: 0 !important;
 margin: 0 !important;
 padding: 0 !important;
 flex: 0 0 0 !important;
}

#battle32-root #b32-scroll {
 justify-content: flex-start !important;
 align-items: center !important;
 gap: 0 !important;
 padding-top: 2px !important;
 padding-bottom: 0 !important;
}

#battle32-root #b32-board-wrap {
 padding-top: 4px !important;
 padding-bottom: 0 !important;
 margin-bottom: 0 !important;
}

#battle32-root #b32-bottom-area {
 width: 100% !important;
 max-width: 440px !important;
 flex-shrink: 0 !important;
 display: flex !important;
 flex-direction: column !important;
 gap: 4px !important;
 padding: 0 8px max(8px, env(safe-area-inset-bottom, 8px)) !important;
 margin: 0 !important;
 box-sizing: border-box !important;
 position: relative !important;
 overflow: visible !important;
}

#battle32-root #b32-bottom-guide {
 height: 12px !important;
 min-height: 12px !important;
 max-height: 12px !important;
 line-height: 12px !important;
 margin: 0 0 2px 0 !important;
 padding: 0 !important;
 text-align: center !important;
 font-size: 9px !important;
 letter-spacing: 1px !important;
 color: rgba(140,200,255,.70) !important;
 overflow: hidden !important;
}

/* 通常時：キャラ3枚 */
#battle32-root #b32-party-status {
 width: 100% !important;
 display: grid !important;
 grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
 gap: 5px !important;
 margin: 0 !important;
}

#battle32-root .b32-party-card {
 min-width: 0 !important;
 height: 88px !important;
 padding: 4px 4px 3px !important;
 border-radius: 4px !important;
 box-sizing: border-box !important;
 overflow: visible !important;
}

#battle32-root .b32-party-img-wrap {
 height: 58px !important;
 display: flex !important;
 align-items: flex-end !important;
 justify-content: center !important;
 overflow: visible !important;
}

#battle32-root .b32-party-img {
 width: 100% !important;
 height: 60px !important;
 object-fit: contain !important;
 object-position: center bottom !important;
 display: block !important;
}

#battle32-root .b32-party-row {
 height: 8px !important;
 min-height: 8px !important;
 line-height: 8px !important;
 margin-top: 2px !important;
 gap: 2px !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 overflow: visible !important;
}

#battle32-root .b32-anima-dot {
 width: 7px !important;
 height: 7px !important;
 flex: 0 0 auto !important;
}

#battle32-root .b32-party-shinki-dot {
 width: 5px !important;
 height: 5px !important;
 flex: 0 0 auto !important;
}

/* キャラ名非表示 */
#battle32-root .b32-party-name,
#battle32-root #b32-skill-chara-name {
 display: none !important;
}

/* 選択後スキルパネル */
#battle32-root #b32-skill-panel {
 width: 100% !important;
 display: flex !important;
 flex-direction: column !important;
 gap: 4px !important;
 margin: 0 !important;
 padding: 0 !important;
 overflow: visible !important;
}

#battle32-root #b32-skill-list {
 width: 100% !important;
 margin: 0 !important;
 padding: 0 !important;
 overflow: visible !important;
}

#battle32-root .b32-action-skill-panel {
 width: 100% !important;
 display: grid !important;
 grid-template-columns: 78px minmax(0, 1fr) !important;
 gap: 5px !important;
 align-items: stretch !important;
 overflow: visible !important;
}

/* 左のキャラカード */
#battle32-root .b32-action-char-card {
 height: 88px !important;
 padding: 4px 4px 3px !important;
 border-radius: 4px !important;
 box-sizing: border-box !important;
 overflow: visible !important;
 border: 1px solid rgba(60,160,255,.65) !important;
 background:
 linear-gradient(160deg, rgba(8,20,54,.92), rgba(4,8,24,.96)) !important;
 box-shadow:
 0 0 14px rgba(40,120,255,.22),
 inset 0 0 10px rgba(40,80,200,.10) !important;
}

#battle32-root .b32-action-char-img-wrap {
 height: 58px !important;
 display: flex !important;
 align-items: flex-end !important;
 justify-content: center !important;
 overflow: visible !important;
}

#battle32-root .b32-action-char-img {
 width: 100% !important;
 height: 60px !important;
 object-fit: contain !important;
 object-position: center bottom !important;
}

#battle32-root .b32-action-skill-buttons {
 display: grid !important;
 grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
 gap: 4px !important;
 align-content: stretch !important;
 height: 88px !important;
}

/* スキルボタン */
#battle32-root .b32-bottom-skill-btn {
 display: flex !important;
 flex-direction: column !important;
 align-items: center !important;
 justify-content: center !important;
 gap: 1px !important;
 border-radius: 4px !important;
 border: 1px solid rgba(80,140,255,.28) !important;
 background: rgba(8,16,40,.80) !important;
 color: rgba(180,210,255,.90) !important;
 font-family: 'Noto Serif JP', serif !important;
 font-size: 11px !important;
 letter-spacing: .5px !important;
 cursor: pointer !important;
 -webkit-tap-highlight-color: transparent !important;
 transition: background .12s, border-color .12s !important;
 text-align: center !important;
 padding: 4px !important;
 white-space: normal !important;
 line-height: 1.25 !important;
 height: auto !important;
}

#battle32-root .b32-bottom-skill-btn small {
 font-family: 'Cinzel', serif !important;
 font-size: 8px !important;
 letter-spacing: 1px !important;
 line-height: 1 !important;
 color: rgba(150, 180, 255, .70) !important;
}

#battle32-root .b32-bottom-skill-btn:active {
 background: rgba(40,100,220,.22) !important;
 border-color: rgba(80,180,255,.60) !important;
}

#battle32-root .b32-bottom-skill-btn.disabled {
 opacity: .3 !important;
 pointer-events: none !important;
}

/* スキル詳細パネル */
#battle32-root .b32-action-detail-panel {
 border: 1px solid rgba(80,140,255,.25);
 border-radius: 4px;
 background: rgba(6,10,28,.88);
 padding: 8px 10px;
}

#battle32-root .b32-action-detail-title {
 font-family: 'Cinzel', serif;
 font-size: 12px;
 letter-spacing: 2px;
 color: rgba(180,210,255,.95);
 margin-bottom: 4px;
}

#battle32-root .b32-action-detail-desc {
 font-size: 11px;
 color: rgba(200,210,240,.65);
 line-height: 1.5;
 margin-bottom: 4px;
}

#battle32-root .b32-action-detail-meta {
 font-size: 9px;
 letter-spacing: 1px;
 color: rgba(140,180,255,.55);
 margin-bottom: 8px;
}

#battle32-root .b32-action-detail-buttons {
 display: flex;
 gap: 10px;
 justify-content: center;
}

#battle32-root .b32-action-detail-btn {
 height: 30px;
 min-width: 64px;
 padding: 0 14px;
 border-radius: 4px;
 font-size: 11px;
 font-family: 'Noto Serif JP', serif;
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
}

#battle32-root .b32-action-detail-btn.confirm {
 background: rgba(40,100,220,.22);
 border: 1px solid rgba(80,160,255,.55);
 color: rgba(140,200,255,.95);
}

#battle32-root .b32-action-detail-btn.cancel {
 background: rgba(40,40,60,.50);
 border: 1px solid rgba(120,120,180,.30);
 color: rgba(180,180,220,.75);
}

/* ============================================================
 行動選択 丸ボタン：固定レイアウト（参考画像右側縦配置）
 ============================================================ */

#battle32-root .b32-action-radial-menu {
 position: fixed;
 right: 12px;
 bottom: 120px;
 z-index: 99999;
 pointer-events: none;
}

#battle32-root .b32-action-circle-btn {
 position: absolute;
 width: 52px;
 height: 52px;
 border-radius: 50%;
 border: 1.5px solid rgba(255,255,255,.28);
 background: rgba(8,12,28,.90);
 color: rgba(230,235,255,.92);
 font-family: 'Noto Serif JP', serif;
 font-size: 11px;
 letter-spacing: .5px;
 text-align: center;
 box-shadow:
 0 0 12px rgba(0,0,0,.60),
 inset 0 0 10px rgba(255,255,255,.04);
 pointer-events: auto;
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
 overflow: visible;
 transform: none;
 display: flex;
 align-items: center;
 justify-content: center;
}

/* 固定配置: 右端縦積み + 最下段は戻る/移動横並び */
#battle32-root .b32-action-circle-btn.back { right: 60px; bottom: 0; }
#battle32-root .b32-action-circle-btn.move { right: 0; bottom: 0; }
#battle32-root .b32-action-circle-btn.skill { right: 0; bottom: 60px; }
#battle32-root .b32-action-circle-btn.ult { right: 0; bottom: 120px; }
#battle32-root .b32-action-circle-btn.end { right: 0; bottom: 180px; }

#battle32-root .b32-action-circle-btn.disabled {
 opacity: .30;
 pointer-events: none;
}

#battle32-root .b32-action-circle-btn:active {
 transform: scale(.93);
}

/* 移動ボタン: アクティブ時青発光 */
#battle32-root .b32-action-circle-btn.move:not(.disabled) {
 border-color: rgba(60,160,255,.55);
 color: rgba(140,210,255,.95);
 box-shadow:
 0 0 14px rgba(40,140,255,.35),
 0 0 28px rgba(40,140,255,.18),
 inset 0 0 10px rgba(40,100,255,.12);
}

/* スキルボタン: 金縁 */
#battle32-root .b32-action-circle-btn.skill:not(.disabled) {
 border-color: rgba(255,200,80,.35);
 color: rgba(255,220,140,.90);
}

/* ULTボタン: 紫縁 */
#battle32-root .b32-action-circle-btn.ult:not(.is-ready) {
 border-color: rgba(180,100,255,.35);
 color: rgba(200,150,255,.85);
}

/* 終了ボタン */
#battle32-root .b32-action-circle-btn.end {
 background: rgba(40,16,16,.92);
 border-color: rgba(220,80,60,.38);
 color: rgba(255,160,140,.85);
}

/* 戻るボタン */
#battle32-root .b32-action-circle-btn.back {
 background: rgba(16,16,36,.90);
 border-color: rgba(140,140,200,.30);
 color: rgba(180,180,220,.78);
}

/* ============================================================
 ULT使用可能時：光の輪アニメ（円形のみ・矩形禁止）
 ============================================================ */
#battle32-root .b32-action-circle-btn.ult.is-ready {
 position: absolute;
 border-color: rgba(255,220,120,.95) !important;
 color: rgba(255,238,180,.98) !important;
 background:
 radial-gradient(circle at 50% 45%, rgba(255,230,150,.28), rgba(50,30,80,.75)) !important;
 box-shadow:
 0 0 12px rgba(255,210,90,.58),
 0 0 24px rgba(255,180,80,.42),
 inset 0 0 14px rgba(255,240,180,.18) !important;
 animation: b32UltCircleGlow 1.15s ease-in-out infinite !important;
}

/* 外側円形オーラ（::before）― border-radius:50% 厳守 */
#battle32-root .b32-action-circle-btn.ult.is-ready::before {
 content: '';
 position: absolute;
 inset: -8px;
 border-radius: 50%;
 pointer-events: none;
 background: none;
 border: 1.5px solid rgba(255,220,100,.55);
 box-shadow:
 0 0 10px rgba(255,190,70,.55),
 0 0 22px rgba(255,120,40,.32);
 opacity: .65;
 animation: b32UltCircleRing 1.15s ease-in-out infinite;
}

/* ::after は使わない（四角いシール防止） */
#battle32-root .b32-action-circle-btn.ult.is-ready::after {
 content: none !important;
 display: none !important;
}

@keyframes b32UltCircleGlow {
 0%, 100% {
 filter: brightness(1);
 box-shadow:
 0 0 10px rgba(255,210,90,.45),
 0 0 20px rgba(255,180,80,.32),
 inset 0 0 14px rgba(255,240,180,.16);
 }
 45% {
 filter: brightness(1.42);
 box-shadow:
 0 0 16px rgba(255,230,120,.82),
 0 0 34px rgba(255,180,60,.58),
 0 0 48px rgba(255,150,40,.24),
 inset 0 0 20px rgba(255,245,190,.26);
 }
 62% { filter: brightness(1.18); }
}

@keyframes b32UltCircleRing {
 0%, 100% { opacity: .35; transform: scale(.94); }
 45% { opacity: .80; transform: scale(1.20); }
 62% { opacity: .50; transform: scale(1.06); }
}

/* ============================================================
 スキルチップ
 ============================================================ */
.b32-skill-chip-row {
 display: flex;
 gap: 5px;
 width: 100%;
 align-items: stretch;
 flex-wrap: nowrap;
}

.b32-skill-chip {
 flex: 1;
 min-width: 0;
 height: 36px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 border-radius: 4px;
 border: 1px solid rgba(80,140,255,.22);
 background: rgba(6,10,28,.80);
 color: rgba(180,210,255,.85);
 font-family: 'Noto Serif JP', serif;
 font-size: 11px;
 letter-spacing: .5px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 cursor: pointer;
 -webkit-tap-highlight-color: transparent;
 user-select: none;
 padding: 0 6px;
 transition: background .12s, border-color .12s;
 position: relative;
}

.b32-skill-chip:active {
 background: rgba(40,100,220,.18);
 border-color: rgba(80,180,255,.45);
}

/* ULTチップ */
.b32-skill-chip.ult {
 flex: 0 0 44px;
 border-color: rgba(180,100,255,.40);
 background: rgba(120,60,200,.10);
 color: rgba(200,160,255,.85);
 font-size: 10px;
 letter-spacing: 1px;
}

.b32-skill-chip.ult:active {
 background: rgba(140,70,220,.25);
}

/* 行動終了チップ */
.b32-skill-chip.end-turn {
 flex: 0 0 44px;
 border-color: rgba(180,180,180,.22);
 background: rgba(180,180,180,.05);
 color: rgba(232,228,220,.42);
 font-size: 10px;
}

/* 無効チップ */
.b32-skill-chip.disabled {
 opacity: 0.32;
 pointer-events: none;
}

/* 神気ドット（チップ内下部） */
.b32-chip-shinki {
 display: flex;
 gap: 2px;
 margin-top: 2px;
}

.b32-chip-shinki-dot {
 width: 4px;
 height: 4px;
 border-radius: 50%;
 border: 1px solid rgba(80,180,255,.35);
 background: rgba(80,180,255,.06);
}

.b32-chip-shinki-dot.filled {
 background: rgba(80,180,255,.90);
 border-color: rgba(80,180,255,.80);
}

/* ============================================================
 HP最大値表示
 ============================================================ */
.b32-action-char-dots.hp {
 padding: 0 2px;
}

.b32-action-char-dots.shinki {
 display: flex;
 gap: 2px;
 align-items: center;
 justify-content: center;
 padding: 1px 2px;
}

/* ============================================================
 敵情報オーバーレイ
 ============================================================ */
#b32-enemy-info-overlay {
 position: fixed;
 inset: 0;
 z-index: 2000000;
 background: rgba(0,0,0,.60);
 display: flex;
 align-items: center;
 justify-content: center;
 backdrop-filter: none;
}

.b32-enemy-info-panel {
 background: rgba(6,8,22,.92);
 border: 1px solid rgba(255,255,255,.14);
 border-radius: 8px;
 padding: 18px 22px;
 min-width: 200px;
 max-width: 80vw;
 box-shadow: 0 20px 60px rgba(0,0,0,.65);
}

.b32-enemy-info-title {
 font-family: 'Cinzel', serif;
 font-size: 14px;
 letter-spacing: 3px;
 color: rgba(220,180,255,.95);
 text-align: center;
 margin-bottom: 12px;
 padding-bottom: 8px;
 border-bottom: 1px solid rgba(255,255,255,.08);
}

.b32-enemy-info-row {
 display: flex;
 justify-content: space-between;
 gap: 16px;
 font-size: 11px;
 line-height: 1.8;
 color: rgba(200,200,220,.65);
}

.b32-enemy-info-row strong {
 color: rgba(220,220,255,.90);
 font-family: 'Cinzel', serif;
}

.b32-enemy-info-close {
 display: block;
 width: 100%;
 margin-top: 12px;
 padding: 8px;
 border-radius: 4px;
 border: 1px solid rgba(255,255,255,.12);
 background: rgba(255,255,255,.05);
 color: rgba(232,228,220,.75);
 font-size: 11px;
 cursor: pointer;
}

//* 敵クイック情報：グリッドに被らないよう上部へ逃がす */
.b32-enemy-quick-info {
 position: fixed;
 left: auto;
 top: auto;
 right: auto;
 bottom: auto;
 transform: none !important;
 z-index: 1900000;
 pointer-events: none;

 min-width: 0;
 width: auto;
 max-width: calc(100vw - 24px);

 background: rgba(4,6,18,.86);
 border: 1px solid rgba(180,100,200,.28);
 border-radius: 6px;
 padding: 5px 10px 6px;

 box-shadow: 0 8px 22px rgba(0,0,0,.45);
 transform-style: flat;
 backface-visibility: hidden;
}

.b32-enemy-quick-title {
 font-family: 'Cinzel', serif;
 font-size: 10px;
 line-height: 1.1;
 letter-spacing: 2px;
 color: rgba(220,160,255,.90);
 text-align: center;
 margin-bottom: 3px;
 white-space: nowrap;
}

.b32-enemy-quick-statline {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 12px;

 font-family: 'Cinzel', serif;
 font-size: 10px;
 line-height: 1.2;
 white-space: nowrap;
 color: rgba(232,228,220,.60);
}

.b32-enemy-quick-statline strong {
 color: #fff0d0;
 font-weight: 700;
}

/* 旧row指定が残っていても無害化 */
.b32-enemy-quick-row {
 display: none;
}

.b32-enemy-quick-row span { color: rgba(232,228,220,.55); }
.b32-enemy-quick-row strong { color: #fff0d0; }

/* ============================================================
 Battle右上メニュー
 ============================================================ */
#b32-battle-menu {
 position: fixed;
 top: calc(env(safe-area-inset-top, 0px) + 10px);
 right: 10px;
 z-index: 3000000;
 font-family: 'Noto Serif JP', serif;
}

#b32-battle-menu-btn {
 min-width: 58px;
 height: 28px;
 border-radius: 999px;
 border: 1px solid rgba(255,255,255,.16);
 background: rgba(6,8,20,.74);
 color: rgba(232,228,220,.88);
 font-size: 10px;
 letter-spacing: 1.5px;
 cursor: pointer;
 backdrop-filter: none;
 -webkit-backdrop-filter: none;
}

#b32-battle-menu-panel {
 position: absolute;
 top: 34px; right: 0;
 width: 150px;
 padding: 8px;
 border-radius: 8px;
 background: rgba(6,8,22,.92);
 border: 1px solid rgba(255,255,255,.12);
 box-shadow: 0 10px 28px rgba(0,0,0,.55);
 display: none;
}

#b32-battle-menu.open #b32-battle-menu-panel {
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.b32-battle-menu-item {
 width: 100%;
 padding: 9px 8px;
 border: 1px solid rgba(255,255,255,.08);
 border-radius: 6px;
 background: rgba(255,255,255,.04);
 color: rgba(232,228,220,.85);
 font-size: 11px;
 text-align: left;
 cursor: pointer;
}

.b32-battle-menu-item.danger {
 color: rgba(255,140,140,.90);
 border-color: rgba(255,80,80,.20);
}

/* ============================================================
 危険エリア（ボス攻撃予告）
 ============================================================ */
.b32-cell.boss-danger-normal {
 background:
 radial-gradient(circle at center, rgba(255,80,80,.16), transparent 62%),
 rgba(50,6,6,.18) !important;
 border-color: rgba(255,80,80,.36) !important;
 box-shadow:
 inset 0 0 10px rgba(255,60,60,.16),
 0 0 8px rgba(255,40,40,.12) !important;
}

.b32-cell.boss-danger-warn {
 background:
 linear-gradient(145deg, rgba(255,150,40,.22), rgba(80,18,0,.26)),
 rgba(50,8,0,.20) !important;
 border-color: rgba(255,165,55,.58) !important;
 box-shadow:
 inset 0 0 14px rgba(255,148,38,.22),
 0 0 14px rgba(255,118,38,.22) !important;
}

.b32-cell.boss-danger-line {
 background:
 linear-gradient(180deg, rgba(255,40,40,.32), rgba(80,0,0,.32)),
 rgba(60,0,0,.28) !important;
 border-color: rgba(255,65,65,.80) !important;
 box-shadow:
 inset 0 0 18px rgba(255,40,40,.32),
 0 0 18px rgba(255,20,20,.32) !important;
 animation: b32DangerPulse 1.2s ease-in-out infinite;
}

@keyframes b32DangerPulse {
 0%, 100% {
 border-color: rgba(255,65,65,.80) !important;
 box-shadow: inset 0 0 18px rgba(255,40,40,.32), 0 0 18px rgba(255,20,20,.32) !important;
 }
 50% {
 border-color: rgba(255,120,120,1) !important;
 box-shadow: inset 0 0 28px rgba(255,60,60,.55), 0 0 28px rgba(255,40,40,.55) !important;
 }
}

.b32-cell.boss-danger-line:has(.b32-core-object),
.b32-cell.boss-danger-warn:has(.b32-core-object),
.b32-cell.boss-danger-normal:has(.b32-core-object) {
 animation: none !important;
}

.b32-cell.has-core.boss-danger-line,
.b32-cell.has-core.boss-danger-warn,
.b32-cell.has-core.boss-danger-normal {
 animation: none !important;
}

.b32-cell.boss-danger-normal.skill-target-enemy,
.b32-cell.boss-danger-warn.skill-target-enemy,
.b32-cell.boss-danger-line.skill-target-enemy {
 background:
 linear-gradient(145deg, rgba(255,100,60,.20), rgba(40,6,4,.32)),
 rgba(18,4,4,.50) !important;
 border-color: rgba(255,128,68,.68) !important;
 box-shadow:
 inset 0 0 14px rgba(255,98,48,.22),
 0 0 16px rgba(255,98,48,.26) !important;
 animation: none !important;
}

.b32-cell.boss-danger-normal.skill-range,
.b32-cell.boss-danger-warn.skill-range,
.b32-cell.boss-danger-line.skill-range {
 animation: none !important;
}

.b32-cell.boss-danger-normal.movable,
.b32-cell.boss-danger-warn.movable,
.b32-cell.boss-danger-line.movable {
 animation: none !important;
}

/* ============================================================
 駒取りマス（move-capture）
 ============================================================ */
.b32-cell.move-capture {
 background:
 linear-gradient(145deg, rgba(255,180,30,.20), rgba(40,6,4,.32)),
 rgba(18,4,4,.50) !important;
 border-color: rgba(255,155,38,.83) !important;
 box-shadow:
 inset 0 0 14px rgba(255,148,28,.26),
 0 0 18px rgba(255,138,18,.33) !important;
 cursor: pointer;
}

.b32-cell.move-capture::after {
 content: '×';
 position: absolute;
 top: 2px; right: 4px;
 font-size: 9px;
 color: rgba(255,178,38,.85);
 pointer-events: none;
}

/* ============================================================
 スキル対象ハイライト
 ============================================================ */
.b32-cell.skill-target-enemy {
 background:
 linear-gradient(145deg, rgba(255,60,60,.22), rgba(60,8,8,.32)),
 rgba(20,4,4,.52) !important;
 border-color: rgba(255,80,80,.68) !important;
 box-shadow:
 inset 0 0 14px rgba(255,50,50,.22),
 0 0 16px rgba(255,50,50,.28) !important;
 cursor: pointer;
}

.b32-cell.skill-target-ally {
 background:
 linear-gradient(145deg, rgba(80,220,120,.20), rgba(8,40,20,.32)),
 rgba(4,20,10,.52) !important;
 border-color: rgba(80,220,120,.65) !important;
 box-shadow:
 inset 0 0 12px rgba(60,200,100,.20),
 0 0 14px rgba(60,200,100,.25) !important;
 cursor: pointer;
}

/* 敵移動ガイド */
/* enemy-move-guide は battle_32_ui.js の injectStyle() で定義（青系）*/

/* ============================================================
 スタン表示
 ============================================================ */
.b32-unit.is-stunned {
 position: relative;
 overflow: visible;
}

.b32-stun-fx {
 position: absolute;
 inset: -4px;
 pointer-events: none;
 z-index: 6;
}

.b32-stun-ring {
 position: absolute;
 left: 50%; top: 18%;
 width: 42px; height: 18px;
 transform: translateX(-50%);
 border-radius: 50%;
 border: 1px solid rgba(255,235,120,.85);
 box-shadow:
 0 0 6px rgba(255,235,120,.55),
 0 0 10px rgba(160,220,255,.35);
 opacity: .85;
 animation: b32StunRingPulse 900ms ease-in-out infinite;
}

.b32-stun-spark {
 position: absolute;
 width: 12px; height: 12px;
 border-radius: 2px;
 opacity: 0;
 transform: scale(.8) rotate(0deg);
 background: linear-gradient(135deg,
 rgba(255,255,255,.95) 0%,
 rgba(255,240,120,.95) 40%,
 rgba(120,220,255,.85) 100%);
 clip-path: polygon(45% 0%, 62% 35%, 100% 35%, 56% 100%, 42% 62%, 0% 62%);
 animation: b32StunSpark 820ms steps(1, end) infinite;
}

.b32-stun-spark.s1 { left: 18%; top: 22%; animation-delay: 0ms; }
.b32-stun-spark.s2 { right: 16%; top: 28%; animation-delay: 240ms; }
.b32-stun-spark.s3 { left: 44%; top: 8%; animation-delay: 460ms; }

.b32-stun-badge {
 position: absolute;
 right: -2px; top: -4px;
 font-size: 12px; line-height: 1;
 color: #fff2a8;
 text-shadow:
 0 0 6px rgba(255,230,120,.85),
 0 0 10px rgba(120,220,255,.55);
 animation: b32StunBadgeFlicker 700ms ease-in-out infinite;
}

.b32-party-card { position: relative; }

.b32-party-status-badge.stun {
 position: absolute;
 bottom: 2px; left: 50%;
 transform: translateX(-50%);
 font-size: 8px;
 font-family: 'Cinzel', serif;
 letter-spacing: 1px;
 color: #fff2a8;
 background: rgba(40,20,0,.75);
 border: 1px solid rgba(255,230,100,.40);
 border-radius: 3px;
 padding: 1px 4px;
 white-space: nowrap;
 pointer-events: none;
 text-shadow: 0 0 6px rgba(255,230,120,.8);
 animation: b32StunBadgeFlicker 700ms ease-in-out infinite;
 z-index: 5;
}

@keyframes b32StunRingPulse {
 0% { opacity: .55; transform: translateX(-50%) scale(.96); }
 50% { opacity: .95; transform: translateX(-50%) scale(1.03); }
 100% { opacity: .55; transform: translateX(-50%) scale(.96); }
}

@keyframes b32StunSpark {
 0% { opacity: 0; transform: scale(.75) rotate(-8deg); }
 20% { opacity: .95; transform: scale(1.0) rotate(6deg); }
 45% { opacity: .35; }
 100% { opacity: 0; transform: scale(.82) rotate(-4deg); }
}

@keyframes b32StunBadgeFlicker {
 0%, 100% { opacity: .65; transform: translateX(-50%) translateY(0); }
 50% { opacity: 1; transform: translateX(-50%) translateY(-1px); }
}

/* ============================================================
 ULT使用可能演出（下部フローティングボタン版）
 ============================================================ */
.b32-float-action-btn.ult.ult-ready {
 position: relative;
 overflow: visible !important;
 color: #fff4c8 !important;
 border-color: rgba(255,190,80,.95) !important;
 background:
 radial-gradient(circle at 50% 65%, rgba(255,120,20,.42), transparent 58%),
 linear-gradient(180deg, rgba(120,30,10,.60), rgba(35,4,4,.92)) !important;
 box-shadow:
 0 0 10px rgba(255,210,90,.85),
 0 0 22px rgba(255,110,30,.70),
 0 0 42px rgba(255,40,20,.42),
 inset 0 0 12px rgba(255,180,70,.38) !important;
 animation:
 b32UltHeartbeat 1.05s ease-in-out infinite,
 b32UltGlow 1.6s ease-in-out infinite;
}

.b32-float-action-btn.ult.ult-ready::after {
 content: '';
 position: absolute;
 inset: -6px;
 border-radius: 999px;
 pointer-events: none;
 border: 1px solid rgba(255,210,100,.65);
 box-shadow:
 0 0 10px rgba(255,190,70,.75),
 0 0 24px rgba(255,80,30,.45);
 opacity: .75;
 animation: b32UltPulseRing 1.05s ease-out infinite;
}

.b32-float-action-btn.ult {
 position: relative;
 isolation: isolate;
}

.b32-ult-soul-flame { z-index: 0 !important; }

.b32-float-action-btn.ult .b32-ult-label {
 position: relative;
 z-index: 5 !important;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 font-family: 'Cinzel', serif;
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 1px;
 color: #fff7d0;
 text-shadow:
 0 0 4px rgba(255,255,255,.95),
 0 0 10px rgba(255,230,140,.95),
 0 0 18px rgba(255,160,60,.75),
 0 1px 3px rgba(0,0,0,1);
 pointer-events: none;
 transform-origin: center center;
}

.b32-float-action-btn.ult.ult-ready .b32-ult-label {
 color: #ffffff;
 font-size: 12px;
 text-shadow:
 0 0 5px rgba(255,255,255,1),
 0 0 12px rgba(80,255,200,.80),
 0 0 24px rgba(60,255,220,.55),
 0 1px 3px rgba(0,0,0,1);
 animation: b32UltLabelPulse 1.05s ease-in-out infinite;
}

@keyframes b32UltHeartbeat {
 0%, 100% { transform: scale(1); }
 38% { transform: scale(1.06); }
 50% { transform: scale(1.03); }
 65% { transform: scale(1.07); }
 80% { transform: scale(1.01); }
}

@keyframes b32UltGlow {
 0%, 100% {
 box-shadow:
 0 0 10px rgba(255,210,90,.70),
 0 0 20px rgba(255,110,30,.55),
 0 0 38px rgba(255,40,20,.35),
 inset 0 0 10px rgba(255,180,70,.30);
 }
 50% {
 box-shadow:
 0 0 18px rgba(255,230,120,.95),
 0 0 36px rgba(255,130,40,.80),
 0 0 60px rgba(255,60,20,.50),
 inset 0 0 18px rgba(255,200,80,.48);
 }
}

@keyframes b32UltPulseRing {
 0% { opacity: .45; transform: scale(.92); }
 50% { opacity: .85; transform: scale(1.18); }
 100% { opacity: .45; transform: scale(.92); }
}

@keyframes b32UltLabelPulse {
 0%, 100% { opacity: .85; }
 50% { opacity: 1; }
}

/* ============================================================
 コアオブジェクト
 ============================================================ */
.b32-core-object {
 position: absolute;
 left: 50%; top: 50%;
 transform: translate(-50%, -50%) rotateX(-38deg);
 width: 80%;
 height: 80%;
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 3;
 pointer-events: none;
}

.b32-core-img {
 width: 100%;
 height: 100%;
 object-fit: contain;
}

.b32-core-object.core-hit {
 animation: b32CoreHitFlash 740ms ease-out;
}

@keyframes b32CoreHitFlash {
 0% { filter: brightness(1); }
 15% { filter: brightness(2.5) saturate(0); }
 40% { filter: brightness(1.4) hue-rotate(20deg); }
 100% { filter: brightness(1); }
}

/* ============================================================
 フロートナンバー（ダメージ・回復）
 ============================================================ */
.b32-float-number {
 position: fixed;
 pointer-events: none;
 z-index: 1000000;
 font-family: 'Cinzel', serif;
 font-weight: 700;
 letter-spacing: 1px;
 transform: translate(-50%, -50%);
 animation: b32FloatUp 900ms ease-out forwards;
 white-space: nowrap;
}

.b32-float-number.damage {
 font-size: 20px;
 color: #ff8080;
 text-shadow:
 0 0 8px rgba(255,80,80,.90),
 0 1px 3px rgba(0,0,0,.95);
}

.b32-float-number.damage.boss {
 font-size: 24px;
 color: #ffcc44;
 text-shadow:
 0 0 10px rgba(255,200,60,.90),
 0 1px 4px rgba(0,0,0,.95);
}

.b32-float-number.heal {
 font-size: 18px;
 color: #60ffaa;
 text-shadow:
 0 0 8px rgba(60,240,140,.85),
 0 1px 3px rgba(0,0,0,.95);
}

@keyframes b32FloatUp {
 0% { opacity: 1; transform: translate(-50%, -50%); }
 70% { opacity: .85; transform: translate(-50%, calc(-50% - 38px)); }
 100% { opacity: 0; transform: translate(-50%, calc(-50% - 58px)); }
}

/* ============================================================
 コアダメージ演出
 ============================================================ */
.b32-core-damage-flash {
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 999998;
 background: rgba(255,60,60,.14);
 animation: b32CoreFlash 780ms ease-out forwards;
}

@keyframes b32CoreFlash {
 0% { opacity: 1; }
 100% { opacity: 0; }
}

.b32-core-distort-ring {
 position: fixed;
 width: 80px; height: 80px;
 margin-left: -40px; margin-top: -40px;
 border-radius: 50%;
 border: 2px solid rgba(255,100,100,.90);
 box-shadow: 0 0 24px rgba(255,80,80,.65), 0 0 48px rgba(255,60,60,.30);
 pointer-events: none;
 z-index: 999997;
 animation: b32CoreRingOut 820ms ease-out forwards;
}

@keyframes b32CoreRingOut {
 0% { opacity: 1; transform: scale(.5); }
 100% { opacity: 0; transform: scale(2.2); }
}

.b32-core-damage-text {
 position: fixed;
 pointer-events: none;
 z-index: 999999;
 transform: translate(-50%, -100%);
 font-family: 'Cinzel', serif;
 font-size: 11px;
 font-weight: 700;
 letter-spacing: 3px;
 color: rgba(255,160,160,.95);
 text-shadow: 0 0 10px rgba(255,80,80,.80), 0 1px 3px rgba(0,0,0,.95);
 white-space: nowrap;
 animation: b32FloatUp 900ms ease-out forwards;
}

.b32-screen-shake-core {
 animation: b32ScreenShakeCore 760ms ease-out;
}

@keyframes b32ScreenShakeCore {
 0% { transform: translate(0,0); }
 10% { transform: translate(-5px,2px); }
 22% { transform: translate(6px,-3px); }
 34% { transform: translate(-5px,2px); }
 48% { transform: translate(4px,-2px); }
 62% { transform: translate(-3px,1px); }
 76% { transform: translate(2px,-1px); }
 88% { transform: translate(-1px,1px); }
 100% { transform: translate(0,0); }
}

/* ============================================================
 ヒットエフェクト（スラッシュ・インパクトリング）
 ============================================================ */
.b32-hit-slash {
 position: fixed;
 width: 56px; height: 6px;
 border-radius: 3px;
 background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), transparent);
 box-shadow: 0 0 10px rgba(255,180,120,.80), 0 0 20px rgba(255,140,80,.45);
 pointer-events: none;
 z-index: 999997;
 transform: translate(-50%,-50%) rotate(-22deg);
 animation: b32HitSlash 260ms ease-out forwards;
}

@keyframes b32HitSlash {
 0% { opacity: 0; transform: translate(-50%,-50%) rotate(-22deg) scaleX(.3); filter: none; }
 22% { opacity: 1; filter: none; }
 100% { opacity: 0; transform: translate(-50%,-50%) rotate(-22deg) scaleX(1.25); }
}

.b32-hit-slash.rapid {
 width: 38px !important;
 height: 4px !important;
 opacity: .75;
}

.b32-hit-slash.heavy {
 width: 80px !important;
 height: 9px !important;
 box-shadow:
 0 0 14px rgba(255,90,70,.95),
 0 0 28px rgba(255,90,70,.50) !important;
}

.b32-hit-slash.ult {
 width: 90px !important;
 height: 10px !important;
 background: linear-gradient(90deg, transparent, rgba(255,255,255,1), rgba(255,210,80,.95), transparent) !important;
 box-shadow:
 0 0 16px rgba(255,200,60,.95),
 0 0 34px rgba(255,140,40,.55) !important;
 animation: b32HitSlashUlt 300ms ease-out forwards !important;
}

.b32-hit-slash.ult.multi {
 width: 100px !important;
 height: 12px !important;
}

@keyframes b32HitSlashUlt {
 0% { opacity: 0; transform: translate(-50%,-50%) rotate(-28deg) scaleX(.25); filter: none; }
 20% { opacity: 1; filter: none; }
 100% { opacity: 0; transform: translate(-50%,-50%) rotate(-28deg) scaleX(1.35); filter: none; }
}

.b32-impact-ring {
 position: fixed;
 width: 48px; height: 48px;
 margin-left: -24px; margin-top: -24px;
 border-radius: 50%;
 pointer-events: none;
 z-index: 999996;
}

.b32-impact-ring.damage {
 border: 2px solid rgba(255,120,80,.85);
 box-shadow: 0 0 12px rgba(255,100,60,.65), 0 0 24px rgba(255,80,40,.30);
 animation: b32ImpactRingOut 400ms ease-out forwards;
}

.b32-impact-ring.heal {
 border: 2px solid rgba(60,220,140,.85);
 box-shadow: 0 0 12px rgba(60,220,140,.60), 0 0 24px rgba(60,220,140,.28);
 animation: b32ImpactRingOut 400ms ease-out forwards;
}

@keyframes b32ImpactRingOut {
 0% { opacity: .90; transform: scale(.5); }
 100% { opacity: 0; transform: scale(1.8); }
}

.b32-hit-flash {
 position: fixed;
 inset: 0;
 pointer-events: none;
 z-index: 999995;
 animation: b32HitFlash 300ms ease-out forwards;
}

.b32-hit-flash.damage { background: rgba(255,80,60,.08); }
.b32-hit-flash.heal { background: rgba(60,220,140,.06); }

@keyframes b32HitFlash {
 0% { opacity: 1; }
 100% { opacity: 0; }
}

.b32-impact-shake {
 animation: b32ImpactShake 220ms ease-out;
}

@keyframes b32ImpactShake {
 0% { transform: translate(0,0); }
 25% { transform: translate(-2px,1px); }
 50% { transform: translate(3px,-1px); }
 75% { transform: translate(-1px,1px); }
 100% { transform: translate(0,0); }
}

/* ============================================================
 画面揺れ
 ============================================================ */
.b32-screen-shake {
 animation: b32ScreenShake 260ms ease-out;
}

@keyframes b32ScreenShake {
 0% { transform: translate(0,0); }
 20% { transform: translate(-2px,1px); }
 40% { transform: translate(3px,-1px); }
 60% { transform: translate(-2px,1px); }
 80% { transform: translate(1px,0); }
 100% { transform: translate(0,0); }
}

.b32-screen-shake-heavy {
 animation: b32ScreenShakeHeavy 340ms ease-out;
}

@keyframes b32ScreenShakeHeavy {
 0% { transform: translate(0,0); }
 16% { transform: translate(-4px,2px); }
 32% { transform: translate(5px,-2px); }
 52% { transform: translate(-3px,1px); }
 72% { transform: translate(2px,-1px); }
 100% { transform: translate(0,0); }
}

.b32-screen-shake-ult {
 animation: b32ScreenShakeUlt 380ms ease-out;
}

@keyframes b32ScreenShakeUlt {
 0% { transform: translate(0,0); }
 14% { transform: translate(-4px,2px); }
 28% { transform: translate(5px,-2px); }
 42% { transform: translate(-4px,2px); }
 56% { transform: translate(3px,-1px); }
 72% { transform: translate(-2px,1px); }
 86% { transform: translate(1px,0); }
 100% { transform: translate(0,0); }
}

/* ============================================================
 スキル名バースト・ULTカットイン
 ============================================================ */
.b32-skill-name-burst {
 position: fixed;
 left: 50%; top: 42%;
 z-index: 999999;
 pointer-events: none;
 transform: translate3d(-50%,-50%,0);
 -webkit-transform: translate3d(-50%,-50%,0);
 width: min(92vw, 560px);
 height: 180px;
 background: none;
 border: none;
 box-shadow: none;
 border-radius: 0;
 overflow: visible;
 animation: b32SkillNameBurst 1500ms ease-out forwards;
 filter: none !important;
 -webkit-filter: none !important;
 will-change: transform, opacity;
 backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
}

.b32-skill-burst-img {
 position: absolute;
 right: -2px; bottom: -22px;
 height: 240px; max-width: 68%;
 object-fit: contain;
 object-position: center bottom;
 display: block;
 opacity: .9;
 filter: none !important;
 -webkit-filter: none !important;
 -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
 mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
}

.b32-skill-burst-name {
 position: absolute;
 left: 4px; bottom: 30px;
 font-family: 'Cinzel', serif;
 font-size: clamp(22px, 6.5vw, 38px);
 font-weight: 700;
 letter-spacing: 5px;
 color: rgba(255,255,255,.97);
 text-shadow:
 0 0 10px rgba(80,180,255,.90),
 0 0 30px rgba(60,140,255,.70),
 0 2px 5px rgba(0,0,0,.95);
 white-space: nowrap;
 z-index: 2;
}

@keyframes b32SkillNameBurst {
 0% { opacity: 0; transform: translate3d(-50%,-44%,0); }
 10% { opacity: 1; transform: translate3d(-50%,-50%,0); }
 72% { opacity: 1; transform: translate3d(-50%,-50%,0); }
 100% { opacity: 0; transform: translate3d(-50%,-55%,0); }
}

/* ULTカットイン */
.b32-ult-cutin {
 position: fixed;
 inset: 0;
 z-index: 2000000;
 pointer-events: none;
 overflow: hidden;
 animation: b32UltCutinFade 1920ms ease-out forwards;
}

.b32-ult-cutin-shade {
 position: absolute;
 inset: 0;
 background: linear-gradient(135deg, rgba(0,0,0,.80) 0%, rgba(20,8,40,.88) 100%);
}

.b32-ult-cutin-line {
 position: absolute;
 top: 42%; left: -10%;
 width: 120%; height: 2px;
 background: linear-gradient(90deg, transparent, rgba(255,220,100,.90), transparent);
 transform: rotate(-8deg);
 animation: b32UltLine 1920ms ease-out forwards;
}

.b32-ult-cutin-label {
 position: absolute;
 top: 30%; left: 8%;
 font-family: 'Cinzel', serif;
 font-size: 12px !important;
 letter-spacing: 7px !important;
 color: rgba(255,235,170,.98) !important;
 text-shadow:
 0 0 6px rgba(255,255,255,.9),
 0 0 18px rgba(255,220,120,.95),
 0 0 40px rgba(255,170,60,.70),
 0 2px 4px rgba(0,0,0,1) !important;
 animation: b32UltTextIn 1920ms ease-out forwards;
}

.b32-ult-cutin-name {
 position: absolute;
 top: 43%; left: 8%;
 font-family: 'Cinzel', serif;
 font-size: clamp(26px,7vw,46px);
 font-weight: 700;
 letter-spacing: 7px;
 color: #f5edbc;
 text-shadow:
 0 0 10px rgba(255,255,255,.98),
 0 0 32px rgba(255,200,80,.95),
 0 0 72px rgba(255,130,40,.60),
 0 0 120px rgba(255,80,20,.25),
 0 3px 8px rgba(0,0,0,1) !important;
 animation: b32UltTextIn 1920ms ease-out forwards;
}

.b32-ult-cutin-img {
 position: absolute;
 left: 50%; top: 50%;
 max-height: 85%;
 max-width: 68%;
 object-fit: contain;
 object-position: center bottom;
 animation: b32UltCutinImgSlide 1920ms ease-out forwards;
}

.b32-ult-white-flash {
 position: fixed;
 inset: 0;
 z-index: 4000001;
 pointer-events: none;
 background: #fff;
 animation: b32UltWhiteFlash 1920ms ease-out forwards;
}

@keyframes b32UltCutinFade {
 0%,70% { opacity:1; }
 86% { opacity:0; }
 100% { opacity:0; }
}

@keyframes b32UltCutinImgSlide {
 0% { opacity:0; transform:translate(-70%,-50%); filter: brightness(1.02); }
 14% { opacity:.98; transform:translate(-50%,-50%); filter: brightness(1.08) contrast(1.16) saturate(1.06); }
 76% { opacity:.98; transform:translate(-50%,-50%); }
 100% { opacity:0; transform:translate(-68%,-50%); filter: brightness(1.04); }
}

@keyframes b32UltTextIn {
 0% { opacity:0; transform:translateX(-20px); filter: none; }
 16% { opacity:1; transform:translateX(0); filter: none; }
 78% { opacity:1; }
 100% { opacity:0; transform:translateX(10px); filter: none; }
}

@keyframes b32UltLine {
 0% { opacity:0; transform:translateX(-20%) rotate(-8deg) scaleX(.3); }
 20% { opacity:.95; transform:translateX(0) rotate(-8deg) scaleX(1); }
 46% { opacity:.25; }
 100% { opacity:0; transform:translateX(12%) rotate(-8deg) scaleX(1.1); }
}

@keyframes b32UltWhiteFlash {
 0%,70% { opacity:0; }
 76% { opacity:.72; }
 86% { opacity:0; }
 100% { opacity:0; }
}

/* ULTダメージ数値 */
.b32-float-number.damage.ult {
 font-size: 26px !important;
 color: #ffcc44 !important;
 text-shadow:
 0 0 10px rgba(255,200,60,.95),
 0 0 24px rgba(255,140,40,.80),
 0 1px 4px rgba(0,0,0,.95) !important;
}

.b32-float-number.heal.ult {
 font-size: 24px !important;
 color: #80ffcc !important;
 text-shadow:
 0 0 10px rgba(60,255,180,.9),
 0 1px 4px rgba(0,0,0,.95) !important;
}

/* ============================================================
 中央テキスト演出
 ============================================================ */
#b32-center-text {
 position: fixed;
 inset: 0;
 z-index: 999999;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 pointer-events: none;
 gap: 10px;
 opacity: 0;
 transform: translate3d(0, 8px, 0) scale(.995);
 filter: none;
 transition:
 opacity 220ms ease,
 transform 220ms cubic-bezier(.16, 1, .3, 1),
 filter 220ms ease;
 will-change: opacity, transform, filter;
 backface-visibility: hidden;
}

#b32-center-text.b32ct-visible {
 opacity: 1;
 transform: translate3d(0, 0, 0) scale(1);
 filter: none;
}

#b32-center-text.b32ct-hidden {
 opacity: 0;
 transform: translate3d(0, -6px, 0) scale(1);
 filter: none;
}

#b32-center-text::before {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.52) 30%, rgba(4,6,18,.64) 50%, rgba(0,0,0,.52) 70%, transparent 100%);
 backdrop-filter: none;
 -webkit-backdrop-filter: none;
 pointer-events: none;
}

#b32-center-text .b32ct-main,
#b32-center-text .b32ct-sub {
 position: relative;
 z-index: 1;
}

#b32-center-text .b32ct-main {
 font-family: 'Cinzel', serif;
 font-size: clamp(26px, 7vw, 46px);
 font-weight: 700;
 letter-spacing: 7px;
 color: #f5edbc;
 text-shadow:
 0 0 6px rgba(255,255,255,.6),
 0 0 22px rgba(240,200,80,.85),
 0 0 55px rgba(240,160,40,.50),
 0 2px 4px rgba(0,0,0,.9);
 white-space: nowrap;
}

#b32-center-text .b32ct-sub {
 font-family: 'Noto Serif JP', serif;
 font-size: clamp(12px, 3.2vw, 17px);
 letter-spacing: 4px;
 color: rgba(232,228,220,.85);
 text-shadow:
 0 0 10px rgba(200,180,120,.6),
 0 1px 3px rgba(0,0,0,.9);
 white-space: nowrap;
}

/* ============================================================
 @media (max-height: 700px) ― iPhone SE対応
 ============================================================ */
@media (max-height: 700px) {
 #battle32-root #b32-header {
 padding-top: max(6px, env(safe-area-inset-top, 6px)) !important;
 padding-bottom: 4px !important;
 }

 #battle32-root #b32-battle-title { font-size: 12px !important; }
 #battle32-root #b32-turn-num-large { font-size: 17px !important; }

 #battle32-root #b32-boss-hp-ui {
 padding: 4px 12px 5px !important;
 }

 #battle32-root #b32-boss-hp-bar-wrap {
 height: 5px !important;
 }

 #battle32-root #b32-boss-hp-text {
 font-size: 11px !important;
 }

 #battle32-root #b32-scroll {
 padding: 2px 6px 2px !important;
 gap: 0 !important;
 }

 #battle32-root #b32-board-wrap {
 padding-top: 4px !important;
 padding-bottom: 0 !important;
 }

 #battle32-root #b32-board { gap: 2px !important; }

 #battle32-root #b32-bottom-area {
 padding: 0 6px max(2px, env(safe-area-inset-bottom, 2px)) !important;
 gap: 2px !important;
 }

 #battle32-root #b32-party-status {
 grid-template-columns: repeat(3, 1fr) !important;
 gap: 3px !important;
 }

 #battle32-root .b32-party-card {
 height: 72px !important;
 padding: 3px 3px 2px !important;
 }

 #battle32-root .b32-party-img-wrap {
 height: 44px !important;
 }

 #battle32-root .b32-party-img {
 height: 48px !important;
 }

 #battle32-root .b32-party-row {
 height: 7px !important;
 min-height: 7px !important;
 line-height: 7px !important;
 margin-top: 1px !important;
 }

 #battle32-root .b32-anima-dot { width: 6px !important; height: 6px !important; }
 #battle32-root .b32-party-shinki-dot { width: 4px !important; height: 4px !important; }

 #battle32-root .b32-action-circle-btn {
 width: 44px !important;
 height: 44px !important;
 font-size: 10px !important;
 }

 #battle32-root .b32-action-circle-btn.back { right: 50px !important; bottom: 0 !important; }
 #battle32-root .b32-action-circle-btn.move { right: 0 !important; bottom: 0 !important; }
 #battle32-root .b32-action-circle-btn.skill { right: 0 !important; bottom: 50px !important; }
 #battle32-root .b32-action-circle-btn.ult { right: 0 !important; bottom: 100px !important; }
 #battle32-root .b32-action-circle-btn.end { right: 0 !important; bottom: 150px !important; }

 #battle32-root .b32-action-char-card {
 height: 72px !important;
 }

 #battle32-root .b32-action-skill-buttons {
 height: 72px !important;
 }
}

/* ============================================================
 ヘッダー内のターン表示補助（JS注入用ID）
 ============================================================ */
#b32-turn-num { display: none; } /* 旧要素を隠す */

/* ============================================================
 コア表示調整：拡大 + 下半分の暗さ軽減
 ============================================================ */

/* コアがあるマスは暗いセル背景に埋もれないようにする */
.b32-cell.has-core {
  /* ──────────────────────────────────────────────────────
   * コアセルは 3D コンテキストから切り離す。
   * board が rotateX(38deg) で傾いている中で、コア要素が
   * セル border（1px solid）の面と交差して「横線」が
   * 見える問題を防ぐため、このセルだけ flat にする。
   * overflow:visible でコアのはみ出しを許可。
   * ────────────────────────────────────────────────────── */
  transform-style: flat !important;
  /* セル border を透明にしてグリッド線がコアを横切らないようにする */
  border-color: transparent !important;
  /* ::before の◇装飾も非表示（コアと干渉するため） */
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* has-core セルの::before（空◇装飾）を非表示 */
.b32-cell.has-core::before {
  display: none !important;
}

/* コア本体：盤面の傾きを完全に打ち消し、2D平面として描画する */
.b32-core-object {
  /* position:fixed ではなくセル基準の absolute のまま中央固定 */
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 140% !important;
  height: 140% !important;
  /* translate で中央合わせ + rotateX で board の傾き（38deg）を相殺 */
  transform: translate(-50%, -50%) rotateX(-38deg) !important;
  transform-origin: center center !important;
  transform-style: flat !important;
  /* 3D 空間内では z-index より translateZ が効く。
   * 少し手前に押し出してセル border の面を確実に上回る */
  z-index: 10 !important;
  overflow: visible !important;
  pointer-events: none !important;
  /* コア自体が発光背景を持つため、後ろのセル背景を上書き */
  background: radial-gradient(
    circle at 50% 52%,
    rgba(80, 220, 255, .18) 0%,
    rgba(8, 20, 40, .30) 55%,
    transparent 80%
  ) !important;
  border-radius: 50% !important;
}

/* コア画像：セル内に収まるサイズに統一して上下分断を防ぐ */
.b32-core-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: 1 !important;
  display: block !important;
  filter:
    brightness(1.28) contrast(1.08) saturate(1.12)
    drop-shadow(0 0 8px rgba(80, 240, 255, .95))
    drop-shadow(0 0 18px rgba(80, 220, 255, .55)) !important;
}

/* 損傷状態の色変化は維持 */
.b32-core-object.stability-2 .b32-core-img {
  filter:
    brightness(1.25) contrast(1.08) saturate(1.12)
    drop-shadow(0 0 8px rgba(255, 220, 80, .9))
    drop-shadow(0 0 18px rgba(255, 180, 40, .55)) !important;
}

.b32-core-object.stability-1 .b32-core-img {
 filter:
 brightness(1.22) contrast(1.08) saturate(1.12)
 drop-shadow(0 0 9px rgba(255, 60, 60, .95))
 drop-shadow(0 0 20px rgba(255, 40, 40, .65)) !important;
}

/* 画面下半分が暗く見える原因になりやすい全体オーバーレイを弱める */
#battle32-root::after {
 background:
 radial-gradient(ellipse at 50% 34%, rgba(40, 20, 80, .14) 0%, transparent 68%),
 linear-gradient(180deg, transparent 0%, transparent 58%, rgba(20, 50, 90, .06) 100%) !important;
}

/* ============================================================
 UI調整 v3 ― 白銀細線グリッド / 神気横並び / カード質感
 ============================================================ */

/* ────────────────────────────────────────────
 ■ 1. グリッド / 盤面カラー
 ──────────────────────────────────────────── */

/* 通常マス：青紫→白銀細線に */
.b32-cell {
 border: 1px solid rgba(200, 210, 230, .16) !important;
 background: rgba(6, 8, 18, .36) !important;
 box-shadow: none !important;
}

/* 空マスの菱形◇：やや明るく */
.b32-cell::before {
 border: 1px solid rgba(200, 215, 240, .18) !important;
}

/* 味方ゾーン：ほんのり青、線は白銀寄り */
.b32-cell.ally-zone {
 background: rgba(10, 22, 46, .42) !important;
 border-color: rgba(160, 190, 240, .20) !important;
 box-shadow: none !important;
}

/* 敵ゾーン：ほんのり紫、線は白銀寄り */
.b32-cell.enemy-zone {
 background: rgba(18, 10, 32, .42) !important;
 border-color: rgba(190, 160, 240, .18) !important;
 box-shadow: none !important;
}

/* ゾーン境界線は少し強く */
.b32-cell.row-divider {
 border-top: 1px solid rgba(220, 220, 255, .28) !important;
}

/* 移動可能マス：今まで通り強めに */
.b32-cell.movable {
 background:
 linear-gradient(145deg, rgba(60,180,255,.22), rgba(10,40,60,.40)),
 rgba(8,24,36,.52) !important;
 border-color: rgba(80,200,255,.72) !important;
 box-shadow:
 inset 0 0 14px rgba(60,200,255,.24),
 0 0 12px rgba(60,200,255,.28) !important;
}

/* 選択中マス：水色L字フレーム感・強め */
.b32-cell.selected-unit,
.b32-cell.skill-selected {
 border-color: rgba(100,220,255,.95) !important;
 box-shadow:
 inset 0 0 0 2px rgba(100,220,255,.80),
 inset 0 0 16px rgba(80,200,255,.20),
 0 0 18px rgba(80,200,255,.42) !important;
}

/* ────────────────────────────────────────────
 ■ 2. 神気（SHINKI）横並び表示
 HPセクションの下に .b32-party-shinki-row を追加する
 ──────────────────────────────────────────── */

/* 旧: カード右上絶対配置バッジを隠す */
.b32-party-shinki-badge {
 display: none !important;
}

/* 新: HP下の横並び行 */
.b32-party-shinki-row {
 display: flex;
 align-items: center;
 gap: 4px;
 padding: 1px 2px 0;
 margin-top: 2px;
}

.b32-party-shinki-label {
 font-family: 'Cinzel', serif;
 font-size: 5.5px;
 letter-spacing: 1px;
 color: rgba(180, 200, 240, .50);
 flex-shrink: 0;
 line-height: 1;
}

.b32-party-shinki-dots {
 display: flex;
 gap: 3px;
 align-items: center;
 flex-wrap: nowrap;
}

/* 菱形ドット（HP下用、旧 .b32-party-shinki-dot を上書き） */
.b32-party-shinki-row .b32-party-shinki-dot {
 display: inline-block;
 width: 6px !important;
 height: 6px !important;
 border-radius: 0 !important;
 transform: rotate(45deg) !important;
 border: 1px solid rgba(140, 190, 255, .35) !important;
 background: rgba(30, 60, 120, .10) !important;
 box-shadow: none !important;
 flex-shrink: 0;
 transition: background .15s, box-shadow .15s;
}

.b32-party-shinki-row .b32-party-shinki-dot.filled {
 background: rgba(80, 190, 255, .92) !important;
 border-color: rgba(120, 220, 255, .85) !important;
 box-shadow:
 0 0 5px rgba(60, 180, 255, .75),
 0 0 2px rgba(100, 220, 255, .95) !important;
}

/* ────────────────────────────────────────────
 ■ 3. 下部キャラカード質感
 ──────────────────────────────────────────── */

/* カード全体：青発光を抑え白銀フレームに */
.b32-party-card {
 border: 1px solid rgba(200, 215, 245, .22) !important;
 background: linear-gradient(160deg, rgba(8,12,28,.90), rgba(4,6,16,.94)) !important;
 box-shadow: none !important;
}

/* 上辺ライン：控えめ白銀 */
.b32-party-card::before {
 background: linear-gradient(90deg, transparent, rgba(200,220,255,.28), transparent) !important;
}

/* 内側グロー：ほぼ消す */
.b32-party-card::after {
 background: none !important;
}

/* ACTIVE（選択中）カードだけ青く目立たせる */
.b32-party-card.selected {
 border-color: rgba(80, 180, 255, .75) !important;
 background: linear-gradient(160deg, rgba(10,22,52,.92), rgba(4,10,26,.96)) !important;
 box-shadow:
 0 0 12px rgba(40,140,255,.30),
 inset 0 0 10px rgba(40,100,255,.08) !important;
}

.b32-party-card.selected::before {
 background: linear-gradient(90deg, transparent, rgba(80,180,255,.60), transparent) !important;
}

/* HPバー・数値の上書き：削除済み（上部の .b32-party-hp-block ルールに統一） */

/* カード高さ：神気行が入るよう少し増やす */
#battle32-root .b32-party-card {
 height: 96px !important;
}

/* 画像エリア：神気行追加ぶん少し縮める */
#battle32-root .b32-party-img-wrap {
 height: 52px !important;
}

#battle32-root .b32-party-img {
 height: 56px !important;
}

/* ────────────────────────────────────────────
 ■ 4. 右側アクションボタン質感
 ──────────────────────────────────────────── */

/* 共通：黒ベース + 白細線 */
#battle32-root .b32-action-circle-btn {
 background: rgba(6, 8, 22, .92) !important;
 border: 1.5px solid rgba(200, 215, 245, .28) !important;
 color: rgba(220, 228, 248, .88) !important;
 box-shadow:
 0 0 8px rgba(0,0,0,.55),
 inset 0 0 8px rgba(255,255,255,.03) !important;
}

/* 移動ボタン：青く強発光 */
#battle32-root .b32-action-circle-btn.move:not(.disabled) {
 border-color: rgba(60, 170, 255, .70) !important;
 color: rgba(140, 215, 255, .96) !important;
 background: rgba(8, 20, 48, .92) !important;
 box-shadow:
 0 0 16px rgba(40,150,255,.42),
 0 0 30px rgba(40,140,255,.20),
 inset 0 0 12px rgba(40,110,255,.14) !important;
}

/* スキル・ULT・終了・戻る：控えめ */
#battle32-root .b32-action-circle-btn.skill:not(.disabled) {
 border-color: rgba(220, 190, 100, .32) !important;
 color: rgba(240, 220, 160, .85) !important;
}

#battle32-root .b32-action-circle-btn.ult:not(.is-ready) {
 border-color: rgba(170, 110, 240, .32) !important;
 color: rgba(200, 165, 255, .80) !important;
}

#battle32-root .b32-action-circle-btn.end {
 background: rgba(30, 10, 10, .92) !important;
 border-color: rgba(220, 80, 70, .35) !important;
 color: rgba(255, 165, 150, .82) !important;
}

#battle32-root .b32-action-circle-btn.back {
 background: rgba(10, 10, 28, .90) !important;
 border-color: rgba(180, 185, 220, .28) !important;
 color: rgba(195, 200, 230, .75) !important;
}

/* ────────────────────────────────────────────
 ■ iPhone SE / 小画面対応（神気行追加ぶん）
 ──────────────────────────────────────────── */
@media (max-height: 700px) {
 #battle32-root .b32-party-card { height: 82px !important; }
 #battle32-root .b32-party-img-wrap { height: 40px !important; }
 #battle32-root .b32-party-img { height: 44px !important; }
 .b32-party-shinki-label { font-size: 5px !important; }
 .b32-party-shinki-row .b32-party-shinki-dot {
 width: 5px !important; height: 5px !important;
 }
}

/* ============================================================
 UI調整 v4 ― HPブルー / HP数値配置 / パネル下寄せ / カード質感
 ============================================================ */

/* ────────────────────────────────────────────
 ■ 1. HPバー：ブルー固定（.b32-party-hp-block ベース）
   旧 .b32-party-hp-row / .b32-party-hp-area / .b32-party-hp-text の
   上書きルールは削除済み。JS の hpHtml を参照。
 ──────────────────────────────────────────── */

/* ────────────────────────────────────────────
 ■ 3. キャラパネルを下に下げる
 ──────────────────────────────────────────── */

/* scroll エリア：ボード上寄せ、余白を下に渡す */
#battle32-root #b32-scroll {
 justify-content: flex-start !important;
 padding-bottom: 0 !important;
 gap: 0 !important;
}

/* bottom-area：グリッド直下に詰める（margin-top:auto 廃止） */
#battle32-root #b32-bottom-area {
 margin-top: 0 !important;
 padding: 4px 8px max(10px, env(safe-area-inset-bottom, 10px)) !important;
 gap: 3px !important;
}

/* ガイドテキスト：最小限に */
#battle32-root #b32-bottom-guide {
 height: 10px !important;
 min-height: 10px !important;
 max-height: 10px !important;
 line-height: 10px !important;
 margin: 0 0 1px 0 !important;
 opacity: .75 !important;
}

/* ────────────────────────────────────────────
 ■ 4. キャラカード質感・サイズ再調整
 ──────────────────────────────────────────── */

/* カード本体 */
#battle32-root .b32-party-card {
 height: 100px !important;
 padding: 5px 6px 6px !important;
 border: 1px solid rgba(210, 228, 255, .34) !important;
 background: linear-gradient(
 165deg,
 rgba(8, 12, 26, .93),
 rgba(3, 6, 14, .97)
 ) !important;
 box-shadow:
 inset 0 0 10px rgba(80, 130, 255, .05),
 0 0 8px rgba(0, 0, 0, .50) !important;
 border-radius: 4px !important;
 overflow: visible !important;
 display: flex !important;
 flex-direction: column !important;
}

/* 上辺ライン：白銀 */
#battle32-root .b32-party-card::before {
 background: linear-gradient(
 90deg, transparent, rgba(200, 225, 255, .32), transparent
 ) !important;
}

/* ACTIVEカードのみ青発光 */
#battle32-root .b32-party-card.selected {
 border-color: rgba(80, 210, 255, .90) !important;
 background: linear-gradient(
 165deg,
 rgba(10, 22, 54, .93),
 rgba(4, 10, 28, .97)
 ) !important;
 box-shadow:
 0 0 0 1px rgba(80, 210, 255, .30),
 0 0 18px rgba(40, 180, 255, .44),
 inset 0 0 14px rgba(40, 120, 255, .10) !important;
}

#battle32-root .b32-party-card.selected::before {
 background: linear-gradient(
 90deg, transparent, rgba(80, 200, 255, .65), transparent
 ) !important;
}

/* 画像エリア */
#battle32-root .b32-party-img-wrap {
 height: 54px !important;
 flex-shrink: 0 !important;
 overflow: visible !important;
}

#battle32-root .b32-party-img {
 height: 58px !important;
}

/* ────────────────────────────────────────────
 ■ 5. 神気行：フォントサイズ・間隔を見本に合わせる
 ──────────────────────────────────────────── */

.b32-party-shinki-row {
 display: flex !important;
 align-items: center !important;
 gap: 6px !important;
 margin-top: 4px !important;
 padding: 0 !important;
 width: 100% !important;
}

.b32-party-shinki-label {
 font-family: 'Cinzel', serif !important;
 font-size: 7px !important;
 letter-spacing: 1.2px !important;
 color: rgba(200, 220, 255, .65) !important;
 flex-shrink: 0 !important;
 line-height: 1 !important;
}

.b32-party-shinki-dots {
 display: flex !important;
 gap: 5px !important;
 align-items: center !important;
 flex-wrap: nowrap !important;
}

/* 菱形ドット */
.b32-party-shinki-row .b32-party-shinki-dot {
 width: 7px !important;
 height: 7px !important;
 border-radius: 0 !important;
 transform: rotate(45deg) !important;
 border: 1px solid rgba(140, 210, 255, .45) !important;
 background: rgba(0, 0, 0, .38) !important;
 box-shadow:
 inset 0 0 3px rgba(100, 200, 255, .10),
 0 0 2px rgba(100, 200, 255, .10) !important;
 flex-shrink: 0 !important;
 transition: background .15s, box-shadow .15s !important;
}

.b32-party-shinki-row .b32-party-shinki-dot.filled {
 background: rgba(40, 210, 255, .95) !important;
 border-color: rgba(160, 245, 255, .92) !important;
 box-shadow:
 0 0 6px rgba(40, 220, 255, .82),
 0 0 12px rgba(40, 180, 255, .42) !important;
}

/* ────────────────────────────────────────────
 ■ iPhone SE（max-height: 700px）再調整
 ──────────────────────────────────────────── */
@media (max-height: 700px) {
 #battle32-root .b32-party-card { height: 84px !important; padding: 4px 5px 5px !important; }
 #battle32-root .b32-party-img-wrap { height: 42px !important; }
 #battle32-root .b32-party-img { height: 46px !important; }

 .b32-party-shinki-label { font-size: 8px !important; }

 .b32-party-shinki-label { font-size: 6px !important; }
 .b32-party-shinki-row .b32-party-shinki-dot {
 width: 6px !important;
 height: 6px !important;
 }
 .b32-party-shinki-row { gap: 4px !important; margin-top: 3px !important; }
 .b32-party-shinki-dots { gap: 4px !important; }

 #battle32-root #b32-bottom-area {
 padding: 4px 6px max(6px, env(safe-area-inset-bottom, 6px)) !important;
 }
}

/* ============================================================
 UI調整 v5 ― グリッド微発光 / コア傾き調整
 ============================================================ */

/* ────────────────────────────────────────────
 ■ 1. グリッドライン微発光
 ──────────────────────────────────────────── */

/* 通常マス：白銀〜青白の微発光 */
.b32-cell {
 border-color: rgba(190, 220, 255, .26) !important;
 box-shadow:
 inset 0 0 8px rgba(120, 180, 255, .055),
 0 0 5px rgba(120, 190, 255, .10) !important;
}

/* 味方ゾーン：青薄く＋線発光 */
.b32-cell.ally-zone {
 background:
 linear-gradient(180deg,
 rgba(20, 80, 130, .18),
 rgba(6, 16, 32, .42)) !important;
 border-color: rgba(90, 190, 255, .36) !important;
 box-shadow:
 inset 0 0 12px rgba(60, 160, 255, .10),
 0 0 7px rgba(60, 180, 255, .16) !important;
}

/* 敵ゾーン：紫薄く＋線発光 */
.b32-cell.enemy-zone {
 background:
 linear-gradient(180deg,
 rgba(70, 30, 100, .16),
 rgba(14, 8, 28, .42)) !important;
 border-color: rgba(180, 120, 255, .30) !important;
 box-shadow:
 inset 0 0 12px rgba(160, 80, 255, .08),
 0 0 7px rgba(160, 90, 255, .13) !important;
}

/* 中央菱形◇：少し見えるように */
.b32-cell::before {
 border-color: rgba(170, 220, 255, .18) !important;
 box-shadow: 0 0 5px rgba(100, 200, 255, .10) !important;
}

/* 盤面全体：ほんのり外側グロー */
#b32-board {
 filter:
 drop-shadow(0 0 5px rgba(100, 180, 255, .10))
 drop-shadow(0 0 12px rgba(90, 140, 255, .06));
}

/* ────────────────────────────────────────────
 ■ 2. コア画像：盤面パースに合わせて傾き調整
 ──────────────────────────────────────────── */

/* コアのあるセル：はみ出し許可（上の定義と統合済み、念のため残す） */
.b32-cell.has-core {
  overflow: visible !important;
}

/* ============================================================
 UI調整 v6 ― キャラパネル画像：顔アップ＋下辺フェード
 ============================================================ */

/* 画像ラッパー：上寄せ・overflow:hidden 維持 */
.b32-party-img-wrap {
 height: 64px !important;
 display: flex !important;
 align-items: flex-start !important;
 justify-content: center !important;
 overflow: hidden !important;
 position: relative !important;
}

/* キャラ画像：
 - scale で拡大（デフォルト 1.45 倍）
 - transform-origin: top center で顔をカード上部に引き寄せる
 - object-position: top center で画像上端基準
 - mask-image で下辺を自然にフェードアウト */
.b32-party-img {
 width: 100% !important;
 height: 96px !important;
 object-fit: cover !important;
 object-position: top center !important;

 /* panelScale / panelOffsetY はキャラ別に JS 側で --panel-scale / --panel-offset-y をセット済み。
 デフォルトスケールを 1.45 に上げ、originを top center に変更。 */
 transform:
 translateY(var(--panel-offset-y, 0px))
 scale(var(--panel-scale, 1.45)) !important;
 transform-origin: top center !important;

 /* 下辺フェード（mask）：blur より軽く、iPhoneでも安定 */
 -webkit-mask-image: linear-gradient(
 to bottom,
 #000 0%,
 #000 62%,
 rgba(0, 0, 0, .75) 76%,
 rgba(0, 0, 0, .30) 90%,
 transparent 100%
 );
 mask-image: linear-gradient(
 to bottom,
 #000 0%,
 #000 62%,
 rgba(0, 0, 0, .75) 76%,
 rgba(0, 0, 0, .30) 90%,
 transparent 100%
 );

 display: block !important;
 position: relative !important;
 z-index: 1 !important;
 filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .65)) !important;
}

/* スキル選択中の左キャラカード画像にも同じ処理を適用 */
#battle32-root .b32-action-char-img-wrap {
 height: 64px !important;
 align-items: flex-start !important;
 overflow: hidden !important;
}

#battle32-root .b32-action-char-img {
 height: 96px !important;
 object-fit: cover !important;
 object-position: top center !important;
 transform: scale(var(--panel-scale, 1.40)) !important;
 transform-origin: top center !important;
 -webkit-mask-image: linear-gradient(
 to bottom,
 #000 0%,
 #000 60%,
 rgba(0, 0, 0, .70) 78%,
 transparent 100%
 );
 mask-image: linear-gradient(
 to bottom,
 #000 0%,
 #000 60%,
 rgba(0, 0, 0, .70) 78%,
 transparent 100%
 );
}

/* ── iPhone SE（max-height: 700px）再調整 ── */
@media (max-height: 700px) {
 .b32-party-img-wrap {
 height: 50px !important;
 }
 .b32-party-img {
 height: 78px !important;
 }
 #battle32-root .b32-action-char-img-wrap {
 height: 50px !important;
 }
 #battle32-root .b32-action-char-img {
 height: 78px !important;
 }
}

/* stability-2：黄色グロー */
.b32-core-object.stability-2 .b32-core-img {
 filter:
 brightness(1.15)
 contrast(1.08)
 saturate(1.12)
 drop-shadow(0 0 8px rgba(255, 220, 80, .90))
 drop-shadow(0 0 18px rgba(255, 180, 40, .55)) !important;
}

/* stability-1：赤グロー */
.b32-core-object.stability-1 .b32-core-img {
 filter:
 brightness(1.12)
 contrast(1.08)
 saturate(1.12)
 drop-shadow(0 0 9px rgba(255, 60, 60, .95))
 drop-shadow(0 0 20px rgba(255, 40, 40, .65)) !important;
}

/* ============================================================
 緊急リセット：ユニット寝かせ解除
 ============================================================ */

/* boardにはfilterを絶対にかけない。3Dがフラット化される原因になる */
#battle32-root #b32-board {
 filter: none !important;
 transform: rotateX(38deg) !important;
 transform-style: preserve-3d !important;
}

/* セルも3D維持 */
#battle32-root .b32-cell {
 transform-style: preserve-3d !important;
 overflow: visible !important;
}

/* 味方・敵ユニットは盤面の逆回転で正面に起こす */
#battle32-root .b32-unit,
#battle32-root .b32-unit.ally,
#battle32-root .b32-unit.enemy {
 transform: translateX(-50%) rotateX(-38deg) !important;
 transform-origin: bottom center !important;
 transform-style: preserve-3d !important;
}

/* ユニット画像自体には寝かせ処理を入れない */
#battle32-root .b32-unit-icon {
 transform:
 translateY(var(--unit-offset-y, 0px))
 scale(var(--unit-scale, 1)) !important;
 transform-origin: center bottom !important;
}

/* コアも追加の寝かせなし。ユニットと同じく盤面から起こす */
#battle32-root .b32-core-object {
 position: absolute !important;
 left: 50% !important;
 top: 50% !important;
 width: 120% !important;
 height: 120% !important;
 transform: translate(-50%, -50%) rotateX(-38deg) !important;
 transform-origin: center center !important;
 z-index: 5 !important;
 overflow: visible !important;
}

#battle32-root .b32-core-img {
 width: 115% !important;
 height: 115% !important;
 object-fit: contain !important;
}
/* ============================================================
 UI調整 v8 ― グリッド背景なし：線だけ表示
 movable / skill-range 等のハイライトはそのまま維持
 ============================================================ */

/* 通常セル：背景を消して線だけ */
.b32-cell {
 background: transparent !important;
 border: 1px solid rgba(150, 170, 220, .22) !important;
 box-shadow:
 inset 0 0 8px rgba(120, 160, 255, .04),
 0 0 4px rgba(120, 160, 255, .05) !important;
}

/* セル内の小さい菱形は残す */
.b32-cell::before {
 border-color: rgba(150, 170, 255, .16) !important;
 background: transparent !important;
}

/* 味方ゾーン：背景なし、青系の線だけ */
.b32-cell.ally-zone {
 background: transparent !important;
 border-color: rgba(60, 160, 255, .38) !important;
 box-shadow:
 inset 0 0 10px rgba(60, 160, 255, .06),
 0 0 6px rgba(60, 160, 255, .12) !important;
}

.b32-cell.ally-zone::before {
 border-color: rgba(80, 180, 255, .22) !important;
}

/* 敵ゾーン：背景なし、紫系の線だけ */
.b32-cell.enemy-zone {
 background: transparent !important;
 border-color: rgba(160, 90, 255, .34) !important;
 box-shadow:
 inset 0 0 10px rgba(160, 90, 255, .05),
 0 0 6px rgba(160, 90, 255, .10) !important;
}

.b32-cell.enemy-zone::before {
 border-color: rgba(180, 100, 255, .20) !important;
}

/* 境界ライン：少しだけ残す */
.b32-cell.row-divider {
 border-top-color: rgba(210, 220, 255, .26) !important;
}

/* ── ハイライト系は背景色を維持（上書きしない） ──
 .b32-cell.movable / .skill-range / .skill-target-enemy /
 .skill-target-ally / .move-capture / .boss-danger-* /
 .selected-unit / .skill-selected / .enemy-move-guide
 はすべて既存 !important 定義が有効なのでここでは触らない */

/* ============================================================
 UI調整 v9 ― グリッド統一デザイン
 背景なし / 白線 / ほんのり発光 / ひし形なし
 ============================================================ */

/* 通常セル */
.b32-cell {
 background: transparent !important;
 border: 1px solid rgba(255, 255, 255, .34) !important;
 box-shadow:
 inset 0 0 8px rgba(255, 255, 255, .05),
 0 0 6px rgba(180, 220, 255, .14) !important;
}

/* セル中央のひし形装飾を削除 */
.b32-cell::before {
 display: none !important;
 content: none !important;
}

/* 味方ゾーン：通常セルと同一 */
.b32-cell.ally-zone {
 background: transparent !important;
 border-color: rgba(255, 255, 255, .34) !important;
 box-shadow:
 inset 0 0 8px rgba(255, 255, 255, .05),
 0 0 6px rgba(180, 220, 255, .14) !important;
}

/* 敵ゾーン：通常セルと同一 */
.b32-cell.enemy-zone {
 background: transparent !important;
 border-color: rgba(255, 255, 255, .34) !important;
 box-shadow:
 inset 0 0 8px rgba(255, 255, 255, .05),
 0 0 6px rgba(180, 220, 255, .14) !important;
}

/* 境界ラインも白系に統一 */
.b32-cell.row-divider {
 border-top: 1px solid rgba(255, 255, 255, .34) !important;
}

/* ── 以下のハイライト系は変更なし ──────────────────────────
 .b32-cell.movable / .selected-unit / .skill-selected /
 .skill-range / .skill-target-enemy / .skill-target-ally /
 .move-capture / .boss-danger-* / .enemy-move-guide
 ──────────────────────────────────────────────────────── */

/* ============================================================
   UI調整 v10 ― ULTカットイン画像のぼやけ解消
   blur() 除去済み + iPhone実機対策
   ============================================================ */

/* ULTカットイン画像：iPhone実機でのぼやけ防止 */
.b32-ult-cutin-img {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  /* translate3d でGPUレイヤーを確定させてサブピクセルぼやけを防ぐ */
  transform: translate3d(-50%, -50%, 0) !important;
  -webkit-transform: translate3d(-50%, -50%, 0) !important;
  image-rendering: auto !important;
}

/* ============================================================
   最終上書き v11：スキルレンジガイドを必ず表示
   .b32-cell / .ally-zone / .enemy-zone の transparent !important 対策
   #battle32-root で specificity を上げて確実に上書きする
   ============================================================ */

#battle32-root .b32-cell.skill-range {
  background:
    linear-gradient(145deg, rgba(170, 90, 255, .34), rgba(60, 20, 100, .42)),
    rgba(60, 20, 100, .40) !important;
  border-color: rgba(200, 120, 255, .95) !important;
  box-shadow:
    inset 0 0 16px rgba(180, 100, 255, .42),
    0 0 18px rgba(180, 100, 255, .50) !important;
}

#battle32-root .b32-cell.skill-target-enemy {
  background:
    linear-gradient(145deg, rgba(255, 80, 60, .38), rgba(80, 10, 8, .48)),
    rgba(80, 10, 8, .46) !important;
  border-color: rgba(255, 100, 80, .98) !important;
  box-shadow:
    inset 0 0 18px rgba(255, 80, 60, .45),
    0 0 20px rgba(255, 70, 50, .58) !important;
}

#battle32-root .b32-cell.skill-target-ally {
  background:
    linear-gradient(145deg, rgba(80, 240, 180, .34), rgba(8, 60, 42, .42)),
    rgba(8, 60, 42, .40) !important;
  border-color: rgba(90, 240, 190, .98) !important;
  box-shadow:
    inset 0 0 18px rgba(80, 240, 180, .40),
    0 0 20px rgba(70, 220, 180, .52) !important;
}

/* ── オーバーレイ span（背景CSS上書き時の保険） ── */

#battle32-root .b32-cell {
  position: relative;
}

#battle32-root .b32-skill-range-overlay {
  position: absolute;
  inset: 3px;
  z-index: 20;
  pointer-events: none;
  border-radius: 3px;
  box-sizing: border-box;
}

#battle32-root .b32-skill-range-overlay.range {
  border: 2px solid rgba(210, 140, 255, .95);
  background: rgba(150, 80, 255, .24);
  box-shadow:
    0 0 10px rgba(190, 100, 255, .85),
    inset 0 0 10px rgba(190, 100, 255, .35);
}

#battle32-root .b32-skill-range-overlay.target_enemy {
  border: 2px solid rgba(255, 110, 90, 1);
  background: rgba(255, 70, 50, .28);
  box-shadow:
    0 0 12px rgba(255, 80, 60, .95),
    inset 0 0 10px rgba(255, 80, 60, .40);
}

#battle32-root .b32-skill-range-overlay.target_ally {
  border: 2px solid rgba(100, 255, 200, 1);
  background: rgba(60, 220, 180, .24);
  box-shadow:
    0 0 12px rgba(80, 240, 190, .90),
    inset 0 0 10px rgba(80, 240, 190, .35);
}

/* ユニット・コアはオーバーレイの上に表示 */
#battle32-root .b32-unit,
#battle32-root .b32-core-object {
  position: relative;
  z-index: 25;
}


/* ============================================================
   Bottom 5 Action Buttons - No.None Roguelite UI
   召喚 / 移動 / スキル / ULT / 終了
   ============================================================ */

#battle32-root #b32-actions {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  margin-top: 6px;
  position: relative;
  z-index: 20;
}

#battle32-root .b32-bottom-action {
  position: relative;
  min-height: 70px;
  border-radius: 7px;
  border: 1px solid rgba(180, 220, 255, .24);
  background:
    linear-gradient(180deg, rgba(10,18,36,.96), rgba(4,8,20,.98));
  box-shadow:
    inset 0 0 0 1px rgba(120,160,255,.06),
    0 0 12px rgba(0,0,0,.35);
  color: #eaf4ff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 5px 7px;
  text-align: center;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, opacity .12s ease;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

#battle32-root .b32-bottom-action::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent 38%);
  opacity: .9;
}

#battle32-root .b32-bottom-action:active {
  transform: translateY(1px) scale(.995);
}

#battle32-root .b32-bottom-action.is-active {
  border-color: rgba(110, 220, 255, .90);
  box-shadow:
    0 0 0 1px rgba(80, 210, 255, .30),
    0 0 18px rgba(40, 180, 255, .36),
    inset 0 0 16px rgba(40, 120, 255, .14);
}

#battle32-root .b32-bottom-action:disabled {
  opacity: .40;
  filter: grayscale(.18);
  cursor: default;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 0 6px rgba(0,0,0,.28);
}

#battle32-root .b32-bottom-action-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
  z-index: 1;
}

#battle32-root .b32-bottom-action-icon {
  font-size: 17px;
  line-height: 1;
  text-shadow: 0 0 10px rgba(120, 190, 255, .42);
}

#battle32-root .b32-bottom-action-label {
  font-family: 'Noto Serif JP', serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.05;
}

#battle32-root .b32-bottom-action-cost {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: .8px;
  color: rgba(185, 215, 255, .82);
  position: relative;
  z-index: 1;
  line-height: 1.1;
}

#battle32-root .b32-bottom-action-sub {
  font-size: 9px;
  color: rgba(210, 225, 240, .72);
  position: relative;
  z-index: 1;
  line-height: 1.1;
}

/* 召喚：黒銀 */
#battle32-root .b32-bottom-action.summon {
  border-color: rgba(160, 170, 190, .34);
  background: linear-gradient(180deg, rgba(24,24,32,.96), rgba(10,10,16,.98));
}
#battle32-root .b32-bottom-action.summon.is-active {
  border-color: rgba(210, 220, 255, .88);
  box-shadow:
    0 0 0 1px rgba(180,200,255,.25),
    0 0 16px rgba(180,200,255,.26);
}

/* 移動：青 */
#battle32-root .b32-bottom-action.move {
  border-color: rgba(120, 210, 255, .32);
}
#battle32-root .b32-bottom-action.move.is-active {
  border-color: rgba(80, 220, 255, .92);
  box-shadow:
    0 0 0 1px rgba(80,220,255,.30),
    0 0 18px rgba(30,180,255,.34);
}

/* スキル：青白 */
#battle32-root .b32-bottom-action.skill {
  border-color: rgba(120, 170, 255, .36);
}
#battle32-root .b32-bottom-action.skill.is-active {
  border-color: rgba(130, 190, 255, .95);
  box-shadow:
    0 0 0 1px rgba(120,180,255,.28),
    0 0 18px rgba(90,150,255,.32);
}

/* ULT：紫 */
#battle32-root .b32-bottom-action.ult {
  border-color: rgba(190, 110, 255, .40);
  background: linear-gradient(180deg, rgba(34,18,48,.96), rgba(14,8,24,.98));
}
#battle32-root .b32-bottom-action.ult:not(:disabled) {
  box-shadow:
    inset 0 0 12px rgba(160,80,255,.10),
    0 0 14px rgba(150,70,255,.14);
}
#battle32-root .b32-bottom-action.ult.is-active {
  border-color: rgba(220, 130, 255, .98);
  box-shadow:
    0 0 0 1px rgba(210,120,255,.34),
    0 0 24px rgba(180,90,255,.42),
    inset 0 0 16px rgba(140,70,255,.18);
}

/* 終了 */
#battle32-root .b32-bottom-action.end {
  border-color: rgba(210, 220, 255, .24);
}

/* 旧ラジアルメニューは非表示 */
#battle32-root .b32-action-radial-menu {
  display: none !important;
}

/* 下部エリアの余白をボタン込みで調整 */
#battle32-root #b32-bottom-area {
  padding-bottom: max(4px, env(safe-area-inset-bottom, 4px)) !important;
}

/* iPhone SE系 */
@media (max-width: 430px), (max-height: 740px) {
  #battle32-root #b32-actions {
    gap: 4px;
    margin-top: 0;
  }

  #battle32-root .b32-bottom-action {
    min-height: 54px;
    padding: 4px 3px 4px;
  }

  #battle32-root .b32-bottom-action-icon {
    font-size: 14px;
  }

  #battle32-root .b32-bottom-action-label {
    font-size: 11px;
  }

  #battle32-root .b32-bottom-action-cost {
    font-size: 8px;
  }

  #battle32-root .b32-bottom-action-sub {
    font-size: 8px;
  }
}
/* ============================================================
   味方ユニットの表示位置補正
   盤面セルより下に見える問題の補正
   ============================================================ */

#battle32-root .b32-unit.ally {
  bottom: calc(var(--cell-size) * 0.45) !important;
}

/* ============================================================
   敵ユニットの表示位置補正
   盤面セルより下に見える問題の補正
   ============================================================ */

/* 敵ユニット bottom 補正 ── 削除済み（Enemy Unit Reset で一元管理） */
/* #battle32-root .b32-unit.enemy:not(.boss) { bottom: calc(var(--cell-size) * 0.45) !important; } */
/* ============================================================
   スキル選択パネル：左キャラ枠は維持し、画像だけ縮小
   ============================================================ */

/* 枠サイズは既存のまま維持 */
#battle32-root .b32-action-char-card {
  height: 88px !important;
  padding: 4px 4px 3px !important;
  overflow: hidden !important;
}

/* 画像表示枠も既存サイズを維持 */
#battle32-root .b32-action-char-img-wrap {
  height: 58px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

/* 画像だけ調整：TOP合わせ */
/* 画像だけ調整：TOP合わせ */
#battle32-root .b32-action-char-img {
  width: 100% !important;
  height: 62px !important;
  object-fit: contain !important;
  object-position: center top !important;
  transform: scale(1.1) !important;
  transform-origin: center top !important;
}

/* ============================================================
   Roster Character Info Panel
   キャラパネルタップ時の情報表示
   ============================================================ */

#battle32-root .b32-roster-info-panel {
  width: 100%;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(100, 170, 255, .28);
  background:
    linear-gradient(160deg, rgba(8, 16, 36, .94), rgba(3, 6, 16, .98));
  box-shadow:
    inset 0 0 16px rgba(60, 120, 255, .08),
    0 0 16px rgba(0, 0, 0, .45);
  border-radius: 6px;
  box-sizing: border-box;
}

#battle32-root .b32-roster-info-card {
  position: relative;
  height: 92px;
  border-radius: 5px;
  border: 1px solid rgba(190, 220, 255, .32);
  background: rgba(0, 0, 0, .32);
  overflow: hidden;
}

#battle32-root .b32-roster-info-rarity {
  position: absolute;
  top: 4px;
  left: 5px;
  z-index: 2;
  font-family: 'Cinzel', serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(230, 220, 255, .95);
  text-shadow: 0 0 8px rgba(120, 160, 255, .65);
}

#battle32-root .b32-roster-info-img-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

#battle32-root .b32-roster-info-img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

#battle32-root .b32-roster-info-initial {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: rgba(220, 230, 255, .7);
}

#battle32-root .b32-roster-info-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#battle32-root .b32-roster-info-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(120, 170, 255, .18);
  padding-bottom: 4px;
}

#battle32-root .b32-roster-info-title .name {
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  font-weight: 700;
  color: rgba(235, 240, 255, .94);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#battle32-root .b32-roster-info-title .cost {
  flex-shrink: 0;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  color: rgba(130, 200, 255, .82);
}

#battle32-root .b32-roster-info-role {
  font-size: 10px;
  color: rgba(190, 210, 235, .72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#battle32-root .b32-roster-info-desc {
  font-size: 10px;
  line-height: 1.45;
  color: rgba(225, 225, 235, .72);
  max-height: 30px;
  overflow: hidden;
}

#battle32-root .b32-roster-info-skill {
  display: grid;
  grid-template-columns: auto minmax(0, auto) 1fr;
  gap: 5px;
  align-items: baseline;
  font-size: 10px;
  color: rgba(210, 220, 245, .68);
}

#battle32-root .b32-roster-info-skill span {
  color: rgba(150, 190, 255, .70);
}

#battle32-root .b32-roster-info-skill strong {
  color: rgba(245, 245, 255, .90);
  font-weight: 700;
  white-space: nowrap;
}

#battle32-root .b32-roster-info-skill em {
  font-style: normal;
  color: rgba(210, 220, 245, .50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#battle32-root .b32-roster-info-status {
  margin-top: auto;
  font-size: 10px;
  letter-spacing: 1px;
  color: rgba(110, 210, 255, .86);
}

/* iPhone SE向け */
@media (max-height: 700px) {
  #battle32-root .b32-roster-info-panel {
    grid-template-columns: 66px minmax(0, 1fr);
    padding: 6px;
    gap: 6px;
  }

  #battle32-root .b32-roster-info-card {
    height: 76px;
  }

  #battle32-root .b32-roster-info-title .name {
    font-size: 12px;
  }

  #battle32-root .b32-roster-info-desc {
    display: none;
  }
}

/* ============================================================
   キャラ情報パネルをキャラパネル行より上に固定表示
   bottom = アクション行(~104px) + キャラパネル行(~108px) + 余白(8px) + safe-area
   ============================================================ */

#battle32-root .b32-roster-info-panel {
  position: fixed !important;
  left: 8px !important;
  right: 8px !important;
  /* party-status 上辺 ≒ 212px。さらに 8px 余白を加える */
  bottom: calc(220px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 3000002 !important;

  width: auto !important;
  max-width: 414px !important;
  margin: 0 auto !important;

  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  gap: 7px !important;
  padding: 7px !important;
}

/* ============================================================
   キャラパネル レアリティ表示（画像左上に文字のみ重ね）
   ============================================================ */

/* .b32-party-img-wrap は position:relative 済みのため
   absolute で画像左上にオーバーレイする */
#battle32-root .b32-party-rarity {
  position: absolute;
  top: 3px;
  left: 4px;
  z-index: 6;

  /* フレーム・背景は一切なし */
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;

  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  pointer-events: none;

  /* 黒縁 + currentColor の淡いグロー */
  text-shadow:
    0 0 5px rgba(0, 0, 0, .95),
    0 0 8px currentColor;
}

/* レアリティ別の文字色（装飾は text-shadow のみ） */
#battle32-root .b32-party-rarity.rarity-ur {
  color: #e080ff;
}
#battle32-root .b32-party-rarity.rarity-sr {
  color: #ffd060;
}
#battle32-root .b32-party-rarity.rarity-r {
  color: rgba(210, 230, 255, .90);
}

/* 情報パネルが下部エリアの高さを押し広げないようにする */
#battle32-root #b32-skill-list {
  min-height: 0 !important;
}

/* 情報パネル内のカードを少し小さめに */
#battle32-root .b32-roster-info-card {
  height: 78px !important;
}

#battle32-root .b32-roster-info-title .name {
  font-size: 12px !important;
}

#battle32-root .b32-roster-info-desc {
  max-height: 26px !important;
  font-size: 9px !important;
}

/* iPhone SEなど低い画面 */
@media (max-height: 740px) {
  #battle32-root .b32-roster-info-panel {
    /* SE: アクション行(~80px) + パーティ行(~72px) + 余白(8px) */
    bottom: calc(160px + env(safe-area-inset-bottom, 0px)) !important;
    grid-template-columns: 62px minmax(0, 1fr) !important;
    padding: 6px !important;
  }

  #battle32-root .b32-roster-info-card {
    height: 68px !important;
  }

  #battle32-root .b32-roster-info-desc {
    display: none !important;
  }
}

/* ============================================================
   iPhone SE 専用レイアウト補正
   iPhone14系を崩さないため、低い画面だけに限定
   ============================================================ */

/* ============================================================
   iPhone SE：盤面グリッドを少し大きくする
   ============================================================ */
@media (max-width: 430px) and (max-height: 740px) {

  /* ボードに使える高さを増やす */
  #battle32-root #b32-scroll {
    padding-top: 0 !important;
    gap: 0 !important;
  }

  #battle32-root #b32-board-wrap {
    padding-top: 4px !important;
    padding-bottom: 0 !important;
    transform: none !important;
  }

  /* セルサイズはJS（fitBattle32Layout）に委ねる。固定値は指定しない */

  /* キャラ情報パネル：キャラパネル行より上に */
  #battle32-root .b32-roster-info-panel {
    /* SE: アクション行(~62px)+パーティ行(~76px)+guide(12px)+padding(16px)+余白(8px) = ~174px */
    bottom: calc(174px + env(safe-area-inset-bottom, 0px)) !important;
    left: 8px !important;
    right: 8px !important;
    max-width: 414px !important;

    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 6px !important;
    min-height: 72px !important;
  }

  #battle32-root .b32-roster-info-card {
    height: 64px !important;
  }

  #battle32-root .b32-roster-info-title .name {
    font-size: 11px !important;
  }

  #battle32-root .b32-roster-info-title .cost {
    font-size: 8px !important;
  }

  #battle32-root .b32-roster-info-role {
    font-size: 8px !important;
  }

  #battle32-root .b32-roster-info-skill {
    font-size: 8px !important;
  }

  #battle32-root .b32-roster-info-desc {
    display: none !important;
  }

  #battle32-root .b32-roster-info-status {
    font-size: 8px !important;
  }
}

.b32-roster-info-panel {
  position: relative;
}

.b32-roster-info-close {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;

  width: 26px;
  height: 26px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.45);
  color: rgba(232,228,220,.9);

  font-size: 18px;
  line-height: 1;
  font-family: 'Cinzel', serif;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.b32-roster-info-close:active {
  transform: scale(.92);
  background: rgba(255,255,255,.10);
}

/* ============================================================
  Battle画面：明度アップ調整
============================================================ */

/* 背景画像をもう少し見せる */
#battle32-root::before {
  opacity: .46 !important;
  filter: brightness(1.18) contrast(1.05);
}

/* 暗い紫のかぶせを弱める */
#battle32-root::after {
  background:
    radial-gradient(ellipse at 50% 30%,
      rgba(80, 60, 140, .16) 0%,
      rgba(20, 16, 36, .10) 52%,
      transparent 78%
    ) !important;
}

/* 全体の地色を少し明るく */
#battle32-root {
  background: #0c1020 !important;
}

/* ヘッダーの黒を薄く */
#b32-header {
  background: rgba(8, 10, 22, .46) !important;
}

/* ボスHP帯の黒を薄く */
#b32-boss-hp-ui {
  background: rgba(8, 10, 22, .42) !important;
}

/* 下部アクションバーの黒を薄く */
#b32-actions {
  background: rgba(8, 10, 22, .42) !important;
}

/* 盤面セルを少し明るく */
.b32-cell {
  background: rgba(18, 26, 48, .52) !important;
  border-color: rgba(150, 190, 255, .34) !important;
  box-shadow:
    inset 0 0 10px rgba(90, 150, 255, .08),
    0 0 5px rgba(80, 140, 255, .10);
}

/* 味方ゾーンも視認性アップ */
.b32-cell.ally-zone {
  background: rgba(18, 42, 70, .58) !important;
  border-color: rgba(90, 180, 255, .42) !important;
  box-shadow:
    inset 0 0 12px rgba(70, 160, 255, .13),
    0 0 7px rgba(70, 160, 255, .14);
}


/* 敵ゾーンも沈みすぎないように */
.b32-cell.enemy-zone {
  background: rgba(42, 24, 66, .56);
  border-color: rgba(180, 110, 255, .40);
  box-shadow:
    inset 0 0 12px rgba(160, 80, 255, .12),
    0 0 7px rgba(160, 80, 255, .13);
}

/* キャラパネルも少し明るく */
.b32-party-card {
  background: rgba(18, 20, 34, .72) !important;
  border-color: rgba(255, 255, 255, .14) !important;
}

/* ボトムボタンも暗すぎないように */
.b32-bottom-action {
  background: rgba(20, 24, 42, .82) !important;
  border-color: rgba(255, 255, 255, .16) !important;
}

/* ============================================================
   キャラパネル・ボトムナビ：角丸撤廃
   ============================================================ */

/* キャラパネルのフレームを鋭角化 */
#battle32-root .b32-party-card,
#battle32-root .b32-party-card::before,
#battle32-root .b32-party-card::after {
  border-radius: 0 !important;
}

/* ボトムナビ（アクションボタン）のフレームを鋭角化 */
#battle32-root .b32-bottom-action,
#battle32-root .b32-bottom-action::before,
#battle32-root .b32-bottom-action::after {
  border-radius: 0 !important;
}

/* ボトムナビ外枠が角丸なら無効化 */
#battle32-root #b32-bottom-nav,
#battle32-root .b32-bottom-nav {
  border-radius: 0 !important;
}

/* スキルチップ・スキルボタンを鋭角化 */
#battle32-root .b32-skill-chip,
#battle32-root .b32-skill-chip::before,
#battle32-root .b32-skill-chip::after,
#battle32-root .b32-bottom-skill-btn,
#battle32-root .b32-bottom-skill-btn::before,
#battle32-root .b32-bottom-skill-btn::after {
  border-radius: 0 !important;
}

/* 汎用ボタン（.b32-btn）を鋭角化 */
#battle32-root .b32-btn,
#battle32-root .b32-btn::before,
#battle32-root .b32-btn::after {
  border-radius: 0 !important;
}

/* スキル詳細パネルも鋭角化 */
#battle32-root .b32-action-detail-panel {
  border-radius: 0 !important;
}


/* ============================================================
   roster情報パネル・rosterカード：角丸撤廃
   ============================================================ */

#battle32-root .b32-roster-info-panel,
#battle32-root .b32-roster-info-card {
  border-radius: 0 !important;
}


/* ============================================================
   操作ガイド：ボードの直下にフロー配置
   ============================================================ */

#battle32-root #b32-bottom-guide {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  height: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
  line-height: 14px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: visible !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  color: rgba(232, 238, 255, .82) !important;
  text-shadow:
    0 0 8px rgba(100, 180, 255, .42),
    0 1px 3px rgba(0, 0, 0, .95) !important;
  z-index: auto !important;
  pointer-events: none !important;
}

/* iPhone SE など低い画面（幅430px以下 かつ 高さ740px以下）では
   フォントを小さく */
@media (max-width: 430px) and (max-height: 740px) {
  #battle32-root #b32-bottom-guide {
    font-size: 9px !important;
  }
}


/* ============================================================
   iPhone 14 / 大画面向けレイアウト強化
   ─────────────────────────────────────────────────────────
   SE は max-height:700px で縮小済み。
   iPhone 14（393×852px）は max-width:430px に引っかかるため
   「幅AND高さ」の複合条件で SE を除外し、
   14 だけに拡大を当てる。
   条件：幅360px以上 かつ 高さ750px以上
   ============================================================ */
@media (min-width: 360px) and (min-height: 750px) {

  /* ── bottom-area：パディングを広げてボタンが被らないようにする ── */
  #battle32-root #b32-bottom-area {
    padding: 4px 10px max(18px, env(safe-area-inset-bottom, 18px)) !important;
    gap: 4px !important;
  }

  /* ── キャラパネル行（party-status）：
       幅を画面いっぱいに、カード間のギャップを広げる ── */
  #battle32-root #b32-party-status {
    width: 100% !important;
    gap: 7px !important;
    margin-bottom: 2px !important;
  }

  /* ── キャラカード本体：高さを拡大 ── */
  #battle32-root .b32-party-card {
    height: 116px !important;
    padding: 6px 7px 7px !important;
  }

  /* 画像エリアをキャラが見える高さに */
  #battle32-root .b32-party-img-wrap {
    height: 66px !important;
  }

  /* ── ボトムアクションボタン行 ── */
  #battle32-root #b32-actions {
    gap: 6px !important;
    margin-top: 2px !important;
  }

  /* ── ボタン1個のサイズ ── */
  #battle32-root .b32-bottom-action {
    min-height: 82px !important;
    padding: 10px 6px 9px !important;
  }

  #battle32-root .b32-bottom-action-icon  { font-size: 20px !important; }
  #battle32-root .b32-bottom-action-label { font-size: 14px !important; }
  #battle32-root .b32-bottom-action-cost  { font-size: 10px !important; }
  #battle32-root .b32-bottom-action-sub   { font-size: 10px !important; }

  /* 情報ウィンドウ：iPhone14 ではカード116px分大きいのでボトムを上げる
     party(116px)+guide(20px)+action(82px)+bottom-pad(26px)+gap(12px)+余白(8px)≒264px */
  #battle32-root .b32-roster-info-panel {
    bottom: calc(264px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================================
   #b32-roster-panel：ローグライト専用キャラカード
   ※ document.body 直下に追加されるため #battle32-root スコープ外
   レアリティを画像左上に文字のみオーバーレイ
   ============================================================ */

#b32-roster-panel .b32-roster-img-wrap {
  position: relative;
  width: min(14vw, 60px);
  height: min(14vw, 60px);
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: none !important;
  border-radius: 0;
  flex-shrink: 0;
}

#b32-roster-panel .b32-roster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

#b32-roster-panel .b32-roster-rarity {
  position: absolute;
  top: 3px;
  left: 4px;
  z-index: 3;

  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;

  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  pointer-events: none;

  text-shadow:
    0 0 5px rgba(0, 0, 0, .95),
    0 0 8px currentColor;
}

#b32-roster-panel .b32-roster-rarity.rarity-ur {
  color: #e080ff;
}
#b32-roster-panel .b32-roster-rarity.rarity-sr {
  color: #ffd060;
}
#b32-roster-panel .b32-roster-rarity.rarity-r {
  color: rgba(210, 230, 255, .92);
}

/* ローグライトキャラカード：HPバー（画像下部に重ねる） */
#b32-roster-panel .b32-roster-hp-bar-wrap {
  width: 100%;
  height: 3px;
  background: rgba(0,0,0,.55);
  border-radius: 1px;
  overflow: hidden;
  flex-shrink: 0;
  margin-top: 1px;
}
#b32-roster-panel .b32-roster-hp-bar {
  height: 100%;
  border-radius: 1px;
  transition: width .3s ease;
  background: #60b8ff;
}
/* HP数値テキスト */
#b32-roster-panel .b32-roster-hp-text {
  font-size: 7px;
  color: rgba(180,210,255,.75);
  letter-spacing: .3px;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}
/* dead / standby 状態の上書き */
#b32-roster-panel .b32-roster-hp-text.dead {
  color: rgba(200,80,80,.65);
}
#b32-roster-panel .b32-roster-hp-text.standby {
  color: rgba(160,140,200,.55);
}

/* ============================================================
   Roster Info Panel Position Fix
   キャラ情報ウィンドウをキャラパネル（#b32-roster-panel）より上に固定
   #b32-roster-panel は JS で bottom:124px に固定されており、
   カード高さ(~60px)+padding+name+status 行で実質上端は ~215px 付近。
   以下の指定で既存のすべての bottom 値を上書きする。
   ============================================================ */

#battle32-root .b32-roster-info-panel {
  bottom: calc(242px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 3000002 !important;
}

/* iPhone SE など縦が短い端末でも、キャラパネルに被せない */
@media (max-height: 700px) {
  #battle32-root .b32-roster-info-panel {
    bottom: calc(224px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* さらに低い画面では少しコンパクト化して位置は維持 */
@media (max-height: 640px) {
  #battle32-root .b32-roster-info-panel {
    bottom: calc(214px + env(safe-area-inset-bottom, 0px)) !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    padding: 5px !important;
    gap: 5px !important;
    min-height: 66px !important;
  }
  #battle32-root .b32-roster-info-card {
    height: 58px !important;
  }
  #battle32-root .b32-roster-info-role,
  #battle32-root .b32-roster-info-skill,
  #battle32-root .b32-roster-info-status {
    font-size: 8px !important;
  }
  #battle32-root .b32-roster-info-desc {
    display: none !important;
  }
}

/* ============================================================
   ローグライト下部キャラカード HP表示
   数値をバーの右上、バーを直下に配置
   ============================================================ */

#b32-roster-panel .b32-roster-hp-text {
  width: 100% !important;
  display: block !important;
  text-align: right !important;
  font-family: 'Cinzel', serif !important;
  font-size: 8px !important;
  line-height: 1.1 !important;
  letter-spacing: .4px !important;
  color: rgba(232,238,255,.88) !important;
  white-space: nowrap !important;
  margin: 0 0 1px 0 !important;
}

#b32-roster-panel .b32-roster-hp-bar-wrap {
  width: 100% !important;
  height: 4px !important;
  margin: 0 !important;
  border-radius: 1px !important;
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(80,200,255,.18) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#b32-roster-panel .b32-roster-hp-bar {
  height: 100% !important;
  border-radius: 1px !important;
  background: linear-gradient(
    90deg,
    rgba(40,190,255,.95),
    rgba(120,240,255,.92)
  ) !important;
  box-shadow: 0 0 6px rgba(60,210,255,.60) !important;
}

/* ============================================================
   ローグライト下部キャラパネル画像：下辺フェード
   ============================================================ */

#b32-roster-panel .b32-roster-img-wrap {
  position: relative !important;
  overflow: hidden !important;
}

#b32-roster-panel .b32-roster-img {
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 68%,
    rgba(0, 0, 0, .75) 80%,
    rgba(0, 0, 0, .28) 92%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 68%,
    rgba(0, 0, 0, .75) 80%,
    rgba(0, 0, 0, .28) 92%,
    transparent 100%
  ) !important;
}

/* ============================================================
   ローグライト下部キャラカード：ULTゲージ
   HPバーの下に小さい神気ドットを表示
   ============================================================ */

#b32-roster-panel .b32-roster-ult-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  height: 7px;
  margin-top: 2px;
  flex-shrink: 0;
  pointer-events: none;
}

#b32-roster-panel .b32-roster-ult-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid rgba(120, 210, 255, .45);
  background: rgba(40, 80, 120, .22);
  box-shadow: none;
}

#b32-roster-panel .b32-roster-ult-dot.filled {
  background: rgba(120, 220, 255, .95);
  border-color: rgba(180, 245, 255, .95);
  box-shadow:
    0 0 5px rgba(100, 220, 255, .85),
    0 0 10px rgba(80, 180, 255, .35);
}

/* 死亡カードではULTゲージも暗くする */
#b32-roster-panel .b32-roster-card.dead .b32-roster-ult-row {
  opacity: .35;
  filter: grayscale(1);
}

#b32-roster-panel .b32-roster-card {
  background:
    linear-gradient(180deg, rgba(22, 28, 52, .88), rgba(10, 14, 32, .94));
  border-color: rgba(110, 135, 255, .50);
  box-shadow:
    inset 0 0 12px rgba(90, 130, 255, .10),
    0 0 8px rgba(80, 120, 255, .10);
}

#b32-roster-panel .b32-roster-card.selected,
#b32-roster-panel .b32-roster-card.active {
  border-color: rgba(110, 225, 255, .95);
  box-shadow:
    inset 0 0 14px rgba(80, 220, 255, .18),
    0 0 14px rgba(80, 220, 255, .38);
}

#b32-roster-panel .b32-party-img,
#b32-roster-panel img {
  filter: brightness(1.16) contrast(1.08) saturate(1.08);
}

.b32-action-btn {
  background:
    linear-gradient(180deg, rgba(28, 36, 62, .95), rgba(12, 16, 34, .98));
  border-color: rgba(120, 145, 210, .42);
  color: rgba(238, 242, 255, .88);
  box-shadow:
    inset 0 0 10px rgba(100, 140, 255, .08),
    0 0 7px rgba(80, 120, 255, .08);
}

.b32-action-btn.disabled,
.b32-action-btn:disabled {
  opacity: .42;
}

/* ============================================================
   キャラ詳細情報パネル：キャラパネルに被らないよう少し上げる
   ============================================================ */

#battle32-root .b32-roster-info-panel {
  bottom: calc(250px + env(safe-area-inset-bottom, 0px)) !important;
}

/* iPhone SE / 縦が短い端末 */
@media (max-height: 700px) {
  #battle32-root .b32-roster-info-panel {
    bottom: calc(212px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* さらに低い画面では、上げすぎると盤面に被るので少し控えめ */
@media (max-height: 640px) {
  #battle32-root .b32-roster-info-panel {
    bottom: calc(198px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ============================================================
 ULTカットイン 最終上書き
 ============================================================ */

.b32-ult-cutin {
  position: fixed !important;
  inset: 0 !important;
  z-index: 4000000 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 55% 48%, rgba(255,230,170,.18), transparent 42%),
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(6,8,18,.42), rgba(0,0,0,.72)) !important;
  animation: b32UltCutinFade 1900ms ease-out forwards !important;
}

.b32-ult-cutin-img {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;

  width: 100vw !important;
  max-width: none !important;
  min-width: 100vw !important;
  height: auto !important;
  max-height: none !important;

  object-fit: cover !important;
  object-position: center center !important;

  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;

  filter:
    brightness(1.45)
    contrast(1.18)
    saturate(1.12)
    drop-shadow(0 0 18px rgba(255,230,170,.22)) !important;

  animation: b32UltCutinImgSlideNew 1900ms ease-out forwards !important;
}

.b32-ult-cutin-shade {
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.24) 24%,
      rgba(0,0,0,.08) 48%,
      rgba(0,0,0,.22) 72%,
      rgba(0,0,0,.82) 100%
    ),
    linear-gradient(90deg,
      rgba(0,0,0,.48) 0%,
      rgba(0,0,0,.08) 36%,
      rgba(0,0,0,.04) 72%,
      rgba(0,0,0,.38) 100%
    ) !important;
}

.b32-ult-cutin-label {
  position: absolute !important;
  left: 22px !important;
  top: 30% !important;
  bottom: auto !important;

  font-family: 'Cinzel', serif !important;
  font-size: 12px !important;
  letter-spacing: 7px !important;
  color: rgba(255,235,170,.98) !important;
  text-shadow:
    0 0 6px rgba(255,255,255,.9),
    0 0 18px rgba(255,220,120,.95),
    0 2px 4px rgba(0,0,0,1) !important;

  animation: b32UltTextIn 1900ms ease-out forwards !important;
}

.b32-ult-cutin-line {
  position: absolute !important;
  left: 0 !important;
  top: 32% !important;
  width: 100% !important;
  height: 1px !important;
  transform: none !important;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,245,210,.95),
    transparent
  ) !important;

  box-shadow:
    0 0 12px rgba(255,230,170,.8),
    0 0 28px rgba(255,160,70,.4) !important;

  animation: b32UltLineNew 1900ms ease-out forwards !important;
}

.b32-ult-cutin-name {
  position: absolute !important;
  left: 22px !important;
  bottom: 28% !important;
  top: auto !important;

  max-width: 88vw !important;

  font-family: 'Noto Serif JP', serif !important;
  font-size: clamp(26px, 8vw, 46px) !important;
  font-weight: 800 !important;
  letter-spacing: 6px !important;
  line-height: 1.05 !important;
  color: #fff4c8 !important;
  text-align: left !important;

  text-shadow:
    0 0 10px rgba(255,255,255,.98),
    0 0 32px rgba(255,200,80,.95),
    0 0 72px rgba(255,130,40,.60),
    0 3px 8px rgba(0,0,0,1) !important;

  animation: b32UltTextIn 1900ms ease-out forwards !important;
}

@keyframes b32UltCutinImgSlideNew {
  0% {
    opacity: 0;
    transform: translate(-70%, -50%);
    filter: brightness(1.30) contrast(1.12) saturate(1.08);
  }
  14% {
    opacity: 1;
    transform: translate(-50%, -50%);
    filter: brightness(1.45) contrast(1.18) saturate(1.12);
  }
  76% {
    opacity: 1;
    transform: translate(-50%, -50%);
    filter: brightness(1.45) contrast(1.18) saturate(1.12);
  }
  100% {
    opacity: 0;
    transform: translate(-68%, -50%);
    filter: brightness(1.22) contrast(1.10) saturate(1.06);
  }
}

@keyframes b32UltLineNew {
  0% {
    opacity: 0;
    transform: scaleX(.3);
  }
  20% {
    opacity: .95;
    transform: scaleX(1);
  }
  46% {
    opacity: .35;
  }
  100% {
    opacity: 0;
    transform: scaleX(1.1);
  }
}

/* ============================================================
/* iPhone SE系：盤面位置はJS計算に委ねる（translateY廃止）
 ============================================================ */

/* ============================================================
 Enemy Unit Reset: 敵ユニット表示位置・サイズを標準化
 ============================================================ */

#battle32-root .b32-unit.enemy {
  bottom: calc(var(--cell-size) * 0.5)!important;
  width: calc(var(--cell-size) * 1.18) !important;
  height: calc(var(--cell-size) * 1.68) !important;
  transform: translateX(-50%) rotateX(-38deg) !important;
  transform-origin: bottom center !important;
  z-index: 2 !important;
}

#battle32-root .b32-unit.enemy .b32-unit-icon {
  width: 100% !important;
  height: calc(var(--cell-size) * 1.45) !important;
  object-fit: contain !important;
  object-position: bottom center !important;
  /* scale は --unit-scale 変数で制御（uiScale.battleBack から注入）*/
  transform: translateY(var(--unit-offset-y, 0px)) scale(var(--unit-scale, 1)) !important;
  transform-origin: bottom center !important;
}

/* ボス → JS側インラインスタイルで制御（CSS競合を避けるため最小限に） */
#battle32-root .b32-unit.enemy.boss {
  overflow: visible !important;
  z-index: 1 !important;
}

/* 中ボス・雑魚も一旦、標準敵と同じ基準で表示する */
#battle32-root .b32-unit.enemy.midboss,
#battle32-root .b32-unit.enemy.enemy-id-enemy_02b,
#battle32-root .b32-unit.enemy.enemy-id-enemy_02a {
  width: calc(var(--cell-size) * 1.18) !important;
  height: calc(var(--cell-size) * 1.68) !important;
  z-index: 2 !important;
}

#battle32-root .b32-unit.enemy.midboss .b32-unit-icon,
#battle32-root .b32-unit.enemy.enemy-id-enemy_02b .b32-unit-icon,
#battle32-root .b32-unit.enemy.enemy-id-enemy_02a .b32-unit-icon {
  height: calc(var(--cell-size) * 1.45) !important;
  /* 中ボス・雑魚も --unit-scale 変数に従う */
  transform: translateY(var(--unit-offset-y, 0px)) scale(var(--unit-scale, 1)) !important;
  transform-origin: bottom center !important;
}

/* Boss Scale: サイズはJS（renderBoard内）のインラインスタイルで注入済み */

/* ============================================================
 レイアウト確定修正
 ─────────────────────────────────────────────────────────────
 狙い配置:
   グリッド（#b32-scroll 内、上寄せ）
   キャラパネル（#b32-roster-panel、fixed）
   ボトムメニュー（#b32-actions、fixed 最下部）

 #b32-actions を position:fixed にすることで通常フローから外し
 常に画面最下部に固定する。
 #b32-scroll には padding-bottom で actions の高さ分を確保し
 グリッドがボタンに隠れないようにする。
 #b32-roster-panel の bottom は fitBattle32Layout() で
 actions の実高さの上に動的積み上げする。
 ============================================================ */

/* ── ボトムアクションバー：画面最下部固定 ── */
#battle32-root #b32-actions {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2000 !important;
  margin-top: 0 !important;
  /* 幅制限がある場合は中央寄せ */
  max-width: none !important;
}

/* #b32-bottom-area：actions が fixed になりフローから外れるため
   残りのコンテンツ（party-status 等）だけが残る。
   margin-top:auto 禁止。 */
#battle32-root #b32-bottom-area {
  margin-top: 0 !important;
}

/* #b32-scroll：画面下部の fixed 要素（actions）に隠れないよう
   padding-bottom を確保する。実際の高さは fitBattle32Layout() が
   CSS変数 --b32-actions-h で注入する。初期値として 90px を設定。 */
#battle32-root #b32-scroll {
  padding-bottom: var(--b32-actions-h, 90px) !important;
}



/* ============================================================
   キャラパネル：レアリティ非表示 → 属性アイコン表示
   ============================================================ */
#battle32-root .b32-party-rarity {
  display: none !important;
}

#battle32-root .b32-party-img-wrap {
  position: relative;
}

#battle32-root .b32-party-element-icon {
  position: absolute;
  top: 3px;
  left: 4px;
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 50%;
  z-index: 8;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.85));
  pointer-events: none;
}

/* ============================================================
   PATCH: 盤面ユニット足元UIの属性アイコン暴走防止
   HTML順が HPバー → 属性アイコン のため、row-reverseで
   表示は「属性アイコン → HPバー」にする。
   ============================================================ */
#battle32-root .b32-unit-foot-ui {
  position: absolute !important;
  bottom: 0px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  width: calc(var(--cell-size) * 1.02) !important;
  height: 10px !important;
  z-index: 9 !important;
  pointer-events: none !important;
}

#battle32-root .b32-unit-foot-ui .b32-hp-bar-wrap {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: calc(var(--cell-size) * 0.68) !important;
  height: 3px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#battle32-root .b32-unit.ally .b32-unit-foot-ui .b32-hp-bar-wrap {
  height: 2px !important;
}

#battle32-root .b32-foot-element-icon {
  width: 10px !important;
  height: 10px !important;
  max-width: 10px !important;
  max-height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  flex: 0 0 10px !important;
  display: block !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.85));
  pointer-events: none !important;
}

/* ボスは足元HPバー非表示だが、属性アイコンだけ巨大化しないよう明示 */
#battle32-root .b32-unit.boss .b32-unit-foot-ui {
  display: none !important;
}

/* キャラパネル左上：レアリティを消して属性アイコンのみ表示 */
#battle32-root .b32-party-rarity {
  display: none !important;
}

#battle32-root .b32-party-img-wrap {
  position: relative !important;
}

#battle32-root .b32-party-element-icon {
  position: absolute !important;
  top: 3px !important;
  left: 4px !important;
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  z-index: 8 !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.85));
  pointer-events: none !important;
}


/* ============================================================
   PATCH: ローグライト下部5枚 左上表示をレアリティ → 属性アイコンへ
   ============================================================ */
#b32-roster-panel .b32-roster-rarity {
  display: none !important;
}

#b32-roster-panel .b32-roster-img-wrap {
  position: relative !important;
}

#b32-roster-panel .b32-roster-element-icon {
  position: absolute !important;
  top: -1px !important;
  left: -1px !important;
  width: 17px !important;
  height: 17px !important;
  max-width: 17px !important;
  max-height: 17px !important;
  object-fit: contain !important;
  border-radius: 50% !important;
  z-index: 8 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.85));
}

/* ローグライト下部キャラパネル：カード間を詰める */
#b32-roster-panel {
  gap: -2px !important;
  column-gap: -2px !important;
  padding-left: 3px !important;
  padding-right: 3px !important;
}

/* ローグライト下部キャラパネル：カード間を本当に詰める */
#b32-roster-panel {
  width: auto !important;
  max-width: calc(100vw - 8px) !important;
  justify-content: center !important;
  gap: 3px !important;
  column-gap: 3px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ローグライト下部キャラカード：4枚時の横幅調整 */
#b32-roster-panel {
  width: auto !important;
  max-width: calc(100vw - 16px) !important;
  justify-content: center !important;
  gap: 4px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#b32-roster-panel .b32-roster-card {
  width: 84px !important;
  min-width: 84px !important;
  box-sizing: border-box !important;
  padding-left: 3px !important;
  padding-right: 3px !important;
}

#b32-roster-panel .b32-roster-img-wrap {
  width: 100% !important;
  height: 60px !important;
}

/* ローグライト下部キャラパネル：画面幅に合わせて4枚を広げる */
#b32-roster-panel {
  left: 50% !important;
  transform: translateX(-50%) !important;

  width: calc(100vw - 24px) !important;
  max-width: 420px !important;

  display: flex !important;
  justify-content: center !important;
  gap: 5px !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* JSインラインstyleを上書き：固定幅ではなく均等伸長 */
#b32-roster-panel > div[onclick^="_b32OnRosterTap"] {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  box-sizing: border-box !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}

/* カードは横に広げるが、キャラ画像枠は高さキープ・正方形寄り */
#b32-roster-panel .b32-roster-img-wrap {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px !important;
  min-width: 64px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  flex: 0 0 64px !important;
}

#b32-roster-panel .b32-roster-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
}
/* ============================================================
   キャラ詳細：スキル詳細 / ULT詳細を全文表示
   ============================================================ */
#battle32-root .b32-roster-info-panel {
  grid-template-columns: 72px minmax(0, 1fr) !important;
  align-items: stretch !important;
  max-height: min(44vh, 260px) !important;
  overflow: visible !important;
}

#battle32-root .b32-roster-info-card {
  height: auto !important;
  min-height: 108px !important;
}

#battle32-root .b32-roster-info-main {
  gap: 5px !important;
  min-height: 0 !important;
}

#battle32-root .b32-roster-info-role {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.35 !important;
}

#battle32-root .b32-roster-skill-detail-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
  overflow: visible;
}

#battle32-root .b32-roster-skill-detail {
  padding: 5px 6px;
  border: 1px solid rgba(120, 170, 255, .18);
  background: rgba(255, 255, 255, .035);
  border-radius: 4px;
}

#battle32-root .b32-roster-skill-detail.is-ult {
  border-color: rgba(210, 160, 255, .30);
  background: rgba(120, 70, 180, .08);
}

#battle32-root .b32-roster-skill-detail-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

#battle32-root .b32-roster-skill-badge {
  flex: 0 0 auto;
  min-width: 34px;
  padding: 1px 4px;
  border: 1px solid rgba(130, 205, 255, .35);
  color: rgba(150, 215, 255, .92);
  font-family: 'Cinzel', serif;
  font-size: 8px;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 1px;
}

#battle32-root .b32-roster-skill-detail.is-ult .b32-roster-skill-badge {
  border-color: rgba(220, 180, 255, .45);
  color: rgba(230, 205, 255, .96);
}

#battle32-root .b32-roster-skill-detail-head strong {
  min-width: 0;
  color: rgba(245, 247, 255, .96);
  font-size: 10px;
  line-height: 1.3;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

#battle32-root .b32-roster-skill-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 5px;
  margin-bottom: 3px;
}

#battle32-root .b32-roster-skill-detail-meta span {
  padding: 1px 4px;
  border-radius: 2px;
  background: rgba(80, 130, 210, .12);
  color: rgba(185, 210, 245, .72);
  font-size: 8px;
  line-height: 1.35;
  white-space: nowrap;
}

#battle32-root .b32-roster-skill-detail-desc,
#battle32-root .b32-roster-skill-empty {
  color: rgba(225, 230, 245, .82);
  font-size: 9px;
  line-height: 1.45;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
}

/* 旧1行スキル表示が残っても全文折り返し */
#battle32-root .b32-roster-info-skill {
  grid-template-columns: auto minmax(0, auto) minmax(0, 1fr) !important;
  align-items: start !important;
}
#battle32-root .b32-roster-info-skill em {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.4 !important;
}

@media (max-height: 700px) {
  #battle32-root .b32-roster-info-panel {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    max-height: min(42vh, 230px) !important;
  }
  #battle32-root .b32-roster-info-card {
    min-height: 84px !important;
  }
  #battle32-root .b32-roster-skill-detail {
    padding: 4px 5px !important;
  }
  #battle32-root .b32-roster-skill-detail-meta span {
    font-size: 7px !important;
  }
  #battle32-root .b32-roster-skill-detail-desc {
    font-size: 8px !important;
    line-height: 1.35 !important;
  }
}

@media (max-height: 640px) {
  #battle32-root .b32-roster-info-panel {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    max-height: min(40vh, 205px) !important;
  }
  #battle32-root .b32-roster-info-card {
    min-height: 68px !important;
  }
  #battle32-root .b32-roster-skill-detail-head {
    margin-bottom: 2px !important;
  }
  #battle32-root .b32-roster-skill-detail-meta {
    display: none !important;
  }
}


/* ============================================================
   Skill Detail Foreground Layer Fix
   ─────────────────────────────────────────────────────────────
   ローグライト時の #b32-roster-panel は body 直下 fixed かつ
   z-index:3000000 のため、#battle32-root 配下のスキル詳細は
   キャラパネルの背面に回る。
   JS側で #b32-skill-detail-box を body 直下へ移動し、ここで
   キャラパネルより前面の固定レイヤーとして表示する。
   ============================================================ */
#b32-skill-detail-box {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(var(--b32-actions-h, 64px) + 8px) !important;
  transform: translateX(-50%) translateY(8px) !important;
  width: min(calc(100vw - 28px), 420px) !important;
  max-height: min(42vh, 260px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  padding: 10px 12px 10px !important;
  border: 1px solid rgba(150, 115, 255, .62) !important;
  background:
    linear-gradient(180deg, rgba(18, 18, 34, .96), rgba(8, 10, 22, .97)) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 22px rgba(120, 80, 255, .34),
    0 14px 32px rgba(0, 0, 0, .72) !important;
  z-index: 3000010 !important;
  pointer-events: auto !important;
  opacity: 0 !important;
  transition: opacity .14s ease, transform .14s ease !important;
}

#b32-skill-detail-box.show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

#b32-skill-detail-name {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  color: rgba(238, 232, 255, .96) !important;
  margin-bottom: 6px !important;
}

#b32-skill-detail-desc {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 11px !important;
  line-height: 1.72 !important;
  letter-spacing: .5px !important;
  color: rgba(232, 228, 220, .82) !important;
  white-space: pre-wrap !important;
}

#b32-skill-detail-meta {
  margin-top: 7px !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
  color: rgba(170, 205, 255, .72) !important;
}

#b32-skill-detail-actions {
  position: sticky !important;
  bottom: -10px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin: 10px -2px 0 !important;
  padding: 8px 2px 0 !important;
  background: linear-gradient(180deg, rgba(8,10,22,0), rgba(8,10,22,.98) 35%) !important;
  z-index: 1 !important;
}

#b32-skill-confirm-btn {
  min-width: 92px !important;
  min-height: 34px !important;
  border-radius: 3px !important;
  border: 1px solid rgba(190, 160, 255, .72) !important;
  background: rgba(80, 45, 160, .78) !important;
  color: rgba(255, 248, 230, .96) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  box-shadow: 0 0 12px rgba(120, 80, 255, .36) !important;
  -webkit-tap-highlight-color: transparent !important;
}

#b32-skill-confirm-btn:active {
  filter: brightness(1.16) !important;
  transform: translateY(1px) !important;
}

@media (max-width: 430px) and (max-height: 740px) {
  #b32-skill-detail-box {
    bottom: calc(var(--b32-actions-h, 58px) + 6px) !important;
    width: calc(100vw - 22px) !important;
    max-height: 39vh !important;
    padding: 8px 10px 9px !important;
  }

  #b32-skill-detail-name {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  #b32-skill-detail-desc {
    font-size: 10px !important;
    line-height: 1.62 !important;
  }

  #b32-skill-detail-meta {
    font-size: 9px !important;
  }

  #b32-skill-confirm-btn {
    min-height: 32px !important;
    min-width: 84px !important;
    font-size: 11px !important;
  }
}

/* ============================================================
   スキル詳細ポータル — body 直下固定レイヤー
   #b32-roster-panel（fixed + 高z-index）より確実に前面に出す
   ============================================================ */
#b32-action-detail-portal {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
  width: min(calc(100vw - 24px), 430px) !important;
  max-height: min(42vh, 260px) !important;
  z-index: 3500000 !important;
  pointer-events: auto !important;
  display: none;
  box-sizing: border-box !important;
}

#b32-action-detail-portal.show {
  display: block !important;
}

#b32-action-detail-portal .b32-action-detail-panel {
  position: relative !important;
  width: 100% !important;
  max-height: min(42vh, 260px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;
  padding: 10px 12px !important;
  background: rgba(8, 10, 22, .97) !important;
  border: 1px solid rgba(150, 115, 255, .65) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 22px rgba(120, 80, 255, .34),
    0 14px 32px rgba(0, 0, 0, .72) !important;
  z-index: 3500001 !important;
}

#b32-action-detail-portal .b32-action-detail-desc {
  max-height: 96px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

#b32-action-detail-portal .b32-action-detail-buttons {
  position: sticky !important;
  bottom: 0 !important;
  display: flex !important;
  gap: 8px !important;
  padding-top: 8px !important;
  background: linear-gradient(
    180deg,
    rgba(8, 10, 22, 0),
    rgba(8, 10, 22, .98) 35%
  ) !important;
}

/* iPhone SE向け調整 */
@media (max-width: 430px) and (max-height: 740px) {
  #b32-action-detail-portal {
    bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: min(38vh, 220px) !important;
  }

  #b32-action-detail-portal .b32-action-detail-panel {
    max-height: min(38vh, 220px) !important;
    padding: 8px 10px !important;
  }

  #b32-action-detail-portal .b32-action-detail-desc {
    max-height: 76px !important;
  }
}

/* ============================================================
   FIX: スキル詳細ポータル用デザイン復元
   .b32-action-detail-panel を body 直下へ移したため、
   #battle32-root 配下前提だった既存CSSをポータル側にも適用する。
   ============================================================ */
#b32-action-detail-portal {
  position: fixed !important;
  left: 50% !important;
  bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
  width: min(calc(100vw - 24px), 430px) !important;
  max-height: min(40vh, 240px) !important;
  z-index: 3500000 !important;
  display: none;
  pointer-events: auto !important;
  box-sizing: border-box !important;
}

#b32-action-detail-portal.show {
  display: block !important;
}

#b32-action-detail-portal .b32-action-detail-panel {
  width: 100% !important;
  max-height: min(40vh, 240px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box !important;

  padding: 12px 14px 10px !important;
  background:
    linear-gradient(180deg, rgba(16, 18, 36, .98), rgba(5, 7, 18, .98)) !important;
  border: 1px solid rgba(160, 110, 255, .72) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 18px rgba(150, 80, 255, .38),
    0 16px 36px rgba(0, 0, 0, .78) !important;

  color: rgba(232, 228, 220, .92) !important;
  font-family: 'Noto Serif JP', serif !important;
  text-shadow: none !important;
}

#b32-action-detail-portal .b32-action-detail-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  color: rgba(232, 228, 220, .96) !important;
  margin-bottom: 7px !important;
  text-shadow: 0 0 8px rgba(160, 110, 255, .36) !important;
}

#b32-action-detail-portal .b32-action-detail-desc {
  max-height: 88px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;

  font-size: 11px !important;
  line-height: 1.65 !important;
  letter-spacing: .5px !important;
  color: rgba(232, 228, 220, .84) !important;
  margin-bottom: 7px !important;
  white-space: normal !important;
}

#b32-action-detail-portal .b32-action-detail-meta {
  font-size: 10px !important;
  line-height: 1.5 !important;
  letter-spacing: .5px !important;
  color: rgba(180, 205, 255, .72) !important;
  margin-bottom: 8px !important;
  white-space: normal !important;
}

#b32-action-detail-portal .b32-action-detail-buttons {
  position: sticky !important;
  bottom: 0 !important;

  display: flex !important;
  gap: 8px !important;
  padding-top: 8px !important;

  background: linear-gradient(
    180deg,
    rgba(8, 10, 22, 0),
    rgba(8, 10, 22, .98) 35%
  ) !important;
}

#b32-action-detail-portal .b32-action-detail-btn {
  appearance: none !important;
  -webkit-appearance: none !important;

  flex: 1 !important;
  height: 30px !important;

  border-radius: 0 !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.05) !important;

  color: rgba(232, 228, 220, .86) !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;

  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: none !important;
}

#b32-action-detail-portal .b32-action-detail-btn.confirm {
  border-color: rgba(120, 210, 255, .55) !important;
  background: rgba(40, 120, 220, .20) !important;
  color: rgba(220, 245, 255, .96) !important;
  box-shadow: 0 0 10px rgba(80, 180, 255, .20) !important;
}

#b32-action-detail-portal .b32-action-detail-btn.cancel {
  border-color: rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(232, 228, 220, .72) !important;
}

#b32-action-detail-portal .b32-action-detail-btn:active {
  transform: translateY(1px) !important;
  filter: brightness(1.15) !important;
}

/* iPhone SE系 */
@media (max-width: 430px) and (max-height: 740px) {
  #b32-action-detail-portal {
    bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: min(36vh, 215px) !important;
  }

  #b32-action-detail-portal .b32-action-detail-panel {
    max-height: min(36vh, 215px) !important;
    padding: 10px 12px 8px !important;
  }

  #b32-action-detail-portal .b32-action-detail-desc {
    max-height: 70px !important;
    font-size: 10.5px !important;
    line-height: 1.55 !important;
  }

  #b32-action-detail-portal .b32-action-detail-btn {
    height: 28px !important;
    font-size: 10px !important;
  }
}


/* ============================================================
 行動済みキャラの情報確認対応
 ============================================================ */
#battle32-root .b32-cell.ally-inspectable {
 cursor: pointer;
}

/* 行動不可でもスキル内容確認はできるボタン */
#battle32-root .b32-bottom-skill-btn.is-unusable {
 opacity: .55 !important;
 filter: grayscale(.25) !important;
 border-color: rgba(255,255,255,.12) !important;
 background: rgba(255,255,255,.035) !important;
 color: rgba(232,228,220,.62) !important;
}

#battle32-root .b32-bottom-skill-btn.is-unusable small {
 color: rgba(232,228,220,.42) !important;
}

#b32-action-detail-portal .b32-action-detail-btn.confirm.disabled,
#b32-action-detail-portal .b32-action-detail-btn.confirm:disabled {
 opacity: .48 !important;
 filter: grayscale(.35) !important;
 box-shadow: none !important;
 cursor: default !important;
}

/* ============================================================
  enemy inspectable while choosing move destination
  移動先選択中でも敵情報/移動ガイドを確認できるタップ領域
 ============================================================ */
.b32-cell.enemy-inspectable {
  cursor: pointer;
}
.b32-cell.enemy-inspectable::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(180, 120, 255, .28);
  pointer-events: none;
  box-shadow: 0 0 8px rgba(150, 80, 255, .16);
}

/* ============================================================
   Zeraphia Battle Field Theme — Alchemia White Space
   バトルフィールドのみ：白い未創世空間 / アルケミア調
   既存CSSの末尾に置いて上書きすること
   ============================================================ */

#battle32-root {
  background: #fbfbf8 !important;
  color: rgba(28, 30, 36, .92) !important;
}

#battle32-root::before {
  background:
    radial-gradient(circle at 50% 34%, rgba(255,255,255,.96) 0%, rgba(248,248,243,.92) 45%, rgba(238,240,236,.88) 100%) !important;
  opacity: 1 !important;
}

#battle32-root::after {
  background:
    radial-gradient(circle at 50% 36%, rgba(0,0,0,.035) 0 1px, transparent 2px),
    radial-gradient(circle at 50% 36%, transparent 0 22%, rgba(40,42,50,.055) 22.3%, transparent 23.2%),
    radial-gradient(circle at 50% 36%, transparent 0 36%, rgba(40,42,50,.040) 36.3%, transparent 37.2%),
    linear-gradient(180deg, rgba(255,255,255,.56), rgba(236,238,234,.42)) !important;
  pointer-events: none !important;
}

/* ── Header / Boss HP ── */
#battle32-root #b32-header,
#battle32-root #b32-boss-hp-ui {
  background: rgba(255,255,255,.82) !important;
  border-bottom: 1px solid rgba(35,38,48,.12) !important;
  box-shadow: 0 8px 22px rgba(40,44,52,.045) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

#battle32-root #b32-battle-title,
#battle32-root #b32-turn-num-large,
#battle32-root #b32-turn-max,
#battle32-root #b32-boss-hp-text,
#battle32-root #b32-bottom-label,
#battle32-root #b32-skill-chara-name {
  color: rgba(24,26,32,.92) !important;
  text-shadow: none !important;
}

#battle32-root #b32-battle-subtitle,
#battle32-root #b32-stage-id,
#battle32-root #b32-turn-label,
#battle32-root #b32-turn-slash,
#battle32-root #b32-boss-hp-resistance-label,
#battle32-root #b32-bottom-sub {
  color: rgba(70,74,86,.50) !important;
  text-shadow: none !important;
}

#battle32-root #b32-boss-hp-name {
  color: rgba(150,52,52,.90) !important;
  text-shadow: none !important;
}

#battle32-root #b32-boss-hp-ui::before {
  background: linear-gradient(90deg, transparent, rgba(150,52,52,.32), transparent) !important;
}

#battle32-root #b32-boss-hp-emblem::before {
  background: rgba(150,52,52,.82) !important;
  border-color: rgba(150,52,52,.34) !important;
  box-shadow: 0 0 8px rgba(150,52,52,.18) !important;
}

#battle32-root #b32-boss-hp-emblem::after {
  background: rgba(255,255,255,.92) !important;
}

#battle32-root #b32-boss-hp-bar-wrap {
  background: rgba(70,50,50,.12) !important;
  border-color: rgba(150,52,52,.18) !important;
}

#battle32-root #b32-boss-hp-bar {
  background: linear-gradient(90deg, rgba(130,44,44,.92), rgba(210,84,70,.88), rgba(235,132,110,.82)) !important;
}

/* ── Scroll / Board space ── */
#battle32-root #b32-scroll {
  background:
    radial-gradient(ellipse at 50% 24%, rgba(255,255,255,.72), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.20), rgba(235,236,232,.34)) !important;
}

#battle32-root #b32-board-wrap::before {
  content: '' !important;
  position: absolute !important;
  width: min(104vw, 440px) !important;
  height: min(104vw, 440px) !important;
  left: 50% !important;
  top: 46% !important;
  transform: translate(-50%, -50%) rotateX(38deg) !important;
  border-radius: 50% !important;
  border: 1px solid rgba(35,38,48,.075) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.70),
    0 0 42px rgba(40,44,52,.045) !important;
  pointer-events: none !important;
}

#battle32-root #b32-board {
  filter: drop-shadow(0 18px 28px rgba(42,45,52,.12)) !important;
}

/* ── Cells: white glass board ── */
#battle32-root .b32-cell {
  background: rgba(255,255,255,.54) !important;
  border-color: rgba(42,45,55,.15) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.82),
    0 2px 8px rgba(30,34,42,.045) !important;
}

#battle32-root .b32-cell::before {
  border-color: rgba(42,45,55,.11) !important;
  opacity: .72 !important;
}

#battle32-root .b32-cell.ally-zone {
  background: rgba(236,248,255,.70) !important;
  border-color: rgba(60,145,210,.25) !important;
  box-shadow:
    inset 0 0 12px rgba(95,180,230,.12),
    0 2px 8px rgba(40,120,180,.055) !important;
}

#battle32-root .b32-cell.ally-zone::before {
  border-color: rgba(60,145,210,.19) !important;
}

#battle32-root .b32-cell.enemy-zone {
  background: rgba(248,240,255,.68) !important;
  border-color: rgba(142,92,180,.23) !important;
  box-shadow:
    inset 0 0 12px rgba(160,105,200,.10),
    0 2px 8px rgba(110,70,160,.045) !important;
}

#battle32-root .b32-cell.enemy-zone::before {
  border-color: rgba(142,92,180,.17) !important;
}

#battle32-root .b32-cell.row-divider {
  border-top-color: rgba(40,42,52,.25) !important;
}

#battle32-root .b32-zone-label {
  color: rgba(42,45,55,.24) !important;
}

/* ── Highlights on white background ── */
#battle32-root .b32-cell.movable {
  background: rgba(225,248,255,.92) !important;
  border-color: rgba(36,150,205,.72) !important;
  box-shadow:
    inset 0 0 14px rgba(50,175,220,.18),
    0 0 13px rgba(30,155,205,.24) !important;
}

#battle32-root .b32-cell.movable::after,
#battle32-root .b32-cell.skill-selected::after {
  border-color: rgba(30,150,205,.88) !important;
  box-shadow:
    0 0 10px rgba(30,150,205,.32),
    inset 0 0 6px rgba(40,160,210,.16) !important;
}

#battle32-root .b32-cell.selected-unit,
#battle32-root .b32-cell.skill-selected {
  border-color: rgba(30,150,205,.95) !important;
  box-shadow:
    inset 0 0 0 2px rgba(30,150,205,.62),
    inset 0 0 16px rgba(30,150,205,.12),
    0 0 16px rgba(30,150,205,.26) !important;
}

#battle32-root .b32-cell.skill-selectable,
#battle32-root .b32-cell.selectable-ally {
  box-shadow: inset 0 0 0 2px rgba(176,132,34,.46) !important;
}

#battle32-root .b32-cell.skill-range {
  background: rgba(245,234,255,.88) !important;
  border-color: rgba(145,88,190,.55) !important;
  box-shadow:
    inset 0 0 13px rgba(145,88,190,.14),
    0 0 12px rgba(145,88,190,.18) !important;
}

#battle32-root .b32-cell.skill-target-enemy,
#battle32-root .b32-cell.move-capture {
  background: rgba(255,235,232,.90) !important;
  border-color: rgba(200,78,68,.62) !important;
  box-shadow:
    inset 0 0 12px rgba(210,70,60,.14),
    0 0 13px rgba(200,70,60,.20) !important;
}

#battle32-root .b32-cell.skill-target-ally {
  background: rgba(228,250,245,.90) !important;
  border-color: rgba(34,150,120,.58) !important;
  box-shadow:
    inset 0 0 12px rgba(30,160,125,.13),
    0 0 12px rgba(30,160,125,.18) !important;
}

#battle32-root .b32-cell.boss-danger-normal,
#battle32-root .b32-cell.boss-danger-warn,
#battle32-root .b32-cell.boss-danger-line {
  background: rgba(255,236,232,.90) !important;
  border-color: rgba(210,60,55,.55) !important;
  box-shadow:
    inset 0 0 14px rgba(220,60,55,.14),
    0 0 14px rgba(220,50,50,.18) !important;
}

/* ── Units readability on white board ── */
#battle32-root .b32-unit-icon,
#battle32-root .b32-core-img,
#battle32-root .b32-party-img,
#b32-roster-panel .b32-party-img,
#b32-roster-panel img {
  filter: drop-shadow(0 8px 10px rgba(30,34,42,.20)) brightness(1.03) contrast(1.04) saturate(1.04) !important;
}

#battle32-root .b32-hp-bar-wrap,
#battle32-root .b32-unit.ally .b32-hp-bar-wrap {
  background: rgba(35,38,48,.20) !important;
}

#battle32-root .b32-unit.ally .b32-hp-bar,
#battle32-root .b32-hp-bar,
#battle32-root .b32-party-hp-bar,
#b32-roster-panel .b32-roster-hp-bar {
  background: linear-gradient(90deg, rgba(45,150,205,.92), rgba(96,210,225,.88)) !important;
  box-shadow: 0 0 6px rgba(45,160,210,.30) !important;
}

/* ── Bottom panels / party cards ── */
#battle32-root #b32-bottom-area,
#battle32-root #b32-skill-panel,
#battle32-root .b32-action-skill-panel,
#battle32-root .b32-roster-info-panel,
#b32-roster-panel,
#b32-link-bar,
#b32-item-panel,
#b32-action-detail-portal .b32-action-detail-panel {
  color: rgba(28,30,36,.92) !important;
  text-shadow: none !important;
}

#battle32-root .b32-party-card,
#b32-roster-panel .b32-roster-card,
#battle32-root .b32-action-char-card,
#battle32-root .b32-action-detail-panel,
#b32-action-detail-portal .b32-action-detail-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(244,245,241,.92)) !important;
  border-color: rgba(42,45,55,.16) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.78),
    0 8px 22px rgba(30,34,42,.09) !important;
}

#battle32-root .b32-party-card::before,
#b32-roster-panel .b32-roster-card::before {
  background: linear-gradient(90deg, transparent, rgba(42,45,55,.22), transparent) !important;
}

#battle32-root .b32-party-card.selected,
#battle32-root .b32-party-card.active,
#b32-roster-panel .b32-roster-card.selected,
#b32-roster-panel .b32-roster-card.active {
  background: linear-gradient(180deg, rgba(250,254,255,.94), rgba(236,248,255,.94)) !important;
  border-color: rgba(35,155,205,.72) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.92),
    0 0 16px rgba(35,155,205,.26) !important;
}

#battle32-root .b32-party-hp-num,
#battle32-root .b32-party-name,
#battle32-root .b32-action-detail-title,
#b32-action-detail-portal .b32-action-detail-title,
#battle32-root .b32-action-detail-desc,
#b32-action-detail-portal .b32-action-detail-desc,
#battle32-root .b32-action-detail-meta,
#b32-action-detail-portal .b32-action-detail-meta,
#battle32-root .b32-roster-info-title,
#battle32-root .b32-roster-info-desc,
#battle32-root .b32-roster-info-role,
#battle32-root .b32-roster-info-skill,
#battle32-root .b32-roster-info-status {
  color: rgba(28,30,36,.86) !important;
  text-shadow: none !important;
}

#battle32-root .b32-party-hp-max,
#battle32-root .b32-roster-hp-text,
#b32-roster-panel .b32-roster-hp-text {
  color: rgba(70,74,86,.55) !important;
}

#battle32-root .b32-party-hp-bar-wrap,
#b32-roster-panel .b32-roster-hp-bar-wrap {
  background: rgba(42,45,55,.16) !important;
  border-color: rgba(42,45,55,.12) !important;
}

/* ── Fixed action buttons / bottom buttons ── */
#battle32-root .b32-action-circle-btn,
#battle32-root .b32-bottom-skill-btn,
#battle32-root .b32-action-detail-btn,
#b32-action-detail-portal .b32-action-detail-btn,
#battle32-root .b32-btn,
.b32-action-btn {
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(42,45,55,.18) !important;
  color: rgba(28,30,36,.82) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.72),
    0 6px 16px rgba(30,34,42,.08) !important;
  text-shadow: none !important;
}

#battle32-root .b32-action-circle-btn.move:not(.disabled),
#battle32-root .b32-action-circle-btn.skill:not(.disabled),
#battle32-root .b32-action-circle-btn.ult.is-ready,
#battle32-root .b32-bottom-skill-btn:not(.disabled),
#battle32-root .b32-action-detail-btn.confirm,
#b32-action-detail-portal .b32-action-detail-btn.confirm {
  background: rgba(232,249,255,.92) !important;
  border-color: rgba(35,155,205,.48) !important;
  color: rgba(20,95,130,.94) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.76),
    0 0 14px rgba(35,155,205,.18) !important;
}

#battle32-root .b32-action-circle-btn.end,
#battle32-root .b32-btn.danger {
  background: rgba(255,238,236,.88) !important;
  border-color: rgba(190,80,72,.34) !important;
  color: rgba(130,46,42,.88) !important;
}

#battle32-root .b32-action-circle-btn.disabled,
#battle32-root .b32-bottom-skill-btn.disabled,
#battle32-root .b32-btn:disabled {
  opacity: .42 !important;
  filter: grayscale(.28) !important;
}

#battle32-root #b32-bottom-guide,
#battle32-root #b32-skill-list,
#battle32-root .b32-skill-row {
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(42,45,55,.12) !important;
  color: rgba(28,30,36,.78) !important;
  text-shadow: none !important;
}

#battle32-root .b32-skill-name,
#battle32-root .b32-skill-desc {
  color: rgba(28,30,36,.80) !important;
}

#b32-action-detail-portal .b32-action-detail-buttons {
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(246,247,244,.96) 35%) !important;
}

/* ── Result overlay keeps dramatic but white-space compatible ── */
#battle32-root #b32-result-overlay {
  background: rgba(255,255,255,.76) !important;
}

#battle32-root #b32-result-text.win {
  color: rgba(20,110,150,.95) !important;
  text-shadow: 0 0 24px rgba(50,170,220,.28) !important;
}

#battle32-root #b32-result-text.lose {
  color: rgba(150,52,52,.95) !important;
  text-shadow: 0 0 22px rgba(170,60,60,.22) !important;
}


/* ============================================================
   PATCH: 盤面ユニット寝かせ修正 / billboard reset
   - 盤面は傾ける
   - キャラ・敵・コアだけ盤面の逆回転で正面に起こす
   - 3D flatten を避けるため親階層にも preserve-3d を明示
   ============================================================ */

#battle32-root #b32-board-wrap {
  perspective: 700px !important;
  transform-style: preserve-3d !important;
  overflow: visible !important;
  filter: none !important;
}

#battle32-root #b32-board {
  transform: rotateX(38deg) translateZ(0) !important;
  transform-origin: center center !important;
  transform-style: preserve-3d !important;
  overflow: visible !important;
  filter: none !important;
}

#battle32-root .b32-cell {
  transform-style: preserve-3d !important;
  overflow: visible !important;
  filter: none !important;
}

/* キャラ・敵は盤面の傾きを相殺して、画面に対して立たせる */
#battle32-root .b32-unit,
#battle32-root .b32-unit.ally,
#battle32-root .b32-unit.enemy {
  transform:
    translateX(-50%)
    rotateX(-38deg)
    translateZ(calc(var(--cell-size) * 0.08)) !important;
  transform-origin: center bottom !important;
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  will-change: transform !important;
}

/* 画像側には追加の寝かせを入れない。拡縮・上下補正だけに限定 */
#battle32-root .b32-unit-icon {
  transform:
    translateY(var(--unit-offset-y, 0px))
    scale(var(--unit-scale, 1))
    translateZ(1px) !important;
  transform-origin: center bottom !important;
  backface-visibility: hidden !important;
  will-change: transform !important;
}

/* 足元UIはキャラ本体と同じ立ち方向を継承。ここで回転を追加しない */
#battle32-root .b32-unit-foot-ui {
  transform: translateX(-50%) translateZ(2px) !important;
  transform-origin: center bottom !important;
  backface-visibility: hidden !important;
}

/* コアも盤面に寝かせず、正面向きに維持 */
#battle32-root .b32-core-object {
  transform:
    translate(-50%, -50%)
    rotateX(-38deg)
    translateZ(calc(var(--cell-size) * 0.06)) !important;
  transform-origin: center center !important;
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
}

/* ============================================================
   COLOR ONLY PATCH v5 - White Mythic Battle UI
   レイアウト固定。色・背景・枠線・影・文字色のみ上書き。
   ============================================================ */

/* ── 画面全体：白背景ベース ── */
#battle32-root {
  background: #f7f7f3 !important;
  color: rgba(43, 52, 74, .94) !important;
}

#battle32-root::before {
  opacity: .16 !important;
  filter: grayscale(.1) brightness(1.22) contrast(.92) !important;
}

#battle32-root::after {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(126, 118, 170, .10) 0%, transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(250,250,246,.64) 48%, rgba(246,247,244,.88)) !important;
}

/* ── 上部ヘッダー：モック寄せの白・紺文字 ── */
#battle32-root #b32-header {
  background: rgba(255, 255, 255, .90) !important;
  border-bottom-color: rgba(57, 66, 92, .10) !important;
  box-shadow: 0 8px 22px rgba(45, 50, 65, .055) !important;
}

#battle32-root #b32-battle-title,
#battle32-root #b32-turn-num-large {
  color: rgba(45, 54, 78, .96) !important;
  text-shadow: none !important;
}

#battle32-root #b32-battle-subtitle,
#battle32-root #b32-phase-badge,
#battle32-root #b32-turn-label,
#battle32-root #b32-turn-slash,
#battle32-root #b32-turn-max,
#battle32-root #b32-stage-id {
  color: rgba(82, 90, 112, .52) !important;
  text-shadow: none !important;
}

/* ── ローグライト進捗：白に飲まれない濃度へ ── */
#battle32-root #rl-hud,
#rl-hud {
  color: rgba(85, 92, 120, .82) !important;
  text-shadow: none !important;
}

#battle32-root #rl-hud *,
#rl-hud * {
  color: rgba(92, 96, 128, .78) !important;
  text-shadow: none !important;
  border-color: rgba(120, 118, 160, .18) !important;
}

#battle32-root #rl-hud .active,
#battle32-root #rl-hud [class*="active"],
#rl-hud .active,
#rl-hud [class*="active"] {
  color: rgba(150, 92, 240, .92) !important;
  background-color: rgba(150, 92, 240, .72) !important;
  border-color: rgba(150, 92, 240, .55) !important;
  box-shadow: 0 0 8px rgba(150, 92, 240, .22) !important;
}

/* ── 右側 LINK ゲージ：白いピル + 紫ゲージ ── */
#b32-link-bar {
  background: rgba(255, 255, 255, .78) !important;
  border-color: rgba(110, 96, 150, .12) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.78),
    0 8px 20px rgba(45, 50, 70, .10) !important;
}

#b32-link-bar > div:first-child {
  color: rgba(78, 84, 112, .58) !important;
  text-shadow: none !important;
}

/* filled LINK diamond */
#b32-link-bar > div:nth-child(2) > div[style*="rgba(125,85,245"],
#b32-link-bar > div:nth-child(2) > div[style*="rgba(150,115,255"] {
  background: rgba(146, 92, 238, .86) !important;
  border-color: rgba(146, 92, 238, .88) !important;
  box-shadow: 0 0 7px rgba(146, 92, 238, .36) !important;
}

/* empty LINK diamond */
#b32-link-bar > div:nth-child(2) > div[style*="rgba(30,20,60"],
#b32-link-bar > div:nth-child(2) > div[style*="rgba(100,80,200"] {
  background: rgba(86, 90, 105, .22) !important;
  border-color: rgba(86, 90, 105, .26) !important;
  box-shadow: none !important;
}

/* ── 盤面：白背景上で薄すぎない線へ ── */
#battle32-root .b32-cell {
  background: rgba(255, 255, 255, .36) !important;
  border-color: rgba(85, 92, 118, .12) !important;
  box-shadow: inset 0 0 10px rgba(80, 90, 120, .025) !important;
}

#battle32-root .b32-cell.enemy-zone {
  background: rgba(156, 108, 220, .055) !important;
  border-color: rgba(138, 108, 190, .16) !important;
}

#battle32-root .b32-cell.ally-zone {
  background: rgba(70, 170, 230, .070) !important;
  border-color: rgba(55, 155, 215, .22) !important;
}

#battle32-root .b32-cell.row-divider {
  border-top-color: rgba(100, 110, 145, .20) !important;
}

/* ── ロスターカード：モック寄せの白カード ── */
#b32-roster-panel .b32-roster-card,
#battle32-root .b32-party-card {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,247,244,.94)) !important;
  border-color: rgba(62, 68, 88, .15) !important;
  color: rgba(48, 56, 82, .84) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.72),
    0 6px 14px rgba(45, 50, 65, .075) !important;
  text-shadow: none !important;
}

#b32-roster-panel .b32-roster-card.selected,
#b32-roster-panel .b32-roster-card.active,
#battle32-root .b32-party-card.selected,
#battle32-root .b32-party-card.active {
  background: linear-gradient(180deg, rgba(252,254,255,.98), rgba(238,248,255,.96)) !important;
  border-color: rgba(55, 170, 220, .60) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.86),
    0 0 14px rgba(50, 170, 220, .18) !important;
}

#b32-roster-panel .b32-roster-card::before,
#battle32-root .b32-party-card::before {
  background: linear-gradient(90deg, transparent, rgba(60, 72, 105, .20), transparent) !important;
}

#b32-roster-panel .b32-roster-card.selected::before,
#b32-roster-panel .b32-roster-card.active::before,
#battle32-root .b32-party-card.selected::before,
#battle32-root .b32-party-card.active::before {
  background: linear-gradient(90deg, transparent, rgba(70, 190, 230, .48), transparent) !important;
}

#b32-roster-panel .b32-roster-card > div,
#battle32-root .b32-party-card,
#battle32-root .b32-party-hp-num,
#battle32-root .b32-party-name {
  color: rgba(68, 76, 105, .80) !important;
  text-shadow: none !important;
}

#b32-roster-panel .b32-roster-hp-text,
#battle32-root .b32-party-hp-num,
#battle32-root .b32-party-hp-max {
  color: rgba(90, 96, 115, .52) !important;
}

#b32-roster-panel .b32-roster-hp-bar-wrap,
#battle32-root .b32-party-hp-bar-wrap {
  background: rgba(68, 76, 96, .14) !important;
  border-color: rgba(68, 76, 96, .08) !important;
}

#b32-roster-panel .b32-roster-hp-bar,
#battle32-root .b32-party-hp-bar,
#battle32-root .b32-unit.ally .b32-hp-bar,
#battle32-root .b32-hp-bar {
  background: linear-gradient(90deg, rgba(38, 155, 215, .88), rgba(88, 210, 225, .82)) !important;
  box-shadow: 0 0 6px rgba(38, 155, 215, .20) !important;
}

/* ── キャラ詳細：位置は触らず、白系の情報パネルにする ── */
#battle32-root .b32-roster-info-panel,
#battle32-root .b32-action-detail-panel,
#b32-action-detail-portal .b32-action-detail-panel {
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,246,243,.97)) !important;
  border-color: rgba(58, 66, 92, .18) !important;
  color: rgba(38, 46, 70, .90) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.80),
    0 10px 24px rgba(42, 48, 66, .13) !important;
  text-shadow: none !important;
}

#battle32-root .b32-roster-info-card,
#battle32-root .b32-action-char-card {
  background: rgba(255,255,255,.62) !important;
  border-color: rgba(58, 66, 92, .16) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55) !important;
}

#battle32-root .b32-roster-info-title,
#battle32-root .b32-roster-info-title .name,
#battle32-root .b32-roster-info-desc,
#battle32-root .b32-roster-info-role,
#battle32-root .b32-roster-info-skill,
#battle32-root .b32-roster-info-status,
#battle32-root .b32-action-detail-title,
#battle32-root .b32-action-detail-desc,
#battle32-root .b32-action-detail-meta,
#b32-action-detail-portal .b32-action-detail-title,
#b32-action-detail-portal .b32-action-detail-desc,
#b32-action-detail-portal .b32-action-detail-meta {
  color: rgba(38, 46, 70, .86) !important;
  text-shadow: none !important;
}

#battle32-root .b32-roster-info-title {
  border-bottom-color: rgba(58, 66, 92, .14) !important;
}

/* ── 下部アクション：レイアウトそのまま白カード化 ── */
#battle32-root .b32-bottom-action {
  background: linear-gradient(180deg, rgba(255,255,255,.91), rgba(246,246,242,.96)) !important;
  border-color: rgba(58, 66, 92, .16) !important;
  color: rgba(48, 56, 82, .88) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.76),
    0 8px 18px rgba(42, 48, 66, .075) !important;
  text-shadow: none !important;
}

#battle32-root .b32-bottom-action::before {
  background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 48%) !important;
  opacity: .65 !important;
}

#battle32-root .b32-bottom-action-icon,
#battle32-root .b32-bottom-action-label,
#battle32-root .b32-bottom-action-cost,
#battle32-root .b32-bottom-action-sub {
  color: rgba(55, 64, 96, .86) !important;
  text-shadow: none !important;
}

#battle32-root .b32-bottom-action.is-active,
#battle32-root .b32-bottom-action.move.is-active,
#battle32-root .b32-bottom-action.skill.is-active,
#battle32-root .b32-bottom-action.ult.is-active {
  background: linear-gradient(180deg, rgba(252,254,255,.98), rgba(238,248,255,.96)) !important;
  border-color: rgba(80, 170, 230, .66) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.88),
    0 0 15px rgba(70, 170, 230, .20) !important;
}

#battle32-root .b32-bottom-action.end {
  background: linear-gradient(180deg, rgba(255,252,247,.94), rgba(249,245,238,.98)) !important;
  border-color: rgba(206, 138, 72, .34) !important;
}

#battle32-root .b32-bottom-action.end .b32-bottom-action-icon,
#battle32-root .b32-bottom-action.end .b32-bottom-action-label,
#battle32-root .b32-bottom-action.end .b32-bottom-action-sub {
  color: rgba(92, 68, 45, .86) !important;
}

#battle32-root .b32-bottom-action:disabled {
  opacity: .42 !important;
  filter: grayscale(.22) !important;
}

/* ── 旧ボタン系が出た場合も白系に統一 ── */
#battle32-root .b32-btn,
#battle32-root .b32-action-circle-btn,
#battle32-root .b32-bottom-skill-btn,
#battle32-root .b32-action-detail-btn,
#b32-action-detail-portal .b32-action-detail-btn,
.b32-action-btn {
  background: rgba(255,255,255,.86) !important;
  border-color: rgba(58, 66, 92, .18) !important;
  color: rgba(48, 56, 82, .86) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.74),
    0 6px 14px rgba(42, 48, 66, .08) !important;
  text-shadow: none !important;
}

#battle32-root .b32-btn.danger,
#battle32-root .b32-action-circle-btn.end {
  background: rgba(255, 248, 244, .90) !important;
  border-color: rgba(202, 120, 86, .30) !important;
  color: rgba(118, 62, 46, .86) !important;
}

/* ============================================================
   COLOR ONLY PATCH v6 - White UI readability tune
   レイアウトは変更しない。色・背景・枠線・影・文字色のみ上書き。
   ============================================================ */

/* 上部ヘッダー文字：白背景でも読める濃度へ */
#battle32-root #b32-header {
  background: rgba(255,255,255,.94) !important;
  border-bottom-color: rgba(46,54,78,.12) !important;
  box-shadow: 0 8px 18px rgba(38,44,60,.055) !important;
}
#battle32-root #b32-battle-title,
#battle32-root #b32-turn-num-large,
#battle32-root #b32-battle-menu-btn {
  color: rgba(42,52,78,.96) !important;
  text-shadow: none !important;
}
#battle32-root #b32-battle-subtitle,
#battle32-root #b32-phase-badge,
#battle32-root #b32-turn-label,
#battle32-root #b32-turn-slash,
#battle32-root #b32-turn-max,
#battle32-root #b32-stage-id,
#battle32-root #b32-stage-id-right {
  color: rgba(72,82,112,.62) !important;
  text-shadow: none !important;
}

/* 右上 MENU：黒ボタンではなく、モック寄せの白ピル */
#b32-battle-menu-btn {
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(58,68,92,.14) !important;
  color: rgba(52,62,92,.88) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.75),
    0 5px 14px rgba(38,44,62,.065) !important;
  text-shadow: none !important;
}
#b32-battle-menu.open #b32-battle-menu-btn,
#b32-battle-menu-btn:active {
  background: rgba(246,246,242,.92) !important;
  border-color: rgba(115,92,170,.24) !important;
  color: rgba(60,54,92,.94) !important;
}
#b32-battle-menu-panel,
#b32-battle-menu .b32-battle-menu-item {
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(58,68,92,.14) !important;
  color: rgba(42,52,78,.90) !important;
  text-shadow: none !important;
}

/* STAGE進捗：四角い発光をやめ、線だけが淡く光るように */
#rl-hud,
#battle32-root #rl-hud {
  background: rgba(255,255,255,.18) !important;
  color: rgba(70,78,106,.78) !important;
  text-shadow: none !important;
}
#rl-hud *,
#battle32-root #rl-hud * {
  color: rgba(76,84,112,.66) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
#rl-hud .active,
#rl-hud [class*="active"],
#rl-hud [aria-current="true"],
#battle32-root #rl-hud .active,
#battle32-root #rl-hud [class*="active"],
#battle32-root #rl-hud [aria-current="true"] {
  color: rgba(146,88,236,.94) !important;
  background: linear-gradient(90deg, transparent, rgba(146,88,236,.76), transparent) !important;
  background-color: transparent !important;
  border-color: rgba(146,88,236,.38) !important;
  box-shadow: 0 0 5px rgba(146,88,236,.18) !important;
}
#rl-hud .active::before,
#rl-hud .active::after,
#rl-hud [class*="active"]::before,
#rl-hud [class*="active"]::after,
#battle32-root #rl-hud .active::before,
#battle32-root #rl-hud .active::after,
#battle32-root #rl-hud [class*="active"]::before,
#battle32-root #rl-hud [class*="active"]::after {
  background: linear-gradient(90deg, transparent, rgba(146,88,236,.70), transparent) !important;
  box-shadow: 0 0 5px rgba(146,88,236,.16) !important;
}

/* 右側 LINK：文字を濃く、背景は白ピルのまま */
#b32-link-bar {
  background: rgba(255,255,255,.82) !important;
  border-color: rgba(76,70,112,.13) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.78),
    0 7px 16px rgba(42,48,66,.09) !important;
}
#b32-link-bar > div:first-child {
  color: rgba(66,72,100,.72) !important;
  text-shadow: none !important;
}
#b32-link-bar > div:nth-child(2) > div {
  box-shadow: none !important;
}
#b32-link-bar > div:nth-child(2) > div[style*="rgba(125,85,245"],
#b32-link-bar > div:nth-child(2) > div[style*="rgba(150,115,255"] {
  background: rgba(146,92,238,.88) !important;
  border-color: rgba(146,92,238,.92) !important;
  box-shadow: 0 0 5px rgba(146,92,238,.24) !important;
}
#b32-link-bar > div:nth-child(2) > div[style*="rgba(30,20,60"],
#b32-link-bar > div:nth-child(2) > div[style*="rgba(100,80,200"] {
  background: rgba(84,88,104,.28) !important;
  border-color: rgba(84,88,104,.30) !important;
}

/* 詳細モーダル：文字を明確化。位置・サイズは変更しない */
#battle32-root .b32-roster-info-panel,
#b32-action-detail-portal .b32-action-detail-panel,
#battle32-root .b32-action-detail-panel,
#b32-skill-detail-box {
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(52,62,88,.18) !important;
  color: rgba(30,38,58,.94) !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.76),
    0 10px 22px rgba(34,40,58,.12) !important;
}
#battle32-root .b32-roster-info-panel *,
#b32-action-detail-portal .b32-action-detail-panel *,
#battle32-root .b32-action-detail-panel *,
#b32-skill-detail-box * {
  text-shadow: none !important;
}
#battle32-root .b32-roster-info-title,
#battle32-root .b32-roster-info-title .name,
#battle32-root .b32-action-detail-title,
#b32-action-detail-portal .b32-action-detail-title,
#b32-skill-detail-name {
  color: rgba(28,36,58,.96) !important;
}
#battle32-root .b32-roster-info-role,
#battle32-root .b32-roster-info-status,
#battle32-root .b32-roster-skill-detail-head strong,
#battle32-root .b32-roster-skill-detail-desc,
#battle32-root .b32-action-detail-desc,
#battle32-root .b32-action-detail-meta,
#b32-action-detail-portal .b32-action-detail-desc,
#b32-action-detail-portal .b32-action-detail-meta,
#b32-skill-detail-desc,
#b32-skill-detail-meta {
  color: rgba(42,50,72,.84) !important;
}
#battle32-root .b32-roster-skill-detail,
#battle32-root .b32-roster-info-card,
#battle32-root .b32-action-char-card {
  background: rgba(247,248,246,.88) !important;
  border-color: rgba(58,68,92,.14) !important;
  color: rgba(42,50,72,.86) !important;
}
#battle32-root .b32-roster-skill-detail-meta span,
#battle32-root .b32-roster-skill-badge,
#b32-skill-detail-meta span {
  background: rgba(228,232,240,.72) !important;
  border-color: rgba(58,68,92,.12) !important;
  color: rgba(46,54,76,.76) !important;
}
#battle32-root .b32-roster-skill-detail.is-ult,
#battle32-root .b32-roster-skill-detail.is-ult .b32-roster-skill-badge {
  border-color: rgba(146,92,238,.22) !important;
}
#battle32-root .b32-roster-info-close {
  background: rgba(36,42,56,.92) !important;
  border-color: rgba(255,255,255,.55) !important;
  color: rgba(255,255,255,.92) !important;
}

/* ボトムメニュー：外側グレーを薄い白に寄せる。配置は触らない */
#battle32-root #b32-actions {
  background: rgba(247,247,243,.94) !important;
  border-top-color: rgba(58,68,92,.10) !important;
  box-shadow: 0 -8px 20px rgba(42,48,66,.04) !important;
}
#battle32-root .b32-bottom-action {
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,249,246,.98)) !important;
  border-color: rgba(58,68,92,.13) !important;
  color: rgba(48,58,88,.88) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.80),
    0 5px 12px rgba(42,48,66,.045) !important;
  text-shadow: none !important;
}
#battle32-root .b32-bottom-action-icon,
#battle32-root .b32-bottom-action-label,
#battle32-root .b32-bottom-action-cost,
#battle32-root .b32-bottom-action-sub {
  color: rgba(54,64,96,.88) !important;
  text-shadow: none !important;
}
#battle32-root .b32-bottom-action.is-active,
#battle32-root .b32-bottom-action.summon.is-active,
#battle32-root .b32-bottom-action.move.is-active,
#battle32-root .b32-bottom-action.skill.is-active,
#battle32-root .b32-bottom-action.ult.is-active {
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,242,255,.96)) !important;
  border-color: rgba(146,92,238,.30) !important;
  box-shadow:
    inset 0 -2px 0 rgba(146,92,238,.60),
    inset 0 0 0 1px rgba(255,255,255,.82) !important;
}
#battle32-root .b32-bottom-action.end {
  background: linear-gradient(180deg, rgba(255,253,249,.98), rgba(250,247,241,.98)) !important;
  border-color: rgba(214,150,76,.35) !important;
}

/* ============================================================
   COLOR ONLY PATCH v7 - Close button & stage progress cleanup
   レイアウト・機能は変更しない。色・背景・枠線・影のみ上書き。
   ============================================================ */

/* ── 詳細パネルの×ボタン：黒丸で浮かないよう白UIになじませる ── */
#battle32-root .b32-roster-info-close {
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(52,62,88,.18) !important;
  color: rgba(42,50,72,.82) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.78),
    0 3px 8px rgba(34,40,58,.08) !important;
  text-shadow: none !important;
}

#battle32-root .b32-roster-info-close:active {
  background: rgba(242,243,240,.96) !important;
  border-color: rgba(146,92,238,.24) !important;
  color: rgba(46,40,78,.92) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.72),
    0 2px 6px rgba(34,40,58,.06) !important;
  text-shadow: none !important;
}

/* 透明ヒットボックスが見えてしまう場合の保険：見た目だけ完全透明 */
#b32-roster-info-close-hitbox {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ── 上部STAGE進捗：四角い塗りを禁止し、細い線と文字だけで見せる ── */
#battle32-root #rl-hud,
#rl-hud {
  background: rgba(255,255,255,.06) !important;
  color: rgba(72,80,108,.62) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

#battle32-root #rl-hud *,
#rl-hud * {
  color: rgba(78,86,112,.56) !important;
  background-color: transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* active系に矩形背景が付くのを止める */
#battle32-root #rl-hud .active,
#battle32-root #rl-hud [class*="active"],
#battle32-root #rl-hud [aria-current="true"],
#rl-hud .active,
#rl-hud [class*="active"],
#rl-hud [aria-current="true"] {
  color: rgba(143,88,232,.92) !important;
  background: transparent !important;
  background-color: transparent !important;
  border-color: rgba(143,88,232,.34) !important;
  box-shadow: none !important;
  text-shadow: 0 0 4px rgba(143,88,232,.18) !important;
}

/* activeの疑似要素だけ、細い紫ラインとして残す。四角い面発光は作らない */
#battle32-root #rl-hud .active::before,
#battle32-root #rl-hud .active::after,
#battle32-root #rl-hud [class*="active"]::before,
#battle32-root #rl-hud [class*="active"]::after,
#battle32-root #rl-hud [aria-current="true"]::before,
#battle32-root #rl-hud [aria-current="true"]::after,
#rl-hud .active::before,
#rl-hud .active::after,
#rl-hud [class*="active"]::before,
#rl-hud [class*="active"]::after,
#rl-hud [aria-current="true"]::before,
#rl-hud [aria-current="true"]::after {
  background: linear-gradient(90deg, transparent, rgba(143,88,232,.66), transparent) !important;
  background-color: transparent !important;
  box-shadow: 0 0 4px rgba(143,88,232,.18) !important;
  text-shadow: none !important;
}

/* 進捗バー内のインラインstyle色が矩形に見える場合も、薄い線色へ寄せる */
#battle32-root #rl-hud [style*="background"],
#rl-hud [style*="background"] {
  background-color: transparent !important;
  box-shadow: none !important;
}

#battle32-root #rl-hud [style*="box-shadow"],
#rl-hud [style*="box-shadow"] {
  box-shadow: none !important;
}


/* ============================================================
   COLOR ONLY PATCH v8 - Restore current STAGE indicator
   レイアウト・機能は変更しない。色・背景・枠線・影のみ上書き。
   v7 の「四角い塗り禁止」で現在ステージ色まで消えたため、
   active系だけ細い紫ラインとして復活させる。
   ============================================================ */

/* STAGE HUD全体：白背景上で読める薄い紺グレー */
#battle32-root #rl-hud,
#rl-hud {
  background: rgba(255,255,255,.06) !important;
  color: rgba(72,80,108,.64) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

#battle32-root #rl-hud *,
#rl-hud * {
  color: rgba(78,86,112,.58) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* 非activeのインライン背景だけ透明化。activeまで消さない */
#battle32-root #rl-hud [style*="background"]:not(.active):not([class*="active"]):not([aria-current="true"]),
#rl-hud [style*="background"]:not(.active):not([class*="active"]):not([aria-current="true"]) {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* 現在ステージ：矩形の面ではなく、細い紫ラインとして復活 */
#battle32-root #rl-hud .active,
#battle32-root #rl-hud [class*="active"],
#battle32-root #rl-hud [aria-current="true"],
#rl-hud .active,
#rl-hud [class*="active"],
#rl-hud [aria-current="true"] {
  color: rgba(146,88,236,.96) !important;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(146,88,236,.00) 12%,
      rgba(146,88,236,.78) 48%,
      rgba(146,88,236,.00) 88%,
      transparent 100%
    ) !important;
  background-color: transparent !important;
  border-color: rgba(146,88,236,.34) !important;
  box-shadow: 0 0 5px rgba(146,88,236,.18) !important;
  text-shadow: 0 0 4px rgba(146,88,236,.14) !important;
}

/* activeにインラインstyleがある場合も、上の紫ラインを優先 */
#battle32-root #rl-hud .active[style*="background"],
#battle32-root #rl-hud [class*="active"][style*="background"],
#battle32-root #rl-hud [aria-current="true"][style*="background"],
#rl-hud .active[style*="background"],
#rl-hud [class*="active"][style*="background"],
#rl-hud [aria-current="true"][style*="background"] {
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(146,88,236,.00) 12%,
      rgba(146,88,236,.78) 48%,
      rgba(146,88,236,.00) 88%,
      transparent 100%
    ) !important;
  background-color: transparent !important;
  box-shadow: 0 0 5px rgba(146,88,236,.18) !important;
}

/* 疑似要素を使っているタイプも、同じく細い紫ラインに統一 */
#battle32-root #rl-hud .active::before,
#battle32-root #rl-hud .active::after,
#battle32-root #rl-hud [class*="active"]::before,
#battle32-root #rl-hud [class*="active"]::after,
#battle32-root #rl-hud [aria-current="true"]::before,
#battle32-root #rl-hud [aria-current="true"]::after,
#rl-hud .active::before,
#rl-hud .active::after,
#rl-hud [class*="active"]::before,
#rl-hud [class*="active"]::after,
#rl-hud [aria-current="true"]::before,
#rl-hud [aria-current="true"]::after {
  background:
    linear-gradient(90deg, transparent, rgba(146,88,236,.72), transparent) !important;
  background-color: transparent !important;
  box-shadow: 0 0 5px rgba(146,88,236,.16) !important;
  text-shadow: none !important;
}

/* ============================================================
   COLOR ONLY PATCH v9 - Stage indicator without glow
   レイアウト・機能は変更しない。色・背景・枠線・影のみ上書き。
   光らせず、現在ステージは文字色＋細い下線だけで示す。
   ============================================================ */

/* STAGE進捗全体：白背景に馴染む薄いグレー */
#battle32-root #rl-hud,
#rl-hud {
  background: rgba(255,255,255,.04) !important;
  color: rgba(82,90,116,.56) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

#battle32-root #rl-hud *,
#rl-hud * {
  color: rgba(86,94,120,.52) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* 現在ステージ：発光なし。薄紫の文字＋細い下線のみ */
#battle32-root #rl-hud .active,
#battle32-root #rl-hud [class*="active"],
#battle32-root #rl-hud [aria-current="true"],
#rl-hud .active,
#rl-hud [class*="active"],
#rl-hud [aria-current="true"] {
  color: rgba(126,82,204,.96) !important;
  background: transparent !important;
  background-color: transparent !important;
  border-color: rgba(126,82,204,.34) !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* activeにインラインstyleがあっても、面・発光・グラデーションを消す */
#battle32-root #rl-hud .active[style],
#battle32-root #rl-hud [class*="active"][style],
#battle32-root #rl-hud [aria-current="true"][style],
#rl-hud .active[style],
#rl-hud [class*="active"][style],
#rl-hud [aria-current="true"][style] {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* 疑似要素の光を完全に消す。下線は border-bottom 側で表現する */
#battle32-root #rl-hud .active::before,
#battle32-root #rl-hud .active::after,
#battle32-root #rl-hud [class*="active"]::before,
#battle32-root #rl-hud [class*="active"]::after,
#battle32-root #rl-hud [aria-current="true"]::before,
#battle32-root #rl-hud [aria-current="true"]::after,
#rl-hud .active::before,
#rl-hud .active::after,
#rl-hud [class*="active"]::before,
#rl-hud [class*="active"]::after,
#rl-hud [aria-current="true"]::before,
#rl-hud [aria-current="true"]::after {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

/* currentが要素自身に当たるタイプ向け：面ではなく細線だけ */
#battle32-root #rl-hud .active,
#battle32-root #rl-hud [class*="active"],
#battle32-root #rl-hud [aria-current="true"],
#rl-hud .active,
#rl-hud [class*="active"],
#rl-hud [aria-current="true"] {
  border-bottom: 1px solid rgba(126,82,204,.78) !important;
}

/* 進捗のバー要素が別DOMの場合：塗りは濃すぎない紫、発光なし */
#battle32-root #rl-hud [style*="background"]:not(.active):not([class*="active"]):not([aria-current="true"]),
#rl-hud [style*="background"]:not(.active):not([class*="active"]):not([aria-current="true"]) {
  background: rgba(186,190,204,.22) !important;
  background-color: rgba(186,190,204,.22) !important;
  box-shadow: none !important;
  filter: none !important;
}

#battle32-root #rl-hud .active [style*="background"],
#battle32-root #rl-hud [class*="active"] [style*="background"],
#battle32-root #rl-hud [aria-current="true"] [style*="background"],
#rl-hud .active [style*="background"],
#rl-hud [class*="active"] [style*="background"],
#rl-hud [aria-current="true"] [style*="background"] {
  background: rgba(126,82,204,.82) !important;
  background-color: rgba(126,82,204,.82) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ============================================================
 右側 LINK 表示：白UI用・添付イメージ寄せ
 ※位置・機能はJS既存のまま。外側は透明、内側だけ白ピル化。
 ============================================================ */
#b32-link-bar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(86, 78, 135, .92) !important;
  text-shadow: none !important;
}

#b32-link-bar .b32-link-label {
  writing-mode: horizontal-tb !important;
  font-family: 'Cinzel', serif !important;
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: 3px !important;
  color: rgba(150, 108, 235, .88) !important;
  text-align: center !important;
  text-shadow: none !important;
}

#b32-link-bar .b32-link-count {
  margin-top: 5px !important;
  margin-bottom: 8px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 15px !important;
  line-height: 1 !important;
  letter-spacing: 1px !important;
  color: rgba(86, 92, 128, .82) !important;
  text-align: center !important;
  text-shadow: none !important;
}

#b32-link-bar .b32-link-count span {
  display: inline-block !important;
  margin: 0 3px !important;
  font-size: 12px !important;
  color: rgba(106, 112, 146, .58) !important;
}

#b32-link-bar .b32-link-pill {
  width: 30px !important;
  box-sizing: border-box !important;
  padding: 14px 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(120, 116, 150, .10) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .90),
    0 8px 18px rgba(46, 50, 68, .10) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

#b32-link-bar .b32-link-diamond {
  width: 11px !important;
  height: 11px !important;
  flex: 0 0 11px !important;
  box-sizing: border-box !important;
  transform: rotate(45deg) !important;
  border-radius: 1px !important;
  transition: background .2s, border-color .2s, opacity .2s !important;
  box-shadow: none !important;
}

#b32-link-bar .b32-link-diamond.filled {
  background: rgba(150, 100, 240, .88) !important;
  border: 1px solid rgba(150, 100, 240, .76) !important;
}

#b32-link-bar .b32-link-diamond.empty {
  background: rgba(92, 96, 112, .30) !important;
  border: 1px solid rgba(92, 96, 112, .24) !important;
}


/* ============================================================
 Core concept removal patch
 コア概念廃止：旧コア表示・旧コア被弾演出は表示しない
 ============================================================ */
.b32-core-object,
.b32-core-img,
.b32-core-damage-flash,
.b32-core-distort-ring,
.b32-core-damage-text {
  display: none !important;
}

/* ============================================================
   PATCH: iPhone SE 盤面タップ安定化
   - 奥側グリッドが小さく潰れてタップできない問題を軽減
   - SEだけ盤面傾斜を弱め、セルのヒット領域を確保
   ============================================================ */
@media (max-width: 390px) and (max-height: 700px) {
  /* セルサイズはJSで計算。CSS側では強制拡大しない。 */

  #battle32-root #b32-board-wrap {
    perspective: 520px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #battle32-root #b32-board {
    gap: 3px !important;
    transform: rotateX(24deg) translateZ(0) !important;
    transform-origin: center center !important;
  }

  #battle32-root .b32-unit,
  #battle32-root .b32-unit.ally,
  #battle32-root .b32-unit.enemy {
    transform:
      translateX(-50%)
      rotateX(-24deg)
      translateZ(calc(var(--cell-size) * 0.08)) !important;
  }

  #battle32-root .b32-core-object {
    transform:
      translate(-50%, -50%)
      rotateX(-24deg)
      translateZ(calc(var(--cell-size) * 0.06)) !important;
  }

  #battle32-root .b32-cell.movable {
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
}


/* ============================================================
   SAFE PATCH: iPhone SE レイアウト復旧 + タップ安定化
   - フラット化しない（巨大化・重なり崩れ防止）
   - 盤面は軽い傾斜のまま、JSのdocument fallbackでタップ補助
   ============================================================ */
@media (max-width: 390px) and (max-height: 700px) {
  #battle32-root #b32-board-wrap {
    perspective: 520px !important;
    transform-style: preserve-3d !important;
    overflow: visible !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #battle32-root #b32-board {
    gap: 2px !important;
    transform: rotateX(24deg) translateZ(0) !important;
    transform-origin: center center !important;
    transform-style: preserve-3d !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  #battle32-root .b32-cell {
    transform-style: preserve-3d !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  #battle32-root .b32-unit,
  #battle32-root .b32-unit.ally,
  #battle32-root .b32-unit.enemy {
    transform:
      translateX(-50%)
      rotateX(-24deg)
      translateZ(calc(var(--cell-size) * 0.08)) !important;
    transform-origin: center bottom !important;
    transform-style: preserve-3d !important;
  }

  #battle32-root .b32-unit-icon {
    transform:
      translateY(var(--unit-offset-y, 0px))
      scale(var(--unit-scale, 1))
      translateZ(1px) !important;
    transform-origin: center bottom !important;
  }

  #battle32-root .b32-cell.movable,
  #battle32-root .b32-cell.move-capture,
  #battle32-root .b32-cell.summon-cell,
  #battle32-root .b32-cell.item-cell-target {
    cursor: pointer !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
}


/* ============================================================
   PATCH: iPhone SE 盤面サイズ改善
   - タップ問題はJSのfallbackで解消済み
   - ここでは下部UIを少し圧縮し、盤面セル34〜38pxを確保する
   - iPhone14系には影響しないよう .b32-vp-se のみに限定
   ============================================================ */
#battle32-root.b32-vp-se #b32-scroll {
  padding-top: 0 !important;
  padding-bottom: var(--b32-actions-h, 52px) !important;
}

#battle32-root.b32-vp-se #b32-board-wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: -2px !important;
}

#battle32-root.b32-vp-se #b32-board {
  gap: 2px !important;
  transform: rotateX(24deg) translateZ(0) !important;
  transform-origin: center center !important;
}

#battle32-root.b32-vp-se .b32-unit,
#battle32-root.b32-vp-se .b32-unit.ally,
#battle32-root.b32-vp-se .b32-unit.enemy {
  transform:
    translateX(-50%)
    rotateX(-24deg)
    translateZ(calc(var(--cell-size) * 0.08)) !important;
}

#battle32-root.b32-vp-se #b32-bottom-guide {
  height: 9px !important;
  min-height: 9px !important;
  max-height: 9px !important;
  line-height: 9px !important;
  font-size: 8px !important;
  margin: 0 0 1px 0 !important;
}

#battle32-root.b32-vp-se #b32-bottom-area {
  gap: 1px !important;
  padding-left: 5px !important;
  padding-right: 5px !important;
  padding-bottom: max(2px, env(safe-area-inset-bottom, 2px)) !important;
}

#battle32-root.b32-vp-se #b32-party-status {
  gap: 3px !important;
}

#battle32-root.b32-vp-se .b32-party-card {
  height: 66px !important;
  padding: 2px 3px 2px !important;
}

#battle32-root.b32-vp-se .b32-party-img-wrap {
  height: 39px !important;
}

#battle32-root.b32-vp-se .b32-party-img {
  height: 43px !important;
}

#battle32-root.b32-vp-se .b32-party-hp-num {
  font-size: 8px !important;
  line-height: 1 !important;
}

#battle32-root.b32-vp-se .b32-party-hp-bar-wrap {
  height: 3px !important;
}

#battle32-root.b32-vp-se #b32-actions {
  gap: 3px !important;
  padding: 5px 6px max(5px, env(safe-area-inset-bottom, 5px)) !important;
}

#battle32-root.b32-vp-se .b32-bottom-action {
  min-height: 48px !important;
  padding: 3px 2px 3px !important;
}

#battle32-root.b32-vp-se .b32-bottom-action-icon {
  font-size: 13px !important;
  line-height: 1 !important;
}

#battle32-root.b32-vp-se .b32-bottom-action-label {
  font-size: 10px !important;
  line-height: 1.05 !important;
}

#battle32-root.b32-vp-se .b32-bottom-action-cost,
#battle32-root.b32-vp-se .b32-bottom-action-sub {
  font-size: 7px !important;
  line-height: 1 !important;
}


/* ============================================================
 SE専用：グリッド大型化のための追加圧縮
 - JS側でSEセル上限を45pxまで引き上げる前提。
 - 盤面表示領域を確保するため、下部カード/操作ボタンをさらに少しだけ圧縮。
 ============================================================ */
#battle32-root.b32-vp-se #b32-scroll {
  padding-top: 0 !important;
}

#battle32-root.b32-vp-se #b32-board-wrap {
  margin-top: -4px !important;
}

#battle32-root.b32-vp-se #b32-bottom-area {
  gap: 0 !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  padding-bottom: max(1px, env(safe-area-inset-bottom, 1px)) !important;
}

#battle32-root.b32-vp-se #b32-bottom-guide {
  height: 8px !important;
  min-height: 8px !important;
  max-height: 8px !important;
  line-height: 8px !important;
  font-size: 7px !important;
  margin: 0 !important;
}

#battle32-root.b32-vp-se .b32-party-card {
  height: 62px !important;
  padding: 1px 3px 1px !important;
}

#battle32-root.b32-vp-se .b32-party-img-wrap {
  height: 36px !important;
}

#battle32-root.b32-vp-se .b32-party-img {
  height: 40px !important;
}

#battle32-root.b32-vp-se .b32-party-row {
  margin-top: 1px !important;
}

#battle32-root.b32-vp-se .b32-party-hp-num {
  font-size: 7px !important;
}

#battle32-root.b32-vp-se #b32-actions {
  gap: 2px !important;
  padding: 4px 5px max(4px, env(safe-area-inset-bottom, 4px)) !important;
}

#battle32-root.b32-vp-se .b32-bottom-action {
  min-height: 44px !important;
  padding: 2px 2px 2px !important;
}

#battle32-root.b32-vp-se .b32-bottom-action-icon {
  font-size: 12px !important;
}

#battle32-root.b32-vp-se .b32-bottom-action-label {
  font-size: 9px !important;
  line-height: 1 !important;
}

#battle32-root.b32-vp-se .b32-bottom-action-cost,
#battle32-root.b32-vp-se .b32-bottom-action-sub {
  font-size: 6px !important;
}


/* ============================================================
 SE専用：盤面下の余白をグリッド拡大に利用
 - 盤面下〜キャラカード上に残っていた空白を使う。
 - レイアウトは崩さず、盤面領域だけを少し下へ広げる。
 ============================================================ */
#battle32-root.b32-vp-se #b32-board-wrap {
  margin-bottom: -10px !important;
}

/* 拡大時でもユニットがカードへ食い込みすぎないよう、SEのみ足元を少しだけ締める */
#battle32-root.b32-vp-se .b32-unit {
  height: calc(var(--cell-size) * 1.58) !important;
}

/* ============================================================
   HOTFIX: Keep original 3D board, remove stale center-text dim only
   - Based on the last known-good 3D CSS before top rows disappeared.
   - Do NOT touch #b32-board / .b32-cell / .b32-unit transforms.
   - Purpose: prevent the center text overlay from leaving a dark film.
   ============================================================ */
#b32-center-text:empty,
#b32-center-text:not(.b32ct-visible),
#b32-center-text.b32ct-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#b32-center-text:empty::before,
#b32-center-text:not(.b32ct-visible)::before,
#b32-center-text.b32ct-hidden::before {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

#b32-center-text.b32ct-visible {
  display: flex !important;
  visibility: visible !important;
}

/* 通常の TURN 表示時だけ、黒暗幕ではなく白い薄光にする */
#b32-center-text.b32ct-visible:not(.b32ct-turn-danger)::before {
  content: '' !important;
  display: block !important;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255,255,255,.06) 32%,
    rgba(255,255,255,.12) 50%,
    rgba(255,255,255,.06) 68%,
    transparent 100%
  ) !important;
  opacity: 1 !important;
}


/* 盤面設置型召喚物（chara_16_set.webp） */
.b32-unit.summon {
  width: calc(var(--cell-size) * 1.28);
  height: calc(var(--cell-size) * 1.78);
  bottom: 0px;
  z-index: 2;
}

.b32-unit.summon .b32-unit-icon {
  height: calc(var(--cell-size) * 1.62);
  filter: drop-shadow(0 0 8px rgba(220,240,255,.55));
}

.b32-unit.summon .b32-unit-name,
.b32-unit.summon .b32-unit-foot-ui,
.b32-unit.summon .b32-shinki-dots {
  display: none !important;
}


/* ============================================================
   最終上書き v12 ― ULTカットイン視認性改善
   目的：画像を薄く見せる白飛び・強発光・暗幕を抑える
   ============================================================ */
.b32-ult-cutin {
  z-index: 4000000 !important;
  background:
    radial-gradient(circle at 55% 48%, rgba(255,240,190,.06), transparent 46%),
    linear-gradient(180deg, rgba(0,0,0,.72), rgba(6,8,18,.36), rgba(0,0,0,.76)) !important;
}

.b32-ult-cutin-img {
  opacity: 1 !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  filter:
    brightness(1.18)
    contrast(1.16)
    saturate(1.06)
    drop-shadow(0 4px 18px rgba(0,0,0,.72)) !important;
  animation: b32UltCutinImgSlideVisible 1900ms ease-out forwards !important;
}

.b32-ult-cutin-shade {
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.62) 0%,
      rgba(0,0,0,.06) 24%,
      rgba(0,0,0,.00) 50%,
      rgba(0,0,0,.06) 74%,
      rgba(0,0,0,.66) 100%
    ),
    linear-gradient(90deg,
      rgba(0,0,0,.20) 0%,
      rgba(0,0,0,.00) 34%,
      rgba(0,0,0,.00) 70%,
      rgba(0,0,0,.18) 100%
    ) !important;
}

.b32-ult-white-flash {
  opacity: 0 !important;
  animation: b32UltWhiteFlashVisible 1900ms ease-out forwards !important;
  mix-blend-mode: normal !important;
}

@keyframes b32UltCutinImgSlideVisible {
  0% {
    opacity: 0;
    transform: translate(-64%, -50%);
    filter: brightness(1.10) contrast(1.12) saturate(1.04);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -50%);
    filter: brightness(1.18) contrast(1.16) saturate(1.06);
  }
  84% {
    opacity: 1;
    transform: translate(-50%, -50%);
    filter: brightness(1.18) contrast(1.16) saturate(1.06);
  }
  100% {
    opacity: 0;
    transform: translate(-60%, -50%);
    filter: brightness(1.08) contrast(1.10) saturate(1.03);
  }
}

@keyframes b32UltWhiteFlashVisible {
  0%, 72% { opacity: 0; }
  78% { opacity: .16; }
  86%, 100% { opacity: 0; }
}

/* ============================================================
   FIX: SE系 スキル選択UIがローグライトキャラパネルの裏に入る問題
   - JS側で #b32-roster-panel / #b32-item-panel を !important 付きで非表示化
   - 念のためスキル選択中のスキルパネルを固定レイヤー化
   ============================================================ */
#battle32-root.b32-skill-choice-open #b32-skill-panel.b32-skill-choice-open {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(var(--b32-actions-h, 72px) + 8px) !important;
  transform: translateX(-50%) !important;
  width: min(calc(100vw - 18px), 430px) !important;
  max-height: min(32vh, 150px) !important;
  z-index: 3400000 !important;
  display: flex !important;
  pointer-events: auto !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}

#battle32-root.b32-skill-choice-open #b32-skill-panel.b32-skill-choice-open #b32-skill-list {
  max-height: min(32vh, 150px) !important;
  overflow: visible !important;
}

#battle32-root.b32-skill-choice-open .b32-action-skill-panel {
  background: rgba(248, 248, 244, .96) !important;
  border: 1px solid rgba(58, 68, 92, .14) !important;
  box-shadow: 0 -6px 22px rgba(42, 48, 66, .10), 0 8px 26px rgba(42, 48, 66, .12) !important;
  border-radius: 8px !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}

@media (max-width: 430px) and (max-height: 740px) {
  #battle32-root.b32-skill-choice-open #b32-skill-panel.b32-skill-choice-open {
    bottom: calc(var(--b32-actions-h, 64px) + 5px) !important;
    width: calc(100vw - 12px) !important;
    max-height: 126px !important;
  }

  #battle32-root.b32-skill-choice-open .b32-action-skill-panel {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 4px !important;
    padding: 5px !important;
  }

  #battle32-root.b32-skill-choice-open .b32-action-char-card {
    height: 72px !important;
  }

  #battle32-root.b32-skill-choice-open .b32-action-char-img-wrap,
  #battle32-root.b32-skill-choice-open .b32-action-char-img {
    height: 48px !important;
  }

  #battle32-root.b32-skill-choice-open .b32-bottom-skill-btn {
    min-height: 22px !important;
    padding: 4px 6px !important;
  }
}

/* ============================================================
   PATCH: SE系 スキル/ULT確認パネルを下の余白へ移動 + 説明を最小化
   - グリッド下段に被らないよう、アクションボタン直上へ吸着
   - 説明文は廃止し、攻撃倍率 / 追加効果 / 必要LINK のみ表示
   ============================================================ */
#b32-action-detail-portal {
  bottom: calc(var(--b32-actions-h, 54px) + 6px + env(safe-area-inset-bottom, 0px)) !important;
  max-height: 132px !important;
}

#b32-action-detail-portal .b32-action-detail-panel-compact {
  padding: 8px 10px 7px !important;
  max-height: 132px !important;
  overflow: visible !important;
}

#b32-action-detail-portal .b32-action-detail-panel-compact .b32-action-detail-title {
  margin-bottom: 5px !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
}

#b32-action-detail-portal .b32-action-detail-summary {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  margin-bottom: 6px !important;
}

#b32-action-detail-portal .b32-action-detail-summary-row {
  display: grid !important;
  grid-template-columns: 72px 1fr !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 16px !important;
  font-size: 10.5px !important;
  line-height: 1.25 !important;
  letter-spacing: .04em !important;
  color: rgba(42,50,72,.72) !important;
}

#b32-action-detail-portal .b32-action-detail-summary-row span {
  color: rgba(70,78,104,.58) !important;
  font-size: 10px !important;
}

#b32-action-detail-portal .b32-action-detail-summary-row strong {
  color: rgba(28,36,58,.94) !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#b32-action-detail-portal .b32-action-detail-panel-compact .b32-action-detail-buttons {
  position: static !important;
  padding-top: 4px !important;
  gap: 7px !important;
  background: transparent !important;
}

#b32-action-detail-portal .b32-action-detail-panel-compact .b32-action-detail-btn {
  height: 28px !important;
  min-height: 28px !important;
  padding: 4px 8px !important;
  font-size: 10px !important;
}

@media (max-width: 430px) and (max-height: 740px) {
  #b32-action-detail-portal,
  #b32-action-detail-portal.is-se {
    bottom: calc(var(--b32-actions-h, 50px) + 4px + env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100vw - 24px) !important;
    max-height: 120px !important;
  }

  #b32-action-detail-portal .b32-action-detail-panel-compact {
    padding: 7px 10px 6px !important;
    max-height: 120px !important;
  }

  #b32-action-detail-portal .b32-action-detail-panel-compact .b32-action-detail-title {
    margin-bottom: 4px !important;
    font-size: 12.5px !important;
  }

  #b32-action-detail-portal .b32-action-detail-summary {
    gap: 2px !important;
    margin-bottom: 5px !important;
  }

  #b32-action-detail-portal .b32-action-detail-summary-row {
    grid-template-columns: 68px 1fr !important;
    min-height: 15px !important;
    font-size: 10px !important;
  }

  #b32-action-detail-portal .b32-action-detail-panel-compact .b32-action-detail-btn {
    height: 26px !important;
    min-height: 26px !important;
    font-size: 9.5px !important;
  }
}



/* ============================================================
   Enemy info guide clarity update
   - 敵タップ可能表示の紫リングは非表示
   - 移動範囲は青、攻撃範囲は赤、攻撃対象は橙で明確化
   ============================================================ */
.b32-cell.enemy-inspectable::after {
  content: none !important;
  display: none !important;
  border: none !important;
  box-shadow: none !important;
}
.b32-cell.enemy-move-guide {
  background:
    linear-gradient(145deg, rgba(60,190,255,.46), rgba(10,80,135,.34)),
    rgba(20,120,190,.30) !important;
  border-color: rgba(70,205,255,.98) !important;
  box-shadow:
    inset 0 0 18px rgba(60,205,255,.42),
    0 0 18px rgba(40,175,255,.48),
    0 0 0 2px rgba(70,205,255,.52) !important;
}
.b32-cell.enemy-move-guide::after {
  content: 'MOVE' !important;
  position: absolute;
  left: 50%;
  top: 3px;
  transform: translateX(-50%);
  z-index: 8;
  font-family: 'Cinzel', serif;
  font-size: 7px;
  letter-spacing: 1px;
  color: rgba(230,250,255,.98);
  pointer-events: none;
  text-shadow: 0 0 7px rgba(0,120,255,.95), 0 1px 2px rgba(0,0,0,.55);
}
.b32-cell.enemy-attack-guide {
  background:
    linear-gradient(145deg, rgba(255,90,80,.48), rgba(120,22,28,.36)),
    rgba(180,42,45,.28) !important;
  border-color: rgba(255,95,92,.98) !important;
  box-shadow:
    inset 0 0 18px rgba(255,70,70,.42),
    0 0 18px rgba(255,50,50,.44),
    0 0 0 2px rgba(255,90,90,.46) !important;
}
.b32-cell.enemy-attack-guide::after {
  content: 'ATK' !important;
  position: absolute;
  left: 50%;
  top: 3px;
  transform: translateX(-50%);
  z-index: 8;
  font-family: 'Cinzel', serif;
  font-size: 7px;
  letter-spacing: 1px;
  color: rgba(255,245,240,.98);
  pointer-events: none;
  text-shadow: 0 0 7px rgba(255,30,30,.98), 0 1px 2px rgba(0,0,0,.55);
}
.b32-cell.enemy-attack-target {
  background:
    linear-gradient(145deg, rgba(255,200,72,.58), rgba(190,70,18,.38)),
    rgba(240,130,28,.34) !important;
  border-color: rgba(255,220,95,.98) !important;
  box-shadow:
    inset 0 0 20px rgba(255,210,80,.48),
    0 0 20px rgba(255,140,40,.52),
    0 0 0 2px rgba(255,210,90,.60) !important;
}
.b32-cell.enemy-attack-target::after {
  content: 'TARGET' !important;
  position: absolute;
  left: 50%;
  top: 3px;
  transform: translateX(-50%);
  z-index: 8;
  font-family: 'Cinzel', serif;
  font-size: 7px;
  letter-spacing: 1px;
  color: rgba(70,30,0,.95);
  pointer-events: none;
  text-shadow: 0 0 6px rgba(255,255,200,.95), 0 1px 2px rgba(255,255,255,.55);
}



/* ============================================================
   Enemy guide overlay fix
   背景色だけでは白背景/3Dグリッド上で薄く見えるため、
   敵の移動/攻撃ガイドにも専用spanを重ねて強調する。
   ============================================================ */
#battle32-root .b32-enemy-guide-overlay {
  position: absolute;
  inset: 2px;
  z-index: 21;
  pointer-events: none;
  border-radius: 4px;
  box-sizing: border-box;
}

#battle32-root .b32-enemy-guide-overlay.move {
  border: 2px solid rgba(40, 205, 255, 1);
  background:
    linear-gradient(145deg, rgba(60, 205, 255, .42), rgba(15, 110, 210, .26));
  box-shadow:
    0 0 14px rgba(50, 190, 255, .95),
    inset 0 0 12px rgba(50, 190, 255, .48);
}

#battle32-root .b32-enemy-guide-overlay.move::after {
  content: 'MOVE';
  position: absolute;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  font-family: 'Cinzel', serif;
  font-size: 7px;
  letter-spacing: 1px;
  color: rgba(235, 252, 255, .98);
  text-shadow: 0 0 7px rgba(0, 130, 255, .95), 0 1px 2px rgba(0,0,0,.55);
}

#battle32-root .b32-enemy-guide-overlay.attack {
  border: 2px solid rgba(255, 72, 72, 1);
  background:
    linear-gradient(145deg, rgba(255, 78, 72, .46), rgba(150, 18, 24, .30));
  box-shadow:
    0 0 16px rgba(255, 52, 52, .95),
    inset 0 0 13px rgba(255, 70, 70, .48);
}

#battle32-root .b32-enemy-guide-overlay.attack::after {
  content: 'ATK';
  position: absolute;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  font-family: 'Cinzel', serif;
  font-size: 7px;
  letter-spacing: 1px;
  color: rgba(255, 248, 244, .98);
  text-shadow: 0 0 7px rgba(255, 25, 25, .98), 0 1px 2px rgba(0,0,0,.55);
}

#battle32-root .b32-enemy-guide-overlay.target_ally {
  border: 2px solid rgba(255, 220, 80, 1);
  background:
    linear-gradient(145deg, rgba(255, 215, 70, .56), rgba(230, 92, 16, .34));
  box-shadow:
    0 0 18px rgba(255, 170, 36, .95),
    inset 0 0 14px rgba(255, 220, 80, .52);
}

#battle32-root .b32-enemy-guide-overlay.target_ally::after {
  content: 'TARGET';
  position: absolute;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  font-family: 'Cinzel', serif;
  font-size: 7px;
  letter-spacing: 1px;
  color: rgba(80, 32, 0, .96);
  text-shadow: 0 0 6px rgba(255, 255, 200, .95), 0 1px 2px rgba(255,255,255,.55);
}

/* 敵・味方ユニットはガイドより上に置く。ガイドはマス色として下に見える。 */
#battle32-root .b32-unit,
#battle32-root .b32-core-object {
  position: relative;
  z-index: 25;
}


/* ============================================================
   Layout cleanup: remove circular board ornament + top guide bar
   - 白い円形装飾を削除
   - 操作メッセージをステージ進捗の直下に移動
   ============================================================ */

/* ① グリッドに重なっていた白い円形デザインを完全に消す */
#battle32-root #b32-board-wrap::before,
#battle32-root.b32-vp-se #b32-board-wrap::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/* 背景側の同心円も薄い円形デザインに見えるため、アルケミア背景は線なしに整理 */
#battle32-root::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.56), rgba(236,238,234,.42)) !important;
}

/* ② メッセージ用の白いバーを、ST1/ST2/ST3/BOSS の直下へ */
#battle32-root #b32-bottom-guide {
  position: relative !important;
  flex: 0 0 auto !important;
  display: block !important;
  width: 100% !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  line-height: 22px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  color: rgba(80, 165, 220, .88) !important;
  background: rgba(255,255,255,.76) !important;
  border-top: 1px solid rgba(80,160,220,.08) !important;
  border-bottom: 1px solid rgba(80,160,220,.12) !important;
  box-shadow: 0 5px 18px rgba(60,80,110,.045) !important;
  text-shadow: none !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* 旧ヒントバーは b32-bottom-guide に統合するため、表示だけ無効化 */
#battle32-root #b32-hint-bar,
#battle32-root #b32-hint-bar.skill-hint {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* 下部エリア内にガイドが無くなった分、カード側の上詰まりを自然にする */
#battle32-root #b32-bottom-area {
  margin-top: 0 !important;
}

#battle32-root.b32-vp-se #b32-bottom-guide {
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  line-height: 18px !important;
  font-size: 9px !important;
  padding: 0 8px !important;
}


/* ============================================================
  Zone labels removed
  右側に表示されていた ENEMY / ALLY の縦文字は不要のため非表示。
  JS側でも生成しないが、古いDOM/キャッシュ対策としてCSSでも完全に消す。
 ============================================================ */
#battle32-root .b32-zone-label {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}


/* ============================================================
   PATCH: スキル/ULT確認パネル 2列レイアウト
   形式:
   スキル名
   攻撃倍率：        critical率：
   追加効果：        消費LINK：
   [決定]            [キャンセル]
   ============================================================ */
#b32-action-detail-portal .b32-action-detail-panel-compact {
  padding: 9px 12px 8px !important;
}

#b32-action-detail-portal .b32-action-detail-panel-compact .b32-action-detail-title {
  margin-bottom: 7px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

#b32-action-detail-portal .b32-action-detail-summary-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 14px !important;
  row-gap: 5px !important;
  margin: 0 0 8px !important;
}

#b32-action-detail-portal .b32-action-detail-summary-item {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: baseline !important;
  gap: 4px !important;
  min-width: 0 !important;
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  letter-spacing: .03em !important;
}

#b32-action-detail-portal .b32-action-detail-summary-item span {
  color: rgba(70,78,104,.62) !important;
  white-space: nowrap !important;
}

#b32-action-detail-portal .b32-action-detail-summary-item strong {
  color: rgba(28,36,58,.94) !important;
  font-weight: 700 !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#b32-action-detail-portal .b32-action-detail-panel-compact .b32-action-detail-buttons {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  padding-top: 2px !important;
}

#b32-action-detail-portal .b32-action-detail-panel-compact .b32-action-detail-btn {
  width: 100% !important;
}

@media (max-width: 430px) and (max-height: 740px) {
  #b32-action-detail-portal .b32-action-detail-summary-grid {
    column-gap: 10px !important;
    row-gap: 4px !important;
  }

  #b32-action-detail-portal .b32-action-detail-summary-item {
    font-size: 10px !important;
  }
}

/* ============================================================
 能力変動表示（バフ / デバフ）
 ============================================================ */
#battle32-root .b32-status-badges {
 position: absolute;
 left: 50%;
 bottom: calc(var(--cell-size) * 1.18);
 transform: translateX(-50%);
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 2px;
 z-index: 8;
 pointer-events: none;
 white-space: nowrap;
}

#battle32-root .b32-status-badges.compact {
 bottom: calc(var(--cell-size) * 1.24);
 transform: translateX(-50%) scale(.86);
 transform-origin: center bottom;
}

#battle32-root .b32-status-badge {
 min-width: 34px;
 padding: 1px 5px 2px;
 border-radius: 999px;
 font-family: 'Cinzel', 'Noto Serif JP', serif;
 font-size: 8px;
 font-weight: 800;
 letter-spacing: .5px;
 line-height: 1.1;
 text-align: center;
 background: rgba(0,0,0,.62);
 border: 1px solid rgba(255,255,255,.20);
 box-shadow: 0 0 8px rgba(0,0,0,.42);
}

#battle32-root .b32-status-badge.buff {
 color: #bfffe6;
 border-color: rgba(100,255,190,.60);
 text-shadow: 0 0 6px rgba(80,255,180,.70);
 box-shadow:
  0 0 8px rgba(80,255,180,.24),
  inset 0 0 6px rgba(80,255,180,.12);
}

#battle32-root .b32-status-badge.debuff {
 color: #ffc2df;
 border-color: rgba(255,90,170,.60);
 text-shadow: 0 0 6px rgba(255,80,160,.70);
 box-shadow:
  0 0 8px rgba(255,80,160,.22),
  inset 0 0 6px rgba(255,80,160,.12);
}

#battle32-root .b32-party-card .b32-status-badges {
 position: static;
 transform: none;
 flex-direction: row;
 justify-content: center;
 flex-wrap: wrap;
 gap: 2px;
 margin-top: 2px;
 max-width: 100%;
}

#battle32-root .b32-party-card .b32-status-badge {
 font-size: 7px;
 padding: 1px 4px;
 min-width: 0;
 max-width: 100%;
 overflow: hidden;
 text-overflow: ellipsis;
}

.b32-status-change-pop {
 position: fixed;
 z-index: 1000001;
 pointer-events: none;
 transform: translate(-50%, -50%);
 font-family: 'Cinzel', 'Noto Serif JP', serif;
 font-size: 18px;
 font-weight: 900;
 letter-spacing: 1px;
 white-space: nowrap;
 animation: b32StatusChangePop 1050ms ease-out forwards;
}

.b32-status-change-pop.buff {
 color: #caffef;
 text-shadow:
  0 0 10px rgba(255,255,255,.90),
  0 0 20px rgba(80,255,180,.90),
  0 2px 4px rgba(0,0,0,.95);
}

.b32-status-change-pop.debuff {
 color: #ffc1df;
 text-shadow:
  0 0 10px rgba(255,255,255,.72),
  0 0 22px rgba(255,70,160,.92),
  0 2px 4px rgba(0,0,0,.95);
}

.b32-status-change-pop.status {
 color: #d7e8ff;
 text-shadow:
  0 0 10px rgba(255,255,255,.70),
  0 0 20px rgba(120,180,255,.80),
  0 2px 4px rgba(0,0,0,.95);
}

.b32-status-change-ring {
 position: fixed;
 z-index: 1000000;
 pointer-events: none;
 width: 58px;
 height: 24px;
 border-radius: 50%;
 transform: translate(-50%, -50%);
 animation: b32StatusChangeRing 760ms ease-out forwards;
}

.b32-status-change-ring.buff {
 border: 1px solid rgba(100,255,190,.85);
 box-shadow: 0 0 16px rgba(80,255,180,.58), inset 0 0 12px rgba(80,255,180,.30);
}

.b32-status-change-ring.debuff {
 border: 1px solid rgba(255,90,170,.85);
 box-shadow: 0 0 16px rgba(255,80,160,.58), inset 0 0 12px rgba(255,80,160,.30);
}

.b32-status-change-ring.status {
 border: 1px solid rgba(140,190,255,.80);
 box-shadow: 0 0 16px rgba(120,180,255,.52), inset 0 0 12px rgba(120,180,255,.26);
}

@keyframes b32StatusChangePop {
 0% { opacity: 0; transform: translate(-50%, -25%) scale(.76); }
 18% { opacity: 1; transform: translate(-50%, -72%) scale(1.16); }
 58% { opacity: 1; transform: translate(-50%, -98%) scale(1); }
 100% { opacity: 0; transform: translate(-50%, -135%) scale(.92); }
}

@keyframes b32StatusChangeRing {
 0% { opacity: 0; transform: translate(-50%, -50%) scale(.45); }
 20% { opacity: 1; }
 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.75); }
}


/* ============================================================
   PATCH: 能力変動表示をユニットHPバーの下へ移動
   ============================================================ */
#battle32-root .b32-unit-foot-ui {
  position: absolute !important;
  bottom: -12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  width: calc(var(--cell-size) * 1.18) !important;
  height: auto !important;
  z-index: 12 !important;
  pointer-events: none !important;
}

#battle32-root .b32-unit-foot-main {
  width: calc(var(--cell-size) * 1.02) !important;
  height: 10px !important;
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
}

#battle32-root .b32-unit-foot-main .b32-hp-bar-wrap {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: calc(var(--cell-size) * 0.68) !important;
  height: 3px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#battle32-root .b32-unit.ally .b32-unit-foot-main .b32-hp-bar-wrap {
  height: 2px !important;
}

#battle32-root .b32-unit-foot-ui .b32-status-badges,
#battle32-root .b32-unit-foot-ui .b32-status-badges.compact {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
  max-width: calc(var(--cell-size) * 1.28) !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

#battle32-root .b32-unit-foot-ui .b32-status-badge {
  min-width: 0 !important;
  max-width: calc(var(--cell-size) * 1.18) !important;
  padding: 1px 4px 2px !important;
  font-size: 7px !important;
  line-height: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* ローグライト報酬などの永続補正バッジ */
#battle32-root .b32-status-badge.passive {
  border-style: double;
  box-shadow:
    0 0 7px rgba(120,210,255,.34),
    inset 0 0 5px rgba(255,255,255,.10);
}


/* ============================================================
 敵クイック情報パネル：ドラッグ移動対応
 - タイトル行をドラッグして、バトル中だけ好きな位置へ移動できる
 ============================================================ */
.b32-enemy-quick-info {
  user-select: none;
  -webkit-user-select: none;
}

.b32-enemy-quick-drag-handle {
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  padding: 2px 18px 2px 18px;
  margin: -2px -4px 4px;
  position: relative;
}

.b32-enemy-quick-drag-handle:active,
.b32-enemy-quick-info.is-dragging .b32-enemy-quick-drag-handle {
  cursor: grabbing;
}

.b32-enemy-quick-drag-mark {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0;
  opacity: .42;
  pointer-events: none;
}

.b32-enemy-quick-info.is-dragging {
  transition: none !important;
  opacity: .96;
}


/* 左吸い寄せ防止：敵クイック情報は transform 中央寄せを使わず left/top のpx座標で動かす */
#b32-enemy-quick-info,
.b32-enemy-quick-info {
  transform: none !important;
  transition: opacity .16s ease, left .12s ease, top .12s ease !important;
}
.b32-enemy-quick-info.is-dragging {
  transition: none !important;
}


/* Enemy quick info drag performance patch */
#b32-enemy-quick-info,
.b32-enemy-quick-info {
  transform: none !important;
  will-change: auto;
  contain: layout paint style;
}

#b32-enemy-quick-info.is-dragging,
.b32-enemy-quick-info.is-dragging {
  transition: none !important;
  will-change: left, top;
}

/* ============================================================
 敵クイック情報：閉じるボタン右上・白色固定
 ============================================================ */
#b32-enemy-quick-info,
.b32-enemy-quick-info {
  position: fixed;
  transform: none !important;
  overflow: visible;
  padding-top: 10px !important;
}

#b32-enemy-quick-info .b32-enemy-quick-title,
.b32-enemy-quick-info .b32-enemy-quick-title {
  padding-right: 28px;
}

#b32-enemy-quick-info .b32-enemy-quick-actions,
.b32-enemy-quick-info .b32-enemy-quick-actions {
  grid-template-columns: 1fr 1fr !important;
}

#b32-enemy-quick-info .b32-enemy-quick-close,
.b32-enemy-quick-info .b32-enemy-quick-close {
  position: absolute !important;
  top: 5px !important;
  right: 6px !important;
  left: auto !important;
  bottom: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;

  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.38) !important;
  background: rgba(255,255,255,.12) !important;
  color: #ffffff !important;

  font-family: 'Cinzel', serif !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(255,255,255,.45) !important;
  box-shadow: 0 0 8px rgba(255,255,255,.10) !important;

  cursor: pointer !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  z-index: 4 !important;
}

#b32-enemy-quick-info .b32-enemy-quick-close:active,
.b32-enemy-quick-info .b32-enemy-quick-close:active {
  background: rgba(255,255,255,.22) !important;
  color: #ffffff !important;
}


/* ============================================================
   Neutral grid zones
   敵攻撃範囲を表示していない通常時は、敵側マスを赤・紫に染めない。
   赤表示は .enemy-attack-guide / .boss-danger-* が付いた時だけ行う。
   ============================================================ */
#battle32-root .b32-cell.enemy-zone {
  background: rgba(255, 255, 255, .36) !important;
  border-color: rgba(85, 92, 118, .12) !important;
  box-shadow: inset 0 0 10px rgba(80, 90, 120, .025) !important;
}

#battle32-root .b32-cell.enemy-zone::before {
  border-color: rgba(42, 45, 55, .11) !important;
  opacity: .72 !important;
}

/* 攻撃範囲表示中だけ、既存の赤いガイドを優先する */
#battle32-root .b32-cell.enemy-zone.enemy-attack-guide,
#battle32-root .b32-cell.enemy-zone.enemy-attack-target,
#battle32-root .b32-cell.enemy-zone.boss-danger-normal,
#battle32-root .b32-cell.enemy-zone.boss-danger-warn,
#battle32-root .b32-cell.enemy-zone.boss-danger-line {
  border-color: rgba(255, 95, 92, .98) !important;
}

/* ============================================================
   PATCH: Boss unit above the boss HP bar
   - HP UI remains in its normal layout position
   - only overflowing boss artwork is painted in front of it
   ============================================================ */
#battle32-root #b32-boss-hp-ui {
  position: relative !important;
  z-index: 2 !important;
}

#battle32-root #b32-scroll {
  position: relative !important;
  z-index: 3 !important;
  overflow: visible !important;
}

#battle32-root #b32-board-wrap,
#battle32-root #b32-board,
#battle32-root .b32-cell {
  overflow: visible !important;
}

#battle32-root .b32-unit.enemy.boss {
  z-index: 120 !important;
  overflow: visible !important;
  isolation: auto !important;
}

#battle32-root .b32-unit.enemy.boss .b32-unit-icon {
  position: relative !important;
  z-index: 121 !important;
}


/* ============================================================
   Battle background — designer controlled numbered assets
   battle_bg_01.webp / 02 / 03 ...
   ============================================================ */
#battle32-root::before {
  background-image: var(--b32-battle-background-image, url('../images/battle_bg_01.webp')) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  opacity: .50 !important;
  filter: brightness(1.04) saturate(.88) contrast(.96) !important;
}

/* 背景を消していた白空間用の塗りを、薄い可読性レイヤーとしてだけ残す */
#battle32-root::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.12) 44%, rgba(247,247,243,.30)) !important;
}


/* ============================================================
   Battle menu button: compact hamburger icon
   ============================================================ */
#b32-battle-menu-btn {
  min-width: 0 !important;
  width: 34px !important;
  height: 30px !important;
  padding: 0 !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  letter-spacing: 0 !important;
}

#b32-battle-menu-btn .b32-menu-line {
  display: block;
  width: 14px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  opacity: .9;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}

#b32-battle-menu.open #b32-battle-menu-btn .b32-menu-line:nth-child(1) {
  transform: translateY(4.5px) rotate(45deg);
}
#b32-battle-menu.open #b32-battle-menu-btn .b32-menu-line:nth-child(2) {
  opacity: 0;
}
#b32-battle-menu.open #b32-battle-menu-btn .b32-menu-line:nth-child(3) {
  transform: translateY(-4.5px) rotate(-45deg);
}


/* ============================================================
   iPhone SE: battle menu vertical alignment only
   14 Proなど通常高さの端末には影響させない
   ============================================================ */
@media (max-width: 390px) and (max-height: 700px) {
  #b32-battle-menu {
    top: calc(env(safe-area-inset-top, 0px) + 6px) !important;
  }
}


/* ============================================================
   Fixed battle header height / stable menu alignment
   雑魚戦・ボス戦でヘッダー高を統一する
   ============================================================ */
#battle32-root #b32-header {
  box-sizing: border-box !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  grid-template-columns: minmax(0, 1fr) auto 38px !important;
  overflow: hidden !important;
}

#battle32-root #b32-turn-box {
  min-width: 0 !important;
  overflow: hidden !important;
}

#battle32-root #b32-battle-title,
#battle32-root #b32-battle-subtitle {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

#battle32-root #b32-battle-title {
  line-height: 17px !important;
}

#battle32-root #b32-battle-subtitle {
  line-height: 11px !important;
}

/* body直下のメニューを固定ヘッダー中央へ合わせる */
#b32-battle-menu {
  top: calc(env(safe-area-inset-top, 0px) + 11px) !important;
  right: 10px !important;
}

/* 旧SE専用の個別位置補正を上書きし、全戦闘で同じ基準にする */
@media (max-width: 390px) and (max-height: 700px) {
  #battle32-root #b32-header {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
  }

  /* SEだけ大きく上へ寄せる。14 Pro等には影響しない */
  #b32-battle-menu {
    top: calc(env(safe-area-inset-top, 0px) + 1px) !important;
  }
}


/* ============================================================
   iPhone 14 / 14 Pro: menu button slightly higher
   SEの強い補正とは分離し、通常高さ端末は4pxだけ上げる
   ============================================================ */
@media (max-width: 430px) and (min-height: 701px) and (max-height: 900px) {
  #b32-battle-menu {
    top: calc(env(safe-area-inset-top, 0px) + 7px) !important;
  }
}

/* ============================================================
   B32 VISUAL REFINEMENT PATCH 2026-07-12
   - grid: warm beige, all zones unified
   - text: stronger navy contrast
   - character cards / bottom navigation: richer layered finish
   ============================================================ */

/* 1) 全グリッドを同じベージュへ統一 */
#battle32-root .b32-cell,
#battle32-root .b32-cell.ally-zone,
#battle32-root .b32-cell.enemy-zone {
  background:
    linear-gradient(145deg, rgba(255,255,255,.46), rgba(226,215,195,.24)),
    rgba(236, 228, 212, .58) !important;
  border-color: rgba(125, 104, 76, .20) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.30),
    inset 0 0 12px rgba(128,104,70,.035) !important;
}

#battle32-root .b32-cell::before,
#battle32-root .b32-cell.ally-zone::before,
#battle32-root .b32-cell.enemy-zone::before {
  border-color: rgba(116, 96, 70, .105) !important;
  opacity: .62 !important;
}

/* 味方側・敵側を示す常設ガイドを完全に消す */
#battle32-root .b32-cell.row-divider {
  border-top-color: rgba(125, 104, 76, .20) !important;
}
#battle32-root .b32-zone-label {
  display: none !important;
}

/* 操作中の射程・危険範囲ハイライトは既存機能として残す */

/* 2) 背景に飲まれる文字をネイビーで強化 */
#battle32-root {
  color: #24314f !important;
}

#battle32-root #b32-battle-title,
#battle32-root #b32-turn-num-large,
#battle32-root #b32-turn-max,
#battle32-root #b32-phase-badge,
#battle32-root #b32-turn-label,
#battle32-root #b32-stage-id,
#battle32-root #b32-battle-subtitle,
#battle32-root .b32-party-name,
#battle32-root .b32-party-hp-num,
#battle32-root .b32-party-hp-max,
#battle32-root .b32-bottom-action-label,
#battle32-root .b32-bottom-action-sub,
#battle32-root .b32-bottom-action-cost,
#battle32-root .b32-bottom-action-icon,
#battle32-root .b32-skill-name,
#battle32-root .b32-skill-desc,
#battle32-root .b32-roster-hp-text,
#b32-roster-panel .b32-roster-hp-text {
  color: rgba(31, 45, 76, .92) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.65) !important;
}

#battle32-root #b32-battle-subtitle,
#battle32-root #b32-turn-label,
#battle32-root #b32-stage-id,
#battle32-root .b32-bottom-action-sub,
#battle32-root .b32-bottom-action-cost,
#battle32-root .b32-party-hp-max {
  color: rgba(52, 67, 99, .66) !important;
}

/* 3) キャラパネルをリッチ化 */
#battle32-root .b32-party-card,
#b32-roster-panel .b32-roster-card {
  border-radius: 3px !important;
  border: 1px solid rgba(83, 72, 58, .22) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(250,247,239,.95) 64%, rgba(234,226,212,.96) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(123,101,72,.10),
    0 5px 13px rgba(44,50,68,.12),
    0 1px 2px rgba(44,50,68,.10) !important;
  overflow: hidden !important;
}

#battle32-root .b32-party-card::before,
#b32-roster-panel .b32-roster-card::before {
  height: 2px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(161,128,74,.16) 14%,
    rgba(198,162,96,.68) 50%,
    rgba(161,128,74,.16) 86%,
    transparent 100%) !important;
}

#battle32-root .b32-party-card::after,
#b32-roster-panel .b32-roster-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 4px !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 1px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.18), transparent 45%) !important;
  pointer-events: none !important;
}

#battle32-root .b32-party-card.selected,
#battle32-root .b32-party-card.active,
#b32-roster-panel .b32-roster-card.selected,
#b32-roster-panel .b32-roster-card.active {
  border-color: rgba(128, 96, 166, .52) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,242,251,.97) 64%, rgba(225,217,238,.97)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -2px 0 rgba(126,82,204,.46),
    0 0 0 1px rgba(126,82,204,.10),
    0 7px 16px rgba(61,52,90,.18) !important;
}

#battle32-root .b32-party-img-wrap,
#b32-roster-panel .b32-roster-img-wrap {
  background:
    radial-gradient(ellipse at 50% 82%, rgba(196,178,144,.20), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(225,216,198,.12)) !important;
}

#battle32-root .b32-party-img,
#b32-roster-panel img {
  filter:
    drop-shadow(0 5px 5px rgba(38,43,58,.24))
    drop-shadow(0 1px 0 rgba(255,255,255,.42))
    brightness(1.02) contrast(1.035) !important;
}

#battle32-root .b32-party-hp-bar-wrap,
#b32-roster-panel .b32-roster-hp-bar-wrap {
  height: 4px !important;
  background: rgba(45,52,68,.15) !important;
  border: 1px solid rgba(47,59,82,.15) !important;
  box-shadow: inset 0 1px 2px rgba(32,38,52,.14) !important;
}

/* 4) ボトムナビをリッチ化 */
#battle32-root #b32-actions {
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(239,235,226,.985)) !important;
  border-top: 1px solid rgba(100,83,62,.20) !important;
  box-shadow:
    0 -8px 24px rgba(41,47,64,.10),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

#battle32-root .b32-bottom-action {
  position: relative !important;
  border-radius: 2px !important;
  border: 1px solid rgba(84,76,66,.18) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,245,237,.98)) !important;
  color: rgba(31,45,76,.92) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(114,94,66,.08),
    0 3px 8px rgba(43,49,66,.08) !important;
}

#battle32-root .b32-bottom-action::before {
  content: '' !important;
  position: absolute !important;
  left: 16% !important;
  right: 16% !important;
  top: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(180,145,86,.58), transparent) !important;
  pointer-events: none !important;
}

#battle32-root .b32-bottom-action:not(.disabled):active {
  transform: translateY(1px) !important;
  background: linear-gradient(180deg, rgba(245,241,232,.98), rgba(255,255,255,.98)) !important;
  box-shadow:
    inset 0 2px 4px rgba(45,50,65,.08),
    0 1px 3px rgba(43,49,66,.06) !important;
}

#battle32-root .b32-bottom-action.is-active,
#battle32-root .b32-bottom-action.summon.is-active,
#battle32-root .b32-bottom-action.move.is-active,
#battle32-root .b32-bottom-action.skill.is-active,
#battle32-root .b32-bottom-action.ult.is-active {
  border-color: rgba(126,82,204,.42) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(241,236,250,.99)) !important;
  box-shadow:
    inset 0 -3px 0 rgba(126,82,204,.68),
    inset 0 1px 0 rgba(255,255,255,1),
    0 4px 12px rgba(77,60,112,.13) !important;
}

#battle32-root .b32-bottom-action.end {
  border-color: rgba(190,137,67,.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(250,242,225,.99)) !important;
  box-shadow:
    inset 0 -2px 0 rgba(199,143,70,.38),
    inset 0 1px 0 rgba(255,255,255,1),
    0 3px 8px rgba(70,56,38,.08) !important;
}


/* ============================================================
   Patch: キャラパネル内側の白い囲み線を削除
   ============================================================ */
#battle32-root .b32-party-card::after,
#b32-roster-panel .b32-roster-card::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* ============================================================
   ZERAPHIA LIGHT LUXURY UI POLISH — CSS ONLY
   HTML / images / layout are intentionally untouched.
   ============================================================ */

/* ---------- Header ---------- */
#battle32-root #b32-header {
  background:
    linear-gradient(180deg, rgba(255,255,255,.965), rgba(244,242,236,.925)) !important;
  border-bottom: 1px solid rgba(74,82,103,.15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 5px 14px rgba(42,48,64,.07) !important;
  backdrop-filter: blur(5px) !important;
}

#battle32-root #b32-battle-title,
#battle32-root #b32-turn-num-large,
#battle32-root #b32-battle-menu-btn {
  color: rgba(31,44,73,.96) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.84) !important;
}

#battle32-root #b32-battle-subtitle,
#battle32-root #b32-phase-badge,
#battle32-root #b32-turn-label,
#battle32-root #b32-turn-slash,
#battle32-root #b32-turn-max,
#battle32-root #b32-stage-id,
#battle32-root #b32-stage-id-right {
  color: rgba(76,91,119,.64) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.68) !important;
}

#battle32-root #b32-battle-menu-btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(239,239,235,.94)) !important;
  border: 1px solid rgba(73,83,107,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(61,70,91,.07),
    0 3px 9px rgba(42,48,64,.09) !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease !important;
}

#battle32-root #b32-battle-menu-btn:active,
#battle32-root #b32-battle-menu.open #b32-battle-menu-btn {
  transform: translateY(1px) !important;
  background: linear-gradient(180deg, rgba(239,239,235,.96), rgba(255,255,255,.98)) !important;
  box-shadow:
    inset 0 2px 4px rgba(55,62,81,.08),
    0 1px 4px rgba(42,48,64,.06) !important;
}

/* ---------- Enemy / boss information band ---------- */
#battle32-root #b32-boss-hp-ui {
  background:
    linear-gradient(180deg, rgba(255,255,255,.91), rgba(247,243,234,.88)) !important;
  border-top: 1px solid rgba(255,255,255,.82) !important;
  border-bottom: 1px solid rgba(93,83,72,.17) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 5px 13px rgba(52,55,68,.075) !important;
  backdrop-filter: blur(4px) !important;
}

#battle32-root #b32-boss-hp-ui::before {
  background: linear-gradient(90deg, transparent, rgba(158,113,111,.28), transparent) !important;
  opacity: .8 !important;
}

#battle32-root #b32-boss-hp-name {
  color: rgba(132,71,72,.92) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.74) !important;
}

#battle32-root #b32-boss-hp-text {
  color: rgba(32,45,72,.95) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.80) !important;
}

#battle32-root #b32-boss-hp-resistance-label {
  color: rgba(78,92,119,.58) !important;
  text-shadow: none !important;
}

#battle32-root #b32-boss-hp-bar-wrap {
  background: linear-gradient(180deg, rgba(205,207,211,.52), rgba(232,232,229,.76)) !important;
  border: 1px solid rgba(95,92,92,.16) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 2px rgba(50,52,58,.13),
    0 1px 0 rgba(255,255,255,.72) !important;
}

#battle32-root #b32-boss-hp-bar {
  background:
    linear-gradient(180deg, rgba(244,151,148,.98) 0%, rgba(218,102,103,.96) 58%, rgba(188,78,82,.94) 100%) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,225,222,.72),
    inset 0 -1px 0 rgba(126,50,55,.20),
    0 1px 3px rgba(157,68,72,.18) !important;
}

#battle32-root #b32-boss-hp-bar::after {
  background: linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,0)) !important;
  opacity: .75 !important;
}

/* Boss character separation without changing the image */
#battle32-root .b32-unit.enemy.boss {
  position: absolute !important;
}

#battle32-root .b32-unit.enemy.boss::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  bottom: 4% !important;
  width: 115% !important;
  height: 72% !important;
  border-radius: 50% !important;
  transform: translateX(-50%) !important;
  background: radial-gradient(circle, rgba(255,255,255,.48) 0%, rgba(228,220,204,.18) 45%, transparent 72%) !important;
  opacity: .72 !important;
  filter: blur(4px) !important;
  pointer-events: none !important;
}

#battle32-root .b32-unit.enemy.boss .b32-unit-icon {
  filter:
    drop-shadow(0 7px 6px rgba(50,48,57,.22))
    drop-shadow(0 1px 0 rgba(255,255,255,.56))
    brightness(1.025) contrast(1.025) !important;
}

/* ---------- Unified battle grid ---------- */
#battle32-root .b32-cell,
#battle32-root .b32-cell.ally-zone,
#battle32-root .b32-cell.enemy-zone {
  border-radius: 3px !important;
  border: 1px solid rgba(126,108,83,.28) !important;
  background:
    linear-gradient(155deg, rgba(255,255,255,.67) 0%, rgba(243,238,226,.58) 48%, rgba(220,210,191,.42) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -2px 3px rgba(104,88,65,.055),
    0 1px 3px rgba(65,62,58,.055) !important;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

#battle32-root .b32-cell::before,
#battle32-root .b32-cell.ally-zone::before,
#battle32-root .b32-cell.enemy-zone::before {
  border-color: rgba(116,99,76,.085) !important;
  opacity: .42 !important;
}

#battle32-root .b32-cell.row-divider {
  border-top-color: rgba(126,108,83,.28) !important;
}

#battle32-root .b32-cell.movable {
  background:
    linear-gradient(155deg, rgba(255,255,255,.72), rgba(226,238,239,.50), rgba(220,210,191,.35)) !important;
  border-color: rgba(112,165,176,.60) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    inset 0 0 8px rgba(116,188,198,.09),
    0 0 7px rgba(102,174,186,.16) !important;
}

#battle32-root .b32-cell.movable::after {
  border: 1px solid rgba(127,187,197,.72) !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 0 5px rgba(255,255,255,.42),
    0 0 6px rgba(104,176,189,.18) !important;
}

#battle32-root .b32-cell.selected-unit,
#battle32-root .b32-cell.skill-selected {
  border-color: rgba(158,136,91,.72) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,250,226,.70),
    inset 0 1px 0 rgba(255,255,255,.94),
    0 0 9px rgba(178,145,75,.22) !important;
}

#battle32-root .b32-cell.skill-selected::after {
  border: 1px solid rgba(184,157,103,.80) !important;
  border-radius: 3px !important;
  box-shadow:
    inset 0 0 5px rgba(255,255,255,.52),
    0 0 7px rgba(183,150,82,.20) !important;
}

/* ---------- LINK gauge ---------- */
#battle32-root #b32-link-bar .b32-link-label,
#battle32-root #b32-link-bar .b32-link-count {
  color: rgba(38,50,78,.86) !important;
  letter-spacing: 2px !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.78) !important;
}

#battle32-root #b32-link-bar .b32-link-pill {
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(241,239,234,.90)) !important;
  border: 1px solid rgba(99,104,123,.18) !important;
  border-radius: 999px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(61,67,83,.06),
    0 7px 17px rgba(43,48,64,.11) !important;
  backdrop-filter: blur(4px) !important;
}

#battle32-root #b32-link-bar .b32-link-pill::before {
  content: '' !important;
  position: absolute !important;
  top: 16px !important;
  bottom: 16px !important;
  left: 50% !important;
  width: 1px !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, transparent, rgba(117,103,153,.16), transparent) !important;
  opacity: .75 !important;
  pointer-events: none !important;
}

#battle32-root #b32-link-bar .b32-link-diamond {
  filter: brightness(1.06) saturate(1.08) drop-shadow(0 2px 2px rgba(102,64,174,.20)) !important;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.40),
    0 0 5px rgba(137,87,225,.20) !important;
}

/* ---------- Character cards ---------- */
#battle32-root .b32-party-card,
#b32-roster-panel .b32-roster-card {
  border-radius: 4px !important;
  border: 1px solid rgba(110,99,84,.23) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.955) 0%, rgba(250,248,242,.94) 63%, rgba(236,229,216,.945) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(111,92,67,.07),
    0 4px 10px rgba(45,49,62,.105) !important;
  backdrop-filter: blur(3px) !important;
  transition: transform .15s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

/* explicitly remove the full inner white frame */
#battle32-root .b32-party-card::after,
#b32-roster-panel .b32-roster-card::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#battle32-root .b32-party-card::before,
#b32-roster-panel .b32-roster-card::before {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(174,149,104,.34), transparent) !important;
  opacity: .72 !important;
}

#battle32-root .b32-party-card.selected,
#battle32-root .b32-party-card.active,
#b32-roster-panel .b32-roster-card.selected,
#b32-roster-panel .b32-roster-card.active {
  border-color: rgba(178,145,78,.62) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(252,248,236,.965) 62%, rgba(239,226,196,.95)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -2px 0 rgba(190,151,72,.25),
    0 0 8px rgba(190,151,72,.14),
    0 5px 12px rgba(52,50,48,.12) !important;
}

#battle32-root .b32-party-name,
#b32-roster-panel .b32-roster-name {
  color: rgba(31,44,73,.95) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.76) !important;
}

#battle32-root .b32-party-row,
#battle32-root .b32-party-link,
#b32-roster-panel .b32-roster-link {
  color: rgba(76,92,118,.72) !important;
}

#battle32-root .b32-party-hp-num,
#b32-roster-panel .b32-roster-hp-text {
  color: rgba(50,55,65,.87) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.70) !important;
}

#battle32-root .b32-party-hp-bar-wrap,
#b32-roster-panel .b32-roster-hp-bar-wrap {
  height: 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(183,188,193,.38), rgba(222,224,222,.62)) !important;
  border: 1px solid rgba(77,88,102,.13) !important;
  box-shadow: inset 0 1px 2px rgba(39,47,58,.12) !important;
}

#battle32-root .b32-party-hp-bar,
#b32-roster-panel .b32-roster-hp-bar {
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(113,216,224,.96) 0%, rgba(45,172,196,.95) 58%, rgba(38,136,169,.94) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(222,255,255,.68),
    0 1px 3px rgba(44,151,180,.20) !important;
}

#battle32-root .b32-party-element-icon,
#b32-roster-panel .b32-roster-element-icon {
  border: 1px solid rgba(255,255,255,.86) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255,255,255,.78), rgba(237,235,228,.38)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 2px 5px rgba(42,48,64,.14) !important;
  filter: brightness(1.04) saturate(.96) !important;
}

/* ---------- Bottom navigation ---------- */
#battle32-root #b32-actions {
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(239,235,226,.965)) !important;
  border-top: 1px solid rgba(91,84,74,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 -7px 18px rgba(43,47,59,.08) !important;
  backdrop-filter: blur(5px) !important;
}

#battle32-root .b32-bottom-action,
#battle32-root .b32-bottom-action.end {
  border-radius: 3px !important;
  border: 1px solid rgba(92,86,77,.20) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.985), rgba(245,241,232,.97)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(105,90,68,.07),
    0 2px 6px rgba(43,48,61,.075) !important;
  transition: transform .14s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

#battle32-root .b32-bottom-action::before {
  background: linear-gradient(90deg, transparent, rgba(142,122,88,.25), transparent) !important;
  opacity: .75 !important;
}

#battle32-root .b32-bottom-action-icon,
#battle32-root .b32-bottom-action-label {
  color: rgba(34,48,77,.88) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.78) !important;
}

#battle32-root .b32-bottom-action-cost,
#battle32-root .b32-bottom-action-sub {
  color: rgba(81,96,121,.57) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.68) !important;
}

#battle32-root .b32-bottom-action.disabled,
#battle32-root .b32-bottom-action:disabled {
  opacity: .40 !important;
  filter: saturate(.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
}

#battle32-root .b32-bottom-action.is-active,
#battle32-root .b32-bottom-action.summon.is-active,
#battle32-root .b32-bottom-action.move.is-active,
#battle32-root .b32-bottom-action.skill.is-active,
#battle32-root .b32-bottom-action.ult.is-active,
#battle32-root .b32-bottom-action.end.is-active {
  border-color: rgba(184,148,78,.55) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(246,237,217,.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -2px 0 rgba(186,146,69,.24),
    0 0 7px rgba(187,149,76,.12),
    0 3px 8px rgba(54,51,47,.08) !important;
}

#battle32-root .b32-bottom-action:not(.disabled):active {
  transform: translateY(1px) !important;
  background: linear-gradient(180deg, rgba(242,238,229,.98), rgba(255,255,255,.99)) !important;
  box-shadow:
    inset 0 2px 4px rgba(50,54,65,.08),
    0 1px 3px rgba(43,48,61,.05) !important;
}

/* ============================================================
   キャラ詳細：SKILL / ULT / COMBO 3ページ切替
   ============================================================ */
#battle32-root .b32-roster-skill-pager {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: stretch;
  gap: 4px;
  width: 100%;
  min-width: 0;
  touch-action: pan-y;
}
#battle32-root .b32-roster-page-viewport {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(94, 72, 155, .16);
  background: rgba(255, 255, 255, .34);
  padding: 4px 5px 3px;
}
#battle32-root .b32-roster-page-label {
  font-family: 'Cinzel', serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: rgba(74, 52, 115, .72);
  margin: 0 0 3px;
}
#battle32-root .b32-roster-page-arrow {
  border: 1px solid rgba(92, 68, 145, .18);
  background: rgba(255, 255, 255, .48);
  color: rgba(67, 48, 105, .72);
  font-family: serif;
  font-size: 24px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
#battle32-root .b32-roster-page-arrow:active {
  background: rgba(113, 82, 181, .12);
}
#battle32-root .b32-roster-page-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 3px;
}
#battle32-root .b32-roster-page-dots button {
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(86, 65, 130, .22);
}
#battle32-root .b32-roster-page-dots button.active {
  background: rgba(113, 78, 190, .78);
  box-shadow: 0 0 5px rgba(113, 78, 190, .32);
}
#battle32-root .b32-roster-skill-detail.is-combo {
  border-color: rgba(121, 79, 196, .28);
  background: linear-gradient(135deg, rgba(116, 76, 184, .08), rgba(255,255,255,.28));
}
#battle32-root .b32-roster-skill-detail.is-combo .b32-roster-skill-badge {
  color: #6f4ca6;
  border-color: rgba(111, 76, 166, .30);
  background: rgba(111, 76, 166, .08);
}


/* ============================================================
   キャラ詳細ページ微調整
   ============================================================ */
#battle32-root .b32-roster-skill-pager {
  height: 108px;
  min-height: 108px;
  max-height: 108px;
}

#battle32-root .b32-roster-page-viewport {
  height: 108px;
  min-height: 108px;
  max-height: 108px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

#battle32-root .b32-roster-skill-detail-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#battle32-root .b32-roster-page-arrow {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#battle32-root .b32-roster-page-arrow:active,
#battle32-root .b32-roster-page-arrow:focus,
#battle32-root .b32-roster-page-arrow:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* ============================================================
   盤面コンボレンジ表示
   コンボ説明ウインドウの生成有無に依存させず、常時読み込む。
   ============================================================ */
.b32-cell.combo-range {
  position: relative;
}

.b32-combo-range-overlay {
  position: absolute;
  inset: 2px;
  z-index: 24;
  pointer-events: none;
  box-sizing: border-box;
  border: 2px solid rgba(155, 92, 255, .96);
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(202,166,255,.34) 0%,
      rgba(142,78,242,.22) 48%,
      rgba(112,52,210,.12) 70%,
      transparent 78%);
  box-shadow:
    inset 0 0 12px rgba(170,105,255,.42),
    0 0 10px rgba(137,70,240,.48);
  animation: b32ComboRangePulse 1.15s ease-in-out infinite;
}

.b32-combo-range-overlay::after {
  content: '◇';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(166, 101, 255, 1);
  font-size: clamp(14px, 4vw, 20px);
  line-height: 1;
  font-weight: 800;
  text-shadow:
    0 0 5px rgba(255,255,255,.92),
    0 0 10px rgba(142,75,255,1);
}

.b32-cell.combo-range:has(.b32-unit) .b32-combo-range-overlay::after {
  top: 15%;
  font-size: 12px;
}

.b32-combo-skill-range-overlay {
  position: absolute;
  inset: 7px;
  z-index: 25;
  pointer-events: none;
  box-sizing: border-box;
  border: 2px solid rgba(255, 196, 76, .96);
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,224,135,.30) 0%,
      rgba(255,183,55,.17) 50%,
      rgba(245,140,25,.08) 72%,
      transparent 80%);
  box-shadow:
    inset 0 0 9px rgba(255,203,92,.35),
    0 0 8px rgba(255,165,35,.44);
  animation: b32ComboSkillRangePulse 1.25s ease-in-out infinite;
}

.b32-combo-skill-range-overlay::after {
  content: '✦';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255,205,88,1);
  font-size: clamp(10px, 3vw, 15px);
  line-height: 1;
  font-weight: 800;
  text-shadow:
    0 0 4px rgba(255,255,230,.94),
    0 0 9px rgba(255,170,30,.96);
}

.b32-combo-skill-range-overlay.target_enemy {
  border-color: rgba(255,118,70,.98);
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,175,90,.35) 0%,
      rgba(255,89,50,.20) 55%,
      rgba(180,35,20,.09) 74%,
      transparent 82%);
  box-shadow:
    inset 0 0 10px rgba(255,98,55,.40),
    0 0 10px rgba(255,75,40,.52);
}

.b32-combo-skill-range-overlay.target_ally {
  border-color: rgba(255,225,110,.98);
}

.b32-cell:has(.b32-unit) .b32-combo-skill-range-overlay::after {
  top: 15%;
  font-size: 10px;
}

@keyframes b32ComboRangePulse {
  0%, 100% { filter: brightness(.95); opacity: .82; }
  50% { filter: brightness(1.18); opacity: 1; }
}

@keyframes b32ComboSkillRangePulse {
  0%, 100% { opacity: .78; filter: brightness(.96); }
  50% { opacity: 1; filter: brightness(1.18); }
}


/* ============================================================
   LINK GAUGE IMAGE FRAME PATCH
   外枠画像 + 動的LINK石。値の増減はDOMクラスで制御する。
   ============================================================ */
#b32-link-bar {
  width: 58px !important;
  right: 4px !important;
  top: calc(env(safe-area-inset-top, 0px) + 142px) !important;
  gap: 0 !important;
  overflow: visible !important;
}

#b32-link-bar .b32-link-frame {
  position: relative !important;
  width: 58px !important;
  height: 292px !important; /* 最大9個のLINK石を収める縦長仕様 */
  box-sizing: border-box !important;
  background: url('../images/link_frame.webp') center / 100% 100% no-repeat !important;
  filter: drop-shadow(0 5px 8px rgba(53, 45, 71, .14)) !important;
  overflow: visible !important;
}

#b32-link-bar .b32-link-content {
  position: absolute !important;
  inset: 39px 10px 41px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
}

#battle32-root #b32-link-bar .b32-link-label,
#b32-link-bar .b32-link-label {
  margin: 0 !important;
  font-family: 'Cinzel', serif !important;
  font-size: 8px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: 1.8px !important;
  color: rgba(64, 58, 91, .84) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.92) !important;
}

#battle32-root #b32-link-bar .b32-link-count,
#b32-link-bar .b32-link-count {
  margin: 3px 0 5px !important;
  font-family: 'Cinzel', serif !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: .4px !important;
  color: rgba(45, 47, 76, .88) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.96) !important;
}

#b32-link-bar .b32-link-count span {
  margin: 0 2px !important;
  font-size: 9px !important;
  color: rgba(79, 76, 108, .55) !important;
}

#b32-link-bar .b32-link-stones {
  position: relative !important;
  width: 30px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  gap: 1px !important;
}

#b32-link-bar .b32-link-stones::before {
  content: '' !important;
  position: absolute !important;
  top: 7px !important;
  bottom: 7px !important;
  left: 50% !important;
  width: 1px !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, transparent, rgba(132,106,181,.18) 18%, rgba(132,106,181,.18) 82%, transparent) !important;
  pointer-events: none !important;
}

#b32-link-bar .b32-link-stone-slot {
  position: relative !important;
  z-index: 1 !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity .22s ease, transform .22s ease, filter .22s ease !important;
}

#b32-link-bar .b32-link-stone {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}

#b32-link-bar .b32-link-stone-slot.filled {
  opacity: 1 !important;
  filter:
    saturate(1.06)
    brightness(1.02)
    drop-shadow(0 0 3px rgba(124, 78, 226, .40)) !important;
}

#b32-link-bar .b32-link-stone-slot.empty {
  opacity: .17 !important;
  filter: grayscale(.88) saturate(.35) brightness(1.13) !important;
  transform: scale(.92) !important;
}

/* 旧CSSピル／菱形を完全に無効化 */
#b32-link-bar .b32-link-pill,
#b32-link-bar .b32-link-diamond {
  display: none !important;
}

/* iPhone SE：9個表示対応の縦長フレームを縮小して盤面を圧迫しない */
#battle32-root.b32-vp-se ~ #b32-link-bar,
body:has(#battle32-root.b32-vp-se) #b32-link-bar {
  top: calc(env(safe-area-inset-top, 0px) + 126px) !important;
  transform: scale(.80) !important;
  transform-origin: top right !important;
}


/* ============================================================
   TALL SMARTPHONE BATTLE BOARD LAYOUT
   現行 b32-vp-iphone14 クラスを「通常～縦長スマホ」向けとして利用。
   SE専用レイアウトには影響させない。
   ============================================================ */
#battle32-root.b32-vp-iphone14 #b32-scroll {
  padding-top: 0 !important;
}

#battle32-root.b32-vp-iphone14 #b32-board-wrap {
  perspective: 620px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 6px !important;
  margin-bottom: -4px !important;
  transform-style: preserve-3d !important;
}

#battle32-root.b32-vp-iphone14 #b32-board {
  gap: 2px !important;
  transform: rotateX(30deg) translateZ(0) !important;
  transform-origin: center center !important;
  transform-style: preserve-3d !important;
}

#battle32-root.b32-vp-iphone14 .b32-unit,
#battle32-root.b32-vp-iphone14 .b32-unit.ally,
#battle32-root.b32-vp-iphone14 .b32-unit.enemy {
  transform:
    translateX(-50%)
    rotateX(-30deg)
    translateZ(calc(var(--cell-size) * 0.08)) !important;
  transform-origin: center bottom !important;
}

/* LINKは右端へのオーバーレイ。盤面自体は画面中央を維持する。 */
body:has(#battle32-root.b32-vp-iphone14) #b32-link-bar {
  right: 3px !important;
}


/* ============================================================
   攻撃・ULT・コンボ演出中：下部キャラパネルを非表示
   body側のクラスは battle_32_ui.js が演出開始・終了に合わせて管理する。
   ============================================================ */
html body.b32-cinematic-roster-hidden #b32-roster-panel,
html body.b32-cinematic-roster-hidden #battle32-root .b32-roster-info-panel,
html body.b32-cinematic-roster-hidden #b32-roster-info-close-hitbox {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 100ms ease, visibility 0s linear 100ms !important;
}

/* ============================================================
   FIX: 盤面ユニット足元UIの重なり順と位置を再調整
   - 足元UIがユニットから離れないように bottom を戻す
   - 属性アイコン / HPバーをグリッドより前面へ
   - 敵側も同じ前面レイヤーに載せる
   ============================================================ */
#battle32-root .b32-unit {
  z-index: 6 !important;
}

#battle32-root .b32-unit-foot-ui {
  position: absolute !important;
  left: 50% !important;
  bottom: 1px !important;
  width: calc(var(--cell-size) * 1.02) !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 2px !important;
  transform: translateX(-50%) translateZ(8px) !important;
  transform-origin: center bottom !important;
  z-index: 20 !important;
  pointer-events: none !important;
}

#battle32-root .b32-unit-foot-main {
  width: calc(var(--cell-size) * 1.02) !important;
  min-height: 10px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  transform: translateZ(10px) !important;
}

#battle32-root .b32-unit-foot-main .b32-hp-bar-wrap,
#battle32-root .b32-unit.ally .b32-unit-foot-main .b32-hp-bar-wrap {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  width: calc(var(--cell-size) * 0.68) !important;
  min-width: calc(var(--cell-size) * 0.68) !important;
  flex: 0 0 calc(var(--cell-size) * 0.68) !important;
  transform: translateZ(10px) !important;
  z-index: 21 !important;
}

#battle32-root .b32-unit-foot-main .b32-hp-bar-wrap {
  height: 3px !important;
}

#battle32-root .b32-unit.ally .b32-unit-foot-main .b32-hp-bar-wrap {
  height: 2px !important;
}

#battle32-root .b32-foot-element-icon {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  min-height: 10px !important;
  max-width: 10px !important;
  max-height: 10px !important;
  flex: 0 0 10px !important;
  display: block !important;
  transform: translateZ(10px) !important;
  z-index: 22 !important;
}

#battle32-root .b32-unit-foot-ui .b32-status-badges,
#battle32-root .b32-unit-foot-ui .b32-status-badges.compact {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
  max-width: calc(var(--cell-size) * 1.28) !important;
  transform: translateZ(10px) !important;
  z-index: 21 !important;
}

/* ============================================================
   FIX v3: 足元UIの属性アイコンを左側に配置
   HTML順は HPバー → 属性アイコン のため、row-reverse で左配置にする
   ============================================================ */
#battle32-root .b32-unit-foot-main {
  flex-direction: row-reverse !important;
}


/* ============================================================
   選択式支援ULT：効果選択モーダル
   ============================================================ */
#b32-choice-support-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000005;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 4, 12, .78);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.b32-choice-support-modal {
  width: min(92vw, 420px);
  padding: 22px 18px 16px;
  border: 1px solid rgba(150, 205, 255, .42);
  background:
    radial-gradient(circle at 50% 0%, rgba(80, 150, 255, .18), transparent 45%),
    linear-gradient(180deg, rgba(13, 20, 42, .98), rgba(5, 8, 20, .98));
  box-shadow: 0 0 34px rgba(70, 150, 255, .22), inset 0 0 28px rgba(80, 130, 220, .08);
  color: #eee9df;
  text-align: center;
}

.b32-choice-support-kicker {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 5px;
  color: rgba(130, 195, 255, .72);
}

.b32-choice-support-title {
  margin-top: 7px;
  font-size: 17px;
  letter-spacing: 2px;
}

.b32-choice-support-skill {
  margin-top: 5px;
  font-size: 11px;
  color: rgba(232, 228, 220, .52);
}

.b32-choice-support-list {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.b32-choice-support-option {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  border: 1px solid rgba(125, 185, 255, .28);
  background: rgba(70, 125, 210, .08);
  color: #eee9df;
  font-family: 'Noto Serif JP', serif;
  text-align: left;
  cursor: pointer;
}

.b32-choice-support-option:active {
  border-color: rgba(145, 215, 255, .82);
  background: rgba(80, 165, 255, .20);
}

.b32-choice-support-number {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-align: center;
  color: rgba(125, 200, 255, .80);
}

.b32-choice-support-label {
  padding: 11px 12px 11px 0;
  border-left: 1px solid rgba(125, 185, 255, .18);
  padding-left: 13px;
  font-size: 12px;
  line-height: 1.55;
}

.b32-choice-support-cancel {
  margin-top: 15px;
  padding: 8px 18px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.20);
  background: transparent;
  color: rgba(232,228,220,.58);
  font-family: 'Noto Serif JP', serif;
  font-size: 11px;
  letter-spacing: 2px;
  cursor: pointer;
}


/* ============================================================
   Blessing / Remnant battle icon + detail panel
   ============================================================ */
#b32-blessing-inv-wrap {
  position: fixed;
  right: 8px;
  bottom: calc(var(--b32-actions-h, 74px) + 142px + env(safe-area-inset-bottom, 0px));
  z-index: 3000002;
  width: 80px;
  height: 80px;
  pointer-events: none;
}

#b32-blessing-icon-btn {
  width: 80px;
  height: 80px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #604b2f;
  display: block;
  cursor: pointer;
  pointer-events: auto;
  font-family: 'Noto Serif JP', serif;
  filter: drop-shadow(0 8px 15px rgba(78,58,31,.18));
  -webkit-tap-highlight-color: transparent;
}

.b32-blessing-icon-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: block;
  overflow: hidden;
  position: relative;
  background: rgba(249,246,237,.86);
  border: 1px solid rgba(191,153,91,.58);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.58),
    0 0 0 6px rgba(194,157,95,.24),
    0 8px 18px rgba(73,54,29,.16),
    inset 0 0 16px rgba(122,94,54,.10);
}

.b32-blessing-icon-ring::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid rgba(203,171,114,.44);
  pointer-events: none;
}

#b32-blessing-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}


.b32-blessing-icon-state {
  margin-top: 3px;
  min-height: 13px;
  color: rgba(86,66,42,.66);
  font-family: 'Cinzel', serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.3px;
}

/* INV条件達成時：アイコン外周が金色に脈動し、光が一周する */
#b32-blessing-icon-btn.ready .b32-blessing-icon-ring::before {
  content: '';
  position: absolute;
  inset: -7px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255,224,139,.12) 65deg,
    rgba(255,248,205,.98) 105deg,
    rgba(232,181,70,.40) 145deg,
    transparent 205deg,
    transparent 360deg
  );
  filter: blur(2px);
  animation: b32BlessingReadyOrbit 2.2s linear infinite;
  pointer-events: none;
}

#b32-blessing-icon-btn.ready .b32-blessing-icon-ring::after {
  border-color: rgba(255,225,155,.88);
  box-shadow:
    0 0 7px rgba(255,244,205,.92),
    inset 0 0 8px rgba(255,220,120,.42);
  animation: b32BlessingReadyInner 1.15s ease-in-out infinite;
}

#b32-blessing-icon-btn.ready .b32-blessing-icon-ring {
  border-color: rgba(188,139,54,.90);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.68),
    0 0 0 6px rgba(208,164,77,.42),
    0 0 22px rgba(238,193,94,.62),
    inset 0 0 18px rgba(235,192,91,.12);
  animation: b32BlessingReady 1.35s ease-in-out infinite;
}

#b32-blessing-icon-btn.ready .b32-blessing-icon-state { color: #9a6d17; }
#b32-blessing-icon-btn.active .b32-blessing-icon-ring { box-shadow: 0 0 0 5px rgba(255,233,168,.72), 0 0 28px rgba(255,205,92,.72); }
#b32-blessing-icon-btn.used { opacity: .58; filter: grayscale(.35) drop-shadow(0 8px 15px rgba(78,58,31,.12)); }


/* 加護詳細表示中：キャラパネルを一時的に隠して重なりを防止 */
html body.b32-blessing-info-open #b32-roster-panel {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#b32-blessing-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000100;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 18px 14px calc(var(--b32-actions-h, 74px) + 18px + env(safe-area-inset-bottom, 0px));
  background: rgba(30,25,20,.24);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

#b32-blessing-info-overlay.show { display: flex; animation: b32BlessingOverlayIn .18s ease; }

#b32-blessing-info-panel {
  width: min(390px, 100%);
  position: relative;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(176,143,90,.42);
  background:
    linear-gradient(180deg, rgba(255,253,247,.97), rgba(244,238,225,.98)),
    rgba(248,244,234,.98);
  color: #4f402e;
  box-shadow: 0 18px 46px rgba(57,43,27,.28), inset 0 1px 0 rgba(255,255,255,.92);
  font-family: 'Noto Serif JP', serif;
}

#b32-blessing-info-close {
  position: absolute;
  top: 9px;
  right: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(113,86,51,.18);
  background: rgba(255,255,255,.54);
  color: rgba(80,62,40,.66);
  font-size: 18px;
  line-height: 1;
}

.b32-blessing-info-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 34px 13px 0;
  border-bottom: 1px solid rgba(142,111,68,.16);
}

.b32-blessing-info-portrait {
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(183,143,78,.46);
  box-shadow: 0 0 0 3px rgba(255,255,255,.68), 0 4px 12px rgba(69,50,27,.16);
}

.b32-blessing-info-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.b32-blessing-info-titlebox { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.b32-blessing-info-kicker { font-family: 'Cinzel', serif; font-size: 8px; letter-spacing: 3px; color: rgba(126,94,52,.54); }
#b32-blessing-info-name { font-size: 16px; letter-spacing: 1px; color: #4e3c27; }
#b32-blessing-info-progress { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 1.5px; color: #9b742d; }

.b32-blessing-info-body { display: flex; flex-direction: column; gap: 0; margin-top: 5px; }
.b32-blessing-info-row { display: grid; grid-template-columns: 72px 1fr; gap: 11px; padding: 10px 2px; border-bottom: 1px solid rgba(139,105,61,.12); }
.b32-blessing-info-label { color: #9b742d; font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.b32-blessing-info-row p { margin: 0; color: #554633; font-size: 11px; line-height: 1.65; }

#b32-blessing-inv-btn {
  width: 100%;
  min-height: 52px;
  margin-top: 13px;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1px solid rgba(151,119,73,.22);
  background: rgba(109,95,74,.12);
  color: rgba(82,68,50,.42);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  font-family: 'Noto Serif JP', serif;
}

#b32-blessing-inv-btn.ready {
  border-color: rgba(180,132,49,.62);
  background: linear-gradient(135deg, rgba(226,190,102,.92), rgba(255,246,203,.96));
  color: #57401f;
  box-shadow: 0 0 18px rgba(213,164,62,.30), inset 0 1px 0 rgba(255,255,255,.72);
}
#b32-blessing-inv-btn.active { border-color: rgba(202,154,50,.72); background: linear-gradient(135deg, rgba(255,221,126,.96), rgba(255,248,213,.98)); color: #5a4018; }
#b32-blessing-inv-btn.used { opacity: .56; }
.b32-blessing-inv-kicker { font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: 2px; }
.b32-blessing-inv-name { font-size: 13px; font-weight: 700; letter-spacing: 1px; text-align: left; }
.b32-blessing-inv-action-state { font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 1px; }

@keyframes b32BlessingReady {
  0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
  50% { transform: translateY(-2px) scale(1.035); filter: brightness(1.16); }
}
@keyframes b32BlessingReadyOrbit {
  to { transform: rotate(360deg); }
}
@keyframes b32BlessingReadyInner {
  0%, 100% { opacity: .62; }
  50% { opacity: 1; }
}
@keyframes b32BlessingOverlayIn { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)} }

@media (max-width: 390px) {
  #b32-blessing-inv-wrap { right: 4px; width: 70px; height: 70px; }
  #b32-blessing-icon-btn { width: 70px; height: 70px; min-height: 0; }
  .b32-blessing-icon-ring { width: 70px; height: 70px; }
}



/* ============================================================
   Enemy tap range fix
   - ユニット画像は見た目だけ。入力は必ず所属セルが受け取る
   - 敵タップ判定をキャラクター画像のはみ出し領域まで拡張しない
   ============================================================ */
#battle32-root .b32-unit,
#battle32-root .b32-unit *,
#battle32-root .b32-unit-icon,
#battle32-root .b32-unit-foot-ui,
#battle32-root .b32-unit-foot-ui * {
  pointer-events: none !important;
}

#battle32-root .b32-cell.enemy-inspectable {
  touch-action: manipulation;
}


/* 敵攻撃の実行導線 */
#battle32-root .b32-enemy-attack-trace-overlay{position:absolute;inset:-1px;z-index:8;pointer-events:none;overflow:hidden;border-radius:2px;background:linear-gradient(90deg,transparent 32%,rgba(255,239,120,.45) 43%,rgba(255,255,255,.98) 50%,rgba(255,218,55,.48) 57%,transparent 68%);box-shadow:inset 0 0 12px rgba(255,230,80,.55),0 0 12px rgba(255,215,45,.72);animation:b32EnemyTraceFlash 170ms steps(2,end) infinite}
#battle32-root .b32-enemy-attack-trace-overlay:before{content:"";position:absolute;left:35%;top:-8%;width:30%;height:116%;background:linear-gradient(180deg,transparent 0 7%,#fff 8% 14%,transparent 15% 27%,#ffe85a 28% 36%,transparent 37% 49%,#fff 50% 58%,transparent 59% 72%,#ffc929 73% 82%,transparent 83%);clip-path:polygon(46% 0,78% 0,58% 28%,88% 28%,36% 100%,47% 57%,17% 57%);filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 7px #ffd92d)}
#battle32-root .b32-enemy-attack-trace-overlay i{position:absolute;inset:0;border:1px solid rgba(255,245,165,.88);box-shadow:inset 0 0 8px rgba(255,255,255,.72)}
#battle32-root .b32-enemy-attack-trace-overlay b{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 5px #fff,0 0 12px #ffe659,0 0 22px #ffb800}
#battle32-root .b32-enemy-attack-trace-overlay.hit{background:radial-gradient(circle at 50% 50%,#fff 0 12%,rgba(255,85,55,.78) 27%,transparent 64%),linear-gradient(90deg,transparent 25%,rgba(255,220,80,.55),#fff,rgba(255,105,65,.58),transparent 75%);box-shadow:inset 0 0 18px rgba(255,80,45,.82),0 0 16px rgba(255,70,35,.96);animation:b32EnemyTraceHit 120ms steps(2,end) infinite}
@keyframes b32EnemyTraceFlash{0%,100%{opacity:.58;filter:brightness(1)}50%{opacity:1;filter:brightness(1.8)}}
@keyframes b32EnemyTraceHit{0%,100%{opacity:.8;transform:scale(.98)}50%{opacity:1;transform:scale(1.04);filter:brightness(1.8)}}


/* ============================================================
   PATCH: 盤面状態効果を ▲バフ数 / ▼デバフ数 へ要約
   ============================================================ */
#battle32-root .b32-unit-foot-ui .b32-status-summary {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  min-height: 12px !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

#battle32-root .b32-status-summary-chip {
  height: 12px !important;
  min-width: 14px !important;
  padding: 0 3px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  background: rgba(12, 12, 18, .72) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 1px 5px rgba(0,0,0,.34) !important;
  font-family: 'Cinzel', 'Noto Serif JP', serif !important;
  font-size: 7px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#battle32-root .b32-status-summary-chip .mark {
  font-size: 8px !important;
  line-height: 1 !important;
}

#battle32-root .b32-status-summary-chip .count {
  font-size: 7px !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}

#battle32-root .b32-status-summary-chip.buff {
  color: #aaf6d5 !important;
  border-color: rgba(78, 213, 160, .58) !important;
  text-shadow: 0 0 5px rgba(70,235,170,.62) !important;
}

#battle32-root .b32-status-summary-chip.debuff {
  color: #ffacd1 !important;
  border-color: rgba(239, 75, 148, .58) !important;
  text-shadow: 0 0 5px rgba(255,70,150,.62) !important;
}

/* キャラ情報内では従来の詳細バッジを表示 */
#battle32-root .b32-roster-info-effect-section {
  width: 100%;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(255,255,255,.10);
}

#battle32-root .b32-roster-info-effect-title {
  margin-bottom: 5px;
  color: rgba(220,205,245,.60);
  font-family: 'Cinzel', serif;
  font-size: 8px;
  letter-spacing: .16em;
}

#battle32-root .b32-roster-info-effect-section .b32-status-badges {
  position: static !important;
  transform: none !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  max-width: 100% !important;
}

#battle32-root .b32-roster-info-effect-section .b32-status-badge {
  min-width: 0 !important;
  padding: 2px 5px !important;
  font-size: 8px !important;
}


/* ============================================================
 加護の常時効果：通常BUFF欄へ画像アイコンとして表示
 ============================================================ */
#battle32-root .b32-status-badge.blessing-buff {
  min-width: 0 !important;
  width: 18px !important;
  height: 18px !important;
  padding: 1px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 1px solid rgba(110, 235, 190, .72) !important;
  background: rgba(8, 24, 24, .82) !important;
  box-shadow:
    0 0 7px rgba(80, 255, 180, .34),
    inset 0 0 4px rgba(160, 255, 220, .18) !important;
}

#battle32-root .b32-party-card .b32-status-badge.blessing-buff {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
}

#battle32-root .b32-blessing-buff-img,
#battle32-root .b32-status-summary-chip.blessing-buff-icon img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

#battle32-root .b32-status-summary-chip.blessing-buff-icon {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  padding: 1px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ============================================================
   ハヤテ：月光モード 月光オーラ
   ============================================================ */
#battle32-root .b32-unit.ally.hayate-haa-mode {
  z-index: 7;
}

#battle32-root .b32-hayate-haa-aura {
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: calc(var(--cell-size) * 1.42);
  height: calc(var(--cell-size) * 1.78);
  transform: translateX(-50%);
  transform-origin: center bottom;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
  filter: drop-shadow(0 0 5px rgba(255, 213, 54, .82))
          drop-shadow(0 0 12px rgba(255, 172, 20, .46));
  animation: b32HayateHaaAuraPulse 920ms ease-in-out infinite;
}

#battle32-root .b32-unit.hayate-haa-mode .b32-unit-icon {
  position: relative;
  z-index: 2;
  filter:
    drop-shadow(0 0 4px rgba(255, 232, 105, .92))
    drop-shadow(0 0 10px rgba(255, 183, 30, .68));
}

#battle32-root .b32-hayate-haa-ring {
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 82%;
  height: 23%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 2px solid rgba(255, 225, 92, .88);
  background: radial-gradient(
    ellipse at center,
    rgba(255, 229, 100, .23) 0%,
    rgba(255, 188, 25, .12) 42%,
    transparent 72%
  );
  box-shadow:
    0 0 7px rgba(255, 231, 112, .92),
    0 0 16px rgba(255, 179, 24, .72),
    inset 0 0 9px rgba(255, 235, 128, .48);
  animation: b32HayateHaaRing 1.05s ease-out infinite;
}

#battle32-root .b32-hayate-haa-flare {
  position: absolute;
  bottom: 4%;
  width: 24%;
  height: 76%;
  border-radius: 50% 50% 35% 35%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 245, 150, .10) 22%,
    rgba(255, 207, 52, .35) 64%,
    rgba(255, 164, 10, .05) 100%
  );
  filter: blur(3px);
  opacity: .78;
  transform-origin: center bottom;
  mix-blend-mode: screen;
}

#battle32-root .b32-hayate-haa-flare.flare-1 {
  left: 17%;
  animation: b32HayateHaaFlare 820ms ease-in-out infinite alternate;
}

#battle32-root .b32-hayate-haa-flare.flare-2 {
  left: 39%;
  height: 92%;
  animation: b32HayateHaaFlare 1040ms ease-in-out 120ms infinite alternate-reverse;
}

#battle32-root .b32-hayate-haa-flare.flare-3 {
  right: 16%;
  height: 70%;
  animation: b32HayateHaaFlare 900ms ease-in-out 240ms infinite alternate;
}

@keyframes b32HayateHaaAuraPulse {
  0%, 100% {
    opacity: .70;
    transform: translateX(-50%) scale(.96, .98);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.05, 1.02);
  }
}

@keyframes b32HayateHaaRing {
  0% {
    opacity: .92;
    transform: translateX(-50%) scale(.72);
  }
  75% {
    opacity: .38;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.25);
  }
}

@keyframes b32HayateHaaFlare {
  0% {
    opacity: .38;
    transform: translateY(4px) scale(.72, .84) skewX(-5deg);
  }
  100% {
    opacity: .92;
    transform: translateY(-4px) scale(1.08, 1.06) skewX(5deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #battle32-root .b32-hayate-haa-aura,
  #battle32-root .b32-hayate-haa-ring,
  #battle32-root .b32-hayate-haa-flare {
    animation: none !important;
  }
}


/* ============================================================
   レムナント05「執着」：怨念マス
   ============================================================ */
.b32-cell.remnant05-curse-cell {
  box-shadow: inset 0 0 18px rgba(105, 20, 55, .58), 0 0 9px rgba(55, 0, 25, .35);
}
.b32-remnant05-curse-overlay {
  position:absolute;
  inset:2px;
  z-index:8;
  pointer-events:none;
  overflow:hidden;
  border-radius:3px;
  background:
    radial-gradient(circle at 48% 58%, rgba(135,25,65,.52), rgba(55,5,30,.26) 46%, rgba(15,0,8,.08) 74%),
    repeating-radial-gradient(circle at 50% 50%, rgba(190,55,95,.15) 0 2px, transparent 3px 8px);
  animation:b32Remnant05CursePulse 1.15s ease-in-out infinite alternate;
}
.b32-remnant05-curse-overlay::before,
.b32-remnant05-curse-overlay::after {
  content:'';
  position:absolute;
  left:12%;
  right:12%;
  height:1px;
  background:rgba(225,95,130,.45);
  filter:blur(.4px);
  transform:rotate(-18deg);
  top:38%;
}
.b32-remnant05-curse-overlay::after {
  transform:rotate(24deg);
  top:64%;
  opacity:.65;
}
.b32-remnant05-curse-overlay i {
  position:absolute;
  inset:23%;
  border:1px solid rgba(225,85,125,.28);
  border-radius:50%;
  box-shadow:0 0 10px rgba(155,30,70,.55);
}
@keyframes b32Remnant05CursePulse {
  from { opacity:.62; filter:brightness(.82); }
  to   { opacity:.96; filter:brightness(1.25); }
}

/* ============================================================
   REMNANT BOSS POSITION / SHADOW TUNING
   ------------------------------------------------------------
   ボスだけを個別調整するための最終上書き。
   enemy-id-* クラスは battle_32_ui.js が自動付与する。

   主な調整値:
     --boss-offset-y      : ボス画像の上下位置（+ = 下、- = 上）
     --boss-shadow-y      : 足元影の上下位置
     --boss-shadow-width  : 足元影の横幅
     --boss-shadow-height : 足元影の高さ
     --boss-shadow-opacity: 足元影の濃さ
     --boss-shadow-blur   : 足元影のぼかし
   ============================================================ */

/* ボス共通フォールバック：既存の雑魚位置には触れず、ボス画像だけ約2mm下げる */
#battle32-root .b32-unit.enemy.boss {
  --boss-offset-y: 2mm;
  --boss-shadow-y: 1mm;
  --boss-shadow-width: 92%;
  --boss-shadow-height: 18%;
  --boss-shadow-opacity: .24;
  --boss-shadow-blur: 3px;
}

/* レムナント01：オーバーシア */
#battle32-root .b32-unit.enemy.boss.enemy-id-enemy_overseer_roguelite,
#battle32-root .b32-unit.enemy.boss.enemy-id-enemy_01 {
  --boss-offset-y: 2mm;
  --boss-shadow-y: 1mm;
  --boss-shadow-width: 96%;
  --boss-shadow-height: 18%;
  --boss-shadow-opacity: .24;
  --boss-shadow-blur: 3px;
}

/* レムナント02：イリシュ */
#battle32-root .b32-unit.enemy.boss.enemy-id-enemy_irish_roguelite {
  --boss-offset-y: 2mm;
  --boss-shadow-y: 1mm;
  --boss-shadow-width: 94%;
  --boss-shadow-height: 18%;
  --boss-shadow-opacity: .24;
  --boss-shadow-blur: 3px;
}

/* レムナント03：リヴィア / レヴィ */
#battle32-root .b32-unit.enemy.boss.enemy-id-enemy_rivia_roguelite {
  --boss-offset-y: 2mm;
  --boss-shadow-y: 1mm;
  --boss-shadow-width: 92%;
  --boss-shadow-height: 18%;
  --boss-shadow-opacity: .24;
  --boss-shadow-blur: 3px;
}

/* レムナント04：サキエル */
#battle32-root .b32-unit.enemy.boss.enemy-id-enemy_sakiel_roguelite {
  --boss-offset-y: 2mm;
  --boss-shadow-y: 1mm;
  --boss-shadow-width: 98%;
  --boss-shadow-height: 19%;
  --boss-shadow-opacity: .24;
  --boss-shadow-blur: 3px;
}

/* レムナント05：レム */
#battle32-root .b32-unit.enemy.boss.enemy-id-enemy_remnant05_core {
  --boss-offset-y: 2mm;
  --boss-shadow-y: 1mm;
  --boss-shadow-width: 90%;
  --boss-shadow-height: 17%;
  --boss-shadow-opacity: .24;
  --boss-shadow-blur: 3px;
}

/* 画像の個別Y補正。既存 uiOffset(battleBackY) があれば加算する */
#battle32-root .b32-unit.enemy.boss .b32-unit-icon {
  transform:
    translateY(calc(var(--unit-offset-y, 0px) + var(--boss-offset-y, 0px)))
    scale(var(--unit-scale, 1))
    translateZ(1px) !important;
  transform-origin: center bottom !important;

  /* 浮いて見えやすい下方向の強いドロップシャドウを弱める */
  filter:
    drop-shadow(0 2px 2px rgba(50,48,57,.16))
    drop-shadow(0 1px 0 rgba(255,255,255,.42))
    brightness(1.025) contrast(1.025) !important;
}

/* 旧ボス用の大きな白い楕円光を、足元に接地する薄い影へ置換 */
#battle32-root .b32-unit.enemy.boss::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  bottom: var(--boss-shadow-y, 0px) !important;
  width: var(--boss-shadow-width, 92%) !important;
  height: var(--boss-shadow-height, 18%) !important;
  border-radius: 50% !important;
  transform: translateX(-50%) !important;
  background: radial-gradient(
    ellipse at center,
    rgba(45,40,52,.50) 0%,
    rgba(66,58,72,.24) 42%,
    rgba(66,58,72,0) 74%
  ) !important;
  opacity: var(--boss-shadow-opacity, .24) !important;
  filter: blur(var(--boss-shadow-blur, 3px)) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

#battle32-root .b32-unit.enemy.boss .b32-unit-icon {
  position: relative !important;
  z-index: 1 !important;
}


/* ============================================================
   ハヤテ：月光モード 変身 / 解除フラッシュ
   ULTカットイン後・モード終了時に一度だけ発生
   ============================================================ */
.b32-hayate-moon-transform-fx {
  position: fixed;
  width: 1px;
  height: 1px;
  z-index: 999997;
  pointer-events: none;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.b32-hayate-moon-transform-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.12);
  background:
    radial-gradient(circle,
      rgba(255,255,255,1) 0 7%,
      rgba(255,250,200,.98) 12%,
      rgba(255,224,91,.82) 26%,
      rgba(255,190,30,.30) 48%,
      transparent 72%);
  box-shadow:
    0 0 14px rgba(255,255,255,.98),
    0 0 38px rgba(255,235,130,.92),
    0 0 78px rgba(255,193,35,.72);
  mix-blend-mode: screen;
  animation: b32HayateMoonBurst 820ms cubic-bezier(.16,.84,.28,1) forwards;
}

.b32-hayate-moon-transform-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255,240,148,.96);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.2);
  box-shadow: 0 0 12px rgba(255,218,68,.90);
  opacity: 0;
}
.b32-hayate-moon-transform-ring.ring-1 {
  animation: b32HayateMoonRing 700ms ease-out 80ms forwards;
}
.b32-hayate-moon-transform-ring.ring-2 {
  animation: b32HayateMoonRing 780ms ease-out 180ms forwards;
}

.b32-hayate-moon-transform-ray {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 2px;
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.98), rgba(255,226,92,.92), transparent);
  filter: drop-shadow(0 0 5px rgba(255,220,76,.9));
  opacity: 0;
  animation: b32HayateMoonRay 520ms ease-out 70ms forwards;
}
.b32-hayate-moon-transform-ray.ray-1 { transform: translate(-50%, -50%) rotate(0deg); }
.b32-hayate-moon-transform-ray.ray-2 { transform: translate(-50%, -50%) rotate(45deg); }
.b32-hayate-moon-transform-ray.ray-3 { transform: translate(-50%, -50%) rotate(90deg); }
.b32-hayate-moon-transform-ray.ray-4 { transform: translate(-50%, -50%) rotate(135deg); }

.b32-hayate-moon-transform-label {
  position: absolute;
  left: 50%;
  top: 32px;
  transform: translateX(-50%);
  color: rgba(255,244,180,.98);
  font-family: "Noto Serif JP", serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  white-space: nowrap;
  text-shadow:
    0 0 6px rgba(255,255,255,.95),
    0 0 14px rgba(255,205,65,.92),
    0 2px 4px rgba(0,0,0,.85);
  opacity: 0;
  animation: b32HayateMoonLabel 820ms ease-out 100ms forwards;
}

#battle32-root .b32-unit.hayate-moon-mode .b32-unit-icon {
  filter:
    drop-shadow(0 0 5px rgba(255,244,165,.95))
    drop-shadow(0 0 14px rgba(255,198,50,.72));
}

@keyframes b32HayateMoonBurst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.10); filter: brightness(1); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(.52); filter: brightness(1.8); }
  38%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); filter: brightness(2.5); }
  64%  { opacity: .58; transform: translate(-50%, -50%) scale(1.34); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
}

@keyframes b32HayateMoonRing {
  0%   { opacity: .95; transform: translate(-50%, -50%) scale(.18); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.35); }
}

@keyframes b32HayateMoonRay {
  0%   { opacity: 0; width: 30px; }
  35%  { opacity: 1; width: 180px; }
  100% { opacity: 0; width: 235px; }
}

@keyframes b32HayateMoonLabel {
  0%   { opacity: 0; transform: translate(-50%, 8px) scale(.92); }
  24%  { opacity: 1; transform: translate(-50%, 0) scale(1.03); }
  68%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -7px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .b32-hayate-moon-transform-fx * {
    animation-duration: 1ms !important;
  }
}


/* ============================================================
   Remnant Blessing INV Cut-in
   暗転 → 横から展開 → INV + 技名 → 白フラッシュ
   ============================================================ */
body.b32-blessing-inv-cutin-open {
  overflow: hidden !important;
}

#b32-blessing-inv-cutin {
  position: fixed;
  inset: 0;
  z-index: 1000005;
  pointer-events: auto;
  overflow: hidden;
  opacity: 1;
  isolation: isolate;
}

#b32-blessing-inv-cutin .b32-blessing-inv-cutin-dark {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(20,22,30,.68) 0%, rgba(0,0,0,.92) 68%),
    #000;
  opacity: 0;
}

#b32-blessing-inv-cutin.play .b32-blessing-inv-cutin-dark {
  animation: b32BlessingInvDark 1.72s ease forwards;
}

#b32-blessing-inv-cutin .b32-blessing-inv-cutin-art-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(118vw, 720px);
  height: min(72vh, 620px);
  transform: translate(-50%, -50%);
  overflow: visible;
  opacity: 0;
}

#b32-blessing-inv-cutin .b32-blessing-inv-cutin-art {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,.28))
    drop-shadow(0 0 34px rgba(226,210,165,.30));
  transform: translateX(42vw) scale(1.08);
  opacity: 0;
}

#b32-blessing-inv-cutin.play .b32-blessing-inv-cutin-art-wrap {
  animation: b32BlessingInvArtWrap 1.55s ease-out forwards;
}

#b32-blessing-inv-cutin.play .b32-blessing-inv-cutin-art {
  animation: b32BlessingInvArtSlide 1.46s cubic-bezier(.12,.78,.19,1) forwards;
}

#b32-blessing-inv-cutin .b32-blessing-inv-cutin-copy {
  position: absolute;
  left: 50%;
  bottom: max(13vh, 72px);
  width: min(88vw, 640px);
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  z-index: 4;
}

#b32-blessing-inv-cutin.play .b32-blessing-inv-cutin-copy {
  animation: b32BlessingInvCopy 1.25s ease-out .34s forwards;
}

#b32-blessing-inv-cutin .b32-blessing-inv-cutin-kicker {
  font-family: 'Cinzel', serif;
  font-size: clamp(18px, 5.2vw, 34px);
  font-weight: 700;
  letter-spacing: .42em;
  padding-left: .42em;
  color: rgba(255,246,214,.98);
  text-shadow:
    0 0 8px rgba(255,255,255,.96),
    0 0 22px rgba(245,220,155,.76),
    0 2px 8px rgba(0,0,0,.96);
}

#b32-blessing-inv-cutin .b32-blessing-inv-cutin-name {
  margin-top: 7px;
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(24px, 7vw, 46px);
  font-weight: 800;
  letter-spacing: .12em;
  color: #fff9e8;
  text-shadow:
    0 0 8px rgba(255,255,255,.98),
    0 0 22px rgba(255,228,153,.92),
    0 0 50px rgba(215,179,93,.58),
    0 3px 9px rgba(0,0,0,.98);
}

#b32-blessing-inv-cutin .b32-blessing-inv-cutin-remnant {
  margin-top: 5px;
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(10px, 2.7vw, 15px);
  letter-spacing: .24em;
  color: rgba(245,238,220,.72);
  text-shadow: 0 2px 5px rgba(0,0,0,.95);
}

#b32-blessing-inv-cutin .b32-blessing-inv-cutin-streaks {
  position: absolute;
  inset: -12%;
  z-index: 3;
  opacity: 0;
  background:
    linear-gradient(105deg, transparent 0 35%, rgba(255,247,220,.16) 44%, transparent 49%),
    linear-gradient(75deg, transparent 0 43%, rgba(255,255,255,.10) 48%, transparent 52%);
  transform: translateX(-30%);
  mix-blend-mode: screen;
}

#b32-blessing-inv-cutin.play .b32-blessing-inv-cutin-streaks {
  animation: b32BlessingInvStreak 1.36s ease-out .18s forwards;
}

#b32-blessing-inv-cutin .b32-blessing-inv-cutin-flash {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  background: #fff;
  mix-blend-mode: screen;
}

#b32-blessing-inv-cutin.play .b32-blessing-inv-cutin-flash {
  animation: b32BlessingInvWhiteFlash 1.72s ease-out forwards;
}

#b32-blessing-inv-cutin.finish {
  animation: b32BlessingInvFinish .18s linear forwards;
}

@keyframes b32BlessingInvDark {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  84%  { opacity: 1; }
  100% { opacity: .18; }
}

@keyframes b32BlessingInvArtWrap {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { opacity: .96; }
}

@keyframes b32BlessingInvArtSlide {
  0%   { opacity: 0; transform: translateX(52vw) scale(1.16); filter: brightness(1.7) blur(4px); }
  18%  { opacity: 1; }
  48%  { transform: translateX(-2vw) scale(1.03); filter: brightness(1.08) blur(0); }
  68%  { transform: translateX(0) scale(1.00); }
  100% { opacity: 1; transform: translateX(0) scale(1.015); filter: brightness(1.14); }
}

@keyframes b32BlessingInvCopy {
  0%   { opacity: 0; transform: translateX(-50%) translateY(22px) scale(.94); filter: blur(2px); }
  22%  { opacity: 1; filter: blur(0); }
  72%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: .96; transform: translateX(-50%) translateY(-3px) scale(1.015); }
}

@keyframes b32BlessingInvStreak {
  0%   { opacity: 0; transform: translateX(-44%); }
  24%  { opacity: .75; }
  100% { opacity: 0; transform: translateX(42%); }
}

@keyframes b32BlessingInvWhiteFlash {
  0%, 72% { opacity: 0; }
  79%     { opacity: .18; }
  86%     { opacity: .98; }
  91%     { opacity: .48; }
  100%    { opacity: 0; }
}

@keyframes b32BlessingInvFinish {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #b32-blessing-inv-cutin *,
  #b32-blessing-inv-cutin {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}


/* ============================================================
   ITEM DOCK (art-driven 3-slot panel)
   盤面や他UIは動かさず、body直下の #b32-item-panel だけ見た目を刷新
   ============================================================ */
#b32-item-panel .b32-item-dock-slot {
  transition: transform .14s ease, opacity .14s ease, filter .14s ease;
  -webkit-tap-highlight-color: transparent;
}

#b32-item-panel .b32-item-dock-slot.is-usable:hover {
  transform: translateY(-1px) scale(1.02);
}

#b32-item-panel .b32-item-dock-slot.is-active {
  animation: b32ItemDockPulse 1.15s ease-in-out infinite;
}

@keyframes b32ItemDockPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}


/* ============================================================
   Roguelite item slots - image-only version
   ============================================================ */
#b32-item-panel {
  color: rgba(28,30,36,.92) !important;
}

#b32-item-panel .b32-item-dock-slot {
  position: relative;
  width: 68px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  transition: transform .14s ease, opacity .14s ease, filter .14s ease;
  -webkit-tap-highlight-color: transparent;
}

#b32-item-panel .b32-item-slot-art {
  width: 54px;
  height: 54px;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(120,95,40,.18));
}

#b32-item-panel .b32-item-dock-slot.is-empty .b32-item-slot-art {
  opacity: .82;
  filter: drop-shadow(0 3px 8px rgba(120,95,40,.10));
}

#b32-item-panel .b32-item-dock-slot.is-disabled.has-item .b32-item-slot-art {
  opacity: .62;
  filter: grayscale(.12) brightness(.96) drop-shadow(0 3px 8px rgba(120,95,40,.10));
}

#b32-item-panel .b32-item-dock-slot.is-usable:hover {
  transform: translateY(-1px) scale(1.02);
}

#b32-item-panel .b32-item-dock-slot.is-active {
  animation: b32ItemDockPulse 1.15s ease-in-out infinite;
}

#b32-item-panel .b32-item-dock-slot.is-active .b32-item-slot-art {
  filter:
    drop-shadow(0 0 10px rgba(255,232,173,.56))
    drop-shadow(0 0 18px rgba(198,164,255,.24));
}

#b32-item-panel .b32-item-cost-badge {
  position: absolute;
  right: -1px;
  bottom: -1px;
  z-index: 3;
  min-width: 22px;
  height: 14px;
  padding: 0 5px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(240,229,206,.94));
  border: 1px solid rgba(211,178,108,.88);
  box-shadow: 0 2px 5px rgba(98,80,28,.18);
  color: rgba(140,110,45,.92);
  font-size: 8px;
  font-family: 'Cinzel', serif;
  letter-spacing: .5px;
  line-height: 1;
  pointer-events: none;
}