@font-face {
    font-family: iceberg;
    src: url('/fonts/Iceberg/Iceberg-Regular.ttf');
}

@font-face {
    font-family: silkscreen;
    src: url('/fonts/Silkscreen/Silkscreen-Regular.ttf');
}

@font-face {
    font-family: unica;
    src: url('/fonts/Unica_One/UnicaOne-Regular.ttf');
}

@font-face {
    font-family: quantico;
    src: url('/fonts/Quantico/Quantico-Regular.ttf');
}

:root {
    --turn-color: #000;
}


* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: #e7e7e7;
    font-family: unica;
}

h1 {
    align-self: end;
    text-align: center;
    font-size: clamp(2.4rem, 12vw, 3rem);
    margin: 0;
    color: #cb13d8;
}

header {
    display: grid;
    gap: 0.5rem;
}

mark {
    background-color: transparent;
    color: #ff9d0d;
}


.app {
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(auto, max-content) auto;
    overflow: hidden;
    gap: 0.875rem;
    padding: 0.75rem 16px;
    align-items: center;
}

.game-wrapper {
    display: grid;
    place-content: center;
    overflow: hidden;
    align-self: stretch;
}

.game-container {
    height: 100%;
    max-height: 660px;
    overflow: hidden;
    gap: clamp(2px, 0.5vw, 12px);
    aspect-ratio: 1 / 1;

    >* {
        border: 2px solid currentColor;
        pointer-events: none;

        color: #aaa;
        filter: grayscale(100%);

        transition: all .4s;

        &.active {
            background-color: #fff;
            filter: none;
            pointer-events: auto;
            color: var(--turn-color);
            box-shadow: 0 0 0.3cqw #b8b8b8;
            cursor: pointer;
        }

        &.won {
            background-color: transparent;
            color: transparent;
            pointer-events: none;
            filter: none;
            pointer-events: auto;
            /* color: #000; */
            box-shadow: none;
            filter: grayscale(1);

            >* {
                display: none;
            }
        }
    }
}

[data-toe-type="container"] {
    display: grid;
    grid-template-columns: repeat(3, minmax(auto, 270px));
    justify-content: center;

}


[data-toe-num] {
    aspect-ratio: 1 / 1;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    container-type: size;

    &[data-shape="x"] {

        &::before,
        &::after {
            content: "";
            position: absolute;
            width: 90cqw;
            height: clamp(2px, 7cqw, 6px);
            background-color: #cb13d8;
            grid-area: 1 / 1 / -1 / -1;
        }

        &::before {
            transform: rotate(45deg)
        }

        &::after {
            transform: rotate(-45deg)
        }
    }

    &[data-shape="o"] {

        &::before {
            content: "";
            position: absolute;
            width: 64cqw;
            height: 64cqw;
            border: clamp(2px, 7cqw, 6px) solid #ff9d0d;
            border-radius: 50%;
        }
    }

}

.main-footer {
    text-align: center;
    font-size: 0.8em;
}

.multiplayer-panel {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
}

.connection-status {
    min-height: 1.25rem;
    margin: 0;
    text-align: center;

    &[data-status="error"] {
        color: #a40000;
    }
}

.lobby-actions,
.join-room,
.room-details,
.rematch-actions,
.modal-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.lobby-actions[hidden],
.room-details[hidden],
.rematch-actions[hidden] {
    display: none;
}

button,
input {
    min-height: 2.25em;
    border: 2px solid #222;
    border-radius: 0;
    background: #fff;
    padding: 0.35em 0.75em;
    font: inherit;
    color: inherit;

}

button {
    cursor: pointer;

    &:disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }
}

input {
    width: 9rem;
    text-transform: uppercase;
}

.room-details strong {
    color: #cb13d8;
    letter-spacing: 0.1em;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* MODAL STYLES */

.modal-container {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    inset: 0;
    display: grid;
    z-index: 1;
    place-items: center;
    opacity: 0;
    pointer-events: none;

    transition: opacity .6s;

    &.active {
        opacity: 1;
        pointer-events: auto;
    }

    >.modal {
        background-color: #fff;
        font-size: 30px;
        padding: 20px;
        border: 2px solid #000;

        >p {
            margin-top: 0;
            text-align: center;
        }
    }

}