/* =====================================================================
   theme.css - site-wide colour and font themes for omni-games.info
   Loaded on every page before any other stylesheet (see header.php).

   HOW IT WORKS
   Every colour and font in the page stylesheets is written like
       color: var(--omni-text, #333);
   The value after the comma is the Modern colour. Modern defines no
   --omni-* tokens, so pages look exactly as they always have, in light
   and dark. A theme defines the tokens below and every page follows.

   The theme script in header.php sets data-skin on <html>:
       modern-light, modern-dark, retro-light (DOS), retro-dark (green screen)

   ADDING A THEME
   1. Copy one of the token blocks below, give it a new data-skin name
      and change the values. Every token should be set.
   2. Add the theme to the switcher in header.php.
   ===================================================================== */

/* ---------------------------------------------------------------------
   TOKEN REFERENCE
   Surfaces    --omni-bg               page background
               --omni-surface          cards, panels, tables
               --omni-surface-alt      table headers, striped rows, sidebars
               --omni-surface-hover    hovered rows and items
               --omni-surface-inverse  dark blocks on a light page (and vice versa)
               --omni-input-bg         form fields
   Text        --omni-text             body text
               --omni-text-muted       secondary text, labels, meta
               --omni-heading          headings
               --omni-text-inverse     text on accent / inverse backgrounds
   Lines       --omni-border, --omni-border-strong
   Accent      --omni-accent, --omni-accent-hover, --omni-accent-soft (tinted panel)
               --omni-accent-alt (purple/pink highlights)
               --omni-link, --omni-link-hover
   Status      --omni-success, --omni-warning, --omni-danger, --omni-info
               and a -bg version of each for tinted message boxes
   Other       --omni-overlay          modal / menu backdrop
               --omni-highlight-bg, --omni-highlight-text   selection bar
   Header bar  --omni-header-bg, --omni-header-text,
               --omni-header-hover-bg, --omni-header-hover-text, --omni-header-accent
   Charts      --omni-chart-text, --omni-chart-grid, --omni-series (comma list)
   Fonts       --omni-font, --omni-font-mono, --omni-font-size-adjust
   --------------------------------------------------------------------- */


/* =====================================================================
   RETRO - DOS (retro-light)
   Blue screen, grey menu bar, yellow headings, cyan links (16-colour EGA)
   ===================================================================== */
html[data-skin='retro-light'] {
    --omni-bg: #0000AA;
    --omni-surface: #0000AA;
    --omni-surface-alt: #0000AA;
    --omni-surface-hover: #000000;
    --omni-surface-inverse: #AAAAAA;
    --omni-input-bg: #000000;

    --omni-text: #FFFFFF;
    --omni-text-muted: #AAAAAA;
    --omni-heading: #FFFF55;
    --omni-text-inverse: #000000;

    --omni-border: #AAAAAA;
    --omni-border-strong: #FFFFFF;

    --omni-accent: #55FFFF;
    --omni-accent-hover: #FFFFFF;
    --omni-accent-soft: #000000;
    --omni-accent-alt: #FF55FF;
    --omni-link: #55FFFF;
    --omni-link-hover: #FFFF55;

    --omni-success: #55FF55;
    --omni-success-bg: #000000;
    --omni-warning: #FFFF55;
    --omni-warning-bg: #000000;
    --omni-danger: #FF5555;
    --omni-danger-bg: #000000;
    --omni-info: #55FFFF;
    --omni-info-bg: #000000;

    --omni-overlay: rgba(0, 0, 0, 0.6);
    --omni-highlight-bg: #00AAAA;
    --omni-highlight-text: #000000;

    /* Header bar - part of the blue screen, cyan highlight like a DOS menu */
    --omni-header-bg: #0000AA;
    --omni-header-text: #FFFFFF;
    --omni-header-hover-bg: #00AAAA;
    --omni-header-hover-text: #000000;
    --omni-header-accent: #FFFF55;

    --omni-chart-text: #AAAAAA;
    --omni-chart-grid: #5555FF;
    --omni-series: #FFFF55, #55FFFF, #FF55FF, #55FF55, #FF5555, #FFFFFF, #AAAAAA, #00AAAA, #AA00AA, #00AA00;

    --omni-font: 'OmniRetro', 'Perfect DOS VGA 437', 'Lucida Console', 'Courier New', monospace;
    --omni-font-mono: 'OmniRetro', 'Perfect DOS VGA 437', 'Lucida Console', 'Courier New', monospace;
    --omni-font-size-adjust: 0.5;
}


