/* mapstyle.css: the map style button in the map's bottom-left corner and its row of styles (scripts/mapstyle.js).
   The panel's look (css/gamepanel.css's tokens): a dark ground, the gold accent on the style in use. */

#pg-mapstyle {
    position: absolute;
    left: 2px;
    transform: translateY(-100%);   /* top is the map's foot: the button and the open row grow upward */
    z-index: 999999;          /* over the pieces resting on the board, under one being dragged */
    display: flex;
    align-items: flex-end;
    gap: 8px;
    font-family: var(--gp-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

#pg-mapstyle.pg-ms-open {
    z-index: 2000000;         /* the open row over everything on the board */
}

.pg-ms-face {                /* half its first size (the user, 28.10.2026: "50% smaller") */
    position: relative;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid #fff;
    border-radius: 3px;
    background: var(--gp-bg2, #1c1e24) center / cover no-repeat;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .55);
    cursor: pointer;
    overflow: hidden;
}

.pg-ms-face span {           /* the next style's name, for screen readers: the picture shows it */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.pg-ms-face:hover,
.pg-ms-face:focus-visible {
    border-color: var(--gp-accent, #f0c24b);
    outline: none;
}

.pg-ms-row {
    display: none;
    gap: 6px;
    padding: 6px;
    border: 1px solid var(--gp-line, #30343e);
    border-radius: 8px;
    background: var(--gp-bg, #141519);
    box-shadow: 0 6px 22px rgba(0, 0, 0, .55);
}

.pg-ms-open .pg-ms-row {
    display: flex;
}

.pg-ms-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 72px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: none;
    color: var(--gp-text, #e8e6e1);
    font: 600 11px/1.2 var(--gp-font, system-ui, sans-serif);
    cursor: pointer;
}

.pg-ms-tile:hover {
    background: var(--gp-bg3, #262932);
}

.pg-ms-pic {
    width: 60px;
    height: 60px;
    border: 2px solid var(--gp-line, #30343e);
    border-radius: 6px;
    background: var(--gp-bg2, #1c1e24) center / cover no-repeat;
}

.pg-ms-on .pg-ms-pic {
    border-color: var(--gp-accent, #f0c24b);
}

.pg-ms-on .pg-ms-name {
    color: var(--gp-accent, #f0c24b);
}

/* Sepia's look beyond the map (29.10.2026, the user's ask: "When choosing sepia map, make all the units and factions
   sheets a bit more thematic with the sepia without losing its unique colors", "Use a filter or something for less
   images files"): <html data-pg-map-style> names the style in use (mapstyle.js). Under Sepia the page's ground is a
   dark umber in place of black; every piece (the pictures and the gift tiles) and every sheet (the empires', the elder races', the
   Leviathan card) is warmed by a light sepia filter, each colour kept. A filter on each picture, not on #pieces: a filter there
   would make #pieces one layer and undo the pieces' own z-index against the pool, the drag and this button. The
   style's own pictures (data-pg-style-src: Sepia's Kylerela, Spike and Chaos Rift) are drawn in sepia already. */
html[data-pg-map-style="sepia"] body {
    background-color: #160f08;
}
html[data-pg-map-style="sepia"] #pieces .boardpiece:not([data-pg-style-src]) {
    filter: sepia(.35) saturate(.85) brightness(.97);
}
html[data-pg-map-style="sepia"] .FactionData,
html[data-pg-map-style="sepia"] .pg-belly,
html[data-pg-map-style="sepia"] #pieces .boardpiece.books {          /* the gift tiles: drawn boxes, part of the sheet */
    filter: sepia(.45) saturate(.9);
}