/* BASIC RESET */

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

:root {
    --black: #030303;
    --dark: #0a070a;

    --pink: #ff2bd6;
    --pink-light: #ff75e6;
    --pink-dark: #9e007f;

    --red: #ff2438;
    --red-light: #ff6370;

    --blue: #1f8fff;
    --blue-light: #71b9ff;

    --white: #fff7ff;

    --current-neon: var(--pink);
    --current-neon-light: var(--pink-light);
}


html {
    min-height: 100%;
}


body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 40%,
            #190917 0%,
            #080408 38%,
            #030303 75%
        );

    color: var(--white);

    font-family:
        "Arial Narrow",
        "Helvetica Neue",
        Arial,
        sans-serif;

    overflow-x: hidden;

    transition:
        background 1s ease,
        color 0.5s ease;
}


/* GENERAL PAGE LAYOUT */

body {
    display: flex;
    flex-direction: column;
}


main {
    width: 100%;
    flex: 1;

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

    position: relative;
}


.site-header {
    min-height: 130px;

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

    padding: 20px;

    text-align: center;
}


.site-header h1 {
    font-size: clamp(2.4rem, 6vw, 5rem);

    letter-spacing: 0.2em;

    color: var(--current-neon);

    text-shadow:
        0 0 4px var(--current-neon),
        0 0 10px var(--current-neon),
        0 0 22px var(--current-neon),
        0 0 45px var(--current-neon);

    animation:
        neonFlicker 6s infinite,
        titleFloat 4s ease-in-out infinite;

    transition:
        color 0.8s ease,
        text-shadow 0.8s ease;
}


.subtitle {
    margin-top: 8px;

    font-size: 0.9rem;
    letter-spacing: 0.35em;

    color: #cfc2ca;

    animation: subtlePulse 3s ease-in-out infinite;
}


.bar-sign {
    position: absolute;

    top: 20px;
    right: 35px;

    padding: 6px 12px;

    border: 2px solid var(--pink);
    border-radius: 5px;

    color: var(--pink);

    font-size: 0.65rem;
    letter-spacing: 0.25em;

    box-shadow:
        0 0 8px var(--pink),
        inset 0 0 8px rgba(255, 43, 214, 0.4);

    text-shadow:
        0 0 8px var(--pink);

    animation: signFlicker 5s infinite;
}


footer {
    min-height: 50px;

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

    color: #443843;

    letter-spacing: 1em;
}


footer p {
    animation: footerGlow 6s ease-in-out infinite;
}



/* SCREENS */

.menu-screen,
.game-screen {
    width: min(950px, 94%);

    display: none;
    flex-direction: column;
    align-items: center;

    position: relative;
}


.menu-screen.active,
.game-screen.active {
    display: flex;

    animation: screenEntrance 0.7s ease forwards;
}



/* MAIN MENU */

.menu-screen {
    gap: 45px;

    padding: 30px 20px 70px;
}


.menu-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 25px;

    text-align: center;
}


.menu-logo > span {
    width: clamp(90px, 13vw, 150px);
    height: clamp(90px, 13vw, 150px);

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

    line-height: 1;
}


.menu-logo > span img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}


.logo-x {
    filter:
        drop-shadow(0 0 5px var(--red))
        drop-shadow(0 0 15px var(--red))
        drop-shadow(0 0 35px var(--red));

    animation: xPulse 2.6s ease-in-out infinite;
}


.logo-o {
    filter:
        drop-shadow(0 0 5px var(--blue))
        drop-shadow(0 0 15px var(--blue))
        drop-shadow(0 0 35px var(--blue));

    animation: oPulse 2.6s 0.4s ease-in-out infinite;
}


.menu-logo figcaption {
    flex-basis: 100%;

    margin-top: 10px;

    color: var(--pink-light);

    text-transform: uppercase;
    letter-spacing: 0.35em;

    text-shadow:
        0 0 8px var(--pink);
}


.menu-options {
    width: 100%;

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

    gap: 30px;
}


