/* Arcade — the tables area (catalogue cards, table pages, teleport map).
 *
 * Only what the sources cannot say with a --ds-* token of identical default
 * value. Applies under html[data-theme="arcade"] only.
 *
 * The card accent is the game's tone (JS/game-tone.js): on /Tables/,
 * JS/pages/tables.js snaps each card's artwork colour to the nearest colour
 * of the current screen and writes it to the card's --table-card-glow; on the
 * homepage the card's wrapper carries the tone hook and the card reads its
 * --game-rgb (see "Table cards" below). Shared cabinet parts (the select
 * cursor, the VER plate, the keyframes) live in cabinet.css. */

/* Teleport map. The canvas reads these off .tm-shell (JS/pages/table-map.js)
 * and reads them again on a theme switch.
 *   - grid and axes are white in the default palette; on a screen they are
 *     lines of the screen's own foreground;
 *   - the height ramp mixes the marker toward the surface in sRGB, the space
 *     the screens derive every other shade in (CSS/arcade-tokens.css), so the
 *     steps stay shades of the screen's colour. */
html[data-theme="arcade"] .tm-shell {
    --tm-grid-minor: rgba(var(--arc-fg-rgb), 0.045);
    --tm-grid-major: rgba(var(--arc-fg-rgb), 0.09);
    --tm-axis: rgba(var(--arc-fg-rgb), 0.2);
    --tm-ramp-space: srgb;
}

/* ==== Table cards: the cabinet ============================================
 *
 * The catalogue card (Includes/Partials/TableCard.php, on /Tables/ and as
 * table-card--home on the homepage) drawn as the front of an arcade cabinet,
 * top to bottom:
 *
 *   marquee      the banner's first row: the game logo on a backlight in the
 *                card's accent (--table-card-glow, the game's tone: written
 *                by JS/pages/tables.js on /Tables/, read from the wrapper's
 *                --game-rgb on the homepage)
 *   screen       the banner's second row: the artwork, uncropped and sharp,
 *                behind a black bezel; the glass is .table-card-shade, which
 *                also carries the select cursor; the version sits in the
 *                screen's corner like a boot screen's VER line
 *   nameplate    the game's name
 *   control      lamps (access, tracker) and LCD counters (options,
 *   panel        releases); .table-card-head, -badges and -meta are
 *                display: contents so their children share one grid; the
 *                panel plate is the body's ::before
 *   coin door    "Updated …" and the way in; the body's ::after
 *
 * Every fact is visible at rest, on every device. Hover and keyboard focus
 * power the cabinet up: the select cursor snaps around the screen, the
 * marquee strikes on, the lamps light and the cabinet steps forward. Without
 * hover (touch) the cabinet stands powered up and a tap presses it in.
 *
 * Type: VT323 is always 1rem here (22px rendered by the "VT323 Arcade" face);
 * Press Start 2P is 16px (name, counters, rank plaque) or 24px (a counter
 * that stands alone). Font Awesome's site-wide zoom is reset where an icon
 * sits in a drawn housing, so the housing stays on whole pixels.
 *
 * Colour: everything that follows the accent switches without a transition,
 * because tables.js writes the accent after the artwork has loaded and a
 * stepped colour change would show the old and new accent side by side.
 * Only the powered-up state steps in.
 *
 * Specificity: every selector starts with html[data-theme="arcade"] plus
 * .table-card.table-card--grid, which outranks CSS/Tables.css (loaded after
 * this file, at most three classes) and theme-arcade.css. The one !important
 * block undoes Bootstrap's .visually-hidden, which can only be undone that way.
 */

/* ---- the cabinet ------------------------------------------------------------ */

html[data-theme="arcade"] .table-card.table-card--grid {
    --cab-mq: 80px;
    --cab-side: 12px;
    --cab-bezel: 8px;
    --cab-gap: 10px;
    --cab-pad: 12px;
    --cab-ink: color-mix(in srgb, var(--arc-fg) 84%, var(--arc-bg));
    --cab-hatch: repeating-linear-gradient(135deg, rgba(var(--arc-fg-rgb), 0.16) 0 2px, transparent 2px 6px);
    container: table-cab / inline-size;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 2px solid var(--ds-line-2);
    background:
        /* T-molding: the accent runs down both sides of the cabinet */
        linear-gradient(90deg, rgba(var(--table-card-glow), 0.45) 0 3px, transparent 3px calc(100% - 3px), rgba(var(--table-card-glow), 0.45) calc(100% - 3px)),
        linear-gradient(180deg, color-mix(in srgb, var(--arc-fg) 6%, var(--arc-bg)), color-mix(in srgb, var(--arc-fg) 3%, var(--arc-bg)));
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--arc-fg) 10%, transparent);
    color: var(--arc-fg);
    transition: transform 0.12s steps(2, end), box-shadow 0.12s steps(2, end);
}

html[data-theme="arcade"] .table-card.table-card--grid:is(:hover, :focus-visible) {
    transform: translate(-3px, -3px);
    border-color: rgb(var(--table-card-glow));
    box-shadow: 10px 10px 0 rgba(var(--table-card-glow), 0.4);
    color: var(--arc-fg);
}

html[data-theme="arcade"] .table-card.table-card--grid:focus-visible {
    outline: 2px dashed var(--arc-wild);
    outline-offset: 4px;
}

/* The homepage runs no tables.js: each cabinet's wrapper carries the game
 * tone hook (index.php, site_game_tone_attrs) and the cabinet takes the tone
 * it inherits, the same colour the game wears on /Tables/ and every other
 * page. Until the tone arrives (and for artwork without a usable colour) the
 * hub's cartridge tones by slot stand in (Games/Hub .hub-cart, .is-tone-2,
 * .is-tone-3). */
html[data-theme="arcade"] .hx-tables-grid > :nth-child(3n+1) .table-card.table-card--grid { --table-card-glow: var(--game-rgb, var(--arc-p3-rgb)); }
html[data-theme="arcade"] .hx-tables-grid > :nth-child(3n+2) .table-card.table-card--grid { --table-card-glow: var(--game-rgb, var(--arc-p2-rgb)); }
html[data-theme="arcade"] .hx-tables-grid > :nth-child(3n) .table-card.table-card--grid { --table-card-glow: var(--game-rgb, var(--arc-p4-rgb)); }

/* The default popularity ember and sheen; the cabinet has its own lights. */
html[data-theme="arcade"] .table-card.table-card--grid.is-popular::before {
    content: none;
}

/* ---- marquee + screen ----------------------------------------------------------- */

