/* Theme filters: an optional full-screen look that goes with each theme (a player turns it on in the profile options).
   <html data-filters="on"> switches it on; the kind of filter follows the theme (data-skin).
   Every theme sets --fx-filter (applied to the whole page) and --fx-overlay (drawn over it: scanlines, pixel grid, vignette).
   SoRJ classique has no rule here: its filter is the original CRT look, in sorj.css.
   The SVG filters #sorj-gb, #sorj-gbp and #sorj-vb live in sorjbase.html. */

html[data-filters="on"] {
    filter: var(--fx-filter, none);
}

html[data-filters="on"]::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2000;
    background: var(--fx-overlay, none);
}

/* ---- kinds of filters ---- */

/* Lines are drawn in whole device pixels: sorj.js sets --fx-line, --fx-cell and --fx-band (about 1, 3 and 4 css px, rounded to whole device pixels) from the pixel ratio. Hard 1px lines on a phone (fractional ratios) turn into moire. */

/* TV through a composite cable: soft picture, colour bleeding, thick scanlines, dark corners */
html[data-skin="famicom"], html[data-skin="n64"], html[data-skin="playstation"] {
    --fx-filter: blur(0.4px) saturate(1.25) contrast(1.05)
        drop-shadow(1px 0 0 rgba(255, 40, 40, 0.22)) drop-shadow(-1px 0 0 rgba(40, 90, 255, 0.22))
        drop-shadow(0 0 4px rgba(255, 255, 255, 0.1));
    --fx-overlay:
        radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.4) 100%),
        linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.24) 50%, rgba(0, 0, 0, 0)) 0 0 / 100% var(--fx-band, 4px);
}

/* home computers on a PAL TV: blurrier still */
html[data-skin="c64"], html[data-skin="spectrum"] {
    --fx-filter: blur(0.6px) saturate(1.3) contrast(1.05)
        drop-shadow(1.5px 0 0 rgba(255, 40, 40, 0.25)) drop-shadow(-1.5px 0 0 rgba(40, 90, 255, 0.25))
        drop-shadow(0 0 5px rgba(255, 255, 255, 0.12));
    --fx-overlay:
        radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.45) 100%),
        linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.26) 50%, rgba(0, 0, 0, 0)) 0 0 / 100% var(--fx-band, 4px);
}

/* RGB monitors: sharp picture, scanlines and a faint aperture grille */
html[data-skin="gamecube"], html[data-skin="amiga"], html[data-skin="cpc"] {
    --fx-filter: saturate(1.2) contrast(1.08) drop-shadow(0 0 3px rgba(255, 255, 255, 0.08));
    --fx-mask: repeating-linear-gradient(90deg, rgba(255, 0, 0, 0.06) 0 var(--fx-line, 1px), rgba(0, 255, 0, 0.06) var(--fx-line, 1px) calc(var(--fx-line, 1px) * 2), rgba(0, 0, 255, 0.06) calc(var(--fx-line, 1px) * 2) calc(var(--fx-line, 1px) * 3));
    --fx-overlay:
        radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.35) 100%),
        var(--fx-mask),
        linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.31) 50%, rgba(0, 0, 0, 0)) 0 0 / 100% var(--fx-band, 4px);
}

/* arcade cabinet: punchy colours, strong scanlines */
html[data-skin="neogeo"] {
    --fx-filter: saturate(1.4) contrast(1.12) brightness(1.03) drop-shadow(0 0 3px rgba(255, 255, 255, 0.1));
    --fx-mask: repeating-linear-gradient(90deg, rgba(255, 0, 0, 0.08) 0 var(--fx-line, 1px), rgba(0, 255, 0, 0.08) var(--fx-line, 1px) calc(var(--fx-line, 1px) * 2), rgba(0, 0, 255, 0.08) calc(var(--fx-line, 1px) * 2) calc(var(--fx-line, 1px) * 3));
    --fx-overlay:
        radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.5) 100%),
        var(--fx-mask),
        linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.38) 50%, rgba(0, 0, 0, 0)) 0 0 / 100% var(--fx-band, 4px);
}

