@charset "UTF-8";
/* =====================================================================
   灰都の残響 ― 戦闘画面（battle-view 担当）
   #battle-ui の中身は js/battle/view.js が作る（.bt-*）。
   基準 1280×720。上部：敵の名前・場のオーブ・行動順 ／ 下部 28%：味方パネルとコマンド。
   動き（位置・拡大・不透明度）はほぼ JS のトゥイーンが担う（ヘッドレスの仮想時間でも進むように）。
   CSS の transition は使わない（止まったまま撮られるため）。ループする光だけ keyframes。
   ===================================================================== */

#battle-ui {
  --bt-gold: #ecd494;
  --bt-gold-2: #ffe9a8;
  --bt-brass: #c9a55a;
  --bt-brass-d: #7d6535;
  --bt-red: #e0685e;
  --bt-crim: #b8342c;
  --bt-cyan: #6fd3e0;
  --bt-wp: #f2b25e;
  --bt-jp: #86bcff;
  --bt-hp1: #3aa37c;
  --bt-hp2: #a8f2c6;
  --bt-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 0 2px 4px rgba(0, 0, 0, 0.8);
  font-family: var(--font-ui);
  color: var(--text);
}

/* ---------- 層 ---------- */
.bt-root { position: absolute; inset: 0; overflow: hidden; }
.bt-fxl, .bt-anch, .bt-hits, .bt-pops, .bt-bands { position: absolute; inset: 0; pointer-events: none; }
.bt-fxl { z-index: 1; }
.bt-anch { z-index: 2; }
.bt-hits { z-index: 3; }
.bt-top { z-index: 4; }
.bt-plate, .bt-log { z-index: 5; }
.bt-bottom { z-index: 6; }
.bt-sub { z-index: 7; }
.bt-pops { z-index: 8; }
.bt-bands { z-index: 9; }
.bt-speed { z-index: 10; }
.bt-result { z-index: 11; }
.bt-root kbd {
  display: inline-grid; place-items: center; flex: none;
  min-width: 16px; height: 16px; padding: 0 3px;
  font-family: var(--font-ui); font-size: 10px; line-height: 1; color: var(--bt-brass);
  border: 1px solid rgba(201, 165, 90, 0.42); border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
}

/* ---------- 顔アイコン・属性チップ ---------- */
.bt-face { display: block; width: 100%; height: 100%; overflow: hidden; background: #0b0d14; }
.bt-face canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.bt-face.txt { display: grid; place-items: center; font-family: var(--font-body); font-weight: 600; color: var(--text); font-size: 14px; }

.bt-elc {
  display: inline-grid; place-items: center; flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  font-family: var(--font-body); font-weight: 800; font-size: 11px; line-height: 1; font-style: normal;
  color: var(--g, #ddd);
  background: radial-gradient(circle at 50% 38%, rgba(20, 22, 32, 0.9), rgba(4, 5, 9, 0.95));
  border: 1px solid var(--c, #777);
  box-shadow: 0 0 6px -1px var(--c, transparent), inset 0 0 4px -1px var(--g, transparent);
  text-shadow: 0 0 5px var(--c, transparent);
}
.bt-elc.big { width: 24px; height: 24px; font-size: 14px; }
.bt-elc.none { color: #8d919c; border-color: rgba(141, 145, 156, 0.45); box-shadow: none; text-shadow: none; }
.bt-elc.item { color: var(--bt-gold); border-color: var(--bt-brass); border-radius: 3px; box-shadow: none; text-shadow: none; }

/* ---------- 状態異常のバッジ ---------- */
.bt-sts { display: inline-flex; gap: 2px; flex-wrap: nowrap; }
.bt-sts i {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; border-radius: 2px;
  font-family: var(--font-ui); font-size: 11px; line-height: 1; font-style: normal;
  color: var(--c); border: 1px solid var(--c);
  background: rgba(0, 0, 0, 0.62);
  box-shadow: 0 0 5px -1px var(--c);
}
.bt-sts i.up { background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.6)); }
/* 状態が4つ以上重なったら小さくして、名前の欄からはみ出さないように */
.bt-sts:has(i:nth-child(4)) { gap: 1px; }
.bt-sts:has(i:nth-child(4)) i { width: 13px; height: 13px; font-size: 9px; }
.bt-mname .bt-sts { flex: none; }
.bt-mname b { min-width: 0; }
.bt-sts i.down { border-style: dashed; opacity: 0.92; }

/* =====================================================================
   上部
   ===================================================================== */
.bt-top { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; }
.bt-top::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 128px; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 5, 9, 0.72) 0%, rgba(4, 5, 9, 0.38) 45%, rgba(4, 5, 9, 0) 100%);
}

/* 敵の名前と HP（左上） */
.bt-foes {
  position: absolute; left: 14px; top: 12px; width: 288px;
  display: flex; flex-direction: column; gap: 3px; pointer-events: auto;
}
.bt-foe {
  position: relative; display: flex; align-items: center; gap: 6px;
  height: 27px; padding: 0 10px 5px 4px;
  background: linear-gradient(90deg, rgba(10, 12, 20, 0.86) 0%, rgba(10, 12, 20, 0.6) 62%, rgba(10, 12, 20, 0) 100%);
  border-left: 2px solid rgba(200, 70, 60, 0.75);
  cursor: default;
}
.bt-foe .f-mk { width: 10px; height: 12px; flex: none; }
.bt-foe .f-nm {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: 0.06em;
  color: var(--text-hi); text-shadow: var(--bt-shadow);
}
.bt-foe .f-boss {
  flex: none; font-size: 9.5px; letter-spacing: 0.12em; line-height: 1;
  padding: 2px 4px 1px; color: #ffd8c8; background: linear-gradient(180deg, #a02a22, #5a1410);
  border: 1px solid #e0685e; box-shadow: 0 0 6px rgba(224, 104, 94, 0.55);
}
.bt-foe .f-bar {
  position: absolute; left: 30px; right: 14px; bottom: 3px; height: 3px;
  background: rgba(0, 0, 0, 0.7); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.05);
}
.bt-foe .f-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
.bt-foe .f-bar i.lag { background: #fff0d0; opacity: 0.85; }
.bt-foe .f-bar i.cur { background: linear-gradient(90deg, #9a2a22, #e8553a 60%, #ff9a72); box-shadow: 0 0 4px rgba(255, 110, 80, 0.5); }
.bt-foe.boss { height: 31px; border-left-color: #ff7a5a; }
.bt-foe.boss .f-nm { font-size: 17px; color: #ffe6d8; }
.bt-foe.boss .f-bar { height: 4px; }
.bt-foe.dead { opacity: 0.34; }
.bt-foe.dead .f-nm { text-decoration: line-through; text-decoration-color: rgba(224, 104, 94, 0.8); }
.bt-foe.dead .f-bar { visibility: hidden; }
.bt-root.targeting .bt-foe:not(.dead) { cursor: pointer; }
.bt-foe.tg {
  background: linear-gradient(90deg, rgba(120, 92, 36, 0.78) 0%, rgba(60, 46, 20, 0.6) 62%, rgba(10, 12, 20, 0) 100%);
  border-left-color: var(--bt-gold-2);
}
.bt-foe.tg .f-mk {
  background: var(--bt-gold-2);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  filter: drop-shadow(0 0 4px rgba(255, 233, 168, 0.9));
  animation: bt-nudge 0.6s ease-in-out infinite;
}
.bt-foe.tg .f-nm { color: #fff8e0; }

/* 場（エレメント・フィールド）：中央の3つのオーブ */
.bt-field {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 6px 20px 6px 18px; pointer-events: auto;
  --pulse: 0;
}
.bt-field::before {
  content: ''; position: absolute; inset: 0 -20px; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(8, 9, 15, 0.82), rgba(8, 9, 15, 0.45) 60%, rgba(8, 9, 15, 0) 100%);
}
.bt-flabel {
  position: relative; font-family: var(--font-body); font-weight: 800; font-size: 15px;
  color: var(--bt-brass); letter-spacing: 0.1em; text-shadow: var(--bt-shadow);
}
.bt-flabel::before, .bt-flabel::after {
  content: ''; position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px;
  background: var(--bt-brass); transform: rotate(45deg);
}
.bt-flabel::before { left: -9px; }
.bt-flabel::after { right: -9px; }
.bt-orbs { position: relative; width: 128px; height: 38px; }
.bt-orb { position: absolute; top: 1px; width: 36px; height: 36px; --burst: 0; }
.bt-orb::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid rgba(201, 165, 90, 0.35);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.bt-orb .o-core {
  position: absolute; inset: 2px; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95) 0 7%, rgba(255, 255, 255, 0) 22%),
    radial-gradient(circle at 50% 55%, var(--g) 0%, var(--c) 52%, rgba(0, 0, 0, 0.7) 100%);
  box-shadow: 0 0 calc(8px + var(--burst) * 30px) calc(var(--burst) * 6px) var(--g), 0 0 2px 1px rgba(0, 0, 0, 0.7), inset 0 -4px 7px rgba(0, 0, 0, 0.45);
}
.bt-orb .o-core.none {
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.45));
  border: 1px dashed rgba(201, 165, 90, 0.38); box-shadow: none; inset: 5px;
}
.bt-orb .o-k {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-body); font-weight: 800; font-size: 14px; color: #fff;
  text-shadow: 0 0 2px #000, 0 0 3px #000, 0 1px 2px #000;
}
.bt-reso {
  position: relative; min-width: 56px; font-size: 11px; letter-spacing: 0.08em; color: var(--text-dim);
  text-shadow: var(--bt-shadow); white-space: nowrap;
}
.bt-field.reso .bt-orb::before { border-color: var(--rg); box-shadow: 0 0 8px -2px var(--rg); }
.bt-field.reso .bt-reso { color: var(--rg); }
.bt-field.ready .bt-orb .o-core {
  box-shadow: 0 0 calc(10px + var(--pulse) * 22px) calc(var(--pulse) * 4px) var(--rg), 0 0 2px 1px rgba(0, 0, 0, 0.7), inset 0 -4px 7px rgba(0, 0, 0, 0.4);
  transform: scale(calc(1 + var(--pulse) * 0.09));
}
.bt-field.ready .bt-orb::before { animation: bt-ring 1.2s ease-out infinite; }
.bt-field.ready .bt-reso {
  font-family: var(--font-body); font-weight: 800; font-size: 14px; color: #fff6d8;
  text-shadow: 0 0 8px var(--rg), 0 0 14px var(--rg), var(--bt-shadow);
  animation: bt-blink 1.1s ease-in-out infinite;
}