html[data-theme="arcade"] .table-card.table-card--grid .table-card-banner {
    display: grid;
    flex: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--cab-mq) auto;
    aspect-ratio: auto;
    min-height: 0;
    overflow: hidden;
    background:
        /* marquee frame: a lit top edge, a black trim at the bottom */
        linear-gradient(180deg, rgba(var(--arc-fg-rgb), 0.16) 0 2px, transparent 2px calc(100% - 4px), #000 calc(100% - 4px)) 0 0 / 100% var(--cab-mq) no-repeat,
        linear-gradient(var(--arc-bg), var(--arc-bg)) 0 0 / 100% var(--cab-mq) no-repeat;
}

/* The backlight: on at rest and strongest at the tubes along the edges; the
 * print behind the logo stays dark, so light, thin or small logos read on
 * every accent. It strikes to full when the cabinet powers up. */
html[data-theme="arcade"] .table-card.table-card--grid .table-card-banner::before {
    content: '';
    grid-area: 1 / 1 / 2 / 2;
    position: absolute;
    inset: 2px 0 4px;
    z-index: 0;
    background:
        radial-gradient(36% 60% at 50% 50%, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4) 55%, transparent 100%),
        linear-gradient(180deg, rgba(var(--table-card-glow), 0.6) 0 2px, transparent 2px 30%, transparent 70%, rgba(var(--table-card-glow), 0.6) calc(100% - 2px)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.25)),
        linear-gradient(90deg, rgba(var(--table-card-glow), 0.6), rgba(var(--table-card-glow), 0.32) 50%, rgba(var(--table-card-glow), 0.6));
    box-shadow: inset 0 0 0 2px rgba(var(--table-card-glow), 0.35);
    opacity: 0.85;
    pointer-events: none;
}

/* The logo keeps a dark contour, so its edge holds against the tubes. */
html[data-theme="arcade"] .table-card.table-card--grid .table-card-logo {
    grid-area: 1 / 1 / 2 / 2;
    place-self: center;
    position: relative;
    z-index: 2;
    width: 88%;
    max-width: none;
    height: calc(var(--cab-mq) - 8px);
    max-height: none;
    object-fit: contain;
    filter:
        drop-shadow(0 0 1px rgba(0, 0, 0, 0.95))
        drop-shadow(0 2px 0 rgba(0, 0, 0, 0.7))
        drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
    transform: none;
}

html[data-theme="arcade"] .table-card.table-card--grid .table-card-icon {
    grid-area: 1 / 1 / 2 / 2;
    place-self: center;
    z-index: 2;
    color: rgb(var(--table-card-glow));
    font-size: 2rem;
    opacity: 1;
    text-shadow: 0 0 12px rgba(var(--table-card-glow), 0.6);
}

/* The screen: the artwork inside the bezel, uncropped and never blurred. */
html[data-theme="arcade"] .table-card.table-card--grid .table-card-artwork {
    grid-area: 2 / 1 / 3 / 2;
    position: relative;
    inset: auto;
    z-index: 0;
    align-self: start;
    justify-self: start;
    width: calc(100% - 2 * (var(--cab-side) + var(--cab-bezel)));
    height: auto;
    aspect-ratio: 460 / 215;
    margin: calc(var(--cab-gap) + var(--cab-bezel)) calc(var(--cab-side) + var(--cab-bezel));
    object-fit: cover;
    filter: brightness(0.7) saturate(0.85);
    transform: none;
    opacity: 1;
    clip-path: inset(0);
    transition: filter 0.2s steps(3, end), opacity 0.2s steps(3, end);
}

html[data-theme="arcade"] .table-card.table-card--grid .table-card-artwork.is-pending {
    opacity: 0;
}

/* The glass and its bezel. */
html[data-theme="arcade"] .table-card.table-card--grid .table-card-shade {
    grid-area: 2 / 1 / 3 / 2;
    position: absolute;
    inset: var(--cab-gap) var(--cab-side);
    z-index: 1;
    border: var(--cab-bezel) solid #000;
    background:
        radial-gradient(120% 90% at 22% 0%, rgba(255, 255, 255, 0.09), transparent 42%),
        radial-gradient(ellipse at center, transparent 56%, rgba(0, 0, 0, 0.6) 100%);
    background-clip: padding-box;
    box-shadow:
        0 0 0 2px var(--ds-line-1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 0 28px rgba(0, 0, 0, 0.85);
    pointer-events: none;
}

html[data-theme="arcade"][data-crt="on"] .table-card.table-card--grid .table-card-shade {
    background:
        repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.26) 2px 3px),
        radial-gradient(120% 90% at 22% 0%, rgba(255, 255, 255, 0.09), transparent 42%),
        radial-gradient(ellipse at center, transparent 56%, rgba(0, 0, 0, 0.6) 100%);
    background-clip: padding-box;
}

/* The select cursor (cabinet.css): four pixel corners around the bezel, in
 * the gap the screen keeps above and below it. Shown on hover and keyboard
 * focus. */
html[data-theme="arcade"] .table-card.table-card--grid .table-card-shade::after {
    content: '';
    position: absolute;
    inset: calc(-1 * (var(--cab-bezel) + 6px));
    background: var(--cab-cursor);
    filter: drop-shadow(0 0 4px rgba(var(--arc-wild-rgb), 0.6));
    opacity: 0;
    pointer-events: none;
}

/* The version on the VER plate (cabinet.css), in the screen's corner where
 * an arcade boot screen prints its VER line. */
html[data-theme="arcade"] .table-card.table-card--grid .table-card-version {
    position: absolute;
    right: calc(var(--cab-side) + var(--cab-bezel) + 8px);
    bottom: calc(100% + var(--cab-gap) + var(--cab-bezel) + 8px);
    z-index: 3;
}

/* Most downloaded: the place as a plaque on the screen (the hub's cartridge
 * number), and chaser bulbs around the marquee. Ranks 1–3 read as places;
 * any other rank keeps its "#N". */
html[data-theme="arcade"] .table-card.table-card--grid .table-card-popular-flag {
    top: calc(var(--cab-mq) + var(--cab-gap) + var(--cab-bezel) + 8px);
    right: calc(var(--cab-side) + var(--cab-bezel) + 8px);
    left: auto;
    gap: 8px;
    padding: 6px 8px 5px;
    border: 2px solid rgba(var(--arc-wild-rgb), 0.75);
    background: var(--arc-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--arc-wild);
    font-family: var(--arc-pixel);
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    text-shadow: 0 0 8px rgba(var(--arc-wild-rgb), 0.55);
}

