.intro { margin: 0 0 14px; background: var(--panel); border-radius: 14px; padding: 12px 16px; max-width: 80ch; }
.case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ccase { background: var(--panel); border-radius: 16px; padding: 14px; display: grid; gap: 10px; align-content: start; }
.cc-pocket .case-art { background: linear-gradient(135deg, #14a38a, #2f7de0); }
.cc-stash .case-art { background: linear-gradient(135deg, #9b3bd8, #ff5fa2); }
.cc-vault .case-art { background: linear-gradient(135deg, #e0a400, #ff5f3a 60%, #c2309c); }
.loot { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.loot li { display: grid; grid-template-columns: 1fr auto 52px; gap: 8px; padding: 3px 6px; border-radius: 6px; background: rgba(255, 255, 255, .04); border-left: 3px solid #c9c3e6; }
.loot small { color: var(--muted); text-align: right; }
.rar-uncommon { border-left-color: #7dff9b !important; }
.rar-rare { border-left-color: #3ee6ff !important; }
.rar-epic { border-left-color: #c9a8ff !important; }
.rar-legendary { border-left-color: #ffd84d !important; }
.rar-mythic { border-left-color: #ff5fa2 !important; }
.tile .tile-look { font: 700 14px var(--body); color: #fff; white-space: normal; }
.op-result .up { color: #7dff9b; }
.op-result .down { color: #ff8aa8; }

/* battles */
.battle-new { margin-bottom: 16px; }
.battle-new h3 { margin: 0; font: 400 20px var(--display); color: #fff; }
.pick-cases, .battle-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.battle-opts .seg { flex: 1 1 200px; }
.lineup { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 34px; }
.lu { border: 0; border-radius: 8px; background: var(--panel-2); color: #fff; padding: 6px 9px; font: 500 13px var(--body); cursor: pointer; }
.lu-cost { margin-left: auto; color: var(--gold); }
.sub { margin: 0 0 10px; font: 400 20px var(--display); color: #fff; text-shadow: 2px 2px 0 var(--title-a); }
.battle-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.bl { background: var(--panel); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; }
.bl.done { opacity: .75; }
.battle-list .empty { background: none; color: #fff; padding: 0; text-shadow: 1px 1px 0 var(--title-a); }
.bl-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.bl-cases { font-size: 13px; color: var(--muted); }
.bl-seats { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-seat { display: flex; align-items: center; gap: 6px; font-size: 14px; min-width: 0; }
.bl-seat .av { width: 26px; height: 26px; font-size: 12px; }
.av.empty { background: rgba(255, 255, 255, .08); color: var(--muted); }
.av.bot { background: #f4efff; padding: 3px; object-fit: contain; }
.bl-acts { display: flex; gap: 8px; }
.battle-view { width: min(980px, calc(100vw - 20px)); border: 0; border-radius: 18px; padding: 16px; background: #120b33; color: #fff; }
.battle-view::backdrop { background: rgba(5, 3, 20, .78); }
.bv-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bv-head h2 { margin: 0; font: 400 18px var(--display); }
.bv-round { text-align: center; margin: 12px 0; font: 700 17px var(--body); color: var(--gold); min-height: 1.4em; }
.bv-seats { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 10px; }
.bv-seat { background: var(--panel); border-radius: 14px; padding: 10px; display: grid; gap: 8px; align-content: start; border: 2px solid transparent; min-width: 0; }
.bv-seat.leading { border-color: rgba(255, 216, 77, .5); }
.bv-seat.winner { border-color: #4dff8f; background: #173d33; }
.bv-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bv-who .nt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-slot { height: 64px; border-radius: 10px; background: #0a0620; display: grid; place-items: center; text-align: center; padding: 4px; overflow: hidden; }
.bv-slot .spin { font: 700 13px var(--body); color: var(--muted); filter: blur(.6px); border-left: 0 !important; }
.bv-slot .landed { display: grid; border-left: 0 !important; animation: vp-pop .4s ease-out; }
.bv-slot .landed b { font-size: 14px; }
.bv-slot .landed small { color: var(--gold); font-weight: 700; }
.bv-pulls { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12px; }
.bv-pulls li { display: flex; justify-content: space-between; gap: 6px; padding: 3px 6px; background: rgba(255, 255, 255, .04); border-radius: 6px; border-left: 3px solid #c9c3e6; }
.bv-total { text-align: center; font: 400 22px var(--display); color: var(--gold); }
.bv-foot { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 560px) { .bv-seats { gap: 5px; } .bv-seat { padding: 6px; } .bv-slot { height: 54px; } .bv-total { font-size: 16px; } .bv-pulls li b { display: none; } }

/* loot pictures */
.loot-pic { display: block; flex: none; }
.li-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tile { gap: 3px; }
.tile .loot-pic { width: 44px; height: 44px; }
.tile .tile-look { font-size: 12px; line-height: 1.1; }
.won .loot-pic { margin: 0 auto 4px; animation: vp-pop .5s ease-out; }
.bv-slot .spin { display: grid; justify-items: center; gap: 2px; }
.bv-slot .landed .loot-pic { margin: 0 auto; }
.bv-slot { height: 84px; }
@media (max-width: 560px) { .bv-slot { height: 74px; } .bv-slot .landed .loot-pic { width: 26px; height: 26px; } }