/* ---------- Case battles ---------- */
body[data-view="battles"] { --accent: #6b8cff; }
.gc-battles { --ac: #6b8cff; }
.bt { max-width: 1400px; margin: 0 auto; padding: 20px 24px 60px; display: flex; flex-direction: column; gap: 14px; }
#btLobby, #btCreate, #btArena { display: flex; flex-direction: column; gap: 14px; }
/* readable by default: everything on the battles page is at least semi-bold */
#viewBattles, #caseModal { font-weight: 600; }
#viewBattles .muted, #viewBattles small { color: #a9b1c7; }
#btLobby[hidden], #btCreate[hidden], #btArena[hidden] { display: none; }
img.px { image-rendering: pixelated; }

/* switches */
input.switch { appearance: none; width: 38px; height: 22px; border-radius: 99px; background: #2a3042; position: relative; cursor: pointer; flex: none; transition: background .15s; margin: 0; }
input.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #c9cfdd; transition: transform .15s; }
input.switch:checked { background: #6b8cff; }
input.switch:checked::after { transform: translateX(16px); background: #fff; }
input.switch:disabled { opacity: .4; cursor: not-allowed; }

/* lobby */
.bt-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(107, 140, 255, .22), transparent 55%), radial-gradient(100% 120% at 100% 100%, rgba(255, 157, 28, .16), transparent 55%), var(--card); }
.bt-hero h2 { font-size: 24px; margin: 0 0 4px; }
.bt-hero p { margin: 0; max-width: 620px; }
.bt-new { padding: 12px 20px; font-size: 16.5px; white-space: nowrap; }
.bt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bt-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) minmax(170px, auto) 230px minmax(200px, auto); align-items: center; gap: 14px; padding: 8px 12px;
  background: linear-gradient(180deg, #161a2b, #121524); border: 1px solid rgba(255, 255, 255, .06); border-radius: 12px; cursor: pointer; transition: border-color .15s; }
.bt-row:hover { border-color: rgba(143, 156, 240, .35); }
.bt-row.done { opacity: .62; }
/* status block: number of cases + state */
.bt-stat { position: relative; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 8px; background: #0b0d18; }
.bt-stat b { font-size: 18px; font-weight: 900; line-height: 1; }
.bt-stat span { font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.bt-stat i { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bt-stat.s-wait span, .bt-stat.s-wait i { color: #ffc940; }
.bt-stat.s-start span, .bt-stat.s-start i { color: #4f9dff; }
.bt-stat.s-live span, .bt-stat.s-live i { color: #ff5d6c; }
.bt-stat.s-live i, .bt-stat.s-start i { animation: livePulse 1.4s infinite; }
.bt-stat.s-done span { color: var(--muted); }
.bt-stat.s-done i { display: none; }
.bt-row-cost .k { font-weight: 800; }
.bt-row-cost b { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; background: #0b0d18; font-size: 14.5px; }
.bt-row-seats { flex-direction: column; justify-content: center; gap: 4px; }
.bt-seats { display: flex; align-items: center; gap: 6px; }
.bt-seats .bt-seat { border-radius: 50%; box-shadow: 0 0 0 2px #4f8dff; background: #1b2035; }
.bt-seats .bt-seat.empty { box-shadow: none; border-color: #4a5470; }
.bt-modeline { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; }
.bt-mode { text-transform: uppercase; letter-spacing: .04em; color: #9bb0ff; }
.bt-mode.m-jackpot { color: #ff5fb4; }
.bt-mode.m-shared { color: #36e39a; }
.bt-fast { color: #ff5fb4; }
.bt-fmt { color: #c9cfdd; }
.bt-row-modes { display: flex; flex-wrap: wrap; gap: 4px; }
.bt-chip { font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; background: #232a3c; color: #c9d2ea; white-space: nowrap; }
.bt-chip.m-shared { background: #12352a; color: var(--green); }
.bt-chip.m-jackpot { background: #3a2a0c; color: var(--gold); }
.bt-chip.m-crazy { background: #3a1830; color: #ff8fd8; }
.bt-chip.m-terminal { background: #3a1820; color: var(--red); }
.bt-chip.m-toppull { background: #3a2e12; color: var(--gold); }
/* Top Pull: the item that counts for each player */
.ba-drop.top-pull { box-shadow: inset 0 0 0 1px rgba(255, 201, 64, .7), 0 0 12px rgba(255, 201, 64, .18); }
.bt-chip.m-instant { background: #1d2a4a; color: #8fb0ff; }
.bt-row-cases { display: flex; align-items: center; gap: 10px; min-width: 0; height: 62px; padding: 0 16px; overflow: hidden; border-radius: 8px; background: #0b0d18; }
.bt-mini { width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--ct, #6b8cff) 22%, transparent), transparent 70%); }
.bt-mini img { width: 30px; height: 30px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ct, #6b8cff) 55%, transparent)); }
.bt-mini.past { opacity: .35; }
.bt-mini.cur { background: color-mix(in srgb, var(--ct, #6b8cff) 30%, transparent); box-shadow: 0 0 0 2px var(--ct, #6b8cff), 0 0 14px color-mix(in srgb, var(--ct, #6b8cff) 60%, transparent); }
.bt-mini.cur img { animation: btCurBob 1s ease-in-out infinite; }
@keyframes btCurBob { 50% { transform: translateY(-3px) scale(1.08); } }
.bt-filters { margin-left: auto; display: flex; gap: 6px; }
.bt-flt { display: flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--line); color: var(--muted); font: inherit; font-weight: 700; padding: 8px 12px; border-radius: 10px; }
.bt-flt b { font-size: 12px; background: rgba(255, 255, 255, .08); color: var(--text); padding: 1px 7px; border-radius: 99px; }
.bt-flt .live-dot { width: 7px; height: 7px; }
.bt-more {font-size: 13.5px; font-weight: 800; color: var(--muted); padding: 0 4px; }
.bt-rounds { margin-left: 6px; font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.bt-row-seats { display: flex; align-items: center; gap: 8px; }
.bt-team { display: flex; gap: 3px; }
.bt-vs { display: inline-grid; place-items: center; color: #8a93a8; }
.bt-seat { width: var(--s); height: var(--s); flex: none; box-sizing: border-box; aspect-ratio: 1; padding: 0 !important; border-radius: 7px; image-rendering: pixelated; background: var(--bg2); }
.bt-seat.empty { display: inline-block; border: 2px dashed #39425a; background: none; }
.bt-row-cost { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.bt-row-cost .k { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.bt-row-cost b { font-size: 16.5px; white-space: nowrap; }
/* "Buy-in" sits to the left of the amount */
.bt-row-cost { flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; }
.bt-row-act { display: flex; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.bt-row-act button { min-width: 90px; height: 40px; border-radius: 6px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.bt-row-act [data-open], .bt-row-act [data-join] { flex: 1; max-width: 220px; }
.bt-row-act .ghost[data-open] { background: #2a2f4a; border-color: transparent; color: #e9ecf6; }
.bt-row-act .ghost[data-open]:hover { background: #343a5c; }
.live { display: inline-flex; align-items: center; gap: 7px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(255, 93, 108, .6); animation: livePulse 1.4s infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 7px rgba(255, 93, 108, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 93, 108, 0); } }
.pos { color: var(--green); }
.neg { color: var(--red); }
.ghost.danger { color: var(--red); }

/* create */
.bc-top { display: flex; align-items: center; gap: 14px; }
.bc-top h2 { margin: 0; font-size: 22px; }
.bc { display: grid; grid-template-columns: 240px minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
.bc > .card { padding: 14px; }
.bc-label { font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 4px 0 8px; }
.bc-label b { color: var(--text); margin-left: 4px; }
.bc-left .bc-label:not(:first-child) { margin-top: 16px; }
.bc-fmts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bc-fmt { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 4px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); }
.bc-fmt b { font-size: 17.5px; }
.bc-fmt span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.bc-fmt.active, .bc-mode.active { border-color: #6b8cff; background: #1c2440; box-shadow: inset 0 0 0 1px #6b8cff; }
.bc-modes, .bc-mods { display: flex; flex-direction: column; gap: 6px; }
.bc-mode { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); }
.bc-mode i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #4a5470; flex: none; }
.bc-mode.active i { border-color: #6b8cff; background: radial-gradient(circle, #6b8cff 40%, transparent 46%); }
.bc-mode b, .bc-mod b, .bc-instant b { display: block; font-size: 14.5px; text-transform: uppercase; letter-spacing: .05em; }
.bc-mode small, .bc-mod small, .bc-instant small { display: block; font-size: 13.5px; color: var(--muted); }
/* sponsor slider + public/private on the create page */
.bc-sponsor { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); margin-top: 8px; }
.bc-sponsor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bc-sponsor-head b:not(.mono) { display: block; font-size: 14.5px; text-transform: uppercase; letter-spacing: .05em; }
.bc-sponsor-head small { display: block; font-size: 13.5px; color: var(--muted); }
.bc-sponsor-head .mono { font-size: 17px; color: var(--gold, #ffc940); }
#bcSponsor { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; cursor: pointer;
  background: linear-gradient(90deg, var(--gold, #ffc940) var(--p, 0%), #2a2f45 var(--p, 0%)); }
#bcSponsor::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--gold, #ffc940); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
#bcSponsor::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--gold, #ffc940); }
.bc-vis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.bc-vis button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 11px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); color: var(--muted); font: inherit; text-align: left; cursor: pointer; }
.bc-vis button b { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--text); }
.bc-vis button small { font-size: 12.5px; }
.bc-vis button.active { border-color: var(--gold, #ffc940); background: rgba(255, 201, 64, .08); }
.bc-sponsor[hidden], .bc-vis[hidden] { display: none; }
/* tags on sponsored / private battles */
.bt-spon, .bt-priv { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 2px 7px; border-radius: 99px; white-space: nowrap; margin-left: 6px; }
.bt-spon { background: rgba(47, 216, 160, .15); color: #2fd8a0; }
.bt-priv { background: rgba(180, 140, 255, .15); color: #c9b0ff; }
.bc-mod, .bc-instant { display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg2); border: 1px solid var(--line); margin: 0 !important; color: var(--text) !important; cursor: pointer; }
.bc-mod.off { opacity: .55; cursor: default; }
.bc-tools { display: flex; gap: 10px; margin-bottom: 12px; }
.bc-search { flex: 1; display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; margin: 0 !important; padding: 0 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); color: var(--muted) !important; }
.bc-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--text); font: inherit; padding: 10px 0; }
.bc-sort { margin: 0; grid-template-columns: auto auto; }
.bc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; max-height: calc(100vh - 230px); min-height: 420px; overflow-y: auto; padding: 2px; align-content: start; }
.bc-case { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 12px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); cursor: pointer; transition: transform .12s, border-color .12s; user-select: none; }
.bc-case:hover { transform: translateY(-2px); border-color: #4a5470; }
.bc-case.picked { border-color: #6b8cff; box-shadow: inset 0 0 0 1px #6b8cff; }
.bc-eye { position: absolute; top: 6px; right: 6px; color: var(--muted); padding: 4px; border-radius: 6px; line-height: 0; }
.bc-eye:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.bc-count { position: absolute; top: 8px; left: 8px; min-width: 22px; padding: 1px 6px; border-radius: 99px; background: #6b8cff; color: #fff; font-size: 13.5px; font-weight: 800; text-align: center; }
.bc-name { font-weight: 800; font-size: 15.5px; text-align: center; }
.bc-price { font-size: 14.5px; display: flex; align-items: center; gap: 4px; }
.bc-none { grid-column: 1 / -1; text-align: center; padding: 30px; }
/* case art: chest with its best item floating above */
.ca { position: relative; display: block; width: 84px; height: 72px; }
.ca .ca-box { position: absolute; left: 50%; bottom: 0; width: 60px; height: 60px; transform: translateX(-50%); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.ca .ca-top { position: absolute; right: 2px; top: 0; width: 38px; height: 38px; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .25)) drop-shadow(0 4px 4px rgba(0, 0, 0, .5)); animation: caBob 2.6s ease-in-out infinite; }
@keyframes caBob { 50% { transform: translateY(-4px); } }
.bc-right { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 12px; }
.bc-sel-head { display: flex; justify-content: space-between; align-items: center; }
.bc-sel { min-height: 240px; max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.bc-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px dashed #39425a; border-radius: 12px; padding: 20px; color: var(--muted); font-size: 14.5px; }
.bc-empty span { font-size: 30px; line-height: 1; margin-bottom: 6px; }
.bc-pick { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: var(--bg2); }
.bc-pick-art img { width: 36px; height: 36px; display: block; }
.bc-pick-name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14.5px; }
.bc-pick-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-pick-name span { color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.bc-qty { flex: none; display: flex; align-items: center; gap: 6px; }
.bc-right { min-width: 0; }
#bcCreate { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 8px; white-space: nowrap; }
#bcCreate .mono { display: inline-flex; align-items: center; gap: 4px; }
.bc-qty button { width: 24px; height: 24px; border-radius: 6px; background: #232a3c; font-weight: 800; }
.bc-qty button:hover { background: #2f3850; }
/* selected case row: name and -/+ on top, the full price underneath across the row */
.bc-pick { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "art name qty" "art price price"; column-gap: 10px; row-gap: 1px; }
.bc-pick-art { grid-area: art; align-self: center; }
.bc-pick-name { display: contents; }
.bc-pick-name b { grid-area: name; align-self: end; }
.bc-pick-name > span { grid-area: price; }
.bc-qty { grid-area: qty; }
.bc-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.bc-stats div { background: var(--bg2); border-radius: 10px; padding: 8px 10px; text-align: center; min-width: 0; overflow: hidden; }
.bc-stats > div > span { display: block; font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.bc-stats b { display: inline-flex; align-items: center; gap: 4px; font-size: 15.5px; }
/* buy-in and pot get a full-width row each, so even 10,000,000,000+ fits without shortening */
.bc-stats div.wide { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bc-stats div.wide b { white-space: nowrap; }
.bc-go { padding: 14px; font-size: 17.5px; text-transform: uppercase; letter-spacing: .05em; display: flex; justify-content: center; align-items: center; gap: 8px; }
.bc-go span { display: inline-flex; align-items: center; gap: 4px; }
.bc-go:disabled { opacity: .45; cursor: not-allowed; }

/* what's in a case */
.case-box { width: min(560px, 94vw); }
.cm-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cm-head h2 { margin: 0 0 2px; }
.cm-head .mono { display: flex; align-items: center; gap: 4px; }
.cm-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; max-height: 60vh; overflow-y: auto; }
.cm-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 22px 6px 10px; border-radius: 10px; background: var(--bg2); border-bottom: 3px solid var(--rc); text-align: center; font-size: 13.5px; }
.cm-item img { width: 46px; height: 46px; filter: drop-shadow(0 0 10px var(--rg)); }
.cm-item b { font-size: 13.5px; }
.cm-item .mono { display: flex; align-items: center; gap: 3px; }
.cm-odds { position: absolute; top: 5px; left: 7px; font-size: 12.5px; color: var(--muted); }
.fair-row { margin-top: 8px; }
.fair-row input { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 13.5px; }
/* rarity by value vs case price */
.r-grey { --rc: #8a93a8; --rg: rgba(138, 147, 168, .25); }
.r-blue { --rc: #4da3ff; --rg: rgba(77, 163, 255, .45); }
.r-purple { --rc: #b48cff; --rg: rgba(180, 140, 255, .5); }
.r-red { --rc: #ff5d6c; --rg: rgba(255, 93, 108, .55); }
.r-gold { --rc: #ffc940; --rg: rgba(255, 201, 64, .65); }
/* the Bonus symbol and its top-item reel */
.r-bonus { --rc: #ffe27a; --rg: rgba(255, 214, 90, .9); }
.ba-cell.r-bonus img { animation: bonusSpin 2.4s linear infinite; }
@keyframes bonusSpin { 50% { transform: scale(1.12) rotate(8deg); } }
.ba-reel.bonus-hit { box-shadow: inset 0 0 0 2px #ffc940, inset 0 0 50px rgba(255, 201, 64, .35); animation: bonusFlash .5s ease-in-out infinite alternate; }
@keyframes bonusFlash { to { box-shadow: inset 0 0 0 2px #fff2b0, inset 0 0 80px rgba(255, 201, 64, .55); } }
.ba-reel.bonus { background: radial-gradient(80% 45% at 50% 50%, #3a2a08, #120d05 75%); box-shadow: inset 0 0 0 2px #ffc940; }
.ba-reel.bonus::before { content: 'BONUS'; position: absolute; top: 8px; left: 50%; right: auto; height: auto; transform: translateX(-50%); z-index: 3; font: 900 12px 'Bricolage Grotesque', sans-serif; letter-spacing: .25em; color: #1a1206; background: #ffc940; padding: 3px 10px; border-radius: 99px; }
.ba-drop.via-bonus { box-shadow: inset 0 0 0 1px rgba(255, 201, 64, .45); }

/* arena */
#btArena { gap: 10px; }
.ba-panel, .ba-top, .ba-arena, .ba-sum { background: linear-gradient(180deg, #161a2b, #121524); border: 1px solid rgba(255, 255, 255, .06); border-radius: 14px; }

/* slim bar above: back, id, actions */
.ba-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.ba-back { justify-self: start; background: none; border: 0; padding: 6px 0; color: #c9cfdd; font-size: 13.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.ba-back:hover { color: #fff; }
.ba-title { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.ba-title > b { font-size: 16.5px; font-weight: 800; }
.ba-title > span { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); }
.ba-title > span b { display: inline-flex; align-items: center; gap: 4px; color: #e9ecf6; }
.ba-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; justify-self: end; }
.ba-actions button { white-space: nowrap; }
#baAgain { display: inline-flex; align-items: center; gap: 5px; }

/* top card: tags | case strip | pot */
.ba-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px; padding: 18px 22px; }
.ba-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ba-tag { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 76px; padding: 9px 14px; border-radius: 6px;
  background: #0d1020; line-height: 1.2; }
.ba-tag b { font-size: 14.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: #e9ecf6; white-space: nowrap; }
.ba-tag span { font-size: 12.5px; font-weight: 800; color: #c9cfdd; letter-spacing: .06em; white-space: nowrap; }
.ba-tag:not([class*="m-"]) span { text-transform: uppercase; }
.ba-tag.m-jackpot b { color: #ff5fb4; }
.ba-tag.m-shared b { color: #36e39a; }
.ba-tag.m-classic b { color: #9bb0ff; }
.ba-mid { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; max-width: 720px; }
.ba-cases { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; padding: 4px; scrollbar-width: thin; }
/* 3 cases in view at a time, sliding along as the battle reaches the next one */
.ba-cases { --tile: 62px; --gap: 8px; width: calc(var(--tile) * 3 + var(--gap) * 2 + 8px); overflow: hidden; padding: 4px; }
.ba-cases-track { display: flex; gap: var(--gap); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.ba-cases-track.few { justify-content: center; }
.ba-case { position: relative; flex: none; width: 62px; height: 62px; display: grid; place-items: center; padding: 0; border-radius: 6px; cursor: pointer;
  background: radial-gradient(60% 60% at 50% 55%, color-mix(in srgb, var(--ct, #6b8cff) 30%, transparent), #0c0f1c 85%); border: 2px solid transparent;
  transition: opacity .25s, border-color .25s, background .25s; }
.ba-case img { width: 34px; height: 34px; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ct, #6b8cff) 60%, transparent)); }
.ba-case i { position: absolute; top: 4px; left: 6px; font-style: normal; font-size: 12.5px; font-weight: 800; color: #c9cfdd; }
.ba-case.now { border-color: #8f9cf0; background: radial-gradient(60% 60% at 50% 55%, color-mix(in srgb, var(--ct, #6b8cff) 35%, transparent), #1a1f3a 90%); }
.ba-case.now i { color: #fff; }
.ba-case.past { opacity: .35; filter: saturate(.4); }
.ba-now { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 800; }
.ba-now b { display: inline-flex; align-items: center; gap: 4px; color: #e9ecf6; }
.ba-potbox { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.ba-potbox > span { font-size: 12.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.ba-potbox b { display: inline-flex; align-items: center; gap: 6px; font-size: 24px; font-weight: 900; color: #ffb02e; text-shadow: 0 0 18px rgba(255, 176, 46, .35); }
.ba-potbox b .coin { width: 20px; height: 20px; }
.ba-potbox small { font-size: 13.5px; }

/* the arena: teams side by side, split by a line */
.ba-stage { position: relative; }
.ba-count { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; font-size: 120px; font-weight: 900; color: #fff; text-shadow: 0 0 40px #6b8cff, 0 6px 0 rgba(0, 0, 0, .4); pointer-events: none; animation: countPop .9s ease-out; }
.ba-arena { display: flex; align-items: stretch; overflow: hidden; }
.ba-team { flex: 1; min-width: 0; display: flex; flex-direction: column; transition: background .4s; }
.ba-team.won { background: linear-gradient(180deg, color-mix(in srgb, var(--green) 10%, transparent), transparent 60%); }
.ba-team-head { display: flex; align-items: center; gap: 8px; padding: 11px 14px; font-size: 13.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em;
  border-bottom: 1px solid rgba(255, 255, 255, .06); background: rgba(0, 0, 0, .12); }
.ba-team-head i { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 8px var(--tc); }
.ba-team-head b { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: #ffb02e; letter-spacing: 0; }
.ba-team-cols { flex: 1; display: flex; }
.ba-team + .ba-team { border-left: 1px solid rgba(255, 255, 255, .08); }
.ba-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px; container-type: inline-size; }
.ba-col + .ba-col { border-left: 1px solid rgba(255, 255, 255, .05); }
.ba-player { display: flex; align-items: center; gap: 8px; min-height: 34px; min-width: 0; }
.ba-player img { width: 30px; height: 30px; border-radius: 7px; image-rendering: pixelated; }
.ba-name { font-weight: 800; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ba-pill { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 8px; background: #0b0d18;
  border: 1px solid rgba(255, 255, 255, .05); color: #ffb02e; font-size: 14.5px; font-weight: 800; }
/* narrow seats (3v3, 6-way...): the running total gets its own line so it never runs into the next seat */
@container (max-width: 250px) {
  .ba-player { flex-wrap: wrap; row-gap: 6px; }
  .ba-pill { margin-left: 0; width: 100%; justify-content: center; box-sizing: border-box; font-size: clamp(11px, 7cqi, 14.5px); }
}

/* reel */
.ba-reel { position: relative; height: 300px; overflow: hidden; border-radius: 10px; background: radial-gradient(80% 45% at 50% 50%, #1b2136, #0c0f1b 75%); }
.ba-reel::before, .ba-reel::after { content: ''; position: absolute; left: 0; right: 0; height: 90px; z-index: 2; pointer-events: none; }
.ba-reel::before { top: 0; background: linear-gradient(#0c0f1b, transparent); }
.ba-reel::after { bottom: 0; background: linear-gradient(transparent, #0c0f1b); }
.ba-line { position: absolute; left: 0; right: 0; top: 50%; height: 104px; transform: translateY(-50%); z-index: 3; pointer-events: none;
  border-top: 1px solid rgba(79, 141, 255, .7); border-bottom: 1px solid rgba(79, 141, 255, .7);
  background: linear-gradient(90deg, transparent, rgba(79, 141, 255, .06) 30%, rgba(79, 141, 255, .06) 70%, transparent); }
.ba-line::before, .ba-line::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); border: 7px solid transparent; }
.ba-line::before { left: 0; border-left: 9px solid #4f8dff; border-right: 0; filter: drop-shadow(0 0 4px #4f8dff); }
.ba-line::after { right: 0; border-right: 9px solid #4f8dff; border-left: 0; filter: drop-shadow(0 0 4px #4f8dff); }
.ba-reel.over .ba-line { display: none; }
/* the result panel once the battle is over */
.ba-reel.over { background: #0b0d18; transition: background .4s, box-shadow .4s; }
.ba-reel.over::before, .ba-reel.over::after { display: none; }
.ba-col.won .ba-reel.over { background: #171b33; box-shadow: inset 0 0 0 2px #6f7fe0; }
.ba-verdict { font-size: 13.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .32em; padding-left: .32em; }
.ba-verdict.l { color: #ff4d64; }
.ba-verdict.w { color: #b9c4ff; }
.ba-amount { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: clamp(12px, 8.5cqi, 24px); font-weight: 900; color: #d6dcf5; }
.ba-amount .coin { width: 20px; height: 20px; }
.ba-col.won .ba-amount { color: #cdd5ff; animation: dropPop .6s ease-out; }
.ba-strip { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.ba-cell { height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: opacity .3s; }
.ba-cell img { width: 50px; height: 50px; filter: drop-shadow(0 0 14px var(--rg)); }
.ba-cell-name { font-size: 13px; font-weight: 800; color: var(--rc); opacity: .75; white-space: nowrap; max-width: 95%; overflow: hidden; text-overflow: ellipsis; }
.ba-cell-val { display: flex; align-items: center; gap: 3px; font-size: 13.5px; font-weight: 800; color: #ffb02e; white-space: nowrap; opacity: 0; height: 0; transition: opacity .25s; }
.ba-strip.landed .ba-cell.stop .ba-cell-val { opacity: 1; height: auto; }
.ba-strip.landed .ba-cell.stop .ba-cell-name { opacity: 1; }
.ba-strip.landed .ba-cell.stop img { animation: dropPop .5s ease-out; width: 58px; height: 58px; }
.ba-strip.landed .ba-cell:not(.stop) { opacity: .2; }
@keyframes dropPop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.ba-idle, .ba-wait { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 3; padding: 10px; text-align: center; }
.ba-idle img { width: 72px; height: 72px; opacity: .85; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); animation: caBob 2.6s ease-in-out infinite; }
.ba-wait button { width: 100%; max-width: 200px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }

/* bottom row: one card per player */
.ba-sums { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 0; overflow: hidden; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .06); background: linear-gradient(180deg, #161a2b, #121524); }
.ba-sums.seats-2 { --n: 2; } .ba-sums.seats-3 { --n: 3; } .ba-sums.seats-4 { --n: 4; } .ba-sums.seats-6 { --n: 6; }
.ba-sum { display: flex; flex-direction: column; border: 0; border-radius: 0; background: none; min-width: 0; }
.ba-sum + .ba-sum { border-left: 1px solid rgba(255, 255, 255, .06); }
.ba-sum-head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .06); transition: background .4s; }
.ba-sum.won .ba-sum-head { background: #1b1f3d; }
.ba-sum-who { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.ba-sum-who img { width: 36px; height: 36px; border-radius: 6px; image-rendering: pixelated; }
.ba-sum-total { display: inline-flex; align-items: center; gap: 4px; color: #ffb02e; font-size: 14.5px; }
.ba-result { text-align: center; min-height: 16px; }
.ba-result .ba-verdict { font-size: 12.5px; letter-spacing: .2em; padding-left: .2em; }
.ba-sum.won .ba-result .ba-verdict { color: #e9ecf6; }
.ba-drops { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; padding: 8px; }
.ba-drops:empty { display: none; }
.ba-drop { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px; border-radius: 6px; background: #0b0d18; border-left: 2px solid var(--rc); }
.ba-drop img { flex: none; width: 26px; height: 26px; filter: drop-shadow(0 0 6px var(--rg)); }
.ba-drop > span { display: flex; flex-direction: column; min-width: 0; }
.ba-drop b { font-size: 13.5px; color: var(--rc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-drop .mono { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 800; color: #ffb02e; }
.ba-drop .mono .coin { width: 12px; height: 12px; }
.ba-sum.won .ba-drop { border-left-color: #2fd8a0; background: linear-gradient(90deg, rgba(47, 216, 160, .2), rgba(47, 216, 160, .04) 60%, #0b0d18); }

@media (max-width: 1150px) {
  .bc { grid-template-columns: 220px minmax(0, 1fr); }
  .bc-right { grid-column: 1 / -1; position: static; }
  .bt-row { grid-template-columns: 74px minmax(0, 1fr) minmax(150px, auto) 200px 140px; gap: 10px; }
}
@media (max-width: 860px) {
  .bc { grid-template-columns: 1fr; }
  .bt-row { grid-template-columns: 70px minmax(0, 1fr); }
  .bt-row-act { grid-column: 1 / -1; }
  .ba-top { grid-template-columns: 1fr; justify-items: center; }
  .ba-potbox { align-items: center; }
  .ba-arena { flex-wrap: wrap; }
  .ba-team { flex-basis: 100%; }
  .ba-team + .ba-team { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
  .ba-reel { height: 220px; }
  .ba-sums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Jackpot mode: odds + ticket roller */
.bj { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.bj[hidden] { display: none; }
.bj-odds { display: flex; gap: 8px; flex-wrap: wrap; }
.bj-team { flex: 1; min-width: 150px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--bg2);
  border: 1px solid var(--line); border-left: 4px solid var(--tc); transition: box-shadow .3s, opacity .3s; }
.bj-team b { margin-left: auto; font-size: 17.5px; color: var(--tc); }
.bj-team .small { min-width: 0; }
.bj-faces { display: flex; gap: 2px; }
.bj-faces img { width: 22px; height: 22px; border-radius: 5px; image-rendering: pixelated; }
.bj-name { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bj.landed .bj-team:not(.win) { opacity: .45; }
.bj-team.win { box-shadow: 0 0 0 1px var(--tc), 0 0 22px -6px var(--tc); }
.bj-track { position: relative; height: 128px; overflow: hidden; border-radius: 12px; background: #0e111a; }
.bj-strip { position: absolute; top: 12px; bottom: 12px; left: 0; display: flex; gap: 8px; will-change: transform; }
/* one tile per player (or team); width 142 + gap 8 = JP_TW in battles.js */
.bj-tile { flex: none; width: 142px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; overflow: hidden;
  border-radius: 10px; border: 2px solid color-mix(in srgb, var(--tc) 75%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 32%, #1a1f2e), color-mix(in srgb, var(--tc) 16%, #141826)); transition: filter .3s, transform .3s; }
.bj-tile-faces { display: flex; gap: 3px; }
.bj-tile img { width: 40px; height: 40px; border-radius: 7px; image-rendering: pixelated; }
.bj-tile-faces img + img { width: 28px; height: 28px; }
.bj-tile b { max-width: 90%; font-size: 14px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bj-tile b { text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.bj-tile small { font-size: 12px; font-weight: 800; color: #fff; opacity: .85; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.bj.landed .bj-tile:not(.hit) { filter: brightness(.4) saturate(.6); }
.bj-tile.hit { filter: brightness(1.2); transform: scale(1.04); box-shadow: 0 0 22px -4px var(--tc); }
.bj-odds[hidden] { display: none; }
/* your own tiles on the roller */
.bj-tile.bj-mine { --tc: var(--gold, #ffc940); border-color: var(--gold, #ffc940); --tc: #ffd97a; border-color: #ffd97a; background: linear-gradient(180deg, color-mix(in srgb, #ffd97a 32%, #1a1f2e), color-mix(in srgb, #ffd97a 16%, #141826)); }
.bj-tile.bj-mine b { color: #fff; }
.bj-pointer { position: absolute; top: -2px; bottom: -2px; left: 50%; width: 3px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 12px #fff; z-index: 2; }
.bj-pointer::before, .bj-pointer::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); border: 8px solid transparent; }
.bj-pointer::before { top: 0; border-top-color: #fff; }
.bj-pointer::after { bottom: 0; border-bottom-color: #fff; }
.bj-track::before, .bj-track::after { content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 1; pointer-events: none; }
.bj-track::before { left: 0; background: linear-gradient(90deg, #0e111a, transparent); }
.bj-track::after { right: 0; background: linear-gradient(-90deg, #0e111a, transparent); }
.bj-note { text-align: center; min-height: 18px; }
.ba-share { font-size: 30px; font-weight: 900; font-family: 'JetBrains Mono', monospace; }