body {
  margin:0;font-family:Arial,sans-serif;background:#f9f9f9;display:flex;flex-direction:column;min-height:100vh;
}
header {background:orange;color:#fff;text-align:center;padding:6px 0;font-size:18px;font-weight:bold;}
.main-layout {flex:1;display:flex;justify-content:center;align-items:flex-start;padding:5px;gap:10px;}
.ads-side {flex:0 0 160px;display:flex;justify-content:center;}
.game-center {flex:0 1 auto;text-align:center;}
.card {width:180px;height:240px;perspective:1000px;margin:5px auto;}
.card-inner {
  position:relative;width:100%;height:100%;
  transition:transform 0.6s; /* 👈 tăng thời gian lật lên 1 giây */
  transform-style:preserve-3d;
}
.card.flip .card-inner {transform:rotateY(180deg);}
.card-front,.card-back {
  position:absolute;width:100%;height:100%;
  backface-visibility:hidden;
  border-radius:6px;
  box-shadow:0 3px 6px rgba(0,0,0,0.15);
  display:flex;justify-content:center;align-items:center;
  font-size:15px;font-weight:bold;
}
.card-front {background:#fff;color:#333;}
.card-back {
  transform:rotateY(180deg);
  background:#4caf50;
  color:#fff;
  font-size:13px;
  padding:4px;
}
.card-back.truth {background:#4caf50;}
.card-back.dare {background:#ff9800;color:#333;}
.card-back.penalty {background:#f44336;}
.buttons {margin-top:20px;}
.btn {border:none;padding:5px 10px;margin:2px;border-radius:4px;cursor:pointer;color:#fff;font-size:13px;font-weight:bold;}
.btn-do {background:#4caf50;}
.btn-penalty {background:#f44336;}
.btn-next {background:#2196f3;}
footer {background:#f1f1f1;text-align:center;padding:5px 0;font-size:12px;color:#555;}


.card.resetting .card-inner {
  transform: rotateY(0deg) !important;
  transition: none !important;
}

#question-manager.hidden {display:none;}
#question-manager {margin-top:8px;border:1px solid #ddd;padding:6px;border-radius:4px;background:#fff;max-height:300px;overflow-y:auto;}
#question-list {list-style:none;padding:0;margin:0;}
#question-list li {display:flex;justify-content:space-between;align-items:center;margin:2px 0;padding:4px;border-bottom:1px solid #eee;font-size:13px;}
.manager-actions {margin-top:5px;display:flex;gap:5px;justify-content:center;}
.manager-actions input {flex:1;padding:4px;font-size:13px;}
.manager-actions select {padding:4px;font-size:13px;}
.manager-actions button {padding:4px 6px;font-size:13px;}
.editable {flex:1;margin-right:5px;}
.btn-delete {background:#f44336;color:#fff;border:none;border-radius:4px;cursor:pointer;padding:2px 5px;font-size:12px;}

.question-manager-container {
  display: block;
  clear: both;
  max-width: 300px;
  margin: 10px auto 0 auto;
  text-align: center;
}
#question-manager.hidden {display: none;}
#question-manager {
  margin-top: 6px;
  border: 1px solid #ddd;
  padding: 6px;
  border-radius: 4px;
  background: #fff;
  max-height: 250px;
  overflow-y: auto;
}
#question-list {list-style: none; padding: 0; margin: 0;}
#question-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2px 0;
  padding: 4px;
  border-bottom: 1px solid #eee;
  font-size: 13px;
}
.manager-actions {
  margin-top: 5px;
  display: flex;
  gap: 5px;
  justify-content: center;
}
.manager-actions input {flex: 1; padding: 4px; font-size: 13px;}
.manager-actions select {padding: 4px; font-size: 13px;}
.manager-actions button {padding: 4px 6px; font-size: 13px;}
.editable {flex: 1; margin-right: 5px;}
.btn-delete {
  background: #f44336;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 2px 5px;
  font-size: 12px;
}