/* ===== Jamelgos "Choose your path" panel v2 ==============================
   v1 (below) drew the four mode boxes; v2 replaces the box art itself with the
   user's sheet (/opt/data/images/upload_20260924_210054_3.png, 899x930 RGBA):

     choose-box-gold-v2.png     208x208   -> 2 players   ("vs CPU")
     choose-box-locked-v2.png   208x208   -> 3 + 4 players (locked rail, padlock removed)
     choose-box-blue-v2.png     210x208   -> online PvP
     choose-lock-v2.png          55x 77   -> the sheet's padlock, as a badge

   In the sheet the padlock is painted over the locked square's rail; the build
   script rebuilds that span from a clean column, so the box art is a plain
   frame and the padlock travels as its own badge, placed exactly where the
   sheet has it (its top 47/416 above the frame, its height 154/416 of it).

   The box art is near-square and the cards are near-square, so each box is
   painted with `background-size: 100% 100%` instead of a border-image 9-slice:
   at most a ~10% stretch on the 4-column desktop grid, and the frame thickness
   then stays proportional to the card at every breakpoint. The art is painterly
   rather than pixel art, so it scales smoothly (`image-rendering: auto`) —
   v1's `pixelated` stays only on the v1 assets it was written for.

   Frame, figures, swords and labels are unchanged from v1.
   ========================================================================= */

/* ---- page column ---------------------------------------------------------
   The page centres its column, which left a large empty band above the banner and
   pushed it down further every time the content got shorter. Anchor the column to
   the top instead. Mobile already top-aligns with its own 24px, so this is desktop
   only. */
@media (min-width: 761px) {
    body {
        justify-content: flex-start;
        padding-top: 80px;
    }
}

/* ---- title above the panel ---- */
.subtitle {
    color: #e8d6a8;
    font-family: "Dogica", "Courier New", monospace;
    font-size: clamp(.78rem, 2vw, 1.05rem);
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 #241a12;
}

/* ---- outer frame: art removed, panel is now a bare grid ----
   The 9-slice frame (border-image), its 32px transparent border and the page's
   `outline: 2px solid #201d1a` are all gone. The 32px border was part of the
   panel's box, so it moves into the padding: the grid keeps exactly the same
   content box (900 - 2*56 = 788px on desktop, 460 - 2*40 = 380px on phones) and
   the boxes keep their size. */
.player-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    box-sizing: border-box;
    width: min(810px, 96vw);            /* -10%: squares are 168px instead of 187px */
    margin-bottom: 28px;
    padding: 56px;
    border: 0;
    border-image: none;
    outline: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* ---- vertical rhythm (user request) --------------------------------
   The squares hug the "CHOOSE YOUR PATH" line, and the difficulty panel and the
   START BATTLE button sit close under them instead of floating at the bottom of
   the viewport. This block carries the panel's real padding/margins (it comes after
   the base rule, which still holds the pre-rhythm values). */
.subtitle {
    margin-bottom: 22px;                  /* was 34px */
}
.player-options {
    padding: 0 50px 12px;                 /* side padding scaled with the 10% cut;
                                             top 20 -> 0 lifts the squares 20px */
    margin-bottom: 6px;                   /* was 28px */
}
.difficulty-panel {
    margin: 10px auto 8px;                /* label rides 22px above the panel */
    padding: 20px 20px 10px;              /* was 31px 20px 18px */
}
/* the panel's own copy is the bulk of the remaining gap to the button */
.difficulty-description {
    margin-top: 6px;
}
/* ---- one mode box: the sheet's square art ---- */
.player-options .player-option-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    height: 169px;                        /* -10% (was 188) */
    /* the page's inline <style> caps these boxes with a per-breakpoint min-height
       (184/144/132px), which beats a plain height. The 10% cut has to move both. */
    min-height: 169px;
    padding: 0;
    overflow: visible;
    border: 0;
    border-image: none;
    border-radius: 0;
    background: url('choose-box-gold-v2.png') center / 100% 100% no-repeat;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    clip-path: none;
    box-shadow: none;
    filter: none;
    image-rendering: auto;
    transition: transform .18s ease, filter .18s ease;
}

/* legacy ribbon/overlay decorations are replaced entirely */
.player-options .player-option-btn::before { content: none; border: 0; background: none; }
.player-options .player-option-btn::after { content: none; position: absolute; background: none; }

