#mainContent {
    height: 100%;
}
.hostMoBu {
    position: fixed;
    top: 73%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    margin: 0;
}
#gameDiv {
  margin-left: 10px;
  margin-right: 10px;
  min-height: 95vh;
}
html, body {
margin: 0;
    padding: 0;
    height: 100%;
    color: #ffffff;
    background-color: #0e1a18;
    background-image: repeating-linear-gradient(90deg, #253e39 0px, #25423d 40px, #162421 40px, #162421 80px), repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0px, rgba(0, 0, 0, 0.15) 2px, transparent 2px, transparent 40px);
    background-blend-mode: overlay;
}
#raiseRangeSlider::-webkit-slider-thumb, #betRangeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white; /* вместо синего */
    cursor: pointer;
    margin-top: -7px; /* выравнивание по полосе */
}

#raiseRangeSlider::-moz-range-thumb, #betRangeSlider::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    border: none;
    cursor: pointer;
}
.login-box {
    position: relative;
    height: 100%;
    min-height: 100vh; /* чтобы во фрейме не схлопывался */
    overflow: hidden;
}


.login-box::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: url(/img/holdem.png);

    background-repeat: no-repeat;

    z-index: -1;
}

.card {
  margin-right: auto !important;
  margin-left: auto !important;
}

body {
  font-family: 'Roboto', sans-serif;
  width: 100%;
    height: 100%;
	margin: 0 auto;
}

code {
    font-size: 54px;
    text-align: center;
    display: block;
}

.playingCard_black {
  float: left;
  border: 5px solid black;
  background-color: white;
  border-radius: 5px;
  height: 135px;
  width: 90px;
  color: black;
  padding: 5px;
  margin: 8px;
  font-size: 28px;
}

#usernamesMoney {
  font-size: 30px;
  min-height: 219px;
}

.playingCard_red {
  float: left;
  border: 5px solid black;
  background-color: white;
  border-radius: 5px;
  height: 135px;
  width: 90px;
  color: red;
  padding: 5px;
  margin: 8px;
  font-size: 28px;
}

.menuButtons {
  zoom: 0.8;
  margin: 2px;
}

.card-content {
  font-size: 16px;
}

.theirTurn {
  border: 5px solid yellow;
}

.playingCard_red_opponent {
  float: left;
  border: 5px solid black;
  background-color: white;
  border-radius: 5px;
  height: 84px;
  width: 60px;
  color: red;
  padding: 5px;
  margin: 4px;
  font-size: 18px;
}

.playingCard_black_opponent {
  float: left;
  border: 5px solid black;
  background-color: white;
  border-radius: 5px;
  height: 84px;
  width: 60px;
  color: black;
  padding: 5px;
  margin: 4px;
  font-size: 18px;
}

.blankCard {
  float: left;
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
  border: 5px solid black;
  border-radius: 5px;
  height: 84px;
  width: 60px;
  padding: 10px;
  margin: 4px;
}

.selected {
  background: grey;
  border: 2px solid red;
}

#divStart {
  text-align: center;
}

.modal {
  position: absolute;
}

.toast {
  position: relative;
  z-index: -1 !important;
}
/* ===== КРУГЛЫЙ СТОЛ ===== */
#opponentCards{
  position:relative;
  width:600px;
  height:420px;
  margin: 80px auto 0 auto;
  border-radius:50%;
      background: radial-gradient(circle at center, #0a7632 0%, #06361a 70%);
  border:8px solid #3b2a12;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8), 0 0 180px rgba(0, 255, 120, 0.15);
}

/* центр */
#communityCards{
    position: absolute;
    top: 280px;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 2px;
	z-index: 222;
}
#usernamesCards {
    display: none;
}
/* игрок */
.playerSeat{
  position:absolute;
  transform:translate(-50%,-50%);
  text-align:center;
  color:white;
  font-size:12px;
}

.playerName{
    color: #ffffff;
    background: #1a1a1a;
    border-radius: 5px;
    width: 80px;
    border: 1px solid #343434;
    z-index: 2222;
    position: relative;
}
.chip{
  width:30px;
  height:30px;
  border-radius:50%;
  display:inline-block;
  position:relative;

  /* основа */
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.15) 35%, transparent 36%),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,.35), transparent 60%),
    repeating-conic-gradient(
      #ffffff 0deg 18deg,
      #d32f2f 18deg 36deg
    );

  border:2px solid #f5e6b3;

  box-shadow:
    inset 0 0 6px rgba(255,255,255,.6),
    inset 0 0 18px rgba(0,0,0,.7),
    0 3px 6px rgba(0,0,0,.7);
}


/* внутренняя часть фишки */
.chip::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;

  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), transparent 40%),
    linear-gradient(180deg,#d32f2f,#8b0000);

  box-shadow:
    inset 0 0 8px rgba(0,0,0,.7),
    inset 0 2px 4px rgba(255,255,255,.4);
}


