/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    /* Layout */
    --max-width: 1000px;
    --container-height: 100%;
    --footer-padding: 1.6rem;

    /* Typography */
    --font-family: "Cabin", sans-serif;
    --sans-font-family: "Roboto", sans-serif;
    --font-size: 1.5rem;

    /* Buttons */
    --button-border-radius: 1.5rem;
    --button-border-top-left: hsl(195 25% 90%);
    --button-border-bottom-right: hsl(195 25% 50%);
    --button-shadow: 0.25rem 0.25rem .5rem rgba(0,0,0,.6);

    /* Share */
    --share-padding: 2.4rem;
    --share-background-grad: linear-gradient(-45deg, hsl(195 5% 5%), hsl(345 5% 5%));

    --share-border-radius: 0.75rem;
    --share-border-thickness: 0.25rem;
    --share-border-top-left: hsl(195 50% 20%);
    --share-border-bottom-right: hsl(345 50% 20%);

    /* Tiles */
    --tile-padding: 0.75rem;
    --tile-margin: 0.25rem;
    --tile-border-radius: 0.75rem;
    --tile-border-thickness: 0.15rem;

    /* Text */
    --text-shadow: 0.0625rem 0.0625rem 0.125rem rgba(0,0,0,.8);

    /* Gradients */
    --ui-grad: linear-gradient(
        135deg,
        hsl(195 15% 65%),
        hsl(195 15% 85%),
        hsl(195 15% 65%)
    );

    --footer-menu-grad: linear-gradient(
        135deg,
        hsl(195 15% 20%),
        hsl(195 15% 30%),
        hsl(195 15% 20%)
    );

    /* Tile states */

    --unselected-grad:
        linear-gradient(-45deg, hsl(195 100% 40%), hsl(195 100% 20%));

    --unselected-border-top-left: hsl(195 100% 50%);
    --unselected-border-bottom-right: hsl(195 100% 20%);

    --selected-grad:
        linear-gradient(135deg, hsl(345 100% 40%), hsl(345 100% 20%));

    --selected-border-top-left: hsl(345 100% 20%);
    --selected-border-bottom-right: hsl(345 100% 50%);

    --bingo-grad:
        linear-gradient(135deg, hsl(50 100% 60%), hsl(50 100% 80%), hsl(50 100% 60%));

    --bingo-border-top-left: hsl(50 100% 90%);
    --bingo-border-bottom-right: hsl(50 100% 50%);

    --bingo-text-color: hsl(195 25% 10%);
    --bingo-text-shadow: 0.125rem 0.125rem 0.25rem hsla(50 100% 95% / 0.6);

    /* UI */
    --ui-label-color: hsl(195 25% 25%);

    /* Dropdown arrow */
    --cat-dropdown-arrow-size: .625rem;
    --cat-dropdown-arrow-color: hsl(345 100% 50%);

    /* Blur / effects */
    --lobby-blur: 0.5rem;
    --ui-menu-blur: 0.0625rem;
    --board-blur: 0.25rem;
    --tile-blur: 0.0625rem;
    --tile-desaturate: 60%;

    /* Bingo pulse */
    --pulse-min-scale: 0.96;
    --pulse-rotation: 2.5deg;
    --pulse-duration: 1.5s;

}

/* =========================================================
   GLOBAL
========================================================= */

html, body {
    height: var(--container-height);
    margin: 0;
}

html {
    background-color: hsl(195 25% 5%);
    font-family: var(--font-family);
    font-weight: 500;
    font-size: var(--font-size);

    color: white;

    overflow: hidden;
    user-select: none;
}

body {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

/* =========================================================
   LOBBY / LAYOUT
========================================================= */

#lobby {
    position: relative;
    margin: 0 auto;

    max-width: var(--max-width);
    height: var(--container-height);

    background-image:
        linear-gradient(
            180deg,
            hsl(210 100% 10%),
            20%,
            transparent,
            80%,
            hsl(345 100% 10%)
        );
}

#lobby.blur {
    filter: blur(var(--lobby-blur)) brightness(0.4);
}

#lobby.hidden {
    display: none;
}

#button-container {
    position: relative;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

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

    gap: 1.6rem;
}

/* =========================================================
   LOGO
========================================================= */

#logo-container {
    position: relative;
    width: 25vw;
    margin-bottom: 3.2rem;
}

.bcb-logo {
    position: relative;
    z-index: 1;

    width: 100%;
    height: auto;

    display: block;
}

