<!-- CODE = #A068 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NETBYZZ A068</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form class="game">
<input type="checkbox" id="x-0" />
<svg class="x board__x" style="--x: 0; --y: 0" viewBox="0 0 100 100">
<path
class="cross"
d="M 80 20 L 20 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
<path
class="cross"
d="M 20 20 L 80 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
</svg>
<input type="checkbox" id="o-0" />
<svg class="o board__o" style="--x: 0; --y: 0" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="30"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="200"
stroke-dashoffset="200"
></circle>
</svg>
<input type="checkbox" id="x-1" />
<svg class="x board__x" style="--x: 1; --y: 0" viewBox="0 0 100 100">
<path
class="cross"
d="M 80 20 L 20 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
<path
class="cross"
d="M 20 20 L 80 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
</svg>
<input type="checkbox" id="o-1" />
<svg class="o board__o" style="--x: 1; --y: 0" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="30"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="200"
stroke-dashoffset="200"
></circle>
</svg>
<input type="checkbox" id="x-2" />
<svg class="x board__x" style="--x: 2; --y: 0" viewBox="0 0 100 100">
<path
class="cross"
d="M 80 20 L 20 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
<path
class="cross"
d="M 20 20 L 80 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
</svg>
<input type="checkbox" id="o-2" />
<svg class="o board__o" style="--x: 2; --y: 0" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="30"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="200"
stroke-dashoffset="200"
></circle>
</svg>
<input type="checkbox" id="x-3" />
<svg class="x board__x" style="--x: 0; --y: 1" viewBox="0 0 100 100">
<path
class="cross"
d="M 80 20 L 20 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
<path
class="cross"
d="M 20 20 L 80 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
</svg>
<input type="checkbox" id="o-3" />
<svg class="o board__o" style="--x: 0; --y: 1" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="30"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="200"
stroke-dashoffset="200"
></circle>
</svg>
<input type="checkbox" id="x-4" />
<svg class="x board__x" style="--x: 1; --y: 1" viewBox="0 0 100 100">
<path
class="cross"
d="M 80 20 L 20 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
<path
class="cross"
d="M 20 20 L 80 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
</svg>
<input type="checkbox" id="o-4" />
<svg class="o board__o" style="--x: 1; --y: 1" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="30"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="200"
stroke-dashoffset="200"
></circle>
</svg>
<input type="checkbox" id="x-5" />
<svg class="x board__x" style="--x: 2; --y: 1" viewBox="0 0 100 100">
<path
class="cross"
d="M 80 20 L 20 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
<path
class="cross"
d="M 20 20 L 80 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
</svg>
<input type="checkbox" id="o-5" />
<svg class="o board__o" style="--x: 2; --y: 1" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="30"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="200"
stroke-dashoffset="200"
></circle>
</svg>
<input type="checkbox" id="x-6" />
<svg class="x board__x" style="--x: 0; --y: 2" viewBox="0 0 100 100">
<path
class="cross"
d="M 80 20 L 20 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
<path
class="cross"
d="M 20 20 L 80 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
</svg>
<input type="checkbox" id="o-6" />
<svg class="o board__o" style="--x: 0; --y: 2" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="30"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="200"
stroke-dashoffset="200"
></circle>
</svg>
<input type="checkbox" id="x-7" />
<svg class="x board__x" style="--x: 1; --y: 2" viewBox="0 0 100 100">
<path
class="cross"
d="M 80 20 L 20 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
<path
class="cross"
d="M 20 20 L 80 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
</svg>
<input type="checkbox" id="o-7" />
<svg class="o board__o" style="--x: 1; --y: 2" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="30"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="200"
stroke-dashoffset="200"
></circle>
</svg>
<input type="checkbox" id="x-8" />
<svg class="x board__x" style="--x: 2; --y: 2" viewBox="0 0 100 100">
<path
class="cross"
d="M 80 20 L 20 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
<path
class="cross"
d="M 20 20 L 80 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
</svg>
<input type="checkbox" id="o-8" />
<svg class="o board__o" style="--x: 2; --y: 2" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="30"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="200"
stroke-dashoffset="200"
></circle>
</svg>
<div class="board">
<svg
class="board__line"
viewBox="0 0 10 300"
style="--rotate: 0; --shift: -1; --delay: 0.75"
>
<path
d="M 5 5 L 5 295"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="300"
stroke-dashoffset="300"
></path>
</svg>
<svg
class="board__line"
viewBox="0 0 10 300"
style="--rotate: 1; --shift: -1; --delay: 0.5"
>
<path
d="M 5 5 L 5 295"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="300"
stroke-dashoffset="300"
></path>
</svg>
<svg
class="board__line"
viewBox="0 0 10 300"
style="--rotate: 0; --shift: 1; --delay: 1"
>
<path
d="M 5 5 L 5 295"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="300"
stroke-dashoffset="300"
></path>
</svg>
<svg
class="board__line"
viewBox="0 0 10 300"
style="--rotate: 1; --shift: 1; --delay: 0.25"
>
<path
d="M 5 5 L 5 295"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="300"
stroke-dashoffset="300"
></path>
</svg>
<div class="board__cell">
<label for="x-0">
<svg class="x ghost" viewBox="0 0 100 100">
<path
class="cross"
d="M 80 20 L 20 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
<path
class="cross"
d="M 20 20 L 80 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
</svg>
</label>
<label for="o-0">
<svg class="o ghost" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="30"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="200"
stroke-dashoffset="200"
></circle>
</svg>
</label>
</div>
<div class="board__cell">
<label for="x-1">
<svg class="x ghost" viewBox="0 0 100 100">
<path
class="cross"
d="M 80 20 L 20 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
<path
class="cross"
d="M 20 20 L 80 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
</svg>
</label>
<label for="o-1">
<svg class="o ghost" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="30"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="200"
stroke-dashoffset="200"
></circle>
</svg>
</label>
</div>
<div class="board__cell">
<label for="x-2">
<svg class="x ghost" viewBox="0 0 100 100">
<path
class="cross"
d="M 80 20 L 20 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
<path
class="cross"
d="M 20 20 L 80 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
</svg>
</label>
<label for="o-2">
<svg class="o ghost" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="30"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="200"
stroke-dashoffset="200"
></circle>
</svg>
</label>
</div>
<div class="board__cell">
<label for="x-3">
<svg class="x ghost" viewBox="0 0 100 100">
<path
class="cross"
d="M 80 20 L 20 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
<path
class="cross"
d="M 20 20 L 80 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
</svg>
</label>
<label for="o-3">
<svg class="o ghost" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="30"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="200"
stroke-dashoffset="200"
></circle>
</svg>
</label>
</div>
<div class="board__cell">
<label for="x-4">
<svg class="x ghost" viewBox="0 0 100 100">
<path
class="cross"
d="M 80 20 L 20 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
<path
class="cross"
d="M 20 20 L 80 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
</svg>
</label>
<label for="o-4">
<svg class="o ghost" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="30"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="200"
stroke-dashoffset="200"
></circle>
</svg>
</label>
</div>
<div class="board__cell">
<label for="x-5">
<svg class="x ghost" viewBox="0 0 100 100">
<path
class="cross"
d="M 80 20 L 20 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
<path
class="cross"
d="M 20 20 L 80 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
</svg>
</label>
<label for="o-5">
<svg class="o ghost" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="30"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="200"
stroke-dashoffset="200"
></circle>
</svg>
</label>
</div>
<div class="board__cell">
<label for="x-6">
<svg class="x ghost" viewBox="0 0 100 100">
<path
class="cross"
d="M 80 20 L 20 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
<path
class="cross"
d="M 20 20 L 80 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
</svg>
</label>
<label for="o-6">
<svg class="o ghost" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="30"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="200"
stroke-dashoffset="200"
></circle>
</svg>
</label>
</div>
<div class="board__cell">
<label for="x-7">
<svg class="x ghost" viewBox="0 0 100 100">
<path
class="cross"
d="M 80 20 L 20 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
<path
class="cross"
d="M 20 20 L 80 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
</svg>
</label>
<label for="o-7">
<svg class="o ghost" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="30"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="200"
stroke-dashoffset="200"
></circle>
</svg>
</label>
</div>
<div class="board__cell">
<label for="x-8">
<svg class="x ghost" viewBox="0 0 100 100">
<path
class="cross"
d="M 80 20 L 20 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
<path
class="cross"
d="M 20 20 L 80 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
</svg>
</label>
<label for="o-8">
<svg class="o ghost" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="30"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="200"
stroke-dashoffset="200"
></circle>
</svg>
</label>
</div>
</div>
<div class="game__result game__result--x result">
<div
class="confetti"
style="--rotation: 88.67759328628091; --travel: -63.685700547037214"
>
🎉
</div>
<div
class="confetti"
style="--rotation: 15.87210692179272; --travel: -73.49657461699755"
>
🎉
</div>
<div
class="confetti"
style="--rotation: -40.252287833849266; --travel: -52.28111144109442"
>
🎉
</div>
<div
class="confetti"
style="--rotation: -21.87256286694725; --travel: -19.279771602280917"
>
🎉
</div>
<div
class="confetti"
style="--rotation: -3.932393690901776; --travel: -24.28802797188738"
>
🎉
</div>
<div
class="confetti"
style="--rotation: -68.87444216048108; --travel: -99.12587245449056"
>
🎉
</div>
<div
class="confetti"
style="--rotation: 78.81939577279019; --travel: -76.51192909192504"
>
🎉
</div>
<div
class="confetti"
style="--rotation: 42.75534636643059; --travel: -43.446756161778666"
>
🎉
</div>
<div
class="confetti"
style="--rotation: -78.87450041893254; --travel: -86.57507585776938"
>
🎉
</div>
<div
class="confetti"
style="--rotation: -47.04571147893254; --travel: -5.41975411641229"
>
🎉
</div>
<div class="result__content">
<div class="result__title">Winner!</div>
<svg class="x result__winner" viewBox="0 0 100 100">
<path
class="cross"
d="M 80 20 L 20 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
<path
class="cross"
d="M 20 20 L 80 80"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="100"
stroke-dashoffset="100"
></path>
</svg>
</div>
</div>
<div class="game__result game__result--o result">
<div
class="confetti"
style="--rotation: 45.06286971095983; --travel: -16.861521028337112"
>
🎉
</div>
<div
class="confetti"
style="--rotation: 23.518644839041997; --travel: -2.272243031230836"
>
🎉
</div>
<div
class="confetti"
style="--rotation: -60.67831525982104; --travel: -0.3715893517440172"
>
🎉
</div>
<div
class="confetti"
style="--rotation: 8.154722988929223; --travel: -46.92937076495796"
>
🎉
</div>
<div
class="confetti"
style="--rotation: 33.94428346189427; --travel: -0.7907365629413521"
>
🎉
</div>
<div
class="confetti"
style="--rotation: -57.38853099584911; --travel: -57.730814799503996"
>
🎉
</div>
<div
class="confetti"
style="--rotation: -61.01266807731401; --travel: -85.63100554838448"
>
🎉
</div>
<div
class="confetti"
style="--rotation: 74.41973681241993; --travel: -78.0993218096159"
>
🎉
</div>
<div
class="confetti"
style="--rotation: 41.92587914294856; --travel: -18.41257006989736"
>
🎉
</div>
<div
class="confetti"
style="--rotation: 0.9532374575441622; --travel: -60.71750172819319"
>
🎉
</div>
<div class="result__content">
<div class="result__title">Winner!</div>
<svg class="o result__winner" viewBox="0 0 100 100">
<circle
cx="50"
cy="50"
r="30"
fill="none"
stroke-width="10"
stroke-linecap="round"
stroke-dasharray="200"
stroke-dashoffset="200"
></circle>
</svg>
</div>
</div>
<div class="game__result game__result--draw result">
<div class="result__content">
<div class="result__title">Draw...</div>
<svg class="zzz result__winner" viewBox="0 0 24 24">
<path
d="M23,12H17V10L20.39,6H17V4H23V6L19.62,10H23V12M15,16H9V14L12.39,10H9V8H15V10L11.62,14H15V16M7,20H1V18L4.39,14H1V12H7V14L3.62,18H7V20Z"
></path>
</svg>
</div>
</div>
<button type="reset" title="Reset Board">
<svg class="reset" viewBox="0 0 24 24">
<path
d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"
></path>
</svg>
</button>
</form>
</body>
</html>
@font-face {
font-family: Cyber;
src: url("https://assets.codepen.io/605876/Blender-Pro-Bold.otf");
font-display: swap;
}
* {
box-sizing: border-box;
}
:root {
--size: 300px;
--piece-size: calc(var(--size) / 3);
--line: #e6e6e6;
--bg: #060d13;
--naught: #75f0b3;
--naught-alpha: rgba(117, 240, 179, 0.5);
--cross: #c775f0;
--cross-alpha: rgba(199, 117, 240, 0.5);
--draw-speed: 0.15;
--color: #2a2222;
}
@media (min-width: 768px) {
:root {
--size: 50vmin;
}
}
@media (max-height: 500px) {
:root {
--size: 300px;
}
}
body {
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
overflow: hidden;
background: var(--bg);
color: var(--color);
font-family: "Cyber", sans-serif;
text-transform: uppercase;
}
svg {
filter: drop-shadow(0 -0.25vmin 0.25vmin #000) drop-shadow(0 0 0.5vmin var(--alpha)) drop-shadow(0 0 1vmin var(--alpha)) drop-shadow(0 0 5vmin var(--stroke)) brightness(1.2);
stroke: var(--stroke);
}
form,
.board {
display: grid;
place-items: center;
position: relative;
}
.game__result {
display: none;
position: absolute;
width: calc(var(--size) * 1.5);
height: calc(var(--size) * 1.5);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
label,
.o,
.x {
position: absolute;
display: inline-block;
height: var(--piece-size);
width: var(--piece-size);
}
label {
cursor: pointer;
}
label:hover .ghost {
opacity: 0.5;
}
.ghost {
opacity: 0;
transition: opacity calc(var(--draw-speed) * 1s);
}
.o {
--alpha: var(--naught-alpha);
--stroke: var(--naught);
transform: rotateX(180deg);
}
.x {
--alpha: var(--cross-alpha);
--stroke: var(--cross);
}
.x path:nth-of-type(2) {
--delay: var(--draw-speed);
}
:checked+.x {
display: block;
}
:checked+.o {
display: block;
}
.board {
height: var(--size);
width: var(--size);
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
.board__x,
.board__o {
display: none;
left: calc(var(--x) * (100% / 3));
top: calc(var(--y) * (100% / 3));
z-index: 2;
position: absolute;
}
.board__line {
--stroke: var(--line);
--alpha: rgba(230, 230, 230, 0.5);
width: calc(var(--size) * 0.05);
height: var(--size);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(calc(var(--rotate) * -90deg)) translate(calc(var(--shift) * ((var(--size) / 3) * 0.5)), 0);
}
.board__cell {
height: var(--piece-size);
width: var(--piece-size);
}
input,
button {
position: absolute;
}
button {
top: 125%;
background: transparent;
border: 0;
padding: 0;
height: 5vmin;
width: 5vmin;
min-height: 48px;
min-width: 48px;
outline: transparent;
cursor: pointer;
display: none;
transition: transform calc(var(--draw-speed) * 1s);
-webkit-animation: fadeIn calc(var(--draw-speed) * 4s) calc(var(--draw-speed) * 2s) both;
animation: fadeIn calc(var(--draw-speed) * 4s) calc(var(--draw-speed) * 2s) both;
}
button:hover {
transform: translate(0, -4%);
}
button:active {
transform: translate(0, 2%) scale(0.8);
}
.reset {
height: 100%;
fill: var(--line);
}
input {
position: fixed;
left: 100%;
}
.result {
-webkit-animation: flyIn calc(var(--draw-speed) * 3s) ease-in both;
animation: flyIn calc(var(--draw-speed) * 3s) ease-in both;
-webkit-backdrop-filter: blur(25px);
backdrop-filter: blur(25px);
z-index: 10;
}
.result__content {
height: 40%;
width: 40%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
border-radius: 15%;
background: rgba(36, 51, 66, 0.8);
color: #fff;
align-items: center;
display: flex;
justify-content: center;
flex-direction: column;
font-weight: bold;
font-size: 2rem;
box-shadow: 0 3vmin 2.5vmin -2.5vmin #000;
}
.result__winner {
position: static;
height: calc(var(--size) / 3);
}
.zzz {
--stroke: #197fe6;
fill: var(--stroke);
}
:checked~.board .board__cell label:nth-of-type(odd),
:checked~ :checked~ :checked~.board .board__cell label:nth-of-type(odd),
:checked~ :checked~ :checked~ :checked~ :checked~.board .board__cell label:nth-of-type(odd),
:checked~ :checked~ :checked~ :checked~ :checked~ :checked~ :checked~.board .board__cell label:nth-of-type(odd),
:checked~ :checked~.board .board__cell label:nth-of-type(even),
:checked~ :checked~ :checked~ :checked~.board .board__cell label:nth-of-type(even),
:checked~ :checked~ :checked~ :checked~ :checked~ :checked~.board .board__cell label:nth-of-type(even),
:checked~ :checked~ :checked~ :checked~ :checked~ :checked~ :checked~ :checked~.board .board__cell label:nth-of-type(even) {
display: block;
}
:checked~.board .board__cell label:nth-of-type(even),
:checked~ :checked~ :checked~.board .board__cell label:nth-of-type(even),
:checked~ :checked~ :checked~ :checked~ :checked~.board .board__cell label:nth-of-type(even),
:checked~ :checked~ :checked~ :checked~ :checked~ :checked~ :checked~.board .board__cell label:nth-of-type(even),
:checked~ :checked~.board .board__cell label:nth-of-type(odd),
:checked~ :checked~ :checked~ :checked~.board .board__cell label:nth-of-type(odd),
:checked~ :checked~ :checked~ :checked~ :checked~ :checked~.board .board__cell label:nth-of-type(odd),
:checked~ :checked~ :checked~ :checked~ :checked~ :checked~ :checked~ :checked~.board .board__cell label:nth-of-type(odd) {
display: none;
}
#x-0:checked~#x-1:checked~#x-2:checked~.game__result--x,
#x-3:checked~#x-4:checked~#x-5:checked~.game__result--x,
#x-6:checked~#x-7:checked~#x-8:checked~.game__result--x,
#x-0:checked~#x-3:checked~#x-6:checked~.game__result--x,
#x-1:checked~#x-4:checked~#x-7:checked~.game__result--x,
#x-2:checked~#x-5:checked~#x-8:checked~.game__result--x,
#x-0:checked~#x-4:checked~#x-8:checked~.game__result--x,
#x-2:checked~#x-4:checked~#x-6:checked~.game__result--x,
#o-0:checked~#o-1:checked~#o-2:checked~.game__result--o,
#o-3:checked~#o-4:checked~#o-5:checked~.game__result--o,
#o-6:checked~#o-7:checked~#o-8:checked~.game__result--o,
#o-0:checked~#o-3:checked~#o-6:checked~.game__result--o,
#o-1:checked~#o-4:checked~#o-7:checked~.game__result--o,
#o-2:checked~#o-5:checked~#o-8:checked~.game__result--o,
#o-0:checked~#o-4:checked~#o-8:checked~.game__result--o,
#o-2:checked~#o-4:checked~#o-6:checked~.game__result--o {
display: flex;
}
#x-0:checked~#x-1:checked~#x-2:checked~.game__result--x~.game__result--draw,
#x-3:checked~#x-4:checked~#x-5:checked~.game__result--x~.game__result--draw,
#x-6:checked~#x-7:checked~#x-8:checked~.game__result--x~.game__result--draw,
#x-0:checked~#x-3:checked~#x-6:checked~.game__result--x~.game__result--draw,
#x-1:checked~#x-4:checked~#x-7:checked~.game__result--x~.game__result--draw,
#x-2:checked~#x-5:checked~#x-8:checked~.game__result--x~.game__result--draw,
#x-0:checked~#x-4:checked~#x-8:checked~.game__result--x~.game__result--draw,
#x-2:checked~#x-4:checked~#x-6:checked~.game__result--x~.game__result--draw,
#o-0:checked~#o-1:checked~#o-2:checked~.game__result--o~.game__result--draw,
#o-3:checked~#o-4:checked~#o-5:checked~.game__result--o~.game__result--draw,
#o-6:checked~#o-7:checked~#o-8:checked~.game__result--o~.game__result--draw,
#o-0:checked~#o-3:checked~#o-6:checked~.game__result--o~.game__result--draw,
#o-1:checked~#o-4:checked~#o-7:checked~.game__result--o~.game__result--draw,
#o-2:checked~#o-5:checked~#o-8:checked~.game__result--o~.game__result--draw,
#o-0:checked~#o-4:checked~#o-8:checked~.game__result--o~.game__result--draw,
#o-2:checked~#o-4:checked~#o-6:checked~.game__result--o~.game__result--draw {
display: none;
}
#x-0:checked~#x-1:checked~#x-2:checked~.game__result--x~button,
#x-3:checked~#x-4:checked~#x-5:checked~.game__result--x~button,
#x-6:checked~#x-7:checked~#x-8:checked~.game__result--x~button,
#x-0:checked~#x-3:checked~#x-6:checked~.game__result--x~button,
#x-1:checked~#x-4:checked~#x-7:checked~.game__result--x~button,
#x-2:checked~#x-5:checked~#x-8:checked~.game__result--x~button,
#x-0:checked~#x-4:checked~#x-8:checked~.game__result--x~button,
#x-2:checked~#x-4:checked~#x-6:checked~.game__result--x~button,
#o-0:checked~#o-1:checked~#o-2:checked~.game__result--o~button,
#o-3:checked~#o-4:checked~#o-5:checked~.game__result--o~button,
#o-6:checked~#o-7:checked~#o-8:checked~.game__result--o~button,
#o-0:checked~#o-3:checked~#o-6:checked~.game__result--o~button,
#o-1:checked~#o-4:checked~#o-7:checked~.game__result--o~button,
#o-2:checked~#o-5:checked~#o-8:checked~.game__result--o~button,
#o-0:checked~#o-4:checked~#o-8:checked~.game__result--o~button,
#o-2:checked~#o-4:checked~#o-6:checked~.game__result--o~button {
display: block;
}
:checked~ :checked~ :checked~ :checked~ :checked~ :checked~ :checked~ :checked~ :checked~.game__result--draw {
display: block;
}
:checked~ :checked~ :checked~ :checked~ :checked~ :checked~ :checked~ :checked~ :checked~button {
display: block;
}
.board__line path,
.o circle,
.x path {
-webkit-animation: draw calc(var(--draw-speed) * 1s) calc(var(--delay, 0) * 1s) ease-in both;
animation: draw calc(var(--draw-speed) * 1s) calc(var(--delay, 0) * 1s) ease-in both;
}
.confetti {
position: absolute;
top: 50%;
left: 50%;
font-size: 2rem;
-webkit-animation: celebrate 1s forwards,
fadeOut calc(var(--draw-speed) * 1s) calc((1 - var(--draw-speed)) * 1s) forwards;
animation: celebrate 1s forwards,
fadeOut calc(var(--draw-speed) * 1s) calc((1 - var(--draw-speed)) * 1s) forwards;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
}
@-webkit-keyframes flyIn {
from {
opacity: 0;
transform: translate(-50%, 250%) scale(0);
}
}
@keyframes flyIn {
from {
opacity: 0;
transform: translate(-50%, 250%) scale(0);
}
}
@-webkit-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes fadeOut {
to {
opacity: 0;
}
}
@keyframes fadeOut {
to {
opacity: 0;
}
}
@-webkit-keyframes celebrate {
from {
transform: translate(-50%, -50%) rotate(calc(var(--rotation) * 1deg)) scale(0) translate(0, 0);
}
to {
transform: translate(-50%, -50%) rotate(calc(var(--rotation) * 1deg)) scale(1) translate(0, calc(var(--travel) * 1vmin));
}
}
@keyframes celebrate {
from {
transform: translate(-50%, -50%) rotate(calc(var(--rotation) * 1deg)) scale(0) translate(0, 0);
}
to {
transform: translate(-50%, -50%) rotate(calc(var(--rotation) * 1deg)) scale(1) translate(0, calc(var(--travel) * 1vmin));
}
}