body {
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    flex-direction: column;
    font-family: monospace;
}

/* Variant, rules and model above the board */
#game-info {
    width: 90vh;
    font-size: 1.6vh;
    color: #9a9a9a;
    margin-bottom: 1vh;
    line-height: 1.5;
}

#variant-label {
    color: white;
    font-weight: bold;
    margin-right: 1vh;
}

#rules-label {
    margin-right: 1vh;
}

#model-label {
    color: #7d8ba0;
}

#model-warning {
    color: #f0c060;
}

#status-line {
    color: #8fb0e0;
}

#status-line.error {
    color: #ff8080;
}

#board-and-players {
    width: 90vh;
    height: 72vh;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Cell size follows the board size: the board is always about 70vh wide */
#board-table {
    --n: 7;
    --cell: calc(70vh / var(--n));
    border-collapse: collapse;
    border: none;
}

#player-names {
    font-size: 3.2vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 20px;
    height: 70vh;
}

#eval-bar-container {
    width: 100%;
    height: 1.5vh;
    background: linear-gradient(to right, #ffffff 0%, #888888 50%, #000000 100%);
    border: 1px solid #666;
    margin-top: 0.5vh;
    position: relative;
    border-radius: 0.3vh;
}

#eval-bar {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0.4vh;
    height: 100%;
    background-color: #ff0000;
    transition: left 0.3s ease, opacity 0.3s ease;
    border-radius: 0.2vh;
}

/* The last evaluation, while the search for the new position has not reported yet */
#eval-bar.stale {
    opacity: 0.4;
}

#eval-detail {
    font-size: 1.4vh;
    color: #888;
    margin-top: 0.5vh;
    min-height: 1.4vh;
}

/* The network's outlook: a card that shows while the pointer is on the eval bar (or after a tap) */
#AI-eval {
    position: relative;
    cursor: help;
}

#eval-outlook {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 30;
    width: 36vh;
    margin-top: 1vh;
    padding: 1.2vh 1.6vh;
    background-color: rgba(16, 20, 28, 0.97);
    border: 1px solid #3a4a62;
    border-radius: 0.5vh;
    font-size: 1.9vh;
    line-height: 1.5;
    color: #ccc;
    text-align: left;
    font-weight: normal;
}

#AI-eval:hover #eval-outlook,
#AI-eval.show-outlook #eval-outlook {
    display: block;
}

.outlook-title {
    color: white;
    font-weight: bold;
    margin-bottom: 0.4vh;
}

#outlook-endings {
    list-style: none;
    margin: 0.6vh 0 0;
    padding: 0;
}

/* "Moves left" and each ending: text on the left, number on the right */
#outlook-moves,
#outlook-endings li {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 2vh;
}

/* The most likely ending stands out */
#outlook-endings li:first-child {
    color: white;
    font-weight: bold;
}

.outlook-p {
    min-width: 4.5ch;
    text-align: right;
}

#buttons-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 90vh;
    margin-top: 2vh;
}

#help-container {
    display: flex;
    flex-direction: column;
    gap: 1vh;
}

#help-container .button-row {
    display: flex;
    flex-direction: row;
    gap: 1vh;
}

button {
    min-width: 9vh;
    white-space: nowrap;
    height: 4vh;
    font-size: 1.5vh;
    font-family: monospace;
    background-color: white;
    color: black;
    border: none;
    padding: 0.5vh 1vh;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:disabled {
    opacity: 0.4;
    cursor: default;
}

button.action-btn {
    background-color: #4a5a72;
    color: white;
    font-weight: bold;
}

button.action-btn:hover:not(:disabled) {
    background-color: #5a6a82;
}

button.info-btn {
    background-color: #2d3540;
    color: white;
    font-weight: normal;
}

button.info-btn:hover {
    background-color: #3d4550;
}

button.small-btn {
    min-width: 0;
    width: auto;
    height: auto;
    font-size: 1.4vh;
    padding: 0.3vh 0.8vh;
    margin-left: 1vh;
    background-color: #2d3540;
    color: white;
}

/* Tooltips */
.tooltip-icon {
    display: inline-block;
    width: 1.4vh;
    height: 1.4vh;
    line-height: 1.4vh;
    text-align: center;
    border-radius: 50%;
    background-color: #666;
    color: white;
    font-size: 1.2vh;
    font-weight: bold;
    margin-left: 0.3vh;
    cursor: help;
    position: relative;
}

.tooltip-icon:hover {
    background-color: #888;
}

.tooltip-text {
    visibility: hidden;
    width: 25vh;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    text-align: left;
    border-radius: 0.5vh;
    padding: 1vh;
    position: absolute;
    z-index: 100;
    bottom: 125%;
    left: 50%;
    margin-left: -12.5vh;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 1.4vh;
    font-weight: normal;
    line-height: 1.4;
    pointer-events: none;
}

.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -0.5vh;
    border-width: 0.5vh;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
}

