/* =====================================================================
   style.css — もぐらたたき ツール固有の微調整のみ。
   共通スタイルは /_shared/shirugear.css に任せる。
   色は正規の CSS 変数（--sg-…）＋フォールバックのみ使用（ダーク対応）。
   ===================================================================== */

/* 難易度選択 / チェックボックス */
.sg-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: var(--sg-space-1, 4px);
}
.sg-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.95rem;
}

/* ツールバー（操作ボタン + スコア） */
.sg-whack-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sg-whack-actions {
  display: flex;
  gap: 8px;
}
.sg-whack-stats {
  display: flex;
  gap: 18px;
}
.sg-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
}
.sg-stat__label {
  font-size: 0.72rem;
  color: var(--sg-muted, #777);
}
.sg-stat__value {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sg-whack-status {
  margin-top: 10px;
  font-weight: 600;
  color: var(--sg-accent, #3b5bdb);
}

/* 盤面（穴グリッド） */
.sg-board-wrap {
  display: flex;
  justify-content: center;
}
.sg-whack-board {
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 10px;
  width: 100%;
  max-width: 420px;
  /* 盤面上のタップでスクロール・ダブルタップズームを起こさない */
  touch-action: none;
}

/* 穴（操作可能ボタン） */
.sg-hole {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--sg-border, #e5e7eb);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 135%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 60%),
    var(--sg-surface-2, #eef1f7);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.06s ease;
}
.sg-hole::after {
  /* 穴の縁（内側の影） */
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: var(--sg-surface, #fff);
  box-shadow: inset 0 6px 10px rgba(0, 0, 0, 0.18);
}
.sg-hole:active {
  transform: scale(0.96);
}
.sg-hole:focus-visible {
  outline: 3px solid var(--sg-primary, #3b5bdb);
  outline-offset: 2px;
}

/* 出現物（モグラ／爆弾）の絵文字 */
.sg-hole__face {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.6rem, 9vw, 2.6rem);
  line-height: 1;
  transform: translateY(60%);
  opacity: 0;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.sg-hole.is-mole .sg-hole__face,
.sg-hole.is-bomb .sg-hole__face {
  transform: translateY(0);
  opacity: 1;
}
.sg-hole.is-mole {
  background:
    radial-gradient(circle at 50% 135%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 60%),
    var(--sg-primary-soft, #dbe4ff);
}
.sg-hole.is-bomb {
  background:
    radial-gradient(circle at 50% 135%, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 60%),
    var(--sg-surface-2, #eef1f7);
}

/* 命中フィードバック */
.sg-hole.flash-hit::after {
  box-shadow: inset 0 0 0 4px var(--sg-primary, #3b5bdb);
}
.sg-hole.flash-bomb::after {
  box-shadow: inset 0 0 0 4px var(--sg-accent, #e8590c);
}