.glow-cycle {
    animation: logo-glow 0.8s ease-in-out infinite alternate;
}

/* =========================================================
   BUTTONS
========================================================= */

.button {
    box-sizing: border-box;

    padding: 1.6rem;
    margin: 0 6rem;

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

    width: calc(100% - 6rem);

    color: var(--ui-label-color);
    background-image: var(--ui-grad);

    border-radius: var(--button-border-radius);

    border-top: .25rem solid var(--button-border-top-left);
    border-left: .25rem solid var(--button-border-top-left);
    border-right: .25rem solid var(--button-border-bottom-right);
    border-bottom: .25rem solid var(--button-border-bottom-right);

    text-transform: uppercase;

    text-shadow: 0.125rem 0.125rem 0.25rem hsla(0 0% 0% / .2);

    box-shadow: var(--button-shadow);
}

.button-title {
    font-size: 2.4rem;
}

.button .player-name {
    font-size: 1.8rem;
}

.disabled {
    cursor: not-allowed;
    color: hsl(195 15% 50%);
    opacity: .4;
}

/* =========================================================
   INPUTS
========================================================= */

input {

    appearance: none;

    box-sizing: border-box;

    padding: .5rem;
    margin-top: 1.2rem;

    width: 100%;

    font-family: var(--font-family);
    font-size: 2.4rem;
    font-weight: 600;

    text-align: center;

    color: var(--ui-label-color);

    border-radius: .5rem;
    border: .125rem solid hsl(195 15% 45%);

}

#game-code-input {
    font-weight: 800;
    letter-spacing: 0.4rem;
    color: hsl(345 100% 25%);
    
    text-transform: uppercase;
    margin: 0 0 1.2rem;
}

input::placeholder {
    color: hsl(195 15% 85%);
}

/* =========================================================
   SHARE CODE/LINK
========================================================= */

#share-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;

    padding: var(--share-padding);
    width: calc(100% - var(--footer-padding) * 4);

    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;

    font-size: 1.6rem;
    color: hsl(195 25% 75%);
    text-align: center;

    background-image: var(--share-background-grad);
    border-radius: var(--button-border-radius);

    box-shadow: 0 0 8.0rem hsla(195 5% 95% / 0.4);
}

#share-container .code {
    font-size: 3.2rem;
    letter-spacing: 0.4rem;
    color: hsl(195 0% 100%);
    text-shadow: 0 0 2.4rem hsla(195 5% 100% / 0.4);
}

#share-container a.share-code {
    color: hsl(195 100% 50%);
    cursor: pointer;
}

#share-container #share-container-buttons {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;

    gap: 0.8rem;
    margin-top: 1.6rem;
}

#share-container .share-button {
    box-sizing: border-box;
    padding: 0.8rem;
    border-radius: var(--share-border-radius);
    
    border-top: var(--share-border-thickness) solid var(--share-border-top-left);
    border-left: var(--share-border-thickness) solid var(--share-border-top-left);
    border-right: var(--share-border-thickness) solid var(--share-border-bottom-right);
    border-bottom: var(--share-border-thickness) solid var(--share-border-bottom-right);
    
    cursor: pointer;
}

#share-container.hidden {
    display: none;
}

/* =========================================================
   GAME OVER UI
========================================================= */

#game-over-ui {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    padding: var(--footer-padding);
    width: calc(100% - var(--footer-padding) * 6);
    
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 0.8rem;

    font-size: 3.2rem;
    color: var(--ui-label-color);
    text-align: center;
    text-shadow: var(--bingo-text-shadow);

    z-index: 5;

    background-image: var(--bingo-grad);
    border-radius: var(--button-border-radius);

    box-shadow: var(--button-shadow);
}

#return-to-lobby-button {
    border: 0.125rem solid var(--ui-label-color);
    padding: 1.6rem;
    margin-top: 0.8rem;
    
    font-size: 1.6rem;
    text-transform: uppercase;
    border-radius: var(--tile-border-radius);

    border-top: 0.25rem solid var(--bingo-border-top-left);
    border-left: 0.25rem solid var(--bingo-border-top-left);
    border-right: 0.25rem solid var(--bingo-border-bottom-right);
    border-bottom: 0.25rem solid var(--bingo-border-bottom-right);

    box-shadow: var(--button-shadow);
}

#game-over-ui.hidden {
    display: none;
}

/* =========================================================
   GAME CONTAINER
========================================================= */

