.blue {
    --color: var(--blue);
    --light-color: var(--light-blue);
}
.red {
    --color: var(--red);
    --light-color: var(--light-red);
}

body {
    background: var(--light-primary);
}

body.blue {
    --primary: var(--blue);
    --light-primary: var(--light-blue);
}

body.red {
    --primary: var(--red);
    --light-primary: var(--light-red);
}

body.winner {
    --light-primary: white;
    --primary: black;
}
body.winner #board a {
    pointer-events: none;
}

#hexagon {
    overflow: visible;
}
#hexagon > polygon {
    fill: inherit;
    stroke: black;
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}
#hexagon > ellipse {
    fill: currentColor;
}

#board > svg > path {
    fill: var(--color);
    stroke-width: 1px;
    stroke: black;
    vector-effect: non-scaling-stroke;
}

a[id] {
    color: transparent;
    fill: var(--background);
    outline: none;
}
a[id]:hover, a[id]:active, a[id]:focus {
    color: var(--light-primary);
}
a[id].placed {
    color: var(--color);
}
a[id].swappable:hover, a[id].swappable:active, a[id].swappable:focus {
    animation: swap-hover 1s ease-in-out infinite alternate;
    fill: var(--light-primary);
}
a[id].path {
    fill: var(--light-color);
}
@keyframes swap-hover {
    0% {
        fill: var(--background);
    }
    100% {
        fill: var(--light-primary);
    }
}


#board {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(calc(var(--rotate) * 90deg)) scale(1, calc(1 - 2 * var(--rotate)));
    aspect-ratio: 1.73205080757 / 1;
}
#board > svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
#board > svg > g > a {
    outline: none;
}

@media (min-aspect-ratio: 1732 / 1000) {
  #board {
    height: 85vh;
    --rotate: 0;
  }
}
@media (max-aspect-ratio: 1732 / 1000) {
  #board {
    width: 85vh;
    --rotate: 1;
  }
}


body.swapped > #board > svg {
    animation: swap 1s ease-in-out;
    transform-origin: center;
}
@keyframes swap {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(1turn);
    }
}

body:not(.winner)::after {
    position: fixed;
    font-size: 8rem;
    font-family: ui-serif;
    font-weight: bold;
    color: var(--primary);
}
body:not(.winner).one::after {
    content: "1";
    left: 1rem;
    top: 1rem;
}
body:not(.winner).two::after {
    content: "2";
    right: 1rem;
    bottom: 1rem;
}


form {
    position: fixed;
    right: 1rem;
    top: 1rem;
    display: flex;
    align-items: center;
    opacity: 0.25;
}
body.winner > form, form:hover, form:focus-within {
    opacity: 1;
}
body.winner > form {
    animation: breathe 2s linear infinite alternate;
}
@keyframes breathe {
    0% {
        filter: drop-shadow(0 0 0.5rem var(--light-blue));
    }

    50% {
        filter: drop-shadow(0 0 0.5rem white);
    }

    100% {
        filter: drop-shadow(0 0 0.5rem var(--light-red));
    }
}
form > input {
    width: 3rem;
    border: 1px solid var(--primary);
    color: var(--primary);
    background: rgba(255, 255, 255, 0.5);
    font: inherit;
    font-weight: bold;
}
form > button {
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
}
form > button > svg {
    width: 1rem;
    height: 1rem;
    overflow: visible;
}
form > button > svg > path {
    fill: none;
    stroke: var(--primary);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}
form > button:is(:active, :focus, :hover) > svg > path {
    fill: var(--primary);
    stroke: black;
}

#links {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    display: flex;
    gap: 1rem;
    opacity: 0.25;
}
#links:hover {
    opacity: 1;
}
#links > a {
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary);
}
#links > a:hover {
    text-decoration: underline;
}