/* 戰鬥層與戰鬥拉霸 */
.game { display: flex; flex-direction: column; }
.game.free { box-shadow: inset 0 0 0 3px var(--gold); }
.game.hold { box-shadow: inset 0 0 0 3px #4aa8ff; }
.game.lucky { animation: luckyEdge 300ms steps(2) infinite; }
@keyframes luckyEdge { 50% { box-shadow: inset 0 0 0 3px #ff8a3d; } }

.bt-top { display: flex; align-items: center; gap: 8px; padding: 4px 8px 0; position: relative; }
.bt-top .pxbtn { padding: 6px 10px; }
.bt-stage { color: var(--gold); }
.bt-floor { font-size: 24px; line-height: 1; }
.bt-floor.pop { animation: pop 200ms steps(2); }
.bt-speeds { position: absolute; right: 8px; top: 40px; z-index: 5; display: flex; gap: 4px; padding: 6px; }
.bt-speeds button { width: 32px; height: 32px; background: var(--panel); color: var(--muted); box-shadow: 0 0 0 var(--px) var(--line-dk); }
.bt-speeds button.on { background: var(--gold); color: #2a1a05; }

.bt-hud { display: flex; gap: 8px; padding: 4px 8px 2px; min-height: 96px; }
.bt-members { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bt-members .m { position: relative; display: grid; grid-template-columns: 24px 60px 1fr auto; align-items: center; gap: 6px; height: 28px; padding-right: 4px; }
.bt-members .m.empty { visibility: hidden; }
.bt-members .m img { width: 24px; height: 24px; box-shadow: 0 0 0 var(--px) var(--rc, var(--line-dk)); }
.bt-members .m .nm { font-size: 12px; color: var(--rc, var(--text)); white-space: nowrap; overflow: hidden; line-height: 1; }
.bt-members .m .nm b { display: block; font-weight: normal; }
.bt-members .m .nm small { display: block; font-size: 10px; color: var(--dim); margin-top: 2px; }
.bt-members .m .bars { display: flex; flex-direction: column; gap: 4px; }
.bt-members .m .xp { position: relative; height: 5px; background: var(--lo); box-shadow: 0 0 0 var(--px) var(--line-dk); }
.bt-members .m .xp i { position: absolute; left: 0; top: 0; bottom: 0; background: #4aa8ff; transition: width 120ms steps(3); }
.bt-members .m .xp.full i { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.bt-members .m .hp { position: relative; height: 12px; background: var(--lo); box-shadow: 0 0 0 var(--px) var(--line-dk); }
.bt-members .m .hp i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--ok); transition: width 120ms steps(3); }
.bt-members .m .hp i.low { background: var(--danger); animation: blink 400ms steps(1) infinite; }
.bt-members .m .hp span { position: absolute; left: 4px; top: 0; line-height: 12px; font-size: 11px; color: #fff; white-space: nowrap; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000; }
.bt-members .m .sh { font-size: 11px; color: #8fd3ff; white-space: nowrap; min-width: 34px; text-align: right; }
.bt-members .m.down { opacity: .45; }
.bt-members .m.down img { filter: grayscale(1) brightness(.5); }
.bt-members .m.down .hp i { background: var(--danger); }
.bt-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.bt-squads { display: flex; gap: 4px; }
.bt-squads .sq { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 2px; background: rgba(16,14,42,.9); box-shadow: 0 0 0 var(--px) var(--line); }
.bt-squads .sq img { width: 22px; height: 22px; display: block; }
.bt-squads .sq img.down { filter: grayscale(1) brightness(.5); }
.bt-squads .sq.down { opacity: .4; }
.bt-squads .sq .ring { position: absolute; inset: 0; display: none; background: conic-gradient(rgba(3,2,12,.75) var(--cd, 0deg), transparent 0); pointer-events: none; }
.bt-squads .sq.cd .ring { display: block; }
.bt-stats { display: flex; gap: 8px; color: var(--muted); white-space: nowrap; }
.bt-stats b { color: var(--text); font-weight: normal; }
.bt-stats .soul, .bt-stats .soul b { color: var(--soul); }
.bt-wave { display: flex; align-items: center; gap: 6px; color: var(--muted); width: 100px; }
.bt-wave .bar { flex: 1; height: 6px; }
.bt-wave .bar i { background: #ff8a3d; transition: none; }
.bt-buffs { color: var(--r4); min-height: 15px; padding: 0 8px 2px; white-space: nowrap; overflow: hidden; }

.bt-field { position: relative; flex: 1; min-height: 160px; }
#bt-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.bt-boss { position: absolute; left: 40px; right: 40px; top: 6px; text-align: center; }
.bt-boss span { color: var(--danger); }
.bt-boss .bar i { background: var(--danger); transition: none; }
.bt-stamp { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-size: 36px; color: #fff; pointer-events: none; opacity: 0; text-shadow: 3px 3px 0 #000, -3px 0 0 #000, 0 -3px 0 #000, 3px 0 0 #000, 0 3px 0 #000; }
.bt-stamp.in { animation: stamp 300ms steps(6) both; }
.bt-warn { position: absolute; left: 0; right: 0; top: 50%; text-align: center; font-size: 24px; color: #ff8a3d; pointer-events: none; opacity: 0; text-shadow: 2px 2px 0 #000, -2px 0 0 #000, 0 -2px 0 #000, 2px 0 0 #000, 0 2px 0 #000; }
.bt-warn.in { animation: warnIn 1.8s steps(1) both; }
@keyframes warnIn { 0%, 80% { opacity: 1; } 20%, 60% { opacity: .2; } 100% { opacity: 0; } }
.bt-modetag { position: absolute; left: 0; right: 0; top: 4px; text-align: center; color: var(--gold); font-size: 24px; pointer-events: none; text-shadow: 2px 2px 0 #000, -2px 0 0 #000, 0 -2px 0 #000, 2px 0 0 #000, 0 2px 0 #000; }
.bt-feed { position: absolute; left: 8px; right: 8px; bottom: 4px; list-style: none; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; pointer-events: none; }
.bt-feed li { padding: 2px 6px; background: rgba(16,14,42,.85); box-shadow: 0 0 0 var(--px) var(--line-dk), inset 3px 0 0 0 var(--rc, var(--muted)); animation: feedIn 200ms steps(4) both; transition: opacity 400ms; }
.bt-feed li.fade { opacity: 0; }
.bt-feed li.danger { --rc: var(--danger); color: var(--danger); }
.bt-feed li.warn { --rc: #ff8a3d; color: #ff8a3d; }
.bt-feed li.gold { --rc: var(--gold); color: var(--gold); }
.bt-feed li.soul { --rc: var(--soul); color: var(--soul); }
.bt-feed li.token { --rc: var(--token); color: var(--token); }
.bt-feed li.sword { --rc: #ffe28a; }
.bt-feed li.skill { --rc: var(--r4); }
.bt-feed li.shield { --rc: #8fd3ff; }
.bt-feed li.potion { --rc: var(--ok); }
.bt-feed li.item { --rc: var(--r1); }
.bt-feed li.r0 { --rc: var(--r0); color: var(--r0); }
.bt-feed li.r1 { --rc: var(--r1); color: var(--r1); }
.bt-feed li.r2 { --rc: var(--r2); color: var(--r2); }
.bt-feed li.r3 { --rc: var(--r3); color: var(--r3); }
.bt-feed li.r4 { --rc: var(--r4); color: var(--r4); }
.bt-feed li.r5 { --rc: var(--r5); color: var(--r5); }

.bt-slotwrap { display: flex; gap: 8px; padding: 6px 8px 2px; background: var(--bg2); box-shadow: 0 -3px 0 0 var(--line-dk); }
.bt-slotcol { display: flex; flex-direction: column; gap: 4px; }
.bt-cols { display: grid; grid-template-columns: repeat(3, 56px); gap: 4px; padding: 0 4px; text-align: center; font-size: 12px; }
.bt-cols span { white-space: nowrap; overflow: hidden; line-height: 1.2; }
.bt-cols span.off { opacity: .35; }
.bt-cols span.dead { color: var(--muted) !important; text-decoration: line-through; }
.bt-cols span.empty { color: var(--muted); }
.bt-slot .slot.idle { opacity: .45; }
.bt-slot .reel.off { opacity: .3; }
.bt-slot .reel.dead .cell { background: #1a1230; }
.bt-slot .reel.dead .cell::after { content: '✕'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--danger); }
.bt-slot .slot { background: var(--lo); padding: 4px; box-shadow: 0 0 0 var(--px) var(--line); }
.game.free .bt-slot .slot { box-shadow: 0 0 0 var(--px) var(--gold), 0 0 0 6px rgba(255,194,61,.25); }
.game.hold .bt-slot .slot { box-shadow: 0 0 0 var(--px) #4aa8ff; }
.bt-slot .cell { position: relative; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-dk); }
.bt-slot .cell.hit { animation: cellHit 500ms steps(4); }
@keyframes cellHit { 0%, 100% { background: var(--panel); } 50% { background: var(--gold); } }
.bt-slot .cell.held { box-shadow: inset 0 0 0 var(--px) var(--gold); background: #3a2c10; }
.bt-slot .cell .face { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 12px; line-height: 1; padding: 2px 0; background: rgba(3,2,12,.85); }
.bt-slot .cell .face.gold { color: var(--gold); }
.bt-slot .cell .face.soul { color: var(--soul); }
.bt-slot .cell .face.token { color: var(--token); }
.bt-slot .cell .face.ok { color: var(--ok); }
.bt-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bt-side .pxbtn { margin: var(--px); padding: 6px 6px; font-size: 12px; white-space: nowrap; }
.bt-strats { display: flex; flex-direction: column; gap: 4px; }
.bt-strats .pxbtn { display: flex; justify-content: space-between; padding: 6px 8px; }
.bt-strats .pxbtn b { font-weight: normal; }
.bt-strats .pxbtn.on { background: var(--text); color: #0f0d20; }
.bt-ceil { display: flex; align-items: center; gap: 4px; margin-top: auto; color: var(--muted); white-space: nowrap; }
.bt-ceil .bar { flex: 1; height: 8px; }
.bt-ceil .bar i { background: var(--r4); transition: width 200ms steps(4); }
.bt-ceil.full { color: var(--gold); }
.bt-ceil.full .bar i { background: linear-gradient(90deg, #ffe28a, var(--gold), #ff8a3d); box-shadow: 0 0 6px var(--gold); }
.bt-ceil b { font-weight: normal; color: var(--text); }
.bt-items { display: flex; gap: 12px; padding: 4px 10px calc(4px + env(safe-area-inset-bottom)); background: var(--bg2); color: var(--muted); white-space: nowrap; overflow: hidden; }

.bt-over { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(3,2,12,.7); animation: fadeIn 300ms steps(4) both; }
.bt-over .card { width: 100%; padding: 16px 14px; text-align: center; animation: secIn 200ms steps(4) both; }
.bt-over .ttl { font-size: 24px; color: var(--danger); margin-bottom: 8px; }
.bt-over .ttl.gold { color: var(--gold); }
.bt-over .st { line-height: 1.8; }
.bt-over .st b { font-weight: normal; color: var(--gold); }
.bt-over .st .bonus { color: var(--r4); }
.bt-over .tip { color: var(--muted); margin: 8px 0 4px; }
.bt-over .row { margin-top: 10px; }
.bt-over .row .pxbtn { flex: 1; }
.bt-freeres { background: rgba(3,2,12,.4); pointer-events: none; }
.bt-freeres .card { width: auto; padding: 12px 18px; }