html[data-theme="arcade"] .table-card.table-card--grid .table-card-popular-flag i {
    zoom: 1;
    font-size: 16px;
}

html[data-theme="arcade"] .table-card.table-card--grid:is(.is-popular-rank-1, .is-popular-rank-2, .is-popular-rank-3) .table-card-popular-flag {
    gap: 0;
    font-size: 0;
}

html[data-theme="arcade"] .table-card.table-card--grid:is(.is-popular-rank-1, .is-popular-rank-2, .is-popular-rank-3) .table-card-popular-flag :is(i, .visually-hidden),
html[data-theme="arcade"] .table-card.table-card--grid:is(.is-popular-rank-1, .is-popular-rank-2, .is-popular-rank-3) .table-card-popular-flag::after {
    font-size: 16px;
}

html[data-theme="arcade"] .table-card.table-card--grid:is(.is-popular-rank-1, .is-popular-rank-2, .is-popular-rank-3) .table-card-popular-flag::after {
    margin-left: 8px;
}

html[data-theme="arcade"] .table-card.table-card--grid.is-popular-rank-1 .table-card-popular-flag::after { content: '1ST'; content: '1ST' / ''; }
html[data-theme="arcade"] .table-card.table-card--grid.is-popular-rank-2 .table-card-popular-flag::after { content: '2ND'; content: '2ND' / ''; }
html[data-theme="arcade"] .table-card.table-card--grid.is-popular-rank-3 .table-card-popular-flag::after { content: '3RD'; content: '3RD' / ''; }

html[data-theme="arcade"] .table-card.table-card--grid.is-popular .table-card-banner::after {
    content: '';
    display: block;
    grid-area: 1 / 1 / 2 / 2;
    position: absolute;
    inset: 4px 6px 8px;
    z-index: 3;
    width: auto;
    background:
        linear-gradient(90deg, rgba(var(--arc-wild-rgb), 0.9) 0 4px, transparent 4px) 0 0 / 12px 4px repeat-x,
        linear-gradient(90deg, rgba(var(--arc-wild-rgb), 0.9) 0 4px, transparent 4px) 6px 100% / 12px 4px repeat-x;
    opacity: 0.6;
    transform: none;
    animation: none;
    will-change: auto;
}

/* ---- nameplate, control panel, coin door ---------------------------------------- */

html[data-theme="arcade"] .table-card.table-card--grid .table-card-body {
    position: relative;
    inset: auto;
    z-index: auto;
    display: grid;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) auto;
    /* nameplate, slack, panel top, lamp 1, lamp 2, panel bottom, coin door,
     * and a second coin-door row that only the narrowest cabinet uses */
    grid-template-rows: auto 1fr 12px auto auto 12px auto auto;
    gap: 0;
    padding: 0 var(--cab-pad);
    border: 0;
    background: none;
    opacity: 1;
    transform: none;
    transition: none;
}

html[data-theme="arcade"] .table-card.table-card--grid :is(.table-card-head, .table-card-badges, .table-card-meta) {
    display: contents;
}

/* The control panel plate: chamfered, with a lit front edge. */
html[data-theme="arcade"] .table-card.table-card--grid .table-card-body::before {
    content: '';
    grid-row: 3 / 7;
    grid-column: 1 / -1;
    position: absolute;
    inset: 0 calc(-1 * var(--cab-pad));
    background:
        linear-gradient(180deg, rgba(var(--arc-fg-rgb), 0.2) 0 2px, rgba(0, 0, 0, 0.55) 2px 4px, transparent 4px),
        linear-gradient(180deg, rgba(var(--table-card-glow), 0.1), rgba(var(--table-card-glow), 0.02) 70%),
        color-mix(in srgb, var(--arc-fg) 7%, var(--arc-bg));
    clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px);
    pointer-events: none;
}

/* The coin door: darker metal under a dashed seam (the hub's card foot). */
html[data-theme="arcade"] .table-card.table-card--grid .table-card-body::after {
    content: '';
    grid-row: 7 / -1;
    grid-column: 1 / -1;
    position: absolute;
    inset: 0 calc(-1 * var(--cab-pad));
    border-top: 2px dashed var(--ds-line-1);
    background: color-mix(in srgb, #000 45%, var(--arc-bg));
    pointer-events: none;
}

html[data-theme="arcade"] .table-card.table-card--grid .table-card-body > *,
html[data-theme="arcade"] .table-card.table-card--grid :is(.table-card-badges, .table-card-meta) > * {
    position: relative;
    z-index: 1;
}

/* Nameplate. Static, so the version inside it is placed against the body. */
html[data-theme="arcade"] .table-card.table-card--grid .table-card-head > .table-card-title {
    grid-row: 1;
    grid-column: 1 / -1;
    position: static;
    display: block;
    margin: 12px 0;
    color: var(--arc-fg);
    font-family: var(--arc-pixel);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-shadow: 0 0 10px rgba(var(--table-card-glow), 0.45);
}

html[data-theme="arcade"] .table-card.table-card--grid .table-card-name {
    display: inline;
    min-width: 0;
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
    text-overflow: clip;
}

/* Lamps: access (or upcoming) and the tracker state. The icon is the lamp;
 * the label, hidden by default for an icon-only badge, is printed beside it. */
html[data-theme="arcade"] .table-card.table-card--grid .table-card-badges > .status-badge {
    --lamp: var(--arc-dim-rgb);
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cab-ink);
    font-family: var(--arc-text);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0;
    white-space: normal;
    cursor: default;
}

html[data-theme="arcade"] .table-card.table-card--grid .table-card-badges > .table-card-status {
    grid-row: 5;
    margin-top: 8px;
}

html[data-theme="arcade"] .table-card.table-card--grid .table-card-badges > .is-success { --lamp: var(--arc-good-rgb); }
html[data-theme="arcade"] .table-card.table-card--grid .table-card-badges > .is-patreon { --lamp: var(--arc-patreon-rgb); }
html[data-theme="arcade"] .table-card.table-card--grid .table-card-badges > .is-warning { --lamp: var(--arc-wild-rgb); }
html[data-theme="arcade"] .table-card.table-card--grid .table-card-badges > .is-info { --lamp: var(--arc-link-rgb); }
html[data-theme="arcade"] .table-card.table-card--grid .table-card-badges > .is-error { --lamp: var(--arc-bad-rgb); }

