/*
 * MacIago web client. Picks up the host page's theme tokens (rodesia.org's
 * Card theme: --text, --muted, --card, --accent...) and falls back to its own.
 */

.maciago {
    --maciago-text: var(--text, #16161d);
    --maciago-muted: var(--muted, #5f6170);
    --maciago-surface: var(--card, rgb(255 255 255 / 0.78));
    --maciago-border: var(--card-border, rgb(22 22 29 / 0.08));
    --maciago-accent: var(--accent, #1a7f4b);
    --maciago-shadow: var(--shadow, 0 1px 2px rgb(22 22 29 / 0.04), 0 8px 24px -12px rgb(22 22 29 / 0.12));
    --maciago-focus: #ffd84d;

    --maciago-track: color-mix(in srgb, var(--maciago-text) 22%, transparent);

    container-type: inline-size;
    width: 100%;
    max-width: 58rem;
    margin: 0 auto;
    color: var(--maciago-text);
    font-family: var(--sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
}

/* One column: score, board, status, buttons, settings. */
.maciago-layout {
    display: grid;
    gap: 0.9rem;
    max-width: 34rem;
    margin: 0 auto;
}

/* Score: one chip per side, the side to move highlighted. */
.maciago-score {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.maciago-chip {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--maciago-border);
    border-radius: 0.9rem;
    background: var(--maciago-surface);
    box-shadow: var(--maciago-shadow);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.maciago-chip > span:last-child {
    display: flex;
    flex: 1;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.maciago-chip.is-turn {
    border-color: var(--maciago-accent);
    box-shadow: 0 0 0 1px var(--maciago-accent), var(--maciago-shadow);
}

.maciago-piece {
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    background: center / contain no-repeat;
}

/* Dark pieces on a dark chip: a faint rim keeps them visible. */
:root.dark .maciago-piece-black {
    filter: drop-shadow(0 0 1px rgb(255 255 255 / 0.45));
}

.maciago-chip-label {
    overflow: hidden;
    color: var(--maciago-muted);
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.maciago-chip-count {
    font-size: 1.35rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

/* The board: a square canvas, sized by its frame. */
.maciago-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 0.6rem;
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.12), 0 18px 40px -18px rgb(0 0 0 / 0.45);
}

.maciago-board {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.maciago-board:focus-visible {
    outline: 3px solid var(--maciago-focus);
    outline-offset: 3px;
}

.maciago-status {
    min-height: 1.5em;
    margin: 0;
    color: var(--maciago-muted);
    font-size: 1rem;
    text-align: center;
}

/* Controls: New game, and the settings drawer. */
.maciago-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* New game and Undo together; Settings to the right. */
.maciago-toggle {
    margin-left: auto;
}

.maciago-undo {
    flex: none;
    width: 2.6rem;
    padding: 0;
}

.maciago-undo svg {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.maciago-button:disabled {
    opacity: 0.4;
    cursor: default;
}

.maciago-button:disabled:hover {
    border-color: var(--maciago-border);
}

.maciago-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    padding: 0 1.1rem;
    border: 1px solid var(--maciago-border);
    border-radius: 999px;
    background: var(--maciago-surface);
    color: var(--maciago-text);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 550;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.maciago-button:hover {
    border-color: var(--maciago-accent);
}

.maciago-button:focus-visible {
    outline: 2px solid var(--maciago-accent);
    outline-offset: 2px;
}

.maciago-primary {
    border-color: transparent;
    background: var(--maciago-accent);
    color: #fff;
}

:root.dark .maciago-primary {
    color: #0d0e13;
}

.maciago-primary:hover {
    border-color: transparent;
    filter: brightness(1.08);
}

.maciago-toggle::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin-left: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.12rem) rotate(45deg);
    transition: transform 0.2s ease;
}

.maciago-toggle[aria-expanded="true"]::after {
    transform: translateY(0.12rem) rotate(-135deg);
}

.maciago-settings {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 0.9rem;
    min-width: 0;
    box-sizing: border-box;
    padding: 1rem 1.25rem;
    border: 1px solid var(--maciago-border);
    border-radius: 0.9rem;
    background: var(--maciago-surface);
    box-shadow: var(--maciago-shadow);
}


.maciago-field {
    display: grid;
    gap: 0.4rem;
}

.maciago-field.is-off {
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.maciago-field-label {
    color: var(--maciago-muted);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.maciago input[type="range"] {
    accent-color: var(--maciago-accent);
}

.maciago-range {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--maciago-muted);
    font-size: 0.85rem;
}

.maciago-range input {
    flex: 1;
    width: 100%;
    min-width: 0;
}

/* Opponent, colour and board size: a row of buttons, the current one
   raised. */
.maciago-segments {
    display: grid;
    grid-template-columns: repeat(var(--maciago-segments, 4), minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--maciago-border);
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--maciago-text) 4%, transparent);
}

.maciago-segment {
    min-width: 0;
    padding: 0.45rem 0;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    color: var(--maciago-muted);
    font: inherit;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.maciago-segment:hover {
    color: var(--maciago-text);
}

.maciago-segment[aria-pressed="true"] {
    background: color-mix(in srgb, var(--maciago-accent) 18%, var(--bg, #fff));
    color: var(--maciago-text);
    font-weight: 650;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
}

.maciago-segment:focus-visible {
    outline: 2px solid var(--maciago-accent);
    outline-offset: 1px;
}

/* On/off settings as switches. */
.maciago-switches {
    display: grid;
    gap: 0.65rem;
}

.maciago-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
}

.maciago-switch input {
    flex: none;
    position: relative;
    width: 2.5rem;
    height: 1.45rem;
    margin: 0;
    border-radius: 999px;
    background: var(--maciago-track);
    appearance: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.maciago-switch input::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(1.45rem - 6px);
    height: calc(1.45rem - 6px);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
    transition: transform 0.2s ease;
}

.maciago-switch input:checked {
    background: var(--maciago-accent);
}

.maciago-switch input:checked::before {
    transform: translateX(1.05rem);
}

.maciago-switch input:focus-visible {
    outline: 2px solid var(--maciago-accent);
    outline-offset: 2px;
}

.maciago-note {
    margin: 0;
    color: var(--maciago-muted);
    font-size: 0.82rem;
}

@media (max-width: 30rem) {
    .maciago-chip {
        padding: 0.45rem 0.6rem;
    }

    .maciago-piece {
        width: 1.6rem;
        height: 1.6rem;
    }

    .maciago-chip-count {
        font-size: 1.15rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .maciago-chip,
    .maciago-button,
    .maciago-segment,
    .maciago-switch input,
    .maciago-switch input::before,
    .maciago-face,
    .maciago-toggle::after {
        transition: none;
    }
}

/* On the rodesia.org page (deploy/theme/page-maciago.html). */
.maciago-game {
    margin: 0 0 3.5rem;
}

/* With room to spare, the game widens past the text column so the
   settings fit beside a full-size board. */
@media (min-width: 64rem) {
    .maciago-game {
        margin-inline: calc((100% - 58rem) / 2);
    }
}

.maciago-noscript {
    color: var(--muted, #5f6170);
    text-align: center;
}

/* The board and the settings, two faces of one card. On a narrow screen
   Settings turns it over: the settings take the board's square, with Close
   at the end. */
.maciago-card {
    position: relative;
    perspective: 1400px;
}

.maciago-face {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* The face turning away stays (unseen, back to us) until the turn is
       over, then hides from keyboard and screen readers. */
    transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.25, 1), visibility 0s linear 0.6s;
}

/* The face turning towards us shows from the start. */
.maciago:not(.is-settings) .maciago-front,
.maciago.is-settings .maciago-back {
    transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.25, 1), visibility 0s;
}

.maciago-back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
    visibility: hidden;
}

.maciago.is-settings .maciago-front {
    transform: rotateY(-180deg);
    visibility: hidden;
}

.maciago.is-settings .maciago-back {
    transform: rotateY(0deg);
    visibility: visible;
}


.maciago-close {
    justify-self: stretch;
    margin-top: 0.3rem;
}

/* The settings on the back of the card (phones) fit the board's square
   without scrolling: labels beside their controls, tighter spacing, the
   note left out, spare room spread between the rows. */
@container (width < 44rem) {
    .maciago-back .maciago-settings {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        height: 100%;
        padding: 0.8rem 1rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 0.6rem;
    }

    .maciago-back .maciago-field {
        grid-template-columns: 5.6rem minmax(0, 1fr);
        align-items: center;
        gap: 0.75rem;
    }

    .maciago-back .maciago-segment {
        padding: 0.4rem 0;
    }

    .maciago-back .maciago-switches {
        gap: 0.4rem;
    }

    .maciago-back .maciago-note {
        display: none;
    }

    /* Close stays at the bottom however many rows are showing. */
    .maciago-back .maciago-close {
        min-height: 2.3rem;
        margin-top: auto;
    }
}

/* Wide enough: New game level with the top of the board and the settings
   below it down to the board's bottom edge, in a column on its left; the
   card opens out (display: contents) so both faces show. Last, so it wins
   over the one-column rules above. */
@container (min-width: 44rem) {
    .maciago-layout {
        max-width: none;
        /* The board's column is capped by --maciago-fit (set by
           maciago.js), so the whole board shows without scrolling. */
        /* The board first: the settings take what it leaves (in container
           width, 100cqi), between 15rem and 20rem. */
        --maciago-board-col: min(36rem, var(--maciago-fit, 36rem));
        grid-template-columns:
            clamp(15rem, calc(100cqi - var(--maciago-board-col) - 1.75rem), 20rem)
            minmax(0, var(--maciago-board-col));
        grid-template-areas:
            "status   score"
            "controls frame"
            "settings frame";
        grid-template-rows: auto 2.2rem auto;
        justify-content: center;
        column-gap: 1.75rem;
    }

    .maciago-card,
    .maciago-face {
        display: contents;
    }

    .maciago-back,
    .maciago.is-settings .maciago-front,
    .maciago.is-settings .maciago-back {
        visibility: visible;
    }

    .maciago-score { grid-area: score; align-self: center; }
    /* Square by its aspect ratio, never stretched to the rows it spans;
       its height is what the column on the left lines up with. */
    .maciago-frame { grid-area: frame; align-self: start; }
    /* Above New game, level with the counters. */
    .maciago-status {
        grid-area: status;
        align-self: center;
        text-wrap: balance;
    }
    .maciago-controls { grid-area: controls; }

    /* From under New game down to the board's bottom edge: the board's
       height (--maciago-board, set by maciago.js) less the button and the
       gap. Scrolls if its contents need more. */
    /* Room to breathe: more padding and gaps, rows spread evenly down to
       the board's bottom edge rather than bunched at the top. */
    .maciago-layout .maciago-settings {
        grid-area: settings;
        align-self: start;
        align-content: space-between;
        gap: 1.1rem;
        padding: 1.3rem 1.4rem;
        height: calc(var(--maciago-board, 30rem) - 2.2rem - 0.9rem);
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .maciago-controls .maciago-primary,
    .maciago-controls .maciago-undo {
        height: 2.2rem;
        min-height: 0;
    }

    .maciago-controls .maciago-primary {
        flex: 1;
    }

    .maciago-controls .maciago-undo {
        width: 2.2rem;
    }

    .maciago-toggle,
    .maciago-close {
        display: none;
    }

    /* A board shortened to fit the window: first tighter rows and no
       note (is-tight); if that's still too tall, a wider column with the
       labels beside their controls (is-compact). */
    .maciago.is-tight .maciago-layout .maciago-settings {
        gap: 0.65rem;
        padding-block: 0.9rem;
    }

    .maciago.is-tight .maciago-note {
        display: none;
    }

    .maciago.is-compact .maciago-layout {
        grid-template-columns:
            clamp(15rem, calc(100cqi - var(--maciago-board-col) - 1.75rem), 21rem)
            minmax(0, var(--maciago-board-col));
    }

    .maciago.is-compact .maciago-layout .maciago-settings {
        gap: 0.6rem;
        padding-block: 0.8rem;
    }

    .maciago-layout .maciago-field {
        gap: 0.55rem;
    }

    .maciago.is-compact .maciago-field {
        grid-template-columns: 5.6rem minmax(0, 1fr);
        align-items: center;
        gap: 0.75rem;
    }

    .maciago.is-compact .maciago-segment {
        padding-block: 0.4rem;
    }

    .maciago.is-compact .maciago-note {
        display: none;
    }
}

/* The game page opens with the board, not a big headline: less room above
   the title, about as much as below it. (Only this page: the selector
   needs the game in the page.) */
.card-page:has(.maciago-game) {
    padding-top: clamp(1.25rem, 4vh, 2.25rem);
}

.card-page:has(.maciago-game) .hero {
    margin-bottom: 2rem;
}