:root {
    box-sizing: border-box;
    --bg-color: #eee;
    --panel-color: #fff;
    --text-on-black: #fff;
    --text: #000;
    --text-move-number: #666;

    --bg-highlight: hsl(290, 30%, 65%);
    --bg-highlight-light: hsl(290, 51%, 90%);
    --text-on-highlight: #fff;

    --board-main-dark: #ccc;
    --board-main-light: #fff;
    --board-main-dark-lastmove: hsl(65, 60%, 77%);
    --board-main-light-lastmove: hsl(65, 60%, 88%);
    --board-arrow-stroke: #333;
    --board-arrow-0: rgba(65, 248, 233);
    --board-arrow-1: rgb(214, 85, 85);
    --board-arrow-2: rgb(0, 38, 255);
    --board-arrow-3: rgb(255, 255, 255);
    --board-arrow-4: rgb(236, 224, 48);
    --board-arrow-5: rgb(0, 0, 0);
    --board-arrow-6: rgb(138, 138, 136);
    --board-arrow-7: rgb(102, 69, 248);
    --board-arrow-8: rgb(255, 79, 217);
    --board-arrow-9: rgb(102, 248, 65);
    --board-outline: #e91d8d;


    --board-pv-dark: hsl(290, 61%, 86%);
    --board-pv-light: #fff;
    --board-pv-dark-lastmove: hsl(240, 30%, 65%);
    --board-pv-light-lastmove: hsl(200, 80%, 90%);
    --board-pv-arrow-white: hsl(110, 100%, 80%);
    --board-pv-arrow-black: hsl(110, 100%, 20%);

    --vwdl-border: rgba(0, 0, 0, 0.8);
    --vwdl-white: #eee;
    --vwdl-draw: #ccc;
    --vwdl-black: #555;
    --vwdl-white-text: #666;
    --vwdl-black-text: #ccc;
    --vwdl-draw-text: #333;

    --wdl-white: #eee;
    --wdl-draw: #ccc;
    --wdl-black: #555;
    --wdl-white-text: #000;
    --wdl-black-text: #fff;
    --wdl-draw-text: #000;
    --wdl-midline: #888;

    --nodesbar-border: hsla(290, 30%, 65%, 0.5);

    --movelist-pv-divider: #ccc;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    font-family: verdana, Helvetica, Arial, sans-serif;
    font-size: 12px;
    background-color: var(--bg-color);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.dark select {
    color: #d6d6d6;
    background-color: #2e2e2e;
}

body.dark {
    color: #d6d6d6;
    --panel-color: #2e2e2e;
    --bg-color: #1e1e1e;
    --text: #d6d6d6;
    --text-move-number: #aaa;

    --bg-highlight: hsl(290, 30%, 35%);
    --bg-highlight-light: hsl(290, 30%, 20%);
    /* --text-on-highlight: #fff; */

    --board-main-dark: hsl(0, 0%, 27%);
    --board-main-light: hsl(0, 0%, 53%);
    --board-main-dark-lastmove: hsl(65, 40%, 35%);
    --board-main-light-lastmove: hsl(65, 20%, 40%);
    --board-arrow-stroke: #000;
    /*
    --board-arrow-stroke: #333;
    --board-arrow-0: rgba(65, 248, 233);
    --board-arrow-1: rgb(214, 85, 85);
    --board-arrow-2: rgb(0, 38, 255);
    --board-arrow-3: rgb(255, 255, 255);
    --board-arrow-4: rgb(236, 224, 48);
    --board-arrow-5: rgb(0, 0, 0);
    --board-arrow-6: rgb(138, 138, 136);
    --board-arrow-7: rgb(102, 69, 248);
    --board-arrow-8: rgb(255, 79, 217);
    --board-arrow-9: rgb(102, 248, 65);
    --board-outline: #e91d8d; */

    --board-pv-dark: hsl(0, 0%, 27%);
    --board-pv-light: hsl(290, 61%, 86%);
    --board-pv-dark-lastmove: hsl(240, 30%, 65%);
    --board-pv-light-lastmove: hsl(200, 80%, 90%);
    --board-pv-arrow-white: hsl(110, 100%, 80%);
    --board-pv-arrow-black: hsl(110, 100%, 20%);

    --vwdl-border: rgba(0, 0, 0, 0.8);
    --vwdl-white: #ccc;
    --vwdl-draw: #777;
    --vwdl-black: #000;
    --vwdl-white-text: #444;
    --vwdl-black-text: #999;
    --vwdl-draw-text: #ccc;

    --wdl-white: #ccc;
    --wdl-draw: #777;
    --wdl-black: #000000;
    --wdl-white-text: #000;
    --wdl-black-text: #fff;
    --wdl-draw-text: #fff;
    --wdl-midline: #888;

    --nodesbar-border: hsla(290, 30%, 65%, 0.5);

    --movelist-pv-divider: #ccc;
    */
}

table {
    border-collapse: collapse;
}


#footer {
    margin: auto 10px 2px 10px;
}

