/* Default light color scheme */
:root {
    --main_bg: rgb(255,255,255);

    --header_color: #555;
    --header_links_color: var(--header_color);
    --header_bg: #f2f2f2;

    --header_control_color:  rgba(0,0,0, 0.80);
    --header_control_bg:     rgba(0, 0, 0, 0.04);
    --header_control_border: rgba(128,128,128,0.75);
    --header_control_border_faded: rgba(128,128,128,0.50);

    --popup_modal_background: rgba(0,0,0,0.3);
    --popup_bg_base: rgb(255,255,255);

    /* Filter styling */
    --filter_reset_bg:            rgba(0,0,0,0.07);
    --filter_reset_bg_hover:      rgba(0,0,0,0.15);
    --filter_reset_text:          rgba(0,0,0,0.60);
    --filter_reset_text_hover:    rgba(0,0,0,0.70);
    --filter_reset_border:        rgba(0,0,0,0.40);
    --filter_control_label_color: var(--header_control_color);

    /* Gallery item styling */
    --item_body_color: #222;
    --item_body_color_light: #606060;

    --item_meta_bg_green:   #a0ffa6; /* light green */
    --item_meta_bg_blue:    #cbebff; /* light blue  */

    /* not used currently */
    --item_meta_bg_grey:    rgba(0, 0, 0, 0.10); /* light grey  */
    --item_meta_bg_pink:    #ffdbef; /* light pink  */
    --item_meta_bg_orange:  rgb(255, 217, 169); /* light orange */
    --item_meta_bg_purple:  rgb(229, 198, 255); /* light purple */

    --item_meta_text:       rgba(0,0,0,0.40);
}


@media (prefers-color-scheme: dark) {
    :root {
        --main_bg: rgb(28,28,28);

        --header_color: rgba(192, 192, 192, 0.70);
        --header_links_color: var(--header_color);
        --header_bg: rgba(128,128,128,0.05);

        --header_control_color:  var(--header_color);
        --header_control_bg:     rgba(0, 0, 0, 0.24);
        --header_control_border: rgba(128,128,128,0.5);
        --header_control_border_faded: rgba(128,128,128,0.25);

        --popup_modal_background: rgba(255,255,255,0.1);
        --popup_bg_base: rgb(32,32,32);

        /* Filter styling */
        --filter_reset_bg:            rgba(255,255,255,0.07);
        --filter_reset_bg_hover:      rgba(255,255,255,0.15);
        --filter_reset_text:          rgba(255,255,255,0.60);
        --filter_reset_text_hover:    rgba(255,255,255,0.70);
        --filter_reset_border:        rgba(255,255,255,0.40);
        --filter_control_label_color: rgba(255,255,255,0.40);

        /* Gallery item styling */
        --item_body_color: rgba(255,255,255,0.60);
        --item_body_color_light: rgba(255,255,255,0.45);

        --item_meta_bg_green:   rgba(68, 255, 80, 0.40);   /* light green */
        --item_meta_bg_blue:    rgba(92, 192, 255, 0.40);  /* light blue  */

        /* not used currently */
        --item_meta_bg_grey:    rgba(192, 192, 192, 0.50); /* light grey  */
        --item_meta_bg_pink:    rgba(255, 101, 186, 0.40); /* light pink  */
        --item_meta_bg_orange:  rgba(255, 168, 58, 0.4); /* light orange */
        --item_meta_bg_purple:  rgb(151, 97, 196, 0.70);   /* light purple */

        --item_meta_text: rgba(0,0,0,0.70);
    }
}

body {
    background: var(--main_bg);
    margin: 0 auto;
    font-family: sans-serif;

    --data_area_bg_color:    var(--header_bg);
    --data_area_title_color: var(--header_color);
    --data_area_border:      var(--header_control_border_faded);

    --popup_bg_color:    var(--header_bg);
    --popup_title_color: var(--header_color);
    --popup_border:      var(--header_control_border_faded);
}


select, checkbox, input {
    color: var(--header_control_color);
    background: var(--header_control_bg);
    background-image: none;
    border: 1px solid var(--header_control_border);
    border-radius: 3px;
}


/* These are attached to body based on javascript attempted mobile/desktop detection */
.desktop {
  font-size: calc(12px + 0.390625vw);
}
.mobile {
  font-size: calc(35px + 0.390625vw);

    /* Scale up checkbox ui elements on mobile so they aren't tiny*/
    /* Fix for lack of label spacing next to checkbox on mobile */
    input[type=checkbox] {
        transform: scale(2.75);
        vertical-align: 0.5rem;
        margin-right: 0.25em;
    }
}


