/*
=====================================================
GLOBAL PAGE STYLING
=====================================================
*/

body {

    /*
        Remove default browser spacing.
    */
    margin: 0;

    /*
        Retro system font stack.
    */
    font-family: Verdana, Arial, sans-serif;

    /*
        Retro dark background.
    */
    background-color: #1a1a1a;

    color: white;

    /*
        Full browser viewport height.
    */
    min-height: 100vh;

    /*
        IMPORTANT:
        Makes children stack vertically.
    */
    display: flex;

    /*
        Arrange children top-to-bottom.
    */
    flex-direction: column;

    /*
        Allow the footer to sit below the first screen.
    */
    overflow-y: auto;
}


/*
=====================================================
TOP INFORMATION BAR
=====================================================
*/

#topbar {

    background-color: #111111;
    border-bottom: 1px solid #555;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 6px 15px;
    font-size: 14px;
    box-sizing: border-box;
}

#onlinePanel {

    align-items: start;
    display: flex;
    flex: 1;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
}

#onlineLabel {

    color: #888;
    flex-shrink: 0;
    font-size: 11px;
    line-height: 1.3;
    padding-top: 2px;
    white-space: nowrap;
}

#onlineScroller {

    /* Two rows, then scroll horizontally */
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE/Edge */
}

#onlineScroller::-webkit-scrollbar {

    display: none;               /* Chrome/Safari */
}

#onlineList {

    display: flex;
    flex-wrap: wrap;
    /* Cap at 2 rows: each pill is ~20px tall + 4px gap = ~24px × 2 = 48px */
    max-height: 48px;
    overflow: hidden;
    gap: 4px 6px;
    align-content: start;
}

.onlinePill {

    background-color: #222;
    border: 1px solid #444;
    border-radius: 2px;
    color: #ccc;
    font-size: 11px;
    line-height: 1;
    padding: 3px 7px;
    white-space: nowrap;
}

.onlinePill.isSelf {

    border-color: #7adf8f;
    color: #7adf8f;
}

#brandTitle {

    color: #fff4d6;

    font-size: 28px;

    font-weight: 900;

    letter-spacing: 0;

    line-height: 1;

    -webkit-text-stroke: 10px #2a1710;

    paint-order: stroke fill;

    text-shadow:
        0 0 2px #2a1710,
        0 0 4px #2a1710,
        0 0 6px #2a1710,
        0 0 8px #2a1710,
        0 0 10px #2a1710;
}

#navbar {

    /*
        Fixed height retro bar.
    */
    min-height: 20px;

    /*
        Dark gray old-school UI look.
    */
    background-image: linear-gradient(to bottom, #292929, #080808);

    /*
        Thin hard border.
    */
    border-bottom: 1px solid #555;

    /*
        Vertical alignment.
    */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px clamp(10px, 3vw, 28px);

    /*
        Internal spacing.
    */
    padding: 2px 15px;

    /*
        Small dense retro text.
    */
    font-size: 14px;
}

#navbar a {

    color: white;

    flex-shrink: 0;

    text-decoration: none;
}

#navbar a:hover {

    text-decoration: underline;
}

.nav-divider {

    color: #111111;

    flex-shrink: 0;

    text-shadow:
        0 -1px 0 #000000,
        0 1px 0 #3a3a3a;
}

/*
=====================================================
CANVAS CONTAINER
=====================================================
*/

#canvas-wrapper {

    /*
        Fill the first viewport beneath the bars.
    */
    flex: none;
    height: calc(100vh - 75px);

    /*
        Important for absolute positioning of the artwork layer.
    */
    position: relative;

    /*
        Black retro background — visible through the transparent canvas.
    */
    background-color: black;

    /*
        Hide overflow for future panning.
    */
    overflow: hidden;
}

/*
    Artwork layer: sits BELOW the transparent canvas.
    Holds all <img> elements so GIFs animate natively.
    pointer-events: none — mouse events go to the canvas above.
*/
#artworkLayer {

    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 2;
}

/*
    Individual artwork images — absolutely positioned to match
    their grid cell coordinates (set by JS).
*/
.artworkImg {

    image-rendering: pixelated;
    object-fit: fill;
    position: absolute;
}


/*
=====================================================
FOOTER
=====================================================
*/

#footer {

    background-color: #111111;

    border-top: 1px solid #555;

    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 56px;

    padding: 12px 15px;

    box-sizing: border-box;

    font-size: 14px;
    text-align: center;
}


/*
=====================================================
MAIN CANVAS STYLING
=====================================================
*/

canvas {

    /*
        Fill the entire wrapper area.
    */
    width: 100%;
    height: 100%;

    /*
        Removes tiny inline-element spacing issues.
    */
    display: block;

    /*
        Sharp hard-edged border.
    */
    border: 3px solid #1d1c1c;

    /*
        Preserve crisp pixels.
    */
    image-rendering: pixelated;

    /*
        Retro cursor.
    */
    cursor: crosshair;
}

