/* Arcade — the FAQ (/Static/FAQ/): every topic a cabinet of its own.
 *
 * The page has no games, so its colour comes from the topics: each topic takes
 * a tone of the current screen by position (six slots, see "tones"), and the
 * topic's rail entry, marquee, questions and open screen all light in it. The
 * vocabulary is the Table card's (CSS/arcade-parts/tables.css, "the cabinet"):
 *
 *   marquee      the topic header: icon in a lamp housing, the title on a
 *                backlight in the topic's tone, the answer count on an LCD
 *   panel        the questions: one row each, a lit edge down the left in the
 *                tone, a lamp button on the right (the chevron) that lights
 *                when the answer is open
 *   screen       an open answer: the text behind a black bezel with a lit
 *                trim, powering on like a CRT (a line that opens to a picture)
 *   cursor       the cards' four pixel corners (cabinet.css), around a
 *                question on hover, on keyboard focus and while it is open
 *   rail         the Changelog index's select screen: a dark screen in a
 *                bezel, the pixel cursor in front of a row, a lamp, the
 *                topic, its count on a small LCD
 *   coin door    "Still need help?" with a blinking block cursor
 *
 * Every rule is under html[data-theme="arcade"]; the default look reads none
 * of this. No markup: tones are assigned by position (the topic sections are
 * the only <section> children of .faq-main, the rail lists them in the same
 * order), so a search that hides sections never shifts a colour.
 *
 * Type: questions and answers stay VT323 at body size (1rem renders at 22px
 * through the 'VT323 Arcade' face); Press Start 2P at 16px (topic titles,
 * help title) and 8px (the rail's counts). "No answers found" is the site's
 * no-signal empty state (theme-arcade.css). Colour: only --arc-* tokens,
 * black and white.
 *
 * Specificity: every selector starts with html[data-theme="arcade"] .faq-page,
 * which outranks styles.css (at most three classes) and theme-arcade.css. */

/* ---- tones ------------------------------------------------------------------ */

/* Six slots per screen, each a colour the screen has, in an order that keeps
 * neighbouring topics clearly apart (the sixth slot also sits next to the
 * first). Where two tokens of a screen are the same colour (synthwave: good
 * is p4; phosphor: good is p4; amber: bad is p3), the slot takes another
 * colour of the screen. Classic: p1 is white and p4 (pink) is close to bad
 * (red), so cyan opens, pink comes second and white third. Amber: p4 and wild
 * are both pale gold, so wild takes the sixth slot. */
html[data-theme="arcade"] .faq-page {
    --faq-t1: var(--arc-p1-rgb);
    --faq-t2: var(--arc-p2-rgb);
    --faq-t3: var(--arc-p3-rgb);
    --faq-t4: var(--arc-p4-rgb);
    --faq-t5: var(--arc-bad-rgb);
    --faq-t6: var(--arc-good-rgb);
    --faq-ink: color-mix(in srgb, var(--arc-fg) 84%, var(--arc-bg));
}

html[data-theme="arcade"]:not([data-screen="synthwave"], [data-screen="phosphor"], [data-screen="amber"]) .faq-page {
    --faq-t1: var(--arc-p3-rgb);
    --faq-t2: var(--arc-p4-rgb);
    --faq-t3: var(--arc-p1-rgb);
    --faq-t4: var(--arc-p2-rgb);
}

html[data-theme="arcade"][data-screen="synthwave"] .faq-page {
    --faq-t6: var(--arc-fg-rgb);
}

html[data-theme="arcade"][data-screen="phosphor"] .faq-page {
    --faq-t6: var(--arc-p3-rgb);
}

html[data-theme="arcade"][data-screen="amber"] .faq-page {
    --faq-t6: var(--arc-wild-rgb);
}

