:root {
    /* Brand accent. Default is the GamesGraph steel-blue; ReelsGraph overrides
       these in wwwroot-movies/css/theme.css (loaded after this file). */
    --brand-link: #88bbee;
    --brand-link-hover: #def;
    --brand-accent-rgb: 136, 187, 238;
    --brand-selection-rgb: 64, 96, 160;

    /* "info" doubles as the app's selected / active accent. Re-map Bootstrap's
       info onto the brand so .text-info / .bg-info / .border-info follow it. */
    --brand-info: #22ddff;
    --brand-info-rgb: 34, 221, 255;
    --bs-info: var(--brand-info);
    --bs-info-rgb: var(--brand-info-rgb);

    --section-highlight-bg: rgba(var(--brand-info-rgb), 0.05);
    --page-background-overlays: radial-gradient(circle at 20% 20%, rgba(90, 125, 185, 0.28), transparent 58%), linear-gradient(120deg, rgba(12, 16, 24, 0.6), rgba(12, 16, 24, 0.82));
    --page-background-filter: saturate(0.75) brightness(0.91) contrast(1.10);
    --page-background-position-x: 50%;
    --page-background-zoom: 1;

    /* Cover/poster box ratio. Default 3:4 matches IGDB game covers (264x352);
       wwwroot-movies/css/theme.css overrides to 2:3 for TMDB posters (500x750). */
    --cover-ratio: 3 / 4;
}

/* Media cover thumbnails. Anchor exactly one dimension (height in list rows,
   width in grids); the other follows the media-aware --cover-ratio above, and
   object-fit guards against the odd off-ratio source image. */
.media-cover {
    aspect-ratio: var(--cover-ratio);
    object-fit: cover;
}

/* Prevent Bootstrap's scrollbar-compensation from shifting fixed-top navbar/content when a modal opens */
body.modal-open { overflow: auto !important; padding-right: 0 !important; }
body.modal-open .fixed-top { padding-right: 0 !important; }

html {
    overflow-y: scroll;
    /* Site is dark for everyone; declare it so the browser renders native chrome
       (scrollbars, select popups, date pickers, etc.) in dark mode from the first
       paint frame. Does not interact with the user's OS dark-mode preference. */
    color-scheme: dark;
}

body {
    padding-top: 62px;
    font-size:100%;
    overflow-x: hidden;
    background-color: #1B1B1E;
    color: #ddd;
}

body.navbar-hidden {
    padding-top: 0;
}

.app-body {
    position: relative;
}

.app-body .page-background {
    position: fixed;
    inset: 0;
    background-image: var(--page-background-overlays, radial-gradient(circle at 20% 20%, rgba(90, 125, 185, 0.28), transparent 58%), linear-gradient(120deg, rgba(12, 16, 24, 0.6), rgba(12, 16, 24, 0.82))), var(--page-background-image);
    background-size: var(--page-background-size, cover);
    background-position: var(--page-background-position-x, 50%) center;
    background-repeat: no-repeat;
    background-blend-mode: screen, multiply, normal;
    filter: var(--page-background-filter, saturate(0.75) brightness(0.91) contrast(1.10));
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
    transform-origin: var(--page-background-position-x, 50%) center;
    transform: scale(var(--page-background-zoom, 1));
}

.profile-background-preview {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid #444;
    box-shadow: 3px 3px black;
    background-color: #10121a;
    aspect-ratio: 16 / 9;
    width: 100%;
}

/* Search Dropdown Styles */
.search-results-dropdown {
    background-color: #222;
    border: 1px solid #444;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    animation: fadeIn 0.2s ease-in-out;
    width: 400px;
    max-width: 90vw;
}

.search-results-dropdown.is-navbar {
    right: auto !important;
    left: -200px !important;
    transform: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-results-content {
    overflow-y: auto;
}

.search-results-content::-webkit-scrollbar {
    width: 6px;
}

.search-results-content::-webkit-scrollbar-track {
    background: #2d2d30;
}

.search-results-content::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 3px;
}

.search-results-content::-webkit-scrollbar-thumb:hover {
    background: #777;
}

.updates-sidebar-scrollable {
    scrollbar-width: thin;
    scrollbar-color: #478 #16161a;
}

.updates-sidebar-scrollable::-webkit-scrollbar {
    width: 8px;
}

.updates-sidebar-scrollable::-webkit-scrollbar-track {
    background: #16161a;
    border-left: 1px solid #26262c;
}

.updates-sidebar-scrollable::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #589, #457);
    border-radius: 4px;
    border: 1px solid #0f1118;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
}

.updates-sidebar-scrollable::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #69a, #568);
}

.search-result-item {
    transition: all 0.2s ease;
    border-bottom: 1px solid #444;
    text-align: left;
}

.search-result-item .flex-grow-1 {
    text-align: left;
    overflow: hidden;
}

.search-result-item .fw-bold {
    text-align: left;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover,
.search-result-item.selected {
    background-color: #444 !important;
    text-decoration: none;
}

.search-section-header {
    border-bottom: 1px solid #444;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-footer {
    border-top: 1px solid #444;
}

/* Aggregate-entity pill links (creators, actors, franchises, tag combos) shown
   above the title results on the full /search page. */
.search-chip-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}

.search-chip-label {
    flex: 0 0 auto;
    min-width: 5.5rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.2rem 0.7rem;
    border: 1px solid #444;
    border-radius: 999px;
    font-size: 1.1rem;
    color: #ddd;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.search-chip:hover {
    background-color: #444;
    border-color: #666;
    color: #fff;
    text-decoration: none;
}

.search-chip-count {
    font-size: 1rem;
    opacity: 0.6;
}

/* Softer highlight inside the pills - the larger pill text made the standard
   .search-mark blue too intense here. Title rows keep the original strength. */
.search-chip .search-mark {
    background-color: rgba(var(--brand-selection-rgb), 0.3);
}

/* HTMX Indicator */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline;
}

.htmx-request.htmx-indicator {
    display: inline;
}

.steam-queue-spinner {
    display: none;
}

.steam-queue-queued .steam-queue-spinner {
    display: inline-flex;
}

/* When the search input is focused, elevate the dropdown and indicator.
   #search-results is a sibling of #searchForm (not of the input),
   so use :has() to detect focus within the form. */
#searchForm:has(#searchInput:focus) ~ #search-results {
    z-index: 1051;
}
#searchInput:focus ~ #search-indicator {
    z-index: 1051;
}

/* Ensure search container doesn't overflow */
.navbar-nav .position-relative {
    overflow: visible;
}

/* Keep navbar icons and labels on a single line */
.navbar .nav-link,
.navbar .dropdown-item,
.navbar .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.05rem;
    white-space: nowrap;
    min-width: 0;
}

.navbar .dropdown-item {
    width: 100%;
}

.navbar .nav-link i,
.navbar .dropdown-item i {
    flex-shrink: 0;
}

/* Prevent horizontal scroll from search dropdown */
.search-results-dropdown {
    max-width: 400px;
    min-width: 300px;
}