/* Shared */

.panel {
    background-color: var(--panel-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    max-width: 100vw;
}

/* Header */

#header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
}

#logo {
    display: inline-block;
    width: 70px;
    margin-right: 40px;
}

#logo img {
    width: 100%;
    height: auto;
}

#game-selection {
    max-width: 100%;
    margin-right: auto;
}

#connection-status {
    text-align: right;
}

#dark-mode-toggle {
    margin: 5px;
    font-size: 24px;
    cursor: pointer;
}

/* Banner */

#banner {
    background-color: var(--bg-highlight-light);
    border: 1px solid var(--bg-highlight);
    margin: auto;
    max-width: min(500px, 80%);
}

#banner:empty {
    display: none;
}

/* Pane */

.main-pane {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#board-area {
    display: flex;
    flex-direction: column;
    transform-origin: top left;
}

.player {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.player-name {
    font-weight: bold;
    flex-grow: 1;
}

.clock {
    margin-left: auto;
}

#board {
    width: calc(86.74698795180723% - 2px);
}

svg.board {
    width: 100%;
}

.board-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 2px;
    width: min(600px, calc(100vw - 40px));
}

/* Board */

svg.main-board .square.dark {
    fill: var(--board-main-dark);
}

svg.main-board .square.light {
    fill: var(--board-main-light);
}

svg.main-board .square.dark.lastmove {
    fill: var(--board-main-dark-lastmove);
}

svg.main-board .square.light.lastmove {
    fill: var(--board-main-light-lastmove);
}

svg.pv-board .square.dark {
    fill: var(--board-pv-dark);
}

svg.pv-board .square.light {
    fill: var(--board-pv-light);
}

svg.pv-board .square.dark.lastmove {
    fill: hsl(240, 30%, 65%);
}

svg.pv-board .square.light.lastmove {
    fill: hsl(200, 80%, 90%);
}

.arrow {
    fill-opacity: 0.75;
    stroke-width: 1px;
    stroke: var(--board-arrow-stroke);
}

.arrow-variation-ply2 {
    fill-opacity: 0.85;
    stroke-width: 0.3px;
    stroke-opacity: 1.0;
}

.arrow-variation-ply3 {
    fill-opacity: 0.85;
    stroke-width: 0.3px;
    stroke-opacity: 1.0;
}

.arrow-variation0 {
    fill: var(--board-arrow-0);
}

.arrow-variation1 {
    fill: var(--board-arrow-1);
}

.arrow-variation2 {
    fill: var(--board-arrow-2);
}

.arrow-variation3 {
    fill: var(--board-arrow-3);
}

.arrow-variation4 {
    fill: var(--board-arrow-4);
}

.arrow-variation5 {
    fill: var(--board-arrow-5);
}

.arrow-variation6 {
    fill: var(--board-arrow-6);
}

