body{margin:0;padding:0;font-family:Arial,sans-serif}.tic-tac-toe-container{background-color:#f0f0f0;justify-content:center;align-items:center;min-height:100vh;padding:clamp(10px,3vw,30px);display:flex}.tic-tac-toe-wrapper{background-color:#fff;border-radius:12px;flex-direction:column;justify-content:space-between;align-items:center;row-gap:clamp(20px,4vw,40px);width:100%;max-width:700px;padding:clamp(20px,4vw,40px);display:flex;box-shadow:0 4px 8px #0000001a}.tic-tac-toe-header{font-size:clamp(28px,5vw,44px);font-weight:700}.tic-tac-toe-mode-boxes-wrapper{flex-direction:column;justify-content:center;align-items:center;gap:clamp(16px,3vw,40px);width:100%;display:flex}.tic-tac-toe-mode-box{cursor:pointer;border-style:none;border-radius:10px;flex-direction:row;justify-content:space-between;align-items:center;width:100%;max-width:600px;padding:clamp(10px,2vw,20px) clamp(20px,4vw,40px);display:flex;box-shadow:0 4px 8px #0000001a}.tic-tac-toe-mode-box:hover{transition:all .2s;transform:translateY(-3px);box-shadow:0 6px 16px #00000026}.tic-tac-toe-mode-description{flex-direction:column;display:flex}.tic-tac-toe-image{width:clamp(50px,16vw,120px);height:auto}.tic-tac-toe-mode-name{font-size:clamp(16px,3vw,24px);font-weight:700}.tic-tac-toe-mode-name-desctiption{color:gray;font-size:clamp(12px,2.5vw,20px)}.tic-tac-toe-start-mode-button-blue{color:#007bff;border-style:none;border-radius:5px;font-size:clamp(40px,8vw,70px)}.tic-tac-toe-start-mode-button-red{color:red;border-style:none;border-radius:5px;font-size:clamp(40px,8vw,70px)}.tic-tac-toe-how-to-play-button{color:gray;cursor:pointer;border:2px solid #d4d4d4;border-radius:5px;flex-direction:row;justify-content:center;align-items:center;column-gap:4px;padding:clamp(8px,2vw,10px) clamp(12px,3vw,20px);font-size:clamp(14px,2.5vw,18px);display:flex}.tic-tac-toe-how-to-play-button:hover{background-color:#f0f0f0;transition:all .2s}.tic-tac-toe-rules-book-container{z-index:1001;background-color:#fff;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:20px;width:100%;max-width:750px;padding:clamp(12px,3vw,20px);display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 4px 8px #0000001a}.tic-tac-toe-rules-book-image{width:100%;max-width:750px;height:auto}.tic-tac-toe-rules-book-play-button{color:#c40303;cursor:pointer;background-color:#ffd3d3;border:1px solid #c40303;border-radius:5px;flex-direction:row;justify-content:center;align-items:center;padding:clamp(8px,2vw,10px) clamp(12px,3vw,20px);font-size:clamp(14px,2.5vw,18px);font-weight:700;display:flex}.tic-tac-toe-rules-book-play-button:hover{background-color:#fab1b1}.tic-tac-toe-lets-play-button-arrow{color:#c40303;border-style:none}.tic-tac-toe-rules-book-container-shadow{z-index:1000;background-color:#0000001e;width:100%;height:100%;position:fixed;top:0;left:0}*{box-sizing:border-box}.tic-tac-toe-game-container{background-color:#fff;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:clamp(10px,2vw,20px);width:100%;max-width:700px;padding:clamp(12px,2vw,24px);display:flex;box-shadow:0 4px 8px #0000001a}.tic-tac-toe-header-wrapper{flex-direction:column;justify-content:center;align-items:center;row-gap:clamp(4px,2vw,10px);display:flex}.tic-tac-toe-game-header{font-size:clamp(28px,5vw,44px);font-weight:700}.tic-tac-toe-game-mode-header{color:gray;font-size:clamp(16px,3vw,24px)}.tic-tac-toe-game-board{flex-direction:column;gap:clamp(10px,2vw,20px);display:flex}.tic-tac-toe-game-row{flex-direction:row;gap:clamp(10px,2vw,20px);display:flex}.tic-tac-toe-game-cell{cursor:pointer;border:2px solid #d4d4d4;border-radius:10px;justify-content:center;align-items:center;width:clamp(60px,8vw,80px);height:clamp(60px,8vw,80px);font-size:clamp(30px,6vw,60px);display:flex}.tic-tac-toe-back-button{color:#c40303;cursor:pointer;background-color:#ffd3d3;border:1px solid #c40303;border-radius:5px;flex-direction:row;justify-content:center;align-items:center;column-gap:4px;padding:clamp(8px,2vw,10px) clamp(12px,3vw,20px);font-size:clamp(14px,2.5vw,18px);display:flex}.tic-tac-toe-back-button:hover{background-color:#fab1b1;transition:all .2s}.tic-tac-toe-O{color:#007bff}.tic-tac-toe-X{color:red}.tic-tac-toe-scoring-container{flex-direction:column;justify-content:center;align-items:center;row-gap:clamp(5px,1vw,10px);display:flex}.tic-tac-toe-you-start-with-container{border:2px solid #d4d4d4;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;row-gap:6px;padding:10px;display:flex}.tic-tac-toe-you-start-with-header{color:gray;font-size:clamp(14px,2.5vw,18px)}.tic-tac-toe-icon-box-O{cursor:pointer;border:2px solid #add8e6;border-radius:20px;justify-content:center;align-items:center;padding:clamp(5px,1vw,10px) clamp(20px,2vw,40px);display:flex}.tic-tac-toe-icon-box-O:hover{background-color:#add8e6;transition:all .2s}.tic-tac-toe-icon-box-X{cursor:pointer;border:2px solid #ffaeae;border-radius:20px;justify-content:center;align-items:center;padding:clamp(5px,1vw,10px) clamp(20px,2vw,40px);display:flex}.tic-tac-toe-icon-box-X:hover{background-color:#ffaeae;transition:all .2s}.tic-tac-toe-scoring-O{color:#007bff;font-size:clamp(18px,3vw,24px)}.tic-tac-toe-scoring-X{color:red;font-size:clamp(18px,3vw,24px)}.tic-tac-toe-score{color:gray;border:2px solid #d4d4d4;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;row-gap:10px;padding:10px;display:flex}.tic-tac-toe-score-header{color:#636363;font-size:clamp(12px,1vw,16px);font-weight:700}.tic-tac-toe-score-number{color:#636363;font-size:clamp(16px,4vw,24px)}.selected-O{background-color:#add8e6}.selected-X{background-color:#ffaeae}.tic-tac-toe-difficulty-container{border:2px solid #d4d4d4;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;row-gap:10px;padding:10px;display:flex}.tic-tac-toe-difficulty-header{color:gray;font-size:clamp(10px,2vw,20px)}.tic-tac-toe-difficulty-selection-container{flex-direction:row;justify-content:center;align-items:center;column-gap:10px;display:flex}.tic-tac-toe-difficulty-option{cursor:pointer;color:#575656;border:2px solid #d4d4d4;border-radius:20px;justify-content:center;align-items:center;padding:clamp(8px,2vw,10px) clamp(15px,3vw,30px);display:flex;position:relative}.selected-difficulty{color:#037ef7;background-color:#add8e6;border-color:#add8e6;position:relative}.tic-tac-toe-difficulty-star-circle{background-color:#037ef7;border-radius:50%;justify-content:center;align-items:center;width:clamp(10px,2vw,20px);height:clamp(10px,2vw,20px);display:flex;position:absolute;top:-6px;right:-6px}.tic-tac-toe-difficulty-star{color:#fff;font-size:clamp(8px,2vw,12px)}.tic-tac-toe-difficulty-description{color:gray;font-size:clamp(8px,2vw,16px)}.tic-tac-toe-game-buttons{flex-direction:row;justify-content:center;align-items:center;column-gap:clamp(10px,2vw,20px);width:100%;display:flex}.tic-tac-toe-start-game-button{color:#0a970a;cursor:pointer;background-color:#d4f7d4;border:1px solid #3bce3b;border-radius:5px;flex-direction:row;justify-content:center;align-items:center;width:100%;max-width:80px;padding:clamp(8px,2vw,10px) clamp(12px,3vw,20px);font-size:clamp(14px,2.5vw,18px);font-weight:700;display:flex}.tic-tac-toe-start-game-button:hover{background-color:#a1e5a1}.tic-tac-toe-restart-game-button{color:#3f3fff;cursor:pointer;background-color:#d4d4ff;border:1px solid #7575ff;border-radius:5px;flex-direction:row;justify-content:center;align-items:center;width:100%;max-width:80px;padding:clamp(8px,2vw,10px) clamp(12px,3vw,20px);font-size:clamp(14px,2.5vw,18px);font-weight:700;display:flex}.tic-tac-toe-restart-game-button:hover{background-color:#a1a1ff}