/*
 Theme Name:   Sonic HQ — Checkers
 Description:   A deep-blue skin built on the Generations chassis. It keeps
                Generations' layout, component recipes and token contract
                intact and replaces its pop-art three-colour palette with a
                single blue ladder running from near-black navy up to ice
                cyan — and its zigzag motif with a checkerboard, which is
                the older Sonic HQ idea of the two.
 Version:      1.0

 Palette:  royal #173a86  azure #2e9bff  sky #58c4ff  ice #9fe6ff  abyss #02060f

 RELATIONSHIP TO GENERATIONS
 ---------------------------
 This file is a sibling of style.generations.css, not a patch on top of it.
 Like every skin it is fully self-contained (merged base + overrides) so the
 switcher can swap one stylesheet for another with nothing left over, and it
 declares the identical --shq_* token list so shared components keep working.

 What it takes from Generations: the whole structural chassis — grid, cards,
 nav, badges, the button plate recipe, the widget-title wake, the music
 player. Those are solved and there is no reason to re-solve them.

 What it does differently:
   * Palette. Generations signals with HUE (blue / red / yellow). Checkers is
     monochrome, so it signals with BRIGHTNESS: every accent is a rung up the
     blue ladder in :root rather than a different colour.
   * Motif. Generations' zigzag becomes a checkerboard, everywhere the zigzag
     appeared — page field, nav skirt, footer crest, sidebar edge, dividers,
     even the --shq_zigzag_mask token, which now carries a 2x2 checker so
     existing consumers pick up the new motif without being touched.
   * Assets. Generations loads four SVGs from assets/img/generations/. Every
     checkerboard here is a CSS conic-gradient, so this skin ships as one
     file and needs no images added to the theme.
   * Tilt. The pop-art rotations are pulled back (-2deg to -1deg on the nav,
     -1.75deg to -1.25deg on the sidebar). A checkerboard telegraphs
     off-axis rotation far more loudly than a zigzag does.

 LOADING IT
 ----------
 Register it alongside the others in inc/enqueue.php, exactly as
 style.generations.css is registered — same dependencies, same handle
 pattern, and add "checkers" to the switcher list in
 template-parts/nav-header.php + assets/js/admin-css-toggle.js.
*/

/* ============================================================
   SHQ THEME VARIABLES — GENERATIONS skin
   Standardized token set. Every skin (style.css,
   style.archivetheme.css, style.generations.css) declares this
   exact same list of --shq_* variables; only the values change.
   ============================================================ */

:root {
    /* ================= THE BLUE LADDER =================================
       Checkers is monochrome on purpose. Generations carries three hues
       (blue / red / yellow) and lets hue do the signalling; here there is
       only blue, so the work is done by *brightness* instead — every
       accent is a rung further up this ladder rather than a different
       colour. Nothing in this file introduces a hue outside it except
       the two semantic states (success green, error red), which have to
       stay recognisable.
       =================================================================== */
    --shq_navy_abyss: #02060f;
    --shq_navy_950: #040c1d;
    --shq_navy_900: #071633;
    --shq_navy_800: #0b2049;
    --shq_navy_700: #102c62;
    --shq_royal_600: #173a86;
    --shq_royal_500: #1d4aa8;
    --shq_sapphire: #2563cf;
    --shq_azure: #2e9bff;
    --shq_sky: #58c4ff;
    --shq_ice: #9fe6ff;
    --shq_frost: #dff2ff;

    /* ================= THE BOARD =======================================
       One knob, --shq_checker_size, drives every checkerboard in the
       file. The tile is 2x2 squares, so the tile is always twice the
       square; both are exported so consumers never have to do the
       arithmetic (and never get it wrong).

       Two boards are defined:
         _bg    low-contrast, two near-black navies. This is the page
                field — it sits behind everything, so it has to read as
                texture, not as content.
         _band  high-contrast, azure on abyss. This is the decorative
                seam: nav skirt, footer crest, sidebar edge. Set a band
                element's height AND background-size to the same value
                and you get exactly two rows of squares, at any height.
       =================================================================== */
    --shq_checker_size: 34px;
    --shq_checker_tile: calc(var(--shq_checker_size) * 2);
    --shq_checker_a: #061128;
    --shq_checker_b: #0a1c3d;
    --shq_checker_bg: conic-gradient(var(--shq_checker_a) 0deg 90deg, var(--shq_checker_b) 90deg 180deg, var(--shq_checker_a) 180deg 270deg, var(--shq_checker_b) 270deg 360deg);

    --shq_checker_band_h: 22px;
    --shq_checker_seam_w: 24px;
    --shq_band_a: var(--shq_azure);
    --shq_band_b: var(--shq_navy_abyss);
    --shq_checker_band: conic-gradient(var(--shq_band_a) 0deg 90deg, var(--shq_band_b) 90deg 180deg, var(--shq_band_a) 180deg 270deg, var(--shq_band_b) 270deg 360deg);

    /* ================= STANDARDIZED TOKEN SET ==========================
       The same --shq_* names every skin declares (style.css,
       style.archivetheme.css, style.generations.css). Only the values
       change, so the skin switcher can swap stylesheets without any
       component knowing which skin it is in.

       The three role names are historical and no longer describe their
       colour, which is fine — they describe their JOB:
         --shq_red   the "hot" accent: hovers, sticky posts, the thing
                     that wants your eye. Here: azure.
         --shq_gold  the highlight: button faces, meta text, underlines,
                     anything sitting ON a dark surface. Here: ice.
         --shq_blue  structural: panels, fills, focus rings. Here: royal.
       =================================================================== */

    /* Core palette */
    --shq_red: var(--shq_azure);
    --shq_blue: var(--shq_royal_600);
    --shq_gold: var(--shq_ice);
    --shq_box: #0d1a33;
    --shq_mint: var(--shq_sky);
    --shq_orange: var(--shq_azure);
    --shq_green: rgba(0, 51, 0, 1);

    /* Extended palette */
    --shq_blue_deep: var(--shq_navy_900);
    --shq_red_deep: var(--shq_sapphire);
    --shq_black: var(--shq_navy_abyss);
    --shq_ink: var(--shq_navy_abyss);
    --shq_white: #ffffff;
    --shq_accent_gold: var(--shq_ice);
    --shq_accent_red: var(--shq_azure);

    /* Surfaces & text */
    --shq_bg_top: var(--shq_navy_900);
    --shq_bg_bottom: var(--shq_navy_950);
    --shq_panel: var(--shq_navy_800);
    --shq_panel_alt: var(--shq_navy_700);
    --shq_header_bar: var(--shq_navy_900);
    --shq_header_bar_2: var(--shq_navy_abyss);
    --shq_border: rgba(159, 230, 255, 0.18);
    --shq_text: var(--shq_frost);
    --shq_sidebar_bg: var(--shq_navy_800);
    --shq_sidebar_cat: var(--shq_ice);

    /* Links */
    --shq_link: var(--shq_sky);
    --shq_link_visited: var(--shq_sapphire);
    --shq_link_hover: var(--shq_ice);

    /* Layout */
    --shq_menu_bg_size: 78px 48px;
    --shq_column_count: 4;

    /* ---- The divider mask ------------------------------------------
       Generations' zigzag token, reshaped. Same name (so every existing
       consumer — the widget-title wake, the comments divider — picks it
       up with no edit), same contract (a repeat-x mask stretched to the
       element's height), different geometry: a 2x2 checker instead of a
       row of teeth.

       Because the mask stretches, the squares come out period/2 wide by
       height/2 tall. Give a consumer a period of roughly its own height
       and the squares land square. */
    --shq_zigzag_period: 44px;
    --shq_zigzag_mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2' preserveAspectRatio='none'><rect x='0' y='0' width='1' height='1' fill='%23000'/><rect x='1' y='1' width='1' height='1' fill='%23000'/></svg>");

    /* Form control accents */
    accent-color: var(--shq_sky);
    caret-color: var(--shq_ice);
    color-scheme: dark;

    /* Heading tokens — override these per skin, not the rules below. */
    --shq-head-ink: #fff;
    --shq-head-wake-a: rgba(46, 155, 255, 0.85);
    --shq-head-wake-b: rgba(37, 99, 207, 0.4);
    --shq-head-tick: var(--shq_sky);
    --shq-head-rule: rgba(159, 230, 255, 0.5);
    --shq-head-tilt: -1deg;
    --shq-head-wake-width: clamp(18rem, 58%, 52rem);

    /* ---- Legacy bridge ----------------------------------------------
       Older markup and the Deep Field draft of this skin read these
       names directly. Pointing them at ladder rungs means nothing
       renders gold or red by accident. */
    --mania-blue: var(--shq_sapphire);
    --mania-gold: var(--shq_sky);
    --mania-red: var(--shq_azure);
    --shq-blue-deep: var(--shq_royal_600);
    --shq-ink: var(--shq_frost);
}

.soundtracks,
.shq-player,
.track-single {
    /* Geometry — unchanged from Generations; the cards are a solved
       problem and this skin has no reason to move them. */
    --trk-gap: 0.5rem;
    --trk-pad: 0.7rem;
    --trk-radius: 10px;
    --trk-art: 62px;
    --trk-art-radius: 7px;

    /* Card surfaces — the three states climb the blue ladder instead of
       changing hue, so "playing" reads as *brighter*, not *different*. */
    --trk-bg: var(--shq_navy_900);
    --trk-bg-hover: var(--shq_navy_700);
    --trk-bg-active: var(--shq_royal_500);
    --trk-border: rgba(159, 230, 255, 0.1);
    --trk-border-hover: rgba(159, 230, 255, 0.3);
    --trk-shadow: 0 6px 18px rgba(2, 6, 15, 0.55);

    /* Text */
    --trk-fg: #ffffff;
    --trk-muted: rgba(223, 242, 255, 0.6);

    /* Accent: rail, level meter, focus rings, playing title */
    --trk-accent: var(--shq_sky);
    --trk-accent-text: var(--shq_ice);
    --trk-accent-scrim: rgba(37, 99, 207, 0.7);
    --trk-badge-scrim: rgba(2, 6, 15, 0.6);
    --trk-eq: var(--shq_sky);
    --trk-error: #f76464;

    /* Artwork placeholder + stat pills */
    --trk-art-bg: var(--shq_navy_800);
    --trk-stat-bg: rgba(2, 6, 15, 0.45);
    --trk-stat-plays: var(--shq_sky);
    --trk-stat-length: rgba(223, 242, 255, 0.55);

    /* Remix / Lyrics tags */
    --trk-tag-remix: var(--shq_azure);
    --trk-tag-remix-text: #02101f;
    --trk-tag-lyrics: var(--shq_ice);
    --trk-tag-lyrics-text: #041724;

    /* Inline progress bar along the bottom of a card */
    --trk-progress-track: rgba(159, 230, 255, 0.14);
    --trk-progress: linear-gradient(90deg, var(--shq_ice), var(--shq_sapphire));

    /* Single track page hero */
    --trk-hero-scrim: linear-gradient(to right, rgba(2, 6, 15, 0.94), rgba(16, 44, 98, 0.85));

    /* Fixed bottom player */
    --plr-bg: rgba(4, 12, 29, 0.94);
    --plr-border: rgba(159, 230, 255, 0.14);
    --plr-shadow: 0 -8px 28px rgba(2, 6, 15, 0.6);
    --plr-fg: #ffffff;
    --plr-muted: rgba(223, 242, 255, 0.55);
    --plr-accent: var(--shq_sapphire);
    --plr-accent-hover: var(--shq_azure);
    --plr-accent-text: #ffffff;
    --plr-btn-hover: rgba(159, 230, 255, 0.12);
    --plr-range-track: rgba(159, 230, 255, 0.2);
    --plr-thumb: var(--shq_ice);
}

/* ===== SHQ MERGED BASE (style.css) — auto-included so this skin is self-contained ===== */

@font-face {
    font-family: SonicGenerations;
    src: url("assets/fonts/FOT-Seurat Pro B.otf");
}

/* CSS RESET */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

.clear {
    clear: both;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
picture {
    display: block;
}
body {
    line-height: 1;
}

body p {
    line-height: 1.4;
}

ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

*,
*:before,
*:after {
    box-sizing: border-box !important;
}

/* Customizations */

ul {
    margin-left: 1em;
    padding-left: 1em;
    list-style: disc;
}

ol {
    margin-left: 1em;
    padding-left: 1em;
    list-style: decimal;
}

.dmbs-main li {
    margin: 5px 0;
}

.dmbs-main {
    position: relative;
    z-index: 1;
}

.dmbs-post-date {
    opacity: 1;
    font-size: 80%;
}

#header-nav-content {
    justify-content: center;
}

.navbar {
    padding: 0 1rem;
}

#menu-main-menu li {
    transition: all 0.5s ease;
}

#menu-main-menu a {
    color: #7ee8ff;
}

.main-menu button {
    color: white;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding: 1rem 1.5rem;
    }
}

@media screen and (min-width: 880px) {
    .home .dmbs-main {
        display: flex;
        flex-wrap: wrap;
    }
}

p.version {
    font-size: 75%;
    font-weight: bold;
    opacity: 0.75;
}

/* Sonic HQ */

body,
body.dmbs-body {
    color: white;
    margin: 0 auto;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-variation-settings: "wdth" 100;
    background-attachment: fixed;
    background-size: 80%, 100%;
    font-size: 18px;
}

@media screen and (max-width: 640px) {
    .content {
        /*overflow-x:hidden;*/
        overflow: hidden;
    }
}

.dmbs-content-wrapper .dmbs-main .dmbs-post.card,
.dmbs-content-wrapper .dmbs-main .dmbs-comments .comment .dmbs-post#respond {
    margin-bottom: unset;
    width: 100%;
}

@media (min-width: 1600px) {
    .container {
        max-width: 1440px !important;
    }
    .dmbs-content-wrapper .row {
        gap: 3rem;
        flex-wrap: nowrap;
    }

    .page-template-music .row,
    .music_type-template-default .row {
        gap: 1rem;
        flex-wrap: wrap;
    }
}

@media (min-width: 768px) {
    .dmbs-content-wrapper .row {
        margin-left: 0;
        margin-right: 0;
    }

    .col-md-9 {
        flex: 1 1 75%;
    }

    .col-md-3 {
        flex: 1 1 25%;
    }
    /*
    .row.mainFixedArea .col-md-9 {
        flex: 0 0 75%;
    }

    .row.mainFixedArea .col-md-3 {
        flex: 0 0 25%;
    }
        */
}

.box {
    background-color: color-mix(in oklab, var(--shq_blue) 60%, black);
    color: white;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 10px;
    position: relative;
    overflow: auto;
}

.card {
    background-color: color-mix(in oklab, var(--shq_blue) 60%, black);
    color: white;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1);
    padding: 0.5em;
    position: relative;
    overflow: auto;
    overflow-x: hidden;
    border: none;
}

.dmbs-main .card {
    background: linear-gradient(180deg, color-mix(in oklab, var(--shq_blue) 60%, black) 0%, color-mix(in oklab, var(--shq_blue) 50%, black) 100%);
}

.blue-box a:hover {
    color: white;
}

.dmbs-main .card.warning {
    background: var(--shq_red);
    color: white;
}

.hero-card {
    font-size: 1.5rem;
}

.dmbs-main .card {
    margin-bottom: 15px !important;
}

.card a {
    color: var(--shq_blue);
    font-weight: 600;
}

.card-body {
    padding: 0;
}

.card h3 {
    font-size: 1.5em;
    /*margin-bottom: 0.5em;*/
    font-weight: 700;
}

.card-body {
    margin-top: 1.5rem;
}

