/* 将棋専用スタイル（base.css を土台に、盤と駒だけ足す） */

:root {
  --shogi-board: #e8c887;
  --shogi-line: #6b4f2a;
  --shogi-piece: #3a2a12;
  --shogi-sel: #f2d34a;
  --shogi-move: rgba(60, 160, 90, .5);
  --shogi-last: #ff3b30; /* 直前の手（明るい赤） */
}
@media (prefers-color-scheme: dark) {
  :root { --shogi-board: #caa96a; }
}

.shogi-board {
  position: relative;                 /* 成りポップアップの基準 */
  width: min(96vw, 460px);
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 1px;
  background: var(--shogi-line);
  border: 2px solid var(--shogi-line);
  touch-action: manipulation;
}
.sq {
  background: var(--shogi-board);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0; padding: 0; margin: 0;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  min-height: 0;
}
.sq.playable { cursor: pointer; }
.sq.sel { background: var(--shogi-sel); }
.sq.movable::after {
  content: ""; position: absolute; width: 34%; height: 34%;
  border-radius: 50%; background: var(--shogi-move); z-index: 1;
}
.sq.last { box-shadow: inset 0 0 0 3px var(--shogi-last); }

/* 駒：本物の将棋と同じ五角形（将棋駒＝ホームベース型）で表示する。
   五角形は背景のSVGで描き、その中央に漢字を置く。後手は全体を180°回転。 */
.pc {
  width: 96%;
  height: 96%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112'%3E%3Cpolygon points='50,10 87,40 80,106 20,106 13,40' fill='%23fbe7c2' stroke='%236b4f2a' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: var(--shogi-piece);
  font-weight: 700;
  font-size: clamp(13px, 4.5vw, 25px);
  line-height: 1;
  user-select: none;
  padding-top: 14%;              /* 五角形の胴体（やや下）に文字を置く */
  box-sizing: border-box;
}
.pc.g { transform: rotate(180deg); }   /* 後手の駒は上下反転 */
/* 盤を反転（オンラインで後手＝自分が手前）したときは駒の向きも入れ替える */
.shogi-board.flip .pc.s { transform: rotate(180deg); }
.shogi-board.flip .pc.g { transform: none; }
.pc.promoted { color: #c0271a; }        /* 成り駒は赤系で区別 */

/* はっきり表示（太陽光下でも見やすい高コントラスト） */
.shogi-board.hc { --shogi-line: #2b1f0e; }
.shogi-board.hc .pc {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112'%3E%3Cpolygon points='50,10 87,40 80,106 20,106 13,40' fill='%23fffdf5' stroke='%23000000' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");
  color: #000;
}
.shogi-board.hc .pc.promoted { color: #c00000; }

/* 成りポップアップ（駒のすぐ近くに出す。必要なときだけ表示） */
.promo-popup[hidden] { display: none; }  /* hidden属性がdisplay:flexに負けないように */
.promo-popup {
  position: absolute;
  z-index: 20;
  display: flex;
  gap: 6px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
  white-space: nowrap;
}
.promo-popup button { min-height: 36px; padding: 5px 12px; font-size: .95rem; }

/* 持ち駒 */
.hands { width: min(96vw, 460px); margin: 6px auto; }
.hand {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-height: 40px; padding: 4px 6px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
}
.hand .label { font-size: .8rem; color: var(--muted); margin-right: 4px; }
.hand-piece {
  font: inherit; font-weight: 700; font-size: 1rem;
  padding: 4px 8px; min-height: 36px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--shogi-board); color: var(--shogi-piece);
  cursor: pointer; display: inline-flex; align-items: center; gap: 2px;
}
.hand-piece.sel { background: var(--shogi-sel); border-color: var(--shogi-last); }
.hand-piece .cnt { font-size: .75rem; color: var(--shogi-line); }
.hand.empty .none { font-size: .8rem; color: var(--muted); }