/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* CSS Reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global Variables */
:root{
    /* Background */
    --bg-color: #134E4A;

    /* Cards */
    --card-color: #1F766E;

    /* Accent */
    --primary-color: #5EEAD4;

    /* Restart Button */
    --secondary-color: #b03017;

    /* Text */
    --text-color: #F8FAFC;
    --text-light: #D1FAE5;

    /* Borders */
    --border-color: #2DD4BF;
}

/* Body */
body{
    font-family: 'Poppins', sans-serif;
    background: var(--bg-color);
    color: var(--text-color);

    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding: 0.8rem 0;
    overflow-x:hidden;
    user-select:none;

}
header{
    margin-bottom:.5rem;
}
header h1{
    font-size:clamp(2rem, 6vw, 2.8rem);
    font-weight: 700;
    color: var(--primary-color);
    text-align: center;
}
.container{
    width:min(100%, 500px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    margin:0 auto;
}
.mode-selector{
    display:flex;

    background: var(--card-color);

    padding:0.4rem;

    border-radius:12px;

    gap:0.5rem;
}
.mode-btn{
    flex:1;

    border:none;

    background:transparent;

    color:var(--text-light);

    padding:0.8rem;

    border-radius:10px;

    cursor:pointer;

    font-size:1rem;

    font-weight:600;

    transition:0.3s ease;
}
.mode-btn.active{
    background: var(--text-color);
    color:#083344;

    box-shadow:0 6px 18px rgba(94,234,212,.35);
}
.game-info{
    text-align:center;
}
.turn-indicator{
    font-size:1.2rem;
    font-weight:600;
    color:var(--text-color);
}
.game-board{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    width:100%;

    max-width:320px;

    margin:auto;

    gap:10px;

}
.cell{

    aspect-ratio:1;

    background:var(--card-color);

    border:2px solid var(--border-color);

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    color: var(--primary-color);

    font-size:3rem;

    font-weight:700;

    cursor:pointer;

    transition:0.3s ease;

}
.cell:hover{

    background:#2A8C83;

    transform:translateY(-4px);

    box-shadow:0 8px 20px rgba(0,0,0,.2);

}
.cell.x{
    color:#EEE9C3;
}

.cell.o{
    color:#D5AE8B;
}
.cell.winner{

    background:#9faa76;

    color:var(--primary-color);

    animation:pulse .8s infinite;

}
.scoreboard{

    background:var(--card-color);

    border-radius:18px;

    padding:1rem;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

    border:1px solid rgba(255,255,255,.08);

}
.score-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:1rem;

}
.reset-score-btn{

    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

    background:var(--secondary-color);

    color:var(--text-color);

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.3s ease;

}
.reset-score-btn:hover{

    background:var(--primary-color);

    color:var(--bg-color);

    transform:rotate(180deg);

}
.score-content{

    display:flex;

    align-items:center;

    justify-content:space-between;

}
.divider{

    width:1px;

    align-self:stretch;

    background:rgba(255,255,255,.12);

}
.score-item{

    flex:1;

    text-align:center;

}
.score-item p{

    font-size:1.1rem;

    letter-spacing:1.2px;

    color:rgba(255,255,255,.7);

    margin-bottom:.6rem;

}
.score-item span{

    font-size:2.7rem;

    font-weight:700;

    line-height:1;

}

.score-item:first-child span{

    color:#eee9c3;

}

.score-item:last-child span{

    color:#d5ae8b;

}
.controls{

    display:flex;

}
.restart-btn{

    width:100%;

    padding:0.9rem;

    border:none;

    border-radius:12px;

    background:var(--secondary-color);

    color:white;

    font-size:1rem;

    font-weight:600;

    cursor:pointer;

    transition:0.3s;

}
.restart-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(249,115,22,.35);

}
@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.04);

    }

    100%{

        transform:scale(1);

    }

}
@keyframes heartbeat{

    0%,100%{

        transform:scale(1);

    }

    25%{

        transform:scale(1.2);

    }

    50%{

        transform:scale(1);

    }

    75%{

        transform:scale(1.2);

    }

}
@media (max-width: 600px){

    body{
        padding:0 12px;
    }

    header{
        margin:1rem 0;
    }

    .container{
        gap:1rem;
        padding:.5rem;
    }

    .mode-btn{
        padding:.75rem;
        font-size:.95rem;
    }

    .turn-indicator{
        font-size:1.1rem;
    }

    .game-board{
        gap:8px;
    }

    .cell{
        font-size:2.2rem;
        border-radius:10px;
    }

    .scoreboard{
        padding:.9rem;
    }

    .score-item span{
        font-size:2.2rem;
    }

    .restart-btn{
        padding:1rem;
        font-size:1rem;
    }
    footer p{

    font-size:.8rem;

}
}
@media (max-height: 850px){

    header{
        margin-bottom:.3rem;
    }

    .container{
        gap:.8rem;
    }

    .game-board{
        max-width:300px;
        gap:8px;
    }

    .scoreboard{
        padding:.8rem;
    }

    .restart-btn{
        padding:.8rem;
    }

    footer{
        margin-top:.5rem;
    }

}
@media (max-width:380px){

    header h1{
        font-size:1.8rem;
    }

    .container{
        gap:.8rem;
    }

    .mode-btn{
        font-size:.85rem;
        padding:.65rem;
    }

    .turn-indicator{
        font-size:1rem;
    }

    .cell{
        font-size:2rem;
    }

    .score-item span{
        font-size:2rem;
    }

    .restart-btn{
        padding:.8rem;
    }
    footer p{

    font-size:.8rem;

}
}
footer{

    margin-top:1rem;

    padding-bottom:.5rem;

    text-align:center;

}
footer a{

    color:var(--primary-color);

    text-decoration:none;

    font-weight:600;

}

footer a:hover{

    text-decoration:underline;

}

footer span{

    display:inline-block;

    animation:heartbeat 1.5s infinite;

}

footer strong{

    color:var(--primary-color);

    font-weight:600;

}