html[data-theme="arcade"] .table-card.table-card--grid .table-card-badges > .status-badge > i {
    display: inline-grid;
    place-items: center;
    flex: none;
    zoom: 1;
    width: 28px;
    height: 28px;
    border: 2px solid rgba(var(--lamp), 0.6);
    background: rgba(var(--lamp), 0.12);
    color: rgb(var(--lamp));
    font-size: 15px;
}

/* A tracker state without a verdict (tracked, unknown, not tracked) is a
 * hollow lamp: it never fills, so it never reads like a lit "all good". */
html[data-theme="arcade"] .table-card.table-card--grid .table-card-badges > .table-card-status:is([data-tracker-state="tracked"], [data-tracker-state="unknown"], [data-tracker-state="not-tracked"]) > i {
    border-style: dashed;
    background: transparent;
}

html[data-theme="arcade"] .table-card.table-card--grid .table-card-badges > .status-badge > .visually-hidden {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* Counters: the number on a small LCD, the word beside it. */
html[data-theme="arcade"] .table-card.table-card--grid .table-card-fact {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--cab-ink);
    font-family: var(--arc-text);
    font-size: 1rem;
    line-height: 1.1;
    white-space: nowrap;
}

html[data-theme="arcade"] .table-card.table-card--grid :is(.table-card-options, .table-card-releases) {
    grid-column: 2;
    align-self: center;
    margin-left: 10px;
}

html[data-theme="arcade"] .table-card.table-card--grid .table-card-options {
    grid-row: 4;
}

html[data-theme="arcade"] .table-card.table-card--grid .table-card-releases {
    grid-row: 5;
    margin-top: 8px;
}

html[data-theme="arcade"] .table-card.table-card--grid :is(.table-card-options, .table-card-releases) > i {
    display: none;
}