/* Handle viewport edge cases */
@media (max-width: 991.98px) {
    .search-results-dropdown.is-navbar {
        right: -50px !important;
        max-width: 320px;
        min-width: 280px;
    }

/* Collapsed navbar: grid layout with centered text */
    #navbar .navbar-nav.order-1 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.25rem 0.5rem;
        width: 100%;
        padding: 0.5rem 0;
    }

    #navbar .navbar-nav.order-1 > li {
        justify-content: center;
        text-align: center;
    }

    /* Center only top-level nav links, not dropdown menu items */
    #navbar .navbar-nav.order-1 > li > .nav-link,
    #navbar .navbar-nav.order-1 > .nav-item > .nav-link {
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    /* Ensure dropdown toggles also center properly */
    #navbar .navbar-nav.order-1 > li > .dropdown-toggle,
    #navbar .navbar-nav.order-1 > .nav-item > .dropdown-toggle {
        justify-content: center;
    }

    /* Keep dropdown menu items left-aligned */
    #navbar .navbar-nav.order-1 .dropdown-menu .dropdown-item {
        justify-content: flex-start;
        text-align: left;
    }

    /* Search bar section: integrate into grid flow */
    #navbar .navbar-nav.order-2 {
        display: contents;
    }

    #navbar .navbar-nav.order-2 > li {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #navbar .navbar-nav.order-2 #searchForm {
        width: 100%;
        max-width: 200px;
        justify-content: center;
    }

    #navbar .navbar-nav.order-2 #searchInput {
        flex: 1 1 auto;
        width: 100% !important;
        max-width: none;
    }

    /* Make the flex container that holds both ULs behave as a grid */
    #navbar .d-flex.flex-column {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.25rem 0.5rem;
        width: 100%;
        padding: 0.5rem 0 1rem 0;
    }

    #navbar .d-flex.flex-column > .navbar-nav.order-1 {
        display: contents;
    }

    #navbar .d-flex.flex-column > .navbar-nav.order-2 {
        display: contents;
    }
}

/* Collapsed navbar: 3 columns on small screens (≥576px) */
@media (min-width: 576px) and (max-width: 991.98px) {
    #navbar .d-flex.flex-column {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Collapsed navbar: 4 columns on medium screens (≥768px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    #navbar .d-flex.flex-column {
        grid-template-columns: repeat(4, 1fr);
    }
}

.profile-background-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--page-background-overlays, radial-gradient(circle at 20% 20%, rgba(90, 125, 185, 0.28), transparent 58%), linear-gradient(120deg, rgba(12, 16, 24, 0.6), rgba(12, 16, 24, 0.82))), var(--page-background-image);
    background-size: cover;
    background-position: var(--page-background-position-x, 50%) center;
    background-repeat: no-repeat;
    background-blend-mode: screen, multiply, normal;
    filter: var(--page-background-filter, saturate(0.75) brightness(0.91) contrast(1.10));
    z-index: 0;
    opacity: 0.45;
    transform-origin: var(--page-background-position-x, 50%) center;
    transform: scale(var(--page-background-zoom, 1));
}

.profile-background-preview-grid {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    flex-wrap: wrap;
}

.profile-background-preview-column {
    flex: 1 1 320px;
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-background-preview-column-mobile {
    flex: 0 0 260px;
    max-width: 320px;
}

.profile-background-preview {
    width: 100%;
}

.profile-background-preview-mobile {
    aspect-ratio: 9 / 20;
}

.profile-background-preview-label {
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.6);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #c5ccdd;
    z-index: 1;
    pointer-events: none;
}

.profile-background-actions {
    border: 1px solid rgba(56, 62, 76, 0.75);
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(3, 3, 3, 0.4), 3px 3px 0 rgba(0, 0, 0, 0.55);
    background-color: transparent;
    padding: 1rem;
}

@media (max-width: 991.98px) {
    .profile-background-preview-grid {
        flex-direction: column;
    }

    .profile-background-preview-grid .profile-background-preview,
    .profile-background-preview-column,
    .profile-background-preview-column-mobile {
        width: 100%;
        max-width: none;
        flex: 1 1 auto;
    }
}

.profile-background-controls {
    border: 1px solid rgba(56, 62, 76, 0.75);
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(3, 3, 3, 0.4), 3px 3px 0 rgba(0, 0, 0, 0.55);
    background-color: transparent;
}

.profile-background-controls .form-range {
    accent-color: #6d7fa4;
}

.profile-background-controls .form-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background-color: rgba(52, 60, 78, 0.85);
}

.profile-background-controls .form-range::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border-radius: 50%;
    border: 1px solid rgba(18, 20, 28, 0.85);
    background-color: #596786;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

.profile-background-controls .form-range::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background-color: rgba(52, 60, 78, 0.85);
}

.profile-background-controls .form-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(18, 20, 28, 0.85);
    background-color: #596786;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

.profile-background-controls .form-text {
    color: #9098ac;
}

.app-body .page-shell {
    position: relative;
    z-index: 1;
}

.offcanvas {
    background-color: #1B1B1E;
    color: #ddd;
}

.search-mark {
    background-color: rgba(var(--brand-selection-rgb), 0.5);
    padding: 2px 0;
    color: #fff;
}

.website-logo {
    width: 40px;
    height: 40px;
    margin-left: 4px;
    position: relative;
    scale: 1.35;
    top: -4px;
}

.body-content {
    padding-top: 15px;
}

a, a:hover {
    text-decoration: none;
}
a {
    color: var(--brand-link);
}
a:hover, .a:active, a:focus {
    color: var(--brand-link-hover);
}
.btn.btn-link {
    color: var(--brand-link);
}
.btn.btn-link:hover, .btn.btn-link:active, .btn.btn-link:focus {
    color: var(--brand-link-hover);
}

.nav-link {
    color: var(--brand-link);
    padding-bottom: 0;
}
.nav-link:hover, .nav-link:active, .nav-link:focus  {
    color: var(--brand-link-hover);
    padding-bottom: 0;
}
/* Bootstrap 5.3 sets .navbar-nav .show > .nav-link to --bs-navbar-active-color
   (black on light theme) when a dropdown is open. Override so the toggle keeps
   its regular link color while the menu is shown. */
.navbar-nav .show > .nav-link,
.navbar-nav .nav-link.show {
    color: var(--brand-link);
}
.navbar-nav .show > .nav-link:hover,
.navbar-nav .nav-link.show:hover {
    color: var(--brand-link-hover);
}

.link-color {
    color: var(--brand-link);
}
.link-color:hover, .link-color:active, .link-color:focus {
    color: var(--brand-link-hover);
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    display: inline-block;
    background-size: 100% 100%;
    height: 60px !important;
    width: 60px !important;
}

.carousel-control-prev-icon {
    margin-left: -30%;
}

.carousel-control-next-icon {
    margin-right: -30%;
}

.btn-rating-discovery {
    padding: 4px 0;
    margin: 0 2px;
}

.btn-playlist-discovery {
    padding: 4px 20px;
    margin-right: 4px;
}

.btn-rating-quick-game {
    padding: 4px 0;
}

.btn-rating-quick-dlc {
    padding: 4px 0;
}

.fa-gamepad, .fa-steam, .fa-xbox, .fa-eye, .fa-tags {
    opacity: 0.85;
}

.fa-history, .fa-eye, .fa-eye-slash {
    opacity: 0.5;
}

.alert {
    border: 1px solid;
}

.preference-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 18px;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.preference-slider:hover {
    opacity: 1;
}

.preference-slider::-webkit-slider-thumb {
    border: solid black 1px;
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #2288ee;
    cursor: pointer;
}

.preference-slider::-moz-range-thumb {
    border: solid black 1px;
    width: 20px;
    height: 20px;
    background: #2288ee;
    cursor: pointer;
}

.btn-close-realigned {
    position: relative;
    top: -4px;
    right: -1px;
}

.border-rounded {
    border-radius: 100%;
}

