/*
 * 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.
*/
/* ================================================
   Project:  Tic-Tac-Toe Game (Scoped)
   ================================================ */

: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);
}

/* --- Scope Protection --- */
#ttt-arcade-scope *, 
#ttt-arcade-scope *::before, 
#ttt-arcade-scope *::after {
    box-sizing: border-box;
}

#ttt-arcade-scope {
    font-family: var(--font-family);
    color: var(--clr-silver);
    padding: 1rem;
    display: grid;
    place-items: center;
    width: 100%;
}

#ttt-arcade-scope h1, 
#ttt-arcade-scope h2, 
#ttt-arcade-scope h3, 
#ttt-arcade-scope h4 {
    text-transform: uppercase;
    font-weight: var(--fw-bold);
    margin: 0;
}

#ttt-arcade-scope 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;
}

#ttt-arcade-scope button:active { transform: translateY(2px); }

/* --- Layout & Main Structure --- */
#ttt-arcade-scope .main-container {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
}

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

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

/* --- Components --- */
#ttt-arcade-scope .hidden { display: none !important; }

#ttt-arcade-scope .btn {
    padding: 1rem;
    font-size: 1rem;
    letter-spacing: 1px;
    box-shadow: var(--shadow-sm);
}
#ttt-arcade-scope .btn-yellow { background-color: var(--clr-light-yellow); color: var(--clr-dark-navy); }
#ttt-arcade-scope .btn-yellow:hover { background-color: var(--clr-light-yellow-hover); }
#ttt-arcade-scope .btn-silver { background-color: var(--clr-silver); color: var(--clr-dark-navy); }
#ttt-arcade-scope .btn-silver:hover { background-color: var(--clr-silver-hover); }

/* --- Start Menu --- */
#ttt-arcade-scope .start-menu {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}
#ttt-arcade-scope .picker-card, 
#ttt-arcade-scope .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;
}
#ttt-arcade-scope .picker-toggle {
    background-color: var(--clr-dark-navy);
    display: flex;
    padding: 0.5rem;
    border-radius: 10px;
}
#ttt-arcade-scope .picker-toggle button {
    flex: 1;
    padding: 0.75rem;
    background-color: transparent;
    font-size: 1.5rem;
    color: var(--clr-silver);
    border-radius: 8px;
}
#ttt-arcade-scope .picker-toggle button.active { background-color: var(--clr-silver); color: var(--clr-dark-navy); }
#ttt-arcade-scope .picker-toggle button:not(.active):hover { background-color: rgba(168, 191, 201, 0.1); }

#ttt-arcade-scope .difficulty-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
#ttt-arcade-scope .difficulty-buttons .btn { background-color: var(--clr-silver); color: var(--clr-dark-navy); }
#ttt-arcade-scope .difficulty-buttons .btn.active { background-color: var(--clr-dark-navy); color: var(--clr-silver); }
#ttt-arcade-scope .difficulty-buttons .btn:not(.active):hover { background-color: var(--clr-silver-hover); }

/* --- Game Screen --- */
#ttt-arcade-scope .game-screen { width: 100%; }
#ttt-arcade-scope .game-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 1.25rem;
}
#ttt-arcade-scope .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;
}
#ttt-arcade-scope .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);
}
#ttt-arcade-scope .btn-restart:hover { background-color: var(--clr-silver-hover); }
#ttt-arcade-scope .thinking-indicator {
    min-height: 24px;
    margin-bottom: 1.25rem;
    font-weight: var(--fw-medium);
    letter-spacing: 1px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
#ttt-arcade-scope .thinking-indicator.visible { opacity: 1; }

/* --- Game Board & Cells --- */
#ttt-arcade-scope .game-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
#ttt-arcade-scope .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;
}
#ttt-arcade-scope .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;
}
#ttt-arcade-scope .board-cell.x i { color: var(--clr-light-blue); }
#ttt-arcade-scope .board-cell.o i { color: var(--clr-light-yellow); }
#ttt-arcade-scope .board-cell.show i { opacity: 1; transform: scale(1); }

#ttt-arcade-scope .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%;
}
#ttt-arcade-scope .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%;
}
#ttt-arcade-scope .win-line.x { background-color: var(--clr-light-blue); }
#ttt-arcade-scope .win-line.o { background-color: var(--clr-light-yellow); }
#ttt-arcade-scope .win-line.x i, #ttt-arcade-scope .win-line.o i { color: var(--clr-dark-navy); }

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

/* --- Modals --- */
#ttt-arcade-scope .modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    display: grid;
    place-items: center;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}
#ttt-arcade-scope .modal-overlay.show { opacity: 1; visibility: visible; }
#ttt-arcade-scope .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;
}
#ttt-arcade-scope .modal-overlay.show .modal-content { transform: scale(1); }
#ttt-arcade-scope .modal-winner-announcement { display: flex; align-items: center; gap: 1.5rem; }
#ttt-arcade-scope .modal-winner-announcement .icon-winner { font-size: 4rem; }
#ttt-arcade-scope .modal-winner-announcement h2.x-win-color { color: var(--clr-light-blue); }
#ttt-arcade-scope .modal-winner-announcement h2.o-win-color { color: var(--clr-light-yellow); }
#ttt-arcade-scope .modal-winner-announcement h2.tie-color { color: var(--clr-silver); }

/* --- Accessibility --- */
#ttt-arcade-scope [role="gridcell"]:focus-visible {
    outline: 3px solid var(--clr-light-yellow);
    outline-offset: 4px;
}

/* --- Media Queries --- */
@media (max-width: 375px) {
    #ttt-arcade-scope .turn-indicator { padding: 0.5rem 1rem; }
    #ttt-arcade-scope .score-card p { font-size: 0.75rem; }
    #ttt-arcade-scope .score-card .score { font-size: 1.25rem; }
    #ttt-arcade-scope .modal-winner-announcement { gap: 0.5rem; }
    #ttt-arcade-scope .modal-winner-announcement .icon-winner { font-size: 2rem; }
    #ttt-arcade-scope .modal-winner-announcement h2 { font-size: 1.5rem; }
}