/* ==========================================================================
   Yamato.com — Shogi board & koma
   The pieces are real 五角形 koma: a pentagon tapering to a point that faces
   the opponent, cut from pale kaya-coloured wood with the kanji brushed on in
   sumi (vermilion once promoted). Which way a koma points is what tells you
   whose it is — the same cue you read on a physical board.
   ========================================================================== */

:root {
  --sg-wood-1: #f0d9a8;      /* 榧 kaya board */
  --sg-wood-2: #e5c689;
  --sg-wood-edge: #8a5a2b;
  --sg-line: #4a3419;
  --sg-coord: rgba(74, 52, 25, 0.62);
  --sg-coord-font: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif;

  --sg-koma-1: #fdf1d4;      /* 黄楊 boxwood koma */
  --sg-koma-2: #f0dcaf;
  --sg-koma-edge: #c39a5c;
  --sg-koma-ink: #241c10;
  --sg-koma-red: #b3261e;    /* promoted face */

  --sg-select: #1f7a4d;
  --sg-target: rgba(31, 122, 77, 0.55);
  --sg-last: #d98324;
  --sg-check: #c8102e;
}

/* --------------------------------------------------------------- layout */
.sg-host { width: 100%; }

.sg-root {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  justify-items: center;
}

.sg-board-wrap {
  position: relative;
  width: 100%;
  max-width: 620px;
  border-radius: 10px;
  padding: 2.6%;
  background: linear-gradient(150deg, #9a6631, #7a4a23 55%, #5f3617);
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.30),
    inset 0 0 0 2px rgba(255, 255, 255, 0.07);
}