.standard-popover {
    --bs-popover-header-color: #000;

    /*--bs-popover-font-size:                 --bs-font-size;*/
    /*--bs-popover-bg:                        #222;*/
    /*--bs-popover-max-width:                 300px;*/
    /*--bs-popover-border-width:              2px;*/
    /*--bs-popover-border-color:              rgba(#000, .2);*/
    /*--bs-popover-border-radius:             --bs-border-radius-lg;*/
    /*--bs-popover-inner-border-radius:       subtract(--bs-popover-border-radius, --bs-popover-border-width);*/
    /*--bs-popover-box-shadow:                --bs-box-shadow;*/
    /*--bs-popover-header-bg:                 shade-color(--bs-popover-bg, 6%);*/
    /*--bs-popover-header-color:              #fff;*/
    /*--bs-popover-header-padding-y:          .5rem;*/
    /*--bs-popover-header-padding-x:          .5rem;*/
    /*--bs-popover-body-color:                #222;*/
    /*--bs-popover-body-padding-y:            .5rem;*/
    /*--bs-popover-body-padding-x:            .5rem;*/
    /*--bs-popover-arrow-width:               1rem;*/
    /*--bs-popover-arrow-height:              .5rem;*/
    /*--bs-popover-arrow-color:               --bs-popover-bg;*/
    /*--bs-popover-arrow-outer-color:         fade-in(--bs-popover-border-color, .05);*/
}

.opaque-80 {
    opacity:0.8;
    filter:alpha(opacity=80);
}
.opaque-80:hover {
    opacity:1.0;
    filter:alpha(opacity=100);
}

/* Profile avatar upload control matches dark theme */
#avatarChooser {
    background-color: #1f1f23;
    color: #ddd;
    border-color: #444;
}

#avatarChooser::file-selector-button,
#avatarChooser::-webkit-file-upload-button {
    background-color: #292933;
    color: #ddd;
    border: 1px solid #555;
    padding: 0.375rem 0.75rem;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

#avatarChooser:hover::file-selector-button,
#avatarChooser:focus-visible::file-selector-button {
    background-color: #3a3a45;
    color: #fff;
}

#avatarChooser:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-accent-rgb), 0.2);
}

.achievement-unlocked {
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.achievement-unlocked:hover {
    opacity:1.0;
    filter:alpha(opacity=100);
}

.achievement-locked {
    opacity: 0.2;
    filter: alpha(opacity=20);
}

.achievement-unknown {
    opacity: 0.5;
    filter: alpha(opacity=20);
}

.achievement-unknown:hover {
    opacity: 0.8;
    filter: alpha(opacity=20);
}

.achievement-locked:hover {
    opacity:0.8;
    filter:alpha(opacity=80);
}

.debug {
    border: 1px red solid;
}

.demo-wrap {
    overflow: hidden;
    position: relative;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.demo-bg-vertical {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    opacity: 0.2;
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

.demo-bg-horizontal {
    position: absolute;
    left: 0;
    top: 0;
    height: auto;
    width: 100%;
}

.demo-content {
    position: relative;
}

.anchor {
    position: absolute;
    transform: translateY(-10vh);
}

.text-stat {
    color: #aa8;
}

.transparent-on-right {
    -webkit-mask-image:-webkit-gradient(linear, left bottom, right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
    mask-image: linear-gradient(to right top, rgba(0,0,0,1), rgba(0,0,0,0));
}

.transparent-on-top {
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
}


button {
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
}

.hover-opaque:hover {
    opacity: 1.0;
}
.hover-opaque {
    opacity: 0.75;
}

mark {
    background-color: #444;
    color: #fff;
    padding: 0px 2px;
}

.text-main {
    color: #ddd !important;
}

.text-playing {
    color: #c9f !important;
}

.form-check-input:checked {
    background-color: #369;
    border: 0px;
}

td {
    color: #ddd;
}

.form-control {
    background-color: rgba(34, 34, 34, 0.65);
    color: #ddd;
    border-color: #444;
    backdrop-filter: blur(4px);
}

.form-control::placeholder {
    color: #888;
    opacity: 0.85;
}

.form-control:focus {
    color: #ddd;
    background-color: rgba(39, 39, 39, 0.75);
    backdrop-filter: blur(6px);
}

.form-control:disabled {
    color: #ddd;
    background-color: rgba(39, 39, 39, 0.5);
    opacity: 0.6;
    backdrop-filter: blur(2px);
}

/* Dark theme for number input spinners */
.form-control[type="number"] {
    color-scheme: dark;
}

.btn-outline-primary {
    color: var(--brand-link);
    border-color: rgba(var(--brand-accent-rgb), 0.8);
}

.btn-outline-primary:disabled {
    color: #579;
    border-color: rgba(85, 119, 153, 0.8);
}

.btn-outline-success {
    color: #6c6;
    border-color: rgba(102, 204, 102, 0.8);
}
.btn-outline-warning {
    color: #fc0;
    border-color: rgba(255, 221, 34, 0.8);
}
.btn-outline-danger {
    color: #f44;
    border-color: rgba(255, 68, 68, 0.8);
}
.btn-outline-secondary {
    color: #bbb;
    border-color: rgba(187, 187, 187, 0.8);
}
.btn-outline-playing {
    color: #c9f;
    border-color: rgba(204, 153, 255, 0.8);
}

.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus
{
    --bs-btn-hover-border-color: var(--brand-link-hover); !important;
    border-color: var(--brand-link-hover) !important;
    color: var(--brand-link-hover) !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary:focus
{
    --bs-btn-hover-border-color: #eee; !important;
    border-color: #eee !important;
    color: #eee !important;
}
.btn-outline-info:hover, .btn-outline-info:active, .btn-outline-info:focus
{
    --bs-btn-hover-border-color: #dff; !important;
    border-color: #dff !important;
    color: #dff !important;
}
.btn-outline-success:hover, .btn-outline-success:active, .btn-outline-success:focus
{
    --bs-btn-hover-border-color: #dfd; !important;
    border-color: #dfd !important;
    color: #dfd !important;
}
.btn-outline-warning:hover, .btn-outline-warning:active, .btn-outline-warning:focus,
a.text-warning:hover, a.text-warning:active, a.text-warning:focus
{
    --bs-btn-hover-border-color: #ffd; !important;
    border-color: #ffd !important;
    color: #ffd !important;
}
.btn-outline-danger:hover, .btn-outline-danger:active, .btn-outline-danger:focus
{
    --bs-btn-hover-border-color: #fdd; !important;
    border-color: #fdd !important;
    color: #fdd !important;
}
.btn-outline-playing:hover, .btn-outline-playing:active, .btn-outline-playing:focus
{
    --bs-btn-hover-border-color: #edf; !important;
    border-color: #edf !important;
    color: #edf !important;
}
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-info,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-playing
{
    background-color: #1B1B1E !important;
}

hr {
    display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0;
}

.border-suggestion {
    border: 2px dashed #444;
}

.border-event {
    border: 2px dashed #972;
}

.border-nudge {
    border: 2px dashed #799;
}

.border-public {
    border: 2px dashed #4cc;
}

.border-tutorial {
    border: 2px dashed #279;
}

.form-select {
    color: #ddd;
    background-color: rgba(39, 39, 39, 0.65);
    backdrop-filter: blur(4px);
}
.form-select option,
.form-select optgroup {
    /* Force the dropdown list itself to stay dark across browsers */
    background-color: #1b1b1e;
    color: #ddd;
}
.form-select option:checked,
.form-select option:hover {
    background-color: #2c2c31;
}

.navbar .navbar-toggler {
    border: 0;
    color: #ddd;
}

.navbar .navbar-toggler-icon {
    font-size: 1.5rem;
    filter: invert(100%);
}

/*.navbar-header {*/
/*    position: relative;*/
/*    width: 100%;*/
/*}*/

.custom-navbar-toggler {
    position: absolute;
    right: 0;
    top: 1rem;
    transform: translateY(0);
}

/* Keep hamburger in original position when navbar is expanded (mobile) */
@media (max-width: 991.98px) {
    .custom-navbar-toggler {
        top: 0.6rem;
        transform: translateY(0);
    }
}

@media (max-width: 991.98px) {
    .navbar-full-width nav {
        padding-top: 0.5rem !important;
    }

    .navbar-header {
        min-height: 3rem;
    }
}

.table-layout-fixed {
    table-layout: fixed;
}

.card.bg-dark {
    background-color: #333; /* This will be the color of your card's background. */
    color: #FAFAFA; /* This will be the color of your card's text. */
    border-color: #444; /* This will be the color of your card's border. */
}

.card-text {
}

.card.bg-dark .card-title {
    color: #dfd; /* This will be the color of your card's title. */
}

.card.bg-dark .btn {
    background-color: #007BFF; /* This will be the background color of your card's button. */
    border-color: #007BFF; /* This will be the border color of your card's button. */
    color: #FAFAFA; /* This will be the color of your card's button text. */
}

.counter-pushed {
    color: grey;
}

.counter-excluded {
    color: indianred;
}

/* Sidebar-specific counter backgrounds */
.sidebar-counter-playing {
    background-color: rgba(102, 77, 128, 0.25);
    padding: 0 6px;
    border-radius: 3px;
    display: inline-block;
}

.sidebar-counter-pushed {
    background-color: rgba(48, 48, 48, 0.25);
    padding: 0 6px;
    border-radius: 3px;
    display: inline-block;
}

.sidebar-counter-excluded {
    background-color: rgba(96, 48, 48, 0.25);
    padding: 0 6px;
    border-radius: 3px;
    display: inline-block;
}

.sidebar-counter-active {
    background-color: rgba(96, 96, 96, 0.25);
    padding: 0 6px;
    border-radius: 3px;
    display: inline-block;
}

.sidebar-counter-section {
    background-color: rgba(96, 96, 96, 0.25);
    padding: 0 6px;
    border-radius: 3px;
    display: block;
}

/* Darker background for unselected section counters */
.sidebar-counter-section:not(.text-info) {
    background-color: rgba(48, 48, 48, 0.25);
}

.sidebar-link {
    font-size: larger;
}

/* Fixed width sidebar counter (60px) */
.sidebar-counter-fixed {
    width: 60px;
    flex: 0 0 60px;
}

/* Small gap between counter and label */
.sidebar-label-gap {
    margin-left: 6px;
}

/* Reserve 330px on the right for pages that have a d-lg-block 330px sidebar sibling,
   so the main column doesn't briefly expand into the sidebar's space while the rest
   of the HTML is still streaming/parsing during navigation. */
@media (min-width: 992px) {
    .sidebar-reserved-col {
        max-width: calc(100% - 330px);
    }
}

/* Utilities */

.hidden {
    display: none;
}

.database-game-name {
    white-space: nowrap;      /* Ensures no wrap and the text will be in a single line */
    overflow: hidden;         /* Makes sure anything beyond the element's width is not visible */
    text-overflow: ellipsis;  /* Render an ellipsis ("...") to represent clipped text */
    max-width: 100%;
    display: inline-block;    /* Elements need to be block or inline-block level for "overflow" to work */
    vertical-align: top;      /* or middle, or bottom depending on your design */
}

@media (min-width: 992px) {
    .database-game-name {
        max-width: 300px;
    }
}

@media (max-width: 991.98px) {
    .rankings-subtitle {
        font-size: 0.75rem;
    }
}


/* PULSE effect */

.pulse-warning {
    box-shadow: 0 0 0 rgba(255,193,7,0.5);
    animation: pulse-warning 2s infinite;
}

.navbar-alerting {
    border-color: #f8c146 !important;
}

.navbar-alerting .navbar-toggler-icon,
.navbar-toggler-icon.navbar-alerting-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f8c146' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    filter: none !important;
}

@-webkit-keyframes pulse-warning {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,193,7, 0.5);
    }
    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(255,193,7, 0);
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(255,193,7, 0);
    }
}

@keyframes pulse-warning {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(255,193,7, 0.5);
        box-shadow: 0 0 0 0 rgba(255,193,7, 0.5);
    }
    70% {
        -moz-box-shadow: 0 0 0 10px rgba(255,193,7, 0);
        box-shadow: 0 0 0 10px rgba(255,193,7, 0);
    }
    100% {
        -moz-box-shadow: 0 0 0 0 rgba(255,193,7, 0);
        box-shadow: 0 0 0 0 rgba(255,193,7, 0);
    }
}

