/* Sidebar */
#sideBar {
    height: 90vh;
    /* Zero flex-basis: #game wraps lines by content width, and a wide
       sidebar (e.g. the empty-saves message) must never bump the board
       down to its own line. The sidebar just fills what the board leaves. */
    flex: 1 1 0;
    min-width: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    padding: 1vh;
    gap: 1vh;
}
#readoutTray {
    order: 0;
    display: flex;
}
.readout {
    flex: 1;
}
#orderContainer {
    order: 1;
    position: relative;
    width: 45%;
    align-self: center;
    aspect-ratio: 1 / 1;
    background-image: url(../assets/ui/wood.png);
    background-size: 200%;
    box-shadow: 0 0 10px #000;
    display: none;
    flex-wrap: wrap;
    flex-shrink: 0;
}
/* The card's price tag: the moves it pays, hung off the top-right corner. */
#orderReward {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(30%, -50%);
    padding: 0.2vh 0.9vh;
    border-radius: 2vh;
    background-color: rgba(0, 0, 0, 0.75);
    box-shadow: 0 0 6px #000;
    color: #fff;
    font-size: 1.8vh;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}
.orderSquare {
    width: 50%;
    aspect-ratio: 1 / 1;
}
.orderSquare:nth-child(1), .orderSquare:nth-child(4) {
    background-color: rgba(0, 0, 0, 0.5);
}
.orderPiece {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-image: url(../assets/pieces/cburnett/wB.svg);
    background-size: contain;
    background-position: center center;
    user-select: none;
}
#sideMenu {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1vh;
}

/* The Help tray: Hint, Undo, and Watch side by side, so the tray stays one
   row tall and the saves list keeps its room. */
#aiTray {
    flex-shrink: 0;
}
#aiTrayBtns {
    display: flex;
    gap: 0.8vh;
}
#aiTrayBtns .modeBtn {
    margin-bottom: 0;
}

/* Saved games list */
#savedTray {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
#savedGames {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.4vh;
}
#savedGames::-webkit-scrollbar {
    width: 1vh;
}
#savedGames::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0.5vh;
}
#savedGames::-webkit-scrollbar-thumb {
    background: #6b4830;
    border-radius: 0.5vh;
    box-shadow: inset 0 0 0.3vh rgba(255, 255, 255, 0.25);
}
#allSavesBtn {
    /* .linkBtn's flex: 1 is meant for the bottom bar's row; in this column it
       would stretch the button to fill the tray. */
    flex: 0 0 auto;
    width: 100%;
    margin-top: 0.6vh;
    padding: 0.6vh;
}
.saveCard {
    position: relative;
    display: flex;
    gap: 0.8vh;
    padding: 0.8vh;
    margin-bottom: 0.8vh;
    background-image: url(../assets/ui/wood.png);
    background-size: 300%;
    border-radius: 0.6vh;
    box-shadow: 0 0.4vh 0.8vh rgba(0, 0, 0, 0.6), inset 0 0.2vh 0 rgba(255, 255, 255, 0.15), inset 0 -0.3vh 0.5vh rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: 0.125s;
}
.saveCard:hover {
    filter: brightness(1.12);
}
.saveCard.active {
    box-shadow: 0 0.4vh 0.8vh rgba(0, 0, 0, 0.6), inset 0 0 0 0.3vh rgba(255, 214, 150, 0.35);
}
.saveCard.over {
    filter: saturate(0.6) brightness(0.8);
}
.saveCard.over:hover {
    filter: saturate(0.6) brightness(0.95);
}
.miniBoard {
    width: 38%;
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    box-shadow: inset 0 0 0.6vh #000;
    /* Each thumbnail gets its own compositor layer. The piece SVGs use
       feTurbulence/lighting filters that only rasterize on the CPU, so without
       this, any repaint whose damage region overlaps the sidebar re-rastered
       every visible thumbnail — measured at ~200ms per card, a multi-second
       stall with a full save list, paid on every scored move. The pieces are
       pre-rastered to PNG blobs at startup now (src/view/raster.js), which
       shrinks that cost enormously, but the layer still means a board rasters
       once and is reused until its own pieces change. */
    will-change: transform;
}
.miniSq {
    background-size: contain;
    background-position: center center;
}
.miniSq.dark {
    background-color: rgba(0, 0, 0, 0.5);
}
.saveInfo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.saveHeader {
    display: flex;
    align-items: center;
    gap: 0.6vh;
}
/* The mode's icon stands in for its name (which is a tooltip now): the long
   names wrapped in this narrow column and stretched the card. Paint comes
   baked into the #modeIcons symbols as the mode-button ink, which is also the
   colour the title text wore. */
.saveModeIcon {
    width: 2.6vh;
    height: 2.6vh;
    flex-shrink: 0;
    filter: drop-shadow(0 0.2vh 0.3vh #000);
}
.saveInfo p {
    margin: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 1.9vh;
    color: #d9c4a5;
    /* The wood grain sits close behind this text in both hue and value; the
       shadow (same one the old title wore) carves out the contrast. */
    text-shadow: 0 0.2vh 0.3vh #000;
}
.saveInfo .overLabel {
    font-family: "Rubik Dirt", "Open Sans", "sans-serif";
    color: #e8a080;
    font-size: 1.8vh;
}
.saveInfo .saveStamp {
    font-size: 1.5vh;
    color: #c2a67e; /* still the quietest line on the card, but clear of the wood */
}
.saveDelete {
    position: absolute;
    top: 0.5vh;
    right: 0.5vh;
    min-width: 2.6vh;
    height: 2.6vh;
    border-radius: 0.4vh;
    background-color: rgba(0, 0, 0, 0.45);
    color: #cbaa88;
    font-size: 1.6vh;
    line-height: 1;
    box-shadow: inset 0 0 0.4vh #000;
}
.saveDelete:hover {
    color: #fff;
    background-color: rgba(90, 20, 20, 0.7);
}
.saveDelete.confirm {
    background-color: rgba(130, 25, 25, 0.85);
    color: #fff;
    padding: 0 0.6vh;
}
.emptySaves {
    text-align: center;
    font-family: "Open Sans", sans-serif;
    font-size: 1.7vh;
    color: #a08663;
    padding: 1vh;
}

/* Bottom bar (settings, plaque buttons). Sound moved into the Settings
   plaque, so the speaker button that used to sit here is gone. */
#bottomBar {
    display: flex;
    gap: 0.6vh;
    align-items: stretch;
    flex-shrink: 0;
}
#settings {
    width: 5vh;
    height: 5vh;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 0.6vh;
    box-shadow: inset 0 0.2vh 0.6vh #000;
}
#settings>div {
    width: 60%;
    aspect-ratio: 1 / 1;
    background-image: url(../assets/ui/settings.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: opacity(75%);
    transition: 0.5s;
    transition-timing-function: ease-in-out;
    border-radius: 100%;
}
#settings:hover>div {
    transform: rotate(30deg);
}
#settings:hover {
    color: #fff;
}

#menuHamburger {
    display: none;
}
/* The under-board tray shelf. Empty on desktop (mobileLayout.js keeps the
   trays in the sidebar there), populated and shown on narrow screens. */
#mobileActions {
    display: none;
}
@media screen and (max-width: 1011px) {
    #sideBar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 10vh;
        flex-direction: row;
        align-items: center;
        padding: 0.5vh 1vh;
        gap: 1vh;
        z-index: 999;
        box-shadow: 0 0 10px #000;
        /* Obsidian, not brown — and opaque, because the page can scroll on
           short screens and the board must not ghost through the fixed bar. */
        background-color: #16141a;
    }
    #readoutTray {
        flex: 1;
        align-items: center;
    }
    #menuHamburger {
        display: block;
        order: 3;
        width: 9vh;
        height: 9vh;
        flex-shrink: 0;
        background-image: url(../assets/ui/menu.svg);
        background-position: center center;
        background-size: 60%;
        background-repeat: no-repeat;
        cursor: pointer;
        transition: 0.25s;
    }
    #menuHamburger:hover {
        background-color: rgba(0, 0, 0, 0.5);
    }
    #menuHamburger.open {
        background-image: url(../assets/ui/close.svg);
    }
    #sideMenu {
        position: fixed;
        top: 10vh;
        right: 0;
        bottom: 0;
        width: min(52vh, 100vw);
        padding: 1vh;
        background-color: #271813;
        background-image: url(../assets/ui/wood.png);
        background-size: cover;
        transform: translateX(105%);
        transition: 0.4s;
        z-index: 998;
        box-shadow: -0.5vh 0 2vh rgba(0, 0, 0, 0.6);
    }
    #sideMenu.open {
        transform: translateX(0);
    }
    /* Short Order's card joins the bar's flex row — its base order (1) puts
       it after the readouts and before the hamburger. It used to hang fixed
       over the screen's centre, where it sat on top of the Moves readout. */
    #orderContainer {
        width: 8vh;
    }
    /* The card hugs the top of the screen here, so the price tag hangs off
       the bottom edge instead of poking above the viewport. */
    #orderReward {
        top: 100%;
        right: 50%;
        transform: translate(50%, -35%);
        font-size: 1.5vh;
    }
    /* The under-board shelf the action trays reparent into: always in view,
       no drawer between the player and a button. */
    #mobileActions {
        display: flex;
        flex-direction: column;
        gap: 1vh;
        padding: 1vh;
    }
    /* Save cards read at arm's length: the drawer is the whole screen here,
       so the desktop's compact text sizes just waste the room. */
    .saveModeIcon {
        width: 3.2vh;
        height: 3.2vh;
    }
    .saveInfo p {
        font-size: 2.3vh;
    }
    .saveInfo .overLabel {
        font-size: 2.2vh;
    }
    .saveInfo .saveStamp {
        font-size: 1.9vh;
    }
}
@media screen and (max-width: 800px) {
    #sideMenu {
        width: 100vw;
    }
}