/* =====================================================================
   RETRO - GREEN SCREEN (retro-dark)
   Monochrome phosphor: everything is a shade of green
   ===================================================================== */
html[data-skin='retro-dark'] {
    --omni-bg: #000000;
    --omni-surface: #000000;
    --omni-surface-alt: #000000;
    --omni-surface-hover: #0B3B0B;
    --omni-surface-inverse: #33FF33;
    --omni-input-bg: #000000;

    --omni-text: #33FF33;
    --omni-text-muted: #1FA81F;
    --omni-heading: #B6FFB6;
    --omni-text-inverse: #000000;

    --omni-border: #1FA81F;
    --omni-border-strong: #33FF33;

    --omni-accent: #33FF33;
    --omni-accent-hover: #B6FFB6;
    --omni-accent-soft: #062506;
    --omni-accent-alt: #B6FFB6;
    --omni-link: #7CFF7C;
    --omni-link-hover: #B6FFB6;

    /* Monochrome: status colours become brightness levels */
    --omni-success: #33FF33;
    --omni-success-bg: #062506;
    --omni-warning: #B6FFB6;
    --omni-warning-bg: #062506;
    --omni-danger: #DDFFDD;
    --omni-danger-bg: #062506;
    --omni-info: #7CFF7C;
    --omni-info-bg: #062506;

    --omni-overlay: rgba(0, 0, 0, 0.7);
    --omni-highlight-bg: #33FF33;
    --omni-highlight-text: #000000;

    --omni-header-bg: #002800;
    --omni-header-text: #33FF33;
    --omni-header-hover-bg: #33FF33;
    --omni-header-hover-text: #000000;
    --omni-header-accent: #B6FFB6;

    --omni-chart-text: #33FF33;
    --omni-chart-grid: #0F5A0F;
    --omni-series: #33FF33, #B6FFB6, #1FA81F, #7CFF7C, #DDFFDD, #12801F, #5CCB5C, #A8E06A;

    --omni-font: 'OmniRetro', 'Perfect DOS VGA 437', 'Lucida Console', 'Courier New', monospace;
    --omni-font-mono: 'OmniRetro', 'Perfect DOS VGA 437', 'Lucida Console', 'Courier New', monospace;
    --omni-font-size-adjust: 0.5;
}


/* =====================================================================
   SHARED RULES FOR ANY THEMED SKIN (anything except Modern)
   ===================================================================== */
html[data-skin]:not([data-skin^='modern']) body {
    background-color: var(--omni-bg);
    color: var(--omni-text);
    font-family: var(--omni-font);
    font-size-adjust: var(--omni-font-size-adjust, none);
}

/* Form controls don't inherit fonts by default */
html[data-skin]:not([data-skin^='modern']) :is(input, button, select, textarea) {
    font-family: inherit;
}

html[data-skin]:not([data-skin^='modern']) ::selection {
    background: var(--omni-highlight-bg);
    color: var(--omni-highlight-text);
}

html[data-skin]:not([data-skin^='modern']) {
    scrollbar-color: var(--omni-border) var(--omni-bg);
}

/* Plain links with no styling of their own (otherwise browser blue) */
:where(html[data-skin]:not([data-skin^='modern'])) a:where(:not([class])) {
    color: var(--omni-link);
}

