.game-card {
    width: 460px;
    height: 215px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-color: black;
}

.game-card .warning {
    position: absolute;
    right: 10px;
    top: 0;
    color: red;
    font-weight: bold;
    display: none;
}

body {
    width: 100%;
    background-color: black;
    color: #BCBCBC;
}

#menu, #filters, .vertical-arrow {
    width: 460px;
}

#menu {
    z-index: 1;
}

#main-content {
    width: 100%;
}

#game-tabs {
    background-size: cover;
    background-origin: content-box;
    margin-left: 460px;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    padding-right: 460px;
}

#filters {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(26, 26, 25, 0.95);
    z-index: 999;
    max-height: 100vh;
    overflow-y: auto;
}

#filters-collapsible-area {
    display: none;
}

#game-cards, .up-arrow {
    margin-top: 50px;
}

.text-filter-wrap {
    position: relative;
    width: 95%;
}

#text-filter {
    width: 100%;
    padding-right: 24px;
    box-sizing: border-box;
}

#text-filter-clear {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #888;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    display: none;
}

#text-filter-clear:hover {
    color: #000;
}

.text-filter-scopes {
    display: flex;
    gap: 14px;
    margin-top: 6px;
    /* Override the .filter-group 70% font shrink so the labels are readable. */
    font-size: 14px;
    color: #d0d0d0;
}

.text-filter-scopes label {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}

.text-filter-scopes input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0 6px 0 0;
    cursor: pointer;
}

.game-info, #tv {
    width: 100%;
    display: none;
}

#loading-screen {
    /*display: none;*/
    background-image: url("../img/lemmingsloading.gif");
    background-color: black;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

#tv {
    position: relative;
    padding: 5px;
}

#tv img, #tv video {
    width: 50%;
    vertical-align: top;
}

#tv img {
    cursor: pointer;
}

.tags {
}

.tag {
    padding: 5px;
}

/* IGDB keywords that pass the blacklist but are not in the whitelist —
   highlighted so a new keyword is easy to spot and sort into one of the
   files at game_data/igdb/keyword_{whitelist,blacklist}.txt. */
.tag.igdb-keyword-pending {
    background-color: #979797;
}

/* IGDB keyword that the admin just blacklisted from the tab UI. The server
   filter strips it on the next page load, so this style only appears
   between the click and the next reload — it lets the admin spot a wrong
   click and undo it before the tag disappears. */
.tag.igdb-keyword-blacklisted {
    background-color: #6b1f1f;
    color: #ffd2d2;
    text-decoration: line-through;
}

/* Tag pill that matched the active text filter. Two-class selector so we
   outweigh Bootstrap's .badge.badge-light background. */
.tag.tag-search-match {
    background-color: #f5c518;
    color: #1a1a1a;
}

/* Substring highlight inside the game title and notes tooltip. */
mark.search-match {
    background-color: #f5c518;
    color: #1a1a1a;
    padding: 0 1px;
    border-radius: 2px;
}

/* Wrapper around each IGDB tag that hosts the admin hover actions. Stays
   inline-block so the absolute-positioned popover anchors to the tag. */
.tag-wrap {
    position: relative;
    display: inline-block;
}

/* Hover popover with the three classification buttons. Hidden by default,
   absolute-positioned so showing it does not shift the surrounding tags.
   Anchored below the tag and centered, so it never clips off the right
   edge of the panel for the rightmost tags. The top padding bridges the
   visual gap to the tag so the cursor stays inside `.tag-actions` while
   moving from the tag down onto the buttons (no hover flicker). */
.tag-actions {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.9);
    padding: 9px 8px 5px;
    border-radius: 4px;
    z-index: 10;
}

.tag-wrap:hover .tag-actions {
    display: inline-block;
}

.tag-action {
    background: none;
    color: #eee;
    border: 1px solid #888;
    border-radius: 3px;
    padding: 4px 10px;
    margin: 0 2px;
    cursor: pointer;
    font-size: 105%;
    line-height: 1.2;
}

.tag-action:hover {
    background-color: #333;
    border-color: #ccc;
}

/* IGDB tags can balloon past 50 entries on some games, which would push the
   side panel taller than the viewport. Past the first 20, .igdb-tag-extra
   tags stay rendered (so admin actions still work once expanded) but are
   hidden until the user clicks the toggle below. */
.igdb-tags-section.collapsed .igdb-tag-extra {
    display: none;
}

.igdb-tags-toggle {
    background: none;
    border: 1px solid #888;
    color: #ccc;
    border-radius: 4px;
    padding: 1px 8px;
    font-size: 90%;
    cursor: pointer;
    margin-left: 4px;
    line-height: 1.5;
}

.igdb-tags-toggle:hover {
    background-color: #333;
    border-color: #ccc;
    color: #fff;
}

.game-notes {
    cursor: help;
    position: relative;
    display: inline-block;
    font-size: 50%;
    vertical-align: middle;
}

.game-notes .tooltip-text {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    cursor: auto;
    background-color: #000;
    color: #fff;
    padding: 1em;
    border-radius: 6px;
    z-index: 100;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.4;
    width: max-content;
    max-width: 400px;
    white-space: normal;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.game-notes .tooltip-text a {
    color: #6cf;
}

.game-notes:hover .tooltip-text {
    display: block;
}

.metascore {
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.95), 0 1px 0 rgba(0, 0, 0, 0.8);
    border-radius: 7px;
    padding: 2px 6px;
    margin-top: 7px;
}

.metascore a,
.metascore a:link,
.metascore a:visited,
.metascore a:hover,
.metascore a:active {
    color: #fff;
    text-decoration: none;
}