/* центральный круг */
.chip::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:7px;
  height:7px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#f5e6b3;
  box-shadow:0 0 4px rgba(0,0,0,.6);
}
.playerMoney{
    font-size: 12px;
    background: #1a1a1a;
    border-radius: 5px;
    width: 80px;
    border: 1px solid #343434;
}
.betLine{
margin-top: -80px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
        z-index: 2222;
	white-space: nowrap;
}
#playNext {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
}
#status {
    position: fixed;
    bottom: 140px;
    left: 100px;
}
#blindStatus {
    position: fixed;
    bottom: 140px;
    right: 100px;
}
#toast-container{
display: none;
}
.playerCards{
    margin-top: -35px;
    margin-left: 45px;
    position: absolute;
    z-index: 1111;
    width: 30px;
}

.cardBack{
display: inline-block;
    position: relative;
    border-radius: 5px;
    padding: 10px 10px;
    margin-left: -20px;
    font-weight: bold;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .25);
    overflow: hidden;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .25), transparent 35%), radial-gradient(circle at 70% 75%, rgba(255, 255, 255, .12), transparent 40%), linear-gradient(160deg, #0d0d0d, #000000 60%, #101010);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, .08), inset 0 0 40px rgba(0, 0, 0, .9), 0 4px 10px rgba(0, 0, 0, .6);
    transform: rotate(8deg);
}

/* блестящая линия */
.cardBack::after{
    content:"";
    position:absolute;
    top:-40%;
    left:-20%;
    width:60%;
    height:180%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transform:rotate(25deg);
    opacity:.35;
    pointer-events:none;
}


#playerInformationCard {
left: 50%;
    position: fixed;
    bottom: 50px;
	transform: translateX(-50%);
}
.poker-card{
  width:70px;
  height:98px;
  background:white;
  border-radius:5px;
  position:relative;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.6);
  display:inline-block;
  margin:2px;
  font-family:Arial;
  font-weight:bold;
}

.poker-card.red{ color:#d40000; }
.poker-card.black{ color:#111; }

.poker-card .top{
position: absolute;
    top: 8px;
    left: 8px;
    font-size: 26px;
    line-height: 20px;
    text-align: center;
}

.poker-card .bottom{
position: absolute;
    bottom: 25px;
    right: 8px;
    font-size: 66px;
    line-height: 14px;
    text-align: center;
}

.poker-card .center{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:28px;
}

.card-back{
  width:70px;
  height:98px;
  border-radius:10px;
  background:linear-gradient(135deg,#002b5c,#001433);
  box-shadow:0 6px 18px rgba(0,0,0,0.7);
  border:2px solid #0ff;
}
#potCenter {
position: absolute;
    left: 50%;
	    margin-left: -90px;
    top: 250px;
    margin-top: 100px;
    background: #042813;
    padding: 8px 70px 8px 0px;
    color: #ffffff;
    font-size: 20px;
    line-height: 20px;
    border-radius: 10px;
}


#potText{
    margin-left: 20px;
}


#hostModal, #joinModal {
width: 520px;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(1) !important;
  margin: 0 !important;
}

#hostModal .modal-content {
  margin: 0 !important;
}

.modal-content{

  margin:auto;
  padding:28px 28px 30px;
  border-radius:18px;
  background:linear-gradient(180deg,#1c2331,#11161f);
  box-shadow:
    0 25px 70px rgba(0,0,0,.8),
    inset 0 0 0 1px rgba(255,255,255,.05);
  color:#fff;
  position:relative;
  animation:modalShow .25s ease;
}

/* заголовок */
.modal-content h4{
  text-align:center;
  margin-top:0;
  margin-bottom:18px;
  font-size:22px;
  font-weight:700;
  letter-spacing:.5px;
}

/* описание */
.modal-content p{
  text-align:center;
  opacity:.85;
  font-size:14px;
  margin-bottom:20px;
}

/* поле */
.modal-content .input-field{
  margin-top:15px;
}

.modal-content input{
  background:#0e1420 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:10px !important;
  color:#fff !important;
  text-align:center;
  font-size:16px !important;
  transition:.2s;
}

.modal-content input:focus{
  border:1px solid #00c853 !important;
  box-shadow:0 0 0 2px rgba(0,200,83,.25);
}

/* label */
.modal-content label{
  color:#9aa4b6 !important;
}

/* кнопка */
.modal-content .btn-flat{
  width:100%;
  margin-top:18px;
  border-radius: 5px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.5px;
  background:linear-gradient(180deg,#00c853,#009624);
  transition:.2s;
  padding: 10px;
      color: #ffffff;
}
#raiseModal .modal-content .btn-flat {
    border-radius: 5px;
	font-size: 14px;
}

/* список игроков */
#playersNames {
   font-size: 15px;
    width: 200px;
    margin: 20px auto 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* кнопка старт */
#startGameArea {
    display: flex;
    justify-content: center; /* по центру */
    align-items: center;
    gap: 10px;               /* расстояние между кнопками */
}

#startGameArea button {
    width: 200px;
    margin-top: 15px; /* убираем старый отступ */
    background: linear-gradient(180deg, #ffd54f, #ffb300);
    color: #000;
    font-weight: 700;
    border-radius: 5px;
	font-size: 12px;
    letter-spacing: 0;
}

#startGameArea button:hover{
  transform:translateY(-1px);
}

