/*
 * Prebaked card renders (P20).
 *
 * The card is painted as a CSS background on a div rather than an <img>, with a
 * transparent overlay child on top. This is download DETERRENCE, not prevention:
 * anything the browser paints can be screenshotted. What it buys is that
 * right-click "save image as" and drag-to-desktop do not hand over the card.
 *
 * Baked renders are 600x600 square (500px SVG at scale 1.2), so the box is 1:1.
 */

.faction-baked-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 25px;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Transparent lid. Sits above the painted background so the pointer never lands
   on an image element. */
.faction-baked-guard {
    position: absolute;
    inset: 0;
    display: block;
    background: transparent;
    border-radius: inherit;
}

/* Fallback for browsers without aspect-ratio. */
@supports not (aspect-ratio: 1 / 1) {
    .faction-baked-card {
        height: 0;
        padding-bottom: 100%;
    }
}

/* Card with no baked render - only ever seen on a single-card page reached by a
   direct/indexed URL, since unbaked cards are excluded from the archive grid. */
.faction-card-unbaked {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 25px;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    background: #16161a;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    box-sizing: border-box;
}

.faction-card-unbaked span {
    color: #9a9aa8;
    font-size: 0.85rem;
    line-height: 1.6;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Screen-reader / crawler text. Card rules text used to live in the SVG DOM; with
   raster renders it has to be carried deliberately. See wargame Part B, B2.6. */
.faction-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}