:root{
  --main-color:#22c55e;
}

.signal-bars[data-level="1"] i:nth-child(-n+1){background:var(--main-color)}
.signal-bars[data-level="2"] i:nth-child(-n+2){background:var(--main-color)}
.signal-bars[data-level="3"] i:nth-child(-n+3){background:var(--main-color)}
.signal-bars[data-level="4"] i:nth-child(-n+4){background:var(--main-color)}
.signal-bars[data-level="5"] i:nth-child(-n+5){background:var(--main-color)}

.battery-bar span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--main-color),var(--main-color));
}
.loader {
  position: fixed;
  inset: 0;
  background: #0b1a2b;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loader.hidden {
  display: none;
}
.door-progress{
  width:100%;
  max-width:100%;
  height:14px;
  overflow:hidden;
  margin-top:10px;
}
.door-progress__bar{
  width:0%;
  height:14px;
  background:rgba(0,0,0,.55);
  border-radius:5px;
  transition:width .15s linear;
}
.card.door{ position:relative; }
#doorProgressWrap{
  grid-column: 1 / -1;
  flex-basis: 100%;
  width: 100%;
}

.reload-popup{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.45);
  z-index:9999;
}
.reload-popup.open{display:flex}
.reload-popup__box{
  min-width:220px;
  max-width:90vw;
  padding:22px 18px;
  border-radius:16px;
  background:#fff;
  text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.reload-popup__spinner{
  position:relative;
  width:42px;
  height:42px;
  margin:0 auto 14px;
}

.reload-popup__ring{
  position:absolute;
  inset:0;
  border:4px solid rgba(0,0,0,.12);
  border-top-color:var(--main-color);
  border-radius:50%;
  animation:reloadSpin .8s linear infinite;
}
.reload-popup__text{
  font-size:15px;
  font-weight:600;
  color:#222;
}
@keyframes reloadSpin{to{ transform:rotate(360deg); }}

.loading-screen{
  min-height:60vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.loading-spinner{
  width:42px;
  height:42px;
  border:4px solid rgba(0,0,0,.12);
  border-top-color:#e5e7eb;
  border-radius:50%;
  animation:reloadSpin .8s linear infinite;
}
.loading-text{
  font-size:15px;
  font-weight:600;
  color:#e5e7eb;
}
.msg.bad.clickable{cursor:pointer}
.loading-screen[hidden]{
  display:none !important;
}
.reload-popup__spinner{
  position:relative; /* dôležité */
}

.reload-popup__count{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  color:#222;
  pointer-events:none;
}