.menu-button {
    width: min(320px, 45%);
    min-height: 150px;

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

    gap: 8px;

    position: relative;

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

    background:
        linear-gradient(
            145deg,
            rgba(255, 43, 214, 0.09),
            rgba(0, 0, 0, 0.75)
        );

    color: var(--white);

    cursor: pointer;

    font-size: 1rem;
    letter-spacing: 0.18em;

    box-shadow:
        0 0 4px var(--pink),
        0 0 15px rgba(255, 43, 214, 0.25),
        inset 0 0 15px rgba(255, 43, 214, 0.08);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease,
        letter-spacing 0.25s ease;
}


.menu-button strong {
    font-size: 1.35rem;
}


.menu-button span {
    color: #a394a0;

    font-size: 0.75rem;
}


.menu-button:hover {
    transform:
        translateY(-8px)
        scale(1.035);

    letter-spacing: 0.23em;

    background:
        linear-gradient(
            145deg,
            rgba(255, 43, 214, 0.22),
            rgba(10, 0, 8, 0.9)
        );

    box-shadow:
        0 0 8px var(--pink),
        0 0 25px var(--pink),
        0 0 60px rgba(255, 43, 214, 0.38),
        inset 0 0 25px rgba(255, 43, 214, 0.16);
}


.menu-button:active {
    transform:
        translateY(-2px)
        scale(0.97);

    box-shadow:
        0 0 15px var(--pink),
        inset 0 0 35px rgba(255, 43, 214, 0.4);
}


.menu-button:focus-visible {
    outline: 3px solid white;
    outline-offset: 6px;
}


.menu-hint {
    font-size: 0.7rem;

    color: #71606e;

    letter-spacing: 0.4em;

    animation: hintBlink 2s ease-in-out infinite;
}



/* GAME HEADER */

.game-screen {
    gap: 25px;

    padding-bottom: 50px;
}


.game-header {
    width: 100%;

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

    padding: 10px 0 20px;

    border-bottom: 1px solid rgba(255, 43, 214, 0.22);
}


.game-mode {
    font-size: 0.75rem;

    letter-spacing: 0.3em;

    color: var(--current-neon);

    text-shadow:
        0 0 8px var(--current-neon);

    transition:
        color 0.8s ease,
        text-shadow 0.8s ease;
}


.small-button {
    padding: 10px 15px;

    border: 1px solid var(--current-neon);

    background: transparent;

    color: var(--current-neon);

    cursor: pointer;

    font-size: 0.65rem;
    letter-spacing: 0.18em;

    box-shadow:
        0 0 7px rgba(255, 43, 214, 0.25);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        color 0.8s ease,
        border-color 0.8s ease;
}


.small-button:hover {
    transform: translateY(-3px);

    background: var(--current-neon);

    color: black;

    box-shadow:
        0 0 8px var(--current-neon),
        0 0 20px var(--current-neon);
}


.small-button:active {
    transform: scale(0.94);
}



/* PLAYER STATUS */

.player-status {
    width: min(650px, 100%);

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

    gap: 35px;
}


.player-card {
    width: 170px;

    display: flex;
    align-items: center;

    gap: 15px;

    padding: 12px;

    border: 1px solid #292229;

    opacity: 0.4;

    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}


.player-card figcaption {
    display: flex;
    flex-direction: column;

    gap: 4px;

    font-size: 0.6rem;
    letter-spacing: 0.12em;
}


.player-card figcaption span {
    font-size: 0.5rem;
    color: #847780;
}


.player-symbol {
    width: 52px;
    height: 52px;

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

    flex-shrink: 0;
}


.player-symbol img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}


.symbol-x {
    filter:
        drop-shadow(0 0 5px var(--red))
        drop-shadow(0 0 12px var(--red));
}


.symbol-o {
    filter:
        drop-shadow(0 0 5px var(--blue))
        drop-shadow(0 0 12px var(--blue));
}


