/* Arcade — the Changelog (/Changelog/): the archive as a row of tickets on a
 * lit track, after the Table cards' cabinet (CSS/arcade-parts/tables.css).
 *
 *   month        a marquee band: tubes along the top and bottom edges, bulbs
 *                running to the count, which sits on an LCD; lit in its
 *                year's colour (data-changelog-year-tone, Changelog/index.php)
 *   release      a ticket in its game's colour (--game-rgb, JS/game-tone.js):
 *                T-molding down both sides; the logo on a backlit marquee
 *                tile; the game's name as the nameplate; the type as a lamp;
 *                the change list on a dark screen behind a bezel, framed by
 *                the select cursor when the ticket powers up; a coin door
 *                with the version on its VER plate, the date and the way in
 *   track        the timeline: a square lamp per release, and from it a
 *                strip of lights in that game's colour down to the next one
 *   index rail   a select screen: years as lit labels, months as rows with a
 *                pixel cursor, counts on small LCDs (the FAQ's topic rail is
 *                the same screen, faq.css)
 *   toolbar      the type filter carries the same lamps as the tickets
 *
 * Every fact is visible at rest, on every device. Hover and keyboard focus
 * power a ticket up: it steps forward, its marquee strikes, its lamp and its
 * node light, its strip of track chases down. Without hover (touch) the
 * tickets stand lit and a press pushes one in. The ticket is not a link (its
 * text is meant to be read and copied), so the way in only fills when it is
 * pointed at itself.
 *
 * Type: VT323 is 1rem here (22px rendered by the "VT323 Arcade" face; the
 * rail note keeps the site's 0.8rem small print, about 18px); Press Start 2P
 * is 16px (month bands, names) or 8px (years, index counts).
 *
 * Colour: only the screen's tokens. The game colour arrives after the banner
 * has loaded, so nothing that reads it has a transition at rest; until then
 * (and for artwork without a usable colour) a ticket wears the screen's
 * foreground. Type lamps (--type-lamp) come from cabinet.css, one mapping
 * for the whole site: Release good, New link, Fix/Hotfix wild, Removed bad,
 * Update (and anything unknown) dim. So do the select cursor, the VER plate
 * and the marquee strike.
 *
 * Specificity: every rule starts with html[data-theme="arcade"] and names the
 * page's own classes, so it outranks CSS/styles.css (loaded before this file)
 * and the small-print block of theme-arcade.css. The default look's rule that
 * ends the track at the last visible entry is heavier and keeps working. */

/* ---- tokens --------------------------------------------------------------------- */