/* VGA screen: clean picture, only a trace of grille and glass */
html[data-skin="dreamcast"] {
    --fx-filter: saturate(1.1) contrast(1.04);
    --fx-mask: repeating-linear-gradient(90deg, rgba(255, 0, 0, 0.05) 0 var(--fx-line, 1px), rgba(0, 255, 0, 0.05) var(--fx-line, 1px) calc(var(--fx-line, 1px) * 2), rgba(0, 0, 255, 0.05) calc(var(--fx-line, 1px) * 2) calc(var(--fx-line, 1px) * 3));
    --fx-overlay:
        radial-gradient(ellipse at center, transparent 70%, rgba(0, 0, 0, 0.18) 100%),
        var(--fx-mask);
}

/* Themes that limit the colours of the page (the SVG filters live in sorjbase.html):
   Game Boy, Pocket and Virtual Boy: 4 tones of one colour; phosphor terminals: one colour; Amstrad CPC: 3 levels per
   channel (its 27 colours); ZX Spectrum: 2 levels per channel (its 8 colours).
   The filter goes on the pieces of the page (the children of the body and of main, and the background image), not on
   the page as a whole or on main: a filtered ancestor would stop the fixed background art from being fixed.
   Not on the page as a whole either: the overlay (scanlines, vignette) is
   then drawn over the limited colours instead of being limited itself (its soft gradients would turn into bands),
   and Firefox, which ignores an SVG filter on the root element, applies it too. The filter property is set
   directly instead of through --fx-filter: Firefox resolves a url() inside a custom property against the stylesheet. */
html[data-filters="on"][data-skin="gameboy"],
html[data-filters="on"][data-skin="gbpocket"],
html[data-filters="on"][data-skin="virtualboy"],
html[data-filters="on"][data-skin="phosphor_green"],
html[data-filters="on"][data-skin="phosphor_amber"],
html[data-filters="on"][data-skin="cpc"],
html[data-filters="on"][data-skin="spectrum"] {
    filter: none;
}

