styles.css

/*
 * Project:  Tic-Tac-Toe Game
 * Author:   Ramazan Çetinkaya
 * GitHub:   https://github.com/ramazancetinkaya
 *
 * Copyright (c) 2025 Ramazan Çetinkaya
 * Released under the MIT License.
 */

/* ================================================
   TABLE OF CONTENTS
   ================================================
   1. Root & Variables
   2. Base & Reset Styles
   3. Layout & Main Structure
   4. Components
   5. Accessibility
   6. Media Queries (Responsiveness)
   ================================================ */

/* 1. Root & Variables 
   Defines the color palette, fonts, and shadows for the entire application.
*/
:root {
    --clr-dark-navy: #1a2a33;
    --clr-semi-dark-navy: #1f3641;
    --clr-silver: #a8bfc9;
    --clr-silver-hover: #dbe8ed;
    --clr-light-blue: #31c3bd;
    --clr-light-blue-hover: #65e9e4;
    --clr-light-yellow: #f2b137;
    --clr-light-yellow-hover: #ffc860;

    --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --fw-bold: 700;
    --fw-medium: 500;

    --shadow-sm: 0px 4px 0px rgba(0, 0, 0, 0.25);
    --shadow-md: 0px 8px 0px rgba(0, 0, 0, 0.25);
}

/* 2. Base & Reset Styles 
   Establishes a consistent baseline across all browsers.
*/
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body { height: 100%; }