/* анимация */
@keyframes modalShow{
  from{opacity:0;transform:translateY(40px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}



#joinModal{
  backdrop-filter: blur(6px);
}

/* окно */
#joinModal .modal-content{
  width:520px;
  max-width:92%;
  margin:auto;
  padding:28px 28px 30px;
  border-radius:18px;
  background:linear-gradient(180deg,#1c2331,#11161f);
  box-shadow:
    0 25px 70px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(255,255,255,.05);
  color:#fff;
  position:relative;
  animation:modalShow .25s ease;
}

/* заголовок */
#joinModal h4{
  text-align:center;
  margin-top:0;
  margin-bottom:18px;
  font-size:22px;
  font-weight:700;
  letter-spacing:.5px;
}

/* описание */
#joinModal p{
  text-align:center;
  opacity:.85;
  font-size:12px;
  margin-bottom:20px;
}

/* поля */
#joinModal .input-field{
  margin-top:14px;
}

#joinModal input{
  background:#0e1420 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:10px !important;
  color:#fff !important;
  text-align:center;
  font-size:16px !important;
  transition:.2s;
}

#joinModal input:focus{
  border:1px solid #00c853 !important;
  box-shadow:0 0 0 2px rgba(0,200,83,.25);
}

/* label */
#joinModal label{
  color:#9aa4b6 !important;
}

/* кнопка Join */
#joinModal .btn-flat{
  width:100%;
  margin-top:18px;
  border-radius:12px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.5px;
  background:linear-gradient(180deg,#00c853,#009624);
  color:#fff !important;
  box-shadow:0 6px 25px rgba(0,200,83,.45);
  transition:.2s;
      padding: 10px;
}

#joinModal .btn-flat:hover{
  transform:translateY(-1px);
}

/* список игроков */
#playersNamesJoined{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px;
    opacity: .9;
    width: 200px;
    margin: 0 auto;
}
#backToMenuBtn {
    display: block;
    position: fixed;
    bottom: 25px;
box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), 0 6px 20px rgba(0, 0, 0, .7);
    left: 50%;
    transform: translateX(-50%);
padding: 25px 30px;
    line-height: 1;
    z-index: 99999;
	font-size: 12px;
}
/* если хост стартует */
#startGameAreaDisconnectSituation button{
  width:100%;
  margin-top:16px;
  background:linear-gradient(180deg,#ffd54f,#ffb300);
  color:#000;
  font-weight:700;
  border-radius:12px;
  padding:14px;
  box-shadow:0 6px 25px rgba(255,200,0,.5);
}

/* футер */
#joinModal .modal-footer{
  background:transparent;
  border-top:1px solid rgba(255,255,255,.05);
  text-align:center;
  padding:12px;
}

#joinModal .modal-footer .btn-flat{
  background:#2a3446;
  box-shadow:none;
  width:auto;
  padding:10px 18px;
  border-radius:10px;
}

#joinModal .modal-footer .btn-flat:hover{
  background:#36435c;
}