html[data-filters="on"][data-skin="gameboy"] body > :not(svg):not(main),
html[data-filters="on"][data-skin="gameboy"] main > :not(#artwork),
html[data-filters="on"][data-skin="gameboy"] #artwork img {
    filter: url(#sorj-gb);
}

html[data-filters="on"][data-skin="gbpocket"] body > :not(svg):not(main),
html[data-filters="on"][data-skin="gbpocket"] main > :not(#artwork),
html[data-filters="on"][data-skin="gbpocket"] #artwork img {
    filter: url(#sorj-gbp);
}

html[data-filters="on"][data-skin="virtualboy"] body > :not(svg):not(main),
html[data-filters="on"][data-skin="virtualboy"] main > :not(#artwork),
html[data-filters="on"][data-skin="virtualboy"] #artwork img {
    filter: url(#sorj-vb);
}

html[data-filters="on"][data-skin="phosphor_green"] body > :not(svg):not(main),
html[data-filters="on"][data-skin="phosphor_green"] main > :not(#artwork),
html[data-filters="on"][data-skin="phosphor_green"] #artwork img {
    filter: url(#sorj-phg) contrast(1.15) brightness(1.1) drop-shadow(0 0 2px rgba(77, 255, 136, 0.7)) drop-shadow(0 0 8px rgba(77, 255, 136, 0.4));
}

html[data-filters="on"][data-skin="phosphor_amber"] body > :not(svg):not(main),
html[data-filters="on"][data-skin="phosphor_amber"] main > :not(#artwork),
html[data-filters="on"][data-skin="phosphor_amber"] #artwork img {
    filter: url(#sorj-pha) contrast(1.15) brightness(1.1) drop-shadow(0 0 2px rgba(255, 181, 46, 0.7)) drop-shadow(0 0 8px rgba(255, 181, 46, 0.4));
}

html[data-filters="on"][data-skin="cpc"] body > :not(svg):not(main),
html[data-filters="on"][data-skin="cpc"] main > :not(#artwork),
html[data-filters="on"][data-skin="cpc"] #artwork img {
    filter: url(#sorj-cpc) drop-shadow(0 0 3px rgba(255, 255, 255, 0.08));
}

html[data-filters="on"][data-skin="spectrum"] body > :not(svg):not(main),
html[data-filters="on"][data-skin="spectrum"] main > :not(#artwork),
html[data-filters="on"][data-skin="spectrum"] #artwork img {
    filter: url(#sorj-spec) blur(0.6px) drop-shadow(1.5px 0 0 rgba(255, 40, 40, 0.25)) drop-shadow(-1.5px 0 0 rgba(40, 90, 255, 0.25)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.12));
}

html[data-filters="on"][data-skin="gameboy"] #artwork,
html[data-filters="on"][data-skin="gbpocket"] #artwork,
html[data-filters="on"][data-skin="virtualboy"] #artwork,
html[data-filters="on"][data-skin="phosphor_green"] #artwork,
html[data-filters="on"][data-skin="phosphor_amber"] #artwork,
html[data-filters="on"][data-skin="cpc"] #artwork,
html[data-filters="on"][data-skin="spectrum"] #artwork {
    opacity: 0.5; /* the background art keeps its colours limited too, so it is dimmed to stay behind the text */
}

/* Game Boy: four greens only, and the pixel grid of the LCD */
html[data-skin="gameboy"] {
    --fx-overlay:
        linear-gradient(rgba(15, 56, 15, 0.22) var(--fx-line, 1px), transparent var(--fx-line, 1px)) 0 0 / 100% var(--fx-cell, 3px),
        linear-gradient(90deg, rgba(15, 56, 15, 0.22) var(--fx-line, 1px), transparent var(--fx-line, 1px)) 0 0 / var(--fx-cell, 3px) 100%;
}

/* Game Boy Pocket: four greys, no backlight */
html[data-skin="gbpocket"] {
    --fx-overlay:
        linear-gradient(rgba(31, 31, 31, 0.14) var(--fx-line, 1px), transparent var(--fx-line, 1px)) 0 0 / 100% var(--fx-cell, 3px),
        linear-gradient(90deg, rgba(31, 31, 31, 0.14) var(--fx-line, 1px), transparent var(--fx-line, 1px)) 0 0 / var(--fx-cell, 3px) 100%;
}

/* Virtual Boy: everything red on black, with the scanning lines of its mirrors */
html[data-skin="virtualboy"] {
    --fx-overlay:
        radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.6) 100%),
        linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.54) 50%, rgba(0, 0, 0, 0)) 0 0 / 100% var(--fx-band, 4px);
}

/* phosphor terminals: glowing text, scanlines, dark corners */
html[data-skin="phosphor_green"] {
    --fx-filter: contrast(1.15) brightness(1.1)
        drop-shadow(0 0 2px rgba(77, 255, 136, 0.7)) drop-shadow(0 0 8px rgba(77, 255, 136, 0.4));
    --fx-overlay:
        radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.5) 100%),
        linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.36) 50%, rgba(0, 0, 0, 0)) 0 0 / 100% var(--fx-band, 4px);
}

html[data-skin="phosphor_amber"] {
    --fx-filter: contrast(1.15) brightness(1.1)
        drop-shadow(0 0 2px rgba(255, 181, 46, 0.7)) drop-shadow(0 0 8px rgba(255, 181, 46, 0.4));
    --fx-overlay:
        radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.5) 100%),
        linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.36) 50%, rgba(0, 0, 0, 0)) 0 0 / 100% var(--fx-band, 4px);
}

/* the options page */
.filter-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.filter-option input {
    margin: 0;
}

.filter-hint {
    display: block;
    margin-top: 0.25rem;
    color: var(--pico-muted-color);
}