/* Arcade — the Isaac XML Explorer (Resources/Isaac/isaac.css).
 *
 * Like the Mewgenics explorer, the page names its colours once in the
 * --isaac-* layer, and most rules read that layer. So the arcade look starts
 * with that layer pointed at the screen's palette; the rules further down
 * cover the colours the stylesheet writes out in place: ink on the accent,
 * the star gold, the grounds of menus, code and the media players, and the
 * players' own greys and status colours.
 *
 * The ANM2 sprite is game art and is drawn untouched. Its origin and null
 * guides are interface and take the palette in anm2-player.js; the audio
 * waveform does the same in isaac.js.
 */

html[data-theme="arcade"] :is(.isaac-page, .isaac-modal, .isaac-toast, .isaac-detail-backdrop) {
    --isaac-accent-bright: color-mix(in srgb, var(--ds-link) 70%, #fff);
    --isaac-surface-1: var(--ds-raised);
    --isaac-surface-2: var(--ds-surface-1);
    --isaac-surface-3: var(--ds-surface-3);
    --isaac-line: var(--ds-line-1);
    --isaac-line-strong: var(--ds-line-2);
    --isaac-text: var(--ds-text-1);
    --isaac-text-2: var(--ds-text-2);
    --isaac-text-3: var(--ds-text-3);
    --isaac-danger: var(--ds-danger);
}

/* -- ink, gold, the intro ---------------------------------------------------- */

/* Dark text on an accent-filled control. */
html[data-theme="arcade"] .isaac-btn-primary,
html[data-theme="arcade"] .isaac-btn-primary:hover,
html[data-theme="arcade"] .isaac-count-badge,
html[data-theme="arcade"] .isaac-facet-box,
html[data-theme="arcade"] .isaac-toast,
html[data-theme="arcade"] .isaac-audio-toggle {
    color: var(--arc-bg);
}

html[data-theme="arcade"] .isaac-icon-btn.is-copied,
html[data-theme="arcade"] .isaac-copy-btn.is-copied,
html[data-theme="arcade"] .isaac-copy-inline.is-copied {
    color: var(--ds-success) !important;
}

/* Favourites and the quality stars. */
html[data-theme="arcade"] .isaac-btn-star.is-active i,
html[data-theme="arcade"] .isaac-star:hover,
html[data-theme="arcade"] .isaac-star.is-active,
html[data-theme="arcade"] .isaac-quality {
    color: var(--arc-wild);
}

/* Two bands, like the site's .text-gradient. background-image only: the
 * shorthand would reset the source's background-clip: text. */
html[data-theme="arcade"] .isaac-intro h1 span {
    background-image: linear-gradient(180deg, var(--arc-hl-a) 0 52%, var(--arc-hl-b) 52% 100%);
}

/* -- grounds ------------------------------------------------------------------ */

html[data-theme="arcade"] .isaac-suggestions,
html[data-theme="arcade"] .isaac-menu,
html[data-theme="arcade"] .isaac-popover,
html[data-theme="arcade"] .isaac-modal,
html[data-theme="arcade"] .isaac-table th {
    background: var(--ds-surface-1);
}

html[data-theme="arcade"] .isaac-modal-backdrop,
html[data-theme="arcade"] .isaac-detail-backdrop {
    background: rgba(var(--ds-bg-rgb), .7);
}

html[data-theme="arcade"] .isaac-drop-overlay {
    background: rgba(var(--ds-bg-rgb), .9);
}

/* The checkerboard behind sprite art keeps its squares; only the ground
 * under them changes. The media variants set their own ground. */
html[data-theme="arcade"] .isaac-art:not(.is-animation, .is-audio, .is-video, .is-empty),
html[data-theme="arcade"] .isaac-asset-visual {
    background-color: var(--ds-bg-inset);
}

html[data-theme="arcade"] .isaac-art.is-animation,
html[data-theme="arcade"] .isaac-art.is-audio,
html[data-theme="arcade"] .isaac-art.is-video,
html[data-theme="arcade"] .isaac-asset-file {
    color: var(--ds-link);
}

html[data-theme="arcade"] .isaac-art.is-empty {
    color: color-mix(in srgb, var(--arc-dim) 60%, var(--arc-bg));
}

html[data-theme="arcade"] .isaac-code {
    color: var(--ds-text-2);
    background: var(--ds-bg-code);
}

html[data-theme="arcade"] .isaac-export-preview {
    background: var(--ds-bg-code);
}

html[data-theme="arcade"] .isaac-asset-video {
    background: var(--ds-bg-deep);
}

/* -- audio player ------------------------------------------------------------- */

html[data-theme="arcade"] .isaac-asset-audio {
    background-image:
        radial-gradient(circle at 0 50%, rgba(var(--ds-link-rgb), .13), transparent 12rem),
        linear-gradient(135deg, var(--ds-surface-2), var(--ds-bg-inset) 68%);
}

html[data-theme="arcade"] .isaac-audio-toggle {
    background: var(--ds-link);
    box-shadow:
        0 8px 24px rgba(var(--ds-link-rgb), .25),
        inset 0 1px rgba(255, 255, 255, .55);
}

html[data-theme="arcade"] .isaac-audio-toggle:hover {
    box-shadow:
        0 10px 30px rgba(var(--ds-link-rgb), .34),
        inset 0 1px rgba(255, 255, 255, .6);
}

/* The source's error state (ground and no glow) outranks the two rules above
 * for the ground; the ink and the hover glow need restating. */
html[data-theme="arcade"] .isaac-asset-audio.is-error .isaac-audio-toggle {
    color: var(--ds-danger);
    box-shadow: none;
}

html[data-theme="arcade"] .isaac-audio-cursor {
    background: color-mix(in srgb, var(--ds-link) 30%, #fff);
    box-shadow: 0 0 8px rgba(var(--ds-link-rgb), .75);
}

html[data-theme="arcade"] .isaac-audio-meta,
html[data-theme="arcade"] .isaac-audio-meta span {
    color: var(--ds-text-3);
}

/* -- ANM2 player -------------------------------------------------------------- */

html[data-theme="arcade"] .isaac-anm2-host {
    background: var(--ds-bg-inset);
}

html[data-theme="arcade"] .isaac-anm2-player,
html[data-theme="arcade"] .isaac-anm2-heading strong,
html[data-theme="arcade"] .isaac-anm2-error strong,
html[data-theme="arcade"] .isaac-anm2-event {
    color: var(--ds-text-1);
}

html[data-theme="arcade"] .isaac-anm2-error,
html[data-theme="arcade"] .isaac-anm2-controls button,
html[data-theme="arcade"] .isaac-anm2-controls select,
html[data-theme="arcade"] .isaac-anm2-layer,
html[data-theme="arcade"] .isaac-anm2-data summary,
html[data-theme="arcade"] .isaac-anm2-data-grid li {
    color: var(--ds-text-2);
}

html[data-theme="arcade"] .isaac-anm2-loading,
html[data-theme="arcade"] .isaac-anm2-error span,
html[data-theme="arcade"] .isaac-anm2-badges span,
html[data-theme="arcade"] .isaac-anm2-select > span,
html[data-theme="arcade"] .isaac-anm2-speed > span,
html[data-theme="arcade"] .isaac-anm2-timeline > div,
html[data-theme="arcade"] .isaac-anm2-layer small,
html[data-theme="arcade"] .isaac-anm2-layer.muted i,
html[data-theme="arcade"] .isaac-anm2-layer.unavailable i,
html[data-theme="arcade"] .isaac-anm2-empty,
html[data-theme="arcade"] .isaac-anm2-data summary > span::after,
html[data-theme="arcade"] .isaac-anm2-data summary small,
html[data-theme="arcade"] .isaac-anm2-data-grid h4,
html[data-theme="arcade"] .isaac-anm2-data-grid li > small,
html[data-theme="arcade"] .isaac-anm2-data-grid [data-anm2-sheet-state] {
    color: var(--ds-text-3);
}

/* Hover and pressed states, restated: the rules above outrank the source's. */
html[data-theme="arcade"] .isaac-anm2-controls button:hover,
html[data-theme="arcade"] .isaac-anm2-controls button.active,
html[data-theme="arcade"] .isaac-anm2-badges b,
html[data-theme="arcade"] .isaac-anm2-data-grid li.overridden > span:nth-child(2) {
    color: var(--isaac-accent-bright);
}

html[data-theme="arcade"] .isaac-anm2-layer:hover {
    color: var(--ds-text-1);
}

html[data-theme="arcade"] .isaac-anm2-play {
    color: var(--ds-text-1) !important;
}

html[data-theme="arcade"] .isaac-anm2-error {
    background-image: linear-gradient(135deg, rgba(var(--ds-danger-rgb), .06), transparent);
}

/* background-image and -color only: the source sets the grid's size after. */
html[data-theme="arcade"] .isaac-anm2-stage {
    background-image:
        linear-gradient(rgba(var(--ds-link-rgb), .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--ds-link-rgb), .035) 1px, transparent 1px),
        radial-gradient(circle at 50% 48%, rgba(var(--ds-link-rgb), .06), transparent 48%);
    background-color: var(--ds-bg-deep);
}

html[data-theme="arcade"] .isaac-anm2-stage-status,
html[data-theme="arcade"] .isaac-anm2-event {
    background: rgba(var(--ds-bg-rgb), .82);
}

html[data-theme="arcade"] .isaac-anm2-stage-status {
    color: var(--ds-link);
}

html[data-theme="arcade"] .isaac-anm2-stage-status.warning {
    color: var(--ds-warning);
    border-color: rgba(var(--ds-warning-rgb), .22);
}

html[data-theme="arcade"] .isaac-anm2-controls,
html[data-theme="arcade"] .isaac-anm2-timeline,
html[data-theme="arcade"] .isaac-anm2-layer-strip {
    background: var(--ds-surface-1);
}

html[data-theme="arcade"] .isaac-anm2-data-id {
    color: color-mix(in srgb, var(--ds-link) 70%, var(--arc-bg));
}

html[data-theme="arcade"] .isaac-anm2-data-grid [data-anm2-sheet-state].ready {
    color: var(--ds-success);
}

html[data-theme="arcade"] .isaac-anm2-data-grid [data-anm2-sheet-state].missing {
    color: var(--ds-warning);
}

/* -- sign-in card ------------------------------------------------------------- */

html[data-theme="arcade"] .isaac-auth-card {
    background: rgba(var(--ds-bg-rgb), .92);
}

html[data-theme="arcade"] .isaac-auth-alert {
    color: var(--ds-danger);
    background: rgba(var(--ds-danger-rgb), .1);
}

html[data-theme="arcade"] .isaac-auth-input {
    background: var(--ds-bg-inset);
}