html[data-theme="arcade"] .changelog-archive {
    --clg-ink: color-mix(in srgb, var(--arc-fg) 84%, var(--arc-bg));
    --clg-door: color-mix(in srgb, #000 45%, var(--arc-bg));
    --clg-rest-shadow: 6px 6px 0 color-mix(in srgb, var(--arc-fg) 10%, transparent);
}

/* A year's colour, shared by its rail group and its month bands. */
html[data-theme="arcade"] .changelog-archive [data-changelog-year-tone] { --clg-yr: var(--arc-p2-rgb); }
html[data-theme="arcade"] .changelog-archive [data-changelog-year-tone="2"] { --clg-yr: var(--arc-p1-rgb); }
html[data-theme="arcade"] .changelog-archive [data-changelog-year-tone="3"] { --clg-yr: var(--arc-p3-rgb); }
html[data-theme="arcade"] .changelog-archive [data-changelog-year-tone="4"] { --clg-yr: var(--arc-p4-rgb); }

/* ---- toolbar: the type filter's lamps ------------------------------------------- */

html[data-theme="arcade"] .changelog-toolbar-types .segmented-option:not([data-filter="all"])::before {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    background: rgb(var(--type-lamp));
    box-shadow: 0 0 5px rgba(var(--type-lamp), 0.45);
}

html[data-theme="arcade"] .changelog-toolbar-types .segmented-option:is(:hover, :focus-visible, .is-active):not([data-filter="all"])::before {
    box-shadow: 0 0 10px rgba(var(--type-lamp), 0.8);
}

/* ---- index rail: the select screen -------------------------------------------- */

html[data-theme="arcade"] .changelog-rail .subsection-header {
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 2px dashed var(--ds-line-1);
}

html[data-theme="arcade"] .changelog-rail .changelog-index {
    margin: 0;
    padding: 10px 6px;
    border: 2px solid #000;
    background:
        radial-gradient(120% 60% at 20% 0%, rgba(255, 255, 255, 0.05), transparent 45%),
        var(--ds-bg-deep);
    box-shadow:
        0 0 0 2px var(--ds-line-1),
        inset 0 0 24px rgba(0, 0, 0, 0.7);
    scrollbar-color: var(--ds-line-2) transparent;
}

html[data-theme="arcade"] .changelog-rail .changelog-index::-webkit-scrollbar-thumb {
    background: var(--ds-line-2);
}

/* Nothing matches the filters: the screen shows no signal, the hatched
 * empty slot of the cabinet's control panel. */
html[data-theme="arcade"] .changelog-rail .changelog-index:not(:has(.changelog-index-group:not(.d-none))) {
    min-height: 44px;
    border-style: dashed;
    border-color: var(--ds-line-2);
    background: repeating-linear-gradient(135deg, rgba(var(--arc-fg-rgb), 0.16) 0 2px, transparent 2px 6px), #000;
    box-shadow: none;
}

html[data-theme="arcade"] .changelog-rail .changelog-index-group + .changelog-index-group {
    margin-top: 14px;
}

/* The year: a lit label, like the site's eyebrows. */
html[data-theme="arcade"] .changelog-rail .changelog-index-year {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    padding: 0 6px;
    color: rgb(var(--clg-yr));
    font-family: var(--arc-pixel);
    font-size: 8px;
    line-height: 1.6;
    letter-spacing: 0.1em;
}

html[data-theme="arcade"] .changelog-rail .changelog-index-year::before {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

/* A month: a row of the list, with the pixel cursor in front of it. */
html[data-theme="arcade"] .changelog-rail .changelog-index-month {
    position: relative;
    align-items: center;
    gap: 8px;
    padding: 3px 6px 3px 20px;
    color: var(--ds-text-2);
    font-size: 1rem;
    line-height: 1.25;
    text-decoration: none;
    transition: none;
}

html[data-theme="arcade"] .changelog-rail .changelog-index-month::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 7px;
    width: 0;
    height: 0;
    margin-top: -5px;
    border: 5px solid transparent;
    border-right: 0;
    border-left: 6px solid var(--arc-wild);
    opacity: 0;
}

html[data-theme="arcade"] .changelog-rail .changelog-index-month:is(:hover, :focus-visible) {
    background: rgba(var(--arc-fg-rgb), 0.06);
    color: var(--arc-fg);
}

html[data-theme="arcade"] .changelog-rail .changelog-index-month:focus-visible {
    outline-offset: 0;
}

html[data-theme="arcade"] .changelog-rail .changelog-index-month:is(:hover, :focus-visible, .is-active)::before {
    opacity: 1;
}

html[data-theme="arcade"] .changelog-rail .changelog-index-month.is-active {
    background: rgba(var(--clg-yr), 0.16);
    box-shadow: inset 2px 0 0 rgb(var(--clg-yr));
    color: var(--arc-fg);
}

html[data-theme="arcade"] .changelog-rail .changelog-index-month.is-active .changelog-index-name::after {
    content: none;
}

/* The count on a small LCD. */
html[data-theme="arcade"] .changelog-rail .changelog-index-count {
    min-width: 30px;
    padding: 4px 4px 3px;
    border: 2px solid var(--ds-line-1);
    background: #000;
    color: var(--arc-dim);
    font-family: var(--arc-pixel);
    font-size: 8px;
    line-height: 1;
    text-align: right;
}

html[data-theme="arcade"] .changelog-rail .changelog-index-month:is(:hover, :focus-visible, .is-active) .changelog-index-count {
    border-color: rgba(var(--clg-yr), 0.6);
    color: rgb(var(--clg-yr));
    text-shadow: 0 0 6px rgba(var(--clg-yr), 0.6);
}

html[data-theme="arcade"] .changelog-rail .changelog-rail-note {
    margin-top: 16px;
    color: var(--arc-dim);
    line-height: 1.4;
}

/* ---- month: the marquee band ------------------------------------------------------- */

html[data-theme="arcade"] .changelog-month .changelog-month-head {
    gap: 14px;
    margin-bottom: 22px;
    padding: 12px 14px;
    border: 2px solid var(--ds-line-2);
    background:
        linear-gradient(180deg, rgba(var(--clg-yr), 0.7) 0 2px, transparent 2px calc(100% - 2px), rgba(var(--clg-yr), 0.7) calc(100% - 2px)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 40%, transparent 60%, rgba(0, 0, 0, 0.2)),
        linear-gradient(90deg, rgba(var(--clg-yr), 0.16), rgba(var(--clg-yr), 0.04) 45%, rgba(var(--clg-yr), 0.04) 55%, rgba(var(--clg-yr), 0.16)),
        var(--arc-bg);
    box-shadow: var(--clg-rest-shadow);
}

html[data-theme="arcade"] .changelog-month .changelog-month-title {
    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 12px rgba(var(--clg-yr), 0.55);
}

html[data-theme="arcade"] .changelog-month .changelog-month-title span {
    color: rgb(var(--clg-yr));
    font-weight: 400;
}

/* Bulbs from the name to the count. */
html[data-theme="arcade"] .changelog-month .changelog-month-line {
    min-width: 24px;
    height: 4px;
    background: linear-gradient(90deg, rgba(var(--clg-yr), 0.85) 0 4px, transparent 4px) 0 0 / 12px 4px repeat-x;
    opacity: 0.7;
}

html[data-theme="arcade"] .changelog-month .changelog-month-count {
    padding: 1px 6px 0;
    border: 2px solid rgba(var(--clg-yr), 0.45);
    background: #000;
    color: rgb(var(--clg-yr));
    font-size: 1rem;
    line-height: 1.25;
    white-space: nowrap;
}

/* ---- the track -------------------------------------------------------------------- */

/* The ticket's measures live on the list, because the node and the day sit
 * outside the ticket and line up with the middle of its marquee tile. */
html[data-theme="arcade"] .changelog-month .changelog-entries {
    --clg-node: 12px;
    --clg-tile-h: 52px;
    --clg-head-top: 12px;
    --clg-pad: 14px;
    --clg-space: 10px;
    --clg-node-top: calc(2px + var(--clg-head-top) + var(--clg-tile-h) / 2 - var(--clg-node) / 2);
    --clg-line-inset: 6px;
}

@media (max-width: 767.98px) {
    html[data-theme="arcade"] .changelog-month .changelog-entries {
        --clg-tile-h: 44px;
        --clg-head-top: 10px;
        --clg-pad: 10px;
        --clg-space: 8px;
    }
}

html[data-theme="arcade"] .changelog-entries .changelog-entry {
    --game-rgb: var(--arc-fg-rgb);
    padding-bottom: calc(2 * var(--clg-space));
}

html[data-theme="arcade"] .changelog-entries .changelog-entry-day {
    color: var(--arc-dim);
    font-size: 1rem;
}

/* The node: a square lamp in the game's colour. */
html[data-theme="arcade"] .changelog-entries .changelog-entry-node {
    border: 2px solid #000;
    background: rgb(var(--game-rgb));
    box-shadow: 0 0 0 2px rgba(var(--game-rgb), 0.35), 0 0 8px rgba(var(--game-rgb), 0.35);
}

/* From the node down to the next one: a strip of lights. */
html[data-theme="arcade"] .changelog-entries .changelog-entry::before {
    left: calc(var(--clg-day-w) + var(--clg-gap) + (var(--clg-node) / 2) - 2px);
    width: 4px;
    border-left: 0;
    background: linear-gradient(180deg, rgba(var(--game-rgb), 0.5) 0 4px, transparent 4px) 0 0 / 4px 12px repeat-y;
}

/* ---- the ticket ------------------------------------------------------------------- */

html[data-theme="arcade"] .changelog-entries .changelog-entry-body {
    container: clg-ticket / inline-size;
    position: relative;
    border: 2px solid var(--ds-line-2);
    background:
        /* T-molding: the game's colour down both sides */
        linear-gradient(90deg, rgba(var(--game-rgb), 0.45) 0 3px, transparent 3px calc(100% - 3px), rgba(var(--game-rgb), 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: var(--clg-rest-shadow);
    color: var(--arc-fg);
    transition: transform 0.12s steps(2, end), box-shadow 0.12s steps(2, end);
}

/* Head: marquee tile, nameplate, lamp. */
html[data-theme="arcade"] .changelog-entries .changelog-entry-head {
    position: relative;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--clg-space) 16px;
    padding: var(--clg-head-top) var(--clg-pad) 0;
}

html[data-theme="arcade"] .changelog-entries .changelog-entry-title {
    flex: 1 1 auto;
    color: var(--arc-fg);
    font-family: var(--arc-pixel);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
}

html[data-theme="arcade"] .changelog-entries .changelog-entry-game {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--arc-fg);
    text-decoration: none;
}

html[data-theme="arcade"] .changelog-entries .changelog-entry-name {
    text-shadow: 0 0 10px rgba(var(--game-rgb), 0.45);
}

html[data-theme="arcade"] .changelog-entries .changelog-entry-game:is(:hover, :focus-visible) {
    color: rgb(var(--game-rgb));
}

/* The marquee tile: the logo on a backlight in the game's colour, strongest
 * at the tubes along the edges, dark behind the print (tables.css). */
html[data-theme="arcade"] .changelog-entries .changelog-entry-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: calc(var(--clg-tile-h) * 2.5);
    height: var(--clg-tile-h);
    border: 2px solid #000;
    background: var(--arc-bg);
    box-shadow: 0 0 0 2px var(--ds-line-1);
    color: rgb(var(--game-rgb));
}