.priority-btn-up:hover {
    background-color: #242 !important; /* Bootstrap primary color for example */
}
.priority-btn-down:hover {
    background-color: #422 !important; /* Bootstrap primary color for example */
}

/* Show the dropdown menu on hover (desktop only to avoid sticky touch hover) */
@media (min-width: 992px) {
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
    }
}

.nav-link.dropdown-toggle {
    padding-right: 0.0rem;
}

.nav-link.dropdown-toggle::after {
    margin-left: 0.1rem;
    position: relative;
    top: 3px;
}

.dropdown-menu {
    background-color: #1B1B1E;
    border: 1px #444 solid;
}

.dropdown-item {
    background-color: #1B1B1E;
    color: var(--brand-link);
    position: relative;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: #1B1B1E;
    color: var(--brand-link-hover);
}

/* Movies-mode region picker in the navbar. It's its own navbar cell beside the
   search. Below lg (the collapsed grid navbar) it expands to flag + country name
   and fills the empty grid cell; at lg+ it collapses to a compact flag-only box. */
.region-selector-li {
    display: flex;
    align-items: center;
}

.region-selector {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
}

/* Default (below xxl): expanded pill with flag, name, and an inline caret. */
.region-selector__toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 10px;
    margin: 0;
    border: 1px solid #444;
    background-color: transparent;
    color: #bbb;
    cursor: pointer;
}

.region-selector__toggle:hover,
.region-selector__toggle:focus,
.region-selector__toggle[aria-expanded="true"] {
    background-color: #2a2a2e;
    color: #fff;
}

.region-selector__flag {
    display: block;
    width: 26px;
    height: 18px;
    flex-shrink: 0;
    object-fit: cover;
}

.region-selector__globe {
    flex-shrink: 0;
    font-size: 18px;
}

.region-selector__name {
    overflow: hidden;
    max-width: 150px;
    font-size: 0.95rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.region-selector__caret {
    flex-shrink: 0;
    font-size: 12px;
    opacity: 0.75;
}

/* lg+ (single-row navbar): collapse to a 36px flag-only square. The flag fills
   as a band and the caret tucks into the bottom-right corner as an overlay badge.
   (The name span is hidden via d-lg-none in the markup.) */
@media (min-width: 992px) {
    .region-selector-li {
        margin-left: 0.4rem;
    }

    .region-selector__toggle {
        width: 36px;
        gap: 0;
        padding: 0;
        overflow: hidden;
    }

    .region-selector__flag {
        width: 100%;
        height: 22px;
    }

    .region-selector__caret {
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 1px 2px 0;
        font-size: 11px;
        line-height: 1;
        color: #fff;
        opacity: 1;
        background-color: rgba(0, 0, 0, 0.55);
        border-top-left-radius: 4px;
        pointer-events: none;
    }
}

.region-selector__menu {
    min-width: 220px;
    max-width: 90vw;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px 0;
    z-index: 1100;
}

/* Below lg the navbar collapses and Bootstrap forces
   .navbar-nav .dropdown-menu to position: static so nav dropdowns expand
   inline. But .region-selector is a flex container, so a static menu becomes
   a flex sibling of the toggle: it sits beside the button, stretches the
   selector, and shoves the grid around. Keep it an absolute overlay anchored
   to the toggle's right edge so it floats over content instead of reflowing
   the navbar. The selector only ever lands in a right or middle grid cell,
   so right-alignment keeps the menu within the viewport. */
@media (max-width: 991.98px) {
    #navbar .region-selector__menu {
        position: absolute;
        top: 100%;
        right: 0;
        left: auto;
    }
}

