/* Shared action affordances, loaded after the game palettes. Terrain,
 * resources and player ownership keep their own semantic colors. */
:root {
    --legal-action-color: #1f6feb;
    --legal-action-tint: color-mix(in srgb, var(--legal-action-color) 12%, transparent);
    --legal-action-glow: color-mix(in srgb, var(--legal-action-color) 60%, transparent);
}

#game-area button[data-game-action-name-param]:not(:disabled) {
    border-color: var(--legal-action-color);
}

#game-area [data-workbench-action] .btn-mode,
#game-area .shakkei-visitor-card-select {
    background: var(--legal-action-color);
    border-color: var(--legal-action-color);
    color: white;
}

#game-area [data-workbench-action] .btn-mode:focus-visible,
#game-area .shakkei-visitor-card-select:focus-visible,
#game-area .shakkei-pending-tile:focus-visible,
#game-area .shakkei-supply-select:focus-visible,
#game-area .shakkei-build-orientation:focus-visible,
#game-area .shakkei-spot:focus-visible,
#game-area .shakkei-visitor-position:focus-visible,
#game-area .shakkei-visitor-direction:focus-visible,
#game-area .is-legal:focus-visible,
#game-area .ttt-cell-empty:focus-visible {
    outline-color: var(--legal-action-color);
}

/* Shakkei: one color for choices, destinations and the current selection. */
.game--shakkei { --workspace-accent: var(--legal-action-color); }

#game-area .shakkei-garden-current,
#game-area .shakkei-visitor-card-selectable {
    border-color: var(--legal-action-color);
    box-shadow: 0 0 0 2px var(--legal-action-tint);
}

#game-area .shakkei-supply-item-legal,
#game-area .shakkei-supply-item-selected {
    border-color: var(--legal-action-color);
    box-shadow: none;
}

#game-area .shakkei-supply-item-legal:hover,
#game-area .shakkei-supply-item-legal:focus-within {
    box-shadow: inset 0 0 0 2px var(--legal-action-color);
}

#game-area .shakkei-pending .shakkei-pending-tile:not(:disabled),
#game-area .shakkei-pending .shakkei-pending-tile-selected {
    border-color: var(--legal-action-color);
}

#game-area .shakkei-pending .shakkei-pending-tile-selected {
    box-shadow: 0 0 0 2px var(--legal-action-tint);
}

#game-area .shakkei-pending .shakkei-pending-tile:hover:not(:disabled) {
    background: var(--legal-action-tint);
}

#game-area .shakkei-hex .shakkei-tile-outline,
#game-area .shakkei-spot polygon,
#game-area .shakkei-build-orientation polygon,
#game-area .shakkei-build-orientation line {
    stroke: var(--legal-action-color);
}

#game-area .shakkei-spot polygon {
    fill: var(--legal-action-color);
}

#game-area .shakkei-build-orientation:hover polygon,
#game-area .shakkei-build-orientation:focus polygon {
    fill: var(--legal-action-color);
    fill-opacity: .12;
}

/* Brass Pitt: map edges, spaces, cards, markets, resources and pickers.
 * Scope color overrides to the game root so hover/active rules cannot
 * replace the shared action color with a game-specific one. */
#game-area .edge--legal,
#game-area .pipeline--legal {
    filter: drop-shadow(0 0 2px var(--legal-action-glow));
}

#game-area .edge--legal .edge-line {
    stroke: var(--legal-action-color) !important;
}

#game-area .pipeline--legal .pipeline-line,
#game-area .city__space.space--legal .city__space-bg,
#game-area .city__space.space--legal .city__space-frame,
#game-area .quality-reward-space.is-legal .quality-reward-tile__body,
#game-area .merchant-tile.is-legal,
#game-area .city__market.is-legal .resource-token,
#game-area .vanderbilt-market__item.is-legal .resource-token,
#game-area .edge-train-resource-cube.is-legal {
    stroke: var(--legal-action-color);
}

