/* 
   GLOBAL
 */

body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background: url("images/background.png") no-repeat center center fixed;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

/* Dark overlay */
body::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 0;
}

/* 
   MAIN CONTAINER
 */

.container {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 35px;
    width: 90%;
    max-width: 480px;

    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    border-radius: 24px;

    box-shadow:
        0 25px 50px rgba(0,0,0,0.45),
        inset 0 4px 10px rgba(255,255,255,0.08);
}

/* 
   TITLE & SUBTITLE
*/

h1 {
    color: #f0ceb5;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-shadow: 2px 4px 10px rgba(0,0,0,0.6);
}

.subtitle {
    font-size: 14px;
    color: #ebb597;
    opacity: 0.85;
    margin-bottom: 25px;
}

/* 
   BUTTONS
 */

.mode-select,
.start-section,
.mode-section,
.game-section {
    margin-bottom: 20px;
}

.mode-select button,
.mode-section button,
.primary-btn,
#restart,
#homeBtn {
    padding: 10px 18px;
    margin: 6px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(to bottom, #bc7348, #815d55);
    color: #371110;
    font-weight: bold;
    transition: all 0.25s ease;

    box-shadow:
        0 6px 0 #371110,
        0 8px 15px rgba(0,0,0,0.4);
}

/* 3D Press Effect */
.mode-select button:active,
.mode-section button:active,
.primary-btn:active,
#restart:active {
    transform: translateY(6px);
    box-shadow:
        0 2px 0 #371110,
        0 4px 8px rgba(0,0,0,0.4);
}

/* 
   BOARD
 */

.board {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    gap: 15px;
    justify-content: center;
    margin: 20px 0;
}

/* Wooden 3D Cells */
.cell {
    width: 100px;
    height: 100px;
    background: linear-gradient(145deg, #9b5c2e, #6f3f1f);
    border-radius: 18px;
    font-size: 3rem;
    font-weight: bold;
    color: #f5deb3;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    box-shadow:
        inset 6px 6px 12px #5a3319,
        inset -6px -6px 12px #b8743c,
        6px 6px 15px rgba(0,0,0,0.4);

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cell:hover {
    transform: translateY(-3px);
}

.cell:active {
    transform: scale(0.95);
    box-shadow:
        inset 3px 3px 6px #5a3319,
        inset -3px -3px 6px #b8743c;
}

/* 
   WIN GLOW
*/

.cell.winner {
    color: gold !important;
    text-shadow:
        0 0 10px #ffd700,
        0 0 20px #ffcc00,
        0 0 40px #ffaa00;

    animation: glowWin 1s infinite alternate;
}

@keyframes glowWin {
    from { box-shadow: 0 0 10px #ffd700; }
    to   { box-shadow: 0 0 30px #ffcc00; }
}

/*
   STATUS TEXT
 */

#status {
    margin-top: 15px;
    font-size: 18px;
    color: #2e190c;
    font-weight: 600;
    text-shadow: 1px 2px 5px rgba(0,0,0,0.6);
}

/* 
   UTILITIES
*/

.hidden {
    display: none;
}

/* 
   RESPONSIVE
 */

@media (max-width: 600px) {

    .board {
        grid-template-columns: repeat(3, 80px);
        gap: 12px;
    }

    .cell {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }

    h1 {
        font-size: 1.8rem;
    }

    .container {
        padding: 25px;
    }
}