/* 体験バトル（try-battle.js の部品専用）。全セレクタ .tb- 接頭辞。
 * .tb-app は本編 #app と同じ 520×1126 の設計座標。配置・寸法は本編（rouletteView.css / battle.css の enemy-slot-hud /
 * tutorial.css / player-hp-ribbon）と録画の実測に合わせ、幅に合わせて丸ごと scale する。
 * アニメは transform / opacity のみ（filter・box-shadow のトゥイーン禁止）。 */

.tb-root {
  --tb-ink: #151a33; --tb-k: #101010;
  position: relative; display: block; width: 100%; max-width: 384px; margin: 0 auto;
  font-family: var(--font-display, 'LPRounded', sans-serif); font-weight: 900; color: var(--tb-ink); line-height: 1.2;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; outline: none;
}
.tb-root *, .tb-root *::before, .tb-root *::after { box-sizing: border-box; }
.tb-root img { display: block; max-width: none; -webkit-user-drag: none; }
.tb-root button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.tb-root.tb-paused *, .tb-root.tb-paused *::before, .tb-root.tb-paused *::after { animation-play-state: paused !important; }

/* ---- スマホ型の外枠（細い白ベゼル＋濃紺の縁＋硬い影） ---- */
.tb-phone { padding: 4px; background: #fff; border: 3px solid var(--tb-ink); border-radius: 30px; box-shadow: 0 6px 0 var(--tb-ink); }
.tb-screen { position: relative; overflow: hidden; border: 2px solid var(--tb-ink); border-radius: 24px; background: #8d8840; isolation: isolate; }
.tb-app { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.tb-cam { position: absolute; inset: 0; }
.tb-bg { position: absolute; inset: -16px; background: #8d8840 center top / 552px auto no-repeat; }

/* ================= 敵・仲間（待機シート18コマを translateX の steps で送る） ================= */
.tb-unit { position: absolute; pointer-events: none; }
.tb-unit-pose, .tb-unit-body { position: absolute; inset: 0; transform-origin: 50% 85%; }
.tb-strip-wrap { position: absolute; inset: 0; overflow: hidden; }
.tb-strip-wrap img { width: 1800%; height: 100%; animation: tbIdle 4.5s steps(18) infinite; }
@keyframes tbIdle { to { transform: translateX(-100%); } }
.tb-white { opacity: 0; }
.tb-unit-shadow { position: absolute; left: 26%; right: 26%; height: 12%; margin-top: -6%; border-radius: 50%; background: rgba(46, 40, 8, .3); }
.tb-target { position: absolute; width: 76px; height: 22px; margin: -11px 0 0 -38px; border: 3px solid #ffd75e; border-radius: 50%; box-shadow: 0 0 0 2px rgba(16, 16, 16, .55), inset 0 0 0 2px rgba(16, 16, 16, .35); pointer-events: none; transition: opacity .2s ease; }
.tb-target.is-off { opacity: 0; }

/* ================= 敵の札 ================= */
.tb-hud { position: absolute; inset: 0; pointer-events: none; transition: opacity .15s ease; }
.tb-hp-fill, .tb-hp-lag { position: absolute; left: 1px; top: 1px; bottom: 1px; right: 1px; border-radius: inherit; transform-origin: 0 50%; }
.tb-hp-lag { background: #eaf7c9; transition: transform .5s ease .3s; }
.tb-hp-fill { background: linear-gradient(180deg, #a4ffb0 0 12%, #2ce05d 12% 44%, #1cb852 44% 100%); box-shadow: inset 0 -1px 0 #46d869, inset 0 1px 0 rgba(255, 255, 255, .5); transition: transform .32s ease-out; }
.tb-hp-fill[data-band="mid"] { background: linear-gradient(180deg, #ffe797 0 15%, #ffc93c 15% 48%, #e99a16 48% 100%); }
.tb-hp-fill[data-band="low"] { background: linear-gradient(180deg, #ffb6bd 0 15%, #ff5f6d 15% 48%, #d9364c 48% 100%); }
.tb-hp-text { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: #fff; font-size: 11px; line-height: 1; white-space: nowrap; -webkit-text-stroke: 2.4px #10111a; paint-order: stroke fill; }
/* 中央の敵: 上の大きな札（顔の丸・名前・LV・HPバー） */
.tb-boss-face { position: absolute; left: 92px; top: 148px; z-index: 2; width: 56px; height: 56px; overflow: hidden; border: 3px solid #3ee06a; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #d8f7b8, #86d36f); box-shadow: 0 0 0 2.5px #10111a, 0 2px 0 rgba(0, 0, 0, .35); }
.tb-boss-face img { width: 100%; height: 100%; }
.tb-boss-name { position: absolute; left: 160px; top: 128px; width: 200px; text-align: center; color: #16151a; font-size: 20px; line-height: 1; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; }
.tb-boss-lv { position: absolute; left: 342px; top: 138px; color: #16151a; font-size: 12px; line-height: 1; -webkit-text-stroke: 2.4px #fff; paint-order: stroke fill; }
.tb-boss-bar { position: absolute; left: 146px; top: 165px; width: 244px; height: 29px; overflow: hidden; border-radius: 15px; background: #0b1018; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .85), 0 2px 0 rgba(0, 0, 0, .4); }
.tb-boss-bar .tb-hp-fill, .tb-boss-bar .tb-hp-lag { left: 6px; top: 4px; bottom: 4px; right: 4px; border-radius: 11px; }
.tb-boss-bar .tb-hp-text { font-size: 14px; -webkit-text-stroke: 3px #10111a; padding-left: 6px; }
.tb-boss.is-defeated .tb-boss-face { opacity: .45; }
/* 左右の敵: 属性アイコン＋小さなHPバー */
.tb-plate { position: absolute; height: 28px; transition: opacity .2s ease; }
.tb-plate-icon { position: absolute; left: 0; top: 0; z-index: 3; width: 28px; height: 28px; }
.tb-plate-bar { position: absolute; left: 14px; right: 0; top: 5px; height: 18px; overflow: hidden; border-radius: 10px; background: #07121c; box-shadow: 0 0 0 1px rgba(0, 0, 0, .86), 0 1px 0 rgba(0, 0, 0, .42); }
.tb-plate-bar .tb-hp-text { padding-left: 10px; }
.tb-plate.is-defeated { opacity: .28; }
/* 右上: 属性の相性リング */
.tb-ring { position: absolute; left: 398px; top: 96px; width: 120px; height: 100px; }
.tb-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tb-ring-icon { position: absolute; width: 24px; height: 24px; }

/* ================= 味方HP（墓地・ハート・HPバー・山札） ================= */
.tb-party { position: absolute; left: 0; top: 710px; width: 520px; height: 80px; }
.tb-pile { position: absolute; top: 4px; width: 58px; height: 58px; }
.tb-pile.is-discard { left: 16px; }
.tb-pile.is-deck { left: 453px; }
.tb-pile img { width: 100%; height: 100%; }
.tb-pile b { position: absolute; left: 50%; top: 44px; transform: translateX(-50%); min-width: 36px; padding: 2px 6px 3px; border: 2px solid #10111a; border-radius: 999px; background: #d8353f; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2);
  color: #fff; font-size: 11px; line-height: 1; text-align: center; white-space: nowrap; }
.tb-pile.is-deck b { background: #5e6b80; }
.tb-heart { position: absolute; left: 88px; top: 7px; z-index: 2; width: 56px; height: 56px; display: grid; place-items: center; border: 3px solid #10111a; border-radius: 50%; background: #fff7ec; box-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.tb-heart img { width: 38px; height: 38px; }
.tb-party-bar { position: absolute; left: 134px; top: 18px; width: 306px; height: 35px; overflow: hidden; border: 3px solid #10111a; border-radius: 18px; background: #18222c; }
.tb-party-bar i { position: absolute; left: 10px; top: 2px; right: 3px; bottom: 3px; border-radius: 14px; background: linear-gradient(180deg, #8af0c0 0 16%, #4fd796 16% 55%, #36bb7c 55% 100%); }
.tb-party-bar b { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding-left: 10px; color: #fff; font-size: 19px; line-height: 1; -webkit-text-stroke: 4px #10111a; paint-order: stroke fill; }

/* ================= リールのトレイ（slotPresentation.mjs と同じ寸法） ================= */
.tb-base { position: absolute; left: 12px; top: 970px; width: 496px; height: 32px; pointer-events: none; }
.tb-base img { width: 100%; height: 100%; }
.tb-slit { position: absolute; left: 42px; top: 992px; width: 436px; height: 10px; border: 2px solid var(--tb-k); border-bottom: 0; border-radius: 6px 6px 0 0; background: #2a160a; box-shadow: inset 0 3px 0 #120904; pointer-events: none; z-index: 2; }
.tb-reels { position: absolute; left: 12px; top: 776px; width: 496px; height: 216px; overflow: hidden; cursor: pointer; z-index: 1; }
.tb-stage { position: absolute; left: 0; top: 14px; width: 496px; height: 212px; }
.tb-frame { position: absolute; inset: 0; pointer-events: none; }
.tb-backing { position: absolute; left: 96px; right: 96px; top: 24px; bottom: 25px; border: 3px solid #351d1c; border-radius: 8px; background: #80535f; box-shadow: inset 0 5px 0 #ab7e84, inset 0 -7px 0 #613e4d; }
.tb-win { position: absolute; width: 148px; height: 196px; }
.tb-pop, .tb-body { position: absolute; inset: 0; transform-origin: 50% 100%; }
.tb-reel-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tb-box { position: absolute; inset: 0; overflow: hidden;
  clip-path: path('M42 25 Q74 28 104 25 Q118 25 123 49 Q136 98 123 148 Q119 173 105 174 Q74 171 43 174 Q29 173 25 149 Q12 98 25 49 Q30 25 42 25 Z'); }
.tb-payrow { position: absolute; left: 0; right: 0; top: 72px; height: 52px; background: #fff9e875; border-top: 1.5px solid #c9b696; border-bottom: 1.5px solid #c9b696; }
.tb-reel { position: absolute; inset: 0; }
.tb-strip, .tb-ghost { position: absolute; left: 0; right: 0; top: -32px; }
.tb-win.is-moving .tb-strip { will-change: transform; }
.tb-ghost { opacity: 0; }
.tb-win.is-blur .tb-ghost { opacity: .34; will-change: transform; }
.tb-win.is-blur .tb-ghost + .tb-ghost { opacity: .2; }
.tb-win.is-blur .tb-reel .tb-sym { transform: scaleY(1.3); }
.tb-wash { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #fffaf0 0, rgba(255, 250, 240, .15) 30%, rgba(255, 250, 240, .15) 70%, #fffaf0 100%); opacity: 0; transition: opacity 90ms ease; }
.tb-win.is-blur .tb-wash { opacity: .75; }
.tb-wflash { position: absolute; inset: 0; pointer-events: none; background: #fff; opacity: 0; }
.tb-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #36291514, transparent 35%, transparent 65%, #36291514); }
.tb-cell { position: relative; height: 52px; }
.tb-sym { position: absolute; inset: 0; z-index: 1; width: 44px; height: 44px; margin: auto; }
.tb-sym img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.tb-sym.is-chest { width: 46px; }
.tb-sym.is-land { animation: tbLand 300ms cubic-bezier(.3, 1.6, .5, 1) 1; }
.tb-sym.is-pulse { animation: tbPulse 300ms cubic-bezier(.3, 1.5, .5, 1) 3; }
.tb-sym.is-nudge { animation: tbNudge 260ms ease-out 1; }
@keyframes tbLand { 0% { transform: scale(1.22, .82); } 45% { transform: scale(.94, 1.1); } 100% { transform: none; } }
@keyframes tbPulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.2); } }
@keyframes tbNudge { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.08); } }
.tb-win.is-reach { animation: tbBeat 340ms ease-in-out infinite; }
.tb-win::before { content: ''; position: absolute; left: -34px; right: -34px; top: -30px; bottom: -30px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 90, .95), rgba(255, 170, 40, .55) 55%, rgba(255, 150, 30, 0)); opacity: 0; transition: opacity 160ms ease; }
.tb-win.is-reach::before { opacity: 1; animation: tbReachGlow 340ms ease-in-out infinite; }
@keyframes tbReachGlow { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes tbBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.tb-lines { position: absolute; inset: 0; pointer-events: none; }
.tb-line { --lc: #ffb627; position: absolute; height: 14px; margin-top: -7px; transform-origin: 0 50%; pointer-events: none; }
.tb-line-clip { position: absolute; left: -2px; right: -2px; top: 0; bottom: 0; overflow: hidden; border-radius: 999px; }
.tb-line-clip i { position: absolute; left: 2px; right: 2px; top: 0; bottom: 0; border: 2.5px solid var(--tb-k); border-radius: 999px;
  background: linear-gradient(180deg, var(--lc) 0 28%, #fff 28% 60%, var(--lc) 60% 100%); box-shadow: 0 2px 0 rgba(16, 16, 16, .55); transform: translateX(-101%); opacity: 0; }
.tb-line-run { position: absolute; left: -15px; top: 50%; width: 30px; height: 30px; margin-top: -15px; opacity: 0; }
.tb-line-run svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tb-line.is-reach i { transform: scaleY(.55); opacity: 1; background: var(--lc); box-shadow: none; animation: tbBlink 260ms steps(2, jump-none) infinite; }
.tb-line.is-on i { animation: tbLineDraw 260ms cubic-bezier(.3, .8, .3, 1) forwards; }
.tb-line.is-on .tb-line-run { animation: tbLineRun 300ms cubic-bezier(.3, .8, .3, 1) forwards; }
.tb-line.is-out i { transform: none; animation: tbFade 260ms ease-out forwards; }
@keyframes tbLineDraw { from { transform: translateX(-101%); opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes tbLineRun { 0% { transform: translateX(0) scale(.4) rotate(0deg); opacity: 1; } 80% { transform: translateX(var(--len)) scale(1.15) rotate(180deg); opacity: 1; } 100% { transform: translateX(var(--len)) scale(0) rotate(240deg); opacity: 1; } }
@keyframes tbBlink { from { opacity: .6; } to { opacity: .15; } }
@keyframes tbFade { from { opacity: 1; } to { opacity: 0; } }
.tb-cell::after { content: ''; position: absolute; inset: 0; z-index: 2; background: #2a160a; opacity: 0; transition: opacity 180ms ease; pointer-events: none; }
.tb-reels.is-win .tb-cell:not(.is-win)::after { opacity: .5; }
.tb-reels.is-miss .tb-cell::after { opacity: .3; }
.tb-winlight { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 0; pointer-events: none; animation: tbLightIn 420ms cubic-bezier(.3, 1.4, .5, 1) both; transition: opacity 260ms ease-out; }
.tb-rays { position: absolute; left: -88px; top: -88px; width: 176px; height: 176px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 214, 90, .95) 0deg 9deg, rgba(255, 214, 90, 0) 9deg 30deg);
  -webkit-mask: radial-gradient(closest-side, #000 22%, rgba(0, 0, 0, .55) 58%, transparent 100%); mask: radial-gradient(closest-side, #000 22%, rgba(0, 0, 0, .55) 58%, transparent 100%);
  animation: tbSpin 7s linear infinite; }
.tb-wcore { position: absolute; left: -32px; top: -28px; width: 64px; height: 56px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 248, 189, .85) 0%, rgba(255, 222, 95, .55) 38%, rgba(247, 177, 24, .2) 58%, transparent 75%); animation: tbBreathe 1400ms ease-in-out infinite; }
.tb-cell.is-win.is-fade .tb-winlight { opacity: 0; }
@keyframes tbLightIn { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes tbSpin { to { transform: rotate(360deg); } }
@keyframes tbBreathe { 0%, 100% { opacity: .72; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.07); } }
.tb-pins { position: absolute; left: 0; top: 0; width: 496px; height: 212px; pointer-events: none; }
.tb-pin { position: absolute; width: 56px; height: 40px; }
.tb-pin.is-l { transform-origin: 19px 19px; }
.tb-pin.is-r { transform-origin: 37px 19px; }
.tb-pin img, .tb-mount img, .tb-diamond img { width: 100%; height: 100%; }
.tb-pin.is-r img { transform: scaleX(-1); }
.tb-mount { position: absolute; width: 20px; height: 80px; }
.tb-diamond { position: absolute; width: 28px; height: 24px; }
.tb-tags { position: absolute; left: 0; top: 0; width: 496px; height: 24px; pointer-events: none; }
.tb-tag { position: absolute; display: none; align-items: center; height: 21px; padding: 0 10px; transform: translate(-50%, -50%); border: 2.5px solid var(--tb-k); border-radius: 999px;
  background: #2a160a; box-shadow: 0 3px 0 var(--tb-k); color: #ffd23f; font-size: 14px; line-height: 1; white-space: nowrap; transition: opacity 160ms ease; }
.tb-tag.is-mul, .tb-tag.is-reach-chip, .tb-tag.is-off { display: flex; }
.tb-tag.is-reach-chip { font-size: 13px; color: #fff3a6; }
.tb-tag.is-off { opacity: 0; }
.tb-tag.is-pop { animation: tbTagPop 300ms cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes tbTagPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(1.14); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* ================= 手札（トレイ位置に4枚。本編 101.5×1.4 = 142） ================= */
.tb-hand { position: absolute; left: 0; top: 0; width: 520px; height: 992px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: 3; }
.tb-hand.is-on { visibility: visible; }
.tb-card { position: absolute; pointer-events: auto; cursor: pointer; outline: none; }
.tb-card-lift { position: absolute; inset: 0; transform-origin: 50% 100%; transition: opacity .12s ease; }
.tb-card-lift > img { width: 100%; height: 100%; }
.tb-card-dim { position: absolute; left: 4%; right: 4%; top: 3%; bottom: 3%; border-radius: 10px; background: rgba(18, 18, 30, .45); opacity: 0; pointer-events: none; }
.tb-card.is-short .tb-card-dim { opacity: 1; }
.tb-card.is-reading { z-index: 9 !important; }
.tb-card.is-reading .tb-card-dim { opacity: 0; }
.tb-card.is-dimmed .tb-card-lift { opacity: .55; }
.tb-card:focus-visible .tb-card-lift > img { outline: 3px solid #ffd23f; outline-offset: 2px; border-radius: 10px; }
/* READY!（使えるようになったカードの持ち主の頭上）・小さな▼・どれも払えない時の「マナ不足」 */
.tb-marks { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.tb-ready { position: absolute; padding: 3px 9px; border: 2.5px solid #16151a; border-radius: 999px; background: #ffd23f; color: #16151a; font-size: 12px; line-height: 1; letter-spacing: 1px; white-space: nowrap;
  opacity: 0; transform: translate(-50%, -100%) scale(.4); }
.tb-ready.is-on { animation: tbReady 1.5s cubic-bezier(.3, 1.9, .5, 1) forwards; }
@keyframes tbReady { 0% { opacity: 0; transform: translate(-50%, -100%) scale(.4); } 14% { opacity: 1; transform: translate(-50%, -100%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -100%) scale(1); } 100% { opacity: 0; transform: translate(-50%, calc(-100% - 6px)) scale(1); } }
.tb-ready-mark { position: absolute; width: 0; height: 0; margin-left: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid #ffd23f; filter: drop-shadow(0 1.5px 0 #16151a); opacity: 0; transform: translateY(-100%); transition: opacity .2s ease .9s; }
.tb-ready-mark.is-on { opacity: 1; animation: tbMarkBob .9s ease-in-out infinite; }
@keyframes tbMarkBob { 0%, 100% { transform: translateY(-100%); } 50% { transform: translateY(calc(-100% - 3px)); } }
.tb-short { position: absolute; left: 260px; top: 775px; padding: 3px 12px; border: 3px solid #16151a; border-radius: 999px; background: #8d8a9c; color: #fff; font-size: 14px; line-height: 1; letter-spacing: .5px; white-space: nowrap;
  -webkit-text-stroke: 2.4px #16151a; paint-order: stroke fill; opacity: 0; transform: translateX(-50%) scale(.4); transition: opacity .15s ease, transform .2s cubic-bezier(.3, 1.9, .5, 1); }
.tb-short.is-on { opacity: 1; transform: translateX(-50%) scale(1); }

/* 予約したカード（0.48倍で END TURN の左に下揃え） */
.tb-queue { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.tb-qcard { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; transform-origin: 50% 100%; }
.tb-qcard img { width: 100%; height: 100%; }

/* ================= 4色マナ ================= */
.tb-mana-row { position: absolute; left: 0; top: 1009px; width: 520px; height: 34px; pointer-events: none; z-index: 3; transition: opacity .15s ease; }
.tb-mana { position: absolute; top: 0; width: 58px; height: 34px; }
.tb-mana-dot { position: absolute; left: 0; top: 0; z-index: 1; width: 34px; height: 34px; transition: opacity .2s ease; }
.tb-mana-v { position: absolute; left: 37px; top: 0; z-index: 2; height: 34px; display: flex; align-items: center; color: #fff; font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
  -webkit-text-stroke: 4.4px var(--tb-k); paint-order: stroke fill; text-shadow: 0 2px 0 var(--tb-k); }
.tb-mana.is-empty .tb-mana-dot { opacity: .45; }
.tb-mana.is-empty .tb-mana-v { opacity: .72; }
.tb-mana-delta { position: absolute; left: 48px; top: -18px; z-index: 5; color: #7dff8a; font-size: 15px; white-space: nowrap; opacity: 0; transform: translateX(-50%); -webkit-text-stroke: 4px var(--tb-k); paint-order: stroke fill; }
.tb-mana.is-pop .tb-mana-delta { animation: tbRise .7s ease-out; }
@keyframes tbRise { 0% { opacity: 0; transform: translate(-50%, 6px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -16px); } }

/* ================= SPIN! / STOP! / END TURN（本編 .roulette-cta 176×69） ================= */
.tb-cta { --cf-hi: #fff3a6; --cf: #ffd330; --cf-lo: #ffc40e; --cf-band: #fa7601; --et: #06072a;
  position: absolute; z-index: 5; padding: 0; border: 0; background: transparent; cursor: pointer; outline: none; transition: opacity .15s ease; }
.tb-cta-pulse { position: absolute; inset: 0; animation: tbCtaPulse 2.2s ease-in-out infinite; }
.tb-cta-img { position: absolute; inset: 0; display: none; background: center / 100% 100% no-repeat; }
.tb-cta-face { position: absolute; inset: 0; border: 3.5px solid var(--et); border-radius: 12px; background: linear-gradient(180deg, var(--cf-hi) 0 9%, var(--cf) 9% 46%, var(--cf-lo) 46% 79%, var(--cf-band) 79% 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .75), inset 0 -2px 0 rgba(0, 0, 0, .12); }
.tb-cta-label { position: absolute; inset: 0 8px 10px; display: grid; place-items: center; color: #fff; font-size: 23px; line-height: 1; letter-spacing: .02em; white-space: nowrap;
  -webkit-text-stroke: 4.4px var(--et); paint-order: stroke fill; text-shadow: 0 2px 0 var(--et); }
.tb-cta.is-green { --cf-hi: #c8ffb8; --cf: #5fe06a; --cf-lo: #43d94e; --cf-band: #1f9e2c; }
.tb-cta.is-red { --cf-hi: #ffc2c8; --cf: #ff6878; --cf-lo: #ef3b4d; --cf-band: #b5202f; }
.tb-cta.is-endturn .tb-cta-img { display: block; }
.tb-cta.is-endturn .tb-cta-face, .tb-cta.is-endturn .tb-cta-label { display: none; }
.tb-cta:disabled { cursor: default; }
.tb-cta:disabled .tb-cta-pulse { animation: none; }
.tb-cta:disabled:not(.is-endturn) { --cf-hi: #c9c6d6; --cf: #a9a6b8; --cf-lo: #97949f; --cf-band: #6b6878; }
.tb-cta:active:not(:disabled) .tb-cta-pulse { transform: translateY(3px) scale(.98); animation: none; }
.tb-cta:focus-visible .tb-cta-pulse { outline: 3px solid #fff; outline-offset: 3px; border-radius: 14px; }
@keyframes tbCtaPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.tb-cta-count { position: absolute; right: -20px; top: -8px; z-index: 2; display: grid; place-items: center; min-width: 46px; height: 28px; padding: 0 9px; border: 2.5px solid #ffd23f; border-radius: 999px;
  background: #16151a; box-shadow: 0 0 0 1.5px #16151a, 0 3px 0 rgba(16, 16, 16, .45); color: #fff; font-size: 15px; line-height: 1; white-space: nowrap; pointer-events: none; }
.tb-cta-count[hidden] { display: none; }
.tb-cta-count.is-pop { animation: tbCountPop .24s cubic-bezier(.3, 1.9, .5, 1); }
@keyframes tbCountPop { 0% { transform: scale(.55); } 100% { transform: scale(1); } }

/* ================= 演出レイヤー ================= */
.tb-fx { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.tb-orb { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; background: center / contain no-repeat; opacity: 0; will-change: transform; }
/* 与ダメ数字（本編 showBattleJuiceStamp: 縁 #6b0b14・塗りは割合で薄桃→赤） */
.tb-dmg { position: absolute; z-index: 3; color: var(--df, #ff9cae); font-size: 30px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 6px #6b0b14; paint-order: stroke fill; text-shadow: 0 3px 0 #6b0b14; }
.tb-dmg.is-big { font-size: 40px; -webkit-text-stroke: 8px #6b0b14; }
.tb-hitring { position: absolute; width: 54px; height: 54px; margin: -27px 0 0 -27px; border: 5px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(16, 16, 16, .6); }
.tb-puff, .tb-pstar { position: absolute; left: 0; top: 0; }
.tb-puff img, .tb-pstar img { width: 100%; height: 100%; object-fit: contain; }
.tb-spark { position: absolute; transform: scale(0); }
.tb-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tb-burst { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 5px solid var(--bc, #ffb627); border-radius: 50%; box-shadow: 0 0 0 2px var(--tb-k), inset 0 0 0 2px var(--tb-k); }
.tb-glow { position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .8) 0 14%, color-mix(in srgb, var(--gc) 55%, transparent) 38%, transparent 74%); }
.tb-winglow { position: absolute; width: 190px; height: 250px; margin: -125px 0 0 -95px; border-radius: 50%;
  background: radial-gradient(closest-side, transparent 0 34%, color-mix(in srgb, var(--gc) 45%, transparent) 58%, color-mix(in srgb, var(--gc) 18%, transparent) 78%, transparent 100%); }
.tb-bubble-fx { position: absolute; border: 2.5px solid var(--gc); border-radius: 50%; background: color-mix(in srgb, var(--gc) 22%, rgba(255, 255, 255, .5)); box-shadow: 0 0 0 1.5px rgba(16, 16, 16, .7); }
.tb-dust { position: absolute; margin: -5px 0 0 -5px; border: 2px solid var(--tb-k); border-radius: 50%; background: #fff; }
.tb-bolt { position: absolute; left: 0; top: 0; }
.tb-bolt svg { display: block; overflow: visible; }
.tb-boltglow { position: absolute; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(closest-side, #fff 0 22%, rgba(255, 243, 160, .85) 42%, rgba(255, 214, 90, .3) 66%, transparent 100%); }
.tb-flash { position: absolute; inset: 0; z-index: 21; opacity: 0; pointer-events: none; }

/* FIGHT!（本編 /ui/battle/fight-callout.png） */
.tb-fight { position: absolute; inset: 0; z-index: 19; pointer-events: none; visibility: hidden; }
.tb-fight.is-on { visibility: visible; }
.tb-fight img { position: absolute; left: 258px; top: 340px; width: 300px; opacity: 0; }

/* ================= カットイン（本編: 暗転＋HUDを隠す、斜めの帯に仲間の絵、帯の下にルビ付きの技名） ================= */
.tb-root.is-cutin .tb-hud, .tb-root.is-cutin .tb-mana-row, .tb-root.is-cutin .tb-cta, .tb-root.is-cutin .tb-queue, .tb-root.is-cutin .tb-marks,
.tb-root.is-cutin .tb-unit.is-ally, .tb-root.is-cutin .tb-target, .tb-root.is-cutin .tb-sound { opacity: 0; }
.tb-unit.is-ally, .tb-sound { transition: opacity .15s ease; }
.tb-cutin { position: absolute; inset: 0; z-index: 20; overflow: hidden; pointer-events: none; visibility: hidden; }
.tb-cutin.is-on { visibility: visible; }
.tb-cutin-dim { position: absolute; inset: 0; background: rgba(8, 10, 24, .6); }
.tb-cutin-band { position: absolute; left: -70px; top: 468px; width: 660px; height: 274px; overflow: hidden; transform: rotate(-12deg);
  background: radial-gradient(rgba(255, 255, 255, .22) 1.3px, transparent 1.8px) 0 0 / 11px 11px, linear-gradient(90deg, var(--b0), var(--b1) 46%, var(--b2));
  box-shadow: inset 0 7px 0 rgba(255, 255, 255, .4), inset 0 -7px 0 rgba(0, 0, 0, .08); }
.tb-cutin-band i { position: absolute; top: -20px; bottom: -20px; left: 0; width: 46px; background: rgba(255, 255, 255, .28); transform: translateX(-140px) skewX(-24deg); animation: tbStreak .7s linear infinite; }
@keyframes tbStreak { from { transform: translateX(-140px) skewX(-24deg); } to { transform: translateX(800px) skewX(-24deg); } }
.tb-cutin-face { position: absolute; left: 72px; top: 396px; width: 380px; height: 300px; }
.tb-cutin-face img { width: 100%; height: 100%; object-fit: contain; }
.tb-cutin-text { position: absolute; left: 0; top: 742px; width: 520px; text-align: center; rotate: -8deg; }
.tb-cutin-text small { display: block; margin-bottom: 2px; color: #fff; font-size: 16px; line-height: 1.1; -webkit-text-stroke: 3.5px var(--bo); paint-order: stroke fill; }
.tb-cutin-text b { display: block; color: #fff; font-size: 42px; line-height: 1.1; white-space: nowrap; -webkit-text-stroke: 9px var(--bo); paint-order: stroke fill; text-shadow: 0 5px 0 var(--bo); }

/* ================= 初回案内（本編 tutorial.css: 暗転で照らす・顔つき会話枠・指と波紋） ================= */
.tb-tut { position: absolute; inset: 0; z-index: 25; pointer-events: none; opacity: 0; transition: opacity .18s ease; }
.tb-tut.is-on { opacity: 1; }
.tb-tut-hole { position: absolute; border-radius: 18px; box-shadow: 0 0 0 1600px rgba(6, 8, 18, .55); opacity: 0; transition: opacity .2s ease; }
.tb-tut.is-dim .tb-tut-hole { opacity: 1; }
.tb-tut-ring { position: absolute; border: 3.5px solid #fff; border-radius: 18px; box-shadow: 0 0 0 2.5px #101010, inset 0 0 0 2px #101010; opacity: 0; }
.tb-tut-ring.is-on { opacity: 1; }
.tb-tut-ring::after { content: ''; position: absolute; inset: -4px; border: 3px solid rgba(255, 233, 150, .95); border-radius: 20px; animation: tbRingPulse 1.4s ease-out infinite; }
@keyframes tbRingPulse { 0% { transform: scale(1); opacity: .95; } 75%, 100% { transform: scale(1.08); opacity: 0; } }
.tb-tut-callout { position: absolute; left: 18px; width: 484px; padding: 38px 0 0 34px; transform-origin: 50% 100%; }
.tb-tut-callout.is-pop { animation: tbCalloutIn 260ms cubic-bezier(.2, .9, .3, 1.25) both; }
@keyframes tbCalloutIn { 0% { transform: translateY(14px) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }
.tb-tut-guide { position: absolute; z-index: 3; left: 0; bottom: 0; width: 150px; height: 150px; }
.tb-tut-guide .tb-strip-wrap { inset: auto; left: -14px; bottom: -14px; width: 180px; height: 180px; }
.tb-tut-body { position: relative; display: flex; align-items: center; min-height: 108px; padding: 16px 20px 24px 118px; border: 3.5px solid #101010; border-radius: 18px; background: #fffaf0;
  box-shadow: inset 0 -6px 0 #e8dcbf, 0 6px 0 rgba(16, 16, 16, .45); }
.tb-tut-text { color: #1b1d24; font-size: 23px; line-height: 1.35; letter-spacing: .01em; }
.tb-tut-name { position: absolute; z-index: 4; left: 8px; bottom: 6px; padding: 3px 18px 4px; border: 3px solid #101010; border-radius: 999px; background: #ffc933; box-shadow: inset 0 -3px 0 #f5980e, 0 3px 0 rgba(16, 16, 16, .45);
  color: #101010; font-size: 14px; line-height: 1.2; letter-spacing: .06em; white-space: nowrap; }
.tb-tut-name::before, .tb-tut-name::after { content: ''; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -5.5px; border: 2px solid #101010; background: #fff; transform: rotate(45deg); }
.tb-tut-name::before { left: 4px; }
.tb-tut-name::after { right: 4px; }
.tb-tut-hand { position: absolute; width: 64px; height: 64px; margin: -1px 0 0 -27px; opacity: 0; transform-origin: 42% 2%; }
.tb-tut-hand.is-on { opacity: 1; animation: tbPress 1.1s cubic-bezier(.3, .7, .4, 1) infinite; }
.tb-tut-hand img { width: 100%; height: 100%; }
@keyframes tbPress { 0% { transform: translate(12px, 18px); } 42% { transform: translate(0, 0); } 52% { transform: translate(0, 2px) scale(.92); } 64% { transform: translate(0, 0) scale(1); } 100% { transform: translate(12px, 18px); } }
.tb-tut-ripple { position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px #101010; opacity: 0; }
.tb-tut-ripple.is-on { animation: tbRipple 1.1s ease-out infinite; }
@keyframes tbRipple { 0%, 48% { transform: scale(.35); opacity: 0; } 52% { transform: scale(.35); opacity: .95; } 90%, 100% { transform: scale(1.3); opacity: 0; } }

/* ================= CLEAR! ================= */
.tb-clear { position: absolute; inset: 0; z-index: 30; visibility: hidden; }
.tb-clear.is-on { visibility: visible; }
.tb-clear-dim { position: absolute; inset: 0; background: rgba(12, 14, 34, .5); }
.tb-clear-panel { position: absolute; left: 50%; top: 46%; width: 404px; padding: 70px 30px 28px; border: 5px solid var(--tb-ink); border-radius: 30px; background: #fff8e6; box-shadow: 0 9px 0 var(--tb-ink);
  text-align: center; transform: translate(-50%, -50%); }
.tb-clear-ribbon { position: absolute; left: 50%; top: -34px; width: 320px; height: 76px; transform: translateX(-50%); border: 5px solid var(--tb-ink); border-radius: 18px;
  background: linear-gradient(180deg, #ff8a7a 0 22%, #ff5048 22% 74%, #d8323a 74% 100%); box-shadow: 0 6px 0 var(--tb-ink); }
.tb-clear-ribbon span { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-54%); color: #ffd23f; font-size: 60px; line-height: 1; letter-spacing: .03em;
  -webkit-text-stroke: 10px var(--tb-ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--tb-ink); }
.tb-clear-msg { margin: 0 0 10px; font-size: 26px; line-height: 1.2; }
.tb-clear-party { display: flex; justify-content: center; align-items: flex-end; gap: 6px; height: 92px; margin-bottom: 18px; }
.tb-clear-party img { width: 96px; height: 88px; object-fit: contain; }
.tb-root .tb-clear-cta, .tb-root .tb-clear-again { display: block; width: 100%; padding: 0; cursor: pointer; border: 4px solid #06072a; }
.tb-root .tb-clear-cta { height: 70px; border-radius: 16px; background: linear-gradient(180deg, #fff3a6 0 9%, #ffd330 9% 46%, #ffc40e 46% 79%, #fa7601 79% 100%);
  box-shadow: 0 5px 0 #06072a, inset 0 2px 0 rgba(255, 255, 255, .75); color: #fff; font-size: 26px; line-height: 1; -webkit-text-stroke: 5px #06072a; paint-order: stroke fill; text-shadow: 0 3px 0 #06072a; }
.tb-root .tb-clear-again { height: 52px; margin-top: 14px; border-radius: 14px; background: #f5e9cf; box-shadow: 0 4px 0 #06072a, inset 0 -5px 0 #dcc497; color: #5e4c43; font-size: 21px; line-height: 1; }
.tb-clear-cta:active, .tb-clear-again:active { transform: translateY(3px); }
.tb-clear-cta:focus-visible, .tb-clear-again:focus-visible { outline: 3px solid #3f8cff; outline-offset: 3px; }

/* 効果音トグル（左上。右上は属性リング） */
.tb-sound { position: absolute; left: 12px; top: 14px; z-index: 26; width: 44px; height: 44px; padding: 7px; border: 3px solid var(--tb-ink); border-radius: 50%; background: #fff; box-shadow: 0 3px 0 var(--tb-ink); cursor: pointer; }
.tb-sound svg { display: block; width: 100%; height: 100%; }
.tb-sound[aria-pressed="true"] { background: #ffd23f; }
.tb-sound:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tb-ink); }

@media (prefers-reduced-motion: reduce) {
  .tb-cta-pulse, .tb-rays, .tb-wcore, .tb-win.is-reach, .tb-cutin-band i, .tb-tut-ring::after, .tb-ready-mark.is-on { animation: none !important; }
  .tb-tut-hand.is-on, .tb-tut-ripple.is-on { animation-duration: 2s; }
}