/* Arcade — home, Steam Tracker, blog and changelog: the colours tokens
 * cannot reach.
 *
 * Home.css, SteamTracker.css and Blog.css compose their accents from the
 * --ds-*-rgb triplets, so those follow the screen on their own. What is left:
 * the grey of the Steam Tracker's untracked states (a triplet with no token
 * behind it) and the code blocks, which highlight.js colours with the
 * third-party github-dark sheet. And the homepage's recent releases, drawn
 * as compact Changelog tickets. Page sheets load after this file, so every
 * selector here wins by specificity, not by order.
 */

/* ---- Home: recent releases, compact tickets --------------------------------- */

/* Each release a compact ticket of the Changelog's (changelog.css) in its
 * game's tone (--game-rgb, written by JS/game-tone.js on the row; the
 * screen's foreground until it arrives): the tone down both sides, the type
 * as an LED (cabinet.css's type lamps), the game's name glowing in the tone,
 * the version on its VER plate, the date in dim. Pointed at or focused, a
 * ticket takes a tint of its tone, its edges light fully and the select
 * cursor (cabinet.css) snaps around it, as on the FAQ's rows. Touch screens
 * show the tickets lit; a press shows the cursor. */
html[data-theme="arcade"] .hx-acts {
    gap: 10px;
    overflow: visible;
    border: 0;
    background: none;
}

html[data-theme="arcade"] .hx-acts > .hx-act {
    --game-rgb: var(--arc-fg-rgb);
    --hx-body: 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)));
    position: relative;
    align-items: center;
    padding: 10px 16px 10px 18px;
    border: 2px solid var(--ds-line-2);
    background:
        /* T-molding: the game's tone 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)),
        var(--hx-body);
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--arc-fg) 10%, transparent);
    transition: none;
}

/* The type: an LED, its word beside it, in the lamp's colour. */
html[data-theme="arcade"] .hx-acts > .hx-act .hx-act-type {
    gap: 8px;
    color: rgb(var(--type-lamp));
    font-family: var(--arc-text);
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0.04em;
}

html[data-theme="arcade"] .hx-acts > .hx-act .hx-act-type > i {
    display: none;
}

html[data-theme="arcade"] .hx-acts > .hx-act .hx-act-type::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"] .hx-acts > .hx-act .hx-act-title {
    align-items: center;
    gap: 4px 12px;
}

html[data-theme="arcade"] .hx-acts > .hx-act .hx-act-game {
    color: var(--arc-fg);
    font-weight: 400;
    text-shadow: 0 0 10px rgba(var(--game-rgb), 0.45);
}

html[data-theme="arcade"] .hx-acts > .hx-act :is(.hx-act-gv, .hx-act-date) {
    color: var(--arc-dim);
}

/* The select cursor, inside the ticket like the FAQ's rows. */
html[data-theme="arcade"] .hx-acts > .hx-act::after {
    content: '';
    position: absolute;
    inset: 4px 6px;
    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"] .hx-acts > .hx-act:is(:hover, :focus-visible) {
    border-color: rgb(var(--game-rgb));
    background:
        linear-gradient(90deg, rgb(var(--game-rgb)) 0 3px, transparent 3px calc(100% - 3px), rgb(var(--game-rgb)) calc(100% - 3px)),
        linear-gradient(rgba(var(--game-rgb), 0.07), rgba(var(--game-rgb), 0.07)),
        var(--hx-body);
    color: var(--arc-fg);
}

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

html[data-theme="arcade"] .hx-acts > .hx-act:is(:hover, :focus-visible) .hx-act-type::before {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45), 0 0 12px rgba(var(--type-lamp), 0.85);
}

/* The tint lifts the ticket; the quiet print lifts with it, so it keeps
 * 4.5:1 on every screen (amber's dim falls under it on the tint): the game
 * version, the date, and the word of the one dim lamp (Update). */
html[data-theme="arcade"] .hx-acts > .hx-act:is(:hover, :focus-visible) :is(.hx-act-gv, .hx-act-date),
html[data-theme="arcade"] .hx-acts > .hx-act:not([data-type="release"], [data-type="new"], [data-type="fix"], [data-type="hotfix"], [data-type="removed"]):is(:hover, :focus-visible) .hx-act-type {
    color: var(--ds-text-2);
}

@keyframes hx-act-cursor-in {
    from { inset: -2px 0; }
}

/* Touch: the tickets stand lit; the hover a tap leaves behind changes
 * nothing, a press shows the cursor. */
@media (hover: none) {
    html[data-theme="arcade"] .hx-acts > .hx-act,
    html[data-theme="arcade"] .hx-acts > .hx-act:hover:not(:focus-visible) {
        border-color: var(--ds-line-2);
        background:
            linear-gradient(90deg, rgb(var(--game-rgb)) 0 3px, transparent 3px calc(100% - 3px), rgb(var(--game-rgb)) calc(100% - 3px)),
            var(--hx-body);
    }

    html[data-theme="arcade"] .hx-acts > .hx-act .hx-act-type::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"] .hx-acts > .hx-act:hover:not(:focus-visible)::after {
        animation: none;
    }

    html[data-theme="arcade"] .hx-acts > .hx-act:hover:not(:focus-visible):not(:active)::after {
        opacity: 0;
    }

    html[data-theme="arcade"] .hx-acts > .hx-act:active::after {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-theme="arcade"] .hx-acts > .hx-act:is(:hover, :focus-visible)::after {
        animation: none;
    }
}

