:root {
  --bg: #0b0b0d;
  --bg2: #101114;
  --panel: #16171b;
  --panel2: #1c1d22;
  --panel3: #24262d;
  --line: #26282f;
  --text: #f1f2f5;
  --muted: #8a8d98;
  --dim: #565963;
  --accent: #ffd60a;
  --accent2: #ffb800;
  --orange: #ff6a1a;
  --grad: linear-gradient(180deg, #ffe033, #f5c400);
  --win: #35e07c;
  --lose: #ff4d5e;
  --head: "Kanit", system-ui, sans-serif;
  --ui: "Inter", system-ui, sans-serif;
  --side: 158px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: radial-gradient(900px 500px at 50% 0, #1b1708 0%, transparent 65%), var(--bg);
  color: var(--text);
  font: 14px/1.4 var(--ui);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
img { display: block; }
[hidden] { display: none !important; }

.top {
  position: sticky; top: 0; z-index: 30; height: 64px;
  display: flex; align-items: center; gap: 22px; padding: 0 22px;
  background: rgba(11, 11, 13, .9); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 8px; font-family: var(--head); flex: none; }
.logo-mark { background: var(--grad); color: #1a1400; font-weight: 800; font-size: 18px; padding: 2px 9px; border-radius: 9px; }
.logo-text { font-weight: 700; font-size: 20px; letter-spacing: .5px; text-transform: uppercase; }
.hstats { display: flex; gap: 18px; font-size: 10px; text-transform: uppercase; color: var(--muted); letter-spacing: .5px; flex: none; }
.hstats b { display: block; color: var(--text); font: 600 14px var(--head); letter-spacing: 0; }
.nav { display: flex; gap: 6px; flex: 1; justify-content: center; }
.nav a { padding: 8px 14px; border-radius: 8px; color: var(--dim); font: 600 13px var(--head); text-transform: uppercase; letter-spacing: 1px; transition: color .15s; }
.nav a:hover { color: var(--text); }
.nav a.on { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.user { display: flex; align-items: center; gap: 10px; flex: none; }
.coin { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3a0, #f5c400 55%, #b88700); display: inline-block; flex: none; box-shadow: 0 0 0 2px rgba(255, 214, 10, .18); }
.balance { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line); padding: 8px 14px; border-radius: 10px; font: 600 15px var(--head); white-space: nowrap; }
.dep-btn { background: var(--grad); color: #1a1400; font: 600 14px var(--head); padding: 9px 16px; border-radius: 10px; white-space: nowrap; }
.dep-btn:hover { filter: brightness(1.07); }
.bonus-btn { height: 38px; padding: 0 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font: 500 12px var(--head); white-space: nowrap; }
.bonus-btn.ready { color: var(--accent); background: rgba(255, 214, 10, .09); border-color: rgba(255, 214, 10, .45); animation: glowb 2s infinite; }
@keyframes glowb { 50% { box-shadow: 0 0 16px rgba(255, 214, 10, .25); } }
.me { display: flex; }
.ava { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; font: 700 16px var(--head); color: #fff; }
.ava.a0 { background: linear-gradient(135deg, #ff9a3c, #ff3d6e); }
.ava.a1 { background: linear-gradient(135deg, #3cc8ff, #5a5aff); }
.ava.a2 { background: linear-gradient(135deg, #35e07c, #10a0a0); }
.ava.a3 { background: linear-gradient(135deg, #c86bff, #6a3cff); }
.ava.a4 { background: linear-gradient(135deg, #ffd23c, #ff7a1a); }
.ava.a5 { background: linear-gradient(135deg, #ff5a5a, #a01a3c); }
.ava.a6 { background: linear-gradient(135deg, #6be0ff, #2a8a6a); }
.ava.a7 { background: linear-gradient(135deg, #8a96ad, #3a4256); }

.side { position: fixed; left: 0; top: 64px; bottom: 0; width: var(--side); z-index: 10; padding: 6px 0 0 6px; overflow: hidden; background: linear-gradient(90deg, var(--bg) 70%, transparent); }
.side-list { display: flex; flex-direction: column; gap: 4px; }
.fi {
  --rc: #b0c3d9;
  position: relative; height: 62px; flex: none; border-radius: 8px; overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 30%, #14151a) 0%, #14151a 85%);
  border-left: 3px solid var(--rc);
  animation: feedIn .45s cubic-bezier(.2, .8, .2, 1);
}
.fi.lose { filter: grayscale(.85) brightness(.7); }
.fi img { position: absolute; right: -4px; top: 3px; width: 92px; height: 58px; object-fit: contain; }
.fi .fc { position: absolute; top: 4px; left: 6px; font: 700 9px var(--head); color: var(--accent); }
.fi .fs { position: absolute; left: 6px; bottom: 16px; right: 40px; font: 700 11px var(--head); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi .fw { position: absolute; left: 6px; bottom: 4px; right: 40px; font-size: 9px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi .fh { position: absolute; inset: 0; display: flex; align-items: center; gap: 8px; padding: 0 8px; background: rgba(11, 11, 13, .94); opacity: 0; transition: opacity .15s; font-size: 11px; }
.fi:hover .fh { opacity: 1; }
.fh .ava { width: 26px; height: 26px; font-size: 12px; border-radius: 8px; }
.fh div { min-width: 0; line-height: 1.25; }
.fh b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes feedIn { from { height: 0; opacity: 0; transform: translateX(-30px); } }

main { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 22px 24px 40px; padding-left: calc(var(--side) + 24px); }
@media (min-width: 1500px) { main { padding-left: 24px; } }
.foot { display: flex; justify-content: space-between; gap: 16px; padding: 16px 24px 16px calc(var(--side) + 24px); border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; flex-wrap: wrap; }

.upg-title { text-align: center; font: 700 26px var(--head); letter-spacing: 1px; margin: 4px 0 16px; text-transform: uppercase; }
.upg-title b { color: var(--accent); }
.tools { display: flex; gap: 10px; margin-bottom: 8px; color: var(--muted); }
.tools button { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); }
.tools button:hover { color: var(--text); background: var(--panel); }
.tools button.on { color: var(--accent); }
.tools svg { width: 16px; height: 16px; }

.upg { display: grid; grid-template-columns: 1fr 300px 1fr; gap: 12px; }
.slot { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; min-height: 270px; display: flex; flex-direction: column; overflow: clip; }
.slot::before { content: ""; position: absolute; inset: 0; background: radial-gradient(closest-side at 50% 60%, var(--glow, rgba(255, 214, 10, .07)), transparent); pointer-events: none; }
.slot-title { text-align: center; font: 700 12px var(--head); position: relative; }
.slot-sub { text-align: center; color: var(--dim); font-size: 10px; margin-top: 2px; position: relative; }
.slot-body { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; margin-top: 8px; }
.slot-sum { position: absolute; top: 10px; right: 12px; font: 600 13px var(--head); color: var(--accent); }
.arrows { width: 110px; height: 110px; opacity: .9; animation: floaty 2.6s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(5px); } }
.arrows.up { animation-name: floaty2; }
@keyframes floaty2 { 50% { transform: translateY(-5px); } }
.stake-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; align-self: flex-start; }
.stake-grid.one { grid-template-columns: 1fr; }
.stake-grid.one .card { height: 210px; }
.stake-grid.one .card img { height: 120px; }
.stake-grid.two { grid-template-columns: 1fr 1fr; }
.stake-grid.two .card { height: 150px; }
.target-big { text-align: center; width: 100%; position: relative; }
.target-big img { width: 90%; height: 150px; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .65)); animation: pop .4s cubic-bezier(.2, .9, .3, 1.3); }
.target-big .tw { color: var(--muted); font-size: 12px; margin-top: 6px; }
.target-big .tn { font: 700 18px var(--head); text-transform: uppercase; }
.target-big .tp { font: 700 18px var(--head); color: var(--accent); margin-top: 4px; }
.target-big .rar { display: inline-block; margin-top: 6px; font-size: 10px; padding: 2px 8px; border-radius: 6px; color: var(--rc); background: color-mix(in srgb, var(--rc) 15%, transparent); }
.target-big .tx { position: absolute; top: -4px; right: -4px; width: 24px; height: 24px; border-radius: 8px; background: var(--panel2); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.target-big .tx:hover { color: var(--lose); }
@keyframes pop { from { transform: scale(.7) rotate(-6deg); opacity: 0; } }

.wheel { display: flex; align-items: center; justify-content: center; }
.wheel-box { position: relative; width: 300px; height: 300px; }
.wheel-box svg { width: 100%; height: 100%; overflow: visible; }
.wheel-arc { transition: d .35s ease; }
.needle { transform-origin: 170px 170px; transform-box: view-box; }
.wheel-center { position: absolute; inset: 62px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: box-shadow .3s; }
.wheel-center .pct { font: 700 38px/1 var(--head); color: var(--accent); letter-spacing: -.5px; text-shadow: 0 0 22px rgba(255, 214, 10, .35); }
.wheel-center .sub { color: var(--muted); font-size: 12px; margin-top: 6px; }
.wheel-center .mult { margin-top: 6px; font: 600 13px var(--head); color: var(--text); opacity: .75; }
.wheel-center.res-win { box-shadow: 0 0 70px rgba(53, 224, 124, .28); }
.wheel-center.res-lose { box-shadow: 0 0 70px rgba(255, 77, 94, .25); }
.wheel-center .res-t { font: 800 22px var(--head); }
.res-win .res-t { color: var(--win); }
.res-lose .res-t { color: var(--lose); }
.wheel-center .res-img { width: 110px; height: 70px; object-fit: contain; animation: pop .5s cubic-bezier(.2, .9, .3, 1.3); }
.rlabel { font: 600 10px var(--head); fill: var(--muted); }
.rlabel.hi { fill: var(--text); }

.controls { display: grid; grid-template-columns: 1fr 300px 1fr; gap: 12px; margin-top: 10px; align-items: center; }
.balrow { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.balrow .bl { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.balrow .bl b { color: var(--accent); font-family: var(--head); }
.balrow .bl i { font-style: normal; color: var(--dim); margin-left: 4px; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--p, 0%), #2a2c33 var(--p, 0%)); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid #1a1400; box-shadow: 0 0 0 2px var(--accent); cursor: pointer; }
.go { height: 52px; border-radius: 10px; background: var(--grad); color: #1a1400; font: 600 17px var(--head); display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 26px rgba(245, 196, 0, .22); transition: transform .12s, filter .15s, opacity .15s; }
.go svg { width: 18px; height: 18px; }
.go:hover { filter: brightness(1.07); }
.go:active { transform: scale(.98); }
.go:disabled { background: #6a5a0c; color: #1a1400; opacity: .55; cursor: not-allowed; box-shadow: none; filter: none; }
.quick { display: flex; gap: 6px; align-items: center; }
.qb { flex: 1; height: 38px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); font: 600 13px var(--head); color: var(--text); transition: border-color .15s, background .15s; }
.qb.pc { border-color: rgba(255, 214, 10, .35); color: var(--accent); }
.qb:hover { border-color: var(--accent); background: rgba(255, 214, 10, .06); }
.qb.gear { flex: none; width: 38px; color: var(--muted); display: grid; place-items: center; }
.qb.gear svg { width: 16px; height: 16px; }

.lists { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; min-width: 0; }
.panel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.panel-head h3 { margin: 0 auto 0 0; font: 600 16px var(--head); display: flex; align-items: center; gap: 8px; }
.panel-head h3 small { color: var(--muted); font: 500 12px var(--ui); }
.seg { display: flex; gap: 4px; }
.seg button { width: 36px; height: 36px; border-radius: 9px; background: var(--panel2); color: var(--muted); display: grid; place-items: center; }
.seg button svg { width: 18px; height: 18px; }
.seg button.on { background: var(--grad); color: #1a1400; }
.inp, .sel { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; outline: none; transition: border-color .15s; height: 36px; }
.inp:focus, .sel:focus { border-color: rgba(255, 214, 10, .55); }
.inp.search { width: 100px; }
.inp.price { width: 54px; }
.panel-head h3 small { white-space: nowrap; }
.sel { padding: 0 8px; }
.sortb { width: 36px; height: 36px; border-radius: 9px; background: var(--panel2); color: var(--muted); font-size: 16px; }
.sortb:hover { color: var(--text); }
.cartb { position: relative; width: 36px; height: 36px; border-radius: 9px; background: var(--grad); color: #1a1400; display: grid; place-items: center; }
.cartb svg { width: 18px; height: 18px; }
.cartb em { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--lose); color: #fff; font: 700 10px/18px var(--head); text-align: center; font-style: normal; padding: 0 4px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.chip { padding: 6px 10px; border-radius: 8px; background: var(--panel2); color: var(--muted); font-size: 12px; font-weight: 600; transition: color .15s, background .15s; }
.chip:hover { color: var(--text); }
.chip.on { background: rgba(255, 214, 10, .14); color: var(--accent); }

.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-content: start; min-height: 450px; }
.grid.free { min-height: 0; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.grid.scroll { max-height: 480px; overflow-y: auto; padding-right: 4px; }
.grid::-webkit-scrollbar { width: 5px; }
.grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.card {
  --rc: #b0c3d9;
  position: relative; height: 108px; border-radius: 9px; overflow: hidden; cursor: pointer;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--rc) 22%, #1a1b20), #121317 75%);
  border: 1px solid color-mix(in srgb, var(--rc) 55%, #1a1b20);
  display: flex; flex-direction: column; padding: 5px 6px;
  transition: transform .14s, border-color .14s, box-shadow .14s;
}
.card:hover { transform: translateY(-2px); border-color: var(--rc); }
.card.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 20px rgba(255, 214, 10, .18); }
.card.off { opacity: .3; cursor: not-allowed; }
.card.incart { border-color: var(--win); box-shadow: 0 0 0 1px var(--win); }
.card .cp { display: flex; align-items: center; gap: 4px; font: 700 10px var(--head); color: var(--accent); }
.card .cp i { width: 8px; height: 8px; }
.card .cwr { position: absolute; top: 5px; right: 6px; font: 600 8px var(--head); color: var(--muted); }
.card img { width: 100%; height: 52px; object-fit: contain; margin: 2px 0; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55)); }
.card .cw { font-size: 8px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; margin-top: auto; }
.card .cn { font: 700 10px var(--head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.card .ch { position: absolute; bottom: 4px; right: 5px; font: 700 9px var(--head); color: var(--win); background: rgba(0, 0, 0, .55); padding: 0 4px; border-radius: 4px; }
.card .chk { position: absolute; bottom: 5px; right: 5px; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--dim); background: rgba(0, 0, 0, .35); }
.card.sel .chk { background: var(--accent); border-color: var(--accent); }
.card.sel .chk::after { content: ""; position: absolute; left: 3.5px; top: 0; width: 4px; height: 8px; border: solid #1a1400; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.card .x { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: var(--muted); font-size: 13px; line-height: 18px; text-align: center; }
.card .x:hover { color: var(--lose); }
.card .tag { position: absolute; top: 5px; right: 6px; font: 700 8px var(--head); color: #ff8a3c; }
.card.big { height: 140px; }
.card.big img { height: 78px; }
.card.big .cn { font-size: 11px; }
.card.big .cp { font-size: 12px; }
.stake-grid .card .cp { font-size: 12px; }
.stake-grid .card img { height: 70px; }

.pager { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 10px; color: var(--muted); font-size: 12px; }
.pager button { width: 36px; height: 34px; border-radius: 9px; background: var(--panel2); border: 1px solid var(--line); font-size: 16px; }
.pager button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pager button:disabled { opacity: .3; cursor: default; }
.muted { color: var(--muted); }
.nothing { grid-column: 1 / -1; padding: 40px 0; text-align: center; color: var(--dim); }

.btn { padding: 9px 16px; border-radius: 9px; font-weight: 600; background: var(--panel3); border: 1px solid var(--line); transition: filter .15s, background .15s; }
.btn:hover { background: #2d3039; }
.btn.pri { background: var(--grad); color: #1a1400; border: 0; }
.btn.pri:hover { filter: brightness(1.07); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.pbox { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 10px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.pc-card { background: var(--panel2); border-radius: 12px; padding: 14px; position: relative; overflow: hidden; min-width: 0; }
.pc-card.user-card { display: flex; flex-direction: column; gap: 12px; }
.pc-card h4 { margin: 0 0 6px; font: 600 14px var(--head); }
.urow { display: flex; gap: 12px; align-items: center; }
.urow .ava { width: 62px; height: 62px; border-radius: 14px; font-size: 26px; }
.urow b { font: 600 15px var(--head); }
.urow .id { display: inline-block; margin-top: 4px; background: var(--panel3); padding: 3px 8px; border-radius: 6px; font-size: 11px; color: var(--muted); }
.bignum { font: 700 32px var(--head); display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; }
.bignum .coin { width: 20px; height: 20px; }
.best { background: linear-gradient(135deg, #2a2208, #3b2f08 55%, #1d1706); }
.best img { position: absolute; right: 6px; top: 20px; width: 62%; height: 130px; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .6)); }
.best .bn { position: absolute; left: 14px; bottom: 14px; font-size: 11px; color: var(--muted); }
.best .bn b { display: block; font: 700 13px var(--head); color: var(--text); text-transform: uppercase; }
.best .bn span { color: var(--accent); font: 600 13px var(--head); }
.stat2 { display: flex; justify-content: space-between; align-items: center; background: var(--panel2); border-radius: 10px; padding: 12px 14px; font-size: 12px; color: var(--muted); }
.stat2 b { color: var(--text); font: 700 18px var(--head); }
.statcol { display: flex; flex-direction: column; gap: 8px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 11px; color: var(--muted); }
.field .inp { width: 100%; }
.ava-pick { display: flex; gap: 5px; }
.ava-pick .ava { width: 26px; height: 26px; border-radius: 8px; font-size: 0; cursor: pointer; outline-offset: 2px; }
.ava-pick .ava.on { outline: 2px solid var(--accent); }
.tabs { display: flex; gap: 4px; align-items: center; margin: 14px 0 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px; flex-wrap: wrap; }
.tabs button { padding: 8px 12px; border-radius: 8px; color: var(--muted); font: 500 12px var(--ui); display: flex; gap: 6px; align-items: center; }
.tabs button.on { background: var(--accent); color: #1a1400; font-weight: 700; }
.tabs .sp { flex: 1; }
.tabs .toggle { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; margin-right: 8px; }
.sw { width: 34px; height: 18px; border-radius: 9px; background: #30323a; position: relative; cursor: pointer; transition: background .15s; }
.sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #aaa; transition: left .15s, background .15s; }
.sw.on { background: rgba(255, 214, 10, .35); }
.sw.on::after { left: 18px; background: var(--accent); }
.tpanel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.sellbar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.sellbar .sp { flex: 1; }

.hcard { position: relative; }
.ihist { display: flex; flex-direction: column; }
.hcard { background: var(--panel2); border-radius: 12px; padding: 8px; display: flex; gap: 6px; align-items: stretch; }
.hgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hside { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hside .hi { display: grid; gap: 4px; grid-template-columns: repeat(2, 1fr); }
.hside .hi .card { height: 82px; }
.hside .hi .card img { height: 40px; }
.hside .hi.one { grid-template-columns: 1fr; }
.hside .hi.one .card { height: 120px; }
.hside .hi.one .card img { height: 70px; }
.hlab { text-align: center; font-size: 9px; color: var(--dim); }
.hval { text-align: center; background: var(--panel3); border-radius: 6px; padding: 3px; font: 600 12px var(--head); display: flex; align-items: center; justify-content: center; gap: 4px; }
.hval.w { color: var(--win); }
.hval.l { color: var(--lose); }
.hmid { display: grid; place-items: center; color: var(--dim); }
.hbadge { position: absolute; left: 6px; bottom: 26px; font: 700 8px var(--head); padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .6); }
.hbadge.w { color: var(--win); }
.hbadge.l { color: var(--lose); }
.ihgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.ilab { text-align: center; font-size: 10px; margin-top: 3px; color: var(--muted); }
.wstatus { font: 700 9px var(--head); padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .6); position: absolute; left: 6px; bottom: 24px; }
.wstatus.p { color: var(--accent); }
.wstatus.s { color: #5ab4ff; }
.wstatus.d { color: var(--win); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.mini { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mini img { width: 54px; height: 36px; object-fit: contain; flex: none; }
.mini .mn { font-size: 12px; line-height: 1.25; min-width: 0; }
.mini .mn b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.mini .mn span { color: var(--muted); }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; word-break: break-all; }

.fair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fair .panel { padding: 16px; }
.fair p { color: var(--muted); line-height: 1.6; margin: 0 0 10px; }
.fair code { background: var(--panel2); padding: 2px 6px; border-radius: 6px; font-size: 12px; color: var(--accent); }
.kv { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.kv span { font-size: 12px; color: var(--muted); }
.kv div { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; }
.kv .inp { width: 100%; }
.verify-out { margin-top: 12px; background: var(--panel2); border-radius: 12px; padding: 14px; }
.verify-out b { font: 700 28px var(--head); color: var(--accent); }
.top-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.hero-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; gap: 12px; align-items: center; }
.hero-card .place { font: 800 32px var(--head); color: var(--dim); width: 34px; }
.hero-card:nth-child(1) .place { color: #ffd23c; }
.hero-card:nth-child(2) .place { color: #c9d2e0; }
.hero-card:nth-child(3) .place { color: #d98a4a; }
.hero-card img { width: 100px; height: 64px; object-fit: contain; margin-left: auto; }

.modal { position: fixed; inset: 0; z-index: 50; background: rgba(5, 5, 7, .72); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; animation: fade .2s; }
.modal-box { width: min(520px, 100%); max-height: 94vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 0; animation: rise .25s cubic-bezier(.2, .9, .3, 1); }
.mh { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; background: var(--panel2); border-bottom: 1px solid var(--line); font: 600 18px var(--head); }
.mh button { color: var(--muted); font-size: 20px; width: 30px; height: 30px; border-radius: 8px; }
.mh button:hover { color: var(--text); background: var(--panel3); }
.mbody { padding: 20px 22px 22px; }
.msec { margin-bottom: 20px; }
.msec-h { display: flex; justify-content: space-between; align-items: center; font: 600 15px var(--head); margin-bottom: 10px; }
.msec-h button { color: var(--accent); font: 500 12px var(--ui); }
.qrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qbox { background: var(--panel2); border-radius: 12px; padding: 12px; }
.qbox p { margin: 0 0 8px; font-size: 11px; color: var(--muted); }
.qin { display: flex; gap: 6px; }
.qin input { width: 100%; min-width: 0; background: var(--panel3); border: 1px solid var(--line); border-radius: 8px; padding: 8px; font: 600 14px var(--head); text-align: center; outline: none; }
.qin input:focus { border-color: var(--accent); }
.radio { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; cursor: pointer; }
.radio i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--dim); flex: none; margin-top: 1px; position: relative; }
.radio.on i { border-color: var(--accent); }
.radio.on i::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.radio b { display: block; font: 600 13px var(--head); }
.radio span { color: var(--muted); font-size: 11px; }
.preset { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.preset .chip { padding: 12px 0; font-size: 14px; text-align: center; }
.modal-actions { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(14px) scale(.97); opacity: 0; } }

.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 12px; padding: 11px 14px; min-width: 240px; max-width: 360px; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); animation: rise .25s; }
.toast.err { border-left-color: var(--lose); }
.toast.ok { border-left-color: var(--win); }

@media (max-width: 1180px) {
  .hstats { display: none; }
  .upg, .controls { grid-template-columns: 1fr 300px 1fr; }
  .lists, .fair { grid-template-columns: 1fr; }
  .pbox { grid-template-columns: 1fr 1fr; }
  .hgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  :root { --side: 0px; }
  .side { display: none; }
  .top { gap: 10px; padding: 0 12px; overflow-x: auto; }
  .nav { display: none; }
  .logo-text, .bonus-btn { display: none; }
  .user { margin-left: auto; }
  main { padding: 14px; }
  .foot { padding: 14px; }
  .upg, .controls { grid-template-columns: minmax(0, 1fr); }
  .upg > *, .controls > *, .lists > *, .fair > *, .pbox > * { min-width: 0; }
  .wheel { order: -1; }
  .slot { min-height: 220px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .pbox, .hgrid, .top-hero, .qrow { grid-template-columns: minmax(0, 1fr); }
  .inp.search { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.guest { text-align: center; padding: 50px 0 30px; }
.guest-sub { color: var(--muted); font-size: 16px; margin: 6px 0 22px; }
.gift { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 214, 10, .08); border: 1px solid rgba(255, 214, 10, .35); border-radius: 12px; padding: 10px 18px; margin-bottom: 24px; }
.gift b { color: var(--accent); font-family: var(--head); }
.steam-btn { display: inline-flex; align-items: center; gap: 8px; }
.steam-go { display: inline-flex; width: 320px; max-width: 100%; text-decoration: none; }
.steam-go svg { width: 22px; height: 22px; }
.logout { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); font-size: 18px; }
.logout:hover { color: var(--text); background: var(--panel); }

body { background: #0d0d0f; }
.top { background: #0d0d0f; border-bottom: 1px solid #1f2127; box-shadow: none; backdrop-filter: none; }
.panel, .slot, .balrow, .pbox, .tpanel, .tabs { background: #15161a; border: 1px solid #23252c; border-radius: 10px; box-shadow: none; }
.pc-card, .stat2, .hcard, .qbox, .kv div { background: #1b1c21; }
.slot::before { display: none; }
.upg-title { font-size: 26px; letter-spacing: 2px; text-shadow: none; }
.logo-mark { border-radius: 7px; }
.balance, .bonus-btn, .dep-btn { border-radius: 8px; }
.card { border-radius: 7px; background: #181a1f; border: 1px solid #262930; border-bottom: 2px solid var(--rc); box-shadow: none; }
.card:hover { transform: none; border-color: color-mix(in srgb, var(--rc) 70%, #262930); background: #1d1f25; box-shadow: none; }
.card.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.card img { filter: none; transition: transform .18s ease; }
.card:hover img { transform: scale(1.05); }
.qsell { position: absolute; left: 4px; right: 4px; bottom: 4px; z-index: 3; background: #0d0d0f; color: var(--accent); font: 700 10px var(--head); padding: 4px 0; border-radius: 5px; opacity: 0; transition: opacity .12s; }
.card:hover .qsell { opacity: 1; }
.qsell:hover { background: var(--accent); color: #1a1400; }
.sellall { height: 36px; padding: 0 12px; }
.go { background: var(--accent); box-shadow: none; border-radius: 8px; }
.go:hover:not(:disabled) { background: #ffe14a; filter: none; }
.go:disabled { background: #4a430f; color: #15130a; opacity: 1; }
.dep-btn { background: var(--accent); }
.wheel-box { isolation: isolate; }
.wheel-box::before { display: none; }
.wheel-arc { filter: none; }
.wheel-center.res-win, .wheel-center.res-lose { box-shadow: none; }
.wheel-center .pct { text-shadow: none; color: var(--accent); }
.wheel-center.res-win .res-t, .wheel-center.res-lose .res-t { text-shadow: none; }
.tk { transition: stroke .08s; }
.tk.hot { stroke: #ffd60a; stroke-width: 3; filter: none; }
@keyframes shake { 15% { transform: translateX(-7px); } 30% { transform: translateX(6px); } 45% { transform: translateX(-4px); } 60% { transform: translateX(3px); } 80% { transform: translateX(-1px); } }
.confetti { position: absolute; left: 50%; top: 50%; width: 220%; height: 220%; transform: translate(-50%, -50%); pointer-events: none; z-index: 5; }
.fi { box-shadow: none; border-radius: 6px; }
.nav a.on { text-shadow: none; }
.gift { background: transparent; border-radius: 8px; }
.bonus-btn.ready { animation: none; }
.toast { box-shadow: none; border-radius: 8px; }
.modal-box { border-radius: 14px; }
.mh { background: #1b1c21; }
.arrows { animation: none; }

:root { --head: "Exo 2", "Kanit", system-ui, sans-serif; }
@media (min-width: 901px) {
  :root { --side: 190px; }
  body { background: #0c0c0e; font-size: 15px; }
  .top { height: 70px; padding: 0 28px; gap: 26px; }
  .side { top: 70px; padding: 10px 0 0 10px; }
  .logo-mark { font-size: 20px; padding: 3px 10px; }
  .logo-text { font-size: 22px; }
  .nav a { font-size: 14px; padding: 10px 16px; }
  .balance { font-size: 17px; padding: 9px 16px; }
  .ava { width: 42px; height: 42px; }
  main { max-width: 1560px; padding: 28px 28px 50px calc(var(--side) + 28px); }
  .upg-title { font-size: 30px; margin: 0 0 14px; }
  .upg, .controls { grid-template-columns: 1fr 380px 1fr; gap: 16px; }
  .slot { min-height: 360px; padding: 18px; border-radius: 14px; }
  .slot-title { font-size: 15px; }
  .slot-sub { font-size: 12px; }
  .arrows { width: 130px; height: 130px; }
  .wheel-box { width: 360px; height: 360px; }
  .wheel-center { inset: 76px; }
  .wheel-center .pct { font-size: 52px; font-weight: 800; letter-spacing: -1px; }
  .wheel-center .sub { font-size: 13px; }
  .wheel-center .mult { font-size: 15px; }
  .rlabel { font-size: 11px; }
  .controls { margin-top: 14px; }
  .balrow { padding: 14px 18px; border-radius: 12px; }
  .balrow .bl { font-size: 13px; }
  .go { height: 60px; font-size: 20px; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 10px; }
  .qb { height: 46px; font-size: 16px; border-radius: 9px; }
  .lists { gap: 16px; margin-top: 22px; }
  .panel { padding: 16px; border-radius: 14px; }
  .panel-head h3 { font-size: 19px; }
  .inp, .sel, .sortb, .seg button, .cartb { height: 40px; border-radius: 9px; }
  .seg button { width: 40px; }
  .inp.search { width: 130px; }
  .inp.price { width: 64px; }
  .grid { gap: 10px; min-height: 590px; }
  .card { height: 136px; padding: 9px 9px 8px; border-radius: 10px; background: linear-gradient(180deg, #16171c 25%, color-mix(in srgb, var(--rc) 20%, #16171c) 100%); border: 1px solid #23252c; border-bottom: 3px solid var(--rc); }
  .card:hover { background: linear-gradient(180deg, #1a1b21 25%, color-mix(in srgb, var(--rc) 28%, #1a1b21) 100%); border-color: color-mix(in srgb, var(--rc) 60%, #23252c); }
  .card .cp { font-size: 14px; gap: 5px; }
  .card .cp i { width: 10px; height: 10px; }
  .card .cwr { font-size: 10px; top: 9px; right: 9px; }
  .card img { height: 68px; margin: 8px 0 4px; }
  .card .cw { font-size: 10px; }
  .card .cn { font-size: 12.5px; text-transform: uppercase; letter-spacing: .2px; }
  .card .chk { width: 16px; height: 16px; right: 8px; bottom: 8px; }
  .card .ch { font-size: 10px; right: 7px; bottom: 7px; }
  .stake-grid .card img { height: 80px; }
  .stake-grid.one .card { height: 250px; }
  .stake-grid.one .card img { height: 150px; }
  .target-big img { height: 190px; }
  .target-big .tn { font-size: 22px; }
  .target-big .tp { font-size: 22px; }
  .fi { height: 74px; border-radius: 8px; }
  .fi img { width: 104px; height: 66px; right: -6px; top: 4px; }
  .fi .fc { font-size: 11px; top: 6px; left: 9px; }
  .fi .fs { font-size: 12.5px; left: 9px; bottom: 22px; right: 54px; }
  .fi .fw { font-size: 10px; left: 9px; bottom: 7px; right: 54px; }
  .side-list { gap: 6px; }
  .ihgrid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .pbox { padding: 12px; gap: 12px; }
  .bignum { font-size: 36px; }
  .tabs button { font-size: 13px; padding: 9px 14px; }
}
.hstats b { font-size: 16px; }
.hstats { font-size: 10px; letter-spacing: .8px; }
@media (min-width: 901px) {
  .card .chk { top: 26px; bottom: auto; right: 9px; }
  .card .ch { top: 26px; bottom: auto; right: 8px; }
  .card .x { top: 24px; }
  .qsell { bottom: 6px; left: 6px; right: 6px; }
}
@media (min-width: 901px) {
  .card { height: 150px; }
  .grid { min-height: 640px; }
  .card:has(.buy) { height: 190px; }
  .stake-grid .card { height: 150px; }
  .stake-grid.one .card { height: 250px; }
}

.wheel { flex-direction: column; gap: 14px; }
.rhist { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.rdots { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; min-height: 24px; }
.rh { width: 26px; height: 24px; border-radius: 6px; display: grid; place-items: center; font: 700 10px var(--head); border: 1px solid; }
.rh.w { color: #35e07c; background: rgba(53, 224, 124, .1); border-color: rgba(53, 224, 124, .4); }
.rh.l { color: #ff4d5e; background: rgba(255, 77, 94, .08); border-color: rgba(255, 77, 94, .3); }
.rempty { color: var(--dim); font-size: 11px; }
@media (min-width: 901px) { .wheel { align-self: start; } }


:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body { font-family: var(--ui); }
.nav a { text-transform: none; letter-spacing: 0; font: 600 14px var(--ui); color: var(--muted); border-radius: 8px; }
.nav a:hover { color: var(--text); background: #181a1f; }
.nav a.on { color: var(--text); background: #1d1f25; box-shadow: none; text-shadow: none; }
.hstats { text-transform: none; font-size: 11px; letter-spacing: 0; }
.slot-title { font: 600 15px var(--ui); color: var(--text); }
.slot-sub { font-size: 12px; color: var(--muted); }
.slot { border-style: solid; }
.card .cp { background: rgba(0, 0, 0, .38); padding: 2px 7px; border-radius: 6px; width: max-content; font-size: 12.5px; }
.card .cn { text-transform: none; letter-spacing: 0; font: 600 13px var(--ui); }
.card .cw { font-size: 11px; }
.go { text-transform: none; letter-spacing: .2px; font: 700 18px var(--ui); }
.target-big .tn { text-transform: none; font: 700 22px var(--ui); }
.panel-head h3 { font: 700 18px var(--ui); }
.upg-title { font-size: 28px; }
.btn { border-radius: 9px; font: 600 13px var(--ui); background: #1d1f25; border: 1px solid #2a2d35; }
.btn:hover:not(:disabled) { background: #24272f; }
.btn.pri { background: var(--accent); color: #17140a; border-color: var(--accent); }
.chip, .qb { font-family: var(--ui); }
.tabs button { font-family: var(--ui); }
.foot { font-size: 12px; color: #6a6e7a; }

.bl { max-width: 1100px; margin: 0 auto; }
.bl-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.bl-head h2 { margin: 0; font: 800 28px var(--head); }
.bl-head .vs { color: var(--accent); font-style: italic; }
.bl-info { margin-left: auto; background: #1b1c21; border-radius: 8px; padding: 8px 14px; color: var(--muted); font-size: 13px; }
.bl-bar { display: flex; align-items: center; gap: 12px; background: #15161a; border: 1px solid #23252c; border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.bl-range { display: flex; align-items: center; gap: 8px; }
.bl-bar .btn.pri { margin-left: auto; }
.brow { display: grid; grid-template-columns: 110px 1fr 140px 220px; gap: 14px; align-items: center; background: #15161a; border: 1px solid #23252c; border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.brow.waiting { background: linear-gradient(90deg, #1d1b10 0, #15161a 220px); }
.brow.live { background: linear-gradient(90deg, #10201a 0, #15161a 220px); }
.bst { text-align: center; }
.bst-t { font: 700 11px var(--head); letter-spacing: 1px; color: var(--accent); }
.brow.live .bst-t { color: #35e07c; }
.brow.done .bst-t { color: var(--muted); }
.bst-b { font: 700 10px var(--head); color: var(--dim); letter-spacing: 1px; }
.bring { width: 52px; height: 52px; margin: 6px auto; border-radius: 50%; border: 4px solid #3a3410; border-top-color: var(--accent); display: grid; place-items: center; color: var(--accent); }
.bring.live { border-color: #123a24; border-top-color: #35e07c; color: #35e07c; }
.bring.done { border-color: #2a2c33; border-top-color: #565963; color: #565963; }
.bring svg { width: 22px; height: 22px; }
.bstake { display: flex; align-items: center; gap: 12px; background: #101114; border-radius: 10px; padding: 8px; min-width: 0; }
.bitems { display: flex; gap: 6px; flex: 1; min-width: 0; overflow: hidden; }
.bthumb { width: 64px; height: 56px; flex: none; border-radius: 8px; background: linear-gradient(180deg, #17181d 30%, color-mix(in srgb, var(--rc, #565963) 25%, #17181d)); border: 1px solid color-mix(in srgb, var(--rc, #565963) 50%, #23252c); display: grid; place-items: center; }
.bthumb img { width: 56px; height: 40px; object-fit: contain; }
.bthumb.more, .bthumb.bal { font: 700 12px var(--head); color: var(--muted); gap: 3px; }
.bthumb.bal { color: var(--accent); flex-direction: column; font-size: 11px; }
.bsum { font: 700 17px var(--head); display: flex; align-items: center; gap: 6px; white-space: nowrap; padding-left: 12px; border-left: 1px solid #23252c; }
.bplay { display: flex; gap: 8px; justify-content: center; }
.bplay .ava { width: 44px; height: 44px; border-radius: 50%; }
.bplus { width: 44px; height: 44px; border-radius: 50%; border: 1.5px dashed #5a4f12; color: var(--accent); display: grid; place-items: center; font-size: 22px; }
.bact { display: flex; flex-direction: column; gap: 8px; }
.bact .btn { text-align: center; }
.bact-row { display: flex; gap: 6px; }
.bact-row .btn:first-child { flex: 1; }
.bolt { width: 44px; padding: 0; }
.bwin { font-size: 12px; color: var(--muted); text-align: center; }

.bv { max-width: 1180px; margin: 0 auto; }
.bv-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.bv-state { color: var(--muted); font-size: 13px; min-width: 100px; text-align: right; }
.bv-grid { display: grid; grid-template-columns: 1fr 360px 1fr; gap: 20px; align-items: start; }
.bv-side { border-radius: 14px; padding: 16px; background: #15161a; border: 1px solid #23252c; position: relative; min-height: 340px; display: flex; flex-direction: column; align-items: center; }
.bv-side.c { background: linear-gradient(180deg, #123020 0, #15161a 70%); }
.bv-side.j { background: linear-gradient(180deg, #33230d 0, #15161a 70%); }
.bv-side.win { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.bv-side.lose { opacity: .55; }
.bv-name { align-self: flex-start; font: 700 17px var(--head); }
.bv-chance { position: absolute; top: 14px; right: 14px; background: rgba(0, 0, 0, .35); border-radius: 8px; padding: 4px 10px; font-size: 13px; color: var(--muted); }
.bv-chance b { color: #35e07c; }
.bv-side.j .bv-chance b { color: #ff9d2a; }
.bv-ava { margin: 22px 0; }
.bv-ava .ava { width: 150px; height: 150px; border-radius: 50%; font-size: 60px; }
.bv-ava.wait { width: 150px; height: 150px; display: grid; place-items: center; }
.bv-ava.wait .bplus { width: 120px; height: 120px; font-size: 44px; }
.bv-bet { margin-top: auto; width: 100%; display: flex; justify-content: space-between; align-items: center; background: #101114; border-radius: 10px; padding: 12px 14px; color: var(--muted); }
.bv-bet b { font: 700 18px var(--head); color: var(--text); display: flex; align-items: center; gap: 6px; }
.bv-mid { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bv-wheel { position: relative; width: 340px; height: 340px; }
.bv-wheel svg { width: 100%; height: 100%; overflow: visible; }
.bv-center { position: absolute; inset: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; }
.bv-c1 { font: 800 34px var(--head); }
.bv-c1.gold { color: var(--accent); font-size: 26px; max-width: 150px; overflow-wrap: anywhere; }
.bv-c2 { color: var(--muted); font-size: 13px; }
.bv-act { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.bv-sum { width: 100%; display: flex; justify-content: space-between; background: #15161a; border: 1px solid #23252c; border-radius: 10px; padding: 12px 16px; color: var(--muted); }
.bv-sum b { color: var(--text); font: 700 17px var(--head); }
.bv-lists { display: grid; grid-template-columns: 1fr 360px 1fr; gap: 20px; margin-top: 14px; }
.bv-lists > div { display: flex; flex-direction: column; gap: 8px; }
.bv-item { display: flex; align-items: center; gap: 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--rc, #565963) 22%, #15161a), #15161a 60%); border: 1px solid color-mix(in srgb, var(--rc, #565963) 55%, #23252c); border-radius: 10px; padding: 8px 14px; }
.bv-item img { width: 50px; height: 36px; object-fit: contain; }
.bv-item div { flex: 1; min-width: 0; line-height: 1.25; }
.bv-item small { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; }
.bv-item b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-item span { font: 700 13px var(--head); }
.bv-item.bal { border-color: #5a4f12; }
@media (max-width: 1100px) {
  .brow { grid-template-columns: 90px 1fr; }
  .bplay, .bact { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; }
  .bv-grid, .bv-lists { grid-template-columns: minmax(0, 1fr); }
  .bv-mid { order: -1; }
}