html[data-theme="arcade"] .changelog-entries .changelog-entry-logo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(40% 62% at 50% 50%, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4) 55%, transparent 100%),
        linear-gradient(180deg, rgba(var(--game-rgb), 0.6) 0 2px, transparent 2px 30%, transparent 70%, rgba(var(--game-rgb), 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(--game-rgb), 0.6), rgba(var(--game-rgb), 0.32) 50%, rgba(var(--game-rgb), 0.6));
    box-shadow: inset 0 0 0 2px rgba(var(--game-rgb), 0.35);
    opacity: 0.85;
    pointer-events: none;
}

html[data-theme="arcade"] .changelog-entries .changelog-entry-logo img {
    width: calc(100% - 12px);
    height: calc(100% - 10px);
    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"] .changelog-entries .changelog-entry-logo i {
    zoom: 1;
    font-size: 24px;
    text-shadow: 0 0 12px rgba(var(--game-rgb), 0.6);
}

/* The type lamp: a square bulb, its word printed beside it. */
html[data-theme="arcade"] .changelog-entries .changelog-entry-head .status-badge {
    flex: none;
    gap: 8px;
    margin-left: auto;
    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;
}

/* An LED, not a box: filled at rest with a dark rim, white-hot and glowing
 * when the ticket powers up. */