html[data-theme="arcade"] .faq-page :is(.faq-main > .faq-category:nth-of-type(6n+1), .faq-topic-list > li:nth-child(6n+1)) { --faq-tone: var(--faq-t1); }
html[data-theme="arcade"] .faq-page :is(.faq-main > .faq-category:nth-of-type(6n+2), .faq-topic-list > li:nth-child(6n+2)) { --faq-tone: var(--faq-t2); }
html[data-theme="arcade"] .faq-page :is(.faq-main > .faq-category:nth-of-type(6n+3), .faq-topic-list > li:nth-child(6n+3)) { --faq-tone: var(--faq-t3); }
html[data-theme="arcade"] .faq-page :is(.faq-main > .faq-category:nth-of-type(6n+4), .faq-topic-list > li:nth-child(6n+4)) { --faq-tone: var(--faq-t4); }
html[data-theme="arcade"] .faq-page :is(.faq-main > .faq-category:nth-of-type(6n+5), .faq-topic-list > li:nth-child(6n+5)) { --faq-tone: var(--faq-t5); }
html[data-theme="arcade"] .faq-page :is(.faq-main > .faq-category:nth-of-type(6n), .faq-topic-list > li:nth-child(6n)) { --faq-tone: var(--faq-t6); }

/* ---- page header: a strip of the topic tones --------------------------------- */

html[data-theme="arcade"] .faq-page .faq-page-header {
    position: relative;
}

html[data-theme="arcade"] .faq-page .faq-page-header::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 4px;
    background: repeating-linear-gradient(90deg,
        rgb(var(--faq-t1)) 0 40px, transparent 40px 48px,
        rgb(var(--faq-t2)) 48px 88px, transparent 88px 96px,
        rgb(var(--faq-t3)) 96px 136px, transparent 136px 144px,
        rgb(var(--faq-t4)) 144px 184px, transparent 184px 192px,
        rgb(var(--faq-t5)) 192px 232px, transparent 232px 240px,
        rgb(var(--faq-t6)) 240px 280px, transparent 280px 288px);
    opacity: 0.75;
    pointer-events: none;
}

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

html[data-theme="arcade"] .faq-page .faq-category {
    --faq-tone: var(--faq-t1);
    position: relative;
    margin: 0 0 32px;
    padding: 0;
    border: 2px solid var(--ds-line-2);
    background: 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"] .faq-page .faq-category:last-of-type {
    margin-bottom: 0;
}

/* ---- marquee ------------------------------------------------------------------ */

html[data-theme="arcade"] .faq-page .faq-category-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    margin: 0;
    padding: 14px 16px 18px;
    background:
        /* 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)),
        var(--arc-bg);
}

/* The backlight, the cabinet's tubes: lit at rest, strongest along the edges
 * and at the right; dark print behind the title on the left, so the title
 * holds its contrast on every tone. Strikes to full when the topic powers up. */
html[data-theme="arcade"] .faq-page .faq-category-header::before {
    content: '';
    position: absolute;
    inset: 2px 0 4px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.42) 45%, rgba(0, 0, 0, 0.1) 80%, transparent),
        linear-gradient(180deg, rgba(var(--faq-tone), 0.7) 0 2px, transparent 2px 30%, transparent 70%, rgba(var(--faq-tone), 0.7) calc(100% - 2px)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.25)),
        linear-gradient(90deg, rgba(var(--faq-tone), 0.5), rgba(var(--faq-tone), 0.3) 50%, rgba(var(--faq-tone), 0.55));
    box-shadow: inset 0 0 0 2px rgba(var(--faq-tone), 0.3);
    opacity: 0.85;
    pointer-events: none;
}

html[data-theme="arcade"] .faq-page .faq-category-header > * {
    position: relative;
    z-index: 1;
}

/* The icon in a lamp housing. */
html[data-theme="arcade"] .faq-page .faq-category-icon {
    width: 40px;
    height: 40px;
    border: 2px solid rgb(var(--faq-tone));
    background: #000;
    box-shadow: 0 0 12px rgba(var(--faq-tone), 0.45);
    color: rgb(var(--faq-tone));
    font-size: 16px;
}

html[data-theme="arcade"] .faq-page .faq-category-icon i {
    zoom: 1;
}

html[data-theme="arcade"] .faq-page .faq-category-title {
    margin: 0;
    color: var(--arc-fg);
    font-family: var(--arc-pixel);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    overflow-wrap: normal;
    text-shadow: 0 2px 0 #000, 0 0 12px rgba(var(--faq-tone), 0.6);
}

/* The answer count on an LCD. */
html[data-theme="arcade"] .faq-page .faq-category-count {
    flex: none;
    margin-left: auto;
    padding: 3px 8px 2px;
    border: 2px solid rgba(var(--faq-tone), 0.6);
    background: #000;
    color: rgb(var(--faq-tone));
    font-family: var(--arc-text);
    font-size: 1rem;
    line-height: 1.1;
    text-shadow: 0 0 8px rgba(var(--faq-tone), 0.55);
}

/* ---- panel: the questions ---------------------------------------------------- */

html[data-theme="arcade"] .faq-page .faq-list {
    overflow: visible;
    /* the control panel catches a little of the marquee's light */
    background: linear-gradient(180deg, rgba(var(--faq-tone), 0.08), rgba(var(--faq-tone), 0.02) 240px, transparent 480px);
}

html[data-theme="arcade"] .faq-page .faq-item {
    position: relative;
    border-top: 2px dashed var(--ds-line-1);
    background: transparent;
    transition: none;
}

html[data-theme="arcade"] .faq-page .faq-item:first-child {
    border-top: 0;
}

/* The lit edge: one segment per question down the cabinet's left side. */
html[data-theme="arcade"] .faq-page .faq-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: rgba(var(--faq-tone), 0.45);
    pointer-events: none;
}

/* The select cursor: the Table cards' four pixel corners (cabinet.css). */
html[data-theme="arcade"] .faq-page .faq-item::after {
    content: '';
    position: absolute;
    inset: 4px 6px 4px 10px;
    z-index: 2;
    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"] .faq-page .faq-question {
    position: relative;
    align-items: flex-start;
    gap: 16px;
    min-height: 60px;
    padding: 16px 18px 16px 26px;
    color: var(--faq-ink);
    transition: none;
}

html[data-theme="arcade"] .faq-page .faq-question:focus-visible {
    outline: 2px dashed var(--arc-wild);
    outline-offset: -2px;
    box-shadow: none;
}

html[data-theme="arcade"] .faq-page .faq-question-text {
    font-family: var(--arc-text);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.3;
}

/* The lamp button: the chevron in a housing; lit while the answer is open. */
html[data-theme="arcade"] .faq-page .faq-question > i {
    display: inline-grid;
    place-items: center;
    flex: none;
    zoom: 1;
    width: 28px;
    height: 28px;
    margin-top: -2px;
    border: 2px solid rgba(var(--faq-tone), 0.6);
    background: rgba(var(--faq-tone), 0.1);
    color: rgb(var(--faq-tone));
    font-size: 12px;
    transition: none;
}

/* ---- hover, keyboard focus: the cursor snaps on ---------------------------------- */

html[data-theme="arcade"] .faq-page .faq-item:is(:hover, :has(.faq-question:focus-visible)) {
    background: rgba(var(--faq-tone), 0.07);
}

html[data-theme="arcade"] .faq-page .faq-item:is(:hover, :has(.faq-question:focus-visible))::before {
    background: rgb(var(--faq-tone));
}

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

html[data-theme="arcade"] .faq-page .faq-item:is(:hover, :has(.faq-question:focus-visible)) .faq-question {
    color: var(--arc-fg);
}

html[data-theme="arcade"] .faq-page .faq-item:is(:hover, :has(.faq-question:focus-visible)) .faq-question > i {
    border-color: rgb(var(--faq-tone));
}

/* ---- open: a powered-on screen --------------------------------------------------- */

html[data-theme="arcade"] .faq-page .faq-list > .faq-item.active {
    background: rgba(var(--faq-tone), 0.1);
}

html[data-theme="arcade"] .faq-page .faq-list > .faq-item.active::before {
    background: rgb(var(--faq-tone));
    box-shadow: 0 0 10px rgba(var(--faq-tone), 0.6);
}

/* Steady while open, also under the pointer that just opened it: the corners
 * do not blink around an answer that is being read. */
html[data-theme="arcade"] .faq-page .faq-list > .faq-item.active::after {
    opacity: 1;
    animation: none;
}

html[data-theme="arcade"] .faq-page .faq-list > .faq-item.active .faq-question {
    color: var(--arc-fg);
}

html[data-theme="arcade"] .faq-page .faq-item.active .faq-question-text {
    text-shadow: 0 0 10px rgba(var(--faq-tone), 0.5);
}

html[data-theme="arcade"] .faq-page .faq-list > .faq-item.active .faq-question > i {
    border-color: rgb(var(--faq-tone));
    background: rgb(var(--faq-tone));
    box-shadow: 0 0 12px rgba(var(--faq-tone), 0.7);
    color: var(--arc-bg);
}

html[data-theme="arcade"] .faq-page .faq-answer {
    transition: grid-template-rows 0.16s steps(3, end);
}

html[data-theme="arcade"] .faq-page .faq-answer-inner {
    padding: 0 18px;
    color: var(--arc-fg);
}

html[data-theme="arcade"] .faq-page .faq-item.active .faq-answer-inner {
    margin: 0 20px 22px 26px;
    padding: 16px 20px 18px;
    border: 6px solid #000;
    background:
        radial-gradient(120% 90% at 22% 0%, rgba(255, 255, 255, 0.07), transparent 42%),
        radial-gradient(90% 120% at 50% 0%, rgba(var(--faq-tone), 0.1), transparent 70%),
        var(--arc-bg);
    background-clip: padding-box;
    box-shadow:
        0 0 0 2px rgba(var(--faq-tone), 0.65),
        0 0 18px rgba(var(--faq-tone), 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 0 28px rgba(0, 0, 0, 0.85);
    animation: faq-screen-on 0.3s steps(4, end);
}

html[data-theme="arcade"][data-crt="on"] .faq-page .faq-item.active .faq-answer-inner {
    background:
        repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.22) 2px 3px),
        radial-gradient(120% 90% at 22% 0%, rgba(255, 255, 255, 0.07), transparent 42%),
        radial-gradient(90% 120% at 50% 0%, rgba(var(--faq-tone), 0.1), transparent 70%),
        var(--arc-bg);
    background-clip: padding-box;
}

/* The answer: body-size terminal type, the topic's tone on the details. */
html[data-theme="arcade"] .faq-page .faq-answer :is(p, li) {
    color: var(--ds-text-2);
    font-size: 1rem;
    line-height: 1.4;
}

html[data-theme="arcade"] .faq-page .faq-answer p {
    margin-bottom: 12px;
}

html[data-theme="arcade"] .faq-page .faq-answer :is(p, ul, ol):last-child {
    margin-bottom: 0;
}

html[data-theme="arcade"] .faq-page .faq-answer :is(ul, ol) {
    padding-left: 24px;
}

html[data-theme="arcade"] .faq-page .faq-answer ul > li {
    list-style: none;
    position: relative;
}

/* A pixel bullet in the topic's tone. */
html[data-theme="arcade"] .faq-page .faq-answer ul > li::before {
    content: '';
    position: absolute;
    top: 0.5em;
    left: -18px;
    width: 8px;
    height: 8px;
    background: rgb(var(--faq-tone));
    box-shadow: 0 0 6px rgba(var(--faq-tone), 0.6);
}

html[data-theme="arcade"] .faq-page .faq-answer ol > li::marker {
    color: rgb(var(--faq-tone));
}

html[data-theme="arcade"] .faq-page .faq-answer strong {
    color: var(--arc-fg);
    font-weight: 400;
}