/*
    The main pixel canvas sits ABOVE the artwork image layer (z-index: 3).
    background is transparent so artwork images show through from below.
    The JS clears the canvas each frame with clearRect, leaving it transparent
    everywhere except grid lines and UI overlays (hover, selection, labels).
*/
#pixelCanvas {

    background-color: transparent;
    position: relative;
    z-index: 3;
}

/*
    Paint canvas inside the upload modal keeps its own background.
*/
#paintCanvas {

    background-color: #000000;
}

/*
=====================================================
UPLOAD MODAL
=====================================================
*/

#uploadModal {

    /*
        Hidden by default.
    */
    display: none;

    /*
        Overlay entire screen.
    */
    position: fixed;

    inset: 0;

    /*
        Dark transparent overlay.
    */
    background-color: rgba(0,0,0,0.7);

    /*
        Center panel.
    */
    justify-content: center;
    align-items: center;

    /*
        Keep above canvas.
    */
    z-index: 999;
}


/*
=====================================================
UPLOAD PANEL
=====================================================
*/

#uploadWindow {

    align-items: stretch;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(260px, 520px) minmax(180px, 260px);
    max-height: calc(100vh - 40px);
    max-width: calc(100vw - 40px);
}

#uploadPanel,
#previewPanel {

    background-color: #111111;

    border: 2px solid #444;

    padding: 20px;

    position: relative;

    font-family: Verdana, Arial, sans-serif;
}

#uploadPanel {

    width: auto;
}

#previewPanel {

    display: flex;
    flex-direction: column;
    min-height: 220px;
}

#previewPanel h3 {

    margin: 0 0 10px;
}


/*
=====================================================
FORM INPUTS
=====================================================
*/

#uploadPanel input,
#uploadPanel button {

    width: 100%;

    margin-top: 10px;

    background-color: #222;

    color: white;

    border: 1px solid #555;

    padding: 8px;

    box-sizing: border-box;

    font-family: inherit;
}


/*
=====================================================
BUTTON HOVER
=====================================================
*/

#uploadPanel button:hover {

    background-color: #333;

    cursor: pointer;
}

#uploadPanel #closeModalButton {

    position: absolute;

    top: 8px;

    right: 8px;

    width: 32px;

    height: 32px;

    margin-top: 0;

    padding: 0;

    line-height: 1;
}

#paintButton.active {

    background-color: #333;
    border-color: #fff4d6;
}

#imageUpload.hidden {

    display: none;
}

#paintTools {

    align-items: start;
    display: none;
    gap: 10px;
    grid-template-columns: 40px minmax(120px, 1fr) 44px;
    margin-top: 10px;
}

#paintTools.visible {

    display: grid;
}

#recentColors {

    display: grid;
    gap: 6px;
    grid-template-columns: repeat(2, 18px);
}

#uploadPanel .colorSwatch {

    border: 1px solid #666;
    box-sizing: border-box;
    cursor: pointer;
    height: 18px;
    margin-top: 0;
    padding: 0;
    width: 18px;
}

#uploadPanel .colorSwatch.active {

    border-color: #fff4d6;
    outline: 1px solid #fff4d6;
}

#paintCanvas {

    align-self: start;
    background-color: #000000;
    border: 1px solid #555;
    box-sizing: border-box;
    cursor: crosshair;
    height: auto;
    image-rendering: pixelated;
    max-width: 100%;
    width: 100%;
}

#uploadPanel #customColor {

    height: 36px;
    margin-top: 0;
    padding: 2px;
    width: 44px;
}

#artPreview {

    background-color: #000000;
    border: 1px solid #555;
    box-sizing: border-box;
    display: flex;
    flex: 1;
    min-height: 160px;
    padding: 8px;
    align-items: center;
    justify-content: center;
}

#previewCanvas,
#previewImg {

    border: 1px solid #333;
    height: auto;
    image-rendering: pixelated;
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

#turnstileWidget {

    margin-top: 10px;
    min-height: 0;
}

#turnstileWidget:empty {

    display: none;
}

#statusMessage {

    background-color: #111111;
    border: 1px solid #555;
    bottom: 18px;
    box-sizing: border-box;
    color: #fff4d6;
    display: none;
    font-family: Verdana, Arial, sans-serif;
    font-size: 13px;
    left: 50%;
    max-width: min(420px, calc(100vw - 32px));
    padding: 10px 12px;
    position: fixed;
    text-align: center;
    transform: translateX(-50%);
    z-index: 1000;
}

#statusMessage.visible {

    display: block;
}

#statusMessage.error {

    border-color: #ff4d4d;
    color: #ffdede;
}

#statusMessage.success {

    border-color: #7adf8f;
    color: #dcffe3;
}

@media (max-width: 720px) {

    #uploadWindow {

        grid-template-columns: 1fr;
        overflow-y: auto;
    }

    #previewPanel {

        min-height: 170px;
    }

    #paintTools {

        grid-template-columns: 40px minmax(120px, 1fr) 44px;
    }
}