:root {
    color-scheme: dark;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* The notch and the home indicator, for my-clock.js to keep the
       setting lists clear of. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    /* The page is the whole screen in the iOS app; nothing should rubber-band. */
    overscroll-behavior: none;
}

body {
    background: #2f3432;
    color: #261917;
    /* A long press on the board is not a request to select or share a stone. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

#about_box,
#about_box * {
    -webkit-user-select: text;
    user-select: text;
}

[hidden] {
    display: none !important;
}

#sb-site {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
}

#goban {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: 1px;
    padding-bottom: 1px;
    overflow: hidden;
    /* A one- or two-finger drag is the hand for my-clock.js to read, not a
       pan; pinch zoom is left to the browser (Safari allows it, the iOS app
       does not, so there a two-finger drag is never mistaken for one). */
    touch-action: pinch-zoom;
}

#goban img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin-right: auto;
    margin-left: auto;
    /* Dragging the board is a swipe, not a picture being picked up. */
    -webkit-user-drag: none;
}

.board_pos,
#moving_stone,
#moving_stone2,
#pushed_stone {
    pointer-events: none;
}

.board_pos {
    z-index: 2;
}

.stone-shadow {
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / var(--stone-shadow-fill-alpha, 0.34));
    box-shadow: 0 0 var(--stone-shadow-blur-size, 3px) var(--stone-shadow-spread-size, 1px) rgb(0 0 0 / var(--stone-shadow-blur-alpha, 0.4));
    opacity: var(--stone-shadow-opacity, 0.72);
    pointer-events: none;
    transform: translate(var(--stone-shadow-offset-x, 1.25px), var(--stone-shadow-offset-y, 1.75px)) scale(var(--stone-shadow-scale, 1));
    transform-origin: center;
    transition: opacity 160ms ease, transform 160ms ease;
}

#moving_stone,
#moving_stone2 {
    z-index: 4;
    background: transparent;
}

#pushed_stone {
    z-index: 3;
    background: transparent;
}

/* The hand pushing the stones about (one disc per finger down), the arm
   sweeping the board (sweep.js), and the stones while they are loose under
   them or lying on the table. */
#finger,
#finger2,
#arm {
    position: absolute;
    z-index: 5;
    border: 1px solid rgb(255 255 255 / 0.45);
    border-radius: 50%;
    background: rgb(255 255 255 / 0.16);
    box-shadow: inset 0 0 12px rgb(255 255 255 / 0.25), 0 2px 8px rgb(0 0 0 / 0.25);
    pointer-events: none;
}

#arm {
    z-index: 100;
    overflow: visible;
    border: 0;
    background: none;
    box-shadow: none;
    filter: drop-shadow(0 2px 8px rgb(0 0 0 / 0.25));
}

#arm path {
    fill: rgb(255 255 255 / 0.16);
    stroke: rgb(255 255 255 / 0.45);
    stroke-width: 1;
}

/* None are drawn for now: the stones moving are enough to show the hand
   and the arm. Delete this rule to bring the discs back. */
#finger,
#finger2,
#arm {
    visibility: hidden;
}

.loose-stone {
    z-index: 3;
}

/* A stone the magic has in the air (magic.js) passes over the rest. */
.magic-stone {
    z-index: 4;
}

/* A stone ridden up onto another (physics.js) lies over it. */
.loose-stone.riding {
    z-index: 4;
}

/* A stone tumbling in space wears a frame of its tumble sheet (flight.js);
   one risen off the board passes over everything else. */
.flying {
    background-repeat: no-repeat;
}

.rising {
    z-index: 6;
}

/* A ring of ripple where a stone went into the water (water.js), under
   the stones, and a drop of water flung up by the splash, over them. */
.ripple {
    position: absolute;
    z-index: 2;
    border: 1.5px solid rgb(255 255 255 / 0.75);
    border-radius: 50%;
    box-shadow: 0 0 6px rgb(255 255 255 / 0.35), inset 0 0 6px rgb(255 255 255 / 0.35);
    pointer-events: none;
}