/* Full background shorthand, not just background-image: the page's inline
   stylesheet declares `background` (a gradient) for these two states, and a
   longhand-only override here would leave background-size at that rule's
   `auto`, rendering the 208px art at natural size inside a 187px cell — which
   clips the frame. Keep size/position/repeat with the image. */
.player-options .player-option-btn.coming-soon {
    background: url('choose-box-locked-v2.png') center / 100% 100% no-repeat;
    opacity: 1;
    filter: none;
}

.player-options .player-option-btn.pvp-option {
    background: url('choose-box-blue-v2.png') center / 100% 100% no-repeat;
}

.player-options .player-option-btn:hover,
.player-options .player-option-btn.selected {
    border-color: transparent;
    transform: translateY(-5px);
    filter: brightness(1.16);
    box-shadow: none;
}

/* padlock badge: the sheet's own padlock, straddling the locked boxes' top rail
   exactly as in the sheet (centre x, top 11.3% above the box, 37% of its height) */
.player-options .player-option-btn.coming-soon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -11.3%;
    height: 37%;
    aspect-ratio: 110 / 154;
    margin-left: -13.2%;
    background: url('choose-lock-v2.png') center / 100% 100% no-repeat;
    pointer-events: none;
    z-index: 3;
}

/* ---- icons (the "number of players" sprite replaces the numeral) ----
   `margin-bottom: 0` centres the sprite: it participates in the flex centring,
   so the 30px it used to carry pushed the figures ~15px above the middle of the
   square (the label is absolutely positioned and does not affect this).

   v4 art: the blocky red/grey figures are replaced by the supplied fantasy
   creatures - the red one (the player) by oryx_16bit_fantasy_creatures_11, every
   grey one (the opponents) by oryx_16bit_fantasy_creatures_110. They are pasted
   inside each figure's old footprint at NATIVE scale, so the v4 canvases are the
   v7 layout: the player in a left column, the opponents stacked in a right column with a wide
   gutter, taken from the supplied mockup. The v7 canvases are 198x50, 198x150 and 198x150 - the
   native layout at 2x - and the boxes below are HALF that, so the browser draws one image pixel per
   screen pixel (or per device pixel on a 2x screen) and nothing is resampled. The player creature is
   mirrored horizontally so it faces the opponents rather than looking the same way. `background-size: contain` only
   renders 1:1 when the box equals the image, so these widths/heights must match
   the PNGs exactly - change one and the browser resamples and the pixels go
   uneven. The ground bar each old figure carried is kept, under every creature. */
.player-options .player-option-btn .num {
    width: 52px;                          /* v8 canvas (104) at exactly half */
    height: 25px;
    margin-bottom: 0;
    font-size: 0;
    line-height: 0;
    color: transparent;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    image-rendering: pixelated;
    text-shadow: none;
}

#btn-2 .num { background-image: url('choose-figures-2-v8.png'); }   /* 1 player + 1 opponent */

#btn-3 .num {
    width: 52px;                          /* v8 canvas at half */
    height: 75px;
    background-image: url('choose-figures-3-v8.png');                /* 1 player + 2 opponents */
}

#btn-4 .num {
    width: 52px;                          /* v8 canvas at half */
    height: 75px;
    background-image: url('choose-figures-4-v8.png');                /* 1 player + 3 opponents */
}

#btn-pvp .num {
    /* -25%, as asked: the swords come down further than the figures. The v3 asset is
       the supplied 2x art at 150x147 and is displayed at 75x74, so the browser still
       renders an exact 2:1. At 74px the centred sprite clears the label (whose box
       starts 46px above the bottom edge) by 11px, so the old 10px lift is gone. */
    width: 75px;
    height: 74px;
    margin-bottom: 0;
    background-image: url('choose-swords-v3.png');
}

/* ---- label ----
   Lifted clear of the frame's bottom band. In the supplied art the bottom edge
   is ~11.5% of the box (the rail plus the small element at its centre), which is
   ~22px on a 188px box — the old `bottom: 20px` sat the text on it. */
