body {
  font-family: "Comic Sans MS", "Arial Rounded MT Bold", sans-serif;
  background: #fdf6e3;
  text-align: center;
  margin: 0;
  padding: 0;
}

/* Halaman utama rata tengah */
.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* tambah ini */
  height: 100vh;
}

h1,
h2 {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #2d2d2d;
}

button {
  font-size: 24px;
  padding: 12px 24px;
  margin-top: 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

.hidden {
  display: none;
}

/* Area drop di tengah */
.drop-area {
  width: fit-content;
  /* ukurannya sesuai isi */
  min-width: 500px;
  min-height: 100px;
  margin: 20px auto;
  /* auto = tengah horizontal */
  border: 4px dashed #999;
  border-radius: 20px;
  background: #fff;
  font-size: 36px;
  font-weight: bold;
  color: #666;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* isi di tengah */
  align-items: center;
  /* isi rata tengah vertikal */
  gap: 10px;
  padding: 20px;
}

.placeholder {
  font-size: 28px;
  color: #999;
  text-align: center;
}

/* Huruf-huruf bank tetap rapi di tengah */
.letters {
  display: flex;
  flex-direction: column;
  /* baris ke bawah */
  align-items: center;
  gap: 15px;
  margin-top: 20px;
}

.letter-row {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.letter-row .draggable {
  font-size: 40px;
  font-weight: bold;
  padding: 10px;
  background: #ffe082;
  border: 2px solid #ffca28;
  border-radius: 15px;
  cursor: grab;
  user-select: none;
  position: relative;
}

draggable {
  font-size: 32px;
  font-weight: bold;
  padding: 10px 10px;
  background: #ffe082;
  border: 2px solid #ffca28;
  border-radius: 12px;
  cursor: grab;
  user-select: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  /* ukuran minimal */
  min-height: 20px;
  /* supaya tetap seragam */
}

.draggable:active {
  cursor: grabbing;
}

.drop-box {
  background: #bbdefb;
  border: 2px solid #64b5f6;
  border-radius: 15%;
  padding: 8px 8px;
  /* diperkecil padding */
  min-width: 50px;
  min-height: 20px;
  text-align: center;
}

.delete-btn {
  position: absolute;
  top: 5px;
  right: 8px;
  background: #f44336;
  border: none;
  color: white;
  font-size: 18px;
  font-weight: bold;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  cursor: pointer;
  line-height: 24px;
  padding: 0;
}

.delete-btn:hover {
  background: #d32f2f;
}

.reset {
  margin-top: 30px;
  background-color: #f44336;
}

.reset:hover {
  background-color: #d32f2f;
}