.droplet {
    position: absolute;
    z-index: 6;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.85);
    box-shadow: 0 0 4px rgb(255 255 255 / 0.6);
    pointer-events: none;
}

.stone {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
}

/* The controls: a row along the top of the screen in portrait, from the
   left. Tucked away, nothing but the toggle at the left is left; the
   rest slide out from under it and back. */
.toolbar {
    position: fixed;
    top: max(10px, env(safe-area-inset-top));
    left: max(10px, env(safe-area-inset-left));
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 6px;
    width: max-content;
    max-width: calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right));
    /* The toolbar's own box is see-through to touches: only its controls
       take them, so a tap between buttons reaches the board. */
    pointer-events: none;
}

.toolbar > * {
    pointer-events: auto;
}

/* The setting buttons, and the tools button: a row, wrapping if it must. */
.toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Tools (replay, settings, about) are not visual choices, so a wider gap
   sets the tools button apart from the row of them, down the left in
   landscape instead. */
#tools-control {
    margin-left: 14px;
}

@media (orientation: landscape) {
    #tools-control {
        margin-left: 0;
        margin-top: 14px;
    }
}

/* Out from under the toggle, showing as they go; and back the same way
   in reverse, fading as they arrive. */
.toolbar-actions > * {
    transition: transform 280ms ease-in-out, opacity 200ms ease, visibility 0s;
}

.toolbar[data-collapsed="true"] .toolbar-actions > * {
    visibility: hidden;
    opacity: 0;
    /* Back under the toggle: each button its own distance to the left. */
    transform: translateX(calc((var(--i) + 1) * -48px));
    transition: transform 280ms ease-in-out, opacity 200ms ease 80ms, visibility 0s 280ms;
}

.button {
    display: grid;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    place-items: center;
    background: rgb(0 0 0 / 0.62);
    color: white;
    cursor: pointer;
    font-family: Arial, sans-serif;
    line-height: 1;
    opacity: 1;
    box-shadow: 0 3px 14px rgb(0 0 0 / 0.32);
}

.menu-toggle {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    background: rgb(0 0 0 / 0.7);
    opacity: 0.85;
}

.menu-toggle svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* Tucked away, the toggle dims well down after a moment, so it is not
   the first thing seen; a touch anywhere (my-clock.js sets `awake` for a
   while) or a keyboard's focus brings it straight back. */
.toolbar[data-collapsed="true"] .menu-toggle {
    opacity: 0.2;
    transition: opacity 600ms ease 2s;
}

.toolbar[data-collapsed="true"] .menu-toggle svg {
    width: 22px;
    height: 22px;
}

.toolbar[data-collapsed="true"][data-awake="true"] .menu-toggle,
.toolbar[data-collapsed="true"] .menu-toggle:focus-visible {
    opacity: 1;
    transition: opacity 150ms ease;
}

/* A setting is a button wearing its icon; open, its choices drop down
   beneath it (or, in landscape, open out to its right), the current one
   marked; a submenu is a choice in that list with a list of its own beside
   it. Where a list goes is my-clock.js's placePanel(), which keeps it on
   the screen. */
.setting-control {
    position: relative;
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
}

.setting-summary {
    display: grid;
    align-items: center;
    justify-items: center;
    width: 42px;
    min-height: 42px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgb(0 0 0 / 0.7);
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
    white-space: nowrap;
    box-shadow: 0 3px 14px rgb(0 0 0 / 0.32);
}

.setting-summary:focus-visible {
    background: rgb(0 0 0 / 0.8);
    outline: 2px solid rgb(255 255 255 / 0.8);
    outline-offset: -2px;
}

.setting-control[data-open="true"] .setting-summary {
    background: rgb(255 255 255 / 0.93);
    color: #261917;
}

/* A button that is a toggle as well as a list (the replay): pressed while
   what it started is running. */
.setting-summary[aria-pressed="true"] {
    background: rgb(255 255 255 / 0.85);
    color: #261917;
}

.setting-icon {
    width: 22px;
}