.arrow-variation7 {
    fill: var(--board-arrow-7);
}

.arrow-variation8 {
    fill: var(--board-arrow-8);
}

.arrow-variation9 {
    fill: var(--board-arrow-9);
}

.arrow-ply2 {
    fill-opacity: 0.85;
    stroke-width: 0.3px;
    stroke-opacity: 1.0;
}

.arrow-ply3 {
    fill-opacity: 0.85;
    stroke-width: 0.3px;
    stroke-opacity: 1.0;
}

.arrow-variation-white {
    fill: var(--board-pv-arrow-white);
}

.arrow-variation-black {
    fill: var(--board-pv-arrow-black);
}

#board-score {
    flex-grow: 1;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
    background-color: #eee;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

svg.vwdl-bar {
    vertical-align: middle;
    width: auto;
}

svg.vwdl-bar .vwdl-white {
    fill: var(--vwdl-white);
}

svg.vwdl-bar .vwdl-draw {
    fill: var(--vwdl-draw);
}

svg.vwdl-bar .vwdl-black {
    fill: var(--vwdl-black);
}

svg.vwdl-bar .vwdl-outer {
    stroke: var(--vwdl-border);
    fill: transparent;
}

svg.vwdl-bar .text {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-anchor: middle;
}

svg.vwdl-bar .vwdl-top-text {
    dominant-baseline: text-before-edge;
}

svg.vwdl-bar .vwdl-bottom-text {
    dominant-baseline: text-after-edge;
}

svg.vwdl-bar .vwdl-middle-text {
    dominant-baseline: middle;
}

svg.vwdl-bar .vwdl-black-text {
    fill: var(--vwdl-black-text);
}

svg.vwdl-bar .vwdl-black-text-shadow {
    stroke-width: 2px;
    stroke: var(--vwdl-black);
}

svg.vwdl-bar .vwdl-white-text {
    fill: var(--vwdl-white-text);
}

svg.vwdl-bar .vwdl-white-text-shadow {
    stroke-width: 2px;
    stroke: var(--vwdl-white);
}

svg.vwdl-bar .vwdl-draw-text {
    fill: var(--vwdl-draw-text);
}

svg.vwdl-bar .vwdl-draw-text-shadow {
    stroke-width: 2;
    stroke: var(--vwdl-draw);
}

/* Movelist */

#movelist-panel {
    height: 160px;
    width: 510px;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}

#movelist {
    flex: 1;
    overflow-y: auto;
}

#pv-view {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--movelist-pv-divider);
    flex: 1;
    overflow-y: auto;
    display: none;
}

#pv-view.pv-view-active {
    display: block;
}

#pv-view:focus {
    outline: none;
}

#movelist table {
    table-layout: fixed;
    margin: 5px;
}

#movelist table:focus {
    outline: none;
}

.movelist-item {
    cursor: pointer;
    padding: 0;
}

.movelist-item td {
    padding-top: 0;
    padding-bottom: 0;
}

.movelist-selected {
    background-color: var(--bg-highlight);
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.justify-right {
    text-align: right;
}

.spacing-right {
    padding-right: 0.5em;
}

.movelist-col-pnum {
    width: 20px;
}

.movelist-col-pmove {
    width: 45px;
}

.movelist-col-eval {
    width: 255px;
}

.movelist-col-time {
    width: 50px;
}

.movelist-col-nodes {
    width: 60px;
}

.movelist-col-depth {
    width: 50px;
}

.movelist-col-nnum {
    width: 30px;
}

.movelist-col-nmove {
    width: 30px;
}

#pv-view-close {
    font-size: 24px;
    color: var(--text);
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding-right: 5px;
    display: inline-block;
    transition: color 0.1s ease;
    vertical-align: bottom;

}

#pv-view-close:hover {
    color: var(--bg-highlight);
}

/* WDL bar */