.x-player.active-player {
    opacity: 1;

    transform: scale(1.06);

    border-color: var(--red);

    box-shadow:
        0 0 12px rgba(255, 36, 56, 0.45),
        inset 0 0 12px rgba(255, 36, 56, 0.08);
}


.o-player.active-player {
    opacity: 1;

    transform: scale(1.06);

    border-color: var(--blue);

    box-shadow:
        0 0 12px rgba(31, 143, 255, 0.45),
        inset 0 0 12px rgba(31, 143, 255, 0.08);
}


.versus {
    color: #4e404b;

    font-size: 0.7rem;

    letter-spacing: 0.15em;

    animation: versusPulse 2s ease-in-out infinite;
}



/* BOARD */

.game-board-figure {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 20px;
}


.game-board {
    width: min(430px, 82vw);
    aspect-ratio: 1;

    display: flex;
    flex-wrap: wrap;

    position: relative;

    filter:
        drop-shadow(0 0 12px rgba(255, 43, 214, 0.25));
}


.grid-cell {
    width: 33.333%;
    height: 33.333%;

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

    position: relative;

    border: 1px solid var(--current-neon);

    background:
        radial-gradient(
            circle,
            rgba(255, 43, 214, 0.045),
            rgba(0, 0, 0, 0.18)
        );

    cursor: pointer;

    overflow: hidden;

    transition:
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.18s ease,
        border-color 0.8s ease;
}


.grid-cell:nth-child(1) {
    border-top: none;
    border-left: none;
}

.grid-cell:nth-child(2) {
    border-top: none;
}

.grid-cell:nth-child(3) {
    border-top: none;
    border-right: none;
}

.grid-cell:nth-child(4) {
    border-left: none;
}

.grid-cell:nth-child(6) {
    border-right: none;
}

.grid-cell:nth-child(7) {
    border-left: none;
    border-bottom: none;
}

.grid-cell:nth-child(8) {
    border-bottom: none;
}

.grid-cell:nth-child(9) {
    border-right: none;
    border-bottom: none;
}


.grid-cell:not(.occupied):hover {
    z-index: 2;

    transform: scale(1.035);

    background:
        radial-gradient(
            circle,
            rgba(255, 43, 214, 0.18),
            rgba(0, 0, 0, 0.15)
        );

    box-shadow:
        inset 0 0 25px rgba(255, 43, 214, 0.18),
        0 0 15px rgba(255, 43, 214, 0.25);
}


.grid-cell.drag-over {
    transform: scale(1.065);

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.18),
            rgba(255, 43, 214, 0.18)
        );

    box-shadow:
        inset 0 0 30px var(--current-neon),
        0 0 25px var(--current-neon);
}


.turn-message {
    color: #8a7985;

    font-size: 0.65rem;

    letter-spacing: 0.35em;

    transition:
        color 0.4s ease,
        text-shadow 0.4s ease;

    animation: messagePulse 2.5s ease-in-out infinite;
}



/* PIECES INSIDE BOARD */

.placed-piece {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 80%;
    height: 80%;

    object-fit: contain;

    user-select: none;
    pointer-events: none;
    -webkit-user-drag: none;

    animation: pieceDrop 0.45s cubic-bezier(.17, .89, .32, 1.49);
}


.placed-x {
    filter:
        drop-shadow(0 0 5px var(--red))
        drop-shadow(0 0 15px rgba(255, 36, 56, 0.65));
}


.placed-o {
    filter:
        drop-shadow(0 0 5px var(--blue))
        drop-shadow(0 0 15px rgba(31, 143, 255, 0.65));
}


.winning-cell .placed-piece {
    animation: winnerPiece 0.65s ease-in-out infinite alternate;
}



/* DRAG STATION */

.piece-station {
    min-height: 140px;

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

    gap: 12px;
}


.drag-piece {
    width: 82px;
    height: 82px;

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

    cursor: grab;

    user-select: none;

    transition:
        transform 0.2s ease,
        filter 0.2s ease,
        opacity 0.2s ease;

    animation: draggableFloat 2s ease-in-out infinite;
}


.drag-piece img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}