html[data-theme="arcade"] .table-card.table-card--grid .table-card-num {
    flex: none;
    min-width: 44px;
    padding: 5px 4px 4px;
    border: 2px solid rgba(var(--table-card-glow), 0.4);
    background: #000;
    color: rgb(var(--table-card-glow));
    font-family: var(--arc-pixel);
    font-size: 16px;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* One counter (the homepage passes no release count): it takes both rows
 * on a larger LCD with its word underneath, a scoreboard, so the panel has
 * no empty slot. */
html[data-theme="arcade"] .table-card.table-card--grid .table-card-meta:not(:has(.table-card-releases)) > .table-card-options {
    grid-row: 4 / 6;
    flex-direction: column;
    gap: 4px;
}

html[data-theme="arcade"] .table-card.table-card--grid .table-card-meta:not(:has(.table-card-releases)) > .table-card-options > .table-card-num {
    min-width: 64px;
    padding: 8px 6px 7px;
    font-size: 24px;
}

/* No counter at all (an upcoming table): an empty, hatched LCD slot. */
html[data-theme="arcade"] .table-card.table-card--grid .table-card-meta:not(:has(.table-card-options, .table-card-releases))::before {
    content: '';
    grid-row: 4 / 6;
    grid-column: 2;
    position: relative;
    z-index: 1;
    align-self: center;
    width: 112px;
    height: 42px;
    margin-left: 10px;
    border: 2px dashed var(--ds-line-2);
    background: var(--cab-hatch), #000;
}

/* Coin door: when, and the way in. */
html[data-theme="arcade"] .table-card.table-card--grid .table-card-updated {
    grid-row: 7;
    grid-column: 1;
    align-self: center;
    margin: 14px 0 15px;
}

html[data-theme="arcade"] .table-card.table-card--grid .table-card-updated i {
    zoom: 1;
    color: var(--arc-dim);
    font-size: 14px;
}

html[data-theme="arcade"] .table-card.table-card--grid .table-card-cta {
    grid-row: 7;
    grid-column: 2;
    justify-self: end;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 11px 10px;
    padding: 3px 7px 3px 10px;
    border: 2px solid rgba(var(--table-card-glow), 0.65);
    background: #000;
    box-shadow: inset 4px 0 0 currentColor;
    color: rgb(var(--table-card-glow));
    font-family: var(--arc-text);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

/* A lit coin slot down the left edge, a pixel arrow behind (the site's
 * active-nav arrow). */
html[data-theme="arcade"] .table-card.table-card--grid .table-card-cta::after {
    content: '';
    flex: none;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-right: 0;
    border-left: 6px solid currentColor;
}

html[data-theme="arcade"] .table-card.table-card--grid .table-card-cta i {
    display: none;
}

/* Narrower cabinets keep "Updated …" and the way in on one line: first the
 * clock goes (the word says it), then the door tightens; the narrowest
 * cabinet (a 320px phone) stacks them. */
@container table-cab (max-width: 365.98px) {
    html[data-theme="arcade"] .table-card.table-card--grid .table-card-updated i {
        display: none;
    }
}

@container table-cab (max-width: 339.98px) {
    html[data-theme="arcade"] .table-card.table-card--grid .table-card-body {
        --cab-pad: 10px;
    }

    html[data-theme="arcade"] .table-card.table-card--grid .table-card-cta {
        margin-left: 8px;
        padding: 3px 6px 3px 8px;
    }
}

@container table-cab (max-width: 330.98px) {
    html[data-theme="arcade"] .table-card.table-card--grid .table-card-updated {
        grid-column: 1 / -1;
        margin: 12px 0 0;
    }

    html[data-theme="arcade"] .table-card.table-card--grid .table-card-cta {
        grid-row: 8;
        grid-column: 1 / -1;
        margin: 8px 0 11px;
    }
}

/* ---- upcoming: an unpowered cabinet ---------------------------------------------- */

/* Nothing to play yet: the screen and the marquee stay dark and grey, and the
 * coin slot is taped over. The lamp says "Upcoming"; the slot does not repeat
 * it (the call to action is aria-hidden, so nothing is lost to a reader). */
html[data-theme="arcade"] .table-card.table-card--grid.is-upcoming .table-card-banner::before {
    opacity: 0.3;
    filter: grayscale(1);
}

html[data-theme="arcade"] .table-card.table-card--grid.is-upcoming .table-card-logo {
    filter:
        grayscale(1) brightness(0.75)
        drop-shadow(0 0 1px rgba(0, 0, 0, 0.95))
        drop-shadow(0 2px 0 rgba(0, 0, 0, 0.7));
}

html[data-theme="arcade"] .table-card.table-card--grid.is-upcoming .table-card-artwork {
    filter: grayscale(1) brightness(0.45);
}

html[data-theme="arcade"] .table-card.table-card--grid.is-upcoming .table-card-cta {
    padding-left: 7px;
    border: 2px dashed var(--ds-line-2);
    background: var(--cab-hatch), #000;
    box-shadow: none;
    color: transparent;
}

html[data-theme="arcade"] .table-card.table-card--grid.is-upcoming .table-card-cta::after {
    content: none;
}

/* ---- powered up: hover, keyboard focus --------------------------------------------- */

html[data-theme="arcade"] .table-card.table-card--grid:is(:hover, :focus-visible) .table-card-shade::after {
    opacity: 1;
    animation: table-cab-cursor-in 0.16s steps(2, end) both, arc-cab-cursor-blink 1.2s steps(1, end) 0.6s infinite;
}

html[data-theme="arcade"] .table-card.table-card--grid:is(:hover, :focus-visible) .table-card-banner::before {
    opacity: 1;
    animation: arc-cab-marquee-on 0.5s both;
}

html[data-theme="arcade"] .table-card.table-card--grid:is(:hover, :focus-visible) .table-card-logo {
    filter:
        drop-shadow(0 0 1px rgba(0, 0, 0, 0.95))
        drop-shadow(0 2px 0 rgba(0, 0, 0, 0.7))
        drop-shadow(0 0 10px rgba(var(--table-card-glow), 0.6));
}

html[data-theme="arcade"] .table-card.table-card--grid:is(:hover, :focus-visible) .table-card-artwork {
    filter: none;
    transform: none;
    opacity: 1;
}

html[data-theme="arcade"] .table-card.table-card--grid.is-popular:is(:hover, :focus-visible) .table-card-banner::after {
    opacity: 1;
    animation: arc-cab-chase 0.48s steps(3, end) infinite;
}

html[data-theme="arcade"] .table-card.table-card--grid:is(:hover, :focus-visible) .table-card-badges > .status-badge > i {
    border-color: rgb(var(--lamp));
    background: rgb(var(--lamp));
    color: var(--arc-bg);
    box-shadow: 0 0 12px rgba(var(--lamp), 0.7);
    transition: background 0.12s steps(1), color 0.12s steps(1), box-shadow 0.12s steps(1), border-color 0.12s steps(1);
}

html[data-theme="arcade"] .table-card.table-card--grid:is(:hover, :focus-visible) .table-card-badges > .table-card-status > i {
    transition-delay: 0.08s;
}

html[data-theme="arcade"] .table-card.table-card--grid:is(:hover, :focus-visible) :is(.table-card-badges > .status-badge, .table-card-fact) {
    color: var(--arc-fg);
}

html[data-theme="arcade"] .table-card.table-card--grid:is(:hover, :focus-visible) .table-card-num {
    border-color: rgb(var(--table-card-glow));
    text-shadow: 0 0 8px rgba(var(--table-card-glow), 0.8);
    transition: text-shadow 0.12s steps(1) 0.16s, border-color 0.12s steps(1) 0.16s;
}

html[data-theme="arcade"] .table-card.table-card--grid:is(:hover, :focus-visible) .table-card-cta {
    background: rgb(var(--table-card-glow));
    color: var(--arc-bg);
    box-shadow: inset 4px 0 0 var(--arc-bg), 0 0 14px rgba(var(--table-card-glow), 0.55);
    transition: background 0.12s steps(1), color 0.12s steps(1), box-shadow 0.12s steps(1);
}

html[data-theme="arcade"] .table-card.table-card--grid:is(:hover, :focus-visible) .table-card-cta::after {
    animation: arcade-site-blink 0.8s steps(1) infinite;
}

/* A hollow lamp lights its ring only. */
html[data-theme="arcade"] .table-card.table-card--grid:is(:hover, :focus-visible) .table-card-badges > .table-card-status:is([data-tracker-state="tracked"], [data-tracker-state="unknown"], [data-tracker-state="not-tracked"]) > i {
    background: transparent;
    color: rgb(var(--lamp));
    box-shadow: none;
}

/* Lit means "needs attention", across the family: a "Review recommended"
 * lamp stands lit at rest, steady, with its word in the lamp's tone (the
 * Steam Tracker's lamp, without the blink). After the powered-up rules, so
 * it keeps its tone while the cabinet is powered up too. */
html[data-theme="arcade"] .table-card.table-card--grid .table-card-badges > .table-card-status[data-tracker-state="needs-review"] {
    color: rgb(var(--lamp));
}

html[data-theme="arcade"] .table-card.table-card--grid .table-card-badges > .table-card-status[data-tracker-state="needs-review"] > i {
    border-color: rgb(var(--lamp));
    background: rgb(var(--lamp));
    color: var(--arc-bg);
    box-shadow: 0 0 12px rgba(var(--lamp), 0.7);
}

/* The unpowered cabinet still answers the cursor; its screen stays off. */
html[data-theme="arcade"] .table-card.table-card--grid.is-upcoming:is(:hover, :focus-visible) .table-card-banner::before {
    opacity: 0.3;
    animation: none;
}

html[data-theme="arcade"] .table-card.table-card--grid.is-upcoming:is(:hover, :focus-visible) .table-card-logo {
    filter:
        grayscale(1) brightness(0.9)
        drop-shadow(0 0 1px rgba(0, 0, 0, 0.95))
        drop-shadow(0 2px 0 rgba(0, 0, 0, 0.7));
}

html[data-theme="arcade"] .table-card.table-card--grid.is-upcoming:is(:hover, :focus-visible) .table-card-artwork {
    filter: grayscale(1) brightness(0.6);
}

html[data-theme="arcade"] .table-card.table-card--grid.is-upcoming:is(:hover, :focus-visible) .table-card-cta {
    background: var(--cab-hatch), #000;
    color: transparent;
    box-shadow: none;
}

/* The cursor snaps in from a step further out, then blinks like a menu
 * cursor (arc-cab-cursor-blink, cabinet.css). Every frame is a hard cut; the
 * marquee strike and the bulb chase are cabinet.css's too. */
@keyframes table-cab-cursor-in {
    from { inset: calc(-1 * (var(--cab-bezel) + 14px)); }
}


/* ---- no hover (touch): the cabinet stands powered up ---------------------------------- */

/* A tap leaves :hover stuck on the card; it gets the static lit state only,
 * no cursor, no flicker, no chase, no blink. Pressing shows the cursor and
 * pushes the cabinet in. */
@media (hover: none) {
    html[data-theme="arcade"] .table-card.table-card--grid,
    html[data-theme="arcade"] .table-card.table-card--grid:is(:hover, :focus-visible) {
        transform: none;
    }

    html[data-theme="arcade"] .table-card.table-card--grid:hover:not(:focus-visible) {
        border-color: var(--ds-line-2);
        box-shadow: 6px 6px 0 color-mix(in srgb, var(--arc-fg) 10%, transparent);
    }

    html[data-theme="arcade"] .table-card.table-card--grid .table-card-banner::before,
    html[data-theme="arcade"] .table-card.table-card--grid.is-popular .table-card-banner::after {
        opacity: 1;
        animation: none;
    }

    html[data-theme="arcade"] .table-card.table-card--grid .table-card-artwork {
        filter: brightness(0.9);
    }

    html[data-theme="arcade"] .table-card.table-card--grid .table-card-badges > .status-badge > i {
        border-color: rgb(var(--lamp));
        background: rgb(var(--lamp));
        color: var(--arc-bg);
        box-shadow: 0 0 10px rgba(var(--lamp), 0.55);
    }

    html[data-theme="arcade"] .table-card.table-card--grid .table-card-badges > .table-card-status:is([data-tracker-state="tracked"], [data-tracker-state="unknown"], [data-tracker-state="not-tracked"]) > i {
        background: transparent;
        color: rgb(var(--lamp));
        box-shadow: none;
    }

    html[data-theme="arcade"] .table-card.table-card--grid:hover:not(:focus-visible) :is(.table-card-shade, .table-card-cta)::after,
    html[data-theme="arcade"] .table-card.table-card--grid:hover:not(:focus-visible) .table-card-banner::before,
    html[data-theme="arcade"] .table-card.table-card--grid.is-popular:hover:not(:focus-visible) .table-card-banner::after {
        animation: none;
    }

    html[data-theme="arcade"] .table-card.table-card--grid:hover:not(:focus-visible):not(:active) .table-card-shade::after {
        opacity: 0;
    }

    html[data-theme="arcade"] .table-card.table-card--grid:active .table-card-shade::after {
        opacity: 1;
    }

    html[data-theme="arcade"] .table-card.table-card--grid:active,
    html[data-theme="arcade"] .table-card.table-card--grid:hover:active {
        transform: translate(3px, 3px);
        box-shadow: 3px 3px 0 color-mix(in srgb, var(--arc-fg) 10%, transparent);
    }
}

/* ---- reduced motion: the same states, no movement ------------------------------------- */

/* The selectors repeat the ones they quiet, so they win by order, not by
 * weight. The cabinet still powers up and the cursor still shows; nothing
 * flickers, chases, blinks, snaps or steps. */
@media (prefers-reduced-motion: reduce) {
    html[data-theme="arcade"] .table-card.table-card--grid,
    html[data-theme="arcade"] .table-card.table-card--grid .table-card-artwork,
    html[data-theme="arcade"] .table-card.table-card--grid:is(:hover, :focus-visible) .table-card-badges > .status-badge > i,
    html[data-theme="arcade"] .table-card.table-card--grid:is(:hover, :focus-visible) .table-card-num,
    html[data-theme="arcade"] .table-card.table-card--grid:is(:hover, :focus-visible) .table-card-cta {
        transition: none;
    }

    html[data-theme="arcade"] .table-card.table-card--grid:is(:hover, :focus-visible, :active),
    html[data-theme="arcade"] .table-card.table-card--grid:hover:active {
        transform: none;
    }

    html[data-theme="arcade"] .table-card.table-card--grid:is(:hover, :focus-visible) .table-card-shade::after,
    html[data-theme="arcade"] .table-card.table-card--grid:is(:hover, :focus-visible) .table-card-banner::before,
    html[data-theme="arcade"] .table-card.table-card--grid.is-popular:is(:hover, :focus-visible) .table-card-banner::after,
    html[data-theme="arcade"] .table-card.table-card--grid:is(:hover, :focus-visible) .table-card-cta::after {
        animation: none;
    }
}

/* ==== Table page: the game's own cabinet ====================================
 *
 * Every OPEN TABLE and VIEW TABLE lands here, so the page wears the game's
 * tone like its card does: <main> carries the tone hook (Table_Page.php,
 * site_game_tone_attrs) and JS/game-tone.js writes --game-rgb on it; until
 * then, and for artwork without a usable colour, the screen's foreground.
 *
 *   hero         the logo on the backlit marquee tile (the Tracker's and the
 *                Changelog's tile), the title glowing in the tone, access
 *                and tracker state as the cabinet's lamps, the versions on
 *                VER plates (cabinet.css)
 *   features     every group a small cabinet: the tone down both sides, the
 *                name as a 16px nameplate, the count on an LCD, the bullets
 *                as pixels in the tone
 *   releases     the Changelog's ticket grammar: a square lamp per release on
 *                a strip of lights, the version on its VER plate, the type
 *                as an LED (cabinet.css's type lamps), a release's file as a
 *                coin slot, lit when it is the one the download serves
 *
 * Calm on purpose: nothing steps or flickers; pointing at a group or a
 * release only lights it. Lamps follow the family rule: unlit rings at rest,
 * lit when they need attention ("Review recommended") and on touch screens,
 * hollow for a tracker state without a verdict. */

html[data-theme="arcade"] :is(.tp-hero, .tp-section) {
    --tp-tone: var(--game-rgb, var(--arc-fg-rgb));
    --tp-ink: color-mix(in srgb, var(--arc-fg) 84%, var(--arc-bg));
}

/* Section titles (h2) stay on the 16px grid on phones too, where every h2
 * drops to 12px. */
html[data-theme="arcade"] .tp-section .tp-section-title {
    font-size: 16px;
    line-height: 1.5;
}

/* ---- hero ---------------------------------------------------------------------- */

html[data-theme="arcade"] .tp-hero .tp-hero-logo {
    position: relative;
    isolation: isolate;
    /* a definite cell, so the logo is fitted to the tile, not to itself */
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    width: 224px;
    height: 96px;
    padding: 8px 12px;
    border: 2px solid #000;
    background: var(--arc-bg);
    box-shadow: 0 0 0 2px var(--ds-line-1), 6px 6px 0 color-mix(in srgb, var(--arc-fg) 10%, transparent);
    color: rgb(var(--tp-tone));
}

/* The backlight: tubes along the edges in the tone, dark print behind the
 * logo, at the cabinet's resting strength. */
html[data-theme="arcade"] .tp-hero .tp-hero-logo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(46% 64% at 50% 50%, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.45) 60%, transparent 100%),
        linear-gradient(180deg, rgba(var(--tp-tone), 0.6) 0 2px, transparent 2px 30%, transparent 70%, rgba(var(--tp-tone), 0.6) calc(100% - 2px)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.25)),
        linear-gradient(90deg, rgba(var(--tp-tone), 0.6), rgba(var(--tp-tone), 0.32) 50%, rgba(var(--tp-tone), 0.6));
    box-shadow: inset 0 0 0 2px rgba(var(--tp-tone), 0.35);
    opacity: 0.85;
    pointer-events: none;
}