/* 行動順（右上） */
.bt-order {
  position: absolute; right: 14px; top: 10px;
  display: flex; align-items: center; gap: 10px;
  padding: 5px 12px 5px 14px; pointer-events: auto;
  background: linear-gradient(270deg, rgba(10, 12, 20, 0.86) 0%, rgba(10, 12, 20, 0.62) 70%, rgba(10, 12, 20, 0) 100%);
  border-right: 2px solid rgba(201, 165, 90, 0.6);
}
.bt-olabel { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; white-space: nowrap; }
.bt-olabel small { font-size: 10px; color: var(--text-dim); letter-spacing: 0.1em; }
.bt-order:not(.actual) .bt-olabel small::after { content: '（予想）'; color: var(--ash); }
.bt-olabel .bt-round { font-family: var(--font-body); font-weight: 800; font-size: 16px; color: var(--bt-gold); letter-spacing: 0.08em; text-shadow: var(--bt-shadow); }
.bt-oline { display: flex; align-items: center; gap: 4px; height: 38px; }
.bt-oi {
  position: relative; flex: none; width: 28px; height: 28px;
  border: 1px solid rgba(201, 165, 90, 0.65); background: #0b0d14;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 2px 5px rgba(0, 0, 0, 0.5);
}
.bt-oi::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: -4px; height: 2px; background: var(--bt-brass); }
.bt-oi.enemy { border-color: rgba(214, 84, 70, 0.8); }
.bt-oi.enemy::after { background: #d6544a; }
.bt-order:not(.actual) .bt-oi { border-style: dashed; }
.bt-oi.now {
  width: 34px; height: 34px; z-index: 1;
  border: 1px solid var(--bt-gold-2); border-style: solid;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 12px rgba(255, 233, 168, 0.75);
}
.bt-oi.enemy.now { border-color: #ffb09a; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 12px rgba(255, 120, 90, 0.8); }
.bt-oi.now::before {
  content: ''; position: absolute; left: 50%; top: -9px; width: 10px; height: 6px; margin-left: -5px;
  background: var(--bt-gold-2); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.bt-oi.done { opacity: 0.32; filter: grayscale(0.8); }
.bt-oi.skip { opacity: 0.5; filter: grayscale(1); }
.bt-oi.skip .bt-face::after {
  content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; margin-top: -1px;
  background: #e0685e; transform: rotate(-40deg);
}

/* 技名の札（上部中央） */
.bt-plate {
  position: absolute; left: 50%; top: 66px; opacity: 0;
  display: flex; align-items: center; gap: 10px;
  min-width: 300px; justify-content: center; white-space: nowrap;
  padding: 6px 54px 7px; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 9, 15, 0) 0%, rgba(8, 9, 15, 0.88) 18%, rgba(8, 9, 15, 0.88) 82%, rgba(8, 9, 15, 0) 100%);
}
.bt-plate::before, .bt-plate::after {
  content: ''; position: absolute; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c, var(--bt-brass)), transparent);
}
.bt-plate::before { top: 0; }
.bt-plate::after { bottom: 0; }
.bt-plate .who { font-size: 12px; color: var(--text-dim); letter-spacing: 0.06em; }
.bt-plate .nm {
  font-family: var(--font-body); font-weight: 800; font-size: 23px; letter-spacing: 0.14em;
  color: var(--text-hi); text-shadow: 0 0 10px var(--c, rgba(236, 212, 148, 0.35)), var(--bt-shadow);
}
.bt-plate.k-attack .nm { font-size: 19px; }
.bt-plate.k-spell .nm { color: #eef4ff; }
.bt-plate.k-enemy::before, .bt-plate.k-enemy::after { background: linear-gradient(90deg, transparent, #d6544a, transparent); }
.bt-plate.k-enemy .nm { color: #ffe0d6; text-shadow: 0 0 10px rgba(214, 84, 70, 0.6), var(--bt-shadow); }
.bt-plate.k-guard .nm { font-size: 18px; color: #cfe4ff; }
.bt-plate.k-dual .nm { color: #fff0c8; }
.bt-plate.sparked::before, .bt-plate.sparked::after { background: linear-gradient(90deg, transparent, #ffe27a, transparent); height: 2px; }
.bt-plate.sparked .nm {
  color: #fff4c0;
  text-shadow: 0 0 8px rgba(255, 214, 90, 0.95), 0 0 20px rgba(255, 190, 60, 0.6), var(--bt-shadow);
}

/* 上部の小さなログ */
.bt-log {
  position: absolute; left: 50%; top: 112px; transform: translateX(-50%); opacity: 0;
  padding: 4px 34px; white-space: nowrap; pointer-events: none;
  font-family: var(--font-body); font-size: 15px; letter-spacing: 0.08em; color: var(--text);
  text-shadow: var(--bt-shadow);
  background: linear-gradient(90deg, rgba(8, 9, 15, 0), rgba(8, 9, 15, 0.8) 20%, rgba(8, 9, 15, 0.8) 80%, rgba(8, 9, 15, 0));
}
.bt-log.bad { color: #ffc2b8; }

/* 早送り表示 */
.bt-speed {
  position: absolute; right: 16px; top: 62px; display: none;
  padding: 2px 10px 2px 12px; font-size: 11px; letter-spacing: 0.12em; color: var(--bt-cyan);
  background: rgba(6, 10, 16, 0.8); border: 1px solid rgba(111, 211, 224, 0.5);
  text-shadow: 0 0 6px rgba(111, 211, 224, 0.6);
}
.bt-speed.on { display: block; animation: bt-blink 0.9s ease-in-out infinite; }
.bt-speed.on.steady { animation: none; opacity: 0.8; }
.bt-speed b { font-weight: normal; color: #eaffff; margin-left: 3px; }

/* =====================================================================
   下部：味方パネル ＋ コマンド
   ===================================================================== */
.bt-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; height: 202px;
  display: flex; gap: 12px; padding: 10px 14px 8px;
}
.bt-bottom::before {
  content: ''; position: absolute; left: 0; right: 0; top: -40px; bottom: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 5, 9, 0) 0%, rgba(4, 5, 9, 0.5) 32%, rgba(4, 5, 9, 0.72) 100%);
}

/* 味方パネル */
.bt-party {
  flex: 1; min-width: 0; padding: 8px 12px 8px 10px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.bt-mem {
  position: relative; flex: 1 1 0; min-height: 0; max-height: 44px;
  display: grid; grid-template-columns: 30px 150px minmax(0, 1fr) 132px 178px; align-items: center; column-gap: 14px;
  padding: 0 12px 0 8px; border-radius: 2px;
  border-left: 2px solid transparent;
}
.bt-mem + .bt-mem::before {
  content: ''; position: absolute; left: 10px; right: 10px; top: -1px; height: 1px;
  background: linear-gradient(90deg, rgba(201, 165, 90, 0), rgba(201, 165, 90, 0.16) 20%, rgba(201, 165, 90, 0.16) 80%, rgba(201, 165, 90, 0));
}
.bt-mface { width: 30px; height: 30px; border: 1px solid rgba(201, 165, 90, 0.5); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7); background: #0b0d14; }
.bt-mname { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.bt-mname b {
  font-family: var(--font-body); font-weight: 700; font-size: 17px; letter-spacing: 0.06em;
  color: var(--text-hi); text-shadow: 0 1px 2px #000; overflow: hidden; text-overflow: ellipsis;
}
.bt-mhp { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; min-width: 0; }
.bt-hpl { display: flex; align-items: baseline; gap: 3px; min-width: 94px; justify-content: flex-end; white-space: nowrap; }
.bt-hpl small { font-size: 11px; color: var(--bt-brass); margin-right: auto; letter-spacing: 0.06em; }
.bt-hpl .v { font-size: 21px; line-height: 1; color: var(--text-hi); text-shadow: 0 1px 2px #000; min-width: 2.2em; text-align: right; }
.bt-hpl .mx { font-size: 11px; color: var(--text-dim); }
.bt-bar {
  position: relative; height: 6px; min-width: 60px;
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.75), 0 0 0 2px rgba(201, 165, 90, 0.16), inset 0 1px 2px rgba(0, 0, 0, 0.8);
}
.bt-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
.bt-bar i.lag { background: linear-gradient(180deg, #fff6dc, #e8c69a); opacity: 0.9; }
.bt-bar i.cur {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0, rgba(255, 255, 255, 0) 45%), linear-gradient(90deg, var(--bt-hp1), var(--bt-hp2));
  box-shadow: 0 0 6px rgba(120, 230, 170, 0.35);
}
.bt-mem.mid .bt-bar i.cur { background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0, rgba(255, 255, 255, 0) 45%), linear-gradient(90deg, #c49428, #ffe08a); box-shadow: 0 0 6px rgba(255, 210, 110, 0.35); }
.bt-mem.low .bt-bar i.cur { background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0) 45%), linear-gradient(90deg, #9a2a22, #ff7a5a); box-shadow: 0 0 8px rgba(255, 100, 80, 0.6); }
.bt-mem.mid .bt-hpl .v { color: #ffe39a; }
.bt-mem.low .bt-hpl .v { color: #ff9a86; animation: bt-lowhp 1s ease-in-out infinite; }

.bt-mres { display: flex; gap: 14px; white-space: nowrap; }
.bt-mres > div { display: flex; align-items: baseline; gap: 3px; }
.bt-mres small { font-size: 11px; letter-spacing: 0.04em; }
.bt-mres b { font-weight: normal; font-size: 16px; color: var(--text-hi); min-width: 1.3em; text-align: right; text-shadow: 0 1px 2px #000; }
.bt-mres small.mx { font-size: 10.5px; color: var(--text-dim); }
.bt-mres .wp > small:first-child { color: var(--bt-wp); }
.bt-mres .jp > small:first-child { color: var(--bt-jp); }
.bt-mres .none { opacity: 0.22; }
.bt-mres .flash-up b { animation: bt-res-up 0.5s ease-out; }
.bt-mres .flash-dn b { animation: bt-res-dn 0.5s ease-out; }

.bt-mlp { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.bt-mlp small { font-size: 11px; color: #e8877c; letter-spacing: 0.04em; }
.bt-mlp .pips { position: relative; display: flex; flex-wrap: nowrap; gap: 3px; }
.bt-mlp .pips i {
  display: block; width: 8px; height: 8px; transform: rotate(45deg);
  background: linear-gradient(135deg, #ffb0a2, #e0483c 55%, #8a1e18);
  box-shadow: 0 0 5px rgba(255, 90, 70, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.bt-mlp .pips i.off { background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(224, 104, 94, 0.4); }
.bt-mlp .pips.dense { gap: 2px; }
.bt-mlp .pips.dense i { width: 6px; height: 6px; }
.bt-mlp .bt-shard {
  position: absolute; width: 4px; height: 4px; margin: 2px 0 0 2px; pointer-events: none;
  background: #ffd0c6; box-shadow: 0 0 4px rgba(255, 120, 100, 0.9);
}

/* 入力中・対象・戦闘不能 */
.bt-mem.active {
  border-left-color: var(--bt-gold-2);
  background: linear-gradient(90deg, rgba(236, 212, 148, 0.24) 0%, rgba(236, 212, 148, 0.07) 55%, rgba(236, 212, 148, 0) 100%);
}
.bt-mem.active .bt-mface { border-color: var(--bt-gold-2); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 0 10px rgba(255, 233, 168, 0.65); }
.bt-mem.active .bt-mname b { color: #fff4cc; }
.bt-mem.active::after {
  content: ''; position: absolute; left: -9px; top: 50%; width: 7px; height: 10px; margin-top: -5px;
  background: var(--bt-gold-2); clip-path: polygon(0 0, 100% 50%, 0 100%);
  animation: bt-nudge 0.6s ease-in-out infinite;
}
.bt-mem.tg {
  cursor: pointer; border-left-color: var(--bt-cyan);
  background: linear-gradient(90deg, rgba(111, 211, 224, 0.26), rgba(111, 211, 224, 0.06) 60%, rgba(111, 211, 224, 0));
  box-shadow: inset 0 0 0 1px rgba(111, 211, 224, 0.45);
}
.bt-mem.ko .bt-mface, .bt-mem.dead .bt-mface { filter: grayscale(1) brightness(0.55); }
.bt-mem.ko .bt-mname b, .bt-mem.dead .bt-mname b { color: #8a8f9a; }
.bt-mem.ko .bt-mname::after, .bt-mem.dead .bt-mname::after {
  content: '戦闘不能'; font-size: 10px; line-height: 1; padding: 2px 4px 1px; letter-spacing: 0.06em;
  color: #ffc6bc; background: rgba(120, 24, 18, 0.75); border: 1px solid rgba(224, 104, 94, 0.7);
}
.bt-mem.dead { opacity: 0.55; }
.bt-mem.dead .bt-mname::after { content: '死亡'; color: #d8d8e0; background: rgba(30, 30, 38, 0.9); border-color: #777; }
.bt-mem.ko .bt-hpl .v, .bt-mem.dead .bt-hpl .v { color: #e0685e; animation: none; }

/* コマンド窓 */
.bt-cmd {
  flex: none; width: 412px; padding: 6px 12px 5px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.bt-chead {
  display: flex; align-items: baseline; gap: 8px; height: 24px; flex: none; padding: 0 2px 4px;
  white-space: nowrap; overflow: hidden; border-bottom: 1px solid rgba(201, 165, 90, 0.22);
}
.bt-chead > .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bt-chead .bt-autob + .bt-fastb { margin-left: -2px; }
.bt-chead .nm { font-family: var(--font-body); font-weight: 700; font-size: 17px; letter-spacing: 0.06em; color: var(--bt-gold); text-shadow: 0 1px 2px #000; }
.bt-chead .nm.dim { color: var(--text-dim); font-weight: 600; font-size: 15px; }
.bt-chead .wpn { font-size: 11px; color: var(--text-dim); padding: 1px 5px 0; border: 1px solid rgba(169, 162, 147, 0.3); }
.bt-chead .rs { font-size: 11px; color: var(--bt-wp); }
.bt-chead .rs.jp { color: var(--bt-jp); }
.bt-chead .rs b { font-weight: normal; font-size: 14px; color: var(--text-hi); margin-left: 3px; }
.bt-autob {
  -webkit-appearance: none; appearance: none; margin-left: auto; align-self: center;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-family: var(--font-ui); font-size: 11px; color: var(--text-dim); letter-spacing: 0.06em;
  padding: 2px 3px 2px 6px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(201, 165, 90, 0.3); border-radius: 2px;
}
.bt-autob:hover { color: var(--text-hi); border-color: var(--bt-gold); background: rgba(236, 212, 148, 0.12); }
.bt-fastb {
  -webkit-appearance: none; appearance: none; align-self: center; flex: none;
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-family: var(--font-ui); font-size: 11px; color: var(--text-dim); letter-spacing: 0.06em;
  padding: 2px 3px 2px 6px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(111, 211, 224, 0.28); border-radius: 2px;
}
.bt-chead .nm.dim + .bt-fastb { margin-left: auto; }
.bt-fastb:hover { color: var(--text-hi); border-color: var(--bt-cyan); }
.bt-fastb.on { color: #eaffff; border-color: var(--bt-cyan); background: rgba(111, 211, 224, 0.18); text-shadow: 0 0 6px rgba(111, 211, 224, 0.6); }
.bt-fastb.on kbd { color: #0a2226; background: var(--bt-cyan); border-color: #bff4ff; }
.bt-cgrid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 25px; gap: 2px 8px; flex: none; }
.bt-c {
  position: relative; display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 0 10px 0 6px; cursor: pointer; white-space: nowrap;
  font-size: 16px; letter-spacing: 0.06em; color: var(--text);
  border: 1px solid transparent;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 80%);
}
.bt-c .lb { flex: none; }
.bt-c small { margin-left: auto; font-size: 11px; color: var(--text-dim); letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; }
.bt-c:hover { border-color: rgba(201, 165, 90, 0.35); }
.bt-c.sel {
  color: #fff6da; border-color: var(--bt-gold);
  background: linear-gradient(90deg, rgba(236, 212, 148, 0.34) 0%, rgba(236, 212, 148, 0.1) 70%, rgba(236, 212, 148, 0.04) 100%);
  box-shadow: 0 0 12px rgba(236, 212, 148, 0.22), inset 0 0 8px rgba(255, 233, 168, 0.12);
  text-shadow: 0 0 6px rgba(255, 233, 168, 0.45);
}
.bt-c.sel kbd { color: #1a1408; background: var(--bt-gold); border-color: var(--bt-gold-2); }
.bt-c.sel::before {
  content: ''; position: absolute; left: -10px; top: 50%; width: 6px; height: 10px; margin-top: -5px;
  background: var(--bt-gold-2); clip-path: polygon(0 0, 100% 50%, 0 100%);
  animation: bt-nudge 0.6s ease-in-out infinite;
}
.bt-c.open { color: #eaffff; border-color: rgba(111, 211, 224, 0.6); background: linear-gradient(90deg, rgba(111, 211, 224, 0.2), rgba(111, 211, 224, 0.03)); }
.bt-c.off { color: #5e626c; cursor: not-allowed; background: none; text-shadow: none; }
.bt-c.off kbd { color: #5e626c; border-color: rgba(94, 98, 108, 0.45); background: none; }
.bt-c.off small { color: #5e626c; }
.bt-c.off.sel { border-color: rgba(224, 104, 94, 0.55); background: linear-gradient(90deg, rgba(224, 104, 94, 0.14), rgba(224, 104, 94, 0)); box-shadow: none; }
.bt-c.off.sel kbd { color: #ffc6bc; background: rgba(120, 24, 18, 0.6); border-color: rgba(224, 104, 94, 0.6); }
.bt-c.off.sel::before { background: #e0685e; }
.bt-chint {
  display: flex; align-items: flex-start; gap: 10px; height: 34px; flex: none; overflow: hidden; padding: 1px 2px 0;
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.3; color: var(--text-dim);
}
.bt-chint b { font-weight: 700; color: var(--text-hi); }
.bt-chint .ng { color: #ff9a8a; }
.bt-chint .k { margin-left: auto; flex: none; font-family: var(--font-ui); font-size: 10.5px; color: var(--ash); letter-spacing: 0.04em; padding-top: 2px; }
.bt-cmd.idle .bt-cgrid { opacity: 0.38; filter: grayscale(0.7); pointer-events: none; }
.bt-cmd.idle .bt-chint { align-items: center; }

/* =====================================================================
   keyframes（ループの光だけ）
   ===================================================================== */
@keyframes bt-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes bt-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@keyframes bt-ring { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes bt-lowhp { 0%, 100% { color: #ff9a86; } 50% { color: #ff5a48; text-shadow: 0 0 8px rgba(255, 80, 60, 0.7); } }
@keyframes bt-res-up { 0% { color: #ffffff; text-shadow: 0 0 10px #aef; transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes bt-res-dn { 0% { color: #ffd27a; text-shadow: 0 0 8px #fa6; } 100% { color: var(--text-hi); } }
@keyframes bt-mote { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-120px); opacity: 0; } }

/* =====================================================================
   技・術・合体技・道具の一覧（味方パネルの上に重なる）
   ===================================================================== */
.bt-sub {
  position: absolute; left: 14px; bottom: 10px; width: 828px; height: 196px;
  display: none; grid-template-columns: minmax(0, 1fr) 286px; grid-template-rows: 26px minmax(0, 1fr);
  gap: 6px 14px; padding: 8px 12px 10px 14px;
  background: linear-gradient(180deg, #161a29 0%, #0a0c13 100%);
}
.bt-sub.on { display: grid; }
.bt-sub.behind { opacity: 0.16 !important; pointer-events: none; filter: blur(1px) grayscale(0.5); }
.bt-shead {
  grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; white-space: nowrap;
  padding: 0 2px 4px; border-bottom: 1px solid rgba(201, 165, 90, 0.22);
}
.bt-shead .cat {
  align-self: center; font-family: var(--font-body); font-weight: 800; font-size: 13px; letter-spacing: 0.1em;
  color: #1a1408; background: linear-gradient(180deg, var(--bt-gold-2), var(--bt-brass)); padding: 1px 9px 0;
  box-shadow: 0 0 8px rgba(236, 212, 148, 0.35);
}
.bt-shead .nm { font-family: var(--font-body); font-weight: 700; font-size: 16px; letter-spacing: 0.06em; color: var(--bt-gold); }
.bt-shead .wpn { font-size: 11px; color: var(--text-dim); padding: 1px 5px 0; border: 1px solid rgba(169, 162, 147, 0.3); }
.bt-shead .rs { font-size: 11px; color: var(--bt-wp); }
.bt-shead .rs.jp { color: var(--bt-jp); }
.bt-shead .rs b { font-weight: normal; font-size: 14px; color: var(--text-hi); margin-left: 3px; }
.bt-shead .k { margin-left: auto; font-size: 10.5px; color: var(--ash); }
.bt-list {
  position: relative; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 27px; gap: 3px 8px; align-content: start;
  padding: 1px 10px 1px 12px;
  scrollbar-width: thin; scrollbar-color: rgba(201, 165, 90, 0.5) transparent;
}
.bt-list::-webkit-scrollbar { width: 5px; }
.bt-list::-webkit-scrollbar-thumb { background: rgba(201, 165, 90, 0.5); }
.bt-li {
  position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer;
  padding: 0 10px 0 6px; border: 1px solid transparent;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 85%);
}
.bt-li .nm {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: 0.05em; color: var(--text);
}
.bt-li .nm em {
  font-style: normal; font-family: var(--font-ui); font-size: 9.5px; margin-left: 6px; padding: 1px 4px 0; vertical-align: 2px;
  color: #cfe4ff; border: 1px solid rgba(134, 188, 255, 0.5);
}
.bt-li .cost { flex: none; font-size: 11px; color: var(--text-dim); letter-spacing: 0.02em; }
.bt-li kbd { margin-right: -2px; }
.bt-li kbd.nk { visibility: hidden; }
.bt-li.sel kbd { color: #1a1408; background: var(--bt-gold); border-color: var(--bt-gold-2); }
.bt-li.off kbd { color: #5e626c; border-color: rgba(94, 98, 108, 0.45); }
.bt-li:hover { border-color: rgba(201, 165, 90, 0.35); }
.bt-li.sel {
  border-color: var(--bt-gold);
  background: linear-gradient(90deg, rgba(236, 212, 148, 0.32) 0%, rgba(236, 212, 148, 0.08) 75%, rgba(236, 212, 148, 0.03) 100%);
  box-shadow: 0 0 12px rgba(236, 212, 148, 0.2);
}
.bt-li.sel .nm { color: #fff6da; text-shadow: 0 0 6px rgba(255, 233, 168, 0.45); }
.bt-li.sel .cost { color: var(--text-hi); }
.bt-li.sel::before {
  content: ''; position: absolute; left: -10px; top: 50%; width: 6px; height: 10px; margin-top: -5px;
  background: var(--bt-gold-2); clip-path: polygon(0 0, 100% 50%, 0 100%);
  animation: bt-nudge 0.6s ease-in-out infinite;
}
.bt-li.off .nm, .bt-li.off .cost { color: #5e626c; }
.bt-li.off .bt-elc { opacity: 0.45; }
.bt-li.off.sel { border-color: rgba(224, 104, 94, 0.55); background: linear-gradient(90deg, rgba(224, 104, 94, 0.14), rgba(224, 104, 94, 0)); box-shadow: none; }
.bt-li.off.sel::before { background: #e0685e; }
.bt-empty { grid-column: 1 / -1; padding: 16px 8px; font-family: var(--font-body); color: var(--text-dim); }
.bt-sdet {
  position: relative; min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 9px; row-gap: 5px; align-content: start;
  padding: 8px 12px 8px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  border-left: 1px solid rgba(201, 165, 90, 0.28);
}
.bt-sdet > .bt-elc { grid-row: 1; align-self: center; }
.bt-sdet .dn {
  grid-row: 1; align-self: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-body); font-weight: 800; font-size: 19px; letter-spacing: 0.08em; color: var(--bt-gold-2);
  text-shadow: 0 0 10px rgba(236, 212, 148, 0.3), 0 1px 2px #000;
}
.bt-sdet .dl { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-dim); line-height: 1.5; }
.bt-sdet .dl b { font-weight: normal; font-size: 14px; color: var(--text-hi); margin-left: 2px; }
.bt-sdet .dl i { font-style: normal; color: var(--bt-brass-d); margin: 0 7px; }
.bt-sdet p {
  grid-column: 1 / -1; margin: 0; padding-top: 5px; border-top: 1px solid rgba(201, 165, 90, 0.14);
  font-family: var(--font-body); font-size: 13px; line-height: 1.55; color: var(--text);
}
.bt-sdet p .ng { color: #ff9a8a; }

/* =====================================================================
   対象選択・入力中の光・当たり判定
   ===================================================================== */
.bt-selglow { position: absolute; left: 0; top: 0; width: 0; height: 0; display: none; }
.bt-selglow.on { display: block; }
.bt-selglow i {
  position: absolute; left: -46px; top: -13px; width: 92px; height: 26px; border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 238, 180, 0.7) 0%, rgba(255, 200, 110, 0.28) 45%, rgba(255, 200, 110, 0) 72%);
  mix-blend-mode: screen;
}
.bt-selglow i::after {
  content: ''; position: absolute; inset: 3px 6px; border-radius: 50%;
  border: 1px solid rgba(255, 233, 168, 0.75); box-shadow: 0 0 8px rgba(255, 233, 168, 0.6);
  animation: bt-ring 1.4s ease-out infinite;
}
.bt-selglow b {
  position: absolute; left: -32px; bottom: 0; width: 64px; height: 170px;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(255, 236, 170, 0.5) 0%, rgba(255, 220, 140, 0.16) 50%, rgba(255, 220, 140, 0) 80%);
  mix-blend-mode: screen;
}
.bt-selglow b::before, .bt-selglow b::after {
  content: ''; position: absolute; bottom: 8px; width: 3px; height: 3px; background: #fff3c8;
  box-shadow: 0 0 6px 1px rgba(255, 220, 140, 0.9);
  animation: bt-mote 1.6s linear infinite;
}
.bt-selglow b::before { left: 20px; }
.bt-selglow b::after { left: 42px; animation-delay: 0.8s; }

.bt-cur { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.bt-cur i {
  position: absolute; left: -12px; bottom: 0; width: 24px; height: 17px;
  background: linear-gradient(180deg, #fff8dc, var(--bt-gold) 60%, #b08a3a);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 0 4px rgba(255, 220, 140, 0.95)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.8));
}
.bt-cur span {
  position: absolute; left: 0; bottom: 22px; transform: translateX(-50%);
  white-space: nowrap; padding: 2px 10px 1px;
  font-family: var(--font-body); font-weight: 700; font-size: 14px; letter-spacing: 0.06em; color: #fff6da;
  background: rgba(10, 12, 20, 0.88); border: 1px solid rgba(236, 212, 148, 0.7);
  box-shadow: 0 0 10px rgba(236, 212, 148, 0.25), 0 2px 6px rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 2px #000;
}
.bt-cur.party i { background: linear-gradient(180deg, #eaffff, var(--bt-cyan) 60%, #2f7c86); filter: drop-shadow(0 0 4px rgba(111, 211, 224, 0.95)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.8)); }
.bt-cur.party span { border-color: rgba(111, 211, 224, 0.7); color: #eaffff; }

.bt-hit { position: absolute; display: none; }
.bt-hit.on { display: block; pointer-events: auto; cursor: pointer; }
.bt-hit.on:hover { background: radial-gradient(ellipse 60% 40% at 50% 92%, rgba(255, 233, 168, 0.18), rgba(255, 233, 168, 0) 70%); }
.bt-root.targeting { cursor: crosshair; }

/* =====================================================================
   数字のポップ・札・吹き出し
   ===================================================================== */
.bt-pop {
  position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap; text-align: center;
  font-family: var(--font-body); font-weight: 800; line-height: 1; color: #fff;
  --stk: #140a06;
  text-shadow:
    2px 0 0 var(--stk), -2px 0 0 var(--stk), 0 2px 0 var(--stk), 0 -2px 0 var(--stk),
    1.5px 1.5px 0 var(--stk), -1.5px 1.5px 0 var(--stk), 1.5px -1.5px 0 var(--stk), -1.5px -1.5px 0 var(--stk),
    0 4px 8px rgba(0, 0, 0, 0.75);
}
.bt-pop b { display: block; font-weight: 800; font-size: 36px; letter-spacing: 0.02em; }
.bt-pop em {
  display: block; width: max-content; margin: 0 auto 3px; padding: 2px 7px 1px;
  font-style: normal; font-family: var(--font-ui); font-weight: normal; font-size: 13px; letter-spacing: 0.12em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}
.bt-pop.dmg.party b { font-size: 31px; color: #fff1ea; }
.bt-pop.weak b { color: #ff6c52; font-size: 40px; }
.bt-pop.weak em { color: #fff; background: linear-gradient(180deg, #e0463a, #8a1a14); box-shadow: 0 0 10px rgba(255, 90, 60, 0.8); }
.bt-pop.resist b { color: #aeb2ba; font-size: 30px; }
.bt-pop.resist em { color: #e6e8ee; background: rgba(70, 74, 84, 0.95); border: 1px solid #9aa0aa; }
.bt-pop.zero b { color: #9ca0a8; font-size: 28px; }
.bt-pop.zero em { color: #d8dce4; background: rgba(40, 44, 52, 0.9); }
.bt-pop.crit b {
  font-size: 50px; color: #ffe45e;
  text-shadow:
    2px 0 0 #3a1800, -2px 0 0 #3a1800, 0 2px 0 #3a1800, 0 -2px 0 #3a1800,
    2px 2px 0 #3a1800, -2px 2px 0 #3a1800, 2px -2px 0 #3a1800, -2px -2px 0 #3a1800,
    0 0 16px rgba(255, 200, 60, 0.95), 0 0 30px rgba(255, 150, 40, 0.6);
}
.bt-pop.crit em { color: #2a1600; background: linear-gradient(180deg, #fff2a8, #e8b030); box-shadow: 0 0 12px rgba(255, 210, 90, 0.9); }
.bt-pop.crit.weak b { color: #ff8a4a; }
.bt-pop.poison b { color: #d9a2ff; font-size: 28px; }
.bt-pop.heal b {
  color: #8dffb6; font-size: 34px;
  text-shadow:
    2px 0 0 #03200e, -2px 0 0 #03200e, 0 2px 0 #03200e, 0 -2px 0 #03200e,
    1.5px 1.5px 0 #03200e, -1.5px 1.5px 0 #03200e, 1.5px -1.5px 0 #03200e, -1.5px -1.5px 0 #03200e,
    0 0 14px rgba(100, 255, 160, 0.7);
}
.bt-pop.res { font-family: var(--font-ui); font-weight: normal; font-size: 13px; }
.bt-pop.res b { display: inline; font-family: var(--font-body); font-weight: 800; font-size: 20px; margin-left: 3px; }
.bt-pop.res.wp { color: var(--bt-wp); }
.bt-pop.res.jp { color: var(--bt-jp); }
.bt-pop.tag { font-size: 19px; letter-spacing: 0.1em; }
.bt-pop.tag small { font-size: 11px; margin-left: 3px; font-family: var(--font-ui); font-weight: normal; }
.bt-pop.tag b { display: inline; font-size: 22px; margin-left: 3px; }
.bt-pop.counter { color: #ffb46e; }
.bt-pop.st.up { color: #8ff0c8; }
.bt-pop.st.down { color: #a8b8ff; }
.bt-pop.st.bad { color: #d9a2ff; }
.bt-pop.st.off { color: #b8bcc4; font-size: 15px; }
.bt-pop.revive { color: #c8ffd8; font-size: 22px; text-shadow: 0 0 12px rgba(120, 255, 170, 0.8), 0 2px 0 #03200e, 0 -2px 0 #03200e, 2px 0 0 #03200e, -2px 0 0 #03200e; }
.bt-pop.lp { color: #ff8a78; }
.bt-pop.mikiri {
  font-size: 28px; color: #e8fbff; letter-spacing: 0.16em;
  text-shadow: 0 0 10px rgba(111, 211, 224, 0.95), 0 0 22px rgba(111, 211, 224, 0.6), 2px 0 0 #031820, -2px 0 0 #031820, 0 2px 0 #031820, 0 -2px 0 #031820;
}
.bt-pop.miss { font-family: var(--font-ui); font-weight: normal; font-size: 22px; letter-spacing: 0.14em; color: #dfe3ea; font-style: italic; }
.bt-pop.assist { color: #a6f4e6; font-size: 16px; }

/* 吹き出し */
.bt-bubble { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; --s: 1; }
.bt-bubble span {
  position: relative; display: block; width: max-content; max-width: 300px; padding: 7px 14px 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; line-height: 1.5; letter-spacing: 0.04em; white-space: normal;
  border-radius: 3px;
}
.bt-bubble span::after { content: ''; position: absolute; bottom: -10px; width: 16px; height: 11px; }
.bt-bubble.enemy { transform: translate(-16px, calc(-100% - 14px)) scale(var(--s)); transform-origin: 16px calc(100% + 14px); }
.bt-bubble.enemy span {
  color: #ffdcd2; background: linear-gradient(180deg, rgba(40, 12, 14, 0.95), rgba(18, 6, 8, 0.96));
  border: 1px solid rgba(214, 84, 70, 0.8);
  box-shadow: 0 0 14px rgba(160, 30, 20, 0.45), 0 4px 10px rgba(0, 0, 0, 0.6);
  text-shadow: 0 1px 2px #000;
}
.bt-bubble.enemy span::after { left: 10px; background: rgba(214, 84, 70, 0.85); clip-path: polygon(0 0, 100% 0, 0 100%); }
.bt-bubble.party { transform: translate(calc(-100% + 16px), calc(-100% - 14px)) scale(var(--s)); transform-origin: calc(100% - 16px) calc(100% + 14px); }
.bt-bubble.party span {
  color: #2a1d10; background: linear-gradient(180deg, #f3e8cc, #d8c7a0);
  border: 1px solid #8a6d3a; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.bt-bubble.party span::after { right: 10px; background: #8a6d3a; clip-path: polygon(0 0, 100% 0, 100% 100%); }

/* =====================================================================
   突入演出（白い閃光・画面のひび）と「時が止まる」覆い
   ===================================================================== */
/* 突入の最初の一瞬はまだ前のモード（#battle-ui は非表示）なので、ひびの間だけ演出層を先に見せる */
#game:not([data-mode='battle']) #battle-ui:has(.bt-cracks) { visibility: visible; opacity: 1; transition: none; }
#game:not([data-mode='battle']) #battle-ui:has(.bt-cracks) .bt-root > :not(.bt-fxl) { visibility: hidden; }
/* 戦闘中は前の場面の本文窓・HUD を確実に隠す（白い閃光の間に切り替わるのでフェードは不要） */
#game[data-mode='battle'] #textbox, #game[data-mode='battle'] #hud { visibility: hidden; opacity: 0; transition: none; }

.bt-white { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, #ffffff 0%, #f4f8ff 55%, #dfe8ff 100%); }
.bt-cracks {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 0 3px rgba(190, 225, 255, 0.95)) drop-shadow(0 0 1px #fff);
}
.bt-cracks path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bt-cracks .ck-m { stroke: #ffffff; stroke-width: 3.2; }
.bt-cracks .ck-b { stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.6; }
.bt-cracks .ck-r { stroke: rgba(235, 245, 255, 0.75); stroke-width: 1.8; }
.bt-cracks .ck-r.r0 { stroke-width: 2.4; }
.bt-cracks .ck-s { fill: rgba(225, 238, 255, 0.4); stroke: rgba(255, 255, 255, 0.9); stroke-width: 1.2; }

.bt-freeze { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.bt-freeze.spark {
  background:
    radial-gradient(ellipse 55% 45% at 50% 44%, rgba(255, 214, 110, 0.14) 0%, rgba(255, 214, 110, 0) 70%),
    radial-gradient(ellipse at 50% 45%, rgba(18, 12, 2, 0.2) 0%, rgba(6, 4, 0, 0.78) 80%);
  -webkit-backdrop-filter: saturate(0.2) brightness(0.85) contrast(1.1);
  backdrop-filter: saturate(0.2) brightness(0.85) contrast(1.1);
}
.bt-freeze.reso {
  background: radial-gradient(ellipse at 50% 42%, rgba(30, 20, 50, 0.2) 0%, rgba(4, 3, 10, 0.82) 80%);
  -webkit-backdrop-filter: brightness(0.7) saturate(0.6);
  backdrop-filter: brightness(0.7) saturate(0.6);
}
.bt-freeze.defeat {
  background: radial-gradient(ellipse at 50% 40%, rgba(60, 6, 4, 0.3) 0%, rgba(12, 0, 0, 0.82) 85%);
  -webkit-backdrop-filter: grayscale(1) brightness(0.7);
  backdrop-filter: grayscale(1) brightness(0.7);
}

/* =====================================================================
   見せ場の帯（閃き・連携・合体技・見切り・共鳴・ボス）
   ===================================================================== */
.bt-band { position: absolute; left: 0; right: 0; top: 292px; height: 0; --bh: 176px; --ec: #ffd66e; }
.bt-band .bb-bg {
  position: absolute; left: 0; right: 0; top: calc(var(--bh) / -2); height: var(--bh);
  transform-origin: 50% 50%; transform: scaleY(0);
  background: linear-gradient(90deg, rgba(8, 7, 5, 0) 0%, rgba(8, 7, 5, 0.9) 14%, rgba(8, 7, 5, 0.9) 86%, rgba(8, 7, 5, 0) 100%);
}
.bt-band .bb-edge {
  position: absolute; left: 0; right: 0; height: 2px; transform: scaleX(0); transform-origin: 50% 50%;
  background: linear-gradient(90deg, rgba(255, 220, 130, 0) 0%, var(--ec) 25%, #fff6d8 50%, var(--ec) 75%, rgba(255, 220, 130, 0) 100%);
  box-shadow: 0 0 10px var(--ec), 0 0 22px var(--ec);
}
.bt-band .bb-edge.t { top: calc(var(--bh) / -2 - 1px); }
.bt-band .bb-edge.b { top: calc(var(--bh) / 2 - 1px); }
.bt-band .bb-rays {
  position: absolute; left: 50%; top: 0; width: 1100px; height: 1100px; opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 232, 160, 0.26) 0deg 3deg, rgba(255, 232, 160, 0) 3deg 12deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.6) 25%, transparent 60%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, 0.6) 25%, transparent 60%);
  mix-blend-mode: screen;
}
.bt-band .bb-streak { position: absolute; left: 0; width: 44%; opacity: 0; mix-blend-mode: screen; }
.bt-band .bb-streak.s1 { top: -2px; height: 4px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fffbe8 50%, rgba(255, 255, 255, 0)); box-shadow: 0 0 12px var(--ec); }
.bt-band .bb-streak.s2 {
  top: calc(var(--bh) / -2); height: var(--bh);
  background: linear-gradient(100deg, rgba(255, 245, 210, 0) 35%, rgba(255, 245, 210, 0.2) 48%, rgba(255, 245, 210, 0.32) 50%, rgba(255, 245, 210, 0) 62%);
}
.bt-band .bb-streak.s3 { top: calc(var(--bh) / 2 - 22px); height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--ec) 50%, rgba(255, 255, 255, 0)); }
.bt-band .bb-flash {
  position: absolute; left: 0; right: 0; top: calc(var(--bh) / -2); height: var(--bh); opacity: 0;
  background: radial-gradient(ellipse 45% 70% at 50% 50%, #ffffff 0%, rgba(255, 244, 210, 0.65) 35%, rgba(255, 244, 210, 0) 75%);
  mix-blend-mode: screen;
}
.bt-band .bb-in {
  position: absolute; left: 0; right: 0; top: calc(var(--bh) / -2); height: var(--bh);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; white-space: nowrap;
}
.bt-band .bb-kick {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 800; font-size: 22px; letter-spacing: 0.3em; color: #fff0c0;
  text-shadow: 0 0 10px var(--ec), 0 2px 2px #000;
}
.bt-band .bb-kick .bulb { display: block; width: 32px; height: 32px; color: #ffe27a; filter: drop-shadow(0 0 6px rgba(255, 220, 110, 0.95)); }
.bt-band .bb-kick .bulb svg { display: block; width: 32px; height: 32px; }
.bt-band .bb-name {
  font-family: var(--font-body); font-weight: 800; font-size: 60px; line-height: 1.12; letter-spacing: 0.16em;
  color: #fff8e4; padding: 0 0.3em;
  text-shadow: 0 0 12px var(--ec), 0 0 30px var(--ec), 0 3px 0 rgba(0, 0, 0, 0.9), 0 0 2px #000;
}
.bt-band .bb-name span { display: inline-block; }
.bt-band .bb-sub { font-family: var(--font-body); font-size: 15px; letter-spacing: 0.1em; color: var(--text); text-shadow: 0 1px 2px #000; }
.bt-band .bb-sub b { font-weight: 700; color: var(--bt-gold); margin: 0 8px 0 0; }
.bt-band .bb-sub i { font-style: normal; color: var(--bt-brass); margin: 0 10px; }
.bt-band .bb-faces { display: flex; gap: 8px; }
.bt-band .bb-faces .bt-face {
  width: 40px; height: 40px; border: 1px solid var(--ec);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 12px var(--ec);
}

/* 閃き：金色の帯、光の筋 */
.bt-band.spark { --bh: 196px; --ec: #ffcc55; }
.bt-band.spark .bb-bg {
  background:
    radial-gradient(ellipse 50% 80% at 50% 50%, rgba(140, 96, 18, 0.55) 0%, rgba(140, 96, 18, 0) 70%),
    linear-gradient(90deg, rgba(12, 8, 2, 0) 0%, rgba(12, 8, 2, 0.92) 12%, rgba(12, 8, 2, 0.92) 88%, rgba(12, 8, 2, 0) 100%);
}
.bt-band.spark .bb-kick { font-size: 26px; color: #ffe9a0; letter-spacing: 0.34em; }
.bt-band.spark .bb-name {
  font-size: 68px; color: #fff4c4;
  text-shadow: 0 0 10px rgba(255, 220, 110, 1), 0 0 26px rgba(255, 186, 50, 0.85), 0 0 60px rgba(255, 150, 30, 0.55), 0 3px 0 #4a2600, 0 0 2px #000;
}
.bt-band.spark .bb-sub b { color: #ffe9a0; }

/* 連携：紅と金、N連携！・合計ダメージ */
.bt-band.combo { --bh: 200px; --ec: #ff7a4a; }
.bt-band.combo .bb-bg {
  background:
    radial-gradient(ellipse 45% 80% at 50% 50%, rgba(150, 30, 16, 0.55) 0%, rgba(150, 30, 16, 0) 72%),
    linear-gradient(90deg, rgba(14, 4, 3, 0) 0%, rgba(14, 4, 3, 0.92) 10%, rgba(14, 4, 3, 0.92) 90%, rgba(14, 4, 3, 0) 100%);
}
.bt-band.combo .bb-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 150, 90, 0.24) 0deg 3deg, rgba(255, 150, 90, 0) 3deg 11deg); }
.bt-band.combo .bb-faces { margin-bottom: 2px; }
.bt-band.combo .bb-name { font-size: 64px; color: #fff2e6; letter-spacing: 0.12em; text-shadow: 0 0 12px rgba(255, 120, 70, 1), 0 0 30px rgba(255, 80, 40, 0.7), 0 3px 0 #3a0a04, 0 0 2px #000; }
.bt-band.combo .bb-count {
  position: absolute; left: 7%; top: 50%; margin-top: -46px;
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  font-family: var(--font-body); font-weight: 800; color: #ffe27a;
}
.bt-band.combo .bb-count b {
  font-size: 88px; font-weight: 800; color: #fff0a0;
  text-shadow: 0 0 14px rgba(255, 200, 60, 0.95), 0 0 34px rgba(255, 120, 40, 0.7), 0 4px 0 #4a1a00, 0 0 2px #000;
}
.bt-band.combo .bb-count span { font-size: 28px; letter-spacing: 0.12em; margin-top: -4px; text-shadow: 0 0 10px rgba(255, 150, 60, 0.9), 0 2px 0 #3a0a04; }
.bt-band.combo .bb-total {
  position: absolute; right: 7%; top: 50%; margin-top: -44px;
  display: flex; flex-direction: column; align-items: center; line-height: 1; gap: 4px;
}
.bt-band.combo .bb-total small { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.24em; color: #ffc6a8; }
.bt-band.combo .bb-total b {
  font-family: var(--font-body); font-weight: 800; font-size: 58px; color: #ffffff; min-width: 2.2em;
  text-shadow: 0 0 14px rgba(255, 110, 60, 0.95), 0 3px 0 #3a0a04, 2px 0 0 #3a0a04, -2px 0 0 #3a0a04, 0 -2px 0 #3a0a04;
}

/* 合体技：属性の光、参加者の顔 */
.bt-band.dual { --bh: 206px; }
.bt-band.dual .bb-bg {
  background:
    radial-gradient(ellipse 50% 85% at 50% 50%, color-mix(in srgb, var(--ec) 34%, transparent) 0%, rgba(0, 0, 0, 0) 72%),
    linear-gradient(90deg, rgba(6, 7, 12, 0) 0%, rgba(6, 7, 12, 0.92) 12%, rgba(6, 7, 12, 0.92) 88%, rgba(6, 7, 12, 0) 100%);
}
.bt-band.dual .bb-kick { font-size: 16px; letter-spacing: 0.5em; padding: 2px 6px 1px 14px; border: 1px solid var(--ec); background: rgba(0, 0, 0, 0.5); }
.bt-band.dual .bb-name { font-size: 58px; }
.bt-band.dual .bb-rays { display: none; }

/* 見切り：銀と青 */
.bt-band.mikiri { --bh: 150px; --ec: #6fd3e0; }
.bt-band.mikiri .bb-bg {
  background:
    radial-gradient(ellipse 50% 80% at 50% 50%, rgba(30, 110, 130, 0.45) 0%, rgba(30, 110, 130, 0) 70%),
    linear-gradient(90deg, rgba(3, 10, 14, 0) 0%, rgba(3, 10, 14, 0.9) 14%, rgba(3, 10, 14, 0.9) 86%, rgba(3, 10, 14, 0) 100%);
}
.bt-band.mikiri .bb-rays { display: none; }
.bt-band.mikiri .bb-kick { font-size: 24px; color: #e8fbff; }
.bt-band.mikiri .bb-name { font-size: 46px; color: #f2fdff; }
.bt-band.mikiri .bb-sub b { color: #bff4ff; }

/* 共鳴：属性色の大演出 */
.bt-band.reso { --bh: 230px; --ec: #ffd66e; --eg: #fff0c0; top: 280px; }
.bt-band.reso .bb-bg {
  background:
    radial-gradient(ellipse 55% 90% at 50% 50%, color-mix(in srgb, var(--ec) 40%, transparent) 0%, rgba(0, 0, 0, 0) 74%),
    linear-gradient(90deg, rgba(5, 5, 10, 0) 0%, rgba(5, 5, 10, 0.88) 10%, rgba(5, 5, 10, 0.88) 90%, rgba(5, 5, 10, 0) 100%);
}
.bt-band.reso .bb-rays { background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--eg) 30%, transparent) 0deg 2.5deg, rgba(0, 0, 0, 0) 2.5deg 9deg); }
.bt-band.reso .bb-edge { background: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--ec) 25%, var(--eg) 50%, var(--ec) 75%, rgba(0, 0, 0, 0)); box-shadow: 0 0 10px var(--eg), 0 0 24px var(--ec); }
.bt-band.reso .bb-kick { font-size: 20px; letter-spacing: 0.6em; color: var(--eg); }
.bt-band.reso .bb-name { position: relative; font-size: 70px; color: #ffffff; text-shadow: 0 0 14px var(--eg), 0 0 34px var(--ec), 0 0 70px var(--ec), 0 3px 0 rgba(0, 0, 0, 0.9); }
.bt-band.reso .bb-sub { position: relative; color: var(--eg); letter-spacing: 0.3em; }
.bt-band.reso .bb-kick { position: relative; }
.bt-band.reso .bb-wm {
  position: absolute; left: 50%; top: 50%; opacity: 0; pointer-events: none;
  font-family: var(--font-body); font-weight: 800; font-size: 300px; line-height: 1; color: var(--eg);
  text-shadow: 0 0 40px var(--ec);
}

/* ボス */
.bt-band.boss { --bh: 150px; --ec: #e0584a; }
.bt-band.boss .bb-bg {
  background:
    radial-gradient(ellipse 50% 80% at 50% 50%, rgba(120, 16, 10, 0.5) 0%, rgba(120, 16, 10, 0) 70%),
    linear-gradient(90deg, rgba(10, 2, 2, 0) 0%, rgba(10, 2, 2, 0.92) 12%, rgba(10, 2, 2, 0.92) 88%, rgba(10, 2, 2, 0) 100%);
}
.bt-band.boss .bb-rays { display: none; }
.bt-band.boss .bb-kick {
  font-family: var(--font-ui); font-weight: normal; font-size: 14px; letter-spacing: 0.6em; color: #ffd8c8;
  padding: 2px 4px 1px 14px; background: linear-gradient(180deg, #a02a22, #5a1410); border: 1px solid #e0685e;
}
.bt-band.boss .bb-name { font-size: 50px; color: #ffe6dc; }
.bt-band.boss .bb-name i { font-style: normal; color: #e0685e; margin: 0 0.2em; }
.bt-band.boss .bb-sub { font-size: 14px; color: #d8c4bc; letter-spacing: 0.08em; max-width: 780px; white-space: normal; }

/* 開戦の一文・逃走 */
.bt-ribbon {
  position: absolute; left: 0; right: 0; top: 262px; height: 64px; opacity: 0;
  display: grid; place-items: center; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 9, 15, 0) 0%, rgba(8, 9, 15, 0.86) 20%, rgba(8, 9, 15, 0.86) 80%, rgba(8, 9, 15, 0) 100%);
}
.bt-ribbon::before, .bt-ribbon::after {
  content: ''; position: absolute; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, rgba(201, 165, 90, 0), var(--bt-gold), rgba(201, 165, 90, 0));
}
.bt-ribbon::before { top: 0; }
.bt-ribbon::after { bottom: 0; }
.bt-ribbon span {
  display: block; font-family: var(--font-body); font-weight: 600; font-size: 24px; letter-spacing: 0.16em; color: var(--text-hi);
  text-shadow: 0 0 12px rgba(236, 212, 148, 0.3), 0 2px 2px #000;
}

/* =====================================================================
   結果パネル
   ===================================================================== */
.bt-result {
  position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; cursor: pointer; pointer-events: auto;
  background: radial-gradient(ellipse at 50% 46%, rgba(6, 7, 12, 0.45) 0%, rgba(4, 5, 9, 0.84) 75%);
}
.br-panel {
  position: relative; width: 880px; max-height: 690px; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 18px 34px 14px;
  background: linear-gradient(180deg, rgba(24, 29, 46, 0.96) 0%, rgba(12, 14, 22, 0.97) 100%);
  border: 1px solid var(--line);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 0 0 3px rgba(8, 10, 16, 0.55), inset 0 0 0 4px rgba(201, 165, 90, 0.13), 0 20px 60px rgba(0, 0, 0, 0.7);
}
.br-panel::after {
  content: ''; position: absolute; inset: 3px; pointer-events: none;
  background: var(--corner-tl) left top no-repeat, var(--corner-tr) right top no-repeat, var(--corner-bl) left bottom no-repeat, var(--corner-br) right bottom no-repeat;
}
.br-title {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  font-family: var(--font-body); font-weight: 800; font-size: 34px; letter-spacing: 0.5em; color: var(--bt-gold-2);
  text-shadow: 0 0 16px rgba(255, 214, 110, 0.55), 0 2px 2px #000;
}
.br-title span { padding-left: 0.5em; }
.br-title i { flex: 1; max-width: 220px; height: 1px; background: linear-gradient(90deg, rgba(201, 165, 90, 0), var(--bt-gold)); }
.br-title i:last-child { background: linear-gradient(270deg, rgba(201, 165, 90, 0), var(--bt-gold)); }
.br-title.lose { color: #e8877c; text-shadow: 0 0 16px rgba(224, 90, 70, 0.6), 0 2px 2px #000; }
.br-title.lose i { background: linear-gradient(90deg, rgba(224, 104, 94, 0), #e0685e); }
.br-title.lose i:last-child { background: linear-gradient(270deg, rgba(224, 104, 94, 0), #e0685e); }
.br-title { flex: none; }
.br-body {
  display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 30px; margin-top: 14px;
  min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 4px;
  scrollbar-width: thin; scrollbar-color: rgba(201, 165, 90, 0.5) transparent;
}
.br-body::-webkit-scrollbar { width: 5px; }
.br-body::-webkit-scrollbar-thumb { background: rgba(201, 165, 90, 0.5); }
.br-body > .br-col.wide:first-child { grid-column: 1 / -1; }
.br-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.br-sec h4 {
  margin: 0 0 7px; padding-bottom: 3px; font-family: var(--font-ui); font-weight: normal; font-size: 12px; letter-spacing: 0.24em;
  color: var(--bt-brass); border-bottom: 1px solid rgba(201, 165, 90, 0.24);
}
.br-sec ul { margin: 0; padding: 0; list-style: none; }
.br-sec p { margin: 0; }
.br-sec .none { font-family: var(--font-body); font-size: 13px; color: var(--text-dim); }
.br-gold { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-body); font-weight: 800; font-size: 20px; color: #f0d27a; }
.br-gold b { font-size: 34px; color: #ffe69a; text-shadow: 0 0 12px rgba(255, 210, 90, 0.5), 0 2px 2px #000; }
.br-gold small { margin-left: auto; font-family: var(--font-ui); font-weight: normal; font-size: 11px; color: var(--text-dim); }
.br-items li { display: flex; align-items: baseline; justify-content: space-between; padding: 2px 0; font-family: var(--font-body); font-size: 15px; color: var(--text-hi); }
.br-items li small { font-family: var(--font-ui); font-size: 12px; color: var(--bt-gold); }
.br-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.br-stats li { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px; background: rgba(255, 255, 255, 0.03); border-left: 1px solid rgba(201, 165, 90, 0.3); }
.br-stats small { font-size: 10px; color: var(--text-dim); letter-spacing: 0.1em; }
.br-stats b { font-weight: normal; font-size: 20px; color: var(--text-hi); }
.br-rank { margin-top: 8px !important; font-size: 12px; color: var(--bt-gold); letter-spacing: 0.08em; }
.br-rank small { margin-left: 6px; color: var(--text-dim); }
.br-g { display: flex; gap: 12px; align-items: flex-start; padding: 5px 0 7px; }
.br-g + .br-g { border-top: 1px dashed rgba(201, 165, 90, 0.16); }
.br-gf { flex: none; width: 38px; height: 38px; border: 1px solid rgba(201, 165, 90, 0.55); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7); }
.br-g > div { min-width: 0; flex: 1; }
.br-g b { display: block; font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--text-hi); margin-bottom: 2px; }
.br-g ul { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.br-g li { font-family: var(--font-body); font-size: 14px; color: #bff0cf; }
.br-g li::before { content: '▲'; font-size: 9px; color: #7fe0a0; margin-right: 5px; vertical-align: 2px; }
.br-g li.star { color: #fff0c0; }
.br-g li.star::before { content: '★'; font-size: 11px; color: #ffd66e; vertical-align: 1px; text-shadow: 0 0 6px rgba(255, 214, 110, 0.8); }
.br-sec.spark li { font-family: var(--font-body); font-size: 16px; color: #fff0c0; text-shadow: 0 0 10px rgba(255, 210, 90, 0.55); padding: 2px 0; }
.br-sec.spark li b { font-weight: 700; color: var(--bt-gold); margin-right: 8px; font-size: 14px; }
.br-sec.spark h4 { color: #ffd66e; }
.br-col.wide .br-sec.spark ul, .br-col.wide .br-sec.mikiri ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; }
.br-sec.spark li, .br-sec.mikiri li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-sec.mikiri li { font-family: var(--font-body); font-size: 15px; color: #d8f8ff; padding: 2px 0; }
.br-sec.mikiri li b { font-weight: 700; color: var(--bt-cyan); margin-right: 8px; font-size: 14px; }
.br-sec.mikiri h4 { color: var(--bt-cyan); }
.br-star {
  display: flex; align-items: baseline; gap: 10px; padding: 6px 12px;
  font-family: var(--font-body); font-weight: 700; font-size: 17px; color: #fff0c0;
  background: linear-gradient(90deg, rgba(255, 214, 110, 0.16), rgba(255, 214, 110, 0));
  border-left: 2px solid #ffd66e;
}
.br-star i { font-style: normal; font-size: 22px; color: #ffe27a; text-shadow: 0 0 10px rgba(255, 220, 110, 0.95); }
.br-star small { font-weight: normal; font-size: 13px; color: var(--text-dim); }
.br-sec.dead h4 { color: #e0685e; }
.br-sec.dead li { font-family: var(--font-body); font-size: 15px; color: #e8b0a8; }
.br-lose { margin: 26px 0 18px; text-align: center; font-family: var(--font-body); font-size: 24px; letter-spacing: 0.24em; color: #e8b0a8; }
.br-foot { flex: none; margin-top: 12px; text-align: right; font-size: 11px; letter-spacing: 0.12em; color: var(--text-dim); animation: bt-blink 1.4s ease-in-out infinite; }

/* ---------- ポートレートの顔（味方。G.Portraits が無ければ従来のドット絵） ---------- */
.bt-face.pt-on { position: relative; background: radial-gradient(circle at 50% 38%, #414b6c, #151925 72%); }
.bt-face.pt-on img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 味方パネル：少し大きな丸い顔（行の高さは変えない） */
.bt-mface:has(> .bt-face.pt-on) {
  width: 36px; height: 36px; margin: -3px -3px -3px -3px; border-radius: 50%; overflow: hidden;
  border-color: rgba(236, 212, 148, 0.75);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.55);
}
.bt-mem.active .bt-mface:has(> .bt-face.pt-on) { border-color: var(--bt-gold-2); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 10px rgba(255, 233, 168, 0.7); }
/* 行動順の帯・連携の帯・結果の顔：角を少し丸めるだけ */
.bt-oi:has(> .bt-face.pt-on) { border-radius: 50%; }
.bt-oi:has(> .bt-face.pt-on) .bt-face { border-radius: 50%; }
.bt-band .bb-faces .bt-face.pt-on { border-radius: 50%; }
.br-gf:has(> .bt-face.pt-on) { border-radius: 50%; overflow: hidden; }