/* анимация */
@keyframes modalShow{
  from{opacity:0;transform:translateY(40px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.btn, .btn-large{
    text-decoration:none;
    color:#fff;
    background:linear-gradient(180deg,#2f2f2f,#151515);
    text-align:center;
    letter-spacing:.5px;
    cursor:pointer;
    border:none;
    border-radius:10px;
    padding:20px 30px;
    font-weight:600;
    position:relative;
    overflow:hidden;

    border:1px solid rgba(255,255,255,.15);

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.15),
      inset 0 -4px 12px rgba(0,0,0,.9),
      0 4px 10px rgba(0,0,0,.6);

    transition:all .18s ease;
}





/* hover */
.btn:hover, .btn-large:hover{
    background:linear-gradient(180deg,#3a3a3a,#1a1a1a);
    transform:translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.2),
      inset 0 -6px 16px rgba(0,0,0,1),
      0 8px 20px rgba(0,0,0,.9);
}


/* нажатие */
.btn:active, .btn-large:active{
    transform:translateY(1px) scale(.98);
    box-shadow:
      inset 0 4px 12px rgba(0,0,0,1),
      0 2px 6px rgba(0,0,0,.7);
}


/* зеленая кнопка действия (call / bet / start) */
.btn.green{
    background:linear-gradient(180deg,#1ed760,#0c8f3a);
    border:1px solid rgba(255,255,255,.25);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.3),
      0 4px 15px rgba(0,255,120,.35);
}

.btn.green:hover{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.35),
      0 8px 25px rgba(0,255,120,.7);
}


/* красная кнопка fold */
.btn.red{
    background:linear-gradient(180deg,#ff4d4d,#a30000);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.25),
      0 4px 15px rgba(255,0,0,.35);
}

.btn.red:hover{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.35),
      0 8px 25px rgba(255,0,0,.7);
}
.modal-content{
  position:relative;
}
.modal-login{
width: 500px;
}

/* кнопка X */
.modalCloseBtn{
  position:absolute;
  top:15px;
  right:20px;
  font-size:16px;
  color:#aaa;
  cursor:pointer;
  transition:.2s;
}

.modalCloseBtn:hover{
  color:#fff;
  transform:scale(1.1);
}
.chips-stack{
	    top: 18px;
  position:relative;
  width:60px;
  margin:0 auto;
}

/* базовая фишка */
.chip{
  width:26px;
  height:26px;
  border-radius:50%;
  position:absolute;
  box-shadow:
    inset 0 0 8px rgba(255,255,255,.6),
    inset 0 0 18px rgba(0,0,0,.8),
    0 4px 8px rgba(0,0,0,.8);
}

/* ===== КРАСНАЯ ===== */
.chip-red{
    left: 30px;
    bottom: -5px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), transparent 40%),
    repeating-conic-gradient(#fff 0 18deg,#d32f2f 18deg 36deg),
    radial-gradient(circle,#ff4d4d,#8b0000);
  border:2px solid #f5e6b3;
  z-index:3;
}

/* ===== СИНЯЯ ===== */
.chip-blue{
  left:16px;
  bottom:4px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), transparent 40%),
    repeating-conic-gradient(#fff 0 18deg,#1976d2 18deg 36deg),
    radial-gradient(circle,#42a5f5,#0d47a1);
  border:2px solid #f5e6b3;
  z-index:2;
}

/* ===== ЗОЛОТАЯ ===== */
.chip-gold{
  left:32px;
  bottom:8px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), transparent 40%),
    repeating-conic-gradient(#fff 0 18deg,#f1c40f 18deg 36deg),
    radial-gradient(circle,#ffd700,#b8860b);
  border:2px solid #fff3c4;
  z-index:1;
}






/* ===== нижняя панель ===== */
.poker-bottom-bar{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:110px;

  background:linear-gradient(to top,#0a0a0a,#111,#0a0a0a);
  border-top:2px solid rgba(255,255,255,0.08);

  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;

  box-shadow:
    0 -10px 40px rgba(0,0,0,0.9),
    inset 0 10px 30px rgba(255,255,255,0.04);

  z-index:9999;
}

/* ===== базовая кнопка ===== */
.poker-btn{
  min-width:170px;
  height:65px;

  font-size:22px;
  font-weight:700;
  letter-spacing:2px;

  border-radius:12px;
  border:none;
  cursor:pointer;

  color:#fff;
  transition:.15s;
  position:relative;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.2),
    0 6px 20px rgba(0,0,0,.7);
}

/* hover */
.poker-btn:hover{
  transform:translateY(-2px) scale(1.05);
  filter:brightness(1.2);
}

/* active press */
.poker-btn:active{
  transform:scale(.96);
}

/* ===== FOLD ===== */
.fold{
  background:linear-gradient(#2b2b2b,#111);
  color:#bbb;
}

/* ===== CHECK ===== */
.check{
  background:linear-gradient(#303030,#151515);
  color:#eaeaea;
}

/* ===== CALL ===== */
.call{
  background:linear-gradient(#303030,#151515);
  color:#eaeaea;
}

/* ===== BET ===== */
.bet{
  background:linear-gradient(#0f3d91,#071a3d);
box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), 0 6px 20px rgba(0, 0, 0, .7);
}

/* ===== RAISE ===== */
.raise{
  background:linear-gradient(#f1c40f,#a87400);
  color:#000;
box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2), 0 6px 20px rgba(0, 0, 0, .7);
}
.avatarWrapper{
  position: relative;
  width: 80px;
  height: 90px;
}

.avatarImg{
  position: absolute;
  top: 5px;
  left: 0px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #444;
  z-index: 2;
}

.timerSvg{
  position:absolute;
  top:0;
  left:-5px;
  transform: rotate(-90deg);
}

.timerBg{
  fill:none;
  stroke:#333;
  stroke-width:5;
}

.timerProgress{
  fill:none;
  stroke:#00e676;
  stroke-width:5;
  stroke-linecap:round;
  stroke-dasharray: 251;   /* 2πR = 2*3.14*40 ≈ 251 */
  stroke-dashoffset: 0;
  transition: stroke 0.3s linear;
}

#gameWrapper{
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

#gameTable{
  width: 800px;
  height: 800px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  border-left: 2px solid rgb(34, 34, 34);
    border-right: 2px solid rgb(34, 34, 34);
}
.flying-chip {
  position: fixed;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.8s cubic-bezier(.22,.61,.36,1),
              opacity 0.8s ease;
}

.flying-red { background: #e53935; }
.flying-blue { background: #1e88e5; }
.flying-gold { background: gold; }
.thumb {
  display: none !important;
}
#raiseModal, #betModal {
    bottom: 108px !important;
	    top: auto !important;
}
#leaderboardModal {
  top: 0 !important;
}
#leaderboardModal .modal-content {
    border-radius: 0;
	background: #121214;
}
#leaderboardModal .modal-content h4 {
    margin-top: 50px;
}
.finish {
    position: fixed;
    left: 50%;
    top: 70vh;
    transform: translate(-50%, -50%);
	    width: 100%;
}
.finish h3 {
    font-size: 28px;
    line-height: 110%;
    margin: 1.46rem 0 1.168rem 0;
}
.finish .modal-content{
    background: none;
    border-radius: 0;
    box-shadow: none;
}
#authBlock {
    position: fixed;
    right: 20px;
    top: 16px;
	    z-index: 99999;
		font-size: 12px;
}
#logoutBtn {
    display: flex;
    cursor: pointer;
}





