/* 盤面の木枠と SVG 内部の図形はこのファイルに集約する。 */
.board-plate { border-radius: var(--radius-frame); background: repeating-linear-gradient(3deg, var(--clear) 0 5px, var(--wood-dark) 6px, var(--clear) 8px 19px), linear-gradient(var(--wood-light), var(--wood), var(--wood-dark)); box-shadow: var(--shadow-inset), var(--shadow-panel); }
.board-plate::after { content: ""; position: absolute; inset: 18px; border: 2px solid var(--brass-dark); border-radius: var(--radius-s); pointer-events: none; box-shadow: inset 0 2px 0 var(--brass-light); }
.board-svg { display: block; width: 1324px; height: 800px; font-family: var(--font-ui); }
.sea-start { stop-color: var(--sea-light); }
.sea-end { stop-color: var(--sea); }
.wave-line { fill: none; stroke: var(--sea-light); stroke-width: 1.5; opacity: .45; }
.terrain-start { stop-color: color-mix(in srgb, var(--terrain-color) 72%, var(--brass-light)); }
.terrain-end { stop-color: var(--terrain-color); }
.terrain-forest { --terrain-color: var(--t-forest); }
.terrain-pasture { --terrain-color: var(--t-pasture); }
.terrain-fields { --terrain-color: var(--t-field); }
.terrain-hills { --terrain-color: var(--t-hill); }
.terrain-mountains { --terrain-color: var(--t-mountain); }
.terrain-desert { --terrain-color: var(--t-desert); }
.hex-face { stroke: var(--hex-edge); stroke-width: 2; stroke-linejoin: round; }
.hex-bevel { fill: none; stroke: var(--brass-light); stroke-width: 2; opacity: .5; }
.hex-coast { fill: var(--coast); stroke: var(--coast); stroke-width: 13; stroke-linejoin: round; filter: drop-shadow(var(--shadow-piece)); }
.terrain-decoration { fill: var(--terrain-color); stroke: var(--hex-edge); stroke-width: 1; opacity: .5; }
.terrain-detail { fill: none; stroke: var(--brass-light); stroke-width: 2; opacity: .65; }
.hex-terrain.is-robbed { filter: brightness(.72); }
.number-chip { filter: drop-shadow(var(--shadow-piece)); pointer-events: none; }
.number-chip circle.chip-face { fill: var(--panel-face); stroke: var(--brass-dark); stroke-width: 2; }
.chip-glint { fill: none; stroke: var(--brass-light); stroke-width: 2; }
.chip-number { fill: var(--text); font-size: 30px; text-anchor: middle; }
.chip-pip { fill: var(--text); }
.number-chip.is-frequent .chip-number, .number-chip.is-frequent .chip-pip { fill: var(--text-danger); }
.piece { fill: var(--player-color); stroke: var(--piece-outline); stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(var(--shadow-piece)); pointer-events: none; }
.piece-shine { fill: none; stroke: var(--brass-light); stroke-width: 2; opacity: .7; }
.piece-shade { fill: var(--piece-outline); stroke: none; opacity: .24; }
.robber-piece { fill: var(--robber); stroke: var(--piece-outline); stroke-width: 2; filter: drop-shadow(var(--shadow-piece)); pointer-events: none; }
.port-pier { stroke: var(--wood); stroke-width: 16; }
.port-planks { stroke: var(--brass-light); stroke-width: 2; stroke-dasharray: 2 7; }
.port-tag { fill: var(--parchment); stroke: var(--brass-dark); stroke-width: 2; filter: drop-shadow(var(--shadow-piece)); }
.port-inset { fill: none; stroke: var(--brass-light); stroke-width: 1; }
.port-ratio { fill: var(--text); font-size: 22px; text-anchor: middle; }
.port-resource { fill: var(--text-dim); font-size: 13px; text-anchor: middle; }
.port-symbol { fill: var(--terrain-color, var(--brass)); stroke: var(--piece-outline); stroke-width: 2; stroke-linejoin: round; }
.hit-group { cursor: pointer; outline: none; }
.board-target { fill: var(--glow-gold); fill-opacity: .16; stroke: var(--glow-gold); stroke-width: 3; opacity: 0; pointer-events: all; transform-box: fill-box; transform-origin: center; transition: transform 120ms, opacity 120ms; }
.hit-group:hover .board-target, .hit-group:focus-visible .board-target { opacity: 1; transform: translateY(-2px); }
.hit-group:active .board-target { opacity: 1; transform: translateY(2px); }
.candidate { fill: var(--glow-gold); stroke: var(--brass-dark); stroke-width: 3; opacity: .5; pointer-events: none; transform-box: fill-box; transform-origin: center; filter: drop-shadow(var(--shadow-glow)); transition: transform 120ms, opacity 120ms; }
.hit-group:hover .candidate, .hit-group:focus-visible .candidate { opacity: 1; transform: translateY(-2px) scale(1.08); }
.hit-group:active .candidate { opacity: 1; transform: translateY(2px) scale(1.08); }
.production-glow { fill: none; stroke: var(--glow-gold); stroke-width: 6; filter: drop-shadow(var(--shadow-glow)); pointer-events: none; animation: production-glow 1.2s ease-out forwards; }
@keyframes production-glow { 0%, 65% { opacity: 1; } 100% { opacity: 0; } }