html[data-theme="arcade"] .faq-page .faq-answer code {
    padding: 0 6px;
    border: 2px solid rgba(var(--faq-tone), 0.45);
    background: #000;
    color: rgb(var(--faq-tone));
    font-family: var(--arc-text);
    font-size: 1em;
}

html[data-theme="arcade"] .faq-page .faq-answer a:not(.btn) {
    color: var(--arc-link);
    text-decoration-color: rgba(var(--arc-link-rgb), 0.5);
    text-decoration-thickness: 2px;
}

html[data-theme="arcade"] .faq-page .faq-answer a:not(.btn):hover {
    background: var(--arc-link);
    color: var(--arc-bg);
    text-decoration-color: transparent;
}

/* Search hits, inverted in the topic's tone. */
html[data-theme="arcade"] .faq-page .faq-mark {
    padding: 0 2px;
    background: rgb(var(--faq-tone));
    box-shadow: none;
    color: var(--arc-bg);
    text-shadow: none;
}

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

/* The Changelog index's recipe (changelog.css, "index rail"): the list on a
 * dark screen in a bezel, the pixel cursor in front of a row on hover, focus
 * and the active topic, the count on a small LCD that is dim at rest and lit
 * in the tone when pointed at or active; the active topic takes its tone's
 * tint and a 2px bar. The lamps are the FAQ's own, one per topic tone.
 *
 * Cursor, lamp, LCD and the screen's bezel take room the plain list did not
 * need; a wider rail keeps the longest topic ("Safety & Multiplayer") on one
 * line. */
html[data-theme="arcade"] .faq-page .faq-layout {
    grid-template-columns: 296px minmax(0, 1fr);
}

@media (max-width: 1199.98px) {
    html[data-theme="arcade"] .faq-page .faq-layout {
        grid-template-columns: 288px minmax(0, 1fr);
    }
}

@media (max-width: 991.98px) {
    html[data-theme="arcade"] .faq-page .faq-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

html[data-theme="arcade"] .faq-page .faq-topic-list {
    gap: 2px;
    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);
}

html[data-theme="arcade"] .faq-page .faq-topic-list a {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 4px 6px 4px 20px;
    border: 0;
    color: var(--faq-ink);
    font-size: 1rem;
    line-height: 1.15;
    transition: none;
}

/* The pixel cursor in front of the row. */
html[data-theme="arcade"] .faq-page .faq-topic-list a::after {
    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"] .faq-page .faq-topic-list a:is(:hover, :focus-visible, .is-active)::after {
    opacity: 1;
}

/* The lamp. */
html[data-theme="arcade"] .faq-page .faq-topic-list a::before {
    content: '';
    position: static;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(var(--faq-tone), 0.75);
    background: rgba(var(--faq-tone), 0.15);
}

/* The count on a small LCD: dim at rest. */
html[data-theme="arcade"] .faq-page .faq-topic-list small {
    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"] .faq-page .faq-topic-list a:is(:hover, :focus-visible) {
    background: rgba(var(--arc-fg-rgb), 0.06);
    color: var(--arc-fg);
}

html[data-theme="arcade"] .faq-page .faq-topic-list a.is-active {
    background: rgba(var(--faq-tone), 0.16);
    box-shadow: inset 2px 0 0 rgb(var(--faq-tone));
    color: var(--arc-fg);
}

html[data-theme="arcade"] .faq-page .faq-topic-list a:focus-visible {
    outline: 2px dashed var(--arc-wild);
    outline-offset: 0;
}

html[data-theme="arcade"] .faq-page .faq-topic-list a:is(:hover, :focus-visible, .is-active)::before {
    border-color: rgb(var(--faq-tone));
    background: rgb(var(--faq-tone));
    box-shadow: 0 0 8px rgba(var(--faq-tone), 0.7);
}

html[data-theme="arcade"] .faq-page .faq-topic-list a:is(:hover, :focus-visible, .is-active) small {
    border-color: rgba(var(--faq-tone), 0.6);
    color: rgb(var(--faq-tone));
    text-shadow: 0 0 6px rgba(var(--faq-tone), 0.6);
}

