@import url("./flip-grid-horizontal.css");
@import url("./flip-grid-vertical.css");
@import url("./grid.css");

body {
    display:grid;
    grid-template-rows: min-content 1fr min-content;
}

/*header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0;

}

header hgroup {
    text-align: center
}

header h1 {
    font-size: 1.4rem;
    margin:0
}

header p {
    font-size: 1rem
}*/

body > header {
        justify-content: space-between;
        flex-direction: row;
}
body > header hgroup {
    display: flex;
    flex-direction: column;
    text-align: center;
}

body > header h1 {
    font-size: 1.5rem;
    margin: 0;
}

body > header p {
        font-size: 0.95rem;
}

body > header p:before {
    content: attr(data);
    margin-right:0.25rem
}

main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    padding-top: 0;
}

.toolbar {
    list-style: none;
    margin: 0 auto;
    display: flex;
    justify-content: space-evenly;
    box-sizing: border-box;
    width: 100vw;
    margin-bottom: 1.5rem;
}

.toolbar svg {
    width: 2.3rem;
    height: 2.75rem;
}

.toolbar button {
    flex-direction: column;
    gap:0.25rem
}


.toolbar .with-text  {
flex-direction: column;
    justify-content: flex-start;
    font-size: 0.65rem;
    text-decoration: none;
    display: flex;
    gap: 0;
    font-weight: 900;
    text-transform: uppercase;
}





.players {
    margin: 0;
    list-style: none;
    padding: 0;
    z-index: 10;
    display: flex;
    width: calc((var(--cell-size) * var(--col-count)) + (0.1rem * 5));
    left: 0;
    position: relative;
}

.players li {
    position: relative;
}

.players button {
    flex-direction: column-reverse;
}

.players button span {
    display: block;
    rotate: -45deg;
    left: -0.65rem;
    top: 0.75rem;
    position: relative;
}

.players button svg {
    width:2rem;
    height:2rem;
}

#app-title.boom {
    animation-name: boom;
    animation-direction: alternate;
    animation-fill-mode: backwards;
    animation-duration: 1.5s;
}

@keyframes boom {
    0% {         
    }

    50% {
        z-index: 9;     
        rotate: 6deg;
        scale: 150%; 
        /*box-shadow: 8px 6px 11px 0px rgba(0, 0, 0, 0.35);*/      
    }

    100% {
    }
}

#app-title.boom-out {
    animation-name: boom-out;
    animation-direction: alternate;
    animation-fill-mode: backwards;
    animation-duration: 1.5s;
}

@keyframes boom-out {
    0% {         
    }

    50% {
        z-index: 9;     
        rotate: -6deg;
        scale: 150%; 
        /*box-shadow: 8px 6px 11px 0px rgba(0, 0, 0, 0.35);*/      
    }

    100% {
    }
}

#list-of-found-common-words,
#list-of-found-bonus-words {
    flex-direction: column-reverse;
}


#popover-mode main menu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#popover-mode main li,
#popover-mode main button {
    width:100%
}

#popover-mode main menu {
    display: flex;
    flex-direction: column;
}


.header-dropdown {
    font-family: "RubikDirt";
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    font-size: 1.5rem;
    background: none;
    border: none;
    padding-left: 1.5rem;
    justify-content: center;
}

.header-dropdown svg {
    width: 1.5rem;
}

#score {
    font-family: "RubikDirt";
    font-size: 1rem;
    margin: 0;
    transition: all 0.3s;
    text-align: center;
}

.display-menu {
    display: flex;
    flex-direction: column;
}

.header-dropdown.highlighting-word {
    padding-left:0;
}

.header-dropdown.highlighting-word svg {
    width:0;
}