#game-area .city__space.space--legal .city__space-bg,
#game-area .city__space.space--legal .city__space-frame,
#game-area .quality-reward-space.is-legal,
#game-area .merchant-tile.is-legal,
#game-area .city__market.is-legal .resource-token,
#game-area .vanderbilt-market__item.is-legal .resource-token,
#game-area .edge-train-resource-cube.is-legal {
    filter: drop-shadow(0 0 .5px var(--legal-action-glow));
}

#game-area .city__market.is-legal .resource-barrel > rect:first-child,
#game-area .vanderbilt-market__item.is-legal .resource-barrel > rect:first-child,
#game-area .edge-train-resource-cube.is-legal .resource-barrel > rect:first-child {
    stroke: var(--legal-action-color);
    stroke-width: .4;
}

#game-area .cube--legal polygon,
#game-area .barrel--legal rect,
#game-area .barrel--legal ellipse {
    filter: drop-shadow(0 0 1.5px var(--legal-action-glow));
}

#game-area .city-market.market--legal {
    outline-color: var(--legal-action-color);
    background: var(--legal-action-tint);
    box-shadow: 0 0 4px var(--legal-action-glow);
}

#game-area .brass-pitt__card.is-legal {
    border-color: var(--legal-action-color) !important;
}

#game-area .bp-token.is-legal,
#game-area .brass-pitt__tile-pick__icon.is-legal {
    outline: 2px solid var(--legal-action-color);
    outline-offset: 2px;
}

#game-area .bp-token.is-legal:hover,
#game-area .brass-pitt__tile-pick__icon.is-legal:hover {
    filter: drop-shadow(0 0 4px var(--legal-action-glow));
}

#game-area .brass-pitt__card.is-legal.is-new {
    animation-name: legal-action-card-dealt;
}

@keyframes legal-action-card-dealt {
    0% { transform: translateY(-10px) scale(.94); box-shadow: 0 0 0 transparent; }
    28% { transform: translateY(0) scale(1.08); box-shadow: 0 0 18px var(--legal-action-glow); }
    100% { transform: translateY(0) scale(1); box-shadow: 0 0 0 transparent; }
}

/* Tic-Tac-Toe: only clickable empty cells carry the action outline. */
#game-area .ttt-cell-empty {
    border: 2px solid var(--legal-action-color);
}

#game-area .ttt-cell-empty:hover {
    background: var(--legal-action-tint);
}

#game-area [data-shakkei-visitor-covered] { display: none; }
#game-area .shakkei-available-visitors { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); }
#game-area .shakkei-available-visitors > h3 { margin: 0; font: 1.2rem Georgia, serif; }
#game-area .shakkei-available-visitors > p { margin: .5rem 0 .75rem; font-size: .85rem; }
#game-area .shakkei-visitor-picker { margin-top: .75rem; }
#game-area .shakkei-visitor-picker p { margin: 0 0 .5rem; font-size: .85rem; }
#game-area .shakkei-visitor-directions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .5rem; }
#game-area .shakkei-visitor-direction { display: flex; align-items: center; gap: .5rem; padding: .5rem; border: 2px solid var(--legal-action-color); background: #fffdf8; text-align: left; font-size: .8rem; }
#game-area .shakkei-visitor-direction:hover, #game-area .shakkei-visitor-direction:focus-visible { background: var(--legal-action-tint); }
#game-area .shakkei-visitor-direction svg { flex: 0 0 2.25rem; width: 2.25rem; height: 2.25rem; }
#game-area .shakkei-visitor-direction line, #game-area .shakkei-visitor-preview line { stroke: var(--legal-action-color); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
#game-area .shakkei-visitor-direction circle, #game-area .shakkei-visitor-preview circle { fill: var(--legal-action-color); pointer-events: none; }
#game-area .shakkei-visitor-position { cursor: pointer; }
#game-area .shakkei-visitor-position polygon { fill: transparent; stroke: var(--legal-action-color); stroke-width: 2; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
#game-area .shakkei-visitor-position:hover polygon, #game-area .shakkei-visitor-position:focus polygon { stroke-width: 4; }
#game-area .shakkei-visitor-position[aria-pressed='true'] polygon { stroke-width: 4; stroke-dasharray: none; }
#game-area .shakkei-visitor-preview { pointer-events: none; }
#game-area .shakkei-visitor-preview line { stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }