body {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #111;
  gap: 20px;
  padding: 20px;
  box-sizing: border-box;
}

#telephone-overlay {
  padding: 0 !important; /* Remove as bordas pretas de 20px que estavam forçadas no HTML */
}

.phone-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
  display: block;
}

.phone-container > img {
  width: 100%;
  height: 100%;
  object-position: center center;
  display: block;
}

#phone-screen {
  position: absolute;
  top: 71%;
  left: 20.5%;
  width: 11%;
  height: 5%;
  background-color: transparent;
  transform: rotate(12deg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(8px, 3vw, 16px);
  font-weight: bold;
  color: #1a3311;
  letter-spacing: -2px;
  pointer-events: none;
  z-index: 10;
}

.btn {
  position: absolute;
  width: 3.5%;
  height: 2.5%;
  border-radius: 50%;
  cursor: pointer;
  transform: rotate(3deg);
  z-index: 20;
  transition: background-color 0.1s;
}

.btn:active {
  background-color: rgba(0, 0, 0, 0.5);
}

.btn-1 {
  top: 76%;
  left: 17%;
}
.btn-2 {
  top: 77%;
  left: 21.5%;
}
.btn-3 {
  top: 78%;
  left: 26%;
}
.btn-4 {
  top: 79%;
  left: 15.5%;
}
.btn-5 {
  top: 80%;
  left: 20%;
}
.btn-6 {
  top: 81%;
  left: 24.5%;
}
.btn-7 {
  top: 81.5%;
  left: 14.5%;
}
.btn-8 {
  top: 82.5%;
  left: 18.5%;
}
.btn-9 {
  top: 83.5%;
  left: 23%;
}
.btn-ast {
  top: 84%;
  left: 13%;
}
.btn-0 {
  top: 85%;
  left: 17.5%;
}
.btn-hash {
  top: 86%;
  left: 22%;
}

.btn-off {
  top: 88.5%;
  left: 21%;
  width: 2.5%;
  height: 2.5%;
  border-radius: 31%;
}
.btn-call {
  top: 86.5%;
  left: 11.5%;
  width: 3%;
  height: 2.5%;
  border-radius: 40%;
}

/* --- CAIXA DE DIÁLOGO --- */
#dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  z-index: 999;
  display: none;
  cursor: pointer;
}

#dialog-box {
  position: absolute;
  right: 15%;
  top: 55%;
  background: #000;
  color: #fff;
  padding: 3%;
  border: 2px solid #4a8f6f;
  width: 32%;
  box-sizing: border-box;
  border-radius: 12px;
  font-family: Arial, sans-serif;
  font-size: clamp(10px, 1.6vw, 16px);
  line-height: 1.4;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  cursor: pointer;
}

#dialog-box::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -15px;
  transform: translateY(-50%);
  border-width: 15px 15px 15px 0;
  border-style: solid;
  border-color: transparent #4a8f6f transparent transparent;
}

#dialog-text {
  width: 100%;
  text-align: center;
}

#dialog-options {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 15px;
  width: 100%;
}

.dialog-btn {
  background: #222;
  color: #fff;
  border: 1px solid #4a8f6f;
  padding: 8px 4px;
  font-size: clamp(9px, 1.2vw, 14px);
  border-radius: 4px;
  cursor: pointer;
  font-family: Arial, sans-serif;
  transition: background 0.2s;
  text-align: center;
  word-wrap: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog-btn:hover {
  background: #4a8f6f;
  color: #000;
}

@media (max-width: 768px) {
  #dialog-box {
    right: 50%;
    left: 50%;
    top: 25%; /* Posiciona no topo */
    bottom: auto; /* Remove a posição da base */
    transform: translateX(-50%);
    width: 90%; /* Deixa a caixa um pouco mais larga para caber o texto maior */
    font-size: 18px; /* Aumenta o tamanho da letra do texto principal */
  }

  /* Inverte o triângulo para apontar para baixo */
  #dialog-box::before {
    top: auto;
    bottom: -15px; /* Joga a setinha para debaixo da caixa */
    left: 50%;
    transform: translateX(-50%);
    border-width: 15px 15px 0 15px;
    border-color: #4a8f6f transparent transparent transparent;
  }

  /* Aumenta o texto e o espaço de clique das opções do diálogo */
  .dialog-btn {
    font-size: 15px;
    padding: 12px 6px;
  }
}

/* --- ANIMAÇÃO DE ESPERA DOS PONTINHOS --- */
.waiting-dots span {
  font-size: clamp(16px, 2.5vw, 24px);
  animation: dot-blink 1.4s infinite both;
  letter-spacing: 2px;
}
.waiting-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.waiting-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dot-blink {
  0% {
    opacity: 0.2;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

/* --- PAREDE DE PAPEIS E BOTÕES DE BAIXO --- */
#wall-area {
  position: absolute;
  top: 10%;
  left: 2%;
  width: 95%;
  height: 52%;
  pointer-events: none;
  z-index: 5;
}

.paper-note {
  position: absolute;
  width: 20%;
  aspect-ratio: 1;
  container-type: size;
  background-image: url("../assets/paper-number.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;

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

  color: #111;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;

  box-sizing: border-box;

  transform: rotate(calc(-15deg + 30deg * var(--rand)));
  filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.5));
}

.note-name {
  max-width: 100%;
  font-size: clamp(8px, 14cqw, 14px);
  color: #333;
  text-align: center;
  line-height: 0.95;
  margin-bottom: 2px;
  overflow-wrap: anywhere;
}

.note-number {
  max-width: 100%;
  font-size: clamp(10px, 20cqw, 16px);
  letter-spacing: -0.5px;
  white-space: nowrap;
}

#bottom-options {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  width: 100%;
  max-width: 1000px;
  z-index: 20;
}

.num-option-btn {
  background: #222;
  color: #fff;
  border: 2px solid #555;
  padding: 10px 20px;
  font-size: 16px;
  font-family: Arial, sans-serif;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
}

.num-option-btn:hover {
  background: #4a8f6f;
  border-color: #4a8f6f;
  color: #000;
}

/* --- BOTÃO DE VOLTAR AO JOGO --- */
/* --- BOTÃO DE VOLTAR AO JOGO --- */
#btn-voltar-telefone {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background-color: #222;
  color: #fff;
  border: 1px solid #550000;
  cursor: pointer;
  font-family: monospace;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 4px;
  z-index: 2005;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
  transition: background-color 0.2s;
}

#btn-voltar-telefone:hover {
  background-color: #4a8f6f;
  color: #000;
  border-color: #4a8f6f;
}