html[data-theme="arcade"] .changelog-entries .changelog-entry-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);
}

/* The screen: the change list behind a black bezel. */
html[data-theme="arcade"] .changelog-entries .changelog-entry .changelog-entry-items {
    position: relative;
    margin: var(--clg-space) var(--clg-pad) 0;
    padding: calc(var(--clg-space) - 3px) 12px calc(var(--clg-space) - 2px);
    border: 2px solid #000;
    background:
        radial-gradient(120% 90% at 22% 0%, rgba(255, 255, 255, 0.05), transparent 42%),
        var(--ds-bg-deep);
    box-shadow:
        0 0 0 2px var(--ds-line-1),
        inset 0 0 24px rgba(0, 0, 0, 0.6);
    color: var(--clg-ink);
    font-size: 1rem;
    line-height: 1.35;
    list-style: none;
}

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

html[data-theme="arcade"] .changelog-entries .changelog-entry-items li {
    position: relative;
    padding-left: 18px;
    list-style: none;
}

html[data-theme="arcade"] .changelog-entries .changelog-entry-items li + li {
    margin-top: 4px;
}

html[data-theme="arcade"] .changelog-entries .changelog-entry-items li::before {
    content: '';
    position: absolute;
    top: calc(0.675em - 3px);
    left: 0;
    width: 6px;
    height: 6px;
    background: rgb(var(--game-rgb));
    box-shadow: 0 0 6px rgba(var(--game-rgb), 0.55);
}

