/* Arcade — the Mewgenics explorer (Resources/Mewgenics/mewgenics.css).
 *
 * The page names its colours once, in the --mew-* layer, and everything below
 * it reads that layer. So the arcade look is that layer pointed at the screen's
 * palette; the rules further down only cover what the layer does not carry.
 *
 * Rank: the five rank colours are the site's own styling (sky, emerald,
 * fuchsia, amber -- rare is the site link colour, very rare the page accent),
 * not the game's: the game's own rarity frame is dropped from the art. So they
 * follow the palette. Each rank takes a role that is a distinct hue on every
 * screen and never the plain text colour:
 *   uncommon  good    rare  link    very rare  patreon    quest  wild
 * (phosphor, whose good and wild are the same green, takes bad for quest).
 *
 * The plate stays light -- the sprites are black outline over flat colour and
 * do not read on a dark ground -- so it is the rank colour mixed into white.
 */

html[data-theme="arcade"] :is(.mew-page, .mew-modal, .mew-toast, .mew-detail-backdrop) {
    --mew-accent: var(--ds-violet);
    --mew-accent-rgb: var(--ds-violet-rgb);
    --mew-accent-bright: color-mix(in srgb, var(--ds-violet) 55%, var(--ds-text-1));
    --mew-surface-1: var(--ds-raised);
    --mew-surface-2: var(--ds-surface-1);
    --mew-surface-3: var(--ds-surface-3);
    --mew-line: var(--ds-line-1);
    --mew-line-strong: var(--ds-line-2);
    --mew-text: var(--ds-text-1);
    --mew-text-2: var(--ds-text-2);
    --mew-text-3: var(--ds-text-3);

    --mew-common: var(--ds-text-2);
    --mew-uncommon: var(--arc-good);
    --mew-very-rare: var(--arc-patreon);
    --mew-quest: var(--arc-wild);

    --mew-plate-top: color-mix(in srgb, var(--arc-dim) 10%, #fff);
    --mew-plate-bottom: color-mix(in srgb, var(--arc-dim) 32%, #fff);
    --mew-ink: var(--arc-bg);
}

html[data-theme="arcade"][data-screen="phosphor"] :is(.mew-page, .mew-modal, .mew-toast, .mew-detail-backdrop) {
    --mew-quest: var(--arc-bad);
}

/* -- rank plates ------------------------------------------------------------ */

html[data-theme="arcade"] :is(.mew-card, .mew-row, .mew-table tr, .mew-detail-plate)[data-rarity="common"] {
    --mew-plate-top: color-mix(in srgb, var(--arc-dim) 38%, #fff);
    --mew-plate-bottom: color-mix(in srgb, var(--arc-dim) 70%, #fff);
    --mew-plate-rule: rgba(var(--arc-dim-rgb), .55);
}

html[data-theme="arcade"] :is(.mew-card, .mew-row, .mew-table tr, .mew-detail-plate)[data-rarity="uncommon"] {
    --mew-plate-top: color-mix(in srgb, var(--mew-uncommon) 22%, #fff);
    --mew-plate-bottom: color-mix(in srgb, var(--mew-uncommon) 55%, #fff);
}

html[data-theme="arcade"] :is(.mew-card, .mew-row, .mew-table tr, .mew-detail-plate)[data-rarity="rare"] {
    --mew-plate-top: color-mix(in srgb, var(--mew-rare) 22%, #fff);
    --mew-plate-bottom: color-mix(in srgb, var(--mew-rare) 55%, #fff);
}

html[data-theme="arcade"] :is(.mew-card, .mew-row, .mew-table tr, .mew-detail-plate)[data-rarity="very_rare"] {
    --mew-plate-top: color-mix(in srgb, var(--mew-very-rare) 22%, #fff);
    --mew-plate-bottom: color-mix(in srgb, var(--mew-very-rare) 55%, #fff);
}

html[data-theme="arcade"] :is(.mew-card, .mew-row, .mew-table tr, .mew-detail-plate)[data-rarity="quest"] {
    --mew-plate-top: color-mix(in srgb, var(--mew-quest) 22%, #fff);
    --mew-plate-bottom: color-mix(in srgb, var(--mew-quest) 55%, #fff);
}

/* -- what the layer does not carry ------------------------------------------ */

/* A starred card: on the light plate, so the accent darkened to read there. */
html[data-theme="arcade"] .mew-star.is-on {
    color: color-mix(in srgb, var(--mew-accent) 75%, #000);
}

/* The transparency checkerboard behind a texture. */
html[data-theme="arcade"] .mew-texture-frame {
    background:
        repeating-conic-gradient(var(--ds-surface-3) 0 25%, var(--ds-surface-1) 0 50%) 50% / 20px 20px;
}