body {
    font-family: var(--font-family);
    background-color: var(--clr-dark-navy);
    color: var(--clr-silver);
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

h1, h2, h3, h4 {
    text-transform: uppercase;
    font-weight: var(--fw-bold);
}

button {
    font-family: inherit;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
}

button:active { transform: translateY(2px); }

/* 3. Layout & Main Structure 
   Styles for the main containers and overall page layout.
*/
.main-container {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
}

.icon-logo {
    font-size: 2.5rem;
    color: var(--clr-light-blue);
}

.icon-logo .bi-circle { color: var(--clr-light-yellow); }

/* 4. Components 
   Styles for individual UI elements like cards, buttons, the board, and modals.
*/

/* --- Utility & Buttons --- */
.hidden { display: none !important; }
.btn {
    padding: 1rem;
    font-size: 1rem;
    letter-spacing: 1px;
    box-shadow: var(--shadow-sm);
}
.btn-yellow { background-color: var(--clr-light-yellow); color: var(--clr-dark-navy); }
.btn-yellow:hover { background-color: var(--clr-light-yellow-hover); }
.btn-silver { background-color: var(--clr-silver); color: var(--clr-dark-navy); }
.btn-silver:hover { background-color: var(--clr-silver-hover); }

/* --- Start Menu --- */
.start-menu {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}
.picker-card, .difficulty-card {
    background-color: var(--clr-semi-dark-navy);
    box-shadow: var(--shadow-md);
    border-radius: 15px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.picker-toggle {
    background-color: var(--clr-dark-navy);
    display: flex;
    padding: 0.5rem;
    border-radius: 10px;
}
.picker-toggle button {
    flex: 1;
    padding: 0.75rem;
    background-color: transparent;
    font-size: 1.5rem;
    color: var(--clr-silver);
    border-radius: 8px;
}
.picker-toggle button.active { background-color: var(--clr-silver); color: var(--clr-dark-navy); }
.picker-toggle button:not(.active):hover { background-color: rgba(168, 191, 201, 0.1); }
.difficulty-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.difficulty-buttons .btn { background-color: var(--clr-silver); color: var(--clr-dark-navy); }
.difficulty-buttons .btn.active { background-color: var(--clr-dark-navy); color: var(--clr-silver); }
.difficulty-buttons .btn:not(.active):hover { background-color: var(--clr-silver-hover); }

/* --- Game Screen --- */
.game-screen { width: 100%; }
.game-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 1.25rem;
}
.turn-indicator {
    background-color: var(--clr-semi-dark-navy);
    padding: 0.5rem 1.5rem;
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-self: center;
}
.btn-restart {
    background-color: var(--clr-silver);
    color: var(--clr-dark-navy);
    width: 52px;
    height: 52px;
    font-size: 1.75rem;
    display: grid;
    place-items: center;
    justify-self: end;
    box-shadow: var(--shadow-sm);
}
.btn-restart:hover { background-color: var(--clr-silver-hover); }
.thinking-indicator {
    min-height: 24px; /* Prevents layout shift */
    margin-bottom: 1.25rem;
    font-weight: var(--fw-medium);
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.thinking-indicator.visible { opacity: 1; }

/* --- Game Board & Cells --- */
.game-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.board-cell {
    background-color: var(--clr-semi-dark-navy);
    aspect-ratio: 1 / 1;
    border-radius: 15px;
    box-shadow: var(--shadow-md);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}
.board-cell i {
    font-size: 4rem;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.board-cell.x i { color: var(--clr-light-blue); }
.board-cell.o i { color: var(--clr-light-yellow); }
.board-cell.show i { opacity: 1; transform: scale(1); }
/* SVG background images provide a modern, scalable hover effect on empty cells. */
.board-cell.x-hover:not(.x):not(.o):hover {
    background-image: url("data:image/svg+xml,%3csvg width='64' height='64' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.002 1.147 32 18.145 48.998 1.147a3 3 0 0 1 4.243 0l9.612 9.612a3 3 0 0 1 0 4.243L45.855 32l16.998 16.998a3 3 0 0 1 0 4.243l-9.612 9.612a3 3 0 0 1-4.243 0L32 45.855 15.002 62.853a3 3 0 0 1-4.243 0L1.147 53.24a3 3 0 0 1 0-4.243L18.145 32 1.147 15.002a3 3 0 0 1 0-4.243l9.612-9.612a3 3 0 0 1 4.243 0Z' fill='%2331c3bd' fill-rule='evenodd' opacity='0.25'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;
}
.board-cell.o-hover:not(.x):not(.o):hover {
    background-image: url("data:image/svg+xml,%3csvg width='64' height='64' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0Zm0 18.286c-7.564 0-13.714 6.15-13.714 13.714 0 7.564 6.15 13.714 13.714 13.714 7.564 0 13.714-6.15 13.714-13.714 0-7.564-6.15-13.714-13.714-13.714zm0 22.857c-5.043 0-9.143-4.1-9.143-9.143s4.1-9.143 9.143-9.143 9.143 4.1 9.143 9.143-4.1 9.143-9.143 9.143z' fill='%23f2b137' fill-rule='evenodd' opacity='0.25'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;
}
.win-line.x { background-color: var(--clr-light-blue); }
.win-line.o { background-color: var(--clr-light-yellow); }
.win-line.x i, .win-line.o i { color: var(--clr-dark-navy); }

/* --- Score Cards --- */
.game-footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.score-card { border-radius: 15px; padding: 0.8rem; color: var(--clr-dark-navy); }
.score-card p { font-size: 0.875rem; }
.score-card .score { font-size: 1.5rem; font-weight: var(--fw-bold); }
#player-score-card { background-color: var(--clr-light-blue); }
#tie-score-card { background-color: var(--clr-silver); }
#cpu-score-card { background-color: var(--clr-light-yellow); }

/* --- Modals --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: grid;
    place-items: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}
.modal-overlay.show { opacity: 1; visibility: visible; }
.modal-content {
    background-color: var(--clr-semi-dark-navy);
    padding: 2.5rem 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}
.modal-overlay.show .modal-content { transform: scale(1); }
.modal-winner-announcement { display: flex; align-items: center; gap: 1.5rem; }
.modal-winner-announcement .icon-winner { font-size: 4rem; }
.modal-winner-announcement h2.x-win-color { color: var(--clr-light-blue); }
.modal-winner-announcement h2.o-win-color { color: var(--clr-light-yellow); }
.modal-winner-announcement h2.tie-color { color: var(--clr-silver); }

/* 5. Accessibility 
   Styles to improve usability for keyboard and screen reader users.
*/
[role="gridcell"]:focus-visible {
    outline: 3px solid var(--clr-light-yellow);
    outline-offset: 4px;
}

/* 6. Media Queries 
   Adjustments for smaller screen sizes to ensure responsiveness.
*/
@media (max-width: 375px) {
    .turn-indicator { padding: 0.5rem 1rem; }
    .score-card p { font-size: 0.75rem; }
    .score-card .score { font-size: 1.25rem; }
    .modal-winner-announcement { gap: 0.5rem; }
    .modal-winner-announcement .icon-winner { font-size: 2rem; }
    .modal-winner-announcement h2 { font-size: 1.5rem; }
}