/*
.card-body * + *,
.dmbs-page-content .card * + * {
    margin-top: 1.25rem;
}
*/
.card-body li,
.dmbs-page-content .card li {
    margin-top: 0.15rem;
}

.card h4 {
    font-size: 1.2em;
}

.card li {
    line-height: 1.4;
}

.card :where(h2, h3, h4, p, ul, ol, pre, blockquote, a.btn) {
    margin-bottom: 1.5rem;
}

.card p:last-child {
    margin-bottom: 0;
}

h2.widgettitle:after {
    content: "";
    transform: skewX(135deg);
    background-color: black;
    height: 25px;
    display: block;
    position: relative;
    top: -22px;
    z-index: -1;
}

h2.widgettitle {
    font-weight: bold;
    color: white;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75);
    font-family: "SonicGenerations", Arial, Verdana, Sans-serif;
    height: 45px;
    font-size: 1.9rem;
    text-indent: 5px;
}

h3.widgettitle {
    position: relative; /* was missing — the old ::after was */
    isolation: isolate; /* positioning against a random ancestor */
    display: block;
    margin: 2.5rem 0 1.25rem;
    padding: 0.3em 0 0.55em;
    scroll-margin-top: 5rem;

    font-family: "SonicGenerations", Arial, Verdana, sans-serif;
    font-size: clamp(1.5rem, 1.15rem + 1.1vw, 1.9rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.015em;
    text-wrap: balance;
    color: var(--shq-head-ink);

    --shq-head-wake-a: rgba(120, 210, 255, 0.8);
    --shq-head-wake-b: rgba(40, 110, 255, 0.4);
    --shq-head-tick: #6fd0ff;

    /* Hard shadow for edge definition + soft halo to lift it off busy art. */
    text-shadow:
        0 2px 0 rgba(0, 0, 0, 0.55),
        0 0 3px rgba(0, 0, 0, 0.85),
        0 0 22px rgba(0, 0, 0, 0.45);
}

/* ---- The wake -------------------------------------------------------
   Two masks composited: the zigzag gives the shape, the linear gradient
   erases it toward the right. Masking the fade (instead of fading the
   colour with opacity) keeps the left end fully saturated — the old
   `opacity: .25` on a white gradient was what turned it grey. */
h3.widgettitle::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -0.4em;
    top: 50%;
    width: var(--shq-head-wake-width);
    height: 2.4em;
    transform: translateY(-54%) rotate(var(--shq-head-tilt));
    transform-origin: 0 50%;
    pointer-events: none;

    background: linear-gradient(96deg, var(--shq-head-wake-a) 0%, var(--shq-head-wake-b) 42%, transparent 88%);

    -webkit-mask:
        var(--shq_zigzag_mask) repeat-x left center / var(--shq_zigzag_period) 100%,
        linear-gradient(to right, #000 0 34%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask:
        var(--shq_zigzag_mask) repeat-x left center / var(--shq_zigzag_period) 100%,
        linear-gradient(to right, #000 0 34%, transparent 100%);
    mask-composite: intersect;
}

/* ---- The baseline -------------------------------------------------
   A chunky tick at the text origin plus a hairline that fades out.
   Both layers live in one pseudo via per-layer background-size. */
h3.widgettitle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    pointer-events: none;

    background-image: linear-gradient(var(--shq-head-tick), var(--shq-head-tick)), linear-gradient(90deg, var(--shq-head-rule), transparent 72%);
    background-size:
        2.75rem 100%,
        100% 2px;
    background-position:
        0 100%,
        0 100%;
    background-repeat: no-repeat;
}

/* ---- Optional: one-shot gleam on scroll-in ------------------------
   Add class shq-head--live to opt a heading in. */
@media (prefers-reduced-motion: no-preference) {
    h3.widgettitle.shq-head--live::before {
        animation: shq-wake-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
}

@keyframes shq-wake-in {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

/* ---- Small screens ------------------------------------------------- */
@media (max-width: 640px) {
    h3.widgettitle {
        --shq-head-wake-width: 88%;
        --shq-head-tilt: -0.75deg;
        margin-top: 1.75rem;
    }
}

h3.widgettitle:first-child {
    margin-top: 0;
}

#displaycategorieswidget-2 ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#displaycategorieswidget-2 .cat-item {
    background-color: var(--shq_red);
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.35);
    transition: all 0.25s ease-in-out;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.5rem;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: bold;
}

#displaycategorieswidget-2 .cat-item a {
    color: white;
    margin-right: 10px;
}

#mybbxp_recent_topics_widget-2 {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dcw_c1 {
    float: none !important;
}

@media screen and (min-width: 768px) {
    .flex.flex-half {
        display: flex;
        justify-content: space-between;
        gap: 0.5em;
        flex-wrap: nowrap;
    }

    .flex-half > div {
        flex-basis: 50%;
    }

    .flex-thirds {
        display: flex;
        justify-content: space-between;
    }

    .flex-thirds > div {
        flex-basis: 33.3%;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.flex.align-top {
    align-items: flex-start !important;
}

.flex.align-top h4 {
    margin: 1.5rem 0;
}

.flex.align-top * + * {
    margin-top: 0;
}

/* Music Sidebar */

.dcw {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dcw li,
.sidebar-term,
.mybb-thread {
    background-color: color-mix(in oklab, var(--shq_red) 80%, black);
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.35);
    transition: all 0.25s ease-in-out;
    border-radius: 3px;
    margin-bottom: 5px;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    transition: transform 0.25s ease-in-out;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.dcw li:hover,
.sidebar-term:hover,
.mybb-thread:hover {
    transform: scale(1.05);
}

.dcw a {
    color: white;
    display: block;
}

.dcw li span {
    position: relative;
    z-index: 2;
}

.cat-title {
    position: relative;
    z-index: 2;
}

.dcw .number-count {
    font-size: 14px;
    width: 24px;
    height: 24px;
    position: absolute;
    right: 0;
    z-index: 10;
}

.series-sidebar-img {
    mask-image: linear-gradient(to left, transparent 25%, black 75%);
    -webkit-mask-image: linear-gradient(to left, transparent 25%, black 75%);
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    mix-blend-mode: multiply;
    opacity: 0.3;
    max-height: 50px;
    max-width: unset !important;
}

#gameslist .series-sidebar-img {
    max-height: 75px;
}

/* --- Search field inside the drop-panel ------------------------------
   Was a transparent box with a 3px white underline, which on the new
   glass sheet had nothing to sit against. It is now a pill with its own
   surface, a magnifier baked into the left padding gutter (the widget's
   real submit button is hidden — the form is Enter-to-search), and a
   focus ring in the skin's gold. */

#main-menu-admin .search-field {
    width: 100%;
    max-width: 560px;
    padding: 0.72em 1.2em 0.72em 3rem;

    color: #fff;
    font-size: 1.05rem;
    line-height: 1.4;

    background-color: rgba(255, 255, 255, 0.07);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.6' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.4-4.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 1.05rem center;
    background-size: 18px 18px;

    border: 2px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);

    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        background-color 150ms ease;
}

#main-menu-admin .search-field::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

/* .form-control:focus elsewhere in this file strips the border and
   shadow outright; these id-scoped rules outrank it. The gold ring is
   drawn with box-shadow rather than `outline` so it follows the pill's
   border-radius. */
#main-menu-admin .search-field:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe800' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.4-4.4'/%3E%3C/svg%3E");
    border-color: var(--shq_gold);
    box-shadow: 0 0 0 4px rgba(159, 230, 255, 0.18);
}

#main-menu-admin #search-3 .input-group-btn {
    display: none;
}

#main-menu-admin #search-3 {
    padding: 0;
}

/* The widget markup is a bare <li> (see the before_widget wrapper in
   inc/sidebars.php), so it carries a marker and list padding by default. */
#main-menu-admin .widget {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Only renders if a title is ever set on the search widget; without this
   it would inherit the big blue-barred .widgettitle treatment. */
#main-menu-admin .widgettitle {
    margin: 0 0 0.6rem;
    padding: 0;
    background: none;
    color: var(--shq_gold);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

#main-menu-admin .input-group {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The parent theme's searchform.php wraps the field in a Bootstrap
   .input-group, but the WordPress core search widget does not. Centre at
   the form level too, so the pill lands in the middle either way. */
#main-menu-admin .search-form,
#main-menu-admin form[role="search"] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

#mybbxp_recent_topics_widget-2 li a {
    color: white;
}

table.stats {
    border-collapse: collapse;
    margin: 1em auto;
}

table.stats td:first-child {
    font-weight: bold;
    text-align: right;
    vertical-align: top;
}

table.stats td:last-child {
    text-align: left;
    padding-left: 0.5em;
}

table.stats td {
    color: white;
    padding: 4px;
}

.blue-box {
    background-color: var(--shq_blue);
    color: white;
    border-radius: 4px;
    padding: 10px !important;
    transition: all 0.25s ease-in-out;
    z-index: 1;
    position: relative;
    overflow: hidden;
    line-height: 1;
}

.blue-box a {
    color: white;
}

.blue-box.no-padding {
    padding: 0 !important;
}
.no-margin {
    margin: 0 !important;
}

.negative-margin {
    margin: -10px !important;
    margin-bottom: 5px !important;
}

.blue-box.jagged {
    overflow: visible;
}

.single .sticky .blue-box {
    background-color: var(--shq_red);
}

.article-header:hover {
    filter: brightness(120%);
    transition: all 0.45s ease-in-out;
}

article .dmbs-post-featured-image {
    /*margin-top: -15px !important;*/
    margin-top: -32px !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.circle-img,
.circle-img > * {
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.35);
}

.author .circle-img {
    margin-bottom: 1rem;
    display: block;
}

.box-shadow {
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.35);
}

.alternate-article-content {
    /*background:var(--shq_orange);
	color:white;*/
    line-height: 1.4;
}

.label {
    display: inline-block;
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
}
.label-feature {
    background-color: #485aa9;
    color: white;
}
.label-bug {
    background-color: #1d4aa8;
    color: white;
}
.label-enhancement {
    background-color: #7fb8e8;
    color: black;
}
.label-misc {
    background-color: #999;
    color: black;
}
.label-ui {
    background-color: #fff;
    color: black;
}
.label-ux {
    background-color: #ccc;
    color: black;
}
.label-refactor {
    background-color: #2563cf;
    color: white;
}
.label-primary {
    background-color: #071b49;
}

.label-ok {
    background-color: #020;
    color: lime;
}

.label-bad {
    background-color: #200;
    color: var(--shq_red);
}

.label-inprogress {
    background-color: #111;
    color: white;
}

#versions p {
    margin-bottom: 0.2em;
}

#versions * + * {
    margin-top: unset;
}

#versions hr {
    margin: 1.5rem 0;
}

.box.yellowBox {
    background-color: rgba(83, 83, 0, 1) !important;
    color: yellow;
}

.box.greenBox {
    background-color: rgba(0, 51, 0, 1) !important;
    color: lime;
}

.box.errorBox {
    background-color: rgba(51, 0, 0, 1) !important;
    color: #ff9999;
}

/* =========================================================================
   Badges — pill chips, matching the Sonic Blast label treatment.
   -------------------------------------------------------------------------
   ONE structural recipe. Every variant further down sets only
   --shq-badge-accent; the fill, the border and the label colour are all
   derived from it. The old block spelled out background-color + color for
   each of seventeen variants, which is how several of them ended up on
   colours that no longer existed anywhere else in the skin.

   Proportions come from the Blast reference: the fill is the accent at
   about 20%, the border the same accent a little stronger, the label the
   accent at full strength, all at a full pill radius.

   Accents are per-skin, not shared. Generations draws badges on dark navy
   cards and can run the bright Blast accents as-is; Mania and Archive draw
   them on light yellow and white cards, where those same accents would be
   invisible, so they use darkened equivalents at the same hues. The shape
   is the shared part.
   ========================================================================= */

.badge {
    /* Declared before the color-mix() pair below so that a browser without
       color-mix support still gets a legible chip — an outline in the
       accent colour — rather than dropping the box entirely. Both
       properties are then re-declared with the real values. */
    background-color: transparent;
    border: 1px solid currentColor;

    --shq-badge-accent: #c3cdff;
    /* What the accent is tinted INTO to make the fill.

       Generations tints into `transparent`, i.e. the accent laid straight
       over its dark navy card — the Blast recipe verbatim. Mania and
       Archive CANNOT do that: their cards are light, so tinting toward a
       dark accent drags the fill toward the label colour and the two
       collapse together. Measured across all seventeen variants, that put
       every one of them under 4.5:1, several near 3:1. They tint into
       white instead, giving a pale chip carrying a dark accent label,
       which measures ~5-7:1 on the same variants. Same shape, inverted
       relationship to the surface. */
    --shq-badge-base: transparent;
    --shq-badge-fill: 20%;
    --shq-badge-edge: 45%;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Spaces the icon from the label in chips like the "Views" badge,
       which carries a Font Awesome <i>. */
    gap: 0.4em;

    padding: 0.34em 0.9em;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--shq-badge-accent) var(--shq-badge-fill), var(--shq-badge-base));
    border: 1px solid color-mix(in srgb, var(--shq-badge-accent) var(--shq-badge-edge), transparent);
    color: var(--shq-badge-accent);

    font-size: 0.82em;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-transform: uppercase;
    vertical-align: middle;
}

/* greenBox / errorBox are dark panels in ALL three skins (#003300 and
   #330000), so their badges keep the bright accents even in the two
   light-card skins. */
.box.greenBox .badge,
.box.errorBox .badge {
    /* These two panels are dark (#003300 / #330000) in ALL three skins, so
       they take the dark-surface treatment even where the skin's cards are
       light — otherwise a pale chip would carry a pale label. */
    --shq-badge-base: transparent;
    --shq-badge-fill: 20%;
}

.box.greenBox .badge {
    --shq-badge-accent: #5ee08a;
}

.box.errorBox .badge {
    --shq-badge-accent: #f76464;
}

.reltime {
    letter-spacing: 0.1em;
    font-weight: bold;
}

/* Was `color: white`, which overrode the accent on every linked badge. */
.badge a {
    color: inherit;
    text-decoration: none;
}

.box.greenBox h2 {
    color: lime;
}

.box.errorBox h2 {
    color: #ff9999;
}

.success-box .box {
    color: lime;
    background-color: #030 !important;
}

.success-box .box a {
    color: white;
}

.success-box h2 {
    color: lime;
}

.error-box .box {
    background: #330000 !important;
    color: #ff9999 !important;
}

.blue-box .box {
    background-color: #173a86;
    color: white;
}

.yellowBox h2,
.yellowBox h2 a {
    color: yellow;
}

