/* =============================================================
   GAME: Shogi
   ============================================================= */
.board-shogi {
  --cell: min(calc((100vw - 86px) / 9), 50px);
  --sho-glow: #ff9ec4;
  --sho-gote: #6fe3ff;
  --sho-line: rgba(255, 196, 220, .42);
  display: flex; flex-direction: column; gap: 6px; width: calc(var(--cell) * 9 + 22px);
}
.sho-grid {
  position: relative; display: grid; grid-template-columns: repeat(9, var(--cell)); grid-auto-rows: var(--cell);
  padding: 16px 16px 6px 6px; border-radius: 12px;
  background-image: linear-gradient(to right, var(--sho-line) 1px, transparent 1px), linear-gradient(to bottom, var(--sho-line) 1px, transparent 1px), linear-gradient(160deg, #3a1f2c, #22121c 60%, #1a0d16);
  background-size: var(--cell) var(--cell), var(--cell) var(--cell), 100% 100%;
  background-origin: content-box, content-box, border-box;
  background-clip: content-box, content-box, border-box;
  box-shadow: 0 0 0 2px var(--sho-glow), 0 0 26px rgba(255, 158, 196, .35);
}
.sho-grid::before {
  content: ""; position: absolute; left: 6px; top: 16px; width: calc(var(--cell) * 9); height: calc(var(--cell) * 9);
  box-shadow: inset 0 0 0 1.5px rgba(255, 196, 220, .6); pointer-events: none;
}
.sho-cf, .sho-cr { position: absolute; font: 700 10px/1 var(--font-body); color: rgba(255, 196, 220, .75); pointer-events: none; display: grid; place-items: center; }
.sho-cf { top: 3px; height: 11px; left: calc(6px + var(--i) * var(--cell)); width: var(--cell); }
.sho-cr { right: 1px; width: 14px; top: calc(16px + var(--i) * var(--cell)); height: var(--cell); }
.sho-star { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 196, 220, .8); pointer-events: none;
  left: calc(6px + var(--c) * var(--cell) - 2px); top: calc(16px + var(--r) * var(--cell) - 2px); z-index: 1; }

.sho-sq { position: relative; border: 0; padding: 0; margin: 0; background: transparent; display: grid; place-items: center; cursor: default; }
.sho-sq.movable, .sho-sq.dest, .sho-sq.cap { cursor: pointer; }
.sho-sq:focus { outline: none; }
.sho-sq:focus-visible { box-shadow: inset 0 0 0 3px var(--focus); z-index: 3; }
.sho-sq.last::before { content: ""; position: absolute; inset: 1px 0 0 1px; background: rgba(255, 210, 63, .2); }
.sho-sq.sel::before { content: ""; position: absolute; inset: 1px 0 0 1px; background: rgba(255, 158, 196, .26); box-shadow: inset 0 0 0 2px var(--sho-glow); }
.sho-sq.check { background-image: radial-gradient(circle, rgba(255, 61, 127, .95) 0%, rgba(255, 61, 127, .45) 45%, transparent 72%); }
.sho-sq.dest::after { content: ""; position: absolute; width: 28%; height: 28%; border-radius: 50%; background: rgba(255, 158, 196, .75); box-shadow: 0 0 8px rgba(255, 158, 196, .9); z-index: 2; }
.sho-sq.dest:hover::after { width: 40%; height: 40%; }
.sho-sq.cap::after { content: ""; position: absolute; inset: 6%; border-radius: 8px; box-shadow: inset 0 0 0 3px rgba(255, 158, 196, .9), 0 0 9px rgba(255, 158, 196, .7); z-index: 2; }

