/* /games/hit-and-blow/hit-and-blow.css */
#status.ok { color: #198754; }   /* Bootstrap green */
#status.warn { color: #fd7e14; } /* Bootstrap orange */
#status.err { color: #dc3545; }  /* Bootstrap red */
#status.muted { color: #6c757d; }

h1 {
    text-align: center;
}

/* リンクを中央寄せ＋最大幅指定 */
.game-description {
  max-width: 360px; /* スマホ寄りの幅に統一 */
  margin-left: auto;
  margin-right: auto;
}

/* デスクトップ表示時のみ制限を適用 */
@media (min-width: 768px) {
  .game-description {
    max-width: 520px; /* PCでは少し余裕を持たせる */
  }
}

/* ゲーム全体のコンテナを中央寄せ＋最大幅指定 */
.link-buttons, .game-container {
  max-width: 360px; /* スマホ寄りの幅に統一 */
  margin-left: auto;
  margin-right: auto;
}

/* デスクトップ表示時のみ制限を適用 */
@media (min-width: 768px) {
  .link-buttons, .game-container {
    max-width: 400px; /* PCでは少し余裕を持たせる */
  }
}

.card {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.table td, .table th { font-variant-numeric: tabular-nums; }

.result-anim {
  font-weight: bold;
  font-size: 1.1em;
  animation: pop 0.3s ease-out;
}

@keyframes pop {
  0% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(1); }
}

.custom-keypad-container {
  font-family: 'Press Start 2P', monospace;
  max-width: 280px;
  margin: 0 auto;
  text-align: center;
}

.keypad-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.keypad-btn {
  padding: 10px;
  font-size: 0.75rem;
  background-color: #000;
  color: #0f0;
  border: 2px solid #0f0;
  border-radius: 0;
  text-transform: uppercase;
  box-shadow: inset -2px -2px 0 #030, inset 2px 2px 0 #0f0;
}

.keypad-btn:active {
  background-color: #0f0;
  color: #000;
  box-shadow: inset 2px 2px 0 #030, inset -2px -2px 0 #0f0;
}

.action-btn {
  background-color: #111;
  color: #ff0;
  border-color: #ff0;
  box-shadow: inset -2px -2px 0 #330, inset 2px 2px 0 #ff0;
}

.action-btn:active {
  background-color: #ff0;
  color: #111;
  box-shadow: inset 2px 2px 0 #330, inset -2px -2px 0 #ff0;
}

.keypad-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 簡易フラッシュ画面 */
#flash-effect {
  position: fixed;
  inset: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
}

/* 紙吹雪パーツ */
.confetti {
  position: fixed;
  width: 8px;
  height: 8px;
  background-color: red;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

.digit-inputs {
  display: flex;                 /* 横並び固定 */
  justify-content: center;       /* 中央寄せ */
  gap: 6px;                       /* 桁間スペース */
  flex-wrap: nowrap;              /* 強制的に折り返さない */
}

.digit-inputs[data-digit-count] {
  --digits: attr(data-digit-count number);
}

.digit-slot {
  flex: 0 0 auto;                 /* 幅固定で縮まない */
  width: 40px;                    /* 基本幅（必要に応じて調整） */
  height: 40px;
  font-size: 20px;
  text-align: center;
  border: 2px solid #5e5e5e;
  background: #222;
  color: #bbb;
  border-radius: 4px;
  box-shadow: inset 0 2px 0 #111;
}

.digit-slot.filled { color: #fff; border-color: #888; }
.digit-slot.selected { border-color: #ffd54a; box-shadow: 0 0 0 2px #ffd54a55, inset 0 2px 0 #111; }

.digit-inputs.warn .digit-slot { animation: warn .14s linear; }
.digit-slot.pulse { animation: pulse .18s ease; }

/* 必要なら可変幅対応（例: 画面幅に合わせて自動縮小） */
@media (max-width: 400px) {
  .digit-slot {
    width: calc((100% - (var(--digits,4) - 1) * 6px) / var(--digits,4));
    font-size: 4vw;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

@keyframes warn { from { transform: translateX(0) } 25% { transform: translateX(-3px) } 75% { transform: translateX(3px) } to { transform: translateX(0) } }
@keyframes pulse { from { transform: scale(1) } 50% { transform: scale(0.96) } to { transform: scale(1) } }

.keypad .keypad-btn.hint { animation: bump .2s ease; }
@keyframes bump { 50% { transform: translateY(-2px) } }