/*
 * pixel_board.css
 * The public wall page, on top of the site's main.css: same palette, fonts, borders and keycap buttons as the resume.
 *
 * The nav bar runs across the top of the screen and the edit bar across the bottom, both full width, in either orientation. Between them the wall, capping course included, fills the height and runs to both side edges, with the square as large as that allows, centred and always square. pixel_board.js works out every position, so this file only says how each piece looks. Example: a 1920 x 1080 screen gets a square about 830 across, with about 540 pixels of the same wall either side.
 *
 * In landscape at 900 pixels wide or more the resume's PCB tiles and cables are behind everything, as on the resume, though the wall now covers nearly all of the screen. Below that, as on the resume, there is just the dark base colour.
 */

html,
body.pixel-board-page {
    height: 100%;
    overflow: hidden;
}

body.pixel-board-page {
    margin: 0;
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-mono);
}

#pixel-board-tile-layer {
    display: none;
}

/* ------------------------------------------------
 * Layout
 * ------------------------------------------------ */

/* The whole screen, above the cables (6) and edge shadows (7) from main.css. */
#pixel-board-layout {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 8;
}

/* The wall's whole area: the full screen. pixel_board.js positions the wall and the square inside it. */
#pixel-board-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* The nav bar and the edit bar. Left, top and width set by pixel_board.js. Above the wall, with a shadow so they stand off it. */
#pixel-board-title-bar,
#pixel-board-tools {
    position: absolute;
    z-index: 2;
    box-sizing: border-box;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

@media (orientation: landscape) and (min-width: 900px) {

    #pixel-board-tile-layer {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        overflow: hidden;
    }

}

/* ------------------------------------------------
 * Title bar - the resume's #page-title-bar, closed on all four sides since nothing joins it from below here.
 * ------------------------------------------------ */

#pixel-board-title-bar {
    background: var(--bg-elevated);
    border: 4px solid var(--accent-primary);
    padding: 8px 16px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

#pixel-board-title-bar h1 {
    margin: 0;
    font-family: var(--font-console);
    font-size: 28px;
    color: var(--text-heading);
    letter-spacing: 2px;
}

/* The title is the link home, and looks like the title, not like a link. */
#pixel-board-title-bar h1 a {
    color: inherit;
    text-decoration: none;
}

#pixel-board-title-links {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
}

#pixel-board-title-links a {
    color: var(--accent-primary);
    font-size: 18px;
    text-decoration: none;
    white-space: nowrap;
}

/* ------------------------------------------------
 * The wall and the paintable square
 * ------------------------------------------------ */

/* The full-width wall. Top and height set by pixel_board.js to match the square. A shadow above and below so it reads as a wall standing in front of the board rather than a stripe printed on it. */
#pixel-board-wall {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.7), 0 -6px 14px rgba(0, 0, 0, 0.7);
    image-rendering: pixelated;
}

/* Left, top, width and height set by pixel_board.js. No border: the square is just part of the wall. */
#pixel-board-frame {
    position: absolute;
    line-height: 0;
}

#pixel-board-canvas {
    display: block;
    /* Every touch on the wall is the page's to handle: painting, panning and pinching, never the browser scrolling or zooming the page. */
    touch-action: none;
    cursor: crosshair;
    image-rendering: pixelated;
}

#pixel-board-canvas.is-move-mode {
    cursor: grab;
}

#pixel-board-canvas.is-panning {
    cursor: grabbing;
}

/* ------------------------------------------------
 * Tools - a strip under the wall in the resume's document panel style: dark panel, green border, VT323 section tags.
 * ------------------------------------------------ */

#pixel-board-tools {
    box-sizing: border-box;
    background: var(--bg-panel);
    border: 4px solid var(--accent-primary);
    padding: 10px 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px 20px;
}

#pixel-board-disclaimer {
    flex: 1 1 220px;
    max-width: 320px;
    margin: 0;
    padding: 8px 10px;
    background: var(--bg-elevated);
    border-left: 4px solid #ff5555;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.45;
}

.pixel-board-tool-group {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#pixel-board-colour-group {
    flex: 1 1 300px;
    max-width: 420px;
}

/* The resume's .section-tag. */
.pixel-board-tool-tag {
    margin: 0;
    align-self: flex-start;
    font-family: var(--font-console);
    font-size: 20px;
    font-weight: normal;
    color: var(--accent-primary);
    background: var(--bg-elevated);
    padding: 1px 10px;
    letter-spacing: 2px;
}

.pixel-board-tool-text {
    margin: 0;
    font-size: 16px;
    color: var(--text-primary);
}

.pixel-board-tool-muted {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* Sixteen paints in two rows of eight. */
#pixel-board-palette {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 5px;
}

.pixel-board-swatch {
    box-sizing: border-box;
    aspect-ratio: 1;
    min-height: 26px;
    padding: 0;
    border: 3px solid var(--bg-elevated);
    border-radius: 4px;
    background-size: cover;
    image-rendering: pixelated;
    cursor: pointer;
}

.pixel-board-swatch[aria-pressed="true"] {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 3px var(--accent-primary);
}

#pixel-board-allowance-meter {
    width: 160px;
    height: 10px;
    background: var(--bg-elevated);
    border: 2px solid var(--border-subtle);
}

#pixel-board-allowance-meter-fill {
    height: 100%;
    width: 0;
    background: var(--accent-secondary);
}

#pixel-board-status-text {
    flex: 1 1 200px;
    align-self: center;
}

@media (max-width: 480px) {

    #pixel-board-title-bar {
        padding: 6px 10px;
    }

    #pixel-board-title-bar h1 {
        font-size: 20px;
    }

    #pixel-board-title-links a {
        font-size: 14px;
    }

    #pixel-board-tools {
        padding: 8px 10px;
        gap: 8px 14px;
    }

    #pixel-board-disclaimer {
        max-width: none;
        font-size: 12px;
        padding: 6px 8px;
    }

    .pixel-board-tool-tag {
        font-size: 16px;
    }

    .pixel-board-tool-text {
        font-size: 14px;
    }

    .pixel-board-swatch {
        min-height: 22px;
    }

}