/* Turn-based battle HUD (battle.js buildHud): a premium still frame.
   Top: stage plate (left), wave/enemy bar with portrait (centre), round icon buttons (right).
   Left: vertical turn-order rail. Bottom-left: the acting hero's cut-out with name and HP.
   Bottom-right: framed ability buttons. Bottom-centre: crew chips with the team gauge above.
   Over every fighter: level badge + segmented HP. Loads after gacha.css/theme.css and overrides them. */
#battle-ui { --hud-gold: #e8c46a; --hud-gold2: #9a6a1c; --hud-glass: linear-gradient(180deg, rgba(14,18,36,.86), rgba(6,8,18,.78)); font-family: Nunito, sans-serif; }

/* ---------- top-left stage plate */
#battle-ui .b-top { top: 10px; left: 14px; right: 14px; }
#battle-ui .b-isle { position: relative; background: var(--hud-glass); border: 1px solid rgba(232,196,106,.55); border-radius: 4px 14px 14px 4px; padding: 6px 16px 7px 14px; box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 3px 0 0 var(--hud-gold); }
#battle-ui .b-isle b { font: 17px/1.1 'Lilita One'; letter-spacing: .4px; color: #fff; text-shadow: 0 1px 2px #000; }
#battle-ui .b-isle span { font: 900 11px Nunito; letter-spacing: 1.6px; text-transform: uppercase; color: var(--hud-gold); }

/* ---------- top-right round icon buttons */
#battle-ui .b-btns { gap: 10px; flex-wrap: nowrap; }
#battle-ui .b-btns .btn { position: relative; width: 50px; height: 50px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, rgba(44,54,92,.95), rgba(8,10,22,.92) 70%); border: 2px solid rgba(232,196,106,.85);
  box-shadow: 0 0 0 2px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.25); color: #f4f1e6; transform: none; filter: none; opacity: 1; }
#battle-ui .b-btns .btn i { display: block; width: 24px; height: 24px; line-height: 0; }
#battle-ui .b-btns .btn svg { width: 24px; height: 24px; filter: drop-shadow(0 1px 1px #000); }
#battle-ui .b-btns .btn span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px; white-space: nowrap; font: 900 9.5px Nunito; letter-spacing: .8px; text-transform: uppercase; color: #e9e4d2; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
#battle-ui .b-btns .btn.on { border-color: #ffe48a; color: #ffe48a; box-shadow: 0 0 0 2px rgba(0,0,0,.55), 0 0 14px rgba(255,210,90,.75), inset 0 1px 0 rgba(255,255,255,.25); }
#battle-ui .b-btns .btn.b-flee { border-color: rgba(220,120,110,.85); color: #ffd6cf; }