/* The icons (icons.js). */
.setting-icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

/* A choice with an icon before its name, or after it (a toggle whose
   icon is what it shows: the sound). */
.choice-with-icon {
    grid-template-columns: 22px max-content;
    gap: 8px;
    padding-left: 6px;
}

.choice-with-trailing-icon {
    grid-template-columns: max-content 22px;
    gap: 10px;
    padding-right: 6px;
}

.setting-options {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    display: grid;
    /* One column as wide as the widest choice, which the rest fill. */
    grid-template-columns: max-content;
    gap: 4px;
    padding: 6px;
    border-radius: 6px;
    background: rgb(0 0 0 / 0.75);
    box-shadow: 0 3px 14px rgb(0 0 0 / 0.32);
    transition: opacity 200ms ease, visibility 0s;
}

/* Closed, a list fades with its own choices (below); open, both are
   immediate, the choices sliding out to show themselves. */
.setting-control[data-open="false"] > .setting-options {
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 0s 280ms;
}

/* A list's choices open and close exactly as the toolbar's own icons do
   (.toolbar[data-collapsed], above): tucked away, each its own distance
   back towards the button that opened them, fading as they go, and out
   again the same way in reverse. Up the list for the ordinary kind; a
   row's (face, speed, background, board, in portrait: below) slide
   sideways instead, overridden in the portrait media query below. */
.setting-options > * {
    transition: transform 280ms ease-in-out, opacity 200ms ease, visibility 0s;
}

.setting-control[data-open="false"] > .setting-options > * {
    opacity: 0;
    visibility: hidden;
    transition: transform 280ms ease-in-out, opacity 200ms ease 80ms, visibility 0s 280ms;
}

.setting-control[data-open="false"] > .setting-options > *:nth-child(1) { transform: translateY(-36px); }
.setting-control[data-open="false"] > .setting-options > *:nth-child(2) { transform: translateY(-72px); }
.setting-control[data-open="false"] > .setting-options > *:nth-child(3) { transform: translateY(-108px); }
.setting-control[data-open="false"] > .setting-options > *:nth-child(4) { transform: translateY(-144px); }
.setting-control[data-open="false"] > .setting-options > *:nth-child(5) { transform: translateY(-180px); }
.setting-control[data-open="false"] > .setting-options > *:nth-child(6) { transform: translateY(-216px); }

/* A row's own choices can be dragged across (my-clock.js enableRowScrub)
   rather than tapped one at a time, so the row itself must not scroll or
   swipe-navigate as a finger crosses it. */
.setting-options-row {
    touch-action: none;
}

/* A row's choices (face, speed) wear an icon alone: square, like the
   toolbar's own buttons, rather than a name padded out to fit. */
.setting-options-row .choice-button {
    display: grid;
    place-items: center;
    width: 42px;
    min-width: 0;
    height: 42px;
    min-height: 0;
    padding: 0;
}

/* In portrait, a row's own list lies flat rather than dropping down: no
   panel of its own, no left inset, so it starts exactly under its
   button's place in the toolbar row above and, its icons the same size
   and spacing, lands each one under the button that follows it there
   (see createSettingControl, my-clock.js). Landscape keeps the plain
   column of icons the base .setting-options gives it, beside the button
   like any other list, since there is no row of icons above to line up
   under. */