/* Header search button sits on the header bar, not the page */
html[data-skin]:not([data-skin^='modern']) header .search-trigger-btn {
    color: var(--omni-header-text);
    border-color: var(--omni-header-text);
}

html[data-skin]:not([data-skin^='modern']) header .search-trigger-btn:hover {
    background: var(--omni-header-hover-bg);
    color: var(--omni-header-hover-text);
    border-color: var(--omni-header-hover-bg);
}


/* =====================================================================
   RETRO-ONLY TOUCHES (both DOS and green screen)
   Shape and font details - no layout changes
   ===================================================================== */

/* Self-hosted pixel font - drop the .woff2 into /fonts/ (falls back to monospace) */
@font-face {
    font-family: 'OmniRetro';
    src: url('/fonts/omni-retro.woff2') format('woff2');
    font-display: swap;
}

html[data-skin^='retro'] body {
    font-synthesis: none;   /* pixel fonts have no bold/italic - don't fake them */
}

/* Font Awesome icons keep their own size */
html[data-skin^='retro'] :is(.fa, .fas, .far, .fab, .fal, .fad) {
    font-size-adjust: none;
}

/* Square, flat boxes */
html[data-skin^='retro'] *,
html[data-skin^='retro'] *::before,
html[data-skin^='retro'] *::after {
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html[data-skin^='retro'] .modal {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Header: double-line rule under the bar, menu panel in screen colours */
html[data-skin^='retro'] header {
    border-bottom: 3px double var(--omni-border);
}

/* Header: menu panel in screen colours, double-line rules */
html[data-skin^='retro'] .dropdown-menu,
html[data-skin^='retro'] .menu-tooltip-bar {
    background-color: var(--omni-bg);
    border-color: var(--omni-border);
}

html[data-skin^='retro'] .menu-section-title {
    border-bottom: 3px double var(--omni-border);
}

html[data-skin^='retro'] .menu-section-title::after {
    display: none;
}

html[data-skin^='retro'] .menu-link:hover {
    border-left-color: var(--omni-heading);
    transform: none;
}

html[data-skin^='retro'] .menu-tooltip-bar {
    border-top: 3px double var(--omni-border);
}

/* Home page hero: swap the photo for the ASCII-art version.
   The photo is hidden and the ASCII art is drawn on its own layer behind the
   overlay and text, scaled the same way (contain, centred). */
html[data-skin^='retro'] .hero-background-image {
    visibility: hidden;
}

html[data-skin^='retro'] .hero-section-unified {
    background: var(--omni-bg);
}

html[data-skin^='retro'] .hero-section-unified::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: url('/images/ascii-art.png') center / contain no-repeat;
}

/* The ASCII art is greyscale, so it is tinted to match each screen.
   DOS: black becomes the blue screen behind it, white stays white */
html[data-skin='retro-light'] .hero-section-unified::before {
    mix-blend-mode: screen;
}

/* Green screen: greys become phosphor green, black stays black */
html[data-skin='retro-dark'] .hero-section-unified::before {
    filter: grayscale(1) sepia(1) hue-rotate(65deg) saturate(6) brightness(1.05);
}

/* Login box: grey dialog with a dark input, like a DOS setup screen */
html[data-skin^='retro'] .modal-content {
    border: 3px double var(--omni-header-text);
}

html[data-skin^='retro'] .modal .form-group input,
html[data-skin^='retro'] .modal .form-group input:focus {
    background-color: var(--omni-input-bg);
    color: var(--omni-text);
    border-color: var(--omni-header-text);
}

html[data-skin='retro-dark'] .kofi-donate-btn svg {
    fill: currentColor;
}

/* Green screen scanlines (purely visual, never catches clicks) */
html[data-skin='retro-dark'] body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2147483647;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0.18) 3px
    );
}

@media print {
    html[data-skin='retro-dark'] body::after {
        display: none;
    }
}