@font-face {
    font-family: "Recursive Sans"; font-style: normal; font-weight: 400; font-display: swap;
    src: url('recursive-sans-csl-400.woff2') format('woff2');
}
@font-face {
    font-family: "Recursive Sans"; font-style: italic; font-weight: 400; font-display: swap;
    src: url('recursive-sans-csl-400i.woff2') format('woff2');
}
@font-face {
    font-family: "Recursive Sans"; font-style: normal; font-weight: 700; font-display: swap;
    src: url('recursive-sans-csl-700.woff2') 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;
    --stone-stroke: #222;
    --overlay: #000A;
    --control-background: #111;

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

#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;
    --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 .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 { width: 100vmin; height: 100vmin; background-color: var(--board); position: relative; }
#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; }
#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; }
#settings-overlay .setting,
#help-overlay .help { width: 100%; text-align: left; font-size: 24px; }
#settings-overlay .game-name,
#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-weight: 700; }
#settings-overlay input { width: 100%; margin: 8px 0 20px; background: var(--control-background); color: var(--text); }
#settings-overlay .themes,
#settings-overlay .collections { 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: 100vmin; height: 100vmin;
    background: var(--overlay); color: var(--text); text-align: center; line-height: 100vmin;
    font-size: 80px; }