/* ---------- top-centre wave / enemy bar */
.b-wave { position: absolute; top: 8px; left: 50%; transform: translateX(-50%) translateY(-8px); width: 560px; height: 74px; display: flex; align-items: center; pointer-events: none; opacity: 0; transition: opacity .3s, transform .3s; }
.b-wave.on { opacity: 1; transform: translateX(-50%); }
.wv-emb { position: relative; z-index: 2; flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle at 50% 30%, #3a2a12, #120c05 75%); border: 3px solid var(--hud-gold); box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--hud-gold2), 0 4px 12px rgba(0,0,0,.7); }
.wv-emb b { font: 26px/0.9 'Lilita One'; color: #ffe9a8; text-shadow: 0 2px 0 #5a3500; }
.wv-emb small { font: 900 8px Nunito; letter-spacing: 1px; color: #d9c08a; }
.wv-main { position: relative; flex: 1; margin: 0 -8px; padding: 2px 18px 0; }
.wv-name { display: flex; align-items: baseline; gap: 10px; padding-left: 6px; }
.wv-name b { font: 21px/1.1 'Lilita One'; color: #fff; letter-spacing: .3px; text-shadow: 0 2px 3px #000, 0 0 8px rgba(0,0,0,.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.wv-lv { margin-left: auto; font: 20px 'Lilita One'; color: #ffb43a; text-shadow: 0 2px 2px #000; }
.wv-n { font: 900 15px Nunito; color: #ffd9c8; text-shadow: 0 1px 2px #000; }
.wv-bar { position: relative; height: 16px; margin-top: 3px; border-radius: 3px; background: linear-gradient(#10131f, #1e2236); border: 2px solid #c8a14e; box-shadow: 0 0 0 2px #000, inset 0 2px 4px rgba(0,0,0,.8); overflow: hidden; }
.wv-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#ffb54a, #ff7a10 55%, #d45200); box-shadow: inset 0 1px 0 rgba(255,255,255,.55); transition: width .35s; }
.wv-bar::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(0,0,0,.45) calc(10% - 2px) 10%); pointer-events: none; }
.wv-bar u { position: absolute; inset: 0; z-index: 1; text-align: center; text-decoration: none; font: 900 11px/12px Nunito; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.wv-sub { min-height: 14px; margin-top: 2px; text-align: center; font: 900 11px Nunito; color: #ffcf6a; text-shadow: 0 1px 2px #000; }
.wv-pic { position: relative; z-index: 2; flex: none; width: 70px; height: 70px; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, #fff2c0, #c8902a, #fff2c0, #8a5a10, #fff2c0); box-shadow: 0 0 0 2px #000, 0 4px 14px rgba(0,0,0,.7); }
.wv-pic i { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #000; background: #3a1218 center 12% / 210% auto no-repeat; }
.b-wave.boss .wv-pic { width: 78px; height: 78px; background: conic-gradient(from 200deg, #ffd0c0, #c41a1a, #ffe0a0, #7a0808, #ffd0c0); }
.b-wave.boss .wv-emb { border-color: #ff7a6a; background: radial-gradient(circle at 50% 30%, #6a1010, #1a0404 75%); }
.b-wave.boss .wv-emb b { color: #ffdad0; text-shadow: 0 2px 0 #5a0000; }
.b-wave.boss .wv-bar i { background: linear-gradient(#ff6a5a, #e0201a 55%, #8a0a0a); }

/* ---------- status pills and mode rules move out of the rail's way */
#battle-ui .b-status { top: 92px; left: 50%; transform: translateX(-50%); }
#battle-ui .b-mods { top: 86px; left: auto; right: 14px; align-items: flex-end; max-width: 34%; }

/* ---------- left turn-order rail */
#battle-ui .b-order { top: 74px; left: 18px; transform: none; flex-direction: column; gap: 9px; padding: 6px 0; }
#battle-ui .b-order.raid { top: 74px; }
#battle-ui .b-order::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: linear-gradient(rgba(232,196,106,.9), rgba(232,196,106,.15)); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.5); }
#battle-ui .b-order:empty::before { display: none; }
#battle-ui .b-order i { position: relative; width: 42px; height: 42px; border: 3px solid #fff; background-color: #1a2a5a; background-size: 210% auto; background-position: center 12%;
  box-shadow: 0 0 0 2px #2a7cff, 0 3px 8px rgba(0,0,0,.8); }
#battle-ui .b-order i.foe { border-color: #fff; box-shadow: 0 0 0 2px #e0302a, 0 3px 8px rgba(0,0,0,.8); background-color: #3a1218; }
#battle-ui .b-order i.boss { box-shadow: 0 0 0 3px #e0302a, 0 0 10px #ff3a2a, 0 3px 8px rgba(0,0,0,.8); }
#battle-ui .b-order i.charging { box-shadow: 0 0 0 2px #e0302a, 0 0 14px 3px #ff3030; }
#battle-ui .b-order i.broken { box-shadow: 0 0 0 2px #ffe14a, 0 3px 8px rgba(0,0,0,.8); }
#battle-ui .b-order i:first-child { width: 56px; height: 56px; margin: 0 0 4px -7px; border-width: 3px; }
#battle-ui .b-order i.now { margin-right: 0; border-color: #fff6d0; box-shadow: 0 0 0 3px var(--hud-gold), 0 0 18px rgba(255,210,90,.9), 0 3px 8px rgba(0,0,0,.8); }

/* ---------- bottom-left: the acting hero */
.b-hero { position: absolute; left: 0; bottom: 0; width: 470px; height: 260px; pointer-events: none; }
.b-hero::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: radial-gradient(120% 90% at 0% 100%, rgba(4,6,16,.88), rgba(4,6,16,.55) 45%, transparent 72%); }
.bh-art { position: absolute; left: -26px; bottom: -40px; width: 270px; height: 320px; background: center 4% / 175% auto no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 65%, transparent), linear-gradient(#000 70%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, #000 65%, transparent); filter: drop-shadow(0 0 10px rgba(0,0,0,.6)); }
.b-hero.swap .bh-art { animation: bhIn .35s cubic-bezier(.2,.9,.3,1); }
@keyframes bhIn { from { transform: translateX(-40px); opacity: 0; } }
.bh-info { position: absolute; left: 200px; bottom: 22px; width: 215px; }
.bh-tag { display: inline-block; padding: 2px 10px 2px 8px; margin-bottom: 3px; font: 900 10px Nunito; letter-spacing: 2px; color: #241500; background: linear-gradient(90deg, #ffe08a, #e0a838); clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
.b-hero:not(.now) .bh-tag { color: #dfe6ff; background: linear-gradient(90deg, #4a5a8a, #2a3456); }
.bh-name { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.bh-name b { font: 28px/1.05 'Lilita One'; color: #fff; letter-spacing: .3px; text-shadow: 0 2px 0 #000, 0 0 10px rgba(0,0,0,.8); overflow: hidden; text-overflow: ellipsis; max-width: 214px; }
.bh-name .tdot { width: 16px; height: 16px; margin: 0; box-shadow: 0 0 0 2px #000, 0 0 0 3px rgba(255,255,255,.7); }
.bh-name em { font: 900 11px Nunito; font-style: normal; letter-spacing: 1px; text-transform: uppercase; color: #cfd6ee; text-shadow: 0 1px 2px #000; }
.bh-hp { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 4px 10px 4px 0; border-top: 1px solid rgba(232,196,106,.45); }
.bh-hp span { font: 900 19px Nunito; color: #9cf27a; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
.bh-hp .bar { position: relative; flex: 1; height: 9px; border-radius: 2px; background: #1a1d2a; border: 1px solid rgba(0,0,0,.9); box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.bh-hp .bar i { background: linear-gradient(#a8ff7a, #3cc23a 60%, #1f8a22); }
.b-hero.low .bh-hp span { color: #ff8a7a; } .b-hero.low .bh-hp .bar i { background: linear-gradient(#ff9a7a, #e0302a); }

/* ---------- bottom-right: ability buttons */
#battle-ui .b-act { left: auto; right: 22px; bottom: 30px; transform: none; width: auto; flex-wrap: nowrap; gap: 14px; align-items: flex-end; }
#battle-ui .b-act.on { animation: abIn .22s ease-out; }
@keyframes abIn { from { transform: translateY(18px); opacity: 0; } }
#battle-ui .b-act > small { display: none; }
#battle-ui .b-act button { position: relative; flex: none; width: 98px; height: 98px; padding: 0; border-radius: 16px; overflow: visible; text-align: center; background: #10131f;
  border: 3px solid #e8c46a; box-shadow: 0 0 0 2px #000, 0 0 0 5px rgba(154,106,28,.9), 0 8px 16px rgba(0,0,0,.65); }
#battle-ui .b-act button:active { transform: translateY(2px); }
#battle-ui .b-act button:hover { border-color: #fff4c8; }
#battle-ui .b-act .ab-ic { position: absolute; inset: 0; border-radius: 13px; overflow: hidden; background-repeat: no-repeat; background-size: 240% auto; background-position: 50% 6%; }
#battle-ui .b-act .ab-ic::before, #battle-ui .b-act .ab-ic::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
#battle-ui .b-act .act-atk .ab-ic { background: radial-gradient(circle at 50% 55%, #fff1c0 0 8%, #ffb040 18%, #e0401a 42%, #5a0c06 78%); }
#battle-ui .b-act .act-atk .ab-ic::before { background: repeating-conic-gradient(from 10deg at 50% 55%, rgba(255,240,200,.45) 0 4deg, transparent 4deg 22deg); mix-blend-mode: screen; }
#battle-ui .b-act .act-sk .ab-ic { background: radial-gradient(circle at 50% 50%, #f0fbff 0 7%, #7ad0ff 18%, #2a62e0 44%, #08143e 80%); }
#battle-ui .b-act .act-sk .ab-ic::before { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(200,240,255,.4) 0 3deg, transparent 3deg 30deg); mix-blend-mode: screen; }
#battle-ui .b-act .ab-ic::after { box-shadow: inset 0 0 18px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.35); }
#battle-ui .b-act .act-sp .ab-ic::after { background: linear-gradient(160deg, rgba(255,160,255,.25), transparent 40%, rgba(90,10,150,.55) 75%, rgba(20,4,40,.9)); }
#battle-ui .b-act .ab-gl { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); font-size: 44px; line-height: 1; color: #fff; text-shadow: 0 0 10px rgba(255,255,255,.8); filter: drop-shadow(0 3px 2px rgba(0,0,0,.8)); }
#battle-ui .b-act .act-sp .ab-gl { left: 6px; right: auto; top: 6px; transform: none; font-size: 22px; color: #ffe8ff; }
#battle-ui .b-act button b { position: absolute; left: -6px; right: -6px; bottom: -22px; font: 13px/1.1 'Lilita One'; letter-spacing: .2px; color: #fff; text-shadow: 0 1px 2px #000, 0 0 5px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#battle-ui .b-act .ab-cost { position: absolute; right: -8px; top: -9px; min-width: 30px; padding: 2px 6px; border-radius: 10px; font: 900 11px Nunito; font-style: normal; color: #fff; opacity: 1;
  background: linear-gradient(#3a5ad8, #1a2a88); border: 2px solid #bfe0ff; box-shadow: 0 2px 4px rgba(0,0,0,.7); }
#battle-ui .b-act .ab-cost.plus { background: linear-gradient(#2fbf6a, #0f6a30); border-color: #c8ffd8; }
#battle-ui .b-act .ab-cost.sp { background: linear-gradient(#a84ae8, #4a147a); border-color: #f0d0ff; }
#battle-ui .b-act button p { position: absolute; right: 0; bottom: calc(100% + 16px); width: 230px; margin: 0; padding: 8px 10px; border-radius: 8px; text-align: left; font: 700 12px/1.3 Nunito; color: #eef; background: rgba(8,10,22,.94); border: 1px solid rgba(232,196,106,.6); opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s; pointer-events: none; }
#battle-ui .b-act button:hover p { opacity: 1; transform: none; }
#battle-ui .b-act .act-sp s { position: absolute; inset: 0; border-radius: 13px; background: conic-gradient(transparent var(--p), rgba(0,0,0,.66) 0); }
#battle-ui .b-act .act-sp.ready s { display: none; }
#battle-ui .b-act .act-sp.ready { border-color: #fff2b0; animation: abGlow 1s ease-in-out infinite alternate; }
@keyframes abGlow { from { box-shadow: 0 0 0 2px #000, 0 0 0 5px rgba(154,106,28,.9), 0 0 10px rgba(255,220,120,.5); } to { box-shadow: 0 0 0 2px #000, 0 0 0 5px #e8c46a, 0 0 28px rgba(255,220,120,.95); } }
#battle-ui .b-act .act-sp.queued { border-color: #fff; }
#battle-ui .b-act .act-sp:not(.ready) { cursor: default; }
#battle-ui .b-act .act-sk:disabled { filter: grayscale(.9) brightness(.55); }
#battle-ui .b-act .act-atk { width: 112px; height: 112px; }
#battle-ui .b-act .act-atk .ab-gl { font-size: 52px; }

/* ---------- bottom-centre: crew chips and the team gauge */
#battle-ui .b-crew { left: calc(50% + 28px); bottom: 14px; gap: 7px; }
#battle-ui .cu { width: 78px; height: 92px; border-radius: 10px; border: 2px solid rgba(232,196,106,.7); box-shadow: 0 0 0 2px rgba(0,0,0,.6), 0 4px 10px rgba(0,0,0,.6); }
#battle-ui .cu-art { inset: -4px -14px 18px; background-size: 150% auto; }
#battle-ui .cu-name { bottom: 15px; font-size: 11px; padding-top: 6px; }
#battle-ui .cu .bar { left: 5px; right: 5px; height: 5px; border-radius: 1px; } #battle-ui .cu .bar.hp { bottom: 9px; } #battle-ui .cu .bar.sp { bottom: 3px; height: 4px; }
#battle-ui .cu-ready { font-size: 20px; top: 28%; }
#battle-ui .cu.acting { border-color: #fff6d0; transform: translateY(-8px); box-shadow: 0 0 0 2px #000, 0 0 16px rgba(255,210,90,.95); }
#battle-ui .cu-threat { width: 18px; height: 18px; font-size: 10px; top: 3px; right: 3px; }
#battle-ui .b-team, #battle-ui.choosing .b-team { left: calc(50% + 28px); bottom: 118px; width: 300px; }
#battle-ui .b-team .bar { height: 7px; border: 1px solid rgba(232,196,106,.7); border-radius: 2px; box-shadow: 0 0 0 1px #000; }
#battle-ui .b-team small { font: 900 10px Nunito; letter-spacing: 3px; color: #f2dfa8; }
#battle-ui .b-pts i { width: 12px; height: 12px; border: 2px solid #cfe8ff; box-shadow: 0 0 0 1px #000; }

/* ---------- bars over every fighter: level badge + segmented HP */
.ahp { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 3px; pointer-events: none; }
.ahp.off { display: none; }
.ahp-lv, .ehp-lv { flex: none; min-width: 24px; height: 22px; padding: 0 3px; display: grid; place-items: center; border-radius: 4px; font: 900 13px Nunito; color: #fff; text-shadow: 0 1px 1px #000;
  background: linear-gradient(#4aa8ff, #1a4ab0); border: 2px solid #e8f4ff; box-shadow: 0 0 0 1px #000, 0 2px 4px rgba(0,0,0,.6); }
.ahp-bars { width: 66px; }
.ahp .bar, .ehp-bars .bar { position: relative; border-radius: 1px; background: #11131c; box-shadow: 0 0 0 1px #000; }
.ahp .bar.hp { height: 7px; } .ahp .bar.sp { height: 3px; margin-top: 2px; }
.ahp .bar.hp i { background: linear-gradient(#b4ff8a, #48c83a 60%, #24902a); }
.ahp .bar.sp i { background: linear-gradient(90deg, #4aa3ff, #c88aff); }
.ahp .bar.hp::after, .ehp-bars .bar.hp::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(0,0,0,.5) 7px 8px); }
.ahp.low .bar.hp i { background: linear-gradient(#ff9a7a, #e0302a); }
.ahp.ready .bar.sp i { background: #ffe14a; box-shadow: 0 0 6px #ffe14a; }
.ahp.now .ahp-lv { background: linear-gradient(#ffe08a, #c88a18); border-color: #fff; color: #241500; text-shadow: none; box-shadow: 0 0 0 1px #000, 0 0 10px rgba(255,210,90,.9); }
#battle-ui .ehp { width: 124px; }
#battle-ui .ehp.boss { width: 190px; }
#battle-ui .ehp-name { font: 12px 'Lilita One'; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; margin-bottom: 2px; }
.ehp-row { display: flex; align-items: center; gap: 3px; }
.ehp-lv { background: linear-gradient(#ff6a52, #a8160e); border-color: #ffe0d8; }
.ehp-bars { flex: 1; min-width: 0; }
#battle-ui .ehp-bars .bar.hp { height: 8px; }
#battle-ui .ehp.boss .ehp-bars .bar.hp { height: 11px; }
#battle-ui .ehp-bars .bar.hp i { background: linear-gradient(#ff9a6a, #ff4a2a 55%, #b01a10); }
#battle-ui .ehp-bars .bar.brk { width: 100%; margin: 2px 0 0; height: 3px; }
#battle-ui .ehp-bars .bar.act { width: 100%; margin: 2px 0 0; height: 2px; }

/* ---------- narrow screens: stack it back up */
@media (max-width: 900px) {
  .b-wave { width: min(420px, calc(100vw - 200px)); }
  .wv-name b { font-size: 16px; max-width: 150px; } .wv-lv { font-size: 15px; }
  .b-hero { width: 300px; height: 180px; }
  .bh-art { width: 170px; height: 220px; left: -20px; bottom: -30px; }
  .bh-info { left: 130px; bottom: 120px; width: 170px; }
  .bh-name b { font-size: 20px; max-width: 130px; } .bh-hp span { font-size: 14px; }
  #battle-ui .b-act { right: 10px; bottom: 132px; gap: 10px; }
  #battle-ui .b-act button { width: 70px; height: 70px; } #battle-ui .b-act .act-atk { width: 80px; height: 80px; }
  #battle-ui .b-act button b { font-size: 11px; bottom: -18px; }
  #battle-ui .b-crew { left: 50%; }
  #battle-ui .b-team, #battle-ui.choosing .b-team { left: 50%; bottom: 112px; width: min(260px, 60vw); }
  #battle-ui.choosing .b-team { bottom: 250px; }
}
@media (max-width: 640px) {
  .b-wave { top: 62px; width: calc(100vw - 24px); height: 60px; }
  .wv-emb { width: 44px; height: 44px; } .wv-emb b { font-size: 19px; } .wv-pic, .b-wave.boss .wv-pic { width: 52px; height: 52px; }
  #battle-ui .b-btns .btn { width: 40px; height: 40px; } #battle-ui .b-btns .btn svg { width: 19px; height: 19px; }
  #battle-ui .b-order { top: 130px; left: 8px; gap: 6px; } #battle-ui .b-order i { width: 30px; height: 30px; } #battle-ui .b-order i:first-child { width: 40px; height: 40px; margin-left: -5px; }
  .b-hero { display: none; }
  #battle-ui .b-act { left: 50%; right: auto; transform: translateX(-50%); bottom: 124px; }
  #battle-ui .cu { width: 64px; height: 84px; }
  .ahp-bars { width: 54px; } .ahp-lv, .ehp-lv { min-width: 18px; height: 17px; font-size: 10px; }
  #battle-ui .ehp { width: 96px; }
}

/* round 2: the top-left chip only names the island while the boss-bar emblem already shows the wave count */
#battle-ui:has(.b-wave.on) .b-isle > span { display: none; }

/* ---------- round 3: two clean bottom layers only (hero block left, skills right).
   The crew-card strip duplicated the turn-order rail, so wide screens drop it; ready specials are
   queued by tapping that fighter's plate, and skill points + team gauge sit in one slim bar over the skills. */
@media (min-width: 901px) {
  #battle-ui .b-crew { display: none; }
  .b-hero { width: 620px; height: 270px; }
  .b-hero::before { background: radial-gradient(110% 95% at 0% 100%, rgba(4,6,16,.9), rgba(4,6,16,.6) 42%, transparent 70%); }
  .bh-info { left: 206px; bottom: 26px; width: 340px; }
  .bh-tag { font-size: 11px; padding: 3px 14px 3px 9px; }
  .bh-name { gap: 8px; }
  .bh-name b { max-width: 300px; min-width: 0; font-size: 32px; letter-spacing: .4px; text-overflow: clip;
    text-shadow: 0 2px 0 #000, 0 0 12px rgba(0,0,0,.85), 0 0 22px rgba(0,0,0,.5); }
  .bh-name em { padding: 2px 7px; border-radius: 3px; background: rgba(0,0,0,.45); border: 1px solid rgba(232,196,106,.4); }
  .bh-hp { margin-top: 6px; padding: 6px 0 0; border-top: 0; position: relative; }
  .bh-hp::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(232,196,106,.85), rgba(232,196,106,.35) 60%, transparent); }
  .bh-hp span { font-size: 20px; }
  .bh-hp .bar { height: 10px; max-width: 150px; }

  #battle-ui .b-team, #battle-ui.choosing .b-team { left: auto; right: 22px; bottom: 166px; transform: none; width: 336px; pointer-events: none;
    display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 10px; row-gap: 6px; text-align: left;
    padding: 7px 12px; border-radius: 8px; background: var(--hud-glass); border: 1px solid rgba(232,196,106,.5);
    box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
  #battle-ui .b-team-go { grid-column: 1 / -1; grid-row: 1; margin: 0; font-size: 20px; padding: 5px 14px; pointer-events: auto; }
  #battle-ui .b-team:not(.full) .b-team-go { display: none; }
  #battle-ui .b-pts { grid-column: 1; grid-row: 2; margin: 0; gap: 8px; padding-left: 3px; }
  #battle-ui .b-team small { grid-column: 2; grid-row: 2; font: 900 10px Nunito; letter-spacing: 2.5px; color: #f2dfa8; text-shadow: 0 1px 2px #000; }
  #battle-ui .b-team .bar { grid-column: 3; grid-row: 2; position: relative; height: 8px; margin: 0; }
  #battle-ui .b-team.full { border-color: #ffe48a; box-shadow: 0 0 0 1px #000, 0 0 16px rgba(255,210,90,.55); }

  .ahp.ready { pointer-events: auto; cursor: pointer; }
  .ahp.ready::after { content: 'TAP'; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); padding: 1px 6px; border-radius: 3px;
    font: 900 9px Nunito; letter-spacing: 1px; color: #241500; background: linear-gradient(#ffe88a, #e0a838); box-shadow: 0 0 0 1px #000, 0 0 8px rgba(255,220,90,.8); }
}
@media (min-width: 901px) {
  /* skills are only up on the player's choice: the resource bar drops to their row when they are not */
  #battle-ui:not(.choosing) .b-team { bottom: 30px; }
  /* long special names wrap to two tight lines instead of truncating */
  #battle-ui .b-act button b.long { left: -12px; right: -12px; bottom: auto; top: calc(100% + 3px); white-space: normal; font-size: 11.5px; line-height: 1.02; text-overflow: clip; }
  #battle-ui .b-act { bottom: 34px; }
}

/* ---------- round 4: a permanent, ornate skill tray (bottom-right).
   The tray never disappears between choices: it previews the next crew member's kit, dimmed, with an
   Epic-Seven-style "N turns" overlay. Each button is a gold/bronze bevelled frame with corner studs around
   painted skill art; the selected skill wears a rotating glow ring, a charged special pulses. */
@media (min-width: 901px) {
  #battle-ui:not(.choosing) .b-team { bottom: 166px; }
  #battle-ui .b-act { right: 20px; bottom: 32px; gap: 16px; }
  #battle-ui .b-act.wait { animation: none; }
  #battle-ui .b-act::before { content: ''; position: absolute; left: -26px; right: -20px; top: -18px; bottom: -32px; z-index: -1; pointer-events: none;
    background: radial-gradient(120% 100% at 100% 100%, rgba(4,6,16,.85), rgba(4,6,16,.55) 45%, transparent 75%); }
  #battle-ui .b-act button, #battle-ui .b-act .act-atk { width: 104px; height: 104px; border: 0; border-radius: 18px; padding: 0; background:
      linear-gradient(#0b0d18, #0b0d18) padding-box,
      conic-gradient(from 210deg, #fff4c8, #c8902a, #6a4210, #f0c860, #fff4c8, #9a6a1c, #e8c46a, #fff4c8) border-box;
    border: 5px solid transparent; box-shadow: 0 0 0 2px #000, 0 0 0 3px rgba(255,230,160,.35), 0 10px 18px rgba(0,0,0,.7); }
  #battle-ui .b-act .act-atk { width: 112px; height: 112px; }
  /* corner studs */
  #battle-ui .b-act button::after { content: ''; position: absolute; inset: -9px; pointer-events: none; z-index: 3;
    background:
      radial-gradient(circle, #fffbe0 0 2px, #e8b84a 3px, #6a4210 5px, transparent 6px) 0 0 / 18px 18px no-repeat,
      radial-gradient(circle, #fffbe0 0 2px, #e8b84a 3px, #6a4210 5px, transparent 6px) 100% 0 / 18px 18px no-repeat,
      radial-gradient(circle, #fffbe0 0 2px, #e8b84a 3px, #6a4210 5px, transparent 6px) 0 100% / 18px 18px no-repeat,
      radial-gradient(circle, #fffbe0 0 2px, #e8b84a 3px, #6a4210 5px, transparent 6px) 100% 100% / 18px 18px no-repeat; }
  #battle-ui .b-act .ab-ic { inset: 0; border-radius: 13px; }
  #battle-ui .b-act .act-atk .ab-ic { background: var(--ic) center / cover no-repeat, radial-gradient(circle at 50% 55%, #fff1c0 0 8%, #ffb040 18%, #e0401a 42%, #5a0c06 78%); }
  #battle-ui .b-act .act-sk .ab-ic { background: var(--ic) center / cover no-repeat, radial-gradient(circle at 50% 50%, #f0fbff 0 7%, #7ad0ff 18%, #2a62e0 44%, #08143e 80%); }
  #battle-ui .b-act .act-atk .ab-ic::before, #battle-ui .b-act .act-sk .ab-ic::before { background: linear-gradient(160deg, rgba(255,255,255,.28), transparent 38%); mix-blend-mode: normal; }
  #battle-ui .b-act .ab-ic::after { box-shadow: inset 0 0 0 1px rgba(0,0,0,.8), inset 0 0 16px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.4); }
  /* painted art carries the read: the glyph shrinks to a corner badge */
  #battle-ui .b-act .act-atk .ab-gl, #battle-ui .b-act .act-sk .ab-gl { left: 5px; right: auto; top: 5px; transform: none; font-size: 17px; text-shadow: 0 0 6px #000; }
  #battle-ui .b-act button b { bottom: -24px; font-size: 14px; }
  #battle-ui .b-act .ab-cost { z-index: 4; }
  #battle-ui .b-act kbd { position: absolute; left: -8px; bottom: -8px; z-index: 4; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
    font: 900 11px Nunito; color: #241500; background: radial-gradient(circle at 40% 30%, #fff4c8, #d8a23a); box-shadow: 0 0 0 2px #000, 0 2px 4px rgba(0,0,0,.6); }
  #battle-ui .b-act .act-sp kbd { display: none; }
  /* cooldown / waiting: dim plus a big turn-count overlay */
  #battle-ui .b-act .ab-cd { position: absolute; inset: 0; z-index: 2; border-radius: 13px; display: grid; place-items: center; text-decoration: none;
    background: rgba(4,6,14,.62); }
  #battle-ui .b-act .ab-cd b { position: static; font: 22px/1 'Lilita One'; color: #fff; text-shadow: 0 2px 0 #000, 0 0 8px #000; white-space: nowrap; letter-spacing: .3px; }
  #battle-ui .b-act .act-sp .ab-cd b { font-size: 26px; }
  #battle-ui .b-act .act-sk:disabled { filter: none; }
  #battle-ui .b-act button.cd .ab-ic { filter: grayscale(.55) brightness(.75); }
  #battle-ui .b-act .act-sp s { z-index: 1; border-radius: 13px; }
  /* waiting tray: whole kit dimmed, no glow */
  #battle-ui .b-act.wait button { cursor: default; filter: saturate(.7); box-shadow: 0 0 0 2px #000, 0 10px 18px rgba(0,0,0,.7); }
  #battle-ui .b-act.wait button .ab-ic { filter: grayscale(.6) brightness(.6); }
  #battle-ui .b-act.wait button:hover p { opacity: 0; }
  /* selected skill: rotating gold glow ring */
  #battle-ui .b-act button.sel::before { content: ''; position: absolute; inset: -12px; z-index: -1; border-radius: 26px; pointer-events: none;
    background: conic-gradient(from var(--rot, 0deg), transparent 0 20%, rgba(255,236,150,.95) 30%, transparent 42% 70%, rgba(255,200,90,.95) 80%, transparent 92%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
    filter: blur(1.5px) drop-shadow(0 0 8px rgba(255,210,90,.9)); animation: abRing 2.4s linear infinite; }
  #battle-ui .b-act button.sel { box-shadow: 0 0 0 2px #000, 0 0 22px 4px rgba(255,214,110,.75), 0 10px 18px rgba(0,0,0,.7); }
  @property --rot { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
  @keyframes abRing { to { --rot: 360deg; } }
}
@media (min-width: 901px) {
  /* r4 tune: the ring paints inside each button's own stack so it sits just outside the frame */
  #battle-ui .b-act { isolation: isolate; }
  #battle-ui .b-act button { isolation: isolate; }
  #battle-ui .b-act button.sel::before { inset: -11px; border-radius: 26px; filter: drop-shadow(0 0 6px rgba(255,214,110,1)) drop-shadow(0 0 12px rgba(255,180,60,.8)); }
  #battle-ui .b-act button.sel { box-shadow: 0 0 0 2px #000, 0 0 26px 6px rgba(255,214,110,.8), 0 10px 18px rgba(0,0,0,.7); }
  #battle-ui .b-act .ab-cd { background: linear-gradient(rgba(4,6,14,.25), rgba(4,6,14,.6)); }
  #battle-ui .b-act .act-sp .ab-cd { background: none; }
  #battle-ui .b-act.wait button .ab-ic { filter: grayscale(.35) brightness(.72); }
  #battle-ui .b-act button.cd .ab-ic { filter: grayscale(.45) brightness(.7); }
}

/* ---------- round 5: one shared light over the whole stage.
   A scene grade sits under every HUD element: warm key light from the sun side, a cool lift overhead,
   a darker floor band and a soft vignette, so the deck, sky and every painted fighter read as one image. */
#battle-ui .b-grade { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 82% 6%, rgba(255,196,120,.2), transparent 72%),
    radial-gradient(55% 45% at 30% 62%, rgba(255,170,90,.07), transparent 70%),
    linear-gradient(180deg, rgba(18,16,44,.22), transparent 26%, transparent 60%, rgba(16,8,2,.34) 88%, rgba(8,4,2,.5)),
    radial-gradient(125% 100% at 50% 46%, transparent 52%, rgba(6,4,14,.62) 100%); }
#battle-ui .b-grade.s-sunset { background:
    radial-gradient(60% 50% at 82% 6%, rgba(255,140,70,.24), transparent 72%),
    linear-gradient(180deg, rgba(60,20,40,.22), transparent 28%, transparent 60%, rgba(20,6,2,.42)),
    radial-gradient(125% 100% at 50% 46%, transparent 52%, rgba(10,4,10,.65) 100%); }
#battle-ui .b-grade.s-night { background:
    radial-gradient(60% 50% at 70% 4%, rgba(140,180,255,.14), transparent 72%),
    linear-gradient(180deg, rgba(6,10,40,.3), transparent 30%, transparent 58%, rgba(2,4,14,.5)),
    radial-gradient(125% 100% at 50% 46%, transparent 48%, rgba(2,4,14,.72) 100%); }

@media (min-width: 901px) {
  /* the team gauge: no floating empty box. A slim engraved strip sitting on the tray's top edge:
     skill-point gems, a label, and a segmented track that always reads as a gauge (lit ticks even at 0) */
  #battle-ui .b-team, #battle-ui.choosing .b-team, #battle-ui:not(.choosing) .b-team { right: 26px; bottom: 170px; width: 348px; padding: 0 2px 6px; border: 0; border-radius: 0;
    background: none; box-shadow: none; }
  #battle-ui .b-team::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(232,196,106,.95) 18%, #fff2c0 50%, rgba(232,196,106,.95) 82%, transparent); box-shadow: 0 0 8px rgba(255,200,90,.6); }
  #battle-ui .b-team small { font: 15px/1 'Lilita One'; letter-spacing: 2px; color: #ffe6a0; text-shadow: 0 2px 0 #000, 0 0 6px #000; }
  #battle-ui .b-team .bar { height: 12px; border-radius: 6px; border: 2px solid #c8a14e; overflow: hidden;
    background: linear-gradient(#0a0c18, #1c2034); box-shadow: 0 0 0 1px #000, inset 0 2px 4px rgba(0,0,0,.9); }
  #battle-ui .b-team .bar::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(0,0,0,.55) calc(10% - 2px) 10%); }
  #battle-ui .b-team .bar::after { content: ''; position: absolute; inset: 0; z-index: 0;
    background: repeating-linear-gradient(90deg, rgba(255,200,90,.12) 0 calc(10% - 2px), transparent calc(10% - 2px) 10%); }
  #battle-ui .b-team .bar i { z-index: 1; min-width: 6px; background: linear-gradient(#fff2a0, #ffb43a 50%, #e0601a); box-shadow: 0 0 10px rgba(255,190,70,.9); }
  #battle-ui .b-pts i { width: 15px; height: 15px; border: 2px solid #e8f6ff; background: radial-gradient(circle at 35% 30%, #2a3a5a, #0a1222); box-shadow: 0 0 0 1.5px #000, 0 2px 3px rgba(0,0,0,.7); }
  #battle-ui .b-pts i.on { background: radial-gradient(circle at 35% 30%, #f0fbff, #6fc8ff 45%, #1a6ad8); box-shadow: 0 0 0 1.5px #000, 0 0 10px #6fc8ff; }

  /* the charging special: the hero's painting in full colour, a charge ring tracing the frame, the % as a badge */
  #battle-ui .b-act .act-sp .ab-ic, #battle-ui .b-act.wait .act-sp .ab-ic, #battle-ui .b-act .act-sp.cd .ab-ic { filter: saturate(1.1) brightness(.92);
    background-color: #2a0e44; background-size: 230% auto; background-position: 50% 8%; }
  #battle-ui .b-act .act-sp .ab-ic::after { background: linear-gradient(170deg, rgba(255,180,255,.22), transparent 38%, rgba(90,10,150,.35) 70%, rgba(20,4,40,.85)); }
  #battle-ui .b-act .act-sp s { inset: -1px; z-index: 2; border-radius: 14px;
    background: conic-gradient(from 0deg, #fff2c0, #ff9ae8 calc(var(--p) * .5), #b46aff var(--p), rgba(0,0,0,.55) var(--p));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    padding: 5px; filter: drop-shadow(0 0 4px rgba(220,140,255,.9)); }
  #battle-ui .b-act .act-sp .ab-cd { place-items: end center; padding-bottom: 8px; background: none !important; }
  #battle-ui .b-act .act-sp .ab-cd b { font-size: 19px !important; padding: 1px 9px; border-radius: 10px; background: linear-gradient(#5a1a8a, #24083a); box-shadow: 0 0 0 1.5px #f0d0ff, 0 0 0 3px #000, 0 0 10px rgba(200,120,255,.7); }
}