/*-----------------GAME-----------------*/

.window.game #board
{
    border: var(--BORDER);
    width: 50%;
    aspect-ratio: 1 / 2;
    float: left;
    background-color: var(--BORDER-COLOR);
    position: relative;
}

.bonus-display
{
    position: absolute;
    background-color: var(--TABLE-BG-COLOR);
    border: var(--BORDER);
    box-sizing: border-box;
    width: 90%;
    left: 5%;
    padding-block: 1em;
}

.window.game .bonus-display
{
    margin-top: 31.3rem;
}

.window.how-to-play .bonus-display
{
    margin-top: 15.65rem;
}

.bonus-display img
{
    height: 3rem;
}

.bonus-display.hidden
{
    animation: blur;
    opacity: 0;
}

.bonus-display:not(.hidden)
{
    opacity: .8;
}

@keyframes blur
{
    0%
    {
        opacity: .8;
    }
    100%
    {
        transform: scale(1.2);
        opacity: 0;
    }
}

.bonus-display.shown
{
    animation: shown;
}

@keyframes shown
{
    0%
    {
        transform: scale(0.9);
    }
    100%
    {
        transform: scale(1);
    } 
}

.window.editor #edit
{
    margin-top: 1.6rem;
    border: var(--BORDER);
    width: 30rem;
    aspect-ratio: 7 / 5;
    margin-inline: auto;
    position: relative;
    background-color: var(--BORDER-COLOR);
}

.window.how-to-play #tutorial
{
    border: var(--BORDER);
    background-color: var(--BORDER-COLOR);
    display: inline-block;
    margin-block: 3rem;
    width: 40rem;
    aspect-ratio: 1 / 1;
    position: relative;
}

.window.game .line.short
{
    display: block;
    height: 1.4rem;
    margin: 1.6rem auto;
    width: 100%;
}

.window.game #scoreboard
{
    float: right;
    width: 43%;
    box-sizing: border-box;
}

.window.game #preview
{
    float: right;
    border: var(--BORDER);
    width: 35%;
    aspect-ratio: 7 / 6;
    background-color: var(--TABLE-BG-COLOR);
    margin-bottom: 1.5rem;
}

.window.game #next
{
    height: calc(100% / 6);
    width: 100%;
}

.window.game #next-img
{
    height: 100%;
    float: left;
}

.window.game .img
{
    display: block;
    float: left;
    height: 100%;
}

.window.game .digit
{
    display: block;
    float: right;
    height: 100%;
}

.window.game .value-display .value
{
    height: 100%;
    float: right;
}

.window.game .value-display
{
    height: 3rem;
    width: 95%;
    clear: both;
    margin-inline: auto;
}

.window.game :is(#speed-img, #game-mode-img)
{
    height: 3rem;
}

.window.game :is(#speed-img-value, #game-mode-img-value)
{
    height: 3rem;
}

.window.game #game-button
{
    display: block;
    margin: 2rem auto;
    height: 5.2rem;
}

.pixel
{
    font-family: monospace;
    aspect-ratio: 1 / 1;
    float: left;
    border-radius: 0.5rem;
    box-sizing: border-box;
    border-style: outset;
    border-width: 0.7rem;
    display: grid;
    place-content: center;
    font-size: 1.6rem;
    overflow: hidden;
    font-weight: 700;
    background-size: cover;
    color: var(--TABLE-BG-COLOR);
}

.window.editor #edit .pixel
{
    height: 20%;
}

.window.game #board .pixel
{
    width: 10%;
}

.window.how-to-play #tutorial .pixel
{
    width: 10%;
}

.window.game #preview .pixel
{
    height: calc(100% / 6);
}

.window.game #controls
{
    display: none;
}

@media screen and (min-height: 125vw)
{
    .window.game #controls
    {
        display: inline-block;
    }
}

.window.game .control
{
    height: 18rem;
}

.window.game .control.hard-drop
{
    display: block;    
    margin-inline: auto;
}

.window.game .reverse
{
    transform: scaleY(-1)
}

.window.editor #edit .pixel.empty
{
    background-color: var(--TABLE-BG-COLOR);
    border: 0.2rem solid var(--BORDER-COLOR);
}

.window.editor #edit .pixel:not(.empty)
{
    background-color: #00ffff;
    border-color: #00e0e0;
    border-width: 0.8rem;
}

.window.game #board .pixel.empty
{
    background-color: var(--TABLE-BG-COLOR);
    border: 0.2rem solid var(--BORDER-COLOR);
}

.window.how-to-play #tutorial .pixel.empty
{
    background-color: var(--TABLE-BG-COLOR);
    border: 0.2rem solid var(--BORDER-COLOR);
}

.window.how-to-play #tutorial .pixel
{
    border-width: 0.8rem;
}

.window.game #preview .pixel.empty
{
    background-color: var(--TABLE-BG-COLOR);
    border-width: 0;
}

.pixel.light-blue
{
    background-color: #00ffff;
    border-color: #00e0e0;
}

.pixel.blue
{
    background-color: #4a4aff;
    border-color: #4242e2;
}

.pixel.pink
{
    background-color: #ff00f0;
    border-color: #e100d2;
}

.pixel.green
{
    background-color: #00ff59;
    border-color: #00d249;
}

.pixel.yellow
{
    background-color: #f6ff50;
    border-color: #d9e140;
}

.pixel.orange
{
    background-color: #ffb71d;
    border-color: #efac1b;
}

.pixel.red
{
    background-color: #ff3737;
    border-color: #e72c2c;
}

.pixel.ice
{
    background-image: url("../img/game/pixels/ice.png");
    background-color: none;
    border-color: #a2e3ff;
}

.pixel.fire
{
    background-image: url("../img/game/pixels/fire.png");
    background-color: none;
    border-color: #ff8800;
}

.pixel.steel
{
    background-image: url("../img/game/pixels/steel.png");
    background-color: none;
    border-color: #9c9c9c;
}

.pixel.glue
{
    background-image: url("../img/game/pixels/glue.png");
    background-color: none;
    border-color: #f88f34;
}

.pixel.transparent
{
    opacity: 20%;
}

/*----------------GAME------------------*/