/* Arcade — the cabinet's shared parts.
 *
 * The Table card cabinet (tables.css) is the family's reference; the Steam
 * Tracker, the Changelog, the FAQ, the Table page and the homepage's recent
 * releases build from the same parts. What more than one page draws lives
 * here once, so the pages cannot drift apart:
 *
 *   --cab-cursor     the select cursor: four pixel corners, 16px arms, 4px
 *                    thick, in the screen's wild colour. A page paints it as
 *                    the background of its own ::after and places that box
 *                    around the screen it frames.
 *   type lamps       one colour per changelog event type (--type-lamp, an
 *                    r, g, b triplet): Release good, New link, Fix and Hotfix
 *                    wild, Removed bad, Update (and anything unknown) dim.
 *                    Keyed on data-type (canonical Vocab types) on the
 *                    Changelog's tickets, the homepage's recent releases and
 *                    the Table page's release history, and on the
 *                    Changelog's type filter.
 *   VER plate        the version where an arcade boot screen prints its VER
 *                    line: a small dark plate in quiet ink. It lights in the
 *                    game's tone while its machine is pointed at or focused.
 *   keyframes        the marquee strike, the cursor blink and the bulb chase.
 *
 * Header.php loads this file with the other arcade parts (alphabetical, so
 * before them); keyframes are global, and every rule here starts with
 * html[data-theme="arcade"]. The default look reads none of it.
 */

/* ---- the select cursor ---------------------------------------------------------- */

html[data-theme="arcade"] {
    --cab-cursor:
        linear-gradient(var(--arc-wild) 0 0) 0 0 / 16px 4px no-repeat,
        linear-gradient(var(--arc-wild) 0 0) 0 0 / 4px 16px no-repeat,
        linear-gradient(var(--arc-wild) 0 0) 100% 0 / 16px 4px no-repeat,
        linear-gradient(var(--arc-wild) 0 0) 100% 0 / 4px 16px no-repeat,
        linear-gradient(var(--arc-wild) 0 0) 0 100% / 16px 4px no-repeat,
        linear-gradient(var(--arc-wild) 0 0) 0 100% / 4px 16px no-repeat,
        linear-gradient(var(--arc-wild) 0 0) 100% 100% / 16px 4px no-repeat,
        linear-gradient(var(--arc-wild) 0 0) 100% 100% / 4px 16px no-repeat;
}

/* ---- type lamps ------------------------------------------------------------------- */

html[data-theme="arcade"] :is(.changelog-entry, .hx-act, .tp-release),
html[data-theme="arcade"] .changelog-toolbar-types .segmented-option {
    --type-lamp: var(--arc-dim-rgb);
}

html[data-theme="arcade"] :is(.changelog-entry, .hx-act, .tp-release)[data-type="release"],
html[data-theme="arcade"] .changelog-toolbar-types .segmented-option[data-filter="release"] {
    --type-lamp: var(--arc-good-rgb);
}

html[data-theme="arcade"] :is(.changelog-entry, .hx-act, .tp-release)[data-type="new"],
html[data-theme="arcade"] .changelog-toolbar-types .segmented-option[data-filter="new"] {
    --type-lamp: var(--arc-link-rgb);
}

html[data-theme="arcade"] :is(.changelog-entry, .hx-act, .tp-release):is([data-type="fix"], [data-type="hotfix"]),
html[data-theme="arcade"] .changelog-toolbar-types .segmented-option:is([data-filter="fix"], [data-filter="hotfix"]) {
    --type-lamp: var(--arc-wild-rgb);
}

html[data-theme="arcade"] :is(.changelog-entry, .hx-act, .tp-release)[data-type="removed"],
html[data-theme="arcade"] .changelog-toolbar-types .segmented-option[data-filter="removed"] {
    --type-lamp: var(--arc-bad-rgb);
}

/* ---- the VER plate ------------------------------------------------------------------ */

/* Where it sits is each page's business; how it looks is said once. */
html[data-theme="arcade"] :is(
    .table-card.table-card--grid .table-card-version,
    .tracker-card .tracker-card-meta code,
    .changelog-entry .changelog-entry-version,
    .hx-act .hx-act-version,
    .tp-hero-meta .tag-version,
    .tp-release .tp-release-version
) {
    /* the game's tone, inherited from the toned element; the screen's
     * foreground until it arrives */
    --ver-tone: var(--game-rgb, var(--arc-fg-rgb));
    margin: 0;
    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;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
    white-space: nowrap;
}

/* The cabinet's accent is its own property (tables.js writes it). */
html[data-theme="arcade"] .table-card.table-card--grid .table-card-version {
    --ver-tone: var(--table-card-glow);
}

/* Lit: the pointer on its machine (pointer devices only, so the hover a tap
 * leaves behind never keeps it lit), or keyboard focus in it. */
@media (hover: hover) {
    html[data-theme="arcade"] :is(
        .table-card.table-card--grid:hover .table-card-version,
        .tracker-card:hover .tracker-card-meta code,
        .changelog-entry:has(> .changelog-entry-body:hover) .changelog-entry-version,
        .hx-act:hover .hx-act-version,
        .tp-hero-meta .tag-version:hover,
        .tp-release:hover .tp-release-version
    ) {
        border-color: rgb(var(--ver-tone));
        color: rgb(var(--ver-tone));
        text-shadow: 0 0 8px rgba(var(--ver-tone), 0.6);
    }
}

html[data-theme="arcade"] :is(
    .table-card.table-card--grid:focus-visible .table-card-version,
    .tracker-card:has(:focus-visible) .tracker-card-meta code,
    .changelog-entry:has(:focus-visible) .changelog-entry-version,
    .hx-act:focus-visible .hx-act-version
) {
    border-color: rgb(var(--ver-tone));
    color: rgb(var(--ver-tone));
    text-shadow: 0 0 8px rgba(var(--ver-tone), 0.6);
}

/* ---- keyframes ------------------------------------------------------------------------ */

/* The tube strikes, drops, strikes again, holds. */
@keyframes arc-cab-marquee-on {
    0% { opacity: 0.85; animation-timing-function: steps(1, end); }
    14% { opacity: 1; animation-timing-function: steps(1, end); }
    24% { opacity: 0.4; animation-timing-function: steps(1, end); }
    38% { opacity: 1; animation-timing-function: steps(1, end); }
    50% { opacity: 0.7; animation-timing-function: steps(1, end); }
    62%, 100% { opacity: 1; }
}

/* A menu cursor: mostly on, every frame a hard cut. */
@keyframes arc-cab-cursor-blink {
    0%, 74% { opacity: 1; }
    75%, 100% { opacity: 0; }
}

/* Two rows of bulbs, 12px apart, the lower row half a step behind, running
 * one bulb along. */
@keyframes arc-cab-chase {
    to { background-position: 12px 0, -6px 100%; }
}