<!doctype html>
<html lang="ru">
<head>
<meta name="tonix-build" content="1784145604">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>TONIX</title>
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<style>
*{box-sizing:border-box;margin:0;padding:0}body{background:#070707;color:#f4f4f4;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;padding-bottom:84px}.app{max-width:480px;margin:0 auto;min-height:100vh;background:radial-gradient(circle at top,#151515,#070707 55%)}button,input{font:inherit}.top{height:44px;display:flex;align-items:center;justify-content:center;position:relative}.brand{font-size:24px;font-weight:800}.back{position:absolute;left:16px;display:none;background:0;border:0;color:white;font-size:34px}.wrap{padding:12px 16px 120px}.page{display:none}.page.active{display:block}.page-title{text-align:center;font-size:28px;font-weight:900;margin:18px 0 24px}.room-card,.select,.balance-card,.list-card{background:#111;border:1px solid #272727;border-radius:16px}.select{padding:18px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}.select b{font-size:20px}.select span,.muted{color:#858585;font-size:13px}.select .right{text-align:right;font-weight:800}.room-card{padding:15px 16px;display:flex;justify-content:space-between}.room{font-size:25px;font-weight:900}.bank{font-size:22px;font-weight:900}.stats{display:grid;grid-template-columns:1fr 1fr 1fr;text-align:center;padding:14px 0}.stat{border-right:1px solid #2b2b2b}.stat:last-child{border:0}.stat b{font-size:20px}.stat span{display:block;color:#888;font-size:12px;margin-top:5px}.wheelbox{position:relative;display:flex;justify-content:center;align-items:center}.pointer{position:absolute;z-index:3;top:-1px;border-left:12px solid transparent;border-right:12px solid transparent;border-top:18px solid #fff}.wheel{width:min(78vw,335px);height:min(78vw,335px);border-radius:50%;border:8px solid #2a2a2a;background:#222;position:relative;overflow:hidden;transition:transform 1.8s cubic-bezier(.12,.75,.08,1)}.wheel:before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(rgba(0,0,0,.4) 0deg 1deg,transparent 1deg 30deg)}.center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:126px;height:126px;border-radius:50%;background:#111;border:1px solid #2b2b2b;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:23px;font-weight:900;text-align:center}.center-wait{display:none;margin-top:8px;color:#888;font-size:10px;font-weight:600;line-height:1.2;align-items:center;justify-content:center;gap:5px}.center-wait.active{display:flex}.center-wait .loader{width:12px;height:12px;border-width:2px}.main{height:58px;width:100%;border:0;border-radius:13px;background:#f4f4f4;color:#111;font-size:18px;font-weight:900;margin-top:14px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.box{background:#090909;border:1px solid #292929;border-radius:14px;padding:14px}.box span{display:block;color:#777;font-size:13px;margin-bottom:8px}.box input,.box b{background:0;border:0;outline:0;color:#fff;font-size:22px;font-weight:900;width:100%}.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.quick button{height:38px;border-radius:10px;border:1px solid #292929;background:#151515;color:#fff;font-weight:800}.wait{display:none;margin:12px auto 4px;color:#888;font-size:13px;text-align:center}.wait.active{display:flex;align-items:center;justify-content:center;gap:8px}.loader{width:15px;height:15px;border-radius:50%;border:2px solid #333;border-top-color:#fff;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.player{height:64px;border-radius:15px;background:#121212;border:1px solid #242424;padding:0 14px;display:flex;align-items:center;justify-content:space-between;margin-top:8px}.pl{display:flex;align-items:center;gap:11px}.dot{width:34px;height:34px;border-radius:50%;border:1px solid #333}.pn{font-size:15px;font-weight:900}.pc{color:#858585;font-size:12px;margin-top:4px}.pa{font-weight:900}.balance-card{padding:16px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}.balance-card span{color:#777;font-size:12px}.balance-card b{display:block;margin-top:8px;font-size:23px}.small{height:42px;border:0;border-radius:9px;background:#f4f4f4;color:#111;font-weight:900;padding:0 18px}.nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);max-width:480px;width:100%;height:76px;background:#0d0d0d;border-top:1px solid #242424;display:grid;grid-template-columns:repeat(5,1fr)}.nav button{background:0;border:0;color:#777;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:11px}.nav button.active{color:#fff;font-weight:800}.icon{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2}.menu{height:54px;border-bottom:1px solid #242424;display:flex;justify-content:space-between;align-items:center}.profile-card{background:#111;border:1px solid #272727;border-radius:18px;padding:16px;display:flex;align-items:center;gap:14px;margin-bottom:14px}.profile-photo{width:64px;height:64px;border-radius:50%;background:#2a2a2a;border:1px solid #3b3b3b;object-fit:cover}.profile-name{font-size:18px;font-weight:900}.profile-id{color:#858585;font-size:13px;margin-top:5px}.premium-balance{background:linear-gradient(145deg,#151515,#0d0d0d);border:1px solid #2b2b2b;border-radius:18px;padding:18px;margin-bottom:12px}.premium-balance span{color:#858585;font-size:13px}.premium-balance b{display:block;font-size:34px;margin-top:7px}.profile-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}.small.dark{background:#151515;color:#fff;border:1px solid #303030}.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.profile-stats div{background:#111;border:1px solid #272727;border-radius:14px;padding:13px;text-align:center}.profile-stats span{display:block;color:#858585;font-size:12px;margin-bottom:7px}.profile-stats b{font-size:16px}.profile-menu{background:#111;border:1px solid #272727;border-radius:16px;padding:0 14px}

<style>
.wheelbox{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}
.wheel{
  z-index:1;
}
.center{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  z-index:5!important;
  width:126px!important;
  height:126px!important;
  border-radius:50%!important;
  background:#111!important;
  border:1px solid #2b2b2b!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
#bank2{
  font-size:23px;
  font-weight:900;
  line-height:1.05;
}
.center-wait{
  display:none;
  margin-top:7px;
  color:#8b8b8b;
  font-size:9px;
  font-weight:700;
  line-height:1.05;
  align-items:center;
  justify-content:center;
  gap:4px;
  max-width:92px;
}
.center-wait.active{
  display:flex;
}
.center-wait .loader{
  flex:0 0 auto;
  width:10px!important;
  height:10px!important;
  border-radius:50%;
  border:2px solid #333;
  border-top-color:#fff;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.notice{
  position:fixed;
  left:50%;
  bottom:92px;
  transform:translateX(-50%) translateY(20px);
  width:calc(100% - 32px);
  max-width:448px;
  background:#151515;
  border:1px solid #2d2d2d;
  border-radius:15px;
  padding:14px 16px;
  color:#fff;
  font-size:14px;
  font-weight:800;
  opacity:0;
  pointer-events:none;
  transition:.25s;
  z-index:50;
}
.notice.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

<style>
.tabs{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:8px!important;
  margin:0 0 14px!important;
}
.tab{
  height:38px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#9a9a9a!important;
  font-size:12px!important;
  font-weight:700!important;
}
.tab.active{
  background:#1c1c1c!important;
  color:#fff!important;
}
.history-card{
  min-height:72px!important;
  padding:14px 16px!important;
  border-radius:15px!important;
  background:#111!important;
  border:1px solid #262626!important;
  margin-bottom:9px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}
.history-card b{
  display:block!important;
  font-size:15px!important;
  margin-bottom:5px!important;
}
.history-card span{
  display:block!important;
  font-size:12px!important;
  color:#8a8a8a!important;
}
.history-card .green,
.history-card .red{
  text-align:right!important;
  font-size:13px!important;
  font-weight:900!important;
}
.history-card .green{color:#49d17d!important}
.history-card .red{color:#ff5656!important}
<style>
.deposit-methods{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:18px;
}
.deposit-method{
  min-height:82px;
  padding:13px;
  border-radius:14px;
  border:1px solid #292929;
  background:#0b0b0b;
  color:#fff;
  text-align:left;
  transition:.18s;
}
.deposit-method.active{
  border-color:#777;
  background:#191919;
}
.method-title{
  display:block;
  font-size:14px;
  font-weight:800;
}
.method-text{
  display:block;
  color:#777;
  font-size:11px;
  line-height:1.3;
  margin-top:6px;
}
<style>
.winners-line{
  margin:12px 0 10px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:2px;
}
.winner-pill{
  flex:0 0 auto;
  padding:9px 11px;
  border-radius:12px;
  background:#111;
  border:1px solid #272727;
  font-size:12px;
  color:#888;
}
.winner-pill b{
  display:block;
  color:#fff;
  font-size:13px;
  max-width:110px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

</style>

</style>
<style>
.winners-line{
  margin:12px 0 10px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:2px;
}
.winner-pill{
  flex:0 0 auto;
  padding:9px 11px;
  border-radius:12px;
  background:#111;
  border:1px solid #272727;
  font-size:12px;
  color:#888;
}
.winner-pill b{
  display:block;
  color:#fff;
  font-size:13px;
  max-width:110px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

</style>

</style>
<style>
.winners-line{
  margin:12px 0 10px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:2px;
}
.winner-pill{
  flex:0 0 auto;
  padding:9px 11px;
  border-radius:12px;
  background:#111;
  border:1px solid #272727;
  font-size:12px;
  color:#888;
}
.winner-pill b{
  display:block;
  color:#fff;
  font-size:13px;
  max-width:110px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

</style>

</style>

<style>
.tabs{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:8px!important;
  margin:0 0 14px!important;
}
.tab{
  height:38px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#9a9a9a!important;
  font-size:12px!important;
  font-weight:700!important;
}
.tab.active{
  background:#1c1c1c!important;
  color:#fff!important;
}
.history-card{
  min-height:72px!important;
  padding:14px 16px!important;
  border-radius:15px!important;
  background:#111!important;
  border:1px solid #262626!important;
  margin-bottom:9px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}
.history-card b{
  display:block!important;
  font-size:15px!important;
  margin-bottom:5px!important;
}
.history-card span{
  display:block!important;
  font-size:12px!important;
  color:#8a8a8a!important;
}
.history-card .green,
.history-card .red{
  text-align:right!important;
  font-size:13px!important;
  font-weight:900!important;
}
.history-card .green{color:#49d17d!important}
.history-card .red{color:#ff5656!important}
<style>
.winners-line{
  margin:12px 0 10px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:2px;
}
.winner-pill{
  flex:0 0 auto;
  padding:9px 11px;
  border-radius:12px;
  background:#111;
  border:1px solid #272727;
  font-size:12px;
  color:#888;
}
.winner-pill b{
  display:block;
  color:#fff;
  font-size:13px;
  max-width:110px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

</style>

</style>
<style>
.winners-line{
  margin:12px 0 10px;
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:2px;
}
.winner-pill{
  flex:0 0 auto;
  padding:9px 11px;
  border-radius:12px;
  background:#111;
  border:1px solid #272727;
  font-size:12px;
  color:#888;
}
.winner-pill b{
  display:block;
  color:#fff;
  font-size:13px;
  max-width:110px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

</style>

</style>
<style>
.winners-box{
  margin:12px 0 10px;
  padding:12px;
  border-radius:16px;
  background:#0f0f0f;
  border:1px solid #292929;
}
.winners-title{
  color:#888;
  font-size:12px;
  font-weight:800;
  margin-bottom:9px;
}
.winners-line{
  margin:0!important;
  display:flex!important;
  gap:9px!important;
  overflow-x:auto!important;
  padding-bottom:1px!important;
}
.winner-pill{
  flex:0 0 auto!important;
  min-width:145px!important;
  padding:10px!important;
  border-radius:14px!important;
  background:#171717!important;
  border:1px solid #303030!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
}
.winner-pill img{
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
  background:#333;
}
.winner-pill b{
  display:block!important;
  color:#fff!important;
  font-size:13px!important;
  max-width:86px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.winner-pill span{
  display:block;
  color:#49d17d;
  font-size:12px;
  font-weight:800;
}
.winner-pill.empty span{color:#888}

</style>
<style>
.my-bet-card{
  margin:10px 0 12px;
  padding:12px 14px;
  border-radius:14px;
  background:#101010;
  border:1px solid #292929;
  color:#888;
  font-size:13px;
  font-weight:800;
}
.my-bet-card b{color:#fff;font-size:15px}
.bet-avatar-wrap{
  width:46px;
  height:46px;
  border-radius:50%;
  border:2px solid #333;
  position:relative;
  flex-shrink:0;
  background:#222;
  overflow:hidden;
}
.bet-avatar{
  width:100%;
  height:100%;
  object-fit:cover;
}
.dot.mini{
  width:12px!important;
  height:12px!important;
  position:absolute;
  right:0;
  bottom:0;
  border:2px solid #111;
}

</style>
<style>
.bet-avatar-letter{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:20px;
  font-weight:900;
}
</style>
<style>
.ops-mini-title{
  margin:18px 0 10px;
  color:#888;
  font-size:14px;
  font-weight:900;
}
</style>
<style>
.timer-ring{
  width:70px;
  height:70px;
  margin:0 auto 4px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:conic-gradient(#fff var(--timerDeg,360deg), #242424 0deg);
  position:relative;
}
.timer-ring:before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:50%;
  background:#0b0b0b;
}
.timer-ring b{
  position:relative;
  z-index:2;
  font-size:20px!important;
}
</style>
<style>
.hero-banner{
  min-height:142px;
  margin:-8px 0 18px;
  padding:20px;
  border-radius:22px;
  background:
    radial-gradient(circle at 80% 35%, rgba(255,255,255,.20), transparent 24%),
    linear-gradient(145deg,#181818,#0b0b0b 65%);
  border:1px solid #303030;
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.hero-banner:before{
  content:"";
  position:absolute;
  inset:-80px;
  background:conic-gradient(from 90deg,transparent,#ffffff22,transparent,#ffffff10,transparent);
  animation:heroSpin 8s linear infinite;
}
.hero-banner > div:first-child{
  position:relative;
  z-index:2;
}
.hero-banner span{
  display:block;
  color:#888;
  text-transform:uppercase;
  letter-spacing:1.8px;
  font-size:10px;
  font-weight:900;
  margin-bottom:8px;
}
.hero-banner b{
  display:block;
  font-size:29px;
  line-height:1;
  font-weight:950;
}
.hero-banner p{
  max-width:210px;
  margin-top:10px;
  color:#888;
  font-size:13px;
  line-height:1.35;
}
.hero-orb{
  position:relative;
  z-index:2;
  width:86px;
  height:86px;
  border-radius:50%;
  background:conic-gradient(#fff,#333,#888,#111,#fff);
  border:8px solid #202020;
  box-shadow:0 0 35px rgba(255,255,255,.13);
  animation:heroSpin 5s linear infinite;
}
.hero-orb:after{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:50%;
  background:#101010;
  border:1px solid #333;
}
@keyframes heroSpin{to{transform:rotate(360deg)}}

.room-select{
  min-height:92px;
  padding:16px!important;
  gap:13px;
}
.room-icon{
  width:54px;
  height:54px;
  border-radius:17px;
  flex-shrink:0;
  background:#151515;
  border:1px solid #333;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.room-icon:before{
  content:"";
  position:absolute;
  width:74px;
  height:74px;
  border-radius:50%;
  background:conic-gradient(#fff,#555,#111,#999,#fff);
  animation:heroSpin 4s linear infinite;
}
.room-icon span{
  position:relative;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#0e0e0e;
  border:1px solid #444;
  z-index:2;
}
.tier-2 .room-icon:before{
  background:conic-gradient(#7fd6ff,#24465a,#111,#7fd6ff);
}
.tier-3 .room-icon:before{
  background:conic-gradient(#ffe27a,#6b4a12,#111,#fff2a8);
}
.room-main{
  min-width:0;
  flex:1;
}
.room-live-row{
  display:flex;
  align-items:center;
  gap:8px;
}
.room-live-row b{
  font-size:20px!important;
}
.room-live-row em{
  font-style:normal;
  color:#49d17d;
  font-size:10px;
  font-weight:950;
  padding:4px 6px;
  border-radius:999px;
  background:#102416;
  border:1px solid #214f2d;
  animation:livePulse 1.2s infinite;
}
@keyframes livePulse{
  50%{opacity:.45}
}
</style>

<style>
html,body,.app{overflow-x:hidden!important}
.wrap{max-width:480px!important;overflow:hidden!important}
.tonix-logo{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-weight:1000;
  letter-spacing:1px;
  color:#eee;
  text-shadow:0 2px 12px rgba(255,255,255,.22);
}
.tonix-logo .logo-t{
  display:inline-block;
  font-style:italic;
  transform:skewX(-10deg);
  color:#fff;
}
.brand .tonix-logo span{font-size:24px}
</style>

<style>
#appLoader{
  position:fixed;
  inset:0;
  z-index:999999;
  background:#050505;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:opacity .55s ease, visibility .55s ease;
}
#appLoader.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.loader-bg{
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 50% 35%,rgba(255,255,255,.15),transparent 18%),
    radial-gradient(circle at 72% 60%,rgba(255,255,255,.07),transparent 16%),
    linear-gradient(135deg,#050505,#111,#050505);
  animation:loaderBg 4s linear infinite;
}
.loader-card{
  position:relative;
  z-index:2;
  width:260px;
  padding:30px 22px;
  border-radius:32px;
  border:1px solid #262626;
  background:linear-gradient(145deg,rgba(22,22,22,.88),rgba(5,5,5,.92));
  box-shadow:0 0 45px rgba(255,255,255,.08), inset 0 0 30px rgba(255,255,255,.035);
  text-align:center;
}
.loader-logo{
  font-size:34px;
  font-weight:1000;
  letter-spacing:4px;
  color:#fff;
  text-shadow:0 0 18px rgba(255,255,255,.35);
  margin-bottom:24px;
}
.loader-cube{
  width:92px;
  height:92px;
  margin:0 auto 22px;
  border-radius:26px;
  background:linear-gradient(135deg,#f4f4f4,#161616 48%,#8d8d8d);
  transform:rotate(45deg);
  animation:loaderCube 1.6s ease-in-out infinite;
  box-shadow:0 0 32px rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
}
.loader-cube span{
  width:28px;
  height:28px;
  border-radius:50%;
  background:#050505;
  box-shadow:inset 0 0 10px rgba(255,255,255,.12);
}
.loader-title{
  font-size:26px;
  font-weight:1000;
  color:#fff;
}
.loader-text{
  margin-top:7px;
  color:#888;
  font-size:14px;
  font-weight:800;
}
.loader-bar{
  margin-top:22px;
  height:7px;
  border-radius:999px;
  background:#151515;
  overflow:hidden;
  border:1px solid #292929;
}
.loader-bar i{
  display:block;
  height:100%;
  width:45%;
  border-radius:999px;
  background:linear-gradient(90deg,#777,#fff,#777);
  animation:loaderBar 1.15s ease-in-out infinite;
}
@keyframes loaderBg{
  0%{transform:rotate(0deg) scale(1)}
  100%{transform:rotate(360deg) scale(1.05)}
}
@keyframes loaderCube{
  0%,100%{transform:rotate(45deg) scale(1)}
  50%{transform:rotate(225deg) scale(1.08)}
}
@keyframes loaderBar{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(260%)}
}
</style>


<style id="tonixLeaderboardStyle">
.leader-card{
  width:100%;
  min-height:92px;
  margin:0 0 14px;
  padding:16px 18px;
  border-radius:22px;
  border:1px solid #363636;
  color:#fff;
  background:linear-gradient(110deg,#101010,#242424,#0a0a0a,#303030,#101010);
  background-size:300% 300%;
  animation:leaderFlow 4s linear infinite;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:left;
  overflow:hidden;
  position:relative;
}
.leader-card:before{
  content:"";
  position:absolute;
  inset:-40px;
  background:radial-gradient(circle at 80% 40%,rgba(255,255,255,.22),transparent 28%);
  pointer-events:none;
}
.leader-card div,.leader-card strong{position:relative;z-index:2}
.leader-card span{
  display:block;
  color:#aaa;
  font-size:11px;
  letter-spacing:2px;
  font-weight:1000;
}
.leader-card b{
  display:block;
  margin-top:5px;
  font-size:27px;
  font-weight:1000;
}
.leader-card em{
  display:block;
  margin-top:5px;
  color:#aaa;
  font-style:normal;
  font-size:13px;
  font-weight:800;
}
.leader-card strong{
  font-size:40px;
  line-height:1;
}
@keyframes leaderFlow{
  0%{background-position:0% 50%}
  100%{background-position:300% 50%}
}
.leader-panel{
  background:linear-gradient(145deg,#151515,#070707);
  border:1px solid #303030;
  border-radius:22px;
  padding:14px;
  overflow:hidden;
}
.leader-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:12px;
}
.leader-tabs button{
  height:46px;
  border-radius:14px;
  border:1px solid #303030;
  background:#101010;
  color:#888;
  font-weight:1000;
}
.leader-tabs button.active{
  background:#f2f2f2;
  color:#111;
}
.leader-row{
  display:grid;
  grid-template-columns:34px 48px 1fr auto;
  gap:10px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid #222;
}
.leader-row:last-child{border-bottom:0}
.leader-place{
  font-size:18px;
  font-weight:1000;
  text-align:center;
}
.leader-avatar{
  width:46px;
  height:46px;
  border-radius:50%;
  object-fit:cover;
  background:#222;
  border:1px solid #333;
}
.leader-name{
  min-width:0;
}
.leader-name b{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:15px;
}
.leader-name span{
  display:block;
  color:#777;
  font-size:12px;
  margin-top:3px;
}
.leader-value{
  font-size:15px;
  font-weight:1000;
  color:#49d17d;
  white-space:nowrap;
}
.leader-my-place{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  border:1px solid #303030;
  background:#0d0d0d;
  text-align:center;
  font-size:18px;
  font-weight:1000;
}
.leader-me{
  border:1px solid #49d17d!important;
  background:linear-gradient(90deg,#0e1b13,#111,#0e1b13)!important;
  border-radius:14px;
  padding-left:8px;
  padding-right:8px;
}
</style>


<style id="amount-clear-style">
.amount-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
}
.amount-input-wrap #amount{
  padding-right:34px;
}
.amount-clear{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#1c1c1c;
  color:#888;
  font-size:20px;
  line-height:28px;
  font-weight:500;
}
.amount-clear:active{
  background:#292929;
  color:#fff;
}
</style>


<style id="tonixLeaderboardPremiumV4">

#leaderboardPage.lb-page{
  padding-bottom:110px;
}

#leaderboardPage .lb-header{
  padding:22px 0 27px;
  text-align:center;
}

#leaderboardPage .lb-header > span{
  display:block;
  color:#777;
  font-size:10px;
  font-weight:1000;
  letter-spacing:2.4px;
}

#leaderboardPage .lb-header h1{
  margin:7px 0 0;
  color:#f3f3f3;
  font-size:45px;
  line-height:1;
  font-weight:1000;
  letter-spacing:-2px;
}

#leaderboardPage .lb-header p{
  max-width:270px;
  margin:11px auto 0;
  color:#707070;
  font-size:12px;
  line-height:1.4;
}

#leaderboardPage .lb-podium{
  display:grid;
  grid-template-columns:1fr 1.08fr 1fr;
  gap:7px;
  align-items:end;
  margin-bottom:13px;
}

#leaderboardPage .lb-top-card{
  min-width:0;
  min-height:177px;
  padding:13px 7px 12px;
  border:1px solid #282828;
  border-radius:19px;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.08),transparent 43%),
    linear-gradient(155deg,#151515,#080808);
  display:flex;
  flex-direction:column;
  align-items:center;
  overflow:hidden;
  position:relative;
}

#leaderboardPage .lb-top-card.first{
  min-height:205px;
  border-color:#454545;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.16),transparent 46%),
    linear-gradient(155deg,#202020,#090909 72%);
  box-shadow:0 15px 38px rgba(0,0,0,.28);
}

#leaderboardPage .lb-top-card.is-me,
#leaderboardPage .lb-row.is-me{
  border-color:#eee;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.11),
    0 0 22px rgba(255,255,255,.06);
}

#leaderboardPage .lb-top-place{
  width:29px;
  height:25px;
  border-radius:9px;
  background:linear-gradient(145deg,#f1f1f1,#787878);
  color:#080808;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:1000;
  margin-bottom:10px;
}

#leaderboardPage .lb-avatar{
  flex:0 0 auto;
  border-radius:50%;
  overflow:hidden;
  border:1px solid #3b3b3b;
  background:#171717;
}

#leaderboardPage .lb-avatar img{
  display:block;
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
}

#leaderboardPage .lb-top-avatar{
  width:54px;
  height:54px;
}

#leaderboardPage .lb-top-card.first .lb-top-avatar{
  width:65px;
  height:65px;
}

#leaderboardPage .lb-top-name{
  width:100%;
  margin-top:10px;
  padding:0 2px;
  color:#ededed;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-align:center;
}

#leaderboardPage .lb-top-card.first .lb-top-name{
  font-size:13px;
}

#leaderboardPage .lb-top-value{
  margin-top:auto;
  padding-top:10px;
  color:#f1f1f1;
  font-size:17px;
  line-height:1;
  font-weight:1000;
  white-space:nowrap;
}

#leaderboardPage .lb-top-card.first .lb-top-value{
  font-size:20px;
}

#leaderboardPage .lb-top-value span{
  font-size:9px;
  color:#8b8b8b;
}

#leaderboardPage .lb-top-caption{
  margin-top:5px;
  color:#626262;
  font-size:9px;
  font-weight:800;
}

#leaderboardPage .lb-table{
  border:1px solid #292929;
  border-radius:21px;
  background:linear-gradient(150deg,#111,#080808);
  overflow:hidden;
}

#leaderboardPage .lb-table-head{
  height:43px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #242424;
  color:#666;
  font-size:9px;
  font-weight:1000;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

#leaderboardPage .lb-row{
  min-height:72px;
  padding:11px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid #202020;
}

#leaderboardPage .lb-row:last-child{
  border-bottom:0;
}

#leaderboardPage .lb-row-main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}

#leaderboardPage .lb-row-place{
  width:27px;
  flex:0 0 27px;
  color:#aaa;
  font-size:15px;
  font-weight:1000;
  text-align:center;
}

#leaderboardPage .lb-row-avatar{
  width:42px;
  height:42px;
}

#leaderboardPage .lb-row-name{
  min-width:0;
}

#leaderboardPage .lb-row-name b{
  display:block;
  max-width:165px;
  color:#ededed;
  font-size:14px;
  font-weight:900;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

#leaderboardPage .lb-row-name span{
  display:block;
  margin-top:4px;
  color:#606060;
  font-size:10px;
  font-weight:700;
}

#leaderboardPage .lb-row-value{
  flex:0 0 auto;
  white-space:nowrap;
  text-align:right;
}

#leaderboardPage .lb-row-value b{
  color:#eee;
  font-size:15px;
  font-weight:1000;
}

#leaderboardPage .lb-row-value span{
  margin-left:2px;
  color:#777;
  font-size:9px;
  font-weight:900;
}

#leaderboardPage .lb-my-place{
  min-height:62px;
  margin-top:13px;
  padding:14px 16px;
  border:1px solid #2d2d2d;
  border-radius:18px;
  background:
    radial-gradient(circle at 85% 10%,rgba(255,255,255,.07),transparent 35%),
    #101010;
  color:#777;
  font-size:12px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
}

#leaderboardPage .lb-my-place.active{
  justify-content:space-between;
}

#leaderboardPage .lb-my-place.active div span{
  display:block;
  color:#666;
  font-size:10px;
}

#leaderboardPage .lb-my-place.active div b{
  display:block;
  margin-top:5px;
  color:#eee;
  font-size:17px;
  font-weight:1000;
}

#leaderboardPage .lb-my-place.active strong{
  color:#fff;
  font-size:26px;
  font-weight:1000;
}

#leaderboardPage .lb-state{
  grid-column:1/-1;
  min-height:145px;
  padding:20px;
  border:1px solid #292929;
  border-radius:21px;
  background:#101010;
  color:#777;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-align:center;
}

#leaderboardPage .lb-state b{
  color:#eee;
  font-size:15px;
}

#leaderboardPage .lb-state span{
  font-size:11px;
}

@media(max-width:380px){
  #leaderboardPage .lb-podium{
    gap:5px;
  }

  #leaderboardPage .lb-top-card{
    padding-left:5px;
    padding-right:5px;
  }

  #leaderboardPage .lb-top-avatar{
    width:48px;
    height:48px;
  }

  #leaderboardPage .lb-top-card.first .lb-top-avatar{
    width:58px;
    height:58px;
  }

  #leaderboardPage .lb-row-name b{
    max-width:125px;
  }
}

</style>



<style id="historyPremiumLayout">
#historyList .history-card-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(100px,auto)!important;
  align-items:center!important;
  gap:12px!important;
  min-height:82px!important;
  padding:15px 16px!important;
}

#historyList .history-info{
  min-width:0;
}

#historyList .history-info b{
  margin:0 0 6px!important;
  color:#f3f3f3!important;
  font-size:15px!important;
  line-height:1.15!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#historyList .history-info span{
  color:#777!important;
  font-size:11px!important;
  white-space:nowrap;
}

#historyList .history-status{
  min-width:82px;
  padding:7px 9px;
  border-radius:10px;
  text-align:center!important;
  font-size:11px!important;
  font-weight:900!important;
  line-height:1.1;
  white-space:nowrap;
}

#historyList .history-status.green{
  color:#49d17d!important;
  background:rgba(73,209,125,.08);
  border:1px solid rgba(73,209,125,.18);
}

#historyList .history-status.red{
  color:#ff6262!important;
  background:rgba(255,86,86,.08);
  border:1px solid rgba(255,86,86,.18);
}

#historyList .history-status.pending{
  color:#d0d0d0!important;
  background:#191919;
  border:1px solid #303030;
}

#historyList .history-status.empty{
  visibility:hidden;
  border:0;
  background:transparent;
}

#historyList .history-amount{
  text-align:right!important;
  font-size:14px!important;
  font-weight:1000!important;
  line-height:1.15;
  white-space:nowrap;
}

#historyList .history-amount.green{
  color:#49d17d!important;
}

#historyList .history-amount.red{
  color:#ff6262!important;
}

@media(max-width:380px){
  #historyList .history-card-grid{
    grid-template-columns:minmax(0,1fr) auto minmax(88px,auto)!important;
    gap:8px!important;
    padding:14px 13px!important;
  }

  #historyList .history-status{
    min-width:69px;
    padding:6px 7px;
    font-size:10px!important;
  }

  #historyList .history-amount{
    font-size:12px!important;
  }

  #historyList .history-info b{
    font-size:14px!important;
  }

  #historyList .history-info span{
    font-size:10px!important;
  }
}
</style>


<style id="depositWithdrawPremiumHistory">
#depositOpsList .ops-history-card,
#withdrawOpsList .ops-history-card{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(96px,auto)!important;
  align-items:center!important;
  gap:12px!important;
  min-height:82px!important;
  padding:15px 16px!important;
}

#depositOpsList .ops-history-info,
#withdrawOpsList .ops-history-info{
  min-width:0;
}

#depositOpsList .ops-history-info b,
#withdrawOpsList .ops-history-info b{
  margin:0 0 6px!important;
  color:#f3f3f3!important;
  font-size:15px!important;
  line-height:1.15!important;
}

#depositOpsList .ops-history-info span,
#withdrawOpsList .ops-history-info span{
  color:#777!important;
  font-size:11px!important;
  white-space:nowrap;
}

#depositOpsList .ops-history-status,
#withdrawOpsList .ops-history-status{
  min-width:82px;
  padding:7px 9px;
  border-radius:10px;
  text-align:center!important;
  font-size:11px!important;
  font-weight:900!important;
  line-height:1.1;
  white-space:nowrap;
}

#depositOpsList .ops-history-status.green,
#withdrawOpsList .ops-history-status.green{
  color:#49d17d!important;
  background:rgba(73,209,125,.08);
  border:1px solid rgba(73,209,125,.18);
}

#depositOpsList .ops-history-status.red,
#withdrawOpsList .ops-history-status.red{
  color:#ff6262!important;
  background:rgba(255,86,86,.08);
  border:1px solid rgba(255,86,86,.18);
}

#depositOpsList .ops-history-status.pending,
#withdrawOpsList .ops-history-status.pending{
  color:#d0d0d0!important;
  background:#191919;
  border:1px solid #303030;
}

#depositOpsList .ops-history-amount,
#withdrawOpsList .ops-history-amount{
  text-align:right!important;
  font-size:14px!important;
  font-weight:1000!important;
  line-height:1.15;
  white-space:nowrap;
}

#depositOpsList .ops-history-amount.green,
#withdrawOpsList .ops-history-amount.green{
  color:#49d17d!important;
}

#depositOpsList .ops-history-amount.red,
#withdrawOpsList .ops-history-amount.red{
  color:#ff6262!important;
}

@media(max-width:380px){
  #depositOpsList .ops-history-card,
  #withdrawOpsList .ops-history-card{
    grid-template-columns:minmax(0,1fr) auto minmax(82px,auto)!important;
    gap:8px!important;
    padding:14px 13px!important;
  }

  #depositOpsList .ops-history-status,
  #withdrawOpsList .ops-history-status{
    min-width:68px;
    padding:6px 7px;
    font-size:10px!important;
  }

  #depositOpsList .ops-history-amount,
  #withdrawOpsList .ops-history-amount{
    font-size:12px!important;
  }

  #depositOpsList .ops-history-info b,
  #withdrawOpsList .ops-history-info b{
    font-size:14px!important;
  }

  #depositOpsList .ops-history-info span,
  #withdrawOpsList .ops-history-info span{
    font-size:10px!important;
  }
}
</style>


<style id="profileHistoryPremiumLayout">
#myBetsList .profile-history-card,
#operationsList .profile-history-card{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(96px,auto)!important;
  align-items:center!important;
  gap:10px!important;
  min-height:82px!important;
  padding:15px 16px!important;
}

#myBetsList .profile-history-info,
#operationsList .profile-history-info{
  min-width:0;
}

#myBetsList .profile-history-info b,
#operationsList .profile-history-info b{
  display:block!important;
  margin:0 0 6px!important;
  color:#f3f3f3!important;
  font-size:15px!important;
  line-height:1.15!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#myBetsList .profile-history-info span,
#operationsList .profile-history-info span{
  display:block!important;
  color:#777!important;
  font-size:11px!important;
  white-space:nowrap;
}

#myBetsList .profile-history-status,
#operationsList .profile-history-status{
  min-width:78px;
  padding:7px 8px;
  border-radius:10px;
  text-align:center!important;
  font-size:11px!important;
  font-weight:900!important;
  line-height:1.1;
  white-space:nowrap;
}

#myBetsList .profile-history-status.green,
#operationsList .profile-history-status.green{
  color:#49d17d!important;
  background:rgba(73,209,125,.08);
  border:1px solid rgba(73,209,125,.18);
}

#myBetsList .profile-history-status.red,
#operationsList .profile-history-status.red{
  color:#ff6262!important;
  background:rgba(255,86,86,.08);
  border:1px solid rgba(255,86,86,.18);
}

#myBetsList .profile-history-status.pending,
#operationsList .profile-history-status.pending{
  color:#d0d0d0!important;
  background:#191919;
  border:1px solid #303030;
}

#myBetsList .profile-history-status.empty,
#operationsList .profile-history-status.empty{
  visibility:hidden;
  border:0;
  background:transparent;
}

#myBetsList .profile-history-amount,
#operationsList .profile-history-amount{
  text-align:right!important;
  font-size:14px!important;
  font-weight:1000!important;
  line-height:1.15;
  white-space:nowrap;
}

#myBetsList .profile-history-amount.green,
#operationsList .profile-history-amount.green{
  color:#49d17d!important;
}

#myBetsList .profile-history-amount.red,
#operationsList .profile-history-amount.red{
  color:#ff6262!important;
}

@media(max-width:380px){
  #myBetsList .profile-history-card,
  #operationsList .profile-history-card{
    grid-template-columns:minmax(0,1fr) auto minmax(82px,auto)!important;
    gap:7px!important;
    padding:14px 12px!important;
  }

  #myBetsList .profile-history-status,
  #operationsList .profile-history-status{
    min-width:65px;
    padding:6px;
    font-size:9px!important;
  }

  #myBetsList .profile-history-amount,
  #operationsList .profile-history-amount{
    font-size:12px!important;
  }

  #myBetsList .profile-history-info b,
  #operationsList .profile-history-info b{
    font-size:14px!important;
  }

  #myBetsList .profile-history-info span,
  #operationsList .profile-history-info span{
    font-size:10px!important;
  }
}
</style>


<style id="profile-avatar-fix">
.profile-photo-wrap{
  width:64px;
  height:64px;
  min-width:64px;
  position:relative;
  border-radius:50%;
  overflow:hidden;
  background:#202020;
  border:1px solid #3b3b3b;
  display:flex;
  align-items:center;
  justify-content:center;
}

.profile-photo-wrap .profile-photo{
  width:100%;
  height:100%;
  border:0;
  border-radius:50%;
  display:none;
  object-fit:cover;
  object-position:center;
  background:#202020;
}

.profile-photo-fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(145deg,#303030,#171717);
  color:#ffffff;
  font-size:25px;
  font-weight:900;
  line-height:1;
  text-transform:uppercase;
}
</style>


<style id="tonix-modes-styles">
.home-mode-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:4px;
  padding-bottom:12px;
}

.home-mode-card{
  width:100%;
  min-height:154px;
  padding:21px 20px;
  border-radius:23px;
  border:1px solid #2b2b2b;
  background:
    radial-gradient(circle at 83% 35%,rgba(255,255,255,.12),transparent 27%),
    linear-gradient(145deg,#171717,#0c0c0c 68%);
  color:#fff;
  display:flex;
  align-items:center;
  text-align:left;
  position:relative;
  overflow:hidden;
}

.home-mode-card:before{
  content:"";
  position:absolute;
  inset:-70px;
  background:conic-gradient(
    from 130deg,
    transparent,
    rgba(255,255,255,.045),
    transparent,
    rgba(255,255,255,.02),
    transparent
  );
  animation:heroSpin 12s linear infinite;
}

.home-mode-content{
  position:relative;
  z-index:3;
  max-width:245px;
}

.home-mode-content span{
  display:block;
  color:#777;
  font-size:10px;
  font-weight:950;
  letter-spacing:2px;
  margin-bottom:9px;
}

.home-mode-content b{
  display:block;
  font-size:29px;
  line-height:1;
  font-weight:950;
}

.home-mode-content p{
  max-width:225px;
  margin-top:11px;
  color:#898989;
  font-size:13px;
  line-height:1.4;
}

.home-mode-content em{
  display:inline-flex;
  margin-top:14px;
  padding:7px 10px;
  border-radius:999px;
  background:#171717;
  border:1px solid #303030;
  color:#aaa;
  font-size:10px;
  font-style:normal;
  font-weight:850;
}

.home-mode-card > strong{
  position:absolute;
  right:18px;
  z-index:4;
  color:#fff;
  font-size:38px;
  font-weight:300;
}

.home-mode-visual{
  position:absolute;
  right:42px;
  top:50%;
  transform:translateY(-50%);
  width:86px;
  height:86px;
  z-index:2;
}

.jackpot-mode-visual{
  border-radius:25px;
  transform:translateY(-50%) rotate(45deg);
  background:linear-gradient(145deg,#606060,#101010 62%);
  border:8px solid #242424;
  box-shadow:0 0 36px rgba(255,255,255,.09);
}

.jackpot-mode-visual i{
  position:absolute;
  inset:24px;
  border-radius:50%;
  background:#050505;
  border:1px solid #343434;
}

.cases-mode-card{
  background:
    radial-gradient(circle at 82% 47%,rgba(255,255,255,.13),transparent 27%),
    linear-gradient(145deg,#171717,#0b0b0b 70%);
}

.cases-mode-visual{
  width:92px;
  height:75px;
  right:39px;
  border-radius:20px;
  background:linear-gradient(145deg,#383838,#101010 60%);
  border:2px solid #494949;
  box-shadow:
    inset 0 -12px 22px rgba(0,0,0,.7),
    0 17px 30px rgba(0,0,0,.42);
}

.cases-mode-visual:before{
  content:"";
  position:absolute;
  left:-3px;
  right:-3px;
  top:17px;
  height:13px;
  background:linear-gradient(#4e4e4e,#191919);
  border-top:1px solid #646464;
  border-bottom:1px solid #101010;
}

.cases-mode-visual:after{
  content:"T";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-35%);
  width:30px;
  height:30px;
  border-radius:10px;
  background:#090909;
  border:1px solid #555;
  color:#e4e4e4;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  font-weight:950;
}

.cases-mode-visual i{
  position:absolute;
  width:8px;
  height:15px;
  border-radius:3px;
  background:#626262;
  top:5px;
}

.cases-mode-visual i:nth-child(1){left:13px}
.cases-mode-visual i:nth-child(2){left:42px}
.cases-mode-visual i:nth-child(3){right:13px}

.mode-inner-page{
  padding-bottom:12px;
}

.mode-page-head{
  padding:12px 2px 20px;
}

.mode-page-head span{
  color:#777;
  font-size:10px;
  letter-spacing:2px;
  font-weight:950;
}

.mode-page-head h1{
  margin-top:8px;
  font-size:29px;
  line-height:1.08;
  font-weight:950;
}

.mode-page-head p{
  margin-top:8px;
  color:#7f7f7f;
  font-size:13px;
  line-height:1.4;
}

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

.case-select{
  width:100%;
  min-height:104px;
  padding:15px 15px;
  border:1px solid #292929;
  border-radius:19px;
  background:linear-gradient(145deg,#141414,#0b0b0b);
  color:#fff;
  display:flex;
  align-items:center;
  gap:14px;
  text-align:left;
  position:relative;
  overflow:hidden;
}

.case-select:before{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  right:-60px;
  top:-55px;
  border-radius:50%;
  background:rgba(255,255,255,.025);
}

.case-box-icon{
  width:70px;
  height:58px;
  min-width:70px;
  position:relative;
  border-radius:15px;
  background:linear-gradient(145deg,#424242,#121212 62%);
  border:2px solid #4a4a4a;
  box-shadow:inset 0 -11px 17px rgba(0,0,0,.65);
}

.case-box-icon:before{
  content:"";
  position:absolute;
  left:-2px;
  right:-2px;
  top:13px;
  height:10px;
  background:linear-gradient(#555,#171717);
  border-top:1px solid #666;
}

.case-box-icon:after{
  content:"T";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-28%);
  width:22px;
  height:22px;
  border-radius:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:#070707;
  border:1px solid #606060;
  font-size:11px;
  font-weight:950;
}

.case-select-main{
  flex:1;
  min-width:0;
  position:relative;
  z-index:2;
}

.case-select-main b{
  display:block;
  font-size:17px;
  font-weight:900;
}

.case-select-main span{
  display:block;
  margin-top:5px;
  color:#7e7e7e;
  font-size:12px;
}

.case-select-main strong{
  display:block;
  margin-top:8px;
  color:#4bd47e;
  font-size:15px;
  font-weight:950;
}

.case-select > em{
  position:relative;
  z-index:2;
  color:#fff;
  font-size:32px;
  font-style:normal;
  font-weight:300;
}

.case-silver .case-box-icon{
  background:linear-gradient(145deg,#6f8490,#15191c 62%);
  border-color:#526672;
}

.case-gold .case-box-icon{
  background:linear-gradient(145deg,#8b701f,#1c1608 62%);
  border-color:#685313;
}

.case-premium .case-box-icon{
  background:linear-gradient(145deg,#545454,#111 62%);
  border-color:#5b5b5b;
  box-shadow:
    inset 0 -11px 17px rgba(0,0,0,.65),
    0 0 23px rgba(255,255,255,.06);
}
</style>





<style id="tonix-fixed-nav-fix">
html,
body{
  min-height:100%;
  overflow-x:hidden;
}

body{
  padding-bottom:0!important;
}

/* Контент спокойно прокручивается за нижнее меню */
.app{
  position:relative;
  min-height:100vh;
  padding-bottom:0!important;
}

.wrap{
  position:relative;
  z-index:1;
  padding-bottom:112px!important;
}

/* Меню всегда выше абсолютно всего контента */
.nav{
  position:fixed!important;
  left:50%!important;
  bottom:0!important;
  transform:translateX(-50%)!important;
  z-index:99999!important;

  height:76px!important;
  background:#0d0d0d!important;
  border-top:1px solid #292929!important;

  isolation:isolate;
  overflow:hidden;
  box-shadow:0 -10px 28px rgba(0,0,0,.78);
}

/* Никакой текст и элементы карточек не смогут залезть поверх меню */
.nav button{
  position:relative;
  z-index:2;
}

/* Главная получает место, чтобы последнюю карточку
   можно было полностью поднять выше меню */
#game #rooms{
  padding-bottom:24px!important;
}

#homeModeList{
  padding-bottom:22px!important;
}

/* Чуть компактнее карточки режимов */
.home-mode-card{
  min-height:146px!important;
  padding:19px 20px!important;
}

.home-mode-content p{
  margin-top:9px!important;
}

.home-mode-content em{
  margin-top:11px!important;
}

/* На невысоких экранах делаем ещё немного компактнее */
@media (max-height:760px){
  .home-mode-card{
    min-height:137px!important;
    padding-top:17px!important;
    padding-bottom:17px!important;
  }

  .home-mode-content b{
    font-size:27px!important;
  }

  .home-mode-content p{
    font-size:12px!important;
    line-height:1.35!important;
  }

  .home-mode-content em{
    margin-top:9px!important;
    padding:6px 9px!important;
  }
}
</style>


<style id="tonix-cases-live-ui">
.case-opening-panel{
  padding:22px 0 8px;
  text-align:center;
}

.case-opening-box{
  width:190px;
  height:160px;
  margin:6px auto 22px;
  border-radius:30px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 30%,rgba(255,255,255,.16),transparent 38%),
    linear-gradient(145deg,#353535,#0c0c0c 68%);
  border:2px solid #3c3c3c;
  box-shadow:
    inset 0 -25px 40px rgba(0,0,0,.7),
    0 22px 50px rgba(0,0,0,.5);
  overflow:hidden;
}

.case-opening-box:before{
  content:"";
  position:absolute;
  left:-8px;
  right:-8px;
  top:38px;
  height:25px;
  background:linear-gradient(#555,#151515);
  border-top:1px solid #6b6b6b;
  border-bottom:1px solid #090909;
}

.case-opening-glow{
  position:absolute;
  width:230px;
  height:230px;
  border-radius:50%;
  background:conic-gradient(
    transparent,
    rgba(255,255,255,.24),
    transparent,
    rgba(255,255,255,.08),
    transparent
  );
  animation:caseGlowSpin 1s linear infinite;
  opacity:.75;
}

.case-opening-icon{
  position:relative;
  z-index:2;
  width:64px;
  height:64px;
  margin-top:22px;
  border-radius:19px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#070707;
  border:1px solid #666;
  color:#fff;
  font-size:27px;
  font-weight:950;
  box-shadow:0 0 28px rgba(255,255,255,.12);
}

.case-opening-panel.opening .case-opening-box{
  animation:caseOpeningShake .42s ease-in-out infinite;
}

.case-opening-panel.result .case-opening-box{
  animation:caseResultPop .55s ease forwards;
}

.case-opening-panel.result .case-opening-glow{
  animation-duration:2.5s;
  opacity:.35;
}

.case-opening-label{
  display:block;
  color:#858585;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

.case-opening-prize{
  display:block;
  margin-top:9px;
  font-size:36px;
  line-height:1;
  font-weight:950;
}

.case-opening-text{
  margin:11px auto 4px;
  max-width:270px;
  color:#818181;
  font-size:13px;
  line-height:1.4;
}

.case-back-list-btn{
  width:100%;
  height:48px;
  margin-top:9px;
  border-radius:13px;
  border:1px solid #2d2d2d;
  background:#111;
  color:#aaa;
  font-weight:850;
}

.case-history-card{
  margin-top:20px;
  padding:17px;
  border-radius:19px;
  border:1px solid #292929;
  background:linear-gradient(145deg,#131313,#0b0b0b);
}

.case-history-head span{
  display:block;
  color:#747474;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.7px;
}

.case-history-head b{
  display:block;
  margin-top:5px;
  font-size:20px;
}

.case-history-row{
  min-height:67px;
  margin-top:10px;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid #242424;
  background:#0c0c0c;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.case-history-info b{
  display:block;
  font-size:14px;
}

.case-history-info span{
  display:block;
  margin-top:4px;
  color:#747474;
  font-size:11px;
}

.case-history-result{
  text-align:right;
}

.case-history-result b{
  display:block;
  font-size:15px;
}

.case-history-result b.win{
  color:#49d17d;
}

.case-history-result span{
  display:block;
  margin-top:4px;
  color:#747474;
  font-size:10px;
}

.case-history-empty{
  padding:22px 0 7px;
  color:#707070;
  font-size:13px;
  text-align:center;
}

@keyframes caseGlowSpin{
  to{transform:rotate(360deg)}
}

@keyframes caseOpeningShake{
  0%,100%{transform:translateX(0) rotate(0)}
  25%{transform:translateX(-4px) rotate(-1deg)}
  75%{transform:translateX(4px) rotate(1deg)}
}

@keyframes caseResultPop{
  0%{transform:scale(.82);opacity:.35}
  65%{transform:scale(1.06);opacity:1}
  100%{transform:scale(1);opacity:1}
}
</style>


<style id="tonix-case-detail-roulette">

.case-detail-panel{
  padding-bottom:20px;
}

.case-detail-hero{
  text-align:center;
  padding:10px 0 20px;
}

.case-detail-box{
  width:142px;
  height:116px;
  margin:0 auto 20px;
  border-radius:27px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 22%,rgba(255,255,255,.18),transparent 40%),
    linear-gradient(145deg,#3d3d3d,#0b0b0b 67%);
  border:2px solid #454545;
  box-shadow:
    inset 0 -22px 32px rgba(0,0,0,.72),
    0 22px 44px rgba(0,0,0,.45);
}

.case-detail-box:before{
  content:"";
  position:absolute;
  left:-5px;
  right:-5px;
  top:28px;
  height:20px;
  background:linear-gradient(#555,#171717);
  border-top:1px solid #666;
  border-bottom:1px solid #090909;
}

.case-detail-box span{
  position:relative;
  z-index:2;
  width:48px;
  height:48px;
  margin-top:18px;
  border-radius:15px;
  background:#080808;
  border:1px solid #666;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:950;
}

.case-detail-label{
  color:#747474;
  font-size:10px;
  font-weight:950;
  letter-spacing:2px;
}

.case-detail-hero h1{
  margin-top:7px;
  font-size:30px;
  font-weight:950;
}

.case-detail-hero p{
  max-width:290px;
  margin:8px auto 0;
  color:#7e7e7e;
  font-size:13px;
  line-height:1.4;
}

.case-price-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-bottom:12px;
}

.case-price-card > div{
  min-width:0;
  padding:14px;
  border-radius:15px;
  background:#111;
  border:1px solid #292929;
}

.case-price-card span{
  display:block;
  color:#777;
  font-size:11px;
}

.case-price-card b{
  display:block;
  margin-top:7px;
  font-size:17px;
  white-space:nowrap;
}

.case-content-card{
  padding:16px;
  border-radius:18px;
  background:linear-gradient(145deg,#131313,#0b0b0b);
  border:1px solid #292929;
}

.case-content-title span{
  display:block;
  color:#737373;
  font-size:10px;
  font-weight:900;
  letter-spacing:1.7px;
}

.case-content-title b{
  display:block;
  margin-top:5px;
  font-size:19px;
}

.case-prizes-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:14px;
}

.case-prize-preview{
  min-height:70px;
  border-radius:13px;
  background:#0b0b0b;
  border:1px solid #272727;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.case-prize-preview i{
  width:25px;
  height:25px;
  border-radius:50%;
  background:linear-gradient(145deg,#eee,#555);
  border:4px solid #232323;
}

.case-prize-preview b{
  margin-top:7px;
  font-size:12px;
}

.case-open-main-btn{
  margin-top:14px;
}

.case-roulette-window{
  width:calc(100% + 32px);
  height:142px;
  margin:4px -16px 24px;
  position:relative;
  overflow:hidden;
  background:#080808;
  border-top:1px solid #292929;
  border-bottom:1px solid #292929;
  box-shadow:
    inset 35px 0 35px rgba(0,0,0,.9),
    inset -35px 0 35px rgba(0,0,0,.9);
}

.case-roulette-marker{
  position:absolute;
  z-index:10;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:#fff;
  box-shadow:0 0 13px rgba(255,255,255,.85);
}

.case-roulette-marker:before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:11px solid #fff;
}

.case-roulette-marker:after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-bottom:11px solid #fff;
}

.case-roulette-track{
  height:100%;
  display:flex;
  align-items:center;
  gap:8px;
  padding-left:12px;
  transform:translate3d(0,0,0);
  will-change:transform;
}

.case-reel-item{
width:104px!important;
min-width:104px!important;
height:138px!important;

  width:92px;
  min-width:92px;
  height:106px;
  border-radius:15px;
  border:1px solid #303030;
  background:
    radial-gradient(circle at 50% 28%,rgba(255,255,255,.11),transparent 40%),
    linear-gradient(145deg,#191919,#0b0b0b);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.case-reel-item i{
  width:39px;
  height:39px;
  border-radius:50%;
  background:conic-gradient(#fff,#555,#111,#aaa,#fff);
  border:7px solid #202020;
  box-shadow:0 0 15px rgba(255,255,255,.08);
}

.case-reel-item b{
  margin-top:10px;
  font-size:13px;
}

.case-reel-item.winning{
  border-color:#737373;
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.08),
    0 0 20px rgba(255,255,255,.08);
}

.case-opening-panel.opening .case-roulette-track{
  pointer-events:none;
}

.case-opening-panel.result .case-roulette-window{
  box-shadow:
    inset 35px 0 35px rgba(0,0,0,.9),
    inset -35px 0 35px rgba(0,0,0,.9),
    0 0 24px rgba(255,255,255,.05);
}

/* Полностью отключаем старую тряску */
.case-opening-panel.opening .case-opening-box,
.case-opening-panel.result .case-opening-box{
  animation:none!important;
}

</style>


<style id="tonix-case-final-highlight">
.case-reel-item{
  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    transform .3s ease;
}

.case-reel-item.winning{
  border-color:#f1f1f1!important;
  box-shadow:
    inset 0 0 25px rgba(255,255,255,.13),
    0 0 24px rgba(255,255,255,.16)!important;
  transform:scale(1.025);
}

.case-opening-panel.opening .case-reel-item{
  border-color:#303030!important;
  box-shadow:none!important;
  transform:none!important;
}
</style>


<style id="tonix-roulette-v2">
.case-roulette-window{
  isolation:isolate;
}

.case-roulette-track{
  backface-visibility:hidden;
  transform-style:preserve-3d;
}

.case-reel-item{
  position:relative;
  overflow:hidden;
  transition:
    border-color .32s ease,
    box-shadow .32s ease,
    transform .32s ease,
    opacity .32s ease;
}

.case-reel-item:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
    125deg,
    transparent 15%,
    rgba(255,255,255,.025),
    transparent 70%
  );
}

/* Пока рулетка движется, ни один блок не выделяется */
.roulette-running .case-reel-item{
  border-color:#303030!important;
  box-shadow:none!important;
  transform:none!important;
}

.roulette-running .case-roulette-track{
  filter:blur(.35px);
}

/* Мягкие затемнённые края */
.case-roulette-window:before,
.case-roulette-window:after{
  content:"";
  position:absolute;
  z-index:8;
  top:0;
  bottom:0;
  width:58px;
  pointer-events:none;
}

.case-roulette-window:before{
  left:0;
  background:linear-gradient(
    90deg,
    #080808 4%,
    rgba(8,8,8,.84) 34%,
    transparent
  );
}

.case-roulette-window:after{
  right:0;
  background:linear-gradient(
    270deg,
    #080808 4%,
    rgba(8,8,8,.84) 34%,
    transparent
  );
}

/* Подсветка только после остановки */
.roulette-finished .case-reel-item.winning{
  z-index:3;
  border-color:#eeeeee!important;
  transform:scale(1.035);
  box-shadow:
    inset 0 0 25px rgba(255,255,255,.12),
    0 0 26px rgba(255,255,255,.17)!important;
}

.roulette-finished .case-reel-item.winning:before{
  content:"";
  position:absolute;
  inset:-35%;
  background:conic-gradient(
    transparent,
    rgba(255,255,255,.13),
    transparent 38%
  );
  animation:caseWinnerGlow 1.8s linear infinite;
}

.roulette-finished .case-reel-item.winning i,
.roulette-finished .case-reel-item.winning b{
  position:relative;
  z-index:2;
}

@keyframes caseWinnerGlow{
  to{transform:rotate(360deg)}
}
</style>


<style id="tonix-case-rarity-effects">

.case-reel-item{
  --rarity-color:#777;
  --rarity-glow:rgba(255,255,255,.06);
  position:relative;
}

.case-reel-item.rarity-common{
  --rarity-color:#777;
  --rarity-glow:rgba(180,180,180,.07);
}

.case-reel-item.rarity-rare{
  --rarity-color:#4da3ff;
  --rarity-glow:rgba(77,163,255,.18);
  border-color:rgba(77,163,255,.38);
}

.case-reel-item.rarity-epic{
  --rarity-color:#ae67ff;
  --rarity-glow:rgba(174,103,255,.20);
  border-color:rgba(174,103,255,.43);
}

.case-reel-item.rarity-legendary{
  --rarity-color:#f0c85a;
  --rarity-glow:rgba(240,200,90,.23);
  border-color:rgba(240,200,90,.48);
}

.case-rarity-label{
  position:absolute;
  left:8px;
  right:8px;
  top:7px;

  color:var(--rarity-color);
  font-size:8px;
  font-weight:950;
  letter-spacing:.5px;
  text-align:center;
  text-transform:uppercase;

  opacity:.78;
}

.case-reel-item i{
  box-shadow:
    0 0 17px var(--rarity-glow);
}

.case-reel-item.rarity-rare i{
  background:conic-gradient(
    #d9ecff,
    #4da3ff,
    #132c47,
    #75b8ff,
    #d9ecff
  );
}

.case-reel-item.rarity-epic i{
  background:conic-gradient(
    #f0ddff,
    #ae67ff,
    #321752,
    #ce9aff,
    #f0ddff
  );
}

.case-reel-item.rarity-legendary i{
  background:conic-gradient(
    #fff4bd,
    #f0c85a,
    #57430b,
    #ffe78a,
    #fff4bd
  );
}

/*
  Во время движения редкости видны сдержанно,
  но ни один блок не выглядит победным.
*/
.roulette-running .case-reel-item{
  transform:none!important;
  box-shadow:none!important;
}

.roulette-running .case-rarity-label{
  opacity:.45;
}

/*
  Победная карточка использует цвет своей редкости
  только после полной остановки.
*/
.roulette-finished .case-reel-item.winning{
  border-color:var(--rarity-color)!important;
  box-shadow:
    inset 0 0 26px var(--rarity-glow),
    0 0 30px var(--rarity-glow)!important;
}

.roulette-finished .case-reel-item.winning .case-rarity-label{
  opacity:1;
}

/* Короткая вспышка окна после остановки */


.case-roulette-window.case-result-rare{
  --case-result-color:rgba(77,163,255,.18);
}

.case-roulette-window.case-result-epic{
  --case-result-color:rgba(174,103,255,.21);
}

.case-roulette-window.case-result-legendary{
  --case-result-color:rgba(240,200,90,.24);
}

.case-roulette-window.case-result-common{
  --case-result-color:rgba(255,255,255,.09);
}

.case-roulette-window.case-result-flash{
  animation:caseWindowResultGlow .9s ease-out;
}

.case-prize-reveal{
  animation:casePrizeReveal .55s cubic-bezier(.16,.78,.22,1);
}

@keyframes caseWindowFlash{
  0%{
    opacity:0;
    background:transparent;
  }

  18%{
    opacity:1;
    background:rgba(255,255,255,.18);
  }

  100%{
    opacity:0;
    background:transparent;
  }
}

@keyframes caseWindowResultGlow{
  0%{
    box-shadow:
      inset 35px 0 35px rgba(0,0,0,.9),
      inset -35px 0 35px rgba(0,0,0,.9);
  }

  35%{
    box-shadow:
      inset 35px 0 35px rgba(0,0,0,.9),
      inset -35px 0 35px rgba(0,0,0,.9),
      0 0 38px var(--case-result-color);
  }

  100%{
    box-shadow:
      inset 35px 0 35px rgba(0,0,0,.9),
      inset -35px 0 35px rgba(0,0,0,.9);
  }
}

@keyframes casePrizeReveal{
  0%{
    opacity:0;
    transform:translateY(8px) scale(.86);
    filter:blur(5px);
  }

  65%{
    opacity:1;
    transform:translateY(0) scale(1.07);
    filter:blur(0);
  }

  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

</style>


<style id="tonix-roulette-edge-flash-fix">
.case-roulette-window:before,
.case-roulette-window:after{
  animation:none!important;
  opacity:1!important;
}

/* Эффект результата остаётся только на всём окне,
   а не на карточке справа */
.case-roulette-window.case-result-flash{
  animation:caseWindowResultGlow .9s ease-out;
}
</style>


<style id="tonix-compact-game-cards">

/* Две игровые плитки рядом */
#homeModeList{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  margin-top:14px!important;
  padding-bottom:22px!important;
}

/* Компактная игровая карточка */
#homeModeList .compact-game-card{
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  aspect-ratio:1 / 1!important;

  padding:15px 10px 13px!important;
  margin:0!important;

  border-radius:21px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;

  text-align:center!important;
  overflow:hidden!important;
  position:relative!important;

  background:
    radial-gradient(circle at 50% 30%,rgba(255,255,255,.10),transparent 34%),
    linear-gradient(145deg,#171717,#0a0a0a 72%)!important;

  border:1px solid #2d2d2d!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 13px 27px rgba(0,0,0,.26)!important;

  -webkit-tap-highlight-color:transparent;
}

/* Сохраняем живую переливающуюся анимацию фона */
#homeModeList .compact-game-card:before{
  content:"";
  position:absolute;
  inset:-80%;
  background:conic-gradient(
    from 40deg,
    transparent,
    rgba(255,255,255,.045),
    transparent 28%,
    rgba(255,255,255,.018),
    transparent 58%
  );
  animation:heroSpin 11s linear infinite;
  pointer-events:none;
}

/* Эффект нажатия */
#homeModeList .compact-game-card:active{
  transform:scale(.975);
  border-color:#444!important;
}

/* Иконки больше не абсолютные */
#homeModeList .compact-game-card .home-mode-visual{
  position:relative!important;
  right:auto!important;
  top:auto!important;
  left:auto!important;

  width:68px!important;
  height:68px!important;
  min-width:68px!important;

  margin:0 auto 15px!important;
  z-index:2!important;

  animation:compactGameFloat 3.2s ease-in-out infinite;
}

/* Иконка Джекпота */
#homeModeList .compact-game-card .jackpot-mode-visual{
  border-radius:21px!important;
  transform:rotate(45deg)!important;

  background:linear-gradient(
    145deg,
    #646464,
    #191919 58%,
    #080808
  )!important;

  border:7px solid #242424!important;

  box-shadow:
    0 0 27px rgba(255,255,255,.08),
    inset 0 0 12px rgba(255,255,255,.035)!important;
}

#homeModeList .compact-game-card .jackpot-mode-visual i{
  inset:19px!important;
}

/* Иконка Кейсов */
#homeModeList .compact-game-card .cases-mode-visual{
  width:76px!important;
  min-width:76px!important;
  height:62px!important;
  margin-top:6px!important;
  margin-bottom:15px!important;

  border-radius:17px!important;
  transform:none!important;

  background:linear-gradient(
    145deg,
    #424242,
    #121212 60%,
    #080808
  )!important;

  border:2px solid #494949!important;

  box-shadow:
    inset 0 -10px 18px rgba(0,0,0,.72),
    0 13px 24px rgba(0,0,0,.35)!important;
}

#homeModeList .compact-game-card .cases-mode-visual:before{
  top:14px!important;
  height:11px!important;
}

#homeModeList .compact-game-card .cases-mode-visual:after{
  width:27px!important;
  height:27px!important;
  border-radius:9px!important;
  font-size:13px!important;
}

/* Название режима */
.compact-game-title{
  position:relative;
  z-index:3;

  display:block;
  color:#f5f5f5;

  font-size:20px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.3px;
}

/* Маленькая подпись */
.compact-game-status{
  position:relative;
  z-index:3;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:25px;
  margin-top:10px;
  padding:0 9px;

  border-radius:999px;
  border:1px solid #303030;
  background:#141414;

  color:#858585;
  font-size:9px;
  font-weight:900;
  letter-spacing:.25px;
  white-space:nowrap;
}

/* У Кейсов подпись немного светлее */
.cases-mode-card .compact-game-status{
  color:#a0a0a0;
}

/* На маленьких экранах карточки остаются аккуратными */
@media(max-width:360px){
  #homeModeList{
    gap:9px!important;
  }

  #homeModeList .compact-game-card{
    border-radius:18px!important;
    padding-left:7px!important;
    padding-right:7px!important;
  }

  #homeModeList .compact-game-card .home-mode-visual{
    transform-origin:center;
  }

  .compact-game-title{
    font-size:18px;
  }

  .compact-game-status{
    padding:0 7px;
    font-size:8px;
  }
}

@keyframes compactGameFloat{
  0%,100%{
    translate:0 0;
  }

  50%{
    translate:0 -4px;
  }
}

</style>





<style id="tonix-main-tabs-clean-fix">

/* Убираем ненужные заголовки основных вкладок */
#history > .page-title,
#balance > .page-title,
#bonusesPage > .page-title,
#profile > .page-title{
  display:none!important;
}

/* Основной контент начинается сразу под логотипом */
#history,
#balance,
#bonusesPage,
#profile{
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  align-items:initial!important;
  justify-content:initial!important;
  transform:none!important;
}

/* Небольшой аккуратный отступ после верхней панели */
#history.page.active,
#balance.page.active,
#bonusesPage.page.active,
#profile.page.active{
  display:block!important;
  padding-top:18px!important;
}

/* История */
#history .tabs{
  margin-top:0!important;
}

/* Профиль */
#profile .profile-card{
  margin-top:0!important;
}

/* Баланс */
#balance > .balance-card:first-of-type{
  margin-top:0!important;
}

/* Бонусы */
#bonusesPage > *:first-child:not(.page-title){
  margin-top:0!important;
}

/* Главная всегда может быть восстановлена после комнаты */
#game #rooms{
  min-height:0!important;
}

/* Стрелка скрыта на основных вкладках */
#back[style*="display: none"],
#back[style*="display:none"]{
  pointer-events:none!important;
}

</style>


<style id="tonix-remove-page-gap">

/* Основные вкладки не растягиваются на высоту экрана */
#history,
#balance,
#bonusesPage,
#profile{
  display:none;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;

  margin:0!important;
  padding:0!important;

  position:static!important;
  inset:auto!important;
  transform:none!important;

  align-items:initial!important;
  justify-content:initial!important;
  align-content:initial!important;
}

/* Активная вкладка начинается сразу после верхней панели */
#history.page.active,
#balance.page.active,
#bonusesPage.page.active,
#profile.page.active{
  display:block!important;
  min-height:0!important;
  height:auto!important;
  padding-top:20px!important;
}

/* Старые заголовки полностью исключены из потока */
#history > .page-title,
#balance > .page-title,
#bonusesPage > .page-title,
#profile > .page-title{
  display:none!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

/* История */
#history .tabs{
  margin:0 0 14px!important;
  padding:0!important;
}

/* Баланс */
#balance > .balance-card:first-of-type{
  margin-top:0!important;
}

/* Бонусы */
#bonusesPage > .bonus-grid,
#bonusesPage > .bonuses-grid,
#bonusesPage > div:first-of-type{
  margin-top:0!important;
}

/* Профиль */
#profile > .profile-card{
  margin-top:0!important;
}

/* Убираем возможные старые псевдоотступы */
#history:before,
#balance:before,
#bonusesPage:before,
#profile:before{
  display:none!important;
  content:none!important;
}

/* На маленьких экранах ещё компактнее */
@media(max-height:760px){
  #history.page.active,
  #balance.page.active,
  #bonusesPage.page.active,
  #profile.page.active{
    padding-top:14px!important;
  }
}

</style>


<style id="tonix-case-opening-balance">

.case-opening-balance{
  width:calc(100% - 58px);
  max-width:420px;
  min-height:60px;
  margin:4px auto 14px;
  padding:11px 15px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  border:1px solid #292929;
  border-radius:16px;

  background:
    radial-gradient(
      circle at 86% 20%,
      rgba(255,255,255,.06),
      transparent 38%
    ),
    linear-gradient(145deg,#141414,#090909);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 10px 28px rgba(0,0,0,.25);
}

.case-opening-balance span{
  color:#777;
  font-size:12px;
  font-weight:800;
}

.case-opening-balance b{
  color:#fff;
  font-size:18px;
  line-height:1;
  font-weight:950;
  white-space:nowrap;
}

@media(max-width:380px){
  .case-opening-balance{
    width:calc(100% - 34px);
  }

  .case-opening-balance b{
    font-size:17px;
  }
}

</style>


<style id="tonix-cases-new-mode-animation">

/*
  Зелёный живой бейдж «Новый режим».
  !important используется только в основном правиле,
  но не внутри @keyframes — иначе браузер игнорирует анимацию.
*/
.cases-mode-card .compact-game-status{
  position:relative!important;
  z-index:5!important;

  min-width:112px!important;
  width:112px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0 14px!important;
  margin-top:10px!important;

  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  color:#9cffbd!important;
  background:
    linear-gradient(
      135deg,
      rgba(37,211,102,.24),
      rgba(22,163,74,.10)
    )!important;

  border:1px solid rgba(73,209,125,.72)!important;
  border-radius:999px!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 11px rgba(73,209,125,.20),
    0 0 24px rgba(73,209,125,.10)!important;

  overflow:hidden!important;
  white-space:nowrap!important;

  transform-origin:center center!important;
  will-change:transform,border-radius,box-shadow!important;

  animation:
    tonixGreenBadgeStretch 2.15s cubic-bezier(.45,0,.25,1) infinite,
    tonixGreenBadgeGlow 2.15s ease-in-out infinite!important;
}

/* Световая полоса */
.cases-mode-card .compact-game-status::before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;

  top:-55%!important;
  left:-55%!important;

  width:34%!important;
  height:210%!important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(185,255,209,.55),
      transparent
    )!important;

  transform:skewX(-20deg)!important;
  pointer-events:none!important;

  animation:
    tonixGreenBadgeShine 2.15s ease-in-out infinite!important;
}

/*
  Натягивание дугой:
  1. растягивается в стороны;
  2. нижняя и верхняя границы изгибаются;
  3. слегка сжимается;
  4. возвращается обратно.
*/
@keyframes tonixGreenBadgeStretch{
  0%,100%{
    transform:
      perspective(220px)
      rotateX(0deg)
      rotateZ(0deg)
      scaleX(1)
      scaleY(1);
    border-radius:999px;
  }

  22%{
    transform:
      perspective(220px)
      rotateX(-7deg)
      rotateZ(-.5deg)
      scaleX(1.04)
      scaleY(.97);
    border-radius:52% 48% 58% 42% / 72% 72% 28% 28%;
  }

  42%{
    transform:
      perspective(220px)
      rotateX(-12deg)
      rotateZ(0deg)
      scaleX(1.18)
      scaleY(.80);
    border-radius:44% 56% 61% 39% / 82% 82% 18% 18%;
  }

  58%{
    transform:
      perspective(220px)
      rotateX(8deg)
      rotateZ(.5deg)
      scaleX(.95)
      scaleY(1.12);
    border-radius:58% 42% 38% 62% / 28% 28% 72% 72%;
  }

  74%{
    transform:
      perspective(220px)
      rotateX(-2deg)
      rotateZ(0deg)
      scaleX(1.07)
      scaleY(.95);
    border-radius:48% 52% 55% 45% / 65% 65% 35% 35%;
  }

  88%{
    transform:
      perspective(220px)
      rotateX(0deg)
      rotateZ(0deg)
      scaleX(.99)
      scaleY(1.02);
    border-radius:999px;
  }
}

@keyframes tonixGreenBadgeGlow{
  0%,100%{
    color:#91f9b5;
    border-color:rgba(73,209,125,.55);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.10),
      0 0 8px rgba(73,209,125,.16),
      0 0 18px rgba(73,209,125,.07);
  }

  40%,58%{
    color:#e1ffeb;
    border-color:rgba(105,255,159,.98);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      0 0 15px rgba(73,209,125,.50),
      0 0 34px rgba(73,209,125,.22);
  }
}

@keyframes tonixGreenBadgeShine{
  0%,18%{
    left:-55%;
    opacity:0;
  }

  34%{
    opacity:1;
  }

  57%{
    left:125%;
    opacity:.15;
  }

  62%,100%{
    left:125%;
    opacity:0;
  }
}

</style>


<style id="tonix-premium-case-detail-v2">

/* =====================================================
   ПРЕМИАЛЬНАЯ СТРАНИЦА ВЫБРАННОГО КЕЙСА
   ===================================================== */

#caseDetailPanel{
  position:relative!important;
  padding:2px 0 22px!important;
  overflow:visible!important;
}

#caseDetailPanel::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  top:26px!important;
  left:50%!important;
  width:270px!important;
  height:270px!important;
  transform:translateX(-50%)!important;
  border-radius:50%!important;
  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.075) 0%,
      rgba(255,255,255,.025) 37%,
      transparent 70%
    )!important;
  filter:blur(2px)!important;
  pointer-events:none!important;
}

#caseDetailPanel > *{
  position:relative!important;
  z-index:1!important;
}


/* =====================================================
   ВЕРХНЯЯ ЧАСТЬ
   ===================================================== */

#caseDetailPanel .case-detail-hero{
  min-height:245px!important;
  margin:0 0 12px!important;
  padding:14px 16px 20px!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;

  overflow:hidden!important;
  border:1px solid #292929!important;
  border-radius:25px!important;

  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(255,255,255,.12),
      transparent 34%
    ),
    radial-gradient(
      circle at 15% 100%,
      rgba(255,255,255,.035),
      transparent 42%
    ),
    linear-gradient(
      155deg,
      #171717 0%,
      #0d0d0d 56%,
      #080808 100%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -32px 60px rgba(0,0,0,.31),
    0 17px 42px rgba(0,0,0,.23)!important;
}

#caseDetailPanel .case-detail-hero::before{
  content:""!important;
  position:absolute!important;
  top:-70px!important;
  left:-50%!important;
  width:54%!important;
  height:430px!important;

  background:
    linear-gradient(
      100deg,
      transparent,
      rgba(255,255,255,.08),
      transparent
    )!important;

  transform:skewX(-18deg)!important;
  animation:tonixCaseHeroShine 5.8s ease-in-out infinite!important;
  pointer-events:none!important;
}

#caseDetailPanel .case-detail-label{
  order:2!important;
  margin-top:7px!important;

  color:#777!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:2.2px!important;
  text-transform:uppercase!important;
}

#caseDetailPanel #caseDetailName{
  order:3!important;
  margin:9px 0 0!important;

  color:#f7f7f7!important;
  font-size:29px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:-1px!important;
  text-align:center!important;
}

#caseDetailPanel #caseDetailSubtitle{
  order:4!important;
  max-width:285px!important;
  margin:9px auto 0!important;

  color:#828282!important;
  font-size:12px!important;
  line-height:1.45!important;
  font-weight:650!important;
  text-align:center!important;
}


/* =====================================================
   ФИРМЕННЫЙ КЕЙС TØNIX
   ===================================================== */

#caseDetailPanel .case-detail-box{
  order:1!important;
  position:relative!important;

  width:116px!important;
  height:91px!important;
  min-height:91px!important;
  margin:0 auto 5px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  border:1px solid #484848!important;
  border-radius:23px 23px 19px 19px!important;

  background:
    radial-gradient(
      circle at 50% 14%,
      rgba(255,255,255,.20),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      #444 0%,
      #1b1b1b 44%,
      #090909 100%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -21px 29px rgba(0,0,0,.59),
    0 16px 27px rgba(0,0,0,.43),
    0 0 31px rgba(255,255,255,.035)!important;

  transform-origin:50% 92%!important;
  animation:tonixCaseBoxFloat 3.5s ease-in-out infinite!important;
}

#caseDetailPanel .case-detail-box::before{
  content:""!important;
  position:absolute!important;
  left:-5px!important;
  right:-5px!important;
  top:22px!important;
  height:15px!important;

  border:1px solid #555!important;
  border-radius:6px!important;

  background:
    linear-gradient(
      180deg,
      #555,
      #242424 51%,
      #111
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    0 4px 8px rgba(0,0,0,.43)!important;
}

#caseDetailPanel .case-detail-box::after{
  content:"TØNIX"!important;
  position:absolute!important;
  left:50%!important;
  bottom:11px!important;
  transform:translateX(-50%)!important;

  color:#898989!important;
  font-size:7px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:1.8px!important;
}

#caseDetailPanel .case-detail-box span{
  position:relative!important;
  z-index:3!important;

  width:37px!important;
  height:37px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  margin-top:-4px!important;

  border:1px solid #656565!important;
  border-radius:12px!important;

  color:#fff!important;
  font-size:19px!important;
  line-height:1!important;
  font-weight:1000!important;

  background:
    radial-gradient(
      circle at 38% 28%,
      #767676,
      #272727 45%,
      #090909 100%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.21),
    0 5px 14px rgba(0,0,0,.47),
    0 0 14px rgba(255,255,255,.06)!important;
}


/* =====================================================
   ЦЕНА И БАЛАНС
   ===================================================== */

#caseDetailPanel .case-price-card{
  margin:0 0 12px!important;
  padding:0!important;

  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:9px!important;

  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

#caseDetailPanel .case-price-card > div{
  position:relative!important;
  min-width:0!important;
  min-height:79px!important;
  padding:14px!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;

  overflow:hidden!important;
  border:1px solid #292929!important;
  border-radius:17px!important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(255,255,255,.07),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      #151515,
      #0b0b0b
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 9px 25px rgba(0,0,0,.14)!important;
}

#caseDetailPanel .case-price-card > div::after{
  content:""!important;
  position:absolute!important;
  right:-17px!important;
  bottom:-25px!important;

  width:69px!important;
  height:69px!important;

  border:1px solid rgba(255,255,255,.035)!important;
  border-radius:50%!important;
}

#caseDetailPanel .case-price-card span{
  position:relative!important;
  z-index:2!important;
  margin:0 0 8px!important;

  color:#737373!important;
  font-size:10px!important;
  line-height:1.1!important;
  font-weight:800!important;
  letter-spacing:.25px!important;
}

#caseDetailPanel .case-price-card b{
  position:relative!important;
  z-index:2!important;

  max-width:100%!important;
  margin:0!important;

  color:#f3f3f3!important;
  font-size:19px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:-.45px!important;
  white-space:nowrap!important;
}


/* =====================================================
   СОДЕРЖИМОЕ КЕЙСА
   ===================================================== */

#caseDetailPanel .case-content-card{
  position:relative!important;
  margin:0 0 12px!important;
  padding:16px 13px 14px!important;

  overflow:hidden!important;
  border:1px solid #292929!important;
  border-radius:22px!important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,255,255,.055),
      transparent 34%
    ),
    linear-gradient(
      160deg,
      #131313,
      #090909
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 13px 34px rgba(0,0,0,.18)!important;
}

#caseDetailPanel .case-content-title{
  margin:0 3px 14px!important;
  padding:0 1px 12px!important;

  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:12px!important;

  border-bottom:1px solid #232323!important;
}

#caseDetailPanel .case-content-title span{
  color:#666!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:1.4px!important;
}

#caseDetailPanel .case-content-title b{
  color:#d7d7d7!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
}

#caseDetailPanel .case-content-card::after{
  content:"9 возможных наград"!important;
  display:block!important;
  margin:13px 2px 0!important;
  padding-top:12px!important;

  border-top:1px solid #222!important;

  color:#666!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:750!important;
  text-align:center!important;
  letter-spacing:.25px!important;
}


/* =====================================================
   СЕТКА НАГРАД
   ===================================================== */

#caseDetailPanel .case-prizes-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}

#caseDetailPanel .case-prize-preview{
  --rarity-color:#777;
  --rarity-glow:rgba(255,255,255,.05);

  position:relative!important;
  min-width:0!important;
  min-height:113px!important;
  padding:10px 5px 9px!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-end!important;

  overflow:hidden!important;
  border:1px solid #292929!important;
  border-radius:16px!important;

  background:
    radial-gradient(
      circle at 50% 32%,
      var(--rarity-glow),
      transparent 39%
    ),
    linear-gradient(
      150deg,
      #181818,
      #0b0b0b 72%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 20px rgba(0,0,0,.15)!important;
}

#caseDetailPanel .case-prize-preview::before{
  content:attr(data-rarity-title)!important;
  position:absolute!important;
  top:8px!important;
  left:50%!important;
  transform:translateX(-50%)!important;

  width:max-content!important;
  max-width:92%!important;

  color:var(--rarity-color)!important;
  font-size:7px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:.7px!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}

#caseDetailPanel .case-prize-preview::after{
  content:"T"!important;
  position:absolute!important;
  top:30px!important;
  left:50%!important;

  width:43px!important;
  height:43px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  transform:translateX(-50%)!important;

  border:1px solid color-mix(in srgb,var(--rarity-color) 55%,#303030)!important;
  border-radius:14px!important;

  color:#efefef!important;
  font-size:17px!important;
  line-height:1!important;
  font-weight:1000!important;

  background:
    radial-gradient(
      circle at 35% 27%,
      rgba(255,255,255,.22),
      rgba(255,255,255,.035) 36%,
      #0a0a0a 77%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 0 17px var(--rarity-glow),
    0 8px 16px rgba(0,0,0,.37)!important;
}

#caseDetailPanel .case-prize-preview i{
  display:none!important;
}

#caseDetailPanel .case-prize-preview b{
  position:relative!important;
  z-index:3!important;

  max-width:100%!important;
  margin:0!important;

  color:#eeeeee!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:-.2px!important;
  white-space:nowrap!important;
}


/* Обычный */
#caseDetailPanel .case-prize-preview.rarity-common{
  --rarity-color:#7f7f7f;
  --rarity-glow:rgba(180,180,180,.055);
}

/* Редкий */
#caseDetailPanel .case-prize-preview.rarity-rare{
  --rarity-color:#50d487;
  --rarity-glow:rgba(67,211,128,.17);

  border-color:rgba(67,211,128,.22)!important;
}

/* Эпический */
#caseDetailPanel .case-prize-preview.rarity-epic{
  --rarity-color:#65a9ff;
  --rarity-glow:rgba(61,144,255,.22);

  border-color:rgba(69,149,255,.29)!important;
}

/* Легендарный */
#caseDetailPanel .case-prize-preview.rarity-legendary{
  --rarity-color:#ffd46b;
  --rarity-glow:rgba(255,190,62,.27);

  border-color:rgba(255,193,71,.35)!important;

  animation:tonixLegendaryPrize 2.3s ease-in-out infinite!important;
}


/* =====================================================
   КНОПКИ
   ===================================================== */

#caseDetailPanel .case-open-main-btn{
  position:relative!important;
  height:60px!important;
  margin:0!important;

  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.83)!important;
  border-radius:17px!important;

  color:#070707!important;
  font-size:16px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:-.25px!important;

  background:
    linear-gradient(
      180deg,
      #fff,
      #e5e5e5
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 29px rgba(255,255,255,.08),
    0 13px 30px rgba(0,0,0,.25)!important;

  animation:tonixCaseButtonBreath 2.7s ease-in-out infinite!important;
}

#caseDetailPanel .case-open-main-btn::after{
  content:""!important;
  position:absolute!important;
  top:-60%!important;
  left:-40%!important;

  width:28%!important;
  height:220%!important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.95),
      transparent
    )!important;

  transform:skewX(-20deg)!important;
  animation:tonixCaseButtonShine 3.4s ease-in-out infinite!important;
  pointer-events:none!important;
}

#caseDetailPanel .case-open-main-btn:active{
  animation:none!important;
  transform:scale(.975)!important;
  box-shadow:
    inset 0 2px 7px rgba(0,0,0,.16),
    0 5px 15px rgba(0,0,0,.25)!important;
}

#caseDetailPanel .case-back-list-btn{
  width:100%!important;
  height:47px!important;
  margin:9px 0 0!important;

  border:1px solid #282828!important;
  border-radius:15px!important;

  color:#888!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:850!important;

  background:
    linear-gradient(
      145deg,
      #141414,
      #0b0b0b
    )!important;
}


/* =====================================================
   АНИМАЦИИ
   ===================================================== */

@keyframes tonixCaseBoxFloat{
  0%,100%{
    transform:translateY(0) rotate(-1deg);
  }

  50%{
    transform:translateY(-7px) rotate(1deg);
  }
}

@keyframes tonixCaseHeroShine{
  0%,30%{
    left:-55%;
    opacity:0;
  }

  44%{
    opacity:1;
  }

  66%,100%{
    left:135%;
    opacity:0;
  }
}

@keyframes tonixLegendaryPrize{
  0%,100%{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 0 8px rgba(255,190,62,.07);
  }

  50%{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 0 22px rgba(255,190,62,.22);
  }
}

@keyframes tonixCaseButtonBreath{
  0%,100%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.012);
  }
}

@keyframes tonixCaseButtonShine{
  0%,40%{
    left:-40%;
    opacity:0;
  }

  52%{
    opacity:.85;
  }

  72%,100%{
    left:130%;
    opacity:0;
  }
}


/* =====================================================
   МАЛЕНЬКИЕ ЭКРАНЫ
   ===================================================== */

@media(max-width:360px){
  #caseDetailPanel .case-detail-hero{
    min-height:230px!important;
  }

  #caseDetailPanel .case-prizes-grid{
    gap:6px!important;
  }

  #caseDetailPanel .case-prize-preview{
    min-height:106px!important;
    padding-left:3px!important;
    padding-right:3px!important;
  }

  #caseDetailPanel .case-prize-preview b{
    font-size:10px!important;
  }

  #caseDetailPanel .case-price-card b{
    font-size:17px!important;
  }
}

</style>


<style id="tonix-premium-case-result-v1">

/* =====================================================
   ПРЕМИАЛЬНЫЙ ЭКРАН РЕЗУЛЬТАТА КЕЙСА
   ===================================================== */

#caseOpeningPanel{
  --result-accent:#8c8c8c;
  --result-accent-rgb:140,140,140;
}

#caseOpeningPanel.result-common{
  --result-accent:#a4a4a4;
  --result-accent-rgb:164,164,164;
}

#caseOpeningPanel.result-rare{
  --result-accent:#50d487;
  --result-accent-rgb:80,212,135;
}

#caseOpeningPanel.result-epic{
  --result-accent:#65a9ff;
  --result-accent-rgb:101,169,255;
}

#caseOpeningPanel.result-legendary{
  --result-accent:#ffd46b;
  --result-accent-rgb:255,212,107;
}


/* Общий экран */
#caseOpeningPanel{
  position:relative!important;
  padding-bottom:32px!important;
  overflow:visible!important;
}

#caseOpeningPanel.result::before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;

  left:50%!important;
  top:255px!important;

  width:290px!important;
  height:290px!important;

  transform:translateX(-50%)!important;

  border-radius:50%!important;
  background:
    radial-gradient(
      circle,
      rgba(var(--result-accent-rgb),.13),
      rgba(var(--result-accent-rgb),.045) 40%,
      transparent 72%
    )!important;

  filter:blur(10px)!important;
  pointer-events:none!important;

  animation:tonixResultAmbient 2.8s ease-in-out infinite!important;
}


/* Название кейса над результатом */
#caseOpeningPanel .case-opening-label{
  display:block!important;
  width:max-content!important;
  max-width:100%!important;

  margin:38px auto 12px!important;
  padding:0!important;

  color:#858585!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:1.8px!important;
  text-align:center!important;
  text-transform:uppercase!important;
}


/* Во время прокрутки оставляем обычный крупный текст */
#caseOpeningPanel.opening .case-opening-prize{
  display:block!important;
  margin:0 auto!important;

  color:#f2f2f2!important;
  font-size:42px!important;
  line-height:1.05!important;
  font-weight:1000!important;
  letter-spacing:-1.7px!important;
  text-align:center!important;
}


/* Результат превращаем в премиальную карточку */
#caseOpeningPanel.result .case-opening-prize{
  position:relative!important;
  isolation:isolate!important;

  width:calc(100% - 58px)!important;
  min-height:142px!important;
  margin:0 auto 16px!important;
  padding:48px 18px 22px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  box-sizing:border-box!important;
  overflow:hidden!important;

  border:
    1px solid
    rgba(var(--result-accent-rgb),.56)!important;

  border-radius:24px!important;

  color:#f8f8f8!important;
  font-size:42px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:-1.8px!important;
  text-align:center!important;

  background:
    radial-gradient(
      circle at 50% -8%,
      rgba(var(--result-accent-rgb),.23),
      transparent 43%
    ),
    linear-gradient(
      145deg,
      rgba(29,29,29,.98),
      rgba(8,8,8,.99) 71%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    inset 0 -30px 48px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.018),
    0 18px 46px rgba(0,0,0,.39),
    0 0 30px rgba(var(--result-accent-rgb),.12)!important;

  text-shadow:
    0 1px 0 rgba(255,255,255,.04),
    0 0 22px rgba(var(--result-accent-rgb),.18)!important;

  animation:
    tonixResultCardEnter .62s cubic-bezier(.16,.82,.20,1),
    tonixResultCardGlow 2.7s ease-in-out .62s infinite!important;
}


/* Подпись ПОЛУЧЕНО */
#caseOpeningPanel.result .case-opening-prize::before{
  content:"ПОЛУЧЕНО"!important;

  position:absolute!important;
  z-index:3!important;

  top:18px!important;
  left:50%!important;
  transform:translateX(-50%)!important;

  color:var(--result-accent)!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:2.2px!important;
  white-space:nowrap!important;
}


/* Фирменный знак TONIX на фоне */
#caseOpeningPanel.result .case-opening-prize::after{
  content:"T"!important;

  position:absolute!important;
  z-index:-1!important;

  right:13px!important;
  bottom:-27px!important;

  color:rgba(var(--result-accent-rgb),.065)!important;
  font-size:128px!important;
  line-height:1!important;
  font-weight:1000!important;
  font-style:italic!important;

  transform:rotate(-10deg)!important;
  pointer-events:none!important;
}


/* Дополнительный блик */
#caseOpeningPanel.result .case-opening-prize.case-prize-reveal{
  overflow:hidden!important;
}

#caseOpeningPanel.result .case-opening-prize.case-prize-reveal{
  animation:
    tonixResultCardEnter .62s cubic-bezier(.16,.82,.20,1),
    tonixResultCardGlow 2.7s ease-in-out .62s infinite!important;
}


/* Текст под результатом */
#caseOpeningPanel .case-opening-text{
  width:calc(100% - 62px)!important;
  min-height:18px!important;
  margin:0 auto 23px!important;

  color:#777!important;
  font-size:13px!important;
  line-height:1.35!important;
  font-weight:750!important;
  text-align:center!important;
}

#caseOpeningPanel.result .case-opening-text{
  color:rgba(var(--result-accent-rgb),.82)!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.25px!important;
}


/* Кнопка открыть ещё раз */
#caseOpeningPanel #caseOpenAgainBtn{
  position:relative!important;

  width:calc(100% - 58px)!important;
  height:62px!important;
  margin:0 auto!important;

  overflow:hidden!important;

  border:1px solid rgba(255,255,255,.90)!important;
  border-radius:18px!important;

  color:#070707!important;
  font-size:16px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:-.25px!important;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #e7e7e7
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 12px 30px rgba(255,255,255,.075),
    0 14px 34px rgba(0,0,0,.28)!important;
}

#caseOpeningPanel #caseOpenAgainBtn::after{
  content:""!important;
  position:absolute!important;

  top:-70%!important;
  left:-42%!important;

  width:28%!important;
  height:240%!important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.96),
      transparent
    )!important;

  transform:skewX(-20deg)!important;
  animation:tonixResultButtonShine 3.3s ease-in-out infinite!important;
  pointer-events:none!important;
}

#caseOpeningPanel #caseOpenAgainBtn:active{
  transform:scale(.976)!important;
}


/* Кнопка возврата */
#caseOpeningPanel > .case-back-list-btn{
  width:calc(100% - 58px)!important;
  height:54px!important;
  margin:12px auto 0!important;

  display:block!important;

  border:1px solid #292929!important;
  border-radius:17px!important;

  color:#8a8a8a!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:900!important;

  background:
    linear-gradient(
      145deg,
      #151515,
      #0b0b0b
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 10px 24px rgba(0,0,0,.18)!important;
}

#caseOpeningPanel > .case-back-list-btn:active{
  transform:scale(.982)!important;
  border-color:#3a3a3a!important;
}


/* Легендарный результат немного живее */
#caseOpeningPanel.result-legendary .case-opening-prize{
  background:
    radial-gradient(
      circle at 50% -8%,
      rgba(255,212,107,.30),
      transparent 44%
    ),
    linear-gradient(
      145deg,
      #211b0e,
      #0b0905 72%
    )!important;
}

#caseOpeningPanel.result-legendary .case-opening-prize::before{
  text-shadow:0 0 14px rgba(255,212,107,.55)!important;
}


/* Анимации */
@keyframes tonixResultCardEnter{
  0%{
    opacity:0;
    transform:translateY(16px) scale(.90);
    filter:blur(7px);
  }

  62%{
    opacity:1;
    transform:translateY(-2px) scale(1.025);
    filter:blur(0);
  }

  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

@keyframes tonixResultCardGlow{
  0%,100%{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.085),
      inset 0 -30px 48px rgba(0,0,0,.30),
      0 0 0 1px rgba(255,255,255,.018),
      0 18px 46px rgba(0,0,0,.39),
      0 0 20px rgba(var(--result-accent-rgb),.08);
  }

  50%{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -30px 48px rgba(0,0,0,.30),
      0 0 0 1px rgba(255,255,255,.025),
      0 18px 46px rgba(0,0,0,.39),
      0 0 38px rgba(var(--result-accent-rgb),.20);
  }
}

@keyframes tonixResultAmbient{
  0%,100%{
    opacity:.58;
    transform:translateX(-50%) scale(.92);
  }

  50%{
    opacity:1;
    transform:translateX(-50%) scale(1.08);
  }
}

@keyframes tonixResultButtonShine{
  0%,42%{
    left:-42%;
    opacity:0;
  }

  54%{
    opacity:.9;
  }

  72%,100%{
    left:132%;
    opacity:0;
  }
}


@media(max-width:360px){
  #caseOpeningPanel.result .case-opening-prize{
    width:calc(100% - 34px)!important;
    min-height:132px!important;
    padding-left:10px!important;
    padding-right:10px!important;
    font-size:36px!important;
  }

  #caseOpeningPanel #caseOpenAgainBtn,
  #caseOpeningPanel > .case-back-list-btn{
    width:calc(100% - 34px)!important;
  }
}

</style>


<style id="tonix-case-roulette-result-final-v2">

/* =====================================================
   ЕДИНЫЕ ЦВЕТА РЕДКОСТЕЙ
   Обычный — серый
   Редкий — синий
   Эпический — фиолетовый
   Легендарный — золотой
   ===================================================== */

#caseOpeningPanel{
  --result-accent:#999999;
  --result-accent-rgb:153,153,153;
}

#caseOpeningPanel.result-common{
  --result-accent:#a4a4a4;
  --result-accent-rgb:164,164,164;
}

#caseOpeningPanel.result-rare{
  --result-accent:#55aaff;
  --result-accent-rgb:85,170,255;
}

#caseOpeningPanel.result-epic{
  --result-accent:#b06cff;
  --result-accent-rgb:176,108,255;
}

#caseOpeningPanel.result-legendary{
  --result-accent:#ffd46b;
  --result-accent-rgb:255,212,107;
}


/* =====================================================
   ФИРМЕННЫЕ КАРТОЧКИ В РУЛЕТКЕ
   ===================================================== */

#caseRouletteWindow{
  height:258px!important;
  border-top:1px solid #292929!important;
  border-bottom:1px solid #292929!important;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255,255,255,.035),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #080808,
      #030303
    )!important;

  box-shadow:
    inset 42px 0 42px rgba(0,0,0,.92),
    inset -42px 0 42px rgba(0,0,0,.92),
    inset 0 1px 0 rgba(255,255,255,.025)!important;
}

#caseRouletteTrack{
  height:100%!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:0 10px!important;
}


/* Основная карточка приза */
#caseRouletteWindow .case-reel-item{
  --rarity-color:#888;
  --rarity-rgb:136,136,136;

  position:relative!important;
  isolation:isolate!important;

  width:176px!important;
  min-width:176px!important;
  height:224px!important;
  min-height:224px!important;

  padding:17px 12px 15px!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-end!important;

  box-sizing:border-box!important;
  overflow:hidden!important;

  border:1px solid rgba(var(--rarity-rgb),.35)!important;
  border-radius:24px!important;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(var(--rarity-rgb),.15),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #1a1a1a,
      #080808 72%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -28px 40px rgba(0,0,0,.35),
    0 13px 27px rgba(0,0,0,.32)!important;

  transform:none!important;
}


/* Большой декоративный знак на фоне */
#caseRouletteWindow .case-reel-item::before{
  content:"T"!important;

  position:absolute!important;
  z-index:-1!important;

  right:-5px!important;
  bottom:-23px!important;

  color:rgba(var(--rarity-rgb),.075)!important;
  font-size:116px!important;
  line-height:1!important;
  font-weight:1000!important;
  font-style:italic!important;

  transform:rotate(-10deg)!important;
}


/* Верхняя линия акцента */
#caseRouletteWindow .case-reel-item::after{
  content:""!important;

  position:absolute!important;
  top:0!important;
  left:24px!important;
  right:24px!important;

  height:2px!important;

  border-radius:0 0 999px 999px!important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(var(--rarity-rgb),.85),
      transparent
    )!important;

  box-shadow:
    0 0 13px rgba(var(--rarity-rgb),.30)!important;
}


/* Название редкости */
#caseRouletteWindow .case-rarity-label{
  position:absolute!important;
  z-index:4!important;

  top:15px!important;
  left:8px!important;
  right:8px!important;

  color:var(--rarity-color)!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:1.1px!important;
  text-align:center!important;
  text-transform:uppercase!important;

  opacity:.88!important;
}


/* Вместо старого кружка — фирменная монета TONIX */
#caseRouletteWindow .case-reel-item i{
  position:absolute!important;
  z-index:3!important;

  top:60px!important;
  left:50%!important;

  width:78px!important;
  height:78px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  transform:translateX(-50%)!important;

  border:
    1px solid
    rgba(var(--rarity-rgb),.58)!important;

  border-radius:25px!important;

  background:
    radial-gradient(
      circle at 34% 27%,
      rgba(255,255,255,.30),
      rgba(var(--rarity-rgb),.28) 24%,
      rgba(var(--rarity-rgb),.09) 51%,
      #080808 79%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -12px 22px rgba(0,0,0,.46),
    0 0 22px rgba(var(--rarity-rgb),.23),
    0 14px 24px rgba(0,0,0,.37)!important;
}


/* Буква T внутри фирменной монеты */
#caseRouletteWindow .case-reel-item i::before{
  content:"T"!important;

  color:#f3f3f3!important;
  font-size:31px!important;
  line-height:1!important;
  font-weight:1000!important;
  font-style:normal!important;

  text-shadow:
    0 2px 3px rgba(0,0,0,.5),
    0 0 16px rgba(var(--rarity-rgb),.38)!important;
}


/* Блик на монете */
#caseRouletteWindow .case-reel-item i::after{
  content:""!important;

  position:absolute!important;
  top:8px!important;
  left:12px!important;

  width:31px!important;
  height:15px!important;

  border-radius:50%!important;

  background:
    radial-gradient(
      ellipse,
      rgba(255,255,255,.30),
      transparent 72%
    )!important;

  transform:rotate(-24deg)!important;
}


/* Сумма */
#caseRouletteWindow .case-reel-item b{
  position:relative!important;
  z-index:4!important;

  margin:0 0 10px!important;

  color:#f2f2f2!important;
  font-size:21px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:-.55px!important;
  white-space:nowrap!important;

  text-shadow:
    0 2px 5px rgba(0,0,0,.75),
    0 0 18px rgba(var(--rarity-rgb),.18)!important;
}


/* Цвета карточек */
#caseRouletteWindow .case-reel-item.rarity-common{
  --rarity-color:#a1a1a1;
  --rarity-rgb:161,161,161;
}

#caseRouletteWindow .case-reel-item.rarity-rare{
  --rarity-color:#55aaff;
  --rarity-rgb:85,170,255;
}

#caseRouletteWindow .case-reel-item.rarity-epic{
  --rarity-color:#b06cff;
  --rarity-rgb:176,108,255;
}

#caseRouletteWindow .case-reel-item.rarity-legendary{
  --rarity-color:#ffd46b;
  --rarity-rgb:255,212,107;
}


/* Во время вращения карточки не прыгают */
#caseRouletteWindow.roulette-running .case-reel-item{
  transform:none!important;
}


/* Победная карточка */
#caseRouletteWindow.roulette-finished .case-reel-item.winning{
  z-index:8!important;

  border-color:var(--rarity-color)!important;

  transform:scale(1.025)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 0 32px rgba(var(--rarity-rgb),.15),
    0 0 0 1px rgba(var(--rarity-rgb),.13),
    0 0 34px rgba(var(--rarity-rgb),.31),
    0 18px 35px rgba(0,0,0,.45)!important;
}

#caseRouletteWindow.roulette-finished .case-reel-item.winning i{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.23),
    inset 0 -12px 22px rgba(0,0,0,.40),
    0 0 32px rgba(var(--rarity-rgb),.46),
    0 14px 24px rgba(0,0,0,.37)!important;

  animation:
    tonixWinningTokenPulse
    1.8s
    ease-in-out
    infinite!important;
}


/* Центральный указатель поверх карточки */
#caseRouletteWindow .case-roulette-marker{
  z-index:20!important;
}


/* =====================================================
   РЕЗУЛЬТАТ — ПОЯВЛЯЕТСЯ ТОЛЬКО КОГДА СУММА ГОТОВА
   ===================================================== */

/* До готовности результата скрываем промежуточную карточку */
#caseOpeningPanel.result:not(.result-ready) .case-opening-prize{
  display:none!important;
}

#caseOpeningPanel.result:not(.result-ready) .case-opening-text{
  opacity:0!important;
}


/* Премиальная карточка активируется только после result-ready */
#caseOpeningPanel.result.result-ready .case-opening-prize{
  position:relative!important;
  isolation:isolate!important;

  width:calc(100% - 58px)!important;
  min-height:142px!important;
  margin:0 auto 16px!important;
  padding:48px 18px 22px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  box-sizing:border-box!important;
  overflow:hidden!important;

  border:
    1px solid
    rgba(var(--result-accent-rgb),.58)!important;

  border-radius:24px!important;

  color:#f8f8f8!important;
  font-size:42px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:-1.8px!important;
  text-align:center!important;

  background:
    radial-gradient(
      circle at 50% -8%,
      rgba(var(--result-accent-rgb),.23),
      transparent 43%
    ),
    linear-gradient(
      145deg,
      #1c1c1c,
      #080808 72%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -30px 48px rgba(0,0,0,.30),
    0 18px 46px rgba(0,0,0,.39),
    0 0 32px rgba(var(--result-accent-rgb),.15)!important;

  text-shadow:
    0 1px 0 rgba(255,255,255,.04),
    0 0 22px rgba(var(--result-accent-rgb),.22)!important;

  animation:
    tonixCleanResultEnter
    .55s
    cubic-bezier(.16,.82,.20,1)!important;
}


/* Получено */
#caseOpeningPanel.result.result-ready .case-opening-prize::before{
  content:"ПОЛУЧЕНО"!important;

  position:absolute!important;
  z-index:3!important;

  top:18px!important;
  left:50%!important;

  transform:translateX(-50%)!important;

  color:var(--result-accent)!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:2.2px!important;
  white-space:nowrap!important;
}


/* Фоновый знак */
#caseOpeningPanel.result.result-ready .case-opening-prize::after{
  content:"T"!important;

  position:absolute!important;
  z-index:-1!important;

  right:13px!important;
  bottom:-27px!important;

  color:rgba(var(--result-accent-rgb),.065)!important;
  font-size:128px!important;
  line-height:1!important;
  font-weight:1000!important;
  font-style:italic!important;

  transform:rotate(-10deg)!important;
}


/* Текст начисления появляется вместе с карточкой */
#caseOpeningPanel.result.result-ready .case-opening-text{
  opacity:1!important;
  color:var(--result-accent)!important;

  animation:
    tonixResultTextEnter
    .42s
    ease-out
    .12s
    both!important;
}


/* Легендарная карточка */
#caseOpeningPanel.result-legendary.result-ready .case-opening-prize{
  background:
    radial-gradient(
      circle at 50% -8%,
      rgba(255,212,107,.30),
      transparent 44%
    ),
    linear-gradient(
      145deg,
      #211b0e,
      #090804 72%
    )!important;
}


@keyframes tonixWinningTokenPulse{
  0%,100%{
    transform:translateX(-50%) scale(1);
  }

  50%{
    transform:translateX(-50%) scale(1.055);
  }
}

@keyframes tonixCleanResultEnter{
  0%{
    opacity:0;
    transform:translateY(12px) scale(.94);
    filter:blur(5px);
  }

  65%{
    opacity:1;
    transform:translateY(-2px) scale(1.018);
    filter:blur(0);
  }

  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

@keyframes tonixResultTextEnter{
  from{
    opacity:0;
    transform:translateY(7px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}


@media(max-width:360px){
  #caseRouletteWindow .case-reel-item{
    width:160px!important;
    min-width:160px!important;
  }

  #caseOpeningPanel.result.result-ready .case-opening-prize{
    width:calc(100% - 34px)!important;
    font-size:36px!important;
  }
}

</style>


<style id="tonix-case-compact-performance-final">

/* =====================================================
   КОМПАКТНЫЙ ЭКРАН ОТКРЫТИЯ КЕЙСА
   ===================================================== */

#caseOpeningPanel{
  padding-top:0!important;
  padding-bottom:86px!important;
  min-height:0!important;
}

/* Компактный баланс */
#caseOpeningPanel .case-opening-balance{
  width:calc(100% - 56px)!important;
  min-height:68px!important;
  height:68px!important;
  margin:8px auto 12px!important;
  padding:0 22px!important;

  box-sizing:border-box!important;
  border-radius:19px!important;
}

#caseOpeningPanel .case-opening-balance span{
  font-size:12px!important;
}

#caseOpeningPanel .case-opening-balance b{
  font-size:21px!important;
}

/* =====================================================
   ОБЛЕГЧЁННАЯ РУЛЕТКА
   ===================================================== */

#caseRouletteWindow{
  height:210px!important;
  min-height:210px!important;
  margin:0!important;

  contain:layout paint!important;
  transform:translateZ(0)!important;

  box-shadow:
    inset 26px 0 25px rgba(0,0,0,.90),
    inset -26px 0 25px rgba(0,0,0,.90),
    inset 0 1px 0 rgba(255,255,255,.025)!important;
}

#caseRouletteTrack{
  height:100%!important;
  gap:8px!important;
  padding:0 8px!important;

  transform:translate3d(0,0,0);
  backface-visibility:hidden!important;
  perspective:1000px!important;
}

/* Карточка стала компактнее и легче */
#caseRouletteWindow .case-reel-item{
  width:146px!important;
  min-width:146px!important;
  height:184px!important;
  min-height:184px!important;

  padding:13px 8px 12px!important;
  border-radius:20px!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -18px 26px rgba(0,0,0,.27)!important;

  backface-visibility:hidden!important;
}

/* Убираем тяжёлую большую фоновую букву во время прокрутки */
#caseRouletteWindow.roulette-running .case-reel-item::before{
  display:none!important;
}

/* Лёгкая верхняя линия */
#caseRouletteWindow .case-reel-item::after{
  left:21px!important;
  right:21px!important;
  box-shadow:none!important;
}

#caseRouletteWindow .case-rarity-label{
  top:12px!important;
  font-size:8px!important;
  letter-spacing:.8px!important;
}

/* Фирменный жетон */
#caseRouletteWindow .case-reel-item i{
  top:46px!important;

  width:62px!important;
  height:62px!important;

  border-radius:20px!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -8px 14px rgba(0,0,0,.38),
    0 7px 15px rgba(0,0,0,.30)!important;
}

#caseRouletteWindow .case-reel-item i::before{
  font-size:25px!important;
  text-shadow:0 2px 3px rgba(0,0,0,.5)!important;
}

#caseRouletteWindow .case-reel-item i::after{
  width:24px!important;
  height:11px!important;
  top:7px!important;
  left:10px!important;
}

#caseRouletteWindow .case-reel-item b{
  margin-bottom:8px!important;
  font-size:17px!important;
  letter-spacing:-.35px!important;
  text-shadow:0 2px 4px rgba(0,0,0,.7)!important;
}

/*
  Во время движения отключаем сложные свечения.
  Цвет редкости и фирменная форма остаются.
*/
#caseRouletteWindow.roulette-running .case-reel-item,
#caseRouletteWindow.roulette-running .case-reel-item i{
  box-shadow:none!important;
  animation:none!important;
}

/* Победитель — без бесконечной тяжёлой пульсации */
#caseRouletteWindow.roulette-finished .case-reel-item.winning{
  transform:none!important;

  box-shadow:
    inset 0 0 17px rgba(var(--rarity-rgb),.10),
    0 0 18px rgba(var(--rarity-rgb),.19)!important;

  animation:none!important;
}

#caseRouletteWindow.roulette-finished .case-reel-item.winning i{
  animation:none!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -8px 14px rgba(0,0,0,.36),
    0 0 17px rgba(var(--rarity-rgb),.25)!important;
}

/* =====================================================
   КОМПАКТНЫЙ РЕЗУЛЬТАТ
   ===================================================== */

#caseOpeningPanel .case-opening-label{
  display:block!important;
  margin:17px auto 10px!important;

  font-size:11px!important;
  line-height:1!important;
  letter-spacing:2px!important;
}

/* Пока результат не готов, не оставляем огромную пустоту */
#caseOpeningPanel.result:not(.result-ready) .case-opening-prize{
  display:none!important;
}

#caseOpeningPanel.result:not(.result-ready) .case-opening-text{
  display:none!important;
}

/* Карточка выигрыша */
#caseOpeningPanel.result.result-ready .case-opening-prize{
  width:calc(100% - 56px)!important;
  min-height:105px!important;
  height:105px!important;

  margin:0 auto 7px!important;
  padding:31px 12px 12px!important;

  border-radius:20px!important;

  font-size:35px!important;
  letter-spacing:-1.2px!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -18px 27px rgba(0,0,0,.25),
    0 8px 22px rgba(0,0,0,.28),
    0 0 18px rgba(var(--result-accent-rgb),.10)!important;

  animation:
    tonixFastResultEnter
    .28s
    ease-out
    both!important;
}

#caseOpeningPanel.result.result-ready .case-opening-prize::before{
  top:13px!important;
  font-size:8px!important;
  letter-spacing:1.8px!important;
}

#caseOpeningPanel.result.result-ready .case-opening-prize::after{
  right:10px!important;
  bottom:-25px!important;

  font-size:92px!important;
}

/* Текст начисления */
#caseOpeningPanel.result.result-ready .case-opening-text{
  min-height:17px!important;
  margin:0 auto 11px!important;

  font-size:12px!important;
  line-height:17px!important;

  animation:none!important;
}

/* =====================================================
   КНОПКИ ВСЕГДА ВИДНЫ БЕЗ ПРОКРУТКИ
   ===================================================== */

#caseOpeningPanel #caseOpenAgainBtn{
  width:calc(100% - 56px)!important;
  height:54px!important;

  margin:0 auto!important;
  padding:0 12px!important;

  border-radius:17px!important;

  font-size:16px!important;
  line-height:1!important;

  animation:none!important;
}

#caseOpeningPanel > .case-back-list-btn{
  width:calc(100% - 56px)!important;
  height:42px!important;

  margin:8px auto 0!important;

  border-radius:14px!important;
  font-size:12px!important;
}

/* Лёгкое появление без blur */
@keyframes tonixFastResultEnter{
  from{
    opacity:0;
    transform:translateY(7px) scale(.975);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* Полностью блокируем старое тяжёлое размытие */
#caseOpeningPanel .case-prize-reveal{
  animation:none!important;
  filter:none!important;
}

/* =====================================================
   НИЗКИЕ ЭКРАНЫ
   ===================================================== */

@media(max-height:720px){
  #caseOpeningPanel .case-opening-balance{
    height:60px!important;
    min-height:60px!important;
    margin-top:4px!important;
    margin-bottom:8px!important;
  }

  #caseRouletteWindow{
    height:190px!important;
    min-height:190px!important;
  }

  #caseRouletteWindow .case-reel-item{
    height:166px!important;
    min-height:166px!important;
  }

  #caseRouletteWindow .case-reel-item i{
    top:40px!important;
    width:55px!important;
    height:55px!important;
  }

  #caseRouletteWindow .case-reel-item b{
    font-size:16px!important;
  }

  #caseOpeningPanel .case-opening-label{
    margin-top:11px!important;
    margin-bottom:7px!important;
  }

  #caseOpeningPanel.result.result-ready .case-opening-prize{
    height:92px!important;
    min-height:92px!important;
    padding-top:29px!important;
    font-size:32px!important;
  }

  #caseOpeningPanel.result.result-ready .case-opening-text{
    margin-bottom:7px!important;
  }

  #caseOpeningPanel #caseOpenAgainBtn{
    height:49px!important;
  }

  #caseOpeningPanel > .case-back-list-btn{
    height:38px!important;
    margin-top:6px!important;
  }
}

@media(max-width:360px){
  #caseRouletteWindow .case-reel-item{
    width:138px!important;
    min-width:138px!important;
  }

  #caseOpeningPanel.result.result-ready .case-opening-prize,
  #caseOpeningPanel #caseOpenAgainBtn,
  #caseOpeningPanel > .case-back-list-btn,
  #caseOpeningPanel .case-opening-balance{
    width:calc(100% - 34px)!important;
  }

  #caseOpeningPanel.result.result-ready .case-opening-prize{
    font-size:31px!important;
  }
}

</style>


<style id="tonix-case-detail-one-screen-final">

/* =====================================================
   ДЕТАЛЬНАЯ СТРАНИЦА КЕЙСА — ЦЕЛИКОМ НА ОДНОМ ЭКРАНЕ
   ===================================================== */

#caseDetailPanel{
  width:100%!important;
  min-height:0!important;
  height:auto!important;

  margin:0!important;
  padding:4px 0 86px!important;

  box-sizing:border-box!important;
  overflow:visible!important;
}


/* =====================================================
   КОМПАКТНАЯ ВЕРХНЯЯ КАРТОЧКА
   ===================================================== */

#caseDetailPanel .case-detail-hero{
  position:relative!important;

  min-height:0!important;
  height:124px!important;

  margin:0 0 8px!important;
  padding:10px 16px!important;

  display:grid!important;
  grid-template-columns:88px minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;
  column-gap:15px!important;
  align-items:center!important;

  box-sizing:border-box!important;
  overflow:hidden!important;

  border-radius:20px!important;
}

/* Кейс слева */
#caseDetailPanel .case-detail-box{
  grid-column:1!important;
  grid-row:1 / 4!important;

  width:82px!important;
  height:72px!important;

  margin:0!important;

  align-self:center!important;
  justify-self:center!important;

  border-radius:19px!important;
  animation:none!important;
}

#caseDetailPanel .case-detail-box::before,
#caseDetailPanel .case-detail-box::after{
  animation:none!important;
}

#caseDetailPanel .case-detail-box span{
  font-size:21px!important;
}

/* Маленькая подпись */
#caseDetailPanel .case-detail-label{
  grid-column:2!important;
  grid-row:1!important;

  margin:0 0 2px!important;

  align-self:end!important;

  font-size:8px!important;
  line-height:1!important;
  letter-spacing:2px!important;
  text-align:left!important;
}

/* Название кейса сохраняем */
#caseDetailPanel #caseDetailName{
  grid-column:2!important;
  grid-row:2!important;

  margin:0!important;

  font-size:27px!important;
  line-height:1.05!important;
  letter-spacing:-1px!important;
  text-align:left!important;
}

/* Описание */
#caseDetailPanel #caseDetailSubtitle{
  grid-column:2!important;
  grid-row:3!important;

  max-width:100%!important;
  margin:4px 0 0!important;

  align-self:start!important;

  font-size:11px!important;
  line-height:1.25!important;
  text-align:left!important;
}


/* =====================================================
   ЦЕНА И БАЛАНС
   ===================================================== */

#caseDetailPanel .case-price-card{
  min-height:0!important;
  height:63px!important;

  margin:0 0 8px!important;
  padding:0!important;

  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;

  border:0!important;
  background:none!important;
  box-shadow:none!important;
}

#caseDetailPanel .case-price-card > div{
  min-width:0!important;
  min-height:0!important;
  height:63px!important;

  padding:10px 13px!important;

  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;

  box-sizing:border-box!important;

  border:1px solid #292929!important;
  border-radius:17px!important;

  background:
    radial-gradient(
      circle at 90% 100%,
      rgba(255,255,255,.035),
      transparent 39%
    ),
    linear-gradient(
      145deg,
      #171717,
      #0b0b0b 75%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 7px 16px rgba(0,0,0,.14)!important;
}

#caseDetailPanel .case-price-card span{
  margin:0 0 5px!important;

  font-size:9px!important;
  line-height:1!important;
}

#caseDetailPanel .case-price-card b{
  font-size:18px!important;
  line-height:1!important;
  letter-spacing:-.5px!important;
}


/* =====================================================
   БЛОК ПРИЗОВ
   ===================================================== */

#caseDetailPanel .case-content-card{
  min-height:0!important;

  margin:0 0 8px!important;
  padding:9px!important;

  border-radius:19px!important;
}

/* Заголовок в одну компактную строку */
#caseDetailPanel .case-content-title{
  height:21px!important;

  margin:0 2px 7px!important;
  padding:0!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}

#caseDetailPanel .case-content-title span{
  font-size:8px!important;
  line-height:1!important;
  letter-spacing:1.5px!important;
}

#caseDetailPanel .case-content-title b{
  font-size:10px!important;
  line-height:1!important;
}

/* Убираем нижнюю подпись, так как и так визуально видно 9 наград */
#caseDetailPanel .case-content-card::after{
  display:none!important;
}


/* =====================================================
   ВСЕ 9 ПРИЗОВ В КОМПАКТНОЙ СЕТКЕ
   ===================================================== */

#caseDetailPanel .case-prizes-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:repeat(3,70px)!important;

  gap:6px!important;
}

/* Карточка награды */
#caseDetailPanel .case-prize-preview{
  position:relative!important;

  min-width:0!important;
  min-height:0!important;
  height:70px!important;

  padding:7px 3px 6px!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-end!important;

  border-radius:13px!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035)!important;

  animation:none!important;
}

/* Редкость */
#caseDetailPanel .case-prize-preview::before{
  top:6px!important;

  max-width:94%!important;

  font-size:6px!important;
  line-height:1!important;
  letter-spacing:.45px!important;
}

/* Компактный фирменный жетон */
#caseDetailPanel .case-prize-preview::after{
  top:20px!important;

  width:29px!important;
  height:29px!important;

  border-radius:10px!important;

  font-size:12px!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 10px var(--rarity-glow)!important;
}

/* Сумма приза */
#caseDetailPanel .case-prize-preview b{
  margin:0!important;

  font-size:9px!important;
  line-height:1!important;
  letter-spacing:-.15px!important;
}


/* =====================================================
   КНОПКИ
   ===================================================== */

#caseDetailPanel .case-open-main-btn{
  width:100%!important;
  height:50px!important;

  margin:0!important;
  padding:0 12px!important;

  border-radius:16px!important;

  font-size:16px!important;
  line-height:1!important;

  animation:none!important;
}

/* Убираем тяжёлый бегущий блик */
#caseDetailPanel .case-open-main-btn::after{
  display:none!important;
}

#caseDetailPanel .case-back-list-btn{
  width:100%!important;
  height:36px!important;

  margin:7px 0 0!important;

  border-radius:13px!important;

  font-size:10px!important;
  line-height:1!important;
}


/* =====================================================
   НЕ ДАЁМ БРАУЗЕРУ ОСТАВЛЯТЬ СТАРУЮ ПРОКРУТКУ
   ===================================================== */

#casesModePage:has(#caseDetailPanel[style*="display: block"]),
#casesModePage:has(#caseDetailPanel[style*="display:block"]){
  padding-bottom:0!important;
}

#caseDetailPanel,
#caseDetailPanel *{
  -webkit-tap-highlight-color:transparent;
}


/* =====================================================
   НИЗКИЕ ЭКРАНЫ
   ===================================================== */

@media(max-height:760px){

  #caseDetailPanel{
    padding-top:0!important;
  }

  #caseDetailPanel .case-detail-hero{
    height:108px!important;
    margin-bottom:6px!important;

    grid-template-columns:72px minmax(0,1fr)!important;
    column-gap:12px!important;
  }

  #caseDetailPanel .case-detail-box{
    width:68px!important;
    height:60px!important;
    border-radius:16px!important;
  }

  #caseDetailPanel #caseDetailName{
    font-size:23px!important;
  }

  #caseDetailPanel #caseDetailSubtitle{
    font-size:9px!important;
  }

  #caseDetailPanel .case-price-card{
    height:56px!important;
    margin-bottom:6px!important;
    gap:6px!important;
  }

  #caseDetailPanel .case-price-card > div{
    height:56px!important;
    padding:8px 11px!important;
  }

  #caseDetailPanel .case-price-card span{
    margin-bottom:4px!important;
    font-size:8px!important;
  }

  #caseDetailPanel .case-price-card b{
    font-size:16px!important;
  }

  #caseDetailPanel .case-content-card{
    margin-bottom:6px!important;
    padding:7px!important;
  }

  #caseDetailPanel .case-content-title{
    height:17px!important;
    margin-bottom:5px!important;
  }

  #caseDetailPanel .case-prizes-grid{
    grid-template-rows:repeat(3,61px)!important;
    gap:5px!important;
  }

  #caseDetailPanel .case-prize-preview{
    height:61px!important;
    border-radius:12px!important;
  }

  #caseDetailPanel .case-prize-preview::before{
    top:5px!important;
    font-size:5.5px!important;
  }

  #caseDetailPanel .case-prize-preview::after{
    top:17px!important;
    width:25px!important;
    height:25px!important;
    font-size:10px!important;
    border-radius:8px!important;
  }

  #caseDetailPanel .case-prize-preview b{
    font-size:8px!important;
  }

  #caseDetailPanel .case-open-main-btn{
    height:45px!important;
    font-size:14px!important;
  }

  #caseDetailPanel .case-back-list-btn{
    height:32px!important;
    margin-top:5px!important;
    font-size:9px!important;
  }
}


/* Очень маленькие экраны */
@media(max-height:680px){

  #caseDetailPanel .case-detail-hero{
    height:94px!important;
  }

  #caseDetailPanel .case-detail-label,
  #caseDetailPanel #caseDetailSubtitle{
    display:none!important;
  }

  #caseDetailPanel #caseDetailName{
    grid-row:1 / 4!important;
    align-self:center!important;
  }

  #caseDetailPanel .case-price-card{
    height:51px!important;
  }

  #caseDetailPanel .case-price-card > div{
    height:51px!important;
  }

  #caseDetailPanel .case-prizes-grid{
    grid-template-rows:repeat(3,56px)!important;
  }

  #caseDetailPanel .case-prize-preview{
    height:56px!important;
  }

  #caseDetailPanel .case-prize-preview::after{
    top:16px!important;
    width:22px!important;
    height:22px!important;
  }

  #caseDetailPanel .case-open-main-btn{
    height:42px!important;
  }

  #caseDetailPanel .case-back-list-btn{
    height:29px!important;
  }
}


/* Узкие экраны */
@media(max-width:360px){

  #caseDetailPanel .case-detail-hero{
    grid-template-columns:68px minmax(0,1fr)!important;
    padding-left:11px!important;
    padding-right:11px!important;
  }

  #caseDetailPanel #caseDetailName{
    font-size:21px!important;
  }

  #caseDetailPanel .case-price-card b{
    font-size:15px!important;
  }

  #caseDetailPanel .case-prize-preview b{
    font-size:7.5px!important;
  }
}

</style>


<style id="tonix-case-reel-performance-v3">

/*
  Отдельный слой для движущейся ленты.
  Это снижает рывки внутри Telegram WebView.
*/
#caseRouletteTrack{
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  perspective:1000px;
}

/*
  Каждая карточка изолирована от остальной страницы,
  поэтому её движение не вызывает полный перерасчёт интерфейса.
*/
#caseRouletteWindow .case-reel-item{
  contain:layout paint style;
  flex:0 0 auto!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}

/*
  Пока браузер готовит первый кадр, лента остаётся видимой,
  но тяжёлые эффекты уже отключены.
*/
#caseRouletteWindow.roulette-preparing .case-reel-item,
#caseRouletteWindow.roulette-running .case-reel-item{
  animation:none!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 7px 13px rgba(0,0,0,.20)!important;
}

#caseRouletteWindow.roulette-preparing .case-reel-item::after,
#caseRouletteWindow.roulette-running .case-reel-item::after{
  box-shadow:none!important;
}

#caseRouletteWindow.roulette-preparing .case-reel-item i,
#caseRouletteWindow.roulette-running .case-reel-item i{
  animation:none!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -8px 14px rgba(0,0,0,.35),
    0 7px 12px rgba(0,0,0,.28)!important;
}

#caseRouletteWindow.roulette-preparing .case-reel-item b,
#caseRouletteWindow.roulette-running .case-reel-item b{
  text-shadow:0 2px 4px rgba(0,0,0,.60)!important;
}

/*
  Во время длинной прокрутки немного размываются только края окна.
  Сами карточки остаются чёткими.
*/
#caseRouletteWindow.roulette-running{
  box-shadow:
    inset 48px 0 42px rgba(0,0,0,.94),
    inset -48px 0 42px rgba(0,0,0,.94),
    inset 0 1px 0 rgba(255,255,255,.025)!important;
}

/*
  После остановки возвращаются полные фирменные
  свечения и оформление победной карточки.
*/
#caseRouletteWindow.roulette-finished .case-reel-item.winning{
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease!important;
}

</style>


<style id="tonix-profile-avatar-position-final">
/* Финальное выравнивание аватара профиля */
#profile .profile-card{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:16px!important;
}

#profile .profile-photo-wrap{
  position:relative!important;
  flex:0 0 72px!important;

  width:72px!important;
  height:72px!important;
  min-width:72px!important;
  min-height:72px!important;
  max-width:72px!important;
  max-height:72px!important;

  margin:0!important;
  padding:0!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  overflow:hidden!important;
  border-radius:50%!important;
  background:#202020!important;

  transform:none!important;
  translate:none!important;
}

#profile .profile-photo-wrap .profile-photo{
  position:absolute!important;
  inset:0!important;

  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:100%!important;
  max-height:100%!important;

  margin:0!important;
  padding:0!important;

  display:none;
  border:0!important;
  border-radius:50%!important;

  object-fit:cover!important;
  object-position:50% 50%!important;

  transform:none!important;
  translate:none!important;
}

#profile .profile-photo-fallback{
  position:absolute!important;
  inset:0!important;

  width:100%!important;
  height:100%!important;

  margin:0!important;
  padding:0!important;

  display:flex;
  align-items:center!important;
  justify-content:center!important;

  border-radius:50%!important;
  line-height:1!important;

  transform:none!important;
  translate:none!important;
}

#profile .profile-card > div:last-child{
  min-width:0!important;
  flex:1 1 auto!important;
  align-self:center!important;
}

#profile .profile-name,
#profile .profile-id{
  transform:none!important;
  translate:none!important;
}
</style>


<!-- TONIX_AVATAR_CENTER_LOADER_FIX_START -->
<style id="tonix-avatar-center-loader-fix">

/* =====================================================
   ПРОФИЛЬ — АВАТАР СТРОГО ВНУТРИ КРУГА
   ===================================================== */

#profile .profile-photo-wrap{
  position:relative!important;
  flex:0 0 72px!important;

  width:72px!important;
  height:72px!important;
  min-width:72px!important;
  min-height:72px!important;
  max-width:72px!important;
  max-height:72px!important;

  margin:0!important;
  padding:0!important;

  overflow:hidden!important;
  border-radius:50%!important;

  contain:paint!important;
  isolation:isolate!important;

  background:#202020!important;
  border:1px solid #3b3b3b!important;

  transform:translateZ(0)!important;
}

#profile .profile-photo-wrap .profile-photo{
  position:absolute!important;
  z-index:2!important;

  top:2px!important;
  right:2px!important;
  bottom:2px!important;
  left:2px!important;
  inset:2px!important;

  width:calc(100% - 4px)!important;
  height:calc(100% - 4px)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:calc(100% - 4px)!important;
  max-height:calc(100% - 4px)!important;

  margin:0!important;
  padding:0!important;

  border:0!important;
  border-radius:50%!important;

  object-fit:cover!important;
  object-position:center center!important;

  clip-path:circle(50% at 50% 50%)!important;
  -webkit-clip-path:circle(50% at 50% 50%)!important;

  transform:none!important;
  translate:none!important;
}

#profile .profile-photo-fallback{
  position:absolute!important;
  z-index:1!important;
  inset:2px!important;

  width:calc(100% - 4px)!important;
  height:calc(100% - 4px)!important;

  overflow:hidden!important;
  border-radius:50%!important;
}


/* =====================================================
   КОЛЕСО — ОЖИДАНИЕ СТРОГО ПО ЦЕНТРУ
   ===================================================== */

#round .center{
  overflow:hidden!important;
  padding:12px 9px!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;

  text-align:center!important;
}

#round .center > #bank2{
  flex:0 0 auto!important;

  width:100%!important;
  max-width:100%!important;

  margin:0!important;
  padding:0!important;

  overflow:hidden!important;
  white-space:nowrap!important;

  text-align:center!important;
  line-height:1!important;
}

#round .center-wait{
  width:100%!important;
  max-width:94px!important;

  margin:8px auto 0!important;
  padding:0!important;

  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;

  text-align:center!important;
  line-height:1.05!important;
}

#round .center-wait.active{
  display:flex!important;
}

#round .center-wait .loader{
  position:static!important;
  flex:0 0 auto!important;

  display:block!important;

  width:11px!important;
  height:11px!important;

  margin:0 auto!important;

  border:2px solid #383838!important;
  border-top-color:#ffffff!important;
  border-radius:50%!important;

  transform-origin:center center!important;
}

#round .center-wait span:last-child{
  display:block!important;

  width:100%!important;
  margin:0!important;

  color:#8b8b8b!important;
  font-size:9px!important;
  font-weight:700!important;
  line-height:1.08!important;

  text-align:center!important;
  white-space:normal!important;
}

</style>
<!-- TONIX_AVATAR_CENTER_LOADER_FIX_END -->


<!-- TONIX_PROFILE_AND_WAIT_FINAL_START -->
<style id="tonix-profile-and-wait-final">

/* =====================================================
   ПРОФИЛЬ — КАРТОЧКА ВЫШЕ, АВАТАР СТРОГО ВНУТРИ КРУГА
   ===================================================== */

body .app .wrap > #profile.page.active{
  padding-top:0!important;
}

body .app .wrap > #profile.page.active > .profile-card{
  position:relative!important;
  margin-top:-4px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:16px!important;
}

/*
  Более точный селектор перекрывает старое правило:
  #profile.page.active > * { position:static!important; }
*/
body .app .wrap > #profile.page.active >
.profile-card > .profile-photo-wrap{
  position:relative!important;
  inset:auto!important;

  flex:0 0 72px!important;

  width:72px!important;
  height:72px!important;
  min-width:72px!important;
  min-height:72px!important;
  max-width:72px!important;
  max-height:72px!important;

  margin:0!important;
  padding:0!important;

  display:block!important;
  overflow:hidden!important;

  border:1px solid #3b3b3b!important;
  border-radius:50%!important;
  background:#202020!important;

  transform:translateZ(0)!important;
  translate:none!important;
  isolation:isolate!important;
}

body .app .wrap > #profile.page.active >
.profile-card > .profile-photo-wrap > #profilePhoto{
  position:absolute!important;
  inset:0!important;

  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;

  margin:0!important;
  padding:0!important;

  border:0!important;
  border-radius:50%!important;

  object-fit:cover!important;
  object-position:center center!important;

  transform:none!important;
  translate:none!important;
}

body .app .wrap > #profile.page.active >
.profile-card > .profile-photo-wrap >
#profilePhotoFallback{
  position:absolute!important;
  inset:0!important;

  width:100%!important;
  height:100%!important;

  margin:0!important;
  padding:0!important;

  align-items:center!important;
  justify-content:center!important;

  border-radius:50%!important;
  overflow:hidden!important;

  transform:none!important;
  translate:none!important;
}


/* =====================================================
   КОЛЕСО — ИНДИКАТОР ОЖИДАНИЯ СТРОГО ПО ЦЕНТРУ
   ===================================================== */

#round .center{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;

  overflow:hidden!important;
  text-align:center!important;
}

#round .center > #bank2{
  width:100%!important;
  margin:0!important;
  text-align:center!important;
}

#round .center-wait{
  position:relative!important;
  inset:auto!important;

  width:100%!important;
  max-width:112px!important;
  min-height:34px!important;

  margin:7px auto 0!important;
  padding:0!important;

  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;

  text-align:center!important;
  transform:none!important;
  translate:none!important;
}

#round .center-wait.active{
  display:flex!important;
}

#round .center-wait .loader{
  position:relative!important;
  inset:auto!important;

  flex:0 0 10px!important;
  width:10px!important;
  height:10px!important;

  margin:0 auto!important;
  transform:none;
}

#round .center-wait span:last-child{
  display:block!important;
  width:100%!important;
  margin:0!important;

  text-align:center!important;
  line-height:1.08!important;
}

</style>
<!-- TONIX_PROFILE_AND_WAIT_FINAL_END -->


<!-- TONIX_PROFILE_AVATAR_REAL_FINAL_START -->
<style id="tonix-profile-avatar-real-final">

/*
  Перекрываем общее правило:
  #profile.page.active > * { position:static!important }
*/
body .app .wrap > #profile.page.active > .profile-card{
  position:relative!important;

  min-height:104px!important;
  padding:15px 18px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:16px!important;

  overflow:hidden!important;
}

/* Круглая рамка — отдельный жёстко зафиксированный контейнер */
body .app .wrap > #profile.page.active
.profile-card > .profile-photo-wrap{
  position:relative!important;
  inset:auto!important;

  flex:0 0 72px!important;

  width:72px!important;
  height:72px!important;
  min-width:72px!important;
  min-height:72px!important;
  max-width:72px!important;
  max-height:72px!important;

  margin:0!important;
  padding:0!important;

  overflow:hidden!important;
  border:1px solid #3b3b3b!important;
  border-radius:50%!important;
  background:#202020!important;

  transform:none!important;
  translate:none!important;
}

/* Фото всегда находится строго внутри круглой рамки */
body .app .wrap > #profile.page.active
.profile-card > .profile-photo-wrap > #profilePhoto{
  position:absolute!important;
  inset:0!important;

  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;

  margin:0!important;
  padding:0!important;

  border:0!important;
  border-radius:50%!important;

  object-fit:cover!important;
  object-position:center center!important;

  clip-path:circle(50% at 50% 50%)!important;
  transform:none!important;
  translate:none!important;
}

/* Запасная буква также строго внутри круга */
body .app .wrap > #profile.page.active
.profile-card > .profile-photo-wrap > .profile-photo-fallback{
  position:absolute!important;
  inset:0!important;

  width:100%!important;
  height:100%!important;

  margin:0!important;
  padding:0!important;

  align-items:center!important;
  justify-content:center!important;

  overflow:hidden!important;
  border-radius:50%!important;
  clip-path:circle(50% at 50% 50%)!important;

  transform:none!important;
  translate:none!important;
}

/* Имя и ID стоят ровно по центру относительно аватара */
body .app .wrap > #profile.page.active
.profile-card > div:last-child{
  position:relative!important;
  inset:auto!important;

  flex:1 1 auto!important;
  min-width:0!important;

  margin:0!important;
  padding:0!important;

  align-self:center!important;
  transform:none!important;
  translate:none!important;
}

</style>
<!-- TONIX_PROFILE_AVATAR_REAL_FINAL_END -->

</head>
<body>

<div id="appLoader">
  <div class="loader-bg"></div>
  <div class="loader-card">
    <div class="loader-logo">TØNIX</div>
    <div class="loader-cube">
      <span></span>
    </div>
    <div class="loader-title">Загрузка</div>
    <div class="loader-text">Подготавливаем комнаты</div>
    <div class="loader-bar"><i></i></div>
  </div>
</div>

<main class="app">
<div class="top"><button class="back" id="back">‹</button><div class="brand brand-online"><div class="tonix-logo"><span class="logo-t">T</span><span>ØNIX</span></div><div class="online-badge"><i></i><span id="onlineCount">0</span></div></div></div>
<div class="wrap">
<section class="page active" id="game"><div id="rooms">



<!-- TONIX_HOME_LIVE_WINS_START -->
<section
  class="tonix-home-live-wins"
  id="tonixHomeLiveWins"
  aria-label="Последние выигрыши"
>
  <div class="tonix-home-live-head">
    <div class="tonix-home-live-title">
      <i></i>

      <div>
        <span>ПРЯМОЙ ЭФИР</span>
        <b>Последние выигрыши</b>
      </div>
    </div>

    <div class="tonix-home-live-online">
      LIVE
    </div>
  </div>

  <div class="tonix-home-live-viewport">
    <div
      class="tonix-home-live-track"
      id="tonixHomeLiveTrack"
    >
      <div class="tonix-home-live-empty">
        Загружаем последние выигрыши
      </div>
    </div>
  </div>
</section>
<!-- TONIX_HOME_LIVE_WINS_END -->


<div class="hero-banner" id="homeHeroBanner">
  <div>
    <span>TØNIX JACKPOT</span>
    <b>Забери банк</b>
    <p>Выбирай комнату, ставь TON и забирай победу</p>
  </div>
  <div class="hero-orb"></div>
</div>


<!-- TONIX_LEADERBOARD_CARD_START -->
<button class="leader-card" id="homeLeaderboardCard" onclick="openTopPlayersPage()">
  <div>
    <span>РЕЙТИНГ</span>
    <b>ТОП игроков</b>
    <em>Лучшие игроки по обороту</em>
  </div>
  <strong>›</strong>
</button>
<!-- TONIX_LEADERBOARD_CARD_END -->


<div class="home-mode-list" id="homeModeList">

  <button class="home-mode-card compact-game-card jackpot-mode-card" onclick="openJackpotMode()">
    <div class="home-mode-visual jackpot-mode-visual">
      <i></i>
    </div>

    <b class="compact-game-title">Джекпот</b>
    <span class="compact-game-status">3 комнаты</span>
  </button>

  <button class="home-mode-card compact-game-card cases-mode-card" onclick="openCasesMode()">
    <div class="home-mode-visual cases-mode-visual">
      <i></i>
      <i></i>
      <i></i>
    </div>

    <b class="compact-game-title">Кейсы</b>
    <span class="compact-game-status">Новый режим</span>
  </button>

</div>

<div id="jackpotModePage" class="mode-inner-page" style="display:none">
  <div class="mode-page-head">
    <span>TØNIX JACKPOT</span>
    <h1>Выбери комнату</h1>
    <p>Чем выше комната, тем больше минимальная ставка</p>
  </div>

  <div id="roomsList"></div>
</div>

<div id="casesModePage" class="mode-inner-page" style="display:none">
  

  <div class="cases-list">

    <button class="case-select case-basic" onclick="selectCase('basic')">
      <div class="case-box-icon"><i></i></div>
      <div class="case-select-main">
        <b>Базовый кейс</b>
        <span>Призы от 0.02 до 1 TON</span>
        <strong>0.1 TON</strong>
      </div>
      <em>›</em>
    </button>

    <button class="case-select case-silver" onclick="selectCase('silver')">
      <div class="case-box-icon"><i></i></div>
      <div class="case-select-main">
        <b>Серебряный кейс</b>
        <span>Призы от 0.10 до 5 TON</span>
        <strong>0.5 TON</strong>
      </div>
      <em>›</em>
    </button>

    <button class="case-select case-gold" onclick="selectCase('gold')">
      <div class="case-box-icon"><i></i></div>
      <div class="case-select-main">
        <b>Золотой кейс</b>
        <span>Призы от 0.20 до 10 TON</span>
        <strong>1 TON</strong>
      </div>
      <em>›</em>
    </button>

    <button class="case-select case-premium" onclick="selectCase('premium')">
      <div class="case-box-icon"><i></i></div>
      <div class="case-select-main">
        <b>Премиальный кейс</b>
        <span>Призы от 1 до 50 TON</span>
        <strong>5 TON</strong>
      </div>
      <em>›</em>    </button>

  </div>

  
  <div class="case-detail-panel" id="caseDetailPanel" style="display:none">

    <div class="case-detail-hero">
      <div class="case-detail-box">
        <span>T</span>
      </div>

      <span class="case-detail-label">TØNIX CASES</span>
      <h1 id="caseDetailName">Кейс</h1>
      <p id="caseDetailSubtitle"></p>
    </div>

    <div class="case-price-card">
      <div>
        <span>Стоимость открытия</span>
        <b id="caseDetailPrice">0 TON</b>
      </div>
      <div>
        <span>Ваш баланс</span>
        <b class="userBalance">0 TON</b>
      </div>
    </div>

    <div class="case-content-card">
      <div class="case-content-title">
        <span>СОДЕРЖИМОЕ</span>
        <b>Возможные призы</b>
      </div>

      <div class="case-prizes-grid" id="caseDetailPrizes"></div>
    </div>

    <button class="main case-open-main-btn" id="caseDetailOpenBtn">
      Открыть кейс
    </button>

    <button class="case-back-list-btn" onclick="closeCaseDetail()">
      К списку кейсов
    </button>

  </div>

<div class="case-opening-panel" id="caseOpeningPanel" style="display:none">

    <div class="case-opening-balance">
      <span>Баланс</span>
      <b class="userBalance">0.00 TON</b>
    </div>

    <div class="case-roulette-window" id="caseRouletteWindow">
      <div class="case-roulette-marker"></div>
      <div class="case-roulette-track" id="caseRouletteTrack"></div>
    </div>

    <span class="case-opening-label" id="caseOpeningLabel">
      Открываем кейс
    </span>

    <b class="case-opening-prize" id="caseOpeningPrize">
      —
    </b>

    <p class="case-opening-text" id="caseOpeningText">
      Результат появится через несколько секунд
    </p>

    <button class="main" id="caseOpenAgainBtn" style="display:none">
      Открыть ещё раз
    </button>

    <button class="case-back-list-btn" onclick="closeCaseResult()">
      Вернуться к кейсам
    </button>
  </div>
  </div>

</div>

<!-- TONIX_CASE_PRIZES_PAGE_START -->
<div id="casePrizesPage" style="display:none">

  <div class="case-prizes-page-hero">
    <span>TØNIX CASES</span>
    <h1 id="casePrizesPageName">Возможные призы</h1>
    <p>Все награды, которые могут выпасть из выбранного кейса</p>
  </div>

  <div class="case-prizes-page-card">
    <div class="case-prizes-page-title">
      <span>СОДЕРЖИМОЕ КЕЙСА</span>
      <b>9 наград</b>
    </div>

    <div
      class="case-prizes-page-grid"
      id="casePrizesPageGrid"
    ></div>
  </div>

  <button
    type="button"
    class="case-prizes-return-btn"
    id="casePrizesReturnBtn"
  >
    Вернуться к кейсу
  </button>

</div>
<!-- TONIX_CASE_PRIZES_PAGE_END -->

<div id="round" style="display:none">
<div class="room-card"><div><div class="muted">Игра</div><div class="room" id="roomNum">#1</div></div><div><div class="muted">Банк</div><div class="bank" id="bank">0.00 TON</div></div></div>

<div class="stats"><div class="stat"><b id="players">0</b><span>игроков</span></div><div class="stat"><div class="timer-ring" id="timerRing"><b id="timer">00:15</b></div><span>до старта</span></div><div class="stat"><b id="minBetStat">0.1 TON</b><span>мин. ставка</span></div></div>
<div class="wheelbox"><div class="pointer"></div><div class="wheel" id="wheel"></div><div class="center" id="centerBox"><div id="bank2">0.00 TON</div><div class="center-wait" id="centerWait"><span class="loader"></span><span>Ожидание участников</span></div></div></div>
<div class="my-bet-card room-balance-card" id="roomBalanceCard">Баланс: <b>0 TON</b></div><div class="my-bet-card" id="myBetCard">Вы поставили: <b>0 TON</b></div><button class="main" id="betBtn">Сделать ставку</button>
<div class="grid"><div class="box amount-box"><span>Ваша ставка</span><div class="amount-input-wrap"><input id="amount" type="number" value="0.1"><button type="button" id="clearAmount" class="amount-clear" aria-label="Очистить">×</button></div></div><div class="box"><span>Ваш процент</span><b id="sector">0%</b><div id="myColor" style="width:100%;height:5px;border-radius:5px;background:#333;margin-top:10px"></div></div></div>
<div class="quick quick-compact"><button data-add="0.1">+0.1</button><button data-add="1">+1</button><button data-add="5">+5</button><button data-add="10">+10</button><button data-set="half">1/2</button><button data-set="max">MAX</button></div><div class="winners-box"><div class="winners-title">Последние победители</div><div class="winners-line" id="winnersLine"></div></div>
<div id="playersList"></div></div></section>

<!-- TONIX_LEADERBOARD_PAGE_START -->
<section class="page subpage lb-page" id="leaderboardPage">

  <div class="lb-header">
    <span>РЕЙТИНГ TØNIX</span>
    <h1>ТОП-100</h1>
    <p>Игроки с самым большим оборотом ставок</p>
  </div>

  <div id="leaderboardPodium" class="lb-podium"></div>

  <div class="lb-table">
    <div class="lb-table-head">
      <span>Игрок</span>
      <span>Оборот</span>
    </div>

    <div id="leaderboardList"></div>
  </div>

  <div class="lb-my-place" id="leaderMyPlace">
    Ваше место: —
  </div>

</section>
<!-- TONIX_LEADERBOARD_PAGE_END -->

<section class="page" id="history">
<div class="page-title">История</div>
<div class="tabs">
  <button class="tab active" data-tab="all">Все</button>
  <button class="tab" data-tab="games">Мои игры</button>
  <button class="tab" data-tab="deposits">Пополнения</button>
  <button class="tab" data-tab="withdraws">Выводы</button>
</div>
<div id="historyList"></div>
</section>
<section class="page" id="balance"><div class="page-title">Баланс</div><div class="balance-card"><div><span>Доступно</span><b class="userBalance">0.00 TON</b></div><button class="small open-deposit">Пополнить</button></div><div class="balance-card"><div><span>Вывод средств</span><b>TON Wallet</b></div><button class="small open-withdraw">Вывести</button></div></section>
<section class="page" id="profile">
<div class="page-title">Профиль</div>

<div class="profile-card">
  <div class="profile-photo-wrap">
    <img id="profilePhoto" class="profile-photo" src="" alt="">
    <div id="profilePhotoFallback" class="profile-photo-fallback">И</div>
  </div>
  <div>
    <div class="profile-name" id="profileName">Пользователь</div>
    <div class="profile-id" id="profileId">ID: —</div>
  </div>
</div>

<div class="premium-balance">
  <span>Баланс</span>
  <b class="userBalance">0.00 TON</b>
  <div class="profile-actions">
    <button class="small open-deposit">Пополнить</button>
    <button class="small dark open-withdraw">Вывести</button>
  </div>
</div>

<div class="profile-stats">
  <div><span>Игр</span><b id="statGames">0</b></div>
  <div><span>Побед</span><b id="statWins">0</b></div>
  <div><span>Оборот</span><b id="statTurnover">0.00</b></div>
</div>

<div class="profile-menu">
  <div class="menu admin-only profile-link" data-open="adminWithdrawsPage" style="display:none">Админка выводов <span>›</span></div>
  <div class="menu admin-only profile-link" data-open="adminPromocodesPage" style="display:none">Промокоды <span>›</span></div>
  <div class="menu admin-only profile-link" data-open="adminSupportPage" style="display:none">Чаты поддержки <span>›</span></div>
  <div class="menu profile-link" data-open="myBetsPage">Мои ставки <span>›</span></div>
  <div class="menu profile-link" data-open="operationsPage">История операций <span>›</span></div>
  <div class="menu profile-link" data-open="bonusesPage">Бонусы <span>›</span></div>
  <div class="menu profile-link" data-open="partnersPage">Партнёры <span>›</span></div>
  <div class="menu profile-link" data-open="supportPage">Поддержка <span>›</span></div>
</div>
</section>

<section class="page subpage" id="myBetsPage">
  <div class="page-title">Мои ставки</div>
  <div id="myBetsList"></div>
</section>

<section class="page subpage" id="operationsPage">
  <div class="page-title">История операций</div>
  <div id="operationsList"></div>
</section>

<section class="page subpage" id="depositPage">
  <div class="page-title">Пополнить</div>

  <div class="premium-balance">
    <span>Способ пополнения</span>
    <b>TON</b>

    <div class="deposit-methods" style="grid-template-columns:1fr">
      <button class="deposit-method active" data-method="crypto">
        <span class="method-title">CryptoBot</span>
        <span class="method-text">Оплата счёта в Telegram</span>
      </button>
    </div>

    <div style="margin-top:18px">
      <input
        id="depositAmount"
        type="number"
        value="1"
        min="1"
        step="0.1"
        placeholder="Минимум 1 TON"
        style="width:100%;box-sizing:border-box;padding:17px;border-radius:14px;border:1px solid #292929;background:#090909;color:#fff;font-size:18px"
      >
    </div>

    <button class="main" id="createDepositBtn" style="margin-top:18px">
      Продолжить
    </button>
  </div>
  <div class="ops-mini-title">Последние пополнения</div>
  <div id="depositOpsList"></div>
</section>

<section class="page subpage" id="withdrawPage">
  <div class="page-title">Вывести</div>

  <div class="premium-balance">
    <span>Доступно</span>
    <b class="userBalance">0.00 TON</b>

    <div class="withdraw-note" style="margin-top:18px;padding:14px;border-radius:14px;border:1px solid #333;background:#101010;color:#ddd;font-size:13px;line-height:1.35">
      Введите адрес кошелька <b>GRAM / TON</b>. Нужен именно адрес сети GRAM, бывший TON.
    </div>

    <div class="deposit-methods" style="display:none">
      <button class="deposit-method active" data-withdraw-method="crypto">
        <span class="method-title">GRAM / TON</span>
        <span class="method-text">Вывод на адрес TON</span>
      </button>
    </div>

    <div style="margin-top:18px">
      <input
        id="withdrawWallet"
        type="text"
        placeholder="UQ... / EQ... или 0:..."
        style="width:100%;box-sizing:border-box;padding:17px;border-radius:14px;border:1px solid #292929;background:#090909;color:#fff;font-size:16px"
      >
    </div>

    <div style="margin-top:12px">
      <input
        id="withdrawAmount"
        type="number"
        min="0.1"
        step="0.1"
        placeholder="Сумма TON"
        style="width:100%;box-sizing:border-box;padding:17px;border-radius:14px;border:1px solid #292929;background:#090909;color:#fff;font-size:18px"
      >
    </div>

    <button class="main" id="createWithdrawBtn" style="margin-top:18px">
      Создать заявку
    </button>
  </div>
  <div class="ops-mini-title">Последние выводы</div>
  <div id="withdrawOpsList"></div>
</section>

<section class="page subpage" id="bonusesPage">
  <div class="page-title">Бонусы</div>

  <div class="premium-balance bonus-card bonus-compact-card">
    <div class="bonus-mini-grid">
      <div class="bonus-mini">
        <span>Канал</span>
        <b>+0.01 TON</b>
        <div class="bonus-text">Подпишитесь на канал Tonix.</div>
        <button class="main" id="openChannelBtn" onclick="openBonusChannel()">Открыть</button>
        <button class="small dark" id="claimChannelBonusBtn" onclick="claimBonusChannel()">Получить</button>
        <div id="bonusStatus"></div>
      </div>

      <div class="bonus-mini">
        <span>Чат</span>
        <b>+0.01 TON</b>
        <div class="bonus-text">Вступите в общий чат Tonix.</div>
        <button class="main" id="openChatBtn" onclick="openBonusChat()">Открыть</button>
        <button class="small dark" id="claimChatBonusBtn" onclick="claimBonusChat()">Получить</button>
        <div id="chatBonusStatus"></div>
      </div>
    </div>

    <div class="promo-box">
      <span>Промокод</span>
      <input id="promoCodeInput" placeholder="Введите промокод">
      <button class="small dark" id="claimPromoBtn" onclick="claimPromocode()">Активировать</button>
    </div>
  </div>
</section>

<section class="page subpage" id="partnersPage">
  <div class="page-title">Партнёры</div>
  <div class="balance-card"><div><span>Реферальная система</span><b>Скоро</b></div></div>
</section>

<section class="page subpage" id="supportPage">
  <div class="page-title">Поддержка</div>

  <div class="support-chat support-chat-user" id="supportMessages"></div>

  <div class="support-send" id="supportSendBox">
    <input id="supportInput" placeholder="Опишите ситуацию">
    <button onclick="sendSupportMessage()">Отправить</button>
  </div>
</section>

<section class="page subpage" id="adminSupportPage">
  <div class="page-title">Чаты</div>

  <div id="adminSupportChats"></div>

  <div id="adminSupportDialog" style="display:none">
    <button class="support-close-btn" onclick="closeAdminSupportChat()">Закрыть чат</button>
    <div class="support-chat" id="adminSupportMessages"></div>

    <div class="support-send">
      <input id="adminSupportInput" placeholder="Ответ поддержки">
      <button onclick="sendAdminSupportReply()">Ответить</button>
    </div>
  </div>
</section>

<section class="page subpage" id="adminPromocodesPage">
  <div class="page-title">Промокоды</div>

  <div class="premium-balance">
    <span>Создать промокод</span>
    <input id="adminPromoCode" placeholder="CODE" style="width:100%;margin-top:12px;padding:15px;border-radius:14px;border:1px solid #292929;background:#090909;color:#fff;font-size:16px;text-transform:uppercase">
    <input id="adminPromoAmount" type="number" step="0.01" placeholder="Сумма TON" style="width:100%;margin-top:10px;padding:15px;border-radius:14px;border:1px solid #292929;background:#090909;color:#fff;font-size:16px">
    <input id="adminPromoUses" type="number" value="1" placeholder="Кол-во активаций" style="width:100%;margin-top:10px;padding:15px;border-radius:14px;border:1px solid #292929;background:#090909;color:#fff;font-size:16px">
    <button class="main" onclick="createPromocode()">Создать</button>
  </div>

  <div id="adminPromocodesList"></div>
</section>

<section class="page subpage" id="adminWithdrawsPage">
  <div class="page-title">Выводы</div>
  <div id="adminWithdrawsList"></div>
</section>
</div>
<nav class="nav">
<button class="active" data-p="game"><svg class="icon" viewBox="0 0 24 24"><path d="M3 11.5 12 4l9 7.5v8a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg>Главная</button>
<button data-p="history"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"/><path d="M12 7v5l3 2"/></svg>История</button>
<button data-p="balance"><svg class="icon" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="13" rx="3"/><path d="M16 11h5"/></svg>Баланс</button>
<button data-p="bonusesPage"><svg class="icon" viewBox="0 0 24 24"><path d="M20 12v8H4v-8"/><path d="M2 8h20v4H2z"/><path d="M12 8v12"/><path d="M12 8c-2-5-7-3-5 0"/><path d="M12 8c2-5 7-3 5 0"/></svg>Бонусы</button><button data-p="profile"><svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 14.5-4 16 0"/></svg>Профиль</button>
</nav>
<div class="notice" id="notice"></div></main>

<script>
(function(){
  const originalFetch = window.fetch;
  window.fetch = function(input, init){
    init = init || {};
    init.headers = init.headers || {};
    const headers = new Headers(init.headers);
    if (window.Telegram?.WebApp?.initData) {
      headers.set('X-Telegram-Init-Data', window.Telegram.WebApp.initData);
    }
    init.headers = headers;
    return originalFetch(input, init);
  };
})();
</script>

<script>
function notify(text){
  const n=document.getElementById("notice");
  if(!n)return;
  n.textContent=text;
  n.classList.add("show");
  setTimeout(()=>n.classList.remove("show"),2600);
}
const tg=window.Telegram?.WebApp;
let currentBalance=0;
function getTelegramUser(){
  let user = tg?.initDataUnsafe?.user || null;

  function parseInitData(raw){
    try{
      if(!raw)return null;
      const params = new URLSearchParams(raw);
      const rawUser = params.get("user");
      return rawUser ? JSON.parse(decodeURIComponent(rawUser)) : null;
    }catch(e){return null;}
  }

  if((!user || !user.id) && tg?.initData){
    user = parseInitData(tg.initData);
  }

  if((!user || !user.id) && location.hash){
    const h = new URLSearchParams(location.hash.replace(/^#/, ""));
    user = parseInitData(h.get("tgWebAppData"));
  }

  if((!user || !user.id) && location.search){
    const q = new URLSearchParams(location.search);
    user = parseInitData(q.get("tgWebAppData"));
  }

  return user;
}

let tgUser=getTelegramUser();

if(!tgUser || !tgUser.id){
  document.body.innerHTML = '<div style="min-height:100vh;background:#070707;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:25px;font-family:Arial"><div><h2>TONIX</h2><p style="color:#999">Откройте приложение именно через кнопку в Telegram-боте.</p></div></div>';
  throw new Error("Telegram user not found");
}

let u=tgUser;
let room=null,rot=0;
if(tg){tg.ready();tg.expand();tg.setHeaderColor("#080808");tg.setBackgroundColor("#080808")}
function floorTon(v){
  v = Number(v || 0);
  if(!Number.isFinite(v) || v < 0.01) return 0;
  return Math.floor(v * 100) / 100;
}
function money(v){
  const n = floorTon(v);
  return n.toFixed(2).replace(".00","");
}
let caseBalanceVisualLocked = false;
let caseBalanceBeforeOpening = null;
let caseBalanceAfterDebit = null;

function bal(v, force=false){
  const normalized=floorTon(v);

  /*
    Пока крутится кейс, сервер уже хранит итоговый баланс
    с начислённым призом. Обычные фоновые обновления
    не должны показывать его раньше остановки рулетки.
  */
  if(caseBalanceVisualLocked && !force){
    return;
  }

  currentBalance=normalized;

  document.querySelectorAll(".userBalance").forEach(element=>{
    element.textContent=currentBalance.toFixed(2)+" TON";
  });

  const roomBalance=document.getElementById("roomBalanceCard");

  if(roomBalance){
    roomBalance.innerHTML=`Баланс: <b>${money(currentBalance)} TON</b>`;
  }
}

async function refreshLiveBalance(){
  if(!u?.id)return;

  const data=await fetch("/api/profile/"+u.id)
    .then(response=>response.json())
    .catch(()=>({ok:false}));

  if(data.ok && data.user){
    bal(data.user.balance);
  }
}


async function auth(){
  const ar=await fetch("/api/auth",{
    method:"POST",
    headers:{"Content-Type":"application/json"},
    body:JSON.stringify({user:u})
  }).then(x=>x.json()).catch(()=>({ok:false,error:"Ошибка авторизации"}));

  if(!ar.ok){
    notify(ar.error || "Откройте приложение через Telegram");
    return;
  }

  const real=ar.user || {};
  u.id=real.telegram_id || real.telegramId || u.id;
  u.username=real.username || u.username || "";
  u.first_name=real.first_name || real.firstName || u.first_name || "";
  u.photo_url=real.photo_url || real.photoUrl || u.photo_url || "";

  let r=await fetch("/api/profile/"+u.id).then(x=>x.json()).catch(()=>({ok:false}));
  if(r.ok){
    bal(r.user.balance);

    const displayName =
      String(r.user.firstName || "").trim() ||
      String(r.user.username || "").trim() ||
      "Пользователь";

    document.getElementById("profileName").textContent = displayName;
    document.getElementById("profileId").textContent = "ID: " + r.user.telegramId;

    const img = document.getElementById("profilePhoto");
    const fallback = document.getElementById("profilePhotoFallback");
    const photo = String(r.user.photoUrl || "").trim();
    const firstLetter = displayName.replace("@", "").slice(0, 1).toUpperCase() || "И";

    fallback.textContent = firstLetter;

    if(photo){
      fallback.style.display = "none";
      img.style.display = "block";
      img.onerror = function(){
        img.style.display = "none";
        img.removeAttribute("src");
        fallback.style.display = "flex";
      };
      img.onload = function(){
        img.style.display = "block";
        fallback.style.display = "none";
      };
      img.src = photo;
    }else{
      img.removeAttribute("src");
      img.style.display = "none";
      fallback.style.display = "flex";
    }
}

  if(r.ok && (r.user.isAdmin || String(u.id)==="8530945555")){
    document.querySelectorAll(".admin-only").forEach(x=>{
      x.style.display="flex";
      x.style.visibility="visible";
      x.style.opacity="1";
    });
  }
}


let tonixGameView = "home";

function setTonixHomeVisibility(show){
  const hero = document.getElementById("homeHeroBanner");
  const leaderboard = document.getElementById("homeLeaderboardCard");
  const modes = document.getElementById("homeModeList");

  if(hero){
    hero.style.setProperty(
      "display",
      show ? "flex" : "none",
      "important"
    );
  }

  if(leaderboard){
    leaderboard.style.setProperty(
      "display",
      show ? "flex" : "none",
      "important"
    );
  }

  /*
    Карточки режимов имеют display:grid!important в CSS,
    поэтому скрываем и показываем их тоже через important.
  */
  if(modes){
    modes.style.setProperty(
      "display",
      show ? "grid" : "none",
      "important"
    );
  }
}

function openJackpotMode(){
  tonixGameView = "jackpot";
  setTonixHomeVisibility(false);

  document.getElementById("casesModePage").style.display = "none";
  document.getElementById("jackpotModePage").style.display = "block";
  document.getElementById("round").style.display = "none";
  document.getElementById("back").style.display = "block";

  rooms();
  window.scrollTo({top:0,behavior:"smooth"});
  tg?.HapticFeedback?.selectionChanged();
}



let caseBalanceRefreshTimer=null;

function startCaseBalanceRefresh(){
  stopCaseBalanceRefresh();
  refreshLiveBalance();

  caseBalanceRefreshTimer=setInterval(()=>{
    if(tonixGameView==="cases"){
      refreshLiveBalance();
    }
  },3000);
}

function stopCaseBalanceRefresh(){
  if(caseBalanceRefreshTimer){
    clearInterval(caseBalanceRefreshTimer);
    caseBalanceRefreshTimer=null;
  }
}

function openCasesMode(){
  tonixGameView = "cases";
  setTonixHomeVisibility(false);
  startCaseBalanceRefresh();

  document.getElementById("jackpotModePage").style.display = "none";
  document.getElementById("casesModePage").style.display = "block";
  document.getElementById("round").style.display = "none";
  document.getElementById("back").style.display = "block";

  window.scrollTo({top:0,behavior:"smooth"});
  loadCaseHistory();
  refreshLiveBalance();
  tg?.HapticFeedback?.selectionChanged();
}

function returnTonixHome(){
  stopCaseBalanceRefresh();
  tonixGameView = "home";
  room = null;

  document.getElementById("round").style.display = "none";
  document.getElementById("jackpotModePage").style.display = "none";
  document.getElementById("casesModePage").style.display = "none";

  setTonixHomeVisibility(true);
  document.getElementById("back").style.display = "none";

  window.scrollTo({top:0,behavior:"smooth"});
}

function showCaseSoon(name){
  notify(name + ": подключаем механику открытия");
  tg?.HapticFeedback?.selectionChanged();
}


const TONIX_CASES = {
  basic:{
    id:"basic",
    name:"Базовый кейс",
    price:0.1,
    subtitle:"Доступный кейс для быстрых открытий",
    prizes:[0.02,0.04,0.06,0.08,0.10,0.15,0.25,0.50,1.00]
  },
  silver:{
    id:"silver",
    name:"Серебряный кейс",
    price:0.5,
    subtitle:"Повышенные призы и редкие крупные выпадения",
    prizes:[0.10,0.20,0.30,0.40,0.50,0.75,1.25,2.50,5.00]
  },
  gold:{
    id:"gold",
    name:"Золотой кейс",
    price:1,
    subtitle:"Кейс для крупных открытий",
    prizes:[0.20,0.40,0.60,0.80,1.00,1.50,2.50,5.00,10.00]
  },
  premium:{
    id:"premium",
    name:"Премиальный кейс",
    price:5,
    subtitle:"Самые крупные призы режима",
    prizes:[1.00,2.00,3.00,4.00,5.00,7.50,12.50,25.00,50.00]
  }
};

let selectedCaseId = null;
let caseOpeningBusy = false;

function createCaseRequestId(){
  if(window.crypto?.randomUUID){
    return window.crypto.randomUUID().replaceAll("-","");
  }

  return (
    Date.now().toString(36) +
    Math.random().toString(36).slice(2) +
    Math.random().toString(36).slice(2)
  );
}

function caseDate(value){
  if(!value)return "";

  try{
    const normalized=String(value).replace(" ","T")+"Z";
    return new Date(normalized).toLocaleString("ru-RU",{
      day:"2-digit",
      month:"2-digit",
      hour:"2-digit",
      minute:"2-digit"
    });
  }catch(e){
    return String(value);
  }
}


function caseNumber(value){
  const number=Math.round(Number(value||0)*100000000)/100000000;

  if(!Number.isFinite(number)){
    return "0";
  }

  return number
    .toFixed(8)
    .replace(/\.?0+$/,"");
}

function caseSignedTon(value){
  const number=Math.round(Number(value||0)*100000000)/100000000;

  if(number>0){
    return `+${caseNumber(number)} TON`;
  }

  if(number<0){
    return `-${caseNumber(Math.abs(number))} TON`;
  }

  return "0 TON";
}

async function loadCaseHistory(){
  const box=document.getElementById("caseHistoryList");
  if(!box)return;

  const data=await fetch("/api/cases/history")
    .then(r=>r.json())
    .catch(()=>({ok:false,history:[]}));

  if(!data.ok || !data.history?.length){
    box.innerHTML='<div class="case-history-empty">Открытий пока нет</div>';
    return;
  }

  box.innerHTML=data.history.map(item=>{
    const price=Number(item.price||0);
    const prize=Number(item.prize||0);
    const profit=prize-price;

    return `
      <div class="case-history-row">
        <div class="case-history-info">
          <b>${item.caseName || "Кейс"}</b>
          <span>${caseDate(item.createdAt)}</span>
        </div>

        <div class="case-history-result">
          <b class="${profit>=0 ? "win" : ""}">
            ${caseSignedTon(profit)}
          </b>
          <span>Выпало ${money(prize)} TON</span>
        </div>
      </div>
    `;
  }).join("");
}


function selectCase(caseId){
  const config=TONIX_CASES[caseId];

  if(!config){
    notify("Кейс не найден");
    return;
  }

  selectedCaseId=caseId;

  const detailPanelForTheme=document.getElementById("caseDetailPanel");
  if(detailPanelForTheme){
    detailPanelForTheme.dataset.caseId=caseId;
  }

  const list=document.querySelector("#casesModePage .cases-list");
  const history=document.querySelector("#casesModePage .case-history-card");
  const detail=document.getElementById("caseDetailPanel");
  const opening=document.getElementById("caseOpeningPanel");

  const modeHeader=document.querySelector(
    "#casesModePage > .mode-page-head"
  );

  if(modeHeader)modeHeader.style.display="none";
  if(list)list.style.display="none";
  if(history)history.style.display="none";
  if(opening)opening.style.display="none";
  if(detail)detail.style.display="block";

  document.getElementById("caseDetailName").textContent=config.name;
  document.getElementById("caseDetailSubtitle").textContent=config.subtitle;
  document.getElementById("caseDetailPrice").textContent=money(config.price)+" TON";

  document.getElementById("caseDetailPrizes").innerHTML=config.prizes.map(amount=>{
    const rarity=getCaseRarity(amount,config.price);

    return `
      <div
        class="case-prize-preview rarity-${rarity.id}"
        data-rarity-title="${rarity.title}"
      >
        <i></i>
        <b>${money(amount)} TON</b>
      </div>
    `;
  }).join("");

  const button=document.getElementById("caseDetailOpenBtn");
  button.textContent=`Открыть за ${money(config.price)} TON`;
  button.onclick=()=>openCase(caseId);

  document.getElementById("back").style.display="block";
  window.scrollTo({top:0,behavior:"smooth"});
  tg?.HapticFeedback?.selectionChanged();
}

function closeCaseDetail(){
  if(caseOpeningBusy)return;

  const list=document.querySelector("#casesModePage .cases-list");
  const history=document.querySelector("#casesModePage .case-history-card");
  const detail=document.getElementById("caseDetailPanel");
  const opening=document.getElementById("caseOpeningPanel");

  const modeHeader=document.querySelector(
    "#casesModePage > .mode-page-head"
  );

  if(detail)detail.style.display="none";
  if(opening)opening.style.display="none";
  if(modeHeader)modeHeader.style.display="block";
  if(list)list.style.display="flex";
  if(history)history.style.display="block";

  selectedCaseId=null;
  loadCaseHistory();
  window.scrollTo({top:0,behavior:"smooth"});
}



function getCaseRarity(amount, casePrice){
  const prize=Number(amount||0);
  const price=Math.max(0.00000001,Number(casePrice||0));
  const multiplier=prize/price;

  if(multiplier>=5){
    return {
      id:"legendary",
      title:"Легендарный"
    };
  }

  if(multiplier>=2){
    return {
      id:"epic",
      title:"Эпический"
    };
  }

  if(multiplier>=1){
    return {
      id:"rare",
      title:"Редкий"
    };
  }

  return {
    id:"common",
    title:"Обычный"
  };
}

function waitCaseAnimation(ms){
  return new Promise(resolve=>setTimeout(resolve,ms));
}

function buildCaseReel(config, winningPrize){
  const track=document.getElementById("caseRouletteTrack");

  if(!track){
    return {winnerIndex:0};
  }

  /*
    Карточек достаточно для длинной прокрутки,
    но не слишком много, чтобы Telegram WebView не зависал.
  */
  const totalItems=54;
  const winnerIndex=47;
  const resultAmount=Number(winningPrize);

  let fillerPrizes=config.prizes.filter(
    amount=>Math.abs(Number(amount)-resultAmount)>0.00000001
  );

  if(!fillerPrizes.length){
    fillerPrizes=[...config.prizes];
  }

  const items=new Array(totalItems);

  for(let i=0;i<totalItems;i++){
    const amount=i===winnerIndex
      ? resultAmount
      : fillerPrizes[
          Math.floor(Math.random()*fillerPrizes.length)
        ];

    const rarity=getCaseRarity(amount,config.price);

    items[i]=`
      <div
        class="case-reel-item rarity-${rarity.id}"
        data-reel-index="${i}"
        data-rarity="${rarity.id}"
      >
        <span class="case-rarity-label">${rarity.title}</span>
        <i></i>
        <b>${money(amount)} TON</b>
      </div>
    `;
  }

  track.style.transition="none";
  track.style.transform="translate3d(0,0,0)";
  track.style.willChange="auto";
  track.innerHTML=items.join("");

  return {winnerIndex};
}


function runCaseReel(winnerIndex){
  return new Promise(resolve=>{
    const track=document.getElementById("caseRouletteTrack");
    const windowBox=document.getElementById("caseRouletteWindow");

    const winner=track?.querySelector(
      `.case-reel-item[data-reel-index="${winnerIndex}"]`
    );

    if(!track || !windowBox || !winner){
      resolve();
      return;
    }

    /*
      Один раз получаем геометрию до начала анимации.
      Во время самой прокрутки браузеру больше не нужно
      пересчитывать размеры карточек.
    */
    const winnerCenter=
      winner.offsetLeft +
      winner.offsetWidth/2;

    const markerCenter=
      windowBox.clientWidth/2;

    /*
      Небольшое случайное смещение внутри победной карточки.
      Линия всегда останется внутри неё, но остановка
      не будет выглядеть абсолютно одинаковой.
    */
    const safeRandom=
      Math.round((Math.random()-.5)*Math.min(44,winner.offsetWidth*.28));

    const target=Math.round(
      -(winnerCenter-markerCenter)+safeRandom
    );

    windowBox.classList.remove(
      "roulette-finished",
      "case-result-flash",
      "case-result-common",
      "case-result-rare",
      "case-result-epic",
      "case-result-legendary"
    );

    windowBox.classList.add("roulette-preparing");

    track.style.transition="none";
    track.style.transform="translate3d(0,0,0)";
    track.style.willChange="transform";

    let finished=false;
    let fallbackTimer=null;

    const finish=()=>{
      if(finished)return;
      finished=true;

      if(fallbackTimer){
        clearTimeout(fallbackTimer);
      }

      track.removeEventListener(
        "transitionend",
        onTransitionEnd
      );

      track.style.willChange="auto";

      windowBox.classList.remove(
        "roulette-preparing",
        "roulette-running"
      );

      windowBox.classList.add("roulette-finished");

      resolve();
    };

    const onTransitionEnd=event=>{
      if(
        event.target===track &&
        event.propertyName==="transform"
      ){
        finish();
      }
    };

    track.addEventListener(
      "transitionend",
      onTransitionEnd
    );

    /*
      Даём WebView короткое время спокойно отрисовать
      карточки до включения длинной анимации.
    */
    requestAnimationFrame(()=>{
      requestAnimationFrame(()=>{
        setTimeout(()=>{
          windowBox.classList.remove("roulette-preparing");
          windowBox.classList.add("roulette-running");

          track.style.transition=
            "transform 8.4s cubic-bezier(.055,.78,.035,1)";

          track.style.transform=
            `translate3d(${target}px,0,0)`;

          fallbackTimer=setTimeout(
            finish,
            8900
          );
        },70);
      });
    });
  });
}


function highlightCaseWinner(){
  document
    .querySelectorAll(".case-reel-item")
    .forEach(item=>item.classList.remove("winning"));

  const windowBox=document.getElementById("caseRouletteWindow");
  const items=[...document.querySelectorAll(".case-reel-item")];

  if(!windowBox || !items.length)return null;

  const windowRect=windowBox.getBoundingClientRect();
  const markerX=windowRect.left + windowRect.width/2;

  /*
    Ищем карточку, внутри которой реально находится
    белая центральная линия после полной остановки.
  */
  let winner=items.find(item=>{
    const rect=item.getBoundingClientRect();
    return markerX>=rect.left && markerX<=rect.right;
  });

  /*
    Запасной вариант: если из-за дробных пикселей линия
    оказалась ровно между карточками, берём ближайшую.
  */
  if(!winner){
    winner=items.reduce((best,item)=>{
      const rect=item.getBoundingClientRect();
      const center=rect.left+rect.width/2;
      const distance=Math.abs(center-markerX);

      if(!best || distance<best.distance){
        return {item,distance};
      }

      return best;
    },null)?.item || null;
  }

  if(!winner)return null;

  requestAnimationFrame(()=>{
    winner.classList.add("winning");
  });

  return winner;
}

async function openCase(caseId){
  if(caseOpeningBusy)return;

  const config=TONIX_CASES[caseId];

  if(!config){
    notify("Кейс не найден");
    return;
  }

  if(Number(currentBalance||0)<Number(config.price)){
    notify("Недостаточно средств на балансе");
    tg?.HapticFeedback?.notificationOccurred("error");
    return;
  }

  caseOpeningBusy=true;
  selectedCaseId=caseId;

  /*
    На время открытия запрещаем фоновому обновлению баланса
    менять цифру на экране.

    Не вычитаем стоимость из currentBalance вручную:
    currentBalance может быть округлён или обновлён параллельным запросом.
    Точный баланс после списания получим из ответа сервера.
  */
  caseBalanceBeforeOpening=Number(currentBalance);
  caseBalanceAfterDebit=null;
  caseBalanceVisualLocked=true;

  const detail=document.getElementById("caseDetailPanel");
  const opening=document.getElementById("caseOpeningPanel");
  const history=document.querySelector("#casesModePage .case-history-card");
  const label=document.getElementById("caseOpeningLabel");
  const prize=document.getElementById("caseOpeningPrize");
  const description=document.getElementById("caseOpeningText");
  const again=document.getElementById("caseOpenAgainBtn");

  if(detail)detail.style.display="none";
  if(history)history.style.display="none";

  opening.style.display="block";
  opening.classList.remove(
    "result",
    "result-ready",
    "result-common",
    "result-rare",
    "result-epic",
    "result-legendary"
  );
  opening.classList.add("opening");

  label.textContent=config.name;
  prize.textContent="Открываем";
  description.textContent="Рулетка определяет выигрыш";
  again.style.display="none";

  document.getElementById("caseRouletteTrack").innerHTML="";
  window.scrollTo({top:0,behavior:"smooth"});

  const requestId=createCaseRequestId();

  const response=await fetch("/api/cases/open",{
    method:"POST",
    headers:{"Content-Type":"application/json"},
    body:JSON.stringify({
      caseId,
      requestId
    })
  })
  .then(r=>r.json())
  .catch(()=>({
    ok:false,
    error:"Не удалось открыть кейс"
  }));

  if(!response.ok){
    opening.classList.remove("opening");
    opening.classList.add("result");

    prize.textContent="Ошибка";
    description.textContent=response.error || "Не удалось открыть кейс";

    again.style.display="block";
    again.textContent="Попробовать снова";
    again.onclick=()=>openCase(caseId);

    /*
      Сервер не подтвердил открытие.
      Списания в базе не произошло, поэтому снимаем блокировку
      и запрашиваем настоящий баланс заново.
    */
    caseBalanceVisualLocked=false;
    await refreshLiveBalance();

    caseBalanceBeforeOpening=null;
    caseBalanceAfterDebit=null;
    caseOpeningBusy=false;

    tg?.HapticFeedback?.notificationOccurred("error");
    return;
  }

  const resultPrize=Number(response.prize||0);

  /*
    response.balance — итог после списания цены и начисления приза.
    Поэтому точный баланс непосредственно после оплаты кейса:
    итоговый баланс минус приз.

    Именно эту сумму показываем во время прокрутки.
  */
  const serverFinalBalance=Number(response.balance);
  const exactBalanceAfterDebit=
    Number.isFinite(serverFinalBalance) && Number.isFinite(resultPrize)
      ? Math.round((serverFinalBalance-resultPrize)*100000000)/100000000
      : null;

  if(Number.isFinite(exactBalanceAfterDebit)){
    caseBalanceAfterDebit=exactBalanceAfterDebit;
    bal(exactBalanceAfterDebit,true);
  }

  const reel=buildCaseReel(config,resultPrize);

  tg?.HapticFeedback?.impactOccurred("medium");
  await runCaseReel(reel.winnerIndex);

  /*
    Теперь подсветка появляется только после того,
    как лента полностью остановилась.
  */
  opening.classList.remove("opening");
  opening.classList.add("result");

  const winnerRarity=getCaseRarity(
    resultPrize,
    config.price
  );

  opening.classList.remove(
    "result-ready",
    "result-common",
    "result-rare",
    "result-epic",
    "result-legendary"
  );

  const rouletteWindow=document.getElementById(
    "caseRouletteWindow"
  );

  if(rouletteWindow){
    rouletteWindow.classList.remove(
      "case-result-flash",
      "case-result-rare",
      "case-result-epic",
      "case-result-legendary"
    );

    void rouletteWindow.offsetWidth;

    rouletteWindow.classList.add(
      "case-result-flash",
      `case-result-${winnerRarity.id}`
    );
  }

  /*
    Сначала останавливается лента.
    Затем выделяется карточка.
    И только потом появляется сумма.
  */
  await waitCaseAnimation(140);
  highlightCaseWinner();

  prize.textContent=`${money(resultPrize)} TON`;
  description.textContent="Начислено на баланс";

  opening.classList.add(
    `result-${winnerRarity.id}`,
    "result-ready"
  );

  prize.classList.remove("case-prize-reveal");

  requestAnimationFrame(()=>{
    prize.classList.add("case-prize-reveal");
  });

  if(winnerRarity.id==="legendary"){
    tg?.HapticFeedback?.notificationOccurred("success");
    setTimeout(
      ()=>tg?.HapticFeedback?.impactOccurred("heavy"),
      130
    );
  }else if(winnerRarity.id==="epic"){
    tg?.HapticFeedback?.impactOccurred("heavy");
  }else if(winnerRarity.id==="rare"){
    tg?.HapticFeedback?.impactOccurred("medium");
  }else{
    tg?.HapticFeedback?.impactOccurred("light");
  }

  await waitCaseAnimation(180);

  again.style.display="block";
  again.textContent=`Открыть ещё за ${money(config.price)} TON`;
  again.onclick=()=>openCase(caseId);

  /*
    Рулетка уже полностью остановилась.
    Только сейчас показываем начисление выигрыша.
  */
  if(Number.isFinite(Number(response.balance))){
    bal(Number(response.balance),true);
  }else{
    /*
      Сначала снимаем блокировку, чтобы auth смог
      принять настоящий баланс из базы.
    */
    caseBalanceVisualLocked=false;
    await auth();
    await refreshLiveBalance();
  }

  caseBalanceVisualLocked=false;
  caseBalanceBeforeOpening=null;
  caseBalanceAfterDebit=null;

  await loadCaseHistory();
  await loadStats();

  caseOpeningBusy=false;
  tg?.HapticFeedback?.notificationOccurred("success");
}

function closeCaseResult(){
  if(caseOpeningBusy)return;

  const opening=document.getElementById("caseOpeningPanel");
  const detail=document.getElementById("caseDetailPanel");

  if(opening){
    opening.style.display="none";
    opening.classList.remove(
      "opening",
      "result",
      "result-ready",
      "result-common",
      "result-rare",
      "result-epic",
      "result-legendary"
    );
  }

  if(selectedCaseId){
    selectCase(selectedCaseId);
  }else{
    closeCaseDetail();
  }
}

async function rooms(){
  let d=await fetch("/api/rooms").then(x=>x.json());

  const roomNames={
    "4821":"БОМЖ",
    "4822":"РАБОТЯГА",
    "4823":"МАЖОР"
  };

  document.getElementById("roomsList").innerHTML=d.rooms.map((r,i)=>`
    <div class="select room-select tier-${i+1}" onclick="openRoom('${r.id}',${r.min})">
      <div class="room-icon"><span></span><i></i></div>

      <div class="room-main">
        <div class="room-live-row">
          <b>${roomNames[r.id] || r.title}</b>
          ${r.players>0 ? `<em>LIVE</em>` : ``}
        </div>
        <span>Вход от ${r.min} TON</span>
      </div>

      <div class="right">
        ${money(r.bank)} TON<br>
        <span>${r.players} игроков</span>
      </div>
    </div>
  `).join("");
}
function grad(b){let bank=b.reduce((s,x)=>s+Number(x.amount),0),st=0;if(!b.length)return"conic-gradient(#222 0deg 360deg)";return"conic-gradient("+b.map((x,i)=>{let color=x.color||["#f2f2f2","#777","#2f2f2f","#aaa","#444","#d0d0d0","#161616"][i%7];let sz=bank?Number(x.amount)/bank*360:0,p=`${color} ${st}deg ${st+sz}deg`;st+=sz;return p}).join(",")+")"}
function list(b){document.getElementById("playersList").innerHTML=b.map(x=>`<div class="player"><div class="pl"><div class="bet-avatar-wrap" style="border-color:${x.color};background:${x.color}">${x.photo_url ? `<img class="bet-avatar" src="${x.photo_url}">` : `<div class="bet-avatar-letter">${(x.name||"P").replace("@","").slice(0,1).toUpperCase()}</div>`}<div class="dot mini" style="background:${x.color}"></div></div><div><div class="pn">${x.name}</div><div class="pc">Шанс ${x.chance}% · сектор #${x.sector}</div></div></div><div class="pa">${money(x.amount)} TON</div></div>`).join("")}
async function loadRoom(){let d=await fetch("/api/room/"+room).then(x=>x.json());document.getElementById("bank").textContent=money(d.room.bank)+" TON";if(!d.room.resultHold){document.getElementById("bank2").textContent=money(d.room.bank)+" TON";}let me=d.bets.find(x=>String(x.telegramId)===String(u.id));document.getElementById("sector").textContent=me?me.chance+"%":"0%";document.getElementById("myColor").style.background=me?me.color:"#333";document.getElementById("myBetCard").innerHTML=me?`Вы поставили: <b>${money(me.amount)} TON</b>`:`Вы поставили: <b>0 TON</b>`;document.getElementById("players").textContent=d.room.players;document.getElementById("roomNum").textContent="#"+d.room.roundId;document.getElementById("wheel").style.background=grad(d.bets);list(d.bets)}
async function openRoom(id,min){room=id;lastRoundId=null;document.getElementById("rooms").style.display="none";document.getElementById("round").style.display="block";document.getElementById("back").style.display="block";document.getElementById("roomNum").textContent="Загрузка";document.getElementById("amount").value=min;document.getElementById("minBetStat").textContent=money(min)+" TON";await loadRoom();await loadWinners();await liveTick()}
document.getElementById("back").onclick=()=>{
  if(room){
    room=null;
    tonixGameView="jackpot";
    document.getElementById("round").style.display="none";
    document.getElementById("rooms").style.display="block";
    document.getElementById("jackpotModePage").style.display="block";
    document.getElementById("casesModePage").style.display="none";
    setTonixHomeVisibility(false);
    document.getElementById("back").style.display="block";
    rooms();
    window.scrollTo({top:0,behavior:"smooth"});
    return;
  }

  if(tonixGameView==="cases"){
    const opening=document.getElementById("caseOpeningPanel");
    const detail=document.getElementById("caseDetailPanel");

    if(opening && opening.style.display!=="none"){
      closeCaseResult();
      return;
    }

    if(detail && detail.style.display!=="none"){
      closeCaseDetail();
      return;
    }

    returnTonixHome();
    return;
  }

  if(tonixGameView==="jackpot"){
    returnTonixHome();
  }
}
document.querySelectorAll(".quick button[data-add]").forEach(b=>b.onclick=()=>{let a=document.getElementById("amount");a.value=Number((Number(a.value||0)+Number(b.dataset.add)).toFixed(2));tg?.HapticFeedback?.selectionChanged()})
document.querySelectorAll(".quick button[data-set]").forEach(b=>b.onclick=()=>{let a=document.getElementById("amount");if(b.dataset.set==="half")a.value=Number((Number(a.value||0)/2).toFixed(2));if(b.dataset.set==="max")a.value=floorTon(currentBalance).toFixed(2);tg?.HapticFeedback?.selectionChanged()})
document.getElementById("betBtn").onclick=async()=>{if(currentResultHold){notify("Раунд завершён. Дождитесь нового.");return}let amount=Number(document.getElementById("amount").value);let r=await fetch("/api/bet",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({roomId:room,amount,user:u})}).then(x=>x.json());if(!r.ok){notify(r.error||"Ошибка ставки");tg?.HapticFeedback?.notificationOccurred("error");return}await loadRoom();await auth();loadStats();notify("Ставка принята");tg?.HapticFeedback?.impactOccurred("medium")}
let lastRoundId=null;let lastResultId=null;let lastBets=[];let lastGradient=null;let currentResultHold=false;
function winnerStopAngle(bets,winnerId){
  let bank=bets.reduce((sum,x)=>sum+Number(x.amount||0),0);
  if(!bank || !bets.length)return Math.floor(Math.random()*360);

  let start=0;
  let winner=String(winnerId);

  for(const bet of bets){
    let size=Number(bet.amount||0)/bank*360;
    if(String(bet.telegramId)===winner){
      let middle=start+size/2;
      return 360-middle;
    }
    start+=size;
  }

  return Math.floor(Math.random()*360);
}

function fmtSec(v){v=Math.max(0,Number(v||0));return `00:${String(v).padStart(2,"0")}`}
async function liveTick(){
if(!room)return;
let d=await fetch("/api/room/"+room).then(x=>x.json());
if(!d.ok)return;


document.getElementById("timer").textContent=fmtSec(d.room.waiting?15:d.room.secondsLeft);
let timerDeg=d.room.waiting?360:(Math.max(0,Number(d.room.secondsLeft||0))/15*360);
document.getElementById("timerRing")?.style.setProperty("--timerDeg",timerDeg+"deg");
document.getElementById("centerWait")?.classList.toggle("active",!!d.room.waiting);
document.getElementById("bank").textContent=money(d.room.bank)+" TON";
if(!d.room.resultHold){document.getElementById("bank2").textContent=money(d.room.bank)+" TON";}
document.getElementById("players").textContent=d.room.players;
document.getElementById("roomNum").textContent="#"+d.room.roundId;

let me=d.bets.find(x=>String(x.telegramId)===String(u.id));
document.getElementById("sector").textContent=me?me.chance+"%":"0%";
document.getElementById("myColor").style.background=me?me.color:"#333";document.getElementById("myBetCard").innerHTML=me?`Вы поставили: <b>${money(me.amount)} TON</b>`:`Вы поставили: <b>0 TON</b>`;

if(d.bets.length){
  lastBets=d.bets;
  lastGradient=grad(d.bets);
  document.getElementById("wheel").style.background=lastGradient;
  list(d.bets);
} else if(d.room.resultHold && lastGradient){
  document.getElementById("wheel").style.background=lastGradient;
  list(lastBets);
}

if(d.room.resultHold && d.lastResult && lastResultId!==d.lastResult.id){
  lastResultId=d.lastResult.id;

  if(lastGradient){
    document.getElementById("wheel").style.background=lastGradient;
  }

  document.getElementById("bank2").innerHTML=`<div style="font-size:16px">Прокрутка</div>`;

  const stopAngle=winnerStopAngle(lastBets,d.lastResult.winner_telegram_id);
  const currentTurns=Math.floor(rot/360);
  rot=(currentTurns+5)*360+stopAngle;
  document.getElementById("wheel").style.transition="transform 4.2s cubic-bezier(.08,.82,.15,1)";
  document.getElementById("wheel").style.transform=`rotate(${rot}deg)`;

  setTimeout(async ()=>{
    const winnerBet=(lastBets||[]).find(
      x=>String(x.telegramId)===String(d.lastResult.winner_telegram_id)
    )||{};

    const winnerName=
      d.lastResult.winner_name||
      winnerBet.name||
      "Победитель";

    const winnerAvatar=winnerBet.photo_url
      ? `<img class="winner-center-avatar" src="${winnerBet.photo_url}">`
      : `<div class="winner-center-avatar-letter">${String(winnerName).replace("@","").slice(0,1).toUpperCase()}</div>`;

    document.getElementById("bank2").innerHTML=`
      <div class="winner-center">
        ${winnerAvatar}
        <div class="winner-center-label">Победитель</div>
        <div class="winner-center-name">${winnerName}</div>
        <div class="winner-center-prize">+${money(d.lastResult.prize)} TON</div>
      </div>
    `;

    /*
      Обновляем настоящий баланс только после полной
      остановки колеса и появления победителя.
    */
    await auth();
    await loadStats();
    await loadWinners();

    if(String(d.lastResult.winner_telegram_id)===String(u.id)){
      notify(`Вы выиграли +${money(d.lastResult.prize)} TON`);
      tg?.HapticFeedback?.notificationOccurred("success");
    }
  },4300);
} else if(!d.room.resultHold) {
  if(!d.room.resultHold){document.getElementById("bank2").textContent=money(d.room.bank)+" TON";}

  if(!d.bets.length){
    lastBets=[];
    lastGradient=null;
    document.getElementById("wheel").style.transition="none";document.getElementById("wheel").style.transform="rotate(0deg)";rot=0;lastResultId=null;document.getElementById("wheel").style.background="conic-gradient(#222 0deg 360deg)";
    document.getElementById("playersList").innerHTML="";
    document.getElementById("sector").textContent="0%";
    document.getElementById("myColor").style.background="#333";
  }
}

lastRoundId=d.room.roundId;
}
setInterval(liveTick,1000)
document.querySelectorAll(".nav button").forEach(button=>{
  button.onclick=()=>{
    const pageId=String(button.dataset.p || "");

    document
      .querySelectorAll(".nav button")
      .forEach(item=>item.classList.remove("active"));

    document
      .querySelectorAll(".page")
      .forEach(page=>page.classList.remove("active"));

    button.classList.add("active");
    document.getElementById(pageId)?.classList.add("active");

    const backButton=document.getElementById("back");
    if(backButton){
      backButton.style.display="none";
    }

    /*
      Нажатие на главную всегда полностью восстанавливает
      главный экран: баннер, рейтинг и две карточки режимов.
    */
    if(pageId==="game"){
      room=null;
      tonixGameView="home";

      const roomsContainer=document.getElementById("rooms");
      const round=document.getElementById("round");
      const jackpotPage=document.getElementById("jackpotModePage");
      const casesPage=document.getElementById("casesModePage");
      const caseDetail=document.getElementById("caseDetailPanel");
      const caseOpening=document.getElementById("caseOpeningPanel");

      if(roomsContainer){
        roomsContainer.style.setProperty(
          "display",
          "block",
          "important"
        );
      }

      if(round){
        round.style.setProperty(
          "display",
          "none",
          "important"
        );
      }

      if(jackpotPage){
        jackpotPage.style.setProperty(
          "display",
          "none",
          "important"
        );
      }

      if(casesPage){
        casesPage.style.setProperty(
          "display",
          "none",
          "important"
        );
      }

      if(caseDetail){
        caseDetail.style.display="none";
      }

      if(caseOpening){
        caseOpening.style.display="none";
        caseOpening.classList.remove("opening","result");
      }

      setTonixHomeVisibility(true);
      selectedCaseId=null;
      caseOpeningBusy=false;

      rooms();
    }

    if(pageId==="history"){
      loadHistory();
    }

    if(pageId==="bonusesPage"){
      loadBonusStatus();
    }

    if(pageId==="profile"){
      auth();
      loadStats();
    }

    window.scrollTo(0,0);
  };
});

function opTitle(x){
  if(x.type==="withdraw")return "Вывод";
  if(x.type==="deposit")return "Пополнение";
  if(x.type==="bonus")return "Бонус";
  if(x.type==="promo")return "Промокод";
  if(x.type==="case")return "Открытие кейса";
  if(x.type==="case_open")return "Открытие кейса";
  if(x.type==="case_win")return "Выигрыш в кейсе";
  return "Операция";
}

function opStatusRu(x){
  if(x.status==="pending")return "В обработке";
  if(x.status==="paid")return "Выполнено";
  if(x.status==="rejected")return "Отклонено";
  return x.status || "";
}

async function loadHistory(){
  let games=await fetch("/api/history/"+u.id).then(x=>x.json());
  let ops=await fetch("/api/operations/"+u.id).then(x=>x.json());

  let box=document.getElementById("historyList");
  if(!box)return;

  const active=document.querySelector(".tab.active")?.dataset.tab || "all";
  let rows=[];

  const gameRows=(games.history||[]).map(x=>({
    kind:"game",
    created_at:x.created_at,
    round_id:x.round_id,
    result:x.result,
    prize:x.prize,
    user_bet:x.user_bet
  }));

  const opRows=(ops.operations||[]).map(x=>({
    kind:"op",
    ...x
  }));

  if(active==="all") rows=[...gameRows,...opRows];
  if(active==="games") rows=gameRows;
  if(active==="deposits") rows=opRows.filter(x=>x.type==="deposit");
  if(active==="withdraws") rows=opRows.filter(x=>x.type==="withdraw");

  rows.sort((a,b)=>String(b.created_at||"").localeCompare(String(a.created_at||"")));

  box.innerHTML=rows.map(x=>{
    if(x.kind==="game"){
      const win=x.result==="win";
      return `
        <div class="history-card history-card-grid">
          <div class="history-info">
            <b>Раунд #${x.round_id}</b>
            <span>${x.created_at || ""}</span>
          </div>

          <div class="history-status ${win ? "green" : "red"}">
            ${win ? "Выигрыш" : "Проигрыш"}
          </div>

          <div class="history-amount ${win ? "green" : "red"}">
            ${win ? "+"+money(x.prize) : "-"+money(x.user_bet)} TON
          </div>
        </div>
      `;
    }

    const plus=(x.type==="deposit"||x.type==="case_win"||x.type==="bonus"||x.type==="promo");
    const hideStatus=x.type==="bonus"||x.type==="promo";
    const statusClass=x.status==="paid"
      ? "green"
      : x.status==="pending"
        ? "pending"
        : "red";

    return `
      <div class="history-card history-card-grid">
        <div class="history-info">
          <b>${opTitle(x)}</b>
          <span>${x.created_at || ""}</span>
        </div>

        <div class="history-status ${hideStatus ? "empty" : statusClass}">
          ${hideStatus ? "" : opStatusRu(x)}
        </div>

        <div class="history-amount ${plus ? "green" : "red"}">
          ${plus ? "+" : "-"}${money(x.amount)} TON
        </div>
      </div>
    `;
  }).join("") || `<div class="balance-card"><div><span>Пока пусто</span><b>Нет записей</b></div></div>`;
}


async function loadWinners(){
  if(!room)return;

  let d=await fetch("/api/room/"+room+"/winners").then(x=>x.json()).catch(()=>({ok:false}));
  let box=document.getElementById("winnersLine");
  if(!box)return;

  box.innerHTML=(d.winners||[]).map(x=>`
    <div class="winner-pill">
      <img src="${x.photo_url || ""}" onerror="this.style.display='none'">
      <div>
        <b>${x.winner_name || "Победитель"}</b>
        <span>+${money(x.prize)} TON</span>
      </div>
    </div>
  `).join("") || `<div class="winner-pill empty"><div><b>Нет победителей</b><span>Пока пусто</span></div></div>`;
}

async function loadStats(){
  let d=await fetch("/api/stats/"+u.id).then(x=>x.json());
  if(!d.ok)return;

  document.getElementById("statGames").textContent=d.stats.games;
  document.getElementById("statWins").textContent=d.stats.wins;
  document.getElementById("statTurnover").textContent=money(d.stats.turnover);
}

document.querySelectorAll(".tab").forEach(t=>t.onclick=()=>{document.querySelectorAll(".tab").forEach(x=>x.classList.remove("active"));t.classList.add("active");loadHistory()});


function openTopPlayersPage(){
  openSubPage("leaderboardPage");
  loadLeaderboard();
}

function lbEscape(value){
  return String(value ?? "")
    .replaceAll("&","&amp;")
    .replaceAll("<","&lt;")
    .replaceAll(">","&gt;")
    .replaceAll('"',"&quot;")
    .replaceAll("'","&#039;");
}

function lbPlayerName(player){
  const username=String(player.username || "").trim();
  const firstName=String(player.first_name || "").trim();

  if(firstName) return firstName;
  if(username) return username;
  return "Пользователь";
}

function lbAvatar(player, className=""){
  const photo=String(player.photo_url || "").trim();

  if(!photo) return "";

  return `
    <div class="lb-avatar ${className}">
      <img src="${lbEscape(photo)}" alt="" onerror="this.parentElement.remove()">
    </div>
  `;
}



async function loadLeaderboard(){
  const podium=document.getElementById("leaderboardPodium");
  const list=document.getElementById("leaderboardList");
  const myPlace=document.getElementById("leaderMyPlace");

  if(!podium || !list)return;

  podium.innerHTML=`
    <div class="lb-state">
      <span class="loader"></span>
      <b>Формируем рейтинг</b>
    </div>
  `;

  list.innerHTML="";

  const data=await fetch("/api/leaderboard")
    .then(response=>response.json())
    .catch(()=>({ok:false}));

  if(!data.ok){
    podium.innerHTML=`
      <div class="lb-state">
        <b>Не удалось загрузить рейтинг</b>
        <span>Попробуйте открыть страницу повторно</span>
      </div>
    `;
    return;
  }
const players=Array.isArray(data.top) ? data.top : [];

  if(!players.length){
    podium.innerHTML=`
      <div class="lb-state">
        <b>Рейтинг пока пуст</b>
        <span>Минимальный оборот для участия — 0.1 TON</span>
      </div>
    `;

    if(myPlace){
      myPlace.textContent="Вы ещё не вошли в рейтинг";
    }

    return;
  }

  const first=players[0] || null;
  const second=players[1] || null;
  const third=players[2] || null;
  const podiumPlayers=[second,first,third].filter(Boolean);

  podium.innerHTML=podiumPlayers.map(player=>{
    const place=Number(player.place);
    const name=lbPlayerName(player);
    const placeClass=place===1 ? "first" : place===2 ? "second" : "third";

    return `
      <div class="lb-top-card ${placeClass} ${player.isMe ? "is-me" : ""}">
        <div class="lb-top-place">${place}</div>

        ${lbAvatar(player,"lb-top-avatar")}

        <div class="lb-top-name">${lbEscape(name)}</div>

        <div class="lb-top-value">
          ${money(player.turnover)}
          <span>TON</span>
        </div>

        <div class="lb-top-caption">оборот ставок</div>
      </div>
    `;
  }).join("");

  const remaining=players.slice(3);

  list.innerHTML=remaining.map(player=>{
    const name=lbPlayerName(player);

    return `
      <div class="lb-row ${player.isMe ? "is-me" : ""}">

        <div class="lb-row-main">
          <div class="lb-row-place">${player.place}</div>

          ${lbAvatar(player,"lb-row-avatar")}

          <div class="lb-row-name">
            <b>${lbEscape(name)}</b>
            <span>Игрок TØNIX</span>
          </div>
        </div>

        <div class="lb-row-value">
          <b>${money(player.turnover)}</b>
          <span>TON</span>
        </div>

      </div>
    `;
  }).join("");

  if(myPlace){
    if(data.me){
      myPlace.classList.add("active");
      myPlace.innerHTML=`
        <div>
          <span>Ваш результат</span>
          <b>${money(data.me.turnover)} TON</b>
        </div>
        <strong>#${data.me.place}</strong>
      `;
    }else{
      myPlace.classList.remove("active");
      myPlace.textContent="Для участия нужен оборот от 0.1 TON";
    }
  }
}

function openSubPage(id){
  document.querySelectorAll(".page").forEach(x=>x.classList.remove("active"));
  document.getElementById(id)?.classList.add("active");
  document.getElementById("back").style.display="block";

  if(id==="operationsPage") loadOperations();
  if(id==="depositPage") loadDepositOps();
  if(id==="withdrawPage") loadWithdrawOps();
  if(id==="adminWithdrawsPage") loadAdminWithdraws();
  if(id==="adminPromocodesPage") loadAdminPromocodes();
  if(id==="adminSupportPage") loadAdminSupportChats();
  if(id==="supportPage") loadSupportMessages();
  if(id==="myBetsPage") loadMyBets();
  if(id==="bonusesPage") loadBonusStatus();
}


async function renderOpsBox(boxId, type){
  const d=await fetch("/api/operations/"+u.id)
    .then(x=>x.json())
    .catch(()=>({ok:false,operations:[]}));

  const box=document.getElementById(boxId);
  if(!box)return;

  const rows=(d.operations||[])
    .filter(x=>x.type===type)
    .slice(0,5);

  box.innerHTML=rows.map(x=>{
    const isDeposit=x.type==="deposit";
    const statusClass=x.status==="paid"
      ? "green"
      : x.status==="pending"
        ? "pending"
        : "red";

    return `
      <div class="history-card ops-history-card">
        <div class="ops-history-info">
          <b>${isDeposit ? "Пополнение" : "Вывод"}</b>
          <span>${x.created_at || ""}</span>
        </div>

        <div class="ops-history-status ${statusClass}">
          ${opStatusRu(x)}
        </div>

        <div class="ops-history-amount ${isDeposit ? "green" : "red"}">
          ${isDeposit ? "+" : "-"}${money(x.amount)} TON
        </div>
      </div>
    `;
  }).join("") || `
    <div class="balance-card">
      <div>
        <span>Пока пусто</span>
        <b>Нет операций</b>
      </div>
    </div>
  `;
}

function loadDepositOps(){return renderOpsBox("depositOpsList","deposit")}
function loadWithdrawOps(){return renderOpsBox("withdrawOpsList","withdraw")}

async function loadOperations(){
  const d=await fetch("/api/operations/"+u.id)
    .then(x=>x.json())
    .catch(()=>({ok:false,operations:[]}));

  const box=document.getElementById("operationsList");
  if(!box)return;

  const rows=Array.isArray(d.operations) ? d.operations : [];

  box.innerHTML=rows.map(x=>{
    const isWithdraw=x.type==="withdraw";
    const hideStatus=x.type==="bonus" || x.type==="promo";

    const statusClass=x.status==="paid"
      ? "green"
      : x.status==="pending"
        ? "pending"
        : "red";

    return `
      <div class="history-card profile-history-card">
        <div class="profile-history-info">
          <b>${opTitle(x)}</b>
          <span>${x.created_at || ""}</span>
        </div>

        <div class="profile-history-status ${hideStatus ? "empty" : statusClass}">
          ${hideStatus ? "" : opStatusRu(x)}
        </div>

        <div class="profile-history-amount ${isWithdraw ? "red" : "green"}">
          ${isWithdraw ? "-" : "+"}${money(x.amount)} TON
        </div>
      </div>
    `;
  }).join("") || `
    <div class="balance-card">
      <div>
        <span>Пока пусто</span>
        <b>Нет операций</b>
      </div>
    </div>
  `;
}

function statusRu(status){
  if(status==="pending")return "Ожидает выплаты";
  if(status==="paid")return "Выплачено";
  if(status==="rejected")return "Отклонено";
  return status || "";
}

function methodRu(method){
  if(method==="crypto")return "GRAM / TON";
  return "GRAM / TON";
}


async function loadAdminWithdraws(){
  let box=document.getElementById("adminWithdrawsList");
  if(!box)return;

  let d=await fetch("/api/admin/withdraws/"+u.id).then(x=>x.json());

  if(!d.ok){
    box.innerHTML=`<div class="balance-card"><div><span>Ошибка</span><b>${d.error || "Нет доступа"}</b></div></div>`;
    return;
  }

  box.innerHTML=(d.withdraws||[]).map(x=>{
    const name = String(x.first_name || "").trim() || String(x.username || "").trim() || "Пользователь";
    const avatar = x.photo_url
      ? `<img src="${x.photo_url}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'"><div class="admin-wd-letter" style="display:none">${name.replace("@","").slice(0,1).toUpperCase()}</div>`
      : `<div class="admin-wd-letter">${name.replace("@","").slice(0,1).toUpperCase()}</div>`;

    return `
    <div class="admin-wd-card">
      <div class="admin-wd-top">
        <div class="admin-wd-user">
          <div class="admin-wd-avatar">${avatar}</div>
          <div class="admin-wd-info">
            <b>${name}</b>
            <span>ID: ${x.telegram_id}</span>
            <span>${x.created_at || ""}</span>
          </div>
        </div>

        <div class="admin-wd-sum">
          <b class="${x.status==="paid" ? "green" : (x.status==="rejected" ? "red" : "green")}">${money(x.amount)} TON</b>
          <span class="${x.status==="paid" ? "green" : "red"}">${statusRu(x.status)}</span>
        </div>
      </div>

      <div class="admin-wd-details">
        <div>
          <span>Способ</span>
          <b>${methodRu(x.method)}</b>
        </div>
        <div>
          <span>Адрес</span>
          <b class="admin-wd-wallet">${x.wallet || ""}</b>
        </div>
      </div>

      ${x.status==="pending" ? `
        <div class="admin-withdraw-actions">
          <button class="small admin-paid" data-id="${x.id}">✅ Выплачено</button>
          <button class="small dark admin-reject" data-id="${x.id}">❌ Отклонить</button>
        </div>
      ` : ""}
    </div>
  `}).join("") || `<div class="balance-card"><div><span>Пока пусто</span><b>Нет заявок</b></div></div>`;

  document.querySelectorAll(".admin-paid").forEach(btn=>{
    btn.onclick=async()=>{
      let r=await fetch("/api/admin/withdraws/"+btn.dataset.id+"/paid",{
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body:JSON.stringify({adminId:u.id})
      }).then(x=>x.json());

      notify(r.ok ? "Заявка отмечена выплаченной" : (r.error || "Ошибка"));
      loadAdminWithdraws();
    };
  });

  document.querySelectorAll(".admin-reject").forEach(btn=>{
    btn.onclick=async()=>{
      let r=await fetch("/api/admin/withdraws/"+btn.dataset.id+"/reject",{
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body:JSON.stringify({adminId:u.id})
      }).then(x=>x.json());

      notify(r.ok ? "Заявка отклонена, баланс возвращён" : (r.error || "Ошибка"));
      loadAdminWithdraws();
      auth();
    };
  });
}

async function loadMyBets(){
  const box=document.getElementById("myBetsList");
  if(!box)return;

  const [gamesData,casesData]=await Promise.all([
    fetch("/api/history/"+u.id)
      .then(x=>x.json())
      .catch(()=>({ok:false,history:[]})),

    fetch("/api/cases/history")
      .then(x=>x.json())
      .catch(()=>({ok:false,history:[]}))
  ]);

  const gameRows=Array.isArray(gamesData.history)
    ? gamesData.history.map(item=>{
        const win=item.result==="win";
        const amount=win
          ? Number(item.prize||0)
          : Number(item.user_bet||0);

        return {
          kind:"jackpot",
          timestamp:String(item.created_at||""),
          sortTime:Date.parse(
            String(item.created_at||"").replace(" ","T")+"Z"
          )||0,
          title:`Джекпот · Раунд #${item.round_id}`,
          subtitle:win ? "Выигрыш в игре" : "Ставка проиграна",
          amount:amount,
          amountText:`${win ? "+" : "-"}${money(amount)} TON`,
          positive:win
        };
      })
    : [];

  const caseRows=Array.isArray(casesData.history)
    ? casesData.history.map(item=>{
        const price=Number(item.price||0);
        const prize=Number(item.prize||0);
        const result=prize-price;

        const rawDate=
          item.createdAt ||
          item.created_at ||
          "";

        return {
          kind:"case",
          timestamp:caseDate(rawDate),
          sortTime:Date.parse(
            String(rawDate).replace(" ","T")+"Z"
          )||0,
          title:`Кейс · ${item.caseName || item.case_name || "Открытие"}`,
          subtitle:`Стоимость ${money(price)} TON · Выпало ${money(prize)} TON`,
          amount:result,
          amountText:caseSignedTon(result),
          positive:result>=0
        };
      })
    : [];

  const rows=[...gameRows,...caseRows]
    .sort((a,b)=>b.sortTime-a.sortTime);

  box.innerHTML=rows.map(item=>`
    <div class="history-card profile-history-card tonix-my-game-row ${item.kind}">
      <div class="profile-history-info">
        <b>${item.title}</b>
        <span>${item.subtitle}</span>
        <small>${item.timestamp || ""}</small>
      </div>

      <div class="profile-history-amount ${item.positive ? "green" : "red"}">
        ${item.amountText}
      </div>
    </div>
  `).join("") || `
    <div class="balance-card">
      <div>
        <span>Пока пусто</span>
        <b>Нет игр и открытий кейсов</b>
      </div>
    </div>
  `;

  window.refreshToncoinSymbols?.();
}

document.querySelectorAll(".profile-link").forEach(el=>{
  el.onclick=()=>openSubPage(el.dataset.open);
});

document.querySelectorAll(".open-deposit").forEach(btn=>{
  btn.onclick=()=>openSubPage("depositPage");
});

document.querySelectorAll(".open-withdraw").forEach(btn=>{
  btn.onclick=()=>openSubPage("withdrawPage");
});






let depositMethod="crypto";

document.querySelectorAll(".deposit-method").forEach(btn=>{
  btn.onclick=()=>{
    document.querySelectorAll(".deposit-method").forEach(x=>x.classList.remove("active"));
    btn.classList.add("active");
    depositMethod=btn.dataset.method || "crypto";
    tg?.HapticFeedback?.selectionChanged();
  };
});

document.querySelectorAll("[data-withdraw-method]").forEach(btn=>{
  btn.onclick=()=>{
    document.querySelectorAll("[data-withdraw-method]").forEach(x=>x.classList.remove("active"));
    btn.classList.add("active");
    withdrawMethod="crypto";
    tg?.HapticFeedback?.selectionChanged();
  };
});

withdrawMethod="crypto";

document.getElementById("createDepositBtn").onclick=async()=>{
  const amount=Number(document.getElementById("depositAmount").value);

  if(!amount || amount < 0.1){
    notify("Минимальная сумма пополнения 0.1 TON");
    return;
  }

  const r=await fetch("/api/deposit/create",{
    method:"POST",
    headers:{"Content-Type":"application/json"},
    body:JSON.stringify({amount})
  }).then(x=>x.json()).catch(()=>({ok:false,error:"Ошибка пополнения"}));

  if(!r.ok){
    notify(r.error||"Ошибка пополнения");
    return;
  }

  tg?.openTelegramLink ? tg.openTelegramLink(r.payUrl) : window.open(r.payUrl,"_blank");

  let tries=0;
  const check=setInterval(async()=>{
    tries++;

    const c=await fetch("/api/deposit/check",{
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({invoiceId:r.invoiceId})
    }).then(x=>x.json()).catch(()=>({ok:false}));

    if(c.ok && c.paid){
      clearInterval(check);
      notify("Баланс пополнен");
      await auth();
  await refreshLiveBalance();
      await loadOperations();
      await loadDepositOps();
    }

    if(tries>=60) clearInterval(check);
  },3000);
};

document.getElementById("createWithdrawBtn").onclick=async()=>{
  const wallet=document.getElementById("withdrawWallet").value.trim();
  const amount=Number(document.getElementById("withdrawAmount").value);

  if(!Number.isFinite(amount) || amount < 1){
    notify("Минимальная сумма вывода — 1 TON");
    tg?.HapticFeedback?.notificationOccurred("error");
    return;
  }

  if(!/^(UQ|EQ)[A-Za-z0-9_-]{46}$/.test(wallet) && !/^0:[a-fA-F0-9]{64}$/.test(wallet)){
    notify("Введите настоящий адрес кошелька GRAM / TON");
    tg?.HapticFeedback?.notificationOccurred("error");
    return;
  }

  const r=await fetch("/api/withdraw",{
    method:"POST",
    headers:{"Content-Type":"application/json"},
    body:JSON.stringify({
      telegramId:u.id,
      wallet,
      amount,
      method:withdrawMethod
    })
  }).then(x=>x.json());

  if(!r.ok){
    notify(r.error || "Ошибка вывода");
    tg?.HapticFeedback?.notificationOccurred("error");
    return;
  }

  document.getElementById("withdrawAmount").value="";
  notify("Заявка на вывод создана");
  tg?.HapticFeedback?.notificationOccurred("success");

  await auth();
  await refreshLiveBalance();
  await loadStats();
  await loadOperations();
};

document.getElementById("back").addEventListener("click",()=>{
  const active=document.querySelector(".subpage.active");

  if(active){
    active.classList.remove("active");

    if(active.id==="leaderboardPage"){
      document.getElementById("game")?.classList.add("active");
      document.querySelectorAll(".nav button").forEach(x=>x.classList.remove("active"));
      document.querySelector('.nav button[data-p="game"]')?.classList.add("active");
      document.getElementById("back").style.display="none";
      window.scrollTo({top:0,behavior:"smooth"});
      return;
    }

    document.getElementById("profile")?.classList.add("active");
    document.querySelectorAll(".nav button").forEach(x=>x.classList.remove("active"));
    document.querySelector('.nav button[data-p="profile"]')?.classList.add("active");
    document.getElementById("back").style.display="none";
    return;
  }
});



async function loadBonusStatus(){
  const r = await fetch("/api/bonus/status/" + u.id)
    .then(x=>x.json())
    .catch(()=>({ok:false}));

  if(!r.ok) return;

  const channelBtn = document.getElementById("claimChannelBonusBtn");
  const chatBtn = document.getElementById("claimChatBonusBtn");
  const bonusStatus = document.getElementById("bonusStatus");
  const chatStatus = document.getElementById("chatBonusStatus");

  if(channelBtn){
    channelBtn.disabled = !!r.channelClaimed;
    channelBtn.textContent = r.channelClaimed ? "Бонус уже получен" : "Проверить и получить";
    channelBtn.style.opacity = r.channelClaimed ? ".55" : "1";
  }

  if(chatBtn){
    chatBtn.disabled = !!r.chatClaimed;
    chatBtn.textContent = r.chatClaimed ? "Бонус уже получен" : "Проверить и получить";
    chatBtn.style.opacity = r.chatClaimed ? ".55" : "1";
  }

  if(bonusStatus) bonusStatus.innerHTML = '';
  if(chatStatus) chatStatus.innerHTML = '';
}


function openBonusChannel(){
  if(window.Telegram?.WebApp?.openTelegramLink){
    Telegram.WebApp.openTelegramLink("https://t.me/tonix_new");
  }else{
    window.location.href="https://t.me/tonix_new";
  }
}


function openBonusChat(){
  if(window.Telegram?.WebApp?.openTelegramLink){
    Telegram.WebApp.openTelegramLink("https://t.me/tonix_chats");
  }else{
    window.location.href="https://t.me/tonix_chats";
  }
}

async function claimBonusChat(){
  const r = await fetch("/api/bonus/chat", {
    method:"POST",
    headers:{"Content-Type":"application/json"},
    body:JSON.stringify({})
  }).then(x=>x.json()).catch(()=>({
    ok:false,
    error:"Ошибка"
  }));

  if(!r.ok){
    notify(r.error || "Не удалось получить бонус");
    tg?.HapticFeedback?.notificationOccurred("error");
    await loadBonusStatus();
    return;
  }

  notify("Бонус +0.01 TON начислен");
  tg?.HapticFeedback?.notificationOccurred("success");

  await auth();
  await refreshLiveBalance();
  await loadBonusStatus();
}

async function claimBonusChannel(){
  const r=await fetch("/api/bonus/channel",{
    method:"POST",
    headers:{"Content-Type":"application/json"},
    body:JSON.stringify({telegramId:u.id})
  }).then(x=>x.json()).catch(()=>({ok:false,error:"Ошибка"}));

  if(!r.ok){
    notify(r.error || "Не удалось получить бонус");
    tg?.HapticFeedback?.notificationOccurred("error");
    await loadBonusStatus();
    return;
  }

  notify("Бонус +0.01 TON начислен");
  tg?.HapticFeedback?.notificationOccurred("success");
  await auth();
  await refreshLiveBalance();
  await loadBonusStatus();
}


async function claimPromocode(){
  const input=document.getElementById("promoCodeInput");
  const code=(input?.value||"").trim();

  const r=await fetch("/api/promocode/claim",{
    method:"POST",
    headers:{"Content-Type":"application/json"},
    body:JSON.stringify({telegramId:u.id,code})
  }).then(x=>x.json()).catch(()=>({ok:false,error:"Ошибка"}));

  if(!r.ok){
    notify(r.error || "Промокод не активирован");
    tg?.HapticFeedback?.notificationOccurred("error");
    return;
  }

  notify("Промокод активирован +" + money(r.amount) + " TON");
  tg?.HapticFeedback?.notificationOccurred("success");
  if(input) input.value="";
  await auth();
  await refreshLiveBalance();
  await loadOperations();
}

async function createPromocode(){
  const code=document.getElementById("adminPromoCode")?.value||"";
  const amount=Number(document.getElementById("adminPromoAmount")?.value||0);
  const maxUses=Number(document.getElementById("adminPromoUses")?.value||1);

  const r=await fetch("/api/admin/promocodes/create",{
    method:"POST",
    headers:{"Content-Type":"application/json"},
    body:JSON.stringify({adminId:u.id,code,amount,maxUses})
  }).then(x=>x.json()).catch(()=>({ok:false,error:"Ошибка"}));

  if(!r.ok){
    notify(r.error || "Не удалось создать");
    return;
  }

  notify("Промокод создан");
  document.getElementById("adminPromoCode").value="";
  document.getElementById("adminPromoAmount").value="";
  document.getElementById("adminPromoUses").value="1";
  loadAdminPromocodes();
}

async function loadAdminPromocodes(){
  const box=document.getElementById("adminPromocodesList");
  if(!box)return;

  const d=await fetch("/api/admin/promocodes/"+u.id).then(x=>x.json()).catch(()=>({ok:false}));
  if(!d.ok){
    box.innerHTML=`<div class="balance-card"><div><span>Ошибка</span><b>${d.error||"Нет доступа"}</b></div></div>`;
    return;
  }

  box.innerHTML=(d.promocodes||[]).map(x=>{
    const used=Number(x.used_count || x.activations || 0);
    const max=Number(x.max_uses || 0);
    return `
    <div class="history-card">
      <div>
        <b>${x.code}</b>
        <span>Активаций: ${used}/${max}</span>
      </div>
      <div style="text-align:right">
        <div class="green">+${money(x.amount)} TON</div>
        <span>${used >= max ? "Закончился" : (Number(x.active) ? "Активен" : "Выключен")}</span>
      </div>
    </div>
  `}).join("") || `<div class="balance-card"><div><span>Пока пусто</span><b>Нет промокодов</b></div></div>`;
}


let activeSupportChatId="";
let selectedSupportTopic="";

function supportName(x){
  return x.username ? "@"+x.username : (x.first_name || x.telegram_id || "Пользователь");
}

function escapeSupportHtml(value){
  return String(value ?? "")
    .replaceAll("&","&amp;")
    .replaceAll("<","&lt;")
    .replaceAll(">","&gt;")
    .replaceAll('"',"&quot;");
}

function supportTopicButtonsHtml(){
  return `
    <div class="support-topic-buttons-in-chat">
      <button onclick="chooseSupportTopic('Проблема с пополнением')">Пополнение</button>
      <button onclick="chooseSupportTopic('Проблема с выводом')">Вывод</button>
      <button onclick="chooseSupportTopic('Проблема со ставкой')">Ставка</button>
      <button onclick="chooseSupportTopic('Промокод / бонус')">Бонусы</button>
      <button onclick="chooseSupportTopic('Другое')">Другое</button>
    </div>
  `;
}

async function chooseSupportTopic(topic){
  selectedSupportTopic=topic;

  const r=await fetch("/api/support/topic",{
    method:"POST",
    headers:{"Content-Type":"application/json"},
    body:JSON.stringify({
      telegramId:u.id,
      username:u.username || "",
      firstName:u.first_name || "",
      topic
    })
  }).then(x=>x.json()).catch(()=>({ok:false,error:"Ошибка"}));

  if(!r.ok){
    notify(r.error || "Не удалось выбрать тему");
    return;
  }

  await loadSupportMessages();
  document.getElementById("supportInput")?.focus();
  tg?.HapticFeedback?.selectionChanged();
}

function renderSupportMessages(boxId, messages){
  const box=document.getElementById(boxId);
  if(!box)return;

  const isAdminBox=boxId==="adminSupportMessages";
  const rows=[...(messages||[])];

  let intro="";

  const lastMsg=rows.length ? rows[rows.length-1] : null;
  const isClosed=lastMsg && lastMsg.sender==="system" && String(lastMsg.text||"").startsWith("Чат закрыт");

  if(!isAdminBox && (rows.length===0 || isClosed)){
    if(isClosed) selectedSupportTopic="";
    intro=`
      <div class="support-message-row assistant-row">
        <div class="support-avatar assistant-avatar">✦</div>
        <div class="support-message-content">
          <div class="support-author">
            TONIX Assistant
            <span class="assistant-badge">БОТ</span>
          </div>
          <div class="support-msg bot">
            <div>Здравствуйте! Я виртуальный помощник TONIX. Помогу направить ваше обращение нужному специалисту.</div>
            <span><b class="support-only-sign">Поддержка</b></span>
          </div>
        </div>
      </div>

      <div class="support-message-row assistant-row">
        <div class="support-avatar assistant-avatar">✦</div>
        <div class="support-message-content">
          <div class="support-author">
            TONIX Assistant
            <span class="assistant-badge">БОТ</span>
          </div>
          <div class="support-msg bot">
            <div>Для начала выберите тип обращения:</div>
            ${supportTopicButtonsHtml()}
            <span><b class="support-only-sign">Поддержка</b></span>
          </div>
        </div>
      </div>
    `;
  }

  let html=rows.map(m=>{
    const text=escapeSupportHtml(m.text);
    const date=escapeSupportHtml(m.created_at||"");

    if(m.sender==="system"){
      return `
        <div class="support-join-notice">
          <span class="join-dot"></span>
          ${text}
        </div>
      `;
    }

    if(m.sender==="admin"){
      return `
        <div class="support-message-row manager-row">
          <div class="support-avatar manager-avatar">A</div>
          <div class="support-message-content">
            <div class="support-author manager-author">
              Александр
              <span class="manager-badge">МЕНЕДЖЕР</span>
            </div>
            <div class="support-msg admin">
              <div>${text}</div>
              <span><b class="support-only-sign">Поддержка</b> · ${date}</span>
            </div>
          </div>
        </div>
      `;
    }

    if(m.sender==="bot"){
      return `
        <div class="support-message-row assistant-row">
          <div class="support-avatar assistant-avatar">✦</div>
          <div class="support-message-content">
            <div class="support-author">
              TONIX Assistant
              <span class="assistant-badge">БОТ</span>
            </div>
            <div class="support-msg bot">
              <div>${text}</div>
              <span><b class="support-only-sign">Поддержка</b> · ${date}</span>
            </div>
          </div>
        </div>
      `;
    }

    return `
      <div class="support-msg user">
        <div>${text}</div>
        <span>Вы · ${date}</span>
      </div>
    `;
  }).join("");

  if(intro){
    html += intro;
  }

  box.innerHTML = html || intro || `<div class="support-empty">Сообщений пока нет</div>`;
  box.scrollTop=box.scrollHeight;
}

async function loadSupportMessages(){
  const d=await fetch("/api/support/messages/"+u.id).then(x=>x.json()).catch(()=>({ok:false}));
  if(d.ok) renderSupportMessages("supportMessages", d.messages);
}

async function sendSupportMessage(){
  const input=document.getElementById("supportInput");
  const text=(input?.value||"").trim();

  const r=await fetch("/api/support/send",{
    method:"POST",
    headers:{"Content-Type":"application/json"},
    body:JSON.stringify({
      telegramId:u.id,
      username:u.username || "",
      firstName:u.first_name || "",
      topic:selectedSupportTopic,
      text
    })
  }).then(x=>x.json()).catch(()=>({ok:false,error:"Ошибка"}));

  if(!r.ok){
    notify(r.error || "Не отправлено");
    return;
  }

  input.value="";
  await loadSupportMessages();
}

async function loadAdminSupportChats(){
  const list=document.getElementById("adminSupportChats");
  const dialog=document.getElementById("adminSupportDialog");
  if(!list)return;

  dialog.style.display="none";
  const d=await fetch("/api/admin/support/chats/"+u.id).then(x=>x.json()).catch(()=>({ok:false}));

  if(!d.ok){
    list.innerHTML=`<div class="balance-card"><div><span>Ошибка</span><b>${d.error||"Нет доступа"}</b></div></div>`;
    return;
  }

  list.innerHTML=(d.chats||[]).map(c=>`
    <div class="history-card" onclick="openAdminSupportChat('${c.telegram_id}')">
      <div>
        <b>${supportName(c)}</b>
        <span>${c.last_text || ""}</span>
      </div>
      <div style="text-align:right">
        ${Number(c.unread)>0 ? `<div class="green">${c.unread} новых</div>` : `<span>прочитано</span>`}
        <span>${c.last_at || ""}</span>
      </div>
    </div>
  `).join("") || `<div class="balance-card"><div><span>Пока пусто</span><b>Нет чатов</b></div></div>`;
}

async function openAdminSupportChat(telegramId){
  activeSupportChatId=telegramId;
  document.getElementById("adminSupportDialog").style.display="block";

  await fetch("/api/admin/support/read",{
    method:"POST",
    headers:{"Content-Type":"application/json"},
    body:JSON.stringify({adminId:u.id,targetTelegramId:telegramId})
  });

  const d=await fetch("/api/support/messages/"+telegramId).then(x=>x.json()).catch(()=>({ok:false}));
  if(d.ok) renderSupportMessages("adminSupportMessages", d.messages);
}


async function closeAdminSupportChat(){
  if(!activeSupportChatId){
    notify("Чат не выбран");
    return;
  }

  const r=await fetch("/api/admin/support/close",{
    method:"POST",
    headers:{"Content-Type":"application/json"},
    body:JSON.stringify({adminId:u.id,targetTelegramId:activeSupportChatId})
  }).then(x=>x.json()).catch(()=>({ok:false,error:"Ошибка"}));

  if(!r.ok){
    notify(r.error || "Не удалось закрыть");
    return;
  }

  notify("Чат закрыт");
  await openAdminSupportChat(activeSupportChatId);
  await loadAdminSupportChats();
}


async function sendAdminSupportReply(){
  const input=document.getElementById("adminSupportInput");
  const text=(input?.value||"").trim();

  const r=await fetch("/api/admin/support/reply",{
    method:"POST",
    headers:{"Content-Type":"application/json"},
    body:JSON.stringify({adminId:u.id,targetTelegramId:activeSupportChatId,text})
  }).then(x=>x.json()).catch(()=>({ok:false,error:"Ошибка"}));

  if(!r.ok){
    notify(r.error || "Не отправлено");
    return;
  }

  input.value="";
  await openAdminSupportChat(activeSupportChatId);
}

setInterval(()=>{
  if(document.getElementById("supportPage")?.classList.contains("active")) loadSupportMessages();
  if(document.getElementById("adminSupportPage")?.classList.contains("active") && activeSupportChatId) openAdminSupportChat(activeSupportChatId);
},3000);





let onlineTimer=null;

async function pingOnline(){
  try{
    const r=await fetch("/api/online/ping",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({})}).then(x=>x.json());
    if(r.ok){
      const el=document.getElementById("onlineCount");
      if(el) el.textContent=String(r.online || 0);
    }
  }catch(e){}
}

function leaveOnline(){
  try{
    const data=new Blob([JSON.stringify({})],{type:"application/json"});
    navigator.sendBeacon && navigator.sendBeacon("/api/online/leave", data);
  }catch(e){}
}

function startOnline(){
  pingOnline();
  if(onlineTimer) clearInterval(onlineTimer);
  onlineTimer=setInterval(pingOnline,5000);
}

window.addEventListener("beforeunload", leaveOnline);
window.addEventListener("pagehide", leaveOnline);
document.addEventListener("visibilitychange", ()=>{
  if(document.hidden){
    leaveOnline();
  }else{
    pingOnline();
  }
});


auth();rooms();loadHistory();loadStats();startOnline();

setTimeout(()=>{
  const params=new URLSearchParams(location.search);
  if(params.get("page")==="bonuses"){
    document.querySelectorAll(".nav button").forEach(x=>x.classList.remove("active"));
    document.querySelectorAll(".page").forEach(x=>x.classList.remove("active"));
    document.getElementById("bonusesPage")?.classList.add("active");
    document.querySelector('.nav button[data-p="bonusesPage"]')?.classList.add("active");
    document.getElementById("back").style.display="none";
    loadBonusStatus?.();
  }
},600);

</script>

<style>
.support-chat-user{
  height:500px!important;
}

.support-message-row{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:13px 0;
}

.support-message-content{
  max-width:82%;
}

.support-avatar{
  width:36px;
  height:36px;
  min-width:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  font-weight:1000;
  margin-top:21px;
}

.assistant-avatar{
  color:#fff;
  background:
    radial-gradient(circle at 35% 30%,#555 0%,#171717 45%,#050505 100%);
  border:1px solid #444;
  box-shadow:0 0 18px rgba(255,255,255,.10);
}

.manager-avatar{
  color:#050505;
  background:linear-gradient(145deg,#fff,#777);
  border:1px solid #fff;
  box-shadow:0 0 18px rgba(255,255,255,.15);
}

.support-author{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 5px 3px;
  color:#fff;
  font-size:12px;
  font-weight:900;
}

.assistant-badge,
.manager-badge{
  padding:3px 6px;
  border-radius:6px;
  font-size:8px;
  letter-spacing:.5px;
}

.assistant-badge{
  color:#aaa;
  background:#1a1a1a;
  border:1px solid #303030;
}

.manager-badge{
  color:#111;
  background:#eee;
  border:1px solid #fff;
}

.support-msg.bot{
  margin:0;
  max-width:100%;
  background:#151515;
  border:1px solid #292929;
  color:#fff;
}

.support-message-row .support-msg.admin{
  margin:0;
  max-width:100%;
}

.support-only-sign{
  display:inline!important;
  margin:0!important;
  background:linear-gradient(90deg,#49d17d,#d5ffe1,#49d17d);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
  animation:supportGlow 2s linear infinite;
  font-weight:1000;
}

.support-join-notice{
  width:fit-content;
  max-width:90%;
  margin:16px auto;
  padding:9px 13px;
  border-radius:999px;
  background:#101010;
  border:1px solid #292929;
  color:#aaa;
  font-size:11px;
  text-align:center;
}

.join-dot{
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:6px;
  border-radius:50%;
  background:#49d17d;
  box-shadow:0 0 9px #49d17d;
}

#supportTopics{
  margin-top:12px;
}

@keyframes supportGlow{
  0%{background-position:0% center}
  100%{background-position:200% center}
}
</style>


<script>
window.addEventListener("load", ()=>{
  setTimeout(()=>{
    document.getElementById("appLoader")?.classList.add("hide");
  }, 1400);
});
setTimeout(()=>{
  document.getElementById("appLoader")?.classList.add("hide");
}, 4500);
</script>


<script id="amount-clear-handler">
document.getElementById("clearAmount").onclick=()=>{
  const a=document.getElementById("amount");
  a.value="";
  a.focus();
  tg?.HapticFeedback?.selectionChanged();
};
</script>


<style>
.bonus-compact-card{
  padding:14px!important;
}
.bonus-mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.bonus-mini{
  min-width:0;
  padding:13px 10px;
  border-radius:17px;
  background:linear-gradient(145deg,#121212,#080808);
  border:1px solid #252525;
}
.bonus-mini span{
  display:block;
  color:#888;
  font-size:12px!important;
  margin:0!important;
}
.bonus-mini b{
  display:block;
  font-size:27px!important;
  line-height:1!important;
  margin-top:8px!important;
}
.bonus-mini .bonus-text{
  min-height:38px;
  margin-top:10px!important;
  font-size:11px!important;
  line-height:1.25!important;
  color:#888!important;
}
.bonus-mini .main,
.bonus-mini .small{
  width:100%!important;
  height:42px!important;
  margin-top:9px!important;
  padding:0!important;
  border-radius:12px!important;
  font-size:13px!important;
}
.bonus-mini #bonusStatus,
.bonus-mini #chatBonusStatus{
  margin-top:8px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  font-size:11px!important;
  line-height:1.25!important;
}
.bonus-mini #bonusStatus div,
.bonus-mini #chatBonusStatus div{
  margin-top:0!important;
  font-size:11px!important;
  line-height:1.25!important;
}
.bonus-compact-card .promo-box{
  margin-top:12px!important;
}
</style>


<style id="tonix-final-page-position">

/*
  ФИНАЛЬНОЕ ИСПРАВЛЕНИЕ ПОЛОЖЕНИЯ ОСНОВНЫХ РАЗДЕЛОВ.
  Этот блок специально находится в самом конце HTML,
  поэтому перекрывает старые стили выше.
*/

body .app .wrap > #profile.page,
body .app .wrap > #bonusesPage.page,
body .app .wrap > #balance.page,
body .app .wrap > #history.page{
  display:none!important;

  position:static!important;
  inset:auto!important;
  top:auto!important;
  left:auto!important;
  right:auto!important;
  bottom:auto!important;

  transform:none!important;
  translate:none!important;

  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  margin:0!important;
  padding:0!important;

  align-items:initial!important;
  align-content:initial!important;
  justify-content:initial!important;

  grid-template-rows:none!important;
}

/* Активная страница начинается сразу под логотипом */
body .app .wrap > #profile.page.active,
body .app .wrap > #bonusesPage.page.active,
body .app .wrap > #balance.page.active,
body .app .wrap > #history.page.active{
  display:block!important;

  position:static!important;
  transform:none!important;

  height:auto!important;
  min-height:0!important;

  margin:0!important;
  padding:18px 0 0!important;
}

/* Убираем старые заголовки полностью */
body .app .wrap > #profile > .page-title,
body .app .wrap > #bonusesPage > .page-title,
body .app .wrap > #balance > .page-title,
body .app .wrap > #history > .page-title{
  display:none!important;

  position:static!important;
  width:0!important;
  height:0!important;
  min-height:0!important;

  margin:0!important;
  padding:0!important;

  overflow:hidden!important;
  opacity:0!important;
}

/* Первые блоки не получают дополнительных отступов */
body .app .wrap > #profile.page.active > .profile-card,
body .app .wrap > #balance.page.active > .balance-card:first-of-type,
body .app .wrap > #history.page.active > .tabs{
  margin-top:0!important;
  transform:none!important;
}

/* Бонусы: поднимаем общую внешнюю карточку */
body .app .wrap > #bonusesPage.page.active > *:first-child{
  margin-top:0!important;
  transform:none!important;
}

/* Отменяем возможное вертикальное центрирование вложенных контейнеров */
body .app .wrap > #profile.page.active > *,
body .app .wrap > #bonusesPage.page.active > *,
body .app .wrap > #balance.page.active > *,
body .app .wrap > #history.page.active > *{
  translate:none!important;
}

/* История должна начинаться с вкладок */
body .app .wrap > #history.page.active .tabs{
  position:static!important;
  margin:0 0 14px!important;
  padding:0!important;
}

/* Невысокие телефоны */
@media(max-height:760px){
  body .app .wrap > #profile.page.active,
  body .app .wrap > #bonusesPage.page.active,
  body .app .wrap > #balance.page.active,
  body .app .wrap > #history.page.active{
    padding-top:12px!important;
  }
}

</style>


<!-- TONIX_CASES_BEAUTY_START -->
<style id="tonix-cases-beauty">

/* =====================================================
   ОБЩАЯ СТРАНИЦА КЕЙСОВ
   Только внешний вид. Логику и экраны не меняет.
   ===================================================== */

#casesModePage{
  --case-page-bg:#080808;
  padding-bottom:108px!important;
}

#casesModePage > .mode-page-head{
  margin:18px 4px 28px!important;
  padding:0!important;
  min-height:0!important;

  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  overflow:visible!important;
}

#casesModePage > .mode-page-head::before,
#casesModePage > .mode-page-head::after{
  display:none!important;
}

#casesModePage > .mode-page-head span{
  margin:0 0 13px!important;

  color:#777!important;
  font-size:10px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:3px!important;
}

#casesModePage > .mode-page-head h1{
  margin:0!important;

  color:#f5f5f5!important;
  font-size:31px!important;
  font-weight:950!important;
  line-height:1.05!important;
  letter-spacing:-1.1px!important;
}

#casesModePage > .mode-page-head p{
  max-width:100%!important;
  margin:14px 0 0!important;

  color:#747474!important;
  font-size:14px!important;
  font-weight:500!important;
  line-height:1.4!important;
}


/* =====================================================
   СПИСОК КЕЙСОВ
   ===================================================== */

#casesModePage .cases-list{
  gap:14px!important;
  padding:0 0 18px!important;
}

/* Индивидуальные цвета */

#casesModePage .case-basic{
  --case-accent:#bcbcbc;
  --case-accent-rgb:188,188,188;
}

#casesModePage .case-silver{
  --case-accent:#6ab8ff;
  --case-accent-rgb:106,184,255;
}

#casesModePage .case-gold{
  --case-accent:#e6ba45;
  --case-accent-rgb:230,186,69;
}

#casesModePage .case-premium{
  --case-accent:#b86cff;
  --case-accent-rgb:184,108,255;
}

#casesModePage .case-select{
  position:relative!important;
  isolation:isolate!important;

  width:100%!important;
  min-height:114px!important;
  padding:12px 17px 12px 14px!important;

  display:grid!important;
  grid-template-columns:82px minmax(0,1fr) 22px!important;
  align-items:center!important;
  gap:15px!important;

  overflow:hidden!important;
  border:1px solid #292929!important;
  border-radius:23px!important;

  background:
    radial-gradient(
      circle at 12% 50%,
      rgba(var(--case-accent-rgb),.13),
      transparent 31%
    ),
    radial-gradient(
      circle at 93% 12%,
      rgba(var(--case-accent-rgb),.07),
      transparent 25%
    ),
    linear-gradient(
      145deg,
      #181818 0%,
      #0c0c0c 58%,
      #080808 100%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -26px 38px rgba(0,0,0,.28),
    0 13px 30px rgba(0,0,0,.22)!important;

  transform:translateZ(0)!important;
  transition:
    transform .16s ease,
    border-color .16s ease,
    background .16s ease!important;
}

#casesModePage .case-select::before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  inset:0!important;

  border-radius:inherit!important;

  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 38%,
      rgba(var(--case-accent-rgb),.08) 52%,
      transparent 65%
    )!important;

  transform:translateX(-75%)!important;
  animation:tonixCaseSoftShine 6s ease-in-out infinite!important;
  pointer-events:none!important;
}

#casesModePage .case-select::after{
  content:"T"!important;
  position:absolute!important;
  z-index:-1!important;

  right:-8px!important;
  bottom:-42px!important;

  color:rgba(var(--case-accent-rgb),.035)!important;
  font-size:145px!important;
  font-weight:1000!important;
  font-style:italic!important;
  line-height:1!important;

  transform:rotate(-12deg)!important;
  pointer-events:none!important;
}

#casesModePage .case-select:active{
  transform:scale(.982)!important;
  border-color:rgba(var(--case-accent-rgb),.42)!important;
}


/* Иконка кейса */

#casesModePage .case-select .case-box-icon{
  position:relative!important;

  width:76px!important;
  height:76px!important;
  min-width:76px!important;
  margin:0!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  overflow:hidden!important;
  border:1px solid rgba(var(--case-accent-rgb),.48)!important;
  border-radius:22px!important;

  background:
    radial-gradient(
      circle at 28% 18%,
      rgba(255,255,255,.26),
      rgba(var(--case-accent-rgb),.18) 28%,
      rgba(var(--case-accent-rgb),.055) 57%,
      #080808 82%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -15px 23px rgba(0,0,0,.42),
    0 0 26px rgba(var(--case-accent-rgb),.15),
    0 13px 25px rgba(0,0,0,.34)!important;
}

#casesModePage .case-select .case-box-icon::before{
  content:"T"!important;

  position:relative!important;
  z-index:3!important;

  width:35px!important;
  height:35px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:11px!important;

  color:#f5f5f5!important;
  font-size:19px!important;
  font-weight:1000!important;
  line-height:1!important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,.025)
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 16px rgba(var(--case-accent-rgb),.21)!important;

  text-shadow:0 2px 4px rgba(0,0,0,.65)!important;
}

#casesModePage .case-select .case-box-icon::after{
  content:""!important;
  position:absolute!important;

  left:-7px!important;
  right:-7px!important;
  top:24px!important;

  height:14px!important;
  border-top:1px solid rgba(255,255,255,.19)!important;
  border-bottom:1px solid rgba(0,0,0,.85)!important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.14),
      rgba(0,0,0,.62)
    )!important;

  box-shadow:0 4px 12px rgba(0,0,0,.45)!important;
}

#casesModePage .case-select .case-box-icon i{
  display:none!important;
}


/* Текст карточки */

#casesModePage .case-select-main{
  position:relative!important;
  z-index:2!important;
  min-width:0!important;
}

#casesModePage .case-select-main b{
  display:block!important;
  margin:0!important;

  color:#f4f4f4!important;
  font-size:18px!important;
  font-weight:950!important;
  line-height:1.12!important;
  letter-spacing:-.45px!important;

  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

#casesModePage .case-select-main span{
  display:block!important;
  margin:8px 0 0!important;

  color:#777!important;
  font-size:12px!important;
  font-weight:600!important;
  line-height:1.25!important;
}

#casesModePage .case-select-main strong{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  min-height:27px!important;
  margin:10px 0 0!important;
  padding:0 10px!important;

  border:1px solid rgba(var(--case-accent-rgb),.28)!important;
  border-radius:999px!important;

  color:var(--case-accent)!important;
  font-size:12px!important;
  font-weight:950!important;
  line-height:1!important;

  background:rgba(var(--case-accent-rgb),.075)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 0 14px rgba(var(--case-accent-rgb),.08)!important;
}

#casesModePage .case-select > em{
  position:relative!important;
  z-index:2!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  width:22px!important;
  height:42px!important;
  margin:0!important;

  color:var(--case-accent)!important;
  font-size:31px!important;
  font-weight:300!important;
  font-style:normal!important;
  line-height:1!important;

  opacity:.84!important;
  text-shadow:0 0 15px rgba(var(--case-accent-rgb),.36)!important;
}


/* =====================================================
   ДЕТАЛЬНАЯ СТРАНИЦА КЕЙСА
   ===================================================== */

#caseDetailPanel{
  --detail-accent:#bcbcbc;
  --detail-accent-rgb:188,188,188;

  padding:0 0 22px!important;
}

#caseDetailPanel[data-case-id="basic"]{
  --detail-accent:#bcbcbc;
  --detail-accent-rgb:188,188,188;
}

#caseDetailPanel[data-case-id="silver"]{
  --detail-accent:#6ab8ff;
  --detail-accent-rgb:106,184,255;
}

#caseDetailPanel[data-case-id="gold"]{
  --detail-accent:#e6ba45;
  --detail-accent-rgb:230,186,69;
}

#caseDetailPanel[data-case-id="premium"]{
  --detail-accent:#b86cff;
  --detail-accent-rgb:184,108,255;
}


/* Большой верхний блок */

#caseDetailPanel .case-detail-hero{
  position:relative!important;
  isolation:isolate!important;

  min-height:180px!important;
  margin:0 0 12px!important;
  padding:22px 19px 22px 130px!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;

  overflow:hidden!important;
  border:1px solid rgba(var(--detail-accent-rgb),.30)!important;
  border-radius:25px!important;

  background:
    radial-gradient(
      circle at 19% 48%,
      rgba(var(--detail-accent-rgb),.19),
      transparent 31%
    ),
    radial-gradient(
      circle at 85% 12%,
      rgba(var(--detail-accent-rgb),.095),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      #1a1a1a,
      #090909 72%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -30px 44px rgba(0,0,0,.32),
    0 15px 33px rgba(0,0,0,.25),
    0 0 30px rgba(var(--detail-accent-rgb),.075)!important;
}

#caseDetailPanel .case-detail-hero::before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;

  inset:0!important;

  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 37%,
      rgba(var(--detail-accent-rgb),.08) 51%,
      transparent 64%
    )!important;

  transform:translateX(-75%)!important;
  animation:tonixCaseSoftShine 7s ease-in-out infinite!important;
}

#caseDetailPanel .case-detail-hero::after{
  content:"T"!important;
  position:absolute!important;
  z-index:-1!important;

  right:-5px!important;
  bottom:-47px!important;

  color:rgba(var(--detail-accent-rgb),.045)!important;
  font-size:165px!important;
  font-weight:1000!important;
  font-style:italic!important;
  line-height:1!important;

  transform:rotate(-11deg)!important;
}


/* Большая иконка */

#caseDetailPanel .case-detail-box{
  position:absolute!important;
  left:20px!important;
  top:50%!important;

  width:90px!important;
  height:90px!important;

  transform:translateY(-50%)!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  overflow:hidden!important;
  border:1px solid rgba(var(--detail-accent-rgb),.55)!important;
  border-radius:25px!important;

  background:
    radial-gradient(
      circle at 29% 18%,
      rgba(255,255,255,.30),
      rgba(var(--detail-accent-rgb),.22) 27%,
      rgba(var(--detail-accent-rgb),.07) 56%,
      #080808 82%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -16px 25px rgba(0,0,0,.43),
    0 0 29px rgba(var(--detail-accent-rgb),.20),
    0 14px 25px rgba(0,0,0,.38)!important;
}

#caseDetailPanel .case-detail-box::before{
  content:""!important;
  position:absolute!important;

  left:-7px!important;
  right:-7px!important;
  top:29px!important;

  height:16px!important;

  border-top:1px solid rgba(255,255,255,.20)!important;
  border-bottom:1px solid rgba(0,0,0,.85)!important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.15),
      rgba(0,0,0,.66)
    )!important;
}

#caseDetailPanel .case-detail-box::after{
  display:none!important;
}

#caseDetailPanel .case-detail-box span{
  position:relative!important;
  z-index:3!important;

  width:43px!important;
  height:43px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  border:1px solid rgba(255,255,255,.25)!important;
  border-radius:13px!important;

  color:#f7f7f7!important;
  font-size:24px!important;
  font-weight:1000!important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.15),
      rgba(255,255,255,.025)
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 19px rgba(var(--detail-accent-rgb),.28)!important;
}

#caseDetailPanel .case-detail-label{
  margin:0 0 10px!important;

  color:var(--detail-accent)!important;
  font-size:9px!important;
  font-weight:950!important;
  letter-spacing:2.2px!important;
}

#caseDetailPanel #caseDetailName{
  max-width:100%!important;
  margin:0!important;

  color:#f6f6f6!important;
  font-size:27px!important;
  font-weight:950!important;
  line-height:1.08!important;
  letter-spacing:-.85px!important;

  white-space:normal!important;
  overflow:visible!important;
}

#caseDetailPanel #caseDetailSubtitle{
  max-width:240px!important;
  margin:12px 0 0!important;

  color:#797979!important;
  font-size:11px!important;
  font-weight:650!important;
  line-height:1.4!important;
}


/* Цена и баланс */

#caseDetailPanel .case-price-card{
  gap:10px!important;
  margin:0 0 12px!important;
}

#caseDetailPanel .case-price-card > div{
  position:relative!important;

  min-height:80px!important;
  padding:14px 16px!important;

  overflow:hidden!important;
  border:1px solid #292929!important;
  border-radius:20px!important;

  background:
    radial-gradient(
      circle at 90% 12%,
      rgba(var(--detail-accent-rgb),.09),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #171717,
      #090909
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 9px 20px rgba(0,0,0,.18)!important;
}

#caseDetailPanel .case-price-card > div::after{
  content:""!important;
  position:absolute!important;

  right:-22px!important;
  bottom:-27px!important;

  width:76px!important;
  height:76px!important;

  border:1px solid rgba(var(--detail-accent-rgb),.05)!important;
  border-radius:50%!important;
}

#caseDetailPanel .case-price-card span{
  margin:0 0 9px!important;

  color:#6f6f6f!important;
  font-size:9px!important;
  font-weight:800!important;
}

#caseDetailPanel .case-price-card b{
  color:#f4f4f4!important;
  font-size:18px!important;
  font-weight:950!important;
  letter-spacing:-.4px!important;
}

#caseDetailPanel .case-price-card > div:first-child b{
  color:var(--detail-accent)!important;
  text-shadow:0 0 16px rgba(var(--detail-accent-rgb),.20)!important;
}


/* Карточка возможных наград */

#caseDetailPanel .case-content-card{
  position:relative!important;

  margin:0 0 13px!important;
  padding:14px!important;

  overflow:hidden!important;
  border:1px solid #292929!important;
  border-radius:22px!important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(var(--detail-accent-rgb),.065),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #151515,
      #080808 76%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 12px 26px rgba(0,0,0,.18)!important;
}

#caseDetailPanel .case-content-card::before{
  content:""!important;
  position:absolute!important;

  left:18px!important;
  right:18px!important;
  top:0!important;

  height:1px!important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(var(--detail-accent-rgb),.58),
      transparent
    )!important;

  box-shadow:0 0 14px rgba(var(--detail-accent-rgb),.22)!important;
}

#caseDetailPanel .case-content-title{
  min-height:29px!important;
  margin:0 2px 11px!important;
}

#caseDetailPanel .case-content-title span{
  color:var(--detail-accent)!important;
  font-size:9px!important;
  font-weight:950!important;
  letter-spacing:1.8px!important;
}

#caseDetailPanel .case-content-title b{
  color:#d2d2d2!important;
  font-size:12px!important;
  font-weight:900!important;
}


/* Награды */

#caseDetailPanel .case-prizes-grid{
  gap:8px!important;
}

#caseDetailPanel .case-prize-preview{
  position:relative!important;
  isolation:isolate!important;

  height:103px!important;
  min-height:103px!important;
  padding:47px 5px 10px!important;

  overflow:hidden!important;
  border-radius:16px!important;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(var(--prize-glow-rgb),.12),
      transparent 43%
    ),
    linear-gradient(
      145deg,
      #181818,
      #090909 76%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 16px rgba(0,0,0,.16)!important;
}

#caseDetailPanel .case-prize-preview::before{
  width:35px!important;
  height:35px!important;

  border-radius:11px!important;

  background:
    radial-gradient(
      circle at 32% 22%,
      rgba(255,255,255,.22),
      rgba(var(--prize-glow-rgb),.14) 34%,
      #0c0c0c 80%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 0 14px rgba(var(--prize-glow-rgb),.20)!important;
}

#caseDetailPanel .case-prize-preview::after{
  top:8px!important;

  font-size:8px!important;
  font-weight:950!important;
  letter-spacing:.3px!important;
}

#caseDetailPanel .case-prize-preview i{
  display:none!important;
}

#caseDetailPanel .case-prize-preview b{
  color:#f0f0f0!important;
  font-size:10px!important;
  font-weight:950!important;
  line-height:1!important;
}

#caseDetailPanel .case-prize-preview.rarity-common{
  --prize-glow-rgb:145,145,145!important;
  border-color:#303030!important;
}

#caseDetailPanel .case-prize-preview.rarity-rare{
  --prize-glow-rgb:75,210,135!important;
  border-color:rgba(75,210,135,.31)!important;
}

#caseDetailPanel .case-prize-preview.rarity-epic{
  --prize-glow-rgb:80,150,255!important;
  border-color:rgba(80,150,255,.38)!important;
}

#caseDetailPanel .case-prize-preview.rarity-legendary{
  --prize-glow-rgb:231,190,80!important;
  border-color:rgba(231,190,80,.42)!important;
}


/* Основная кнопка */

#caseDetailPanel .case-open-main-btn{
  position:relative!important;

  min-height:66px!important;
  margin:0 0 10px!important;

  overflow:hidden!important;
  border:0!important;
  border-radius:21px!important;

  color:#080808!important;
  font-size:18px!important;
  font-weight:950!important;
  letter-spacing:-.35px!important;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #e7e7e7 100%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -8px 16px rgba(0,0,0,.06),
    0 13px 28px rgba(0,0,0,.24),
    0 0 22px rgba(var(--detail-accent-rgb),.08)!important;

  transition:transform .15s ease!important;
}

#caseDetailPanel .case-open-main-btn::before{
  content:""!important;
  position:absolute!important;

  inset:0!important;

  background:
    linear-gradient(
      110deg,
      transparent 0%,
      transparent 38%,
      rgba(255,255,255,.75) 50%,
      transparent 62%
    )!important;

  transform:translateX(-100%)!important;
  animation:tonixOpenButtonShine 4.8s ease-in-out infinite!important;
}

#caseDetailPanel .case-open-main-btn::after{
  display:none!important;
}

#caseDetailPanel .case-open-main-btn:active{
  transform:scale(.982)!important;
}


/* Кнопка назад */

#caseDetailPanel .case-back-list-btn{
  min-height:51px!important;

  border:1px solid #292929!important;
  border-radius:18px!important;

  color:#747474!important;
  font-size:12px!important;
  font-weight:850!important;

  background:
    linear-gradient(
      145deg,
      #131313,
      #090909
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025)!important;
}


/* =====================================================
   АНИМАЦИИ
   ===================================================== */

@keyframes tonixCaseSoftShine{
  0%,68%{
    transform:translateX(-85%);
    opacity:0;
  }

  75%{
    opacity:1;
  }

  92%,100%{
    transform:translateX(95%);
    opacity:0;
  }
}

@keyframes tonixOpenButtonShine{
  0%,73%{
    transform:translateX(-110%);
  }

  90%,100%{
    transform:translateX(110%);
  }
}


/* =====================================================
   МАЛЕНЬКИЕ ЭКРАНЫ
   ===================================================== */

@media (max-width:390px){

  #casesModePage > .mode-page-head h1{
    font-size:29px!important;
  }

  #casesModePage > .mode-page-head p{
    font-size:13px!important;
  }

  #casesModePage .case-select{
    min-height:107px!important;
    padding:10px 13px 10px 11px!important;

    grid-template-columns:72px minmax(0,1fr) 18px!important;
    gap:12px!important;
  }

  #casesModePage .case-select .case-box-icon{
    width:68px!important;
    height:68px!important;
    min-width:68px!important;
    border-radius:20px!important;
  }

  #casesModePage .case-select-main b{
    font-size:16px!important;
  }

  #casesModePage .case-select-main span{
    margin-top:6px!important;
    font-size:11px!important;
  }

  #casesModePage .case-select-main strong{
    margin-top:8px!important;
    font-size:11px!important;
  }

  #caseDetailPanel .case-detail-hero{
    min-height:166px!important;
    padding:18px 14px 18px 111px!important;
  }

  #caseDetailPanel .case-detail-box{
    left:15px!important;
    width:79px!important;
    height:79px!important;
  }

  #caseDetailPanel #caseDetailName{
    font-size:23px!important;
  }

  #caseDetailPanel #caseDetailSubtitle{
    font-size:10px!important;
  }

  #caseDetailPanel .case-price-card > div{
    min-height:75px!important;
    padding:13px 12px!important;
  }

  #caseDetailPanel .case-price-card b{
    font-size:16px!important;
  }

  #caseDetailPanel .case-prize-preview{
    height:96px!important;
    min-height:96px!important;
  }

  #caseDetailPanel .case-open-main-btn{
    min-height:62px!important;
    font-size:17px!important;
  }
}


/* Пользователь с отключёнными анимациями */

@media (prefers-reduced-motion:reduce){
  #casesModePage .case-select::before,
  #caseDetailPanel .case-detail-hero::before,
  #caseDetailPanel .case-open-main-btn::before{
    animation:none!important;
  }
}

</style>
<!-- TONIX_CASES_BEAUTY_END -->


<!-- TONIX_CASE_DETAIL_FINAL_FIX_START -->
<style id="tonix-case-detail-final-fix">

/*
  Финальный слой страницы выбранного кейса.
  Не влияет на список кейсов, рулетку и JavaScript.
*/

#caseDetailPanel{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0 0 12px!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}


/* =====================================================
   ВЕРХНЯЯ КАРТОЧКА КЕЙСА
   ===================================================== */

#caseDetailPanel .case-detail-hero{
  position:relative!important;

  width:100%!important;
  min-width:0!important;
  max-width:100%!important;

  height:150px!important;
  min-height:150px!important;
  max-height:150px!important;

  margin:0 0 9px!important;
  padding:15px 16px 15px 106px!important;
  box-sizing:border-box!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;

  overflow:hidden!important;
  border-radius:22px!important;
}

#caseDetailPanel .case-detail-box{
  position:absolute!important;
  left:15px!important;
  top:50%!important;

  width:72px!important;
  height:72px!important;
  min-width:72px!important;
  min-height:72px!important;
  max-width:72px!important;
  max-height:72px!important;

  margin:0!important;
  transform:translateY(-50%)!important;

  border-radius:21px!important;
}

#caseDetailPanel .case-detail-box span{
  font-size:28px!important;
}

#caseDetailPanel .case-detail-label{
  display:block!important;
  width:auto!important;
  max-width:100%!important;

  margin:0 0 7px!important;

  font-size:7px!important;
  line-height:1!important;
  letter-spacing:1.7px!important;
  white-space:nowrap!important;
}

#caseDetailPanel #caseDetailName{
  display:block!important;

  width:100%!important;
  max-width:100%!important;

  margin:0!important;

  font-size:24px!important;
  line-height:1.05!important;
  letter-spacing:-.7px!important;

  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

#caseDetailPanel #caseDetailSubtitle{
  display:block!important;

  width:100%!important;
  max-width:220px!important;

  margin:8px 0 0!important;

  font-size:9px!important;
  line-height:1.3!important;

  white-space:normal!important;
  overflow:visible!important;
}


/* =====================================================
   СТОИМОСТЬ И БАЛАНС
   ===================================================== */

#caseDetailPanel .case-price-card{
  width:100%!important;
  height:58px!important;
  min-height:58px!important;
  max-height:58px!important;

  margin:0 0 8px!important;
  padding:0!important;

  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:7px!important;

  box-sizing:border-box!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
}

#caseDetailPanel .case-price-card > div{
  width:100%!important;
  min-width:0!important;

  height:58px!important;
  min-height:58px!important;
  max-height:58px!important;

  padding:8px 11px!important;
  box-sizing:border-box!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;

  overflow:hidden!important;
  border-radius:16px!important;
}

#caseDetailPanel .case-price-card span{
  display:block!important;

  width:100%!important;
  max-width:100%!important;

  margin:0 0 5px!important;

  font-size:7px!important;
  line-height:1!important;

  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#caseDetailPanel .case-price-card b{
  display:block!important;

  width:100%!important;
  max-width:100%!important;

  margin:0!important;

  font-size:16px!important;
  line-height:1!important;
  letter-spacing:-.35px!important;

  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}


/* =====================================================
   КОНТЕЙНЕР НАГРАД
   ===================================================== */

#caseDetailPanel .case-content-card{
  position:relative!important;

  width:100%!important;
  min-width:0!important;
  max-width:100%!important;

  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  margin:0 0 8px!important;
  padding:9px!important;
  box-sizing:border-box!important;

  overflow:hidden!important;
  border-radius:19px!important;
}

#caseDetailPanel .case-content-card::after{
  display:none!important;
  content:none!important;
}

#caseDetailPanel .case-content-title{
  width:100%!important;
  height:22px!important;
  min-height:22px!important;
  max-height:22px!important;

  margin:0 1px 7px!important;
  padding:0!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;

  box-sizing:border-box!important;
}

#caseDetailPanel .case-content-title span{
  font-size:7px!important;
  line-height:1!important;
  letter-spacing:1.5px!important;
  white-space:nowrap!important;
}

#caseDetailPanel .case-content-title b{
  font-size:10px!important;
  line-height:1!important;
  white-space:nowrap!important;
}


/* =====================================================
   НАГРАДЫ: СТРОГО 3 × 3 БЕЗ НАЛОЖЕНИЙ
   ===================================================== */

#caseDetailPanel .case-prizes-grid{
  position:relative!important;

  width:100%!important;
  min-width:0!important;
  max-width:100%!important;

  height:206px!important;
  min-height:206px!important;
  max-height:206px!important;

  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;

  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-template-rows:repeat(3,64px)!important;
  grid-auto-flow:row!important;
  grid-auto-rows:64px!important;
  gap:7px!important;

  overflow:hidden!important;
}

#caseDetailPanel .case-prize-preview{
  --rarity-color:#858585;
  --rarity-glow:rgba(160,160,160,.08);

  position:relative!important;
  isolation:isolate!important;

  grid-column:auto!important;
  grid-row:auto!important;

  width:100%!important;
  min-width:0!important;
  max-width:100%!important;

  height:64px!important;
  min-height:64px!important;
  max-height:64px!important;

  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;

  display:block!important;

  overflow:hidden!important;
  border-radius:12px!important;

  transform:none!important;
  translate:none!important;
  scale:none!important;

  animation:none!important;
}

/*
  Редкость — только одна надпись сверху.
  Старые CSS-блоки меняли местами псевдоэлементы,
  поэтому здесь задаём содержимое заново.
*/
#caseDetailPanel .case-prize-preview::before{
  content:attr(data-rarity-title)!important;

  position:absolute!important;
  z-index:4!important;

  top:5px!important;
  left:3px!important;
  right:3px!important;
  bottom:auto!important;

  width:auto!important;
  height:9px!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;

  margin:0!important;
  padding:0!important;

  display:block!important;

  border:0!important;
  border-radius:0!important;

  color:var(--rarity-color)!important;
  background:none!important;
  box-shadow:none!important;

  font-size:5.5px!important;
  line-height:9px!important;
  font-weight:1000!important;
  letter-spacing:.3px!important;
  text-align:center!important;
  text-transform:uppercase!important;

  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;

  transform:none!important;
}

/* Фирменный жетон T */
#caseDetailPanel .case-prize-preview::after{
  content:"T"!important;

  position:absolute!important;
  z-index:3!important;

  top:17px!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;

  width:25px!important;
  height:25px!important;
  min-width:25px!important;
  min-height:25px!important;
  max-width:25px!important;
  max-height:25px!important;

  margin:0!important;
  padding:0!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  transform:translateX(-50%)!important;

  border:1px solid color-mix(in srgb,var(--rarity-color) 52%,#303030)!important;
  border-radius:8px!important;

  color:#f1f1f1!important;
  background:
    radial-gradient(
      circle at 34% 25%,
      rgba(255,255,255,.20),
      rgba(255,255,255,.025) 37%,
      #0a0a0a 79%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 9px var(--rarity-glow)!important;

  font-size:10px!important;
  line-height:1!important;
  font-weight:1000!important;
  text-align:center!important;
}

/* HTML содержит пустой i — он не нужен */
#caseDetailPanel .case-prize-preview i{
  display:none!important;
  content:none!important;
}

/* Сумма строго снизу карточки */
#caseDetailPanel .case-prize-preview b{
  position:absolute!important;
  z-index:5!important;

  left:2px!important;
  right:2px!important;
  bottom:6px!important;
  top:auto!important;

  display:block!important;

  width:auto!important;
  max-width:none!important;

  margin:0!important;
  padding:0!important;

  color:#f0f0f0!important;
  font-size:7.5px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:-.1px!important;
  text-align:center!important;

  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;

  transform:none!important;
}


/* Цвета редкостей */

#caseDetailPanel .case-prize-preview.rarity-common{
  --rarity-color:#858585;
  --rarity-glow:rgba(170,170,170,.08);

  border-color:#303030!important;
}

#caseDetailPanel .case-prize-preview.rarity-rare{
  --rarity-color:#55df91;
  --rarity-glow:rgba(70,215,135,.20);

  border-color:rgba(70,215,135,.29)!important;
}

#caseDetailPanel .case-prize-preview.rarity-epic{
  --rarity-color:#69aaff;
  --rarity-glow:rgba(70,145,255,.23);

  border-color:rgba(70,145,255,.35)!important;
}

#caseDetailPanel .case-prize-preview.rarity-legendary{
  --rarity-color:#ffd36b;
  --rarity-glow:rgba(245,190,65,.25);

  border-color:rgba(245,190,65,.39)!important;
  animation:none!important;
}


/* =====================================================
   КНОПКИ
   ===================================================== */

#caseDetailPanel .case-open-main-btn{
  width:100%!important;

  height:52px!important;
  min-height:52px!important;
  max-height:52px!important;

  margin:0 0 7px!important;
  padding:0 12px!important;
  box-sizing:border-box!important;

  border-radius:17px!important;

  font-size:16px!important;
  line-height:1!important;

  animation:none!important;
}

#caseDetailPanel .case-open-main-btn::before,
#caseDetailPanel .case-open-main-btn::after{
  display:none!important;
  animation:none!important;
}

#caseDetailPanel .case-back-list-btn{
  width:100%!important;

  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;

  margin:0!important;
  padding:0 10px!important;
  box-sizing:border-box!important;

  border-radius:13px!important;

  font-size:9px!important;
  line-height:1!important;
}


/* =====================================================
   УЗКИЕ ТЕЛЕФОНЫ
   ===================================================== */

@media(max-width:360px){

  #caseDetailPanel .case-detail-hero{
    padding-left:98px!important;
  }

  #caseDetailPanel .case-detail-box{
    left:13px!important;

    width:66px!important;
    height:66px!important;
    min-width:66px!important;
    min-height:66px!important;
    max-width:66px!important;
    max-height:66px!important;
  }

  #caseDetailPanel #caseDetailName{
    font-size:21px!important;
  }

  #caseDetailPanel #caseDetailSubtitle{
    font-size:8px!important;
  }

  #caseDetailPanel .case-price-card b{
    font-size:14px!important;
  }

  #caseDetailPanel .case-prizes-grid{
    grid-template-rows:repeat(3,62px)!important;
    grid-auto-rows:62px!important;

    height:198px!important;
    min-height:198px!important;
    max-height:198px!important;

    gap:6px!important;
  }

  #caseDetailPanel .case-prize-preview{
    height:62px!important;
    min-height:62px!important;
    max-height:62px!important;
  }

  #caseDetailPanel .case-prize-preview b{
    font-size:7px!important;
  }
}


/* Низкие экраны: ещё немного сжимаем без наложений */

@media(max-height:760px){

  #caseDetailPanel .case-detail-hero{
    height:132px!important;
    min-height:132px!important;
    max-height:132px!important;
  }

  #caseDetailPanel .case-price-card,
  #caseDetailPanel .case-price-card > div{
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
  }

  #caseDetailPanel .case-prizes-grid{
    grid-template-rows:repeat(3,59px)!important;
    grid-auto-rows:59px!important;

    height:187px!important;
    min-height:187px!important;
    max-height:187px!important;

    gap:5px!important;
  }

  #caseDetailPanel .case-prize-preview{
    height:59px!important;
    min-height:59px!important;
    max-height:59px!important;
  }

  #caseDetailPanel .case-prize-preview::before{
    top:4px!important;
  }

  #caseDetailPanel .case-prize-preview::after{
    top:15px!important;

    width:23px!important;
    height:23px!important;
    min-width:23px!important;
    min-height:23px!important;
    max-width:23px!important;
    max-height:23px!important;
  }

  #caseDetailPanel .case-prize-preview b{
    bottom:5px!important;
  }

  #caseDetailPanel .case-open-main-btn{
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
  }
}

</style>
<!-- TONIX_CASE_DETAIL_FINAL_FIX_END -->


<!-- TONIX_CASE_NEW_FLOW_START -->

<style id="tonix-case-new-flow-style">

/* =====================================================
   ЭКРАН ВЫБРАННОГО КЕЙСА ДО НАЖАТИЯ «ОТКРЫТЬ»
   ===================================================== */

#caseOpeningPanel.case-ready{
  display:block!important;

  width:100%!important;
  max-width:100%!important;
  min-height:0!important;

  padding:0 0 108px!important;
  box-sizing:border-box!important;
}

/* Баланс */

#caseOpeningPanel.case-ready .case-opening-balance{
  width:calc(100% - 50px)!important;
  height:68px!important;
  min-height:68px!important;

  margin:7px auto 14px!important;
  padding:0 22px!important;
  box-sizing:border-box!important;

  border:1px solid #292929!important;
  border-radius:20px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;

  background:
    radial-gradient(
      circle at 88% 20%,
      rgba(255,255,255,.055),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      #171717,
      #090909
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 12px 27px rgba(0,0,0,.21)!important;
}

#caseOpeningPanel.case-ready .case-opening-balance span{
  color:#777!important;
  font-size:12px!important;
  font-weight:850!important;
}

#caseOpeningPanel.case-ready .case-opening-balance b{
  color:#f5f5f5!important;
  font-size:22px!important;
  font-weight:1000!important;
  white-space:nowrap!important;
}


/* Неподвижная рулетка перед открытием */

#caseOpeningPanel.case-ready #caseRouletteWindow{
  position:relative!important;

  width:100%!important;
  height:224px!important;
  min-height:224px!important;

  margin:0!important;
  overflow:hidden!important;

  border-top:1px solid #272727!important;
  border-bottom:1px solid #272727!important;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(255,255,255,.045),
      transparent 37%
    ),
    linear-gradient(
      180deg,
      #090909,
      #040404
    )!important;

  box-shadow:
    inset 42px 0 38px rgba(0,0,0,.94),
    inset -42px 0 38px rgba(0,0,0,.94),
    inset 0 1px 0 rgba(255,255,255,.025)!important;
}

#caseOpeningPanel.case-ready #caseRouletteTrack{
  height:100%!important;

  display:flex!important;
  align-items:center!important;
  gap:9px!important;

  padding:0 9px!important;

  transition:none!important;
  will-change:auto!important;
}

#caseOpeningPanel.case-ready
#caseRouletteWindow .case-reel-item{
  width:148px!important;
  min-width:148px!important;
  max-width:148px!important;

  height:194px!important;
  min-height:194px!important;
  max-height:194px!important;

  animation:none!important;
  transform:none!important;

  opacity:.72!important;
}

#caseOpeningPanel.case-ready
#caseRouletteWindow .case-reel-item.case-ready-center{
  opacity:1!important;

  border-color:rgba(var(--rarity-rgb),.68)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -22px 31px rgba(0,0,0,.28),
    0 0 23px rgba(var(--rarity-rgb),.18)!important;
}

#caseOpeningPanel.case-ready
#caseRouletteWindow .case-reel-item i{
  top:48px!important;

  width:64px!important;
  height:64px!important;

  border-radius:20px!important;
}

#caseOpeningPanel.case-ready
#caseRouletteWindow .case-reel-item b{
  margin-bottom:9px!important;
  font-size:16px!important;
}

/* Центральный указатель остаётся на месте */

#caseOpeningPanel.case-ready
#caseRouletteWindow .case-roulette-marker{
  display:block!important;
}


/* Название и описание */

#caseOpeningPanel.case-ready .case-opening-label{
  display:block!important;

  margin:19px auto 9px!important;

  color:#818181!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:2.1px!important;
  text-align:center!important;
  text-transform:uppercase!important;
}

#caseOpeningPanel.case-ready .case-opening-prize{
  display:block!important;

  width:calc(100% - 48px)!important;
  min-height:0!important;

  margin:0 auto!important;
  padding:0!important;

  color:#f5f5f5!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;

  font-size:34px!important;
  line-height:1.05!important;
  font-weight:1000!important;
  letter-spacing:-1.2px!important;
  text-align:center!important;

  animation:none!important;
}

#caseOpeningPanel.case-ready .case-opening-prize::before,
#caseOpeningPanel.case-ready .case-opening-prize::after{
  display:none!important;
  content:none!important;
}

#caseOpeningPanel.case-ready .case-opening-text{
  display:block!important;

  width:calc(100% - 50px)!important;
  min-height:0!important;

  margin:9px auto 20px!important;

  color:#777!important;
  font-size:11px!important;
  line-height:1.35!important;
  font-weight:750!important;
  text-align:center!important;
}


/* Кнопка открытия */

#caseOpeningPanel.case-ready #caseOpenAgainBtn{
  position:relative!important;

  display:block!important;

  width:calc(100% - 50px)!important;
  height:62px!important;
  min-height:62px!important;

  margin:0 auto 10px!important;
  padding:0 14px!important;
  box-sizing:border-box!important;

  overflow:hidden!important;

  border:1px solid rgba(255,255,255,.87)!important;
  border-radius:20px!important;

  color:#080808!important;
  font-size:17px!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:-.35px!important;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #e5e5e5
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -8px 15px rgba(0,0,0,.055),
    0 14px 29px rgba(0,0,0,.26)!important;

  animation:none!important;
}

#caseOpeningPanel.case-ready #caseOpenAgainBtn::before,
#caseOpeningPanel.case-ready #caseOpenAgainBtn::after{
  display:none!important;
}


/* Возможные призы */

#casePossiblePrizesBtn{
  display:block;

  width:calc(100% - 50px);
  height:51px;

  margin:0 auto 9px;
  padding:0 15px;
  box-sizing:border-box;

  border:1px solid rgba(var(--ready-accent-rgb),.30);
  border-radius:17px;

  color:var(--ready-accent);
  font-size:12px;
  line-height:1;
  font-weight:900;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(var(--ready-accent-rgb),.09),
      transparent 54%
    ),
    linear-gradient(
      145deg,
      #151515,
      #090909
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 17px rgba(var(--ready-accent-rgb),.07);

  -webkit-tap-highlight-color:transparent;
}

#casePossiblePrizesBtn:active{
  transform:scale(.982);
}


/* Вернуться к списку */

#caseOpeningPanel.case-ready > .case-back-list-btn{
  display:block!important;

  width:calc(100% - 50px)!important;
  height:46px!important;
  min-height:46px!important;

  margin:0 auto!important;

  border:1px solid #272727!important;
  border-radius:16px!important;

  color:#686868!important;
  font-size:10px!important;
  font-weight:850!important;

  background:
    linear-gradient(
      145deg,
      #121212,
      #080808
    )!important;
}


/* Цвет выбранного кейса */

#caseOpeningPanel.case-ready[data-case-id="basic"]{
  --ready-accent:#b0b0b0;
  --ready-accent-rgb:176,176,176;
}

#caseOpeningPanel.case-ready[data-case-id="silver"]{
  --ready-accent:#62adff;
  --ready-accent-rgb:98,173,255;
}

#caseOpeningPanel.case-ready[data-case-id="gold"]{
  --ready-accent:#ffd369;
  --ready-accent-rgb:255,211,105;
}

#caseOpeningPanel.case-ready[data-case-id="premium"]{
  --ready-accent:#ba70ff;
  --ready-accent-rgb:186,112,255;
}


/* =====================================================
   ОТДЕЛЬНАЯ СТРАНИЦА ВОЗМОЖНЫХ ПРИЗОВ
   ===================================================== */

#casePrizesPage{
  width:100%;
  max-width:100%;

  padding:0 28px 112px;
  box-sizing:border-box;
}

#casePrizesPage .case-prizes-page-hero{
  position:relative;

  width:100%;
  min-height:128px;

  margin:0 0 12px;
  padding:20px;
  box-sizing:border-box;

  display:flex;
  flex-direction:column;
  justify-content:center;

  overflow:hidden;

  border:1px solid rgba(var(--prizes-accent-rgb),.27);
  border-radius:23px;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(var(--prizes-accent-rgb),.13),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      #191919,
      #080808 74%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 13px 31px rgba(0,0,0,.24);
}

#casePrizesPage .case-prizes-page-hero::after{
  content:"T";

  position:absolute;
  right:11px;
  bottom:-39px;

  color:rgba(var(--prizes-accent-rgb),.055);
  font-size:136px;
  line-height:1;
  font-weight:1000;
  font-style:italic;

  transform:rotate(-10deg);
}

#casePrizesPage .case-prizes-page-hero > *{
  position:relative;
  z-index:2;
}

#casePrizesPage .case-prizes-page-hero span{
  color:var(--prizes-accent);
  font-size:8px;
  line-height:1;
  font-weight:1000;
  letter-spacing:1.9px;
}

#casePrizesPage .case-prizes-page-hero h1{
  margin:10px 0 0;

  color:#f5f5f5;
  font-size:27px;
  line-height:1.05;
  font-weight:1000;
  letter-spacing:-.8px;
}

#casePrizesPage .case-prizes-page-hero p{
  max-width:245px;
  margin:10px 0 0;

  color:#747474;
  font-size:10px;
  line-height:1.4;
  font-weight:700;
}


/* Карточка сетки */

#casePrizesPage .case-prizes-page-card{
  width:100%;

  padding:13px;
  box-sizing:border-box;

  overflow:hidden;

  border:1px solid #292929;
  border-radius:21px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(var(--prizes-accent-rgb),.075),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #151515,
      #080808 75%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 12px 27px rgba(0,0,0,.18);
}

#casePrizesPage .case-prizes-page-title{
  height:28px;
  margin:0 2px 12px;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

#casePrizesPage .case-prizes-page-title span{
  color:var(--prizes-accent);
  font-size:8px;
  line-height:1;
  font-weight:1000;
  letter-spacing:1.55px;
}

#casePrizesPage .case-prizes-page-title b{
  color:#cfcfcf;
  font-size:11px;
  line-height:1;
  font-weight:900;
}


/* Сетка наград */

#casePrizesPage .case-prizes-page-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

#casePrizesPage .case-prizes-item{
  --prize-color:#898989;
  --prize-rgb:137,137,137;

  position:relative;

  min-width:0;
  height:113px;

  padding:53px 4px 9px;
  box-sizing:border-box;

  display:flex;
  align-items:flex-end;
  justify-content:center;

  overflow:hidden;

  border:1px solid rgba(var(--prize-rgb),.28);
  border-radius:15px;

  background:
    radial-gradient(
      circle at 50% 31%,
      rgba(var(--prize-rgb),.14),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      #181818,
      #090909 76%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04);
}

#casePrizesPage .case-prizes-item::before{
  content:attr(data-rarity-title);

  position:absolute;
  top:10px;
  left:4px;
  right:4px;

  color:var(--prize-color);
  font-size:7px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.35px;
  text-align:center;
  text-transform:uppercase;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#casePrizesPage .case-prizes-item::after{
  content:"T";

  position:absolute;
  top:31px;
  left:50%;

  width:40px;
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  transform:translateX(-50%);

  border:1px solid rgba(var(--prize-rgb),.58);
  border-radius:13px;

  color:#f2f2f2;
  font-size:16px;
  line-height:1;
  font-weight:1000;

  background:
    radial-gradient(
      circle at 34% 26%,
      rgba(255,255,255,.25),
      rgba(var(--prize-rgb),.13) 35%,
      #0a0a0a 80%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 0 16px rgba(var(--prize-rgb),.19);
}

#casePrizesPage .case-prizes-item b{
  display:block;

  width:100%;

  color:#f0f0f0;
  font-size:10px;
  line-height:1;
  font-weight:1000;
  text-align:center;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* Редкости */

#casePrizesPage .case-prizes-item.rarity-common{
  --prize-color:#898989;
  --prize-rgb:145,145,145;
}

#casePrizesPage .case-prizes-item.rarity-rare{
  --prize-color:#58df92;
  --prize-rgb:75,210,135;
}

#casePrizesPage .case-prizes-item.rarity-epic{
  --prize-color:#69aaff;
  --prize-rgb:80,150,255;
}

#casePrizesPage .case-prizes-item.rarity-legendary{
  --prize-color:#ffd56d;
  --prize-rgb:231,190,80;
}


/* Кнопка возврата */

#casePrizesPage .case-prizes-return-btn{
  width:100%;
  height:52px;

  margin:12px 0 0;

  border:1px solid rgba(var(--prizes-accent-rgb),.28);
  border-radius:17px;

  color:var(--prizes-accent);
  font-size:11px;
  font-weight:900;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(var(--prizes-accent-rgb),.09),
      transparent 55%
    ),
    linear-gradient(
      145deg,
      #151515,
      #090909
    );
}


/* Цвет страницы призов */

#casePrizesPage[data-case-id="basic"]{
  --prizes-accent:#b0b0b0;
  --prizes-accent-rgb:176,176,176;
}

#casePrizesPage[data-case-id="silver"]{
  --prizes-accent:#62adff;
  --prizes-accent-rgb:98,173,255;
}

#casePrizesPage[data-case-id="gold"]{
  --prizes-accent:#ffd369;
  --prizes-accent-rgb:255,211,105;
}

#casePrizesPage[data-case-id="premium"]{
  --prizes-accent:#ba70ff;
  --prizes-accent-rgb:186,112,255;
}


/* Узкие телефоны */

@media(max-width:370px){

  #caseOpeningPanel.case-ready
  #caseRouletteWindow .case-reel-item{
    width:138px!important;
    min-width:138px!important;
    max-width:138px!important;
  }

  #caseOpeningPanel.case-ready .case-opening-prize{
    font-size:30px!important;
  }

  #casePrizesPage{
    padding-left:20px;
    padding-right:20px;
  }

  #casePrizesPage .case-prizes-item{
    height:106px;
  }

  #casePrizesPage .case-prizes-item b{
    font-size:9px;
  }
}

</style>

<script>
(function(){

  const originalOpenCasesMode = window.openCasesMode;
  const originalOpenCase = window.openCase;
  const originalReturnTonixHome = window.returnTonixHome;

  function el(id){
    return document.getElementById(id);
  }

  function hideCasePrizesPage(){
    const page = el("casePrizesPage");

    if(page){
      page.style.display = "none";
    }
  }

  function resetOpeningClasses(){
    const opening = el("caseOpeningPanel");

    if(!opening) return;

    opening.classList.remove(
      "case-ready",
      "opening",
      "result",
      "result-ready",
      "result-common",
      "result-rare",
      "result-epic",
      "result-legendary"
    );
  }

  function hideCaseInnerScreens(){
    const detail = el("caseDetailPanel");
    const opening = el("caseOpeningPanel");

    if(detail){
      detail.style.display = "none";
    }

    if(opening){
      opening.style.display = "none";
    }
  }

  function renderReadyReel(config){
    const track = el("caseRouletteTrack");
    const windowBox = el("caseRouletteWindow");

    if(!track || !windowBox) return;

    /*
      Девять наград показываются в неподвижной ленте.
      Центральной делаем среднюю награду.
    */
    const prizes = [...config.prizes];
    const centerIndex = Math.floor(prizes.length / 2);

    track.style.transition = "none";
    track.style.transform = "translate3d(0,0,0)";
    track.style.willChange = "auto";

    track.innerHTML = prizes.map((amount, index)=>{
      const rarity = getCaseRarity(amount, config.price);

      return `
        <div
          class="case-reel-item rarity-${rarity.id}
            ${index === centerIndex ? "case-ready-center" : ""}"
          data-ready-index="${index}"
          data-rarity="${rarity.id}"
        >
          <span class="case-rarity-label">
            ${rarity.title}
          </span>

          <i></i>

          <b>${money(amount)} TON</b>
        </div>
      `;
    }).join("");

    windowBox.classList.remove(
      "roulette-preparing",
      "roulette-running",
      "roulette-finished",
      "case-result-flash",
      "case-result-common",
      "case-result-rare",
      "case-result-epic",
      "case-result-legendary"
    );

    requestAnimationFrame(()=>{
      const centerCard = track.querySelector(
        `.case-reel-item[data-ready-index="${centerIndex}"]`
      );

      if(!centerCard) return;

      const target = Math.round(
        -(
          centerCard.offsetLeft +
          centerCard.offsetWidth / 2 -
          windowBox.clientWidth / 2
        )
      );

      track.style.transition = "none";
      track.style.transform =
        `translate3d(${target}px,0,0)`;
    });
  }

  function ensurePossiblePrizesButton(){
    let button = el("casePossiblePrizesBtn");

    if(button) return button;

    button = document.createElement("button");
    button.type = "button";
    button.id = "casePossiblePrizesBtn";
    button.textContent = "Возможные призы";

    const opening = el("caseOpeningPanel");
    const back = opening?.querySelector(
      ":scope > .case-back-list-btn"
    );

    if(opening && back){
      opening.insertBefore(button, back);
    }else if(opening){
      opening.appendChild(button);
    }

    return button;
  }

  function showCasesList(){
    hideCasePrizesPage();

    const casesPage = el("casesModePage");
    const header = document.querySelector(
      "#casesModePage > .mode-page-head"
    );
    const list = document.querySelector(
      "#casesModePage .cases-list"
    );
    const history = document.querySelector(
      "#casesModePage .case-history-card"
    );

    resetOpeningClasses();
    hideCaseInnerScreens();

    if(casesPage){
      casesPage.style.display = "block";
    }

    if(header){
      header.style.display = "block";
    }

    if(list){
      list.style.display = "flex";
    }

    if(history){
      history.style.display = "block";
    }

    selectedCaseId = null;

    window.scrollTo({
      top:0,
      behavior:"smooth"
    });

    loadCaseHistory?.();
  }

  function showSelectedCase(caseId){
    const config = TONIX_CASES[caseId];

    if(!config){
      notify("Кейс не найден");
      return;
    }

    selectedCaseId = caseId;
    hideCasePrizesPage();

    const casesPage = el("casesModePage");
    const header = document.querySelector(
      "#casesModePage > .mode-page-head"
    );
    const list = document.querySelector(
      "#casesModePage .cases-list"
    );
    const history = document.querySelector(
      "#casesModePage .case-history-card"
    );
    const detail = el("caseDetailPanel");
    const opening = el("caseOpeningPanel");

    if(casesPage){
      casesPage.style.display = "block";
    }

    if(header){
      header.style.display = "none";
    }

    if(list){
      list.style.display = "none";
    }

    if(history){
      history.style.display = "none";
    }

    if(detail){
      detail.style.display = "none";
    }

    if(!opening) return;

    resetOpeningClasses();

    opening.style.display = "block";
    opening.dataset.caseId = caseId;
    opening.classList.add("case-ready");

    const label = el("caseOpeningLabel");
    const title = el("caseOpeningPrize");
    const description = el("caseOpeningText");
    const openButton = el("caseOpenAgainBtn");
    const prizesButton = ensurePossiblePrizesButton();

    if(label){
      label.textContent = config.name;
    }

    if(title){
      title.textContent = "Открыть кейс";
      title.classList.remove("case-prize-reveal");
    }

    if(description){
      description.textContent =
        `Стоимость открытия — ${money(config.price)} TON`;
    }

    if(openButton){
      openButton.style.display = "block";
      openButton.textContent =
        `Открыть за ${money(config.price)} TON`;

      openButton.onclick = ()=>{
        openCase(caseId);
      };
    }

    if(prizesButton){
      prizesButton.style.display = "block";
      prizesButton.onclick = ()=>{
        showCasePrizes(caseId);
      };
    }

    renderReadyReel(config);

    el("back").style.display = "block";

    window.scrollTo({
      top:0,
      behavior:"smooth"
    });

    tg?.HapticFeedback?.selectionChanged();
  }

  function showCasePrizes(caseId){
    const config = TONIX_CASES[caseId];

    if(!config){
      notify("Кейс не найден");
      return;
    }

    selectedCaseId = caseId;

    const casesPage = el("casesModePage");
    const prizesPage = el("casePrizesPage");
    const name = el("casePrizesPageName");
    const grid = el("casePrizesPageGrid");

    if(casesPage){
      casesPage.style.display = "none";
    }

    if(!prizesPage || !grid) return;

    prizesPage.dataset.caseId = caseId;
    prizesPage.style.display = "block";

    if(name){
      name.textContent = config.name;
    }

    grid.innerHTML = config.prizes.map(amount=>{
      const rarity = getCaseRarity(
        amount,
        config.price
      );

      return `
        <div
          class="case-prizes-item rarity-${rarity.id}"
          data-rarity-title="${rarity.title}"
        >
          <b>${money(amount)} TON</b>
        </div>
      `;
    }).join("");

    el("back").style.display = "block";

    window.scrollTo({
      top:0,
      behavior:"smooth"
    });

    tg?.HapticFeedback?.selectionChanged();
  }

  window.showCasesList = showCasesList;
  window.showSelectedCase = showSelectedCase;
  window.showCasePrizes = showCasePrizes;

  /*
    Теперь нажатие по карточке не открывает старую
    перегруженную страницу содержимого.
  */
  window.selectCase = function(caseId){
    showSelectedCase(caseId);
  };

  window.closeCaseDetail = function(){
    if(caseOpeningBusy) return;
    showCasesList();
  };

  /*
    Во время готового экрана верхняя стрелка возвращает
    к списку. После результата — обратно к выбранному кейсу.
  */
  window.closeCaseResult = function(){
    if(caseOpeningBusy) return;

    const opening = el("caseOpeningPanel");

    if(opening?.classList.contains("case-ready")){
      showCasesList();
      return;
    }

    resetOpeningClasses();

    if(selectedCaseId){
      showSelectedCase(selectedCaseId);
    }else{
      showCasesList();
    }
  };

  /*
    Открытие начинается только после явного нажатия
    на большую кнопку.
  */
  window.openCase = async function(caseId){
    const prizesButton = el("casePossiblePrizesBtn");
    const opening = el("caseOpeningPanel");

    hideCasePrizesPage();

    if(opening){
      opening.classList.remove("case-ready");
      opening.dataset.caseId = caseId;
    }

    if(prizesButton){
      prizesButton.style.display = "none";
    }

    return await originalOpenCase.call(this, caseId);
  };

  window.openCasesMode = function(){
    const result = originalOpenCasesMode.apply(
      this,
      arguments
    );

    showCasesList();
    return result;
  };

  window.returnTonixHome = function(){
    hideCasePrizesPage();

    const result = originalReturnTonixHome.apply(
      this,
      arguments
    );

    return result;
  };

  /*
    Кнопка внутри отдельной страницы наград.
  */
  el("casePrizesReturnBtn")?.addEventListener(
    "click",
    ()=>{
      if(selectedCaseId){
        showSelectedCase(selectedCaseId);
      }else{
        showCasesList();
      }
    }
  );

  /*
    Перехватываем верхнюю стрелку только когда открыта
    отдельная страница возможных призов.
  */
  el("back")?.addEventListener(
    "click",
    event=>{
      const prizesPage = el("casePrizesPage");

      if(
        prizesPage &&
        prizesPage.style.display !== "none"
      ){
        event.preventDefault();
        event.stopImmediatePropagation();

        if(selectedCaseId){
          showSelectedCase(selectedCaseId);
        }else{
          showCasesList();
        }
      }
    },
    true
  );

  /*
    При переходе по нижнему меню отдельная страница
    наград не должна оставаться поверх приложения.
  */
  document.querySelectorAll(".nav button").forEach(
    button=>{
      button.addEventListener("click", ()=>{
        hideCasePrizesPage();
      });
    }
  );

  ensurePossiblePrizesButton();

})();
</script>

<!-- TONIX_CASE_NEW_FLOW_END -->

















<!-- TONIX_HISTORY_CASES_FINAL_FIX_START -->

<style id="tonix-history-cases-final-fix">

/* =====================================================
   ИСТОРИЯ БЕЗ ЛИШНЕГО СТАТУСА
   ===================================================== */

#historyList .history-card{
  position:relative!important;
}

/*
  После удаления статуса сумма всегда остаётся справа,
  а название получает всю свободную ширину.
*/
#historyList .history-card > div:first-child{
  min-width:0!important;
  flex:1 1 auto!important;
}

#historyList .history-card > div:last-child{
  margin-left:auto!important;
  flex:0 0 auto!important;
}

/* Мои игры: джекпот и кейсы в одном аккуратном списке */
#myBetsList .tonix-my-game-row{
  min-height:92px!important;
  padding:17px 18px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;

  border:1px solid #282828!important;
  border-radius:20px!important;

  background:
    linear-gradient(
      145deg,
      rgba(24,24,24,.98),
      rgba(10,10,10,.99)
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 10px 24px rgba(0,0,0,.20)!important;
}

#myBetsList .tonix-my-game-row.case{
  background:
    radial-gradient(
      circle at 8% 50%,
      rgba(100,169,255,.065),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      rgba(24,24,24,.98),
      rgba(9,9,9,.99)
    )!important;
}

#myBetsList .profile-history-info{
  min-width:0!important;
  flex:1 1 auto!important;
}

#myBetsList .profile-history-info b{
  display:block!important;

  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;

  color:#f2f2f2!important;
  font-size:15px!important;
  font-weight:950!important;
  line-height:1.15!important;
}

#myBetsList .profile-history-info span{
  display:block!important;
  margin-top:6px!important;

  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;

  color:#777!important;
  font-size:10px!important;
  font-weight:750!important;
  line-height:1.2!important;
}

#myBetsList .profile-history-info small{
  display:block!important;
  margin-top:5px!important;

  color:#555!important;
  font-size:9px!important;
  font-weight:650!important;
  line-height:1!important;
}

#myBetsList .profile-history-amount{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-end!important;

  min-width:max-content!important;
  margin-left:auto!important;

  font-size:14px!important;
  font-weight:950!important;
  line-height:1!important;

  white-space:nowrap!important;
}


/* =====================================================
   УЛУЧШЕННЫЕ ИКОНКИ КЕЙСОВ
   ===================================================== */

#casesModePage .case-select .case-box-icon{
  position:relative!important;
  isolation:isolate!important;

  overflow:visible!important;

  border-radius:24px!important;

  background:
    radial-gradient(
      circle at 31% 19%,
      rgba(255,255,255,.32),
      rgba(var(--case-accent-rgb),.22) 24%,
      rgba(var(--case-accent-rgb),.075) 55%,
      #080808 83%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -17px 24px rgba(0,0,0,.48),
    0 0 0 1px rgba(var(--case-accent-rgb),.08),
    0 0 25px rgba(var(--case-accent-rgb),.17),
    0 14px 27px rgba(0,0,0,.40)!important;
}

/* Крышка кейса */
#casesModePage .case-select .case-box-icon::after{
  content:""!important;

  position:absolute!important;
  z-index:2!important;

  left:-5px!important;
  right:-5px!important;
  top:22px!important;

  height:17px!important;

  border-top:
    1px solid
    rgba(255,255,255,.24)!important;

  border-bottom:
    1px solid
    rgba(0,0,0,.95)!important;

  border-radius:5px!important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.22),
      rgba(var(--case-accent-rgb),.10) 35%,
      rgba(0,0,0,.78)
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 5px 12px rgba(0,0,0,.62)!important;

  transform:none!important;
}

/* Центральный жетон с T */
#casesModePage .case-select .case-box-icon::before{
  content:"T"!important;

  position:absolute!important;
  z-index:5!important;

  left:50%!important;
  top:50%!important;

  width:38px!important;
  height:38px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  transform:translate(-50%,-39%)!important;

  border:
    1px solid
    rgba(var(--case-accent-rgb),.55)!important;

  border-radius:12px!important;

  color:#f7f7f7!important;
  font-size:19px!important;
  font-weight:1000!important;
  line-height:1!important;

  background:
    radial-gradient(
      circle at 33% 23%,
      rgba(255,255,255,.30),
      rgba(var(--case-accent-rgb),.17) 33%,
      rgba(9,9,9,.96) 78%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -7px 12px rgba(0,0,0,.36),
    0 0 16px rgba(var(--case-accent-rgb),.25),
    0 8px 14px rgba(0,0,0,.36)!important;

  text-shadow:
    0 2px 4px rgba(0,0,0,.70)!important;
}

/* Маленькие замки по краям крышки */
#casesModePage .case-select .case-box-icon i{
  position:absolute!important;
  z-index:4!important;

  left:12px!important;
  right:12px!important;
  top:17px!important;

  height:10px!important;

  display:block!important;

  border-left:
    7px solid
    rgba(var(--case-accent-rgb),.40)!important;

  border-right:
    7px solid
    rgba(var(--case-accent-rgb),.40)!important;

  border-radius:4px!important;

  opacity:.78!important;
}


/* =====================================================
   ОДИН РАЗМЕР ЗНАЧКА TONCOIN
   ===================================================== */

.toncoin-symbol,
.toncoin-symbol svg{
  width:15px!important;
  height:15px!important;
  min-width:15px!important;
  min-height:15px!important;
  max-width:15px!important;
  max-height:15px!important;
}

.toncoin-amount{
  gap:5px!important;
  white-space:nowrap!important;
}


/* Узкие телефоны */
@media(max-width:370px){

  #myBetsList .tonix-my-game-row{
    padding-left:14px!important;
    padding-right:14px!important;
    gap:9px!important;
  }

  #myBetsList .profile-history-info b{
    font-size:13px!important;
  }

  #myBetsList .profile-history-info span{
    font-size:9px!important;
  }

  #myBetsList .profile-history-amount{
    font-size:12px!important;
  }

  #casesModePage .case-select .case-box-icon::before{
    width:35px!important;
    height:35px!important;
    font-size:17px!important;
  }
}

</style>

<script>
(function(){

  /*
    В общей истории статус «Выполнено» не несёт пользы
    для ставок и кейсов. Удаляем его после каждой отрисовки.
  */
  function cleanGameHistoryStatuses(root=document){
    const history=root.querySelector
      ? root.querySelector("#historyList")
      : null;

    if(!history){
      return;
    }

    history.querySelectorAll("*").forEach(element=>{
      if(
        element.children.length===0 &&
        element.textContent.trim()==="Выполнено" &&
        !element.closest(".tonix-final-operation-card") &&
        !element.closest(".tonix-balance-operation") &&
        !element.closest(".tonix-history-row") &&
        !element.closest(".ops-history-card") &&
        !["Вывод", "Пополнение"].includes(
          element
            .closest(".history-card")
            ?.querySelector("b")
            ?.textContent
            ?.trim()
        )
      ){
        element.remove();
      }
    });

    history.querySelectorAll(".history-card").forEach(card=>{
      const children=[...card.children];

      if(children.length){
        const last=children[children.length-1];

        if(last){
          last.style.marginLeft="auto";
        }
      }
    });
  }

  const historyList=document.getElementById("historyList");

  if(historyList){
    const observer=new MutationObserver(()=>{
      cleanGameHistoryStatuses(document);
    });

    observer.observe(historyList,{
      childList:true,
      subtree:true
    });
  }

  cleanGameHistoryStatuses(document);

})();
</script>

<!-- TONIX_HISTORY_CASES_FINAL_FIX_END -->


<!-- TONIX_HISTORY_STABLE_FINAL_START -->

<style id="tonix-history-stable-final-style">

/* =========================================================
   ЕДИНЫЙ СТАБИЛЬНЫЙ ЗНАЧОК TONCOIN
   ========================================================= */

.toncoin-amount{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:5px!important;

  width:max-content!important;
  min-width:0!important;
  max-width:100%!important;

  margin:0!important;
  padding:0!important;

  color:inherit!important;
  font:inherit!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;

  white-space:nowrap!important;
  vertical-align:middle!important;

  flex:0 0 auto!important;
}

.toncoin-symbol{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  width:15px!important;
  height:15px!important;
  min-width:15px!important;
  min-height:15px!important;
  max-width:15px!important;
  max-height:15px!important;

  margin:0!important;
  padding:0!important;

  overflow:hidden!important;

  border:0!important;
  border-radius:50%!important;

  background:#0098ea!important;
  box-shadow:none!important;

  vertical-align:middle!important;
  flex:0 0 15px!important;

  transform:none!important;
  translate:none!important;
}

.toncoin-symbol svg{
  display:block!important;

  width:15px!important;
  height:15px!important;
  min-width:15px!important;
  min-height:15px!important;
  max-width:15px!important;
  max-height:15px!important;

  margin:0!important;
  padding:0!important;
}

.toncoin-symbol circle{
  fill:#0098ea!important;
}

.toncoin-symbol path{
  fill:#ffffff!important;
}

.toncoin-symbol.toncoin-standalone{
  margin-left:5px!important;
}


/* =========================================================
   ИСТОРИЯ
   ========================================================= */

#historyList{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:0 0 108px;
}

#historyList .tonix-history-row{
  position:relative;

  width:100%;
  min-height:112px;
  padding:18px 20px;

  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;

  box-sizing:border-box;

  overflow:hidden;

  border:1px solid #292929;
  border-radius:23px;

  background:
    linear-gradient(
      145deg,
      rgba(22,22,22,.99),
      rgba(9,9,9,.99)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 11px 28px rgba(0,0,0,.20);
}

#historyList .tonix-history-row::before{
  content:"";
  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    radial-gradient(
      circle at 5% 50%,
      rgba(var(--history-accent-rgb),.07),
      transparent 31%
    );
}

#historyList .tonix-history-row.win{
  --history-accent-rgb:64,207,125;
}

#historyList .tonix-history-row.lose{
  --history-accent-rgb:255,91,102;
}

#historyList .tonix-history-row.deposit{
  --history-accent-rgb:70,174,255;
}

#historyList .tonix-history-row.withdraw{
  --history-accent-rgb:190,190,190;
}

#historyList .tonix-history-row.other{
  --history-accent-rgb:164,112,255;
}

#historyList .tonix-history-left{
  position:relative;
  z-index:2;

  min-width:0;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

#historyList .tonix-history-title{
  width:100%;
  margin:0;

  overflow:hidden;

  color:#f2f2f2;
  font-size:18px;
  font-weight:950;
  line-height:1.12;
  letter-spacing:-.35px;

  white-space:nowrap;
  text-overflow:ellipsis;
}

#historyList .tonix-history-subtitle{
  width:100%;
  min-height:17px;
  margin-top:7px;

  overflow:hidden;

  color:#777;
  font-size:12px;
  font-weight:650;
  line-height:1.25;

  white-space:nowrap;
  text-overflow:ellipsis;
}

#historyList .tonix-history-date{
  margin-top:6px;

  color:#595959;
  font-size:11px;
  font-weight:600;
  line-height:1;
}

#historyList .tonix-history-right{
  position:relative;
  z-index:2;

  min-width:118px;

  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:10px;
}

#historyList .tonix-history-status{
  min-height:34px;
  padding:0 13px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid #303030;
  border-radius:12px;

  color:#a0a0a0;
  font-size:12px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;

  background:#151515;
}

#historyList .tonix-history-status.win,
#historyList .tonix-history-status.paid{
  color:#4bd687;
  border-color:rgba(75,214,135,.22);
  background:rgba(30,109,67,.16);
}

#historyList .tonix-history-status.lose,
#historyList .tonix-history-status.rejected{
  color:#ff6873;
  border-color:rgba(255,104,115,.23);
  background:rgba(123,35,42,.17);
}

#historyList .tonix-history-status.pending{
  color:#efc76d;
  border-color:rgba(239,199,109,.22);
  background:rgba(120,91,28,.16);
}

#historyList .tonix-history-amount{
  display:flex;
  justify-content:flex-end;

  color:#ededed;
  font-size:18px;
  font-weight:950;
  line-height:1;
  letter-spacing:-.25px;
}

#historyList .tonix-history-amount.positive{
  color:#4bd687;
}

#historyList .tonix-history-amount.negative{
  color:#ff6873;
}

#historyList .tonix-history-empty{
  min-height:130px;
  padding:24px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid #292929;
  border-radius:22px;

  color:#666;
  font-size:14px;
  font-weight:750;
  text-align:center;

  background:#0d0d0d;
}


/* =========================================================
   МОИ ИГРЫ В ПРОФИЛЕ
   ========================================================= */

#myBetsList{
  display:flex;
  flex-direction:column;
  gap:12px;
}

#myBetsList .tonix-profile-game{
  min-height:94px;
  padding:16px 18px;

  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;

  box-sizing:border-box;

  border:1px solid #292929;
  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      rgba(22,22,22,.99),
      rgba(9,9,9,.99)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03);
}

#myBetsList .tonix-profile-game.case{
  background:
    radial-gradient(
      circle at 4% 50%,
      rgba(100,169,255,.07),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(22,22,22,.99),
      rgba(9,9,9,.99)
    );
}

#myBetsList .tonix-profile-game-info{
  min-width:0;
}

#myBetsList .tonix-profile-game-info b{
  display:block;

  overflow:hidden;

  color:#f1f1f1;
  font-size:16px;
  font-weight:900;
  line-height:1.15;

  white-space:nowrap;
  text-overflow:ellipsis;
}

#myBetsList .tonix-profile-game-info span{
  display:block;
  margin-top:6px;

  color:#696969;
  font-size:11px;
  font-weight:650;
}

#myBetsList .tonix-profile-game-result{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

#myBetsList .tonix-profile-game-badge{
  min-height:30px;
  padding:0 11px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:11px;

  font-size:11px;
  font-weight:900;
  line-height:1;
}

#myBetsList .tonix-profile-game-badge.win{
  color:#4bd687;
  border:1px solid rgba(75,214,135,.22);
  background:rgba(30,109,67,.16);
}

#myBetsList .tonix-profile-game-badge.lose{
  color:#ff6873;
  border:1px solid rgba(255,104,115,.22);
  background:rgba(123,35,42,.17);
}

#myBetsList .tonix-profile-game-amount{
  font-size:15px;
  font-weight:950;
  line-height:1;
}

#myBetsList .tonix-profile-game-amount.positive{
  color:#4bd687;
}

#myBetsList .tonix-profile-game-amount.negative{
  color:#ff6873;
}


/* Небольшие экраны */

@media(max-width:370px){

  #historyList .tonix-history-row{
    padding:16px;
    gap:11px;
  }

  #historyList .tonix-history-title{
    font-size:16px;
  }

  #historyList .tonix-history-right{
    min-width:104px;
  }

  #historyList .tonix-history-status{
    padding:0 10px;
    font-size:11px;
  }

  #historyList .tonix-history-amount{
    font-size:16px;
  }
}

</style>

<script id="tonix-history-stable-final-script">
(function(){

  const TON_ICON_SVG = `
    <span
      class="toncoin-symbol"
      aria-label="Toncoin"
      title="Toncoin"
    >
      <svg
        viewBox="0 0 56 56"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
      >
        <circle cx="28" cy="28" r="28"></circle>
        <path
          d="
            M18.2 17.3
            c-.9-1.6.3-3.6 2.2-3.6
            h15.2
            c1.9 0 3.1 2 2.2 3.6
            L30.2 41
            c-.7 2.2-3.7 2.2-4.4 0
            L18.2 17.3
            Z

            M22.8 18.1
            28 34.2
            33.2 18.1
            H22.8
            Z
          "
        ></path>
      </svg>
    </span>
  `;

  const NUMBER_WITH_TON =
    /([+-]?\d+(?:[.,]\d+)?)(?:[ \t\u00A0]*)TON\b/g;

  const STANDALONE_TON = /\bTON\b/g;

  let activityItems = [];
  let activeHistoryFilter = "all";


  function escapeHtml(value){
    return String(value ?? "")
      .replaceAll("&","&amp;")
      .replaceAll("<","&lt;")
      .replaceAll(">","&gt;")
      .replaceAll('"',"&quot;");
  }


  function cleanNumber(value){
    const number =
      Math.round(Number(value || 0) * 100000000) /
      100000000;

    if(!Number.isFinite(number)){
      return "0";
    }

    return number
      .toFixed(8)
      .replace(/\.?0+$/,"");
  }


  function tonAmountHtml(value, options={}){
    const number = Number(value || 0);

    let prefix = "";

    if(options.forceSign){
      if(number > 0){
        prefix = "+";
      }else if(number < 0){
        prefix = "-";
      }
    }else if(number < 0){
      prefix = "-";
    }

    const absolute =
      options.forceSign
        ? Math.abs(number)
        : Math.abs(number);

    return `
      <span class="toncoin-amount">
        <span>${prefix}${cleanNumber(absolute)}</span>
        ${TON_ICON_SVG}
      </span>
    `;
  }


  window.tonAmountHtml = tonAmountHtml;


  function shouldIgnoreNode(node){
    const parent = node?.parentElement;

    if(!parent){
      return true;
    }

    return !!parent.closest(
      [
        "script",
        "style",
        "textarea",
        "code",
        "pre",
        ".toncoin-symbol",
        ".toncoin-amount"
      ].join(",")
    );
  }


  /*
    Замена происходит прямо внутри callback MutationObserver.

    MutationObserver запускается в microtask до следующей
    отрисовки браузера. Здесь специально НЕТ requestAnimationFrame,
    поэтому слово TON не успевает появиться отдельным кадром.
  */
  function replaceTonTextNode(node){
    if(
      !node ||
      node.nodeType !== Node.TEXT_NODE ||
      shouldIgnoreNode(node)
    ){
      return;
    }

    const original = node.nodeValue || "";

    if(!/\bTON\b/.test(original)){
      return;
    }

    const fragment = document.createDocumentFragment();

    let cursor = 0;
    let match;

    NUMBER_WITH_TON.lastIndex = 0;

    while(
      (match = NUMBER_WITH_TON.exec(original)) !== null
    ){
      const before = original.slice(
        cursor,
        match.index
      );

      if(before){
        fragment.appendChild(
          document.createTextNode(before)
        );
      }

      const amountWrap =
        document.createElement("span");

      amountWrap.className = "toncoin-amount";

      const amountText =
        document.createElement("span");

      amountText.textContent = match[1];

      const iconWrap =
        document.createElement("span");

      iconWrap.innerHTML = TON_ICON_SVG;

      amountWrap.appendChild(amountText);
      amountWrap.appendChild(iconWrap.firstElementChild);

      fragment.appendChild(amountWrap);

      cursor =
        match.index +
        match[0].length;
    }

    const remaining = original.slice(cursor);

    if(/\bTON\b/.test(remaining)){
      let remainingCursor = 0;
      let standaloneMatch;

      STANDALONE_TON.lastIndex = 0;

      while(
        (standaloneMatch =
          STANDALONE_TON.exec(remaining)) !== null
      ){
        const before = remaining.slice(
          remainingCursor,
          standaloneMatch.index
        );

        if(before){
          fragment.appendChild(
            document.createTextNode(before)
          );
        }

        const iconWrap =
          document.createElement("span");

        iconWrap.innerHTML = TON_ICON_SVG;

        const icon = iconWrap.firstElementChild;

        icon.classList.add("toncoin-standalone");

        fragment.appendChild(icon);

        remainingCursor =
          standaloneMatch.index +
          standaloneMatch[0].length;
      }

      const after = remaining.slice(remainingCursor);

      if(after){
        fragment.appendChild(
          document.createTextNode(after)
        );
      }
    }else if(remaining){
      fragment.appendChild(
        document.createTextNode(remaining)
      );
    }

    node.parentNode?.replaceChild(fragment, node);
  }


  function processToncoinRoot(root){
    if(!root){
      return;
    }

    if(root.nodeType === Node.TEXT_NODE){
      replaceTonTextNode(root);
      return;
    }

    if(root.nodeType !== Node.ELEMENT_NODE){
      return;
    }

    const walker =
      document.createTreeWalker(
        root,
        NodeFilter.SHOW_TEXT,
        {
          acceptNode(node){
            if(shouldIgnoreNode(node)){
              return NodeFilter.FILTER_REJECT;
            }

            return /\bTON\b/.test(
              node.nodeValue || ""
            )
              ? NodeFilter.FILTER_ACCEPT
              : NodeFilter.FILTER_REJECT;
          }
        }
      );

    const nodes = [];
    let current;

    while((current = walker.nextNode())){
      nodes.push(current);
    }

    nodes.forEach(replaceTonTextNode);
  }


  /*
    Никаких requestAnimationFrame и задержек.
    Новые узлы обрабатываются в той же microtask.
  */
  const toncoinObserver =
    new MutationObserver(mutations=>{
      for(const mutation of mutations){

        if(
          mutation.type === "characterData" &&
          mutation.target
        ){
          replaceTonTextNode(mutation.target);
        }

        mutation.addedNodes.forEach(node=>{
          processToncoinRoot(node);
        });
      }
    });


  function startToncoinRenderer(){
    processToncoinRoot(document.body);

    toncoinObserver.observe(
      document.body,
      {
        subtree:true,
        childList:true,
        characterData:true
      }
    );
  }


  function dateText(value){
    if(!value){
      return "";
    }

    try{
      const normalized =
        String(value).includes("T")
          ? String(value)
          : String(value).replace(" ","T") + "Z";

      return new Date(normalized).toLocaleString(
        "ru-RU",
        {
          day:"2-digit",
          month:"2-digit",
          year:"numeric",
          hour:"2-digit",
          minute:"2-digit"
        }
      );
    }catch(e){
      return String(value);
    }
  }


  
  function operationStatus(item){
    if(item.category === "game"){
      if(String(item.result || "").toLowerCase() === "win"){
        return {
          text:"Выигрыш",
          className:"win"
        };
      }

      return {
        text:"Проигрыш",
        className:"lose"
      };
    }

    const status = String(
      item.status || "pending"
    ).trim().toLowerCase();

    const paidStatuses = [
      "paid",
      "completed",
      "complete",
      "success",
      "successful",
      "succeeded",
      "approved",
      "done",
      "processed"
    ];

    const rejectedStatuses = [
      "rejected",
      "reject",
      "failed",
      "failure",
      "cancelled",
      "canceled",
      "declined",
      "error"
    ];

    if(paidStatuses.includes(status)){
      return {
        text:"Выполнено",
        className:"paid"
      };
    }

    if(rejectedStatuses.includes(status)){
      return {
        text:"Отклонено",
        className:"rejected"
      };
    }

    return {
      text:"В обработке",
      className:"pending"
    };
  }


  function filteredActivity
(){
    if(activeHistoryFilter === "games"){
      return activityItems.filter(
        item=>item.category === "game"
      );
    }

    if(activeHistoryFilter === "deposits"){
      return activityItems.filter(
        item=>item.category === "deposit"
      );
    }

    if(activeHistoryFilter === "withdraws"){
      return activityItems.filter(
        item=>item.category === "withdraw"
      );
    }

    return activityItems;
  }


  function renderHistory(){
    const box = document.getElementById("historyList");

    if(!box){
      return;
    }

    const items = filteredActivity();

    if(!items.length){
      box.innerHTML = `
        <div class="tonix-history-empty">
          Здесь пока нет операций
        </div>
      `;
      return;
    }

    box.innerHTML = items.map(item=>{
      const status = operationStatus(item);
      const amount = Number(item.amount || 0);

      const amountClass =
        amount > 0
          ? "positive"
          : amount < 0
            ? "negative"
            : "";

      const rowClass =
        item.category === "game"
          ? String(item.result || "lose")
          : String(item.category || "other");

      return `
        <div class="tonix-history-row ${rowClass}">
          <div class="tonix-history-left">
            <div class="tonix-history-title">
              ${escapeHtml(item.title || "Операция")}
            </div>

            <div class="tonix-history-subtitle">
              ${escapeHtml(item.subtitle || "")}
            </div>

            <div class="tonix-history-date">
              ${escapeHtml(dateText(item.createdAt))}
            </div>
          </div>

          <div class="tonix-history-right">
            <div
              class="tonix-history-status ${status.className}"
            >
              ${status.text}
            </div>

            <div
              class="tonix-history-amount ${amountClass}"
            >
              ${tonAmountHtml(amount,{
                forceSign:true
              })}
            </div>
          </div>
        </div>
      `;
    }).join("");
  }


  function detectFilter(button){
    const text =
      String(button.textContent || "")
        .trim()
        .toLowerCase();

    if(text.includes("мои игры")){
      return "games";
    }

    if(text.includes("пополн")){
      return "deposits";
    }

    if(text.includes("вывод")){
      return "withdraws";
    }

    return "all";
  }


  function setHistoryFilter(filter, button){
    activeHistoryFilter = filter;

    const buttons =
      [...document.querySelectorAll("#history button")];

    buttons.forEach(item=>{
      const isFilterButton =
        [
          "all",
          "games",
          "deposits",
          "withdraws"
        ].includes(detectFilter(item));

      if(isFilterButton){
        item.classList.toggle(
          "active",
          item === button
        );
      }
    });

    renderHistory();
  }


  async function loadStableHistory(){
    const response = await fetch("/api/activity")
      .then(result=>result.json())
      .catch(()=>({
        ok:false,
        items:[]
      }));

    if(!response.ok){
      const box = document.getElementById("historyList");

      if(box){
        box.innerHTML = `
          <div class="tonix-history-empty">
            Не удалось загрузить историю
          </div>
        `;
      }

      return;
    }

    activityItems =
      Array.isArray(response.items)
        ? response.items
        : [];

    renderHistory();
  }


  async function loadStableMyGames(){
    const box = document.getElementById("myBetsList");

    if(!box){
      return;
    }

    const response = await fetch("/api/activity")
      .then(result=>result.json())
      .catch(()=>({
        ok:false,
        items:[]
      }));

    if(!response.ok){
      box.innerHTML = `
        <div class="balance-card">
          <div>
            <span>Ошибка</span>
            <b>История недоступна</b>
          </div>
        </div>
      `;
      return;
    }

    const games = (response.items || [])
      .filter(item=>item.category === "game");

    if(!games.length){
      box.innerHTML = `
        <div class="balance-card">
          <div>
            <span>Пока пусто</span>
            <b>Нет игр</b>
          </div>
        </div>
      `;
      return;
    }

    box.innerHTML = games.map(item=>{
      const amount = Number(item.amount || 0);
      const isWin = item.result === "win";

      return `
        <div
          class="tonix-profile-game
            ${item.gameType === "case" ? "case" : "jackpot"}"
        >
          <div class="tonix-profile-game-info">
            <b>${escapeHtml(item.title || "Игра")}</b>
            <span>${escapeHtml(dateText(item.createdAt))}</span>
          </div>

          <div class="tonix-profile-game-result">
            <div
              class="tonix-profile-game-badge
                ${isWin ? "win" : "lose"}"
            >
              ${isWin ? "Выигрыш" : "Проигрыш"}
            </div>

            <div
              class="tonix-profile-game-amount
                ${amount >= 0 ? "positive" : "negative"}"
            >
              ${tonAmountHtml(amount,{
                forceSign:true
              })}
            </div>
          </div>
        </div>
      `;
    }).join("");
  }


  /*
    Полностью заменяем прежние загрузчики.
  */
  window.loadHistory = loadStableHistory;
  window.loadMyBets = loadStableMyGames;


  /*
    Перехватываем только кнопки фильтра истории.
  */
  document.addEventListener(
    "click",
    event=>{
      const button =
        event.target.closest("#history button");

      if(!button){
        return;
      }

      const text =
        String(button.textContent || "")
          .trim()
          .toLowerCase();

      const isHistoryFilter =
        text === "все" ||
        text.includes("мои игры") ||
        text.includes("пополн") ||
        text.includes("вывод");

      if(!isHistoryFilter){
        return;
      }

      event.preventDefault();
      event.stopPropagation();
      event.stopImmediatePropagation();

      setHistoryFilter(
        detectFilter(button),
        button
      );
    },
    true
  );


  /*
    При открытии вкладки «История» сразу обновляем данные.
  */
  document.addEventListener(
    "click",
    event=>{
      const button =
        event.target.closest(
          '.nav button[data-p="history"]'
        );

      if(!button){
        return;
      }

      setTimeout(loadStableHistory, 0);
    },
    true
  );


  function start(){
    startToncoinRenderer();

    /*
      Находим активную кнопку «Все».
    */
    const allButton =
      [...document.querySelectorAll("#history button")]
        .find(button=>
          String(button.textContent || "")
            .trim()
            .toLowerCase() === "все"
        );

    if(allButton){
      allButton.classList.add("active");
    }

    /*
      Если история уже открыта после восстановления WebView.
    */
    if(
      document.getElementById("history")
        ?.classList.contains("active")
    ){
      loadStableHistory();
    }
  }


  if(document.readyState === "loading"){
    document.addEventListener(
      "DOMContentLoaded",
      start,
      {once:true}
    );
  }else{
    start();
  }


  window.refreshToncoinSymbols = function(){
    processToncoinRoot(document.body);
  };

})();
</script>

<!-- TONIX_HISTORY_STABLE_FINAL_END -->



<!-- TONIX_HISTORY_STATUS_LAYOUT_FIX_START -->

<style id="tonix-history-status-layout-fix-style">

/* =========================================================
   ОБЩАЯ ИСТОРИЯ
   ========================================================= */

#historyList .tonix-history-row{
  grid-template-columns:minmax(0,1fr) 150px!important;
  align-items:center!important;
  column-gap:16px!important;
}

#historyList .tonix-history-left{
  min-width:0!important;
}

#historyList .tonix-history-right{
  width:150px!important;
  min-width:150px!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:10px!important;

  margin:0!important;
}

#historyList .tonix-history-status{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  width:auto!important;
  min-width:0!important;
  max-width:150px!important;
  min-height:36px!important;

  margin:0!important;
  padding:0 13px!important;

  box-sizing:border-box!important;

  white-space:nowrap!important;
  visibility:visible!important;
  opacity:1!important;
}

#historyList .tonix-history-amount{
  width:100%!important;

  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;

  margin:0!important;

  white-space:nowrap!important;
}

#historyList .tonix-history-amount .toncoin-amount{
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-end!important;

  width:max-content!important;
  min-width:max-content!important;
  max-width:none!important;

  margin:0!important;
  padding:0!important;

  gap:6px!important;

  white-space:nowrap!important;
  flex-wrap:nowrap!important;
}

#historyList .tonix-history-amount .toncoin-symbol{
  position:static!important;

  display:inline-flex!important;
  flex:0 0 15px!important;

  margin:0!important;
  transform:none!important;
}


/* =========================================================
   ПОСЛЕДНИЕ ПОПОЛНЕНИЯ И ВЫВОДЫ НА СТРАНИЦЕ БАЛАНСА
   ========================================================= */

#depositOpsList,
#withdrawOpsList{
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;

  width:100%!important;
  margin:0!important;
  padding:0 0 18px!important;
}

#depositOpsList .tonix-balance-operation,
#withdrawOpsList .tonix-balance-operation{
  position:relative!important;

  width:100%!important;
  min-height:112px!important;

  padding:18px 20px!important;
  box-sizing:border-box!important;

  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:16px!important;

  overflow:hidden!important;

  border:1px solid #292929!important;
  border-radius:23px!important;

  background:
    linear-gradient(
      145deg,
      rgba(22,22,22,.99),
      rgba(9,9,9,.99)
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 11px 28px rgba(0,0,0,.20)!important;
}

#depositOpsList .tonix-balance-operation::before,
#withdrawOpsList .tonix-balance-operation::before{
  content:""!important;

  position:absolute!important;
  inset:0!important;

  pointer-events:none!important;

  background:
    radial-gradient(
      circle at 5% 50%,
      rgba(var(--operation-accent-rgb),.07),
      transparent 31%
    )!important;
}

.tonix-balance-operation.paid{
  --operation-accent-rgb:64,207,125;
}

.tonix-balance-operation.pending{
  --operation-accent-rgb:239,199,109;
}

.tonix-balance-operation.rejected{
  --operation-accent-rgb:255,91,102;
}

.tonix-balance-operation-left{
  position:relative!important;
  z-index:2!important;

  min-width:0!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
}

.tonix-balance-operation-title{
  width:100%!important;

  margin:0!important;

  overflow:hidden!important;

  color:#f2f2f2!important;
  font-size:18px!important;
  font-weight:950!important;
  line-height:1.12!important;
  letter-spacing:-.35px!important;

  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

.tonix-balance-operation-date{
  margin-top:9px!important;

  color:#656565!important;
  font-size:12px!important;
  font-weight:650!important;
  line-height:1!important;
}

.tonix-balance-operation-right{
  position:relative!important;
  z-index:2!important;

  min-width:148px!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:10px!important;

  margin:0!important;
}

.tonix-balance-operation-status{
  min-height:36px!important;
  padding:0 13px!important;

  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  box-sizing:border-box!important;

  border:1px solid #303030!important;
  border-radius:12px!important;

  color:#a0a0a0!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;

  white-space:nowrap!important;

  background:#151515!important;
}

.tonix-balance-operation-status.paid{
  color:#4bd687!important;
  border-color:rgba(75,214,135,.22)!important;
  background:rgba(30,109,67,.16)!important;
}

.tonix-balance-operation-status.pending{
  color:#efc76d!important;
  border-color:rgba(239,199,109,.22)!important;
  background:rgba(120,91,28,.16)!important;
}

.tonix-balance-operation-status.rejected{
  color:#ff6873!important;
  border-color:rgba(255,104,115,.23)!important;
  background:rgba(123,35,42,.17)!important;
}

.tonix-balance-operation-amount{
  width:100%!important;

  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;

  margin:0!important;

  color:#ededed!important;
  font-size:18px!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:-.25px!important;

  white-space:nowrap!important;
}

.tonix-balance-operation-amount.positive{
  color:#4bd687!important;
}

.tonix-balance-operation-amount.negative{
  color:#ff6873!important;
}

/*
  Главное исправление:
  число и значок являются одной горизонтальной строкой.
*/
.tonix-balance-operation-amount .toncoin-amount{
  display:inline-flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;

  align-items:center!important;
  justify-content:flex-end!important;

  width:max-content!important;
  min-width:max-content!important;
  max-width:none!important;

  margin:0!important;
  padding:0!important;

  gap:6px!important;

  white-space:nowrap!important;
  line-height:1!important;
}

.tonix-balance-operation-amount .toncoin-symbol{
  position:static!important;

  display:inline-flex!important;

  width:15px!important;
  height:15px!important;
  min-width:15px!important;
  min-height:15px!important;
  max-width:15px!important;
  max-height:15px!important;

  margin:0!important;

  flex:0 0 15px!important;

  transform:none!important;
  translate:none!important;
}


/* Скрываем старые карточки только после новой отрисовки */

#depositOpsList > .history-card,
#withdrawOpsList > .history-card{
  box-sizing:border-box!important;
}


/* Узкие телефоны */

@media(max-width:370px){

  #historyList .tonix-history-row{
    grid-template-columns:minmax(0,1fr) 126px!important;
    column-gap:10px!important;
  }

  #historyList .tonix-history-right{
    width:126px!important;
    min-width:126px!important;
  }

  #depositOpsList .tonix-balance-operation,
  #withdrawOpsList .tonix-balance-operation{
    padding:16px!important;
    gap:10px!important;
  }

  .tonix-balance-operation-right{
    min-width:126px!important;
  }

  .tonix-balance-operation-status{
    padding:0 10px!important;
    font-size:11px!important;
  }

  .tonix-balance-operation-title{
    font-size:16px!important;
  }

  .tonix-balance-operation-amount{
    font-size:16px!important;
  }
}

</style>

<script id="tonix-history-status-layout-fix-script">
(function(){

  function escapeOperationHtml(value){
    return String(value ?? "")
      .replaceAll("&","&amp;")
      .replaceAll("<","&lt;")
      .replaceAll(">","&gt;")
      .replaceAll('"',"&quot;");
  }


  function normalizeOperationStatus(value){
    const status = String(
      value || "pending"
    ).trim().toLowerCase();

    const paid = [
      "paid",
      "completed",
      "complete",
      "success",
      "successful",
      "succeeded",
      "approved",
      "done",
      "processed"
    ];

    const rejected = [
      "rejected",
      "reject",
      "failed",
      "failure",
      "cancelled",
      "canceled",
      "declined",
      "error"
    ];

    if(paid.includes(status)){
      return {
        id:"paid",
        text:"Выполнено"
      };
    }

    if(rejected.includes(status)){
      return {
        id:"rejected",
        text:"Отклонено"
      };
    }

    return {
      id:"pending",
      text:"В обработке"
    };
  }


  function formatOperationDate(value){
    if(!value){
      return "";
    }

    try{
      const raw = String(value);

      const normalized =
        raw.includes("T")
          ? raw
          : raw.replace(" ","T") + "Z";

      return new Date(normalized).toLocaleString(
        "ru-RU",
        {
          day:"2-digit",
          month:"2-digit",
          year:"numeric",
          hour:"2-digit",
          minute:"2-digit"
        }
      );
    }catch(error){
      return String(value);
    }
  }


  function fallbackTonAmountHtml(value, forceSign){
    const number = Number(value || 0);

    let prefix = "";

    if(forceSign){
      if(number > 0){
        prefix = "+";
      }else if(number < 0){
        prefix = "-";
      }
    }else if(number < 0){
      prefix = "-";
    }

    const amount = Math.abs(number)
      .toFixed(8)
      .replace(/\.?0+$/,"");

    return `
      <span class="toncoin-amount">
        <span>${prefix}${amount || "0"}</span>

        <span
          class="toncoin-symbol"
          aria-label="Toncoin"
          title="Toncoin"
        >
          <svg
            viewBox="0 0 56 56"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true"
          >
            <circle cx="28" cy="28" r="28"></circle>

            <path
              d="
                M18.2 17.3
                c-.9-1.6.3-3.6 2.2-3.6
                h15.2
                c1.9 0 3.1 2 2.2 3.6
                L30.2 41
                c-.7 2.2-3.7 2.2-4.4 0
                L18.2 17.3
                Z

                M22.8 18.1
                28 34.2
                33.2 18.1
                H22.8
                Z
              "
            ></path>
          </svg>
        </span>
      </span>
    `;
  }


  function amountHtml(value, forceSign=true){
    if(typeof window.tonAmountHtml === "function"){
      return window.tonAmountHtml(
        value,
        {forceSign}
      );
    }

    return fallbackTonAmountHtml(
      value,
      forceSign
    );
  }


  async function getOperations(){
    const telegramId =
      typeof u !== "undefined" && u?.id
        ? u.id
        : "";

    return await fetch(
      "/api/operations/" +
      encodeURIComponent(telegramId)
    )
      .then(response=>response.json())
      .catch(()=>({
        ok:false,
        operations:[]
      }));
  }


  function renderBalanceOperations(
    box,
    operations,
    type
  ){
    if(!box){
      return;
    }

    if(!operations.length){
      box.innerHTML = `
        <div class="balance-card">
          <div>
            <span>Пока пусто</span>
            <b>
              ${
                type === "deposit"
                  ? "Нет пополнений"
                  : "Нет выводов"
              }
            </b>
          </div>
        </div>
      `;

      return;
    }

    box.innerHTML = operations.map(operation=>{
      const status =
        normalizeOperationStatus(operation.status);

      const rawAmount =
        Number(operation.amount || 0);

      const signedAmount =
        type === "withdraw"
          ? -Math.abs(rawAmount)
          : Math.abs(rawAmount);

      const amountClass =
        signedAmount > 0
          ? "positive"
          : signedAmount < 0
            ? "negative"
            : "";

      const title =
        type === "deposit"
          ? "Пополнение"
          : "Вывод";

      return `
        <div
          class="
            tonix-balance-operation
            ${status.id}
          "
        >
          <div class="tonix-balance-operation-left">
            <div class="tonix-balance-operation-title">
              ${title}
            </div>

            <div class="tonix-balance-operation-date">
              ${escapeOperationHtml(
                formatOperationDate(
                  operation.created_at
                )
              )}
            </div>
          </div>

          <div class="tonix-balance-operation-right">
            <div
              class="
                tonix-balance-operation-status
                ${status.id}
              "
            >
              ${status.text}
            </div>

            <div
              class="
                tonix-balance-operation-amount
                ${amountClass}
              "
            >
              ${amountHtml(
                signedAmount,
                true
              )}
            </div>
          </div>
        </div>
      `;
    }).join("");
  }


  window.loadDepositOps = async function(){
    const box =
      document.getElementById("depositOpsList");

    if(!box){
      return;
    }

    const response = await getOperations();

    if(!response.ok){
      box.innerHTML = `
        <div class="balance-card">
          <div>
            <span>Ошибка</span>
            <b>Не удалось загрузить пополнения</b>
          </div>
        </div>
      `;

      return;
    }

    const rows = (
      Array.isArray(response.operations)
        ? response.operations
        : []
    )
      .filter(operation=>
        String(operation.type) === "deposit"
      )
      .slice(0,50);

    renderBalanceOperations(
      box,
      rows,
      "deposit"
    );
  };


  window.loadWithdrawOps = async function(){
    const box =
      document.getElementById("withdrawOpsList");

    if(!box){
      return;
    }

    const response = await getOperations();

    if(!response.ok){
      box.innerHTML = `
        <div class="balance-card">
          <div>
            <span>Ошибка</span>
            <b>Не удалось загрузить выводы</b>
          </div>
        </div>
      `;

      return;
    }

    const rows = (
      Array.isArray(response.operations)
        ? response.operations
        : []
    )
      .filter(operation=>
        String(operation.type) === "withdraw"
      )
      .slice(0,50);

    renderBalanceOperations(
      box,
      rows,
      "withdraw"
    );
  };


  /*
    В разных версиях проекта функция могла называться
    loadWithdrawOperations. Оставляем совместимость.
  */
  window.loadWithdrawOperations =
    window.loadWithdrawOps;


  /*
    Повторно обновляем данные при открытии страниц
    пополнения и вывода.
  */
  document.addEventListener(
    "click",
    event=>{
      const depositButton =
        event.target.closest(".open-deposit");

      const withdrawButton =
        event.target.closest(".open-withdraw");

      if(depositButton){
        setTimeout(()=>{
          window.loadDepositOps();
        },0);
      }

      if(withdrawButton){
        setTimeout(()=>{
          window.loadWithdrawOps();
        },0);
      }
    },
    true
  );


  /*
    После загрузки страницы обновляем уже открытые списки.
  */
  function refreshVisibleOperationLists(){
    const depositBox =
      document.getElementById("depositOpsList");

    const withdrawBox =
      document.getElementById("withdrawOpsList");

    if(
      depositBox &&
      depositBox.offsetParent !== null
    ){
      window.loadDepositOps();
    }

    if(
      withdrawBox &&
      withdrawBox.offsetParent !== null
    ){
      window.loadWithdrawOps();
    }
  }


  if(document.readyState === "loading"){
    document.addEventListener(
      "DOMContentLoaded",
      ()=>{
        setTimeout(
          refreshVisibleOperationLists,
          100
        );
      },
      {once:true}
    );
  }else{
    setTimeout(
      refreshVisibleOperationLists,
      100
    );
  }

})();
</script>

<!-- TONIX_HISTORY_STATUS_LAYOUT_FIX_END -->







<!-- TONIX_PAID_STATUS_FINAL_FIX_START -->
<style id="tonix-paid-status-final-fix-style">

/*
  Основная история:
  правая колонка всегда содержит статус сверху,
  сумму и значок Toncoin снизу.
*/
#historyList .tonix-history-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 148px!important;
  align-items:center!important;
  column-gap:14px!important;
}

#historyList .tonix-history-right{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:10px!important;

  width:148px!important;
  min-width:148px!important;

  margin:0!important;
}

#historyList .tonix-history-status{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  width:auto!important;
  min-width:0!important;
  min-height:36px!important;

  margin:0!important;
  padding:0 13px!important;
  box-sizing:border-box!important;

  border-radius:12px!important;

  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;

  white-space:nowrap!important;
  visibility:visible!important;
  opacity:1!important;
}

#historyList .tonix-history-status.paid,
#historyList .tonix-history-status.green{
  color:#4bd687!important;
  border:1px solid rgba(75,214,135,.24)!important;
  background:rgba(30,109,67,.17)!important;
}

#historyList .tonix-history-status.pending{
  color:#efc76d!important;
  border:1px solid rgba(239,199,109,.24)!important;
  background:rgba(120,91,28,.17)!important;
}

#historyList .tonix-history-status.rejected,
#historyList .tonix-history-status.red{
  color:#ff6873!important;
  border:1px solid rgba(255,104,115,.24)!important;
  background:rgba(123,35,42,.18)!important;
}

#historyList .tonix-history-amount{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;

  width:100%!important;
  margin:0!important;

  white-space:nowrap!important;
}

#historyList .tonix-history-amount .toncoin-amount,
#historyList .tonix-history-amount .tonix-fixed-ton-amount{
  display:inline-flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-end!important;

  width:max-content!important;
  min-width:max-content!important;

  margin:0!important;
  padding:0!important;

  gap:6px!important;
  white-space:nowrap!important;
}

@media(max-width:370px){

  #historyList .tonix-history-row{
    grid-template-columns:minmax(0,1fr) 128px!important;
    column-gap:10px!important;
  }

  #historyList .tonix-history-right{
    width:128px!important;
    min-width:128px!important;
  }

  #historyList .tonix-history-status{
    padding:0 10px!important;
    font-size:11px!important;
  }
}

</style>

<script id="tonix-paid-status-final-fix-script">
(function(){

  /*
    Страховка: старые очистители больше не имеют права
    удалять статусы у пополнений и выводов.
  */
  function protectOperationStatuses(){

    const history = document.getElementById("historyList");

    if(!history){
      return;
    }

    history
      .querySelectorAll(".history-card")
      .forEach(card=>{

        const title = String(
          card.querySelector("b")?.textContent || ""
        ).trim();

        if(title !== "Вывод" && title !== "Пополнение"){
          return;
        }

        const statuses = card.querySelectorAll(
          [
            ".tonix-history-status",
            ".profile-history-status",
            ".ops-history-status",
            ".tonix-final-operation-status"
          ].join(",")
        );

        statuses.forEach(status=>{
          status.style.removeProperty("display");
          status.style.setProperty(
            "visibility",
            "visible",
            "important"
          );
          status.style.setProperty(
            "opacity",
            "1",
            "important"
          );
        });
      });
  }

  const observer = new MutationObserver(()=>{
    protectOperationStatuses();
  });

  function start(){
    protectOperationStatuses();

    const history = document.getElementById("historyList");

    if(history){
      observer.observe(history,{
        childList:true,
        subtree:true
      });
    }
  }

  if(document.readyState === "loading"){
    document.addEventListener(
      "DOMContentLoaded",
      start,
      {once:true}
    );
  }else{
    start();
  }

})();
</script>
<!-- TONIX_PAID_STATUS_FINAL_FIX_END -->










<!-- TONIX_CASES_CLEAN_FINAL_START -->

<style id="tonix-cases-clean-final-style">

/* =========================================================
   СТРАНИЦА ВЫБОРА КЕЙСОВ
   ========================================================= */

#casesModePage{
  width:100%!important;
  margin:0!important;
  padding:8px 0 28px!important;
}

#casesModePage > .mode-page-head{
  display:none!important;
}

#casesModePage .cases-list{
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;

  width:100%!important;
  margin:0!important;
  padding:0 0 24px!important;
}


/* =========================================================
   КАРТОЧКА КЕЙСА
   ========================================================= */

#casesModePage .case-select{
  position:relative!important;
  isolation:isolate!important;

  display:grid!important;
  grid-template-columns:78px minmax(0,1fr) 18px!important;
  grid-template-rows:1fr!important;
  align-items:center!important;
  column-gap:14px!important;

  width:100%!important;
  min-width:0!important;
  min-height:124px!important;
  height:auto!important;

  margin:0!important;
  padding:15px 16px 15px 14px!important;
  box-sizing:border-box!important;

  overflow:hidden!important;

  border-radius:22px!important;

  transform:none!important;
  translate:none!important;
}


/* =========================================================
   ИКОНКА КЕЙСА
   ========================================================= */

#casesModePage .case-select .case-box-icon{
  position:relative!important;
  inset:auto!important;

  grid-column:1!important;
  grid-row:1!important;

  align-self:center!important;
  justify-self:center!important;

  display:block!important;

  width:76px!important;
  height:76px!important;
  min-width:76px!important;
  min-height:76px!important;
  max-width:76px!important;
  max-height:76px!important;

  margin:0!important;
  padding:0!important;

  overflow:hidden!important;

  transform:none!important;
  translate:none!important;
}

#casesModePage .case-select .case-box-icon::after{
  left:5px!important;
  right:5px!important;
  top:22px!important;

  width:auto!important;
  height:15px!important;

  box-sizing:border-box!important;
  transform:none!important;
}

#casesModePage .case-select .case-box-icon::before{
  left:50%!important;
  top:50%!important;

  width:38px!important;
  height:38px!important;

  transform:translate(-50%,-34%)!important;
}

#casesModePage .case-select .case-box-icon i{
  left:15px!important;
  right:15px!important;
  top:18px!important;

  width:auto!important;
  height:9px!important;

  margin:0!important;
  transform:none!important;
}


/* =========================================================
   ТЕКСТОВАЯ ЧАСТЬ
   ========================================================= */

#casesModePage .case-select-main{
  position:relative!important;
  z-index:3!important;

  grid-column:2!important;
  grid-row:1!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;

  width:100%!important;
  min-width:0!important;
  height:auto!important;

  margin:0!important;
  padding:0!important;

  overflow:visible!important;

  transform:none!important;
  translate:none!important;
}


/* Название кейса */

#casesModePage .case-select-main > b{
  display:block!important;

  width:100%!important;
  min-width:0!important;

  margin:0!important;
  padding:0!important;

  color:#f4f4f4!important;
  font-size:18px!important;
  font-weight:950!important;
  line-height:22px!important;
  letter-spacing:-.35px!important;

  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;

  transform:none!important;
  translate:none!important;
}


/* Строка «Призы от ... до ...» */

#casesModePage .case-select-main > span{
  display:block!important;

  width:100%!important;
  min-width:0!important;
  max-width:100%!important;

  margin:8px 0 0!important;
  padding:0!important;

  color:#777!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:18px!important;
  letter-spacing:0!important;

  white-space:nowrap!important;
  overflow:visible!important;

  text-align:left!important;
  vertical-align:middle!important;

  transform:none!important;
  translate:none!important;
}


/* Цена кейса */

#casesModePage .case-select-main > strong{
  display:inline-flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:center!important;

  width:auto!important;
  min-width:max-content!important;
  max-width:none!important;

  height:31px!important;
  min-height:31px!important;

  margin:9px 0 0!important;
  padding:0 11px!important;
  box-sizing:border-box!important;

  line-height:31px!important;
  white-space:nowrap!important;
  vertical-align:middle!important;

  transform:none!important;
  translate:none!important;
}


/* =========================================================
   СУММА + ЗНАЧОК TONCOIN
   ========================================================= */

#casesModePage .case-select-main .toncoin-amount,
#casesModePage .case-select-main .tonix-fixed-ton-amount{
  display:inline-flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;

  align-items:center!important;
  justify-content:flex-start!important;

  width:auto!important;
  min-width:max-content!important;
  max-width:none!important;

  margin:0!important;
  padding:0!important;

  gap:5px!important;

  white-space:nowrap!important;
  line-height:inherit!important;
  vertical-align:middle!important;

  position:static!important;

  flex:0 0 auto!important;

  transform:none!important;
  translate:none!important;
}

#casesModePage .case-select-main > span .toncoin-amount,
#casesModePage .case-select-main > span .tonix-fixed-ton-amount{
  margin-left:3px!important;
  line-height:18px!important;
}


/* Сам синий значок */

#casesModePage .case-select-main .toncoin-symbol,
#casesModePage .case-select-main .tonix-fixed-ton-icon,
#casesModePage .case-select-main .toncoin-symbol svg,
#casesModePage .case-select-main .tonix-fixed-ton-icon svg,
#casesModePage .case-select-main .tonix-fixed-ton-amount > svg{
  position:static!important;

  display:block!important;

  width:15px!important;
  height:15px!important;
  min-width:15px!important;
  min-height:15px!important;
  max-width:15px!important;
  max-height:15px!important;

  margin:0!important;
  padding:0!important;

  flex:0 0 15px!important;

  align-self:center!important;
  vertical-align:middle!important;

  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;

  transform:none!important;
  translate:none!important;
}


/* =========================================================
   СТРЕЛКА
   ========================================================= */

#casesModePage .case-select > em{
  position:relative!important;
  inset:auto!important;
  z-index:3!important;

  grid-column:3!important;
  grid-row:1!important;

  align-self:center!important;
  justify-self:end!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  width:18px!important;
  height:44px!important;

  margin:0!important;
  padding:0!important;

  font-size:30px!important;
  font-style:normal!important;
  font-weight:300!important;
  line-height:1!important;

  transform:none!important;
  translate:none!important;
}


/* =========================================================
   ВЫБРАННЫЙ КЕЙС
   ========================================================= */

#casesModePage.tonix-case-list > .cases-list{
  display:flex!important;
}

#casesModePage.tonix-case-list > #caseOpeningPanel,
#casesModePage.tonix-case-list > #caseDetailPanel{
  display:none!important;
}

#casesModePage.tonix-case-selected > .cases-list,
#casesModePage.tonix-case-selected > .case-history-card,
#casesModePage.tonix-case-selected > #caseDetailPanel{
  display:none!important;
}

#casesModePage.tonix-case-selected > #caseOpeningPanel{
  display:block!important;

  position:static!important;
  inset:auto!important;

  width:100%!important;
  height:auto!important;

  margin:0!important;
  padding:0 0 24px!important;

  transform:none!important;
  translate:none!important;
}


/* =========================================================
   УЗКИЕ ТЕЛЕФОНЫ
   ========================================================= */

@media(max-width:370px){

  #casesModePage .case-select{
    grid-template-columns:68px minmax(0,1fr) 15px!important;
    column-gap:11px!important;

    min-height:110px!important;
    padding:12px 12px 12px 11px!important;
  }

  #casesModePage .case-select .case-box-icon{
    width:68px!important;
    height:68px!important;
    min-width:68px!important;
    min-height:68px!important;
    max-width:68px!important;
    max-height:68px!important;
  }

  #casesModePage .case-select-main > b{
    font-size:16px!important;
    line-height:20px!important;
  }

  #casesModePage .case-select-main > span{
    font-size:10.5px!important;
    line-height:16px!important;
  }

  #casesModePage .case-select-main > span .toncoin-amount,
  #casesModePage .case-select-main > span .tonix-fixed-ton-amount{
    line-height:16px!important;
  }

  #casesModePage .case-select-main > strong{
    height:29px!important;
    min-height:29px!important;
    line-height:29px!important;

    margin-top:8px!important;
    padding:0 9px!important;
  }
}

</style>

<script id="tonix-cases-clean-final-script">
(function(){

  function getCasesPage(){
    return document.getElementById("casesModePage");
  }

  function showCaseListClean(){
    const page = getCasesPage();

    if(!page){
      return;
    }

    page.classList.remove("tonix-case-selected");
    page.classList.add("tonix-case-list");

    const list = page.querySelector(":scope > .cases-list");
    const opening = document.getElementById("caseOpeningPanel");
    const detail = document.getElementById("caseDetailPanel");

    list?.style.removeProperty("display");
    opening?.style.removeProperty("display");
    detail?.style.removeProperty("display");

    window.scrollTo({
      top:0,
      left:0,
      behavior:"auto"
    });
  }


  function showSelectedCaseClean(){
    const page = getCasesPage();

    if(!page){
      return;
    }

    page.classList.remove("tonix-case-list");
    page.classList.add("tonix-case-selected");

    const list = page.querySelector(":scope > .cases-list");
    const opening = document.getElementById("caseOpeningPanel");
    const detail = document.getElementById("caseDetailPanel");

    list?.style.removeProperty("display");
    opening?.style.removeProperty("display");
    detail?.style.removeProperty("display");

    window.scrollTo({
      top:0,
      left:0,
      behavior:"auto"
    });
  }


  function wrapFunctions(){

    const oldShowSelectedCase = window.showSelectedCase;

    if(typeof oldShowSelectedCase === "function"){
      window.showSelectedCase = function(caseId){
        const result = oldShowSelectedCase.apply(this, arguments);

        requestAnimationFrame(()=>{
          showSelectedCaseClean();
        });

        return result;
      };
    }


    window.selectCase = function(caseId){
      if(typeof window.showSelectedCase === "function"){
        return window.showSelectedCase(caseId);
      }

      showSelectedCaseClean();
    };


    const oldShowCasesList = window.showCasesList;

    window.showCasesList = function(){
      const result =
        typeof oldShowCasesList === "function"
          ? oldShowCasesList.apply(this, arguments)
          : undefined;

      requestAnimationFrame(()=>{
        showCaseListClean();
      });

      return result;
    };


    const oldCloseCaseResult = window.closeCaseResult;

    window.closeCaseResult = function(){
      const result =
        typeof oldCloseCaseResult === "function"
          ? oldCloseCaseResult.apply(this, arguments)
          : undefined;

      requestAnimationFrame(()=>{
        showCaseListClean();
      });

      return result;
    };


    const oldCloseCaseDetail = window.closeCaseDetail;

    window.closeCaseDetail = function(){
      const result =
        typeof oldCloseCaseDetail === "function"
          ? oldCloseCaseDetail.apply(this, arguments)
          : undefined;

      requestAnimationFrame(()=>{
        showCaseListClean();
      });

      return result;
    };
  }


  function start(){
    wrapFunctions();
    showCaseListClean();
  }


  if(document.readyState === "loading"){
    document.addEventListener(
      "DOMContentLoaded",
      start,
      {once:true}
    );
  }else{
    start();
  }

})();
</script>

<!-- TONIX_CASES_CLEAN_FINAL_END -->




<!-- TONIX_HOME_PREMIUM_LIVE_DESIGN_START -->

<style id="tonix-home-premium-live-design">

/* =========================================================
   ГЛАВНАЯ СТРАНИЦА
   ========================================================= */

#game.page.active{
  overflow:visible!important;
}

#game.page.active > #rooms{
  position:relative!important;

  display:block!important;

  width:100%!important;
  min-height:0!important;

  margin:0!important;
  padding:0 0 26px!important;

  overflow:visible!important;
  isolation:isolate!important;
}

#game.page.active > #rooms::before{
  content:""!important;

  position:absolute!important;
  z-index:-3!important;

  width:310px!important;
  height:310px!important;

  top:-95px!important;
  right:-180px!important;

  border-radius:50%!important;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.10),
      rgba(255,255,255,.025) 38%,
      transparent 70%
    )!important;

  filter:blur(1px)!important;

  animation:
    tonixHomeAmbientFloat
    8s
    ease-in-out
    infinite!important;

  pointer-events:none!important;
}

#game.page.active > #rooms::after{
  content:""!important;

  position:absolute!important;
  z-index:-3!important;

  width:280px!important;
  height:280px!important;

  left:-190px!important;
  top:335px!important;

  border-radius:50%!important;

  background:
    radial-gradient(
      circle,
      rgba(0,152,234,.085),
      rgba(0,152,234,.02) 40%,
      transparent 72%
    )!important;

  animation:
    tonixHomeAmbientFloatSecond
    10s
    ease-in-out
    infinite!important;

  pointer-events:none!important;
}


/* =========================================================
   ЛЕНТА ВЫИГРЫШЕЙ
   ========================================================= */

#tonixHomeLiveWins{
  position:relative!important;
  isolation:isolate!important;

  width:100%!important;
  min-height:105px!important;

  margin:2px 0 14px!important;
  padding:14px!important;
  box-sizing:border-box!important;

  overflow:hidden!important;

  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:20px!important;

  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(0,152,234,.10),
      transparent 32%
    ),
    radial-gradient(
      circle at 7% 90%,
      rgba(255,255,255,.055),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(25,25,25,.98),
      rgba(8,8,8,.995) 67%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -25px 45px rgba(0,0,0,.26),
    0 13px 34px rgba(0,0,0,.28)!important;

  transform:translateZ(0)!important;
}

#tonixHomeLiveWins::before{
  content:""!important;

  position:absolute!important;
  z-index:-1!important;

  inset:-90px!important;

  background:
    conic-gradient(
      from 70deg,
      transparent 0deg,
      rgba(255,255,255,.045) 34deg,
      transparent 78deg,
      transparent 190deg,
      rgba(0,152,234,.045) 225deg,
      transparent 275deg
    )!important;

  animation:
    tonixHomeSlowRotate
    18s
    linear
    infinite!important;

  pointer-events:none!important;
}

.tonix-home-live-head{
  position:relative!important;
  z-index:3!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;

  min-height:34px!important;
  margin:0 0 10px!important;
}

.tonix-home-live-title{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;

  min-width:0!important;
}

.tonix-home-live-title > i{
  position:relative!important;

  display:block!important;

  width:9px!important;
  height:9px!important;
  min-width:9px!important;

  border-radius:50%!important;

  background:#4bd687!important;

  box-shadow:
    0 0 0 4px rgba(75,214,135,.08),
    0 0 15px rgba(75,214,135,.55)!important;

  animation:
    tonixHomeLiveDot
    1.45s
    ease-in-out
    infinite!important;
}

.tonix-home-live-title > div{
  min-width:0!important;
}

.tonix-home-live-title span{
  display:block!important;

  margin:0 0 4px!important;

  color:#666!important;
  font-size:8px!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:2.1px!important;
}

.tonix-home-live-title b{
  display:block!important;

  overflow:hidden!important;

  color:#ededed!important;
  font-size:14px!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:-.2px!important;

  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

.tonix-home-live-online{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  min-width:45px!important;
  height:25px!important;

  padding:0 9px!important;
  box-sizing:border-box!important;

  border:1px solid rgba(75,214,135,.18)!important;
  border-radius:999px!important;

  color:#58db91!important;
  font-size:8px!important;
  font-weight:1000!important;
  line-height:1!important;
  letter-spacing:1.3px!important;

  background:rgba(39,129,82,.10)!important;
}

.tonix-home-live-viewport{
  position:relative!important;
  z-index:3!important;

  width:100%!important;
  min-width:0!important;

  overflow:hidden!important;
}

.tonix-home-live-viewport::before,
.tonix-home-live-viewport::after{
  content:""!important;

  position:absolute!important;
  z-index:5!important;

  top:0!important;
  bottom:0!important;

  width:21px!important;

  pointer-events:none!important;
}

.tonix-home-live-viewport::before{
  left:0!important;

  background:
    linear-gradient(
      90deg,
      rgba(13,13,13,.98),
      transparent
    )!important;
}

.tonix-home-live-viewport::after{
  right:0!important;

  background:
    linear-gradient(
      270deg,
      rgba(10,10,10,.98),
      transparent
    )!important;
}

.tonix-home-live-track{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;

  width:max-content!important;
  min-width:100%!important;

  transform:translate3d(0,0,0)!important;
  will-change:transform!important;
}

.tonix-home-live-track.is-running{
  animation:
    tonixHomeLiveMarquee
    var(--tonix-live-duration,34s)
    linear
    infinite!important;
}

.tonix-home-live-track.is-running:hover{
  animation-play-state:paused!important;
}

.tonix-home-live-item{
  position:relative!important;

  display:grid!important;
  grid-template-columns:35px minmax(105px,auto) auto!important;
  align-items:center!important;
  gap:9px!important;

  min-width:247px!important;
  height:49px!important;

  padding:6px 10px 6px 7px!important;
  box-sizing:border-box!important;

  overflow:hidden!important;

  border:1px solid #282828!important;
  border-radius:14px!important;

  background:
    linear-gradient(
      145deg,
      rgba(24,24,24,.98),
      rgba(10,10,10,.99)
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 7px 17px rgba(0,0,0,.19)!important;

  flex:0 0 auto!important;
}

.tonix-home-live-item::before{
  content:""!important;

  position:absolute!important;

  inset:0!important;

  background:
    radial-gradient(
      circle at 4% 50%,
      rgba(var(--live-accent),.10),
      transparent 31%
    )!important;

  pointer-events:none!important;
}

.tonix-home-live-item.jackpot{
  --live-accent:255,255,255;
}

.tonix-home-live-item.case{
  --live-accent:0,152,234;
}

.tonix-home-live-icon{
  position:relative!important;
  z-index:2!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  width:35px!important;
  height:35px!important;

  overflow:hidden!important;

  border:1px solid rgba(var(--live-accent),.25)!important;
  border-radius:11px!important;

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.20),
      rgba(var(--live-accent),.095) 34%,
      #090909 80%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 14px rgba(var(--live-accent),.08)!important;
}

.tonix-home-live-icon::before{
  content:""!important;

  width:14px!important;
  height:14px!important;

  border:2px solid rgba(255,255,255,.80)!important;
  border-radius:5px!important;

  transform:rotate(45deg)!important;
}

.tonix-home-live-item.case
.tonix-home-live-icon::before{
  width:17px!important;
  height:13px!important;

  border-radius:4px!important;
  transform:none!important;
}

.tonix-home-live-info{
  position:relative!important;
  z-index:2!important;

  min-width:0!important;
}

.tonix-home-live-player{
  display:block!important;

  max-width:135px!important;
  overflow:hidden!important;

  color:#ededed!important;
  font-size:12px!important;
  font-weight:950!important;
  line-height:1!important;

  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

.tonix-home-live-mode{
  display:block!important;

  max-width:145px!important;
  margin-top:6px!important;

  overflow:hidden!important;

  color:#686868!important;
  font-size:9px!important;
  font-weight:750!important;
  line-height:1!important;

  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

.tonix-home-live-amount{
  position:relative!important;
  z-index:2!important;

  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:5px!important;

  min-width:max-content!important;

  color:#4bd687!important;
  font-size:13px!important;
  font-weight:1000!important;
  line-height:1!important;

  white-space:nowrap!important;
}

.tonix-home-live-ton-icon{
  display:block!important;

  width:14px!important;
  height:14px!important;
  min-width:14px!important;
  min-height:14px!important;
  max-width:14px!important;
  max-height:14px!important;

  margin:0!important;
  padding:0!important;

  flex:0 0 14px!important;
}

.tonix-home-live-empty{
  display:flex!important;
  align-items:center!important;

  min-width:100%!important;
  height:49px!important;

  padding:0 12px!important;
  box-sizing:border-box!important;

  border:1px solid #272727!important;
  border-radius:14px!important;

  color:#777!important;
  font-size:11px!important;
  font-weight:750!important;

  background:#0d0d0d!important;
}


/* =========================================================
   ГЛАВНЫЙ БАННЕР
   ========================================================= */

#homeHeroBanner.hero-banner{
  position:relative!important;
  isolation:isolate!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;

  width:100%!important;
  min-height:165px!important;

  margin:0 0 14px!important;
  padding:22px 20px!important;
  box-sizing:border-box!important;

  overflow:hidden!important;

  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:25px!important;

  background:
    radial-gradient(
      circle at 82% 44%,
      rgba(255,255,255,.15),
      transparent 25%
    ),
    radial-gradient(
      circle at 10% 112%,
      rgba(0,152,234,.09),
      transparent 39%
    ),
    linear-gradient(
      137deg,
      #202020 0%,
      #101010 47%,
      #080808 100%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -45px 65px rgba(0,0,0,.28),
    0 16px 39px rgba(0,0,0,.29)!important;

  transform:translateZ(0)!important;

  animation:
    tonixHomeCardEnter
    .55s
    cubic-bezier(.2,.8,.2,1)
    both!important;
}

#homeHeroBanner.hero-banner::before{
  content:""!important;

  position:absolute!important;
  z-index:-1!important;

  inset:-125px!important;

  background:
    conic-gradient(
      from 80deg,
      transparent 0deg,
      rgba(255,255,255,.065) 32deg,
      transparent 76deg,
      transparent 210deg,
      rgba(0,152,234,.045) 247deg,
      transparent 292deg
    )!important;

  animation:
    tonixHomeSlowRotate
    17s
    linear
    infinite!important;
}

#homeHeroBanner.hero-banner::after{
  content:""!important;

  position:absolute!important;
  z-index:-1!important;

  width:175px!important;
  height:175px!important;

  right:-65px!important;
  bottom:-96px!important;

  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:50%!important;

  box-shadow:
    0 0 0 22px rgba(255,255,255,.012),
    0 0 0 45px rgba(255,255,255,.008)!important;

  pointer-events:none!important;
}

#homeHeroBanner > div:first-child{
  position:relative!important;
  z-index:4!important;

  min-width:0!important;
  max-width:235px!important;
}

#homeHeroBanner > div:first-child > span{
  display:block!important;

  margin:0 0 11px!important;

  color:#727272!important;
  font-size:9px!important;
  font-weight:1000!important;
  line-height:1!important;
  letter-spacing:2.7px!important;
}

#homeHeroBanner > div:first-child > b{
  display:block!important;

  margin:0!important;

  color:#f4f4f4!important;
  font-size:34px!important;
  font-weight:1000!important;
  line-height:.98!important;
  letter-spacing:-1.25px!important;

  text-shadow:
    0 5px 22px rgba(255,255,255,.08)!important;
}

#homeHeroBanner > div:first-child > p{
  display:block!important;

  max-width:225px!important;

  margin:13px 0 0!important;

  color:#858585!important;
  font-size:12px!important;
  font-weight:650!important;
  line-height:1.42!important;
}

#homeHeroBanner .hero-orb{
  position:relative!important;
  z-index:3!important;

  width:91px!important;
  height:91px!important;
  min-width:91px!important;

  margin:0 2px 0 0!important;

  overflow:visible!important;

  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:27px!important;

  background:
    linear-gradient(
      135deg,
      #f0f0f0 0%,
      #777 19%,
      #181818 49%,
      #a6a6a6 75%,
      #282828 100%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.37),
    inset 0 -12px 25px rgba(0,0,0,.46),
    0 0 0 8px rgba(255,255,255,.018),
    0 0 33px rgba(255,255,255,.11),
    0 17px 31px rgba(0,0,0,.36)!important;

  transform:rotate(45deg)!important;

  animation:
    tonixHomeHeroOrb
    5.8s
    ease-in-out
    infinite!important;
}

#homeHeroBanner .hero-orb::before{
  content:""!important;

  position:absolute!important;

  inset:9px!important;

  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:21px!important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.12),
      rgba(0,0,0,.20)
    )!important;
}

#homeHeroBanner .hero-orb::after{
  content:""!important;

  position:absolute!important;

  inset:29px!important;

  border:1px solid rgba(255,255,255,.20)!important;
  border-radius:50%!important;

  background:
    radial-gradient(
      circle at 35% 27%,
      #272727,
      #050505 71%
    )!important;

  box-shadow:
    inset 0 1px 5px rgba(255,255,255,.10),
    0 0 15px rgba(255,255,255,.09)!important;
}


/* =========================================================
   РЕЙТИНГ
   ========================================================= */

#homeLeaderboardCard.leader-card{
  position:relative!important;
  isolation:isolate!important;

  display:grid!important;
  grid-template-columns:minmax(0,1fr) 43px!important;
  align-items:center!important;
  gap:14px!important;

  width:100%!important;
  min-height:104px!important;

  margin:0 0 14px!important;
  padding:17px 17px 17px 19px!important;
  box-sizing:border-box!important;

  overflow:hidden!important;

  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:22px!important;

  color:#fff!important;
  text-align:left!important;

  background:
    radial-gradient(
      circle at 91% 22%,
      rgba(232,190,87,.12),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      rgba(23,23,23,.99),
      rgba(8,8,8,.995)
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 -25px 45px rgba(0,0,0,.24),
    0 12px 29px rgba(0,0,0,.23)!important;

  animation:
    tonixHomeCardEnter
    .62s
    .06s
    cubic-bezier(.2,.8,.2,1)
    both!important;
}

#homeLeaderboardCard.leader-card::before{
  content:""!important;

  position:absolute!important;
  z-index:-1!important;

  width:135px!important;
  height:135px!important;

  right:-52px!important;
  top:-67px!important;

  border:1px solid rgba(232,190,87,.08)!important;
  border-radius:50%!important;

  box-shadow:
    0 0 0 18px rgba(232,190,87,.012),
    0 0 0 37px rgba(232,190,87,.008)!important;
}

#homeLeaderboardCard.leader-card > div{
  min-width:0!important;
}

#homeLeaderboardCard.leader-card span{
  display:block!important;

  margin:0 0 7px!important;

  color:#b49242!important;
  font-size:8px!important;
  font-weight:1000!important;
  line-height:1!important;
  letter-spacing:2.5px!important;
}

#homeLeaderboardCard.leader-card b{
  display:block!important;

  margin:0!important;

  color:#f0f0f0!important;
  font-size:22px!important;
  font-weight:1000!important;
  line-height:1!important;
  letter-spacing:-.55px!important;
}

#homeLeaderboardCard.leader-card em{
  display:block!important;

  margin:8px 0 0!important;

  color:#707070!important;
  font-size:11px!important;
  font-weight:650!important;
  font-style:normal!important;
  line-height:1.2!important;
}

#homeLeaderboardCard.leader-card > strong{
  position:relative!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  width:43px!important;
  height:43px!important;

  margin:0!important;

  border:1px solid rgba(232,190,87,.16)!important;
  border-radius:14px!important;

  color:#d2ad54!important;
  font-size:26px!important;
  font-weight:400!important;
  line-height:1!important;

  background:
    rgba(232,190,87,.055)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035)!important;
}


/* =========================================================
   РЕЖИМЫ ИГРЫ
   ТЕКСТЫ НЕ МЕНЯЮТСЯ
   ========================================================= */

#homeModeList.home-mode-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;

  width:100%!important;

  margin:0!important;
  padding:0 0 20px!important;
}

#homeModeList
.home-mode-card.compact-game-card{
  position:relative!important;
  isolation:isolate!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-end!important;

  width:100%!important;
  min-width:0!important;
  min-height:185px!important;
  height:185px!important;

  margin:0!important;
  padding:16px!important;
  box-sizing:border-box!important;

  overflow:hidden!important;

  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:23px!important;

  color:#fff!important;
  text-align:left!important;

  background:
    radial-gradient(
      circle at 73% 23%,
      rgba(255,255,255,.10),
      transparent 31%
    ),
    linear-gradient(
      148deg,
      #1a1a1a 0%,
      #0d0d0d 62%,
      #080808 100%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -37px 50px rgba(0,0,0,.27),
    0 13px 30px rgba(0,0,0,.25)!important;

  transform:translateZ(0)!important;

  transition:
    transform .17s ease,
    border-color .17s ease,
    box-shadow .17s ease!important;
}

#homeModeList
.home-mode-card.compact-game-card:nth-child(1){
  animation:
    tonixHomeCardEnter
    .64s
    .12s
    cubic-bezier(.2,.8,.2,1)
    both!important;
}

#homeModeList
.home-mode-card.compact-game-card:nth-child(2){
  animation:
    tonixHomeCardEnter
    .64s
    .18s
    cubic-bezier(.2,.8,.2,1)
    both!important;
}

#homeModeList
.home-mode-card.compact-game-card::before{
  content:""!important;

  position:absolute!important;
  z-index:-1!important;

  inset:-80px!important;

  background:
    conic-gradient(
      from 110deg,
      transparent,
      rgba(255,255,255,.045),
      transparent 20%,
      transparent 64%,
      rgba(255,255,255,.018),
      transparent
    )!important;

  animation:
    tonixHomeSlowRotate
    21s
    linear
    infinite!important;
}

#homeModeList
.home-mode-card.compact-game-card::after{
  content:""!important;

  position:absolute!important;
  z-index:-1!important;

  width:118px!important;
  height:118px!important;

  right:-52px!important;
  bottom:-59px!important;

  border:1px solid rgba(255,255,255,.045)!important;
  border-radius:50%!important;

  box-shadow:
    0 0 0 18px rgba(255,255,255,.009),
    0 0 0 36px rgba(255,255,255,.006)!important;
}

#homeModeList
.home-mode-card.compact-game-card:active{
  transform:scale(.977)!important;

  border-color:rgba(255,255,255,.18)!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    inset 0 -37px 50px rgba(0,0,0,.27),
    0 7px 18px rgba(0,0,0,.22)!important;
}

#homeModeList .home-mode-visual{
  position:absolute!important;
  z-index:2!important;

  inset:auto!important;

  top:18px!important;
  right:18px!important;

  margin:0!important;

  transform:none!important;
  translate:none!important;
}

#homeModeList .jackpot-mode-visual{
  width:71px!important;
  height:71px!important;

  border:1px solid rgba(255,255,255,.17)!important;
  border-radius:22px!important;

  background:
    linear-gradient(
      135deg,
      #ebebeb,
      #626262 19%,
      #111 53%,
      #969696 78%,
      #292929
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -11px 19px rgba(0,0,0,.42),
    0 0 0 7px rgba(255,255,255,.014),
    0 12px 25px rgba(0,0,0,.31)!important;

  animation:
    tonixHomeModeDiamond
    5.2s
    ease-in-out
    infinite!important;
}

#homeModeList .jackpot-mode-visual i{
  position:absolute!important;

  inset:22px!important;

  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:50%!important;

  background:#070707!important;

  box-shadow:
    inset 0 1px 5px rgba(255,255,255,.09)!important;
}

#homeModeList .cases-mode-card{
  background:
    radial-gradient(
      circle at 78% 20%,
      rgba(0,152,234,.105),
      transparent 31%
    ),
    linear-gradient(
      148deg,
      #191919 0%,
      #0c0c0c 62%,
      #070707 100%
    )!important;
}

#homeModeList .cases-mode-visual{
  width:77px!important;
  height:63px!important;

  border:1px solid rgba(0,152,234,.28)!important;
  border-radius:19px!important;

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.23),
      rgba(0,152,234,.10) 31%,
      #0a0a0a 79%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -13px 20px rgba(0,0,0,.46),
    0 0 23px rgba(0,152,234,.10),
    0 13px 24px rgba(0,0,0,.34)!important;

  animation:
    tonixHomeCaseFloat
    4.8s
    ease-in-out
    infinite!important;
}

#homeModeList .cases-mode-visual::before{
  content:""!important;

  position:absolute!important;

  left:6px!important;
  right:6px!important;
  top:17px!important;

  height:12px!important;

  border-top:1px solid rgba(255,255,255,.20)!important;
  border-bottom:1px solid rgba(0,0,0,.85)!important;
  border-radius:4px!important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.17),
      rgba(0,152,234,.08) 38%,
      rgba(0,0,0,.72)
    )!important;
}

#homeModeList .cases-mode-visual::after{
  content:"T"!important;

  position:absolute!important;
  z-index:5!important;

  left:50%!important;
  top:50%!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  width:31px!important;
  height:31px!important;

  border:1px solid rgba(0,152,234,.34)!important;
  border-radius:10px!important;

  color:#f1f1f1!important;
  font-size:14px!important;
  font-weight:1000!important;
  line-height:1!important;

  background:
    radial-gradient(
      circle at 31% 22%,
      rgba(255,255,255,.25),
      rgba(0,152,234,.10) 34%,
      #090909 79%
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 14px rgba(0,152,234,.17)!important;

  transform:translate(-50%,-35%)!important;
}

#homeModeList .cases-mode-visual i{
  position:absolute!important;

  top:6px!important;

  width:6px!important;
  height:9px!important;

  border-radius:2px!important;

  background:rgba(117,196,238,.48)!important;
}

#homeModeList .cases-mode-visual i:nth-child(1){
  left:12px!important;
}

#homeModeList .cases-mode-visual i:nth-child(2){
  left:35px!important;
}

#homeModeList .cases-mode-visual i:nth-child(3){
  right:12px!important;
}

#homeModeList .compact-game-title{
  position:relative!important;
  z-index:4!important;

  display:block!important;

  max-width:100%!important;
  margin:0!important;

  color:#f1f1f1!important;
  font-size:22px!important;
  font-weight:1000!important;
  line-height:1!important;
  letter-spacing:-.55px!important;

  white-space:nowrap!important;
}

#homeModeList .compact-game-status{
  position:relative!important;
  z-index:4!important;

  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  min-height:25px!important;

  margin:9px 0 0!important;
  padding:0 9px!important;
  box-sizing:border-box!important;

  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:999px!important;

  color:#777!important;
  font-size:9px!important;
  font-weight:900!important;
  line-height:1!important;

  background:rgba(255,255,255,.025)!important;

  white-space:nowrap!important;
}

#homeModeList .cases-mode-card
.compact-game-status{
  color:#69bde9!important;
  border-color:rgba(0,152,234,.16)!important;
  background:rgba(0,152,234,.055)!important;
}


/* =========================================================
   АНИМАЦИИ
   ========================================================= */

@keyframes tonixHomeCardEnter{
  from{
    opacity:0;
    transform:translate3d(0,18px,0) scale(.985);
  }

  to{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
}

@keyframes tonixHomeSlowRotate{
  to{
    transform:rotate(360deg);
  }
}

@keyframes tonixHomeHeroOrb{
  0%,
  100%{
    transform:
      rotate(45deg)
      translate3d(0,0,0);
  }

  50%{
    transform:
      rotate(52deg)
      translate3d(-3px,-4px,0);
  }
}

@keyframes tonixHomeModeDiamond{
  0%,
  100%{
    transform:
      rotate(45deg)
      translate3d(0,0,0);
  }

  50%{
    transform:
      rotate(51deg)
      translate3d(-2px,-3px,0);
  }
}

@keyframes tonixHomeCaseFloat{
  0%,
  100%{
    transform:translate3d(0,0,0);
  }

  50%{
    transform:translate3d(0,-5px,0);
  }
}

@keyframes tonixHomeLiveDot{
  0%,
  100%{
    opacity:1;
    transform:scale(1);
  }

  50%{
    opacity:.48;
    transform:scale(.75);
  }
}

@keyframes tonixHomeAmbientFloat{
  0%,
  100%{
    transform:translate3d(0,0,0) scale(1);
  }

  50%{
    transform:translate3d(-16px,20px,0) scale(1.07);
  }
}

@keyframes tonixHomeAmbientFloatSecond{
  0%,
  100%{
    transform:translate3d(0,0,0);
  }

  50%{
    transform:translate3d(17px,-18px,0);
  }
}

@keyframes tonixHomeLiveMarquee{
  from{
    transform:translate3d(0,0,0);
  }

  to{
    transform:
      translate3d(
        calc(-1 * var(--tonix-live-distance,500px)),
        0,
        0
      );
  }
}


/* =========================================================
   УЗКИЕ ТЕЛЕФОНЫ
   ========================================================= */

@media(max-width:370px){

  #tonixHomeLiveWins{
    min-height:101px!important;
    padding:13px!important;
  }

  .tonix-home-live-item{
    min-width:227px!important;

    grid-template-columns:
      33px
      minmax(95px,auto)
      auto!important;

    gap:8px!important;
  }

  .tonix-home-live-icon{
    width:33px!important;
    height:33px!important;
  }

  #homeHeroBanner.hero-banner{
    min-height:155px!important;
    padding:19px 17px!important;
  }

  #homeHeroBanner > div:first-child > b{
    font-size:30px!important;
  }

  #homeHeroBanner > div:first-child > p{
    max-width:190px!important;
    font-size:11px!important;
  }

  #homeHeroBanner .hero-orb{
    width:78px!important;
    height:78px!important;
    min-width:78px!important;
  }

  #homeHeroBanner .hero-orb::after{
    inset:25px!important;
  }

  #homeModeList.home-mode-list{
    gap:10px!important;
  }

  #homeModeList
  .home-mode-card.compact-game-card{
    min-height:167px!important;
    height:167px!important;

    padding:14px!important;
  }

  #homeModeList .jackpot-mode-visual{
    width:62px!important;
    height:62px!important;

    top:16px!important;
    right:16px!important;
  }

  #homeModeList .jackpot-mode-visual i{
    inset:19px!important;
  }

  #homeModeList .cases-mode-visual{
    width:67px!important;
    height:56px!important;

    top:17px!important;
    right:15px!important;
  }

  #homeModeList .compact-game-title{
    font-size:19px!important;
  }

  #homeModeList .compact-game-status{
    padding:0 8px!important;
    font-size:8px!important;
  }
}


/* Уважение системной настройки уменьшения анимации */

@media(prefers-reduced-motion:reduce){

  #game *,
  #game *::before,
  #game *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
  }
}

</style>


<script id="tonix-home-premium-live-script">
(function(){

  const TON_ICON = `
    <svg
      class="tonix-home-live-ton-icon"
      viewBox="0 0 56 56"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      focusable="false"
    >
      <circle
        cx="28"
        cy="28"
        r="28"
        fill="#0098ea"
      ></circle>

      <path
        fill="#ffffff"
        d="
          M18.2 17.3
          c-.9-1.6.3-3.6 2.2-3.6
          h15.2
          c1.9 0 3.1 2 2.2 3.6
          L30.2 41
          c-.7 2.2-3.7 2.2-4.4 0
          L18.2 17.3
          Z

          M22.8 18.1
          28 34.2
          33.2 18.1
          H22.8
          Z
        "
      ></path>
    </svg>
  `;


  function escapeLiveHtml(value){
    return String(value ?? "")
      .replaceAll("&","&amp;")
      .replaceAll("<","&lt;")
      .replaceAll(">","&gt;")
      .replaceAll('"',"&quot;")
      .replaceAll("'","&#039;");
  }


  function formatLiveAmount(value){
    const number = Math.max(
      0,
      Number(value || 0)
    );

    if(typeof money === "function"){
      return money(number);
    }

    return number
      .toFixed(8)
      .replace(/\.?0+$/,"");
  }


  function normalizePlayerName(value){
    const name = String(value || "Игрок").trim();

    return name || "Игрок";
  }


  function liveCardHtml(item){
    const rawName =
      String(item?.playerName || "Игрок").trim() ||
      "Игрок";

    const name =
      typeof escapeLiveHtml === "function"
        ? escapeLiveHtml(rawName)
        : rawName
            .replaceAll("&","&amp;")
            .replaceAll("<","&lt;")
            .replaceAll(">","&gt;")
            .replaceAll('"',"&quot;");

    const rawPhoto =
      String(item?.photoUrl || "").trim();

    const photo =
      typeof escapeLiveHtml === "function"
        ? escapeLiveHtml(rawPhoto)
        : rawPhoto
            .replaceAll("&","&amp;")
            .replaceAll("<","&lt;")
            .replaceAll(">","&gt;")
            .replaceAll('"',"&quot;");

    const modeNameRaw =
      String(item?.modeName || "").trim();

    const modeName =
      typeof escapeLiveHtml === "function"
        ? escapeLiveHtml(modeNameRaw)
        : modeNameRaw
            .replaceAll("&","&amp;")
            .replaceAll("<","&lt;")
            .replaceAll(">","&gt;")
            .replaceAll('"',"&quot;");

    const firstLetter =
      rawName
        .replace(/^@/,"")
        .slice(0,1)
        .toUpperCase() || "T";

    const amountNumber =
      Math.abs(Number(item?.amount || 0));

    const amountText =
      typeof money === "function"
        ? money(amountNumber)
        : amountNumber
            .toFixed(8)
            .replace(/\.?0+$/,"");

    const modeText =
      String(item?.mode || "") === "case"
        ? `Кейсы · ${modeName || "Кейс"}`
        : "Джекпот";

    const avatarHtml = photo
      ? `
        <div class="tonix-home-live-avatar has-photo">
          <img
            src="${photo}"
            alt=""
            loading="lazy"
            referrerpolicy="no-referrer"
            onerror="
              this.style.display='none';
              this.nextElementSibling.style.display='flex';
            "
          >
          <span style="display:none">
            ${firstLetter}
          </span>
        </div>
      `
      : `
        <div class="tonix-home-live-avatar">
          <span>${firstLetter}</span>
        </div>
      `;

    return `
      <div class="tonix-home-live-card">
        ${avatarHtml}

        <div class="tonix-home-live-info">
          <b>${name}</b>
          <span>${modeText}</span>
        </div>

        <strong class="tonix-home-live-prize">
          +${amountText}
          <span class="tonix-home-live-ton-icon">
            <svg
              viewBox="0 0 56 56"
              aria-hidden="true"
            >
              <circle
                cx="28"
                cy="28"
                r="28"
                fill="#0098ea"
              />
              <path
                fill="#fff"
                d="M17.1 16.3c-.8 0-1.3.8-.9 1.5l10.9 22.4c.4.8 1.6.8 2 0L40 17.8c.4-.7-.2-1.5-1-1.5H17.1zm10.1 19.1-7.6-15.7h7.6v15.7zm2-15.7h7.5l-7.5 15.7V19.7z"
              />
            </svg>
          </span>
        </strong>
      </div>
    `;
  }


  function stopLiveAnimation(track){
    track.classList.remove("is-running");

    track.style.removeProperty(
      "--tonix-live-distance"
    );

    track.style.removeProperty(
      "--tonix-live-duration"
    );
  }


  function startLiveAnimation(track){
    stopLiveAnimation(track);

    requestAnimationFrame(()=>{
      const originalGroup =
        track.querySelector(
          ".tonix-home-live-group"
        );

      if(!originalGroup){
        return;
      }

      const distance =
        Math.ceil(originalGroup.scrollWidth + 9);

      if(distance <= 0){
        return;
      }

      const duration =
        Math.max(
          24,
          Math.min(70,distance / 24)
        );

      track.style.setProperty(
        "--tonix-live-distance",
        `${distance}px`
      );

      track.style.setProperty(
        "--tonix-live-duration",
        `${duration}s`
      );

      track.classList.add("is-running");
    });
  }


  function renderLiveWins(items){
    const track =
      document.getElementById(
        "tonixHomeLiveTrack"
      );

    if(!track){
      return;
    }

    const wins =
      Array.isArray(items)
        ? items.filter(item=>{
            return Number(item?.amount || 0) > 0;
          })
        : [];

    if(!wins.length){
      stopLiveAnimation(track);

      track.innerHTML = `
        <div class="tonix-home-live-empty">
          Пока нет завершённых выигрышей
        </div>
      `;

      return;
    }

    const cards = wins
      .slice(0,20)
      .map(liveCardHtml)
      .join("");

    track.innerHTML = `
      <div
        class="tonix-home-live-group"
        style="
          display:flex;
          align-items:center;
          gap:9px;
        "
      >
        ${cards}
      </div>

      <div
        class="tonix-home-live-group"
        aria-hidden="true"
        style="
          display:flex;
          align-items:center;
          gap:9px;
        "
      >
        ${cards}
      </div>
    `;

    startLiveAnimation(track);
  }


  let liveWinsLoading = false;


  async function loadTonixLiveWins(){
    if(liveWinsLoading){
      return;
    }

    liveWinsLoading = true;

    try{
      const response = await fetch(
        "/api/live-wins",
        {
          cache:"no-store"
        }
      );

      const data = await response.json();

      if(data?.ok){
        renderLiveWins(data.wins);
      }
    }catch(error){
      console.error(
        "TONIX live wins loading error:",
        error
      );
    }finally{
      liveWinsLoading = false;
    }
  }


  function startTonixHomeLive(){
    loadTonixLiveWins();

    window.setInterval(
      loadTonixLiveWins,
      5000
    );

    window.addEventListener(
      "resize",
      ()=>{
        const track =
          document.getElementById(
            "tonixHomeLiveTrack"
          );

        if(track?.querySelector(
          ".tonix-home-live-group"
        )){
          startLiveAnimation(track);
        }
      },
      {passive:true}
    );

    document.addEventListener(
      "visibilitychange",
      ()=>{
        if(!document.hidden){
          loadTonixLiveWins();
        }
      }
    );
  }


  if(document.readyState === "loading"){
    document.addEventListener(
      "DOMContentLoaded",
      startTonixHomeLive,
      {once:true}
    );
  }else{
    startTonixHomeLive();
  }


  window.refreshTonixLiveWins =
    loadTonixLiveWins;

})();
</script>

<!-- TONIX_HOME_PREMIUM_LIVE_DESIGN_END -->


</body>
</html>

<style>
#wheel::before,
#wheel::after {
  border: none !important;
}
</style>

<style>
.wheel:before{
  display:none!important;
  background:none!important;
}
</style>

<style>
.hero-banner{
  min-height:128px!important;
  margin:0 0 18px!important;
  background:
    radial-gradient(circle at 78% 45%, rgba(255,255,255,.20), transparent 24%),
    linear-gradient(135deg,#191919 0%,#0b0b0b 55%,#181818 100%)!important;
  box-shadow:inset 0 0 32px rgba(255,255,255,.035);
}
.hero-banner b{
  font-size:30px!important;
}
.hero-banner p{
  max-width:230px!important;
}
.hero-orb{
  width:78px!important;
  height:78px!important;
  border-radius:22px!important;
  transform:rotate(45deg);
  animation:none!important;
  background:linear-gradient(135deg,#f2f2f2,#1b1b1b 45%,#8c8c8c)!important;
}
.hero-orb:after{
  inset:20px!important;
  background:#080808!important;
}

.room-icon{
  border-radius:20px!important;
  box-shadow:inset 0 0 18px rgba(255,255,255,.08);
}
.room-icon:before{
  width:86px!important;
  height:86px!important;
  border-radius:22px!important;
  animation:heroSpin 7s linear infinite!important;
}
.room-icon span{
  width:25px!important;
  height:25px!important;
  background:#050505!important;
}
.room-icon i{
  position:absolute;
  z-index:3;
  font-style:normal;
  font-size:17px;
  font-weight:1000;
  color:#fff;
  text-shadow:0 2px 8px #000;
}
.tier-1 .room-icon:before{
  background:linear-gradient(135deg,#d8d8d8,#0d0d0d 46%,#7d7d7d)!important;
}
.tier-1 .room-icon i:before{
  content:"₿";
}
.tier-2 .room-icon:before{
  background:linear-gradient(135deg,#95e1ff,#06151d 48%,#2f87a6)!important;
}
.tier-2 .room-icon i:before{
  content:"⚙";
}
.tier-3 .room-icon:before{
  background:linear-gradient(135deg,#ffe889,#171006 48%,#9b741d)!important;
}
.tier-3 .room-icon i:before{
  content:"◆";
}
.room-select{
  background:linear-gradient(145deg,#121212,#090909)!important;
}
.room-select:active{
  transform:scale(.985);
}
</style>

<style>
.quick-compact{
  grid-template-columns:repeat(6,1fr)!important;
}
.quick-compact button{
  font-size:14px!important;
}
.room-balance-card{
  margin-bottom:8px!important;
}
.tier-1 .room-icon i:before{content:"";} 
.tier-2 .room-icon i:before{content:"";}
.tier-3 .room-icon i:before{content:"";}
.tier-1 .room-icon span:before{content:"♟";color:#fff;font-size:20px;font-weight:900}
.tier-2 .room-icon span:before{content:"✦";color:#fff;font-size:20px;font-weight:900}
.tier-3 .room-icon span:before{content:"◆";color:#fff;font-size:20px;font-weight:900}
.room-icon span{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
</style>

<style>
.bonus-card{background:linear-gradient(145deg,#151515,#080808)!important}
.bonus-text{margin-top:14px;color:#888;font-size:14px;line-height:1.4}
#bonusStatus{margin-top:12px;padding:12px;border:1px solid #252525;border-radius:12px;background:#0b0b0b;color:#888;font-size:13px}
</style>

<style>
.promo-box{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  background:#0b0b0b;
  border:1px solid #252525;
}
.promo-box span{
  display:block;
  color:#888;
  font-size:13px;
  margin-bottom:10px;
}
.promo-box input{
  width:100%;
  padding:15px;
  border-radius:14px;
  border:1px solid #292929;
  background:#070707;
  color:#fff;
  font-size:17px;
  text-transform:uppercase;
  outline:none;
}
.promo-box button{
  width:100%;
  margin-top:10px;
  height:50px;
}
</style>

<style>
.support-chat{
  height:420px;
  overflow-y:auto;
  padding:12px;
  background:#0b0b0b;
  border:1px solid #242424;
  border-radius:18px;
}
.support-msg{
  max-width:82%;
  margin:8px 0;
  padding:12px 13px;
  border-radius:15px;
  font-size:14px;
  line-height:1.35;
}
.support-msg span{
  display:block;
  margin-top:7px;
  color:#777;
  font-size:10px;
}
.support-msg.user{
  margin-left:auto;
  background:#f2f2f2;
  color:#111;
}
.support-msg.user span{color:#555}
.support-msg.admin{
  margin-right:auto;
  background:#151515;
  border:1px solid #292929;
  color:#fff;
}
.support-empty{
  text-align:center;
  color:#777;
  margin-top:160px;
}
.support-send{
  display:grid;
  grid-template-columns:1fr 104px;
  gap:8px;
  margin-top:10px;
}
.support-send input{
  min-width:0;
  padding:15px;
  border-radius:14px;
  border:1px solid #292929;
  background:#090909;
  color:#fff;
  outline:none;
}
.support-send button{
  border:0;
  border-radius:14px;
  background:#f2f2f2;
  color:#111;
  font-weight:900;
}
</style>

<style>
.support-welcome{
  padding:16px;
  border-radius:18px;
  background:linear-gradient(145deg,#151515,#080808);
  border:1px solid #292929;
  margin-bottom:12px;
}
.support-welcome b{
  display:block;
  font-size:21px;
  margin-bottom:8px;
}
.support-welcome span{
  display:block;
  color:#888;
  font-size:13px;
  line-height:1.35;
}
.support-topics{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:10px;
}
.support-topics button{
  min-height:42px;
  border-radius:12px;
  border:1px solid #292929;
  background:#111;
  color:#fff;
  font-weight:800;
}
.support-topics button.active{
  background:#f2f2f2;
  color:#111;
}
.support-topic-selected{
  padding:11px 13px;
  border-radius:13px;
  background:#0b0b0b;
  border:1px solid #242424;
  color:#888;
  font-size:13px;
  margin-bottom:10px;
}
.support-msg.system{
  max-width:100%;
  margin:10px auto;
  text-align:center;
  background:#0f1b13;
  border:1px solid #1f5c31;
  color:#bfffd0;
}
.support-sign{
  background:linear-gradient(90deg,#49d17d,#c8ffd8,#49d17d);
  background-size:200% auto;
  -webkit-background-clip:text;
  color:transparent!important;
  animation:supportGlow 2s linear infinite;
  font-weight:900;
}
@keyframes supportGlow{
  to{background-position:200% center}
}
</style>

<style>
.support-topic-buttons-in-chat{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:12px;
}
.support-topic-buttons-in-chat button{
  min-height:38px;
  border-radius:11px;
  border:1px solid #303030;
  background:#0b0b0b;
  color:#fff;
  font-weight:900;
}
.support-topic-buttons-in-chat button:active{
  transform:scale(.97);
  background:#f2f2f2;
  color:#111;
}
</style>

<style>
.support-close-btn{
  width:100%;
  height:48px;
  margin-bottom:10px;
  border-radius:14px;
  border:1px solid #303030;
  background:#151515;
  color:#fff;
  font-weight:900;
}
.support-close-btn:active{
  transform:scale(.98);
  background:#242424;
}
</style>

<style>
.center{
  width:150px!important;
  height:150px!important;
}
.winner-center{
  width:100%;
  padding:6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.winner-center-avatar,
.winner-center-avatar-letter{
  width:38px;
  height:38px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #2f2f2f;
  margin-bottom:4px;
}
.winner-center-avatar-letter{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#222;
  color:#fff;
  font-size:18px;
  font-weight:900;
}
.winner-center-label{
  color:#888;
  font-size:9px;
  line-height:1;
}
.winner-center-name{
  max-width:115px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
  font-weight:900;
  line-height:1.15;
  margin-top:3px;
}
.winner-center-prize{
  color:#49d17d;
  font-size:11px;
  font-weight:900;
  margin-top:3px;
}
</style>

<style>
.admin-paid,.admin-reject{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:92px!important;
  height:38px!important;
  padding:0 12px!important;
  margin-top:8px!important;
  border-radius:12px!important;
  font-size:12px!important;
  font-weight:900!important;
  opacity:1!important;
  visibility:visible!important;
}
.admin-reject{background:#2b1010!important;color:#ff6b6b!important}
.admin-paid{background:#102416!important;color:#49d17d!important}
</style>

<style>
.admin-paid,.admin-reject{
  display:flex!important;
  width:100%!important;
  min-height:44px!important;
  opacity:1!important;
  visibility:visible!important;
  position:relative!important;
  z-index:50!important;
}
.admin-reject{
  background:#2a1010!important;
  color:#ff6b6b!important;
  border:1px solid #5a2020!important;
}
.admin-paid{
  background:#102416!important;
  color:#49d17d!important;
  border:1px solid #245a36!important;
}
</style>

<style>
.admin-only{
  visibility:visible;
}
</style>

<script>
(function(){
  const ADMIN_IDS = ["8530945555"];

  function forceAdminMenu(){
    const idText = document.getElementById("profileId")?.textContent || "";
    const currentId = String(window.u?.id || "").trim();
    const ok = ADMIN_IDS.some(id => idText.includes(id) || currentId === id);

    if(!ok) return;

    document.querySelectorAll(".admin-only").forEach(el=>{
      el.style.setProperty("display","flex","important");
      el.style.setProperty("visibility","visible","important");
      el.style.setProperty("opacity","1","important");
    });
  }

  setInterval(forceAdminMenu, 500);
  window.addEventListener("load", forceAdminMenu);
  document.addEventListener("visibilitychange", forceAdminMenu);
})();
</script>

<style>
.admin-only[style*="display: none"]{
  display:flex!important;
}
</style>

<style>
.admin-withdraw-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  margin-top:14px!important;
}
.admin-withdraw-actions button{
  display:block!important;
  width:100%!important;
  height:52px!important;
  min-height:52px!important;
  font-size:15px!important;
  opacity:1!important;
  visibility:visible!important;
}
</style>

<style>
.admin-withdraw-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  margin-top:14px!important;
  overflow:visible!important;
}
.admin-withdraw-actions button{
  width:100%!important;
  min-height:52px!important;
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
}
</style>

<style>
.admin-wd-card{
  display:block!important;
  padding:14px!important;
  margin:12px 0!important;
  border-radius:18px!important;
  background:#111!important;
  border:1px solid #242424!important;
}
.admin-wd-top{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:10px!important;
}
.admin-wd-user{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
}
.admin-wd-avatar,.admin-wd-avatar img,.admin-wd-letter{
  width:42px!important;
  height:42px!important;
  border-radius:50%!important;
  object-fit:cover!important;
}
.admin-wd-letter{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#222;
  color:#fff;
  font-weight:900;
}
.admin-wd-info{
  min-width:0!important;
}
.admin-wd-info b{
  display:block!important;
  font-size:16px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  max-width:155px!important;
}
.admin-wd-info span{
  display:block!important;
  color:#777!important;
  font-size:11px!important;
  line-height:1.25!important;
}
.admin-wd-sum{
  text-align:right!important;
  flex-shrink:0!important;
}
.admin-wd-sum b{
  display:block!important;
  font-size:15px!important;
}
.admin-wd-sum span{
  display:block!important;
  font-size:12px!important;
  font-weight:900!important;
}
.admin-wd-details{
  display:grid!important;
  grid-template-columns:92px 1fr!important;
  gap:8px!important;
  margin-top:12px!important;
}
.admin-wd-details div{
  padding:10px!important;
  border-radius:12px!important;
  background:#090909!important;
  border:1px solid #242424!important;
  min-width:0!important;
}
.admin-wd-details span{
  display:block!important;
  color:#777!important;
  font-size:11px!important;
  margin-bottom:4px!important;
}
.admin-wd-details b{
  display:block!important;
  font-size:13px!important;
  color:#fff!important;
}
.admin-wd-wallet{
  word-break:break-all!important;
  overflow-wrap:anywhere!important;
  font-size:12px!important;
}
.admin-withdraw-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  margin-top:12px!important;
}
.admin-withdraw-actions button{
  width:100%!important;
  min-height:46px!important;
  font-size:13px!important;
  padding:8px!important;
}
</style>

<style id="tonix-online-design-fix">
.top{
  position:relative!important;
  height:56px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.brand.brand-online{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  white-space:nowrap!important;
}

.brand.brand-online .tonix-logo{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  width:auto!important;
}

.online-badge{
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;

  height:27px!important;
  min-width:48px!important;
  padding:0 10px!important;

  background:linear-gradient(145deg,#151515,#0a0a0a)!important;
  border:1px solid #292929!important;
  border-radius:999px!important;

  color:#eeeeee!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:800!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 5px 18px rgba(0,0,0,.25)!important;
}

.online-badge i{
  display:block!important;
  width:7px!important;
  height:7px!important;
  min-width:7px!important;

  background:#42d77d!important;
  border-radius:50%!important;

  box-shadow:
    0 0 5px rgba(66,215,125,.9),
    0 0 12px rgba(66,215,125,.45)!important;

  animation:tonixOnlinePulse 1.4s ease-in-out infinite!important;
}

.online-badge span{
  display:inline!important;
  width:auto!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:900!important;
}

@keyframes tonixOnlinePulse{
  0%,100%{
    opacity:1;
    transform:scale(1);
  }
  50%{
    opacity:.4;
    transform:scale(.72);
  }
}
</style>


<!-- TONIX_FINAL_SCROLL_LAYOUT_FIX_START -->
<style id="tonix-final-scroll-layout-fix">

/* Возвращаем обычную вертикальную прокрутку */
html{
  height:auto!important;
  min-height:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}

body{
  position:static!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;

  overflow-x:hidden!important;
  overflow-y:auto!important;

  overscroll-behavior-y:auto!important;
  touch-action:pan-y!important;
}

/* Основные контейнеры не должны обрезать страницу */
body .app{
  position:relative!important;
  display:block!important;

  width:100%!important;
  height:auto!important;
  min-height:100vh!important;
  max-height:none!important;

  overflow:visible!important;
}

body .app > .wrap{
  position:relative!important;
  display:block!important;

  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  margin:0 auto!important;
  padding-top:12px!important;
  padding-bottom:110px!important;

  overflow:visible!important;
  transform:none!important;
  translate:none!important;
}

/* Неактивные страницы скрыты */
body .app .wrap > .page{
  display:none!important;
}

/* Активная страница отображается обычным блоком */
body .app .wrap > .page.active{
  display:block!important;
  position:static!important;

  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  margin:0!important;
  padding:0!important;

  overflow:visible!important;

  transform:none!important;
  translate:none!important;

  align-items:initial!important;
  align-content:initial!important;
  justify-content:initial!important;
}

/* Заголовки основных вкладок окончательно убираем */
body .app .wrap > #history > .page-title,
body .app .wrap > #balance > .page-title,
body .app .wrap > #bonusesPage > .page-title,
body .app .wrap > #profile > .page-title{
  display:none!important;
  position:static!important;

  width:0!important;
  height:0!important;
  min-height:0!important;

  margin:0!important;
  padding:0!important;

  overflow:hidden!important;
  opacity:0!important;
}

/* Контент сразу под логотипом без огромной пустоты */
body .app .wrap > #history.page.active,
body .app .wrap > #balance.page.active,
body .app .wrap > #bonusesPage.page.active,
body .app .wrap > #profile.page.active{
  padding-top:10px!important;
}

/* Первые видимые элементы без искусственных отступов */
body .app .wrap > #history.page.active > .tabs,
body .app .wrap > #balance.page.active > .balance-card:first-of-type,
body .app .wrap > #profile.page.active > .profile-card{
  position:static!important;
  margin-top:0!important;
  transform:none!important;
  translate:none!important;
}

/* Бонусы: первая настоящая карточка */
body .app .wrap > #bonusesPage.page.active > *:not(.page-title):first-of-type{
  position:static!important;
  margin-top:0!important;
  transform:none!important;
  translate:none!important;
}

/* Главная и страницы режимов также свободно прокручиваются */
#game,
#rooms,
#jackpotModePage,
#casesModePage,
#round{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  overflow:visible!important;
}

/* Нижняя панель остаётся фиксированной */
.nav{
  position:fixed!important;
  bottom:0!important;
  overflow:hidden!important;
}

</style>
<!-- TONIX_FINAL_SCROLL_LAYOUT_FIX_END -->


<style id="tonix-real-final-layout-fix">
/*
  Этот блок намеренно расположен в самом конце файла.
  Он перекрывает все старые конфликтующие стили.
*/

html,
body{
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;

  overflow-x:hidden!important;
  overflow-y:auto!important;

  position:static!important;
  touch-action:pan-y!important;
  overscroll-behavior-y:auto!important;
}

body{
  padding-bottom:0!important;
}

body .app{
  display:block!important;
  position:relative!important;

  width:100%!important;
  min-height:100vh!important;
  height:auto!important;
  max-height:none!important;

  overflow:visible!important;
}

body .app > .wrap{
  display:block!important;
  position:relative!important;

  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  margin:0 auto!important;
  padding:12px 16px 112px!important;

  overflow:visible!important;
  transform:none!important;
  translate:none!important;
}

/* Все обычные страницы по умолчанию скрыты */
body .app .wrap > section.page{
  display:none!important;
}

/* Активная страница идёт обычным потоком сразу под логотипом */
body .app .wrap > section.page.active{
  display:block!important;

  position:static!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;

  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  margin:0!important;
  padding:0!important;

  overflow:visible!important;

  transform:none!important;
  translate:none!important;

  align-items:initial!important;
  align-content:initial!important;
  justify-content:initial!important;
}

/* Удалённые заголовки не оставляют невидимую высоту */
body .app .wrap > #history > .page-title,
body .app .wrap > #balance > .page-title,
body .app .wrap > #bonusesPage > .page-title,
body .app .wrap > #profile > .page-title{
  display:none!important;
  position:static!important;

  width:0!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;

  margin:0!important;
  padding:0!important;

  opacity:0!important;
  overflow:hidden!important;
}

/* Первые элементы основных разделов начинаются без огромного отступа */
body .app .wrap > #profile.page.active > .profile-card,
body .app .wrap > #balance.page.active > .balance-card:first-of-type,
body .app .wrap > #history.page.active > .tabs,
body .app .wrap > #bonusesPage.page.active > :first-child:not(.page-title){
  position:static!important;

  margin-top:0!important;
  padding-top:0;

  transform:none!important;
  translate:none!important;
}

/* Убираем возможное центрирование вложенных контейнеров */
body .app .wrap > #profile.page.active > *,
body .app .wrap > #balance.page.active > *,
body .app .wrap > #history.page.active > *,
body .app .wrap > #bonusesPage.page.active > *{
  translate:none!important;
}

/* Содержимое можно прокрутить выше фиксированного меню */
body .app .wrap > #profile.page.active,
body .app .wrap > #balance.page.active,
body .app .wrap > #history.page.active,
body .app .wrap > #bonusesPage.page.active{
  padding-bottom:30px!important;
}

/* Нижнее меню остаётся фиксированным */
body .nav{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:0!important;

  transform:translateX(-50%)!important;
  z-index:99999!important;
}
</style>

<style id="tonix-tabs-position-absolute-final">
/* Основные страницы */
#profile.page.active,
#balance.page.active,
#bonusesPage.page.active,
#history.page.active{
  display:block!important;
  position:static!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;

  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;

  margin:0!important;
  padding:10px 0 40px!important;

  overflow:visible!important;
  transform:none!important;
  translate:none!important;
}

/*
  Главное исправление:
  внутренние элементы больше не могут быть абсолютно
  поставлены по центру страницы.
*/
#profile.page.active > *,
#balance.page.active > *,
#bonusesPage.page.active > *,
#history.page.active > *{
  position:static!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;

  transform:none!important;
  translate:none!important;
}

/* Удалённые заголовки */
#profile > .page-title,
#balance > .page-title,
#bonusesPage > .page-title,
#history > .page-title{
  display:none!important;
  width:0!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

/* Первые настоящие блоки */
#profile.page.active > .profile-card,
#balance.page.active > .balance-card:first-of-type,
#bonusesPage.page.active > :not(.page-title):first-of-type,
#history.page.active > .tabs{
  position:static!important;
  inset:auto!important;
  top:auto!important;
  margin-top:0!important;
  padding-top:0!important;
  transform:none!important;
  translate:none!important;
}

/* Возвращаем нормальную прокрутку */
html,
body{
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  touch-action:pan-y!important;
}

.app,
.wrap{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}

.wrap{
  padding-bottom:115px!important;
}
</style>


<style id="tonix-jackpot-one-screen-final">

/* =====================================================
   ДЖЕКПОТ НА ОДНОМ ЭКРАНЕ
   ===================================================== */

/*
  Когда раунд скрыт через inline display:none —
  он остаётся скрытым. Когда JS открывает его,
  включается компактная grid-разметка.
*/
#round{
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0 0 6px!important;

  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  grid-template-areas:
    "room room"
    "stats stats"
    "wheel wheel"
    "balance mybet"
    "form form"
    "quick quick"
    "button button"
    "winners winners"
    "players players"!important;

  gap:8px!important;
  overflow:visible!important;
  align-content:start!important;
}

#round[style*="display:none"],
#round[style*="display: none"]{
  display:none!important;
}


/* Верхняя карточка: игра и банк */
#round > .room-card{
  grid-area:room!important;

  min-height:58px!important;
  height:58px!important;
  margin:0!important;
  padding:9px 14px!important;

  box-sizing:border-box!important;
  border-radius:16px!important;

  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}

#round > .room-card .muted{
  margin-bottom:1px!important;
  font-size:11px!important;
  line-height:1!important;
}

#round > .room-card .room,
#round > .room-card .bank{
  font-size:22px!important;
  line-height:1!important;
  font-weight:1000!important;
}


/* Игроки / таймер / минимальная ставка */
#round > .stats{
  grid-area:stats!important;

  height:62px!important;
  min-height:62px!important;
  margin:0!important;
  padding:0!important;

  display:grid!important;
  grid-template-columns:1fr 1fr 1fr!important;
  align-items:center!important;
}

#round > .stats .stat{
  min-width:0!important;
  min-height:0!important;
  height:62px!important;
  padding:0 5px!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;

  box-sizing:border-box!important;
}

#round > .stats .stat > b{
  font-size:20px!important;
  line-height:1!important;
}

#round > .stats .stat > span{
  margin-top:4px!important;
  font-size:10px!important;
  line-height:1!important;
}


/* Компактный таймер */
#round .timer-ring{
  width:48px!important;
  height:48px!important;
  margin:0 auto!important;
}

#round .timer-ring:before{
  inset:4px!important;
}

#round .timer-ring b{
  font-size:14px!important;
  line-height:1!important;
}

#round .timer-ring + span{
  display:none!important;
}


/* Колесо */
#round > .wheelbox{
  grid-area:wheel!important;

  width:100%!important;
  height:232px!important;
  min-height:232px!important;
  margin:0!important;
  padding:0!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  overflow:visible!important;
}

#round .wheel{
  width:224px!important;
  height:224px!important;
  min-width:224px!important;
  min-height:224px!important;
  margin:0 auto!important;
}

#round .center{
  width:108px!important;
  height:108px!important;
}

#round .center > #bank2{
  font-size:23px!important;
  line-height:1!important;
}

#round .center-wait{
  margin-top:6px!important;
  gap:5px!important;
}

#round .center-wait span:last-child{
  max-width:74px!important;
  font-size:8px!important;
  line-height:1.15!important;
}

#round .pointer{
  transform:scale(.78)!important;
  transform-origin:center bottom!important;
}


/* Баланс и поставленная сумма — в одну строку */
#round > .room-balance-card{
  grid-area:balance!important;
}

#round > #myBetCard{
  grid-area:mybet!important;
}

#round > .room-balance-card,
#round > #myBetCard{
  min-width:0!important;
  width:100%!important;
  height:44px!important;
  min-height:44px!important;

  margin:0!important;
  padding:0 10px!important;

  display:flex!important;
  align-items:center!important;

  box-sizing:border-box!important;
  border-radius:14px!important;

  font-size:10px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#round > .room-balance-card b,
#round > #myBetCard b{
  margin-left:4px!important;
  font-size:12px!important;
  line-height:1!important;
  white-space:nowrap!important;
}


/* Ставка и процент */
#round > .grid{
  grid-area:form!important;

  height:68px!important;
  min-height:68px!important;
  margin:0!important;
  gap:8px!important;
}

#round > .grid > .box{
  min-width:0!important;
  height:68px!important;
  min-height:68px!important;

  margin:0!important;
  padding:9px 12px!important;

  box-sizing:border-box!important;
  border-radius:14px!important;
}

#round > .grid > .box > span{
  font-size:10px!important;
  line-height:1!important;
}

#round > .grid > .box > b{
  margin-top:8px!important;
  font-size:23px!important;
  line-height:1!important;
}

#round .amount-input-wrap{
  margin-top:5px!important;
  height:34px!important;
}

#round #amount{
  height:34px!important;
  min-height:34px!important;
  padding:0 38px 0 0!important;

  font-size:23px!important;
  line-height:34px!important;
}

#round #clearAmount{
  width:29px!important;
  height:29px!important;
  min-width:29px!important;
  right:1px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
}

#round #myColor{
  height:4px!important;
  margin-top:8px!important;
}


/* Быстрые кнопки */
#round > .quick-compact{
  grid-area:quick!important;

  height:38px!important;
  min-height:38px!important;
  margin:0!important;

  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:5px!important;
}

#round > .quick-compact button{
  min-width:0!important;
  width:100%!important;
  height:38px!important;
  min-height:38px!important;
  padding:0 2px!important;

  border-radius:11px!important;

  font-size:11px!important;
  line-height:1!important;
}


/* Главная кнопка ниже ввода — логичный порядок */
#round > #betBtn{
  grid-area:button!important;

  width:100%!important;
  height:47px!important;
  min-height:47px!important;
  margin:0!important;
  padding:0 10px!important;

  border-radius:15px!important;

  font-size:17px!important;
  line-height:1!important;
  font-weight:1000!important;
}


/* Последние победители */
#round > .winners-box{
  grid-area:winners!important;

  height:76px!important;
  min-height:76px!important;

  margin:0!important;
  padding:8px 10px!important;

  box-sizing:border-box!important;
  border-radius:14px!important;
  overflow:hidden!important;
}

#round > .winners-box .winners-title{
  height:12px!important;
  margin:0 0 6px!important;

  font-size:9px!important;
  line-height:12px!important;
}

#round > .winners-box .winners-line{
  height:43px!important;
  min-height:43px!important;
  margin:0!important;
  gap:6px!important;

  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
}

#round > .winners-box .winners-line::-webkit-scrollbar{
  display:none!important;
}

#round .winner-pill{
  min-width:125px!important;
  height:43px!important;
  min-height:43px!important;

  padding:5px 7px!important;
  gap:6px!important;

  box-sizing:border-box!important;
  border-radius:11px!important;
}

#round .winner-pill img{
  width:29px!important;
  height:29px!important;
}

#round .winner-pill b{
  max-width:76px!important;
  font-size:10px!important;
  line-height:1.1!important;
}

#round .winner-pill span{
  margin-top:2px!important;
  font-size:9px!important;
  line-height:1!important;
}


/* Список участников остаётся ниже, но пустой блок места не занимает */
#round > #playersList{
  grid-area:players!important;
  margin:0!important;
  padding:0!important;
}

#round > #playersList:empty{
  display:none!important;
}


/* =====================================================
   НЕВЫСОКИЕ ЭКРАНЫ
   ===================================================== */
@media(max-height:760px){

  #round{
    gap:6px!important;
  }

  #round > .room-card{
    height:52px!important;
    min-height:52px!important;
    padding-top:7px!important;
    padding-bottom:7px!important;
  }

  #round > .room-card .room,
  #round > .room-card .bank{
    font-size:20px!important;
  }

  #round > .stats,
  #round > .stats .stat{
    height:55px!important;
    min-height:55px!important;
  }

  #round .timer-ring{
    width:43px!important;
    height:43px!important;
  }

  #round > .wheelbox{
    height:204px!important;
    min-height:204px!important;
  }

  #round .wheel{
    width:198px!important;
    height:198px!important;
    min-width:198px!important;
    min-height:198px!important;
  }

  #round .center{
    width:94px!important;
    height:94px!important;
  }

  #round .center > #bank2{
    font-size:20px!important;
  }

  #round > .room-balance-card,
  #round > #myBetCard{
    height:40px!important;
    min-height:40px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }

  #round > .grid,
  #round > .grid > .box{
    height:61px!important;
    min-height:61px!important;
  }

  #round > .grid > .box{
    padding:7px 10px!important;
  }

  #round > .quick-compact,
  #round > .quick-compact button{
    height:34px!important;
    min-height:34px!important;
  }

  #round > #betBtn{
    height:43px!important;
    min-height:43px!important;
    font-size:15px!important;
  }

  #round > .winners-box{
    height:68px!important;
    min-height:68px!important;
    padding-top:6px!important;
    padding-bottom:6px!important;
  }

  #round > .winners-box .winners-line{
    height:39px!important;
    min-height:39px!important;
  }

  #round .winner-pill{
    height:39px!important;
    min-height:39px!important;
  }
}


/* Совсем низкий экран */
@media(max-height:680px){

  #round > .wheelbox{
    height:178px!important;
    min-height:178px!important;
  }

  #round .wheel{
    width:174px!important;
    height:174px!important;
    min-width:174px!important;
    min-height:174px!important;
  }

  #round .center{
    width:82px!important;
    height:82px!important;
  }

  #round .center > #bank2{
    font-size:17px!important;
  }

  #round .center-wait span:last-child{
    font-size:7px!important;
  }

  #round > .winners-box{
    height:61px!important;
    min-height:61px!important;
  }

  #round > .winners-box .winners-title{
    display:none!important;
  }

  #round > .winners-box .winners-line{
    height:45px!important;
    min-height:45px!important;
  }
}


/* Узкие телефоны */
@media(max-width:360px){

  #round{
    gap:5px!important;
  }

  #round > .room-balance-card,
  #round > #myBetCard{
    font-size:9px!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }

  #round > .room-balance-card b,
  #round > #myBetCard b{
    font-size:10px!important;
  }

  #round > .quick-compact{
    gap:3px!important;
  }

  #round > .quick-compact button{
    font-size:10px!important;
  }
}

</style>


<!-- TONIX_OPERATIONS_ABSOLUTE_FINAL_START -->
<style id="tonix-operations-absolute-final-style">

/* Крупный доступный баланс */
#balance > .balance-card:first-of-type{
  min-height:118px!important;
  padding:20px 22px!important;
  border-radius:23px!important;
}

#balance > .balance-card:first-of-type > div{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
}

#balance > .balance-card:first-of-type > div > span{
  margin:0 0 10px!important;
  color:#777!important;
  font-size:14px!important;
  font-weight:600!important;
  line-height:1!important;
}

#balance > .balance-card:first-of-type .userBalance{
  display:inline-flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;

  width:max-content!important;
  max-width:100%!important;

  margin:0!important;
  padding:0!important;

  color:#f4f4f4!important;
  font-size:31px!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:-.8px!important;

  white-space:nowrap!important;
}

/* Сумма и значок всегда одной строкой */
.tonix-fixed-ton-amount{
  display:inline-flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-start!important;

  width:max-content!important;
  min-width:max-content!important;
  max-width:100%!important;

  gap:6px!important;
  margin:0!important;
  padding:0!important;

  color:inherit!important;
  font:inherit!important;
  line-height:inherit!important;
  letter-spacing:inherit!important;

  white-space:nowrap!important;
  vertical-align:middle!important;
}

.tonix-fixed-ton-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  width:15px!important;
  height:15px!important;
  min-width:15px!important;
  min-height:15px!important;
  max-width:15px!important;
  max-height:15px!important;

  margin:0!important;
  padding:0!important;

  overflow:hidden!important;
  border:0!important;
  border-radius:50%!important;

  background:#0098ea!important;
  flex:0 0 15px!important;
  transform:none!important;
}

.tonix-fixed-ton-icon svg{
  display:block!important;
  width:15px!important;
  height:15px!important;
  min-width:15px!important;
  min-height:15px!important;
  max-width:15px!important;
  max-height:15px!important;
  margin:0!important;
  padding:0!important;
}

/* Одинаковая карточка во всех списках операций */
.tonix-final-operation-card{
  --op-rgb:145,145,145;

  position:relative!important;
  isolation:isolate!important;

  width:100%!important;
  min-height:118px!important;
  padding:19px 20px!important;
  box-sizing:border-box!important;

  display:grid!important;
  grid-template-columns:minmax(0,1fr) 148px!important;
  align-items:center!important;
  column-gap:16px!important;

  overflow:hidden!important;

  border:1px solid #292929!important;
  border-radius:23px!important;

  background:
    radial-gradient(
      circle at 5% 50%,
      rgba(var(--op-rgb),.065),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(22,22,22,.99),
      rgba(8,8,8,.99)
    )!important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 11px 28px rgba(0,0,0,.20)!important;
}

.tonix-final-operation-card.status-paid{
  --op-rgb:64,207,125;
}

.tonix-final-operation-card.status-pending{
  --op-rgb:239,199,109;
}

.tonix-final-operation-card.status-rejected{
  --op-rgb:255,91,102;
}

.tonix-final-operation-left{
  position:relative!important;
  z-index:2!important;

  min-width:0!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
}

.tonix-final-operation-title{
  display:block!important;
  width:100%!important;

  margin:0!important;

  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;

  color:#f3f3f3!important;
  font-size:18px!important;
  font-weight:950!important;
  line-height:1.12!important;
  letter-spacing:-.4px!important;
}

.tonix-final-operation-date{
  display:block!important;
  margin-top:10px!important;

  color:#656565!important;
  font-size:12px!important;
  font-weight:650!important;
  line-height:1!important;
  white-space:nowrap!important;
}

.tonix-final-operation-right{
  position:relative!important;
  z-index:2!important;

  width:148px!important;
  min-width:148px!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  justify-content:center!important;
  gap:11px!important;

  margin:0!important;
  padding:0!important;
}

.tonix-final-operation-status{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  width:auto!important;
  min-width:0!important;
  min-height:37px!important;

  margin:0!important;
  padding:0 13px!important;
  box-sizing:border-box!important;

  border:1px solid #303030!important;
  border-radius:12px!important;

  color:#aaa!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
  white-space:nowrap!important;

  background:#151515!important;

  visibility:visible!important;
  opacity:1!important;
}

.tonix-final-operation-status.paid{
  color:#4bd687!important;
  border-color:rgba(75,214,135,.23)!important;
  background:rgba(30,109,67,.16)!important;
}

.tonix-final-operation-status.pending{
  color:#efc76d!important;
  border-color:rgba(239,199,109,.23)!important;
  background:rgba(120,91,28,.16)!important;
}

.tonix-final-operation-status.rejected{
  color:#ff6873!important;
  border-color:rgba(255,104,115,.24)!important;
  background:rgba(123,35,42,.17)!important;
}

.tonix-final-operation-amount{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;

  width:100%!important;
  min-width:0!important;

  margin:0!important;
  padding:0!important;

  color:#ededed!important;
  font-size:18px!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:-.25px!important;

  white-space:nowrap!important;
}

.tonix-final-operation-amount.deposit{
  color:#4bd687!important;
}

.tonix-final-operation-amount.withdraw{
  color:#ff6873!important;
}

#historyList,
#operationsList,
#depositOpsList,
#withdrawOpsList{
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;

  width:100%!important;
  margin:0!important;
  padding:0 0 20px!important;
}

@media(max-width:370px){

  .tonix-final-operation-card{
    grid-template-columns:minmax(0,1fr) 124px!important;
    column-gap:10px!important;
    padding:17px 15px!important;
  }

  .tonix-final-operation-right{
    width:124px!important;
    min-width:124px!important;
  }

  .tonix-final-operation-title{
    font-size:16px!important;
  }

  .tonix-final-operation-status{
    min-height:35px!important;
    padding:0 10px!important;
    font-size:11px!important;
  }

  .tonix-final-operation-amount{
    font-size:16px!important;
  }

  #balance > .balance-card:first-of-type .userBalance{
    font-size:28px!important;
  }
}

</style>

<script id="tonix-operations-absolute-final-script">
(function(){

  const TON_ICON_SVG = `
    <span
      class="tonix-fixed-ton-icon"
      aria-label="Toncoin"
      title="Toncoin"
    >
      <svg
        viewBox="0 0 56 56"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
        focusable="false"
      >
        <circle
          cx="28"
          cy="28"
          r="28"
          fill="#0098ea"
        ></circle>

        <path
          fill="#ffffff"
          d="
            M18.2 17.3
            c-.9-1.6.3-3.6 2.2-3.6
            h15.2
            c1.9 0 3.1 2 2.2 3.6
            L30.2 41
            c-.7 2.2-3.7 2.2-4.4 0
            L18.2 17.3
            Z

            M22.8 18.1
            28 34.2
            33.2 18.1
            H22.8
            Z
          "
        ></path>
      </svg>
    </span>
  `;


  function escapeTonixOperation(value){
    return String(value ?? "")
      .replaceAll("&","&amp;")
      .replaceAll("<","&lt;")
      .replaceAll(">","&gt;")
      .replaceAll('"',"&quot;");
  }


  function normalizeStatus(rawStatus){
    const value = String(
      rawStatus ?? ""
    ).trim().toLowerCase();

    const paidStatuses = new Set([
      "paid",
      "completed",
      "complete",
      "success",
      "successful",
      "succeeded",
      "approved",
      "done",
      "processed",
      "finished"
    ]);

    const rejectedStatuses = new Set([
      "rejected",
      "reject",
      "failed",
      "failure",
      "cancelled",
      "canceled",
      "declined",
      "error"
    ]);

    if(paidStatuses.has(value)){
      return {
        id:"paid",
        text:"Выполнено"
      };
    }

    if(rejectedStatuses.has(value)){
      return {
        id:"rejected",
        text:"Отклонено"
      };
    }

    return {
      id:"pending",
      text:"В обработке"
    };
  }


  function operationDate(rawValue){
    if(!rawValue){
      return "";
    }

    const original = String(rawValue);

    try{
      const normalized = original.includes("T")
        ? original
        : original.replace(" ","T") + "Z";

      const date = new Date(normalized);

      if(Number.isNaN(date.getTime())){
        return original;
      }

      return date.toLocaleString(
        "ru-RU",
        {
          day:"2-digit",
          month:"2-digit",
          year:"numeric",
          hour:"2-digit",
          minute:"2-digit"
        }
      );
    }catch(error){
      return original;
    }
  }


  function operationAmountHtml(operation){
    const type = String(operation?.type || "");
    const number = Math.abs(Number(operation?.amount || 0));

    const sign = type === "withdraw"
      ? "-"
      : "+";

    const formatted =
      typeof money === "function"
        ? money(number)
        : number.toFixed(8).replace(/\.?0+$/,"");

    return `
      <span class="tonix-fixed-ton-amount">
        <span>${sign}${escapeTonixOperation(formatted)}</span>
        ${TON_ICON_SVG}
      </span>
    `;
  }


  function operationCardHtml(operation){
    const type = String(operation?.type || "");
    const isWithdraw = type === "withdraw";
    const status = normalizeStatus(operation?.status);

    return `
      <div
        class="
          history-card
          tonix-final-operation-card
          status-${status.id}
        "
      >
        <div class="tonix-final-operation-left">
          <b class="tonix-final-operation-title">
            ${isWithdraw ? "Вывод" : "Пополнение"}
          </b>

          <span class="tonix-final-operation-date">
            ${escapeTonixOperation(
              operationDate(operation?.created_at)
            )}
          </span>
        </div>

        <div class="tonix-final-operation-right">
          <div
            class="
              tonix-final-operation-status
              ${status.id}
            "
          >
            ${status.text}
          </div>

          <div
            class="
              tonix-final-operation-amount
              ${isWithdraw ? "withdraw" : "deposit"}
            "
          >
            ${operationAmountHtml(operation)}
          </div>
        </div>
      </div>
    `;
  }


  function emptyOperationsHtml(text){
    return `
      <div class="balance-card">
        <div>
          <span>Пока пусто</span>
          <b>${escapeTonixOperation(text)}</b>
        </div>
      </div>
    `;
  }


  async function fetchOperations(){
    try{
      const response = await fetch(
        "/api/operations/" + encodeURIComponent(u.id)
      );

      const data = await response.json();

      return Array.isArray(data.operations)
        ? data.operations
        : [];
    }catch(error){
      console.error(
        "TONIX operation loading error:",
        error
      );

      return [];
    }
  }


  /*
    Профиль → История операций.
    Здесь теперь строго только пополнения и выводы.
  */
  loadOperations = async function(){
    const box = document.getElementById("operationsList");

    if(!box){
      return;
    }

    const allOperations = await fetchOperations();

    const rows = allOperations.filter(operation=>{
      const type = String(operation?.type || "");

      return type === "deposit" || type === "withdraw";
    });

    box.innerHTML = rows.length
      ? rows.map(operationCardHtml).join("")
      : emptyOperationsHtml("Нет пополнений и выводов");
  };


  /*
    Последние пополнения и последние выводы
    внутри соответствующих страниц баланса.
  */
  renderOpsBox = async function(boxId, requestedType){
    const box = document.getElementById(boxId);

    if(!box){
      return;
    }

    const allOperations = await fetchOperations();

    const rows = allOperations
      .filter(operation=>{
        return String(operation?.type || "") === requestedType;
      })
      .slice(0,5);

    box.innerHTML = rows.length
      ? rows.map(operationCardHtml).join("")
      : emptyOperationsHtml(
          requestedType === "deposit"
            ? "Нет пополнений"
            : "Нет выводов"
        );
  };


  loadDepositOps = function(){
    return renderOpsBox(
      "depositOpsList",
      "deposit"
    );
  };


  loadWithdrawOps = function(){
    return renderOpsBox(
      "withdrawOpsList",
      "withdraw"
    );
  };


  /*
    Баланс выводим сразу готовой HTML-конструкцией.
    Слова TON в DOM больше не появляется даже на мгновение,
    поэтому исчезает мерцание перед появлением значка.
  */
  bal = function(value, force=false){
    const normalized =
      typeof floorTon === "function"
        ? floorTon(value)
        : Math.max(0, Number(value || 0));

    if(
      typeof caseBalanceVisualLocked !== "undefined" &&
      caseBalanceVisualLocked &&
      !force
    ){
      return;
    }

    currentBalance = normalized;

    const balanceText =
      Number(currentBalance || 0).toFixed(2);

    document
      .querySelectorAll(".userBalance")
      .forEach(element=>{
        element.innerHTML = `
          <span class="tonix-fixed-ton-amount">
            <span>${balanceText}</span>
            ${TON_ICON_SVG}
          </span>
        `;
      });

    const roomBalance =
      document.getElementById("roomBalanceCard");

 