.tooltip-icon:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Board */
#board td {
    cursor: default;
    width: var(--cell);
    height: var(--cell);
    padding: 0;
    text-align: center;
    vertical-align: middle;
    font-size: calc(var(--cell) * 0.5);
    line-height: 1;
    border: none;
    transition: background-color 0.3s;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

#board td.light {
    background-color: #b58863;
}

#board td.dark {
    background-color: #e9c387;
}

#board td.corner {
    background-color: #7b7b7b;
}

#board td.throne {
    background-color: #8a6a4a;
    box-shadow: inset 0 0 0 calc(var(--cell) * 0.08) #6f5236;
}

/* The last move: its two squares light up, stay lit briefly, then fade out (flashLastMove in script.js) */
#board td.last-move::before {
    content: '';
    position: absolute;
    inset: 0;
    /* The grey of a selected square (td.selected below, which shows as about rgb(84, 84, 84)) */
    background-color: rgba(84, 84, 84, 0.8);
    pointer-events: none;
    animation: last-move-fade 1s ease-out forwards;
}

@keyframes last-move-fade {
    0%, 30% { opacity: 1; }
    100% { opacity: 0; }
}

#board td.selected {
    background-color: rgba(120, 120, 120, 0.7);
}

#board .piece {
    position: relative;
    z-index: 1;
    display: inline-block;
}

#board .piece.fading {
    animation: fadeOut 0.3s ease-out forwards;
}

/* Hover only on devices that can hover, and only on the human player's own pieces */
@media (hover: hover) {
    #board.attacker:not(.ai-turn) td.attacker:hover,
    #board.defender:not(.ai-turn) td.defender:hover,
    #board.defender:not(.ai-turn) td.king:hover {
        cursor: grab;
        filter: brightness(0.9);
    }

    #board td.legal-move:hover {
        filter: brightness(0.7);
        cursor: pointer;
    }
}

/* Legal targets of the selected piece */
#board td.legal-move::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--cell) * 0.2);
    height: calc(var(--cell) * 0.2);
    border-radius: 50%;
    pointer-events: none;
}

#board.attacker td.legal-move::after {
    background-color: rgba(0, 0, 0, 0.5);
}

#board.defender td.legal-move::after {
    background-color: rgba(255, 255, 255, 0.6);
}

/* Move suggestion on a square: value for the side to move and share of the search */
.policy-overlay {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    font-size: max(9px, calc(var(--cell) * 0.15));
    line-height: 1.2;
    padding: 1px 3px;
    border-radius: 3px;
    pointer-events: none;
    font-weight: bold;
    z-index: 10;
    white-space: nowrap;
}

/* The floating piece of a move animation */
.moving-piece {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1000;
    transition: left 0.4s ease-in-out, top 0.4s ease-in-out;
}

/* Drag and drop. On touch screens the board does not scroll the page, so a finger can drag pieces. */
#board-table {
    touch-action: none;
}

.moving-piece.dragged-piece {
    transition: none;
    transform: scale(1.15);
    filter: drop-shadow(0 0.6vh 0.6vh rgba(0, 0, 0, 0.5));
}

#board td.drag-source .piece {
    visibility: hidden;
}

#board td.drag-over {
    box-shadow: inset 0 0 0 calc(var(--cell) * 0.06) rgba(255, 255, 255, 0.75);
}

body.dragging,
body.dragging #board td {
    cursor: grabbing !important;
}

/* Game over message */
#overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    font-size: 5vh;
    color: white;
    z-index: 15;
    cursor: pointer;
}

#overlay.hidden {
    display: none;
}

#winMessage small {
    display: block;
    font-size: 2vh;
    color: #ccc;
    margin-top: 1vh;
}

