/* PEGGY_POWER_LOSS_COUNTDOWN_V1 */

.peggy-power-loss-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;

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

  padding: 18px;

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

  backdrop-filter:
    blur(4px);
}

.peggy-power-loss-overlay[hidden] {
  display: none !important;
}

.peggy-power-loss-panel {
  width: min(700px, 94vw);

  padding:
    18px 22px 20px;

  border:
    3px solid currentColor;

  border-radius: 18px;

  text-align: center;

  background:
    rgba(12, 12, 12, .97);

  box-shadow:
    0 0 26px rgba(255,255,255,.15);
}

.peggy-power-loss-title {
  font-size:
    clamp(1.4rem, 4.5vw, 2.7rem);

  font-weight: 900;

  letter-spacing: .12em;
}

.peggy-power-loss-countdown {
  margin:
    -4px 0 -8px;

  font-size:
    clamp(7rem, 27vw, 14rem);

  font-weight: 900;

  line-height: .95;

  font-variant-numeric:
    tabular-nums;
}

.peggy-power-loss-message {
  margin-top: 8px;

  font-size:
    clamp(1.05rem, 3.3vw, 1.8rem);

  font-weight: 800;

  letter-spacing: .04em;
}

.peggy-power-loss-detail {
  margin-top: 9px;

  font-size:
    clamp(.88rem, 2.4vw, 1.18rem);

  opacity: .82;
}


/* Power restored state */

.peggy-power-loss-overlay.power-restored
.peggy-power-loss-countdown {
  font-size:
    clamp(4rem, 16vw, 8rem);
}


/* 800x480 Peggy Sue display */

@media
  (max-height: 520px)
  and (orientation: landscape) {

  .peggy-power-loss-overlay {
    padding: 8px;
  }

  .peggy-power-loss-panel {
    width: min(650px, 94vw);

    padding:
      10px 18px 12px;
  }

  .peggy-power-loss-title {
    font-size: 1.45rem;
  }

  .peggy-power-loss-countdown {
    font-size: 8.5rem;

    margin:
      -6px 0 -10px;
  }

  .peggy-power-loss-message {
    margin-top: 2px;

    font-size: 1.1rem;
  }

  .peggy-power-loss-detail {
    margin-top: 5px;

    font-size: .88rem;
  }

}