/* Useful links: coin slots (the Table card's way in). */
html[data-theme="arcade"] .faq-page .faq-useful-links {
    gap: 8px;
}

html[data-theme="arcade"] .faq-page .faq-useful-links a {
    gap: 8px;
    padding: 3px 9px 3px 12px;
    border: 2px solid rgba(var(--arc-link-rgb), 0.6);
    background: #000;
    box-shadow: inset 4px 0 0 currentColor;
    color: var(--arc-link);
    font-size: 1rem;
    line-height: 1.15;
    text-transform: uppercase;
    transition: none;
}

html[data-theme="arcade"] .faq-page .faq-useful-links a i {
    display: none;
}

html[data-theme="arcade"] .faq-page .faq-useful-links a::after {
    content: '';
    flex: none;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-right: 0;
    border-left: 6px solid currentColor;
}

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

html[data-theme="arcade"] .faq-page .faq-useful-links a:is(:hover, :focus-visible)::after {
    animation: arcade-site-blink 0.8s steps(1) infinite;
}

/* ---- search results line ---------------------------------------------------------- */

html[data-theme="arcade"] .faq-page .faq-results {
    align-items: center;
    gap: 8px 14px;
    padding-bottom: 14px;
    border-bottom: 2px dashed var(--ds-line-1);
    color: var(--arc-wild);
    font-size: 1rem;
    font-weight: 400;
}

html[data-theme="arcade"] .faq-page .faq-results-clear {
    padding: 2px 8px 1px;
    border: 2px solid var(--ds-line-2);
    background: #000;
    color: var(--arc-fg);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.15;
    text-transform: uppercase;
}

html[data-theme="arcade"] .faq-page .faq-results-clear:is(:hover, :focus-visible) {
    border-color: var(--arc-fg);
    background: var(--arc-fg);
    color: var(--arc-bg);
    text-decoration: none;
}

/* ---- coin door: still need help ---------------------------------------------------- */