.header {
    /*box-shadow: 0 3px 5px rgba(0,0,0,.02),0 0 2px rgba(0,0,0,.05),0 1px 4px rgba(0,0,0,.08);*/
    box-shadow: 0 0.5em 2em rgba(0,0,0,0.15);
    background-color: var(--header_bg);
    padding: 1em;
    margin-bottom: 2em;
}

.topbanner {
    /*width: 50%;*/
    font-weight: normal;
    font-family: "Liberation Sans", "Nimbus Sans", Helvetica, "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif;
    color: var(--header_color);
    margin-bottom: 1em;
}
.topbanner > h1 {
    font-weight: normal;
}
.topbanner > a {
    font-family: "Liberation Sans", "Nimbus Sans", Helvetica, "Helvetica Neue", "Trebuchet MS", Verdana, sans-serif;
    color: var(--header_links_color);
}




.gameTitle {
    font-weight: bold;
    color: var(--item_body_color_light);
    /*color: var(--item_body_color);*/
}

.developer,
.cheatEffect,
.itemYear,
.inputSequence,
.whenToInput,
.activationIndicator {
    font-weight: normal;
    font-size: .875em;
    color: var(--item_body_color_light);
}

.revealedHeading {
    font-weight: bold;
}

.itemLinks > a {
    margin-right: 0.5em;
    font-size: 0.875em;
    color: var(--item_body_color_light);
}

.itemMeta > span {
    display: inline-block;
    margin: 0.15em 0.5em 0.15em 0;  /* top | right | bottom | left */
    font-size: 0.875em;
    border-radius: 0.25em;
    padding: 0.15em;
    cursor: pointer;
}

.itemMetaConsoles {
    color: var(--item_meta_text);
    background: var(--item_meta_bg_green);
}
.itemMetaCheatTypes {
    color: var(--item_meta_text);
    background: var(--item_meta_bg_blue);
}
.itemMetaDetails {
    color: var(--item_meta_text);
    background: var(--item_meta_bg_grey);
}



/* *** Form controls ***  */

.filter_container {
    display: flex;
    flex-wrap: wrap;

    column-gap: 1em;
    row-gap: 2em;
}

.checkbox_label {
    white-space:nowrap;
    color: var(--filter_control_label_color);
}


/* Fix input elements scaling with body font size */
input,
select {
    font-size:inherit;
/*
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
*/
}


.filter_textsearch {
    color: var(--header_color);
}

.filter_span_button {
    text-align: center;
    display: inline-block;
    margin: 0.25em 0.10em 0 0;  /* top | right | bottom | left */
    font-size: 0.875em;
    border-radius: 0.25em;
    padding: 0.15em;
    color: var(--filter_reset_text);
    background-color: var(--filter_reset_bg);
    border: 1px solid var(--filter_reset_border);
    /*min-width: 5em;*/
    cursor: pointer;
}

span.filter_span_button:hover {
    background-color: var(--filter_reset_bg_hover);
    color: var(--filter_reset_text_hover);
}


/* Responsive Table formatting */


table {
    border: 1px solid var(--data_area_border);
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
}

table caption {
    /*font-size: 1.5em;*/
    margin: .5em 0 .75em;
}

table tr {
    color: var(--header_color);
    background-color: var(--data_area_bg_color);
    border: 1px solid var(--data_area_border);
    padding: .35em;
}

table th,
table td {
    padding: .625em;
}

table th {
    /*font-size: .85em;*/
    /*letter-spacing: .1em;*/
    text-transform: uppercase;
    text-align: left;
}

@media screen and (max-width: 1024px) {
    table {
        border: 0;
    }

    table caption {
        /*font-size: 1.3em;*/
    }

    table thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    table tr {
        border-bottom: 3px solid var(--data_area_border);
        display: block;
        margin-bottom: .625em;
    }

    table td {
        border-bottom: 1px solid var(--data_area_border);
        display: block;
        /*font-size: .8em;*/
        text-align: right;
    }

    table td::before {
        /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
    }

    table td:last-child {
        border-bottom: 0;
    }
}


/* Modal popup */

.modal-backdrop {    
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0; top: 0;
    height: 100vh; width: 100vw;
    background: var(--popup_modal_background);
    align-items: center;
    justify-content: center;
}
.modal-backdrop.active {
    display: flex;
}
.modal-dialog {
    color: var(--popup_title_color);
    background: var(--popup_bg_base);
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 6px 40px rgba(0,0,0,0.16);
    min-width: 260px;
    max-width: 90vw;
    position: relative;
    animation: fadeIn 0.2s;
}
.modal-close {
    color: var(--popup_title_color);
    position: absolute;
    top: 0.5rem; left: 1rem;
    background: none;
    border: none;
    font-size: 2.0em;
    cursor: pointer;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-30px);}
    to   { opacity: 1; transform: none;}
}