/* base.css (mobile-safe) */
:root {
  /* JSが48px前提なのでここも48pxで統一 */
  --cell: 48px;
}

body {
  margin: 16px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial;
  background: #f4f6f8;
}
h1 {
  margin: 0 0 12px;
}
.tag-ui {
  font-size: .8em;
  background: #eef;
  padding: 2px 6px;
  border-radius: 999px;
}

/* PC時：盤＋パネルを横並び */
.wrap {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* 左側：盤＋駒台を縦に積むラッパー */
.leftcol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.panel {
  width: 380px;
}

.box {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 8px;
  background: #fff;
}
.box + .box {
  margin-top: 12px;
}

.btn {
  padding: 8px 12px;
  border: 1px solid #888;
  background: #f7f7f7;
  border-radius: 6px;
  cursor: pointer;
}
.btn:active {
  transform: translateY(1px);
}

input[type="number"],
input[type="text"] {
  padding: 6px;
  border: 1px solid #bbb;
  border-radius: 6px;
  /* ← スマホの自動ズーム対策 */
  font-size: 16px;
}

pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* 盤 */
#board {
  position: relative;
  width:  calc(var(--cell) * 9);
  height: calc(var(--cell) * 9);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  background-image: url('../bg.png');
  background-size: cover;
  background-position: center;
  margin: 0 auto;
}

/* グリッド線レイヤ */
#board::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.18) 1px, transparent 1px);
  background-size: var(--cell) 100%, 100% var(--cell);
  background-position: 0 0, 0 0;
}

/* 駒台：盤と同幅 */
.komadai {
  width: calc(var(--cell) * 9);
  max-width: none;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 10px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 40px;
  gap: 6px;
  align-items: center;
  position: relative;
  background-image: url('../komadai.png') !important;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  backdrop-filter: blur(2px);
  box-shadow: 0 1px 4px rgba(0,0,0,.08) inset;
  overflow-x: auto;
}

.komadai[data-side="top"]::before,
.komadai[data-side="bottom"]::before {
  content: attr(data-label);
  position: absolute;
  left: 8px;
  top: -18px;
  font-size: 12px;
  color: #666;
}

/* タップハイライト */
[data-square].tap-start {
  box-shadow: inset 0 0 0 9999px rgba(128,128,128,.25);
}
[data-square].tap-end {
  box-shadow:
    inset 0 0 0 3px rgba(30,144,255,.85),
    inset 0 0 0 9999px rgba(30,144,255,.18);
}

/* ドロップ */
[data-square].drop-target {
  box-shadow:
    inset 0 0 0 3px rgba(30,144,255,.85),
    inset 0 0 0 9999px rgba(30,144,255,.18);
}
[data-square].drop-denied {
  animation: dropDenied .2s ease;
}
@keyframes dropDenied {
  0%   { box-shadow: inset 0 0 0 3px rgba(220,20,60,.9); }
  100% { box-shadow: none; }
}

/* 手駒選択 */
.hand-piece.hand-selected,
[data-kind].hand-selected {
  outline: 2px solid rgba(30,144,255,.9);
  border-radius: 6px;
}

/* board中央寄せの保険 */
#shogi-root,
#board-wrapper {
  display: block !important;
  text-align: center;
  width: 100%;
}
#board {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* === 駒位置の最終補正 === */
/* 端末ごとの1px右ズレを抑える */
#board img,
#board .piece {
  transform: translateX(-0.6px) translateY(-0.4px);
  image-rendering: pixelated;
}

/* ===== スマホ（560px以下） ===== */
/* → ズームイン固定を避けるために overflow-x は殺さない */
@media (max-width: 560px) {
  /* 余白を少しだけにする。margin:0でもいい */
  body {
    margin: 0;
    background: #f4f6f8;
  }

  /* 盤＋パネルは縦に積む */
  .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .leftcol {
    width: 100%;
    align-items: center;
  }

  /* 右パネルは画面幅いっぱいにする → 見切れ防止 */
  #side-panel,
  .panel {
    width: 100%;
    max-width: 480px;
  }

  html, body {
    max-width: 100%;
    /* overflow-x: hidden; ← これを入れると「動かない」ので今回は入れない */
  }
}

/* 中央寄せ + 文字を“良い感じ”に */
.title-center{
  text-align:center;
  margin:18px 0 12px;
  font-size:clamp(22px, 3.2vw, 30px);
  line-height:1.25;
  font-weight:700;
  letter-spacing:.02em;
  font-family: "Noto Serif JP","Yu Mincho","Hiragino Mincho ProN","HGS明朝E","MS PMincho",serif;
  font-feature-settings: "palt"; /* プロポーショナルかな配列で詰めをきれいに */
}

/* 先後アイコンを少しだけ強調して行間に収める */
.title-center .shogi{
  font-size:1.1em;
  vertical-align:-0.05em;
  opacity:.9;
  margin:0 .35em;
}

/* タイトル全体の装飾 */
.title-center{
  text-align:center;
  margin:18px 0 12px;
  font-size:clamp(22px, 3.2vw, 30px);
  line-height:1.25;
  font-weight:700;
  letter-spacing:.02em;
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN","HGS明朝E","MS PMincho",serif;
  font-feature-settings:"palt";
}

/* 「候補手」だけ赤字 */
.title-center .highlight{
  color:#d22;
  font-weight:800;
}

/* ☖☗ の調整 */
.title-center .shogi{
  font-size:1.1em;
  vertical-align:-0.05em;
  opacity:.9;
  margin:0 .35em;
}

.site-hub{
  text-align:center;
  margin:10px 0 6px;
}
.site-hub a{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  text-decoration:none;
  font-size:14px;
  line-height:1;
  color:#0b5cab;
  background:#eef6ff;
  border:1px solid #d5e8ff;
}
.site-hub a:hover{
  text-decoration:underline;
}


/* 最後の一手ハイライト（共通） */
#board [data-sq].last-move {
  position: relative;
}

#board [data-sq].last-move::after {
  content: "";
  position: absolute;
  inset: 4px;              /* マスの内側に少し余白を取る */
  border-radius: 999px;
  border: 2px solid rgba(255, 0, 0, 0.8);  /* デフォは赤っぽい */
  box-sizing: border-box;
  pointer-events: none;
}

/* 先手（人間）の手は青、後手（COM）の手は赤、など色分けも可能 */
#board [data-sq].last-move[data-last-move-side="b"]::after {
  border-color: rgba(0, 128, 255, 0.9);
}

#board [data-sq].last-move[data-last-move-side="w"]::after {
  border-color: rgba(255, 64, 64, 0.9);
}

/* 最後の一手マーカー（基本形） */
#board .last-move {
  position: relative; /* 念のため：div自体はもう relative だけど保険 */
}

/* 盤面のマスに半透明の丸マーカーを描く */
#board .last-move::after {
  content: '';
  position: absolute;
  inset: 6px;              /* マスの中に少し余白を空けて丸を描く */
  border-radius: 50%;
  border: 3px solid rgba(255, 0, 0, 0.8);  /* デフォルトは赤系 */
  box-sizing: border-box;
  pointer-events: none;    /* クリック判定に干渉しない */
}

/* 手番側で色を変えたい場合（COM: w / 人間: b） */
#board .last-move[data-last-move-side="w"]::after {
  border-color: rgba(255, 0, 0, 0.9);   /* COM: 赤 */
}

#board .last-move[data-last-move-side="b"]::after {
  border-color: rgba(0, 128, 255, 0.9); /* 人間: 青など */
}