/* Shared by the square-board games (checkers, breakthrough, konane), with
   public/js/board-game.js and views/partials/board-game.njk. */

* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

:root {
    --board-size: 0px;
    --move-speed: 280ms;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --accent: #00b8ff;
    --possible-move: rgba(255, 255, 255, 0.85);
}

/* Page chrome follows the site's light/dark theme. Set on <html> (not
   .game-page) so the settings menu up in the site header gets them too. */
html[data-theme="dark"] {
    --surface: #1c1d24;
    --surface-2: #25262f;
    --border: #2e3039;
    --text-muted: #9aa0ab;
    --ink: #ececef;
    --ink-text: #141418;
}

html[data-theme="light"] {
    --surface: #ffffff;
    --surface-2: #f1f2f4;
    --border: #e1e3e8;
    --text-muted: #6b7280;
    --ink: #18181b;
    --ink-text: #ffffff;
}

/* === Board themes === */
[data-theme="classic"] {
    --square-light: #f0d9b5;
    --square-dark: #b58863;
    --square-last-move: #dcc34b;
    --square-selected: #dcc34b;
    --piece-white: #ffffff;
    --piece-white-border: #bfbfbf;
    --piece-black: #333333;
    --piece-black-border: #000000;
    --king-white: #333333;
    --king-black: #ffffff;
    --label-color: #000;
}

[data-theme="tournament"] {
    --square-light: #ebecd0;
    --square-dark: #739552;
    --square-last-move: #b9ca43;
    --square-selected: #b9ca43;
    --piece-white: #ffffff;
    --piece-white-border: #bfbfbf;
    --piece-black: #c0392b;
    --piece-black-border: #7a1f18;
    --king-white: #333333;
    --king-black: #ffffff;
    --label-color: #000;
}

[data-theme="modern"] {
    --square-light: #2a2a2e;
    --square-dark: #1f1f23;
    --square-last-move: #007145;
    --square-selected: #007145;
    --piece-white: #f0f0f0;
    --piece-white-border: #aaaaaa;
    --piece-black: #4a4a4f;
    --piece-black-border: #1a1a1e;
    --king-white: #4a4a4f;
    --king-black: #f0f0f0;
    --label-color: #888888;
}


[data-theme="walnut"] {
    --square-light: #e8d9b8;
    --square-dark: #8d5524;
    --square-last-move: #dcc34b;
    --square-selected: #dcc34b;
    --piece-white: #f5e8c7;
    --piece-white-border: #d4b88a;
    --piece-black: #3c2f2f;
    --piece-black-border: #1c140f;
    --king-white: #3c2f2f;
    --king-black: #f5e8c7;
    --label-color: #000;
}

/* Othello's fixed look (config.fixedTheme): always a green board with black
   and white discs, whatever theme the other games use */
[data-theme="othello"] {
    --square-light: #2e7d32;
    --square-dark: #2e7d32;
    --square-last-move: rgba(255, 224, 130, 0.45);
    --square-selected: rgba(255, 224, 130, 0.45);
    --grid-line: #000;
    --piece-white: #ffffff;
    --piece-white-border: #bfbfbf;
    --piece-black: #111111;
    --piece-black-border: #000000;
    --label-color: rgba(255, 255, 255, 0.75);
}

/* Breakthrough's fixed look (config.fixedTheme): the slate blue of the
   original board, as a subtle two-tone chequer. Also a checkers theme. */
[data-theme="breakthrough"] {
    --square-light: #6f86a6;
    --square-dark: #5a7194;
    --square-last-move: rgba(255, 255, 255, 0.32);
    --square-selected: #8aa6cc;
    --piece-white: #eef1f6;
    --piece-white-border: #b9c2d0;
    --piece-black: #1d212b;
    --piece-black-border: #0b0d12;
    --king-white: #1d212b;
    --king-black: #eef1f6;
    --label-color: rgba(255, 255, 255, 0.7);
}

/* Konane's fixed look (config.fixedTheme): a plain koa-wood board with
   lava-black and coral-white stones. One square colour rather than a chequer,
   since every square starts with a stone on it */
[data-theme="konane"] {
    --square-light: #8b6a4d;
    --square-dark: #8b6a4d;
    --square-last-move: rgba(255, 255, 255, 0.3);
    --square-selected: #a8845f;
    --grid-line: rgba(0, 0, 0, 0.22);
    --piece-white: #f2ede3;
    --piece-white-border: #c9bfae;
    --piece-black: #242120;
    --piece-black-border: #0e0d0c;
    --king-white: #242120;
    --king-black: #f2ede3;
    --label-color: rgba(255, 255, 255, 0.65);
}

