/* Shippori Mincho B1 for the Traditional piece style, limited to the characters of
   the PIECES jp names in shared/rules.js (大将中少佐尉飛行機タンク騎兵工スパイ地雷軍旗).
   When a piece is added or renamed, regenerate the text= value from the project folder with
   node --input-type=module -e "import{PIECES}from'./shared/rules.js';console.log(encodeURIComponent([...new Set(Object.values(PIECES).map(p=>p.jp).join(''))].join('')))"
   Characters missing from the list still render, in the Noto Serif JP or serif fallback. */
/* Shippori Mincho B1 is self-hosted in css/fonts.css, limited to the slices holding these characters. */

/* ------------------------------------------------------ traditional board ---
   Active when the board theme is 'traditional' (board.js adds .board-trad).
   A printed wooden board: one warm piece of wood with soft ruled lines, no checker pattern.
   --sq-light is the wood and --sq-dark the deeper wood (BOARD_THEMES.traditional). */
.board.board-trad {
  --trad-ink: #3b2614;
  --trad-rule: rgba(92, 58, 26, .34);
  border-radius: 8px;
  background-color: var(--sq-light);
  background-image:
    radial-gradient(ellipse at 50% 45%, rgba(255, 246, 222, .22), rgba(255, 246, 222, 0) 60%),
    radial-gradient(ellipse at 50% 50%, rgba(80, 46, 14, 0) 62%, rgba(80, 46, 14, .16) 100%),
    repeating-linear-gradient(91deg, rgba(140, 86, 30, 0) 0 13px, rgba(140, 86, 30, .05) 13px 15px, rgba(140, 86, 30, 0) 15px 37px),
    repeating-linear-gradient(89.4deg, rgba(140, 86, 30, 0) 0 22px, rgba(140, 86, 30, .035) 22px 23px, rgba(140, 86, 30, 0) 23px 53px),
    repeating-linear-gradient(90.6deg, rgba(255, 240, 205, 0) 0 30px, rgba(255, 240, 205, .09) 30px 34px, rgba(255, 240, 205, 0) 34px 71px);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 220, .35),
    0 0 0 4px color-mix(in srgb, var(--sq-dark) 82%, #3b2614),
    0 0 0 5px rgba(59, 38, 20, .55),
    0 12px 28px rgba(0, 0, 0, .45);
}
.board-trad.board-small { border-radius: 4px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--sq-dark) 82%, #3b2614), 0 2px 6px #0005; }

/* Ruled lines: each square draws its right and bottom line, the layer draws the
   left and top edge of the board, the river closes off the half below it. */
.board-trad .sq-layer { box-shadow: inset 1px 1px 0 var(--trad-rule); border-radius: 8px; }
.board-trad .sq.light,
.board-trad .sq.dark { background: none; }
.board-trad .sq { box-shadow: inset -1px -1px 0 var(--trad-rule); }
.board-trad .sq.gate::after { display: none; }

/* HQ: a gently deeper wood with a soft rounded inner rule */
.board-trad .sq.hq {
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--sq-dark) 34%, transparent), color-mix(in srgb, var(--sq-dark) 54%, transparent));
  box-shadow: inset -1px -1px 0 var(--trad-rule);
}
.board-trad .sq.hq::before {
  content: ''; position: absolute; inset: calc(var(--s) * .1);
  border: 1px solid rgba(92, 58, 26, .4);
  border-radius: calc(var(--s) * .08);
  pointer-events: none;
}
.board-trad .hq-mark { color: rgba(92, 58, 26, .45); }

.board-trad .coord,
.board-trad .coord.on-light,
.board-trad .coord.on-hq { color: rgba(74, 46, 20, .5); }

/* River: a softly recessed channel of darker wood with faint ink waves */
.board-trad .river {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sq-dark) 72%, #3f2c18), color-mix(in srgb, var(--sq-dark) 82%, transparent) 50%, color-mix(in srgb, var(--sq-dark) 72%, #3f2c18));
  box-shadow: inset 0 2px 3px rgba(60, 36, 14, .22), inset 0 -2px 3px rgba(60, 36, 14, .22);
}
.board-trad .river-water {
  opacity: 1;
  animation: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 3.5 Q6 .5 12 3.5 T24 3.5 M0 8.5 Q6 5.5 12 8.5 T24 8.5' fill='none' stroke='%233b2614' stroke-opacity='.2' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / calc(var(--s) * .42) auto;
}

/* Bridges: light planks with soft rails and a gentle shadow on the water */
.board-trad .bridge {
  top: -3px; bottom: -3px;
  background:
    repeating-linear-gradient(0deg, transparent 0 calc(var(--s) * .07), rgba(92, 58, 26, .18) calc(var(--s) * .07) calc(var(--s) * .07 + 1px)),
    linear-gradient(90deg, color-mix(in srgb, var(--sq-light) 92%, #fff), var(--sq-light) 40%, color-mix(in srgb, var(--sq-light) 85%, var(--sq-dark)));
  border-left: 2px solid rgba(74, 46, 20, .72);
  border-right: 2px solid rgba(74, 46, 20, .72);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(40, 24, 8, .28);
}
.board-trad .river-svg { filter: drop-shadow(0 2px 3px rgba(40, 24, 8, .28)); }
.board-trad .river-svg .br-edge { stroke: rgba(74, 46, 20, .75); }
.board-trad .river-svg .br-deck { stroke: color-mix(in srgb, var(--sq-light) 94%, #fff); }
.board-trad .river-svg .br-seam-fill { fill: rgba(92, 58, 26, .2); }
.board-trad .river-svg .br-isle-edge { fill: rgba(74, 46, 20, .75); }
.board-trad .river-svg .br-isle { fill: color-mix(in srgb, var(--sq-light) 94%, #fff); }
.board-trad .river-svg .br-isle-ring { stroke: rgba(92, 58, 26, .3); }
.board-trad.board-small .bridge { top: -1px; bottom: -1px; border-width: 1px; background: var(--sq-light); box-shadow: none; }