/* ===========================================================================
   The Pixel Wars board embedded on another page.

   Self-contained and prefixed, because it lands inside Bulma's grid on the
   leaderboard rather than on the Pixel Wars page, and must not inherit or
   leak anything. It does not use the --pw-* tokens for the same reason: those
   live in pixelWars.css, which these pages do not load.
   ========================================================================= */

/* The link IS the frame. Sizing it here rather than on the canvas keeps the
   square reserved before the script paints, so the column does not jump. */
.pw-peek {
    display: block;
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--bulma-border-weak);
    border-radius: 12px;
    background: #0f1117;
    line-height: 0;
    transition: border-color 0.14s, transform 0.14s;
}

.pw-peek:hover,
.pw-peek:focus-visible {
    border-color: hsl(256 86% 70%);
    transform: translateY(-1px);
}

.pw-peek:focus-visible {
    outline: 2px solid hsl(256 86% 70%);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .pw-peek:hover,
    .pw-peek:focus-visible { transform: none; }
}

.pw-peek__canvas {
    display: block;
    width: 100%;
    height: 100%;
    /* A 64-cell board scaled up has to stay 64 hard squares, not a blurred
       photograph of one. Two fallbacks for older Firefox and the pre-standard
       keyword. */
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

/* ── Stacking order ────────────────────────────────────────────────────────
   Below 769px the columns stack in DOM order, which puts the season picker and
   its era buttons between the announcement and the board. The board is the
   thing worth scrolling to, so on a phone it comes second; on a wide screen the
   three columns keep the order they are written in.

   The row has to be made a flex container first. Bulma only sets `display:
   flex` on .columns from tablet up — on mobile it is `display: block`, and
   `order` does nothing whatsoever to block children. This is the whole reason
   the class is on the section rather than the rule keying off .columns. */
@media screen and (max-width: 768px) {
    .columns.pw-peek-row {
        display: flex;
        flex-direction: column;
    }

    .pw-peek-row .column.announcement,
    .pw-peek-row .column.past-season-note {
        order: 1;
    }

    .pw-peek-row .column.pixel-wars-column {
        order: 2;
    }

    .pw-peek-row .column.leaderboard-heading-column {
        order: 3;
    }
}