/* Chest Battle: the lobby and the stage */
#bt-new { gap: 8px; min-height: 44px; flex-shrink: 0; }
#bt-new svg { width: 18px; height: 18px; }
#bt-reset-filters { order: 2; margin-left: auto; min-height: 44px; font-size: 11px; }
/* The look comes from .ha-select, which is the control the rest of the site
   uses: same height, same radius, same chevron. Only the fit is set here. */
.bt-refine select{max-width:100%}
.bt-affordable{display:flex;align-items:center;justify-content:space-between;gap:9px;min-height:42px;padding:0 6px;border:0;background:transparent;color:var(--txt-dim);font:500 11px var(--font);cursor:pointer}
.bt-affordable>span{display:block;position:relative;width:32px;height:19px;border-radius:12px;background:#29313b;flex-shrink:0;transition:background .15s}
.bt-affordable>span::after{content:"";position:absolute;left:3px;top:3px;width:13px;height:13px;border-radius:50%;background:#a3afbb;transition:transform .15s}
.bt-affordable[aria-checked="true"]>span{background:var(--lime,#d7ff35)}
.bt-affordable[aria-checked="true"]>span::after{background:#101419;transform:translateX(13px)}
.bt-builder-back{margin:0 0 16px;min-height:44px}
#bt-builder,#bt-board{scroll-margin-top:90px}
.bt-more{display:block;margin:22px auto;min-height:44px}
.bt-toolbar :is(button,select):focus-visible,.bt-builder-back:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(max-width:819px){
  .bt-affordable{padding:0 8px}
  #bt-reset-filters { margin-left: 0; align-self: flex-start; }
  #bt-builder,#bt-board{scroll-margin-top:150px}
}
@media(prefers-reduced-motion:reduce){.bt-affordable>span,.bt-affordable>span::after{transition:none}}
.bt-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
@media (max-width:900px){.bt-cols{grid-template-columns:1fr}}
.bt-sub{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:4px 0 10px}
.bt-sub h3{margin:0;font-family:var(--display);font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt)}
.bt-sub-note{font-family:var(--num);font-size:11px;color:var(--txt-mute)}
.bt-tables{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-bottom:18px}
.bt-table{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;padding:12px;animation:none}
.bt-table:hover{transform:none}
.bt-table.is-mine{box-shadow:inset 0 0 0 1px rgba(232,192,122,.5)}
.bt-table.is-live{box-shadow:inset 0 0 0 1px var(--tone),0 0 24px -8px var(--tone)}
.bt-table-art{position:relative;display:flex;align-items:center;justify-content:center}
/* Every card says what it is staked in, because the board now shows all
   three currencies at once instead of one behind each tab. It sits in the
   title row, where it cannot crowd the 64px of chest art beside it. */
.bt-table-cur{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);font-family:var(--num);font-size:10px;letter-spacing:.08em;color:var(--txt-dim)}
.bt-table-cur img{display:block;width:13px;height:13px;border-radius:50%}
.bt-table-art{height:64px;border-radius:10px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--tone) 35%,#0a0f16),#0a0f16 70%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 45%,transparent)}
.bt-table-art i{display:block;width:34px;height:26px;border-radius:5px 5px 3px 3px;background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 70%,#3d2a10),color-mix(in srgb,var(--tone) 35%,#1a1208));box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 0 0 1px color-mix(in srgb,var(--tone) 80%,#000),0 6px 14px -6px var(--tone)}
.bt-table-art i::after{content:"";position:absolute;left:50%;top:38%;width:6px;height:7px;margin-left:-3px;border-radius:2px;background:var(--gold);box-shadow:0 0 6px var(--gold)}
.bt-table-body{min-width:0;display:flex;flex-direction:column;gap:6px}
.bt-table-top{display:flex;align-items:center;gap:8px}
.bt-table-top b{font-family:var(--display);letter-spacing:.04em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-table-top small{margin-left:auto;font-family:var(--num);color:var(--txt-mute)}
.bt-crazy{font-family:var(--num);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border-radius:999px;background:rgba(255,98,192,.16);color:#ff8fd0;border:1px solid rgba(255,98,192,.4)}
.bt-table-figs{display:flex;gap:12px;flex-wrap:wrap;font-family:var(--num);font-size:11px;color:var(--txt-mute)}
.bt-table-figs b{color:var(--txt);font-size:12px}
.bt-seats{display:flex;align-items:center;gap:5px}
.bt-seats small{margin-left:auto;font-family:var(--num);font-size:11px;color:var(--txt-mute)}
.bt-seat{width:30px;height:30px;border-radius:50%;border:1px dashed rgba(255,255,255,.22);display:inline-flex;align-items:center;justify-content:center;overflow:hidden;background:rgba(255,255,255,.03)}
.bt-seat.is-taken{border:2px solid var(--seat);background:var(--panel-2,#0f141a)}
.bt-seat.is-me{box-shadow:0 0 0 2px var(--gold)}
.bt-seat img{width:100%;height:100%;object-fit:cover}
.bt-seat i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.12)}
.bt-seat.is-taken i{background:var(--seat)}
.bt-table-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-family:var(--num);font-size:11px;color:var(--txt-mute);margin-top:2px}
.bt-acts{display:flex;align-items:center;gap:6px}
.bt-tag{font-family:var(--num);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);padding:3px 7px;border:1px solid rgba(232,192,122,.4);border-radius:999px}

/* The waiting room: the table you are sitting at, filling up. It stands in
   for the reel until every seat is taken, so the seat you paid for is on
   screen instead of being one card in a list of other people's tables. */
.bt-hold { display: grid; grid-template-columns: minmax(0,1fr) 304px; text-align: left; }
.bt-hold-room { min-width: 0; padding: 28px; display: flex; flex-direction: column; }
.bt-hold-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.bt-hold-head .bt-eyebrow { color: var(--gold); font-size: 9px; }
.bt-hold-head h2 { margin: 10px 0 0; font: 700 clamp(18px,1.8vw,26px)/1.35 var(--display); color: var(--txt); }
.bt-hold-count { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #394233; border-radius: 5px; background: #1a221a; color: #c5dda8; font: 500 11px var(--num); white-space: nowrap; }
.bt-hold-count::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.bt-hold-seats { list-style: none; margin: auto 0; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.bt-hold-seats.is-many { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.bt-hold-seat { min-width: 0; padding: 16px 16px 24px; border: 1px dashed #35414d; border-radius: 8px; background: #0c1117; display: flex; flex-direction: column; align-items: center; }
.bt-hold-seat.is-taken { border-style: solid; border-color: #3c4a58; background: #17212a; }
.bt-hold-seat.is-me { border-color: #b99b62; background: linear-gradient(160deg,#26281f,#151e24 80%); }
.bt-hold-seat-top { width: 100%; display: flex; justify-content: space-between; gap: 8px; color: #a1adba; font: 9px var(--num); }
.bt-hold-ready { color: #c3d4ad; display: inline-flex; align-items: center; gap: 4px; }
.bt-hold-ready svg { width: 12px; height: 12px; }
.bt-hold-portrait { width: 112px; height: 112px; margin: 28px 0 20px; border: 1px solid #485047; border-radius: 50%; padding: 5px; background: #0b1218; }
.bt-hold-portrait img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.bt-hold-portrait.is-empty { border: 1px dashed #3b4651; display: grid; place-items: center; background: #111820; }
.bt-hold-portrait.is-empty svg { width: 32px; height: 32px; color: #758494; }
.bt-hold-seat > b { width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e0e6eb; font: 700 17px/1.5 var(--display); }
.bt-hold-seat > small { color: #a1adba; font: 10px var(--font); margin-top: 5px; }
.bt-hold-seat.is-me > small { color: var(--gold); }
.bt-hold-seats.is-many .bt-hold-portrait { width: 76px; height: 76px; margin-block: 16px; }
.bt-hold-seats.is-many .bt-hold-seat { padding: 12px; }
.bt-hold-seats.is-many .bt-hold-seat > b { font-size: 13px; }
.bt-hold-room-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; }
.bt-hold-room-foot > span { display: flex; align-items: center; gap: 8px; color: #aab5c0; font: 11px/1.6 var(--font); }
.bt-hold-room-foot svg { width: 16px; height: 16px; flex-shrink: 0; color: #8c9aab; }
.bt-hold-room-foot .ha-link { min-height: 44px; color: #acb7c3; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.bt-hold-room-foot .ha-link:hover { color: var(--txt); }
.bt-hold-summary { min-width: 0; padding: 24px; background: #131b23; border-left: 1px solid #2a3540; }
.bt-hold-summary-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.bt-hold-summary-head .bt-eyebrow { color: #bcc6cf; font-size: 9px; }
.bt-hold-summary-head > span:last-child { color: #acb9c6; font: 11px var(--num); }
.bt-hold-chest { text-align: center; }
.bt-hold-chest img { display: block; width: 100%; height: 132px; object-fit: contain; margin: 8px auto 0; }
.bt-hold-chest > button { display: block; width: 100%; padding: 0; background: none; border: 0; border-radius: 8px; cursor: pointer; }
.bt-hold-chest > button:hover { background: #ffffff05; }
.bt-hold-chest > h3 { color: var(--gold); font: 700 18px/1.4 var(--display); margin: 0 0 12px; overflow-wrap: anywhere; }
.bt-hold-line { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; }
.bt-hold-line > button { position: relative; flex: 0 0 46px; height: 52px; padding: 0; border: 1px solid #43505e; background: #0e151d; border-radius: 4px; cursor: pointer; }
.bt-hold-line img { display: block; width: 100%; height: 40px; object-fit: contain; }
.bt-hold-line span { display: block; font: 9px/10px var(--num); color: #b7c3cf; }
.bt-hold-line > button:hover { border-color: var(--gold); background: #262923; }
.bt-hold button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.bt-hold-hint { margin: 10px 0 0; text-align: center; font: 10px/1.5 var(--font); color: #a1adbb; }
.bt-hold-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; margin: 16px 0; }
.bt-hold-figs > div { min-width: 0; padding: 10px 0; border-bottom: 1px solid #ffffff0c; }
.bt-hold-figs dt { color: #bdc7d2; font: 11px/1.5 var(--font); }
.bt-hold-figs dd { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; font: 500 13px var(--num); color: var(--txt); }
.bt-hold-figs dd img { width: 16px; height: 16px; }
.bt-hold-figs dd em { font: 10px var(--num); color: #b0bdc9; }
.bt-hold-figs .bt-hold-pot { grid-column: 1/-1; grid-row: 1; }
.bt-hold-pot dt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; }
.bt-hold-pot dt small { color: #a1adbb; font-size: 9px; }
.bt-hold-pot dd { justify-content: flex-start; margin-top: 9px; font-size: 22px; color: var(--gold); }
.bt-hold-pot dd img { width: 20px; height: 20px; }
.bt-hold-pot dd em { color: var(--gold); font-size: 12px; }
.bt-hold-mode { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 20px; font: 10px/1.5 var(--font); color: #a8b5c3; }
.bt-hold-mode b { font-weight: 600; color: #d0d9c6; }
.bt-hold-mode.is-crazy b { color: #ef9bcc; }
.bt-hold-summary > .ha-btn { width: 100%; min-height: 44px; font-size: 10px; }
@media (max-width: 1100px) {
  .bt-hold { grid-template-columns: minmax(0,1fr) 268px; }
  .bt-hold-room, .bt-hold-summary { padding: 20px; }
  .bt-hold-seat { padding: 12px 8px 20px; }
  .bt-hold-seat > b { font-size: 14px; }
  .bt-hold-seats.is-many { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@container chest-waiting (max-width: 700px) {
  .bt-hold { grid-template-columns: 1fr; }
  .bt-hold-head { margin-bottom: 20px; }
  .bt-hold-room { padding: 20px 16px 8px; }
  .bt-hold-portrait { width: 92px; height: 92px; margin-block: 20px; }
  .bt-hold-seats.is-many { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .bt-hold-room-foot { padding-top: 16px; }
  .bt-hold-summary { border-left: 0; border-top: 1px solid #2a3540; }
  .bt-hold-chest img { height: 132px; }
  .bt-hold-line { gap: 8px; }
  .bt-hold-line > button { flex-basis: 52px; height: 56px; }
  .bt-hold-line img { height: 44px; }
}
@container chest-waiting (max-width: 440px) {
  .bt-hold-head { gap: 12px; }
  .bt-hold-head h2 { font-size: 18px; }
  .bt-hold-seats, .bt-hold-seats.is-many { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .bt-hold-seat-top { font-size: 8px; gap: 4px; }
  .bt-hold-ready svg { display: none; }
  .bt-hold-portrait { width: 76px; height: 76px; }
  .bt-hold-seat > b { font-size: 12px; }
  .bt-hold-seat > small { font-size: 9px; }
  .bt-hold-room-foot { gap: 4px; }
}

.bt-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;border-top:1px solid rgba(255,255,255,.06)}
.bt-pick .l{font-family:var(--num);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-mute);margin-right:6px}
.bt-pick-b{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:transparent;color:var(--txt);cursor:pointer;font-size:12px}
.bt-pick-b img,.bt-pick-b i{width:24px;height:24px;border-radius:50%;object-fit:cover;background:var(--seat);display:block}
.bt-pick-b.is-on{border-color:var(--seat);box-shadow:0 0 0 1px var(--seat)}
.bt-pick-b:disabled{opacity:.5;cursor:default}
.bt-pick-choice { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; }
.bt-seat[data-player-profile], .bt-history-rivals .ha-ava[data-player-profile], .bt-history-player .ha-result-portrait > .ha-ava[data-player-profile] { padding: 0; cursor: pointer; }
[data-player-profile]:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.bt-proof{width:100%;border-collapse:collapse;font-size:12px;margin:10px 0}
.bt-proof th,.bt-proof td{text-align:left;padding:5px 6px;border-bottom:1px solid rgba(255,255,255,.06)}
.bt-proof th{font-family:var(--num);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-mute)}
.bt-proof tr.is-win td{color:var(--gold)}
.bt-proof .mono,.bt-proof-dl .mono{font-family:var(--num)}
.bt-proof-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12px;margin:0 0 10px}
.bt-proof-dl dt{font-family:var(--num);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-mute);padding-top:2px}
.bt-proof-dl dd{margin:0;word-break:break-all;color:var(--txt-dim)}
/* The Vault — uses the arena's obsidian, gold, lime and typography tokens.
   Scoped to Chest Battle so Duels, Melee and the character surfaces retain
   their established layout. Assets are rendered from faceted Three meshes. */
#ha-lobby.is-chest > .ha-hero { display: none; }
#ha-lobby.is-chest .ha-battle { margin-top: 0; }
.bt-breadcrumb { display: flex; align-items: center; gap: 12px; color: var(--txt-mute); font-size: 11px; }
.bt-breadcrumb > span:not(.ha-count) { color: #4c5560; }
.bt-breadcrumb b { color: var(--txt-dim); font-weight: 500; }
.bt-eyebrow { font: 10px var(--num); letter-spacing: .16em; color: var(--gold); }
.bt-cols { display: flex; flex-direction: column; gap: 32px; }
.bt-main { width: 100%; }

#bt-configure svg { width: 17px; height: 17px; }

.bt-sub { align-items: center; margin-bottom: 17px; gap: 20px; }
.bt-sub .bt-eyebrow { font-size: 8px; color: var(--txt-mute); }
.bt-sub h3 { font-size: 20px; text-transform: none; letter-spacing: 0; margin-top: 7px; }
.bt-sub-note { margin-left: auto; font-size: 10px; }
.bt-filters { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.bt-filters button { min-height: 36px; padding: 0 12px; background: transparent; border: 1px solid transparent; border-radius: 6px; color: var(--txt-mute); font-size: 10px; cursor: pointer; }
.bt-filters button[aria-pressed="true"] { background: #1c2127; border-color: var(--edge); color: var(--txt); }
.bt-sub-note:empty { display: none; }
.bt-tables { grid-template-columns: repeat(auto-fit, minmax(min(100%, 390px), 1fr)); margin-bottom: 0; }
.ha-battle .bt-table { grid-template-columns: 94px minmax(0, 1fr); padding: 18px; gap: 18px; border: 1px solid var(--line); background: #11161c; box-shadow: inset 0 1px #ffffff04; }
.bt-table-art { height: 110px; background: #0b1016; box-shadow: none; }
.bt-table-art img { width: 110px; height: 110px; object-fit: contain; }
.bt-table-body { gap: 12px; }
.bt-table-top b { font-size: 14px; }
.bt-table-figs { gap: 10px; font-size: 9px; }
.bt-table-figs b { font-size: 10px; }
.bt-table-foot { flex-wrap: wrap; gap: 10px; font-size: 9px; }
.bt-acts { margin-left: auto; }
.bt-table.is-live { border-color: #e8c07a45; box-shadow: inset 3px 0 var(--gold); }
#bt-live-head { margin-top: 26px; }
/* Recent results share the duel card, portraits, winner enamel and payout plinth. */
.bt-history > .ha-fair-note { grid-column: 1 / -1; }
.bt-hcard { min-width: 0; }
.bt-hcard .bt-history-match { align-items: stretch; }
.bt-history-player .ha-result-portrait > .ha-ava img, .bt-history-rivals:not(.is-group) .ha-ava img { width: 52px; height: 52px; }
.bt-history-rivals { height: 52px; display: flex; align-items: center; justify-content: center; }
.bt-history-rivals.is-group { width: 96px; align-content: center; flex-wrap: wrap; gap: 4px; }
.bt-history-rivals.is-group .ha-ava img { width: 28px; height: 28px; }
.bt-hcard .bt-history-seal { width: 44px; height: 44px; }
.bt-history-seal img { width: 40px; height: 40px; object-fit: contain; }
.ha-battle button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.ha-battle.is-battling .bt-hero { display: none; }
.bt-proof { display: block; overflow-x: auto; }

@media(max-width: 1199px) {

  .bt-sub-note { display: none; }
}
@media(max-width: 819px) {
  .bt-breadcrumb { font-size: 10px; gap: 8px; }
  .bt-eyebrow { font-size: 8px; }

}
@media(max-width: 540px) {

  .bt-sub { flex-wrap: wrap; gap: 12px; }.bt-sub h3 { font-size: 19px; }.bt-filters { margin-left: 0; width: 100%; }.bt-filters button { flex: 1; min-height: 40px; }
  .ha-battle .bt-table { grid-template-columns: 60px minmax(0,1fr); gap: 12px; padding: 14px; }.bt-table-art { height: 80px; }.bt-table-art img { width: 78px; height: 78px; }.bt-table-top { gap: 5px; }.bt-table-top b { font-size: 12px; }.bt-seats { gap: 3px; }.bt-seat { width: 25px; height: 25px; }.bt-seats small { font-size: 9px; }.bt-table-foot > span:first-child { line-height: 1.5; }
}
@media(prefers-reduced-motion: reduce) {
  .ha-battle *, .ha-battle *::before, .ha-battle *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Chest contents shares the arena dialog, outside the battle host. */
.bt-contents-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; padding-right: 20px; }
.bt-contents-head > img { flex: 0 0 100px; width: 100px; height: 100px; object-fit: contain; }
.bt-contents-head > div { min-width: 0; }
.ha-modal .bt-contents-head h3 { margin: 7px 0; padding: 0; font-size: 25px; letter-spacing: .035em; }
.bt-contents-head p { margin: 0; font: 600 14px var(--num); color: var(--gold); }
.bt-contents-head p span { color: #a3adbb; font-size: 10px; font-weight: 400; }
.bt-contents-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 12px; }
.bt-contents-heading h4 { margin: 0; font: 600 13px var(--font); }
.bt-contents-heading h4 span { margin-left: 6px; padding: 3px 6px; border-radius: 4px; background: #ffffff0a; color: #a3adbb; font: 10px var(--num); }
.bt-contents-heading > span { color: #929fae; font-size: 10px; }
.bt-contents-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; list-style: none; padding: 3px; margin: 0; max-height: min(420px,calc(92dvh - 280px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #526071 transparent; }
.bt-contents-grid:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 5px; }
.bt-contents-item { display: flex; flex-direction: column; min-width: 0; padding: 12px; border: 1px solid #ffffff0a; border-bottom: 2px solid var(--tier); border-radius: 8px; background: radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--tier) 10%,transparent),transparent 72%),#111820; }
.bt-contents-tier { font: 8px var(--num); text-transform: uppercase; letter-spacing: .09em; color: var(--tier); }
.bt-contents-item > img { width: 100%; height: 112px; object-fit: contain; margin: 5px 0 10px; }
.bt-contents-item > b { font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; margin-bottom: 8px; }
.bt-contents-value { margin-top: auto; font: 600 13px var(--num); color: var(--gold); }
.bt-contents-value small { color: #8f9dae; font: 9px var(--num); }
.bt-contents-note, .bt-contents-empty { color: #929fae; font-size: 11px; line-height: 1.7; }
.bt-contents-note { margin: 16px 0 0; }
.bt-contents-empty { padding: 20px; border: 1px solid var(--line); border-radius: 8px; }
@media(max-width: 640px) {
  .bt-contents-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .bt-contents-head { gap: 10px; padding-right: 32px; }
  .bt-contents-head > img { flex-basis: 64px; width: 64px; height: 74px; }
  .ha-modal .bt-contents-head h3 { font-size: 21px; }
  .bt-contents-head .bt-eyebrow { font-size: 8px; letter-spacing: .08em; }
}
@media(max-width: 440px) {
  .bt-contents-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .bt-contents-item { padding: 10px; }
  .bt-contents-item > img { height: 98px; }
  .ha-modal .bt-contents-head h3 { font-size: 19px; }
}

/* Active battle: a shared arena, synchronized horizontal reels and seat ledgers. */
.ha-battle.is-battling > .ha-pot-hist-head,
.ha-battle.is-battling > #bt-history { display: none; }
.ha-battle .bt-stage-card { padding: 0; overflow: hidden; animation: none; background: #0d1219; border: 1px solid #27303c; box-shadow: none; }
.ha-battle .bt-stage-card:hover { transform: none; }
.bt-stage-top { padding: 18px 20px 0; }
.bt-stage-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.bt-stage-nav > .ha-btn { justify-self: start; gap: 9px; }
.bt-stage-nav > .ha-btn > span { font: 25px/16px var(--num); }
.bt-stage-title { text-align: center; }
.bt-stage-title .bt-eyebrow { color: #929dac; font-size: 9px; }
.bt-stage-title h1 { font: 700 24px/1.3 var(--display); letter-spacing: .035em; margin: 7px 0 0; }
.bt-stage-tools { display: flex; align-items: center; justify-content: end; gap: 10px; }
.bt-stage-tools svg, .bt-stage-fair svg { width: 16px; height: 16px; flex: 0 0 16px; }
.bt-stage-tools .ha-btn { display: inline-flex; align-items: center; gap: 6px; }
.bt-stage-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 8px; border-top: 1px solid #ffffff0c; font-size: 10px; }
.bt-mode-label { color: #bdc6d3; }
.bt-mode-label::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px; background: var(--lime); border-radius: 1px; transform: rotate(45deg); }
.bt-mode-label.is-crazy { color: #ef9bcc; }.bt-mode-label.is-crazy::before { background: #ef9bcc; }
.bt-stage-status { color: #a3adbb; }.bt-stage-status.is-wait { color: var(--gold); }
.bt-stage-status.is-wait::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--gold); margin-right: 6px; border-radius: 50%; animation: bt-pulse 1.2s ease-in-out infinite; }
.bt-stage-settled { color: #97a4b7; }
.bt-stage-meta .ha-link { color: var(--gold); font-size: 11px; min-height: 32px; }
.is-seated .bt-stage-top { padding: 20px 24px; border-bottom: 1px solid #2a3540; }
.is-seated .bt-stage-title h1 { font-size: 20px; }
.is-seated .bt-stage-card { container: chest-waiting / inline-size; }
@keyframes bt-pulse { 50% { opacity: .35; } }
.bt-rounds { display: grid; grid-template-columns: minmax(130px,1fr) minmax(0,2fr) minmax(75px,1fr); align-items: center; gap: 18px; padding: 12px 20px 18px; }
.bt-battle-cost small, .bt-round-count small { font-size: 9px; color: #a3adbb; }
.bt-battle-cost b { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 600 16px var(--num); margin: 9px 0 6px; }
.bt-battle-cost b img { width: 18px; height: 18px; }.bt-battle-cost em { font: 10px var(--num); color: #a3adbb; }
.bt-battle-cost > span { font: 9px var(--num); color: #8390a2; }
.bt-round-track { min-width: 0; text-align: center; }
.bt-round-track > b { display: block; margin-top: 7px; color: var(--gold); font: 500 10px var(--num); }
.bt-round-track > small { display: block; margin-top: 6px; color: #8e9aa9; font-size: 9px; }
.bt-round-chests { position: relative; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #44505d transparent; padding: 3px 3px 5px; }
.bt-round-chest { position: relative; flex: 0 0 56px; height: 59px; padding: 0; appearance: none; cursor: pointer; border: 1px solid #ffffff18; border-radius: 5px; background: #121923; opacity: .65; transition: border-color .16s ease, background .16s ease, opacity .16s ease; }
.bt-round-chest:first-child { margin-left: auto; }.bt-round-chest:last-child { margin-right: auto; }
.bt-round-chest img { width: 54px; height: 49px; object-fit: contain; }
.bt-round-chest i { position: absolute; bottom: 3px; left: 0; right: 0; font: 8px var(--num); color: #bdc6d3; }
.bt-round-chest.is-open { opacity: .6; border-bottom-color: #b8d778; }
.bt-round-chest.is-current { opacity: 1; border-color: #e8c07a80; background: radial-gradient(ellipse at center,#e8c07a1c,#111923); box-shadow: 0 0 15px #e8c07a0b; }
.bt-round-chest.is-current i { color: var(--gold); }
.bt-round-chest:hover { opacity: 1; border-color: var(--gold); background: #22262b; }
.bt-round-chest:focus-visible { opacity: 1; outline: 2px solid var(--green); outline-offset: 1px; }
.bt-round-count { text-align: right; }.bt-round-count > b { display: block; font: 600 28px var(--num); margin-top: 7px; }.bt-round-count > b > span { font-size: 16px; color: #667588; }
.ha-battle .bt-case.cb { display: block; padding: 0 20px 24px; background: none; min-height: 0; }
.cb-board { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; padding: 5px; overflow: hidden; isolation: isolate; background: #25303e; border: 1px solid #344152; border-radius: 12px; box-shadow: 0 14px 35px #0002; }
.ha-battle .cb-col { position: relative; min-width: 0; padding: 0; border: 0; border-radius: 0; background: #0c131d; box-shadow: none; transition: background .3s; }
.ha-battle .cb-col.is-me { box-shadow: inset 0 2px var(--seat); }.ha-battle .cb-col.is-winner { background: #1b211b; box-shadow: inset 0 0 0 1px #cbe98580; }
.ha-battle .cb-head { position: relative; z-index: 4; display: flex; align-items: center; gap: 9px; flex-wrap: nowrap; height: 56px; margin: 0; padding: 12px 18px 4px; }
.ha-battle .cb-ava { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 7px; object-fit: cover; background: #18212c; box-shadow: inset 0 0 0 1px #ffffff15; }
.ha-battle .cb-id b { font: 600 11px var(--font); line-height: 1.4; }.ha-battle .cb-id small { margin-top: 2px; font: 8px var(--num); color: #95a1b4; }
.ha-battle .cb-total { display: flex; align-items: baseline; gap: 5px; flex: 0 0 auto; margin: 0; padding: 5px 8px; background: #1c2735; border-radius: 5px; }
.ha-battle .cb-total b { font: 600 14px var(--num); color: #e8edf3; transform: none; }.ha-battle .cb-total small { font: 8px var(--num); color: #a3adbb; }
.ha-battle .cb-reel { height: 220px; border-radius: 0; background: none; box-shadow: none; overflow: hidden; }
.ha-battle .cb-strip { top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: row; will-change: transform; }
.ha-battle .cb-tile { position: relative; width: 100%; height: 100%; flex: 0 0 100%; display: flex; align-items: center; justify-content: center; border: 0; padding: 8px 25px; margin: 0; background: radial-gradient(ellipse at center,color-mix(in srgb,var(--tier,#e8c07a) 9%,transparent),transparent 62%); }
.ha-battle .cb-tile > img { width: 160px; height: 160px; max-width: 78%; object-fit: contain; flex: none; filter: drop-shadow(0 10px 12px #0005); }
.ha-battle .cb-tile.is-closed > img { width: 190px; height: 190px; }
.ha-battle .cb-marker { left: 50%; right: auto; top: 0; height: 100%; width: 1px; margin: 0; background: linear-gradient(#e8c07a35,transparent 30%,transparent 70%,#e8c07a35); box-shadow: none; pointer-events: none; }
.ha-battle .cb-marker::before, .ha-battle .cb-marker::after { left: -4px; right: auto; top: 0; border: 5px solid transparent; border-top: 6px solid var(--gold); }
.ha-battle .cb-marker::after { top: auto; bottom: 0; border: 5px solid transparent; border-bottom: 6px solid var(--gold); }
.ha-battle .cb-shade { background: linear-gradient(90deg,#0c131d,transparent 22%,transparent 78%,#0c131d); }
.ha-battle .cb-col.is-landed .cb-reel { box-shadow: none; }
.cb-caption { min-height: 51px; padding: 5px 12px 13px; text-align: center; }
.cb-caption > small { display: block; font: 8px var(--num); color: #8896ab; text-transform: uppercase; letter-spacing: .09em; margin-bottom: 6px; }
.cb-caption > b { display: block; font: 500 11px var(--font); color: #d9e0e9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-caption b > span { color: var(--land,var(--gold)); margin-left: 7px; font: 600 11px var(--num); }
.cb-versus { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg); display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #e8c07a88; background: #151e2a; color: var(--gold); font: 600 10px var(--num); box-shadow: 0 0 0 5px #0d1219; font-size: 0; }
.cb-versus::after { content: 'VS'; transform: rotate(-45deg); font-size: 10px; }
.ha-battle .cb[data-players="3"] .cb-reel, .ha-battle .cb[data-players="4"] .cb-reel { height: 144px; }
.ha-battle .cb[data-players="3"] .cb-tile > img, .ha-battle .cb[data-players="4"] .cb-tile > img { width: 124px; height: 124px; }
.ha-battle .cb.is-many .cb-head { height: 47px; padding-top: 9px; }.ha-battle .cb.is-many .cb-reel { height: 115px; }.ha-battle .cb.is-many .cb-tile > img { width: 102px; height: 102px; }.ha-battle .cb.is-many .cb-caption { min-height: 44px; padding-bottom: 9px; }
.cb-loot-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin: 25px 0 13px; }
.cb-loot-heading h3 { font: 600 15px var(--display); letter-spacing: .04em; margin: 0; }.cb-loot-heading > span { font: 9px var(--num); color: #a3adbb; }
.cb-ledgers { display: grid; grid-template-columns: repeat(var(--players,2),minmax(0,1fr)); gap: 10px; }.cb.is-many .cb-ledgers { grid-template-columns: repeat(3,minmax(0,1fr)); }
.cb-ledger { min-width: 0; background: #111923; border: 1px solid #25303e; border-radius: 7px; overflow: hidden; }
.cb-ledger.is-winner { border-color: #b8d77870; }.cb-ledger.is-winner .cb-count { color: #c9e795; }
.cb-ledger-head { display: flex; align-items: center; gap: 9px; padding: 13px 12px; background: #151f2b; }
.cb-ledger-total { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 12px; border-block: 1px solid #ffffff09; }
.cb-ledger-total > span { font: 10px/1.5 var(--font); color: #a5b1c1; }
.cb-ledger-total > .cb-money { margin-left: auto; }
.cb-ledger-total strong { font: 600 14px/1.4 var(--num); color: var(--gold); }
.cb-ledger-total small { font: 10px/1.4 var(--num); color: #a5b1c1; }
/* Currency icon, number and ticker are one unit. Only the label and complete
   amount share the row's free space; no individual currency part can drift. */
.ha-battle .cb-money { display: inline-flex; align-items: center; justify-content: flex-start; gap: 5px; white-space: nowrap; font-style: normal; font-variant-numeric: tabular-nums; vertical-align: middle; }
.ha-battle .cb-money > .ha-coin { display: block; flex: 0 0 13px; width: 13px; height: 13px; margin: 0; }
.ha-battle .cb-money > :not(.ha-coin) { flex: 0 0 auto; }
.ha-battle .cb-log { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
.cb-pending { text-align: center; color: #718197; font-size: 10px; line-height: 1.8; padding: 24px 8px; }
.ha-battle .cb-pull { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 11px 10px; border: 0; border-bottom: 1px solid #ffffff07; border-radius: 0; background: linear-gradient(90deg,color-mix(in srgb,var(--tier) 5%,transparent),transparent); animation: cb-drop .25s ease-out both; }
.cb-pull-round { font: 8px var(--num); color: #758298; }
/* The item's own art, and only that: a bare `.cb-pull img` also caught the
   currency coin nested in the value beside it and blew it up to 38px. */
.ha-battle .cb-pull > img { width: 38px; height: 42px; flex: 0 0 38px; object-fit: contain; }
/* And the coin is pinned here rather than left to its width attribute, which
   any ancestor's img rule outranks. */
.ha-battle .ha-coin { width: 13px; height: 13px; }
.cb-pull > div { min-width: 0; flex: 1; }.cb-pull small { display: block; font: 11px/1.5 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #b1bdce; }.cb-pull b { font: 600 12px/1.5 var(--num); margin-top: 4px; }.cb-pull em { font: 10px/1.5 var(--num); color: #a5b1c1; }
.cb-pull > i { width: 3px; height: 23px; border-radius: 2px; flex: 0 0 3px; background: var(--tier); opacity: .85; }
@keyframes cb-drop { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.cb.is-complete .cb-board { display: none; }
.bt-result { padding: 0 20px; }
.bt-res-card { position: relative; display: flex; align-items: center; justify-content: center; gap: 26px; min-height: 326px; padding: 30px; border: 1px solid #e8c07a55; border-radius: 12px; background: radial-gradient(ellipse at 26% 60%,#e8c07a13,transparent 55%),linear-gradient(120deg,#192119,#101822); overflow: hidden; }
.bt-res-chest { width: 235px; height: 235px; object-fit: contain; filter: drop-shadow(0 18px 25px #0005); }
.bt-res-content { position: relative; min-width: 0; }.bt-res-content > .bt-eyebrow { color: #c4d69b; font-size: 9px; }
.bt-res-win { display: flex; align-items: center; gap: 12px; margin: 18px 0 20px; }.bt-res-win > img { width: 44px; height: 44px; border-radius: 8px; background: #233027; border: 1px solid #c2d79666; }
.bt-res-win h2 { margin: 0; font: 600 23px var(--display); overflow-wrap: anywhere; }.bt-res-win h2 > span { display: block; font: 10px var(--font); margin-top: 7px; color: #b8c6b7; }
.bt-res-payout { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; color: #d4eda2; }.bt-res-payout strong { font: 600 clamp(25px,3.2vw,43px) var(--num); letter-spacing: -.03em; }.bt-res-payout > span { font: 12px var(--num); color: #a8b897; }
.bt-res-receipt { margin: 8px 0 22px; color: #91a08f; font: 9px var(--num); line-height: 1.7; }
.bt-res-acts { display: flex; gap: 8px; flex-wrap: wrap; }.bt-res-acts .ha-btn { font-size: 10px; min-height: 42px; }
.bt-res-pick { color: #a3b495; font-size: 11px; }
.bt-stage-fair { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 17px 22px; border-top: 1px solid #ffffff09; color: #8896a8; font: 9px/1.7 var(--font); }
@media(max-width: 1100px) {
  .cb-ledgers { grid-template-columns: repeat(2,minmax(0,1fr)); }.cb.is-many .cb-ledgers { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .bt-stage-title h1 { font-size: 20px; }.bt-stage-tools { gap: 6px; }.bt-stage-tools .bt-tag { font-size: 8px; }
  .bt-res-chest { width: 185px; height: 185px; }.bt-res-card { gap: 22px; padding: 24px; }
}
@media(max-width: 700px) {
  .bt-stage-top { padding: 16px 12px 0; }.bt-stage-nav { gap: 8px; grid-template-columns: 1fr 1fr; }.bt-stage-title { grid-column: 1/-1; grid-row: 2; padding-top: 5px; }.bt-stage-tools { grid-column: 2; grid-row: 1; }.bt-stage-title h1 { font-size: 18px; }.bt-stage-title .bt-eyebrow { font-size: 8px; letter-spacing: .07em; }
  .bt-stage-nav .ha-btn { font-size: 9px; padding: 8px; }.bt-stage-tools .bt-tag { display: none; }.bt-stage-tools .ha-btn svg { display: none; }
  .bt-stage-meta { margin-top: 18px; gap: 8px; flex-wrap: wrap; font-size: 8px; }.bt-stage-status { order: 3; flex: 1 0 100%; text-align: center; padding-top: 5px; }
  .bt-rounds { grid-template-columns: 1fr 1fr; padding: 17px 12px; gap: 13px; }.bt-battle-cost b { font-size: 14px; margin-block: 6px; }.bt-round-count > b { font-size: 23px; }.bt-round-count > b > span { font-size: 14px; }.bt-round-track { grid-row: 2; grid-column: 1/-1; }
  .bt-round-chest { flex-basis: 46px; height: 51px; }.bt-round-chest img { width: 44px; height: 42px; }
  .ha-battle .bt-case.cb { padding: 0 8px 17px; }.cb-board { padding: 3px; border-radius: 9px; }
  .ha-battle .cb-head { gap: 5px; padding: 9px 8px 3px; height: 66px; align-content: center; flex-wrap: wrap; }.ha-battle .cb-ava { width: 26px; height: 26px; flex-basis: 26px; }.ha-battle .cb-id b { font-size: 9px; }.ha-battle .cb-id small { font-size: 7px; }
  .ha-battle .cb-head .cb-id { flex: 1 0 calc(100% - 31px); }
  .ha-battle .cb-total { margin-left: 31px; padding: 2px 5px; }.ha-battle .cb-total b { font-size: 11px; }.ha-battle .cb-total small { font-size: 7px; }
  .ha-battle .cb-reel { height: 164px; }.ha-battle .cb-tile > img, .ha-battle .cb-tile.is-closed > img { width: 130px; height: 130px; max-width: 100%; }
  .ha-battle .cb[data-players="3"] .cb-reel, .ha-battle .cb[data-players="4"] .cb-reel { height: 120px; }
  .ha-battle .cb.is-many .cb-head { height: 64px; padding-top: 8px; }.ha-battle .cb.is-many .cb-reel { height: 96px; }.ha-battle .cb.is-many .cb-tile > img { height: 88px; width: 88px; }
  .cb-caption { min-height: 48px; padding-inline: 6px; }.cb-caption > small { font-size: 6px; }.cb-caption > b, .cb-caption b > span { font-size: 8px; }.cb-caption b > .cb-money { display: flex; justify-content: center; margin: 4px 0 0; }
  .cb-versus { width: 26px; height: 26px; box-shadow: 0 0 0 3px #0d1219; }.cb-versus::after { font-size: 8px; }
  .cb-ledgers, .cb.is-many .cb-ledgers { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }.cb-loot-heading { margin-top: 20px; padding-inline: 3px; }.cb-loot-heading h3 { font-size: 13px; }.cb-loot-heading > span { font-size: 8px; }
  .cb-ledger-head { padding: 12px 10px; gap: 8px; }.cb-ledger-total { padding: 10px; }.cb-ledger-total strong { font-size: 12px; }
  .ha-battle .cb-pull { padding: 10px; gap: 8px; }.ha-battle .cb-pull > img { width: 32px; height: 38px; flex-basis: 32px; }.cb-pull-round { font-size: 9px; }
  .bt-result { padding: 0 8px; }.bt-res-card { min-height: 365px; text-align: center; padding: 25px 14px; }.bt-res-chest { position: absolute; width: 210px; height: 210px; right: -75px; top: -65px; opacity: .2; }
  .bt-res-win, .bt-res-payout, .bt-res-acts { justify-content: center; }.bt-res-win h2 { font-size: 21px; text-align: left; }.bt-res-payout strong { font-size: 33px; }.bt-res-payout > img { width: 26px; height: 26px; }.bt-res-acts .ha-btn { flex: 1 0 100%; }
  .bt-stage-fair { padding: 14px 12px; font-size: 8px; align-items: start; }
}
@media(max-width: 560px) {
  .cb-ledgers, .cb.is-many .cb-ledgers { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .ha-battle .cb-ledger-head .cb-id b { font-size: 12px; }
  .ha-battle .cb-ledger-head .cb-id small { font-size: 10px; line-height: 1.5; margin-top: 4px; }
  .cb-ledger-total strong { font-size: 14px; }
}
@media(prefers-reduced-motion: reduce) {
  .ha-battle *, .ha-battle *::before, .ha-battle *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.cb[data-players="3"] .cb-col:last-child, .cb[data-players="5"] .cb-col:last-child { grid-column: 1/-1; }
.bt-result-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.bt-table-line { display: flex; flex-wrap: wrap; gap: 3px; margin: 10px 0; }.bt-table-line img { object-fit: contain; background: #ffffff04; border-radius: 4px; }

/* Chest Battle builder: currency, line-up, rules and checkout. */
.bt-create { display: flex; flex-direction: column; gap: 24px; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: #101419; }
.bt-create:hover { transform: none; }
.ha-battle .bt-create { border-color: var(--line); box-shadow: none; background: #101419; }
#bt-builder { container: battle-builder / inline-size; }
.bt-create-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.bt-create-heading h2 { margin: 0; font: 700 24px/1.2 var(--display); }
.bt-create-heading p { margin: 8px 0 0; color: var(--txt-dim); font-size: 12px; line-height: 1.5; }
.bt-cur-step { display: grid; gap: 8px; flex: 0 0 280px; }
.bt-cur-step > .l, .bt-opt > .l { color: var(--txt-dim); font: 600 12px/1.4 var(--font); }
.bt-cur-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 4px; background: #090c10; }
.bt-cur-pick button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 40px; padding: 8px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--txt-dim); font: 12px var(--num); cursor: pointer; }
.bt-cur-pick button img { display: block; width: 16px; height: 16px; object-fit: contain; }
.bt-cur-pick button:hover:not(:disabled) { background: #ffffff08; }
.bt-cur-pick button.is-on { background: #2d3027; border-color: #e8c07a50; color: var(--gold-hi); }
.bt-cur-pick button:disabled { opacity: .4; cursor: not-allowed; }
.bt-builder-grid { display: grid; gap: 24px; align-items: start; }
.bt-builder-main { display: grid; gap: 24px; min-width: 0; container: chest-shelf / inline-size; }
.bt-create h3 { margin: 0; color: var(--txt); font: 700 14px/1.5 var(--font); letter-spacing: 0; text-transform: none; }
.bt-create-sub, .bt-line-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bt-create-sub > span { color: var(--txt-dim); font-size: 11px; }
.bt-cases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.bt-chest { position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; gap: 12px; padding: 16px 12px; border: 1px solid var(--line); border-radius: 8px; background: #161b22; color: var(--txt); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.bt-chest:hover:not(:disabled) { border-color: var(--tone); background: #1b2129; }
.bt-chest.is-on { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 7%, #101419); }
.bt-chest-art { display: flex; align-items: center; justify-content: center; height: 88px; }
.bt-chest-art img { width: 100%; max-width: 136px; height: 104px; object-fit: contain; }
.bt-chest-info { display: grid; gap: 6px; }
.bt-chest-info > b { font: 700 16px/1.25 var(--display); letter-spacing: .01em; }
.bt-chest-info > span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.bt-chest-info strong { color: var(--tone); font: 600 12px/1.5 var(--num); }
.bt-chest-info small { color: var(--txt-dim); font: 10px/1.5 var(--num); }
.bt-chest-add { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 5px; background: #101419; color: var(--txt-dim); }
.bt-chest-add svg { width: 14px; height: 14px; }
.bt-chest-n { position: absolute; top: 8px; left: 8px; padding: 3px 6px; border-radius: 4px; background: var(--tone); color: #0b0f14; font: 700 11px/1.4 var(--num); font-style: normal; }
.bt-chest:disabled { opacity: .45; cursor: not-allowed; }
.bt-line { min-width: 0; padding-top: 20px; border-top: 1px solid var(--line); }
.bt-line-heading { margin-bottom: 8px; }
.bt-line-heading .ha-link { min-height: 36px; color: var(--txt-dim); font-size: 11px; }
.bt-line-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0 0 12px; }
.bt-line-list li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: 'round round' 'art name' 'art price' 'move move'; border: 1px solid var(--line); border-bottom: 2px solid var(--tone); border-radius: 6px; background: #161b22; overflow: hidden; min-width: 0; }
.bt-line-round { grid-area: round; padding: 12px 32px 8px 8px; color: var(--txt-dim); font: 9px/1.3 var(--num); }
.bt-line-list img { grid-area: art; width: 44px; height: 44px; object-fit: contain; }
.bt-line-list b { grid-area: name; align-self: end; padding-right: 4px; font: 600 10px/1.5 var(--font); }
.bt-line-price { grid-area: price; min-width: 0; color: var(--txt-dim); padding: 0 4px 8px 0; font: 9px/1.5 var(--num); overflow-wrap: anywhere; }
.bt-line-list button { cursor: pointer; color: var(--txt-dim); background: transparent; border: 0; }
.bt-line-list button:hover:not(:disabled) { color: var(--txt); background: #ffffff0c; }
.bt-line-list button:disabled { opacity: .3; cursor: default; }
.bt-line-remove { position: absolute; right: 0; top: 0; width: 32px; height: 32px; font-size: 20px; }
.bt-line-move { grid-area: move; display: flex; border-top: 1px solid var(--line); }
.bt-line-move button { flex: 1; min-height: 36px; font-size: 20px; }
.bt-line-move button + button { border-left: 1px solid var(--line); }
.bt-line-empty { margin: 0 0 12px; padding: 20px 16px; border: 1px dashed var(--line); border-radius: 8px; font: 12px/1.6 var(--font); color: var(--txt-dim); }
.bt-line > small { display: block; color: var(--txt-dim); font: 10px/1.5 var(--num); }
.bt-builder-setup { display: grid; gap: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: #0c1015; min-width: 0; }
.bt-options { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bt-opt { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; }
.bt-opt > small { color: var(--txt-dim); font-size: 11px; line-height: 1.5; }
.bt-seg { display: flex; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: 8px; background: #090c10; }
.bt-seg button { flex: 1; padding: 8px 4px; min-width: 0; min-height: 40px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--txt-dim); font: 500 12px var(--font); cursor: pointer; }
.bt-seg button.is-on { background: #2d3027; border-color: #e8c07a40; color: var(--gold-hi); }
.bt-seg button:hover:not(.is-on) { background: #ffffff08; }
.bt-checkout { display: grid; gap: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.bt-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.bt-price > small { color: var(--txt-dim); font: 11px/1.5 var(--font); }
.bt-price > b { color: var(--txt); text-align: right; font: 600 18px/1.5 var(--num); overflow-wrap: anywhere; }
.bt-price em { color: var(--txt-dim); white-space: nowrap; font: normal 10px var(--num); }
.bt-pot-price > b { color: var(--gold); font-size: 16px; }
.bt-odds { display: flex; align-items: center; gap: 8px; }
.bt-odds > svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--gold); }
.bt-odds b { font-size: 11px; font-weight: 600; }
.bt-odds small { display: block; margin-top: 3px; color: var(--txt-dim); font-size: 10px; line-height: 1.5; }
.bt-checkout .bt-go { width: 100%; min-width: 0; min-height: 48px; font-size: 11px; gap: 8px; }
.bt-go svg { width: 16px; height: 16px; }
.bt-warn { margin: 0; color: #ffb86b; font: 12px/1.6 var(--font); }
.bt-warn-act { width: 100%; text-align: left; border: 1px solid #ffb86b45; border-radius: 8px; padding: 12px; background: #ffb86b10; cursor: pointer; }
.bt-create button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@container battle-builder (min-width: 900px) {
  .bt-builder-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .bt-options { grid-template-columns: minmax(0, 1fr); }
}
@container chest-shelf (max-width: 619px) {
  .bt-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container battle-builder (max-width: 639px) {
  .bt-create { padding: 16px; gap: 20px; }
  .bt-create-heading { align-items: stretch; flex-direction: column; gap: 16px; padding-bottom: 16px; }
  .bt-create-heading h2 { font-size: 22px; }
  .bt-cur-step { flex: auto; }
  .bt-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bt-create-sub { align-items: start; flex-direction: column; gap: 4px; }
  .bt-builder-setup { padding: 16px; gap: 16px; }
  .bt-options { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .bt-line-list { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .bt-line-round { padding-right: 44px; }
  .bt-line-remove { width: 44px; height: 44px; }
  .bt-line-move button, .bt-cur-pick button, .bt-seg button { min-height: 44px; }
  .bt-price > b { font-size: 16px; }
  .bt-pot-price > b { font-size: 14px; }
}