.box hr,
.card hr {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.h3-bg h3 {
    font-size: 1.75rem;
}

.nav-link,
.nav-link:hover {
    color: white;
}

.wide-content {
    margin-left: -10px;
    margin-right: -10px;
}

.overflow {
    overflow: auto;
}

.well {
    background-color: rgba(255, 255, 255, 0.55);
    border: none;
    border-radius: 4px;
    padding: 5px;
    margin-bottom: 1em;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex > *:first-child {
    padding-left: 0px;
}

.flex > *:last-child {
    padding-right: 0px;
}

.flex.center {
    justify-content: center;
}

.flex.flex-half > div {
    flex-basis: 50%;
}

.flex.flexnowrap {
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.more-margin,
ins {
    margin-top: 1em;
    margin-bottom: 1em;
}

.pull-left.floated-image {
    padding: 0 1em 1em 0;
}

.pull-right.floated-image {
    padding: 0 0 1em 1em;
}

.flex dt {
    flex-basis: 20%;
}

.flex dd {
    flex-basis: 80%;
}

/* Main Logo */

.main-logo {
    position: relative;
    display: block;
}

.main-logo img {
    height: 85px;
    width: 117px;
    position: absolute;
    transition: transform 1s ease-in-out;
    top: -24px;
    /*filter: drop-shadow(0 4px 14px rgba(23, 105, 220, 0.28));*/
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.9));
}

.main-logo img:hover {
    transform: scale(1.2);
}

@media only screen and (max-width: 480px) {
    .main-logo img {
        top: 40px;
    }
}

/* Menu */

/* Base styles that apply to all menus */
.menu-section {
    position: relative;
    z-index: 1;
}

/*
.main-menu {
    overflow-x: hidden;
}
    */

/* ==========================================================================
   Search drop-panel (.menu-section-admin)
   --------------------------------------------------------------------------
   Revealed when the magnifier in the tools row is hovered (or tapped
   under 880px) — assets/js/theme.js toggles `.visible` on the wrapping
   #main-menu-admin, which is the element that actually moves. The panel
   inside just paints.

   It used to be a flat red slab with a soft grey drop shadow, which read
   as a leftover Bootstrap navbar rather than part of this skin. Now it is
   a dark glass sheet — the same blur/translucency language as the mobile
   nav panel — with a gold zigzag skirt along its lower edge, reusing the
   footer's zigzag art flipped so the teeth point down into the page.
   ========================================================================== */

.menu-section-admin {
    position: absolute;
    top: 50px;
    width: 100%;
    z-index: 1;
    padding: 1rem 0 1.15rem;

    /* Translucent so the backdrop-filter below has something to do — this
       is the same glass recipe as the mobile nav panel. The blue wash is
       laid over it so the sheet picks up the skin's key colour instead of
       reading as neutral grey. */
    background-color: rgba(10, 10, 20, 0.82);
    background-image: radial-gradient(130% 190% at 50% 0%, rgba(46, 155, 255, 0.3) 0%, transparent 62%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);

    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 22px 45px -18px rgba(0, 0, 0, 0.85);
}

/* Without blur, 0.72 alpha over this skin's star-and-stripe body art is
   not readable, so go nearly opaque instead. Scoped to the no-support
   case so it does not flatten the glass everywhere else. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .menu-section-admin {
        background-color: color-mix(in oklab, var(--shq_ink) 94%, black);
    }
}

/* Checker skirt. Same artwork as .main-footer::before, so the search
   panel and the footer hang off their surfaces the same way. */
.menu-section-admin::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: calc(var(--shq_checker_band_h) * 0.65);
    background-image: var(--shq_checker_band);
    background-size: calc(var(--shq_checker_band_h) * 0.65) calc(var(--shq_checker_band_h) * 0.65);
    background-repeat: repeat-x;
    filter: drop-shadow(0 2px 4px rgba(2, 6, 15, 0.5));
    pointer-events: none;
}

.hidden-up {
    position: relative;
    z-index: 100;
    transform: translateY(-200px);
    opacity: 0;
    /* Nothing should be clickable while the panel is parked off-screen —
       previously it stayed hit-testable and could swallow clicks aimed at
       the bar underneath. */
    pointer-events: none;
    transition:
        transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 220ms ease;
}

.hidden-up.visible {
    transform: translateY(-20px);
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
    .hidden-up,
    .hidden-up.visible {
        transition: opacity 120ms ease;
    }
}

@media screen and (max-width: 768px) {
    .menu-section-admin {
        top: 30px;
    }
    /* Only the offset differs on phones; the reveal timing is inherited
       from the base .hidden-up rule. The `transition: all 0.5s` that used
       to sit here re-enabled easing on every property — including the
       backdrop-filter and box-shadow the panel now carries. */
    .hidden-up.visible {
        transform: translateY(-88px);
    }
}

.menu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu li a {
    display: block;
    text-decoration: none;
    color: white;
    /*padding: .6em 1em;*/
    padding: 0.8em 1em 0.8em 1.9em;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    font-size: 1.25rem;
}

.nav-mixed {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

/* Allow room for logo */
.main-menu .single-nav ul {
    margin-left: 140px;
}

.main-menu-admin .single-nav ul {
    margin-left: 55px;
}

@media screen and (min-width: 42em) {
    .single-nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .single-nav li {
        flex: 1 0 auto;
        text-align: center;
    }
}

.comments-footer .dmbs-post-meta-tags {
    font-size: 0.8rem;
}

span.smalltext {
    font-size: 75%;
    display: none;
}

#latest_threads_3_e center {
    text-align: left;
}

#latest_threads_3_e img {
    margin-right: 15px;
}

#latest_threads_3_e a:after {
    clear: both;
}

#latest_threads_3_e .smalltext strong {
    display: none;
}

.pointer {
    cursor: pointer;
}

/* Navigation Buttons */

ul.navigation li {
    transition: all 0.15s ease-out;
    color: #ffffff;
    /*padding: 3px 20px 7px 30px;*/
    text-decoration: none;
    background-size: var(--shq_menu_bg_size);
    font-weight: 600;
}

ul.navigation li.forum {
    background: url("/images/menu/svg/users-solid.php?i=100,100,100,1") no-repeat;
    background-size: var(--shq_menu_bg_size);
    background-position: left;
}

ul.navigation li.music {
    background: url("/images/menu/svg/music-solid.php?i=100,100,100,1") no-repeat;
    background-size: var(--shq_menu_bg_size);
    background-position: left;
}

ul.navigation li.music.current-page-ancestor,
ul.navigation li.music.current-menu-item {
    background: url("/images/menu/svg/music-solid.php?i=255,255,255,0.2") no-repeat;
    background-size: 91px 83px;
    background-position: left;
}

ul.navigation li.comics {
    background: url("/images/menu/svg/comment-solid.php?i=100,100,100,1") no-repeat;
    background-size: var(--shq_menu_bg_size);
    background-position: left;
}

ul.navigation li.comics.current-page-ancestor,
ul.navigation li.comics.current-menu-item {
    background: url("/images/menu/svg/comment-solid.php?i=255,255,255,0.2") no-repeat;
    background-size: 91px 83px;
    background-position: left;
}

ul.navigation li.archives {
    background: url("/images/menu/svg/archive-solid.php?i=100,100,100,1") no-repeat;
    background-size: var(--shq_menu_bg_size);
    background-position: left;
}

ul.navigation li.archives.current-page-ancestor,
ul.navigation li.archives.current-menu-item {
    background: url("/images/menu/svg/archive-solid.php?i=255,255,255,0.2") no-repeat;
    background-size: 91px 83px;
    background-position: left;
}

ul.navigation li:hover a {
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
}

ul.navigation li:hover {
    background-size: 91px 83px;
}

/* Styles for social media menu */

/* Find src URL and add in correct social media icon. */
.social-menu li a:before {
    font-family: "Fontawesome";
    -webkit-font-smoothing: antialiased;
}

.social-menu li:hover a {
    color: #97b7ff;
}

.social-menu ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.social-menu li a {
    padding: 0.8em 0.75em 0.8em 0.75em;
}

.css-toggle {
    place-content: center;
    margin-left: 2rem;
}

/* Footer */

footer.main-footer {
    color: var(--shq_frost);
    background-color: var(--shq_navy_900);
    padding: 2rem;
    margin-top: 2rem;
}

.main-footer a,
.main-footer a:hover {
    color: var(--shq_gold);
    text-decoration: underline;
}

.footer-wrapper {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));*/

    gap: 2rem;
}

@media (min-width: 1200px) {
    .footer-wrapper {
        grid-template-columns: 1fr 3fr 1fr;
    }
}

.main-footer p {
    margin-bottom: 1em;
}

.main-footer .flex br {
    display: none;
}

.main-footer .flex {
    gap: 0.5rem;
    justify-content: flex-start;
}
.main-footer h2 {
    text-align: center;
}

.social a {
    color: white;
    font-size: 24px;
    margin: 8px;
    display: inline-block;
}

.footer-wrapper h2 {
    margin-bottom: 1em;
}

@media only screen and (max-width: 480px) {
    .main-footer section {
        text-align: center;
    }
}

.version {
    opacity: 0.5;
    /*border-top:1px solid #517bdc;*/
}

/* Article */

.dmbs-post-meta-header2 {
    position: relative;
    z-index: 100;
}

.dmbs-post-meta-header2 .flex {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}

.article-featured-image {
    margin-left: -10px;
    margin-right: -10px;
    margin-top: -20px;
    margin-bottom: 10px;
    text-align: center;
}

article .article-featured-image {
    margin-left: -10px;
    margin-right: -10px;
    margin-top: 0px;
    margin-bottom: 10px;
    text-align: center;
}

.comments-footer {
    margin-top: 2rem;
}

ul.list-flat {
    display: flex;
    justify-content: center;
    align-items: center;
    /*flex-flow: row wrap;*/
    list-style: none;
    padding-left: 0px;
    margin-left: 0px;
}

ul.list-flat li {
    display: inline-block;
    padding-left: 10px;
}

ul.list-flat li:first-child {
    display: inline-block;
    padding-left: 0px;
}

.list-flat img {
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s ease-in-out;
}

.mania-shadow {
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
}

.alternate-article-content:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.3);
    margin-left: -10px;
    margin-right: -10px;
    padding: 10px;
}

.alternate-article-content:nth-of-type(even) {
    margin-left: -10px;
    margin-right: -10px;
    padding: 10px;
}

.alternate-article-content.active {
    background-color: white;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.75);
}

.alternate-article-content.pointer {
    transition: all 0.5s ease-in-out;
}

.alternate-article-content.pointer:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.event-state {
    position: absolute;
    bottom: 15px;
    right: 15px;
}

/* Article Interview */

p.a {
    color: #385dae;
    font-weight: bold;
}

.pagination {
    margin: auto;
}

.pagination .nav-links a {
    padding: 10px;
}

a.page-numbers {
    color: white;
    font-weight: bold;
}

/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/

/* Headings */

@media (min-width: 768px) {
    .h1-bg {
        margin-top: 2em;
        margin-bottom: 2em;
        text-align: center;
        position: relative;
        z-index: 1;
        pointer-events: none;
    }
    /*
    .h1-bg:after {
        content: "";
        background-image: url("/images/retrotitlebar/rotate.php");
        position: absolute;
        right: 20px;
        top: 0;
        width: 150px;
        height: 35px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        z-index: -1;
    }*/

    .h1-bg h1 {
        --fill: #ffffff;
        --inner: #071633; /* navy */
        --outer: #58c4ff; /* yellow */
        --inner-w: 0.18em;
        --outer-w: 0.34em;

        position: relative;
        display: inline-block;
        font-family: "SonicGenerations", Arial, Verdana, Sans-serif;
        font-weight: 800;
        font-size: 3rem;

        color: var(--fill);
        -webkit-text-stroke: var(--inner-w) var(--inner);
        text-stroke: var(--inner-w) var(--inner);
        paint-order: stroke fill;
        filter: drop-shadow(0 0.045em 0.02em rgba(0, 0, 0, 0.45));
    }

    .h1-bg h1::before {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        z-index: -1; /* behind the navy layer */
        color: var(--outer);
        -webkit-text-stroke: var(--outer-w) var(--outer);
        paint-order: stroke fill;
    }

    .col-md-9.dmbs-main h3.widgettitle {
        display: block !important;
        position: relative;
        z-index: 1;
    }

    .is-poststat-private .h1-bg h1::before {
        color: var(--shq_red);
        -webkit-text-stroke: var(--outer-w) var(--shq_red);
    }
}

@media (max-width: 767px) {
    .h1-bg {
        margin-bottom: 2em;
        margin-top: 2em;
        text-align: center;
        position: relative;
    }

    .h1-bg:before {
        content: url("/images/layout/shadow-media-bg.svg");
        position: absolute;
        left: 50px;
        width: 300px;
        top: -44px;
        z-index: -1;
    }
    .h1-bg h1 {
        font-weight: bold;
        font-family: "SonicGenerations", Arial, Verdana, Sans-serif;
        font-size: 2.5rem;
        color: white;
        text-shadow:
            0px 0px 4px black,
            0px 0px 12px rgba(0, 0, 0, 0.712);
        /*text-shadow: 1px 1px 0 #bfe9ff, -1px 1px 0 #bfe9ff, -1px -1px 0 #bfe9ff, 1px -1px 0 #bfe9ff;*/
        /*text-shadow: 2px 2px #00000062;*/

        /*text-shadow: 3px 3px 2px #000, -3px 3px 2px #000, -3px -3px 0 #000, 3px -3px 0 #000;*/
    }
}

h2 {
    font-weight: 700;
    margin-top: 0px;
    font-size: 2rem;
    font-family: "SonicGenerations", Arial, Verdana, Sans-serif;
    margin-bottom: 1.5rem;
}

h3 {
    margin-top: 0px;
}

.h3-bg {
    transform: skewX(135deg);
    background-color: black;
    height: 20px;
    margin-bottom: 0.5em;
}

.h3-bg h3 {
    transform: skewX(-135deg);
    position: relative;
    left: 3px;
    bottom: 10px;
    font-weight: bold;
    color: white;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75);
    font-family: "SonicGenerations", Arial, Verdana, Sans-serif;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

#comicsMainPage .h3-bg {
    margin-top: 0.2em;
}

blockquote {
    border-left: 3px solid #4a8ee6;
    padding: 15px;
    line-height: 1.5;
    color: #333;
    margin: 1em 0 1em 2em;
    background-color: rgba(255, 255, 255, 0.25);
}

.v-small {
    font-size: 60%;
}

.text-white {
    color: white;
}

/*--------------------------------------------------------------
Input
--------------------------------------------------------------*/

/* Fix for scroll bars */

.form-group {
    margin-left: 0;
    margin-right: 0;
}

.form-group.row {
    flex-wrap: wrap;
    gap: 1rem;
}

input:not([type="checkbox"]):not([type="submit"]):not([type="file"]):not([type="image"]):not(.lbl),
select.form-control,
select.form-control option,
select {
    padding: 7px;
    background: #111;
    outline: none;
    resize: none;
    border: 0;
    transition: all 0.3s;
    color: white;
}

select {
    font-size: 14px;
}

.form-width-auto {
    width: auto !important;
}

input:not([type="checkbox"]):not([type="submit"]):not([type="file"]):not([type="image"]):not(.lbl):disabled,
select:disabled {
    opacity: 0.5;
}

#musicsearch {
    border-radius: 3px;
    width: 100%;
    margin: 15px 0;
    padding: 12px;
}

.musicsearch {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

input[type="text"]:focus,
input[type="password"]:focus,
select.form-control:focus {
    /*background-color: color-mix(in oklab, var(--shq_blue) 5%, black) !important;*/

    background: linear-gradient(color-mix(in oklab, var(--shq_blue) 80%, black), color-mix(in oklab, var(--shq_blue) 35%, black)) !important;
    color: white;
}

textarea {
    /*background-color:#dff2ff;*/
    background-color: #111;
    border: none;
    width: 100%;
    color: white;
    font-size: 60%;
    border-radius: 3px;
}

input[readonly] {
    opacity: 0.6 !important;
}

/* Placeholder text */

::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #fff !important;
    opacity: 0.7;
}
:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #fff !important;
    opacity: 0.7;
}
::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #fff !important;
    opacity: 0.7;
}
:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #fff !important;
    opacity: 0.7;
}

[type="search"] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield;
}

.widget_search .search-submit {
    background-color: transparent;
    border: none;
}

/* Buttons */

.btn {
    font-size: 18px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding: 0.5em 1.2em;
}

.btn-sm {
    font-size: 14px;
}