html[data-theme="arcade"] .faq-page .faq-help {
    position: relative;
    margin-top: 40px;
    padding: 26px 22px 22px;
    border: 2px solid var(--ds-line-2);
    background: color-mix(in srgb, #000 45%, var(--arc-bg));
    box-shadow: 6px 6px 0 color-mix(in srgb, var(--arc-fg) 10%, transparent);
}

/* The topic tones once more, as the bulbs along the door's top. */
html[data-theme="arcade"] .faq-page .faq-help::before {
    content: '';
    position: absolute;
    top: 6px;
    right: 8px;
    left: 8px;
    height: 4px;
    background: repeating-linear-gradient(90deg,
        rgb(var(--faq-t1)) 0 8px, transparent 8px 16px,
        rgb(var(--faq-t2)) 16px 24px, transparent 24px 32px,
        rgb(var(--faq-t3)) 32px 40px, transparent 40px 48px,
        rgb(var(--faq-t4)) 48px 56px, transparent 56px 64px,
        rgb(var(--faq-t5)) 64px 72px, transparent 72px 80px,
        rgb(var(--faq-t6)) 80px 88px, transparent 88px 96px);
    opacity: 0.7;
    pointer-events: none;
}

html[data-theme="arcade"] .faq-page .faq-help-copy h2 {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

/* A block cursor waiting for the player: decoration only. */
html[data-theme="arcade"] .faq-page .faq-help-copy h2::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 16px;
    margin-left: 10px;
    vertical-align: -2px;
    background: var(--arc-wild);
    box-shadow: 0 0 8px rgba(var(--arc-wild-rgb), 0.6);
    animation: arcade-site-blink 1s steps(1) infinite;
}

html[data-theme="arcade"] .faq-page .faq-help-copy p {
    color: var(--ds-text-2);
    font-size: 1rem;
    line-height: 1.4;
}

html[data-theme="arcade"] .faq-page .faq-help-secondary {
    color: var(--arc-patreon);
    font-size: 1rem;
}

html[data-theme="arcade"] .faq-page .faq-help-secondary:is(:hover, :focus-visible) {
    color: var(--arc-fg);
}

html[data-theme="arcade"] .faq-page .faq-help-secondary i {
    zoom: 1;
    color: currentColor;
    font-size: 14px;
}

/* ---- topic power-up -------------------------------------------------------------------- */

/* A topic with the pointer on it, keyboard focus in it or an answer open
 * powers its marquee up: the tube strikes, the title glows. */
html[data-theme="arcade"] .faq-page .faq-category:is(:hover, :has(:focus-visible), :has(.faq-item.active)) .faq-category-header::before {
    opacity: 1;
    animation: arc-cab-marquee-on 0.5s both;
}

html[data-theme="arcade"] .faq-page .faq-category:is(:hover, :has(:focus-visible), :has(.faq-item.active)) .faq-category-icon {
    background: rgb(var(--faq-tone));
    color: var(--arc-bg);
    box-shadow: 0 0 16px rgba(var(--faq-tone), 0.7);
}

/* ---- motion -------------------------------------------------------------------------- */

@keyframes faq-cursor-in {
    from { inset: -4px -2px -4px 2px; }
}

/* The screen opens from a bright line, as a tube warms up. */
@keyframes faq-screen-on {
    0% { clip-path: inset(48% -30px 48% -30px); filter: brightness(1.8); }
    100% { clip-path: inset(-30px -30px -30px -30px); filter: none; }
}

/* ---- no hover (touch) -------------------------------------------------------------- */

/* A tap leaves :hover on the question; only the open state shows, and a press
 * pushes the row in. */
@media (hover: none) {
    html[data-theme="arcade"] .faq-page .faq-item:hover:not(.active):not(:has(.faq-question:focus-visible)) {
        background: transparent;
    }

    html[data-theme="arcade"] .faq-page .faq-item:hover:not(.active):not(:has(.faq-question:focus-visible))::before {
        background: rgba(var(--faq-tone), 0.45);
    }

    html[data-theme="arcade"] .faq-page .faq-item:hover:not(:has(.faq-question:focus-visible))::after {
        animation: none;
    }

    html[data-theme="arcade"] .faq-page .faq-item:hover:not(.active):not(:has(.faq-question:focus-visible))::after {
        opacity: 0;
    }

    html[data-theme="arcade"] .faq-page .faq-item:hover:not(.active):not(:has(.faq-question:focus-visible)) .faq-question {
        color: var(--faq-ink);
    }

    html[data-theme="arcade"] .faq-page .faq-item:hover:not(.active):not(:has(.faq-question:focus-visible)) .faq-question > i {
        border-color: rgba(var(--faq-tone), 0.6);
    }

    /* The topic powers up for an open answer or keyboard focus, not for the
     * hover a tap leaves behind. */
    html[data-theme="arcade"] .faq-page .faq-category:hover:not(:has(.faq-item.active)):not(:has(:focus-visible)) .faq-category-header::before {
        opacity: 0.85;
        animation: none;
    }

    html[data-theme="arcade"] .faq-page .faq-category:hover:not(:has(.faq-item.active)):not(:has(:focus-visible)) .faq-category-icon {
        background: #000;
        box-shadow: 0 0 12px rgba(var(--faq-tone), 0.45);
        color: rgb(var(--faq-tone));
    }

    html[data-theme="arcade"] .faq-page .faq-item:hover:not(.active):has(.faq-question:active)::after {
        opacity: 1;
    }

    html[data-theme="arcade"] .faq-page .faq-question:active {
        transform: translateY(2px);
    }

    /* A tapped topic is the active one; the hover the tap leaves behind on
     * any other row shows nothing. */
    html[data-theme="arcade"] .faq-page .faq-topic-list a:hover:not(:focus-visible):not(.is-active) {
        background: transparent;
        color: var(--faq-ink);
    }

    html[data-theme="arcade"] .faq-page .faq-topic-list a:hover:not(:focus-visible):not(.is-active)::after {
        opacity: 0;
    }

    html[data-theme="arcade"] .faq-page .faq-topic-list a:hover:not(:focus-visible):not(.is-active)::before {
        border-color: rgba(var(--faq-tone), 0.75);
        background: rgba(var(--faq-tone), 0.15);
        box-shadow: none;
    }

    html[data-theme="arcade"] .faq-page .faq-topic-list a:hover:not(:focus-visible):not(.is-active) small {
        border-color: var(--ds-line-1);
        color: var(--arc-dim);
        text-shadow: none;
    }

    html[data-theme="arcade"] .faq-page .faq-useful-links a:hover:not(:focus-visible):not(:active) {
        background: #000;
        box-shadow: inset 4px 0 0 currentColor;
        color: var(--arc-link);
    }

    html[data-theme="arcade"] .faq-page .faq-useful-links a:hover:not(:focus-visible)::after {
        animation: none;
    }
}

/* ---- narrow: a phone's cabinet ------------------------------------------------------- */

/* Below 768px the count leaves the marquee (styles.css hides it) and a long
 * title runs into the bright end of the tube, so the print reaches across. */
@media (max-width: 767.98px) {
    html[data-theme="arcade"] .faq-page .faq-category-header::before {
        background:
            linear-gradient(90deg, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.56) 60%, rgba(0, 0, 0, 0.4)),
            linear-gradient(180deg, rgba(var(--faq-tone), 0.7) 0 2px, transparent 2px 30%, transparent 70%, rgba(var(--faq-tone), 0.7) calc(100% - 2px)),
            linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.25)),
            linear-gradient(90deg, rgba(var(--faq-tone), 0.5), rgba(var(--faq-tone), 0.3) 50%, rgba(var(--faq-tone), 0.55));
    }
}