.region-selector__heading {
    padding: 4px 14px 6px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
}

/* Scoped under the menu so it beats `.navbar .dropdown-item` (which forces
   gap: 0.05rem at equal specificity); otherwise the flag/name gap is swallowed. */
.region-selector__menu .region-selector__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 14px;
    font-size: 0.9rem;
}

.region-selector__item-flag {
    width: 22px;
    height: 16px;
    flex-shrink: 0;
    object-fit: cover;
    border: 1px solid #333;
}

.region-selector__item-globe {
    width: 22px;
    flex-shrink: 0;
    text-align: center;
}

.region-selector__item.active {
    background-color: #2a2a2e;
    color: #fff;
}

.region-selector__check {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--brand-success, #4caf50);
}

/* Nested dropdown submenu styles */
.nested-dropdown-menu {
    position: relative;
}

.nested-dropdown-menu > .dropdown-menu {
    display: none !important;
    position: absolute;
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
}

/* Show submenu on hover for desktop */
.nested-dropdown-menu:hover > .dropdown-menu {
    display: block !important;
}

.nested-dropdown-menu.show > .dropdown-menu {
    display: block !important;
}

/* Hide Bootstrap's default dropdown arrow for submenu items */
.nested-dropdown-menu > .dropdown-item.dropdown-toggle::after {
    display: none !important;
}

/* Add arrow indicator for submenu - using a more specific selector to avoid conflicts */
.nested-dropdown-menu > .dropdown-item:not(.dropdown-toggle)::after {
    display: inline-block !important;
    margin-left: 0.5em;
    vertical-align: middle;
    content: "▶";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
}

/* For items that have dropdown-toggle class, use a different approach */
.nested-dropdown-menu > .dropdown-item.dropdown-toggle {
    padding-right: 2rem;
    cursor: pointer;
}

.nested-dropdown-menu > .dropdown-item.dropdown-toggle::after {
    display: inline-block !important;
    content: "▶" !important;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em;
    border: none !important;
    margin: 0 !important;
}

/* Mobile: stack submenu below parent instead of to the side */
@media (max-width: 991.98px) {
    .nested-dropdown-menu > .dropdown-menu {
        position: static;
        left: auto;
        margin-left: 1.5rem;
        margin-top: 0;
        border: none;
        box-shadow: none;
    }

    .nested-dropdown-menu > .dropdown-item:not(.dropdown-toggle)::after,
    .nested-dropdown-menu > .dropdown-item.dropdown-toggle::after {
        content: "▼" !important;
    }

    /* Hide Extension menu item on mobile */
    .nested-dropdown-menu:has(.dropdown-item i.fa-puzzle-piece) {
        display: none;
    }
}

/* Playlist batch dropdown: open menus toward the left */
.batch-dropdown .nested-dropdown-menu > .dropdown-menu {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: -1px;
}

/* Batch dropdown arrows - point left instead of right */
.batch-dropdown .nested-dropdown-menu > .dropdown-item:not(.dropdown-toggle)::after {
    content: "◀" !important;
    right: auto;
    left: 1rem;
}

.batch-dropdown .nested-dropdown-menu > .dropdown-item.dropdown-toggle {
    padding-right: 1rem;
    padding-left: 2rem;
}

.batch-dropdown .nested-dropdown-menu > .dropdown-item.dropdown-toggle::after {
    content: "◀" !important;
    right: auto;
    left: 1rem;
}

@media (max-width: 991.98px) {
    .batch-dropdown .nested-dropdown-menu > .dropdown-menu {
        right: auto;
        margin-right: 0;
    }

    .batch-dropdown .nested-dropdown-menu > .dropdown-item:not(.dropdown-toggle)::after,
    .batch-dropdown .nested-dropdown-menu > .dropdown-item.dropdown-toggle::after {
        content: "▼" !important;
        right: 1rem;
        left: auto;
    }
}

/* Menu label for mobile hamburger */
.menu-label {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.menu-label:hover {
    opacity: 1;
}

/* Custom animation speed */
.spinner-border {
    animation-duration: 0.75s;
}

/* Add a subtle shadow to the spinner */
#loadingSpinner .spinner-grow {
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Style the loading text */
#loadingSpinner p {
    font-size: 1.4rem;
}

.btn-pressed-common {
    opacity: 0.9;
    filter: brightness(95%);
    box-shadow:
            inset 0 3px 6px rgba(0, 0, 0, 0.2),
            0 1px 1px rgba(0, 0, 0, 0.05);
    transition: all 0.05s ease-in-out;
}

.btn-pressed-scale {
    transform: scale(0.96);
}

.discovery-widget-stack {                /* parent is the reference point */
    position: relative;
    display: inline-block;        /* keeps width tight around the image */
}

.discovery-widget-first {
    width: 70%;
    border: 1px solid #222;
    box-shadow: 4px 4px 4px rgba(0,0,0,1);
    position: relative;           /* stays in normal flow */
    z-index: 1;                   /* on top */
}

.discovery-widget-second {
    width: 70%;
    opacity: 0.75;
    border: 1px solid #222;
    box-shadow: 4px 4px 4px rgba(0,0,0,1);
    position: absolute;           /* pulls it out of the flow */
    top: 20px;                    /* tweak this offset to taste */
    left: 30%;
    z-index: 0;                   /* sits underneath */
}

.discovery-widget-title {
    background-color: rgba(0, 0, 0, 0.7);  /* dark glassy */
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Admin override cards */
.override-card {
    background-color: #1f2027;
    border: 1px solid #2b2d36;
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}

.override-card__header {
    margin-bottom: 1.25rem;
}

.override-card__title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.override-card__subtitle {
    color: #7b7d87;
    font-size: 0.875rem;
    margin-bottom: 0;
}

.override-card__label {
    color: #a0a2ad;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.override-card__form .form-control,
.override-card__form .form-select {
    background-color: #24252d;
    border-color: #343544;
    color: #e1e3ee;
}

.override-card__form .form-control:focus,
.override-card__form .form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(92, 156, 255, 0.15);
    border-color: #5c9cff;
    background-color: #262832;
}

.override-card__table-wrapper {
    border: 1px solid #2b2d36;
    border-radius: 12px;
    overflow: hidden;
    background-color: #191a20;
}

.override-card__table-wrapper table > :not(caption) > * > * {
    background-color: transparent;
}

.franchise-page {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
}

.franchise-page.container-lg {
    width: min(100%, 1440px);
    max-width: none;
    padding-left: clamp(1rem, 3vw, 1.75rem);
    padding-right: clamp(1rem, 3vw, 1.75rem);
}

.glass-panel {
    background: linear-gradient(135deg, rgba(var(--brand-accent-rgb), 0.14), rgba(33, 49, 86, 0.45));
    border: 1px solid rgba(var(--brand-accent-rgb), 0.28);
    border-radius: 24px;
    padding: 2.5rem clamp(1.5rem, 4vw, 3rem);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
}

.franchise-grid-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
}

.franchise-grid-title-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.franchise-grid-title-row .franchise-title,
.franchise-grid-title-row .franchise-eyebrow {
    margin-bottom: 0;
}

.franchise-grid-header .franchise-summary {
    max-width: 52ch;
}

.franchise-grid-featured {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.franchise-card-featured {
    border-color: rgba(var(--brand-accent-rgb), 0.32);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.36);
}

.franchise-card-featured .franchise-card-rank {
    color: rgba(221, 221, 221, 0.75);
}

.franchise-eyebrow {
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    font-weight: 600;
}

.franchise-title {
    font-weight: 600;
}

.franchise-summary {
    color: #c5c9d6;
    font-size: 1rem;
    margin-bottom: 0;
}