html[data-theme="arcade"] .tp-hero .tp-hero-logo img {
    width: 100%;
    height: 100%;
    filter:
        drop-shadow(0 0 1px rgba(0, 0, 0, 0.95))
        drop-shadow(0 2px 0 rgba(0, 0, 0, 0.7))
        drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
}

html[data-theme="arcade"] .tp-hero .tp-hero-logo > i {
    zoom: 1;
    font-size: 32px;
    text-shadow: 0 0 12px rgba(var(--tp-tone), 0.6);
}

html[data-theme="arcade"] .tp-hero .tp-hero-title {
    text-shadow: 0 0 12px rgba(var(--tp-tone), 0.6), 0 2px 0 #000;
}

/* The breadcrumb sits where the artwork shows through brightest; a dark
 * strip behind it keeps it readable on every screen and every artwork. */
html[data-theme="arcade"] .tp-hero .tp-breadcrumb .breadcrumb {
    width: fit-content;
    max-width: 100%;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.62);
}

html[data-theme="arcade"] .tp-hero .tp-hero-meta {
    gap: 10px 16px;
}

/* Lamps: access (or upcoming) and the tracker state, the cabinet's 28px
 * housings with the word beside them. */
html[data-theme="arcade"] .tp-hero .tp-hero-meta .status-badge {
    --lamp: var(--arc-dim-rgb);
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tp-ink);
    font-family: var(--arc-text);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0;
}