.ratings {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.platform-icon {
    width: 25px;
    vertical-align: middle;
}

.platform-link:hover {
    text-decoration: none;
}

.controller-icon {
    height: 25px;
    width: 25px;
    vertical-align: middle;
    margin-left: 4px;
}

/* Small dates/times strip living inline at the right of the title row.
   Drops back to body-sized text so the h2 heading style does not blow it up. */
.tab-meta {
    font-size: 1rem;
    font-weight: normal;
    color: #c9c9c9;
    margin-left: 10px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Small dropdown next to the game title that lists the other store URLs
   (Steam / Epic / GOG / IGDB) the title itself does not already point at. */
.external-links {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 50%;
    font-weight: normal;
}

.external-links-toggle {
    background: none;
    border: none;
    color: #ccc;
    padding: 0;
    cursor: pointer;
    line-height: 1;
    font-size: 170%;
}

.external-links-toggle:hover {
    color: #fff;
}

.external-links-toggle:focus {
    outline: none;
}

.external-links-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin: 2px 0 0;
    padding: 4px 0;
    list-style: none;
    background-color: #000;
    border: 1px solid #555;
    border-radius: 4px;
    z-index: 100;
    min-width: 120px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.external-links.open .external-links-menu {
    display: block;
}

.external-links-menu li {
    padding: 0;
}

.external-links-menu li a {
    display: block;
    padding: 5px 12px;
    color: #ddd;
    text-decoration: none;
    white-space: nowrap;
}

.external-links-menu li a:hover {
    background-color: #2c3e50;
    color: #fff;
    text-decoration: none;
}

#tags legend {
    font-weight: bold;
}

.thumbnails img:hover, #tv img:hover {
    opacity: 0.8;
}

.game-card:not(.active) {
    opacity: 0.6;
}

.game-card.active, .thumbnails img.active {
    /*box-shadow: inset 0 30px 40px rgba(255,0,0,1);*/
    box-shadow: inset 0 0 40px 20px rgba(22, 150, 255, 0.7);
}

.game-card:hover {
    opacity: 1.0;
}

.thumbnail-container {
    overflow-x: scroll;
}

.thumbnails {
    white-space: nowrap;
    list-style: none;
    margin: 0;
}

.thumbnails li {
    display: inline-block;
}

.thumbnails img {
    display: block;
    padding: 2px;
    max-height: 150px;
    width: auto;
    cursor: pointer;
}

.main-info, .side-info {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    padding: 0 5px;
    box-sizing: border-box;
}

.show-description-btn {
    margin-top: 8px;
    padding: 4px 12px;
    background-color: #2c3e50;
    color: #fff;
    border: 1px solid #4a6278;
    border-radius: 4px;
    cursor: pointer;
    font-size: 90%;
}

.show-description-btn:hover {
    background-color: #3a526a;
}

.description-modal-content {
    display: flex;
    flex-direction: column;
    background-color: rgba(20, 20, 20, 0.97);
    color: #ddd;
    cursor: auto;
}

.description-modal-body {
    /* flex:1 + min-height:0 lets the body shrink inside the flex parent so
       overflow-y:auto actually clips long descriptions instead of pushing
       the modal past the viewport. */
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    text-align: left;
    overflow-y: auto;
    padding: 20px 40px;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.5;
}

.description-modal-body img {
    max-width: 100%;
    height: auto;
}

.highlight {
    color: #f44;
    font-weight: bold;
}

.free {
    color: #0b0;
}

.card-title {
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.80);
    display: inline-block;
    border-radius: 7px;
}

.main-info a {
    color: #838383;
}

.card-body {
    padding: 5px;
}

.videos {
    display: none;
}

#carouselExampleIndicators {
    width: 45%;
    display: inline-block;
}

.carousel-control-prev, .carousel-control-next {
    height: 80%;
}

.carousel-caption {
    top: 30px;
    bottom: auto;
}

.row {
    position: relative
}

.filter-group, .row {
    margin: 0 10px 10px 10px;
    /*margin: 10px;*/
}

.filter-group {
    font-size: 70%;
    width: 95%;
}

.filter-group h5 {
    font-size: 115%;
    color: #838383;
}

.filter-group label {
    cursor: pointer;
}

.filter {
    display: inline-block;
    margin: 0 3px 3px 0;
    padding: 2px 5px;

    user-select: none;
    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

.filter[data-state=off] {
    background-color: #424242;
}

.filter[data-state=and] {
    background-color: #007ee9;
}

.filter[data-state=or] {
    background-color: #009378;
}

.filter[data-state=not] {
    background-color: #940006;
}

.modal-dialog {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
}

.modal-header {
    border-bottom: 1px solid #a9acaf;
}

.modal-content {
    height: 100%;
    width: 100%;
    border-radius: 0;
    background-color: rgba(71, 71, 71, 0.85);
    cursor: pointer;
}

.modal-body {
    text-align: center;
}

#screenshot-modal img {
    max-width: 100%;
}

.navigation-arrow {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navigation-arrow:hover {
    color: orange;
    background-color: rgba(255, 255, 255, 0.1);
}

.vertical-arrow {
    height: 50px;
    font-size: 150%;
}

.vertical-arrow, .screenshot-arrow {
    position: fixed;
}

.carousel-arrow {
    position: absolute;
    width: 5%;
    font-size: 300%;
    height: 150px;
}

.screenshot-arrow {
    width: 15%;
    height: 100%;
    font-size: 1000%;
}

.up-arrow {
    top: 0;
    left: 0;
}

.down-arrow {
    bottom: 0;
    left: 0;
}

.left-arrow {
    top: 0;
    left: 0;
}

.right-arrow {
    top: 0;
    right: 0;
}