.sho-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
/* pieces: wooden pentagon with a darker edge for thickness, bevel highlight and an engraved character */
.sho-pc { position: relative; width: 94%; height: 94%; z-index: 1; pointer-events: none; overflow: visible; transition: transform .15s, filter .15s; }
.sho-pc.z1 { width: 90%; height: 90%; }
.sho-pc.z2 { width: 86%; height: 86%; }
.sho-pc.z3 { width: 82%; height: 82%; }
.sho-pc.z4 { width: 78%; height: 78%; }
.sho-pc .ed { fill: url(#sho-edge); }
.sho-pc .fc { fill: url(#sho-face); }
.sho-pc .bv { fill: none; stroke: url(#sho-bevel); stroke-width: 1.2; stroke-linejoin: round; }
.sho-pc text { font: 700 20px "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", "MS Mincho", serif; text-anchor: middle; dominant-baseline: central; fill: #1f150b; stroke: #1f150b; stroke-width: .35; }
.sho-pc.pro text { fill: #c3102b; stroke: #c3102b; }
.sho-pc.lt text { font: 800 18px var(--font-body); stroke-width: 0; }
.sho-pc.lt text.two { font-size: 14px; letter-spacing: -.5px; }
.sho-pc.s0 { filter: drop-shadow(0 1.6px 1.2px rgba(10, 2, 8, .65)) drop-shadow(0 0 2.5px rgba(255, 158, 196, .55)); }
.sho-pc.s1 { filter: drop-shadow(0 1.6px 1.2px rgba(10, 2, 8, .65)) drop-shadow(0 0 2.5px rgba(111, 227, 255, .5)); }
.sho-sq.movable:hover .sho-pc { transform: translateY(-2px) scale(1.05); }
.sho-sq.sel .sho-pc { transform: translateY(-2px) scale(1.1); filter: drop-shadow(0 3px 2px rgba(10, 2, 8, .6)) drop-shadow(0 0 6px rgba(255, 158, 196, .95)); }

/* pieces in hand */
.sho-hand { display: flex; align-items: center; gap: 8px; min-height: calc(var(--cell) * .9 + 6px); padding: 0 4px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.sho-who { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sho-who.active { color: var(--ink); }
.sho-who .dot { width: 12px; height: 12px; }
.sho-dot.s0 { background: #ff9ec4; box-shadow: 0 0 8px rgba(255, 158, 196, .7); }
.sho-dot.s1 { background: #6fe3ff; box-shadow: 0 0 8px rgba(111, 227, 255, .6); }
.sho-pcs { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px; flex: 1; min-width: 0; }
.sho-none { font-weight: 500; font-size: .8rem; opacity: .6; }
.sho-hp {
  position: relative; width: calc(var(--cell) * .76); height: calc(var(--cell) * .82); border: 0; padding: 0; margin: 0;
  background: transparent; border-radius: 8px; display: grid; place-items: center; cursor: default; color: inherit;
}
.sho-hp .sho-pc { width: 100%; height: 100%; }
.sho-hp.movable { cursor: pointer; }
.sho-hp.movable:hover .sho-pc { transform: translateY(-2px) scale(1.05); }
.sho-hp:focus { outline: none; }
.sho-hp:focus-visible { box-shadow: 0 0 0 3px var(--focus); }
.sho-hp.sel { background: rgba(255, 158, 196, .18); box-shadow: inset 0 0 0 2px var(--sho-glow), 0 0 12px rgba(255, 158, 196, .5); }
.sho-hp .n {
  position: absolute; right: -3px; bottom: -2px; z-index: 2; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px;
  display: grid; place-items: center; font: 800 10px/1 var(--font-body); color: #23081a; background: var(--sho-glow); box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
.sho-chk { color: var(--t-red); text-transform: uppercase; letter-spacing: .04em; }

.sho-moves {
  list-style: none; margin: 0; padding: 6px 8px; display: flex; flex-wrap: wrap; gap: 2px 10px;
  max-height: 64px; overflow-y: auto; background: var(--bg); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line);
  font: 600 .85rem/1.5 var(--font-body); scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent;
}
.sho-moves[hidden] { display: none; }
.sho-moves li { display: inline-flex; gap: 3px; white-space: nowrap; }
.sho-moves .n { color: var(--muted); }
.sho-moves .cur { color: #23081a; background: var(--sho-glow); border-radius: 4px; padding: 0 3px; }
.sho-moves .cur .n { color: #5a2340; }

.sho-promo {
  position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; gap: 10px; text-align: center;
  background: rgba(14, 5, 12, .8); border-radius: 12px; animation: fade .15s ease;
}
.sho-promo[hidden] { display: none; }
.sho-promo p { margin: 0; font-weight: 700; }
.sho-promo div { display: flex; gap: 10px; justify-content: center; }
.sho-promo button {
  width: calc(var(--cell) * 1.9); padding: 8px 4px 6px; border: 0; border-radius: 12px; cursor: pointer; color: var(--ink);
  display: grid; justify-items: center; gap: 4px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font: 600 .8rem/1.2 var(--font-body);
}
.sho-promo button .sho-pc { width: calc(var(--cell) * 1.2); height: calc(var(--cell) * 1.3); }
.sho-promo button:hover, .sho-promo button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sho-glow), 0 0 16px rgba(255, 158, 196, .6); }

.sho-letters { min-height: 38px; padding: 6px 14px; }
.sho-letters[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #ff9ec4; color: #ff9ec4; }
@media (prefers-reduced-motion: reduce) { .sho-pc { transition: none; } }