html[data-theme="arcade"] .tp-hero .tp-hero-meta .status-badge.is-success { --lamp: var(--arc-good-rgb); }
html[data-theme="arcade"] .tp-hero .tp-hero-meta .status-badge.is-patreon { --lamp: var(--arc-patreon-rgb); }
html[data-theme="arcade"] .tp-hero .tp-hero-meta .status-badge.is-warning { --lamp: var(--arc-wild-rgb); }
html[data-theme="arcade"] .tp-hero .tp-hero-meta .status-badge.is-info { --lamp: var(--arc-link-rgb); }
html[data-theme="arcade"] .tp-hero .tp-hero-meta .status-badge.is-error { --lamp: var(--arc-bad-rgb); }

html[data-theme="arcade"] .tp-hero .tp-hero-meta .status-badge > i {
    display: inline-grid;
    place-items: center;
    flex: none;
    zoom: 1;
    width: 28px;
    height: 28px;
    border: 2px solid rgba(var(--lamp), 0.6);
    background: rgba(var(--lamp), 0.12);
    color: rgb(var(--lamp));
    font-size: 15px;
}

/* No verdict (tracked, unknown, not tracked): a hollow lamp that never fills. */
html[data-theme="arcade"] .tp-hero .tp-hero-meta .tp-tracker-badge:is([data-tracker-state="tracked"], [data-tracker-state="unknown"], [data-tracker-state="not-tracked"]) > i {
    border-style: dashed;
    background: transparent;
}

/* Needs attention: lit and steady, the word in the lamp's tone. */
html[data-theme="arcade"] .tp-hero .tp-hero-meta .tp-tracker-badge[data-tracker-state="needs-review"] {
    color: rgb(var(--lamp));
}

html[data-theme="arcade"] .tp-hero .tp-hero-meta .tp-tracker-badge[data-tracker-state="needs-review"] > i {
    border-color: rgb(var(--lamp));
    background: rgb(var(--lamp));
    color: var(--arc-bg);
    box-shadow: 0 0 12px rgba(var(--lamp), 0.7);
}

html[data-theme="arcade"] .tp-hero .tp-hero-meta .tp-fact {
    color: var(--ds-text-2);
    font-size: 1rem;
}

/* Phones: the marquee runs the full width over the nameplate, like the top
 * of a cabinet. */
@media (max-width: 767.98px) {
    html[data-theme="arcade"] .tp-hero .tp-hero-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    html[data-theme="arcade"] .tp-hero .tp-hero-logo {
        grid-column: 1;
        grid-row: 1;
        width: 100%;
        height: 80px;
        padding: 8px 12px;
    }

    html[data-theme="arcade"] .tp-hero .tp-hero-title {
        grid-column: 1;
        grid-row: 2;
    }
}

/* ---- features: a cabinet per group ------------------------------------------------ */

html[data-theme="arcade"] .tp-features .tp-group {
    padding: 12px 14px;
    border: 2px solid var(--ds-line-2);
    background:
        /* T-molding: the tone down both sides */
        linear-gradient(90deg, rgba(var(--tp-tone), 0.45) 0 3px, transparent 3px calc(100% - 3px), rgba(var(--tp-tone), 0.45) calc(100% - 3px)),
        linear-gradient(180deg, color-mix(in srgb, var(--arc-fg) 6%, var(--arc-bg)), color-mix(in srgb, var(--arc-fg) 3%, var(--arc-bg)));
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--arc-fg) 10%, transparent);
}

html[data-theme="arcade"] .tp-features .tp-group-head {
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 2px dashed var(--ds-line-1);
}

/* The nameplate. */
html[data-theme="arcade"] .tp-features .tp-group-title {
    align-items: center;
    gap: 10px;
    color: var(--arc-fg);
    font-family: var(--arc-pixel);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    overflow-wrap: break-word;
    text-shadow: 0 0 10px rgba(var(--tp-tone), 0.45);
}

html[data-theme="arcade"] .tp-features .tp-group-title > i {
    zoom: 1;
    color: rgb(var(--tp-tone));
    font-size: 14px;
}