/*
 * Button LOOK lives in section 7 ("chunky pop controls") near the end of
 * this file, base rules and variants together. What used to sit here — a
 * navy plate, a white hover, and a nine-selector :focus/:active pile —
 * was almost entirely dead, because section 7 overrides it with
 * !important. The one part that still won was
 * `.dmbs-body .btn-primary:hover { color: black !important }`, whose
 * higher specificity beat section 7's hover and left black text sitting
 * on the red hover plate.
 *
 * Nothing replaces it here on purpose: single-class variants like
 * `.btn-error` MUST come after the base `.btn` rule or the base wins the
 * later-rule tiebreak and repaints them, which is exactly the bug that
 * made every error button gold.
 */

.form-control:focus {
    border: none;
    box-shadow: none;
}

/* Fix for buttons misaligned */
.input-group-btn {
    top: -2px;
}

.input-group-append {
    margin-top: -3.5px;
}

/* FANCY CHECKBOX */

.lbl {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 44px;
    background: #898989;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
    left: 15px;
}
.lbl:after {
    position: absolute;
    left: -2px;
    top: -3px;
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 100px;
    background: #fff;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
    content: "";
    transition: all 0.3s ease;
}
.lbl:active:after {
    transform: scale(1.15, 0.85);
}
.cbx:checked ~ label {
    background: #697bff;
}
.cbx:checked ~ label:after {
    left: 20px;
    background: #3c53ff;
}
.cbx:disabled ~ label {
    background: #d5d5d5;
    pointer-events: none;
}
.cbx:disabled ~ label:after {
    background: #bcbdbc;
}
.cntr {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.press {
    margin-bottom: 40px;
}
.hidden {
    display: none;
}

/*--------------------------------------------------------------
Page Specific
--------------------------------------------------------------*/

/*****

COMICS

*****/

.comic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr));
    gap: 10px;
}

.comic-grid .comic-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--shq_blue);
    color: #fff;
    border-radius: 4px;
    transition: all 0.25s ease-in-out;
    overflow: hidden;
    text-align: center;
    padding-bottom: 1em;
    position: relative;
    z-index: 1;
}
.comic-grid a,
.series-box a {
    color: white;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out;
}
.comic-grid a::before,
.series-box a::before {
    content: "";
    inset: 0;
    position: absolute;
}
.comic-grid .comic-box:hover,
.series-box:hover {
    transform: scale(1.075);
}

.comic-grid h4,
.series-box h4 {
    padding: 0.5em;
    font-weight: bold;
    text-wrap: balance;
    font-size: 1.2rem;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.comic-grid img,
.series-box img {
    max-width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    object-position: top;
    height: auto;
}

.series-box img {
    max-width: 100% !important;
}

.series-items .series-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--shq_blue);
    color: #fff;
    border-radius: 4px;
    transition: all 0.25s ease-in-out;
    overflow: hidden;
    text-align: center;
    /*padding-bottom: 1em;*/
    position: relative;
    z-index: 1;
}

.series-desc-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.7);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.7) 100%);
    color: white;
    padding: 5px;
    box-sizing: border-box;
    overflow-y: auto;
    transition: transform 0.3s ease-in-out;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    align-items: end;
    border-radius: 4px;
    overflow: hidden;
}

.number-aside {
    position: absolute;
    bottom: 0; /* Flush with bottom edge */
    right: 0; /* Flush with right edge */

    /* Center the number inside it */
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0.5em;

    /* Use a high z-index to ensure it sits on top */
    z-index: 10;

    /* Size and text styles for the number */
    width: 60px; /* Adjust this to control the overall size */
    height: 60px; /* Adjust this to control the overall size */
    color: white; /* Color of the number */
    font-size: 0.8em;
    font-weight: bold;
}

.number-aside::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    z-index: -1;

    width: 0;
    height: 0;

    border-style: solid;
    /* Adjust this value (60px) to match the width/height of .number-aside for a perfect fit */
    border-width: 0 0 60px 60px;

    /* The color of the triangle itself */
    border-color: transparent transparent var(--shq_red) transparent;
    /* Top: transparent, Right: transparent, Bottom: blue (visible), Left: transparent */
}

.number-aside {
    /* Reset z-index context for the number content */
    z-index: 11;
    /* This ensures the number element is positioned above its own ::before pseudo-element */
}
.preloader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    animation: loader 3s infinite alternate;
    padding: 10px;
    text-align: center;
}

.preloader.error {
    animation: loader-error 3s infinite alternate;
}

.preloader p {
    color: white;
    font-weight: bold;
    font-size: 2em;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes loader {
    from {
        background: #001a86;
    }
    to {
        background: #0431ea;
    }
}

@keyframes loader-error {
    from {
        background: #0b2049;
    }
    to {
        background: #102c62;
    }
}

.comic-edit {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    transition: all 0.2s ease-in-out;
    border-radius: 50%;
}

.sidebar-term {
    display: flex;
    justify-content: space-between;
}

.sidebar-term .term-count {
    color: black;
    background-color: #fff;
    position: absolute;
    right: -5px;
    top: -8px;
    width: 50px;
    display: grid;
    place-items: center;
    height: 50px;
    padding: 1rem;
    border-radius: 50%;
}

.publisher-item {
    display: grid;
    grid-template-columns: 5rem 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.publisher-item img {
    width: 100%;
    height: auto;
}

.publisher-item * + * {
    margin-top: unset;
}

.publisher-item p {
    margin-bottom: 1.5rem;
}

a > .blue-box:hover {
    filter: brightness(115%);
}

a:hover {
    text-decoration: none !important;
}

.comicseries-img {
    mask-image: linear-gradient(to left, transparent 25%, black 75%);
    -webkit-mask-image: linear-gradient(to left, transparent 25%, black 75%);
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 1;
    mix-blend-mode: multiply;
    max-height: 55px;
    max-width: unset !important;
}

.outNow .badge {
    --shq-badge-accent: #5ee08a;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #071b49;
}

#coverBG,
.article-header {
    background-color: var(--shq_blue);
    background-blend-mode: multiply;
    background-size: cover !important;
    background-position: center !important;
    isolation: isolate;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

.article-header.has-featured {
    background-color: #385bae90;
    min-height: 225px;
}

.category-qa .article-header.has-featured {
    min-height: auto;
}

.search .category-qa .article-header.has-featured {
    min-height: 225px;
}

.home .sticky .article-header {
    background-color: var(--shq_red);
}

.article-header h2,
h2.dmbs-post-title {
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75);
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

#coverBG:before,
.article-header:before {
    content: "";
    inset: 0;
    position: absolute;
    z-index: -1;
    transition: all 0.25s ease-in-out;
    background: linear-gradient(to bottom, transparent 5%, var(--shq_blue) 95%);
}

.dmbs-post-title a::after {
    content: "";
    inset: 0;
    position: absolute;
}

.sticky .article-header:before {
    background: linear-gradient(to bottom, transparent 5%, var(--shq_red) 95%);
}

/* View By Series */

.dismiss {
    background-color: rgba(55, 55, 55, 0.5);
    transition: all;
    animation-name: dismissprompt;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    /*animation:all 0.3s dismissprompt ease-in-out 1;	*/
}

@keyframes dismissprompt {
    to {
        opacity: 0;
        transform: scale(0);
    }
}

.nudge-left {
    margin-left: -20px;
    position: relative;
    z-index: 50;
}

.flex-coverbuttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* Fandom fix */
.boilerplate.metadata {
    display: none;
}

/* Upcoming */

.upcoming-item {
    /*background: radial-gradient(circle at 62% 35%, var(--shq_blue), white);*/
    overflow: hidden;
    /*background-color: var(--shq_blue);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    */
    color: white;
    position: relative;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
    text-decoration: none !important;
    display: block;
    transition: transform 0.25s ease-in-out;
    isolation: isolate;
    container-type: inline-size;
    padding: 0.75rem;
    animation: slidein 0.5s ease-in both;
    animation-delay: calc(sibling-index() * 0.1s);
}

.upcoming .upcoming-item.card {
    /*background-color: transparent !important;*/
    background-color: color-mix(in oklab, var(--shq_red) 80%, black);
    box-shadow: none !important;
    color: white;
    border: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.25);
}

@keyframes slidein {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
}
.upcoming-item a::after {
    content: "";
    inset: 0;
    position: absolute;
}

.upcoming-item::before {
    content: "";
    inset: 0;
    opacity: 0.15;
    background-color: black;
    position: absolute;
    z-index: 0;
    transition: all 0.25s ease-in-out;
}

@media screen and (max-width: 768px) {
    .upcoming {
        --shq_column_count: 1;
        display: grid;
        grid-template-columns: repeat(var(--shq_column_count), 1fr);
        gap: 0.25rem;
    }

    .upcoming-item {
        margin: 0;
        padding: 1em;
    }
}

.upcoming-item:hover {
    transform: scale(1.05);
    transition: transform 0.25s ease-in-out !important;
}

.upcoming-item:hover:before {
    opacity: 0.15;
    transition: all 0.25s ease-in-out;
}

.upcoming-item h4 {
    font-weight: 600;
    line-height: 1.2;
    text-wrap: balance;
    max-inline-size: 50ch;
    margin-bottom: 0.75rem;
}

.upcoming-item h4 a {
    color: #fff;
}

.upcoming-item.outnow {
    background-color: var(--shq_green) !important;
}

.upcoming-item.error {
    background-color: var(--shq_red);
    color: red;
}

.upcoming-item.error a {
    color: red;
}

.upcoming-item.error h4 {
    color: var(--shq_red);
}

.upcoming-item.checking {
    /* Optional: Change the cursor to indicate an active state */
    cursor: wait;
}

.upcoming-item.checking::before {
    content: ""; /* Required for pseudo-elements to render */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*
     * Make the overlay semi-transparent to dim the content.
     * We use a high z-index to ensure it sits on top of everything inside the card.
     */
    background-color: rgba(255, 255, 255, 1); /* Light overlay */
    z-index: 1000;

    /* --- Spinner Styles (Centered) --- */
    /* Create the circle for the spinner */
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3; /* Light grey base circle */
    border-top: 4px solid #3498db; /* Blue top border for the spin effect */
    border-radius: 50%; /* Make it a perfect circle */

    /* Center the spinner within the overlay */
    margin: auto;
    /* You can also use:
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    */

    /* Apply the animation */
    animation: spin 1s linear infinite;
}

/*
 * 3. Define the spinning keyframes.
 */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@container (max-width: 767px) {
    .upcoming-item h4 {
        font-size: clamp(1.2rem, 0.7vw, 1vw);
    }
}

.upcoming .card * + *,
.blue-box * + * {
    margin-top: unset;
}

.upcoming-date {
    font-size: 14px;
    margin-bottom: 0.25em;
    margin-top: 0.35em !important;
}

.upcoming-item-content {
    position: relative;
    z-index: 2;
    /*width:100%;*/
}

.small-text p {
    font-size: 0.75rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.upcoming-item .well {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 4px;
}

@media screen and (min-width: 769px) {
    .hide-d {
        display: none !important;
    }
}

.blue-box .issue {
    mask-image: linear-gradient(to bottom, transparent 0%, black 25%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    /*mix-blend-mode: multiply;*/
}
.single-comic_type .blue-box {
    z-index: 1;
    position: relative;
    /*overflow: hidden;*/
}
.single-comic_type .card-body {
    z-index: 2;
    position: relative;
}

#expand-comic {
    margin-left: auto;
}

.comic-series {
    flex-basis: 20% !important;
}

.comic-cover {
    flex-basis: 10% !important;
}

.comic-meta {
    flex-basis: 70% !important;
}

.series-items {
    justify-content: center;
    align-items: flex-start;
}

.series-items > a {
    text-align: center;
}

.series-items .blue-box {
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.35);
}

.series-items img {
    max-width: 200px;
}

.blue-box h3 {
    color: white;
}

.mw-parser-output .reviews {
    display: none;
}

/*****
MUSIC
*****/

.grid {
    --shq_column_count: 4;
    display: grid;
    grid-template-columns: repeat(var(--shq_column_count), 1fr);
    gap: 1.5rem;
}

.auto-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

@media screen and (max-width: 768px) {
    .grid {
        --shq_column_count: 2;
        /*grid-template-columns: repeat(var(--shq_column_count), 1fr);        */
    }
}

.series-items img {
    max-width: 100px;
}

.series-items .blue-box {
    aspect-ratio: 1;
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    isolation: isolate;
    display: flex;
    align-items: end;
}

.series-items .blue-box:before {
    content: "";
    inset: 0;
    position: absolute;
    z-index: -1;
    transition: all 0.25s ease-in-out;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background: linear-gradient(to bottom, transparent 5%, var(--shq_blue) 95%);
}

.music-category-content {
    width: 100%;
}

.music-category-content h3 {
    font-size: 1.25rem;
    text-wrap: balance;
    text-shadow: 1px 1px 1px black;
}

.number-wrapper {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.series-listing .cat-title {
    text-shadow: 1px 1px 1px black;
}

.count-item {
    font-size: 80%;
    border-radius: 50%;
    display: inline-block;
    padding: 0px;
    text-align: center;
    width: 20px;
    height: 20px;
    padding-top: 3px;
}

.music-series {
    margin-bottom: 2rem;
}

/*
.tracktitle {
    font-size: 14px;
}
*/

.mp3-count {
    background-color: rgba(0, 0, 55, 0.5);
    color: cyan;
}

.midi-count {
    background-color: rgba(0, 55, 0, 0.5);
    color: #62ff7f;
}

/* --- Variants: accent only; everything else comes from .badge --- */

.badge.format-mp3 {
    --shq-badge-accent: #63b3ff;
}

.badge.format-mid {
    --shq-badge-accent: #5ef08a;
}

.badge.lightblue {
    --shq-badge-accent: #8aa4ff;
}

.badge.white {
    --shq-badge-accent: #ffffff;
}

.badge.featured {
    --shq-badge-accent: var(--shq_gold);
}

.badge.lightgreen {
    --shq-badge-accent: #5ee08a;
}

.badge.interview {
    --shq-badge-accent: #5ee08a;
}

.badge.editorial {
    --shq-badge-accent: #5ee0c0;
}

.badge.review {
    --shq-badge-accent: #5ed6f0;
}

.badge.comic {
    --shq-badge-accent: #5cb2ff;
}

.badge.qa {
    --shq-badge-accent: #7ee8ff;
}

.badge.delayed {
    --shq-badge-accent: #a8d4ff;
}

.badge.error {
    --shq-badge-accent: #f76464;
}

.badge.good {
    --shq-badge-accent: #5ee08a;
}

.badge.error404 {
    --shq-badge-accent: #b8bcd0;
}

.badge.gray {
    --shq-badge-accent: #b8bcd0;
}

.badge.badge-issuenumber {
    --shq-badge-accent: #8aa4ff;
}

thead td {
    font-weight: bold;
    font-size: 1.2em;
    border-bottom: 2px solid black;
    padding-bottom: 0.5em;
}

/* Search */

/* The only badge that sits on top of artwork rather than on a card, so it
   is the one place the translucent tint is wrong — it needs an opaque
   plate to stay readable over an arbitrary image. Shape and typography
   still come from the recipe above. */
.articles-search .badge {
    position: absolute;
    right: 10px;
    bottom: 24px;
    font-size: 24px;
    --shq-badge-accent: #ffffff;
    background-color: rgba(7, 27, 73, 0.92);
    border-color: rgba(255, 255, 255, 0.3);
}
@media only screen and (max-width: 767px) {
    #comicsMainPage .h3-bg {
        width: calc(100% - 55px);
    }
}

/* Archives */

.equal-height .box {
    min-height: 300px;
}

/* Full Width Youtube */

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    margin: 20px 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*
.article-body iframe [src^=https://www.youtube.com] {

}
*/

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

@media screen and (max-width: 880px) {
    .hide-xs {
        display: none !important;
    }
}

/* Specfic Page Fixes */

/* Encyclopedia */
.page-id-40016 article td {
    line-height: 1.4;
    vertical-align: top;
}

.last-update {
    opacity: 0.85;
    font-size: 75%;
    display: block;
    margin-top: 5px;
    font-weight: 400;
}

.label .textwidget {
    display: none;
}

/* Fan Fair */

.fic-author {
    opacity: 0.7;
    font-weight: bold;
}

.fic-category {
    font-size: 75%;
}

ul.fanart-columns {
    column-count: 2;
    list-style: disc;
    margin: 0;
}

.card td {
    padding: 10px;
}

@media screen and (min-width: 880px) {
    ul.columns {
        column-count: 2;
        list-style: disc;
    }
}

.twenty-five {
    display: block;
    font-size: 10px;
    opacity: 0.6;
    margin-left: 1rem;
}

@media (max-width: 768px) {
    .twenty-five {
        font-size: 12px;
        opacity: 1;
    }
}

.category-qa .alternate-article-content:before {
    content: "Staff Reply";
    position: relative;
    font-size: 24px;
    margin: 1rem 0;
    display: block;
}

.knuckles-adventure {
    background: white;
}

.knuckles-adventure table {
    width: 100%;
}

.knuckles-adventure td {
    vertical-align: top;
}

@media screen and (max-width: 880px) {
    .blue-box.negative-margin .nav-item {
        width: auto;
    }
}

ul.store.dcw li {
    background-color: var(--shq_mint);
    color: black;
}

ul.store.dcw a {
    color: black;
}

/* ==========================================================================
   Unified menu
   --------------------------------------------------------------------------
   There is now ONE <header class="main-menu"> for every viewport (see
   template-parts/nav-header.php). The old `.menu-desktop` / `.menu-mobile`
   pair — two full headers, two wp_nav_menu() calls, duplicate IDs — is gone.

   Desktop: #single-nav sits inline inside .nav-mixed, exactly as before.
   Mobile (<=768px): that same #single-nav becomes a fixed panel that starts at
   the bottom edge of the bar. assets/js/theme.js measures the bar and writes
   its height to --shq-menu-top, then adds .menu-appear to #single-nav and
   .menu-open to <body>.

   Starting the panel BELOW the bar (instead of covering the whole viewport as
   the old .menu-mobile-listitems did) means the logo, the tools, the theme
   switcher flyout and the close button never have to out-stack it.
   ========================================================================== */

@media screen and (max-width: 768px) {
    .menu {
        padding: 0.5rem 0;
    }

    /* The bar sits above page content, and pins itself while the panel is open. */
    .main-menu .menu-section {
        position: relative;
        z-index: 1000;
        width: 100%;
    }

    body.menu-open .main-menu .menu-section {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    body.menu-open {
        overflow: hidden;
    }

    /* #single-nav becomes the drop-down panel. */
    .main-menu #single-nav {
        position: fixed;
        top: var(--shq-menu-top, 64px);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        display: block;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 1rem 0 3rem;
        background-color: rgba(0, 0, 0, 0.72);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        opacity: 0;
        visibility: hidden;
        transform: scale(0.98);
        transition:
            opacity 150ms ease,
            transform 150ms ease,
            visibility 150ms;
    }

    .main-menu #single-nav.menu-appear {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    /*
       .single-nav ul goes flex-row at >=42em (672px), which overlaps this
       breakpoint. Force the panel's list back to a stacked column.
    */
    .main-menu #single-nav ul.navigation {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        width: 100%;
        margin-left: 0;
        padding: 0 1.1rem;
        text-align: left;
    }

    .main-menu #single-nav ul.navigation li {
        flex: none;
        width: 100%;
    }

    .main-menu .single-nav ul {
        margin-left: 0;
    }

    /* Bar contents stay above the panel and stay tappable. */
    .main-menu .main-logo,
    .main-menu #social-menu-mixed,
    .main-menu .navbar-toggler {
        position: relative;
        z-index: 1001;
    }

    .main-logo {
        position: relative;
    }

    .main-logo img {
        top: -40px;
        left: -18px;
    }

    .menu li a {
        font-size: 1.5rem;
    }

    /* ---------------------------------------------------------------
       Utility icon row (help, search, cart, tools, theme palette).
       Hidden by default on mobile; only revealed once the hamburger
       has been toggled open (body.menu-open, set by theme.js), instead
       of cluttering the bar before the person has asked for the menu.

       IMPORTANT: this stays display:flex at all times and is only
       toggled with opacity/visibility. Using display:none/flex here
       removes/re-adds the row from layout, which changes the bar's
       height right as the menu opens and makes the whole header jump.
       Keeping it in flow (just invisible) keeps the bar a fixed
       height in both states. flex-wrap is forced to nowrap for the
       same reason — wrapping to a second line would also grow the
       bar's height on open.
       --------------------------------------------------------------- */
    .main-menu #social-menu-mixed {
        flex-wrap: nowrap !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 150ms ease,
            visibility 150ms;
    }

    body.menu-open .main-menu #social-menu-mixed {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    #social-menu-mixed li a,
    #social-menu-mixed .theme-switch-toggle {
        padding: 0.9em 0em 0.9em 0.5em;
    }

    /* Theme switcher is in the shared bar now, so it reaches mobile too. */
    #social-menu-mixed .theme-switch-menu {
        right: 0;
        left: auto;
        z-index: 1200;
    }

    /* ---------------------------------------------------------------
       Mobile menu items — card-style rows instead of bare text, so
       each destination reads as a tappable block with its own icon,
       accent color and depth.
       --------------------------------------------------------------- */
    .main-menu #single-nav ul.navigation li {
        position: relative;
        background-color: rgba(10, 10, 20, 0.4);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-left: 5px solid var(--shq_gold);
        border-radius: 10px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
        background-position: 1.25rem center !important;
        background-repeat: no-repeat !important;
        transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            transform 0.15s ease,
            box-shadow 0.2s ease;
    }

    .main-menu #single-nav ul.navigation li:nth-child(4n + 2) {
        border-left-color: var(--shq_red);
    }

    .main-menu #single-nav ul.navigation li:nth-child(4n + 3) {
        border-left-color: var(--shq_mint);
    }

    .main-menu #single-nav ul.navigation li:nth-child(4n + 4) {
        border-left-color: #7fb8e8;
    }

    .main-menu #single-nav ul.navigation li:hover,
    .main-menu #single-nav ul.navigation li:active,
    .main-menu #single-nav ul.navigation li.current-menu-item,
    .main-menu #single-nav ul.navigation li.current-page-ancestor {
        background-color: rgba(159, 230, 255, 0.14);
        border-color: var(--shq_gold);
        transform: translateX(4px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
    }

    .main-menu #single-nav ul.navigation li a {
        display: block;
        font-family: "SonicGenerations", Arial, Verdana, sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        font-size: 1.3rem;
        padding: 1em 1em 1em 4rem !important;
    }

    .main-menu #single-nav.menu-appear ul.navigation li {
        background-size: 34px 38px;
        filter: brightness(0) invert(1);
        animation: shq-mobile-nav-item-in 0.35s ease both;
    }

    .main-menu #single-nav.menu-appear ul.navigation li:nth-child(1) {
        animation-delay: 0.05s;
    }
    .main-menu #single-nav.menu-appear ul.navigation li:nth-child(2) {
        animation-delay: 0.1s;
    }
    .main-menu #single-nav.menu-appear ul.navigation li:nth-child(3) {
        animation-delay: 0.15s;
    }
    .main-menu #single-nav.menu-appear ul.navigation li:nth-child(n + 4) {
        animation-delay: 0.2s;
    }

    .main-menu #single-nav.menu-appear ul.navigation li.comics.current-menu-item {
        background-size: 80px 73px;
    }

    @keyframes shq-mobile-nav-item-in {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .main-menu #single-nav.menu-appear ul.navigation li {
            animation: none;
        }
    }

    #main-menu-admin .input-group {
        flex-wrap: nowrap;
        gap: 1rem;
    }
}