.sg-board {
  position: relative;
  width: 100%;
  /* 9 cells of 3.03 x 3.30 cm — a shogi board is a touch taller than it is wide. */
  aspect-ratio: 900 / 981;
  border-radius: 3px;
  background:
    radial-gradient(130% 130% at 50% 0%, var(--sg-wood-1), var(--sg-wood-2) 72%, #dbb877 100%);
  box-shadow: inset 0 0 54px rgba(120, 72, 28, 0.30);
  overflow: hidden;
}

.sg-grid { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Coordinates sit outside the grid, in the wooden margin. */
.sg-board-wrap.sg-has-coords { padding: 26px 30px 14px 14px; }

.sg-files, .sg-ranks {
  position: absolute;
  display: grid;
  color: rgba(255, 244, 224, 0.72);
  font-family: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif;
  font-size: clamp(9px, 1.7vw, 13px);
  pointer-events: none;
}
.sg-files {
  left: 14px; right: 30px; top: 4px; height: 20px;
  grid-template-columns: repeat(9, 1fr);
}
.sg-ranks {
  top: 26px; bottom: 14px; right: 4px; width: 24px;
  grid-template-rows: repeat(9, 1fr);
}
.sg-files span, .sg-ranks span { display: grid; place-items: center; }

@media (max-width: 560px) {
  .sg-board-wrap.sg-has-coords { padding: 19px 21px 10px 10px; }
  .sg-files { left: 10px; right: 21px; top: 2px; height: 15px; }
  .sg-ranks { top: 19px; bottom: 10px; right: 2px; width: 18px; }
}

.sg-piece-layer,
.sg-marker-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sg-piece-layer { z-index: 3; }
.sg-marker-layer { z-index: 2; }

/* ------------------------------------------------------------------ koma */
.sg-piece,
.sg-hand-piece {
  --koma-w: 11.11%;          /* one ninth of the board */
  position: absolute;
  width: 11.11%;
  height: 11.11%;
  display: grid;
  place-items: center;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.14s ease, filter 0.14s ease;
  will-change: transform;
}

.sg-piece::before,
.sg-hand-piece::before {
  content: '';
  position: absolute;
  left: 6%;
  top: 3%;
  width: 88%;
  height: 94%;
  /* The classic koma silhouette: a narrow apex, shoulders about a tenth of the
     way down, then flaring to a wide flat base. */
  clip-path: polygon(50% 0%, 78% 15%, 94% 100%, 6% 100%, 22% 15%);
  background: linear-gradient(168deg, var(--sg-koma-1) 0%, var(--sg-koma-2) 78%, #e3cb9a 100%);
  filter: drop-shadow(0 2px 2px rgba(60, 36, 8, 0.34));
}

/* A hairline of grain along the shoulders gives the wood some depth. */
.sg-piece::after,
.sg-hand-piece::after {
  content: '';
  position: absolute;
  left: 6%;
  top: 3%;
  width: 88%;
  height: 94%;
  clip-path: polygon(50% 0%, 78% 15%, 94% 100%, 6% 100%, 22% 15%);
  background:
    linear-gradient(96deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(0deg, rgba(154, 102, 49, 0.20) 0%, rgba(154, 102, 49, 0) 34%);
  pointer-events: none;
}

.sg-face {
  position: relative;
  z-index: 2;
  font-family: 'Yuji Syuku', 'Shippori Mincho B1', 'Hiragino Mincho ProN',
               'Yu Mincho', serif;
  font-size: clamp(12px, 4.9cqw, 32px);
  line-height: 1;
  color: var(--sg-koma-ink);
  transform: translateY(9%);
  user-select: none;
  -webkit-user-select: none;
}

.sg-board { container-type: inline-size; }

.sg-promoted .sg-face { color: var(--sg-koma-red); }

/* Gote's koma are the same piece turned to face the other way. */
.sg-flip { transform: rotate(180deg); }
.sg-piece.sg-flip:hover { transform: rotate(180deg) translateY(-2%); }
.sg-piece:hover { transform: translateY(-2%); }

/* ------------------------------------------------------------- highlights */
.sg-mark {
  position: absolute;
  width: 11.11%;
  height: 11.11%;
  pointer-events: none;
}

.sg-target::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26%;
  height: 26%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--sg-target);
}

.sg-target-capture {
  box-shadow: inset 0 0 0 3px var(--sg-check);
  background: rgba(200, 16, 46, 0.12);
}

.sg-selected-sq { background: rgba(31, 122, 77, 0.24); box-shadow: inset 0 0 0 2px var(--sg-select); }
.sg-last-from { background: rgba(217, 131, 36, 0.16); }
.sg-last-to { background: rgba(217, 131, 36, 0.28); box-shadow: inset 0 0 0 2px var(--sg-last); }

.sg-check {
  box-shadow: inset 0 0 0 3px var(--sg-check);
  background: rgba(200, 16, 46, 0.16);
  animation: sgCheckPulse 1.1s ease-in-out infinite;
}

@keyframes sgCheckPulse {
  0%, 100% { background: rgba(200, 16, 46, 0.16); }
  50% { background: rgba(200, 16, 46, 0.32); }
}

.sg-mate { box-shadow: inset 0 0 0 4px var(--sg-check); background: rgba(200, 16, 46, 0.35); }
.sg-mate-attacker { box-shadow: inset 0 0 0 3px rgba(200, 16, 46, 0.7); }

/* ---------------------------------------------------------------- komadai */
.sg-stand {
  width: 100%;
  max-width: 620px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 13px;
  border-radius: 9px;
  background: linear-gradient(160deg, #efdcb4, #e0c48d);
  border: 1px solid #c39a5c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sg-stand-label {
  flex: 0 0 auto;
  font-family: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif;
  font-size: 13px;
  font-weight: 700;
  color: #6b4a1e;
  letter-spacing: 0.08em;
  writing-mode: horizontal-tb;
}

.sg-stand-list {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  min-height: 44px;
}

.sg-stand-empty { font-size: 12.5px; color: #8a7350; font-family: 'Shippori Mincho B1', serif; }

/* Hand koma sit in normal flow, so they override the absolute board sizing. */
.sg-hand-piece {
  position: relative;
  width: 40px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: 3px;
}

.sg-hand-piece .sg-face { font-size: 20px; }
.sg-hand-piece.sg-selected { filter: drop-shadow(0 0 0 2px var(--sg-select)) brightness(1.06); }
.sg-hand-piece.sg-selected::before { box-shadow: 0 0 0 2px var(--sg-select); }
.sg-hand-piece:hover { transform: translateY(-2px); }
.sg-hand-piece.sg-flip:hover { transform: rotate(180deg) translateY(-2px); }

.sg-hand-count {
  position: absolute;
  right: -1px;
  bottom: -2px;
  z-index: 3;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--sg-koma-red);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-family: system-ui, sans-serif;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.sg-hand-piece.sg-flip .sg-hand-count { transform: rotate(180deg); right: auto; left: -1px; top: -2px; bottom: auto; }

/* The top stand reads right-to-left, mirroring how it sits across the board. */
.sg-stand-top .sg-stand-list { flex-direction: row-reverse; }

/* ------------------------------------------------------------ promotion */
.sg-promo-ask {
  position: absolute;
  z-index: 20;
  display: flex;
  gap: 8px;
  padding: 9px;
  border-radius: 10px;
  background: rgba(255, 253, 246, 0.98);
  border: 1px solid var(--sg-koma-edge);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.sg-promo-ask button {
  border: 1px solid var(--sg-koma-edge);
  background: linear-gradient(168deg, var(--sg-koma-1), var(--sg-koma-2));
  border-radius: 6px;
  padding: 9px 13px;
  cursor: pointer;
  font-family: 'Yuji Syuku', 'Shippori Mincho B1', serif;
  font-size: 19px;
  color: var(--sg-koma-ink);
  line-height: 1;
  min-width: 54px;
}
.sg-promo-ask button.sg-promo-yes { color: var(--sg-koma-red); }
.sg-promo-ask button:hover { filter: brightness(1.06); }
.sg-promo-ask .sg-promo-label {
  display: block;
  font-family: system-ui, sans-serif;
  font-size: 10px;
  color: #6b4a1e;
  margin-top: 3px;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------- banner */
.sg-banner {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 12;
  padding: 14px;
  text-align: center;
  background: linear-gradient(0deg, rgba(18, 40, 63, 0.94), rgba(18, 40, 63, 0.72));
  color: #fff;
  pointer-events: none;
}
.sg-banner-text { font-family: 'Shippori Mincho B1', serif; font-size: 20px; font-weight: 700; }
.sg-banner-sub { font-size: 13px; opacity: 0.82; margin-top: 3px; }

.sg-locked .sg-piece,
.sg-locked .sg-hand-piece { cursor: default; }

/* ------------------------------------------------------------ record / kifu */
.sg-kifu {
  background: #fff;
  border: 1px solid var(--ya-line, #ddd2bf);
  border-radius: 10px;
  max-height: 260px;
  overflow-y: auto;
  font-size: 13.5px;
}
.sg-kifu-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 8px;
  padding: 5px 12px;
  border-bottom: 1px solid #f0ebe0;
  font-variant-numeric: tabular-nums;
}
.sg-kifu-row:last-child { border-bottom: none; }
.sg-kifu-row .sg-kifu-n { color: #6d6558; text-align: right; }
.sg-kifu-row .sg-kifu-move {
  font-family: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif;
}
.sg-kifu-row.is-latest { background: #fdf6e6; font-weight: 700; }

@media (max-width: 620px) {
  .sg-stand { min-height: 54px; padding: 7px 10px; }
  .sg-hand-piece { width: 34px; height: 38px; }
  .sg-hand-piece .sg-face { font-size: 17px; }
  .sg-stand-label { font-size: 11.5px; }
}

/* Crafted kaya and boxwood. Geometry remains in the renderer; artwork is local. */
.sg-board-wrap { border-radius: 5px; background: linear-gradient(100deg,#ad783cbb,#d7ac65aa), url('/images/art/materials/kaya.webp') center/cover; box-shadow: 0 7px 0 #86572c,0 9px 0 #634121,0 17px 30px #39261026,inset 0 1px 0 #ffefbf; }
.sg-board { border-radius: 0; background: linear-gradient(120deg,#fff1c030,#bd873515),url('/images/art/materials/kaya.webp') center/cover; box-shadow: inset 0 0 28px #a66e2920; }
.sg-files,.sg-ranks { color: #503716; text-shadow: 0 1px #ffe3a9; }
.sg-stand { border-radius: 5px; background: linear-gradient(#fff2d045,#e6b35e20),url('/images/art/materials/kaya.webp') center/cover; border-color:#bc9359; box-shadow:0 3px 0 #a57941,0 6px 12px #39261015,inset 0 1px #fff5d8; }
.sg-piece,.sg-hand-piece { filter:drop-shadow(0 3px 1px #51351480); }
.sg-piece::before,.sg-hand-piece::before { background: #a57838; filter:none; top:7%; }
.sg-piece::after,.sg-hand-piece::after { background:linear-gradient(105deg,#fff6dca3,#fff1cc38 45%,#9d691814),url('/images/art/materials/kaya.webp') center/280px; box-shadow:inset 0 0 9px #fff1be; }
.sg-face { position:absolute; inset:3% 6%; width:88%; height:94%; transform:none; display:grid; place-items:center; }
.sg-face img { width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; }
.sg-piece:hover { filter:drop-shadow(0 5px 2px #51351480) brightness(1.035); }
.sg-hand-piece.sg-selected { filter:drop-shadow(0 0 3px #1f7a4d) brightness(1.08); }
.sg-promo-ask button { background:linear-gradient(#fff2d070,#fff0),url('/images/art/materials/kaya.webp') center/cover; }
/* Transparent keyboard grid preserves the physical board and pointer geometry. */
.sg-input-layer{position:absolute;inset:0;z-index:8;display:grid;grid-template-rows:repeat(9,1fr);}
.sg-input-row{display:grid;grid-template-columns:repeat(9,1fr);}
.sg-input-cell{min-width:0;min-height:0;outline:none;}
.sg-input-cell:focus-visible{outline:3px solid #365b72;outline-offset:-3px;background:#fdf1c52b;}
.sg-promo-ask{z-index:16;}

/* ------------------------------------------------- koma, made like a real set
   A carved set is not one size: the king is the largest piece, then rook and
   bishop, gold and silver, knight, lance, and the pawn smallest. As on a real
   board every piece is set in the middle of its square, so the smaller ones
   leave a margin on all sides and none of them rests on a line.
   The face is pale boxwood (黄楊), a shade lighter and warmer than the kaya
   board so pieces read at a glance; the side of the piece shows as a darker
   strip below the face; a hairline edge keeps the silhouette crisp; and the
   shoulders are softly rounded rather than cut to a point. Each square shows
   the grain from a different place, so neighbouring pieces do not look stamped. */
.sg-piece { --s: 1; }
.sg-piece[data-piece$="K"] { --s: 1; }
.sg-piece[data-piece$="R"], .sg-piece[data-piece$="B"] { --s: .965; }
.sg-piece[data-piece$="G"], .sg-piece[data-piece$="S"] { --s: .935; }
.sg-piece[data-piece$="N"] { --s: .905; }
.sg-piece[data-piece$="L"] { --s: .885; }
.sg-piece[data-piece$="P"] { --s: .86; }
.sg-piece, .sg-hand-piece {
  --kw: calc(86% * var(--s, 1));
  --kh: calc(91% * var(--s, 1));
  --ktop: calc((100% - var(--kh)) / 2 - 1.5%);
  --koma-shape: polygon(50% 0%, 70% 7.5%, 77.5% 12.5%, 80.2% 16.5%, 80.8% 19%, 94% 100%, 6% 100%, 19.2% 19%, 19.8% 16.5%, 22.5% 12.5%, 30% 7.5%);
  filter: drop-shadow(0 0 .5px #5a3c16b3) drop-shadow(0 2px 1.2px #3c270e59);
}
.sg-piece::before, .sg-hand-piece::before,
.sg-piece::after, .sg-hand-piece::after,
.sg-piece .sg-face, .sg-hand-piece .sg-face {
  left: calc((100% - var(--kw)) / 2);
  width: var(--kw);
  height: var(--kh);
  clip-path: var(--koma-shape);
}
/* the side of the piece */
.sg-piece::before, .sg-hand-piece::before {
  top: calc(var(--ktop) + 3.5%);
  background: linear-gradient(180deg, #c99a55, #a87a3c 70%, #8d6430);
}
/* the face */
.sg-piece::after, .sg-hand-piece::after {
  top: var(--ktop);
  background:
    linear-gradient(100deg, #fffaf0a6 0%, #fff6e000 42%),
    linear-gradient(0deg, #b9864a2e 0%, #b9864a00 30%),
    linear-gradient(180deg, #faeccad9, #f1d9a6d9 72%, #e6c68bd9),
    url('/images/art/materials/kaya.webp') var(--grain, 40% 30%) / 260%;
  box-shadow: inset 0 0 0 .6px #fffbe9b3, inset 0 -1.5px 0 #c9a06233;
}
.sg-piece .sg-face, .sg-hand-piece .sg-face { top: var(--ktop); clip-path: none; }
.sg-piece:hover { filter: drop-shadow(0 0 .5px #5a3c16b3) drop-shadow(0 4px 2px #3c270e66) brightness(1.03); }
.sg-hand-piece.sg-selected { filter: drop-shadow(0 0 .5px #5a3c16b3) drop-shadow(0 0 3px #1f7a4d) brightness(1.06); }
/* A gote piece is turned round, but the light still falls from the top of the
   screen: its side shows below the tip and its shadow falls down the board. */
.sg-piece.sg-flip, .sg-hand-piece.sg-flip { filter: drop-shadow(0 0 .5px #5a3c16b3) drop-shadow(0 -2px 1.2px #3c270e59); }
.sg-piece.sg-flip::before, .sg-hand-piece.sg-flip::before { top: calc(var(--ktop) - 3.5%); background: linear-gradient(0deg, #c99a55, #a87a3c 70%, #8d6430); }
.sg-piece.sg-flip:hover { filter: drop-shadow(0 0 .5px #5a3c16b3) drop-shadow(0 -4px 2px #3c270e66) brightness(1.03); }

/* Pieces in hand keep the count clear of the piece: a small ink seal on the
   empty corner beside the narrow top of the piece, upright for both players,
   rather than a red dot over the lower half of the character. */
.sg-stand .sg-hand-piece .sg-hand-count,
.ya-play-screen .sg-stand .sg-hand-piece .sg-hand-count {
  top: -3px; right: -5px; bottom: auto; left: auto; transform: none;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
  background: #2d2114; color: #fbefcf; box-shadow: 0 0 0 1.5px #f3dfb0, 0 1px 2px #0005;
  font: 700 10px/15px system-ui, sans-serif;
}
.sg-stand .sg-hand-piece.sg-flip .sg-hand-count,
.ya-play-screen .sg-stand .sg-hand-piece.sg-flip .sg-hand-count { top: auto; right: auto; bottom: -3px; left: -5px; transform: rotate(180deg); }
.ya-play-screen[data-sg-layout=rails] .sg-stand .sg-hand-piece .sg-hand-count { min-width: 17px; height: 17px; font-size: 11px; line-height: 17px; }
/* The prompt sizes to its labels (some languages need two words) and never
   wraps a label mid-word; ShogiBoard.placeNear keeps it inside the board. */
.sg-promo-ask { width: max-content; max-width: calc(100% - 8px); }
.sg-promo-ask button { min-width: 64px; }
.sg-promo-ask .sg-promo-label { white-space: nowrap; }