/* バトル画面の中（.bt-root の下だけ）。トークンは base.css（contracts.md §6.6）。
   z-index：HUD 10・吹き出し 20・カットイン 30（.bt-root の中だけ）。横長専用。844×390 では高さ基準で縮める */

.bt-root {
  position: absolute; inset: 0; overflow: hidden; background: #0b0f26;
  font-family: var(--font-ui, sans-serif); color: #fff;
  --bt-u: min(1vh, 0.56vw);            /* 高さ基準の単位（スマホ横持ちで小さく） */
  --bt-ink: #10132c;
  --bt-pc: #3fc8ff; --bt-ec: #ff4060;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.bt-root .bt-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.bt-root .bt-hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.bt-root .bt-hud button { pointer-events: auto; font-family: inherit; }
.bt-root [hidden] { display: none !important; }

/* ---------- 両側のパネル ---------- */
.bt-root .bt-side {
  position: absolute; display: flex; align-items: stretch; gap: calc(var(--bt-u) * 1.2);
  width: clamp(250px, 33vw, max(470px, calc(var(--bt-u) * 62)));   /* 大きい画面では文字（--bt-u）に合わせて広げる。名前が「…」で切れないように */
  padding: calc(var(--bt-u) * 1.1) calc(var(--bt-u) * 1.6) calc(var(--bt-u) * 1.1) calc(var(--bt-u) * 1.1);
  background: linear-gradient(105deg, rgba(16, 20, 50, 0.9) 0%, rgba(16, 20, 50, 0.72) 70%, rgba(16, 20, 50, 0) 100%);
  border-left: calc(var(--bt-u) * 0.7) solid var(--c);
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35));
  clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
}
.bt-root .bt-side--enemy { left: calc(var(--safe-l, 0px) + 0px); top: calc(var(--safe-t, 0px) + var(--bt-u) * 1.4); }
.bt-root .bt-side--player { left: calc(var(--safe-l, 0px) + 0px); bottom: calc(var(--safe-b, 0px) + var(--bt-u) * 1.4); }
.bt-root .bt-face {
  flex: 0 0 auto; width: calc(var(--bt-u) * 9.5); height: calc(var(--bt-u) * 9.5); border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #fff 0, var(--c) 120%); overflow: hidden; border: calc(var(--bt-u) * 0.45) solid #fff;
  box-shadow: 0 0 0 calc(var(--bt-u) * 0.35) var(--c), 0 4px 10px rgba(0, 0, 0, 0.4); align-self: center;
}
.bt-root .bt-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.bt-root .bt-face-ph { display: grid; place-items: center; width: 100%; height: 100%; font: 400 calc(var(--bt-u) * 4.4) var(--font-title); color: var(--bt-ink); }
.bt-root .bt-side-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--bt-u) * 0.4); }
.bt-root .bt-nameline { display: flex; align-items: baseline; gap: calc(var(--bt-u) * 0.8); min-width: 0; }
.bt-root .bt-name { font: 900 calc(var(--bt-u) * 2.6) var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 0 var(--bt-ink); }
.bt-root .bt-lv { font: 400 calc(var(--bt-u) * 1.9) var(--font-num); color: var(--c-gold, #ffcc33); white-space: nowrap; }
.bt-root .bt-power { font: 400 calc(var(--bt-u) * 1.9) var(--font-num); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.02em; }
.bt-root .bt-power small { font: 800 calc(var(--bt-u) * 1.3) var(--font-ui); color: #9fb2ff; margin-right: 0.4em; }
.bt-root .bt-hp-label { font: 800 calc(var(--bt-u) * 1.2) var(--font-ui); color: #b8c4ff; letter-spacing: 0.2em; margin-bottom: calc(var(--bt-u) * -0.4); }
.bt-root .bt-hp { position: relative; margin-right: calc(4% + var(--bt-u) * 0.6); }   /* パネルの斜めの切り口（clip-path）で数字の右はしが切れないぶん */
.bt-root .bt-hp-bar {
  position: relative; height: calc(var(--bt-u) * 2.3); background: #2a1020; border: calc(var(--bt-u) * 0.3) solid #fff; border-radius: calc(var(--bt-u) * 0.6); overflow: hidden;
  transform: skewX(-12deg); box-shadow: 0 2px 0 var(--bt-ink);
}
.bt-root .bt-hp-bar i { position: absolute; left: 0; top: 0; bottom: 0; transition: width 0.12s; }
.bt-root .bt-hp-ghost { background: #fff6d0; }
.bt-root .bt-hp-fill { background: linear-gradient(180deg, #8affc0, var(--c-hp, #3ee08f) 55%, #1d9a5a); }
.bt-root .bt-side[data-state='pinch'] .bt-hp-fill { background: linear-gradient(180deg, #ffb0a0, var(--c-hp-low, #ff5050) 55%, #a01a2a); animation: bt-blink 0.5s steps(2) infinite; }
.bt-root .bt-side[data-state='broken'] .bt-hp-fill { background: repeating-linear-gradient(-45deg, #ff2040 0 8px, #800018 8px 16px); animation: bt-blink 0.25s steps(2) infinite; }
.bt-root .bt-hp-ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 1px, transparent 1px 10%); pointer-events: none; }
.bt-root .bt-hp-text { position: absolute; right: calc(var(--bt-u) * 1); top: 50%; transform: translateY(-50%); font: 400 max(10px, calc(var(--bt-u) * 1.7)) var(--font-num); color: #fff; text-shadow: 0 0 3px var(--bt-ink), 0 0 2px var(--bt-ink), 0 1px 0 var(--bt-ink); white-space: nowrap; max-width: calc(100% - var(--bt-u) * 2); overflow: hidden; text-overflow: ellipsis; }
.bt-root .bt-hp-text b { font-weight: 400; }
.bt-root .bt-hp-text small { font-size: 0.72em; opacity: 0.85; }
.bt-root .bt-hp-state { position: absolute; left: calc(var(--bt-u) * 1); top: 50%; transform: translateY(-50%); font: 400 calc(var(--bt-u) * 1.5) var(--font-title); color: #fff; text-shadow: 0 0 4px #f00, 0 1px 0 var(--bt-ink); }
.bt-root .bt-stocks { position: absolute; right: calc(var(--bt-u) * 3.4); top: calc(var(--bt-u) * 1.2); display: flex; gap: calc(var(--bt-u) * 0.5); }
.bt-root .bt-stocks i { width: calc(var(--bt-u) * 3.2); height: calc(var(--bt-u) * 0.9); background: rgba(255, 255, 255, 0.85); border: 2px solid var(--bt-ink); border-radius: 2px; transform: skewX(-15deg);
  background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0 1px, transparent 1px 4px); }
.bt-root .bt-stocks i.on { background-color: var(--c); box-shadow: 0 0 8px var(--c); }
.bt-root .bt-stocks i.out { background-color: #333; opacity: 0.4; }
.bt-root .bt-res { display: flex; align-items: center; gap: calc(var(--bt-u) * 0.8); }
.bt-root .bt-res-label { flex: 0 0 calc(var(--bt-u) * 4.2); font: 400 calc(var(--bt-u) * 1.4) var(--font-title); color: var(--c-sp, #45b4ff); }
.bt-root .bt-res-label--sp { color: var(--c-special, #ff4fd8); }
.bt-root .bt-sp { display: flex; gap: calc(var(--bt-u) * 0.35); }
.bt-root .bt-sp i { width: calc(var(--bt-u) * 1.6); height: calc(var(--bt-u) * 1.6); border-radius: 50%; background: #1b2350; border: 2px solid #5a6aa8; }
.bt-root .bt-sp i.on { background: radial-gradient(circle at 35% 30%, #fff, var(--c-sp, #45b4ff) 55%, #1a5aa0); border-color: #fff; box-shadow: 0 0 6px var(--c-sp, #45b4ff); }
.bt-root .bt-gauge { flex: 1; display: flex; align-items: center; gap: calc(var(--bt-u) * 0.6); }
.bt-root .bt-gauge-bar { flex: 1; height: calc(var(--bt-u) * 1.4); background: #251035; border: 2px solid #fff; border-radius: 99px; overflow: hidden; }
.bt-root .bt-gauge-bar i { display: block; height: 100%; background: linear-gradient(90deg, #a63aff, var(--c-special, #ff4fd8)); transition: width 0.25s; }
.bt-root .bt-gauge.full .bt-gauge-bar i { background: linear-gradient(90deg, #ff4fd8, #ffd23f, #7fffd0, #ff4fd8); background-size: 200% 100%; animation: bt-rainbow 0.8s linear infinite; }
.bt-root .bt-gauge-text { flex: none; font: 400 calc(var(--bt-u) * 1.4) var(--font-num); min-width: 3.4em; padding-right: .3em; text-align: right; white-space: nowrap; }
.bt-root .bt-gauge, .bt-root .bt-gauge-bar { min-width: 0; }
/* 下のパネルは右下が斜めに切れている（clip-path 94%）。いちばん下の必殺ゲージの行は、％の字が切れないぶん右をあける */
.bt-root .bt-side--player .bt-gauge { padding-right: calc(5% + var(--bt-u) * 1); }
.bt-root .bt-gauge--enemy { margin-top: calc(var(--bt-u) * 0.4); }
.bt-root .bt-gauge--enemy .bt-gauge-bar { height: calc(var(--bt-u) * 0.9); }

/* ---------- 手番・右上 ---------- */
.bt-root .bt-turn { position: absolute; left: 50%; top: calc(var(--safe-t, 0px) + var(--bt-u) * 1.2); transform: translateX(-50%); text-align: center; white-space: nowrap; }
.bt-root .bt-turn-main {
  font: 400 calc(var(--bt-u) * 3.2) var(--font-title); padding: calc(var(--bt-u) * 0.4) calc(var(--bt-u) * 3);
  background: linear-gradient(90deg, transparent, rgba(16, 20, 50, 0.85) 18%, rgba(16, 20, 50, 0.85) 82%, transparent);
  text-shadow: 0 2px 0 var(--bt-ink); color: #fff;
}
.bt-root .bt-turn[data-side='0'] .bt-turn-main { color: #fff; text-shadow: 0 0 10px var(--bt-pc), 0 2px 0 var(--bt-ink); }
.bt-root .bt-turn[data-side='1'] .bt-turn-main { color: #ffd0d8; text-shadow: 0 0 10px var(--bt-ec), 0 2px 0 var(--bt-ink); }
.bt-root .bt-turn-sub { font: 800 calc(var(--bt-u) * 1.4) var(--font-ui); color: #c8d2ff; text-shadow: 0 1px 0 var(--bt-ink); }
.bt-root .bt-turn--in .bt-turn-main { animation: bt-turnin 0.45s cubic-bezier(.2, 1.6, .4, 1); }
.bt-root .bt-timer { display: inline-block; margin-top: calc(var(--bt-u) * 0.4); font: 400 calc(var(--bt-u) * 2.2) var(--font-num); color: #fff; background: rgba(16, 20, 50, 0.8); border: 2px solid #fff; border-radius: 99px; padding: 0 0.7em; }
.bt-root .bt-timer.warn { color: #ff5060; border-color: #ff5060; animation: bt-pulse 0.5s infinite; }
.bt-root .bt-topbtns { position: absolute; right: calc(var(--safe-r, 0px) + var(--bt-u) * 1.2); top: calc(var(--safe-t, 0px) + var(--bt-u) * 1.2); display: flex; gap: calc(var(--bt-u) * 0.8); }
.bt-root .bt-iconbtn {
  min-width: max(var(--tap, 44px), calc(var(--bt-u) * 6)); height: max(var(--tap, 44px), calc(var(--bt-u) * 6)); padding: 0 calc(var(--bt-u) * 1);
  border-radius: calc(var(--bt-u) * 1.2); border: 2px solid rgba(255, 255, 255, 0.85); background: rgba(16, 20, 50, 0.75); color: #fff;
  font: 900 calc(var(--bt-u) * 1.7) var(--font-ui); cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}
.bt-root .bt-iconbtn:active { transform: translateY(2px); box-shadow: none; }
.bt-root .bt-iconbtn.on { background: var(--c-accent, #ff6a2b); }
.bt-root .bt-objective { position: absolute; right: calc(var(--safe-r, 0px) + var(--bt-u) * 1.2); top: calc(var(--safe-t, 0px) + var(--bt-u) * 2.4 + max(var(--tap, 44px), calc(var(--bt-u) * 6)) + 4px);   /* 右上のボタン（高さは最小 44px）の下 */ max-width: 30vw; padding: calc(var(--bt-u) * 0.8) calc(var(--bt-u) * 1.4); background: rgba(255, 210, 63, 0.92); color: var(--bt-ink); border-radius: calc(var(--bt-u) * 1); box-shadow: 0 3px 0 var(--bt-ink); display: flex; flex-direction: column; }
.bt-root .bt-objective b { font: 400 calc(var(--bt-u) * 1.9) var(--font-title); }
.bt-root .bt-objective span { font: 800 calc(var(--bt-u) * 1.5) var(--font-ui); }
.bt-root .bt-objective.bump { animation: bt-bump 0.4s; }
/* バトルの上に ADV が重なっているあいだは、ADV の右上のボタン（ログ・オート…）の下へ逃がす */
body:has(#layer-adv > .adv-layer:not(.is-out)) .bt-root .bt-objective { top: calc(var(--safe-t, 0px) + clamp(54px, 9.5vh, 80px) + max(var(--tap, 44px), 40px) + 12px); transition: top .2s; }

/* ---------- セコンド・ボタン ---------- */
.bt-root .bt-second {
  position: absolute; right: calc(var(--safe-r, 0px) + var(--bt-u) * 1.2); bottom: calc(var(--safe-b, 0px) + max(var(--bt-u) * 22, var(--tap, 44px) * 2 + var(--bt-u) * 5));   /* 右下のボタン2段（最小 44px）の上 */
  display: flex; align-items: center; gap: calc(var(--bt-u) * 0.8); padding: calc(var(--bt-u) * 0.6) calc(var(--bt-u) * 1);
  background: rgba(16, 20, 50, 0.78); border-radius: calc(var(--bt-u) * 1.4); border: 2px solid rgba(255, 255, 255, 0.5); pointer-events: auto;
}
.bt-root .bt-second-head { display: flex; align-items: center; gap: calc(var(--bt-u) * 0.6); }
.bt-root .bt-second-face { width: calc(var(--bt-u) * 6); height: calc(var(--bt-u) * 6); border-radius: 50%; overflow: hidden; background: var(--c); border: 2px solid #fff; }
.bt-root .bt-second-face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.bt-root .bt-second-name { font: 900 calc(var(--bt-u) * 1.6) var(--font-ui); }
.bt-root .bt-hearts i { font-style: normal; color: #4a3a5a; font-size: calc(var(--bt-u) * 1.4); }
.bt-root .bt-hearts i.on { color: var(--c-heart, #ff5c9a); text-shadow: 0 0 4px #ff9ac0; }
.bt-root .bt-assist {
  min-height: max(var(--tap, 44px), calc(var(--bt-u) * 6)); padding: 0 calc(var(--bt-u) * 1.4); border-radius: calc(var(--bt-u) * 1); cursor: pointer;
  border: 2px solid #fff; background: linear-gradient(180deg, #4a7bff, #2a3a9a); color: #fff; font: 900 calc(var(--bt-u) * 1.5) var(--font-ui);
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; box-shadow: 0 3px 0 var(--bt-ink);
}
.bt-root .bt-assist.ready { animation: bt-glow 1.2s ease-in-out infinite; }
.bt-root .bt-assist:disabled { filter: grayscale(0.8) brightness(0.6); cursor: default; animation: none; }
.bt-root .bt-assist-left { font: 400 max(9px, calc(var(--bt-u) * 1.3)) var(--font-num); color: #ffe680; }
.bt-root .bt-assist-name { white-space: nowrap; font-size: max(10px, calc(var(--bt-u) * 1.5)); max-width: max(120px, calc(var(--bt-u) * 22)); overflow: hidden; text-overflow: ellipsis; }   /* 名前は折り返さない */
/* アシストが多い戦い：ふだんはセコンドの顔と「アシスト のこりN」のボタンだけ。押すと上に引き出しが開く */
.bt-root .bt-second--many { flex-wrap: nowrap; }
.bt-root .bt-assist-drawer {
  position: absolute; right: 0; bottom: calc(100% + var(--bt-u) * 0.8); display: none; flex-wrap: wrap; justify-content: flex-end; gap: calc(var(--bt-u) * 0.6);
  width: max-content; max-width: min(62vw, 860px); padding: calc(var(--bt-u) * 0.8); background: rgba(16, 20, 50, 0.9); border: 2px solid rgba(255, 255, 255, 0.6); border-radius: calc(var(--bt-u) * 1.4);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.bt-root .bt-second.is-open .bt-assist-drawer { display: flex; animation: bt-drawer 0.18s ease-out; }
.bt-root .bt-assist-drawer .bt-assist { min-height: max(40px, calc(var(--bt-u) * 5.4)); }
.bt-root .bt-assist-toggle { background: linear-gradient(180deg, #ffb347, #ff6a2b); }
.bt-root .bt-second.is-open .bt-assist-toggle { background: linear-gradient(180deg, #6a7aa8, #2a3460); }
/* 引き出しが開いているあいだは、真ん中の操作ガイドの札を引っこめる（重ならないように） */
.bt-root:has(.bt-second.is-open) .bt-hint { opacity: 0; }
@keyframes bt-drawer { from { opacity: 0; transform: translateY(8px); } }
.bt-root.bt-root--lefty .bt-assist-drawer { right: auto; left: 0; justify-content: flex-start; }
/* 修行（role 'trial'）：相手は的なので、名前と説明だけの小さなカード */
.bt-root .bt-side--trial { width: clamp(220px, 28vw, max(400px, calc(var(--bt-u) * 50))); }
.bt-root .bt-side--trial .bt-face { width: calc(var(--bt-u) * 7); height: calc(var(--bt-u) * 7); }
.bt-root .bt-trial-note { font: 800 max(10px, calc(var(--bt-u) * 1.5)) var(--font-ui); color: #d8e0ff; line-height: 1.35; }
.bt-root .bt-trial-note b { display: inline-block; margin-right: 0.5em; padding: 0 0.5em; border-radius: 4px; background: #ffd23f; color: var(--bt-ink); font-weight: 900; }

.bt-root .bt-actions {
  position: absolute; right: calc(var(--safe-r, 0px) + var(--bt-u) * 1.2); bottom: calc(var(--safe-b, 0px) + var(--bt-u) * 1.4);
  display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--bt-u) * 0.8); opacity: 0; transform: translateY(20px); transition: opacity 0.2s, transform 0.2s; pointer-events: none;
}
.bt-root .bt-actions.on { opacity: 1; transform: none; }
.bt-root .bt-actions.on > * { pointer-events: auto; }
.bt-root .bt-skills { display: flex; gap: calc(var(--bt-u) * 0.7); }
.bt-root .bt-skill {
  position: relative; width: max(84px, calc(var(--bt-u) * 11.5)); min-height: max(var(--tap, 44px), calc(var(--bt-u) * 8)); padding: calc(var(--bt-u) * 0.6);
  border-radius: calc(var(--bt-u) * 1.2); border: 2px solid #fff; background: linear-gradient(170deg, #fffdf6, #dfe6ff); color: var(--bt-ink); cursor: pointer;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: calc(var(--bt-u) * 0.5); text-align: left;
  box-shadow: 0 4px 0 var(--bt-ink); transition: transform 0.1s;
}
.bt-root .bt-skill:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--bt-ink); }
.bt-root .bt-skill.sel { background: linear-gradient(170deg, #ffe680, #ffb347); transform: translateY(-4px); box-shadow: 0 0 0 3px #fff, 0 0 18px #ffb347, 0 4px 0 var(--bt-ink); }
.bt-root .bt-skill.ng { filter: grayscale(0.9) brightness(0.7); cursor: default; }
.bt-root .bt-skill-icon { grid-row: span 2; width: max(18px, calc(var(--bt-u) * 3.6)); height: max(18px, calc(var(--bt-u) * 3.6)); border-radius: 50%; display: grid; place-items: center; font: 400 calc(var(--bt-u) * 1.8) var(--font-title); color: #fff; background: var(--c-accent-2, #1d2a6b); }
.bt-root .bt-skill[data-cat='atk'] .bt-skill-icon { background: #e0342a; }
.bt-root .bt-skill[data-cat='def'] .bt-skill-icon { background: #2a7bff; }
.bt-root .bt-skill[data-cat='orbit'] .bt-skill-icon { background: #22a85a; }
.bt-root .bt-skill[data-cat='set'] .bt-skill-icon { background: #b07a1c; }
.bt-root .bt-skill[data-cat='debuff'] .bt-skill-icon { background: #8a3ad0; }
.bt-root .bt-skill[data-cat='heal'] .bt-skill-icon { background: #1cb09a; }
.bt-root .bt-skill-name { font: 900 max(10px, calc(var(--bt-u) * 1.45)) var(--font-ui); line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bt-root .bt-skill-sp { font: 400 max(9px, calc(var(--bt-u) * 1.3)) var(--font-num); color: #2a6ad0; }
.bt-root .bt-skill-key { position: absolute; left: calc(var(--bt-u) * -0.6); top: calc(var(--bt-u) * -0.8); width: calc(var(--bt-u) * 2.2); height: calc(var(--bt-u) * 2.2); border-radius: 50%; background: var(--bt-ink); color: #fff; font: 400 calc(var(--bt-u) * 1.2) var(--font-num); display: grid; place-items: center; }
.bt-root .bt-skill-tag { position: absolute; right: 4px; top: 2px; font: 900 calc(var(--bt-u) * 1.1) var(--font-ui); color: #e0342a; }
.bt-root .bt-bigbtns { display: flex; gap: calc(var(--bt-u) * 0.8); align-items: flex-end; }
.bt-root .bt-special {
  position: relative; width: calc(var(--bt-u) * 15); height: calc(var(--bt-u) * 9); border-radius: calc(var(--bt-u) * 4.5); border: 3px solid #fff; cursor: pointer;
  background: linear-gradient(180deg, #5a3a7a, #2a1a40); color: #c8b0e0; font-family: var(--font-title); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
  box-shadow: 0 4px 0 var(--bt-ink);
}
.bt-root .bt-special.ready { color: #fff; background: linear-gradient(90deg, #ff4fd8, #ffb347, #ff4fd8); background-size: 200% 100%; animation: bt-rainbow 1.2s linear infinite, bt-glowpink 1s ease-in-out infinite; }
.bt-root .bt-special.sel { transform: scale(1.06); box-shadow: 0 0 0 4px #ffd23f, 0 0 26px #ff4fd8, 0 4px 0 var(--bt-ink); }
.bt-root .bt-special-l1 { font-size: calc(var(--bt-u) * 3); text-shadow: 0 2px 0 var(--bt-ink); }
.bt-root .bt-special-l2 { font: 900 calc(var(--bt-u) * 1.2) var(--font-ui); max-width: 92%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-root .bt-special:disabled { cursor: default; }
.bt-root .bt-special .bt-skill-key { left: auto; right: calc(var(--bt-u) * -0.4); }
.bt-root .bt-unison, .bt-root .bt-command {
  min-height: max(var(--tap, 44px), calc(var(--bt-u) * 7)); padding: 0 calc(var(--bt-u) * 1.4); border-radius: calc(var(--bt-u) * 1.2); border: 3px solid #fff; cursor: pointer;
  background: linear-gradient(180deg, #7fe8ff, #2a8ad0); color: #fff; font: 400 calc(var(--bt-u) * 2) var(--font-title); display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 4px 0 var(--bt-ink); animation: bt-glow 1s infinite;
}
.bt-root .bt-unison small { font: 900 calc(var(--bt-u) * 1.1) var(--font-ui); }
.bt-root .bt-unison.sel { box-shadow: 0 0 0 4px #ffd23f, 0 0 20px #7fe8ff; }
.bt-root .bt-command { background: linear-gradient(180deg, #ffd23f, #ff8a3a); color: var(--bt-ink); }
.bt-root .bt-pass {
  min-width: max(var(--tap, 44px), calc(var(--bt-u) * 7)); height: max(var(--tap, 44px), calc(var(--bt-u) * 6)); border-radius: calc(var(--bt-u) * 1); border: 2px solid rgba(255, 255, 255, 0.7);
  background: rgba(16, 20, 50, 0.8); color: #c8d2ff; font: 900 calc(var(--bt-u) * 1.5) var(--font-ui); cursor: pointer;
}
.bt-root .bt-chooser { display: flex; gap: calc(var(--bt-u) * 0.6); align-items: center; padding: calc(var(--bt-u) * 0.5) calc(var(--bt-u) * 1); background: rgba(16, 20, 50, 0.85); border-radius: 99px; font: 900 calc(var(--bt-u) * 1.4) var(--font-ui); }
.bt-root .bt-chip { min-height: max(var(--tap, 44px), calc(var(--bt-u) * 5)); padding: 0 1em; border-radius: 99px; border: 2px solid #fff; background: #ffb347; color: var(--bt-ink); font-weight: 900; cursor: pointer; }
.bt-root.bt-root--lefty .bt-actions, .bt-root.bt-root--lefty .bt-second { right: auto; left: calc(var(--safe-l, 0px) + var(--bt-u) * 1.2); align-items: flex-start; }
.bt-root.bt-root--lefty .bt-side { left: auto; right: 0; flex-direction: row-reverse; border-left: 0; border-right: calc(var(--bt-u) * 0.7) solid var(--c); clip-path: polygon(0 0, 100% 0, 100% 100%, 6% 100%); background: linear-gradient(255deg, rgba(16, 20, 50, 0.9) 0%, rgba(16, 20, 50, 0.72) 70%, rgba(16, 20, 50, 0) 100%); }
.bt-root.bt-root--lefty .bt-topbtns { right: auto; left: calc(var(--safe-l, 0px) + var(--bt-u) * 1.2); }

/* ---------- 照準 ---------- */
.bt-root .bt-powermeter { position: absolute; left: 50%; bottom: calc(var(--bt-u) * 14); transform: translateX(-50%); display: flex; align-items: center; gap: calc(var(--bt-u) * 1); padding: calc(var(--bt-u) * 0.5) calc(var(--bt-u) * 1.4); background: rgba(16, 20, 50, 0.85); border-radius: 99px; border: 2px solid #fff; }
.bt-root .bt-powermeter-bar { width: calc(var(--bt-u) * 22); height: calc(var(--bt-u) * 1.4); background: #222a50; border-radius: 99px; overflow: hidden; }
.bt-root .bt-powermeter-bar i { display: block; height: 100%; background: linear-gradient(90deg, #4cff8a, #ffd23f 60%, #ff3b4a); }
.bt-root .bt-powermeter b { font: 400 calc(var(--bt-u) * 2.2) var(--font-num); min-width: 3em; text-align: right; }
.bt-root .bt-powermeter span { font: 900 calc(var(--bt-u) * 1.5) var(--font-ui); color: #ffd23f; min-width: 4em; }
.bt-root .bt-powermeter[data-lv='3'] { animation: bt-shake 0.12s infinite; border-color: #ffd23f; }
.bt-root .bt-hint { position: absolute; left: 50%; bottom: calc(var(--bt-u) * 24); transform: translateX(-50%); padding: calc(var(--bt-u) * 0.6) calc(var(--bt-u) * 1.8); background: rgba(16, 20, 50, 0.8); border-radius: 1.2em; font: 800 max(11px, calc(var(--bt-u) * 1.7)) var(--font-ui); line-height: 1.3; text-align: center; white-space: normal; width: max-content; opacity: 0; transition: opacity 0.3s; max-width: 60vw; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bt-root .bt-hint.on { opacity: 1; animation: bt-float 2s ease-in-out infinite; }
.bt-root .bt-labels { position: absolute; inset: 0; }
.bt-root .bt-label { position: absolute; left: 0; top: 0; padding: 1px 0.6em; border-radius: 99px; font: 400 calc(var(--bt-u) * 1.4) var(--font-num); color: #fff; background: var(--bt-pc); border: 2px solid #fff; transition: opacity 0.2s; white-space: nowrap; }
.bt-root .bt-label::after { content: ''; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #fff; }
.bt-root .bt-label--1 { background: var(--bt-ec); }
.bt-root .bt-label.active { animation: bt-bob 0.8s ease-in-out infinite; }

/* タイミングリング */
.bt-root .bt-ring { position: absolute; width: calc(var(--bt-u) * 26); height: calc(var(--bt-u) * 26); transform: translate(-50%, -50%); pointer-events: none; }
.bt-root .bt-ring svg { width: 100%; height: 100%; overflow: visible; }
.bt-root .bt-ring circle { fill: none; }
.bt-root .bt-ring-good { stroke: rgba(255, 255, 255, 0.18); }
.bt-root .bt-ring-target { stroke: #fff; stroke-width: 4; filter: drop-shadow(0 0 4px #fff); }
.bt-root .bt-ring-shrink { stroke: #ffd23f; stroke-width: 6; filter: drop-shadow(0 0 6px #ffb347); }
.bt-root .bt-ring-judge { position: absolute; left: 50%; top: -6%; transform: translateX(-50%); font: 400 calc(var(--bt-u) * 3.4) var(--font-title); white-space: nowrap; text-shadow: 0 3px 0 var(--bt-ink); }
.bt-root .bt-ring-tap { position: absolute; left: 50%; bottom: -4%; transform: translateX(-50%); font: 400 calc(var(--bt-u) * 1.8) var(--font-num); color: #ffd23f; animation: bt-pulse 0.4s infinite; }
.bt-root .bt-ring--perfect .bt-ring-judge { color: #ffe680; animation: bt-judge 0.5s cubic-bezier(.2, 1.8, .4, 1); text-shadow: 0 0 14px #ffb347, 0 3px 0 var(--bt-ink); }
.bt-root .bt-ring--perfect .bt-ring-target { stroke: #ffe680; }
.bt-root .bt-ring--great .bt-ring-judge { color: #7fe8ff; animation: bt-judge 0.4s; }
.bt-root .bt-ring--good .bt-ring-judge { color: #b8ffb0; }
.bt-root .bt-ring--miss .bt-ring-judge { color: #9aa0b8; }
.bt-root .bt-ring[class*='bt-ring--'] .bt-ring-tap { display: none; }

/* ---------- ポップ・ダメージ ---------- */
.bt-root .bt-pop { position: absolute; inset: 0; overflow: hidden; }
.bt-root .bt-popitem {
  position: absolute; transform: translate(-50%, -50%) rotate(var(--r)); white-space: nowrap; color: var(--c); font-family: var(--font-title);
  paint-order: stroke fill; -webkit-text-stroke: calc(var(--bt-u) * 0.8) var(--bt-ink); animation: bt-popfx 1.2s cubic-bezier(.2, 1.6, .4, 1) forwards;
}
.bt-root .bt-popitem--s { font-size: calc(var(--bt-u) * 2.2); -webkit-text-stroke-width: calc(var(--bt-u) * 0.5); }
.bt-root .bt-popitem--m { font-size: calc(var(--bt-u) * 3.4); }
.bt-root .bt-popitem--l { font-size: calc(var(--bt-u) * 5); }
.bt-root .bt-popitem--xl { font-size: calc(var(--bt-u) * 8); -webkit-text-stroke-width: calc(var(--bt-u) * 1.2); animation-duration: 1.6s; }
.bt-root .bt-onomato { font-style: italic; letter-spacing: -0.03em; }
.bt-root .bt-skillname { font-family: var(--font-title); padding: 0 0.4em; }
.bt-root .bt-dmg {
  position: absolute; transform: translate(-50%, -50%); text-align: center; pointer-events: none; z-index: 2;
  animation: bt-dmgfx 1.4s cubic-bezier(.15, 1.7, .4, 1) forwards; --k: 1;
}
.bt-root .bt-dmg b { display: block; font: 400 calc(var(--bt-u) * 4.2 * var(--k)) var(--font-num); line-height: 1; color: #fff; paint-order: stroke fill; -webkit-text-stroke: calc(var(--bt-u) * 0.8) var(--bt-ink); letter-spacing: -0.02em; }
.bt-root .bt-dmg small { display: block; font: 400 calc(var(--bt-u) * 1.8) var(--font-title); color: #ffe14a; paint-order: stroke fill; -webkit-text-stroke: calc(var(--bt-u) * 0.5) var(--bt-ink); }
.bt-root .bt-dmg--to0 b { color: #ffd0d8; }
.bt-root .bt-dmg--u1 b { color: #fff36b; }
.bt-root .bt-dmg--u2 b { background: linear-gradient(180deg, #fff6a0, #ff9a2a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px #ff9a2a); }
.bt-root .bt-dmg--u3 b { background: linear-gradient(180deg, #ffd0a0, #ff3b3b); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 10px #ff3b3b); }
.bt-root .bt-dmg--u4 b, .bt-root .bt-dmg--u5 b, .bt-root .bt-dmg--u6 b {
  background: linear-gradient(90deg, #ff4fd8, #ffd23f, #7fffd0, #7fb0ff, #ff4fd8); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 12px #ff4fd8) drop-shadow(0 0 4px #fff); animation: bt-rainbow 0.8s linear infinite;
}
.bt-root .bt-dmg.crit b { -webkit-text-stroke-color: #5a1a00; }
.bt-root .bt-dmg.special { animation-duration: 1.8s; }

/* 帯（BREAK・桁・ROUND） */
.bt-root .bt-banners { position: absolute; inset: 0; pointer-events: none; }
.bt-root .bt-banner, .bt-root .bt-break, .bt-root .bt-digit { position: absolute; left: 0; right: 0; top: 42%; transform: translateY(-50%); text-align: center; }
.bt-root .bt-banner b, .bt-root .bt-break b { position: relative; display: inline-block; font: 400 calc(var(--bt-u) * 9) var(--font-title); color: #fff; paint-order: stroke fill; -webkit-text-stroke: calc(var(--bt-u) * 1.2) var(--bt-ink); }
.bt-root .bt-banner { animation: bt-banner var(--dur, 1.1s) forwards; }
.bt-root .bt-banner::before, .bt-root .bt-break::before { content: ''; position: absolute; left: -5%; right: -5%; top: 50%; height: 80%; transform: translateY(-50%) skewY(-4deg); background: repeating-linear-gradient(90deg, rgba(255, 59, 122, 0.92) 0 40px, rgba(255, 90, 140, 0.92) 40px 80px); border-top: 5px solid var(--bt-ink); border-bottom: 5px solid var(--bt-ink); z-index: -1; }
.bt-root .bt-banner small, .bt-root .bt-break small { display: block; font: 900 calc(var(--bt-u) * 2) var(--font-ui); text-shadow: 0 2px 0 var(--bt-ink); }
.bt-root .bt-break { animation: bt-break 1.5s cubic-bezier(.2, 1.5, .4, 1) forwards; }
.bt-root .bt-break b { color: #ffe14a; font-style: italic; font-size: calc(var(--bt-u) * 11); -webkit-text-stroke-color: #4a0010; text-shadow: 0 0 30px #ff2040; }
.bt-root .bt-break::before { background: linear-gradient(90deg, transparent, rgba(200, 0, 30, 0.88) 15%, rgba(255, 40, 60, 0.92) 50%, rgba(200, 0, 30, 0.88) 85%, transparent); }
.bt-root .bt-break--0::before { background: linear-gradient(90deg, transparent, rgba(30, 30, 60, 0.88) 15%, rgba(60, 60, 110, 0.92) 50%, rgba(30, 30, 60, 0.88) 85%, transparent); }
.bt-root .bt-digit { top: 30%; animation: bt-digit 2.6s forwards; }
.bt-root .bt-digit small { display: block; font: 400 calc(var(--bt-u) * 3) var(--font-title); color: #fff; letter-spacing: 0.3em; text-shadow: 0 0 20px #fff, 0 2px 0 var(--bt-ink); }
.bt-root .bt-digit b { display: block; font: 400 calc(var(--bt-u) * 14) var(--font-title); background: linear-gradient(180deg, #fff, #ffd23f 50%, #ff7a2a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 20px #ffb347) drop-shadow(0 4px 0 var(--bt-ink)); }

/* 吹き出し・実況 */
.bt-root .bt-balloons { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.bt-root .bt-balloon {
  position: absolute; max-width: min(36vw, 420px); padding: calc(var(--bt-u) * 1) calc(var(--bt-u) * 1.6); background: #fff; color: var(--bt-ink); border-radius: calc(var(--bt-u) * 2);
  border: 3px solid var(--c); font: 800 calc(var(--bt-u) * 2) var(--font-adv, var(--font-ui)); line-height: 1.35; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35); animation: bt-balloon 0.3s cubic-bezier(.2, 1.6, .4, 1);
}
.bt-root .bt-balloon b { display: block; font: 900 calc(var(--bt-u) * 1.4) var(--font-ui); color: var(--c); }
.bt-root .bt-balloon::after { content: ''; position: absolute; left: calc(var(--bt-u) * 4); border: calc(var(--bt-u) * 1) solid transparent; }
.bt-root .bt-balloon--enemy { left: calc(var(--bt-u) * 12); top: calc(var(--bt-u) * 17); }
.bt-root .bt-balloon--enemy::after { top: calc(var(--bt-u) * -2.2); border-bottom-color: var(--c); }
.bt-root .bt-balloon--player { left: calc(var(--bt-u) * 12); bottom: calc(var(--bt-u) * 22); }
.bt-root .bt-balloon--player::after { bottom: calc(var(--bt-u) * -2.2); border-top-color: var(--c); }
.bt-root .bt-balloon--second { right: calc(var(--bt-u) * 2); bottom: calc(max(var(--bt-u) * 31, var(--tap, 44px) * 2 + var(--bt-u) * 20)); }   /* セコンドの札（.bt-second）の上 */
.bt-root .bt-balloon--second::after { right: calc(var(--bt-u) * 4); left: auto; bottom: calc(var(--bt-u) * -2.2); border-top-color: var(--c); }
.bt-root .bt-mc { position: absolute; left: 50%; bottom: calc(var(--bt-u) * 1.4); transform: translateX(-50%); display: flex; align-items: center; gap: 0.8em; max-width: 46vw; padding: calc(var(--bt-u) * 0.5) calc(var(--bt-u) * 1.6); background: linear-gradient(90deg, #ffd23f, #ff8a3a); color: var(--bt-ink); border-radius: 6px; border: 3px solid var(--bt-ink); font: 900 calc(var(--bt-u) * 1.7) var(--font-ui); z-index: 20; }
.bt-root .bt-mc b { white-space: nowrap; font: 400 calc(var(--bt-u) * 1.3) var(--font-title); background: var(--bt-ink); color: #ffd23f; padding: 0 0.5em; border-radius: 4px; }
.bt-root .bt-mc--in { animation: bt-mcin 0.35s cubic-bezier(.2, 1.5, .4, 1); }

/* ---------- ポーズ ---------- */
.bt-root .bt-pause { position: absolute; inset: 0; z-index: 35; display: grid; place-items: center; background: rgba(8, 10, 30, 0.7); backdrop-filter: blur(4px); }
.bt-root .bt-pause-card { display: flex; flex-direction: column; gap: calc(var(--bt-u) * 1); min-width: min(320px, 60vw); padding: calc(var(--bt-u) * 3); background: var(--c-panel, #fffdf6); color: var(--bt-ink); border-radius: var(--radius, 12px); box-shadow: var(--shadow); max-height: 92vh; overflow: auto; }
.bt-root .bt-pause-title { font: 400 calc(var(--bt-u) * 3.4) var(--font-title); text-align: center; color: var(--bt-ink); }
.bt-root .bt-pause-btn { min-height: max(var(--tap, 44px), calc(var(--bt-u) * 6)); font-size: calc(var(--bt-u) * 2); }
.bt-root .bt-pause-btn--danger { color: var(--c-danger, #ff3b5c); }
.bt-root .bt-help { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 36; width: min(720px, 86vw); max-height: 88vh; overflow: auto; padding: calc(var(--bt-u) * 3); background: var(--c-panel, #fffdf6); color: var(--bt-ink); border-radius: var(--radius, 12px); box-shadow: var(--shadow); }
.bt-root .bt-help dl { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--bt-u) * 0.8) calc(var(--bt-u) * 2); font-size: calc(var(--bt-u) * 1.9); margin: calc(var(--bt-u) * 2) 0; }
.bt-root .bt-help dt { font-weight: 900; color: var(--c-accent, #ff6a2b); white-space: nowrap; }
.bt-root .bt-help dd { margin: 0; }

/* ---------- カットイン（z 30） ---------- */
.bt-root .bt-cutin { position: absolute; inset: 0; z-index: 30; pointer-events: none; }
.bt-root .bt-cutin > * { pointer-events: auto; }
.bt-root .bt-cutin .bt-out { animation: bt-fadeout 0.18s forwards; }
.bt-root .bt-ci-sil { width: 30vh; height: 80vh; background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); border-radius: 40% 40% 10% 10%; }

/* VS */
.bt-root .bt-vs { position: absolute; inset: 0; overflow: hidden; }
.bt-root .bt-vs-bg { position: absolute; inset: 0; background: linear-gradient(115deg, #0e2a6a 0 49.6%, #fff 49.6% 50.4%, #6a0e2a 50.4%); animation: bt-fadein 0.3s; }
.bt-root .bt-vs-bg::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 26px); animation: bt-lines 0.5s linear infinite; }
.bt-root .bt-vs-side { position: absolute; bottom: 0; height: 100%; width: 52%; }
.bt-root .bt-vs-side .bt-ci-img, .bt-root .bt-vs-side .bt-ci-sil { position: absolute; bottom: -4vh; height: 100vh; max-width: 100%; object-fit: contain; filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.45)); }
.bt-root .bt-vs-l { left: 0; } .bt-root .bt-vs-l .bt-ci-img, .bt-root .bt-vs-l .bt-ci-sil { left: 2vw; object-position: left bottom; animation: bt-vsl 0.6s cubic-bezier(.2, 1.2, .3, 1) both; }
.bt-root .bt-vs-r { right: 0; } .bt-root .bt-vs-r .bt-ci-img, .bt-root .bt-vs-r .bt-ci-sil { right: 2vw; object-position: right bottom; animation: bt-vsr 0.6s cubic-bezier(.2, 1.2, .3, 1) both; }
.bt-root .bt-vs-name { position: absolute; bottom: 8vh; font: 400 calc(var(--bt-u) * 4.6) var(--font-title); paint-order: stroke fill; -webkit-text-stroke: calc(var(--bt-u) * 0.9) var(--bt-ink); color: #fff; white-space: nowrap; animation: bt-fadein 0.4s 0.4s both; }
.bt-root .bt-vs-l .bt-vs-name { left: 4vw; } .bt-root .bt-vs-r .bt-vs-name { right: 4vw; text-align: right; }
.bt-root .bt-vs-name small { display: block; font-size: 0.45em; color: #ffd23f; }
.bt-root .bt-vs-name em { display: block; font-style: normal; font: 400 0.42em var(--font-num); color: #9fe8ff; -webkit-text-stroke-width: calc(var(--bt-u) * 0.5); }
.bt-root .bt-vs-mark { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%) rotate(-8deg); font: 400 calc(var(--bt-u) * 26) var(--font-title); color: #ffd23f; paint-order: stroke fill; -webkit-text-stroke: calc(var(--bt-u) * 1.6) var(--bt-ink); animation: bt-vsmark 0.6s 0.25s cubic-bezier(.2, 2, .4, 1) both; text-shadow: 0 0 40px #ff8a3a; }
.bt-root .bt-vs-field { position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%); font: 900 calc(var(--bt-u) * 2) var(--font-ui); background: rgba(0, 0, 0, 0.55); padding: 0.2em 1em; border-radius: 99px; white-space: nowrap; }
.bt-root .bt-vs-boss { position: absolute; left: 0; right: 0; top: 5%; text-align: center; padding: 1vh 0 1.4vh; background: linear-gradient(90deg, transparent, rgba(60, 0, 20, 0.9) 20%, rgba(60, 0, 20, 0.9) 80%, transparent); color: #ffe9a0; font: 400 calc(var(--bt-u) * 4) var(--font-title); animation: bt-bossband 0.6s 0.9s both cubic-bezier(.2, 1.4, .4, 1); }
.bt-root .bt-vs-boss small { display: block; font-size: 0.45em; letter-spacing: 0.4em; color: #ff9ab0; }

/* じゃんけん */
.bt-root .bt-janken { position: absolute; inset: 0; display: grid; place-content: center; gap: calc(var(--bt-u) * 3); background: radial-gradient(circle, rgba(20, 26, 61, 0.7), rgba(8, 10, 30, 0.92)); text-align: center; }
.bt-root .bt-janken-title { font: 400 calc(var(--bt-u) * 6) var(--font-title); paint-order: stroke fill; -webkit-text-stroke: calc(var(--bt-u) * 0.9) var(--bt-ink); }
.bt-root .bt-janken.win .bt-janken-title { color: #ffd23f; }
.bt-root .bt-janken.lose .bt-janken-title { color: #9fd8ff; }
.bt-root .bt-janken-hands { display: flex; gap: calc(var(--bt-u) * 3); justify-content: center; }
.bt-root .bt-janken-btn { width: calc(var(--bt-u) * 16); height: calc(var(--bt-u) * 16); border-radius: 50%; border: 4px solid #fff; background: radial-gradient(circle at 40% 30%, #fff, #ffd9a0); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 6px 0 var(--bt-ink); }
.bt-root .bt-janken-btn span { font-size: calc(var(--bt-u) * 7); line-height: 1; }
.bt-root .bt-janken-btn small { font: 900 calc(var(--bt-u) * 1.8) var(--font-ui); color: var(--bt-ink); }
.bt-root .bt-janken-btn:hover { transform: translateY(-4px); }
.bt-root .bt-janken-res { display: flex; align-items: center; gap: calc(var(--bt-u) * 4); font-size: calc(var(--bt-u) * 12); }
.bt-root .bt-janken-res b { font: 400 calc(var(--bt-u) * 5) var(--font-title); }
.bt-root .bt-janken-me { animation: bt-vsl 0.4s both; } .bt-root .bt-janken-them { animation: bt-vsr 0.4s both; }

/* 必殺 */
.bt-root .bt-sp-cut { position: absolute; inset: 0; overflow: hidden; background: rgba(0, 0, 0, 0.35); }
.bt-root .bt-sp-band { position: absolute; left: -10%; right: -10%; top: 50%; height: 54vh; transform: translateY(-50%) skewY(-8deg); background: linear-gradient(90deg, var(--c), #fff 50%, var(--c)); background-size: 200% 100%; border-top: 10px solid #fff; border-bottom: 10px solid #fff; box-shadow: 0 0 0 8px var(--bt-ink), 0 0 60px var(--c); animation: bt-band 1.9s forwards; overflow: hidden; }
.bt-root .bt-sp-cut--1 .bt-sp-band { transform: translateY(-50%) skewY(8deg); }
.bt-root .bt-sp-lines { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 6px, transparent 6px 60px), linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 60%, #000)); animation: bt-lines 0.25s linear infinite; }
.bt-root .bt-sp-imgs { position: absolute; right: 2vw; top: 50%; height: 84vh; transform: translateY(-50%); display: flex; align-items: center; animation: bt-cutimg 1.9s cubic-bezier(.2, 1, .3, 1) forwards; }
.bt-root .bt-sp-cut--1 .bt-sp-imgs { right: auto; left: 2vw; animation-name: bt-cutimgr; }
.bt-root .bt-sp-imgs .bt-ci-img { height: 84vh; max-width: 48vw; object-fit: contain; filter: drop-shadow(10px 10px 0 rgba(27, 21, 48, 0.6)); }
.bt-root .bt-sp-imgs .bt-ci-img + .bt-ci-img { margin-left: -12vw; height: 74vh; }
.bt-root .bt-sp-name { position: absolute; left: 4vw; top: 56%; max-width: 58vw; font: 400 calc(var(--bt-u) * 7) var(--font-title); line-height: 1.1; color: #fff; paint-order: stroke fill; -webkit-text-stroke: calc(var(--bt-u) * 1.2) var(--bt-ink); transform: rotate(-8deg); animation: bt-spname 1.9s forwards; }
.bt-root .bt-sp-cut--1 .bt-sp-name { left: auto; right: 4vw; text-align: right; transform: rotate(8deg); }
.bt-root .bt-sp-name small { display: block; font-size: 0.42em; color: #ffd23f; }
.bt-root .bt-sp-name i { display: block; font: 900 calc(var(--bt-u) * 2.2) var(--font-ui); font-style: normal; -webkit-text-stroke-width: calc(var(--bt-u) * 0.5); margin-top: 0.4em; max-width: 50vw; }
.bt-root .bt-sp-cut.bt-short .bt-sp-band, .bt-root .bt-sp-cut.bt-short .bt-sp-imgs, .bt-root .bt-sp-cut.bt-short .bt-sp-name { animation-duration: 0.9s; }

/* アシスト */
.bt-root .bt-assist-cut { position: absolute; right: 0; bottom: 18vh; display: flex; align-items: center; gap: 1vw; padding: 1vh 3vw 1vh 1vw; background: linear-gradient(90deg, transparent, var(--c) 30%); border-top: 4px solid #fff; border-bottom: 4px solid #fff; animation: bt-assistin 1.3s cubic-bezier(.2, 1.2, .3, 1) forwards; }
.bt-root .bt-assist-cut img, .bt-root .bt-assist-cut .bt-ci-sil { height: 28vh; width: auto; max-width: 30vw; object-fit: contain; filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.4)); }
.bt-root .bt-assist-cut .bt-ci-sil { width: 14vh; }
.bt-root .bt-assist-cut-name { font: 400 calc(var(--bt-u) * 4.2) var(--font-title); color: #fff; paint-order: stroke fill; -webkit-text-stroke: calc(var(--bt-u) * 0.8) var(--bt-ink); }
.bt-root .bt-assist-cut-name small { display: block; font-size: 0.45em; color: #ffd23f; }
.bt-root .bt-assist-cut-name i { display: block; font: 900 calc(var(--bt-u) * 1.8) var(--font-ui); font-style: normal; -webkit-text-stroke-width: calc(var(--bt-u) * 0.4); max-width: 40vw; }

/* 第2形態 */
.bt-root .bt-phase { position: absolute; inset: 0; background: radial-gradient(circle, color-mix(in srgb, var(--c) 60%, transparent), rgba(10, 0, 10, 0.9)); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; animation: bt-fadein 0.25s; }
.bt-root .bt-phase .bt-ci-img { height: 96vh; object-fit: contain; animation: bt-phaseimg 2.2s ease-out forwards; filter: drop-shadow(0 0 30px var(--c)); }
.bt-root .bt-phase-text { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font: 400 calc(var(--bt-u) * 9) var(--font-title); color: #fff; paint-order: stroke fill; -webkit-text-stroke: calc(var(--bt-u) * 1.4) var(--bt-ink); animation: bt-vsmark 0.6s 0.2s both; }
.bt-root .bt-phase-text small { display: block; font-size: 0.4em; color: var(--c); -webkit-text-stroke-color: #fff; }

.bt-root .bt-ci-banner { position: absolute; left: 0; right: 0; top: 38%; text-align: center; pointer-events: none; animation: bt-banner 1.2s forwards; }
.bt-root .bt-ci-banner b { position: relative; display: inline-block; font: 400 calc(var(--bt-u) * 9) var(--font-title); color: #fff; paint-order: stroke fill; -webkit-text-stroke: calc(var(--bt-u) * 1.2) var(--bt-ink); }
.bt-root .bt-ci-banner::before { content: ''; position: absolute; left: -5%; right: -5%; top: 50%; height: 80%; transform: translateY(-50%) skewY(-4deg); background: linear-gradient(90deg, transparent, rgba(30, 60, 160, 0.92) 15%, rgba(30, 60, 160, 0.92) 85%, transparent); border-top: 5px solid #fff; border-bottom: 5px solid #fff; z-index: -1; }
.bt-root .bt-ci-banner.good::before { background: linear-gradient(90deg, transparent, rgba(255, 120, 40, 0.94) 15%, rgba(255, 60, 90, 0.94) 85%, transparent); }
.bt-root .bt-ci-banner.bad::before { background: linear-gradient(90deg, transparent, rgba(40, 40, 70, 0.94) 15%, rgba(40, 40, 70, 0.94) 85%, transparent); }
.bt-root .bt-ci-banner small { display: block; font: 900 calc(var(--bt-u) * 2.2) var(--font-ui); text-shadow: 0 2px 0 var(--bt-ink); }

/* 決着 */
.bt-root .bt-finish { position: absolute; inset: 0; overflow: hidden; }
.bt-root .bt-finish-band { position: absolute; inset: 0; background: radial-gradient(circle at 60% 50%, rgba(255, 210, 63, 0.55), rgba(255, 90, 40, 0.75) 60%, rgba(60, 10, 0, 0.9)); animation: bt-fadein 0.3s; }
.bt-root .bt-finish.lose .bt-finish-band { background: radial-gradient(circle at 60% 50%, rgba(80, 100, 160, 0.5), rgba(20, 24, 60, 0.85) 60%, rgba(5, 5, 20, 0.95)); }
.bt-root .bt-finish-img { position: absolute; left: 2vw; bottom: -2vh; height: 96vh; max-width: 50vw; object-fit: contain; object-position: left bottom; animation: bt-vsl 0.5s cubic-bezier(.2, 1.4, .4, 1) both; filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.4)); }
.bt-root .bt-finish-text { position: absolute; right: 5vw; top: 30%; text-align: right; }
.bt-root .bt-finish-text b { display: block; font: 400 calc(var(--bt-u) * 18) var(--font-title); color: #ffd23f; paint-order: stroke fill; -webkit-text-stroke: calc(var(--bt-u) * 1.8) var(--bt-ink); transform: rotate(-6deg); animation: bt-vsmark 0.6s 0.15s cubic-bezier(.2, 2, .4, 1) both; text-shadow: 0 0 40px #fff; }
.bt-root .bt-finish.lose .bt-finish-text b { color: #9fb8ff; text-shadow: none; }
.bt-root .bt-finish-text small { display: block; font: 900 calc(var(--bt-u) * 2.6) var(--font-ui); text-shadow: 0 2px 0 var(--bt-ink); margin-top: 1vh; animation: bt-fadein 0.4s 0.5s both; }

/* ---------- アニメーション ---------- */
@keyframes bt-blink { 50% { filter: brightness(1.6); } }
@keyframes bt-rainbow { to { background-position: -200% 0; } }
@keyframes bt-pulse { 50% { transform: scale(1.08); } }
/* おすすめの「先に押すもの」（【離す】・仲間を呼ぶ・パス）：fix-advice */
.bt-root .bt-rec { position: relative; outline: 3px solid #7affea; outline-offset: 2px; animation: bt-rec 0.9s ease-in-out infinite !important; z-index: 1; }
.bt-root .bt-rec::after { content: 'おすすめ'; position: absolute; left: 50%; top: -1.6em; transform: translateX(-50%); padding: 0 0.5em; border-radius: 0.6em; background: #7affea; color: #10132c; font: 700 max(9px, calc(var(--bt-u) * 1.2)) var(--font-ui); white-space: nowrap; pointer-events: none; }
@keyframes bt-rec { 50% { box-shadow: 0 0 0 3px #fff, 0 0 22px #7affea, 0 3px 0 #10132c; } }
@keyframes bt-glow { 50% { box-shadow: 0 0 0 3px #fff, 0 0 18px #7fd8ff, 0 3px 0 #10132c; } }
@keyframes bt-glowpink { 50% { box-shadow: 0 0 0 3px #fff, 0 0 26px #ff4fd8, 0 4px 0 #10132c; } }
@keyframes bt-shake { 25% { transform: translateX(calc(-50% - 2px)); } 75% { transform: translateX(calc(-50% + 2px)); } }
@keyframes bt-float { 50% { transform: translate(-50%, -4px); } }
@keyframes bt-bob { 50% { margin-top: -5px; } }
@keyframes bt-bump { 40% { transform: scale(1.08); } }
@keyframes bt-turnin { from { transform: scaleX(0.2); opacity: 0; } }
@keyframes bt-judge { from { transform: translateX(-50%) scale(2.2); opacity: 0; } }
@keyframes bt-popfx { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--r)) scale(0.3); } 15% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(1.15); } 30% { transform: translate(-50%, -50%) rotate(var(--r)) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -110%) rotate(var(--r)) scale(1); } }
@keyframes bt-dmgfx { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(0.9); } 22% { transform: translate(-50%, -50%) scale(1.06); } 30% { transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; transform: translate(calc(-50% + var(--dx)), -90%) scale(1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -130%) scale(0.9); } }
@keyframes bt-banner { 0% { opacity: 0; transform: translateY(-50%) scaleY(0); } 15% { opacity: 1; transform: translateY(-50%) scaleY(1); } 80% { opacity: 1; transform: translateY(-50%) translateX(0); } 100% { opacity: 0; transform: translateY(-50%) translateX(-30%); } }
@keyframes bt-break { 0% { opacity: 0; transform: translateY(-50%) scale(3) rotate(-10deg); } 14% { opacity: 1; transform: translateY(-50%) scale(0.9) rotate(-4deg); } 22% { transform: translateY(-50%) scale(1.05) rotate(-4deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50%) scale(1.1) rotate(-4deg); } }
@keyframes bt-digit { 0% { opacity: 0; transform: translateY(-50%) scale(0.5); filter: blur(10px); } 15% { opacity: 1; transform: translateY(-50%) scale(1.1); filter: none; } 25% { transform: translateY(-50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bt-balloon { from { transform: scale(0.4); opacity: 0; } }
@keyframes bt-mcin { from { transform: translate(-50%, 120%); } }
@keyframes bt-fadein { from { opacity: 0; } }
@keyframes bt-fadeout { to { opacity: 0; } }
@keyframes bt-lines { to { background-position: 60px 0; } }
@keyframes bt-vsl { from { transform: translateX(-60vw); } }
@keyframes bt-vsr { from { transform: translateX(60vw); } }
@keyframes bt-vsmark { from { transform: translate(-50%, -50%) rotate(-8deg) scale(4); opacity: 0; } }
@keyframes bt-bossband { from { transform: scaleY(0); opacity: 0; } }
@keyframes bt-band { 0% { transform: translateY(-50%) skewY(-8deg) scaleY(0); } 10% { transform: translateY(-50%) skewY(-8deg) scaleY(1); } 85% { opacity: 1; transform: translateY(-50%) skewY(-8deg) scaleY(1); } 100% { opacity: 0; transform: translateY(-50%) skewY(-8deg) scaleY(0.2); } }
@keyframes bt-cutimg { 0% { transform: translate(60vw, -50%); } 15% { transform: translate(0, -50%); } 80% { transform: translate(-3vw, -50%); opacity: 1; } 100% { transform: translate(-20vw, -50%); opacity: 0; } }
@keyframes bt-cutimgr { 0% { transform: translate(-60vw, -50%); } 15% { transform: translate(0, -50%); } 80% { transform: translate(3vw, -50%); opacity: 1; } 100% { transform: translate(20vw, -50%); opacity: 0; } }
@keyframes bt-spname { 0% { opacity: 0; transform: rotate(-8deg) translateX(-30vw); } 14% { opacity: 1; transform: rotate(-8deg) translateX(0); } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bt-assistin { 0% { transform: translateX(100%); } 18% { transform: translateX(0); } 85% { transform: translateX(-2vw); opacity: 1; } 100% { transform: translateX(-2vw); opacity: 0; } }
@keyframes bt-phaseimg { from { transform: scale(1.3); filter: brightness(3) drop-shadow(0 0 30px var(--c)); } }

/* 縦長では案内だけ（ui の #rotate）。バトルは止まる */
html[data-orient='portrait'] .bt-root .bt-hud, html[data-orient='portrait'] .bt-root .bt-cutin { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .bt-root .bt-hint.on, .bt-root .bt-label.active { animation: none; }
}