/* The count on an LCD. */
html[data-theme="arcade"] .tp-features .tp-group-count {
    min-width: 44px;
    padding: 5px 4px 4px;
    border: 2px solid rgba(var(--tp-tone), 0.4);
    background: #000;
    color: rgb(var(--tp-tone));
    font-family: var(--arc-pixel);
    font-size: 16px;
    line-height: 1;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

html[data-theme="arcade"] .tp-features .tp-feature {
    color: var(--tp-ink);
    transition: none;
}

html[data-theme="arcade"] .tp-features .tp-feature-marker:not(.is-patreon) {
    width: 6px;
    height: 6px;
    background: rgb(var(--tp-tone));
    box-shadow: 0 0 6px rgba(var(--tp-tone), 0.55);
}

/* Colour only: a group lights its edge and its LCD, a row takes a tint. */
html[data-theme="arcade"] .tp-features .tp-group:has(:focus-visible) {
    border-color: rgb(var(--tp-tone));
}

html[data-theme="arcade"] .tp-features .tp-group:has(:focus-visible) .tp-group-count {
    border-color: rgb(var(--tp-tone));
    text-shadow: 0 0 8px rgba(var(--tp-tone), 0.8);
}

@media (hover: hover) {
    html[data-theme="arcade"] .tp-features .tp-group:hover {
        border-color: rgb(var(--tp-tone));
    }

    html[data-theme="arcade"] .tp-features .tp-group:hover .tp-group-count {
        border-color: rgb(var(--tp-tone));
        text-shadow: 0 0 8px rgba(var(--tp-tone), 0.8);
    }

    html[data-theme="arcade"] .tp-features .tp-feature:hover {
        background: rgba(var(--tp-tone), 0.08);
        color: var(--arc-fg);
    }
}

/* ---- release history: the Changelog's tickets ----------------------------------------- */

/* The lamp: a square bulb in the tone, on the head's middle line. */
html[data-theme="arcade"] .tp-releases .tp-release-marker {
    width: 12px;
    height: 12px;
    margin-top: 7px;
    border: 2px solid #000;
    background: rgb(var(--tp-tone));
    box-shadow: 0 0 0 2px rgba(var(--tp-tone), 0.35), 0 0 8px rgba(var(--tp-tone), 0.35);
}

/* From the lamp down to the next one: a strip of lights. */
html[data-theme="arcade"] .tp-releases .tp-release::before {
    top: 26px;
    bottom: 4px;
    left: 4px;
    width: 4px;
    background: linear-gradient(180deg, rgba(var(--tp-tone), 0.5) 0 4px, transparent 4px) 0 0 / 4px 12px repeat-y;
}

html[data-theme="arcade"] .tp-releases .tp-release-head {
    gap: 8px 14px;
}

/* The type LED (cabinet.css's type lamps): filled at rest with a dark rim,
 * its word printed beside it. */
html[data-theme="arcade"] .tp-releases .tp-release-head .status-badge {
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: rgb(var(--type-lamp));
    font-family: var(--arc-text);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html[data-theme="arcade"] .tp-releases .tp-release-head .status-badge::before {
    content: '';
    flex: none;
    width: 12px;
    height: 12px;
    background: rgb(var(--type-lamp));
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.4), 0 0 6px rgba(var(--type-lamp), 0.4);
}

html[data-theme="arcade"] .tp-releases .tp-release-date {
    color: var(--arc-dim);
}

/* The supported game version on a plate of its own. */
html[data-theme="arcade"] .tp-releases .tp-release-meta {
    padding: 1px 6px 0;
    border: 2px solid var(--ds-line-2);
    background: var(--arc-bg);
    color: color-mix(in srgb, var(--arc-dim) 50%, var(--arc-fg));
    font-family: var(--arc-text);
    font-size: 1rem;
    line-height: 1.25;
}

/* A release's table file: a coin slot, unlit; the one the download button
 * serves is lit in the tone. */
html[data-theme="arcade"] .tp-releases .tp-release-file {
    gap: 6px;
    padding: 1px 8px 0 10px;
    border: 2px solid var(--ds-line-2);
    background: #000;
    box-shadow: inset 4px 0 0 currentColor;
    color: color-mix(in srgb, var(--arc-dim) 50%, var(--arc-fg));
    font-family: var(--arc-text);
    font-size: 1rem;
    line-height: 1.25;
}

html[data-theme="arcade"] .tp-releases .tp-release-file > i {
    zoom: 1;
    font-size: 14px;
}

html[data-theme="arcade"] .tp-releases .tp-release-file.is-current {
    border-color: rgba(var(--tp-tone), 0.65);
    color: rgb(var(--tp-tone));
    box-shadow: inset 4px 0 0 currentColor, 0 0 12px rgba(var(--tp-tone), 0.3);
}

html[data-theme="arcade"] .tp-releases .tp-release-summary {
    color: var(--arc-fg);
    font-weight: 400;
}

html[data-theme="arcade"] .tp-releases .tp-release-items {
    padding-left: 0;
    color: var(--tp-ink);
    list-style: none;
}

html[data-theme="arcade"] .tp-releases .tp-release-items li {
    position: relative;
    padding-left: 18px;
}

/* Pixel bullets in the tone, on the first line's middle. */
html[data-theme="arcade"] .tp-releases .tp-release-items li::before {
    content: '';
    position: absolute;
    top: calc(0.8em - 3px);
    left: 0;
    width: 6px;
    height: 6px;
    background: rgb(var(--tp-tone));
    box-shadow: 0 0 6px rgba(var(--tp-tone), 0.55);
}

/* Pointed at, a release lights its lamp (and its VER plate, cabinet.css). */
@media (hover: hover) {
    html[data-theme="arcade"] .tp-releases .tp-release:hover .tp-release-marker {
        box-shadow: 0 0 0 2px rgba(var(--tp-tone), 0.8), 0 0 14px rgba(var(--tp-tone), 0.8);
    }

    html[data-theme="arcade"] .tp-releases .tp-release:hover .tp-release-head .status-badge::before {
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45), 0 0 12px rgba(var(--type-lamp), 0.85);
    }
}

/* Touch: the lamps stand lit, as on the cabinets. */
@media (hover: none) {
    html[data-theme="arcade"] .tp-hero .tp-hero-meta .status-badge > i {
        border-color: rgb(var(--lamp));
        background: rgb(var(--lamp));
        color: var(--arc-bg);
        box-shadow: 0 0 10px rgba(var(--lamp), 0.55);
    }

    html[data-theme="arcade"] .tp-hero .tp-hero-meta .tp-tracker-badge:is([data-tracker-state="tracked"], [data-tracker-state="unknown"], [data-tracker-state="not-tracked"]) > i {
        background: transparent;
        color: rgb(var(--lamp));
        box-shadow: none;
    }

    html[data-theme="arcade"] .tp-releases .tp-release-head .status-badge::before {
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45), 0 0 10px rgba(var(--type-lamp), 0.7);
    }
}