.drag-piece:hover {
    transform:
        translateY(-6px)
        scale(1.14);

    filter: brightness(1.4);
}


.drag-piece:active {
    cursor: grabbing;
}


.drag-piece.dragging {
    opacity: 0.35;

    transform:
        scale(0.75)
        rotate(-8deg);

    animation: none;
}


.x-piece {
    filter:
        drop-shadow(0 0 5px var(--red))
        drop-shadow(0 0 18px var(--red));
}


.o-piece {
    filter:
        drop-shadow(0 0 5px var(--blue))
        drop-shadow(0 0 18px var(--blue));
}


.drag-piece.disabled {
    opacity: 0.18;

    pointer-events: none;

    animation: none;
}


.drag-instruction {
    font-size: 0.55rem;
    letter-spacing: 0.25em;

    color: #65545f;

    text-align: center;

    animation: instructionFade 2s ease-in-out infinite;
}



/* RESULT SCREEN */

.result-screen {
    position: fixed;

    inset: 0;

    z-index: 20;

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

    gap: 50px;

    background:
        rgba(0, 0, 0, 0.9);

    opacity: 0;
    visibility: hidden;

    backdrop-filter: blur(8px);

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease,
        background 0.8s ease;
}


.result-screen.visible {
    opacity: 1;
    visibility: visible;
}


.result-display {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 20px;

    text-align: center;
}


.result-symbol {
    width: min(300px, 55vw);
    min-height: 180px;

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

    gap: 20px;

    animation: resultSymbolEntrance 0.8s cubic-bezier(.17, .89, .32, 1.49);
}


.result-symbol img {
    width: 100%;
    max-width: 250px;
    height: 250px;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;

    filter:
        drop-shadow(0 0 10px var(--current-neon))
        drop-shadow(0 0 25px var(--current-neon))
        drop-shadow(0 0 60px var(--current-neon));
}


.result-symbol img + img {
    width: 45%;
    height: 180px;
}


.result-symbol img:first-child:nth-last-child(2) {
    width: 45%;
    height: 180px;
}


.result-title {
    margin-bottom: 10px;

    color: var(--current-neon);

    font-size: clamp(2rem, 7vw, 5rem);

    letter-spacing: 0.18em;

    text-shadow:
        0 0 12px var(--current-neon);

    animation: resultFlicker 2s infinite;
}


.result-text {
    color: #a38e9d;

    font-size: 0.7rem;
    letter-spacing: 0.3em;
}


.result-buttons {
    display: flex;
    gap: 20px;
}


.result-button {
    min-width: 150px;

    padding: 15px 22px;

    border: 2px solid var(--current-neon);

    background: transparent;

    color: var(--current-neon);

    cursor: pointer;

    letter-spacing: 0.2em;

    box-shadow:
        0 0 10px rgba(255, 43, 214, 0.25);

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


.result-button:hover {
    transform:
        translateY(-5px)
        scale(1.04);

    background: var(--current-neon);

    color: black;

    box-shadow:
        0 0 12px var(--current-neon),
        0 0 35px var(--current-neon);
}


.result-button:active {
    transform: scale(0.94);
}



/* WIN STATES */

body.x-wins {
    --current-neon: var(--red);
    --current-neon-light: var(--red-light);

    background:
        radial-gradient(
            circle at center,
            #31070c 0%,
            #100205 45%,
            #020000 85%
        );
}


body.o-wins {
    --current-neon: var(--blue);
    --current-neon-light: var(--blue-light);

    background:
        radial-gradient(
            circle at center,
            #051d38 0%,
            #020b14 45%,
            #000203 85%
        );
}


/* Colour override */

body.x-wins .logo-x,
body.x-wins .logo-o,
body.x-wins .symbol-x,
body.x-wins .symbol-o,
body.x-wins .placed-x,
body.x-wins .placed-o {
    filter:
        drop-shadow(0 0 6px var(--red))
        drop-shadow(0 0 18px var(--red))
        drop-shadow(0 0 45px var(--red));
}


body.o-wins .logo-x,
body.o-wins .logo-o,
body.o-wins .symbol-x,
body.o-wins .symbol-o,
body.o-wins .placed-x,
body.o-wins .placed-o {
    filter:
        drop-shadow(0 0 6px var(--blue))
        drop-shadow(0 0 18px var(--blue))
        drop-shadow(0 0 45px var(--blue));
}



/* DRAW STATE */

body.draw-game {
    --current-neon: var(--pink);
}



/* SCREEN TRANSITIONS */

.screen-exit {
    animation: screenExit 0.45s ease forwards;
}



/* ANIMATIONS*/

@keyframes neonFlicker {

    0%,
    18%,
    22%,
    25%,
    53%,
    57%,
    100% {
        opacity: 1;
    }

    20%,
    24%,
    55% {
        opacity: 0.45;
    }
}


@keyframes signFlicker {

    0%,
    9%,
    12%,
    18%,
    55%,
    58%,
    100% {
        opacity: 1;
    }

    10%,
    17%,
    56% {
        opacity: 0.1;
    }
}


@keyframes titleFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}


