@import 'switch.css';
#main-wrap {
  --main-max-width: auto;
}
.editor-app {
    grid-area: main;
    display: grid;
    grid-gap: 0.5rem;
}
.sidebar-first {
    box-shadow: none;
}

@media (max-width: 799px) {
    #main-wrap {
        --main-max-width: 100%;
    }
    .editor-app {
        grid-template-rows: auto;
        grid-template-areas: 'side' 'pocket-top' 'board' 'pocket-bot' 'variant-selector' 'tools' 'uboard';
    }
    input#fen {
        padding: 4px 0 4px 0;
    }
    under-left {
        display: none;
    }
}

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

@media (min-width: 800px) {
    /* Full width layout for all editor variants (no sidebar) */
    .editor-app {
        grid-template-columns: 1fr 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: '. pocket-top . hint' '. board . tools' '. pocket-bot . .' '. variant-selector . .' '. uboard . .';
    }
}
boardeditor {
    display: grid;
    grid-template-rows: auto auto auto;
    justify-content: center;
}
.pocket-wrapper {
    margin-bottom: 0.5rem;
}
.pocket-wrapper .editor {
    width: var(--cg-width);
    height: calc(var(--piecerows) * var(--cg-height) / var(--ranks));
    display: flex;
    flex-wrap: wrap;
}
.pocket-wrapper.top {
    /* Free pieces row for top pieces */
}
.pocket-wrapper.bot {
    /* Free pieces row for bottom pieces */
}

/* Editor-specific pocket styling - make width fit content */
.editor-button-container .pocket {
    width: auto !important;
    min-width: calc(var(--editorLength) * (var(--cg-width) / var(--files)) + 100px);
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding-bottom: 0 !important;
}

/* Editor free pieces hover effect - circular like selected pieces on board */
.editor-button-container .pocket.usable square:hover {
    background-color: rgba(20, 85, 30, 0.8) !important;
    border-radius: 50% !important;
    transition: background-color 0.13s !important;
}

.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;
}

/* Variant selector */
.editor-app #variant-selector {
    grid-area: variant-selector;
    background-color: var(--bg-color2);
    box-shadow: var(--base-shadow);
    border-top: 1px solid var(--border-color);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -1rem;
}

.editor-app #variant-selector label {
    font-weight: 600;
    margin-right: 8px;
}

.editor-app #variant-selector select {
    padding: 4px 8px;
    font-size: 14px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background-color: var(--bg-color0);
    color: var(--font-color);
    cursor: pointer;
    min-width: 200px;
}

.editor-app #variant-selector select:hover {
    border-color: var(--link-color);
}

.editor-app #variant-selector select:focus {
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
}

@media (max-width: 799px) {
    .editor-app #variant-selector {
        padding: 6px 8px;
    }
    .editor-app #variant-selector select {
        min-width: 150px;
        font-size: 13px;
    }
}