.franchise-highlight-link {
    color: var(--brand-link-hover);
    font-weight: 600;
}

.franchise-highlight-link:hover,
.franchise-highlight-link:focus {
    color: #fff;
}

.franchise-highlight {
    font-weight: 700;
}

.franchise-top-games {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.franchise-top-game {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(27, 27, 30, 0.85);
    border: 1px solid rgba(var(--brand-accent-rgb), 0.25);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    white-space: nowrap;
}

.franchise-card {
    background-color: #1B1B1E;
    border: 1px solid rgba(var(--brand-accent-rgb), 0.12);
    border-radius: 18px;
    padding: 1.1rem 1.25rem 1.25rem;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
    overflow: hidden;
    min-height: 220px;
}

.franchise-card:hover,
.franchise-card:focus-within {
    transform: translateY(-6px);
    border-color: rgba(var(--brand-accent-rgb), 0.45);
    box-shadow: 0 26px 48px rgba(0, 0, 0, 0.4);
}

.franchise-card-bgs {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.franchise-card-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.franchise-card-bg-primary {
    background-image: var(--bg-image, none);
    background-size: auto 100%;
    background-position: left center;
    opacity: 0.9;
    z-index: 1;
}

.franchise-card-bg-secondary {
    background-image: var(--bg-image-secondary, none);
    background-size: auto 90%;
    background-position: right center;
    opacity: 0.35;
    z-index: 0;
    transform: translateY(6px);
}

/* Movies posters (2:3) are narrower than game covers, so the right-anchored
   secondary leaves a wide gap in the middle. In movies mode, lay the two covers
   out as a left-packed flex row instead - each cover sized by its height and the
   2:3 poster ratio so widths track the real card height, with empty space left on
   the right edge. Movies mode only. */
.franchise-card-stacked .franchise-card-bgs {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.franchise-card-stacked .franchise-card-bg {
    position: static;
    inset: auto;
    flex: 0 0 auto;
    height: 100%;
    width: auto;
    aspect-ratio: var(--cover-ratio);
    background-size: cover;
    background-position: center;
    transform: none;
}

.franchise-card-stacked .franchise-card-bg-secondary {
    height: 90%;
}

.franchise-card-scrim {
    position: absolute;
    inset: 0;
    background: rgba(27, 27, 30, 0.7);
    z-index: 2;
    pointer-events: none;
}

.franchise-card-content {
    position: relative;
    z-index: 3;
}

.franchise-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: nowrap;
    min-width: 0;
    margin-bottom: 0.75rem;
}

.franchise-card-rank {
    font-size: 1.75rem;
    font-weight: 700;
    color: rgba(221, 221, 221, 0.6);
    background: rgba(27, 27, 30, 0.7);
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(102, 136, 187, 0.2);
}

.franchise-card-name {
    display: block;
    flex: 1 1 auto;
    font-size: 1.15rem;
    font-weight: 600;
    color: #e5efff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
}

.franchise-card-name:hover,
.franchise-card-name:focus {
    color: #fff;
}

.franchise-card-metrics {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #aeb6c7;
}

.franchise-card-metrics > div {
    background: rgba(27, 27, 30, 0.6);
    padding: 0.3rem 0.6rem;
    border-radius: 10px;
    border: 1px solid rgba(102, 136, 187, 0.15);
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
}

.franchise-card-rating {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--rating-color, var(--brand-link));
}

.franchise-card-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    color: rgba(200, 211, 235, 0.85);
}

.franchise-card-count {
    color: rgba(202, 206, 214, 0.9);
    font-weight: 500;
    font-size: 1.1rem;
}

.franchise-card-games {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 200px;
    overflow: hidden;
    width: 100%;
}

.franchise-card-game {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.35rem;
    padding: 0.5rem 0.8rem;
    border-radius: 12px;
    background: rgba(27, 27, 30, 0.8);
    border: 1px solid rgba(102, 136, 187, 0.3);
    font-size: 0.95rem;
    color: #d8ddee;
    min-width: 0;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.franchise-card-game-name {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.franchise-card-game a {
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.franchise-card-game-rating {
    font-size: 0.85rem;
    color: rgba(var(--brand-accent-rgb), 0.9);
}

.franchise-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.franchise-grid-inner {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 576px) {
    .franchise-grid-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .franchise-grid-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .glass-panel {
        padding: 2rem 1.5rem;
    }

    .franchise-card-rank {
        font-size: 1.5rem;
    }

    .franchise-card-games {
        gap: 0.4rem;
    }
}

@media (max-width: 991.98px) {
    .franchise-top-games {
        flex-direction: column;
        align-items: flex-start;
    }

    .franchise-top-game {
        border-radius: 12px;
        white-space: normal;
    }
}

/* Developer detail page styles */
.developer-detail-header {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem 0;
}

.developer-detail-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #e5efff;
    margin-bottom: 0.5rem;
}

.developer-detail-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    font-size: 1.1rem;
    color: rgba(221, 221, 221, 0.7);
}

.developer-detail-games {
    font-weight: 600;
}

.developer-detail-rating {
    color: var(--brand-link);
    font-weight: 600;
}

.developer-games {
    margin-top: 2rem;
}

.game-card {
    background-color: #1B1B1E;
    border: 1px solid rgba(var(--brand-accent-rgb), 0.12);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}

.game-card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--brand-accent-rgb), 0.45);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Ranking-style pages: let the page background show through the card's solid fill */
.card-translucent {
    background-color: rgba(27, 27, 30, 0.3);
}

/* Most Polarizing love/hate split: faint green/red on the two percentages.
   Matches the .gg-home-split-love / -hate colors used on the home page. */
.polar-love {
    color: #7be87b;
}

.polar-hate {
    color: #e88;
}

.game-card-image-container {
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, #2a2a2e, #1B1B1E);
}

.game-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.game-card:hover .game-card-image {
    transform: scale(1.05);
}

.game-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #3a3a3e, #2a2a2e);
}

.game-card-body {
    padding: 1rem;
}

.game-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #e5efff;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.game-card-rating {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.rating-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--rating-color, var(--brand-link));
}

.game-card-release {
    font-size: 0.85rem;
    color: rgba(221, 221, 221, 0.5);
}

/* Full-width navbar and hr styles */
.navbar-full-width {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    position: relative;
    left: 0;
    right: 0;
}

.full-width-hr {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    border-bottom: 2px solid #333;
    position: relative;
}

.review-cover-cell {
    width: 120px;
    min-width: 120px;
    padding: 0 !important;
    position: relative;
}

.review-cover-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.review-cover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top;
}

.review-cover-stack {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.review-meta {
    /* Size to content on desktop so the trailing year (flex-shrink:0) is never
       clipped; the title column absorbs horizontal shrink instead. Mobile gets
       width:100% from the media query below. */
    min-width: auto;
}

#reviewsTable {
    width: 100%;
    table-layout: fixed;
    min-width: 0;
}

#reviewsTable td {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .review-meta {
        width: 100%;
        align-items: flex-start !important;
        margin-top: 0;
    }

    .review-meta .review-description-wrapper {
        max-width: 100%;
    }

    .review-meta-mobile {
        margin-bottom: 0.15rem;
        line-height: 1.2;
    }
}

.review-cover-stack .rating-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    padding: 0 10px;
    font-size: 0.95rem;
    font-weight: 700;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.75));
    border-radius: 4px;
}

.review-row-expanded .review-cover-wrapper {
    padding-top: 0;
    height: auto;
    overflow: visible;
    position: absolute;
    width: 120px;
    left: 0;
    z-index: 10;
}
.review-row-expanded .review-cover-image {
    position: static;
    width: 100%;
    height: auto;
}

