/******************************************************
*               Fonts
******************************************************/
@font-face {
    /*
        Font by:  SpideRaYsfoNtS
        https://www.dafont.com/skyfall-done.font
    */
    font-family: SkyFallDone;
    src: url("SkyFall Done.ttf");
}

@import url('https://fonts.googleapis.com/css?family=Montserrat:700&display=swap');

/******************************************************
*               Global
******************************************************/

body {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;
    background: #f2efe8;
}

h1 {
    font-family: SkyFallDone, sans-serif;
}

.vertical-align {
    height: 100vh;
    width: 100vw;

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

/**
* Seedbox
*/
.seedbox {
    position: absolute;
    top: 15px;
    left: 15px;

    height: 35px;
    width: 200px;

    border: 2px dotted #c0c0c0;
}

.seedbox input {
    height: 100%;
    width: calc(100% - 10px);
    border: none;
    padding: 0;
    background: none;

    line-height: 35px;
    padding: 0 5px;

    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #a3a3a3;
    text-transform: uppercase;
}


/******************************************************
*               Index
******************************************************/

#index a {
    margin: 15px 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: black;
    text-transform: uppercase;
    text-decoration: none;
}

/******************************************************
*               Board
******************************************************/

#board {
    --gap-size: 5px;
    --cell-height: 100px;
    --cell-width: 200px;
    --cell-border: 5px;
}

#board h1 {
    user-select: none;
}

/**
* Grid
*/

#board .grid {
    height: var(--grid-size);
    width: var(--grid-size);

    display: grid;
    gap: var(--gap-size);

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

#board .item-border {
    height: calc(var(--cell-height));

    background: #e2cea3;
    border: var(--cell-border) solid #e2cea3;
    border-radius: 8px;

    user-select: none;
    cursor: pointer;
}

#board .item-border:before {
    content: "codename";
    font-family: SkyFallDone, sans-serif;
    color: #ccba93;
    font-size: 20px;

    line-height: 40px;
}

#board .item {
    height: calc(var(--cell-height) * 0.6);
    width: var(--cell-width);

    background: white;
    border-radius: 5px;

    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 24px;

    color: black;
    text-align: center;
    line-height: calc(var(--cell-height) * 0.6);
}

/**
* Cell colors
*/

#board .item-border.red {
    background: #d21320;
    border-color: #d21320;
}

#board .item-border.red:before {
    content: "red";
    color: #bf111d;
}


#board .item-border.blue {
    background: #0f739d;
    border-color: #0f739d;
}

#board .item-border.blue:before {
    content: "blue";
    color: #0e668c;
}

#board .item-border.innocent:before {
    content: "innocent";
}

#board .item-border.red .item,
#board .item-border.blue .item,
#board .item-border.innocent .item {
    text-decoration: line-through;
}

/******************************************************
*               Spymaster map
******************************************************/
#map {
    --item-size: 64px;
    --gap-size: 8px;
    --grid-size: calc(var(--item-size) * 5 + var(--gap-size) * 4);
    --light-height: 15px;
    --light-width: 64px;
}

#map h1 {
    user-select: none;
}

/**
*   Lights around outside
*/

#map .wrapper {
    height: calc(var(--grid-size) + 20px + 2 * var(--light-height));
    width: calc(var(--grid-size) + 20px + 2 * var(--light-height));

    display: grid;
    grid-template-areas:
        ". t ."
        "l m r"
        ". b .";
    grid-template-columns: var(--light-height) auto var(--light-height);
    grid-template-rows: var(--light-height) auto var(--light-height);
}

#map .light-wrapper {
    display: flex;
    align-items: center;
    justify-items: center;
}

#map .light-wrapper .light.red {
    background: #d21320;
}

#map .light-wrapper .light.blue {
    background: #0f739d;
}

#map .light-wrapper.horizontal .light {
    height: 100%;
    width: var(--light-width);
    margin: 0 auto;
}

#map .light-wrapper.vertical .light {
    width: 100%;
    height: var(--light-width);
}

#map .light-wrapper.top {
    grid-area: t;
}

#map .light-wrapper.bottom {
    grid-area: b;
}

#map .light-wrapper.left {
    grid-area: l;
}

#map .light-wrapper.right {
    grid-area: r;
}

/**
*   Grid and items
*/

#map .grid-border {
    /* Position in .wrapper grid */
    grid-area: m;

    height: calc(var(--grid-size) + 20px);
    width: calc(var(--grid-size) + 20px);
    background: #53453c;

    border: 5px solid #53453c;
    border-radius: 15px;
}

#map .grid {
    height: var(--grid-size);
    width: var(--grid-size);
    background: black;

    padding: 5px;

    border: 5px solid black;
    border-radius: 10px;


    display: grid;
    gap: var(--gap-size);

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

#map .item {
    width: calc(var(--item-size) - 6px);
    height: calc(var(--item-size) - 6px);

    background: #e2cea3;
    border: 3px solid #e2cea3;
    border-radius: 3px;

    color: white;
    text-align: center;
    line-height: calc(var(--item-size) - 6px);
}

/**
*   Colors and symbols for items in grid
*/

#map .item.black {
    background: #474543;
    border-color: #474543;
}

#map .item.black:before {
    content: "\2715";
}

#map .item.red {
    background: #d21320;
    border-color: #d21320;
}

#map .item.red:before {
    content: "\1F785";
}

#map .item.blue {
    background: #0f739d;
    border-color: #0f739d;
}

#map .item.blue:before {
    content: "\25C7";
}