html[data-theme="arcade"] .changelog-entries .changelog-entry-items li:only-child {
    padding-left: 0;
}

html[data-theme="arcade"] .changelog-entries .changelog-entry-items li:only-child::before {
    content: none;
}

/* The coin door: the version on its VER plate (cabinet.css), when, and the
 * way in. */
html[data-theme="arcade"] .changelog-entries .changelog-entry-foot {
    align-items: center;
    gap: 6px 12px;
    margin-top: var(--clg-space);
    padding: 6px var(--clg-pad);
    border-top: 2px dashed var(--ds-line-1);
    background: var(--clg-door);
    color: var(--ds-text-2);
    font-size: 1rem;
    line-height: 1.2;
}

html[data-theme="arcade"] .changelog-entries .changelog-entry-sep {
    display: none;
}

html[data-theme="arcade"] .changelog-entries .changelog-entry-foot time {
    border-bottom: 2px dotted var(--ds-line-2);
}

html[data-theme="arcade"] .changelog-entries .changelog-entry-link {
    gap: 6px;
    margin-left: auto;
    padding: 3px 7px 3px 10px;
    border: 2px solid rgba(var(--game-rgb), 0.65);
    background: #000;
    box-shadow: inset 4px 0 0 currentColor;
    color: rgb(var(--game-rgb));
    font-family: var(--arc-text);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: none;
}

/* A lit coin slot down the left edge, a pixel arrow behind. */
html[data-theme="arcade"] .changelog-entries .changelog-entry-link::after {
    content: '';
    flex: none;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-right: 0;
    border-left: 6px solid currentColor;
}

html[data-theme="arcade"] .changelog-entries .changelog-entry-link i {
    display: none;
}

html[data-theme="arcade"] .changelog-entries .changelog-entry-link:is(:hover, :focus-visible) {
    background: rgb(var(--game-rgb));
    color: var(--arc-bg);
    box-shadow: inset 4px 0 0 var(--arc-bg), 0 0 14px rgba(var(--game-rgb), 0.55);
}

html[data-theme="arcade"] .changelog-entries .changelog-entry-link:is(:hover, :focus-visible)::after {
    animation: arcade-site-blink 0.8s steps(1) infinite;
}

/* A narrow ticket (phones, the small tablet column): the tile and the lamp
 * share the first row, the name gets the full width below them. */
@container clg-ticket (max-width: 539.98px) {
    html[data-theme="arcade"] .changelog-entries .changelog-entry-game {
        flex-wrap: wrap;
        row-gap: var(--clg-space);
    }

    html[data-theme="arcade"] .changelog-entries .changelog-entry-name {
        flex: 1 0 100%;
    }

    html[data-theme="arcade"] .changelog-entries .changelog-entry-head .status-badge {
        position: absolute;
        top: calc(var(--clg-head-top) + var(--clg-tile-h) / 2 - 8px);
        right: var(--clg-pad);
        margin: 0;
    }

    html[data-theme="arcade"] .changelog-entries .changelog-entry-foot {
        column-gap: 10px;
    }
}