#chatContainer{
  position: fixed;
  left: 0;
   top: 0;
    bottom: 0;
  height: 100vh;
  min-width: 220px;
}
#chatContainer,
#roomChatContainer{
    position: fixed;
    top: 0;
    bottom: 0; /* вместо height:100vh */
    
    display: flex;
    flex-direction: column;
    z-index: 99999;
    min-width: 220px;
}

#chatContainer{
    left: 0;
}

#roomChatContainer{
    right: 0;
}
#chatBox,
#roomChatBox{
    flex: 1;
    overflow-y: auto;
}
/* чат растягивается */
#chatBox {
  flex: 1;
  background: rgb(11, 11, 11);
  border-radius: 0;
  padding: 20px;
  overflow-y: auto;
  color: white;
  font-size: 13px;
}
#loginBtn2 {
	display: flex;
    align-items: center;
	gap:5px;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(180deg, #2f2f2f, #151515);
    text-align: center;
    letter-spacing: .5px;
    cursor: pointer;
    border: none;
    border-radius: 10px;
    padding: 25px 80px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -4px 12px rgba(0, 0, 0, .9), 0 4px 10px rgba(0, 0, 0, .6);
    transition: all .18s ease;
}

#loginBtn2:hover{
    background: linear-gradient(180deg, #3a3a3a, #1a1a1a);
	}
/* сообщение */
.chatMessage {
  margin-bottom: 15px;
}
.chatHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.chatUserInfo{
display: flex;
    align-items: center;
    gap: 8px;
    margin-left: -22px;
}

.chatDate{
    font-size:10px;
    color:#888;
    white-space:nowrap;
}
.chatHeader {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.chatAvatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

.chatUsername {
  font-weight: 600;
  font-size: 13px;
}

.chatText {
    font-size: 14px;
    color: #f5f5f5;
    margin-left: 21px;
	line-height: 22px;
}

/* низ (инпут + кнопка) */
#chatControls, #roomChatControls {
  display: block;
  background: #0f0f0f;
}

/* textarea */
#chatInput,
#roomChatInput {
    flex: 1;
    padding: 8px 12px;
    border: none;
    outline: none;
    background: transparent;
    color: white;
    font-size: 13px;
    resize: none;
    height: 55px;
    max-height: 120px;
    overflow-y: auto;
    direction: ltr;
    unicode-bidi: plaintext;

    /* скрыть стандартный скролл */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#chatInput::-webkit-scrollbar,
#roomChatInput::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* обёртка */
.chatInputWrapper {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    height: 55px;
    max-height: 120px;
    overflow: hidden;
}

/* placeholder */
#chatInput::placeholder,
#roomChatInput::placeholder {
    color: #777;
}

#sendChatBtn, #sendRoomChatBtn {
    width: 100%;
    height: 44px;
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 0px;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    border-radius: 5px;
    background: rgb(26, 26, 26);
    transition: 0.15s;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 6px, rgba(255, 255, 255, 0.1) 0px 1px 0px inset;
}

#sendChatBtn:hover, #sendRoomChatBtn:hover {
background: #222222;
}
.OnlineTitleLabel{
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 20px;
}
#UserOnlineContainer {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100vh;
    min-width: 220px;
    background: #0b0b0b;
    padding: 30px;
	z-index:999999;
}
#roomChatContainer{
  position: fixed;
  right: 0;
  top: 0;
    bottom: 0;
  height: 100vh;
  min-width: 220px;
}
#chatInput{
    direction: rtl;
    unicode-bidi: plaintext;
    text-align: left;
}
#roomChatBox {
flex: 1;
    background: #0b0b0b;
    padding: 20px 10px 20px 30px;
    overflow-y: auto;
    color: white;
    font-size: 13px;
}
#chatBox{
height: 500px;
    overflow-y: auto;
    direction: rtl;
    padding: 20px;
}

#chatBox > *{
    direction: ltr; /* текст обратно нормально */
}

#roomChatBox{

scrollbar-color: transparent;
}

/* Chrome, Edge, Opera */
#roomChatBox::-webkit-scrollbar{
    width: 4px;
}

#roomChatBox::-webkit-scrollbar-track{
    background: #111;
    border-radius: 20px;
}

#roomChatBox::-webkit-scrollbar-thumb{
background: #2a2a2a;
border-radius: 0;
}

#roomChatBox::-webkit-scrollbar-thumb:hover{
    background:#3a3a3a;
}



#chatBox{

scrollbar-color: transparent;
}

/* Chrome, Edge, Opera */
#chatBox::-webkit-scrollbar{
    width: 4px;
}

#chatBox::-webkit-scrollbar-track{
    background: #111;
    border-radius: 20px;
}

#chatBox::-webkit-scrollbar-thumb{
background: #2a2a2a;
border-radius: 0;
}

#chatBox::-webkit-scrollbar-thumb:hover{
    background:#3a3a3a;
}



#roomChatStickerPanel{

    
    scrollbar-color: transparent;
}
#chatStickerPanel{
    
    scrollbar-color: transparent;
}


#chatStickerPanel::-webkit-scrollbar,
#roomChatStickerPanel::-webkit-scrollbar{
    width: 3px;
}

#chatStickerPanel::-webkit-scrollbar-track,
#roomChatStickerPanel::-webkit-scrollbar-track{
    background: #111;
    border-radius: 20px;
}

