.editor-app {
    grid-area: main;
    display: grid;
    grid-gap: 0.5rem;
}
.sidebar-first {
    box-shadow: none;
}

@media (max-width: 799px) and (orientation: portrait) {
    .editor-app {
        grid-template-rows: auto;
        grid-template-areas: 'side' 'poc-top' 'pocket-top' 'board' 'pocket-bot' 'poc-bot' 'uboard' 'tools';
    }
    input#fen {
        padding: 4px 0 4px 0;
    }
}

@media (min-width: 800px) and (min-height: 500px) {
    .editor-app {
        --board-scale: calc((var(--zoom) / 100));
    }
}

@media (min-width: 800px) {
    .editor-app {
        grid-template-columns: minmax(230px, 20vw) 2vmin minmax(calc(70vmin * var(--board-scale)), calc(100vh * var(--board-scale) - calc(var(--site-header-height) + var(--site-header-margin)) - 3rem)) var(--gauge-gap) minmax(240px, 400px);
        grid-template-rows: auto;
        grid-template-areas: 'side . poc-top . hint' 'side . board . pocket-top' 'side . board . tools' 'side . poc-bot . pocket-bot' 'uleft . uboard . .';
    }
}
boardeditor {
    display: grid;
    grid-template-rows: auto auto auto;
    justify-content: center;
}
.pocket-wrapper {
    justify-content: right;
}
.pocket-wrapper .editor {
    width: var(--cg-width);
    height: calc(var(--piecerows) * var(--cg-height) / var(--ranks));
    display: flex;
    flex-wrap: wrap;
}
.pocket-wrapper.top {
    grid-area: poc-top;
}
.pocket-wrapper.bot {
    grid-area: poc-bot;
}

.editor-button-container {
    grid-area: tools;
    display: flex;
    flex-flow: column;
}
.editor-button-container .icon:before{
    font-size: 18px;
    padding-right: 4px;
}

#turn-block {
    display: flex;
    flex-flow: column;
    background: var(--bg-color1);
    padding: 10px;
    box-shadow: var(--base-shadow);
    width: max-content;
}
/* castling labels */
.OO {
    padding-left: 0;
}
.OOO {
    padding-left: 28px;
}