/* Only expand covers when viewing other people's profiles (EditMode = false) */
.review-row:not(.review-row-clickable):hover .review-cover-wrapper {
    overflow: visible;
    z-index: 10;
}

.review-row:not(.review-row-clickable):hover .review-cover-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transform: translate(-30%, -38%) scale(1.2);
    transform-origin: top left;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 1);
}

/*.review-row:not(.review-row-clickable):hover > td:not(.review-cover-cell) {*/
/*    transition: background-color 0.2s ease;*/
/*}*/

.review-row.review-row-clickable:nth-child(odd):hover > td {
    background-color: rgba(var(--brand-selection-rgb), 0.2) !important;
}

.review-row.review-row-clickable:nth-child(even):hover > td {
    background-color: rgba(var(--brand-selection-rgb), 0.2) !important;
}

@media (max-width: 991.98px) {
    .profile-rating-cell {
        display: none;
    }

    .review-row .rating-handle-cell {
        background-color: var(--rating-color-handle, var(--rating-color, transparent)) !important;
    }

    .review-row.review-row-clickable:hover .rating-handle-cell,
    .review-row.review-row-clickable:active .rating-handle-cell,
    .review-row.review-row-clickable:focus-within .rating-handle-cell {
        background-color: var(--rating-color-handle, var(--rating-color, transparent)) !important;
    }

    .review-row.review-row-clickable:hover > .rating-handle-cell,
    .review-row.review-row-clickable:active > .rating-handle-cell,
    .review-row.review-row-clickable:focus-within > .rating-handle-cell {
        background-color: var(--rating-color-handle, var(--rating-color, transparent)) !important;
    }

    .review-row.review-row-clickable:nth-child(odd):hover > .rating-handle-cell,
    .review-row.review-row-clickable:nth-child(even):hover > .rating-handle-cell {
        background-color: var(--rating-color-handle, var(--rating-color, transparent)) !important;
    }
}

/* Status buttons in review collapse: add vertical gap when wrapping on small widths */
.review-status-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.25rem;
}

@media (min-width: 992px) {
    .rating-handle-cell {
        background-color: transparent !important;
    }
}

.playlist-priority-cell {
    position: relative;
    padding: 0;
    background-color: #14171f;
    overflow: hidden;
    isolation: isolate;
}

.playlist-priority-cell::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.4));
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.playlist-priority-cell.marked-current::before {
    background: linear-gradient(135deg, rgba(24, 0, 48, 0.9), rgba(0, 0, 0, 0.4));
    /*border-left: 5px solid rgba(24, 0, 48, 1);*/
}

.playlist-mobile-card {
    position: relative;
    background-color: #14171f;
    overflow: hidden;
    isolation: isolate;
}

.playlist-mobile-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.4));
    z-index: 1;
    pointer-events: none;
}

.playlist-mobile-card.marked-current::before {
    background: linear-gradient(135deg, rgba(24, 0, 48, 0.9), rgba(0, 0, 0, 0.4));
}

.playlist-cover-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.playlist-cover-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.playlist-priority-overlay {
    position: relative;
    z-index: 2;
    padding: 0.8rem 0 0 0.2rem;
    opacity: 1;
    transition: opacity 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.playlist-row-expanded .playlist-priority-overlay {
    opacity: 0;
}

.playlist-row-expanded .playlist-priority-cell::before {
    opacity: 0;
}

.playlist-mobile-friend-avatars {
    display: none;
}

.playlist-row-expanded .playlist-mobile-friend-avatars {
    display: flex;
    padding: 0.35rem 0.4rem 0;
}

.playlist-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

@media (max-width: 575.98px) {
    .playlist-row-mobile-clickable {
        cursor: pointer;
    }

    .playlist-title .playlist-title-text a {
        font-size: 1.1rem;
    }
}

@media (max-width: 767.98px) {
    .playlist-priority-cell {
        width: 99px !important;
        min-width: 99px;
    }

    .playlist-row-mobile-clickable .playlist-title-text,
    .playlist-row-mobile-clickable .playlist-title-text a {
        pointer-events: none;
    }

    /* Vertical spacing for action buttons that wrap onto new lines on mobile.
       Scoped to the playlist row collapse containers so desktop layout is untouched. */
    [id^="ratingsCollapse"] .btn,
    [id^="ratingsCollapse"] .btn-group,
    [id^="removeCollapse"] .btn,
    [id^="removeCollapse"] .btn-group {
        margin-bottom: 0.375rem;
    }

    [id^="ratingsCollapse"] .btn-group .btn,
    [id^="removeCollapse"] .btn-group .btn {
        margin-bottom: 0;
    }

    /* Keep the two rating rows (Best/Great/Good + Awful/Bad/Decent) close together. */
    [id^="ratingsCollapse"] .btn-group:has(> .btn-rating-quick-game),
    [id^="ratingsCollapse"] .btn-group:has(> .btn-rating-quick-dlc) {
        margin-bottom: 0;
    }
}

.playlist-title .playlist-title-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.playlist-description {
    transform: translateY(-2px);
    min-height: 22px;
    max-height: 22px;
    overflow: hidden;
}

.playlist-description > span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.playlist-mobile-stat {
    display: none;
}

.btn-sidebar-toggle, .btn-sidebar-toggle.active {
    border-color: #444 !important;
    background-color: rgba(48, 48, 48, 0.75) !important;
}
.btn-sidebar-toggle:hover {
    border-color: #666 !important;
}
/* Profile sidebar toggle buttons - active state */
.btn-sidebar-toggle.active {
    background-color: #457 !important;
}

/* Bootstrap 5.3 changed --bs-table-bg from transparent to body-bg; restore transparent so custom backgrounds show through */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: inherit;
}

/* Table striping — target cells directly since Bootstrap 5.3 reads background from cells, not rows */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(64, 64, 64, 0.4) !important;
}

.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: rgba(32, 32, 32, 0.4) !important;
}

/* Mobile responsiveness additions moved from custom.css */

@media (max-width: 1199.98px) {
    .discovery-add.btn,
    .discovery-add .btn {
        font-size: 1rem;
        padding: 0.35rem 0.7rem;
        min-width: 0;
    }

    .discovery-add.btn + .btn,
    .discovery-add .btn + .btn {
        margin-left: 0.15rem;
    }
}

.discovery-cta .btn + .btn {
    margin-left: 0.15rem;
    margin-right: 0.15rem;
}

@media (max-width: 1199.98px) {
    .discovery-cta .btn {
        font-size: 1rem;
        padding: 0.35rem 0.7rem;
        min-width: 0;
    }
}

.game-card .quick-rate-slot {
    margin-top: 0 !important;
}

.game-card .quick-rate-slot.show,
.game-card .quick-rate-slot.collapsing {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%;
    height: auto !important;
    z-index: 15;
    padding: 0.5rem 0.75rem;
    background: rgb(20, 22, 26);
    border-radius: 0.4rem;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}

@keyframes quickRateFlash {
    0%   { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.7); transform: scale(1); }
    40%  { box-shadow: 0 0 0 6px rgba(var(--bs-primary-rgb), 0); transform: scale(1.12); }
    100% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0); transform: scale(1); }
}
.quick-rate-flash {
    animation: quickRateFlash 0.55s ease-out;
}

@media (max-width: 991.98px) {
    .rating-grid {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0;
    }

    .rating-grid .rating-button {
        flex: 0 0 20%;
        min-width: 0;
        order: var(--rating-order, 0);
        margin: 0;
        border-radius: 0;
        font-size: 0.9rem;
    }

    .rating-checkboxes {
        flex-direction: column;
        gap: 0;
    }

    .rating-checkboxes .form-control {
        width: 100% !important;
        margin: 0;
        border-radius: 0;
        font-size: 0.85rem;
    }
}