@media (orientation: portrait) {
    .setting-options-row {
        display: flex;
        grid-template-columns: none;
        gap: 6px;
        padding: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    /* Sideways instead of up, same distances as the toolbar's own icons
       (48px, its width and gap together) since a row's choices are that
       size themselves. */
    .setting-control[data-open="false"] > .setting-options-row > *:nth-child(1) { transform: translateX(-48px); }
    .setting-control[data-open="false"] > .setting-options-row > *:nth-child(2) { transform: translateX(-96px); }
    .setting-control[data-open="false"] > .setting-options-row > *:nth-child(3) { transform: translateX(-144px); }
    .setting-control[data-open="false"] > .setting-options-row > *:nth-child(4) { transform: translateX(-192px); }
    .setting-control[data-open="false"] > .setting-options-row > *:nth-child(5) { transform: translateX(-240px); }
}

.choice-button {
    display: grid;
    width: 100%;
    min-width: 34px;
    min-height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    justify-items: start;
    align-items: center;
    /* The same dark the toolbar's own buttons wear, not a choice's own
       shade: only the one picked (aria-pressed) stands out, in white. */
    background: rgb(0 0 0 / 0.7);
    color: white;
    cursor: pointer;
    font: 700 13px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    white-space: nowrap;
}

.choice-button[aria-pressed="true"],
.setting-control[data-open="true"] > .submenu-button {
    background: rgb(255 255 255 / 0.93);
    color: #261917;
}

/* A submenu's button: its name, the current choice, and an arrow; and,
   where its choices have icons, the icon of the current one before them. */
.submenu-button {
    grid-template-columns: max-content max-content;
    gap: 8px;
}

.submenu-with-icon {
    grid-template-columns: 22px max-content max-content;
    padding-left: 6px;
}

.submenu-button .setting-value {
    font-weight: 400;
    opacity: 0.8;
}

.submenu-button .setting-value::after {
    content: " ›";
    font-weight: 700;
}

.choice-button:focus-visible {
    background: rgb(0 0 0 / 0.8);
    outline: 2px solid rgb(255 255 255 / 0.82);
    outline-offset: -2px;
}

.choice-button[aria-pressed="true"]:focus-visible {
    background: white;
}

.button:focus-visible {
    background: rgb(0 0 0 / 0.78);
    outline: 2px solid rgb(255 255 255 / 0.8);
    outline-offset: -2px;
}

/* The line of information: centred on the board's top edge (my-clock.js
   places it), sized to its words, which wrap if a game's name is too long
   for the screen. The icon, a replayed game's shelf, only when there is
   one. */
.info {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: calc(100vw - 20px);
    padding: 5px 12px;
    border-radius: 6px;
    background: rgb(0 0 0 / 0.7);
    box-shadow: 0 3px 14px rgb(0 0 0 / 0.32);
    transform: translateX(-50%);
    text-align: center;
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
    pointer-events: none;
}

.info .setting-icon {
    flex: none;
    width: 22px;
    height: 22px;
}

.info .setting-icon:empty {
    display: none;
}

/* The replay's bar: play or pause, and the speed to play at, next to the
   line of the game with a marker on it, above the board, or down its left
   side in landscape (see the media query below), on a panel of its own so
   it shows up against whatever table is under it. Below the toolbar and
   its open lists (z-index there is 20), so a list dropped open never finds
   the bar sitting over it. my-clock.js places it against the board;
   [hidden] takes it off the screen when no game is running, and, while one
   is, it fades with the toolbar's own row when that is tucked away or
   brought back (it is not itself a member of that row, so the CSS keys
   off the toolbar's data-collapsed rather than the usual rule). */
.replay-bar {
    position: fixed;
    z-index: 15;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 8px;
    background: rgb(0 0 0 / 0.55);
    box-shadow: 0 3px 14px rgb(0 0 0 / 0.32);
    color: white;
    transition: opacity 200ms ease, visibility 0s;
}

.toolbar[data-collapsed="true"] ~ #replay-bar {
    visibility: hidden;
    opacity: 0;
    transition: opacity 200ms ease, visibility 0s 200ms;
}

.replay-track {
    position: relative;
    flex: 1;
    align-self: stretch;
    min-width: 42px;
    min-height: 42px;
    cursor: pointer;
    touch-action: none;
}

.replay-track:focus-visible {
    outline: 2px solid rgb(255 255 255 / 0.8);
    outline-offset: -2px;
    border-radius: 6px;
}

.replay-line {
    position: absolute;
    top: 50%;
    right: 8px;
    left: 8px;
    height: 3px;
    border-radius: 2px;
    background: rgb(0 0 0 / 0.7);
    box-shadow: 0 1px 4px rgb(0 0 0 / 0.32);
    transform: translateY(-50%);
}