.fixed {
    position: fixed !important;
}

.search-submit {
    color: white;
}

.store-link {
    border-radius: 4px;
}

@media screen and (max-width: 480px) {
    .dmbs-post-content .alignright,
    .dmbs-post-content .alignleft {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

.modula-items * + * {
    margin-top: unset;
}

.newsletter {
    margin-bottom: 1rem !important;
}

.forum-link-wrapper {
    padding: 2.5rem 0;
    text-align: center;
}

/* 9.4 STYLES! */

.soundtracks {
    width: 100%;
}

.music-series {
    --shq_column_count: 6;
}

.soundtracks h3.widgettitle {
    margin: 1.5rem 0;
    font-size: 2.5rem;
}

.music-bar {
    padding: 0.5em;
    background-color: #333;
    border-radius: 5px;
    position: sticky;
    z-index: 100;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*flex-wrap: wrap;*/
    color: white;
    z-index: 2;
    top: 0;
}

.music-bar .lbl {
    left: 5px;
}

.music-bar a {
    color: white;
}

.music-bar button {
    background: none;
}
@media screen and (min-width: 768px) {
    .music-bar > div,
    .flex-music-toggle {
        display: flex;
        justify-content: space-around;
        /*align-items: center;*/
        flex-wrap: wrap;
        gap: 1rem;
    }
    .music-mobile-menu {
        width: 100%;
    }
    .music-bar-left {
        margin-right: auto;
    }
    .music-bar-right {
        margin-left: auto;
    }
}

.flex-music-toggle .form-group {
    display: flex;
}

.music-bar .musicsearch {
    width: 300px;
}

#musicsearch {
    margin: 0;
    background-color: black;
    border-radius: 4rem;
}

.menu-dropdown {
    position: relative;
    display: inline-block;
}

.menu-dropdown ul.dcw li {
    min-width: 265px;
}

.dropbtn {
    color: white;
    border: none;
    cursor: pointer;
    /*padding: 1rem 0;*/
}

.games-list .dropdown-content {
    column-count: 3;
}

.dropdown-content a {
    color: white;
    text-decoration: none;
    display: block;
}

.music-bar .form-group {
    margin: 0;
}

@media (min-width: 769px) {
    .dropdown-content {
        position: absolute;
        opacity: 0;
        transition: all 0.3s ease;
        z-index: 2;
        pointer-events: none;
    }
    .menu-dropdown:hover .dropdown-content {
        opacity: 1;
        display: block;
        padding-top: 20px;
        pointer-events: all;
    }
}

@media (max-width: 768px) {
    #musicsearch {
        width: 100%;
    }
    .games-list .dropdown-content {
        column-count: unset;
    }
    .music-bar-left > * {
        flex-basis: 100%;
    }

    .music-series {
        --shq_column_count: 2;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Music Mobile Menu*/
    .music-mobile-menu {
        display: block;
        position: fixed; /* Keep menu fixed on screen */
        top: 0;
        left: -500px;
        z-index: 100000;
        background-color: rgba(0, 0, 0, 0.7);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        height: 100dvh; /* 100% viewport height */
        /*overflow-y: scroll;*/
        opacity: 0;
        transition: all 0.25s ease-in-out;
    }

    .music-mobile-menu.inview {
        left: 0;
        width: 80%;
        opacity: 1;
        overflow: auto;
    }
    .music-mobile-menu.inview button {
        font-size: 1.5rem;
        font-weight: bold;
        padding: 0;
    }

    .music-mobile-menu.inview button:focus {
        outline: none;
        color: var(--shq_gold);
    }

    .music-bar-left {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-left: 10px;
        margin-top: 140px;
    }
    .music-bar-right {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        margin-left: 10px;
        margin-top: 40px;
    }

    .flex-music-toggle {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .dropbtn:after {
        font-family: "Font Awesome 6 Free";
        content: "\f078";
        position: absolute;
        right: 5px;
    }

    .dropdown-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        margin-top: 0.75rem !important;
    }

    .menu-dropdown ul.dcw li {
        margin-right: 10px;
    }

    .music-mobile-menu.inview + #music-bar-toggler .fa-bars:before {
        content: "\f00d";
    }

    body.menu-open .navbar-toggler .fa-bars:before {
        content: "\f00d";
    }

    .music-bar .musicsearch {
        width: auto;
    }
}

@media (min-width: 769px) {
    .flex-music-toggle {
        margin-right: 0.5rem;
    }
}

#music-bar-toggler {
    color: white;
    background-color: transparent;
    border: 1px solid transparent;
    font-size: 25px;
}

#music-bar-toggler:focus {
    color: var(--shq_gold);
    outline: none;
}

.appear {
    transition: all;
    animation-name: msgappear;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
}

@keyframes msgappear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.form-horizontal * + * {
    margin-top: 0;
}

.parsedtext:empty {
    display: none;
}

.navbar-toggler:focus {
    color: var(--shq_gold);
    outline: none;
}

.main-categories .sidebar-term {
    /*background-color: var(--shq_red);*/
    background-color: color-mix(in oklab, var(--shq_red) 80%, black);
}

.main-categories .term-count {
    color: black;
    background-color: #fff;
    position: absolute;
    right: -11px;
    width: 65px;
    display: grid;
    place-items: center;
}

@media (min-width: 768px) {
    .grid-encyclopedia {
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 1.5rem;
    }

    .sticky-sidebar {
        /*
        position: sticky;
        top: 0;
        z-index: 100;
        align-self: flex-start;
        */
    }
}

.encyclopedia-profile {
    border-radius: 1rem;
    object-fit: cover;
    object-position: top;
    aspect-ratio: 1;
    max-width: 200px;
    margin: 1.5rem auto;
    display: block;
    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.23),
        0 3px 12px rgba(0, 0, 0, 0.16);
}

.details-key {
    display: block;
    font-weight: bold;
    color: var(--shq_blue);
    margin-bottom: 0.25rem !important;
    margin-top: 0;
}

.details-value {
    display: block;
    margin-bottom: 0.75rem !important;
    margin-top: 0;
    font-size: 90%;
}

.placeholder {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    text-align: center;
}

.blue-box label {
    margin-bottom: 1.2rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.stats {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.stats table {
    margin: 1em auto;
}

.stats td:first-child {
    color: #7ee8ff;
    font-weight: 600;
    text-align: right;
    vertical-align: top;
}

.stats td:last-child {
    text-align: left;
    padding-left: 0.5em;
}

.stats a {
    color: white;
}

.stats td {
    padding: 5px;
}

.game-details.card p {
    margin-top: 1rem;
}

#gameTableBody .blue-box * + * {
    margin-top: 1rem;
}

.mania-table td {
    padding: 0.5rem;
}

.mania-table th {
    padding: 0.5rem;
    background-color: #304f93;
    color: #fff;
    font-weight: bold;
}

.mania-table {
    padding: 0;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.mania-table.notfixed {
    table-layout: initial;
}

.game-row:nth-of-type(4n-1) {
    background-color: #111;
}

.game-details {
    max-height: 0; /* Start hidden with no height */
    overflow: hidden; /* Hide overflowing content */
    transition:
        max-height 0.5s ease-out,
        opacity 0.5s ease-out; /* Smooth transition */
    opacity: 0; /* Start completely transparent */

    /* Keep display: none initially so it doesn't take up space for screen readers or tab navigation
       and so JavaScript can manage it. */
    display: none;
}
.game-details.expanded {
    max-height: 500px; /* A value larger than any possible content height */
    opacity: 1; /* Fully visible */
    display: table-row; /* Show as table row for proper layout during animation */
}

.game-title {
    cursor: pointer;
    font-weight: bold;
}

#games {
    padding: 0;
}

#games .boxart {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
    max-width: 32px;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    box-shadow:
        0 1.5px 4px rgba(0, 0, 0, 0.24),
        0 1.5px 6px rgba(0, 0, 0, 0.12);
}