/* As a checkers theme it needs a chequer: paler koa for the light squares
   (konane itself keeps one colour, via .uniform) */
[data-theme="konane"] .board:not(.uniform) .square.light {
    background: #b08d6c;
}

/* === Layout === */
.game-page {
    display: flex;
    justify-content: center;
    padding: 10px;
    user-select: none;
    -webkit-user-select: none;
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}

.muted {
    color: var(--text-muted);
}

/* === Buttons / inputs === */
.btn,
.select {
    font: inherit;
    color: inherit;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition:
        background-color 0.2s var(--ease),
        border-color 0.2s var(--ease),
        transform 0.1s var(--ease);
}

.btn {
    padding: 10px 16px;
    font-weight: 600;
}

.btn:hover {
    border-color: var(--text-muted);
}

.btn:active {
    transform: scale(0.97);
}

.btn-full {
    width: 100%;
}

.btn-primary {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--ink-text);
}

.btn-primary:hover {
    border-color: var(--ink);
    opacity: 0.88;
}

.select {
    padding: 7px 10px;
}

/* === Settings menu (in the site header) === */
.settings {
    position: relative;
}

.settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    opacity: 0.8;
    cursor: pointer;
    transition:
        opacity 0.15s var(--ease),
        background-color 0.15s var(--ease),
        border-color 0.15s var(--ease);
}

.settings-btn:hover,
.settings-btn[aria-expanded="true"] {
    opacity: 1;
    background: var(--surface-2);
    border-color: var(--border);
}

.settings-btn svg {
    width: 17px;
    height: 17px;
    transition: transform 0.3s var(--ease);
}

.settings-btn[aria-expanded="true"] svg {
    transform: rotate(60deg);
}

.settings-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 200;
    width: 220px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    font-size: 14px;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.settings-row:hover {
    background: var(--surface-2);
}

.settings-row.static {
    cursor: default;
}

.settings-row.static:hover {
    background: transparent;
}

.settings-row .select {
    padding: 4px 8px;
    font-size: 13px;
}

.settings-divider {
    height: 1px;
    margin: 4px 6px;
    background: var(--border);
}

.switch {
    position: relative;
    flex-shrink: 0;
    width: 30px;
    height: 18px;
    border-radius: 999px;
    background: var(--border);
    transition: background-color 0.2s var(--ease);
}

.switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}

.switch.on {
    background: var(--ink);
}

.switch.on::after {
    transform: translateX(12px);
    background: var(--ink-text);
}

/* === Board === */
.board-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    visibility: hidden;
}

.board-wrapper.theme-changing .square,
.board-wrapper.theme-changing .square::before,
.board-wrapper.theme-changing .square-label,
.board-wrapper.theme-changing .piece.king::after {
    transition:
        background-color 0.6s var(--ease),
        border-color 0.6s var(--ease),
        color 0.6s var(--ease);
}

.board-wrapper.theme-changing .piece {
    transition:
        translate var(--move-speed) var(--ease),
        background-color 0.6s var(--ease);
}

/* Flip / resize: snap into place instead of sliding across the board */
.board-wrapper.style-changing * {
    transition: none !important;
}

.board {
    position: relative;
    width: var(--board-size);
    height: var(--board-size);
    display: grid;
    grid-template-columns: repeat(var(--squares, 8), 1fr);
    grid-template-rows: repeat(var(--squares, 8), 1fr);
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

    --square-size: calc(var(--board-size) / var(--squares, 8));
    --piece-size: calc(var(--square-size) * 0.727);
}

.square {
    position: relative;
    cursor: pointer;
}

.light {
    background: var(--square-light);
}

.dark {
    background: var(--square-dark);
}

.square.selected {
    background: var(--square-selected);
}

/* Inset and border rounded to whole pixels: fractional ones get snapped
   differently on each side, leaving the frame off-centre in the square */
.square.last-move::before {
    content: "";
    position: absolute;
    inset: round(var(--square-size) * 0.05, 1px);
    border: round(var(--square-size) * 0.035, 1px) solid var(--square-last-move);
    pointer-events: none;
}

.square.possible-move::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18%;
    height: 18%;
    border-radius: 50%;
    background: var(--possible-move);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 30;
    animation: dotIn 0.18s var(--ease);
}

