html, body {

    margin: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

}


#game-container {

    position: relative;

    width: 100vw;
    height: 100vh;

}

#grid {
    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    background-color: #222;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(255,255,255,0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.04) 1px,
            transparent 1px
        );

    background-size:
        250px 250px,
        250px 250px,
        50px 50px,
        50px 50px;
}

#world-layer {

    position: absolute;

    inset: 0;

    z-index: 1;

}


#message-log {

    position: absolute;

    left: 20px;
    bottom: 20px;

    width: 500px;

    color: white;

    font-family: sans-serif;
    font-size: 18px;

    pointer-events: none;

    display: flex;
    flex-direction: column;
    gap: 8px;

    z-index: 10;

}

#screen-layer {

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

}


#game {

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    pointer-events: auto;

}

#screen {

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    z-index: 4;

    pointer-events: none;

}


#menu {

    position: absolute;

    right: 0;
    top: 0;

    width: 30%;
    height: 100%;

    background: #444444c5;

    color: white;

    padding: 20px;

    box-sizing: border-box;

    font-family: sans-serif;

    z-index: 2;

    pointer-events: none;

}

#menu {
    overflow: visible;
}

#menu-tabs {

    position: absolute;

    left: -120px;  
    top: 20px;

    display: flex;
    flex-direction: column;

    gap: 5px;

    width: 100px;

    pointer-events: auto;

}

.tab-button {
    width: 120px;

    padding: 12px;

    box-sizing: border-box;

    border-radius: 10px 0 0 10px;

    border: 1px solid rgba(255,255,255,0.25);

    border-right: none;

    background: #444444c5;

    color: white;

    cursor: pointer;
}

.tab-button.active {

    background: #8a5cffc5;

    transform: translateX(-8px);
     width: 128px;

}

#menu-content {

    position: relative;

    margin-top: 0;

}

#target-card-text {

    color: white;

    font-size: 22px;

    text-align: center;

    margin-top: 60px;

    margin-bottom: 20px;

    font-family: sans-serif;

}

.menu-panel {

    display: none;

}

.menu-panel.active {

    display: block;

}

#menu button {
    pointer-events: auto;
}

#menu h2 {

    margin-top: 0;

}

#use-button {
    position: fixed;
    font-size: 24px;
    padding: 12px 50px;
    z-index: 10;
}