@container clg-ticket (max-width: 279.98px) {
    html[data-theme="arcade"] .changelog-entries .changelog-entry-logo {
        width: calc(var(--clg-tile-h) * 2.2);
    }
}

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

html[data-theme="arcade"] .changelog-entries .changelog-entry:is(:has(> .changelog-entry-body:hover), :has(:focus-visible)) .changelog-entry-body {
    transform: translate(-3px, -3px);
    border-color: rgb(var(--game-rgb));
    box-shadow: 10px 10px 0 rgba(var(--game-rgb), 0.4);
}

html[data-theme="arcade"] .changelog-entries .changelog-entry:is(:has(> .changelog-entry-body:hover), :has(:focus-visible)) .changelog-entry-logo::before {
    opacity: 1;
    animation: arc-cab-marquee-on 0.5s both;
}

html[data-theme="arcade"] .changelog-entries .changelog-entry:is(:has(> .changelog-entry-body:hover), :has(:focus-visible)) .changelog-entry-items::after {
    opacity: 1;
    animation: clg-cursor-in 0.16s steps(2, end) both, arc-cab-cursor-blink 1.2s steps(1, end) 0.6s infinite;
}

html[data-theme="arcade"] .changelog-entries .changelog-entry:is(:has(> .changelog-entry-body:hover), :has(:focus-visible)) .changelog-entry-logo img {
    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(--game-rgb), 0.6));
}

html[data-theme="arcade"] .changelog-entries .changelog-entry:is(:has(> .changelog-entry-body:hover), :has(:focus-visible)) .changelog-entry-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);
    transition: box-shadow 0.12s steps(1);
}

html[data-theme="arcade"] .changelog-entries .changelog-entry:is(:has(> .changelog-entry-body:hover), :has(:focus-visible)) .changelog-entry-node {
    box-shadow: 0 0 0 2px rgba(var(--game-rgb), 0.8), 0 0 14px rgba(var(--game-rgb), 0.8);
}

html[data-theme="arcade"] .changelog-entries .changelog-entry:is(:has(> .changelog-entry-body:hover), :has(:focus-visible))::before {
    background-image: linear-gradient(180deg, rgba(var(--game-rgb), 0.95) 0 4px, transparent 4px);
    animation: clg-track-chase 0.48s steps(3, end) infinite;
}

html[data-theme="arcade"] .changelog-entries .changelog-entry:is(:has(> .changelog-entry-body:hover), :has(:focus-visible)) .changelog-entry-day {
    color: var(--arc-fg);
}

html[data-theme="arcade"] .changelog-entries .changelog-entry:is(:has(> .changelog-entry-body:hover), :has(:focus-visible)) .changelog-entry-link {
    border-color: rgb(var(--game-rgb));
}

/* The cursor snaps in from a step further out (then blinks, cabinet.css). */
@keyframes clg-cursor-in {
    from { inset: calc(-1 * var(--clg-space) - 8px); }
}

/* The lights run down the track towards the next release. */
@keyframes clg-track-chase {
    to { background-position: 0 12px; }
}

/* ---- no hover (touch): the tickets stand lit ------------------------------------------ */

/* A tap leaves :hover stuck on a ticket; it keeps the lit state only, no
 * step forward, no flicker, no chase. Pressing pushes the ticket in. */