#games .game-details .boxart {
    max-width: 64px;
}

.release-games {
    font-size: 0.8rem;
    margin-left: 40px;
    display: block;
}

.gallery img {
    max-width: 100%;
    margin: 1em auto;
    display: block;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.gallery img:hover {
    transform: scale(1.05); /* Slight scale on hover */
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.9); /* Black background with opacity */

    justify-items: center;
    align-content: center;
}

/* Modal Content (image) */
.modal-img {
    margin: auto;
    display: block;
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* Add Animation */
.modal-img,
.close {
    animation-name: zoom;
    animation-duration: 0.4s;
}

@keyframes zoom {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

.page-id-40004 .card h2 {
    cursor: pointer;
}

.page-id-40004 h2 span {
    display: block;
    font-size: 1rem;
    width: fit-content;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

/* Optional: Rotate the chevron icon when active */
.card h2 i.fa-chevron-right {
    transition: transform 0.2s;
}

.card h2.active i.fa-chevron-right {
    transform: rotate(90deg);
}

/* Cursor pointer so users know it's clickable */
.card h2 {
    cursor: pointer;
}

.upcoming-item-image {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;
    mask-image: radial-gradient(circle, black 0%, rgba(0, 0, 0, 0) 70%);
    /*-webkit-mask-image: radial-gradient(circle, black 0%, rgba(0, 0, 0, 0) 60%);*/
    position: absolute;
    right: -45px;
    bottom: -82px;
    z-index: -1;
    opacity: 0.85;
}

.store-link {
    /*box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);*/
    transition: transform 0.3s ease;
}

.store-link:hover {
    transform: translateY(-5px);
}

.blue-box h3 {
    font-size: 1.75rem;
}

.blue-box .author-social-links h3 {
    margin-bottom: 2rem;
}

.blue-box .author-social-links h4 {
    margin-bottom: 2rem;
    font-weight: bold;
    font-size: 1.25rem;
}

.article-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    align-items: start;
}

.article-grid h2 {
    font-size: 1.25rem;
}

.article-grid .fb-share {
    display: none;
}

.article-grid article {
    max-height: 100%;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
    .home .dmbs-main {
        display: block;
    }
}

/* Stronger, more cinematic overlay on article thumbnails */
.article-header {
    position: relative;
    overflow: hidden;
    border-radius: 6px; /* slightly more rounded than the current 4px */
}

.article-header img {
    transition: transform 0.4s ease;
    display: block;
    width: 100%;
}

.article-header:hover img {
    transform: scale(1.06);
}

/* Upgrade the text overlay gradient — more depth at the bottom */
.article-header .article-header-content {
    background: linear-gradient(to top, rgba(0, 0, 30, 0.92) 0%, rgba(0, 0, 20, 0.5) 50%, transparent 100%);
    padding: 1rem 0.85rem 0.75rem;
}

.article-grid article img,
.article-header img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
}

/* Add a colored left accent to differentiate sidebar items */
.dcw li,
.sidebar-term,
.mybb-thread {
    border-left: 3px solid var(--shq_gold);
    padding-left: 12px; /* compensate for the border */
}

/*

li:nth-of-type(2) {
  box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}

li:nth-of-type(3) {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16);
}

li:nth-of-type(4) {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
}

li:nth-of-type(5) {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22), 0 14px 56px rgba(0, 0, 0, 0.25);
}

li:nth-of-type(6) {
  box-shadow: 0 15px 24px rgba(0, 0, 0, 0.22), 0 19px 76px rgba(0, 0, 0, 0.3);
}

*/

/* ===== SKIN OVERRIDES (load after the base above) ===== */

/* Theme variables are declared in the :root block at the top of this file. */

/* ---------------------------------------------------------------------
 * 1. Page background — the checkerboard.
 *
 *   Four layers, painted back to front:
 *     4. the board itself, tiled, in two near-black navies
 *     3. a cold pool rising from the bottom of the viewport
 *     2. a cyan wash off the top-right corner
 *     1. a sapphire spotlight from the top-left
 *
 *   The three gradient layers are what stop the board reading as flat
 *   graph paper: they give the field a light source, so the squares
 *   fade toward the edges instead of marching evenly off-screen. All of
 *   it is `fixed`, so content scrolls over a stationary board.
 *
 *   Contrast between the two square colours is deliberately low (about
 *   1.15:1). It needs to be legible as a pattern behind cards, not
 *   compete with them — a 50/50 black-and-white board would.
 * ------------------------------------------------------------------- */

body.dmbs-body,
body {
    background-color: var(--shq_navy_950) !important;
    background-image: radial-gradient(120% 85% at 12% -10%, rgba(46, 155, 255, 0.2), transparent 58%), radial-gradient(100% 70% at 100% 0%, rgba(88, 196, 255, 0.12), transparent 62%), radial-gradient(150% 100% at 50% 118%, rgba(23, 58, 134, 0.45), transparent 62%), var(--shq_checker_bg) !important;
    background-size:
        auto,
        auto,
        auto,
        var(--shq_checker_tile) var(--shq_checker_tile) !important;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat !important;
    background-position:
        center,
        center,
        center,
        center top !important;
    background-attachment: fixed !important;
}

/* ---------------------------------------------------------------------
 * 2. Top nav — black bar, yellow underline, red/yellow hovers.
 *    Only colors change; the default layout/spacing is untouched.
 * ------------------------------------------------------------------- */

.main-menu .menu-section,
.menu-section {
    background-color: var(--shq_blue_deep) !important;
    background-image: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: none;
    position: relative;
    overflow-x: clip;
}

/* Black pinking-shear zigzag hanging below the nav bar, tilted slightly
   so it sits at an angle like the art's blue/black boundary.

   Anchored with `bottom: 0` (instead of a `top: -770%` hack) so the
   zigzag's edge always lands right at the bottom of the bar no matter
   how tall .menu-section ends up being. The old percentage-based top
   offset was tuned for one specific bar height, and broke — leaving a
   huge black gap over the page — the moment the bar's height changed
   (e.g. the icon row above being hidden until the menu opens). */
/* Checker band hanging below the nav bar.

   Generations hung an 800px tilted black zigzag wedge here, sized to one
   specific bar height. Checkers replaces it with a band that is measured
   from the bottom edge of the bar and is only as tall as it needs to be,
   so it cannot leave a gap (or a slab of colour) when the bar's height
   changes — which it does, since the icon row above collapses on mobile.

   No tilt, deliberately. Generations rotates this element -2deg and gets
   away with it because a zigzag has no horizontal reference line to
   betray the angle. A checkerboard is nothing BUT reference lines: over
   a 1400px bar even 1deg lifts the right-hand end ~24px, which is more
   than the band is tall, so the "band" arrives as a diagonal stripe and
   reads as a layout bug. The tilt survives in this skin on the sidebar
   slab, where the whole panel rotates together and the angle is
   legible as intent.

   `top` overlaps the bar by 1px so no hairline of page background can
   show through at the seam on fractional device pixel ratios. */
.main-menu .menu-section::after,
.menu-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 1px);
    height: var(--shq_checker_band_h);
    background-image: var(--shq_checker_band);
    background-size: var(--shq_checker_band_h) var(--shq_checker_band_h);
    background-repeat: repeat-x;
    pointer-events: none;
    z-index: 3;
    filter: drop-shadow(0 3px 5px rgba(2, 6, 15, 0.55));
}

@media (max-width: 768px) {
    .main-menu .menu-section::after,
    .menu-section::after {
        height: calc(var(--shq_checker_band_h) * 0.75);
        background-size: calc(var(--shq_checker_band_h) * 0.75) calc(var(--shq_checker_band_h) * 0.75);
    }
}

.main-menu .navigation a,
.menu-section a {
    color: var(--shq_white) !important;
    /*text-transform: uppercase;*/
    font-weight: 800;
}

.main-menu .navigation a:hover,
.menu-section a:hover {
    color: var(--shq_gold) !important;
}

/* Theme switcher styles live at the bottom of this file
   (shared markup: palette icon + hover flyout). */

/* ---------------------------------------------------------------------
 * 4. Article headers — KEEP Modern's featured-image blend + scrim,
 *    just swap the tint colors. This is the key fix: do NOT replace
 *    the background image with a flat color.
 * ------------------------------------------------------------------- */

/* The blend tint over featured images */

/*
.article-header.has-featured {
    background-color: #173a86aa !important;
}
*/
/* Sticky (featured) posts read red, matching the art's red blocks */
.sticky .article-header,
.single .sticky .blue-box {
    background-color: var(--shq_red) !important;
}

/* The bottom-up gradient scrim that keeps titles legible */
#coverBG:before,
.article-header:before {
    background: linear-gradient(to bottom, transparent 5%, var(--shq_blue_deep) 95%) !important;
}
.sticky .article-header:before {
    background: linear-gradient(to bottom, transparent 5%, var(--shq_red) 95%) !important;
}

/* Non-featured blue boxes: solid blue (inherited from --shq_blue),
   but give recent-post rows that lack an image a touch more contrast. */
.article-header h2,
h2.dmbs-post-title,
.blue-box .dmbs-post-title {
    color: var(--shq_white) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7) !important;
}

/* Yellow speed-streak accent under titles (replaces the jagged PNG,
   which points at a server-side script that may not exist) */
.blue-box.jagged:after {
    background-image: none !important;
    background: repeating-linear-gradient(90deg, var(--shq_gold) 0 22px, transparent 22px 30px) !important;
    height: 5px !important;
    top: 100% !important;
}
.sticky .blue-box.jagged:after {
    background-image: none !important;
}

/* ---------------------------------------------------------------------
 * 5. Cards — keep Modern's rounded card + shadow, add a crisp outline
 *    and a slightly punchier shadow so they read as pop "stickers".
 * ------------------------------------------------------------------- */

.dmbs-main .card,
.dmbs-post.card,
article.dmbs-post,
.box {
    /*border: 2px solid var(--shq_black) !important;
    box-shadow: 4px 4px 0 rgba(10, 10, 10, 0.85) !important;*/
    backdrop-filter: none !important;
}

.card a {
    color: var(--shq_sky);
}

/* In-content links */
.dmbs-post-content a:not(.btn),
.card-body a:not(.btn) {
    /*color: var(--shq_blue_deep);*/
    font-weight: 700;

    text-decoration: underline;
    text-decoration-color: #fff;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}
.dmbs-post-content a:not(.btn):hover,
.card-body a:not(.btn):hover {
    color: var(--shq_red);
    text-decoration-color: var(--shq_red);
}

.dmbs-post-meta-header2,
.dmbs-post-meta {
    color: var(--shq_gold) !important;
    font-weight: 700;
}

/* ---------------------------------------------------------------------
 * 6. Left sidebar — entire column wrapped in a RED jagged panel.
 *    The PANEL is tilted slightly for the pop-art look, but the
 *    content (titles, dates, cards) stays upright and readable.
 * ------------------------------------------------------------------- */

.dmbs-left {
    position: relative;
    /*padding: 0px 22px 22px 14px !important;*/
    color: #fff;
    /*z-index: 1;*/
    /* NOTE: no rotate here — the column stays level so its contents do too */
}

@media (max-width: 768px) {
    .dmbs-left {
        overflow-x: clip;
    }
}

/* The sidebar slab, behind the sidebar content. Generations used a red
   fill ending in pinking-shear teeth; Checkers uses a deep sapphire
   gradient ending in a vertical checker seam — two columns of squares
   running the height of the panel where it meets the page. The tilt is
   inherited from Generations (it is what makes the column read as a
   pasted-on panel rather than a table cell) but pulled back a little,
   because a checkerboard shows off-axis rotation far more than a
   zigzag does.

   Only THIS layer is tilted; the sidebar content stays upright. */
.dmbs-left::before {
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -4000px;
    height: calc(100% + 200px);
    right: 4px;
    background:
        var(--shq_checker_band) right top / var(--shq_checker_seam_w) var(--shq_checker_seam_w) repeat-y,
        linear-gradient(160deg, var(--shq_royal_500) 0%, var(--shq_royal_600) 45%, var(--shq_navy_800) 100%) left top / calc(100% - var(--shq_checker_seam_w)) 100% no-repeat;
    transform: rotate(-1.25deg);
    transform-origin: top left;
    z-index: -1;
    filter: drop-shadow(rgba(2, 8, 24, 0.55) 8px 6px 6px);
}

@media (max-width: 768px) {
    .dmbs-left::before {
        content: "";
        position: absolute;
        top: -461px;
        left: 85px;
        bottom: -10px;
        width: 500px;
        height: 730px;
        right: 4px;
        background:
            var(--shq_checker_band) right top / var(--shq_checker_seam_w) var(--shq_checker_seam_w) repeat-y,
            linear-gradient(160deg, var(--shq_royal_500) 0%, var(--shq_royal_600) 45%, var(--shq_navy_800) 100%) left top / calc(100% - var(--shq_checker_seam_w)) 100% no-repeat;
        transform: rotate(90deg) translateX(-10%);
        transform-origin: -2%;
    }
}

/* Sidebar content sits above the panel and stays upright */
.dmbs-left > * {
    position: relative;
    z-index: 1;
}

/* Recolor widget titles inside the red panel: black chip on yellow */
.dmbs-left h3.widgettitle,
.dmbs-widget-left h3.widgettitle {
    color: #fff !important;
}

.dmbs-left a,
.dmbs-widget-left a {
    color: #fff;
    font-weight: 700;
    line-height: 1;
}
.dmbs-left a:hover,
.dmbs-widget-left a:hover {
    color: var(--shq_gold);
}

/* ---------------------------------------------------------------------
 * 7. Buttons / badges / pagination — chunky pop controls.
 *
 * One recipe, driven by custom properties, so a variant is a three-line
 * override instead of another !important pile-up (see the overrides up
 * in the Buttons section: .active, .btn-error):
 *
 *   --shq-btn-face / --shq-btn-face-hi   plate colour (bottom / top of
 *                                        the vertical gradient)
 *   --shq-btn-ink                        label colour
 *   --shq-btn-edge                       outline + the offset plate
 *   --shq-btn-hover-*                    the same three, on hover
 *   --shq-btn-drop                       offset-shadow distance
 *
 * The plate sits on a hard, un-blurred shadow of the outline colour, so
 * it reads as a physical chunk rather than a rectangle with a blur under
 * it. Hover moves the plate up-left by exactly the amount the shadow
 * grows, so the shadow's far corner stays pinned and only the button
 * appears to rise; :active drives it back down past its resting point.
 * ------------------------------------------------------------------- */

.btn,
.btn-primary,
.btn-main {
    --shq-btn-face: var(--shq_gold);
    --shq-btn-face-hi: #cdf3ff;
    --shq-btn-ink: var(--shq_ink);
    --shq-btn-edge: var(--shq_black);
    --shq-btn-hover-face: var(--shq_red);
    --shq-btn-hover-hi: #5cb2ff;
    --shq-btn-hover-ink: #ffffff;
    --shq-btn-drop: 3px;

    position: relative;
    isolation: isolate;
    /* Clips the hover streak below. Offset shadows are drawn outside the
       border box and are NOT affected by overflow, so the plate keeps
       its drop. */
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    vertical-align: middle;

    padding: 0.55em 1.4em;
    border: 2px solid var(--shq-btn-edge) !important;
    border-radius: 6px !important;
    background: linear-gradient(180deg, var(--shq-btn-face-hi) 0%, var(--shq-btn-face) 58%) !important;
    color: var(--shq-btn-ink) !important;
    font-weight: 600;

    text-decoration: none !important;
    text-shadow: none;

    box-shadow:
        var(--shq-btn-drop) var(--shq-btn-drop) 0 var(--shq-btn-edge),
        inset 0 2px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 0 rgba(0, 0, 0, 0.14) !important;

    transition:
        transform 130ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 130ms cubic-bezier(0.22, 1, 0.36, 1),
        background 150ms ease,
        color 150ms ease;
}

/* --- Variants -------------------------------------------------------
   These MUST live after the base `.btn` rule above. `.btn-error` is a
   single class, same specificity as `.btn`, so whichever comes last
   wins — put it first and the base rule repaints it gold, which is what
   used to happen to every delete button on the site. */

/* Selected / toggled (games filters, .btn-main groups). Blue is the
   theme's third colour and is otherwise unused on buttons, so a selected
   button can't be mistaken for a default (gold) or hovered (red) one. */
.btn.active,
.btn-main.active,
.btn-primary.active,
.filter-btn.active {
    --shq-btn-face: var(--shq_blue);
    --shq-btn-face-hi: #4a68ff;
    --shq-btn-ink: #ffffff;
}

/* Destructive. */
.btn-error {
    --shq-btn-face: var(--shq_red);
    --shq-btn-face-hi: #5cb2ff;
    --shq-btn-ink: #ffffff;
    --shq-btn-hover-face: var(--shq_red_deep);
    --shq-btn-hover-hi: #1668c4;
    --shq-btn-hover-ink: #ffffff;
}

/* Speed streak. Sits above the plate and below the label (negative
   z-index inside the button's own stacking context, hence `isolation`),
   and only moves on hover — it is parked off the left edge otherwise.
   ::after is unavailable: it is force-hidden further down to kill the
   old cutting-edge shine. */
.btn::before,
.btn-primary::before,
.btn-main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.55) 50%, transparent 62%);
    transform: translateX(-120%);
    /* Deliberately NOT the cubic-bezier used for the plate lift. That
       curve front-loads almost everything into the first ~20% of its
       duration, which for a travelling highlight means it crosses the
       button in about 120ms and then sits parked off the right edge for
       the rest — i.e. invisible. A symmetric curve spends the time on
       the part you can actually see. */
    transition: transform 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover,