svg.wdl-bar {
    vertical-align: middle;
    margin-left: 10px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

svg.wdl-bar .wdl-outer {
    stroke: transparent;
    fill: transparent;
}

svg.wdl-bar .wdl-white {
    fill: var(--wdl-white);
}

svg.wdl-bar .wdl-draw {
    fill: var(--wdl-draw);
}

svg.wdl-bar .wdl-black {
    fill: var(--wdl-black);
}

svg.wdl-bar .wdl-midline {
    stroke: var(--wdl-midline);
    stroke-width: 0.5px;
}

svg.wdl-bar .wdl-middle {
    stroke: var(--bg-highlight);
    stroke-width: 2px;
}

svg.wdl-bar .text {
    font-family: verdana, Helvetica, Arial, sans-serif;
    dominant-baseline: middle;
}

svg.wdl-bar .wdl-text-right {
    text-anchor: end;
}

svg.wdl-bar .wdl-text-center {
    text-anchor: middle;
}

svg.wdl-bar .wdl-white-text-shadow {
    stroke-width: 2;
    stroke: var(--wdl-white);
}

svg.wdl-bar .wdl-white-text {
    fill: var(--wdl-white-text);
}

svg.wdl-bar .wdl-black-text-shadow {
    stroke-width: 2;
    stroke: var(--wdl-black);
}

svg.wdl-bar .wdl-black-text {
    fill: var(--wdl-black-text);
}

svg.wdl-bar .wdl-draw-text-shadow {
    stroke-width: 2;
    stroke: var(--wdl-draw);
}

svg.wdl-bar .wdl-draw-text {
    fill: var(--wdl-draw-text);
}

/* Analysis pane */

.mpv-col-legend {
    width: 10px;
}

.mpv-col-move {
    width: 50px;
}

.mpv-col-wdl {
    width: 260px;
}

.mpv-col-node {
    width: 260px;
}

.mpv-col-pv {
    width: auto;
}

.legend {
    stroke-width: 1px;
    stroke: var(--text);
}

#multipv-view {
    width: calc(100% - 20px);
    min-height: 450px;
}

#multipv-view table {
    margin: 5px;
    width: calc(100% - 10px);
    table-layout: fixed;
}

#multipv-view td {
    overflow: hidden;
}

.pv-row {
    cursor: pointer;
}

.pv-row:hover {
    background-color: var(--bg-highlight-light);
}

.row-move-played {
    background-color: var(--bg-highlight);
    color: var(--text-on-highlight);
}

.square-outline {
    stroke: var(--board-outline);
    stroke-width: 2px;
    stroke-linejoin: round;
    fill: transparent;
}

.square-outline-dst {
    stroke: var(--board-outline);
    stroke-width: 5px;
    stroke-linejoin: round;
    fill: transparent;
}

.pv-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.move-number {
    font-size: 8px;
    color: var(--text-move-number);
}

.pv-move {
    margin: 0.2em;
    cursor: pointer;
}

.pv-move-selected {
    background-color: var(--bg-highlight);
    color: var(--text-on-highlight);
}

.pv-selectable-move:hover {
    background-color: var(--bg-highlight);
}

/* Nodes bar */

svg.nodes-bar {
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 10px;
}

svg.nodes-bar .nodes-outer {
    stroke: var(--nodesbar-border);
    fill: transparent;
}

svg.nodes-bar .nodes-inner {
    fill: var(--bg-highlight);
}

svg.nodes-bar .text-onbar {
    font-family: verdana, Helvetica, Arial, sans-serif;
    fill: var(--text-on-highlight);
    dominant-baseline: middle;
}

svg.nodes-bar .text-offbar {
    font-family: verdana, Helvetica, Arial, sans-serif;
    fill: var(--text);
    dominant-baseline: middle;
}

/* Mobile */

@media (min-width: 1180px) {
    #header {
        flex-direction: row;
        align-items: center;
    }

    #movelist-panel {
        height: 570px;
    }

    .main-pane {
        margin-left: 10px;
    }
}