/* Panels (help, settings, new game) over the board */
.panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: rgba(0, 0, 0, 0.92);
    color: white;
    z-index: 20;
    overflow-y: auto;
}

.panel.hidden {
    display: none;
}

.panel-content {
    position: relative;
    font-size: 1.9vh;
    max-width: 72vh;
    padding: 3vh 2vh;
    line-height: 1.4;
}

.panel-title {
    font-weight: bold;
    font-size: 2.2vh;
    margin: 1vh 0;
}

.panel-subtitle {
    font-weight: bold;
    margin: 2vh 0 1vh;
}

.panel p {
    margin: 0 0 1vh;
}

#rules-text {
    margin: 0 0 2vh;
    padding-left: 2.5vh;
}

#rules-text li {
    margin-bottom: 0.5vh;
}

.panel .field {
    display: block;
    margin: 1.2vh 0 0.3vh;
}

.panel .field select,
.panel .field input[type="range"] {
    display: block;
    width: 100%;
    margin-top: 0.5vh;
}

.panel select {
    padding: 0.5vh;
    font-size: 1.8vh;
    font-family: monospace;
    background-color: #1a2332;
    color: white;
    border: 2px solid #3a4a62;
}

.panel .check {
    display: block;
    margin: 1vh 0;
    cursor: pointer;
}

.panel fieldset {
    border: 1px solid #333;
    margin: 1vh 0;
    padding: 0.5vh 1.5vh;
}

.panel fieldset:disabled {
    opacity: 0.55;
}

.hint {
    font-size: 1.6vh;
    color: #888;
    margin-top: 0.3vh;
}

.warning {
    color: #f0c060;
    margin: 1vh 0;
}

.panel-buttons {
    display: flex;
    gap: 1vh;
    margin-top: 2vh;
}

/* The main menu covers the whole page: the page opens there, and the game waits behind it (where
   it shows through, once there is one) */
#menuText {
    position: fixed;
    background-color: black;
}

#menuText.over-game {
    background-color: rgba(0, 0, 0, 0.94);
}

#menuText .panel-content {
    width: 60vh;
    margin: auto 0;  /* centred in the height when it fits, from the top when it does not */
}

/* Until the page has filled in the menu (init in script.js) */
#menuText .panel-content.pending {
    visibility: hidden;
}

.menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5vh;
    align-items: start;
}

.menu-grid .difficulty input {
    margin: 0;
}

.close-btn {
    min-width: 0;
    position: absolute;
    top: 1vh;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 3.5vh;
    cursor: pointer;
    width: auto;
    height: auto;
    padding: 0;
    font-weight: normal;
    transition: color 0.2s;
}

.close-btn:hover {
    color: #ff6666;
}

/* Player and display options below the board */
.player-config-container {
    width: 18vh;
    margin-right: 2vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.config-label {
    font-size: 1.8vh;
    height: 3.6vh;
    line-height: 1.8vh;
    margin-bottom: 5px;
}

.player-config-container select {
    width: 100%;
    padding: 5px;
    font-size: 1.6vh;
    font-family: monospace;
    background-color: #1a2332;
    color: white;
    border: 2px solid #3a4a62;
    cursor: pointer;
}

.player-config-container select:hover {
    background-color: #2a3542;
    border-color: #4a5a72;
}

.player-config-container select option {
    background-color: #1a2332;
    color: white;
}

.difficulty {
    margin-top: 5px;
}

.difficulty label {
    font-size: 1.6vh;
    display: block;
    margin-bottom: 3px;
}

.difficulty input {
    width: 100%;
}

.range-ends {
    display: flex;
    justify-content: space-between;
    font-size: 1.4vh;
    margin-top: 2px;
}

.hidden {
    display: none;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.5);
    }
}

#attacker-label,
#defender-label {
    color: #868686;
}

/* "Defender:" above "Human", "Eval:" above the value (on one line on phones) */
.side-name,
.eval-title {
    display: block;
}

#play-options {
    display: flex;
}

#settings-play-slot:empty {
    display: none;
}

.active-player {
    font-weight: bold;
    color: #ffffff !important;
}

/* Phones and narrow windows: everything on one screen without scrolling. A short line of game
   info, the board as large as fits, one row with the players and the eval bar, and one row of
   buttons. The player and analysis menus move into the Settings panel (placePlayOptions in
   script.js). */
