/* ==========================================================
   COLOUR PROFILES
   One block per theme. The site starts on "default"; clicking
   a game switches <html data-theme="..."> to that game's id
   (the ids in scripts/games.js). Every profile currently uses
   the same values - set each one here.
   ========================================================== */

:root,
[data-theme="default"] {
    --bg: #17171a;              /* timeline background */
    --bg-2: #2f2f35;           /* secondary background */
    --panel-bg: #212125;        /* side panel background */
    --panel-text: #e9e6df;      /* side panel text */
    --line: #09af7c;            /* timeline line and tile borders: must stand out */
    --divider: #2e2e34;         /* scrollbar, line under the mobile panel */
    --panel-divider: #6a6a74;   /* line above the side panel footer */
    --year-line: #8d8d98;       /* dashed lines between years */
    --year: #00d48e;            /* year labels */
    --year-shadow: #075c45;     /* hard shadow behind year labels */
    --accent: #e9e6df;          /* play button, selected tile outline */
    --accent-text: #17171a;     /* text on the play button */
    --accent-hover: #00ffaa;    /* play button on hover */
    --accent-edge: #a3a097;       /* play button bottom edge */
    --accent-hover-edge: #09af7c; /* same, on hover */
    --tile-bg: #26262b;         /* placeholder tile background */
    --tile-text: #e9e6df;       /* placeholder tile text */
}

[data-theme="escape-room"] {
    --bg: #0b1a55;
    --bg-2: #163580;
    --panel-bg: #163580;
    --panel-text: #f2f0ea;
    --line: #9cc8fb;
    --divider: #4987dd;
    --panel-divider: #4987dd;
    --year-line: #64a0ef;
    --year: #cbe0ff;
    --year-shadow: #264bb5;
    --accent: #bfddff;
    --accent-text: #060c3a;
    --accent-hover: #cbe0ff;
    --accent-edge: #264bb5;
    --accent-hover-edge: #9cc8fb;
    --tile-bg: #163580;
    --tile-text: #f2f0ea;
    --bubble-color: #cbe0ff;
    --bubble-opacity: 0.7;
}

[data-theme="speedaim"] {
    --bg: #1c2739;
    --bg-2: #385471;
    --panel-bg: #385471;
    --panel-text: #f2f0ea;
    --line: #f59a55;
    --divider: #6f93b8;
    --panel-divider: #a9c6e6;
    --year-line: #6f93b8;
    --year: #f59a55;
    --year-shadow: #385471;
    --accent: #f59a55;
    --accent-text: #1c2739;
    --accent-hover: #ffc49a;
    --accent-edge: #aa5322;
    --accent-hover-edge: #f59a55;
    --tile-bg: #26313d;
    --tile-text: #f2f0ea;
    --target-outer: #ff7f1c;
    --target-middle: #f1f1f1;
    --target-centre: #ff2424;
    --crosshair-color: #00ff00;
    --crosshair-edge: #1c2739;
}

[data-theme="puglys-paintbrush"] {
    --bg: #47372a;
    --bg-2: #27170d;
    --mark-text: #f7ecdb;       /* ET Games mark text, when the panel's text wouldn't show on it */
    --timeline-outline: #f7ecdb; /* selected and focus outlines on the timeline, when the accent wouldn't show */
    --panel-bg: #cfedfc;
    --panel-text: #27170d;
    --line: #f7ecdb;
    --divider: #a98f77;
    --panel-divider: #5f7f92;
    --year-line: #a98f77;
    --year: #cfedfc;
    --year-shadow: #0170ce;
    --accent: #47372a;
    --accent-text: #f7ecdb;
    --accent-hover: #27170d;
    --accent-edge: #27170d;
    --accent-hover-edge: #47372a;
    --tile-bg: #3a2a1e;
    --tile-text: #f7ecdb;
    --paint-color: #ffffff;
    --paint-opacity: 1;
}

[data-theme="isotag"] {
    --bg: #050505;
    --bg-2: #161616;
    --panel-bg: #161616;
    --panel-text: #ffffff;
    --line: #ffffff;
    --divider: #555555;
    --panel-divider: #555555;
    --year-line: #777777;
    --year: #e2ffe1;
    --year-shadow: #03a000;
    --accent: #ffffff;
    --accent-text: #050505;
    --accent-hover: #06ff00;
    --accent-edge: #8a8a8a;
    --accent-hover-edge: #03a000;
    --tile-bg: #161616;
    --tile-text: #ffffff;
}

[data-theme="swgv"] {
    --bg: #17171a;
    --panel-bg: #212125;
    --panel-text: #e9e6df;
    --line: #8d8d98;
    --divider: #2e2e34;
    --panel-divider: #6a6a74;
    --year-line: #8d8d98;
    --year: #b4b4bd;
    --year-shadow: #4b4b53;
    --accent: #e9e6df;
    --accent-text: #17171a;
    --accent-hover: #00ffaa;
    --accent-edge: #a3a097;
    --accent-hover-edge: #09af7c;
    --tile-bg: #26262b;
    --tile-text: #e9e6df;
}

[data-theme="eft-daily"] {
    --bg: #17171a;
    --panel-bg: #212125;
    --panel-text: #e9e6df;
    --line: #8d8d98;
    --divider: #2e2e34;
    --panel-divider: #6a6a74;
    --year-line: #8d8d98;
    --year: #b4b4bd;
    --year-shadow: #4b4b53;
    --accent: #e9e6df;
    --accent-text: #17171a;
    --accent-hover: #00ffaa;
    --accent-edge: #a3a097;
    --accent-hover-edge: #09af7c;
    --tile-bg: #26262b;
    --tile-text: #e9e6df;
}

/* Shared by every theme */
:root {
    --soon-bg: #000000b3;       /* "Coming soon" label background */
    --soon-text: #f2f2f2;       /* "Coming soon" label text */
    --tile-name-bg: #000000a6;  /* game name label on tile art */
    --tile-name-text: #ffffff;  /* game name label text */
    --bounce-colors: #00ffaa, #ffd400, #ff5c7a, #4db8ff, #c58bff, #ff9d3c; /* bouncing logo, in order */
    --bounce-opacity: 0.35;     /* bouncing logo strength, 0 to 1 */

    --ease: 600ms ease-in-out;
    --fade: 180ms ease-in-out;
}

/* ========================================================== */

html, body {
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--panel-text);
    font-family: 'Lato', sans-serif;
    font-weight: 400;
}

button {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    cursor: pointer;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

[hidden] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --ease: 1ms linear;
        --fade: 1ms linear;
    }
}