*,::before,::after{box-sizing:border-box}:where(ul,ol):where([class]){padding-left:0}body,:where(blockquote,figure):where([class]){margin:0}:where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl):where([class]){margin-block:0}:where(dd[class]){margin-left:0}:where(fieldset[class]){padding:0;margin-left:0;border:none}:where(ul[class]){list-style:none}:where(address[class]){font-style:normal}p{--paragraphMarginBottom: 24px;margin-block:0}p:where(:not([class]):not(:last-child)){margin-bottom:var(--paragraphMarginBottom)}img,video{display:block;max-width:100%;height:auto}input,textarea,select,button{font:inherit}html{height:100%;scrollbar-gutter:stable}html,:has(:target){scroll-behavior:smooth}body{min-height:100%;line-height:1.5}a:where([class]){display:inline-flex}button,label{cursor:pointer}:where([fill]:not([fill=none]):not([fill^=url])){fill:currentcolor}:where([stroke]:not([stroke=none]):not([stroke^=url])){stroke:currentcolor}svg *{transition-property:fill,stroke}:where(table){border-collapse:collapse;border-color:currentcolor}@media(prefers-reduced-motion: reduce){*,::before,::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}}body{background-color:#fff;background-image:linear-gradient(90deg, transparent 0, transparent 68px, #ff6b6b 68px, #ff6b6b 70px, transparent 70px),repeating-linear-gradient(90deg, transparent 0, transparent 19px, #d4d4d4 19px, #d4d4d4 20px),repeating-linear-gradient(0deg, transparent 0, transparent 19px, #d4d4d4 19px, #d4d4d4 20px),linear-gradient(to bottom, #fafafa 0%, #fff 50%, #f5f5f5 100%);background-size:100% 100%,20px 20px,20px 20px,100% 100%}.app-root{display:flex;align-items:center;justify-content:center;max-width:1440px;margin:0 auto}.button{width:150px;margin:0 auto;background-color:rgba(0,0,0,0)}.button:hover{background-color:rgba(0,0,0,.1)}.button:active{background-color:rgba(0,0,0,.2)}.button:focus{outline:none;box-shadow:0 0 0 2px rgba(0,0,0,.3)}svg{display:block;width:100%;height:100%}.home{display:flex;flex-direction:column;row-gap:5vh;align-items:center;justify-content:center;max-width:1440px;margin-top:5vh}.home__title{margin-top:10%}.home__menu{display:flex;flex-direction:column;row-gap:2vh}.game{position:relative;display:flex;flex-direction:column;row-gap:20px;width:100%}.game__title{margin:20px 0;font-size:2.5rem;font-weight:bold;color:#333;text-align:center}.game__settings-button{position:absolute;top:50px;left:200px;background-color:rgba(0,0,0,0);border:none}@media(max-width: 800px){.game__settings-button{left:5px}}.game__settings-button svg{width:50px;height:50px}.game__current-player{display:flex;-moz-column-gap:10px;column-gap:10px;align-items:center;justify-content:center;font-size:1.5rem;color:#666;text-align:center}.game__current-player-name{--color: black;align-items:center;vertical-align:middle;color:black;color:var(--color)}.game__current-player svg{width:30px;height:30px;filter:url("#pencil-sketch-filter")}.game__ai-thinking{font-size:1.2rem;color:rgba(0,0,0,0);text-align:center}.game__ai-thinking--active{color:#666}.game__ai-thinking--active::after{display:inline-block;width:1em;text-align:left;content:".";animation:ellipsis 1.5s infinite}.game__board{--random-angle-1: 90deg;--random-angle-2: 90deg;--random-angle-3: 0deg;--random-angle-4: 0deg;position:relative;display:grid;grid-template-rows:repeat(3, 100px);grid-template-columns:repeat(3, 100px);grid-gap:4px;gap:4px;justify-content:center;margin:0 auto}.game__board-line{position:absolute;background-color:#4a4949;filter:url("#pencil-sketch-filter")}.game__board-line--v1{left:33%;width:4px;height:100%;clip-path:inset(0 0 100% 0);transform:rotate(var(--random-angle-1));animation:draw-vertical-line .25s ease-in forwards;animation-delay:0s}.game__board-line--v2{left:66%;width:4px;height:100%;clip-path:inset(0 0 100% 0);transform:rotate(var(--random-angle-2));animation:draw-vertical-line .25s ease-in forwards;animation-delay:.4s}.game__board-line--h1{top:33%;width:100%;height:4px;clip-path:inset(0 0 100% 0);transform:rotate(var(--random-angle-3));animation:draw-horizontal-line .25s ease-in forwards;animation-delay:1s}.game__board-line--h2{top:66%;width:100%;height:4px;clip-path:inset(0 0 100% 0);transform:rotate(var(--random-angle-4));animation:draw-horizontal-line .25s ease-in forwards;animation-delay:1.4s}.game__cell{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0)}.game__cell:hover{background:radial-gradient(closest-side, rgba(187, 188, 186, 0.4) 20%, transparent 100%)}.game__cell:active{background:radial-gradient(closest-side, rgba(110, 110, 110, 0.4) 30%, transparent 100%)}.game__cell svg{z-index:1;display:block;filter:url("#pencil-sketch-filter")}.game__cell svg.cross-svg{width:90%;height:90%;color:red}.game__cell svg.cross-svg #cross-line1{stroke-dasharray:85;stroke-dashoffset:85;animation:draw-cross-line .2s ease-in forwards}.game__cell svg.cross-svg #cross-line2{stroke-dasharray:85;stroke-dashoffset:85;animation:draw-cross-line .2s ease-in forwards;animation-delay:.4s}.game__cell svg.circle-svg{width:80%;height:80%;color:blue}.game__cell svg.circle-svg #circle{stroke-dasharray:252;stroke-dashoffset:252;animation:draw-circle-line .9s ease-in forwards}.game__win-line{--left-indent: 0;--top-indent: 0;--line-length: 0;--angle: 0deg;--color: black;position:absolute;top:0;top:var(--top-indent);left:0;left:var(--left-indent);z-index:2;width:0;width:var(--line-length);height:4px;background-color:black;background-color:var(--color);filter:url("#pencil-sketch-filter");transform:rotate(0deg);transform:rotate(var(--angle));transform-origin:top left}.game__win-line--active{clip-path:inset(0 0 100% 0);animation:draw-horizontal-line .4s ease-in forwards;animation-delay:0s}.game__button-container{display:flex;flex-direction:column;row-gap:20px;justify-content:center;margin-top:30px}.game>svg{position:absolute;width:10px;height:10px}.dialog{--background-color: white;position:fixed;top:35%;width:400px;height:200px;background-color:white;background-color:var(--background-color)}.dialog[open]{animation:dialog-appear .5s ease-out forwards}.dialog[open]::backdrop{animation:dialog-backdrop-appear .5s ease-out forwards}.dialog__content{display:flex;flex-direction:column;row-gap:50px;align-items:center;justify-content:center}.dialog__game-winner{display:flex;flex-direction:row;-moz-column-gap:15px;column-gap:15px;align-items:center;justify-content:center;font-size:30px}.dialog__game-winner--2nd-span{--color: black;color:black;color:var(--color)}.dialog__game-winner--2nd-span svg{width:50px;height:50px;filter:url("#pencil-sketch-filter")}@keyframes draw-vertical-line{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}@keyframes draw-horizontal-line{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes draw-cross-line{from{stroke-dashoffset:85}to{stroke-dashoffset:0}}@keyframes draw-circle-line{from{stroke-dashoffset:252}to{stroke-dashoffset:0}}@keyframes dialog-appear{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}@keyframes dialog-backdrop-appear{from{background:rgba(0,0,0,0)}to{background:rgba(0,0,0,.5)}}@keyframes ellipsis{0%{content:"."}33%{content:".."}66%{content:"..."}}.settings{display:flex;flex-direction:column;row-gap:50px;align-items:center;justify-content:center;width:100%;height:100%;margin-top:50px}.settings__nav{font-size:20px}.settings__nav ul{display:flex;flex-direction:column;row-gap:20px;list-style:none}.settings__select-language{background-color:rgba(0,0,0,0);border:none}.settings__select-language:hover{cursor:pointer;background-color:#eff5e1}.settings__select-player{font-family:Arial,sans-serif;background-color:rgba(0,0,0,0);border:none}.settings__select-player option:first-child{color:red}.settings__select-player option:nth-child(2){color:blue}.settings__select-player:hover{cursor:pointer;background-color:#eff5e1}.settings__select-ai-difficulty{background-color:rgba(0,0,0,0);border:none}.settings__select-ai-difficulty:hover{cursor:pointer;background-color:#eff5e1}.settings__sound-button{width:80px;height:80px;background-color:rgba(0,0,0,0);border:none}.settings__sound-button--deactived{position:relative}.settings__sound-button--deactived::after{position:absolute;inset:0;width:100%;height:100%;content:"";background-color:red;animation:disable-sound .3s ease-in-out forwards}@keyframes disable-sound{0%{clip-path:polygon(0% 5%, 5% 0%, 5% 0%, 0% 5%)}100%{clip-path:polygon(0% 5%, 5% 0%, 100% 95%, 95% 100%)}}