#chatStickerPanel::-webkit-scrollbar-thumb,
#roomChatStickerPanel::-webkit-scrollbar-thumb{
background: #2a2a2a;
border-radius: 0;
}

#chatStickerPanel::-webkit-scrollbar-thumb:hover,
#roomChatStickerPanel::-webkit-scrollbar-thumb:hover{
    background:#3a3a3a;
}


.chatReply{
    margin: 15px;
    padding: 20px;
    background: rgb(18 18 18);
    font-size: 12px;
    opacity: .9;
    border-radius: 5px;
}

.chatReplyBlock,
.chatReplyCompose.is-visible{
    font-size: 12px;
    padding: 6px;
    margin-bottom: 10px;
    display: flex;
    gap: 6px;
    align-items: flex-start;
	margin-left: 23px;
}

.chatReplyCompose{
    display: none;
    margin-bottom: 0;
    padding: 6px 6px 0;
}

.chatReplyAvatarWrap{
    position: relative;
    width: 24px;
    height: 24px;
    margin-left: -10px;
    flex-shrink: 0;
}

.chatReplyAvatar{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 2px;
    display: block;
}

.chatReplyDot,
.avatarDot{
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #666;
    border: 1px solid #111;
}

.chatReplyDot.online,
.avatarDot.online{
    background: #03dc8e;
}

.chatReplyBody{
    margin-left: 2px;
    min-width: 0;
    flex: 1;
}

.chatReplyLabel{
    display: inline-flex;
    align-items: center;
    margin-top: 7px;
}

.chatReplyQuoteText{
    color: #aaa;
    line-height: 16px;
    margin-top: 5px;
    word-break: break-word;
}

.chatReplyQuoteMedia{
    margin-top: 5px;
}

.chatReplyQuoteMedia .chatStickerImage,
.chatReplyQuoteMedia .chatGifImage{
    max-width: 120px;
    max-height: 120px;
}

.copyWallet{
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    margin-top: -1px;
    opacity: 0.85;
}

.copyWallet:hover{
    opacity: 1;
}

.chatReplyComposeClose{
    align-self: flex-start;
    margin-left: auto;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 16px;
    padding: 0 4px;
    line-height: 1;
}

.chatReplyComposeClose:hover{
    color: #fff;
}

.replyBtn{
  display:none;
    position: absolute;
    bottom: 10px;
    left: 27px;
    background: none;
    border: none;
    cursor: pointer;
        color: #e5e5e5;	
	cursor: pointer;
    font-size: 11px;
	    align-items: center;
    gap: 4px;
}

#chatControls, #roomChatControls {
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-top: 1px solid rgb(34, 34, 34);
    background: rgb(15, 15, 15);
    gap: 8px;
}

.chatMessage{
  position: relative;
}


.chatMessage:hover .replyBtn{
  display:flex;
}

#loginBtn {
    display: flex;
    align-items: center; /* выравнивание по вертикали */
    gap: 3px;            /* расстояние между иконкой и текстом */
    color: #fff;
    text-decoration: none;
	    font-size: 11px;
    line-height: 0;
}

#loginBtn svg {
    flex-shrink: 0;
    display: block;
}

#roomChatInput {
    flex: 1;
    padding: 8px 12px;
    border: none;
    outline: none;
    background: transparent;
    color: white;
    font-size: 13px;
    resize: none;
    height: 55px;
    max-height: 120px;
    overflow-y: auto;
    direction: ltr;
    unicode-bidi: plaintext;
}

#roomChatInput::placeholder {
  color: #777;
}

.chatTitle{
text-align: right;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 10px 20px;
    border-bottom: 1px solid rgb(24 24 24);
    background: rgb(14 14 14);
    text-transform: uppercase;
}

.chatTitleWithOnline{
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}

.chatTitleLabel{
    flex: 1;
}

.chatTitleActions{
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.OnlineTitleLabel {
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: 12px;
    font-weight: 700;
    margin-bottom: 20px;
}

.OnlineRight {
    display: flex;
    align-items: center;
    gap: 3px;
}
.chatOnlineCount{
display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    text-transform: none;
    margin-top: 2px;
}

#onlineUsersBtn{
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
	opacity: .8;
}
#onlineUsersBtn:hover{
	opacity: 1;
}
.chatOnlineCount svg{
    flex-shrink: 0;
}

#onlineUsersPopup{
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.65);
    align-items: center;
    justify-content: center;
}

#onlineUsersPopup.is-open{
    display: flex;
}

.onlineUsersPopupInner{
    width: min(360px, calc(100vw - 32px));
    max-height: min(420px, calc(100vh - 32px));
    background: rgb(15, 15, 15);
    border: 1px solid rgb(34, 34, 34);
    border-radius: 12px;
    padding: 18px 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.onlineUsersPopupHeader{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 14px;
}

.onlineUsersPopupClose{
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #aaa;
}

.onlineUsersPopupClose:hover{
    color: #fff;
}

#onlineUsersList{
    overflow-y: auto;
    color: #fff;
    font-size: 13px;
}

.onlineUserRow{
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 0;
}

.onlineUserRow:last-child{
    border-bottom: none;
}

