<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>井字棋</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
@layer reset {
*,
*:before,
*:after {
box-sizing: border-box;
}
img {
max-width: 100%;
}
}
html {
color-scheme: dark;
background-color: canvas;
background-color: light-dark(#fff, #1e1e1e);
background-color: light-dark(#fff, #121312);
padding: 1rem;
font-family: system-ui;
font-family: 'Poppins', sans-serif;
font-size: 1rem;
}
html body {
display: grid;
gap: 1.5rem;
color: light-dark(#333, #aaa);
color: light-dark(#444, #999);
max-width: min(40rem, 100%);
width: fit-content;
width: min(100%, 42ch);
margin: auto;
text-align: center;
padding-block: 0.5rem 0.5rem;
}
body {
overflow: auto;
position: relative;
display: grid;
place-content: center;
width: 10rem;
margin: auto;
gap: 1rem;
min-height: 90dvh;
text-align: center;
}
body > * {
transition: all 0.3s var(--back-out);
}
h1 {
--player-1-clr: light-dark(
oklch(0.5 0.15 200 / 1),
oklch(0.7 0.07 200 / 1)
);
--player-2-clr: light-dark(
oklch(0.75 0.2 20 / 1),
oklch(0.7 0.15 20 / 1)
);
--player-clr: var(--player-1-clr);
font-family: inherit;
text-align: center;
margin-block: 0;
padding-block: 0;
opacity: 0.6;
display: grid;
gap: 0.2rem;
position: relative;
color: light-dark(#000, #ccc);
}
body:has(.player-2s-turn) h1 {
--player-clr: var(--player-2-clr);
}
h1 small {
font-size: 0.5em;
font-weight: normal;
color: #888888;
color: light-dark(#555, #777);
}
.logo {
font-size: 18rem;
margin-block-end: -4.9rem;
font-weight: normal;
height: 6rem;
opacity: 0.07;
display: grid;
place-content: center;
user-select: none;
z-index: -1;
}
kbd {
font-size: 0.9em;
font-weight: bold;
border: solid 1px #88888880;
padding-inline: 0.5ch;
border-radius: 3px;
}
hr {
width: 100%;
opacity: 0.25;
}
h1 sup {
color: light-dark(#333, #ccc);
font-size: 1.2rem;
font-weight: normal;
display: inline-block;
display: block;
font-family: 'Georgia';
position: absolute;
right: -1ch;
top: 0;
user-select: none;
}
.description {
text-align: left;
line-height: 1.6;
line-height: 1.75;
margin: 0 0.25rem;
padding: 0;
padding-inline: 0.5rem;
position: relative;
display: block;
}
.description sup {
font-family: 'Georgia';
font-size: 1.5rem;
position: absolute;
top: 1.175ch;
left: -0.5ch;
}
.description em {
font-style: normal;
}
.adjective {
color: var(--player-clr);
font-family: sans-serif;
font-family: 'Poppins', sans-serif;
text-transform: uppercase;
font-weight: normal;
font-style: normal;
font-size: 0.75em;
font-size: 0.35em;
line-height: 1;
letter-spacing: 9.25px;
letter-spacing: 13.76px;
position: relative;
transition: color 0.3s var(--back-out);
width: fit-content;
margin-inline: auto;
padding-left: 0.75ch;
}
b,
i {
font-family: inherit;
font-weight: bold;
font-style: normal;
transition: all 0.3s var(--back-out);
display: inline-grid;
place-content: center;
line-height: 0.75em;
width: 0.75rem;
height: 0.75rem;
position: relative;
z-index: 1;
}
b {
color: var(--player-1-clr);
transform: scale(2) translatey(-0.2rem);
}
i {
color: var(--player-2-clr);
}
.fade-out {
opacity: 75%;
filter: grayscale(75%);
}
button {
cursor: pointer;
color: inherit;
color: light-dark(#000, #fff);
color: ButtonText;
background-color: light-dark(ButtonFace, #444);
border: transparent;
padding: 0.25rem 0.5rem;
border-radius: 4px;
translate: 0 3px;
width: max-content;
margin-inline: auto;
min-width: 17ch;
transition: opacity 0.6s var(--back-out), background-color 0.3s var(--back-out),
translate 0.6s var(--back-out);
}
button:hover {
background-color: #88888840;
}
button:focus-visible {
outline: dashed 1px currentcolor;
outline-offset: -3px;
}
button:active {
filter: scale(0.9);
}
table.xo:not(:has(b)) + footer button {
visibility: hidden;
opacity: 0;
translate: 0 -1rem;
pointer-events: none;
}
table.xo:has(b) + footer button {
visibility: unset;
opacity: 1;
translate: 0 0;
pointer-events: unset;
}
body {
--player-1-clr: light-dark(
oklch(0.5 0.15 200 / 1),
oklch(0.7 0.07 200 / 1)
);
--player-2-clr: light-dark(
oklch(0.75 0.2 20 / 1),
oklch(0.7 0.15 20 / 1)
);
--player-clr: var(--player-1-clr);
--shadow-color: 220 40% 2%;
--shadow-strength: 25%;
--inner-shadow-highlight: inset 0 -0.5px 0 0 #fff1, inset 0 0.5px 0 0
#0007;
--shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(
--shadow-strength
) + 2%)), 0 3px 2px -2px hsl(var(--shadow-color) / calc(var(
--shadow-strength
) + 3%)),
0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) +
3%)), 0 12px 10px -2px hsl(var(--shadow-color) / calc(var(
--shadow-strength
) + 4%)),
0 22px 18px -2px hsl(var(--shadow-color) / calc(var(
--shadow-strength
) + 5%)), 0 41px 33px -2px hsl(var(--shadow-color) / calc(var(
--shadow-strength
) + 6%)),
0 100px 80px -2px hsl(var(--shadow-color) / calc(var(
--shadow-strength
) + 7%));
--back-out: linear(
0 0%,
0.1935 4.37%,
0.3671 8.83%,
0.521 13.38%,
0.6557 18.04%,
0.7716 22.82%,
0.869 27.73%,
0.9488 32.81%,
1.0111 38.08%,
1.0512 42.81%,
1.0792 47.75%,
1.0953 52.97%,
1.1 58.55%,
1.0956 63.36%,
1.0838 68.73%,
1.0119 90.98%,
1.0029 95.69%,
1 100%
);
}
body:has(.player-2s-turn) {
--player-clr: var(--player-2-clr);
}
table.xo {
--player-1-clr: light-dark(
oklch(0.75 0.075 200 / 1),
oklch(0.7 0.07 200 / 1)
);
--_block-size: 7rem;
--_gap: 0.3rem;
--_cursor-1: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="filter:invert(1);"><text x="0" y="20" font-family="sans-serif" font-size="2rem" fill="black" style="font-weight: bold; font-style: normal; line-height: .75em; width: .75rem; height: .75rem; display: block;">⨯</text></svg>');
--_cursor-2: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="filter:invert(1);"><text x="0" y="20" font-family="sans-serif" font-size="1rem" fill="black" style="font-weight: bold; font-style: normal; line-height: .75em; width: .75rem; height: .75rem; display: block;">⭘</text></svg>');
width: 100%;
user-select: none;
border-spacing: var(--_gap);
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
position: relative;
margin-inline: auto;
overflow: hidden;
}
table.xo:not(.player-2s-turn) {
cursor: var(--_cursor-1) 4 16, auto;
}
table.xo.player-2s-turn {
cursor: var(--_cursor-2) 4 16, auto;
}
table.xo:active td {
transition: opacity 0.6s linear;
}
table.xo:not(:active):has(td:focus-visible) {
cursor: default;
}
table.xo td:has(:is(b, i)) {
cursor: default;
}
table.xo::before {
content: '';
background: #000;
background: light-dark(#222, transparent);
position: absolute;
inset: 0;
inset: var(--_gap) 0 0 0;
pointer-events: none;
z-index: -1;
opacity: 1;
}
table.xo td {
position: relative;
background: #000;
background: light-dark(#333, #000);
padding: 1rem;
border: solid 1px #88888899;
border-radius: 2px;
height: var(--_block-size);
width: var(--_block-size);
place-content: center;
transition: border 0.6s var(--back-out);
}
@starting-style {
table.xo td {
border-color: transparent;
}
}
table.xo td:not(:has(:is(b, i))):hover {
background-attachment: fixed;
background-image: radial-gradient(
circle at var(--x, 0) var(--y, 0),
rgba(255, 255, 255, 0.075),
rgba(255, 255, 255, 0.025) 7.5rem
);
}
table.xo td::after {
content: '';
position: absolute;
inset: -2px;
border-radius: inherit;
background-attachment: fixed;
background-color: #000;
background-image: radial-gradient(
circle at var(--x, 0) var(--y, 0),
rgba(255, 255, 255, 0.995),
transparent 5rem
);
pointer-events: none;
z-index: -1;
}
table.xo td:has(:is(b, i))::after {
background-image: radial-gradient(
circle at var(--x, 0) var(--y, 0),
rgba(255, 255, 255, 0.95),
transparent 3rem
);
}
table.xo::after {
background: linear-gradient(
to var(--_to),
transparent calc(var(--_distance) - 1px),
var(--_color) calc(var(--_distance) - 1px),
var(--_color) calc(var(--_distance) + 1px),
transparent calc(var(--_distance) + 1px)
);
display: block;
pointer-events: none;
display: none;
content: '';
position: absolute;
inset: 0.5rem;
inset: calc(var(--_gap) * 4);
border-radius: 1rem;
z-index: 1;
opacity: 1;
}
table.xo td {
outline-offset: -1.25rem;
}
table.xo td:focus-visible {
outline: dashed 1px var(--player-1-clr);
}
table.xo.player-2s-turn td:focus-visible {
outline: dashed 1px var(--player-2-clr);
}
table.xo td footer {
position: absolute;
bottom: var(--_gap);
left: 50%;
translate: -50% 0;
display: flex;
}
button .new-game {
display: none;
}
footer .win {
display: none;
line-height: 1;
}
*:has(> table.xo) .turn {
--repeat: 1;
}
*:has(> table.xo) .turn > span {
display: block;
font-style: italic;
}
*:has(> table.xo) .turn > span > span {
color: #888;
}
*:has(> table.xo) .turn .player-1 {
color: var(--player-1-clr);
display: block;
line-height: 1;
}
*:has(> table.xo) .turn .player-2 {
color: var(--player-2-clr);
display: none;
line-height: 1;
}
*:has(> table.xo.player-2s-turn) .turn {
display: grid;
place-content: center;
}
*:has(> table.xo.player-2s-turn) .turn .player-1 {
display: none;
}
*:has(> table.xo.player-2s-turn) .turn .player-2 {
display: block;
}
footer {
--player-clr: var(--player-2-clr);
display: grid;
gap: 1rem;
}
.asterisk {
color: var(--player-2-clr);
}
body:has(.player-2s-turn) :is(h1, footer) .asterisk {
color: var(--player-1-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)) {
pointer-events: none;
margin-block-end: -0.125rem;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))
+ footer
button
.new-game {
display: unset;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))
+ footer
button
.reset {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))
+ footer
button:has(.new-game) {
filter: invert(1);
letter-spacing: 1px;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))
+ footer
button:has(.new-game):hover {
background-color: #aaa;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))
~ footer
.player-1 {
display: block;
color: var(--player-2-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)).player-2s-turn
~ footer
span.player-1 {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)).player-2s-turn
~ footer
span.player-2 {
display: block;
color: var(--player-1-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))
~ footer
.turn {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))
~ .pyro {
display: block;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))
~ .ttt-winner {
display: grid;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))::after {
display: block !important;
--_color: light-dark(
oklch(0.5 0.15 200 / 1),
oklch(0.7 0.07 200 / 0.75)
);
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out))::before {
inset: var(--_gap) 0;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(1) td:nth-child(2) b):has(
tr:nth-child(1) td:nth-child(3) b
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(2) td:nth-child(3) b
)::after {
--_distance: calc(50% - 1px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(1) b
):has(tr:nth-child(3) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(1) b):has(
tr:nth-child(3) td:nth-child(1) b
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(2) b
)::after {
--_distance: 50%;
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) b
):has(tr:nth-child(2) td:nth-child(3) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: 50%;
--_to: top right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(1) b
)::after {
--_distance: 50%;
--_to: top left;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)) {
pointer-events: none;
margin-block-end: -0.125rem;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))
+ footer
button
.new-game {
display: unset;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))
+ footer
button
.reset {
display: none;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))
+ footer
button:has(.new-game) {
filter: invert(1);
letter-spacing: 1px;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))
+ footer
button:has(.new-game):hover {
background-color: #aaa;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))
~ footer
.player-1 {
display: block;
color: var(--player-2-clr);
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)).player-2s-turn
~ footer
span.player-1 {
display: none;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)).player-2s-turn
~ footer
span.player-2 {
display: block;
color: var(--player-1-clr);
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))
~ footer
.turn {
display: none;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))
~ .pyro {
display: block;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))
~ .ttt-winner {
display: grid;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))::after {
display: block !important;
--_color: light-dark(
oklch(0.5 0.15 200 / 1),
oklch(0.7 0.07 200 / 0.75)
);
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out))::before {
inset: var(--_gap) 0;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(1) td:nth-child(2) b):has(
tr:nth-child(1) td:nth-child(3) b
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
--_to: bottom;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(2) td:nth-child(3) b
)::after {
--_distance: calc(50% - 1px);
--_to: bottom;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(1) b
):has(tr:nth-child(3) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
--_to: bottom;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(1) b):has(
tr:nth-child(3) td:nth-child(1) b
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(2) b
)::after {
--_distance: 50%;
--_to: right;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) b
):has(tr:nth-child(2) td:nth-child(3) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: 50%;
--_to: top right;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(1) b
)::after {
--_distance: 50%;
--_to: top left;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)) {
pointer-events: none;
margin-block-end: -0.125rem;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
+ footer
button
.new-game {
display: unset;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
+ footer
button
.reset {
display: none;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
+ footer
button:has(.new-game) {
filter: invert(1);
letter-spacing: 1px;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
+ footer
button:has(.new-game):hover {
background-color: #aaa;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
~ footer
.player-1 {
display: block;
color: var(--player-2-clr);
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)).player-2s-turn
~ footer
span.player-1 {
display: none;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)).player-2s-turn
~ footer
span.player-2 {
display: block;
color: var(--player-1-clr);
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
~ footer
.turn {
display: none;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
~ .pyro {
display: block;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
~ .ttt-winner {
display: grid;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))::after {
display: block !important;
--_color: light-dark(
oklch(0.5 0.15 200 / 1),
oklch(0.7 0.07 200 / 0.75)
);
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))::before {
inset: var(--_gap) 0;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(1) td:nth-child(2) b):has(
tr:nth-child(1) td:nth-child(3) b
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
--_to: bottom;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(2) td:nth-child(3) b
)::after {
--_distance: calc(50% - 1px);
--_to: bottom;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(1) b
):has(tr:nth-child(3) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
--_to: bottom;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(1) b):has(
tr:nth-child(3) td:nth-child(1) b
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(2) b
)::after {
--_distance: 50%;
--_to: right;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) b
):has(tr:nth-child(2) td:nth-child(3) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: 50%;
--_to: top right;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(1) b
)::after {
--_distance: 50%;
--_to: top left;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)) {
pointer-events: none;
margin-block-end: -0.125rem;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
+ footer
button
.new-game {
display: unset;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
+ footer
button
.reset {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
+ footer
button:has(.new-game) {
filter: invert(1);
letter-spacing: 1px;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
+ footer
button:has(.new-game):hover {
background-color: #aaa;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
~ footer
.player-1 {
display: block;
color: var(--player-2-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)).player-2s-turn
~ footer
span.player-1 {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)).player-2s-turn
~ footer
span.player-2 {
display: block;
color: var(--player-1-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
~ footer
.turn {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
~ .pyro {
display: block;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
~ .ttt-winner {
display: grid;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))::after {
display: block !important;
--_color: light-dark(
oklch(0.5 0.15 200 / 1),
oklch(0.7 0.07 200 / 0.75)
);
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))::before {
inset: var(--_gap) 0;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(1) td:nth-child(2) b):has(
tr:nth-child(1) td:nth-child(3) b
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(2) td:nth-child(3) b
)::after {
--_distance: calc(50% - 1px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(1) b
):has(tr:nth-child(3) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(1) b):has(
tr:nth-child(3) td:nth-child(1) b
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(2) b
)::after {
--_distance: 50%;
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) b
):has(tr:nth-child(2) td:nth-child(3) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: 50%;
--_to: top right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(1) b
)::after {
--_distance: 50%;
--_to: top left;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)) {
pointer-events: none;
margin-block-end: -0.125rem;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out))
+ footer
button
.new-game {
display: unset;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out))
+ footer
button
.reset {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out))
+ footer
button:has(.new-game) {
filter: invert(1);
letter-spacing: 1px;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out))
+ footer
button:has(.new-game):hover {
background-color: #aaa;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out))
~ footer
.player-1 {
display: block;
color: var(--player-2-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)).player-2s-turn
~ footer
span.player-1 {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)).player-2s-turn
~ footer
span.player-2 {
display: block;
color: var(--player-1-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out))
~ footer
.turn {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out))
~ .pyro {
display: block;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out))
~ .ttt-winner {
display: grid;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out))::after {
display: block !important;
--_color: light-dark(
oklch(0.5 0.15 200 / 1),
oklch(0.7 0.07 200 / 0.75)
);
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out))::before {
inset: var(--_gap) 0;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(1) td:nth-child(2) b):has(
tr:nth-child(1) td:nth-child(3) b
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(2) td:nth-child(3) b
)::after {
--_distance: calc(50% - 1px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(1) b
):has(tr:nth-child(3) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(1) b):has(
tr:nth-child(3) td:nth-child(1) b
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(2) b
)::after {
--_distance: 50%;
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) b
):has(tr:nth-child(2) td:nth-child(3) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: 50%;
--_to: top right;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(1) b
)::after {
--_distance: 50%;
--_to: top left;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)) {
pointer-events: none;
margin-block-end: -0.125rem;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
+ footer
button
.new-game {
display: unset;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
+ footer
button
.reset {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
+ footer
button:has(.new-game) {
filter: invert(1);
letter-spacing: 1px;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
+ footer
button:has(.new-game):hover {
background-color: #aaa;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
~ footer
.player-1 {
display: block;
color: var(--player-2-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)).player-2s-turn
~ footer
span.player-1 {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)).player-2s-turn
~ footer
span.player-2 {
display: block;
color: var(--player-1-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
~ footer
.turn {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
~ .pyro {
display: block;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
~ .ttt-winner {
display: grid;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))::after {
display: block !important;
--_color: light-dark(
oklch(0.5 0.15 200 / 1),
oklch(0.7 0.07 200 / 0.75)
);
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))::before {
inset: var(--_gap) 0;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(1) td:nth-child(2) b):has(
tr:nth-child(1) td:nth-child(3) b
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(2) td:nth-child(3) b
)::after {
--_distance: calc(50% - 1px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(1) b
):has(tr:nth-child(3) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(1) b):has(
tr:nth-child(3) td:nth-child(1) b
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(2) b
)::after {
--_distance: 50%;
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) b
):has(tr:nth-child(2) td:nth-child(3) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: 50%;
--_to: top right;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(1) b
)::after {
--_distance: 50%;
--_to: top left;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)) {
pointer-events: none;
margin-block-end: -0.125rem;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
+ footer
button
.new-game {
display: unset;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
+ footer
button
.reset {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
+ footer
button:has(.new-game) {
filter: invert(1);
letter-spacing: 1px;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
+ footer
button:has(.new-game):hover {
background-color: #aaa;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
~ footer
.player-1 {
display: block;
color: var(--player-2-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)).player-2s-turn
~ footer
span.player-1 {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)).player-2s-turn
~ footer
span.player-2 {
display: block;
color: var(--player-1-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
~ footer
.turn {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
~ .pyro {
display: block;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))
~ .ttt-winner {
display: grid;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))::after {
display: block !important;
--_color: light-dark(
oklch(0.5 0.15 200 / 1),
oklch(0.7 0.07 200 / 0.75)
);
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out))::before {
inset: var(--_gap) 0;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(1) td:nth-child(2) b):has(
tr:nth-child(1) td:nth-child(3) b
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(2) td:nth-child(3) b
)::after {
--_distance: calc(50% - 1px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(1) b
):has(tr:nth-child(3) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(1) b):has(
tr:nth-child(3) td:nth-child(1) b
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(2) b
)::after {
--_distance: 50%;
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) b
):has(tr:nth-child(2) td:nth-child(3) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: 50%;
--_to: top right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(1) b
)::after {
--_distance: 50%;
--_to: top left;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)) {
pointer-events: none;
margin-block-end: -0.125rem;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
+ footer
button
.new-game {
display: unset;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
+ footer
button
.reset {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
+ footer
button:has(.new-game) {
filter: invert(1);
letter-spacing: 1px;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
+ footer
button:has(.new-game):hover {
background-color: #aaa;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
~ footer
.player-1 {
display: block;
color: var(--player-2-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)).player-2s-turn
~ footer
span.player-1 {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)).player-2s-turn
~ footer
span.player-2 {
display: block;
color: var(--player-1-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
~ footer
.turn {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
~ .pyro {
display: block;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))
~ .ttt-winner {
display: grid;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))::after {
display: block !important;
--_color: light-dark(
oklch(0.5 0.15 200 / 1),
oklch(0.7 0.07 200 / 0.75)
);
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out))::before {
inset: var(--_gap) 0;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(1) td:nth-child(2) b):has(
tr:nth-child(1) td:nth-child(3) b
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(2) td:nth-child(3) b
)::after {
--_distance: calc(50% - 1px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(1) b
):has(tr:nth-child(3) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(1) b):has(
tr:nth-child(3) td:nth-child(1) b
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(2) b
)::after {
--_distance: 50%;
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) b
):has(tr:nth-child(2) td:nth-child(3) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(3) b
)::after {
--_distance: 50%;
--_to: top right;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) b:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) b:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) b:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) b
):has(tr:nth-child(2) td:nth-child(2) b):has(
tr:nth-child(3) td:nth-child(1) b
)::after {
--_distance: 50%;
--_to: top left;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)) {
pointer-events: none;
margin-block-end: -0.125rem;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out))
+ footer
button
.new-game {
display: unset;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out))
+ footer
button
.reset {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out))
+ footer
button:has(.new-game) {
filter: invert(1);
letter-spacing: 1px;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out))
+ footer
button:has(.new-game):hover {
background-color: #aaa;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out))
~ footer
.player-1 {
display: block;
color: var(--player-2-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)).player-2s-turn
~ footer
span.player-1 {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)).player-2s-turn
~ footer
span.player-2 {
display: block;
color: var(--player-1-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out))
~ footer
.turn {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out))
~ .pyro {
display: block;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out))
~ .ttt-winner {
display: grid;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out))::after {
display: block !important;
--_color: light-dark(oklch(0.75 0.2 20 / 1), oklch(0.7 0.15 20 / 0.75));
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out))::before {
inset: var(--_gap) 0;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(1) td:nth-child(2) i):has(
tr:nth-child(1) td:nth-child(3) i
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(2) td:nth-child(3) i
)::after {
--_distance: calc(50% - 1px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(1) i
):has(tr:nth-child(3) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(1) i):has(
tr:nth-child(3) td:nth-child(1) i
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(2) i
)::after {
--_distance: 50%;
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) i
):has(tr:nth-child(2) td:nth-child(3) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: 50%;
--_to: top right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(1) i
)::after {
--_distance: 50%;
--_to: top left;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)) {
pointer-events: none;
margin-block-end: -0.125rem;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))
+ footer
button
.new-game {
display: unset;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))
+ footer
button
.reset {
display: none;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))
+ footer
button:has(.new-game) {
filter: invert(1);
letter-spacing: 1px;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))
+ footer
button:has(.new-game):hover {
background-color: #aaa;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))
~ footer
.player-1 {
display: block;
color: var(--player-2-clr);
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)).player-2s-turn
~ footer
span.player-1 {
display: none;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)).player-2s-turn
~ footer
span.player-2 {
display: block;
color: var(--player-1-clr);
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))
~ footer
.turn {
display: none;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))
~ .pyro {
display: block;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))
~ .ttt-winner {
display: grid;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))::after {
display: block !important;
--_color: light-dark(oklch(0.75 0.2 20 / 1), oklch(0.7 0.15 20 / 0.75));
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out))::before {
inset: var(--_gap) 0;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(1) td:nth-child(2) i):has(
tr:nth-child(1) td:nth-child(3) i
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
--_to: bottom;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(2) td:nth-child(3) i
)::after {
--_distance: calc(50% - 1px);
--_to: bottom;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(1) i
):has(tr:nth-child(3) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
--_to: bottom;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(1) i):has(
tr:nth-child(3) td:nth-child(1) i
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(2) i
)::after {
--_distance: 50%;
--_to: right;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) i
):has(tr:nth-child(2) td:nth-child(3) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: 50%;
--_to: top right;
}
table.xo:has(tr:nth-child(2) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(2) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(1) i
)::after {
--_distance: 50%;
--_to: top left;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)) {
pointer-events: none;
margin-block-end: -0.125rem;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
+ footer
button
.new-game {
display: unset;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
+ footer
button
.reset {
display: none;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
+ footer
button:has(.new-game) {
filter: invert(1);
letter-spacing: 1px;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
+ footer
button:has(.new-game):hover {
background-color: #aaa;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
~ footer
.player-1 {
display: block;
color: var(--player-2-clr);
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)).player-2s-turn
~ footer
span.player-1 {
display: none;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)).player-2s-turn
~ footer
span.player-2 {
display: block;
color: var(--player-1-clr);
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
~ footer
.turn {
display: none;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
~ .pyro {
display: block;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
~ .ttt-winner {
display: grid;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))::after {
display: block !important;
--_color: light-dark(oklch(0.75 0.2 20 / 1), oklch(0.7 0.15 20 / 0.75));
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))::before {
inset: var(--_gap) 0;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(1) td:nth-child(2) i):has(
tr:nth-child(1) td:nth-child(3) i
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
--_to: bottom;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(2) td:nth-child(3) i
)::after {
--_distance: calc(50% - 1px);
--_to: bottom;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(1) i
):has(tr:nth-child(3) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
--_to: bottom;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(1) i):has(
tr:nth-child(3) td:nth-child(1) i
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(2) i
)::after {
--_distance: 50%;
--_to: right;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) i
):has(tr:nth-child(2) td:nth-child(3) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: 50%;
--_to: top right;
}
table.xo:has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(1) i
)::after {
--_distance: 50%;
--_to: top left;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)) {
pointer-events: none;
margin-block-end: -0.125rem;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
+ footer
button
.new-game {
display: unset;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
+ footer
button
.reset {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
+ footer
button:has(.new-game) {
filter: invert(1);
letter-spacing: 1px;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
+ footer
button:has(.new-game):hover {
background-color: #aaa;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
~ footer
.player-1 {
display: block;
color: var(--player-2-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)).player-2s-turn
~ footer
span.player-1 {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)).player-2s-turn
~ footer
span.player-2 {
display: block;
color: var(--player-1-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
~ footer
.turn {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
~ .pyro {
display: block;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
~ .ttt-winner {
display: grid;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))::after {
display: block !important;
--_color: light-dark(oklch(0.75 0.2 20 / 1), oklch(0.7 0.15 20 / 0.75));
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))::before {
inset: var(--_gap) 0;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(1) td:nth-child(2) i):has(
tr:nth-child(1) td:nth-child(3) i
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(2) td:nth-child(3) i
)::after {
--_distance: calc(50% - 1px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(1) i
):has(tr:nth-child(3) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(1) i):has(
tr:nth-child(3) td:nth-child(1) i
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(2) i
)::after {
--_distance: 50%;
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) i
):has(tr:nth-child(2) td:nth-child(3) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: 50%;
--_to: top right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(1) i
)::after {
--_distance: 50%;
--_to: top left;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)) {
pointer-events: none;
margin-block-end: -0.125rem;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out))
+ footer
button
.new-game {
display: unset;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out))
+ footer
button
.reset {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out))
+ footer
button:has(.new-game) {
filter: invert(1);
letter-spacing: 1px;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out))
+ footer
button:has(.new-game):hover {
background-color: #aaa;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out))
~ footer
.player-1 {
display: block;
color: var(--player-2-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)).player-2s-turn
~ footer
span.player-1 {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)).player-2s-turn
~ footer
span.player-2 {
display: block;
color: var(--player-1-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out))
~ footer
.turn {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out))
~ .pyro {
display: block;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out))
~ .ttt-winner {
display: grid;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out))::after {
display: block !important;
--_color: light-dark(oklch(0.75 0.2 20 / 1), oklch(0.7 0.15 20 / 0.75));
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out))::before {
inset: var(--_gap) 0;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(1) td:nth-child(2) i):has(
tr:nth-child(1) td:nth-child(3) i
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(2) td:nth-child(3) i
)::after {
--_distance: calc(50% - 1px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(1) i
):has(tr:nth-child(3) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(1) i):has(
tr:nth-child(3) td:nth-child(1) i
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(2) i
)::after {
--_distance: 50%;
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) i
):has(tr:nth-child(2) td:nth-child(3) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: 50%;
--_to: top right;
}
table.xo:has(tr:nth-child(1) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(2) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(1) i
)::after {
--_distance: 50%;
--_to: top left;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)) {
pointer-events: none;
margin-block-end: -0.125rem;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
+ footer
button
.new-game {
display: unset;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
+ footer
button
.reset {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
+ footer
button:has(.new-game) {
filter: invert(1);
letter-spacing: 1px;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
+ footer
button:has(.new-game):hover {
background-color: #aaa;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
~ footer
.player-1 {
display: block;
color: var(--player-2-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)).player-2s-turn
~ footer
span.player-1 {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)).player-2s-turn
~ footer
span.player-2 {
display: block;
color: var(--player-1-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
~ footer
.turn {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
~ .pyro {
display: block;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
~ .ttt-winner {
display: grid;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))::after {
display: block !important;
--_color: light-dark(oklch(0.75 0.2 20 / 1), oklch(0.7 0.15 20 / 0.75));
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))::before {
inset: var(--_gap) 0;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(1) td:nth-child(2) i):has(
tr:nth-child(1) td:nth-child(3) i
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(2) td:nth-child(3) i
)::after {
--_distance: calc(50% - 1px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(1) i
):has(tr:nth-child(3) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(1) i):has(
tr:nth-child(3) td:nth-child(1) i
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(2) i
)::after {
--_distance: 50%;
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) i
):has(tr:nth-child(2) td:nth-child(3) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: 50%;
--_to: top right;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(3) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(1) i
)::after {
--_distance: 50%;
--_to: top left;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)) {
pointer-events: none;
margin-block-end: -0.125rem;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
+ footer
button
.new-game {
display: unset;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
+ footer
button
.reset {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
+ footer
button:has(.new-game) {
filter: invert(1);
letter-spacing: 1px;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
+ footer
button:has(.new-game):hover {
background-color: #aaa;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
~ footer
.player-1 {
display: block;
color: var(--player-2-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)).player-2s-turn
~ footer
span.player-1 {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)).player-2s-turn
~ footer
span.player-2 {
display: block;
color: var(--player-1-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
~ footer
.turn {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
~ .pyro {
display: block;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))
~ .ttt-winner {
display: grid;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))::after {
display: block !important;
--_color: light-dark(oklch(0.75 0.2 20 / 1), oklch(0.7 0.15 20 / 0.75));
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out))::before {
inset: var(--_gap) 0;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(1) td:nth-child(2) i):has(
tr:nth-child(1) td:nth-child(3) i
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(2) td:nth-child(3) i
)::after {
--_distance: calc(50% - 1px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(1) i
):has(tr:nth-child(3) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(1) i):has(
tr:nth-child(3) td:nth-child(1) i
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(2) i
)::after {
--_distance: 50%;
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) i
):has(tr:nth-child(2) td:nth-child(3) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: 50%;
--_to: top right;
}
table.xo:has(tr:nth-child(1) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(1) i
)::after {
--_distance: 50%;
--_to: top left;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)) {
pointer-events: none;
margin-block-end: -0.125rem;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
+ footer
button
.new-game {
display: unset;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
+ footer
button
.reset {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
+ footer
button:has(.new-game) {
filter: invert(1);
letter-spacing: 1px;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
+ footer
button:has(.new-game):hover {
background-color: #aaa;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
~ footer
.player-1 {
display: block;
color: var(--player-2-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)).player-2s-turn
~ footer
span.player-1 {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)).player-2s-turn
~ footer
span.player-2 {
display: block;
color: var(--player-1-clr);
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
~ footer
.turn {
display: none;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
~ .pyro {
display: block;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))
~ .ttt-winner {
display: grid;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))::after {
display: block !important;
--_color: light-dark(oklch(0.75 0.2 20 / 1), oklch(0.7 0.15 20 / 0.75));
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out))::before {
inset: var(--_gap) 0;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(1) td:nth-child(2) i):has(
tr:nth-child(1) td:nth-child(3) i
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) + 0px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(2) td:nth-child(3) i
)::after {
--_distance: calc(50% - 1px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(3) td:nth-child(1) i
):has(tr:nth-child(3) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) - 2px);
--_to: bottom;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(1) i):has(
tr:nth-child(3) td:nth-child(1) i
)::after {
--_distance: calc(16.66% - (2 * var(--_gap)) - 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(2) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(2) i
)::after {
--_distance: 50%;
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) i
):has(tr:nth-child(2) td:nth-child(3) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: calc(83.33% + (2 * var(--_gap)) + 1.5px);
--_to: right;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(1) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(3) i
)::after {
--_distance: 50%;
--_to: top right;
}
table.xo:has(tr:nth-child(1) td:nth-child(3) i:not(.fade-out)):has(
tr:nth-child(2) td:nth-child(2) i:not(.fade-out)
):has(tr:nth-child(3) td:nth-child(1) i:not(.fade-out)):has(
tr:nth-child(1) td:nth-child(3) i
):has(tr:nth-child(2) td:nth-child(2) i):has(
tr:nth-child(3) td:nth-child(1) i
)::after {
--_distance: 50%;
--_to: top left;
}
.xo .remaining-life {
position: absolute;
top: 0.5ch;
left: 0.75ch;
z-index: 1;
}
.remaining-life {
white-space: nowrap;
display: flex;
gap: 0.5ch;
align-items: center;
justify-content: center;
background: #88888830;
background: light-dark(#88888840, #88888825);
border: transparent;
border-radius: 5px;
padding-inline: 0.7ch;
padding-block: 0.25ch;
line-height: 1rem;
}
.circle {
width: 0.35rem;
height: 0.35rem;
border-radius: 50%;
margin: 1px;
display: inline-block;
}
.outlined {
background-color: light-dark(#888888a0, #444444a0);
border: 1px solid #4caf50;
border-color: #88888880;
}
.filled {
background-color: #4caf50a0;
background-color: light-dark(#4caf50aa, #4caf5080);
}
.rubberband {
--duration: 3s;
--repeat: 3;
animation: rubberband var(--duration) ease-in-out var(--repeat);
}
@keyframes rubberband {
0% {
transform: scaleX(1);
}
19.8% {
transform: scale3d(1.125, 0.875, 1);
}
26.4% {
transform: scale3d(0.875, 1.125, 1);
}
33% {
transform: scale3d(1.075, 0.925, 1);
}
42.9% {
transform: scale3d(0.975, 1.025, 1);
}
49.5% {
transform: scale3d(1.025, 0.975, 1);
}
66% {
transform: scaleX(1);
}
}
@layer pyro {
body {
margin: 0;
padding: 0;
}
.pyro > .before,
.pyro > .after {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
0 0 #fff, 0 0 #fff, 0 0 #fff;
-moz-animation: 1s bang ease-out infinite backwards, 1s gravity
ease-in infinite backwards, 5s position linear infinite backwards;
-webkit-animation: 1s bang ease-out infinite backwards, 1s gravity
ease-in infinite backwards, 5s position linear infinite backwards;
-o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in
infinite backwards, 5s position linear infinite backwards;
-ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in
infinite backwards, 5s position linear infinite backwards;
animation: 1s bang ease-out infinite backwards, 1s gravity ease-in
infinite backwards, 5s position linear infinite backwards;
}
.pyro > .after {
-moz-animation-delay: 1.25s, 1.25s, 1.25s;
-webkit-animation-delay: 1.25s, 1.25s, 1.25s;
-o-animation-delay: 1.25s, 1.25s, 1.25s;
-ms-animation-delay: 1.25s, 1.25s, 1.25s;
animation-delay: 1.25s, 1.25s, 1.25s;
-moz-animation-duration: 1.25s, 1.25s, 6.25s;
-webkit-animation-duration: 1.25s, 1.25s, 6.25s;
-o-animation-duration: 1.25s, 1.25s, 6.25s;
-ms-animation-duration: 1.25s, 1.25s, 6.25s;
animation-duration: 1.25s, 1.25s, 6.25s;
}
@-webkit-keyframes bang {
to {
box-shadow: -62px -219.6666666667px blue, 89px 73.3333333333px
#11ff00, -171px 3.3333333333px #99ff00, -232px -25.6666666667px
#ff00ae, 73px -345.6666666667px #0091ff, 59px -278.6666666667px
#ddff00, 142px -395.6666666667px #00ff9d, 113px -236.6666666667px
#002fff, -94px -392.6666666667px #00ff2f, -86px -132.6666666667px
#006fff, -14px -3.6666666667px #ff0080, -108px -139.6666666667px
yellow, 247px -256.6666666667px #00ff2f, 199px -191.6666666667px
#bf00ff, -6px 16.3333333333px #f700ff, -169px -183.6666666667px
#00ffc8, -188px -152.6666666667px #1eff00, 62px -332.6666666667px
#1500ff, 38px -369.6666666667px #0022ff, -155px -5.6666666667px
#ff0077, -45px -242.6666666667px #00ff1e, 159px -203.6666666667px
#0011ff, -117px -210.6666666667px #ff4000, -12px -292.6666666667px
#ff0015, -92px 44.3333333333px #ffbf00, 240px -295.6666666667px
#00d0ff, 138px -382.6666666667px #c8ff00, 172px -178.6666666667px
#ff0048, 143px -343.6666666667px #ffae00, -19px 27.3333333333px
#ff00d0, 189px 45.3333333333px #eeff00, 151px -387.6666666667px
#d500ff, 162px -67.6666666667px #00ffa2, -34px -360.6666666667px
#ffe600, 179px -411.6666666667px #0066ff, 125px -123.6666666667px
#ccff00, -111px 54.3333333333px #00aeff, -195px -16.6666666667px
#2200ff, 118px 34.3333333333px #ff003c, -120px -303.6666666667px
#0900ff, -62px -399.6666666667px #33ff00, -84px -396.6666666667px
#ff004d, -204px 33.3333333333px #00ff55, -58px -248.6666666667px
#eaff00, 19px -8.6666666667px #ff4800, -111px -266.6666666667px
#3cff00, -132px -221.6666666667px #0044ff, 181px -35.6666666667px
#b700ff, -229px -47.6666666667px #00ffc4, -174px -70.6666666667px
#c4ff00, 146px -139.6666666667px #4000ff;
}
}
@-moz-keyframes bang {
to {
box-shadow: -62px -219.6666666667px blue, 89px 73.3333333333px
#11ff00, -171px 3.3333333333px #99ff00, -232px -25.6666666667px
#ff00ae, 73px -345.6666666667px #0091ff, 59px -278.6666666667px
#ddff00, 142px -395.6666666667px #00ff9d, 113px -236.6666666667px
#002fff, -94px -392.6666666667px #00ff2f, -86px -132.6666666667px
#006fff, -14px -3.6666666667px #ff0080, -108px -139.6666666667px
yellow, 247px -256.6666666667px #00ff2f, 199px -191.6666666667px
#bf00ff, -6px 16.3333333333px #f700ff, -169px -183.6666666667px
#00ffc8, -188px -152.6666666667px #1eff00, 62px -332.6666666667px
#1500ff, 38px -369.6666666667px #0022ff, -155px -5.6666666667px
#ff0077, -45px -242.6666666667px #00ff1e, 159px -203.6666666667px
#0011ff, -117px -210.6666666667px #ff4000, -12px -292.6666666667px
#ff0015, -92px 44.3333333333px #ffbf00, 240px -295.6666666667px
#00d0ff, 138px -382.6666666667px #c8ff00, 172px -178.6666666667px
#ff0048, 143px -343.6666666667px #ffae00, -19px 27.3333333333px
#ff00d0, 189px 45.3333333333px #eeff00, 151px -387.6666666667px
#d500ff, 162px -67.6666666667px #00ffa2, -34px -360.6666666667px
#ffe600, 179px -411.6666666667px #0066ff, 125px -123.6666666667px
#ccff00, -111px 54.3333333333px #00aeff, -195px -16.6666666667px
#2200ff, 118px 34.3333333333px #ff003c, -120px -303.6666666667px
#0900ff, -62px -399.6666666667px #33ff00, -84px -396.6666666667px
#ff004d, -204px 33.3333333333px #00ff55, -58px -248.6666666667px
#eaff00, 19px -8.6666666667px #ff4800, -111px -266.6666666667px
#3cff00, -132px -221.6666666667px #0044ff, 181px -35.6666666667px
#b700ff, -229px -47.6666666667px #00ffc4, -174px -70.6666666667px
#c4ff00, 146px -139.6666666667px #4000ff;
}
}
@-o-keyframes bang {
to {
box-shadow: -62px -219.6666666667px blue, 89px 73.3333333333px
#11ff00, -171px 3.3333333333px #99ff00, -232px -25.6666666667px
#ff00ae, 73px -345.6666666667px #0091ff, 59px -278.6666666667px
#ddff00, 142px -395.6666666667px #00ff9d, 113px -236.6666666667px
#002fff, -94px -392.6666666667px #00ff2f, -86px -132.6666666667px
#006fff, -14px -3.6666666667px #ff0080, -108px -139.6666666667px
yellow, 247px -256.6666666667px #00ff2f, 199px -191.6666666667px
#bf00ff, -6px 16.3333333333px #f700ff, -169px -183.6666666667px
#00ffc8, -188px -152.6666666667px #1eff00, 62px -332.6666666667px
#1500ff, 38px -369.6666666667px #0022ff, -155px -5.6666666667px
#ff0077, -45px -242.6666666667px #00ff1e, 159px -203.6666666667px
#0011ff, -117px -210.6666666667px #ff4000, -12px -292.6666666667px
#ff0015, -92px 44.3333333333px #ffbf00, 240px -295.6666666667px
#00d0ff, 138px -382.6666666667px #c8ff00, 172px -178.6666666667px
#ff0048, 143px -343.6666666667px #ffae00, -19px 27.3333333333px
#ff00d0, 189px 45.3333333333px #eeff00, 151px -387.6666666667px
#d500ff, 162px -67.6666666667px #00ffa2, -34px -360.6666666667px
#ffe600, 179px -411.6666666667px #0066ff, 125px -123.6666666667px
#ccff00, -111px 54.3333333333px #00aeff, -195px -16.6666666667px
#2200ff, 118px 34.3333333333px #ff003c, -120px -303.6666666667px
#0900ff, -62px -399.6666666667px #33ff00, -84px -396.6666666667px
#ff004d, -204px 33.3333333333px #00ff55, -58px -248.6666666667px
#eaff00, 19px -8.6666666667px #ff4800, -111px -266.6666666667px
#3cff00, -132px -221.6666666667px #0044ff, 181px -35.6666666667px
#b700ff, -229px -47.6666666667px #00ffc4, -174px -70.6666666667px
#c4ff00, 146px -139.6666666667px #4000ff;
}
}
@-ms-keyframes bang {
to {
box-shadow: -62px -219.6666666667px blue, 89px 73.3333333333px
#11ff00, -171px 3.3333333333px #99ff00, -232px -25.6666666667px
#ff00ae, 73px -345.6666666667px #0091ff, 59px -278.6666666667px
#ddff00, 142px -395.6666666667px #00ff9d, 113px -236.6666666667px
#002fff, -94px -392.6666666667px #00ff2f, -86px -132.6666666667px
#006fff, -14px -3.6666666667px #ff0080, -108px -139.6666666667px
yellow, 247px -256.6666666667px #00ff2f, 199px -191.6666666667px
#bf00ff, -6px 16.3333333333px #f700ff, -169px -183.6666666667px
#00ffc8, -188px -152.6666666667px #1eff00, 62px -332.6666666667px
#1500ff, 38px -369.6666666667px #0022ff, -155px -5.6666666667px
#ff0077, -45px -242.6666666667px #00ff1e, 159px -203.6666666667px
#0011ff, -117px -210.6666666667px #ff4000, -12px -292.6666666667px
#ff0015, -92px 44.3333333333px #ffbf00, 240px -295.6666666667px
#00d0ff, 138px -382.6666666667px #c8ff00, 172px -178.6666666667px
#ff0048, 143px -343.6666666667px #ffae00, -19px 27.3333333333px
#ff00d0, 189px 45.3333333333px #eeff00, 151px -387.6666666667px
#d500ff, 162px -67.6666666667px #00ffa2, -34px -360.6666666667px
#ffe600, 179px -411.6666666667px #0066ff, 125px -123.6666666667px
#ccff00, -111px 54.3333333333px #00aeff, -195px -16.6666666667px
#2200ff, 118px 34.3333333333px #ff003c, -120px -303.6666666667px
#0900ff, -62px -399.6666666667px #33ff00, -84px -396.6666666667px
#ff004d, -204px 33.3333333333px #00ff55, -58px -248.6666666667px
#eaff00, 19px -8.6666666667px #ff4800, -111px -266.6666666667px
#3cff00, -132px -221.6666666667px #0044ff, 181px -35.6666666667px
#b700ff, -229px -47.6666666667px #00ffc4, -174px -70.6666666667px
#c4ff00, 146px -139.6666666667px #4000ff;
}
}
@keyframes bang {
to {
box-shadow: -62px -219.6666666667px blue, 89px 73.3333333333px
#11ff00, -171px 3.3333333333px #99ff00, -232px -25.6666666667px
#ff00ae, 73px -345.6666666667px #0091ff, 59px -278.6666666667px
#ddff00, 142px -395.6666666667px #00ff9d, 113px -236.6666666667px
#002fff, -94px -392.6666666667px #00ff2f, -86px -132.6666666667px
#006fff, -14px -3.6666666667px #ff0080, -108px -139.6666666667px
yellow, 247px -256.6666666667px #00ff2f, 199px -191.6666666667px
#bf00ff, -6px 16.3333333333px #f700ff, -169px -183.6666666667px
#00ffc8, -188px -152.6666666667px #1eff00, 62px -332.6666666667px
#1500ff, 38px -369.6666666667px #0022ff, -155px -5.6666666667px
#ff0077, -45px -242.6666666667px #00ff1e, 159px -203.6666666667px
#0011ff, -117px -210.6666666667px #ff4000, -12px -292.6666666667px
#ff0015, -92px 44.3333333333px #ffbf00, 240px -295.6666666667px
#00d0ff, 138px -382.6666666667px #c8ff00, 172px -178.6666666667px
#ff0048, 143px -343.6666666667px #ffae00, -19px 27.3333333333px
#ff00d0, 189px 45.3333333333px #eeff00, 151px -387.6666666667px
#d500ff, 162px -67.6666666667px #00ffa2, -34px -360.6666666667px
#ffe600, 179px -411.6666666667px #0066ff, 125px -123.6666666667px
#ccff00, -111px 54.3333333333px #00aeff, -195px -16.6666666667px
#2200ff, 118px 34.3333333333px #ff003c, -120px -303.6666666667px
#0900ff, -62px -399.6666666667px #33ff00, -84px -396.6666666667px
#ff004d, -204px 33.3333333333px #00ff55, -58px -248.6666666667px
#eaff00, 19px -8.6666666667px #ff4800, -111px -266.6666666667px
#3cff00, -132px -221.6666666667px #0044ff, 181px -35.6666666667px
#b700ff, -229px -47.6666666667px #00ffc4, -174px -70.6666666667px
#c4ff00, 146px -139.6666666667px #4000ff;
}
}
@-webkit-keyframes gravity {
to {
transform: translateY(200px);
-moz-transform: translateY(200px);
-webkit-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
opacity: 0;
}
}
@-moz-keyframes gravity {
to {
transform: translateY(200px);
-moz-transform: translateY(200px);
-webkit-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
opacity: 0;
}
}
@-o-keyframes gravity {
to {
transform: translateY(200px);
-moz-transform: translateY(200px);
-webkit-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
opacity: 0;
}
}
@-ms-keyframes gravity {
to {
transform: translateY(200px);
-moz-transform: translateY(200px);
-webkit-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
opacity: 0;
}
}
@keyframes gravity {
to {
transform: translateY(200px);
-moz-transform: translateY(200px);
-webkit-transform: translateY(200px);
-o-transform: translateY(200px);
-ms-transform: translateY(200px);
opacity: 0;
}
}
@-webkit-keyframes position {
0%,
19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%,
39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%,
59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%,
79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%,
99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
@-moz-keyframes position {
0%,
19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%,
39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%,
59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%,
79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%,
99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
@-o-keyframes position {
0%,
19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%,
39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%,
59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%,
79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%,
99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
@-ms-keyframes position {
0%,
19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%,
39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%,
59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%,
79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%,
99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
@keyframes position {
0%,
19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%,
39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%,
59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%,
79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%,
99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
}
.pyro {
z-index: 3;
inset: 0;
width: 100vw;
margin: auto;
position: fixed;
display: none;
pointer-events: none;
}
.ttt-winner {
--_hue-rotation: hue-rotate(345deg);
position: absolute;
inset: 0;
top: 15rem;
margin: auto;
margin-top: 0;
justify-self: center;
aspect-ratio: 1.2;
display: grid;
display: none;
overflow: hidden;
box-shadow: var(--shadow-6);
z-index: 1;
cursor: pointer;
max-width: min(12rem, 100%);
height: auto;
object-fit: cover;
transition: opacity 0.3s var(--back-out), filter 0.3s var(--back-out);
}
@starting-style {
.ttt-winner {
opacity: 0;
}
}
.ttt-winner:hover,
.ttt-winner:focus-visible {
filter: grayscale(1);
opacity: 0.4;
opacity: 0.75;
}
.ttt-winner:focus-visible {
outline: dashed 2px currentcolor;
outline-offset: -4px;
}
.ttt-winner.not-shown {
opacity: 0;
pointer-events: none;
}
*:has(.theme-picker) {
position: static;
}
html:has(.theme-picker) {
position: relative;
}
.theme-picker {
--color-picker-bg: var(--primary-vivid, #88888860);
--color-picker-color: var(--surface-base);
--color-picker-hover-color: var(--surface-min);
--color-picker-shadow: var(--shadow-1);
list-style: none;
padding: 0;
margin: 0;
text-align: right;
position: fixed;
position: absolute;
top: auto;
top: 45px;
right: 45px;
z-index: 3;
display: grid;
justify-items: end;
align-items: center;
gap: 0.5rem;
min-width: 85px;
transition: top 0.3s ease-in-out, right 0.3s ease-in-out;
}
.theme-picker:not(:focus-within) {
opacity: 0;
pointer-events: none;
}
.theme-picker > *:not(:nth-child(2)) {
display: none;
}
.theme-picker button {
-webkit-appearance: none;
box-shadow: none;
cursor: pointer;
border: 0;
margin: 0;
border-radius: 2em;
min-height: 2.2rem;
min-width: 2.2rem;
display: grid;
place-content: center;
grid-template-columns: 1fr auto;
align-items: center;
justify-content: center;
justify-items: center;
gap: 0.5ch;
padding: 0.5em 1ch;
line-height: 1;
background-color: var(--color-picker-bg);
color: var(--color-picker-color);
font-size: inherit;
font-family: system-ui, serif;
box-shadow: var(--color-picker-shadow);
transition: padding 0.8s cubic-bezier(0.5, 0.75, 0.75, 1.25), gap 0.4s
cubic-bezier(0.5, 0.75, 0.75, 1.25),
margin 0.4s cubic-bezier(0.5, 0.75, 0.75, 1.25), border-radius 0.2s
cubic-bezier(0.5, 0.75, 0.75, 1.25);
}
.theme-picker button:hover {
color: var(--color-picker-hover-color);
margin-right: -3px;
}
.theme-picker button:active {
color: var(--color-picker-color);
cursor: wait;
}
.theme-picker button .icon {
text-align: center;
width: 1em;
height: 1em;
display: grid;
place-content: center;
padding-inline: 0;
padding: 0.1em;
}
.theme-picker button .picker-label {
transition: all 0.3s ease-in-out;
padding-inline: 0.25em 0.15em;
}
.theme-picker:not(:is(:hover, :focus-within)) button {
gap: 0;
}
.theme-picker:not(:is(:hover, :focus-within)) button > *:not(.icon) {
display: none;
}
@media (width < 890px) {
.theme-picker {
top: 0.5rem;
right: 0.5rem;
scale: 0.75;
}
}
.hover-slide {
background: linear-gradient(var(--player-clr) 0 0) var(--p, 0) / var(
--p,
0
)
no-repeat;
padding-inline: 0.07em;
text-decoration: none;
display: inline-block;
width: max-content;
transition: 0.4s, background-position 0s;
}
.hover-slide:hover {
--p: 100%;
color: light-dark(#000, #fff) !important;
}
.built-by {
font-family: 'Georgia';
text-decoration: none;
font-size: 1.05em;
color: currentcolor;
white-space: nowrap;
}
.info-game {
font-size: 0.75em;
text-align: center;
color: #888;
display: flex;
gap: 0.25rem;
flex-wrap: wrap;
margin-block: 0.25rem;
}
.marked {
opacity: 0;
transition: opacity 0.6s var(--back-out);
}
.game-status {
max-height: 1rem;
}
.player-2,
.player-1 {
font-family: system-ui;
}
</style>
</head>
<body>
<table class="xo shiny-edges">
<tr>
<td tabindex="0"> </td>
<td tabindex="0"></td>
<td tabindex="0"></td>
</tr>
<tr>
<td tabindex="0"> </td>
<td tabindex="0"></td>
<td tabindex="0"></td>
</tr>
<tr>
<td tabindex="0"> </td>
<td tabindex="0"></td>
<td tabindex="0"></td>
</tr>
</table>
<footer>
<div class="game-status">
<div class="turn">
<span class="player-1"><b>⨯</b> </span>
<span class="player-2"><i>⭘</i> </span>
</div>
</div>
<button class="reset-btn">
<span class="reset">重新开始</span>
<span class="new-game">新游戏</span>
</button>
</footer>
<div class="pyro">
<div class="before"></div>
<div class="after"></div>
</div>
<script>
const grid = document.querySelector('.xo');
document.addEventListener('mousemove', (e) => {
grid.style.setProperty('--x', e.x + 'px');
grid.style.setProperty('--y', e.y + 'px');
});
class LimitedArray {
constructor(maxLength) {
this.maxLength = maxLength;
this.items = [];
}
add(content, row, column) {
if (this.items.length >= this.maxLength) {
const removedItem = this.items.shift();
this.disappear(removedItem.row, removedItem.column);
}
let item;
if (this.items.length === 1) {
item = this.items.at(0);
if (item) this.fadeOut3(item.row, item.column);
}
if (this.items.length === 2) {
item = this.items.at(1);
if (item) this.fadeOut3(item.row, item.column);
}
if (this.items.length === 3) {
item = this.items.at(0);
if (item) this.fadeOut2(item.row, item.column);
item = this.items.at(2);
if (item) this.fadeOut3(item.row, item.column);
}
if (this.items.length === 4) {
item = this.items.at(1);
if (item) this.fadeOut2(item.row, item.column);
item = this.items.at(3);
if (item) this.fadeOut3(item.row, item.column);
}
if (this.items.length === 5) {
item = this.items.at(0);
if (item) this.fadeOut(item.row, item.column);
item = this.items.at(2);
if (item) this.fadeOut2(item.row, item.column);
item = this.items.at(4);
if (item) this.fadeOut3(item.row, item.column);
}
if (this.items.length === 6) {
item = this.items.at(1);
if (item) this.fadeOut(item.row, item.column);
item = this.items.at(3);
if (item) this.fadeOut2(item.row, item.column);
item = this.items.at(5);
if (item) this.fadeOut3(item.row, item.column);
}
this.items.push({ content, row, column });
}
getItems() {
return this.items;
}
size() {
return this.items.length;
}
reset() {
this.items = [];
}
disappear(row, column) {
const el = document.querySelector(
`table tr:nth-child(${row}) td:nth-child(${column})`
);
const content = el.querySelector(':is(b,i)');
content.classList.add('marked');
setTimeout(() => {
content.addEventListener(
'transitionend',
() => {
el.innerHTML = ' ';
},
{ once: true }
);
}, 0);
}
fadeOut(row, column) {
const el = document.querySelector(
`table tr:nth-child(${row}) td:nth-child(${column}) > :is(b,i)`
);
el.classList.add('fade-out');
el.closest('td').querySelector('.remaining-life').innerHTML = `
<div class="circle outlined"></div>
<div class="circle outlined"></div>
<div class="circle outlined"></div>`;
}
fadeOut2(row, column) {
const el = document.querySelector(
`table tr:nth-child(${row}) td:nth-child(${column}) > :is(b,i)`
);
el.closest('td').querySelector('.remaining-life').innerHTML = `
<div class="circle filled"></div>
<div class="circle outlined"></div>
<div class="circle outlined"></div>`;
}
fadeOut3(row, column) {
const el = document.querySelector(
`table tr:nth-child(${row}) td:nth-child(${column}) > :is(b,i)`
);
el.closest('td').querySelector('.remaining-life').innerHTML = `
<div class="circle filled"></div>
<div class="circle filled"></div>
<div class="circle outlined"></div>`;
}
}
const moves = new LimitedArray(6);
const table = document.querySelector('table.xo');
document.querySelectorAll('.xo td').forEach((item, index) => {
item.addEventListener('click', function (e) {
const el = e.target.closest('td');
if (el.querySelector(':is(b,i)')) return;
let player2sTurn = table.classList.contains('player-2s-turn');
let content = player2sTurn ? '<i>⭘</i>' : '<b>⨯</b>';
content += `<div class="remaining-life">
<div class="circle filled"></div>
<div class="circle filled"></div>
<div class="circle filled"></div>
</div>`;
table.classList.toggle('player-2s-turn');
const row = Math.floor(index / 3) + 1;
const column = (index % 3) + 1;
moves.add(content, row, column);
el.innerHTML = content;
});
item.addEventListener('keydown', function (e) {
const el = e.target.closest('td');
if (e.key === ' ' || e.key === 'Enter') {
el.click();
e.preventDefault();
return;
}
const actieEl = document.activeElement;
const row = actieEl.parentElement.rowIndex + 1;
const col = actieEl.cellIndex + 1;
const getNextCell = (rowAdjustment, colAdjustment) => {
const newRow = ((row + rowAdjustment - 1 + 3) % 3) + 1;
const newCol = ((col + colAdjustment - 1 + 3) % 3) + 1;
return document.querySelector(
`.xo tr:nth-child(${newRow}) td:nth-child(${newCol})`
);
};
const directionMap = {
ArrowDown: [1, 0],
ArrowUp: [-1, 0],
ArrowLeft: [0, -1],
ArrowRight: [0, 1],
w: [-1, 0],
s: [1, 0],
a: [0, -1],
d: [0, 1],
};
const adjustment = directionMap[e.key];
if (adjustment) {
getNextCell(adjustment[0], adjustment[1]).focus();
e.preventDefault();
}
});
});
document.querySelector('.reset-btn').addEventListener('click', (e) => {
document.querySelectorAll('.xo td').forEach((item) => {
item.innerHTML = ' ';
table.classList.remove('player-2s-turn');
moves.reset();
document.querySelector('.not-shown')?.classList.remove('not-shown');
});
});
document
.querySelector('.ttt-winner')
?.addEventListener('click', function (e) {
const el = e.target.closest('img');
el.classList.add('not-shown');
document.querySelector('.pyro').style.opacity = 0;
});
document
.querySelector('.ttt-winner')
?.addEventListener('keydown', function (e) {
const el = e.target.closest('img');
if (e.key === ' ' || e.key === 'Enter') {
el.click();
e.preventDefault();
return;
}
});
const initialTheme = localStorage.getItem('theme') ?? 'dark';
if (initialTheme) {
const el = document.documentElement;
if (initialTheme === 'light dark') {
el.style.colorScheme = 'light dark';
} else if (initialTheme === 'light') {
el.style.colorScheme = 'light';
} else {
el.style.colorScheme = 'dark';
}
}
const themePicker = document.querySelector('.theme-picker');
themePicker.style.opacity = 'unset';
themePicker.style.pointerEvents = 'unset';
themePicker.addEventListener('click', function (event) {
const clickedButton = event.target.closest('button');
if (clickedButton) {
const buttons = Array.from(themePicker.querySelectorAll('button'));
const clickedIndex = buttons.indexOf(clickedButton);
const reorderedButtons = buttons
.slice(clickedIndex)
.concat(buttons.slice(0, clickedIndex));
themePicker.innerHTML = '';
reorderedButtons.forEach((button) => {
themePicker
.appendChild(document.createElement('li'))
.appendChild(button);
});
let nextOption = themePicker.querySelector(
'& > *:nth-child(2) button'
);
nextOption.focus();
nextOption.addEventListener('mouseleave', function () {
this.blur();
});
let theme = clickedButton.classList.contains('picker-light')
? 'dark'
: 'light';
if (clickedButton.classList.contains('picker-auto')) theme = 'auto';
const el = document.documentElement;
const currentScheme = el.style.colorScheme || 'light';
if (theme === 'auto') {
el.style.colorScheme = 'light dark';
localStorage.setItem('theme', 'light dark');
} else {
if (theme === 'light') {
el.style.colorScheme = 'dark';
localStorage.setItem('theme', 'dark');
} else {
el.style.colorScheme = 'light';
localStorage.setItem('theme', 'light');
}
}
}
});
</script>
</body>
</html>