@media (max-width: 575.98px) {
    html[data-theme="arcade"] .faq-page .faq-category {
        margin-bottom: 24px;
    }

    html[data-theme="arcade"] .faq-page .faq-category-header {
        gap: 12px;
        min-height: 68px;
        padding: 12px 12px 16px;
    }

    html[data-theme="arcade"] .faq-page .faq-category-icon {
        width: 36px;
        height: 36px;
    }

    html[data-theme="arcade"] .faq-page .faq-question {
        gap: 12px;
        padding: 14px 14px 14px 20px;
    }

    html[data-theme="arcade"] .faq-page .faq-item::after {
        inset: 3px 4px 3px 8px;
    }

    html[data-theme="arcade"] .faq-page .faq-item.active .faq-answer-inner {
        margin: 0 12px 16px 18px;
        padding: 12px 14px 14px;
        border-width: 4px;
    }

    html[data-theme="arcade"] .faq-page .faq-answer :is(ul, ol) {
        padding-left: 20px;
    }

    html[data-theme="arcade"] .faq-page .faq-answer ul > li::before {
        left: -16px;
    }

    html[data-theme="arcade"] .faq-page .faq-help {
        padding: 24px 16px 18px;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    html[data-theme="arcade"] .faq-page .faq-answer {
        transition: none;
    }

    html[data-theme="arcade"] .faq-page .faq-item:is(:hover, :has(.faq-question:focus-visible))::after,
    html[data-theme="arcade"] .faq-page .faq-item.active .faq-answer-inner,
    html[data-theme="arcade"] .faq-page .faq-category:is(:hover, :has(:focus-visible), :has(.faq-item.active)) .faq-category-header::before,
    html[data-theme="arcade"] .faq-page .faq-useful-links a:is(:hover, :focus-visible)::after,
    html[data-theme="arcade"] .faq-page .faq-help-copy h2::after {
        animation: none;
    }

    html[data-theme="arcade"] .faq-page .faq-question:active {
        transform: none;
    }
}