@keyframes subtlePulse {

    0%,
    100% {
        opacity: 0.45;
    }

    50% {
        opacity: 0.9;
    }
}


@keyframes xPulse {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.06);
        filter: brightness(1.35);
    }
}


@keyframes oPulse {

    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.06);
        filter: brightness(1.35);
    }
}


@keyframes hintBlink {

    0%,
    100% {
        opacity: 0.25;
    }

    50% {
        opacity: 0.85;
    }
}


@keyframes versusPulse {

    0%,
    100% {
        opacity: 0.35;
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.1);
    }
}


@keyframes messagePulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}


@keyframes pieceDrop {

    0% {
        opacity: 0;
        transform:
            scale(1.8)
            rotate(15deg);
        filter: brightness(2.5);
    }

    65% {
        transform:
            scale(0.88)
            rotate(-4deg);
    }

    100% {
        opacity: 1;
        transform:
            scale(1)
            rotate(0);
        filter: brightness(1);
    }
}


@keyframes winnerPiece {

    from {
        transform: scale(1);
        filter: brightness(1);
    }

    to {
        transform: scale(1.18);
        filter: brightness(1.8);
    }
}


@keyframes draggableFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}


@keyframes instructionFade {

    0%,
    100% {
        opacity: 0.25;
    }

    50% {
        opacity: 0.75;
    }
}


@keyframes screenEntrance {

    from {
        opacity: 0;
        transform:
            translateY(20px)
            scale(0.98);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes screenExit {

    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform:
            scale(0.96)
            translateY(-10px);
    }
}


@keyframes resultSymbolEntrance {

    from {
        opacity: 0;
        transform:
            scale(0.2)
            rotate(-20deg);
    }

    to {
        opacity: 1;
        transform:
            scale(1)
            rotate(0);
    }
}


@keyframes resultFlicker {

    0%,
    19%,
    23%,
    70%,
    74%,
    100% {
        opacity: 1;
    }

    21%,
    72% {
        opacity: 0.35;
    }
}


@keyframes footerGlow {

    0%,
    100% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.55;
    }
}



/* RESPONSIVE*/

@media (max-width: 650px) {

    .site-header {
        min-height: 110px;
    }


    .bar-sign {
        top: 12px;
        right: 14px;
    }


    .menu-options {
        flex-direction: column;
        align-items: center;
    }


    .menu-button {
        width: min(360px, 95%);
    }


    .game-header {
        gap: 10px;
    }


    .game-mode {
        max-width: 140px;

        text-align: center;

        line-height: 1.7;
    }


    .player-status {
        gap: 10px;
    }


    .player-card {
        width: 130px;

        gap: 8px;

        padding: 8px;
    }


    .player-symbol {
        width: 40px;
        height: 40px;
    }


    .versus {
        font-size: 0.55rem;
    }


    .result-buttons {
        flex-direction: column;
    }


    .result-button {
        width: 220px;
    }

}