@import"https://fonts.googleapis.com/css2?family=Iceberg&display=swap";*{margin:0;padding:0}.main-game-play{background-color:#2d2d2d;width:100vw;height:100vh;display:grid;grid-template-columns:1fr 1fr 1fr;justify-items:center;align-items:center;gap:20px;position:relative}.game-center{height:100%;display:flex;flex-direction:column;gap:20px;justify-content:center;align-items:center;position:relative;z-index:2}.game-center>h1{font-family:Iceberg,sans-serif;color:#fff}.game-center>h2{font-family:Iceberg,sans-serif;color:#fff}.game-play{background-color:#2d2d2d;height:65%;aspect-ratio:1 / 1;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:10px;padding:10px;border:#2d2d2d solid 5px;outline:#BBF100 solid 5px;border-radius:20px}.panel-btn-function{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}.panel-btn-function>button{background-color:#fff;border-radius:100px;padding:10px 20px;font-family:Iceberg,sans-serif;font-size:20px;transition:all .5s cubic-bezier(.075,.82,.165,1)}.panel-btn-function>button:hover{background-color:#bbf100;box-shadow:inset 0 0 10px #000;outline:#BBF100 solid 2px}.panel-btn-function>button:active{background-color:#bbf100;box-shadow:inset 0 0 20px #000;transform:scale(.95)}.game-play>button{background-color:#fff;border-radius:10px;width:100%}.img-icon-asset{width:80%;aspect-ratio:1 / 1;filter:contrast(1.4) drop-shadow(0px 0px 5px #00000098);animation:IconAnimation .3s cubic-bezier(.075,.82,.165,1) forwards;transform:scale(0)}.score-board{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;position:relative;z-index:2}@keyframes IconAnimation{0%{transform:scale(0)}70%{transform:scale(1.1)}to{transform:scale(1)}}.score-board>img{width:60%;filter:contrast(1.4) drop-shadow(0px 10px 20px #000000);animation:IconAnimation .5s .2s cubic-bezier(.075,.82,.165,1) forwards;transform:scale(0)}.score-board>h1{font-family:Iceberg,sans-serif;color:#fff;font-size:5rem;animation:IconAnimation .5s .2s cubic-bezier(.075,.82,.165,1) forwards;transform:scale(0)}.win-message{position:absolute;height:80%;aspect-ratio:1 / 1;border-radius:30px;display:none;flex-direction:column;justify-content:center;align-items:center;gap:20px;background-color:#2d2d2dde;border:#ffffff solid 3px;outline:#2d2d2d solid 5px;z-index:3}.win-message>img{width:50%}.win-message>h2{width:50%;font-family:Iceberg,sans-serif;color:#fff;font-size:5rem;text-align:center;text-shadow:0px 5px 10px #000000}.win-message>button{background-color:#fff;border-radius:100px;padding:10px 20px;font-family:Iceberg,sans-serif;font-size:2rem;transition:all .5s cubic-bezier(.075,.82,.165,1)}.win-message>button:hover{background-color:#bbf100;box-shadow:inset 0 0 10px #000;outline:#BBF100 solid 3px}.win-message>button:active{background-color:#bbf100;box-shadow:inset 0 0 20px #000;transform:scale(.95)}@keyframes turnAnimation{0%{opacity:0}to{opacity:1}}.effect-turn-X{position:absolute;background:linear-gradient(to right,#4f31a8,#2d2d2d);width:50%;height:100%;top:0;left:0;animation:turnAnimation .2s ease-in-out forwards}.effect-turn-O{position:absolute;background:linear-gradient(to left,#bbf100,#2d2d2d);width:50%;height:100%;top:0;right:0;animation:turnAnimation .2s ease-in-out forwards}@keyframes animationWindowSettingGame{0%{opacity:0}to{opacity:1}}.game-setting-display{position:absolute;top:50%;left:50%;height:100vh;width:100vw;display:none;justify-content:center;align-items:center;transform:translate(-50%,-50%);background-color:#ffffff39;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:4;animation:animationWindowSettingGame .5s cubic-bezier(.165,.84,.44,1) forwards}.main-game-setting{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:30px;background-color:#2d2d2d;width:60%;border-radius:30px;border:#BBF100 solid 5px;outline:#2d2d2d solid 7px;box-shadow:0 0 300px #000;position:relative}.title-game-setting{font-family:Iceberg,sans-serif;color:#fff;font-size:2rem}.box-game-setting{width:100%}.box-game-setting{overflow:hidden;height:100%;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.box-game-setting-option{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.box-game-setting-option h2{font-family:Iceberg,sans-serif;color:#fff;text-align:center;margin-top:20px}.option-game-setting{display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:10px;width:70%}.selection-option-game-setting{width:100%;display:flex;justify-content:space-evenly}.option-game-setting input[type=checkbox]{display:none}.option-game-setting img{width:60px;height:60px;cursor:pointer;border-radius:8px;border:2px solid transparent;padding:5px;transition:all .2s ease}.option-game-setting img:hover{transform:scale(1.1);border:#BBF100 solid 2px}.option-game-setting input[type=checkbox]:checked+img{border:#BBF100 solid 2px;box-shadow:0 0 20px #bbf100;background-color:#4cafef1a}.option-game-setting label{font-family:Iceberg,sans-serif;color:#fff;display:flex;justify-content:center;align-items:center;padding:20px}.option-game-setting label p{margin-left:20px}.btn-back{background-color:#bbf100;font-family:Iceberg,sans-serif;font-size:1rem;color:#2d2d2d;position:absolute;top:5%;right:5%;padding:10px 20px;border-radius:50px;transition:all .5s cubic-bezier(.075,.82,.165,1)}.btn-back:hover{background-color:#bbf100;box-shadow:inset 0 0 10px #000;outline:#BBF100 solid 3px}.btn-back:active{background-color:#bbf100;box-shadow:inset 0 0 20px #000;transform:scale(.95)}.btn-confirm{background-color:#bbf100;font-family:Iceberg,sans-serif;font-size:1rem;color:#2d2d2d;padding:10px 20px;margin-bottom:10px;border-radius:50px;transition:all .5s cubic-bezier(.075,.82,.165,1)}.btn-confirm:hover{background-color:#bbf100;box-shadow:inset 0 0 10px #000;outline:#BBF100 solid 3px}.btn-confirm:active{background-color:#bbf100;box-shadow:inset 0 0 20px #000;transform:scale(.95);filter:grayscale(1)}