.replay-marker {
    position: absolute;
    top: 50%;
    left: calc(8px + (100% - 16px)*var(--progress, 0));
    width: 18px;
    height: 18px;
    border: 3px solid rgb(0 0 0 / 0.85);
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.4);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* A narrow phone: the row of buttons a little tighter, so it fits in one,
   and a row's own choices (above) shrink and close up the same way, to
   keep landing under the buttons that follow them. */
@media (orientation: portrait) and (max-width: 400px) {
    .toolbar,
    .toolbar-actions,
    .setting-options-row {
        gap: 4px;
    }

    .menu-toggle,
    .toolbar .setting-summary {
        width: 38px;
        min-height: 38px;
    }

    .menu-toggle {
        height: 38px;
    }

    .setting-options-row .choice-button {
        width: 38px;
        height: 38px;
    }

    /* The tighter row's own closed distances: 42px, its width and gap. */
    .setting-control[data-open="false"] > .setting-options-row > *:nth-child(1) { transform: translateX(-42px); }
    .setting-control[data-open="false"] > .setting-options-row > *:nth-child(2) { transform: translateX(-84px); }
    .setting-control[data-open="false"] > .setting-options-row > *:nth-child(3) { transform: translateX(-126px); }
    .setting-control[data-open="false"] > .setting-options-row > *:nth-child(4) { transform: translateX(-168px); }
    .setting-control[data-open="false"] > .setting-options-row > *:nth-child(5) { transform: translateX(-210px); }
}

/* Landscape: the board leaves the sides free, so the buttons run down the
   left, the toggle at the top, and a setting's choices open out to its
   right. */
@media (orientation: landscape) {
    .toolbar {
        flex-direction: column;
        align-items: flex-start;
        max-width: none;
        max-height: calc(100vh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }

    .toolbar-actions {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .toolbar[data-collapsed="true"] .toolbar-actions > * {
        transform: translateY(calc((var(--i) + 1) * -48px));
    }

    .replay-bar {
        flex-direction: column;
    }

    .replay-line {
        top: 8px;
        right: 50%;
        bottom: 8px;
        left: 50%;
        width: 3px;
        height: auto;
        transform: translateX(-50%);
    }

    .replay-marker {
        top: calc(8px + (100% - 16px)*var(--progress, 0));
        left: 50%;
    }
}

/* Hover styles only where something can hover: on iOS a :hover rule makes
   the first tap a hover and only the second a click. */
@media (hover: hover) {
    .setting-summary:hover {
        background: rgb(0 0 0 / 0.8);
        outline: 2px solid rgb(255 255 255 / 0.8);
        outline-offset: -2px;
    }

    .setting-control[data-open="true"] .setting-summary:hover {
        background: white;
    }

    .choice-button:hover {
        background: rgb(0 0 0 / 0.8);
        outline: 2px solid rgb(255 255 255 / 0.82);
        outline-offset: -2px;
    }

    .choice-button[aria-pressed="true"]:hover {
        background: white;
    }

    .button:hover {
        background: rgb(0 0 0 / 0.78);
        outline: 2px solid rgb(255 255 255 / 0.8);
        outline-offset: -2px;
    }
}

/* The about box: a panel in the dress of the setting lists. */
#about_box {
    position: absolute;
    /* Below the row of controls. */
    top: max(5%, calc(env(safe-area-inset-top) + 62px));
    left: 50%;
    z-index: 40;
    width: min(520px, calc(100vw - 32px));
    padding: min(20px, 5vw) min(24px, 5vw);
    border-radius: 6px;
    background: rgb(0 0 0 / 0.75);
    color: white;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    box-shadow: 0 3px 14px rgb(0 0 0 / 0.32);
    transform: translateX(-50%);
}

#about_box h1 {
    margin: 0 0 0.75rem;
    text-align: center;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
}

#about_box h1 strong {
    font-size: 58px;
    font-weight: 700;
    line-height: 0.8;
}

#about_box p {
    margin: 0 0 0.75rem;
}

.about-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }
}