.player-options .player-option-btn .label {
    position: absolute;
    left: 0;
    right: 0;
    /* The clearance is `gap = H/2 - chain - h/2`, where the chain is what the label's top sits
       above the box's bottom edge. Measured, that chain is 47px at bottom:28px (a 12px inset the
       label's containing box already carries + the 28px offset + the label's ~7px box) - NOT the
       34.5px this file used to assume, which is why a centred tall icon ran into the label.
       At bottom:21px the chain is 40px: gap = 84.5 - 40 - 37.5 = +7px on a 169px box. */
    bottom: 21px;
    margin: 0;
    color: #f7e4a2;
    font-family: "Dogica", "Courier New", monospace;
    font-size: .59rem;                    /* -20% (was .74rem) */
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 2px 2px 0 #2a1a12;
}

.player-options .player-option-btn.pvp-option .label { color: #eaf4ff; }

@media (max-width: 760px) {
    .subtitle { font-size: .72rem; letter-spacing: .18em; }

    .player-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(414px, 96vw);       /* -10% */
        gap: 11px;
        padding: 0 36px 10px;
        margin-bottom: 22px;
    }

    .player-options .player-option-btn { height: 137px; min-height: 137px; }   /* -10% (was 152) */

    .player-options .player-option-btn .num { margin-bottom: 0; }

    /* the boxes stay at the same half-canvas size; only the lift changes. In the 137px box the 75px
       icon would otherwise run a few px into the label, so it is nudged up (a bottom margin on a flex
       item shifts it by half). */
    #btn-2 .num { width: 52px; height: 25px; }
    #btn-3 .num, #btn-4 .num { width: 52px; height: 75px; margin-bottom: 28px; }
    #btn-pvp .num { width: 38px; height: 37px; margin-bottom: 0; }

    .player-options .player-option-btn .label { bottom: 16px; font-size: .5rem; letter-spacing: .1em; }
}

@media (max-width: 380px) {
    /* 6px padding would drop the 32px the old frame's border used to occupy and
       let the boxes grow past their 390px size; keep the content box steady */
    .player-options { gap: 7px; padding: 0 34px 10px; }
    #btn-3 .num, #btn-4 .num { margin-bottom: 40px; }
    .player-options .player-option-btn { height: 126px; min-height: 126px; }   /* -10% (was 140) */
    /* the icons fall through to the 760px block above: a quarter of the 2x canvas is not an integer
       number of pixels (198/4 = 49.5), so it would soften the art */
}

/* The page's inline stylesheets also carry mobile rules for these blocks, and a
   media query adds no specificity — only order decides. Repeating the vertical
   rhythm here (in the last stylesheet) keeps it from being reverted at the small
   breakpoints, and drops the difficulty panel's 154px min-height so it can
   compact under the squares. */
@media (max-width: 760px) {
    .subtitle { margin-bottom: 18px; }
    .player-options { margin-bottom: 6px; }
}

/* ---- bigger meeples (user request) ------------------------------------------------------------
   The v7 canvases are already 2x the drawn layout (198x50 / 198x150), so this increase is purely a
   change of display size: 1:1 instead of half. That needs a bigger box, because the 3-tall opponent
   column is 150px and the label's top sits 41px above the box's bottom edge (measured chain, see the
   .label rule) - a centred 150px icon needs a 246px box to keep 6px+ clear of it: gap = H/2 - 41 - 75.
   The box must also be wide enough for the 198px canvas: 216px, which is what four columns of a
   1003px container with 50px side padding and 3 x 13px gaps come to exactly.
   Only above 1045px: that is where min(1003px, 96vw) stops shrinking, and below it the columns can no
   longer hold a 198px icon without rescaling it off an integer step - so narrower screens keep the
   half-size art they have today. Placed last so order decides, the same way the mobile blocks do. */
@media (min-width: 1045px) {
    .player-options { width: min(1003px, 96vw); }
    .player-options .player-option-btn { height: 246px; min-height: 246px; }
    .player-options .player-option-btn .num { width: 104px; height: 50px; margin-bottom: 0; }   /* v8 at 1:1 */
    #btn-2 .num { width: 104px; height: 50px; }
    #btn-3 .num, #btn-4 .num { width: 104px; height: 150px; margin-bottom: 0; }
    #btn-pvp .num { width: 150px; height: 147px; margin-bottom: 0; }   /* v3 swords, also 1:1 now */
    /* chain 41px here (12 + 22 + 7): gap = 246/2 - 41 - 75 = +7px, and the label's text sits 34px
       above the box's bottom, clear of the frame's rail (~27px at this box size). */
    .player-options .player-option-btn .label { bottom: 22px; }
}