.onlineUserAvatar{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.onlineUserName{
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onlineUserDot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #00ff66;
    box-shadow: 0 0 8px #00ff66;
    flex-shrink: 0;
}

.onlineUsersEmpty{
    color: #888;
    padding: 12px 0;
}

#bannedUsersBtn{
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: #e5e5e5;
    cursor: pointer;
    border-radius: 4px;
	margin: 0 10px;
}

#bannedUsersBtn:hover{
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

#bannedUsersPopup{
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.65);
    align-items: center;
    justify-content: center;
}

#bannedUsersPopup.is-open{
    display: flex;
}

.bannedUsersPopupInner{
    width: min(360px, calc(100vw - 32px));
    max-height: min(420px, calc(100vh - 32px));
    background: rgb(15, 15, 15);
    border: 1px solid rgb(34, 34, 34);
    border-radius: 12px;
    padding: 18px 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
}

.bannedUsersPopupHeader{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    font-size: 14px;
}

.bannedUsersPopupClose{
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #aaa;
}

.bannedUsersPopupClose:hover{
    color: #fff;
}

#bannedUsersList{
    overflow-y: auto;
    color: #fff;
    font-size: 13px;
}

.bannedUserRow{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgb(34, 34, 34);
}

.bannedUserRow:last-child{
    border-bottom: none;
}

.bannedUserName{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bannedUserUnbanBtn{
    flex-shrink: 0;
    border: 1px solid rgba(0, 255, 136, .35);
    background: rgba(0, 255, 136, .08);
    color: #00ff88;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
	    line-height: 1;
}

.bannedUserUnbanBtn:hover{
    background: rgba(0, 255, 136, .16);
}

.bannedUsersEmpty{
    color: #888;
    padding: 12px 0;
}

#chatButtonsRow,
#roomChatButtonsRow{
    display:flex;
    align-items:center;
    gap:4px;
}

#stickerBtn,
#gifBtn,
#roomStickerBtn,
#roomGifBtn{
    width:32px;
    height:32px;
    min-width:32px;
    border:none;
    cursor:pointer;
    background:#111;
    color:#fff;
    border-radius:2px;
    padding:0;
}

#stickerBtn:hover,
#gifBtn:hover,
#roomStickerBtn:hover,
#roomGifBtn:hover{
    background:#222;
}

#gifBtn,
#roomGifBtn{
    font-size:10px;
    font-weight:bold;
}

#chatButtonsRow #sendChatBtn,
#roomChatButtonsRow #sendRoomChatBtn{
    flex:1;
    width:auto;
}
.chatStickerImage,
.chatGifImage{
  display: block;
  max-width: 200px;
  max-height: 200px;
  width: auto;
  height: auto;
  border-radius: 6px;
}
.chatMessage{
    margin-bottom: 12px;
    overflow-wrap: break-word;
    padding: 10px;
    background: rgb(17, 17, 17);
    border-radius: 8px;
}
#chatStickerPanel,
#roomChatStickerPanel{
  display:none;
  background:#111;
  padding:30px 10px;
  max-height:500px;
  overflow-y:auto;
border-top: 1px solid rgb(36 36 36);
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
#stickerBtn, #gifBtn,
#roomStickerBtn, #roomGifBtn {
    width: 50px;
    height: 44px;
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 0px;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    border-radius: 5px;
    background: rgb(26, 26, 26);
    transition: 0.15s;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 6px, rgba(255, 255, 255, 0.1) 0px 1px 0px inset;
}
#stickerBtn {
    display: flex;
    align-items: center;
    justify-content: center;
}
#roomStickerBtn {
    display: flex;
    align-items: center;
    justify-content: center;
}
.chatPickerItem{
  width:100%;
  cursor:pointer;
  border-radius:6px;
}

.chatPickerItem:hover{
  transform:scale(1.05);
}

.chatMessage{
    position: relative;
}

.chatMessageFooter{
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
#raiseModal .modal-content, #betModal .modal-content{
    margin: auto;
    padding: 28px 28px 30px;
    border-radius: 0;
   background: #111111;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .05);
    color: #fff;
    position: relative;
    animation: modalShow .25s ease;
}
#raiseModal h3, #betModal h3 {
    font-size: 28px;
}
.chatVotes{
    display: flex;
    gap: 10px;
    font-size: 11px;
    margin-left: auto;
    flex-shrink: 0;
}

.likeBtn,
.dislikeBtn{
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    color: #ffffff;
    opacity: 0.85;
    transition: 0.15s;
}

.likeBtn:hover,
.dislikeBtn:hover{
    opacity: 1;
}

.chatActions{
    top: 8px;
    right: 10px;
margin-top: 0;
    display: flex;
    gap: 6px;

    opacity: 0;
    pointer-events: none;

    transition: .15s;
}

.chatMessage:hover .chatActions{
    opacity: 1;
    pointer-events: auto;
}

