@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

:root {
    /* Main Theme Backgrounds */
    --bg-main: #0F172A;
    --bg-square: #1E293B;
    --bg-square-hover: #334155;

    /* Grid Layout */
    --grid-line: #475569;

    /* Player Colors (XO) */
    --player-x: #06B6D4;
    --player-o: #EC4899;

    /* NEW: Winning Cell State */
    --bg-win-cell: #22C55E;
    --text-win-glow: #FFFFFF;

    --btn-bg: #06B6D4;
    --btn-text: #0F172A;
    --btn-bg-hover: #EC4899;
    --btn-text-hover: #FFFFFF;

    /* Text & Typography */
    --text-main: #F8FAFC;
    --text-muted: #94A3B8;
    --ff: 'Rubik', sans-serif;

    /* Assets & Animations */
    --radius-premium: 16px;
    --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    min-height: 100dvh;
    height: 100dvh;
}

body {
    height: 100%;
    background: var(--bg-main);
    color: var(--text-main);
    font-family: var(--ff);
}

@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* PFP */
.pfp {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: .7rem;
    margin-bottom: 0.7rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--grid-line);
}

.pfp img {
    width: 50px;
}

.pfp figcaption {
    font-weight: 650;
    font-size: 1.1rem;
}

/* Inputs & Forms */
form {
    width: 100%;
}

.Input {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.Input i {
    position: absolute;
    left: 1rem;
    color: var(--text-muted)
}

.Input input {
    width: 100%;
    background: var(--bg-square);
    color: var(--text-main);
    border-radius: var(--radius-premium);
    font-size: 1.1rem;
    font-weight: 650;
    border: 2px solid transparent;
    outline: none;
    padding: 1rem;
    padding-left: 3rem;
    font-family: var(--ff);
    transition: var(--transition-smooth);
}

.Input input:focus {
    border-color: var(--grid-line);
}

form input[type="submit"] {
    width: 100%;
    border-radius: var(--radius-premium);
    font-size: 1.1rem;
    font-weight: 650;
    border: 2px solid transparent;
    outline: none;
    padding: 1rem;
    font-family: var(--ff);
}

input[type="submit"],
button {
    background: var(--btn-bg);
    color: var(--btn-text);
    transition: var(--transition-smooth);
    cursor: pointer;
}

input[type="submit"]:hover,
button:hover {
    background: var(--btn-bg-hover);
    color: var(--btn-text-hover);
}