*,
*::before,
*::after{box-sizing:border-box}
*{margin:0;padding:0}

button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

:focus-visible{outline:2px solid var(--green);outline-offset:3px}

:root{
  --bg:#080e17;
  --bg-deep:#080e17;
  --sidebar:#111722;
  --board:#111722;
  --panel:#172130;
  --inset:#0c131d;
  --raised:#1f2b3d;

  --line-soft:#242f42;
  --line-deep:#242f42;

  --text:#cfd8e8;
  --muted:#9cabc4;
  --dim:#66758e;

  --accent:#0675e5;
  --accent-deep:#0559b0;
  --gold:#ffc400;

  --green:#22c55e;
  --green-shadow:#14532d;
  --green-mid:#16a34a;
  --green-deep:#14532d;
  --green-ink:#86efac;
  --green-line:#166534;

  --font-title:"DM Sans",system-ui,sans-serif;
  --font-mc:"DM Sans",system-ui,sans-serif;

  --r-sm:6px;
  --r-md:8px;
  --r-xl:8px;
  --r-board:10px;
  --rail:250px;
  --gap:18px;

  --hdr-h:66px;

}

html{height:100%}

body{
  min-height:100vh;
  display:flex;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-mc);
  font-size:14px;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
}

.sprite-sheet{display:none}

.sprite{image-rendering:pixelated;shape-rendering:crispEdges;flex-shrink:0}

.icon{width:18px;height:18px;flex-shrink:0}

.head{display:block;flex-shrink:0;border-radius:4px;image-rendering:pixelated}

.lvl{
  position:relative;
  display:inline-block;
  flex-shrink:0;
  padding:2px;
  border-radius:7px;
  background:conic-gradient(var(--c) calc(var(--p) * 360deg),rgba(255,255,255,.14) 0);
}

.lvl .head{border:2px solid var(--sidebar);border-radius:5px}

.lvl b{
  position:absolute;
  left:-5px;
  bottom:-5px;
  min-width:17px;
  height:15px;
  padding:0 3px;
  font-size:10px;
  font-weight:800;
  line-height:15px;
  text-align:center;
  color:#0b1018;
  background:var(--c);
  border-radius:4px;
  box-shadow:0 0 0 2px var(--sidebar);
}

.s16{width:16px;height:16px}
.s24{width:24px;height:24px}
.s32{width:32px;height:32px}
.s48{width:48px;height:48px}

main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--gap);
  padding:0 26px 26px;
}

.sidebar{
  position:sticky;
  top:0;
  align-self:flex-start;
  flex-shrink:0;
  width:var(--rail);
  height:100vh;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0 16px 16px;
  overflow-x:hidden;
  overflow-y:auto;
  background:var(--sidebar);
  border-right:1px solid var(--line-soft);
  transition:width .18s ease;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  justify-content:center;
  height:var(--hdr-h);
  margin:0 -16px 8px;
  padding:0 16px;
  border-bottom:1px solid var(--line-soft);
  transition:filter .12s;
}

.brand:hover{filter:brightness(1.1)}

.brand-mark{
  flex-shrink:0;
  width:34px;
  height:34px;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.45));
  transition:transform .3s cubic-bezier(.3,1.6,.5,1);
}

.brand:hover .brand-mark{transform:rotate(-14deg) scale(1.08)}
.brand-name img{display:block;width:auto;height:30px}

.nav-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 0 0 8px;
}

.rail-toggle{
  width:28px;
  height:26px;
  display:grid;
  place-items:center;
  color:var(--dim);
  border-radius:var(--r-sm);
  transition:color .12s,background .12s;
}

.rail-toggle:hover{color:#fff;background:var(--raised)}

.side-nav{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-height:0;
}

.nav-head{
  margin:14px 0 4px;
  padding:0 8px;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
}

.nav-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  height:40px;
  padding:0 16px;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  border-radius:var(--r-sm);
  white-space:nowrap;
  transition:background .14s,color .14s;
}

.nav-item svg{flex-shrink:0;color:var(--muted)}
.nav-item:hover{background:var(--panel);color:#fff}

.nav-item[aria-current="page"]{
  color:#fff;
  background:var(--panel);
}

.nav-item[aria-current="page"] svg{color:var(--accent)}

.nav-item--foot{margin-top:auto;flex-shrink:0}
.nav-item.is-soon{opacity:.55}

html.rail-shut .sidebar{width:64px;padding-left:8px;padding-right:8px}
html.rail-shut .brand{justify-content:center;padding:0}
html.rail-shut .brand-name,
html.rail-shut .nav-label,
html.rail-shut .nav-head{display:none}
html.rail-shut .nav-top{justify-content:center;padding:0}
html.rail-shut .nav-item{justify-content:center;gap:0;padding:5px 0}

.topbar{
  position:relative;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:100%;
  height:var(--hdr-h);
  padding:0 4px;
  border-bottom:2px solid var(--line-deep);
}

.balance-pill{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:210px;
  height:40px;
  padding:4px 12px 4px 4px;
  background:var(--panel);
  border-radius:var(--r-md);
  transition:filter .12s,transform .08s,box-shadow .08s;
}

.balance-pill:hover{filter:brightness(1.1)}

.balance-pill:active{transform:translateY(1px)}

.head-slot{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:var(--r-sm);
}

.head-slot .head{width:28px;height:28px;border-color:var(--panel)}
.head-slot.lvl b{box-shadow:0 0 0 2px var(--panel)}

.money{
  font-size:15px;
  font-weight:700;
  line-height:1;
  color:#fff;
}

.cur{
  margin-right:3px;
  font-style:normal;
  color:var(--green);
}

.cash .cur,
.is-cashout .cur{color:inherit;}

.caret{
  width:16px;
  height:8px;
  fill:var(--muted);
  transition:transform .15s;
}

.balance-pill .caret{
  margin-left:auto;
  transition:transform .38s cubic-bezier(.34,1.56,.64,1),fill .15s;
}

.balance-pill:hover .caret{fill:#fff}
.balance-pill:hover:not(.is-open) .caret{animation:caret-bob .9s ease-in-out infinite}
.balance-pill.is-open .caret{transform:rotate(180deg);fill:#fff}
.balance-pill.is-open{filter:brightness(1.12)}

@keyframes caret-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(3px)}
}

.page{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:22px;
}

.hdr{
  position:relative;
  flex-shrink:0;
  height:var(--hdr-h);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  padding:0 4px;
  border-bottom:1px solid var(--line-soft);
}

.hdr-right{grid-column:2;position:relative;display:flex;align-items:center;gap:8px}

.hdr-live{
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 4px;
  font-size:14px;
  color:var(--muted);
}

.hdr-live b{color:#fff;font-weight:700}

.hdr-bonus{
  display:flex;
  align-items:center;
  gap:7px;
  height:36px;
  padding:0 14px;
  font-size:14px;
  font-weight:600;
  color:#1f1600;
  background:var(--gold);
  border-radius:var(--r-sm);
  transition:filter .12s,transform .08s;
}

.hdr-bonus:hover{filter:brightness(1.08)}
.hdr-bonus:active{transform:translateY(1px)}
.hdr-bonus .icon{width:16px;height:16px}

.hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:320px;
  padding:48px;
  background:var(--sidebar);
  border-radius:var(--r-md);
}

.hero-bg{
  position:absolute;
  top:0;
  right:0;
  width:auto;
  height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);
  mask-image:linear-gradient(90deg,transparent,#000 30%);
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(8,14,23,.97) 10%,rgba(8,14,23,.85) 42%,rgba(8,14,23,.25) 70%,transparent 90%);
}

.hero-copy{position:relative;z-index:1;max-width:min(62%,600px)}

.hero-copy h1{
  font-family:var(--font-title);
  font-size:clamp(34px,3.6vw,48px);
  font-weight:800;
  line-height:1.15;
  color:#fff;
}

.hero-copy p{
  margin-top:16px;
  font-size:16px;
  line-height:1.5;
  color:var(--muted);
}

.hero-cta{display:flex;gap:16px;margin-top:28px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:48px;
  padding:0 32px;
  font-size:16px;
  font-weight:600;
  border-radius:var(--r-sm);
  transition:filter .12s,transform .08s,box-shadow .08s;
}

.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(1px);box-shadow:none}

.btn--go{
  color:#fff;
  background:var(--accent);
  border-color:var(--green-deep);
}

.btn--ghost{
  color:var(--text);
  background:var(--panel);
}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.promo{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--panel);
  border-radius:var(--r-md);
  transition:transform .12s,filter .12s;
}

.promo:hover{transform:translateY(-2px);filter:brightness(1.08)}
.promo:active{transform:translateY(1px)}

.promo-art{
  position:relative;
  flex:1 0 168px;
  overflow:hidden;
  background:var(--bg-deep);
  container-type:size;
}

.promo-art::before{
  content:"";
  position:absolute;
  inset:-100px;
  background:var(--art) 0 0/420% auto;
  filter:blur(34px) brightness(.95);
}

.promo-art img{
  position:absolute;
  top:0;
  left:50%;
  width:min(100%,280cqh);
  height:100%;
  object-fit:cover;
  object-position:50% 44%;
  transform:translateX(-50%);
}

@container (min-aspect-ratio:14/5){
  .promo-art img{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  }
}

.promo-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(9,15,20,.72));
}

.promo-bar{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 16px;
  background:var(--panel);
}

.promo-bar h3{
  font-size:15px;
  font-weight:600;
  color:#fff;
}

.promo-bar span{
  margin-left:auto;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
}

.findbar{
  display:flex;
  align-items:center;
  gap:10px;
  height:48px;
  padding:0 16px;
  background:var(--panel);
  border:1px solid transparent;
  border-radius:var(--r-md);
  transition:border-color .14s;
}

.findbar:focus-within{border-color:var(--accent)}
.findbar svg{flex-shrink:0;color:var(--muted)}

.findbar input{
  flex:1;
  min-width:0;
  background:none;
  border:0;
  outline:0;
  font-size:14px;
  color:#fff;
}

.findbar input::placeholder{color:var(--dim)}

.findbar-empty{
  padding:14px;
  font-size:14px;
  text-align:center;
  color:var(--dim);
  background:var(--inset);
  border-radius:var(--r-sm);
}

.shelf{display:flex;flex-direction:column;gap:12px}

.shelf-head{display:flex;align-items:center;gap:14px}

.shelf-head h2{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  font-weight:600;
  color:#fff;
}

.shelf-head h2 svg,
.board-head h2 svg{width:18px;height:18px;color:var(--accent)}

.shelf-rule{
  flex:1;
  height:1px;
  min-width:20px;
  background:var(--line-soft);
}

.shelf-tools{flex-shrink:0;display:flex;align-items:center;gap:6px}

.shelf-all{
  height:36px;
  padding:0 16px;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  background:var(--panel);
  border-radius:var(--r-sm);
}

a.shelf-all{display:inline-flex;align-items:center}
.shelf-all:hover{filter:brightness(1.18)}
.shelf-all:active{transform:translateY(1px)}

.arw{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  color:var(--text);
  background:var(--panel);
  border-radius:var(--r-sm);
}

.arw:hover{filter:brightness(1.18)}
.arw:active{transform:translateY(1px)}
.arw:disabled{opacity:.4;filter:none}

.track{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding-bottom:2px;
}

.track::-webkit-scrollbar{display:none}

.bigtile{
  position:relative;
  flex:0 0 auto;
  width:140px;
  height:186px;
  overflow:hidden;
  background:linear-gradient(160deg,var(--c1),var(--c2));
  border:2px solid var(--c1);
  border-radius:var(--r-sm);
  transition:transform .12s,filter .12s;
}

.bigtile:hover{transform:translateY(-3px);filter:brightness(1.1)}
.bigtile:active{transform:translateY(1px)}

.bigtile img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.bigtile::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(8,13,18,.88));
}

.bigtile-tag{
  position:absolute;
  z-index:2;
  top:8px;
  left:8px;
  padding:2px 8px;
  font-size:12px;
  font-weight:700;
  color:#fff;
  background:rgba(0,0,0,.55);
  border-radius:4px;
}