.replyBtn,
.deleteBtn,
.banBtn{

    cursor: pointer;
    color: #ffffff;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.replyBtn svg,
.deleteBtn svg,
.banBtn svg{
    margin-top: -2px;
}
.deleteBtn {
    margin-left: 75px;
}
.banBtn {
    margin-left: 10px;
}
.replyBtn:hover, .banBtn:hover, .deleteBtn:hover {
    text-decoration: underline;
}


.moderatorBadge{
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px 1px 6px;
    border-radius: 6px;
    margin-top: -3px;
    font-size: 9px;
    font-weight: 700;
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, .35);
    background: rgba(0, 255, 136, .08);
    vertical-align: middle;
}
.bannedBadge{
    background: rgba(255,0,0,.15);
    border: 1px solid rgba(255,0,0,.4);
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px 1px 6px;
    border-radius: 6px;
    margin-top: -3px;
    font-size: 9px;
    font-weight: 700;
    vertical-align: middle;
}
.chatAvatarWrap{
    position: relative;
    display: inline-flex;
}

.userStatus{
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #111;
}

.userStatus.online{
    background: #00ff66;
    box-shadow: 0 0 3px #00ff66;
}

.userStatus.offline{
    background: #666;
}

.historyModal {
    position: fixed;
    display: none;
    z-index: 99999;
    pointer-events: none;
}

#historyBtn {
position: fixed;
    top: 10px;
    left: 15px;
    cursor: pointer;
	z-index:99999;
	    opacity: .8;
		transition: 0.2s;
}
#closeHistoryModal{
    cursor:pointer;
    z-index:999999;
    position:relative;
}
#historyBtn:hover {
    opacity: 1;
    transform: scale(1.1);
}
.historyWindow{
width: 100%;
    max-height: 100vh;
    overflow: auto;
    background: #0b0b0b;
    padding: 20px;
    border-left: 2px solid rgb(34, 34, 34);
    border-right: 2px solid rgb(34, 34, 34);
	pointer-events: auto;
}

.historyCard{
    box-sizing: border-box;
}
#historySearch{
    display: block;
    width: 100%;
    box-sizing: border-box;

    margin-bottom: 10px;
    background: #111;
    color: #fff;
    border: 1px solid #222222;
    padding: 5px 20px;
    border-radius: 5px;
}
hr {
border: 0;
    border-top: 1px solid #202020;
}
.historyHeader{
    display:flex;
    justify-content:space-between;
    margin-bottom:15px;
	    margin-left: 20px;
}

.historyCard{
padding: 15px 20px;
    margin-bottom: 10px;
    background: #161616;
    border-radius: 5px;
}
.historyWindow > *{
  direction: ltr;
}
/* ширина */
.historyWindow::-webkit-scrollbar{
  width:2px;
}

/* фон */
.historyWindow::-webkit-scrollbar-track{
  background:transparent;
}

/* сам скролл */
.historyWindow::-webkit-scrollbar-thumb{
  background:#2a2a2a;


}

/* hover */
.historyWindow::-webkit-scrollbar-thumb:hover{
  background:#3a3a3a;
}

.inviteModal{
  display:none;

  position:fixed;
  inset:0;

  width:100vw;
  height:100vh;

  background:rgba(0,0,0,.75);

  z-index:999999;

  justify-content:center;
  align-items:center;
}

.inviteModalContent{
    width: 350px;
    max-width: 90vw;
    background: #181818;
    border: 1px solid rgb(30 30 30);
    border-radius: 12px;
    padding: 40px 24px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
}
.inviteModalContent{
  position:relative;
}

.inviteCloseBtn{
  position:absolute;
  top:15px;
  right:15px;
  font-size:14px;
  cursor:pointer;
  color:#fff;
  line-height:1;
  user-select:none;
}

.inviteCloseBtn:hover{
  opacity:.7;
}
#inviteText{
  color:#fff;
  font-size:16px;
  margin-bottom:20px;
  line-height:1.5;
}

#acceptInviteBtn{
  width:100%;

  border:none;
  border-radius:8px;

  padding:12px;

  cursor:pointer;

  background:#3949ab;
  color:#fff;

  font-size:15px;
  font-weight:700;
}

#acceptInviteBtn:hover{
  opacity:.9;
}
.inviteBtn {
    color: rgb(255, 255, 255);
    font-weight: bold;
    padding: 5px 20px;
    font-size: 12px;
    cursor: pointer;
    margin-bottom: 0px;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    border-radius: 5px;
	background-color: rgb(44 133 27);
	   
    transition: 0.15s;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 6px, rgba(255, 255, 255, 0.1) 0px 1px 0px inset;
}
.inGameBtn {
    background: rgb(26, 26, 26);

}
.sentBtn {
    background: rgb(143 128 20);

}

.inviteBtn:hover {
background: rgb(34 104 21);
}
.sentBtn:hover {
background: rgb(143 128 20);
}
.inGameBtn:hover {
background: rgb(26, 26, 26);
}
#gameTable{
    position: relative;
}

#discordLink{
    position: absolute;
    right: 20px;
    bottom: 10px;
    z-index: 9999;
    opacity: 0.5;
    transition: 0.2s;
}

#discordLink:hover{
    opacity: 0.8;
    transform: scale(1.1);
}
#mobileBlock{
  display:none;
}

@media (max-width: 1024px){

  #mobileBlock{
    position:fixed;
    inset:0;
    background:#0f172a;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:999999;
    text-align:center;
    padding:20px;
  }

  .mobileBlockInner{
    max-width:400px;
  }

  body > *:not(#mobileBlock){
    display:none !important;
  }
}