.btn-primary:hover,
.btn-main:hover,
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-main:focus-visible {
    background: linear-gradient(180deg, var(--shq-btn-hover-hi) 0%, var(--shq-btn-hover-face) 58%) !important;
    color: var(--shq-btn-hover-ink) !important;
    transform: translate(calc(var(--shq-btn-drop) * -0.66), calc(var(--shq-btn-drop) * -0.66));
    box-shadow:
        calc(var(--shq-btn-drop) * 1.66) calc(var(--shq-btn-drop) * 1.66) 0 var(--shq-btn-edge),
        inset 0 2px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 0 rgba(0, 0, 0, 0.18) !important;
}

.btn:hover::before,
.btn-primary:hover::before,
.btn-main:hover::before {
    transform: translateX(120%);
}

.btn:active,
.btn-primary:active,
.btn-main:active {
    transform: translate(1px, 1px);
    box-shadow:
        0 0 0 var(--shq-btn-edge),
        inset 0 2px 4px rgba(0, 0, 0, 0.32) !important;
}

/* Keyboard focus needs a ring that survives on both the gold plate and
   the red hover plate, so it goes outside the border rather than on it. */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-main:focus-visible {
    outline: 3px solid var(--shq_blue);
    outline-offset: 3px;
}

.btn:disabled,
.btn.disabled,
.btn-primary:disabled,
.btn-main:disabled {
    --shq-btn-face: #b9b9c4;
    --shq-btn-face-hi: #cfcfd8;
    --shq-btn-ink: #5a5a66;
    --shq-btn-edge: #6f6f7a;
    pointer-events: none;
    opacity: 0.75;
    transform: none;
}

/* Size ramp — the base padding is em-based, so these only need to move
   the font size, but the plate depth should scale with the button. */
.btn-sm {
    --shq-btn-drop: 2px;
    padding: 0.45em 1em;
    letter-spacing: 0.03em;
}

.btn-lg {
    --shq-btn-drop: 4px;
    padding: 0.7em 1.9em;
    font-size: 22px;
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn-primary,
    .btn-main {
        transition:
            background 150ms ease,
            color 150ms ease;
    }
    .btn:hover,
    .btn-primary:hover,
    .btn-main:hover,
    .btn:active,
    .btn-primary:active,
    .btn-main:active {
        transform: none;
    }
    .btn::before,
    .btn-primary::before,
    .btn-main::before {
        display: none;
    }
}

.pagination {
    justify-content: center;
}

/*
.pagination .page-numbers,
.nav-links .page-numbers {
    background: #fff;
    color: var(--shq_ink);
    border: 2px solid var(--shq_black);
    border-radius: 3px;
    font-weight: 800;
    box-shadow: 2px 2px 0 var(--shq_black);
}
.pagination .page-numbers.current,
.nav-links .page-numbers.current {
    background: var(--shq_red);
    color: #fff;
}
    */

/* ---------------------------------------------------------------------
 * 8. Footer
 * ------------------------------------------------------------------- */

.main-footer {
    background: var(--shq_black);
    color: #fff;
    border-top: none;
    position: relative;
}

/* Checker crest sitting on top of the footer. Two rows of squares, the
   Checkers answer to the Generations zigzag: same job (a decorated seam
   where two surfaces meet), different geometry. */
.main-footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--shq_checker_band_h);
    background-image: var(--shq_checker_band);
    background-size: var(--shq_checker_band_h) var(--shq_checker_band_h);
    background-repeat: repeat-x;
    pointer-events: none;
    z-index: 2;
}
.main-footer a {
    color: var(--shq_ice);
}
.main-footer a:hover {
    color: var(--shq_red);
}

/* ---------------------------------------------------------------------
 * 9. Calm the cutting-edge layer so the flat pop look stays clean.
 * ------------------------------------------------------------------- */

.article-grid .card::before,
.youtube-video-item::before {
    display: none !important;
} /* no conic ring */
.btn-primary::after {
    display: none !important;
} /* no shine sweep */

::selection {
    background: var(--shq_gold);
    color: var(--shq_ink);
}
@media (prefers-reduced-motion: reduce) {
    body {
        background-attachment: scroll !important;
    }
}

/*
*,
*::before,
*::after {
    box-sizing: border-box;
    outline: 2px solid lime;
}
*/

/* ---------------------------------------------------------------------
 * Theme switcher — palette icon pinned to the far right of the social
 * menu. Hovering (or focusing / tapping) the icon reveals the theme
 * options in a small flyout. Markup: template-parts/nav-header.php,
 * behaviour: assets/js/admin-css-toggle.js.
 * ------------------------------------------------------------------- */

.css-theme-switch {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: auto; /* keep it furthest to the right */
}

.theme-switch-toggle {
    background: none;
    border: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: 1;
    padding: 0.8em 0.75em; /* match .social-menu li a */
    cursor: pointer;
}

.theme-switch-menu {
    display: block !important;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1200;
    min-width: 10.5rem;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: rgba(0, 0, 0, 0.8);
    color: var(--shq_text);
    border: 2px solid var(--shq_border);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    /* The 0.3s delay is a hover-intent grace period: moving the pointer
       diagonally from the palette icon down to an option can briefly leave
       the switcher (the menu extends left of the icon), and without the
       delay the menu would start hiding before it could be reached. */
    transition:
        opacity 0.15s ease 0.3s,
        transform 0.15s ease 0.3s,
        visibility 0.15s 0.3s;
}

/* Reveal on hover, keyboard focus, or tap (JS toggles .open) */
.css-theme-switch:hover .theme-switch-menu,
.css-theme-switch:focus-within .theme-switch-menu,
.css-theme-switch.open .theme-switch-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s; /* open immediately; only closing is delayed */
}

.theme-switch-menu li {
    margin: 0;
    padding: 0;
}

.theme-switch-option {
    display: block;
    width: 100%;
    background: none;
    border: 0;
    border-radius: 5px;
    padding: 0.45rem 0.75rem;
    text-align: left;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--shq_text);
    cursor: pointer;
}

.theme-switch-option:hover,
.theme-switch-option:focus-visible {
    background: var(--shq_blue);
    color: var(--shq_white);
}

/* Check mark on the active theme */
.theme-switch-option[aria-checked="true"]::after {
    content: "\2713";
    float: right;
    margin-left: 0.75rem;
}

.theme-switch-toggle:focus-visible {
    outline: 2px solid var(--shq_gold);
    outline-offset: 2px;
}

/* Generations flavor — bold pop-art panel (matches the old dropdown) */
.theme-switch-toggle:hover,
.css-theme-switch.open .theme-switch-toggle,
.css-theme-switch:focus-within .theme-switch-toggle {
    color: var(--shq_gold);
}

.theme-switch-menu {
    border: 2px solid var(--shq_black);
    border-radius: 4px;
    box-shadow: 3px 3px 0 var(--shq_black);
}

.theme-switch-option {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: var(--shq_ink);
}

.theme-switch-option:hover,
.theme-switch-option:focus-visible {
    background: var(--shq_gold);
    color: var(--shq_ink);
}

.theme-switch-option[aria-checked="true"] {
    color: var(--shq_red);
}