/* ---- Steam Tracker --------------------------------------------------------- */

/* Muted and unknown states are the site's secondary grey; on a screen they are
 * its dim colour. The span's grey is its default, so the coloured states are
 * excluded, not overridden. */
html[data-theme="arcade"] .tracker-signal.is-muted,
html[data-theme="arcade"] .tracker-group.is-unknown,
html[data-theme="arcade"] .tracker-card.is-unknown {
    --signal-rgb: var(--arc-dim-rgb);
    --group-rgb: var(--arc-dim-rgb);
    --card-rgb: var(--arc-dim-rgb);
}

html[data-theme="arcade"] .tracker-span:not(.is-needs-review):not(.is-covered) {
    --span-rgb: var(--arc-dim-rgb);
}

/* The tick icons sit on the screen's bright colours: dark glyph on light. */
html[data-theme="arcade"] .tracker-tick {
    color: var(--arc-bg);
}

/* ---- blog code blocks ------------------------------------------------------- */

/* github-dark paints its own background on code.hljs; the block's frame
 * already has the screen's code surface. */
html[data-theme="arcade"] .blog-post-prose pre code,
html[data-theme="arcade"] .blog-post-prose pre code.hljs {
    background: transparent;
    color: rgba(var(--arc-fg-rgb), 0.88);
}

html[data-theme="arcade"] .blog-post-prose .hljs-doctag,
html[data-theme="arcade"] .blog-post-prose .hljs-keyword,
html[data-theme="arcade"] .blog-post-prose .hljs-template-tag,
html[data-theme="arcade"] .blog-post-prose .hljs-template-variable,
html[data-theme="arcade"] .blog-post-prose .hljs-type,
html[data-theme="arcade"] .blog-post-prose .hljs-variable.language_ {
    color: var(--arc-p2);
}

html[data-theme="arcade"] .blog-post-prose .hljs-string,
html[data-theme="arcade"] .blog-post-prose .hljs-regexp {
    color: var(--arc-p3);
}

html[data-theme="arcade"] .blog-post-prose .hljs-attr,
html[data-theme="arcade"] .blog-post-prose .hljs-attribute,
html[data-theme="arcade"] .blog-post-prose .hljs-literal,
html[data-theme="arcade"] .blog-post-prose .hljs-meta,
html[data-theme="arcade"] .blog-post-prose .hljs-number,
html[data-theme="arcade"] .blog-post-prose .hljs-operator,
html[data-theme="arcade"] .blog-post-prose .hljs-selector-attr,
html[data-theme="arcade"] .blog-post-prose .hljs-selector-class,
html[data-theme="arcade"] .blog-post-prose .hljs-selector-id,
html[data-theme="arcade"] .blog-post-prose .hljs-variable:not(.language_) {
    color: var(--arc-p1);
}

html[data-theme="arcade"] .blog-post-prose .hljs-title {
    color: var(--arc-p4);
}

html[data-theme="arcade"] .blog-post-prose .hljs-built_in,
html[data-theme="arcade"] .blog-post-prose .hljs-symbol {
    color: var(--arc-bad);
}

html[data-theme="arcade"] .blog-post-prose .hljs-comment,
html[data-theme="arcade"] .blog-post-prose .hljs-code,
html[data-theme="arcade"] .blog-post-prose .hljs-formula {
    color: var(--arc-dim);
}

html[data-theme="arcade"] .blog-post-prose .hljs-punctuation {
    color: var(--ds-text-2);
}

html[data-theme="arcade"] .blog-post-prose .hljs-name,
html[data-theme="arcade"] .blog-post-prose .hljs-quote,
html[data-theme="arcade"] .blog-post-prose .hljs-selector-pseudo,
html[data-theme="arcade"] .blog-post-prose .hljs-selector-tag {
    color: var(--arc-good);
}

html[data-theme="arcade"] .blog-post-prose .hljs-section {
    color: var(--ds-link);
}

html[data-theme="arcade"] .blog-post-prose .hljs-bullet {
    color: var(--arc-wild);
}

html[data-theme="arcade"] .blog-post-prose .hljs-subst,
html[data-theme="arcade"] .blog-post-prose .hljs-emphasis,
html[data-theme="arcade"] .blog-post-prose .hljs-strong {
    color: inherit;
}

html[data-theme="arcade"] .blog-post-prose .hljs-addition {
    background-color: rgba(var(--arc-good-rgb), 0.12);
    color: var(--arc-good);
}

html[data-theme="arcade"] .blog-post-prose .hljs-deletion {
    background-color: rgba(var(--arc-bad-rgb), 0.12);
    color: var(--arc-bad);
}