/* Corner positions: tr (checkers numbers), tl and bl (coordinates) */
.square-label {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: calc(var(--square-size) * 0.14);
    font-weight: 600;
    font-family: monospace;
    opacity: 0.9;
    color: var(--label-color);
    pointer-events: none;
    z-index: 1;
}

.square-label.tl {
    right: auto;
    left: 4px;
}

.square-label.br {
    top: auto;
    bottom: 2px;
}

.square-label.bl {
    top: auto;
    right: auto;
    bottom: 2px;
    left: 4px;
}

/* === Pieces === */
.piece {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--piece-size);
    height: var(--piece-size);
    border-radius: 50%;
    pointer-events: none;
    z-index: 20;

    /* Positioned with `translate` rather than `transform`, so the othello
       flip/pop animations (the `scale` property) squash the disc in place
       instead of scaling its offset across the board */
    transition: translate var(--move-speed) var(--ease);
    will-change: translate;
    backface-visibility: hidden;

    box-shadow:
        inset 0 6px 10px rgba(255, 255, 255, 0.12),
        inset 0 -9px 14px rgba(0, 0, 0, 0.48),
        0 5px 14px rgba(0, 0, 0, 0.4);
}

.piece.white {
    background-color: var(--piece-white);
}

.piece.black {
    background-color: var(--piece-black);
}

.piece.moving {
    z-index: 50;
}

/* Place mode (othello): a new disc pops in, turned discs flip over */
.piece.placed {
    animation: pieceIn 0.25s var(--ease);
}

.piece.flipping {
    animation: pieceFlip 0.38s var(--ease);
}

.board-wrapper:not(.style-changing) .board.uniform .piece {
    transition:
        translate var(--move-speed) var(--ease),
        background-color 0.19s var(--ease) 0.1s;
}

/* One square colour with grid lines (othello): a 1px line on each square
   makes 2px lines between squares, as the original othello board had */
.board.uniform .square.light {
    background: var(--square-dark);
}

.board.uniform .square {
    box-shadow: inset 0 0 0 1px var(--grid-line, rgba(0, 0, 0, 0.85));
}

/* Marker dots on grid intersections (config.starPoints) */
.star-dot {
    position: absolute;
    width: calc(var(--square-size) * 0.16);
    height: calc(var(--square-size) * 0.16);
    border-radius: 50%;
    background: var(--grid-line, #000);
    translate: -50% -50%;
    pointer-events: none;
    z-index: 10;
}

.piece.king::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25%;
    height: 25%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: kingIn 0.3s var(--ease);
}

.piece.white.king::after {
    background: var(--king-white);
}

.piece.black.king::after {
    background: var(--king-black);
}

/* === Player bars === */
.player-bar {
    width: var(--board-size);
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    margin-bottom: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: box-shadow 0.3s ease;
}

.board + .player-bar {
    margin: 8px 0 0;
}

.player-bar.active {
    box-shadow: 0 0 0 2px var(--accent);
}

.player-info {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.piece-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid;
    font-size: 10px;
    font-weight: 700;
    font-family: monospace;
}

.piece-icon.white {
    background: var(--piece-white);
    border-color: var(--piece-white-border);
    color: #333;
}

.piece-icon.black {
    background: var(--piece-black);
    border-color: var(--piece-black-border);
    color: #fff;
}

.player-name {
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-status {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}


/* === Result === */
.result-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    animation: fadeIn 0.3s var(--ease);
}

.result {
    width: min(80%, 260px);
    padding: 16px 18px;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.75);
    animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.result h2 {
    margin: 0 0 4px;
    font-size: 19px;
}

.result p {
    margin: 0 0 14px;
    font-size: 13.5px;
}

.result-actions {
    display: flex;
    gap: 6px;
}

.result .btn {
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 7px;
}

/* Viewing the final position: the whole board brings the result back */
.viewing-board,
.viewing-board * {
    cursor: pointer;
}

/* === Animations === */
@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(0.7) translateY(40px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
}

@keyframes dotIn {
    from {
        transform: translate(-50%, -50%) scale(0);
    }
}

@keyframes pieceIn {
    from {
        opacity: 0;
        scale: 0.4;
    }
}

@keyframes pieceFlip {
    50% {
        scale: 0.1 1;
    }
}

@keyframes kingIn {
    from {
        transform: translate(-50%, -50%) scale(0);
    }
}