.blue-box {
    background-image: radial-gradient(120% 160% at 0% 0%, rgba(107, 203, 176, 0.35), transparent 55%), radial-gradient(140% 180% at 100% 100%, rgba(47, 68, 127, 0.9), transparent 60%), linear-gradient(135deg, var(--shq_blue, #173a86), var(--shq_blue_deep, #0b2049));
}

.upcoming-date i {
    border-radius: 50%;
    background-color: var(--shq_gold);
    color: black;
    padding: 0.35rem;
    margin-right: 0.5rem;
    text-shadow: none;
    font-size: 1rem;
}

.upcoming-date i.fa-book-open {
    background-color: var(--shq_blue);
    color: white;
}

.upcoming-date i.fa-film {
    background-color: var(--shq_gold);
    color: black;
}

.featured-carousel:not(.slick-initialized) .featured-slide:not(:first-child) {
    display: none;
}
.featured-carousel .slick-slide {
    height: auto;
}
.featured-carousel .slick-track {
    display: flex;
    align-items: stretch;
}

.comic-header {
    min-height: 225px;
}

.search-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.search-field {
    caret-color: #fff;
}

.featured-carousel {
    z-index: 1;
}

@media (max-width: 768px) {
    .featured-carousel {
        overflow-x: auto;
    }
}

/* ============================================================
   SHQ GENERATIONS SKIN — MODERNIZED ARTICLE CARD
   Drop this block anywhere AFTER the existing rules in
   style_generations.css (or in a child-theme stylesheet loaded
   after it). Only the news-post card is touched.

   This skin is already dark, high-contrast, pop-art (electric
   blue / racing red / vivid yellow on near-black), with a custom
   "SonicGenerations" display font and a zigzag mask token
   (--shq_zigzag_mask) baked into :root. The Archive skin's pass
   leaned into rounded panels and gold seams; this one leans into
   what Generations already does well — hard color blocks, a
   speed-line energy, and the zigzag motif — instead of importing
   the Archive look.

   What changed & why:
   1. Card: kept flat-black surface but added a bright edge glow
      and slightly larger radius so it reads as a "screen" rather
      than a plain rectangle.
   2. Header: flat blue fill → diagonal blue→red duotone (pulled
      straight from the palette). Instead of a hard seam (or a
      zigzag edge) where it meets the featured image, that same
      duotone bleeds down over the top of the photo and fades to
      nothing, so the header dissolves into the image.
   3. Title: switched fully onto the "SonicGenerations" display
      font already loaded by the theme (previously only partly
      applied to this element), bigger and with a hard yellow
      drop shadow for that pop-art poster feel.
   4. Meta row: badges become hard-edged (not pill) chips with a
      1px black keyline, matching the poster-sticker look used by
      badges elsewhere in this skin, with clearer spacing.
   5. Featured image: subtle blue glow instead of a plain drop
      shadow, gentle hover-zoom.
   6. Body copy: sized up, spaced out, links get the thick
      white-underline-to-red-hover treatment already defined
      elsewhere in this skin, applied consistently here too.
   7. Post views + comments: post-views becomes a small yellow-on-
      black stat chip; comments get a zigzag divider instead of a
      plain rule line.
   ============================================================ */

/* ---------- 1. Card shell ---------- */
.dmbs-post.card {
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.25s ease;
    padding: 0;
}

.single .dmbs-post.card {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

/* ---------- 2. Header / "blue-box" title bar ---------- */
.dmbs-post .blue-box.jagged.negative-margin {
    /*background: linear-gradient(115deg, var(--shq_blue) 0%, var(--shq_blue) 45%, var(--shq_red) 100%) cover / center;*/
    padding: 1.35rem 1.5rem 1.35rem !important;
    margin: 0 !important;
    position: relative;
    border-radius: 0;

    background: linear-gradient(115deg, var(--shq_blue) 0%, var(--shq_blue) 45%, var(--shq_red) 100%);
}

/* ---------- 3. Title ---------- */
h2.dmbs-post-title {
    font-family: "SonicGenerations", Arial, Verdana, sans-serif;
    font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.4rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #ffffff;
    text-shadow:
        2px 2px 0 rgba(0, 0, 0, 0.55),
        0 0 18px rgba(159, 230, 255, 0.35);
    margin-bottom: 0.6rem;
}

.article-grid h2.dmbs-post-title {
    font-size: 1.25rem;
    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.55),
        0 0 12px rgba(159, 230, 255, 0.35);
}

/* ---------- 4. Meta row: timestamp, author, badges ---------- */
.dmbs-post-meta-header2 .flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}

.article-timestamp {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    margin-right: auto;
}

.article-timestamp strong a {
    color: var(--shq_gold);
    font-weight: 700;
    text-decoration: none;
}

.article-timestamp strong a:hover {
    text-decoration: underline;
}

.fb-share {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Badges drawn over artwork.
   -------------------------------------------------------------------------
   These are the same chips as everywhere else — same pill, same accents,
   same typography — but they are the only ones that land on a photograph
   (the .article-header cover image, and the thumbnails in the post grid)
   rather than on a card. The 20% tint the recipe uses elsewhere assumes a
   known surface behind it, so over an arbitrary image it stops being
   legible.

   The fix is to override the BASE, not the look: the accent still drives
   fill, border and label, it is just composited over a dark scrim instead
   of straight over whatever the photo happens to be. That keeps these
   badges inside the token system, so `lightblue` here is the same blue as
   `lightblue` in a sidebar.

   This replaces a hard-edged "poster sticker" block that predated the pill
   work and set its own colours for .lightblue (black plate, cyan label)
   and .white (gold plate, black label). Those two were the reason the
   article header still showed square chips after the badge pass. */
.dmbs-post .badge {
    /* Opaque, not translucent. A 0.78-alpha scrim measured fine over a
       dark photo but fell to 2.9:1 on a bright one, and the cover image is
       whatever the author uploaded. Going opaque makes the chip's contrast
       independent of what is behind it — which is how the two light skins
       already behave, since their white-based chips are opaque too.

       The tint stays LOW and the border goes up, which is the other of the
       two Blast reference chips: "HIDDEN PALACE" is essentially unfilled,
       carrying its accent in the outline and the label. That is not just
       stylistic here — richer fills were tried and measured, and they cost
       contrast on exactly the accents that need it most. Over this base the
       red accent falls under 4.5:1 somewhere around 26% fill, and a navy
       base (tried, for warmer-looking tints) makes it worse still because
       it lifts the chip toward the label. 22% keeps every accent clear. */
    --shq-badge-base: rgb(10, 10, 20);
    --shq-badge-fill: 22%;
    --shq-badge-edge: 62%;
    font-size: 0.72rem;
    /* Soft drop rather than the old 1px hard offset — the pill has no
       corners for a hard shadow to key against. */
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.fb-share .fa-pencil-alt {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.fb-share .fa-pencil-alt:hover {
    color: var(--shq_gold);
    transform: scale(1.15);
}

/* ---------- 5. Featured image ---------- */
.dmbs-post .dmbs-post-featured-image {
    margin: 0 !important;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 28px -6px rgba(46, 155, 255, 0.55);
}

/* Bleeds the header's blue→red duotone down over the top of the
   image, fading to nothing — the header doesn't cut off, it
   dissolves into the photo instead of handing off at a hard seam. */
.dmbs-post .dmbs-post-featured-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(115deg, var(--shq_blue) 0%, var(--shq_blue) 45%, var(--shq_red) 100%);
    -webkit-mask: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
    mask: linear-gradient(to bottom, rgba(0, 0, 0, 1), transparent);
    z-index: 2;
    pointer-events: none;
}

.dmbs-post .dmbs-post-featured-image img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    transition: transform 0.5s ease;
    object-fit: cover;
    object-position: top;
    aspect-ratio: 16/10;
}

.dmbs-post .dmbs-post-featured-image:hover img {
    transform: scale(1.035);
}

/* ---------- 6. Body copy ---------- */
.dmbs-post .card-body.dmbs-post-content {
    /*padding: 1.85rem 1.75rem 1rem;
    color: #f0f1ff;
    font-size: 1.05rem;
    line-height: 1.75;*/

    padding: 0.5em;
}

.dmbs-post .card-body.dmbs-post-content p {
    margin-bottom: 1.25em;
}

.dmbs-post .card-body.dmbs-post-content p:last-of-type {
    margin-bottom: 0;
}

.dmbs-post .card-body.dmbs-post-content strong {
    color: var(--shq_gold);
}

/* Reuses the skin's existing thick-underline link treatment,
   just made consistent specifically for this card */
.dmbs-post .card-body.dmbs-post-content a:not(.btn) {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--shq_gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.dmbs-post .card-body.dmbs-post-content a:not(.btn):hover {
    color: var(--shq_red);
    text-decoration-color: var(--shq_red);
}

/* ---------- 7. Post-views stat chip ---------- */
.dmbs-post .post-views {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin: 0.5rem 1.75rem 1.5rem;
    padding: 0.3em 0.8em;
    background: #000;
    border: 1px solid rgba(159, 230, 255, 0.3);
    border-radius: 3px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
}

.dmbs-post .post-views .post-views-icon {
    color: var(--shq_gold);
}

.dmbs-post .post-views .post-views-count {
    font-weight: 800;
    color: var(--shq_gold);
}

/* ---------- 8. Comments footer panel ---------- */
.dmbs-post footer.comments-footer {
    margin: 0;
    padding: 0 1.75rem 1.75rem;
}

.dmbs-post .dmbs-comments {
    margin: 0 1.75rem 1.75rem;
    padding-top: 1.5rem;
    position: relative;
}

/* Zigzag divider instead of a plain rule, echoing the header edge */
.dmbs-post .dmbs-comments::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: rgba(255, 255, 255, 0.25);
    -webkit-mask: var(--shq_zigzag_mask) repeat-x left center / calc(var(--shq_zigzag_period) * 0.7) 100%;
    mask: var(--shq_zigzag_mask) repeat-x left center / calc(var(--shq_zigzag_period) * 0.7) 100%;
}

@media (max-width: 600px) {
    .dmbs-post .blue-box.jagged.negative-margin {
        padding: 1.1rem 1.1rem 1.3rem !important;
    }
    .dmbs-post .card-body.dmbs-post-content,
    .dmbs-post footer.comments-footer,
    .dmbs-post .dmbs-comments {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }
    .dmbs-post .post-views {
        margin-left: 1.1rem;
    }
    h2.dmbs-post-title {
        font-size: 1.5rem;
    }
}

.white-filter {
    filter: brightness(0) invert(1);
}

.blastApp .leftSubArea {
    background-color: #000 !important;
}

.pageSubtitle.pageSubtitle--lead {
    display: none;
}

/* ============================================================================
   SHQ CHECKERS — IDENTITY LAYER
   ============================================================================

   Everything above this line is the Generations chassis with a blue palette
   swapped in. That alone would give a perfectly usable dark-blue skin, but it
   would read as "Generations with the colour turned down" rather than as its
   own thing.

   This section is what makes it Checkers. It is deliberately small and it
   only touches surfaces where the motif can actually do some work — the seams
   between panels, the head of a card, the divider rules. A checkerboard is a
   loud pattern; used on every surface it stops being a motif and becomes
   noise, so the rule followed throughout is:

       the board goes where two things MEET, never where you have to READ.

   Hence: nav skirt, footer crest, sidebar edge, card head, dividers, section
   rules — and never behind body copy, never inside a card body, never under a
   form field.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Utilities
   ---------------------------------------------------------------------------
   Two classes so templates can reach the motif without re-deriving the
   geometry. Both take their height from whatever you set on them; the band
   always resolves to exactly two rows because size tracks height. */

.shq-checker-band {
    display: block;
    height: var(--shq_checker_band_h);
    background-image: var(--shq_checker_band);
    background-size: var(--shq_checker_band_h) var(--shq_checker_band_h);
    background-repeat: repeat-x;
}

.shq-checker-field {
    background-color: var(--shq_navy_950);
    background-image: var(--shq_checker_bg);
    background-size: var(--shq_checker_tile) var(--shq_checker_tile);
}

/* A horizontal rule as a checker run. Used for <hr> and for the section
   dividers the theme draws with a plain border. */
hr,
.shq-rule {
    height: calc(var(--shq_checker_band_h) * 0.55);
    border: 0;
    margin: 2rem 0;
    background-image: var(--shq_checker_band);
    background-size: calc(var(--shq_checker_band_h) * 0.55) calc(var(--shq_checker_band_h) * 0.55);
    background-repeat: repeat-x;
    opacity: 0.75;
}

/* ---------------------------------------------------------------------------
   2. Article card head
   ---------------------------------------------------------------------------
   Generations gives the head a blue->red diagonal duotone. With one hue that
   gradient has nothing to travel between, so Checkers does the opposite: a
   flat-ish royal-to-navy field with the board laid over the LEFT end at low
   alpha, fading out before it reaches the title. The head still has a
   direction and a focal point, it just comes from pattern density rather than
   from hue. */

.dmbs-post .blue-box.jagged.negative-margin,
.blue-box {
    background-color: var(--shq_royal_600);
    background-image: linear-gradient(115deg, var(--shq_royal_500) 0%, var(--shq_royal_600) 52%, var(--shq_navy_800) 100%);
    position: relative;
    isolation: isolate;
}

.dmbs-post .blue-box.jagged.negative-margin::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--shq_checker_bg);
    background-size: calc(var(--shq_checker_size) * 0.75) calc(var(--shq_checker_size) * 0.75);
    /* Board on the left, clean field under the title on the right. */
    -webkit-mask: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, 0.35) 38%, transparent 68%);
    mask: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, 0.35) 38%, transparent 68%);
    opacity: 0.85;
}

/* The "speed streak" under a card head. Generations draws it as a dashed gold
   rule; here it is the band, which is the same idea one motif over.

   content/position/inset are restated rather than inherited. The parent
   framework is what actually gives this pseudo a box (the skin files only ever
   repaint it), so restating them means the streak still draws if the parent
   rule ever moves or is dropped, and changes nothing if it doesn't. */
.blue-box.jagged:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100% !important;
    height: 10px !important;
    background-color: transparent !important;
    background-image: var(--shq_checker_band) !important;
    background-size: 10px 10px !important;
    background-repeat: repeat-x !important;
    pointer-events: none;
}

/* Sticky / featured posts. Generations turns these red; with one hue the only
   way to say "this one matters" is to move it UP the ladder, so a sticky head
   is brighter than a normal one rather than a different colour. */
.sticky .article-header,
.single .sticky .blue-box,
.sticky .blue-box.jagged.negative-margin {
    background-color: var(--shq_sapphire) !important;
    background-image: linear-gradient(115deg, var(--shq_azure) 0%, var(--shq_sapphire) 55%, var(--shq_royal_500) 100%) !important;
}

.sticky .article-header:before {
    background: linear-gradient(to bottom, transparent 5%, var(--shq_sapphire) 95%) !important;
}

/* ---------------------------------------------------------------------------
   3. Titles
   ---------------------------------------------------------------------------
   Generations' hard black offset + yellow halo becomes a hard navy offset + a
   cyan halo. The halo is doing real work on this skin, not decoration: white
   text on a mid-royal head is fine for contrast but visually flat, and the
   glow is what separates the glyphs from the board behind them. */

h2.dmbs-post-title,
.article-header h2,
.blue-box .dmbs-post-title {
    color: #ffffff !important;
    text-shadow:
        2px 2px 0 rgba(2, 6, 15, 0.7),
        0 0 18px rgba(88, 196, 255, 0.4) !important;
}

.article-grid h2.dmbs-post-title {
    text-shadow:
        1px 1px 0 rgba(2, 6, 15, 0.7),
        0 0 12px rgba(88, 196, 255, 0.35) !important;
}

/* The h1 outline treatment: navy inner stroke, sky outer, instead of
   navy + yellow. */
.h1-bg h1 {
    --inner: var(--shq_navy_abyss);
    --outer: var(--shq_sky);
}

/* ---------------------------------------------------------------------------
   4. Cards
   ---------------------------------------------------------------------------
   Cards sit ON the board, so they need a hard edge to separate from it —
   otherwise the pattern reads through the boundary and the card loses its
   shape. A 1px ice hairline plus a real shadow does it. */

.dmbs-main .card,
.dmbs-post.card,
article.dmbs-post,
.box {
    background-color: var(--shq_navy_900);
    border: 1px solid rgba(159, 230, 255, 0.14);
    box-shadow:
        0 18px 40px rgba(2, 6, 15, 0.55),
        0 2px 6px rgba(2, 6, 15, 0.4);
}

.dmbs-post.card:hover {
    border-color: rgba(159, 230, 255, 0.3);
}

.dmbs-post .dmbs-post-featured-image {
    box-shadow: 0 0 28px -6px rgba(46, 155, 255, 0.6);
}

.dmbs-post .dmbs-post-featured-image::before {
    background: linear-gradient(115deg, var(--shq_royal_500) 0%, var(--shq_royal_600) 52%, var(--shq_navy_800) 100%);
}

/* ---------------------------------------------------------------------------
   5. Dividers
   ---------------------------------------------------------------------------
   The comments divider already inherits the checker mask from
   --shq_zigzag_mask. The one thing it needs is its own period: the mask
   stretches to the element's height, and at the inherited 44px period on an
   8px-tall strip the squares come out 22x4 — stripes, not squares. Sizing the
   period to twice the height fixes the aspect. */

.dmbs-post .dmbs-comments::before {
    height: 12px;
    background: var(--shq_sky);
    opacity: 0.7;
    -webkit-mask: var(--shq_zigzag_mask) repeat-x left center / 24px 100%;
    mask: var(--shq_zigzag_mask) repeat-x left center / 24px 100%;
}

/* ---------------------------------------------------------------------------
   6. Sidebar
   --------------------------------------------------------------------------- */

.dmbs-left h3.widgettitle,
.dmbs-widget-left h3.widgettitle {
    color: #ffffff !important;
}

.dmbs-left a,
.dmbs-widget-left a {
    color: var(--shq_frost);
}

.dmbs-left a:hover,
.dmbs-widget-left a:hover {
    color: var(--shq_ice);
}

/* ---------------------------------------------------------------------------
   7. Links and controls
   ---------------------------------------------------------------------------
   In-content links: Generations underlines in white and flips to red on
   hover. Here the resting underline is sky and the hover fills to ice, so the
   hover is a step up in brightness rather than a change of colour. */

.dmbs-post-content a:not(.btn),
.card-body a:not(.btn),
.dmbs-post .card-body.dmbs-post-content a:not(.btn) {
    color: var(--shq_frost);
    text-decoration-color: var(--shq_sky);
}

.dmbs-post-content a:not(.btn):hover,
.card-body a:not(.btn):hover,
.dmbs-post .card-body.dmbs-post-content a:not(.btn):hover {
    color: var(--shq_ice);
    text-decoration-color: var(--shq_ice);
}

.dmbs-post .card-body.dmbs-post-content strong {
    color: var(--shq_ice);
}

/* Focus. The Generations ring is --shq_blue, which on this skin is a
   structural colour and nearly invisible against a royal panel. Focus has to
   win against every surface in the file, so it uses the top of the ladder. */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-main:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--shq_ice);
    outline-offset: 3px;
}

::selection {
    background: var(--shq_sky);
    color: var(--shq_navy_abyss);
}

/* ---------------------------------------------------------------------------
   8. Footer
   --------------------------------------------------------------------------- */

.main-footer {
    background: var(--shq_navy_abyss);
    color: var(--shq_frost);
}

.main-footer a,
.main-footer a:hover {
    color: var(--shq_ice);
}

.main-footer a:hover {
    color: #ffffff;
}

/* ---------------------------------------------------------------------------
   9. Scrollbar
   ---------------------------------------------------------------------------
   Worth setting explicitly: the page is near-black, and a default light
   scrollbar track is a bright vertical stripe down the side of the design. */

* {
    scrollbar-color: var(--shq_sapphire) var(--shq_navy_900);
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--shq_navy_900);
}

::-webkit-scrollbar-thumb {
    background: var(--shq_sapphire);
    border: 3px solid var(--shq_navy_900);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--shq_azure);
}

/* ---------------------------------------------------------------------------
   10. Semantic states — the one carve-out from the blue-only rule
   ---------------------------------------------------------------------------
   Success, warning and error panels keep green and red. "All one hue" is a
   look; "this failed" is information, and the second outranks the first.

   The only fix needed is .label-bad, which inherits --shq_red for its text.
   On Generations that token WAS red and the label read correctly on its dark
   maroon plate; here the token is azure, so the label has to name its colour
   directly instead of borrowing the accent. */

.label-bad {
    color: #ff9999;
}

/* ---------------------------------------------------------------------------
   11. Responsive + accessibility
   ---------------------------------------------------------------------------
   The board scales down on small screens. A 34px square is about a fifth of a
   phone's width, which turns texture into wallpaper; 22px keeps the same
   density relative to the viewport.

   The reduced-motion rule drops background-attachment: fixed, which on iOS is
   both a repaint cost and a source of visible jitter while scrolling. The
   reduced-transparency rule flattens the board entirely for anyone who has
   asked the OS to calm busy backgrounds down. */

@media (max-width: 768px) {
    :root {
        --shq_checker_size: 22px;
        --shq_checker_band_h: 16px;
        --shq_checker_seam_w: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.dmbs-body,
    body {
        background-attachment: scroll !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    body.dmbs-body,
    body {
        background-image: none !important;
        background-color: var(--shq_navy_950) !important;
    }
    .dmbs-post .blue-box.jagged.negative-margin::before {
        display: none;
    }
}

/* Forced-colors: strip every decorative board so the OS palette is the only
   thing drawing, otherwise the bands survive as solid blocks. */
@media (forced-colors: active) {
    .main-menu .menu-section::after,
    .menu-section::after,
    .main-footer::before,
    .menu-section-admin::after,
    .dmbs-left::before,
    .dmbs-post .blue-box.jagged.negative-margin::before,
    .blue-box.jagged:after {
        display: none !important;
    }
}