@media only screen and (max-width: 768px) {
    body {
        justify-content: flex-start;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
        box-sizing: border-box;
    }

    #game-info {
        width: calc(100vw - 16px);
        font-size: 11px;
        line-height: 1.35;
        margin-bottom: 5px;
    }

    #model-label {
        display: none;
    }

    /* The board takes the full width unless the screen is too short; about 200px stay for the rest */
    #board-table {
        --cell: min(calc((100vw - 8px) / var(--n)), calc((100vh - 200px) / var(--n)));
    }

    @supports (height: 100dvh) {
        #board-table {
            --cell: min(calc((100vw - 8px) / var(--n)), calc((100dvh - 200px) / var(--n)));
        }
    }

    /* The board (with the players) centred in the free height, the buttons at the bottom of the screen */
    #board-and-players {
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto;
        margin: auto 0;
    }

    #player-names {
        flex-direction: row;
        align-items: center;
        width: calc(100vw - 16px);
        height: auto;
        margin: 8px 0 0;
        font-size: 14px;
        gap: 10px;
    }

    .side-name {
        display: inline;
    }

    #defender-label,
    #attacker-label {
        flex: 1;
        line-height: 1.2;
    }

    #attacker-label {
        text-align: right;
    }

    #AI-eval {
        flex: 1.3;
        text-align: center;
        font-size: 13px;
    }

    /* Above the eval bar (which is in the middle of the screen), over the board */
    #eval-outlook {
        top: auto;
        right: auto;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: min(300px, calc(100vw - 32px));
        box-sizing: border-box;
        margin: 0 0 8px;
        padding: 10px 14px;
        font-size: 15px;
        border-radius: 4px;
    }

    #outlook-endings li {
        column-gap: 16px;
    }

    .eval-title {
        display: inline;
        color: #888;
    }

    #eval-bar-container {
        height: 7px;
        margin-top: 3px;
        border-radius: 3px;
    }

    #eval-bar {
        width: 3px;
    }

    #eval-detail {
        font-size: 10px;
        min-height: 0;
        margin-top: 2px;
    }

    /* One row of buttons */
    #buttons-container {
        display: block;
        width: calc(100vw - 16px);
        margin-top: 10px;
    }

    #help-container {
        flex-direction: row;
        gap: 6px;
    }

    #help-container .button-row {
        display: contents;
    }

    button {
        flex: 1;
        min-width: 0;
        height: 42px;
        font-size: clamp(11px, 3.4vw, 14px);
        padding: 0 2px;
    }

    button.small-btn {
        flex: none;
        height: auto;
        font-size: 12px;
        padding: 4px 8px;
    }

    .close-btn {
        flex: none;
        font-size: 28px;
    }

    /* The player and analysis menus at the top of the Settings panel */
    #settings-play-slot #play-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin: 10px 0 6px;
        padding-bottom: 14px;
        border-bottom: 1px solid #333;
    }

    .player-config-container {
        width: 100%;
        margin-right: 0;
    }

    .config-label {
        font-size: 13px;
        height: auto;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    /* Hover tooltips do not work on touch; the help panel explains the options */
    .tooltip-icon {
        display: none;
    }

    .player-config-container select {
        font-size: 14px;
        padding: 8px 4px;
    }

    .difficulty label,
    .range-ends {
        font-size: 12px;
    }

    .panel {
        position: fixed;
    }

    .panel-content {
        font-size: 14px;
        max-width: 92vw;
        padding: 20px 12px;
    }

    #menuText .panel-content {
        width: 92vw;
        box-sizing: border-box;
        padding: 14px 12px;
    }

    .menu-grid {
        column-gap: 12px;
    }

    #menuText .warning {
        font-size: 12px;
        margin: 6px 0 0;
    }

    #menuText .range-ends {
        display: none;
    }

    .panel-title {
        font-size: 17px;
    }

    .panel select {
        font-size: 14px;
    }

    .hint {
        font-size: 12px;
    }

    .policy-overlay {
        padding: 0 2px;
        bottom: 1px;
        right: 1px;
    }

    #overlay {
        font-size: 28px;
    }

    #winMessage small {
        font-size: 14px;
    }
}