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

html {
  height: 100%;
  margin: 0;
}
body {
  display: flex;
  min-height: 100vh;
  margin: 0;
  flex-direction: column;
/*  align-items: center;*/
  justify-content: flex-start; /* align at top, not center */
  font-family: Arial, sans-serif;
  background-color: #ffffff;
}
footer {
  font-size: 1rem;
  margin-top: auto;
  width: 100%;
}
footer a {
  margin-right: 12px;
  white-space: nowrap;
}
footer .text-muted {
  white-space: nowrap;
}
.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: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 150px; /* Untuk memastikan input di tengah */
}

.dropdown-container {
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
}
.dropdown-container select {
  margin-right: 10px;
}
.round-button {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #000000;
  border: none;
  color: white;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.75rem, 2.2vw, 1rem);
  line-height: 1.2;
  padding: 12px;
  word-break: break-word;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

nav.navbar {
    width: 100%;
}

/* sudut lebih tumpul + border lebih tebal */
#btnCreate,
#btnJoin {
  border-radius: 12px;   /* bikin agak tumpul */
  border-width: 3px;     /* border sedikit lebih tebal */
  border-style: solid;   /* jaga konsistensi jika belum ada */
/*  border-color: #0d6efd;*/
}

/* jaga konsistensi di state hover/active/focus agar tidak "lompat" */
#btnCreate:hover, #btnCreate:active, #btnCreate:focus,
#btnJoin:hover,  #btnJoin:active,  #btnJoin:focus {
  border-width: 2px;
}

#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;
  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: center;
}

#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;
  /* Left align as in the design */
  text-align: center;
}

/* ============================= */
/* 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 */
}

/* Room info block spacing so ads are far from mic button */
.room-info { margin-top: 2rem; }
.room-info .card { border-radius: 12px; }
.room-info p, .room-info li { line-height: 1.6; }

/* jaga jarak iklan dari CTA */
/*.adsbygoogle { margin-top: 12px; }*/

/* Responsif: jika lebar viewport di bawah 600px, kecilkan ukuran dan jaraknya */
@media (max-width: 600px) {
    footer {
        font-size: 0.8rem;
    }
    footer a {
        margin-right: 6px;
    }
}
@media (max-width: 400px) {
    footer {
        font-size: 0.7rem;
    }
    footer a {
        margin-right: 3px;
    }
}