@import url(https://db.onlinewebfonts.com/c/24cb75de3ea8b720dac8ebfac56aeae6?family=Movatif+W00+Regular);

html {
  height: 100%;
}
body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;         /* center horizontally */
  justify-content: flex-start; /* align at top, not center */
  padding-top: 2rem;           /* add some breathing room under the address bar */
  font-family: Arial, sans-serif;
  background-color: #ffffff;
}
.button {
  background-color: #ffffff;
  border: 2px solid black;
  color: black;
  padding: 20px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  margin: 10px;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #f0f0f0;
}
.modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 150px; /* Untuk memastikan input di tengah */
}

.dropdown-container {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.dropdown-container select {
  margin-right: 10px;
}
.round-button {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #000000;
  border: none;
  color: white;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  line-height: 100px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#statusLog {
  max-height: 200px;
  overflow-y: auto;
  font-size: 0.9em;
}

/* Styling untuk area user yang sedang berbicara sebagai label dengan tinggi tetap */
#speakingUserArea {
  font-size: 1.2em;
  height: 40px;          /* Tinggi tetap */
  line-height: 40px;     /* Agar teks vertikal di tengah */
  text-align: center;
  width: 300px;          /* Sama dengan container dropdown jika diperlukan */
  color: black;
  /* Hilangkan padding agar tinggi tidak bertambah */
  padding: 0;
  border: none;
}

.ads-container {
  margin-top: 1.5rem;   /* beri ruang di atas iklan */
  text-align: center;   /* posisi iklan di tengah */
  width: 100%;         /* full width of parent */
  min-width: 300px;    /* or whatever minimum you want */
  max-width: 728px;    /* for leaderboard on desktop */
}

#kobugo-title {
  margin-top: 1rem;
  /* Font stack matching the screenshot */
  font-family: "Movatif W00 Regular";
  /* Heavy weight */
  font-weight: 700;
  /* Responsive sizing: between 2rem and 8rem */
  font-size: clamp(2rem, 12vw, 8rem);
  /* Tight line‐height so “Launching” and “soon” sit close */
  line-height: 1.1;
  /* White on black */
  color: black;
  background-color: white;
  /* Some padding so text isn’t flush to the edges */
  padding: 1rem;
  /* Ensure text wraps on the <br> only */
  white-space: pre-line;
  /* Left align as in the design */
  text-align: left;
}

#kobugo-tagline {
  /* Font stack matching the screenshot */
  font-family: sans-serif;
  /* Heavy weight */
  font-weight: 100;
  /* Responsive sizing: between 2rem and 8rem */
  font-size: clamp(0.4rem, 12vw, 1.4rem);
  /* Tight line‐height so “Launching” and “soon” sit close */
  line-height: 1;
  /* White on black */
  color: black;
  background-color: white;
  /* Some padding so text isn’t flush to the edges */
  padding: 1rem;
  /* Ensure text wraps on the <br> only */
  white-space: pre-line;
  /* Left align as in the design */
  text-align: left;
}

/* ============================= */
/* Khusus halaman room: centering */
/* ============================= */

/* Ubah body flex‐alignment menjadi center saat ada class .room-page */
body.room-page {
  justify-content: center; /* vertikal center (mengoverride flex-start) */
}

/* Pastikan kontainer ads tidak keluar viewport */
.ads-container {
  /* sudah ada margin-top, tetapi kita pastikan width dan centering */
  text-align: center;
}

/* Container utama room-page: selalu punya padding vertikal */
body.room-page .container {
  padding-top: 8rem;    /* atau 10rem sesuai selera */
}