.profile-sort-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

@media (min-width: 992px) {
    .profile-sort-input {
        max-width: 18rem;
    }
}

/* Google Sign-In Material Button Styles (Dark Theme) */
/* Official Google Sign-In button (Dark / Filled). Do not modify; regenerate via
   https://developers.google.com/identity/branding-guidelines if updating. */
.gsi-material-button {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: none;
    background-color: #131314;
    background-image: none;
    border: 1px solid #8E918F;
    -webkit-border-radius: 28px;
    border-radius: 28px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #E3E3E3;
    cursor: pointer;
    font-family: 'Roboto', arial, sans-serif;
    font-size: 20px;
    height: 56px;
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 0 18px;
    position: relative;
    text-align: center;
    -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    max-width: 400px;
    min-width: min-content;
    border-color: #8E918F;
}

.gsi-material-button .gsi-material-button-icon {
    height: 28px;
    margin-right: 18px;
    min-width: 28px;
    width: 28px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
    -webkit-align-items: center;
    align-items: center;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    font-family: 'Roboto', arial, sans-serif;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
    -webkit-transition: opacity .218s;
    transition: opacity .218s;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.gsi-material-button:disabled {
    cursor: default;
    background-color: #13131461;
    border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
    opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
    opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
    background-color: white;
    opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
    background-color: white;
    opacity: 8%;
}

/* Playlist action toolbar (Recommend Game link) - adjust vertical position on mobile */
@media (max-width: 767.98px) {
    .playlist-action-toolbar {
        top: -10px !important;
    }
}

/* Game position badge for single column layout */
.game-position-badge {
    position: absolute;
    top: 0px;
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(221, 221, 221, 0.9);
    background: rgba(27, 27, 30, 0.85);
    padding: 0.5rem 0rem;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(102, 136, 187, 0.3);
    z-index: 10;
    line-height: 1;
}
/* ==========================================================================
   Responsive Container Padding
   Discrete values at Bootstrap breakpoints for easier DevTools testing
   Overrides Bootstrap's default --bs-gutter-x: 1.5rem (24px → 12px per side)
   
   Breakpoints (from custom.scss):
   xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1320px
   ========================================================================== */

/* Base: Extra small (xs, <576px) - tightest padding */
.container,
.container-fluid,
.container-xs {
    --bs-gutter-x: 0.7rem;
}

/* Small (sm, ≥576px) */
@media (min-width: 576px) {
    .container,
    .container-fluid,
    .container-xs {
        --bs-gutter-x: 0.85rem;
    }
}

/* Medium (md, ≥768px) */
@media (min-width: 768px) {
    .container,
    .container-fluid,
    .container-xs {
        --bs-gutter-x: 1rem;
    }
}

/* Large (lg, ≥992px) */
@media (min-width: 992px) {
    .container,
    .container-fluid,
    .container-xs {
        --bs-gutter-x: 1.15rem;
    }
}

/* Extra large (xl, ≥1200px) and above - restore original Bootstrap gutter */
@media (min-width: 1200px) {
    .container,
    .container-fluid,
    .container-xs {
        --bs-gutter-x: 1.3rem;
    }
}

/* Pagination — dark theme, matching the .btn-outline-primary palette */
.pagination {
    --bs-pagination-color: var(--brand-link);
    --bs-pagination-bg: rgba(27, 27, 30, 0.5);
    --bs-pagination-border-color: rgba(var(--brand-accent-rgb), 0.6);
    --bs-pagination-hover-color: var(--brand-link-hover);
    --bs-pagination-hover-bg: rgba(27, 27, 30, 0.5);
    --bs-pagination-hover-border-color: var(--brand-link-hover);
    --bs-pagination-focus-color: var(--brand-link-hover);
    --bs-pagination-focus-bg: rgba(27, 27, 30, 0.5);
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: var(--brand-link-hover);
    --bs-pagination-active-bg: rgba(27, 27, 30, 0.5);
    --bs-pagination-active-border-color: var(--brand-link-hover);
    --bs-pagination-disabled-color: rgba(187, 187, 187, 0.4);
    --bs-pagination-disabled-bg: rgba(27, 27, 30, 0.5);
    --bs-pagination-disabled-border-color: rgba(187, 187, 187, 0.6);
}

/* The "page X / Y" label sits in a disabled <li> but stays readable */
.pagination .page-nav-label {
    color: inherit;
    cursor: default;
    border-color: rgba(var(--brand-accent-rgb), 0.6);
}

/* Themed Bootstrap toasts (success / info / warning / danger) */
.app-toast {
    border: 1px solid #2a2a2a;
}

/* Bump size on tablet+ so desktop users actually notice them */
@media (min-width: 768px) {
    .app-toast {
        --bs-toast-max-width: 460px;
        font-size: 1.05rem;
    }
    .app-toast .toast-header {
        font-size: 1.05rem;
        padding: 0.6rem 0.85rem;
    }
    .app-toast .toast-body {
        padding: 0.85rem;
    }
}
.app-toast-success { border-color: rgba(102, 204, 102, 0.6); }
.app-toast-info    { border-color: rgba(var(--brand-info-rgb), 0.6); }
.app-toast-warning { border-color: rgba(255, 193, 7, 0.6); }
.app-toast-danger  { border-color: rgba(255, 68, 68, 0.6); }

.app-toast .toast-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.app-toast-header-success {
    background-color: rgba(102, 204, 102, 0.18);
    color: #6c6;
}
.app-toast-header-info {
    background-color: rgba(var(--brand-info-rgb), 0.18);
    color: var(--brand-info);
}
.app-toast-header-warning {
    background-color: rgba(255, 193, 7, 0.18);
    color: #ffc107;
}
.app-toast-header-danger {
    background-color: rgba(255, 68, 68, 0.18);
    color: #f44;
}

.app-toast .toast-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.7;
}
.app-toast .toast-header .btn-close:hover {
    opacity: 1;
}

.playlist-welcome {
    position: relative;
}
.playlist-welcome::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/images/pixel/5.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 90%;
    opacity: 0.5;
    pointer-events: none;
}
.playlist-welcome > * {
    position: relative;
    z-index: 1;
}
.playlist-welcome > hr {
    width: 75%;
    margin-left: 0;
    margin-right: auto;
}

.playlist-pixel-owl {
    opacity: 1;
}
@media (max-width: 1399.98px) {
    .playlist-pixel-owl { opacity: 0.8; }
    .playlist-welcome::before { opacity: 0.4; }
}
@media (max-width: 1199.98px) {
    .playlist-pixel-owl { opacity: 0.6; }
    .playlist-welcome::before { opacity: 0.3; }
}
@media (max-width: 991.98px) {
    .playlist-pixel-owl { opacity: 0.4; }
    .playlist-welcome::before { opacity: 0.2; }
}
@media (max-width: 767.98px) {
    .playlist-pixel-owl { opacity: 0.2; }
    .playlist-welcome::before { opacity: 0.1; }
}


/* Streaming provider logos */
.streaming-icon {
    height: 1.4em;
    width: auto;
    border-radius: 4px;
    object-fit: contain;
    vertical-align: -0.3em;
    margin-right: 4px;
}
.streaming-card-logo {
    height: 48px;
    width: 48px;
    border-radius: 8px;
    object-fit: contain;
    flex-shrink: 0;
}


/* Movie cast row */
.cast-row {
    gap: 0.5rem;
}
.cast-member {
    width: 92px;
}
.cast-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
}

/* On desktop, size each card so a full row of 9 spans the width.
   Cards don't grow, so a short cast keeps the same size and gap. */
@media (min-width: 992px) {
    .cast-member {
        width: calc((100% - 8 * 0.5rem) / 9);
        min-width: 0;
    }
}