* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

@font-face {
    font-display: swap;
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    src: url('../fonts/jetbrains-mono-vf.ttf') format('truetype');
}

:root {

    color-scheme: dark;

    --default-purple: #6c47ff;
    --default-red: color(display-p3 1 0.25 0.39); /* #ff1b5f */
    --default-green: color(display-p3 0.3 1 0.7); /* #00ffac */
    --default-yellow: color(display-p3 1 0.73 0.27); /* #ffb714 */
    
    --txt-primary: hsl(240, 20%, 80%);
    --txt-secondary: hsl(240, 10%, 55%);
    --txt-light: hsl(240, 13%, 30%);

    --bg-dark: #111117;
    --bg-light: hsl(240, 14%, 13%);

    --site-padding: 2.5em;
    --default-padding: 2em;

    --cg-mono: "JetBrains Mono", Consolas, "Andale Mono", "DejaVu Sans Mono", "Liberation Mono", Monaco, "Courier New", Courier, monospace;    

}

html, body {
    height: 100%;
    background: var(--cg-bg, var(--bg-dark));
    color: var(--cg-txt, var(--txt-primary));
    font-family: var(--cg-mono, 'JetBrains Mono', monospace);
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: #ffffff;
    color: var(--cg-bg);
}

::-moz-selection {
    background: #ffffff;
    color: var(--cg-bg);
}

/* ----------------------------------------------------------- layout */

.bg {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--site-padding);
}

.txt-red {
    color: var(--default-red);
}

.noise {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

/* ----------------------------------------------------------- header */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--default-padding);
}

.logo {
    display: block;
    width: min(100%, 108px);
    aspect-ratio: 27 / 13;
}

.icon-array {
    display: block;
    width: 60px;
    height: 60px;
}

/* ------------------------------------------------------------- grid */

.grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--default-padding);
    margin-top: var(--site-padding);
}

@media (max-width: 950px) {
    .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.box {
    --box-header: 120px;
    --box-border: hsl(240, 20%, 10%);
    position: relative;
    isolation: isolate;
    background: var(--bg-light);
    border-radius: 0.75em;
    overflow: hidden;
    box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 10%);
}

/* 1px border all round, screened on top: over the card it reads as a plain
   border, over the header image it lightens the image's own edge pixels so
   it blends in instead of sitting on top */
.box::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--box-border);
    box-shadow: inset 0px 0px 1px 0px var(--box-border);
    border-radius: inherit;
    mix-blend-mode: screen;
    pointer-events: none;
}

.box-header {
    position: relative;
    height: var(--box-header);
}

/* same screened 1px line along the bottom edge of the header image */
.box-header::after {
    content: '';
    position: absolute;
    inset: 0;
    border-bottom: 1px solid var(--box-border);
    mix-blend-mode: screen;
    pointer-events: none;
}

.box-header img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.box-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5em;
    padding: 2.5em var(--default-padding);
}

.box-icon {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.box-icon-rounded {
    border-radius: 0.5em;
}

/* opt-in 1px inset border for icons: add .box-icon-border to the img and
   the script in index.php wraps it in .box-icon-frame with --icon set to its
   url. the ring is the icon's own alpha minus a 1px eroded copy (four masks
   nudged 1px each way and intersected), so it follows the visible shape
   instead of the image box, and is screened like the card border */
.box-icon-frame {
    position: relative;
}

.box-icon-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--box-border);
    mix-blend-mode: screen;
    pointer-events: none;
    mask-image: var(--icon), var(--icon), var(--icon), var(--icon), var(--icon);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center, calc(50% + 1px) 50%, calc(50% - 1px) 50%, 50% calc(50% + 1px), 50% calc(50% - 1px);
    mask-composite: subtract, intersect, intersect, intersect, add;
}

/* icons without transparency that are rounded by css get a plain inset ring */
.box-icon-frame:has(.box-icon-rounded)::after {
    background: none;
    mask: none;
    border-radius: 0.5em;
    box-shadow: inset 0px 0px 0px 1px var(--box-border);
}

.box-title {
    color: var(--txt-primary);
    font-size: 1em;
    font-weight: 500;
}

.box-platform {
    color: var(--txt-light);
    font-size: 0.85em;
    font-weight: 500;
    margin-top: -1.75em;
}

.box-button {
    display: block;
    width: 100%;
    appearance: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.85em;
    padding: 1.25em 0;
    background: hsla(240, 12%, 35%, 0.5);
    box-shadow: inset 0px 0px 0px 1px hsla(240, 12%, 35%, 1);
    color: #ffffff;
    border-radius: 0.65em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    transition: box-shadow 0.25s;    
}

.box-button:hover {
    box-shadow: inset 0px 0px 0px 1px hsla(240, 12%, 50%, 1);    
    transition: box-shadow 0.25s;
}

.box-button:active {
    background: #ffffff;
    box-shadow: inset 0px 0px 0px 0px hsla(240, 12%, 30%, 0);    
    color: var(--bg-light);
    transition: box-shadow 0s;
}

.box-button-disabled {
    display: block;
    width: 100%;
    appearance: none;
    cursor: default;
    font: inherit;
    font-size: 0.85em;
    padding: 1.25em 0;
    background: hsla(240, 14%, 30%, 0.2);
    box-shadow: inset 0px 0px 0px 1px hsla(240, 14%, 30%, 0.5);
    color: var(--txt-light);
    border-radius: 0.65em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
}