#container {
    display: none;

    position: relative;

    left: 50%;
    transform: translateX(-50%);

    flex-direction: column;

    max-width: var(--max-width);
    height: var(--container-height);

    background-image:
        linear-gradient(
            180deg,
            hsl(210 100% 10%),
            33.333%,
            transparent
        );
}

/* =========================================================
   BOARD
========================================================= */

#board {
    flex: 1;

    display: grid;

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

    gap: var(--tile-margin);
    padding: var(--tile-margin);

    text-shadow: var(--text-shadow);

    transition: filter .25s ease;
}

#board.blur {
    filter: blur(var(--board-blur)) brightness(0.5);
}

#board.bingo {
    pointer-events: none;
}

#board.hidden {
    display: none !important;
}

/* =========================================================
   TILES
========================================================= */

.tile {
    box-sizing: border-box;

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

    padding: var(--tile-padding);

    border-radius: var(--tile-border-radius);

    text-align: center;
    overflow: hidden;

    background-image: var(--unselected-grad);

    border-top: var(--tile-border-thickness) solid var(--unselected-border-top-left);
    border-left: var(--tile-border-thickness) solid var(--unselected-border-top-left);
    border-right: var(--tile-border-thickness) solid var(--unselected-border-bottom-right);
    border-bottom: var(--tile-border-thickness) solid var(--unselected-border-bottom-right);

    transition: transform .125s ease;
}

.tile:active {
    transform: scale(.96);
}

.tile.selected {
    background-image: var(--selected-grad);

    border-top: var(--tile-border-thickness) solid var(--selected-border-top-left);
    border-left: var(--tile-border-thickness) solid var(--selected-border-top-left);
    border-right: var(--tile-border-thickness) solid var(--selected-border-bottom-right);
    border-bottom: var(--tile-border-thickness) solid var(--selected-border-bottom-right);
}

.tile.bingo {
    background-image: var(--bingo-grad);

    border-top: var(--tile-border-thickness) solid var(--bingo-border-top-left);
    border-left: var(--tile-border-thickness) solid var(--bingo-border-top-left);
    border-right: var(--tile-border-thickness) solid var(--bingo-border-bottom-right);
    border-bottom: var(--tile-border-thickness) solid var(--bingo-border-bottom-right);

    color: var(--bingo-text-color);
    text-shadow: var(--bingo-text-shadow);

    animation: pulse var(--pulse-duration) ease-in-out infinite;
}

.tile.not-bingo {
    filter: blur(var(--tile-blur)) saturate(var(--tile-desaturate));
    transform: scale(.98);
}

/* =========================================================
   SPECIAL TILE TYPES
========================================================= */

.free-space {
    background-image: none !important;

    font-size: 4rem;

    pointer-events: none;

    text-shadow: none !important;
}

/* =========================================================
   TYPOGRAPHY HELPERS
========================================================= */

em span {
    font-style: normal;
}

sup {
    all: unset;

    font-size: .625rem;
    vertical-align: .1875rem;
}

.stars {
    padding-right: .09375rem;

    font-size: .75rem;
    letter-spacing: -.0625rem;

    vertical-align: .03125rem;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes logo-glow {
    0% {
        filter:
            drop-shadow(0 0 1rem hsl(195 100% 90%))
            drop-shadow(0 0 2rem hsl(195 100% 70%))
            drop-shadow(0 0 4rem hsl(195 100% 60%));
        transform:
            translateY(-2.5%);
    }

    100% {
        filter:
            drop-shadow(0 0 1rem hsl(345 100% 90%))
            drop-shadow(0 0 2rem hsl(345 100% 70%))
            drop-shadow(0 0 4rem hsl(345 100% 60%));
        transform:
            translateY(+2.5%);
    }
}

@keyframes pulse {
    0% { transform: scale(1) rotate(0deg); }

    25% {
        transform: scale(var(--pulse-min-scale)) rotate(var(--pulse-rotation));
    }

    50% { transform: scale(1) rotate(0deg); }

    75% {
        transform: scale(var(--pulse-min-scale)) rotate(calc(var(--pulse-rotation) * -1));
    }

    100% { transform: scale(1) rotate(0deg); }
}

/* =========================================================
   MEDIA QUERIES
========================================================= */

@media screen and (max-width: 480px) {
    :root {

        --font-size: .9375rem;
        --tile-border-thickness: .125rem;
        --tile-padding: .25rem;

    }

    .free-space {
        font-size: 3rem;
    }
}