.bigtile-tag.is-hot{background:#e2542f}
.bigtile-tag.is-new{color:#fff;background:var(--green-mid)}

.bigtile-txt{
  position:absolute;
  z-index:2;
  left:10px;
  right:10px;
  bottom:9px;
}

.bigtile-txt b{
  display:block;
  font-size:16px;
  font-weight:800;
  color:#fff;
}

.bigtile-txt span{
  display:block;
  margin-top:3px;
  font-size:12px;
  color:var(--muted);
}

.bigtile{--c1:#33505c;--c2:#18272e}

.bigtile--mines    {--c1:#c0392b;--c2:#2a1210}
.bigtile--blackjack{--c1:#2e8b57;--c2:#0f2618}
.bigtile--coinflip {--c1:#d4a017;--c2:#2a1d0c}
.bigtile--rocket   {--c1:#6a3fb5;--c2:#1f1229}
.bigtile--roll     {--c1:#2f6fd6;--c2:#111d33}
.bigtile--slide    {--c1:#1f9e8a;--c2:#0f2618}
.bigtile--keno     {--c1:#7c3aed;--c2:#1c0f45}
.bigtile--cases    {--c1:#8a6a3a;--c2:#221a10}
.bigtile--battles  {--c1:#9b3b8a;--c2:#21101a}
.bigtile--upgrader {--c1:#12a372;--c2:#0b241c}

.bigtile.is-soon{cursor:default;filter:saturate(.5)}
.bigtile.is-soon:hover{transform:none;filter:saturate(.5) brightness(1.05)}
.bigtile.is-soon .bigtile-txt b{color:var(--muted)}

.board-sect{display:flex;flex-direction:column;gap:12px}

.board-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.board-head h2{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  font-weight:600;
  color:#fff;
}

.seg{
  margin-left:auto;
  display:flex;
  gap:4px;
  padding:4px;
  background:var(--panel);
  border-radius:var(--r-sm);
}

.seg button{
  padding:10px 28px;
  font-size:14px;
  font-weight:500;
  color:var(--text);
  border-radius:var(--r-sm);
  transition:color .12s,background .12s;
}

.seg button:hover{color:var(--text)}

.seg button.is-on{
  color:#fff;
  background:var(--raised);
}

.feed{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.feed-head,
.feed-row{
  display:grid;
  grid-template-columns:1.5fr 1.5fr 100px 100px 110px;
  gap:10px;
  align-items:center;
  padding:0 16px;
  min-height:58px;
  font-size:14px;
}

.feed-head{
  min-height:44px;
  color:var(--text);
}

.feed-row{
  color:var(--text);
  border-radius:var(--r-sm);
}

.feed-row:nth-child(odd){background:var(--sidebar)}

.feed-row.is-new{animation:feed-in .32s ease-out}

.feed-who,
.feed-game{
  display:flex;
  align-items:center;
  gap:8px;
  overflow:hidden;
  white-space:nowrap;
}

.feed-who .head{width:20px;height:20px;border-radius:3px}
.feed-game .icon{width:16px;height:16px;color:var(--muted)}

.feed-who b{
  color:var(--text);
  font-weight:400;
  overflow:hidden;
  text-overflow:ellipsis;
}

.feed-x{font-weight:700;color:var(--text);text-align:right}
.feed-pay{font-weight:700;text-align:right}
.feed-bet{text-align:right}

.feed-row.is-win .feed-x,
.feed-row.is-win .feed-pay{color:var(--green)}
.feed-row.is-win .feed-pay .cur{color:var(--green);}
.feed-row.is-lose .feed-x,
.feed-row.is-lose .feed-pay{color:var(--dim)}
.feed-row.is-lose .feed-pay .cur{color:var(--dim)}

@keyframes feed-in{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:none}
}

.site-foot{
  display:flex;
  flex-direction:column;
  gap:26px;
  margin-top:12px;
  padding-top:24px;
  border-top:1px solid var(--line-soft);
}

.foot-cols{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.fcol h3{
  font-size:17px;
  font-weight:600;
  color:#fff;
}

.fcol ul{margin-top:12px;display:flex;flex-direction:column;gap:9px;list-style:none}

.fcol a,
.fcol span{
  font-size:14px;
  color:var(--muted);
}

.fcol a:hover{color:var(--text)}

.foot-legal{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-bottom:8px;
  font-size:13px;
  line-height:1.6;
  color:var(--dim);
}

.foot-legal b{color:var(--muted);font-weight:400}

.foot-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.foot-links a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(156,171,196,.3)}
.foot-links a:hover{color:var(--text)}
.foot-links span{color:var(--dim)}

@media (max-width:1040px){
  .duo{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:repeat(2,1fr)}
  .hero-copy{max-width:min(72%,540px)}
}

@media (max-width:820px){
  .feed-head,
  .feed-row{grid-template-columns:1.3fr 1fr 90px}
  .feed-bet,
  .feed-x{display:none}
  .hdr-live{display:none}
}

@media (max-width:640px){
  .hero{min-height:250px;padding:24px 18px}
  .hero-copy{max-width:none}
  .hero-cta{flex-wrap:wrap}
  .foot-cols{grid-template-columns:1fr}
  .bigtile{width:116px;height:156px}
  .hdr-bonus span{display:none}
  .balance-pill{min-width:0}
  .board-head h2{width:100%}
  .seg{margin-left:0;width:100%}
  .seg button{flex:1}
}

.board{
  flex:1;
  width:min(1160px,100%);
  min-height:560px;
  background:var(--board);
  border:1px solid var(--line-soft);
  border-radius:var(--r-board);
  box-shadow:var(--shadow-board);
  overflow:hidden;
}

.board-inner{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  padding:24px;
}

.mines-head{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.title-slot{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:var(--inset);
  border-radius:var(--r-sm);
}

.mines-head h1{
  font-family:var(--font-title);
  font-size:26px;
  font-weight:800;
  color:#fff;
}

.online{
  margin-left:auto;
  font-size:14px;
  color:var(--muted);
}

.online b{color:#fff;font-weight:700}

.mines-wrap{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:clamp(268px,24%,320px) minmax(0,1fr);
  gap:var(--gap);
}

.controls,
.grid-panel{
  min-width:0;
  background:
    var(--panel);
  border-radius:var(--r-xl);
}

.controls{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.field{display:flex;flex-direction:column;gap:7px}

.controls label{
  font-size:14px;
  font-weight:500;
  color:var(--muted);
}

.bet-box,
.select-box{
  display:flex;
  align-items:center;
  gap:10px;
  height:44px;
  padding:0 12px;
  background:var(--inset);
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
}

.bet-box{transition:box-shadow .15s}
.bet-box:focus-within{box-shadow:0 0 0 2px rgba(6,117,229,.45)}

.bet-box .cur{font-size:16px}

.bet-box input{
  flex:1;
  width:100%;
  min-width:0;
  background:none;
  border:0;
  outline:0;
  color:#fff;
  font-size:16px;
  font-weight:600;
}

.select-box{cursor:pointer}

.select-box select{
  flex:1;
  appearance:none;
  -webkit-appearance:none;
  background:none;
  border:0;
  outline:0;
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
}

.select-box option{background:var(--panel);color:var(--text)}

.select-box .caret{margin-left:auto;pointer-events:none}
.select-box:hover .caret{transform:translateY(1px)}

.chip-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}

.chip,
.start,
.cash{
  border-radius:var(--r-sm);
  transition:filter .12s,transform .08s,box-shadow .08s;
}

.chip:active,
.start:active,
.cash.live:active{
  transform:translateY(1px);
}

.chip{
  padding:9px 2px;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  background:var(--raised);
}

.chip:hover{filter:brightness(1.18)}

.start{
  height:48px;
  font-size:16px;
  font-weight:600;
  color:#fff;
  background:var(--accent);
  border-color:var(--green-deep);
}

.start:hover{filter:brightness(1.08)}

.panel-foot{
  margin-top:auto;
  display:flex;
  justify-content:center;
  gap:24px;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
}

.panel-foot a{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:14px;
  color:var(--muted);
  transition:color .15s;
}

.panel-foot a:hover{color:var(--text)}

.grid-panel{
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:0;
}

.grid-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:15px;
  color:var(--muted);
}

.grid-meta b{
  color:#fff;
  font-weight:700;
}

.grid{
  margin:auto;
  width:min(100%,calc(100vh - 360px));
  aspect-ratio:1/1;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-template-rows:repeat(5,1fr);
  gap:11px;
}

.tile{
  position:relative;
  display:grid;
  place-items:center;
  background:#26354c;
  border-radius:var(--r-md);
  cursor:pointer;
  transition:transform .12s,filter .12s,box-shadow .12s;
}

.tile:hover{transform:translateY(-2px);background:#304260}
.tile:active{transform:translateY(1px);box-shadow:none}

.tile svg{width:48px;height:48px}

.tile.open{
  background:linear-gradient(180deg,#132730,#0e1f27);
  cursor:default;
}

.tile.open:hover{transform:none;filter:none}

.tile.gem{
  background:#0f2a3a;
  box-shadow:0 0 18px rgba(63,212,236,.14);
  animation:reveal .42s ease-out;
}

.tile.gem::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle,rgba(160,245,255,.75),transparent 62%);
  animation:burst .6s ease-out forwards;
  pointer-events:none;
}

.tile.boom{
  background:#4a1a1f;
  box-shadow:0 0 18px rgba(224,85,63,.2);
  animation:shake .5s ease-in-out;
}

.tile.boom::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle,rgba(255,196,120,.9),transparent 65%);
  animation:burst .75s ease-out forwards;
  pointer-events:none;
}

.mult-tag{
  animation:tag-in .3s ease-out .16s backwards;
  position:absolute;
  bottom:5px;
  padding:1px 7px;
  font-size:12px;
  color:#9ef0b3;
  background:rgba(0,0,0,.55);
  border-radius:5px;
}

.grid-foot{display:grid;grid-template-columns:2fr 1fr;gap:10px}

.cash{
  padding:13px;
  font-size:15px;
  font-weight:600;
  color:var(--text);
  background:var(--raised);
}

.cash.live{
  color:#fff;
  background:var(--green-mid);
}

.cash:hover{filter:brightness(1.15)}

.start:disabled,
.cash:disabled{
  color:var(--dim);
  background:var(--raised);
  cursor:not-allowed;
  filter:saturate(.4);
  transform:none;
}

.start:disabled:hover,
.cash:disabled:hover{filter:saturate(.4)}

.grid.is-idle .tile{cursor:default}
.grid.is-idle .tile:hover{transform:none;filter:none}

.tile.mine{
  background:#2a171b;
  opacity:.75;
}

.bet-box input:disabled,
.select-box select:disabled{opacity:.6;cursor:not-allowed}

@keyframes pop{
  0%{transform:scale(.82)}
  60%{transform:scale(1.05)}
  100%{transform:scale(1)}
}

@keyframes shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-3px)}
  75%{transform:translateX(3px)}
}

@media (prefers-reduced-motion:reduce){
  body:not(.motion-on) *,
  body:not(.motion-on) *::before,
  body:not(.motion-on) *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }

  body:not(.motion-on) .coin{transition-duration:700ms!important}
  body:not(.motion-on) .card-face{transition-duration:.3s!important}
  body:not(.motion-on) .slide-strip{transition-duration:3000ms!important}

  body:not(.motion-on) .grid.is-dealing .tile:not(.open){animation-duration:.2s!important}
  body:not(.motion-on) .tile.gem{animation-duration:.26s!important}
  body:not(.motion-on) .tile.gem::before{animation-duration:.34s!important}
  body:not(.motion-on) .tile.boom{animation-duration:.34s!important}
  body:not(.motion-on) .tile.boom::before{animation-duration:.4s!important}
  body:not(.motion-on) .tile.missed{animation-duration:.22s!important}
}

@media (max-width:1040px){
  .mines-wrap{grid-template-columns:1fr}
  .board{min-height:0}
  .panel-foot{margin-top:14px}
  .grid{width:min(100%,520px)}
}

@media (max-width:640px){
  :root{--rail:64px;--gap:12px;--r-board:24px}
  .sidebar .nav-label,
  .sidebar .brand-name,
  .sidebar .nav-head{display:none}
  .sidebar{padding-left:8px;padding-right:8px}
  .nav-item{justify-content:center;gap:0;padding:5px 0}
  .brand{justify-content:center;padding:0}
  main{padding:14px 12px 20px}
  .board-inner{padding:16px}
  .controls,.grid-panel{padding:14px}
  .mines-head h1{font-size:21px}
  .online{margin-left:0;width:100%}
  .grid{gap:8px}
  .tile svg{width:32px;height:32px}
  .mult-tag{font-size:9px}
  .cash{font-size:12px;padding:11px 4px}
  .games{grid-template-columns:1fr}
}

.modal-back{
  position:fixed;
  inset:0;
  z-index:50;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(4,8,14,.72);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  animation:fade .16s ease-out;
}

.modal{
  animation:modal-in .2s ease-out;
  width:min(440px,100%);
  max-height:86vh;
  overflow:auto;
  background:
    var(--panel);
  border-radius:var(--r-md);
  box-shadow:0 24px 50px rgba(0,0,0,.5);
}

.modal-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--line-soft);
}

.modal-head h3{
  flex:1;
  font-family:var(--font-title);
  font-size:17px;
  font-weight:700;
  color:#fff;
}

.modal-x{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  color:var(--muted);
  background:var(--raised);
  border-radius:8px;
}

.modal-x .icon{width:16px;height:16px}

.modal-head h3{display:flex;align-items:center;gap:10px}
.modal-head h3 .icon{width:20px;height:20px;color:var(--accent)}

.modal-back.is-closing{animation:fade-out .17s ease-in forwards}
.modal-back.is-closing .modal{animation:modal-out .17s ease-in forwards}

@keyframes fade-out{to{opacity:0}}
@keyframes modal-out{to{opacity:0;transform:translateY(8px) scale(.97)}}

.modal-x:hover{color:#fff;filter:brightness(1.2)}

.modal-body{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:16px;
  font-size:14px;
  line-height:1.6;
  color:var(--text);
}

.modal-body ul{padding-left:18px;color:var(--muted)}
.modal-body .note{font-size:13px;color:var(--dim)}
.modal-body .row{display:flex;align-items:center;gap:10px;cursor:pointer}
.modal-body .chip{padding:10px;font-size:14px}

.seeds{
  display:grid;
  gap:3px;
  padding:12px;
  font-size:13px;
  line-height:1.5;
  background:var(--inset);
  border-radius:var(--r-sm);
}

.seeds dt{color:var(--muted)}
.seeds dd{margin-bottom:8px;color:var(--green);word-break:break-all}
.seeds dd:last-child{margin-bottom:0}

.menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:20;
  display:flex;
  flex-direction:column;
  gap:2px;
  width:262px;
  padding:6px;
  background:#1a2536;
  border:1px solid #2a3850;
  border-radius:12px;
  box-shadow:0 20px 44px rgba(0,0,0,.5);
  transform-origin:24px 0;
  animation:menu-in .2s cubic-bezier(.2,.9,.3,1.2);
}

.menu.is-closing{animation:menu-out .14s ease-in forwards;pointer-events:none}

.menu-bal{
  display:grid;
  gap:2px;
  margin-bottom:4px;
  padding:10px 10px 12px;
  border-bottom:1px solid var(--line-soft);
}

.menu-bal span{font-size:12px;color:var(--muted)}
.menu-bal b{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.01em}
.menu-bal small{font-size:12px;color:var(--dim)}

.menu button{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:7px 8px;
  text-align:left;
  color:var(--text);
  border-radius:9px;
  transition:background .12s;
}

.menu button:hover{background:var(--raised)}

.menu-ico{
  flex-shrink:0;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  color:var(--muted);
  background:var(--inset);
  border-radius:8px;
  transition:color .12s,background .12s;
}

.menu-ico .icon{width:17px;height:17px}
.menu button:hover .menu-ico{color:#fff;background:var(--accent)}
.menu button[data-act="deposit"] .menu-ico{color:var(--green);background:rgba(34,197,94,.12)}
.menu button[data-act="deposit"]:hover .menu-ico{color:#062b12;background:var(--green)}

.menu-txt{display:grid;gap:1px}
.menu-txt b{font-size:14px;font-weight:600;color:#fff}
.menu-txt small{font-size:12px;color:var(--dim)}

@keyframes menu-in{
  from{opacity:0;transform:translateY(-8px) scale(.95)}
  to{opacity:1;transform:none}
}

@keyframes menu-out{
  to{opacity:0;transform:translateY(-6px) scale(.97)}
}

.hint-pop{
  position:fixed;
  z-index:80;
  max-width:260px;
  padding:8px 12px;
  font-size:13px;
  font-weight:600;
  line-height:1.35;
  text-align:center;
  color:#fff;
  background:#3a1d24;
  border:1px solid rgba(255,120,110,.45);
  border-radius:9px;
  box-shadow:0 12px 26px rgba(0,0,0,.45);
  pointer-events:none;
  transform-origin:var(--ax) 100%;
  animation:hint-in .18s cubic-bezier(.2,.9,.3,1.3);
}

.hint-pop b{color:#ffb4a8}

.hint-pop::after{
  content:"";
  position:absolute;
  left:var(--ax);
  bottom:-6px;
  width:10px;
  height:10px;
  margin-left:-5px;
  background:#3a1d24;
  border-right:1px solid rgba(255,120,110,.45);
  border-bottom:1px solid rgba(255,120,110,.45);
  transform:rotate(45deg);
}

.hint-pop.is-below{transform-origin:var(--ax) 0}
.hint-pop.is-below::after{top:-6px;bottom:auto;transform:rotate(225deg)}
.hint-pop.is-out{opacity:0;transition:opacity .18s}

@keyframes hint-in{
  from{opacity:0;transform:translateY(4px) scale(.94)}
  to{opacity:1;transform:none}
}

@keyframes fade{from{opacity:0}to{opacity:1}}

.no-anim *,
.no-anim *::before,
.no-anim *::after{
  animation-duration:.01ms!important;
  transition-duration:.01ms!important;
}

.no-anim .card-face{transition-duration:.01ms!important}

.grid.is-dealing .tile:not(.open){
  animation:deal .36s ease-out backwards;
  animation-delay:calc(var(--i,0) * 26ms);
}

@keyframes deal{
  from{opacity:0;transform:translateY(10px) scale(.86)}
  to{opacity:1;transform:none}
}

@keyframes reveal{
  0%{transform:perspective(320px) rotateY(78deg) scale(.92)}
  55%{transform:perspective(320px) rotateY(-10deg) scale(1.05)}
  100%{transform:none}
}

@keyframes burst{
  from{opacity:.85;transform:scale(.5)}
  to{opacity:0;transform:scale(1.5)}
}

.grid-panel.is-win{animation:win-glow .95s ease-out}

@keyframes win-glow{
  0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
  35%{box-shadow:0 0 0 2px rgba(85,255,85,.55),0 0 34px rgba(85,255,85,.28)}
}

.money.is-up{animation:bal-up .55s ease-out}
.money.is-down{animation:bal-down .55s ease-out}

@keyframes bal-up{
  0%{transform:scale(1)}
  30%{transform:scale(1.12);color:var(--green)}
  100%{transform:scale(1);color:#fff}
}

@keyframes bal-down{
  0%{transform:scale(1)}
  30%{transform:scale(.94);color:#ff8f7a}
  100%{transform:scale(1);color:#fff}
}

@keyframes bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

@keyframes modal-in{
  from{opacity:0;transform:translateY(10px) scale(.97)}
  to{opacity:1;transform:none}
}

@keyframes tag-in{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:none}
}

.hand-row{
  display:flex;
  flex-wrap:nowrap;
  gap:0;
  min-height:106px;
}

.hand-row .card + .card{margin-left:-38px}

.card{
  position:relative;
  width:72px;
  height:102px;
  perspective:720px;
  animation:card-in .32s ease-out backwards;
  animation-delay:calc(var(--i,0) * 140ms);
}

.card-face{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  backface-visibility:hidden;
  color:#23262b;
  background:#f2efe6;
  border-radius:8px;
  transition:transform .46s cubic-bezier(.2,.7,.3,1);
}

.card-face.is-red{color:#c22a2a}

.card-face:not(.is-back){
  align-items:flex-start;
  justify-content:flex-start;
  padding:7px 8px;
  gap:1px;
}

.card .rank{font-size:19px;font-weight:700;line-height:1}
.card .suit{width:16px;height:16px}

.card-face.is-back{
  transform:rotateY(0deg);
  background:
    repeating-conic-gradient(rgba(255,255,255,.1) 0% 25%,transparent 0% 50%) 0 0/10px 10px,
    linear-gradient(180deg,#44738b,#25495c);
  box-shadow:var(--lift),inset 0 0 0 3px rgba(255,255,255,.14);
}

.card-face:not(.is-back){transform:rotateY(180deg)}

.card.is-down .card-face.is-back{transform:rotateY(0deg)}
.card.is-down .card-face:not(.is-back){transform:rotateY(180deg)}
.card:not(.is-down) .card-face.is-back{transform:rotateY(-180deg)}
.card:not(.is-down) .card-face:not(.is-back){transform:rotateY(0deg)}

@keyframes card-in{
  from{opacity:0;transform:translateY(-24px) rotate(-7deg) scale(.9)}
  to{opacity:1;transform:none}
}

.table-note{
  padding:11px;
  text-align:center;
  font-size:15px;
  color:var(--muted);
  background:var(--inset);
  border-radius:var(--r-sm);
}

.table-note.is-win{color:var(--green);}
.table-note.is-lose{color:#ff8f7a}

.side-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.side{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:12px 6px;
  font-size:14px;
  color:var(--text);
  background:var(--raised);
  border-radius:var(--r-sm);
  transition:filter .12s,box-shadow .12s;
}

.side svg{width:48px;height:48px}

.side:hover{filter:brightness(1.15)}
.side.is-picked{box-shadow:0 0 0 2px var(--accent)}

.coin-stage{
  flex:1;
  display:grid;
  place-items:center;
  min-height:210px;
  perspective:900px;
}

.coin-toss{position:relative}
.coin-toss.is-tossing{animation:toss 1.6s cubic-bezier(.3,0,.35,1)}

@keyframes toss{
  0%{transform:translateY(0)}
  42%{transform:translateY(-54px)}
  100%{transform:translateY(0)}
}

.coin{
  position:relative;
  width:128px;
  height:128px;
  transform-style:preserve-3d;
  will-change:transform;
}

.coin-face{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.coin-face.is-back{transform:rotateX(180deg)}

.coin-face svg{
  width:128px;
  height:128px;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.45));
}

.coin-toss::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-26px;
  width:104px;
  height:16px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(0,0,0,.45),transparent 70%);
  pointer-events:none;
}

.coin.is-won{animation:coin-win .6s ease-out}
.coin.is-lost{animation:coin-dim .7s ease-out}

@keyframes coin-dim{
  40%{filter:brightness(.62) saturate(.6)}
  100%{filter:none}
}

@keyframes coin-win{
  0%,100%{filter:none}
  40%{filter:brightness(1.35) drop-shadow(0 0 16px rgba(85,255,85,.6))}
}

.flip-log{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  min-height:28px;
}

.flip-dot{
  display:grid;
  place-items:center;
  padding:4px;
  background:var(--inset);
  border-radius:4px;
  opacity:.6;
}

.flip-dot.is-win{
  opacity:1;
  box-shadow:0 0 0 1px rgba(85,255,85,.55);
}

@media (max-width:640px){
  .side svg{width:32px;height:32px}
  .card{width:58px;height:84px}
  .card .rank{font-size:16px}
  .card .suit{width:16px;height:16px}
  .coin{width:96px;height:96px}
  .coin-face svg{width:96px;height:96px}
}

.bj{
  position:relative;
  min-height:600px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:24px;
  overflow:hidden;
  background:
    radial-gradient(70% 60% at 50% 46%,rgba(47,125,246,.11),transparent 72%),
    linear-gradient(180deg,#19283e,#131e30);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.bj-shoe{
  position:absolute;
  top:20px;
  right:22px;
  width:58px;
  height:80px;
  pointer-events:none;
}

.bj-shoe i{
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 5px,transparent 5px 10px),
    linear-gradient(160deg,#3b8bff,#1552c8);
  border-radius:8px;
  box-shadow:0 6px 14px rgba(0,0,0,.45),inset 0 0 0 3px #1d5fd6,inset 0 0 0 4px rgba(255,255,255,.3);
}

.bj-shoe i:nth-child(1){transform:translate(-10px,8px) rotate(-12deg)}
.bj-shoe i:nth-child(2){transform:translate(-5px,4px) rotate(-6deg)}

.bj-seat{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.bj-tag{display:flex;align-items:center;gap:8px}

.bj-tag span{
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
}

.bj .hand-score{
  min-width:44px;
  height:28px;
  display:inline-grid;
  place-items:center;
  padding:0 10px;
  font-size:15px;
  font-weight:800;
  color:#fff;
  background:rgba(8,14,23,.72);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  font-variant-numeric:tabular-nums;
  transition:background .2s,color .2s;
}

.bj .hand-score.is-hidden{font-size:13px;color:var(--muted)}
.bj .hand-score.is-best{color:#062b12;background:var(--green);border-color:transparent}
.bj .hand-score.is-bust{color:#fff;background:#e2453c;border-color:transparent}

.bj .hand-row{display:flex;min-height:124px}
.bj .hand-row .card + .card{margin-left:-40px}

.bj .card{
  width:88px;
  height:124px;
  animation:bj-deal .46s cubic-bezier(.2,.8,.25,1) backwards;
}

#dealer-hand .card{--fx:340px;--fy:-30px}
#player-hand .card{--fx:340px;--fy:-380px}

@keyframes bj-deal{
  0%{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(26deg) scale(.7)}
  30%{opacity:1}
  100%{opacity:1;transform:none}
}

.bj .card-face{border-radius:10px}

.bj .card-face:not(.is-back){
  padding:8px 9px;
  color:#1b2230;
  background:linear-gradient(180deg,#ffffff,#eceff5);
  box-shadow:0 10px 22px rgba(0,0,0,.42),inset 0 0 0 1px rgba(0,0,0,.07);
}

.bj .card-face.is-red{color:#e03a3a}
.bj .card .rank{font-size:25px;font-weight:800;letter-spacing:-.02em}
.bj .card .suit{width:16px;height:16px;margin-top:3px}

.bj .card .pip{
  position:absolute;
  left:50%;
  top:58%;
  width:38px;
  height:38px;
  transform:translate(-50%,-50%);
}

.bj .card-face.is-back{
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 5px,transparent 5px 10px),
    linear-gradient(160deg,#3b8bff,#1552c8);
  box-shadow:0 10px 22px rgba(0,0,0,.42),inset 0 0 0 4px #1d5fd6,inset 0 0 0 5px rgba(255,255,255,.34);
}

.bj .card-face.is-back::after{
  content:"D";
  font:800 30px/1 var(--font-title);
  color:rgba(255,255,255,.88);
  text-shadow:0 2px 0 rgba(0,0,0,.22);
}

.bj-arc{
  position:relative;
  z-index:0;
  width:min(100%,560px);
  height:auto;
  margin:-14px 0 -10px;
  overflow:visible;
  pointer-events:none;
}

.bj-arc text{
  font-family:var(--font-title);
  font-weight:800;
  letter-spacing:.2em;
  fill:rgba(255,255,255,.16);
}

.bj-arc-big{font-size:21px}
.bj-arc-small{font-size:12px;letter-spacing:.26em;fill:rgba(255,255,255,.1)!important}
.bj-arc-line{fill:none;stroke:rgba(255,255,255,.06);stroke-width:2}

.bj-mid{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.bj .table-note{
  padding:8px 18px;
  font-size:14px;
  font-weight:700;
  color:var(--text);
  background:rgba(8,14,23,.6);
  border:1px solid rgba(255,255,255,.06);
  border-radius:999px;
}

.bj .table-note.is-win{color:#062b12;background:var(--green);border-color:transparent;animation:pop .35s ease-out}
.bj .table-note.is-lose{color:#fff;background:#c2372f;border-color:transparent;animation:pop .35s ease-out}

.act-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}

.act{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:46px;
  padding:0 22px;
  font-size:15px;
  font-weight:700;
  color:#fff;
  background:#243552;
  border:1px solid rgba(255,255,255,.07);
  border-radius:10px;
  box-shadow:0 4px 0 rgba(0,0,0,.28);
  transition:background .12s,transform .08s,box-shadow .08s,opacity .12s;
}

.act .icon{width:18px;height:18px}
.act--hit .icon{color:#4ade80}
.act--stand .icon{color:#fbbf24}

.act-x{
  min-width:24px;
  height:20px;
  display:inline-grid;
  place-items:center;
  padding:0 4px;
  font-size:12px;
  font-weight:800;
  color:#0b1220;
  background:#7ab2ff;
  border-radius:5px;
}

.act:hover:not(:disabled){background:#2d4266}
.act:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.28)}

.act:disabled{
  color:var(--dim);
  background:#1b2739;
  box-shadow:none;
  cursor:not-allowed;
}

.act:disabled .icon{color:var(--dim)}
.act:disabled .act-x{background:var(--dim)}

.table-info{
  position:absolute;
  z-index:1;
  left:18px;
  bottom:18px;
  display:flex;
  gap:18px;
  padding:9px 13px;
  font-size:13px;
  color:var(--muted);
  background:rgba(8,14,23,.6);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--r-sm);
}

.table-info div{display:flex;flex-direction:column;gap:3px}
.table-info b{font-size:13px;font-weight:700;color:#fff}

.hint{font-size:13px;color:var(--dim);text-align:center}

.rocket-panel,
.roll-panel,
.slide-panel{justify-content:flex-start;gap:14px}

.sky{
  position:relative;
  flex:1;
  min-height:220px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--inset);
  border-radius:var(--r-sm);
}

.sky-mult{
  position:absolute;
  top:16px;
  left:0;
  right:0;
  z-index:1;
  text-align:center;
  font-size:46px;
  font-weight:700;
  line-height:1.1;
  color:#fff;
  font-variant-numeric:tabular-nums;
}

.sky-mult.is-flying{color:var(--green);}
.sky-mult.is-crashed{color:#ff8f7a}

.sky-rocket{
  position:absolute;
  left:50%;
  bottom:calc(10px + var(--alt,0) * (100% - 64px - 92px));
  width:64px;
  height:64px;
  transform:translateX(-50%);
  transition:bottom .12s linear;
}

.sky.is-flying .sky-rocket{animation:hover-shake .18s linear infinite}
.sky.is-crashed .sky-rocket{opacity:.25;filter:grayscale(1)}

@keyframes hover-shake{
  0%,100%{margin-left:0}
  50%{margin-left:2px}
}

.offline{
  padding:0 20px;
  font-size:14px;
  line-height:1.6;
  text-align:center;
  color:var(--muted);
}

.offline code{
  padding:2px 6px;
  color:var(--green);
  background:rgba(0,0,0,.4);
  border-radius:4px;
}

.crash-log{display:flex;flex-wrap:wrap;gap:6px;min-height:26px}

.crash{
  padding:3px 8px;
  font-size:13px;
  font-weight:700;
  border-radius:4px;
  background:var(--inset);
}

.crash.is-bust{color:#ff8f7a}
.crash.is-good{color:var(--green)}
.crash.is-huge{color:#ffd24a}

.players{
  display:flex;
  flex-direction:column;
  gap:2px;
  max-height:184px;
  overflow-y:auto;
  padding:10px;
  background:var(--inset);
  border-radius:var(--r-sm);
}

.players-head,
.player{
  display:grid;
  grid-template-columns:1fr auto 70px;
  gap:10px;
  align-items:center;
  padding:5px 4px;
  font-size:13px;
}

.players-head{color:var(--dim);border-bottom:1px solid var(--line-soft);margin-bottom:4px}
.player{color:var(--text);border-radius:4px}
.player.is-me{background:rgba(85,255,85,.08);box-shadow:inset 0 0 0 1px rgba(85,255,85,.2)}
.player-who .head{width:18px;height:18px;border-radius:3px}
.player-who{display:flex;align-items:center;gap:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player b{font-weight:700}
.player b.is-win{color:var(--green)}
.player b.is-lose{color:#ff8f7a}
.players-empty{padding:14px 0;text-align:center;font-size:13px;color:var(--dim)}

.start.is-cashout{
  background:var(--gold);
  color:#1f1600;
}

.slider{
  width:100%;
  height:26px;
  appearance:none;
  background:none;
  cursor:pointer;
}

.slider::-webkit-slider-runnable-track{
  height:12px;
  background:var(--inset);
  border-radius:4px;
}

.slider::-webkit-slider-thumb{
  appearance:none;
  width:18px;
  height:24px;
  margin-top:-6px;
  background:var(--accent);
  border-radius:4px;
}

.slider::-moz-range-track{height:12px;background:var(--inset);border-radius:4px}
.slider::-moz-range-thumb{
  width:18px;height:24px;border:2px solid var(--accent-deep);border-radius:4px;
  background:var(--accent);
}

.controls label b{color:#fff;font-weight:700}

.odds{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:10px 13px;
  font-size:13px;
  color:var(--muted);
  background:var(--inset);
  border-radius:var(--r-sm);
}

.odds div{display:flex;flex-direction:column;gap:3px}
.odds b{font-size:14px;color:#fff;font-weight:700;}

.roll-stage{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
  padding:20px 10px;
}

.roll-number{
  font-size:46px;
  font-weight:700;
  text-align:center;
  color:#fff;
}

.roll-number.is-win{color:var(--green);}
.roll-number.is-lose{color:#ff8f7a}

.roll-track{
  position:relative;
  height:20px;
  background:#2a1616;
  border-radius:5px;
}

.roll-fill{
  position:absolute;
  inset:0 auto 0 0;
  background:var(--green-mid);
  border-radius:5px 0 0 5px;
}

.roll-marker{
  position:absolute;
  top:-5px;
  bottom:-5px;
  width:3px;
  background:#fff;
  transform:translateX(-50%);
}

.roll-pin{
  position:absolute;
  top:-12px;
  bottom:-12px;
  width:4px;
  background:#ffd24a;
  box-shadow:0 0 10px rgba(255,210,74,.8);
  transform:translateX(-50%);
}

.roll-scale{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:var(--dim);
}

.pick-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}

.pick{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:10px 4px;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  background:var(--raised);
  border-radius:var(--r-sm);
  transition:filter .12s,box-shadow .12s;
}

.pick svg{width:32px;height:32px}
.pick:hover{filter:brightness(1.15)}
.pick.is-picked{box-shadow:0 0 0 2px var(--accent)}

.slide-stage{
  position:relative;
  flex:1;
  min-width:0;
  min-height:150px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--inset);
  border-radius:var(--r-sm);
}

.slide-strip{display:flex;will-change:transform}

.slide-tile{
  flex:0 0 76px;
  height:96px;
  margin:0 4px;
  display:grid;
  place-items:center;
  border-radius:var(--r-sm);
}

.slide-tile svg{width:48px;height:48px}
.slide-tile.is-emerald{background:#123524}
.slide-tile.is-gold{background:#3a2c10}
.slide-tile.is-diamond{background:#0f2f3d}

.slide-pointer{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  z-index:2;
  width:4px;
  margin-left:-2px;
  background:var(--green);
  box-shadow:0 0 10px rgba(34,197,94,.6);
  pointer-events:none;
}

@media (max-width:640px){
  .sky-mult,.roll-number{font-size:34px}
  .slide-tile{flex-basis:60px;height:76px}
  .slide-tile svg{width:32px;height:32px}
  .players{max-height:150px}
}

.settings-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.stab{
  padding:10px 16px;
  font-size:14px;
  color:var(--muted);
  background:var(--raised);
  border-radius:var(--r-sm);
  transition:filter .12s,color .12s;
}

.stab:hover{filter:brightness(1.15)}
.stab.is-on{color:#fff;background:var(--accent)}

.settings-body{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:18px;
  background:
    var(--panel);
  border:1px solid var(--line-soft);
  border-radius:var(--r-xl);
}

.spanel{display:none;flex-direction:column;gap:16px;max-width:460px}
.spanel.is-on{display:flex}

.avatar-row{display:flex;flex-wrap:wrap;gap:8px}

.avatar .head{width:40px;height:40px}

.avatar{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  background:var(--inset);
  border-radius:var(--r-sm);
  transition:filter .12s,box-shadow .12s;
}

.avatar:hover{filter:brightness(1.2)}
.avatar.is-picked{box-shadow:0 0 0 2px var(--accent)}

.srow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  font-size:14px;
  color:var(--text);
  background:var(--inset);
  border-radius:var(--r-sm);
  cursor:pointer;
}

.srow .chip{padding:8px 12px;font-size:13px}

.tx-head,
.tx{
  display:grid;
  grid-template-columns:72px 1fr 90px 90px;
  gap:10px;
  padding:7px 6px;
  font-size:13px;
}

.tx-head{color:var(--dim);border-bottom:1px solid var(--line-soft)}
.tx{color:var(--text);border-bottom:1px solid rgba(255,255,255,.03)}
.tx .is-win{color:var(--green)}
.tx .is-lose{color:#ff8f7a}
.tx-list{display:flex;flex-direction:column}

.spanel[data-panel="history"]{max-width:none}

.tile.missed{
  background:var(--inset);
  opacity:.4;
  animation:settle .28s ease-out;
}

.tile.missed svg{opacity:.55}

@keyframes settle{
  from{opacity:0;transform:scale(.9)}
  to{opacity:.4;transform:none}
}

.roll-track{cursor:ew-resize}
.roll-track.is-dragging{box-shadow:0 0 0 2px rgba(6,117,229,.45)}

@media (max-width:640px){
  .tx-head,.tx{grid-template-columns:60px 1fr 78px;font-size:12px}
  .tx-head span:last-child,.tx span:last-child{display:none}
}

.mode-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:4px;
  background:var(--inset);
  border-radius:var(--r-sm);
}

.mtab{
  padding:8px 4px;
  font-size:14px;
  color:var(--muted);
  border-radius:var(--r-sm);
  transition:color .12s,background .12s;
}

.mtab:hover{color:var(--text)}

.mtab.is-on{
  color:#fff;
  background:var(--raised);
}

body:not(.auto-mode) .auto-only{display:none}

.start.is-stop{
  background:#e2453c;
  color:#fff;
}

.auto-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.unit{
  font-size:13px;
  font-style:normal;
  color:var(--muted);
}

.auto-btn{margin-top:2px}

.chat{
  position:sticky;
  top:0;
  flex-shrink:0;
  width:280px;
  height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--sidebar);
  border-left:1px solid var(--line-soft);
}

html.chat-shut .chat{display:none}

.chat-show{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:40;
  width:48px;
  height:48px;
  display:none;
  place-items:center;
  background:var(--accent);
  border-radius:var(--r-md);
}

html.chat-shut .chat-show{display:grid}
.chat-show:hover{filter:brightness(1.15)}
.chat-show .icon{width:22px;height:22px;color:var(--text)}

.chat-head{
  flex-shrink:0;
  height:var(--hdr-h);
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border-bottom:1px solid var(--line-soft);
}

.chat-title{
  flex:1;
  font-size:14px;
  font-weight:600;
  color:var(--text);
}

.chat-online{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  color:var(--muted);
}

.live-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 7px var(--green);
  animation:live 2.4s ease-in-out infinite;
}

@keyframes live{0%,100%{opacity:1}50%{opacity:.3}}

.chat-hide{
  width:24px;
  height:24px;
  font-size:16px;
  line-height:1;
  color:var(--dim);
  border-radius:var(--r-sm);
}

.chat-hide:hover{color:#fff;background:var(--raised)}

.rain{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:10px;
  padding:12px;
  background:radial-gradient(120% 90% at 0% 0%,rgba(255,196,0,.1),transparent 55%),var(--panel);
  border:1px solid rgba(255,196,0,.32);
  border-radius:10px;
}

.rain-head{display:flex;align-items:center;gap:10px}

.rain-ico{
  flex-shrink:0;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  color:var(--gold);
  background:rgba(255,196,0,.12);
  border-radius:8px;
}

.rain-ico .icon{width:17px;height:17px}

.rain-title{flex:1;min-width:0;display:grid;gap:1px}
.rain-title b{font-size:15px;font-weight:800;color:var(--gold)}

.rain-title span{
  overflow:hidden;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap;
  text-overflow:ellipsis;
}

.rain-time{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 9px;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  background:var(--inset);
  border-radius:999px;
  font-variant-numeric:tabular-nums;
  transition:background .2s,color .2s;
}

.rain-time .icon{width:13px;height:13px;color:var(--muted)}

.rain-mid{display:flex;align-items:center;justify-content:space-between;gap:8px}

.rain-pot{
  font-size:22px;
  font-weight:800;
  letter-spacing:-.01em;
  color:#fff;
  font-variant-numeric:tabular-nums;
}

.rain-who{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.rain-heads{display:flex}

.rain-heads .head{
  width:20px;
  height:20px;
  margin-left:-6px;
  border:2px solid var(--panel);
  border-radius:6px;
}

.rain-heads .head:first-child{margin-left:0}
.rain-who em{font-style:normal;font-weight:700;color:var(--text);white-space:nowrap}

.rain-bar{
  position:relative;
  height:4px;
  overflow:hidden;
  background:var(--inset);
  border-radius:999px;
}

.rain-bar i{
  position:absolute;
  inset:0 auto 0 0;
  width:0;
  background:var(--gold);
  border-radius:inherit;
  transition:width .5s linear;
}

.rain-join{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:38px;
  font-size:14px;
  font-weight:700;
  color:#1f1600;
  background:var(--gold);
  border-radius:8px;
  transition:filter .12s,transform .08s,background .2s,color .2s;
}

.rain-join .icon{width:17px;height:17px}
.rain-join:hover:not(:disabled){filter:brightness(1.08)}
.rain-join:active:not(:disabled){transform:translateY(1px)}

.rain.is-in .rain-join{
  color:#86efac;
  background:rgba(34,197,94,.12);
  box-shadow:inset 0 0 0 1px rgba(34,197,94,.35);
  cursor:default;
}

.rain.is-soon .rain-time{color:#1f1600;background:var(--gold)}
.rain.is-soon .rain-time .icon{color:#1f1600}
.rain.is-soon:not(.is-in) .rain-join{animation:rain-nudge 1s ease-in-out infinite}

@keyframes rain-nudge{
  50%{box-shadow:0 0 0 4px rgba(255,196,0,.25)}
}

.rain.is-drop,
.rain.is-flash{animation:rain-pay 1.2s ease-out}
.rain.is-drop .rain-pot{animation:pop .5s ease-out}

@keyframes rain-pay{
  0%{border-color:rgba(255,196,0,.95);box-shadow:0 0 26px rgba(255,196,0,.35)}
  100%{border-color:rgba(255,196,0,.32);box-shadow:none}
}

.chat-log{
  flex:1;
  min-height:0;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:4px 12px 12px;
}

.chat-line{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  column-gap:10px;
  row-gap:4px;
  font-size:14px;
  line-height:1.4;
  animation:chat-in .22s ease-out;
}

.chat-av{grid-row:span 2;align-self:start;border-radius:8px;transition:filter .12s,transform .08s}
.chat-av:hover{filter:brightness(1.15)}
.chat-av:active{transform:scale(.95)}
.chat-av .head{width:32px;height:32px}
.chat-meta{display:flex;align-items:baseline;gap:6px;min-width:0}
.chat-name{color:var(--text);font-weight:600;text-align:left}
.chat-name:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.chat-time{font-size:12px;color:var(--dim)}
.chat-line.is-mine .chat-name{color:var(--green)}

.chat-text{
  justify-self:start;
  max-width:100%;
  padding:8px 10px;
  color:#fff;
  background:var(--panel);
  border-radius:var(--r-sm);
  word-break:break-word;
}

.chat-line.is-system{display:block}

.chat-sys{
  display:block;
  width:100%;
  padding:7px 10px;
  font-size:13px;
  line-height:1.45;
  text-align:center;
  color:var(--green-ink);
  background:rgba(85,255,85,.07);
  border-radius:8px;
}

.chat-sys .icon{width:14px;height:14px;margin-right:6px;vertical-align:-2px}
.chat-sys b{color:#fff}
.chat-sys-who{font-weight:700;color:#fff}
button.chat-sys-who:hover{text-decoration:underline;text-underline-offset:3px}

.chat-line.is-rain .chat-sys{color:#9cc8ff;background:rgba(56,139,253,.09)}
.chat-line.is-rain-paid .chat-sys{color:#9cc8ff;background:linear-gradient(90deg,rgba(56,139,253,.14),rgba(94,200,255,.06))}
.chat-line.is-tip .chat-sys{color:#ffd76a;background:rgba(255,196,0,.08)}

@keyframes chat-in{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:none}
}

.chat-form{
  display:flex;
  gap:8px;
  padding:12px;
  border-top:1px solid var(--line-soft);
}

.chat-form input{
  flex:1;
  min-width:0;
  height:40px;
  padding:0 12px;
  font-size:14px;
  color:#fff;
  background:var(--panel);
  border:1px solid transparent;
  outline:0;
  border-radius:var(--r-sm);
}

.chat-form input:focus{border-color:var(--accent)}

.chat-send{
  padding:0 14px;
  font-size:13px;
  font-weight:600;
  color:#fff;
  background:var(--accent);
  border-radius:var(--r-sm);
}

.chat-send:hover{filter:brightness(1.15)}

@media (max-width:1180px){
  .chat{display:none}
  .chat-show{display:grid}
  html.chat-shut .chat-show{display:grid}
}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}

::-webkit-scrollbar-thumb{
  background:#243247;
  background-clip:padding-box;
  border:3px solid transparent;
  border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{background-color:#33465f}
::-webkit-scrollbar-corner{background:transparent}

.sidebar::-webkit-scrollbar,
.chat-log::-webkit-scrollbar,
.wal-coins::-webkit-scrollbar,
.players::-webkit-scrollbar{width:8px}

@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin;scrollbar-color:#2a3a52 transparent}
}

html{background:var(--bg)}

.balance-pill.has-wallet{border-top-right-radius:0;border-bottom-right-radius:0}

.hdr-wallet{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:40px;
  margin-left:-8px;
  padding:0 14px 0 12px;
  font-size:14px;
  font-weight:700;
  color:#fff;
  background:var(--accent);
  border-radius:0 var(--r-md) var(--r-md) 0;
  transition:filter .12s,transform .08s;
}

.hdr-wallet .icon{width:17px;height:17px}
.hdr-wallet:hover{filter:brightness(1.12)}
.hdr-wallet:active{transform:translateY(1px)}

.start .icon,
.chip .icon{width:18px;height:18px;margin-right:8px;vertical-align:-4px}

.chip-row--3{grid-template-columns:repeat(3,1fr)}
.chip-row--4{grid-template-columns:repeat(4,1fr)}
.chip-row--5{grid-template-columns:repeat(5,1fr)}
.chip-row--6{grid-template-columns:repeat(6,1fr)}

.you-chip{
  display:inline-block;
  padding:1px 6px;
  font-size:10px;
  font-weight:800;
  font-style:normal;
  line-height:15px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#062b12;
  background:var(--green);
  border-radius:4px;
  vertical-align:1px;
}

.bot-tag{
  display:inline-block;
  margin-left:5px;
  padding:1px 5px;
  font-size:9.5px;
  font-weight:800;
  font-style:normal;
  line-height:14px;
  letter-spacing:.06em;
  color:#dbe7ff;
  background:#3b4a66;
  border:1px solid #56688c;
  border-radius:4px;
  vertical-align:1px;
}

.tier-chip{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:2px 8px;
  font-size:11px;
  font-weight:700;
  color:var(--c);
  background:color-mix(in srgb,var(--c) 15%,transparent);
  border-radius:999px;
}

.demo-chip{
  padding:3px 8px;
  font-size:11px;
  font-weight:700;
  font-style:normal;
  line-height:1.2;
  color:var(--gold);
  background:rgba(255,196,0,.12);
  border-radius:999px;
}

.demo-chip{margin-left:6px;padding:1px 6px;font-size:10px;color:var(--muted);background:var(--raised)}

.status-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  font-size:11px;
  font-weight:700;
  font-style:normal;
  color:#86efac;
  background:rgba(34,197,94,.14);
  border-radius:999px;
}

.status-chip .icon{width:12px;height:12px}

.lvl--md .head{width:44px;height:44px;border-radius:7px}
.lvl--xl{border-radius:12px;padding:3px}
.lvl--xl .head{width:76px;height:76px;border-width:3px;border-radius:9px}

.lvl--xl b{
  left:-7px;
  bottom:-7px;
  min-width:24px;
  height:20px;
  font-size:12px;
  line-height:20px;
  border-radius:6px;
}

.ghost-av{
  flex-shrink:0;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  color:#8ea0bd;
  background:#223047;
  border-radius:10px;
}

.ghost-av .icon{width:24px;height:24px}
.ghost-av--sm{width:32px;height:32px;border-radius:8px}
.ghost-av--sm .icon{width:17px;height:17px}
.ghost-av--xs{width:20px;height:20px;border-radius:4px}
.ghost-av--xs .icon{width:12px;height:12px}

.spin{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

[data-user],
[data-ghost]{cursor:pointer}

.feed-cell{min-width:0}

.feed-who{
  max-width:100%;
  text-align:left;
  border-radius:6px;
}

.feed-who:hover b{color:#fff!important;text-decoration:underline;text-underline-offset:3px}
.feed-who.is-ghost b{color:var(--muted)}
.feed-who .you-chip{flex-shrink:0}
.feed-game{transition:color .12s}
.feed-game:hover{color:#fff}
.feed-game:hover .icon{color:var(--accent)}
.feed-row.is-yours{box-shadow:inset 3px 0 0 var(--accent)}

.player-who{min-width:0;text-align:left}
.player-who:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

.chat-line.is-win{display:block}

.chat-line.is-big {--w:#22c55e;--w-rgb:34,197,94}
.chat-line.is-huge{--w:#ffc400;--w-rgb:255,196,0}
.chat-line.is-mega{--w:#c084fc;--w-rgb:192,132,252}

.cwin{
  position:relative;
  overflow:hidden;
  padding:10px 12px 11px;
  background:
    linear-gradient(135deg,rgba(var(--w-rgb),.17),rgba(var(--w-rgb),.03) 65%),
    var(--panel);
  border:1px solid rgba(var(--w-rgb),.36);
  border-radius:10px;
}

.cwin::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.13) 50%,transparent 65%);
  transform:translateX(-100%);
  animation:cwin-shine 1.3s .15s ease-out forwards;
  pointer-events:none;
}

.chat-line.is-mega .cwin::after{animation-iteration-count:2}

@keyframes cwin-shine{to{transform:translateX(100%)}}

.cwin-top{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--w);
}

.cwin-top .icon{width:15px;height:15px}

.cwin-x{
  margin-left:auto;
  padding:2px 8px;
  font-size:12px;
  letter-spacing:0;
  color:var(--w);
  background:rgba(var(--w-rgb),.16);
  border-radius:999px;
  font-variant-numeric:tabular-nums;
}

.cwin-body{display:flex;align-items:center;gap:10px;margin-top:8px}
.cwin-av{flex-shrink:0;border-radius:8px}
.cwin-av:hover{filter:brightness(1.15)}
.cwin-av .head{width:30px;height:30px}

.cwin-txt{min-width:0;font-size:13px;line-height:1.5;color:var(--muted)}
.cwin-name{font-weight:700;color:#fff}
.cwin-name:hover{text-decoration:underline;text-underline-offset:3px}
.cwin-pay{font-weight:800;color:#fff}

.cwin-game{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0 6px;
  font-weight:600;
  color:var(--text);
  background:rgba(255,255,255,.06);
  border-radius:5px;
  vertical-align:1px;
}

.cwin-game .icon{width:12px;height:12px}
.cwin-game:hover{color:#fff;background:rgba(255,255,255,.12)}

.chat-line.is-yours .cwin{border-width:2px}

.pcard{
  position:fixed;
  z-index:70;
  width:304px;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  background:#1a2536;
  border:1px solid #2c3b55;
  border-radius:14px;
  box-shadow:0 24px 54px rgba(0,0,0,.55);
  transform-origin:var(--ax) 100%;
  animation:pcard-in .2s cubic-bezier(.2,.9,.3,1.25);
}

.pcard.is-below{transform-origin:var(--ax) 0;animation-name:pcard-in-below}
.pcard.is-out{animation:pcard-out .13s ease-in forwards;pointer-events:none}

@keyframes pcard-in{from{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:none}}
@keyframes pcard-in-below{from{opacity:0;transform:translateY(-8px) scale(.92)}to{opacity:1;transform:none}}
@keyframes pcard-out{to{opacity:0;transform:scale(.95)}}

.pcard-arrow{
  position:absolute;
  left:var(--ax);
  bottom:-7px;
  width:12px;
  height:12px;
  margin-left:-6px;
  background:#1a2536;
  border-right:1px solid #2c3b55;
  border-bottom:1px solid #2c3b55;
  transform:rotate(45deg);
}

.pcard.is-below .pcard-arrow{top:-7px;bottom:auto;transform:rotate(225deg)}

.pcard-top{display:flex;align-items:center;gap:12px}
.pcard-id{display:grid;justify-items:start;gap:5px;min-width:0}

.pcard-name{
  max-width:100%;
  overflow:hidden;
  font-size:16px;
  font-weight:800;
  color:#fff;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.pcard-sub{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--dim)}
.pcard-sub .icon{width:12px;height:12px}

.pcard-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}

.pstat{
  display:grid;
  gap:2px;
  min-width:0;
  padding:8px 9px;
  background:var(--inset);
  border-radius:8px;
}

.pstat span{font-size:11px;color:var(--dim)}
.pstat b{overflow:hidden;font-size:14px;font-weight:800;color:#fff;white-space:nowrap;text-overflow:ellipsis}

.pcard-best{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  font-size:12px;
  color:var(--muted);
  background:linear-gradient(90deg,rgba(255,196,0,.11),rgba(255,196,0,.02));
  border-radius:8px;
}

.pcard-best .icon{width:16px;height:16px;color:var(--gold)}
.pcard-best b{margin-left:auto;font-size:14px;color:#fff}
.pcard-best em{font-style:normal;font-size:12px;color:var(--dim);white-space:nowrap}

.pcard-lock{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px;
  font-size:12px;
  line-height:1.45;
  color:var(--dim);
  background:var(--inset);
  border-radius:8px;
}

.pcard-lock .icon{flex-shrink:0;width:18px;height:18px;margin-top:1px;color:var(--muted)}
.pcard-lock b{display:block;font-size:13px;color:#fff}

.pcard-note{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--dim)}
.pcard-note .icon{flex-shrink:0;width:13px;height:13px}

.pcard-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.pbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:38px;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  background:var(--raised);
  border-radius:9px;
  transition:filter .12s,transform .08s,color .12s;
}

.pbtn .icon{width:16px;height:16px}
.pbtn:hover{color:#fff;filter:brightness(1.18)}
.pbtn:active{transform:translateY(1px)}
.pbtn--tip{color:#062b12;background:var(--green)}
.pbtn--tip:hover{color:#062b12;filter:brightness(1.08)}

.modal--profile{width:min(580px,100%)}
.modal--profile .modal-body{gap:16px;padding:0 0 18px}

.prof-hero{
  display:flex;
  align-items:center;
  gap:20px;
  padding:22px 20px 20px;
  background:
    radial-gradient(120% 150% at 0% 0%,color-mix(in srgb,var(--c) 24%,transparent),transparent 62%),
    linear-gradient(180deg,#1d2a3e,var(--panel));
  border-bottom:1px solid var(--line-soft);
}

.prof-id{flex:1;min-width:0;display:grid;gap:8px}
.prof-id h4{overflow:hidden;font-size:22px;font-weight:800;line-height:1.2;color:#fff;text-overflow:ellipsis}

.prof-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.prof-meta > span:not(.tier-chip){display:inline-flex;align-items:center;gap:5px}
.prof-meta .icon{width:13px;height:13px}

.prof-xp{height:6px;overflow:hidden;background:rgba(255,255,255,.08);border-radius:999px}
.prof-xp i{display:block;height:100%;background:var(--c);border-radius:inherit}
.prof-xp-note{font-size:12px;color:var(--dim)}

.prof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px}

.prof-tile{
  display:grid;
  align-content:start;
  gap:3px;
  min-width:0;
  padding:12px;
  background:var(--inset);
  border-radius:10px;
}

.prof-tile .icon{width:17px;height:17px;margin-bottom:5px;color:var(--accent)}
.prof-tile:nth-child(4) .icon{color:var(--gold)}
.prof-tile:nth-child(5) .icon{color:#c084fc}
.prof-tile span{font-size:12px;color:var(--dim)}
.prof-tile b{overflow:hidden;font-size:17px;font-weight:800;color:#fff;white-space:nowrap;text-overflow:ellipsis}
.prof-tile em{overflow:hidden;font-size:11px;font-style:normal;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}

.prof-sect{display:grid;gap:8px;padding:0 16px}
.prof-sect h5{font-size:13px;font-weight:700;color:var(--muted)}

.prof-bets{display:grid;gap:2px;padding:6px;background:var(--inset);border-radius:10px}

.prof-bet{
  display:grid;
  grid-template-columns:1.3fr 1fr 74px 1fr;
  gap:8px;
  align-items:center;
  padding:7px 8px;
  font-size:13px;
  border-radius:6px;
}

.prof-bet:nth-child(even){background:rgba(255,255,255,.025)}
.prof-bet--head{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.prof-game{display:flex;align-items:center;gap:6px;color:var(--text)}
.prof-game .icon{width:14px;height:14px;color:var(--muted)}
.prof-x,.prof-pay{text-align:right}
.prof-bet.is-win .prof-x,
.prof-bet.is-win .prof-pay{color:var(--green)}
.prof-bet.is-lose .prof-x,
.prof-bet.is-lose .prof-pay{color:var(--dim)}
.prof-empty{padding:14px;font-size:13px;text-align:center;color:var(--dim)}

.prof-locked{
  display:grid;
  justify-items:center;
  gap:6px;
  margin:0 16px;
  padding:28px 16px;
  font-size:13px;
  text-align:center;
  color:var(--dim);
  background:var(--inset);
  border-radius:10px;
}

.prof-locked .icon{width:28px;height:28px;margin-bottom:4px;color:var(--muted)}
.prof-locked b{font-size:15px;color:#fff}

.prof-acts{display:flex;padding:0 16px}
.prof-btn{flex:1}
.prof-btn--tip{color:#062b12;background:var(--green)}
a.prof-btn{display:grid;place-items:center;line-height:48px}

.modal--tip{width:min(430px,100%)}

.tip-to{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  background:var(--inset);
  border-radius:10px;
}

.tip-to > div{display:grid;justify-items:start;gap:4px;min-width:0}
.tip-to > div b{font-size:15px;color:#fff}
.tip-bal{display:grid;margin-left:auto;font-size:11px;text-align:right;color:var(--dim)}
.tip-bal b{font-size:14px;color:#fff}

.modal--wallet{width:min(860px,100%);max-height:92vh}
.modal--wallet .modal-body{gap:0;padding:0}

.wal-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:14px 16px 0}

.wal-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:44px;
  font-size:14px;
  font-weight:700;
  color:var(--muted);
  background:var(--inset);
  border-radius:10px;
  transition:color .12s,background .12s,box-shadow .12s;
}

.wal-tab .icon{width:18px;height:18px}
.wal-tab:hover{color:#fff}
.wal-tab.is-on{color:#fff;background:var(--raised);box-shadow:inset 0 -2px 0 var(--accent)}

.wal-view{position:relative;padding:14px 16px 4px}

.wal-routes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}

.wal-route{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:12px;
  align-items:center;
  padding:10px 14px;
  font-size:15px;
  font-weight:700;
  text-align:left;
  color:#fff;
  background:var(--inset);
  border:1px solid var(--line-soft);
  border-radius:12px;
  transition:border-color .12s,background .12s;
}

.wal-route > svg{grid-row:span 2;width:30px;height:30px}
.wal-route > .icon{color:var(--accent)}
.wal-route small{font-size:12px;font-weight:500;color:var(--dim)}
.wal-route:hover{border-color:#34445e}
.wal-route.is-on{background:rgba(6,117,229,.1);border-color:var(--accent)}

.wal-split{display:grid;grid-template-columns:224px minmax(0,1fr);gap:16px}

.wal-side{display:flex;flex-direction:column;gap:8px;min-height:0}

.wal-search{
  display:flex;
  align-items:center;
  gap:8px;
  height:40px;
  padding:0 11px;
  color:var(--dim);
  background:var(--inset);
  border:1px solid var(--line-soft);
  border-radius:10px;
  transition:border-color .12s;
}

.wal-search .icon{width:16px;height:16px}
.wal-search input{flex:1;min-width:0;font-size:13px;color:#fff;background:none;border:0;outline:0}
.wal-search input::placeholder{color:var(--dim)}
.wal-search:focus-within{border-color:var(--accent)}

.wal-coins{
  display:flex;
  flex-direction:column;
  gap:2px;
  max-height:452px;
  padding-right:4px;
  overflow-y:auto;
}

.wal-coin{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  padding:7px 8px;
  text-align:left;
  border-radius:10px;
  transition:background .12s;
}

.wal-coin:hover{background:rgba(255,255,255,.04)}
.wal-coin.is-on{background:var(--raised);box-shadow:inset 0 0 0 1px rgba(6,117,229,.65)}

.coin-badge{flex-shrink:0;width:28px;height:28px}
.coin-badge--lg{width:42px;height:42px}

.wal-coin-name{display:grid;min-width:0}
.wal-coin-name b{font-size:13px;color:#fff}
.wal-coin-name small{overflow:hidden;font-size:12px;color:var(--dim);white-space:nowrap;text-overflow:ellipsis}

.wal-coin-nets{
  margin-left:auto;
  padding:2px 7px;
  font-size:10px;
  font-style:normal;
  color:var(--dim);
  background:var(--inset);
  border-radius:999px;
  white-space:nowrap;
}

.wal-none{padding:16px;font-size:13px;text-align:center;color:var(--dim)}

.wal-detail{display:flex;flex-direction:column;gap:12px;min-width:0}

.wal-dhead{display:flex;align-items:center;gap:12px}
.wal-dhead h4{font-size:18px;font-weight:800;color:#fff}
.wal-dhead span{font-size:12px;color:var(--dim)}

.wal-label{font-size:13px;font-weight:500;color:var(--muted)}
.wal-block{display:grid;gap:7px}

.wal-nets{display:flex;flex-wrap:wrap;gap:6px}

.wal-net{
  padding:7px 12px;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  background:var(--inset);
  border:1px solid var(--line-soft);
  border-radius:999px;
  transition:color .12s,border-color .12s,background .12s;
}

.wal-net:hover{color:#fff}
.wal-net.is-on{color:#fff;background:rgba(6,117,229,.15);border-color:var(--accent)}

.wal-pair{display:grid;grid-template-columns:1fr 20px 1fr;align-items:end;gap:6px}
.wal-pair .field label{font-size:13px;color:var(--muted)}
.wal-swap{height:44px;display:grid;place-items:center;color:var(--dim)}
.wal-swap .icon{width:18px;height:18px}

.wal-quote{min-height:18px;font-size:13px;color:var(--muted)}
.wal-quote b{color:#fff}

.wal-addr{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:14px;
  padding:12px;
  background:var(--inset);
  border:1px solid var(--line-soft);
  border-radius:12px;
}

.wal-qr{position:relative;width:120px;height:120px}
.qr-code{display:block;width:100%;height:100%;border-radius:8px}

.wal-qr-mark{
  position:absolute;
  left:50%;
  top:50%;
  width:26px;
  height:26px;
  padding:3px;
  box-sizing:content-box;
  background:#fff;
  border-radius:50%;
  transform:translate(-50%,-50%);
}

.wal-addr-main{display:flex;flex-direction:column;gap:8px;min-width:0}

.wal-addr-box{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 7px 7px 11px;
  background:#0a1019;
  border:1px solid var(--line-soft);
  border-radius:9px;
}

.wal-addr-box code,
.wal-memo code,
.wal-done-tx code{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#e6eefc;
}

.wal-addr-box code{flex:1;min-width:0;font-size:12.5px;line-height:1.45;word-break:break-all}

.wal-copy{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:32px;
  padding:0 11px;
  font-size:12px;
  font-weight:700;
  color:#fff;
  background:var(--raised);
  border-radius:8px;
  transition:filter .12s,background .15s;
}

.wal-copy .icon{width:14px;height:14px}
.wal-copy:hover{filter:brightness(1.2)}
.wal-copy.is-done{background:var(--green-mid)}
.wal-copy--sm{width:30px;height:28px;padding:0;justify-content:center}

.wal-memo{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.wal-memo code{font-size:13px}

.wal-warn{display:flex;gap:8px;font-size:12px;line-height:1.45;color:#e9c46a}
.wal-warn .icon{flex-shrink:0;width:15px;height:15px;margin-top:1px}

.wal-go{width:100%;min-height:48px}

.wal-go.is-working{position:relative;overflow:hidden;cursor:progress;filter:none}

.wal-prog{position:absolute;inset:auto 0 0;height:4px;background:rgba(0,0,0,.25)}
.wal-prog i{display:block;width:0;height:100%;background:#fff;transition:width .7s ease}
.wal-step{font-size:14px}

.wal-money{display:flex;flex-direction:column;gap:12px}

.wal-bot{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:var(--inset);
  border:1px solid var(--line-soft);
  border-radius:12px;
}

.wal-bot-face{flex-shrink:0;width:42px;height:42px;object-fit:contain}
.wal-bot-id{display:grid;gap:2px;min-width:0}
.wal-bot-id b{font-size:15px;color:#fff}
.wal-bot-id span{font-size:12.5px;line-height:1.4;color:var(--muted)}

.wal-bot-live{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
  margin-left:auto;
  padding:4px 10px;
  font-size:12px;
  font-style:normal;
  font-weight:700;
  color:var(--green-ink);
  background:rgba(34,197,94,.12);
  border-radius:999px;
}

.wal-bot-live i{width:7px;height:7px;background:var(--green);border-radius:50%;animation:bl-live 1.4s ease-in-out infinite}

.wal-steps{display:grid;gap:14px;margin:2px 0 0;padding:0;list-style:none}
.wal-steps li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start}

.wal-n{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  margin-top:1px;
  font-size:13px;
  font-weight:800;
  color:#fff;
  background:var(--raised);
  border-radius:50%;
}

.wal-step-body{display:grid;gap:8px;min-width:0}
.wal-step-body .field{margin:0}
.wal-cmd code{font-size:14px;word-break:normal}

.wal-route > img{grid-row:span 2;width:30px;height:30px;object-fit:contain}
.wal-done-face{display:block;width:66px;height:66px;object-fit:contain}

.wal-fine{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim)}
.wal-fine .icon{flex-shrink:0;width:15px;height:15px;color:var(--green)}

.wal-sum{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:7px 12px;
  padding:12px 14px;
  font-size:13px;
  background:var(--inset);
  border-radius:10px;
}

.wal-sum dt{color:var(--dim)}
.wal-sum dd{font-weight:600;text-align:right;color:#fff}
.wal-sum dd small{font-weight:500;color:var(--dim)}

.wal-max{
  flex-shrink:0;
  padding:5px 10px;
  font-size:12px;
  font-weight:700;
  color:var(--text);
  background:var(--raised);
  border-radius:6px;
}

.wal-max:hover{color:#fff;filter:brightness(1.2)}

.bet-box.is-bad{border-color:#e2453c;box-shadow:0 0 0 2px rgba(226,69,60,.25)}
.bet-box input::placeholder{color:var(--dim)}

.wal-foot{
  display:flex;
  align-items:center;
  gap:8px;
  margin:12px 16px 14px;
  padding-top:12px;
  font-size:12px;
  color:var(--dim);
  border-top:1px solid var(--line-soft);
}

.wal-foot .icon{flex-shrink:0;width:14px;height:14px}

.modal-body.is-busy .wal-side,
.modal-body.is-busy .wal-tabs,
.modal-body.is-busy .wal-routes,
.modal-body.is-busy .wal-nets,
.modal-body.is-busy .wal-steps{opacity:.55;pointer-events:none}

.wal-done{
  display:grid;
  justify-items:center;
  gap:8px;
  padding:26px 10px 20px;
  text-align:center;
  animation:modal-in .35s ease-out;
}

.wal-done-mark{position:relative;margin-bottom:8px;animation:pop .55s cubic-bezier(.2,.9,.3,1.4)}
.wal-done-mark .coin-badge--lg{width:66px;height:66px}

.wal-done-check{
  position:absolute;
  right:-8px;
  bottom:-8px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  color:#062b12;
  background:var(--green);
  border:3px solid var(--panel);
  border-radius:50%;
}

.wal-done-check .icon{width:14px;height:14px;stroke-width:3}
.wal-done h4{font-size:15px;font-weight:600;color:var(--muted)}
.wal-done-amt{font-size:38px;font-weight:800;letter-spacing:-.02em;color:var(--green)}
.wal-done-amt .cur{color:inherit}
.wal-done.is-withdraw .wal-done-amt{color:#fff}
.wal-done p{font-size:13px;color:var(--muted)}

.wal-done-tx{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:6px;
  padding:8px 12px;
  font-size:12px;
  color:var(--dim);
  background:var(--inset);
  border-radius:9px;
}

.wal-done-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:min(360px,100%);margin-top:12px}
.wal-done-acts .chip{padding:0;height:46px}
.wal-done-acts .start{height:46px}

.wal-burst{position:absolute;left:50%;top:74px;width:0;height:0;pointer-events:none}

.wal-burst i{
  position:absolute;
  width:10px;
  height:10px;
  margin:-5px;
  background:radial-gradient(circle at 35% 35%,#fff4b8,#ffc400 55%,#c98a00);
  border-radius:50%;
  opacity:0;
  animation:burst-coin 1.05s cubic-bezier(.15,.7,.3,1) forwards;
}

.wal-burst i:nth-child(1){--dx:-150px;--dy:-30px}
.wal-burst i:nth-child(2){--dx:140px;--dy:-44px;animation-delay:.03s}
.wal-burst i:nth-child(3){--dx:-96px;--dy:-86px;animation-delay:.05s}
.wal-burst i:nth-child(4){--dx:104px;--dy:-92px}
.wal-burst i:nth-child(5){--dx:-30px;--dy:-112px;animation-delay:.04s}
.wal-burst i:nth-child(6){--dx:40px;--dy:-120px;animation-delay:.07s}
.wal-burst i:nth-child(7){--dx:-176px;--dy:26px;animation-delay:.02s}
.wal-burst i:nth-child(8){--dx:170px;--dy:30px;animation-delay:.06s}
.wal-burst i:nth-child(9){--dx:-124px;--dy:70px;animation-delay:.08s}
.wal-burst i:nth-child(10){--dx:120px;--dy:84px;animation-delay:.03s}
.wal-burst i:nth-child(11){--dx:-60px;--dy:40px;animation-delay:.09s}
.wal-burst i:nth-child(12){--dx:66px;--dy:52px;animation-delay:.05s}
.wal-burst i:nth-child(13){--dx:6px;--dy:-146px;animation-delay:.1s}

@keyframes burst-coin{
  0%{opacity:1;transform:translate(0,0) scale(.5)}
  70%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.1)}
}

.srow input[type="checkbox"],
.case-quick input[type="checkbox"],
.bc-tog input[type="checkbox"],
.bl-hide input[type="checkbox"]{
  position:relative;
  flex-shrink:0;
  width:42px;
  height:24px;
  appearance:none;
  -webkit-appearance:none;
  background:#2a3850;
  border-radius:999px;
  cursor:pointer;
  transition:background .18s;
}

.srow input[type="checkbox"]::after,
.case-quick input[type="checkbox"]::after,
.bc-tog input[type="checkbox"]::after,
.bl-hide input[type="checkbox"]::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  background:#c9d4e6;
  border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),background .18s;
}

.srow input[type="checkbox"]:checked,
.case-quick input[type="checkbox"]:checked,
.bc-tog input[type="checkbox"]:checked{background:var(--accent)}
.srow input[type="checkbox"]:checked::after,
.case-quick input[type="checkbox"]:checked::after,
.bc-tog input[type="checkbox"]:checked::after,
.bl-hide input[type="checkbox"]:checked::after{background:#fff;transform:translateX(18px)}
.srow input[type="checkbox"]:focus-visible{outline:2px solid var(--green);outline-offset:2px}

.srow > span b{display:block;font-weight:600;color:#fff}
.srow > span small{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:var(--dim)}

.srow--stack{flex-direction:column;align-items:stretch;gap:10px;cursor:default}
.srow-line{display:flex;align-items:center;justify-content:space-between}
.srow-line b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}

.sound-tests{display:flex;flex-wrap:wrap;gap:6px}
.sound-tests .chip{padding:8px 12px;font-size:13px}

.slider--vol{height:22px}

.slider--vol::-webkit-slider-runnable-track{
  height:8px;
  background:linear-gradient(90deg,var(--accent) var(--fill,80%),#2a3850 var(--fill,80%));
  border-radius:999px;
}

.slider--vol::-webkit-slider-thumb{
  width:18px;
  height:18px;
  margin-top:-5px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}

.slider--vol::-moz-range-track{height:8px;background:#2a3850;border-radius:999px}
.slider--vol::-moz-range-progress{height:8px;background:var(--accent);border-radius:999px}
.slider--vol::-moz-range-thumb{width:18px;height:18px;background:#fff;border:0;border-radius:50%}

.settings-view{align-self:flex-start;padding:10px 16px}

.board{align-self:center}
main > .site-foot{width:min(1160px,100%);align-self:center}

.mention{
  padding:0 4px;
  font-weight:700;
  color:#8cc4ff;
  background:rgba(56,139,253,.14);
  border-radius:4px;
}

.mention:hover{background:rgba(56,139,253,.26)}
.mention.is-you{color:#1f1600;background:var(--gold)}

.chat-line.is-ping .chat-text{
  background:linear-gradient(90deg,rgba(255,196,0,.16),rgba(255,196,0,.05)),var(--panel);
  box-shadow:inset 3px 0 0 var(--gold);
}

.chat-line.is-ping .chat-name{color:#ffd76a}

.chat-show[data-count]::after{
  content:attr(data-count);
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:20px;
  height:20px;
  padding:0 5px;
  font-size:11px;
  font-weight:800;
  line-height:20px;
  text-align:center;
  color:#1f1600;
  background:var(--gold);
  border:2px solid var(--bg);
  border-radius:999px;
  animation:pop .35s ease-out;
}

.keno-panel{gap:16px}
.keno-panel .grid-meta{flex-wrap:wrap;gap:6px 18px}

.keno-grid{
  width:min(100%,640px);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:9px;
}

.kn{
  position:relative;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  font-size:18px;
  font-weight:800;
  color:#cfd8e8;
  background:#26354c;
  border-radius:10px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.22);
  transition:transform .12s,background .15s,color .15s,box-shadow .15s;
}

.kn:hover:not(:disabled){transform:translateY(-2px);background:#304260}
.kn:active:not(:disabled){transform:translateY(1px)}
.kn:disabled{cursor:default}

.kn.is-picked{
  color:#fff;
  background:linear-gradient(180deg,#3389f7,#1a5fd0);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.1);
}

.kn.is-picked:hover:not(:disabled){background:linear-gradient(180deg,#4796fa,#236ae0)}

.kn.is-hit{
  color:#062b12;
  background:linear-gradient(180deg,#4ade80,#16a34a);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);
  animation:kn-hit .4s cubic-bezier(.2,.9,.3,1.4);
}

.kn.is-miss{
  color:#ff8f7a;
  background:#1a2433;
  box-shadow:inset 0 0 0 2px rgba(255,143,122,.3);
  animation:kn-miss .3s ease-out;
}

.kn-gem{position:absolute;width:46%;height:46%;opacity:0;pointer-events:none}
.kn.is-hit .kn-gem{opacity:1;filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}

.kn.is-hit .kn-n{
  position:absolute;
  right:7%;
  bottom:5%;
  font-size:12px;
}

@keyframes kn-hit{
  0%{transform:scale(.7)}
  60%{transform:scale(1.08)}
  100%{transform:none}
}

@keyframes kn-miss{
  from{opacity:.4;transform:scale(.86)}
  to{opacity:1;transform:none}
}

.keno-pays{
  width:min(100%,640px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(var(--n,1),minmax(0,1fr));
  gap:6px;
}

.kn-pay{
  display:grid;
  justify-items:center;
  gap:4px;
  padding:8px 2px;
  background:var(--inset);
  border-radius:8px;
  transition:background .15s,box-shadow .15s;
}

.kn-pay b{font-size:13px;font-weight:800;color:#fff;white-space:nowrap}
.kn-pay span{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--dim)}
.kn-pay span svg{width:11px;height:11px}
.kn-pay.is-zero b{color:var(--dim)}
.kn-pay.is-on{background:rgba(34,197,94,.14);box-shadow:inset 0 0 0 1px rgba(34,197,94,.55)}
.kn-pay.is-on b{color:var(--green)}
.kn-pay.is-lost{background:rgba(255,143,122,.08);box-shadow:inset 0 0 0 1px rgba(255,143,122,.35)}

.kn-hint{
  grid-column:1/-1;
  padding:12px;
  font-size:13px;
  text-align:center;
  color:var(--dim);
  background:var(--inset);
  border-radius:8px;
}

.keno-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.kn-tool{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:40px;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  background:var(--raised);
  border-radius:var(--r-sm);
  transition:filter .12s,transform .08s;
}

.kn-tool .icon{width:16px;height:16px}
.kn-tool:hover:not(:disabled){filter:brightness(1.18)}
.kn-tool:active:not(:disabled){transform:translateY(1px)}
.kn-tool:disabled{opacity:.5;cursor:not-allowed}

.select-box .icon{color:var(--muted)}

.lvl.is-up b{animation:lvl-up .7s cubic-bezier(.2,.9,.3,1.5)}

@keyframes lvl-up{
  0%{transform:scale(1)}
  35%{transform:scale(1.6)}
  100%{transform:scale(1)}
}

.select-box.dd{
  position:relative;
  cursor:pointer;
  user-select:none;
  outline:none;
  transition:border-color .15s,background .15s;
}

.select-box.dd select{position:absolute;inset:0;opacity:0;pointer-events:none}
.select-box.dd:hover{border-color:#34445e}
.select-box.dd:focus-visible,
.select-box.dd.is-open{border-color:var(--accent)}

.dd-value{flex:1;min-width:0;font-size:16px;font-weight:600;color:#fff}

.select-box.dd .caret{transition:transform .32s cubic-bezier(.34,1.56,.64,1),fill .15s}
.select-box.dd:hover .caret{fill:#fff}
.select-box.dd.is-open .caret{transform:rotate(180deg);fill:#fff}
.select-box.dd.is-disabled{opacity:.6;cursor:not-allowed}
.select-box.dd.is-disabled:hover{border-color:var(--line-soft)}

.dd-menu{
  position:fixed;
  z-index:75;
  max-height:360px;
  margin:0;
  padding:6px;
  overflow-y:auto;
  list-style:none;
  background:#1a2536;
  border:1px solid #2c3b55;
  border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  transform-origin:50% 0;
  animation:menu-in .16s cubic-bezier(.2,.9,.3,1.2);
}

.dd-menu.is-up{transform-origin:50% 100%}
.dd-menu.is-closing{animation:menu-out .12s ease-in forwards;pointer-events:none}

.dd-menu li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  height:38px;
  padding:0 12px;
  font-size:15px;
  font-weight:600;
  color:var(--text);
  border-radius:7px;
  cursor:pointer;
}

.dd-menu li.is-hover{color:#fff;background:var(--raised)}
.dd-menu li.is-on{color:#fff}
.dd-menu li .icon{width:16px;height:16px;color:var(--accent);opacity:0}
.dd-menu li.is-on .icon{opacity:1}

.keno-grid{position:relative}

.kn-result{
  position:absolute;
  left:50%;
  top:50%;
  z-index:3;
  min-width:190px;
  padding:16px 30px 18px;
  text-align:center;
  background:#0d1522;
  border:2px solid var(--green);
  border-radius:14px;
  box-shadow:0 22px 50px rgba(0,0,0,.55),0 0 0 6px rgba(34,197,94,.12);
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.kn-result b{
  display:block;
  font-size:36px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--green);
  font-variant-numeric:tabular-nums;
}

.kn-result .kn-rule{
  display:block;
  height:1px;
  margin:10px 0;
  background:rgba(255,255,255,.1);
}

.kn-result span{display:block;font-size:17px;font-weight:700;color:#fff}
.kn-result.is-on{animation:kn-result-in .34s cubic-bezier(.2,.9,.3,1.35)}
.kn-result.is-out{opacity:0;transform:translate(-50%,-50%) scale(.94);transition:opacity .2s,transform .2s}

@keyframes kn-result-in{
  from{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

.g-grey{--g:#8391a7}
.g-blue{--g:#3b82f6}
.g-purple{--g:#a855f7}
.g-red{--g:#ef4444}
.g-gold{--g:#ffc400}

.cases .board-inner{gap:18px}

.case-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.cases-note{margin-top:-6px;font-size:14px;color:var(--muted)}

.cases-live{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  font-size:13px;
  color:var(--muted);
  background:var(--panel);
  border-radius:999px;
}

.cases-live b{font-weight:700;color:#fff}
.cases-live.is-off{color:#ff8f7a}

.case-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:36px;
  padding:0 14px 0 10px;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  background:var(--panel);
  border-radius:var(--r-md);
  transition:filter .12s;
}

.case-back:hover{filter:brightness(1.2)}
.case-back .icon{width:16px;height:16px;transform:rotate(180deg)}

.case-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}

.case-card{
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--panel);
  border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .14s,box-shadow .14s;
}

.case-card:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hue) 60%,transparent),0 12px 28px rgba(0,0,0,.35);
}

.case-card.is-off{opacity:.55}

.case-art{
  position:relative;
  display:block;
  height:196px;
  overflow:hidden;
  background:linear-gradient(180deg,#141e2d,#0e1624);
}

.case-chest{
  position:absolute;
  left:50%;
  bottom:6px;
  width:128px;
  height:128px;
  object-fit:contain;
  object-position:50% 100%;
  transform:translateX(-50%);
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.5));
}

.case-chest.is-pixel{bottom:18px;width:96px;height:96px;image-rendering:pixelated}

.case-loot{position:absolute;inset:0;pointer-events:none}

.loot{position:absolute;display:grid;place-items:center;transform:translateX(-50%)}

.loot-ico{
  position:relative;
  width:64px;
  height:64px;
  image-rendering:pixelated;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.5));
}

.loot--m{left:50%;top:14px}
.loot--l,
.loot--r{top:44px}
.loot--l{left:calc(50% - 66px)}
.loot--r{left:calc(50% + 66px)}
.loot--l .loot-ico,
.loot--r .loot-ico{width:48px;height:48px}

.stack{position:relative;display:inline-block;line-height:0}
.stack > img{display:block}

.qty{
  position:absolute;
  right:-4px;
  bottom:-4px;
  font-size:13px;
  font-style:normal;
  font-weight:800;
  line-height:1;
  color:#fff;
  text-shadow:2px 2px 0 #3f3f3f;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}

.case-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
}

.case-meta b{font-size:15px;font-weight:700;color:#fff}
.case-price{font-size:14px;font-weight:700;color:var(--text)}

.case-daily{
  position:absolute;
  top:10px;
  left:10px;
  padding:3px 8px;
  font-size:12px;
  font-weight:700;
  color:#fff;
  background:rgba(8,14,23,.72);
  border-radius:6px;
  font-variant-numeric:tabular-nums;
}

.case-daily.is-ready{background:var(--green-mid)}

.case-hero{
  display:flex;
  align-items:center;
  gap:26px;
  padding:18px;
  border-radius:var(--r-xl);
  background:var(--panel);
}

.case-art--big{flex:0 0 300px;height:224px;border-radius:var(--r-md)}
.case-art--big .case-chest{width:150px;height:150px}
.case-art--big .case-chest.is-pixel{width:128px;height:128px}
.case-art--big .loot--m{top:16px}
.case-art--big .loot--l,
.case-art--big .loot--r{top:50px}
.case-art--big .loot--l{left:calc(50% - 78px)}
.case-art--big .loot--r{left:calc(50% + 78px)}

.case-info{display:flex;flex-direction:column;gap:8px;min-width:0}
.case-info h1{font-size:28px;font-weight:800;color:#fff}
.case-info p{font-size:14px;color:var(--muted)}
.case-how{color:var(--text);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(207,216,232,.35)}
.case-how:hover{color:#fff;text-decoration-color:currentColor}

.case-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:10px}
.case-open{min-width:230px;padding:0 26px}

.case-quick{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  cursor:pointer;
}

.reel{
  position:relative;
  height:156px;
  overflow:hidden;
  background:var(--inset);
  border-radius:var(--r-xl);
  box-shadow:inset 0 0 0 1px var(--line-soft);
}

.reel::before,
.reel::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  z-index:2;
  width:16%;
  pointer-events:none;
}

.reel::before{left:0;background:linear-gradient(90deg,var(--inset) 12%,transparent)}
.reel::after{right:0;background:linear-gradient(270deg,var(--inset) 12%,transparent)}

.reel-track{position:absolute;top:18px;left:0;display:flex;gap:10px;will-change:transform;backface-visibility:hidden}

.reel-tile{
  position:relative;
  flex:0 0 120px;
  height:120px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--panel);
}

.reel-ico{width:64px;height:64px;image-rendering:pixelated}
.reel-tile .qty{font-size:17px}

.reel-tile.is-win{box-shadow:inset 0 0 0 2px var(--g)}

.reel-mark{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  z-index:3;
  width:3px;
  margin-left:-1.5px;
  background:var(--gold);
  border-radius:2px;
  box-shadow:0 0 14px rgba(255,196,0,.7);
}

.reel-mark::before,
.reel-mark::after{
  content:"";
  position:absolute;
  left:50%;
  border:8px solid transparent;
  transform:translateX(-50%);
}

.reel-mark::before{top:0;border-top-color:var(--gold)}
.reel-mark::after{bottom:0;border-bottom-color:var(--gold)}

.reel-result{
  position:absolute;
  left:50%;
  top:50%;
  z-index:4;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 20px 14px 16px;
  white-space:nowrap;
  background:#0d1522;
  border:2px solid var(--g);
  border-radius:14px;
  box-shadow:0 22px 50px rgba(0,0,0,.55),0 0 0 6px color-mix(in srgb,var(--g) 14%,transparent);
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.reel-result[hidden]{display:none}
.res-ico{width:64px;height:64px;image-rendering:pixelated}
.res-text{display:flex;flex-direction:column;gap:2px}
.res-text b{font-size:15px;font-weight:700;color:#fff}
.res-val{font-size:22px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}

.res-mult{
  padding:4px 9px;
  font-size:13px;
  font-style:normal;
  font-weight:800;
  color:#ffb3a6;
  background:rgba(239,68,68,.14);
  border-radius:8px;
  font-variant-numeric:tabular-nums;
}

.res-mult.is-up{color:var(--green-ink);background:rgba(34,197,94,.16)}
.reel-result.is-on{animation:kn-result-in .34s cubic-bezier(.2,.9,.3,1.35)}
.reel-result.is-out{opacity:0;transform:translate(-50%,-50%) scale(.94);transition:opacity .2s,transform .2s}

.case-sub{font-size:16px;font-weight:700;color:#fff}

.loot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}

.loot-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:20px 10px 14px;
  text-align:center;
  border-radius:var(--r-md);
  background:
    radial-gradient(80% 60% at 50% 32%,color-mix(in srgb,var(--g) 22%,transparent),transparent 70%),
    var(--panel);
}

.loot-card-ico{width:64px;height:64px;margin-bottom:4px;image-rendering:pixelated}
.loot-card b{font-size:13px;font-weight:600;line-height:1.3;color:#fff}
.loot-val{font-size:14px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}

.loot-odds{
  position:absolute;
  top:8px;
  right:9px;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.is-blank{display:block;width:64px;height:64px;border-radius:8px;background:var(--raised)}

.shelf.is-all .track{flex-wrap:wrap;overflow:visible}
.shelf.is-all .arw{display:none}

@keyframes case-in{
  from{opacity:0;transform:translateY(16px) scale(.96)}
  to{opacity:1;transform:none}
}

.case-card{animation:case-in .5s cubic-bezier(.2,.8,.25,1) backwards;animation-delay:calc(var(--i,0) * 55ms)}
.loot-card{animation:case-in .45s cubic-bezier(.2,.8,.25,1) backwards;animation-delay:calc(var(--i,0) * 40ms + 140ms)}
.case-hero{animation:case-in .45s cubic-bezier(.2,.8,.25,1) backwards}

.is-still .case-card,
.is-still .loot-card,
.is-still .case-hero{animation:none}

.case-art{transition:filter .2s}
.loot-ico{transition:transform .28s cubic-bezier(.3,1.6,.5,1)}
.case-card:hover .case-art{filter:brightness(1.12) saturate(1.1)}
.case-card:hover .loot-ico{transform:scale(1.14)}
.case-card:hover .case-chest{animation:chest-hop .6s cubic-bezier(.3,1.5,.5,1)}

@keyframes chest-hop{
  0%,100%{transform:translateX(-50%)}
  35%{transform:translateX(-50%) scale(1.07,.93)}
  65%{transform:translateX(-50%) scale(.96,1.05)}
}

.case-art--big.is-opening .case-chest{animation:chest-pop .62s cubic-bezier(.3,1.6,.5,1)}
.case-art--big.is-opening .loot{animation:loot-fly .95s cubic-bezier(.2,.8,.3,1)}

@keyframes chest-pop{
  0%,100%{transform:translateX(-50%)}
  20%{transform:translateX(-50%) translateY(5px) scale(1.06,.9)}
  45%{transform:translateX(-50%) translateY(-12px) scale(.94,1.1)}
  70%{transform:translateX(-50%) translateY(2px) scale(1.03,.97)}
}

@keyframes loot-fly{
  0%{translate:0 0;opacity:1}
  35%{translate:0 -30px;opacity:0}
  60%{translate:0 14px;opacity:0}
  100%{translate:0 0;opacity:1}
}

.reel-tile{transition:transform .12s ease-out,filter .12s,opacity .3s}
.reel-tile.is-under{transform:scale(1.07);filter:brightness(1.22)}
.reel.is-landed .reel-tile:not(.is-win){opacity:.36;filter:saturate(.5)}
.reel-tile.is-win{z-index:1;animation:tile-win .6s cubic-bezier(.3,1.6,.5,1) forwards}

@keyframes tile-win{
  0%{transform:scale(1.07)}
  45%{transform:scale(1.22)}
  100%{transform:scale(1.12)}
}

.reel-mark.is-tick{animation:mark-tick .14s ease-out}

@keyframes mark-tick{
  0%{transform:scaleX(1.9);box-shadow:0 0 24px rgba(255,196,0,1)}
  100%{transform:none;box-shadow:0 0 14px rgba(255,196,0,.7)}
}

@keyframes jp-shine{
  from{background-position:130% 0,0 0}
  to{background-position:-130% 0,0 0}
}

.spark{
  position:absolute;
  z-index:7;
  width:7px;
  height:7px;
  border-radius:2px;
  background:var(--c);
  box-shadow:0 0 8px var(--c);
  pointer-events:none;
  animation:spark .95s cubic-bezier(.15,.7,.3,1) both;
}

@keyframes spark{
  from{opacity:1;transform:translate(-50%,-50%) scale(var(--s)) rotate(0)}
  to{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(calc(var(--s) * .3)) rotate(var(--r))}
}

.reel-result{overflow:hidden}

.reel-result.g-gold::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);
  transform:translateX(-100%);
  animation:res-shine 1.4s .3s ease-out;
}

@keyframes res-shine{to{transform:translateX(100%)}}

.bl{display:flex;flex-direction:column;gap:var(--gap)}

.bl-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px}

.bl-stat,
.bl-hide{
  display:flex;
  align-items:center;
  gap:12px;
  height:46px;
  padding:0 15px;
  font-size:14px;
  color:var(--muted);
  background:var(--panel);
  border-radius:var(--r-md);
}

.bl-stat b{font-size:15px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.bl-hide{gap:10px;color:var(--text);cursor:pointer}

.bl-create{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:44px;
  margin-left:auto;
  padding:0 18px;
  font-size:14px;
  font-weight:800;
  color:#1f1600;
  background:var(--gold);
  border-radius:var(--r-md);
  transition:filter .12s,transform .08s;
}

.bl-create:hover{filter:brightness(1.08)}
.bl-create:active{transform:translateY(1px)}
.bl-create .icon{width:16px;height:16px}

.bl-list{display:flex;flex-direction:column;gap:10px}

.bl-row{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.95fr);
  min-height:118px;
  background:var(--panel);
  border-radius:var(--r-md);
  cursor:pointer;
  transition:background .15s;
}

.bl-row[data-in]{animation:case-in .4s cubic-bezier(.2,.8,.25,1) backwards;animation-delay:calc(var(--i,0) * 45ms)}
.bl-row:hover{background:#1a2536}

.bl-who,
.bl-cases,
.bl-side{min-width:0;padding:14px 16px}

.bl-cases,
.bl-side{box-shadow:inset 1px 0 0 var(--line-soft)}

.bl-who{display:flex;flex-direction:column;justify-content:center;gap:14px}
.bl-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.bl-value{font-size:16px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}

.bl-mode{
  padding:3px 10px;
  font-size:12px;
  font-weight:800;
  color:var(--gold);
  background:var(--raised);
  border-radius:6px;
}

.bl-opts{display:flex;gap:7px}
.bl-opts i{display:grid;color:var(--muted)}
.bl-opts .icon{width:16px;height:16px}

.bl-tag{
  padding:3px 8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  background:var(--accent);
  border-radius:6px;
}

.bl-tag.is-won{background:var(--green-mid)}
.bl-tag.is-lost{color:var(--muted);background:var(--raised)}
.bl-tag.is-bots{color:#dbe7ff;background:#3b4a66;border:1px solid #56688c}

.bl-players{display:flex;align-items:center;flex-wrap:wrap;gap:8px 7px}
.bl-team{display:flex;gap:5px}
.bl-vs{font-size:11px;font-style:normal;font-weight:800;color:var(--muted)}
.bl-av{display:block;line-height:0;cursor:pointer}
.bl-av .head{width:24px;height:24px}
.bl-av .lvl .head{border-color:var(--panel)}
.bl-av .lvl b{box-shadow:0 0 0 2px var(--panel)}

.bl-slot{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  color:var(--muted);
  border-radius:7px;
  box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:color .12s,background .12s,box-shadow .12s;
}

.bl-slot .icon{width:15px;height:15px}
button.bl-slot:hover{color:#1f1600;background:var(--gold);box-shadow:none}

.bot-av{
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:30px;
  height:30px;
  color:#c7d2e4;
  background:#2a3649;
  border-radius:7px;
}

.bot-av .icon{width:18px;height:18px}
.bot-av.is-sm{display:inline-grid;width:26px;height:26px;border-radius:6px;vertical-align:middle}
.bot-av.is-sm .icon{width:15px;height:15px}

.bl-cases{display:flex;flex-direction:column;justify-content:center;gap:8px}
.bl-label{font-size:12px;font-weight:600;color:var(--muted)}
.bl-strip{display:flex;align-items:center;gap:2px;min-width:0}

.bl-track{
  flex:1;
  display:flex;
  gap:7px;
  min-width:0;
  padding:3px 2px 9px;
  overflow-x:auto;
  scrollbar-width:none;
}

.bl-track::-webkit-scrollbar{display:none}

.bl-case{position:relative;flex:0 0 56px;height:56px;transition:opacity .2s}
.bl-case-art{display:block}
.bl-case-art .case-art{height:56px;border-radius:9px}
.bl-case-art .case-chest{bottom:2px;width:44px;height:44px}
.bl-case-art .loot--l,
.bl-case-art .loot--r,
.bl-case-art .qty{display:none}
.bl-case-art .loot--m{top:0}
.bl-case-art .loot--m .loot-ico{width:24px;height:24px}
.bl-case.is-done{opacity:.35}
.bl-case.is-now .case-art{box-shadow:inset 0 0 0 2px var(--gold)}

.bl-case:hover .case-art{filter:brightness(1.12) saturate(1.1)}
.bl-case:hover .loot-ico{transform:scale(1.14)}
.bl-case:hover .case-chest{animation:chest-hop .6s cubic-bezier(.3,1.5,.5,1)}

.bl-n{
  position:absolute;
  left:50%;
  bottom:-7px;
  z-index:2;
  min-width:20px;
  padding:1px 5px;
  font-size:11px;
  font-style:normal;
  font-weight:800;
  line-height:1.3;
  text-align:center;
  color:#1f1600;
  background:var(--gold);
  border-radius:5px;
  transform:translateX(-50%);
}

.bl-arw{
  display:grid;
  place-items:center;
  flex:0 0 18px;
  height:56px;
  color:var(--gold);
  visibility:hidden;
}

.bl-arw .icon{width:16px;height:16px}
.bl-arw.is-l .icon{transform:rotate(180deg)}
.bl-arw:hover{filter:brightness(1.2)}

.bl-scroll{
  position:relative;
  display:block;
  height:4px;
  margin:0 22px;
  background:var(--inset);
  border-radius:2px;
  visibility:hidden;
}

.bl-scroll b{position:absolute;top:0;bottom:0;left:0;width:30%;background:var(--gold);border-radius:2px}
.bl-cases.is-over .bl-arw,
.bl-cases.is-over .bl-scroll{visibility:visible}

.bl-side{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bl-rounds{display:flex;flex-direction:column;gap:3px}
.bl-rounds b{font-size:18px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.bl-rounds small{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted)}

.bl-rounds small.is-running::before{
  content:"";
  width:6px;
  height:6px;
  background:var(--green);
  border-radius:50%;
  animation:bl-live 1.4s ease-in-out infinite;
}

@keyframes bl-live{50%{opacity:.35}}
.bl-acts{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:8px}

.bl-eye{
  display:grid;
  place-items:center;
  width:38px;
  height:34px;
  color:var(--gold);
  background:var(--raised);
  border-radius:7px;
  transition:filter .12s;
}

.bl-eye:hover{filter:brightness(1.25)}
.bl-eye .icon{width:18px;height:18px}

.bl-join,
.bl-bots{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:34px;
  padding:0 14px;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  color:#1f1600;
  background:var(--gold);
  border-radius:7px;
  transition:filter .12s;
}

.bl-join .cur{color:inherit}
.bl-bots{color:var(--text);background:var(--raised)}
.bl-bots .icon{width:15px;height:15px}
.bl-join:hover,
.bl-bots:hover{filter:brightness(1.12)}

.bl-won{display:flex;flex-direction:column;gap:6px;min-width:0}
.bl-heads{display:flex;flex-wrap:wrap;gap:6px}
.bl-amt{font-size:14px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}

.bl-none{
  padding:40px 20px;
  font-size:14px;
  text-align:center;
  color:var(--muted);
  background:var(--panel);
  border-radius:var(--r-md);
}

.bc{display:flex;flex-direction:column;gap:14px}
.bc-back{align-self:flex-start}
.bc-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:220px;
  padding:28px 32px;
  border-radius:var(--r-xl);
  background:linear-gradient(90deg,#110d29 30%,#1f1850);
}

.bc-hero-art{
  position:absolute;
  top:0;
  right:0;
  width:auto;
  height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);
  mask-image:linear-gradient(90deg,transparent,#000 30%);
}

.bc-hero-copy{position:relative;z-index:1;max-width:min(48%,400px)}
.bc-hero-copy h1{font-size:28px;font-weight:800;line-height:1.15;color:#fff}
.bc-hero-copy p{margin-top:10px;font-size:15px;line-height:1.5;color:#b6bfe0}

@media (max-width:720px){
  .bc-hero-art{width:100%;object-fit:cover;opacity:.35}
  .bc-hero-copy{max-width:none}
}

.bc-sec{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
  background:var(--panel);
  border-radius:var(--r-xl);
}

.bc-sec h2{font-size:16px;font-weight:700;color:#fff}
.bc-sub{margin-top:-8px;font-size:13px;color:var(--muted)}

.bc-toggles{display:flex;flex-wrap:wrap;gap:8px}

.bc-tog{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:190px;
  height:42px;
  padding:0 10px 0 12px;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  background:var(--inset);
  border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--line-soft);
  cursor:pointer;
  transition:box-shadow .15s,opacity .15s;
}

.bc-tog .icon{width:17px;height:17px;color:var(--muted)}
.bc-tog span{flex:1}
.bc-tog.is-on{box-shadow:inset 0 0 0 1px rgba(255,196,0,.55)}
.bc-tog.is-on .icon{color:var(--gold)}
.bc-tog input[type="checkbox"]:checked,
.bl-hide input[type="checkbox"]:checked{background:#f5a50b}

.bc-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}

.bc-type{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  background:var(--inset);
  border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:box-shadow .15s,background .15s;
}

.bc-type.is-on{
  background:linear-gradient(180deg,rgba(255,196,0,.1),transparent 80%),var(--inset);
  box-shadow:inset 0 0 0 1px rgba(255,196,0,.5);
}

.bc-type-name{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#fff}
.bc-type.is-on .bc-type-name{color:#ffd84d}
.bc-type-name .icon{width:17px;height:17px}

.bc-info{
  display:grid;
  place-items:center;
  width:15px;
  height:15px;
  font-size:10px;
  font-style:normal;
  font-weight:800;
  color:var(--muted);
  border:1px solid currentColor;
  border-radius:50%;
  cursor:help;
}

.bc-fmts{display:flex;gap:6px}

.bc-fmts button{
  height:32px;
  padding:0 12px;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  background:var(--raised);
  border-radius:6px;
  transition:filter .12s;
}

.bc-fmts button:hover{filter:brightness(1.2)}
.bc-fmts button.is-on{color:#4a2500;background:linear-gradient(180deg,#ffe27a,#f5a50b)}

.bc-rounds{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}

.bc-case{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:8px 8px 12px;
  background:var(--inset);
  border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--line-soft);
  animation:case-in .35s cubic-bezier(.2,.8,.25,1) backwards;
}

.bc-case-name{font-size:13px;font-weight:700;color:#fff;text-align:center}
.bc-case-price{font-size:12px;font-weight:700;color:var(--text)}

.bc-add{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:196px;
  font-size:14px;
  font-weight:600;
  color:var(--muted);
  border:2px dashed var(--line-soft);
  border-radius:var(--r-md);
  transition:color .15s,border-color .15s,background .15s;
}

.bc-add span{font-size:30px;font-weight:300;line-height:1}
.bc-add:hover{color:#fff;border-color:#f5a50b;background:rgba(255,196,0,.05)}

.step{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  width:100%;
  max-width:120px;
  height:30px;
  padding:0 3px;
  background:var(--raised);
  border-radius:999px;
}

.step button{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  font-size:15px;
  font-weight:800;
  line-height:1;
  color:#4a2500;
  background:linear-gradient(180deg,#ffe27a,#f5a50b);
  border-radius:50%;
}

.step button:hover{filter:brightness(1.1)}
.step b{font-size:14px;color:#fff;font-variant-numeric:tabular-nums}

.bc-foot{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 18px;
  background:var(--panel);
  border-radius:var(--r-xl);
}

.bc-sum{font-size:14px;color:var(--muted)}
.bc-go{margin-left:auto;min-width:240px;padding:0 24px}

.modal.ac-modal{width:min(860px,94vw)}
.ac-tools{display:flex;justify-content:flex-end;gap:10px}
.ac-sort{width:240px;height:40px}
.ac-sort .dd-value{font-size:14px}

.ac-search{
  width:200px;
  height:40px;
  padding:0 12px;
  font-size:14px;
  color:#fff;
  background:var(--inset);
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  outline:0;
}

.ac-search:focus{border-color:var(--accent)}

.ac-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  max-height:min(56vh,540px);
  padding:6px 4px 4px;
  overflow-y:auto;
}

.ac-case{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:8px 8px 12px;
  background:var(--inset);
  border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:box-shadow .15s;
}

.ac-case.is-on{box-shadow:inset 0 0 0 2px #f5a50b}
.ac-pick{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.ac-name{font-size:13px;font-weight:700;color:#fff}

.ac-price{
  height:30px;
  padding:0 16px;
  font-size:13px;
  font-weight:700;
  color:#fff;
  background:var(--raised);
  border-radius:999px;
  transition:filter .12s;
}

.ac-price:hover{filter:brightness(1.25)}
.ac-none{grid-column:1/-1;padding:30px;text-align:center;color:var(--muted)}

.bc-case,
.ac-case{transition:transform .14s,box-shadow .14s}

.bc-case:hover,
.ac-case:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hue) 60%,transparent),0 12px 28px rgba(0,0,0,.35);
}

.ac-case.is-on:hover{box-shadow:inset 0 0 0 2px #f5a50b,0 12px 28px rgba(0,0,0,.35)}

.bc-case:hover .case-art,
.ac-case:hover .case-art,
.bt-round:hover .case-art{filter:brightness(1.12) saturate(1.1)}

.bc-case:hover .loot-ico,
.ac-case:hover .loot-ico,
.bt-round:hover .loot-ico{transform:scale(1.14)}

.bc-case:hover .case-chest,
.ac-case:hover .case-chest,
.bt-round:hover .case-chest{animation:chest-hop .6s cubic-bezier(.3,1.5,.5,1)}

.vol{position:relative;display:flex;gap:3px;width:100%;max-width:110px}
.vol i{flex:1;height:3px;border-radius:2px}
.vol i:nth-child(1){background:rgba(34,197,94,.55)}
.vol i:nth-child(2){background:rgba(59,130,246,.55)}
.vol i:nth-child(3){background:rgba(234,179,8,.55)}
.vol i:nth-child(4){background:rgba(239,68,68,.55)}
.vol b{position:absolute;top:-3px;width:3px;height:9px;margin-left:-1.5px;background:#fff;border-radius:2px}

.ac-foot{
  display:flex;
  align-items:center;
  gap:10px;
  padding-top:12px;
  border-top:1px solid var(--line-soft);
}

.ac-foot span{margin-right:auto;font-size:14px;color:var(--muted)}
.ac-cancel{height:40px;padding:0 18px;font-weight:600;color:var(--text);background:var(--raised);border-radius:var(--r-sm)}
.ac-cancel:hover{filter:brightness(1.2)}
.ac-ok{height:40px;padding:0 22px}

.bc-case-art,
.ac-art,
.bt-round-art{display:block;width:100%}

.bc-case-art .case-art,
.ac-art .case-art{height:116px;border-radius:8px}

.bc-case-art .case-chest,
.ac-art .case-chest{width:88px;height:88px;bottom:4px}

.bc-case-art .loot--m,
.ac-art .loot--m{top:2px}

.bc-case-art .loot--l,
.bc-case-art .loot--r,
.ac-art .loot--l,
.ac-art .loot--r{top:16px}

.bc-case-art .loot--l,
.ac-art .loot--l{left:calc(50% - 42px)}

.bc-case-art .loot--r,
.ac-art .loot--r{left:calc(50% + 42px)}

.bc-case-art .loot-ico,
.ac-art .loot-ico{width:36px;height:36px}

.bc-case-art .loot--l .loot-ico,
.bc-case-art .loot--r .loot-ico,
.ac-art .loot--l .loot-ico,
.ac-art .loot--r .loot-ico{width:28px;height:28px}

.bc-case-art .qty,
.ac-art .qty{right:-3px;bottom:-2px;font-size:10px;text-shadow:1px 1px 0 #3f3f3f}

.bt-bar{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 12px;
  background:var(--panel);
  border-radius:var(--r-md);
}

.bt-format{position:absolute;left:50%;font-size:17px;font-weight:800;color:#fff;transform:translateX(-50%)}
.bt-badges{margin-left:auto;display:flex;gap:6px}

.bt-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 9px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text);
  background:var(--raised);
  border-radius:6px;
}

.bt-badge .icon{width:13px;height:13px}
.bt-badge.is-jackpot .icon,
.bt-badge.is-gold .icon{color:var(--gold)}
.bt-badge.is-crazy .icon{color:#a78bfa}
.bt-badge.is-watch{color:var(--muted)}
.bt-badge.is-bots{color:#dbe7ff;background:#3b4a66}

.bt-host{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 16px;
  background:var(--panel);
  border-radius:var(--r-md);
}

.bt-host[hidden]{display:none}
.bt-host .bt-wait{flex-shrink:0;width:24px;height:24px}
.bt-host-text{display:flex;flex-direction:column;gap:2px;margin-right:auto;min-width:0}
.bt-host-text b{font-size:14px;font-weight:700;color:#fff}
.bt-host-text small{font-size:12.5px;color:var(--muted)}

.bt-bots,
.bt-cancel{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:38px;
  padding:0 18px;
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
  border-radius:var(--r-md);
  transition:filter .12s,transform .08s;
}

.bt-bots{color:#1f1600;background:var(--gold)}
.bt-bots .cur{color:inherit}
.bt-bots .icon{width:17px;height:17px}
.bt-cancel{font-weight:600;color:var(--text);background:var(--raised)}
.bt-bots:hover,
.bt-cancel:hover{filter:brightness(1.1)}
.bt-bots:active,
.bt-cancel:active{transform:translateY(1px)}
.bt-bots[hidden],
.bt-cancel[hidden]{display:none}

.bt-sit{
  flex-shrink:0;
  height:28px;
  margin-left:auto;
  padding:0 12px;
  font-size:12px;
  font-weight:800;
  color:#1f1600;
  background:var(--gold);
  border-radius:6px;
}

.bt-sit[hidden]{display:none}
.bt-sit:hover{filter:brightness(1.1)}
.bt-card .bot-av{width:34px;height:34px}
.bt-name[data-user]{cursor:pointer}

.bt-top{display:flex;align-items:center;gap:14px}
.bt-stat{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);white-space:nowrap}
.bt-stat b{color:#fff;font-variant-numeric:tabular-nums}

.bt-count{
  margin-left:6px;
  padding:2px 8px;
  font-size:12px;
  font-style:normal;
  font-weight:800;
  color:#fff;
  background:var(--raised);
  border-radius:6px;
  font-variant-numeric:tabular-nums;
}

.bt-rounds{flex:1;display:flex;justify-content:center;gap:6px;min-width:0;overflow:hidden;padding:6px 4px}
.bt-round{flex:0 0 auto;width:52px;opacity:.45;transition:opacity .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.bt-round .case-art{height:52px;border-radius:10px}
.bt-round .case-chest{bottom:2px;width:40px;height:40px}
.bt-round .loot--l,
.bt-round .loot--r,
.bt-round .qty{display:none}
.bt-round .loot--m{top:0}
.bt-round .loot--m .loot-ico{width:22px;height:22px}
.bt-round.is-done{opacity:.22}
.bt-round.is-now,
.bt-round:hover{opacity:1}
.bt-round.is-now{transform:scale(1.12)}
.bt-round.is-now .case-art{box-shadow:0 0 0 2px var(--hue)}

.bt-teams{--slot:66px;position:relative;display:flex;align-items:flex-start;gap:24px}
.bt-team{position:relative;flex:var(--n) 1 0;min-width:0;display:flex;gap:6px}
.bt-seat{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:8px;transition:opacity .4s}
.bt-card{z-index:3}

.bt-vs{
  position:absolute;
  left:-12px;
  top:calc(var(--slot) * 3 + 18px);
  z-index:2;
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  margin-left:-14px;
  font-size:10px;
  font-weight:800;
  color:var(--muted);
  background:var(--raised);
  border-radius:50%;
}

.bt-reel{
  position:relative;
  height:calc(var(--slot) * 3);
  overflow:hidden;
  border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--inset),#111b29 50%,var(--inset));
  box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:box-shadow .3s;
}

.bt-reel::before,
.bt-reel::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  z-index:2;
  height:28%;
  pointer-events:none;
}

.bt-reel::before{top:0;background:linear-gradient(180deg,var(--inset) 5%,transparent)}
.bt-reel::after{bottom:0;background:linear-gradient(0deg,var(--inset) 5%,transparent)}

.bt-track{position:absolute;top:0;left:0;right:0;will-change:transform;backface-visibility:hidden}

.bt-tile{
  position:relative;
  height:var(--slot);
  display:grid;
  place-items:center;
  transition:transform .12s ease-out,filter .12s,opacity .3s;
}

.bt-ico{position:relative;width:48px;height:48px;image-rendering:pixelated}
.bt-tile .qty{font-size:14px}
.bt-tile.is-under{transform:scale(1.1);filter:brightness(1.2)}
.bt-reel.is-landed .bt-tile:not(.is-win){opacity:.3;filter:saturate(.5)}
.bt-tile.is-win{z-index:1;animation:tile-win .6s cubic-bezier(.3,1.6,.5,1) forwards}

.gold-face{
  position:relative;
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:12px;
  background:
    linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 45%,transparent 60%) 0 0/250% 100% no-repeat,
    radial-gradient(75% 75% at 50% 40%,#ffe27a,#f5a50b 60%,#8a4b00);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.2);
  animation:jp-shine 1.8s linear infinite;
}

.gold-face .icon{width:26px;height:26px;color:#fff;filter:drop-shadow(0 2px 0 rgba(120,60,0,.5))}
.gold-face img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(90,45,0,.5))}

.bt-reel.is-gold-hit{box-shadow:inset 0 0 0 2px #ffc400,0 0 26px rgba(255,196,0,.4)}
.bt-reel.is-gold-hit .bt-tile.is-gold.is-win .gold-face{animation:gold-flip 1.3s cubic-bezier(.3,.9,.4,1) forwards}

@keyframes gold-flip{
  0%{transform:perspective(300px) rotateY(0) scale(1)}
  45%{transform:perspective(300px) rotateY(540deg) scale(1.4);box-shadow:0 0 44px rgba(255,196,0,.95)}
  100%{transform:perspective(300px) rotateY(720deg) scale(1.2);box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
}

.bt-ptr{
  position:absolute;
  top:50%;
  z-index:3;
  border:8px solid transparent;
  transform:translateY(-50%);
  filter:drop-shadow(0 0 6px rgba(255,196,0,.6));
}

.bt-ptr.is-l{left:0;border-left-color:var(--gold)}
.bt-ptr.is-r{right:0;border-right-color:var(--gold)}

.bt-card{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px;
  background:var(--panel);
  border-radius:var(--r-md);
  transition:box-shadow .3s,transform .3s;
}

.bt-av{display:grid;place-items:center;min-width:36px;min-height:36px}
.bt-av .head{width:30px;height:30px}
.bt-card .lvl .head{border-color:var(--panel)}
.bt-card .lvl b{box-shadow:0 0 0 2px var(--panel)}
.bt-who{display:flex;flex-direction:column;gap:2px;min-width:0}

.bt-name{
  overflow:hidden;
  font-size:12.5px;
  font-weight:700;
  color:#fff;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.bt-you{
  margin-left:2px;
  padding:0 4px;
  font-size:9.5px;
  font-style:normal;
  color:#fff;
  vertical-align:1px;
  background:var(--accent);
  border-radius:4px;
}

.bt-seat.is-me .bt-name{color:#60a5fa}
.bt-line{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px}
.bt-total{font-size:12px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}

.bt-chance{
  padding:1px 6px;
  font-size:11px;
  font-weight:800;
  color:#fff;
  background:var(--c);
  border-radius:5px;
  font-variant-numeric:tabular-nums;
}

.bt-wait{
  display:block;
  width:28px;
  height:28px;
  border:3px solid var(--raised);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:bt-wait .9s linear infinite;
}

@keyframes bt-wait{to{transform:rotate(360deg)}}

.bt-seat.is-empty .bt-av,
.bt-seat.is-empty .bt-who{opacity:.55}
.bt-seat.is-joining .bt-card{animation:seat-in .45s cubic-bezier(.3,1.6,.5,1)}

@keyframes seat-in{
  from{opacity:.3;transform:scale(.85)}
  to{opacity:1;transform:none}
}

.bt-gain{
  position:absolute;
  z-index:4;
  top:-19px;
  left:50%;
  font-size:12px;
  font-weight:800;
  color:var(--green);
  white-space:nowrap;
  transform:translateX(-50%);
}

.bt-seat.is-winner .bt-card{transform:translateY(-3px);box-shadow:0 0 0 2px var(--green),0 0 22px rgba(34,197,94,.3)}
.bt-seat.is-loser{opacity:.5}

.bt-won{display:flex;flex-wrap:wrap;gap:4px}

.bt-got{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:8px;
  background:var(--panel);
  animation:bt-got-in .35s cubic-bezier(.3,1.6,.5,1);
}

.bt-got-ico{width:32px;height:32px;image-rendering:pixelated}

@keyframes bt-got-in{
  from{opacity:0;transform:scale(.5)}
  to{opacity:1;transform:none}
}

.bt-item{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  grid-template-areas:"ico name" "ico val";
  align-items:center;
  gap:0 7px;
  width:100%;
  padding:5px 7px;
  background:var(--panel);
  border-radius:8px;
  animation:bt-got-in .35s cubic-bezier(.3,1.6,.5,1);
}

.bt-item-ico{grid-area:ico;width:28px;height:28px;image-rendering:pixelated}
.bt-item-name{grid-area:name;overflow:hidden;font-size:11px;color:var(--muted);white-space:nowrap;text-overflow:ellipsis}
.bt-item-val{grid-area:val;font-size:12px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}

.bt-countdown{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:5;
  display:grid;
  place-items:center;
  height:calc(var(--slot) * 3);
  pointer-events:none;
}

.bt-countdown b{font-size:84px;font-weight:900;color:#fff;text-shadow:0 0 30px var(--accent),0 6px 0 rgba(0,0,0,.4)}
.bt-countdown.is-beat b{animation:count-beat .7s cubic-bezier(.2,1.4,.4,1) forwards}

@keyframes count-beat{
  0%{opacity:0;transform:scale(.4)}
  30%{opacity:1;transform:scale(1.15)}
  65%{transform:scale(1)}
  100%{opacity:0;transform:scale(.9)}
}

.bt-end{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:20px 16px 18px;
  text-align:center;
  background:radial-gradient(60% 120% at 50% 0%,rgba(34,197,94,.12),transparent 70%),var(--panel);
  border-radius:var(--r-xl);
}

.bt-end[hidden]{display:none}
.bt-end.is-on{animation:case-in .45s cubic-bezier(.2,.8,.25,1)}
.bt-end-title{font-size:18px;font-weight:700;color:var(--muted)}
.bt-end-amounts{display:flex;align-items:center;gap:10px}

.bt-end-amounts div{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:9px 16px;
  text-align:left;
  background:var(--inset);
  border-radius:10px;
}

.bt-end-amounts span{font-size:12px;color:var(--muted)}
.bt-end-amounts b{font-size:17px;color:#fff}
.bt-end-split{max-width:560px;font-size:14px;line-height:1.5;color:var(--muted)}
.bt-end-split b{color:#fff;font-variant-numeric:tabular-nums}
.bt-end-who{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px;font-size:15px;color:var(--text)}
.bt-end-who .head{width:26px;height:26px;border-radius:6px}
.bt-end-who b{color:#ffc400}
.bt-end-actions{display:flex;gap:10px;margin-top:4px}
.bt-end-actions .start{min-width:200px;padding:0 22px}
.bt-end-actions .case-back{height:48px;padding:0 20px}

.bt-jp{width:100%;margin-top:4px}

.bt-jp-track{
  position:relative;
  width:100%;
  height:52px;
  overflow:hidden;
  background:var(--inset);
  border-radius:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}

.bt-jp-strip{position:absolute;top:0;bottom:0;left:0;display:flex;will-change:transform}
.bt-jp-lap{position:relative;display:flex;flex:1 1 0;min-width:0;height:100%}

.bt-jp-lap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(8,14,23,.5) 0 2px,transparent 2px 5%);
  -webkit-mask:linear-gradient(#000 0 8px,transparent 8px calc(100% - 8px),#000 calc(100% - 8px));
  mask:linear-gradient(#000 0 8px,transparent 8px calc(100% - 8px),#000 calc(100% - 8px));
}

.bt-jp-seg{
  position:relative;
  display:grid;
  place-items:center;
  min-width:2px;
  height:100%;
  background:var(--c);
  box-shadow:inset 2px 0 0 rgba(8,14,23,.6);
  opacity:.65;
  transition:opacity .15s,filter .15s;
}

.bt-jp-seg .head{width:28px;height:28px;border-radius:6px}
.bt-jp-seg.is-under{opacity:1;filter:brightness(1.15)}
.bt-jp-seg.is-win{opacity:1;animation:seg-win .7s ease-out 3}

@keyframes seg-win{50%{filter:brightness(1.7)}}

.bt-jp-mark{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  z-index:2;
  width:4px;
  margin-left:-2px;
  background:#fff;
  border-radius:2px;
  box-shadow:0 0 12px #fff,0 0 22px var(--gold);
}

.bt-jp-mark::before,
.bt-jp-mark::after{
  content:"";
  position:absolute;
  left:50%;
  margin-left:-7px;
  border:7px solid transparent;
}

.bt-jp-mark::before{top:0;border-top-color:#fff;border-bottom:0}
.bt-jp-mark::after{bottom:0;border-bottom-color:#fff;border-top:0}

.nav-item.has-dot::after{
  content:"";
  position:absolute;
  top:50%;
  right:14px;
  width:8px;
  height:8px;
  margin-top:-4px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 3px var(--sidebar),0 0 10px rgba(34,197,94,.7);
}

html.rail-shut .nav-item.has-dot::after{top:8px;right:8px;margin-top:0}

.rw-top{display:flex;flex-direction:column;gap:14px}

.rw-level{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
  padding:18px 20px;
  border-radius:var(--r-xl);
  background:radial-gradient(90% 140% at 0% 0%,color-mix(in srgb,var(--c) 16%,transparent),transparent 60%),var(--panel);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 28%,transparent);
}

.rw-me{display:flex;align-items:center;gap:12px}
.rw-me .lvl .head{width:44px;height:44px}
.rw-me b{display:block;font-size:17px;font-weight:800;color:#fff}
.rw-tier{font-size:13px;font-weight:700;color:var(--c)}

.rw-prog p{margin-top:8px;font-size:13px;color:var(--muted)}
.rw-bar{height:8px;overflow:hidden;background:var(--inset);border-radius:99px}
.rw-bar i{display:block;height:100%;background:var(--c);border-radius:inherit}

.rw-facts{display:flex;gap:24px}
.rw-facts span{display:block;margin-bottom:2px;font-size:12px;color:var(--muted)}
.rw-facts b{font-size:15px;color:#fff;white-space:nowrap}
.rw-facts a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
.rw-sub{display:block;margin-top:1px;font-size:12px;font-style:normal;color:var(--muted)}

.rw-pots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}

.rw-pot{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px;
  border-radius:var(--r-xl);
  background:var(--panel);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  transition:box-shadow .2s;
}

.rw-pot.is-ready{box-shadow:inset 0 0 0 1px rgba(34,197,94,.55),0 0 24px rgba(34,197,94,.12)}
.rw-pot-head{display:flex;align-items:center;gap:10px}
.rw-pot-head b{font-size:15px;color:#fff}
.rw-pot-ico{display:grid;place-items:center;width:32px;height:32px;color:var(--accent);background:var(--raised);border-radius:8px}
.rw-pot.is-ready .rw-pot-ico{color:var(--green)}
.rw-pot-ico .icon{width:17px;height:17px}
.rw-pot-amt{margin-top:6px;font-size:24px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.rw-pot-note{font-size:12px;color:var(--muted)}
.rw-claim{margin-top:10px;height:40px;font-size:14px}
.rw-pot.is-ready .rw-claim{background:var(--green-mid)}

.case-card.is-locked .case-art{filter:grayscale(.75) brightness(.6)}
.case-card.is-locked .case-meta b{color:var(--muted)}

.case-reqs{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.case-req{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.case-req .icon{width:15px;height:15px;color:var(--muted)}
.case-req.is-met{color:var(--text)}
.case-req.is-met .icon{color:var(--green)}
.case-req-bar{width:90px;height:6px;margin-left:4px;overflow:hidden;background:var(--inset);border-radius:99px}
.case-req-bar::before{content:"";display:block;width:calc(var(--p) * 100%);height:100%;background:var(--accent);border-radius:inherit}
.case-req.is-met .case-req-bar::before{background:var(--green)}
.case-req-note{padding-left:23px;font-size:12px;color:var(--dim)}

@media (max-width:1100px){
  .rw-level{grid-template-columns:1fr;gap:14px}
}

@media (max-width:720px){
  .rw-pots{grid-template-columns:1fr}
}

.info-tabs .stab{display:inline-flex;align-items:center}

.info-doc{
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:760px;
  font-size:14px;
  line-height:1.65;
  color:var(--text);
}

.info-doc[hidden]{display:none}
.info-doc h2{font-size:22px;font-weight:800;color:#fff}
.info-doc h3{margin-top:8px;font-size:15px;font-weight:700;color:#fff}
.info-doc ul{display:flex;flex-direction:column;gap:6px;padding-left:20px;list-style:disc}
.info-doc li::marker{color:var(--dim)}
.info-doc b{color:#fff}
.info-doc a:not(.btn){color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
.info-doc .btn{align-self:flex-start}
.info-date{margin-top:-6px;font-size:12px;color:var(--dim)}

.info-help{padding-left:0 !important;list-style:none !important}
.info-help li{display:flex;flex-wrap:wrap;gap:4px 14px;padding:10px 14px;background:var(--inset);border-radius:var(--r-md)}
.info-help li b{min-width:130px;font-weight:600;color:var(--muted)}

.info-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.info-game{display:flex;flex-direction:column;gap:6px;padding:14px 16px;background:var(--inset);border-radius:var(--r-md)}
.info-game h3{margin:0}
.info-game p{color:var(--text)}
.info-game ul{gap:4px;color:var(--muted)}

.upg-panel{gap:16px}

.upg-stage{
  position:relative;
  display:grid;
  grid-template-columns:minmax(96px,1fr) auto minmax(96px,1fr);
  align-items:center;
  gap:14px;
  padding:16px;
  background:var(--inset);
  border-radius:var(--r-md);
  container-type:inline-size;
}

.upg-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:180px;
  padding:14px 8px;
  text-align:center;
  background:var(--panel);
  border-radius:var(--r-md);
  transition:opacity .25s,box-shadow .25s;
}

.upg-card-label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.upg-card-big{font-size:19px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.upg-card-name{font-size:13px;font-weight:600;line-height:1.3;color:#fff}
.upg-card-ico{width:64px;height:64px;image-rendering:pixelated}
.upg-coin{width:52px;height:52px}

.upg-card-slot{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  color:var(--dim);
  border:2px dashed var(--line-soft);
  border-radius:var(--r-md);
}

.upg-card-slot .icon{width:28px;height:28px}
.upg-card.is-empty .upg-card-name{font-weight:500;color:var(--muted)}
.upg-card.is-won{box-shadow:inset 0 0 0 2px var(--g,var(--gold))}
.upg-card.is-lost{opacity:.5}
.upg-card.is-won .upg-card-ico{animation:upg-pop .6s cubic-bezier(.3,1.6,.5,1)}

@keyframes upg-pop{40%{transform:scale(1.2)}}

.upg-dial{position:relative;width:min(240px,46cqw);aspect-ratio:1}
.upg-dial svg{display:block;width:100%;height:100%;overflow:visible}
.upg-track{fill:none;stroke:var(--raised);stroke-width:18}
.upg-arc{fill:none;stroke:var(--green);stroke-width:18;transition:stroke-dasharray .35s ease,stroke .2s}
.upg-dial.is-lose .upg-arc{stroke:#ef4444}
.upg-tick{stroke:#2a3850;stroke-width:2;stroke-linecap:round}
.upg-tick.is-major{stroke:#41516e;stroke-width:3}
.upg-needle path{fill:#fff;filter:drop-shadow(0 0 5px rgba(255,255,255,.65))}

.upg-center{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  pointer-events:none;
}

.upg-center b{font-size:30px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.upg-center span{font-size:13px;font-weight:600;color:var(--muted)}
.upg-dial.is-win .upg-center b{color:var(--green)}
.upg-dial.is-lose .upg-center b{color:#ff8f7a}

.upg-mults .chip.is-on{color:#fff;background:var(--accent)}

.upg-pick{display:flex;flex-direction:column;gap:12px}
.upg-pick-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.upg-pick-head h2{font-size:16px;font-weight:700;color:#fff}
.upg-count{font-size:13px;color:var(--muted)}

.upg-search{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  height:36px;
  padding:0 12px;
  background:var(--inset);
  border-radius:var(--r-sm);
}

.upg-search .icon{width:16px;height:16px;color:var(--dim)}
.upg-search input{width:150px;background:none;border:0;outline:0;font-size:14px;color:#fff}
.upg-search input::placeholder{color:var(--dim)}

.upg-order{
  height:36px;
  padding:0 12px;
  font-size:13px;
  font-weight:700;
  color:var(--text);
  background:var(--inset);
  border-radius:var(--r-sm);
}

.upg-order:hover{filter:brightness(1.2)}

.upg-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(128px,1fr));
  gap:10px;
  max-height:430px;
  overflow-y:auto;
  padding:2px 4px 2px 2px;
}

.upg-item{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:18px 8px 12px;
  text-align:center;
  border:2px solid transparent;
  border-radius:var(--r-md);
  background:
    radial-gradient(80% 60% at 50% 32%,color-mix(in srgb,var(--g) 22%,transparent),transparent 70%),
    var(--panel);
  transition:transform .12s,filter .12s,border-color .12s;
}

.upg-item:hover{transform:translateY(-2px);filter:brightness(1.12)}
.upg-item.is-on{border-color:var(--g)}
.upg-item-ico{width:52px;height:52px;image-rendering:pixelated;transition:transform .28s cubic-bezier(.3,1.6,.5,1)}
.upg-item:hover .upg-item-ico{transform:scale(1.14)}
.upg-item b{font-size:13px;font-weight:600;line-height:1.3;color:#fff}
.upg-item-val{font-size:14px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}

.upg-item-chance{
  padding:2px 8px;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  background:var(--inset);
  border-radius:4px;
  font-variant-numeric:tabular-nums;
}

.upg-item.is-on .upg-item-chance{color:#fff}

.upg-grid.is-new .upg-item{animation:case-in .45s cubic-bezier(.2,.8,.25,1) backwards;animation-delay:calc(var(--i,0) * 30ms)}
.upg-empty{grid-column:1 / -1;padding:28px 10px;font-size:14px;text-align:center;color:var(--muted)}

#dc-panel{display:flex;flex-direction:column;gap:12px}

.dc-card{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px;
  background:var(--inset);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
}

.dc-who{display:flex;align-items:center;gap:12px}
.dc-who > span{display:flex;flex-direction:column;gap:2px;min-width:0}
.dc-who b{overflow:hidden;font-size:16px;color:#fff;white-space:nowrap;text-overflow:ellipsis}
.dc-who small{font-size:12px;color:var(--dim)}

.dc-av{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover}
.dc-logo{display:grid;place-items:center;color:#fff;background:#5865f2}
.dc-logo .icon{width:22px;height:22px}

.dc-text{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}

.dc-ranks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dc-rank{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:var(--panel);border-radius:var(--r-sm)}
.dc-rank span{font-size:12px;color:var(--dim)}
.dc-rank b{font-size:16px;color:#fff}
.dc-rank small{font-size:12px;color:var(--muted)}
.dc-card .dc-whale{color:#2dd4bf}

.dc-steps{display:flex;flex-direction:column;gap:6px;margin:0;padding-left:20px;font-size:14px;color:var(--text)}

.dc-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;background:#5865f2}
.dc-go .icon{width:16px;height:16px}

.dc-unlink{display:inline-flex;align-self:flex-start;align-items:center;gap:6px}
.dc-unlink .icon{width:14px;height:14px}

.dc-note{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;font-size:14px;line-height:1.45;border-radius:var(--r-sm)}
.dc-note .icon{flex:none;width:18px;height:18px;margin-top:1px}
.dc-note.is-ok{color:var(--green-ink);background:rgba(34,197,94,.12)}
.dc-note.is-bad{color:#fca5a5;background:rgba(239,68,68,.12)}

.hdr-auth{grid-column:3;justify-self:end;position:relative;display:flex;align-items:center;padding-right:8px}

.hdr-login{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:40px;
  padding:0 16px;
  font-size:14px;
  font-weight:700;
  color:#fff;
  background:var(--accent);
  border-radius:var(--r-md);
  transition:filter .12s,transform .08s;
}

.hdr-login .icon{width:17px;height:17px}
.hdr-login:hover{filter:brightness(1.12)}
.hdr-login:active{transform:translateY(1px)}

.hdr-user{
  display:inline-flex;
  align-items:center;
  gap:9px;
  height:40px;
  padding:0 12px 0 6px;
  font-size:14px;
  font-weight:700;
  color:#fff;
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  transition:filter .12s;
}

.hdr-user .head{width:28px;height:28px;border-radius:5px;image-rendering:pixelated}
.hdr-user .icon{width:15px;height:15px;color:var(--muted)}
.hdr-user:hover{filter:brightness(1.12)}

.hdr-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:8px;
  z-index:60;
  min-width:210px;
  padding:6px;
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  box-shadow:0 14px 34px rgba(0,0,0,.45);
}

.hdr-menu-head{padding:8px 10px 6px;font-size:12px;color:var(--dim)}

.hdr-menu button{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  padding:9px 10px;
  font-size:14px;
  font-weight:600;
  text-align:left;
  color:var(--text);
  border-radius:var(--r-sm);
}

.hdr-menu button .icon{width:16px;height:16px;color:var(--muted);transform:rotate(90deg)}
.hdr-menu button:hover{background:var(--raised)}

#login-view{display:flex;flex-direction:column;gap:14px}
.login-note{font-size:12.5px;line-height:1.5;text-align:center;color:var(--muted)}

.login-wait{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  font-size:13.5px;
  line-height:1.45;
  color:var(--muted);
  background:var(--inset);
  border-radius:var(--r-sm);
}

.login-wait .icon{flex-shrink:0;width:18px;height:18px;color:var(--accent)}
.login-wait b{color:#fff;font-variant-numeric:tabular-nums}
.login-again{align-self:center;padding:9px 16px}

.wal-bot-live.is-off{color:#ff8f7a;background:rgba(239,68,68,.12)}
.wal-bot-live.is-off i{background:#ef4444;animation:none}

.rain-acts{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}

.rain-tip{
  display:flex;
  align-items:center;
  gap:6px;
  height:38px;
  padding:0 12px;
  font-size:13px;
  font-weight:700;
  color:var(--gold);
  background:rgba(255,196,0,.12);
  border-radius:8px;
  transition:filter .12s,transform .08s;
}

.rain-tip .icon{width:16px;height:16px}
.rain-tip:hover{filter:brightness(1.15)}
.rain-tip:active{transform:translateY(1px)}

.tip-note{font-size:13px;line-height:1.5;color:var(--muted)}
.tip-bal-line{font-size:13px;color:var(--muted)}
.tip-bal-line b{color:#fff}

.wal-soon{display:grid;justify-items:center;gap:10px;padding:26px 16px;text-align:center}
.wal-soon > .icon{width:34px;height:34px;color:var(--gold)}
.wal-soon h4{font-size:17px;color:#fff}
.wal-soon p{max-width:420px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.wal-soon .start{padding:0 22px;margin-top:4px}

.wal-list{display:grid;gap:6px;margin-top:4px}

.wal-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 12px;
  font-size:14px;
  font-weight:700;
  color:#fff;
  background:var(--inset);
  border-radius:var(--r-sm);
}

.wal-state{font-size:12px;font-style:normal;font-weight:700;color:var(--muted)}
.wal-state.is-sent{color:var(--green)}
.wal-state.is-queued,
.wal-state.is-sending{color:var(--gold)}
.wal-state.is-unconfirmed{color:#fb923c}
.wal-state.is-failed{color:#ff8f7a}

.wal-link{font-size:inherit;font-weight:700;color:var(--text);text-decoration:underline;text-underline-offset:3px}
.wal-link:hover{color:#fff}

.tile.is-asking{filter:brightness(1.25)}

.player-who.is-ghost span,
.feed-who.is-ghost b{color:var(--muted);letter-spacing:.04em}

.prof-out{display:grid;justify-items:start;gap:12px;font-size:14px;color:var(--muted)}
.prof-out .start{padding:0 26px}
.prof-in{display:flex;flex-direction:column;gap:18px}
.prof-out[hidden],.prof-in[hidden],.pfp-acts [hidden]{display:none}
.pfp-row{display:flex;align-items:center;gap:16px}

.pfp-now{
  flex-shrink:0;
  width:76px;
  height:76px;
  padding:6px;
  background:var(--inset);
  border-radius:var(--r-md);
}

.pfp-now .head{width:64px;height:64px;border-radius:8px;object-fit:cover}
.pfp-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pfp-acts .chip{padding:9px 14px;cursor:pointer}
.pfp-acts small{flex-basis:100%;font-size:12.5px;color:var(--dim)}
.hint-left{font-size:12.5px;color:var(--dim)}

.live-bets{margin-top:20px}
.live-playing{margin-left:auto;font-size:13px;font-weight:600;color:var(--muted)}

.rf{display:flex;flex-direction:column;gap:14px}

.rf-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  align-items:center;
  gap:28px;
  padding:26px 28px;
  overflow:hidden;
  border-radius:var(--r-xl);
  background:
    radial-gradient(60% 90% at 88% 50%,rgba(255,196,0,.10),transparent 70%),
    radial-gradient(70% 120% at 0% 100%,rgba(6,117,229,.16),transparent 65%),
    var(--panel);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

.rf-pitch{min-width:0}
.rf-pitch h2{font-size:30px;line-height:1.12;font-weight:800;letter-spacing:-.01em;color:#fff}
.rf-pitch > p{max-width:50ch;margin-top:10px;font-size:15px;line-height:1.55;color:var(--muted)}

.rf-share{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.rf-label{font-size:13px;font-weight:600;color:var(--muted)}

.rf-linkbox{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:6px 6px 6px 14px;
  border-radius:var(--r-md);
  background:var(--inset);
  box-shadow:inset 0 0 0 1px var(--line-soft);
}

.rf-share.is-loading .rf-linkbox{opacity:.5}
.rf-linkbox > .icon{flex-shrink:0;width:18px;height:18px;color:var(--accent)}
.rf-linkbox input{flex:1;min-width:0;border:0;outline:none;background:none;font:600 15px/1.2 var(--font-title);color:#fff}

.rf-copy{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:40px;
  padding:0 16px;
  font-size:14px;
  border-radius:var(--r-sm);
  transition:background .2s;
}

.rf-copy .icon{width:16px;height:16px;margin:0}
.rf-copy.is-done{background:var(--green-mid)}

.rf-code{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.rf-code b{margin-right:4px;font-size:16px;font-weight:800;letter-spacing:.03em;color:#fff}

.rf-mini{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  color:var(--muted);
  background:var(--raised);
  border-radius:var(--r-sm);
  transition:color .15s,background .15s;
}

.rf-mini:hover{color:#fff}
.rf-mini.is-done{color:#fff;background:var(--green-mid)}
.rf-mini .icon{width:15px;height:15px}

.rf-code-edit,
.rf-use-form{display:flex;gap:8px}

.rf-code-edit input,
.rf-use-form input{
  flex:1;
  min-width:0;
  height:44px;
  padding:0 12px;
  border:0;
  outline:none;
  font:700 15px var(--font-title);
  letter-spacing:.02em;
  color:#fff;
  background:var(--inset);
  border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px var(--line-soft);
}

.rf-code-edit input:focus,
.rf-use-form input:focus{box-shadow:inset 0 0 0 1px var(--accent)}
.rf-code-edit .start,
.rf-use-form .start{height:44px;padding:0 18px;font-size:14px;border-radius:var(--r-sm)}
.rf-code-edit .chip{padding:0 14px;border-radius:var(--r-sm)}

.rf-hint{font-size:12.5px;line-height:1.5;color:var(--dim)}
.rf-login{align-self:flex-start;display:inline-flex;align-items:center;margin-top:22px;padding:0 22px;border-radius:var(--r-sm)}

.rf-web{position:relative;width:380px;height:270px}
.rf-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rf-lines path{fill:none;stroke:rgba(156,171,196,.16);stroke-width:2;stroke-dasharray:3 8;stroke-linecap:round}
.rf-lines path.is-friend{stroke:rgba(156,171,196,.32)}
.rf-lines path.is-live{stroke:rgba(255,196,0,.5);animation:rf-flow 1s linear infinite}

@keyframes rf-flow{to{stroke-dashoffset:-22}}

.rf-node,
.rf-hub{position:absolute;display:grid;place-items:center;transform:translate(-50%,-50%)}

.rf-node{
  width:46px;
  height:46px;
  padding:4px;
  background:var(--raised);
  border-radius:10px;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}

.rf-node .head,
.rf-node .sprite{width:38px;height:38px;border-radius:6px;image-rendering:pixelated}

.rf-node.is-open{
  color:var(--dim);
  background:transparent;
  box-shadow:inset 0 0 0 2px rgba(156,171,196,.22);
  animation:rf-wait 2.8s ease-in-out infinite;
}

.rf-node.is-open .icon{width:18px;height:18px}

@keyframes rf-wait{50%{box-shadow:inset 0 0 0 2px rgba(6,117,229,.6);color:var(--text)}}

.rf-hub{
  width:84px;
  height:84px;
  padding:6px;
  border-radius:16px;
  background:linear-gradient(160deg,#2a3a53,var(--raised));
  box-shadow:0 0 0 3px rgba(255,196,0,.55),0 0 34px rgba(255,196,0,.22),0 10px 24px rgba(0,0,0,.4);
}

.rf-hub .head,
.rf-hub .sprite{width:72px;height:72px;border-radius:10px;image-rendering:pixelated}

.rf-hub em{
  position:absolute;
  bottom:-11px;
  padding:2px 9px;
  font-size:11px;
  font-weight:800;
  font-style:normal;
  color:#1a1300;
  background:var(--gold);
  border-radius:99px;
}

.rf-coin{
  position:absolute;
  width:16px;
  height:16px;
  opacity:0;
  transform:translate(-50%,-50%);
  animation:rf-coin 2.8s cubic-bezier(.45,0,.7,1) infinite;
}

.rf-coin .sprite{display:block;width:16px;height:16px}

@keyframes rf-coin{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  78%{opacity:1}
  92%,100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.6)}
}

.rf-grid{display:grid;grid-template-columns:1.35fr repeat(3,minmax(0,1fr));gap:14px}

.rf-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px;
  border-radius:var(--r-xl);
  background:var(--panel);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  transition:box-shadow .2s;
}

.rf-card-head{display:flex;align-items:center;gap:10px}
.rf-card-head b{font-size:15px;color:#fff}
.rf-ico{display:grid;place-items:center;width:32px;height:32px;color:var(--accent);background:var(--raised);border-radius:8px}
.rf-ico .icon{width:17px;height:17px}
.rf-amt{margin-top:6px;font-size:24px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.rf-note{font-size:12px;color:var(--muted)}

.rf-claim-card.is-ready{box-shadow:inset 0 0 0 1px rgba(34,197,94,.55),0 0 24px rgba(34,197,94,.12)}
.rf-claim-card.is-ready .rf-ico{color:var(--green)}
.rf-claim{margin-top:10px;height:40px;font-size:14px}
.rf-claim-card.is-ready .rf-claim{background:var(--green-mid)}

.rf-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}

.rf-burst i{
  position:absolute;
  width:10px;
  height:10px;
  margin:-5px;
  opacity:0;
  background:radial-gradient(circle at 35% 35%,#fff4b8,#ffc400 55%,#c98a00);
  border-radius:50%;
  animation:burst-coin 1.05s cubic-bezier(.15,.7,.3,1) forwards;
}

.rf-burst i:nth-child(1){--dx:-120px;--dy:-24px}
.rf-burst i:nth-child(2){--dx:112px;--dy:-36px;animation-delay:.03s}
.rf-burst i:nth-child(3){--dx:-78px;--dy:-70px;animation-delay:.05s}
.rf-burst i:nth-child(4){--dx:84px;--dy:-74px}
.rf-burst i:nth-child(5){--dx:-24px;--dy:-90px;animation-delay:.04s}
.rf-burst i:nth-child(6){--dx:32px;--dy:-96px;animation-delay:.07s}
.rf-burst i:nth-child(7){--dx:-140px;--dy:20px;animation-delay:.02s}
.rf-burst i:nth-child(8){--dx:136px;--dy:24px;animation-delay:.06s}
.rf-burst i:nth-child(9){--dx:-100px;--dy:56px;animation-delay:.08s}
.rf-burst i:nth-child(10){--dx:96px;--dy:66px;animation-delay:.03s}
.rf-burst i:nth-child(11){--dx:-48px;--dy:32px;animation-delay:.09s}
.rf-burst i:nth-child(12){--dx:52px;--dy:42px;animation-delay:.05s}
.rf-burst i:nth-child(13){--dx:4px;--dy:-116px;animation-delay:.1s}

.rf-sect{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  padding:18px;
  border-radius:var(--r-xl);
  background:var(--panel);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.rf-sect h3{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;color:#fff}
.rf-sect h3 .icon{width:18px;height:18px;color:var(--accent)}

.rf-table{display:flex;flex-direction:column}

.rf-tr{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr));
  align-items:center;
  gap:12px;
  min-height:50px;
  padding:0 12px;
  font-size:14px;
  color:var(--text);
  border-radius:var(--r-sm);
}

.rf-tr:nth-child(odd):not(.rf-th){background:rgba(255,255,255,.025)}
.rf-tr > span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.rf-th{min-height:34px;font-size:12px;font-weight:600;color:var(--dim)}

.rf-who{display:flex;align-items:center;gap:10px;min-width:0}
.rf-who .head{flex-shrink:0;width:30px;height:30px;border-radius:6px}
.rf-who b{overflow:hidden;font-weight:700;color:#fff;text-overflow:ellipsis;white-space:nowrap}
.rf-live{flex-shrink:0;width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 8px rgba(34,197,94,.7)}
.rf-private{font-style:normal;color:var(--dim)}
.rf-earned{font-weight:700;color:var(--green-ink)}

.rf-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 12px;text-align:center}
.rf-empty .icon{width:26px;height:26px;margin-bottom:4px;color:var(--dim)}
.rf-empty b{font-size:15px;color:#fff}
.rf-empty span{max-width:46ch;font-size:13px;line-height:1.5;color:var(--muted)}

.rf-bottom{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:14px}

.rf-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0;list-style:none}
.rf-steps li{padding:14px;background:var(--inset);border-radius:var(--r-md)}

.rf-n{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  font-size:13px;
  font-weight:800;
  color:#fff;
  background:var(--accent);
  border-radius:50%;
}

.rf-steps b{display:block;margin-top:10px;font-size:14px;color:#fff}
.rf-steps p{margin-top:4px;font-size:13px;line-height:1.5;color:var(--muted)}

.rf-by{display:flex;align-items:center;gap:12px;padding:12px;background:var(--inset);border-radius:var(--r-md)}
.rf-by .head{width:38px;height:38px;border-radius:7px}
.rf-by b{display:block;font-size:14px;color:#fff}
.rf-by span{font-size:12.5px;color:var(--muted)}

.rf-rates{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 20px;padding:12px 14px;background:var(--inset);border-radius:var(--r-md)}
.rf-rates dt{font-size:13.5px;color:var(--text)}
.rf-rates dd{font-size:13.5px;font-weight:700;text-align:right;color:var(--green-ink);white-space:nowrap}

.rf-rules{display:flex;flex-direction:column;gap:6px;padding-left:18px;list-style:disc;font-size:13px;line-height:1.5;color:var(--muted)}

.no-anim .rf-coin{display:none}
.no-anim .rf-lines path,
.no-anim .rf-node.is-open{animation:none}

@media (max-width:1180px){
  .rf-hero{grid-template-columns:1fr}
  .rf-web{justify-self:center}
  .rf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rf-bottom{grid-template-columns:1fr}
}

@media (max-width:720px){
  .rf-steps,
  .rf-grid{grid-template-columns:1fr}
  .rf-tr{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}
  .rf-tr > span:nth-child(2){display:none}
}

.wal-lock{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  background:rgba(255,196,0,.06);
  border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px rgba(255,196,0,.3);
}

.wal-lock-top{display:flex;align-items:flex-start;gap:12px}
.wal-lock-ico{display:grid;place-items:center;flex-shrink:0;width:34px;height:34px;color:var(--gold);background:rgba(255,196,0,.14);border-radius:8px}
.wal-lock-ico .icon{width:17px;height:17px}
.wal-lock-txt b{display:block;font-size:14px;color:#fff}
.wal-lock-txt span{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--muted)}
.wal-lock-bar{height:8px;overflow:hidden;background:var(--inset);border-radius:99px}
.wal-lock-bar i{display:block;height:100%;background:var(--gold);border-radius:inherit;transition:width .4s}
.wal-lock-nums{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}

.wal-rule{display:flex;gap:8px;margin-top:4px;font-size:12px;line-height:1.45;color:var(--muted)}
.wal-rule .icon{flex-shrink:0;width:15px;height:15px;margin-top:1px}