/* Morris-specific styles. The shared shell (score, status line, connect bar,
   below-game controls, a11y primitives, their breakpoints) and the default
   tokens (--ink --paper --line --wash --wash-hover --muted --focus) come from
   /lib/core.css, linked before this file — this :root may override any of
   them and adds the game-only tokens. */

:root {
    --grid: #1a1a2e;    /* board lines */
}

/* Points sit on a 7×7 lattice; each button carries its --x/--y (0..6).
   The board itself only draws the three squares + connectors via the SVG. */
.board {
    position: relative;
    width: min(78vw, 340px);
    aspect-ratio: 1;
    margin: 0 auto;
    /* room for the outer points, which straddle the border */
    padding: 0;
}

.grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--grid);
    stroke-width: 0.05;
    /* the outer square sits on the viewBox edge — without this, half its
       stroke is clipped and it renders thinner than the inner lines */
    overflow: visible;
}

.point {
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    left: calc(var(--x) / 6 * 100%);
    top: calc(var(--y) / 6 * 100%);
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--grid);
    background: var(--paper);
    padding: 0;
    cursor: pointer;
}

/* Empty points read as small nodes; a placed man fills the full circle. */
.point:not(.w):not(.b) {
    width: 22px;
    height: 22px;
}

/* A placed man is a bean (cut from beans-icon.svg), not a disc: the button
   drops its node styling and the bean renders in a pseudo-element carrying
   the piece's rotation (set per piece from game.js via --rot). */
.point.w,
.point.b {
    background: none;
    border: none;
}

.point.w::after,
.point.b::after {
    content: "";
    position: absolute;
    inset: -6px;
    background: center / contain no-repeat;
    transform: rotate(var(--rot, 0deg));
}

.point.w::after { background-image: url("bean-white.svg"); }
.point.b::after { background-image: url("bean-black.svg"); }

/* Selection recolors the bean itself (#0437F2 variants) — no ring. */
.point.w.sel::after { background-image: url("bean-white-sel.svg"); }
.point.b.sel::after { background-image: url("bean-black-sel.svg"); }

.point:disabled {
    cursor: default;
}

/* Only real pointers hover; on touch :hover sticks after a tap. */
@media (hover: hover) {
    .point:not(:disabled):not(.w):not(.b):hover {
        background: var(--grid);
    }
}

@media (min-width: 576px) {
    .board { width: 380px; }
    .point { width: 38px; height: 38px; }
    .point:not(.w):not(.b) { width: 24px; height: 24px; }
}

@media (min-width: 768px) {
    .board { width: 430px; }
    .point { width: 42px; height: 42px; }
    .point:not(.w):not(.b) { width: 26px; height: 26px; }
}

@media (min-width: 992px) {
    .board { width: 480px; }
    .point { width: 46px; height: 46px; }
    .point:not(.w):not(.b) { width: 28px; height: 28px; }
}