@font-face {
    font-family: "Recursive Sans"; font-style: normal; font-weight: 400; font-display: swap;
    src: url('recursive-sans-csl-400.woff2?v=7cd2cc25a11f') format('woff2');
}
@font-face {
    font-family: "Recursive Sans"; font-style: italic; font-weight: 400; font-display: swap;
    src: url('recursive-sans-csl-400i.woff2?v=8ddb4b7b8531') format('woff2');
}
@font-face {
    font-family: "Recursive Sans"; font-style: normal; font-weight: 700; font-display: swap;
    src: url('recursive-sans-csl-700.woff2?v=bf5a20079742') format('woff2');
}

html, body { font-family: "Recursive Sans"; margin: 0; height: 100%; color-scheme: dark; }

#app {
    --background: #000;
    --text: #666;
    --menu-background: #666;
    --menu-text: #000;
    --board: #540;
    --lines: #0009;
    --black-stone: #222;
    --white-stone: #666;
    --middle-probability: #444;
    --stone-stroke: #222;
    --overlay: #000A;
    --control-background: #111;
    --win-probability-bar-height: 5px;
    --board-size: 100vmin;

    color-scheme: dark;
    position: fixed; inset: 0; background: var(--background); color: var(--text);
}

#app.bar-visible { --board-size: calc(100vmin - var(--win-probability-bar-height)); }

#app.theme-day {
    color-scheme: light;
    --background: #EEE;
    --text: #222;
    --menu-background: #222;
    --menu-text: #EEE;
    --board: #CB5;
    --lines: #0009;
    --black-stone: #222;
    --white-stone: #FFF;
    --middle-probability: #BBB;
    --stone-stroke: #222;
    --overlay: #FFFC;
    --control-background: #FFF;
}

#menu { position: absolute; left: 0px; top: 0px; z-index: 9; }
#menu .item { float: left; padding: 1px 0 0 1px; }
@media screen and (min-aspect-ratio: 1/1) { #menu .item { float: none; } }
#menu .icon { display: block; cursor: pointer; background-color: var(--menu-background); color: var(--menu-text);
    border-radius: 30px; line-height: 30px; width: 30px; height: 30px; text-align: center; }
#menu .lead-circle { display: block; border-radius: 30px; line-height: 30px; width: 30px; height: 30px; text-align: center; }
#menu .lead-circle.white-lead { background-color: var(--white-stone); color: var(--black-stone); }
#menu .lead-circle.black-lead { background-color: var(--black-stone); color: var(--white-stone); }

#menu .icon .tooltip { display: none; }
#menu .icon:hover .tooltip { display: inline; }
@media screen and (min-aspect-ratio: 1/1) { #menu .icon:hover { width:auto; padding: 0 10px; } }
@media screen and (max-aspect-ratio: 1/1) { #menu .icon:hover .tooltip { display: block; position: absolute; top: 25px; color: var(--text); } }

#board-container { display: flex; align-items: center; justify-content: center; height: 100%; overflow: hidden; position: relative; }
#board-stack { width: var(--board-size); position: relative; }
#board { display: block; width: var(--board-size); height: var(--board-size); background-color: var(--board); position: relative; }
#manual-controls { position: absolute; left: 0; top: 0; width: 100%; height: var(--board-size); z-index: 2; display: flex; }
#manual-controls[hidden] { display: none; }
#manual-controls .manual-control-half { flex: 1; cursor: pointer; }
#win-probability-bar { display: flex; width: 100%; height: var(--win-probability-bar-height); }
#win-probability-bar .white-win-probability { background: var(--white-stone); }
#win-probability-bar .middle-probability { background: var(--middle-probability); }
#win-probability-bar .black-win-probability { background: var(--black-stone); }
#lines { stroke: var(--lines); stroke-width: 1.5px; }
#stars { fill: var(--lines); }

#stones { stroke: var(--stone-stroke); stroke-width: 2px; }
.black { fill: var(--black-stone); transform-origin: center left; }
.white { fill: var(--white-stone); transform-origin: center right; }

#close-settings-area,
#close-help-area { position: absolute; inset: 0; z-index: 4; }
#close-settings-area[hidden],
#close-help-area[hidden] { display: none; }
#settings-overlay,
#help-overlay { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 100vmin; height: 100vh;
    background: var(--overlay); color: var(--text); z-index: 5; display: flex; flex-direction: column;
    overflow-y: auto; }
#settings-overlay[hidden],
#help-overlay[hidden] { display: none; }
#settings-overlay .outside-board,
#help-overlay .outside-board { flex: 1; min-height: 0; }
#settings-overlay .settings-board,
#help-overlay .help-board { width: 100%; height: 100vmin; display: flex; align-items: flex-start; justify-content: flex-start; box-sizing: border-box; padding: 10vmin; }
@media screen and (max-aspect-ratio: 1/1) {
    #settings-overlay,
    #help-overlay { left: 0; top: 31px; transform: none; width: 100vw; height: calc(100vh - 31px); height: calc(100dvh - 31px); }
    #settings-overlay .outside-board,
    #help-overlay .outside-board { display: none; }
    #settings-overlay .settings-board,
    #help-overlay .help-board { height: auto; min-height: calc(100vh - 31px); min-height: calc(100dvh - 31px); padding: 16px 10vmin 10vmin; }
}
#settings-overlay .setting,
#help-overlay .help { width: 100%; text-align: left; font-size: 24px; }
#help-overlay ul { text-align: left; }
#help-overlay li { margin: 12px 0; }
#settings-overlay .setting-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 30px; margin: 8px 0 20px; }
#settings-overlay .setting-label { font-style: italic; }
#settings-overlay input { width: 100%; margin-top: 8px; background: var(--control-background); color: var(--text); }
#settings-overlay .themes,
#settings-overlay .collections,
#settings-overlay .bar-options,
#settings-overlay .play-options { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 30px; margin: 0; }
#settings-overlay .option { cursor: pointer; }
#settings-overlay .option.active { font-weight: 700; cursor: default; }

#result { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--board-size); height: var(--board-size);
    background: var(--overlay); color: var(--text); text-align: center; line-height: var(--board-size);
    font-size: 80px; }