/* ===== sliding puzzle ===== */

/* BOX内がギチギチにならないように */
.gameWrap{
  padding: 16px 20px 18px; /* ←上下左右に余白 */
}

/* 上部：リセット＋手数 */
.puzzleHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* 盤面：レスポンシブ（最大420px） */
.puzzle{
  width: 100%;              /* 親要素基準にする */
  max-width: 420px;         /* PCでは大きくなりすぎない */
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 6px;
  background: rgba(0,0,0,0.08);
  padding: 6px;
  border-radius: 14px;
  box-sizing: border-box;
}


/* タイル */
.tile{
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 10px;
  background-image: url("./sliding_puzzle.png");
  background-size: 400% 400%;
  background-position:
    calc(var(--c) * 100% / 3)
    calc(var(--r) * 100% / 3);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* 空白 */
.tile.blank{
  background: #ffffff;
  border: 1px dashed rgba(0,0,0,0.25);
  cursor: default;
}

/* 触った感じ */
.tile:active{
  transform: scale(0.99);
}

.puzzleNote{
  margin-top: 10px;
  font-size: 0.92em;
  opacity: 0.85;
}