/* ===== Battles hub ultra-premium design ===== */
.bx-screen .ax-kicker { display: flex; align-items: center; gap: 10px; font: 500 14px/1 var(--tx-font); letter-spacing: .08em; color: rgba(200,215,240,.8); }
.bx-brand { display: inline-flex; align-items: center; gap: 4px; font: 700 15px/1 var(--tx-font-display); letter-spacing: .2em; color: #fff; }
.bx-brand img { width: 34px; height: auto; }
.bx-slash { color: rgba(200,215,240,.5); }
.bx-screen .ax-large h1 { font-size: 44px; letter-spacing: -.03em; }
.bx-seghost .ax-seg { background: rgba(14,22,40,.9); border: 1px solid rgba(70,130,240,.35); border-radius: 20px; padding: 4px; margin-bottom: 18px; }
.bx-seghost .ax-seg button { min-height: 46px; font-size: 17px !important; color: rgba(200,215,240,.8); }
.bx-seghost .ax-seg button.ax-on { color: #fff; }
.bx-seghost .ax-seg-ind { top: 4px; bottom: 4px; left: 4px; border-radius: 16px; background: linear-gradient(180deg, #2f8cff, #1556d6); box-shadow: 0 0 18px rgba(47,140,255,.55), inset 0 1px 0 rgba(255,255,255,.25); }
.bx-screen .ax-bt-hero { background: linear-gradient(180deg, rgba(8,18,40,.55), rgba(6,14,32,.92) 62%), url(/brand/home-wave.webp) right -10px top -30px / 62% auto no-repeat, linear-gradient(160deg, #0b1a38, #071022);
  border: 1.5px solid rgba(70,140,255,.55); box-shadow: 0 0 28px rgba(40,120,255,.25), inset 0 1px 0 rgba(255,255,255,.08); border-radius: 26px; }
.bx-screen .ax-bt-hero-k { color: #3fc3ff; letter-spacing: .1em; white-space: nowrap; font-size: 11.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(70,140,255,.45); background: rgba(10,22,48,.6); }
.bx-sched { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font: 700 12px/1 var(--tx-font); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(10,22,48,.75); border: 1px solid rgba(110,150,220,.3); }
.bx-sched i { width: 8px; height: 8px; border-radius: 50%; background: #3fc3ff; box-shadow: 0 0 8px #3fc3ff; }
.bx-screen .ax-bt-hero .ax-avatar { background: radial-gradient(circle at 35% 30%, #4aa8ff, #1546c9) !important; box-shadow: 0 0 0 3px rgba(80,170,255,.55), 0 0 26px rgba(40,130,255,.6); }
.bx-screen .ax-bt-hero-cdv { background: none !important; -webkit-text-fill-color: #3fd0ff !important; color: #3fd0ff; text-shadow: 0 0 16px rgba(63,208,255,.5); }
.bx-view { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; min-height: 54px; border-radius: 16px; color: #fff; font: 700 18px/1 var(--tx-font);
  background: linear-gradient(180deg, #2f8cff, #1450d0); box-shadow: 0 0 22px rgba(47,140,255,.5), inset 0 1px 0 rgba(255,255,255,.3); }
.bx-view svg { width: 20px; height: 20px; stroke-width: 2.6; }
.bx-screen .ax-bt-also { margin-top: 0; }
.bx-screen .ax-list { background: linear-gradient(180deg, #0d1628, #0a1220); border-color: rgba(110,150,220,.16); }
.bx-screen .ax-row-ic { background: rgba(24,36,62,.95) !important; border: 1px solid rgba(110,150,220,.18); }
.bx-open { display: flex; flex-direction: column; gap: 12px; }
.bx-ocard { position: relative; display: flex; align-items: center; gap: 12px; min-height: 92px; padding: 12px 12px 12px 0; border-radius: 20px; overflow: hidden; color: #fff;
  background: linear-gradient(90deg, rgba(8,20,46,.2), rgba(8,18,40,.95) 45%), linear-gradient(160deg, #0d2350, #081530);
  border: 1px solid rgba(70,130,240,.35); box-shadow: 0 0 20px rgba(40,120,255,.15); transition: transform .16s var(--tx-ease); }
.bx-ocard:active { transform: scale(.98); }
.bx-oart { width: 96px; height: 92px; object-fit: cover; flex: none; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
.bx-omain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.bx-obadge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font: 700 11px/1 var(--tx-font); letter-spacing: .14em; text-transform: uppercase; color: #fff; border: 1px solid rgba(110,150,220,.35); background: rgba(10,22,48,.6); }
.bx-obadge svg { width: 13px; height: 13px; }
.bx-omain b { font: 800 17px/1.2 var(--tx-font-display); }
.bx-omain small { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1.2 var(--tx-font); color: #ffcf4d; }
.bx-omain small svg { width: 15px; height: 15px; flex: none; }
.bx-join { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 11px 16px; border-radius: 14px; font: 700 16px/1 var(--tx-font); color: #fff;
  background: linear-gradient(180deg, #2f8cff, #1450d0); box-shadow: 0 0 16px rgba(47,140,255,.5), inset 0 1px 0 rgba(255,255,255,.3); }
.bx-join svg { width: 16px; height: 16px; stroke-width: 2.6; }
.bx-join.bx-in { background: rgba(48,209,88,.15); color: #30d158; box-shadow: none; border: 1px solid rgba(48,209,88,.35); }

.bx-join.bx-mini { position: absolute; right: 12px; bottom: 12px; padding: 8px 12px; font-size: 13px; border-radius: 10px; }
.ax-bt-mode { position: relative; }
.bx-join:disabled { opacity: .6; }

.bx-flyercta { display: flex; align-items: center; gap: 14px; margin: 14px 0 4px; padding: 14px; background: linear-gradient(90deg, #1a1030, #0b1a38); border: 1px solid rgba(255,45,155,.45); box-shadow: 0 0 22px rgba(176,40,255,.25); }
.bx-flyercta-ic { width: 48px; height: 48px; border-radius: 14px; flex: none; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #ff2d9b, #7a22e0); box-shadow: 0 0 16px rgba(255,45,155,.5); }
.bx-flyercta-ic svg { width: 26px; height: 26px; }
.bx-flyercta-t { flex: 1; min-width: 0; }
.bx-flyercta-t b { display: block; font: 800 17px/1.2 var(--tx-font-display); color: #fff; }
.bx-flyercta-t small { display: block; margin-top: 3px; font-size: 13px; color: rgba(200,215,240,.75); }