/* ───────── UtilHub 공통 색 변수 사용 ───────── */
:root {
  --primary   : #4f8cff;
  --primary-dk: #3c6ce0;
  --yellow    : #ffca28;
  --orange    : #ff9800;
  --red       : #e53935;
  --gray      : #64748b;
  --panel     : #ffffff;   /* 카드 바탕 */
}

/* ───────── 카드 내부 통일 레이아웃 ───────── */
.card-body.game-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-bottom: 1.2rem;
}

/* 단계 선택 버튼 */
.btn.diff {
  background: var(--gray);
  color: #fff;
  font-weight: 700;
  min-width: 64px;
  padding: 0.6rem 0;
  border-radius: 8px;
  font-size: 0.92rem;
}
.btn.diff.active {
  background: var(--yellow);
  color: #000;
}

/* 증가 범위 라벨 */
#rangeLabel {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

/* 게임 박스 */
#box {
  width: 260px;
  min-height: 160px;
  border: 4px solid var(--yellow);
  border-radius: 18px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  box-shadow: 0 3px 6px rgba(0,0,0,.12);
  transition: border-color .35s;
}
#box p {
  margin: 0;
  font-weight: 600;
}
#box .total {
  font-size: 1.6rem;
  color: var(--red);
}

/* GO / STOP / 기타 버튼 그룹 */
.btn-group.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.btn {
  border: none;
  cursor: pointer;
  font-size: 0.92rem;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  color: #fff;
  min-width: 72px;
  transition: filter .15s;
}
.btn.go   { background: var(--yellow);   color: #000; }
.btn.stop { background: var(--gray);     color: #fff; }
.btn.hint { background: var(--orange);   color: #000; }
.btn.help { background: var(--primary);  }
.btn.reset{ background: var(--primary-dk); }
.btn:disabled { background: #ccc; cursor: default; }
.btn:not(:disabled):hover { filter: brightness(1.12); }

/* 메시지, 통계, 힌트 */
.message, .stats, .hint-info {
  font-size: 0.9rem;
  text-align: center;
}
.message   { min-height: 1.2rem; color: var(--gray); }
.stats     { color: var(--primary); font-weight: 600; }
.hint-info { color: var(--orange);  font-weight: 600; }

/* 박스 Bust 애니메이션 */
@keyframes break {
  0% { transform: scale(1); }
  30%{ transform: scale(1.05) rotate(3deg); }
  60%{ transform: scale(.9) rotate(-3deg); }
  100%{ transform: scale(0); opacity: 0; }
}
.box.bust { animation: break .6s forwards; }

/* 모바일 보정 */
@media (max-width: 480px) {
  .btn-group.menu { gap: 8px; }
  .btn { min-width: 64px; padding: 0.6rem 0.9rem; font-size: 0.85rem; }
  #box { width: 220px; }
}

/* ── 모달 & 숨김 ─────────────────────── */
.modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);  /* 배경 어둡게 */
  z-index: 50;
}

.modal.hidden { display: none; }  /* ← 이 줄이 없으면 항상 보임 */

/* 튜토리얼 상자 */
.modal-box{
  background: var(--panel);
  padding: 1.4rem 1.6rem;
  border-radius: 12px;
  width: 90%; max-width: 400px;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

.close{
  position: absolute; top: .6rem; right: .6rem;
  border: none; background: none; font-size: 1.1rem; cursor: pointer;
}

.howto{list-style:disc inside;margin:.6rem 0 0;padding-left:.3rem;font-size:.9rem;}