/* 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, and a man's default colour */
    --sel: #0437F2;     /* a selected / dragged man */
}

/* 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;
    /* men are draggable — don't let a drag select text or scroll the page */
    user-select: none;
    -webkit-user-select: none;
}

.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%);
    /* --dx/--dy carry the live drag offset (0 when not dragging). */
    transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px));
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid var(--grid);
    background: var(--paper);
    padding: 0;
    cursor: pointer;
}

/* Your own men can be picked up and dragged; keep touch drags from scrolling. */
.point.mine:not(:disabled) {
    cursor: grab;
    touch-action: none;
}

.point.mine.dragging {
    cursor: grabbing;
    z-index: 5;
}

.point.mine.dragging .bean {
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.35));
}

/* Points a man may legally move to — while dragging it, or once it's tapped
   to select it. Shown exactly the way an empty point looks on hover (filled
   in); the drag's nearest snap target additionally grows so you can see where
   a release would land. */
.point.drop-ok {
    background: var(--grid);
}

.point.drop-active {
    background: var(--grid);
    transform: translate(-50%, -50%) scale(1.18);
}

/* 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, not a disc: the button drops its node styling and
   an inline <svg class="bean"> (see board.html) renders the piece, carrying
   the per-piece rotation from game.js via --rot. The bean's detail path is
   fill="currentColor", so the man's colour is just the point's `color` — the
   board grey normally, the selection blue while selected or dragged. No
   separate "selected" file to swap in, so recolouring is instant. */
.point.w,
.point.b {
    background: none;
    border: none;
    color: var(--grid);
}

.point.sel,
.point.mine.dragging {
    color: var(--sel);
}

.bean {
    position: absolute;
    /* explicit size — insets alone don't stretch a replaced <svg>, so it would
       otherwise fall back to its intrinsic 300×150 and blow up the board */
    top: -6px;
    left: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    pointer-events: none;
    transform: rotate(var(--rot, 0deg));
}

.point:not(.w):not(.b) .bean {
    display: none;
}

/* Holds the reusable bean symbols; never itself drawn. */
.bean-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.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; }
}