@media (hover: none) {
    /* A tapped month is the active one; the hover the tap leaves behind on
     * any other row of the index shows nothing (the FAQ's rail does the
     * same). */
    html[data-theme="arcade"] .changelog-rail .changelog-index-month:hover:not(:focus-visible):not(.is-active) {
        background: transparent;
        color: var(--ds-text-2);
    }

    html[data-theme="arcade"] .changelog-rail .changelog-index-month:hover:not(:focus-visible):not(.is-active)::before {
        opacity: 0;
    }

    html[data-theme="arcade"] .changelog-rail .changelog-index-month:hover:not(:focus-visible):not(.is-active) .changelog-index-count {
        border-color: var(--ds-line-1);
        color: var(--arc-dim);
        text-shadow: none;
    }

    html[data-theme="arcade"] .changelog-entries .changelog-entry-logo::before {
        opacity: 1;
    }

    html[data-theme="arcade"] .changelog-entries .changelog-entry-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);
    }

    html[data-theme="arcade"] .changelog-entries .changelog-entry:has(> .changelog-entry-body:hover):not(:has(:focus-visible)) .changelog-entry-body {
        transform: none;
        border-color: var(--ds-line-2);
        box-shadow: var(--clg-rest-shadow);
    }

    html[data-theme="arcade"] .changelog-entries .changelog-entry:has(> .changelog-entry-body:hover):not(:has(:focus-visible)) .changelog-entry-logo::before,
    html[data-theme="arcade"] .changelog-entries .changelog-entry:has(> .changelog-entry-body:hover):not(:has(:focus-visible))::before,
    html[data-theme="arcade"] .changelog-entries .changelog-entry:has(> .changelog-entry-body:hover):not(:has(:focus-visible)) .changelog-entry-items::after {
        animation: none;
    }

    html[data-theme="arcade"] .changelog-entries .changelog-entry:has(> .changelog-entry-body:hover):not(:has(:focus-visible)):not(:has(> .changelog-entry-body:active)) .changelog-entry-items::after {
        opacity: 0;
    }

    html[data-theme="arcade"] .changelog-entries .changelog-entry:has(> .changelog-entry-body:active) .changelog-entry-items::after {
        opacity: 1;
    }

    /* As heavy as the sticky-hover rule above, and after it. */
    html[data-theme="arcade"] .changelog-entries .changelog-entry:has(> .changelog-entry-body:active):not(.d-none) .changelog-entry-body {
        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 -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html[data-theme="arcade"] .changelog-entries .changelog-entry-body,
    html[data-theme="arcade"] .changelog-entries .changelog-entry:is(:has(> .changelog-entry-body:hover), :has(:focus-visible)) .changelog-entry-head .status-badge::before {
        transition: none;
    }

    html[data-theme="arcade"] .changelog-entries .changelog-entry:is(:has(> .changelog-entry-body:hover), :has(:focus-visible)) .changelog-entry-body,
    html[data-theme="arcade"] .changelog-entries .changelog-entry:has(> .changelog-entry-body:active):not(.d-none) .changelog-entry-body {
        transform: none;
    }

    html[data-theme="arcade"] .changelog-entries .changelog-entry:is(:has(> .changelog-entry-body:hover), :has(:focus-visible)) .changelog-entry-logo::before,
    html[data-theme="arcade"] .changelog-entries .changelog-entry:is(:has(> .changelog-entry-body:hover), :has(:focus-visible))::before,
    html[data-theme="arcade"] .changelog-entries .changelog-entry:is(:has(> .changelog-entry-body:hover), :has(:focus-visible)) .changelog-entry-items::after,
    html[data-theme="arcade"] .changelog-entries .changelog-entry-link:is(:hover, :focus-visible)::after {
        animation: none;
    }
}

/* ---- narrow pages --------------------------------------------------------------------- */

/* The month band wraps: the count drops under the name, the bulbs go. */
@media (max-width: 575.98px) {
    html[data-theme="arcade"] .changelog-month .changelog-month-head {
        flex-wrap: wrap;
        gap: 8px 12px;
        padding: 10px 12px;
    }

    html[data-theme="arcade"] .changelog-month .changelog-month-line {
        display: none;
    }

    html[data-theme="arcade"] .changelog-month .changelog-month-count {
        margin-left: auto;
    }
}