/* Container principal do countdown e variaveis de ajuste global */
.launchCountdown {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;

  /* sobe o countdown e puxa o resto da página junto (ajuste aqui) */
  --block-offset-y: -12px;
  margin-top: var(--block-offset-y);

  clear: both;
  background: transparent !important;

  /* === AJUSTES FÁCEIS (1 lugar) === */
  --panel-max-width: 560px; /* moldura maior para ganhar respiro vertical */
  --panel-stretch-x: 1.06;  /* alonga um pouco para as laterais (mantém dígitos alinhados) */

  /* posição/caixa dos dígitos (valores em % relativos ao painel) */
  --digits-top: 40.266%;
  --digit-w: 8.587%;
  --digit-h: 40.266%;

  /* left de cada janela (8 dígitos: DD HH MM SS) */
  --days-left-0: 7.990%;
  --days-left-1: 16.995%;
  --hours-left-0: 29.338%;
  --hours-left-1: 38.939%;
  --minutes-left-0: 51.819%;
  --minutes-left-1: 61.300%;
  --seconds-left-0: 73.345%;
  --seconds-left-1: 82.886%;

  /* tipografia */
  --font-size: clamp(14px, 2.4vw, 40px);
  --font-color: #3b2b1e;
  --font-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  --digit-nudge-y: 0px;

}

/* Wrapper interno que organiza painel e botao em coluna */
.launchCountdown__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  background: transparent !important;
}

/* Painel visual (moldura) onde ficam digitos e textos sobrepostos */
.launchCountdown__panel {
  display: inline-block;
  position: relative;
  width: min(100%, var(--panel-max-width));
  max-width: var(--panel-max-width);
  aspect-ratio: 1677 / 592;
  background: transparent !important;
  transform: scaleX(var(--panel-stretch-x));
  transform-origin: center top;
}

/* Imagem base do painel; define a escala real da moldura */
.launchCountdown__panelImg {
  width: min(100%, var(--panel-max-width)) !important;
  max-width: var(--panel-max-width) !important;
  height: auto;
  display: block;
  background: transparent !important;
}

/* Camada absoluta que cobre o painel para posicionar os digitos */
.launchCountdown__digits {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: transparent !important;
}

/* Estilo base de cada digito (tipografia, tamanho e alinhamento) */
.launchCountdown__digit {
  position: absolute;
  top: var(--digits-top);
  width: var(--digit-w);
  height: var(--digit-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Verdana, Arial, "Trebuchet MS", sans-serif;
  font-weight: 800;
  font-size: var(--font-size);
  color: var(--font-color);
  text-shadow: var(--font-shadow);
  line-height: 1;
  user-select: none;
  background: transparent !important;
  transform: translateY(var(--digit-nudge-y));
}

/* left positions (pixel-aligned to /images/contador/painel_central_10.png) */
.launchCountdown__digit[data-lc-group="days"][data-lc-pos="0"] { left: var(--days-left-0); }
.launchCountdown__digit[data-lc-group="days"][data-lc-pos="1"] { left: var(--days-left-1); }
.launchCountdown__digit[data-lc-group="hours"][data-lc-pos="0"] { left: var(--hours-left-0); }
.launchCountdown__digit[data-lc-group="hours"][data-lc-pos="1"] { left: var(--hours-left-1); }
.launchCountdown__digit[data-lc-group="minutes"][data-lc-pos="0"] { left: var(--minutes-left-0); }
.launchCountdown__digit[data-lc-group="minutes"][data-lc-pos="1"] { left: var(--minutes-left-1); }
.launchCountdown__digit[data-lc-group="seconds"][data-lc-pos="0"] { left: var(--seconds-left-0); }
.launchCountdown__digit[data-lc-group="seconds"][data-lc-pos="1"] { left: var(--seconds-left-1); }

/* Quando o contador chega a zero, os dígitos somem. */
.launchCountdown.is-online .launchCountdown__digits { opacity: 0; }

#PlayersOnline {
  position: relative;
}

.launchCountdownInfoBar__openAt {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: 52%;
  padding: 1px 10px 2px;
  font-family: Verdana, Arial, "Trebuchet MS", sans-serif;
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 700;
  color: #f5e5c8;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
  background: rgba(32, 16, 10, 0.55);
  border-radius: 6px;
  pointer-events: none;
  z-index: 4;
}

/* Ajustes responsivos para telas pequenas */
@media (max-width: 480px) {
  /* Reescala tamanhos e offsets para manter legibilidade no mobile */
  .launchCountdown {
    padding: 6px 0;

    --font-size: clamp(7px, 2.5vw, 14px);
  }

  .launchCountdownInfoBar__openAt {
    top: 5px;
    max-width: 68%;
    font-size: clamp(8px, 2.1vw, 10px);
    padding: 2px 8px;
    white-space: normal;
  }
}