/* old-slop.css */
body {
    background-color: #000080 !important;
    background-image: radial-gradient(#87ceeb 15%, transparent 16%), radial-gradient(#87ceeb 15%, transparent 16%) !important;
    background-size: 60px 60px !important;
    background-position: 0 0, 30px 30px !important;
    color: #000000 !important;
    font-family: "MS Sans Serif", "Verdana", "Times New Roman", serif !important;
    margin: 0 !important;
    padding: 20px !important;
    text-align: center !important;
}

/* Internet 2026 Banner (Top Ad) */
#slop-banner {
    background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') repeat !important;
    background-color: #000 !important;
    color: #ff0 !important;
    padding: 5px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    border: 3px outset #ccc !important;
    width: 468px !important; /* classic ad banner size */
    height: 60px !important;
    margin: 0 auto 10px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
#slop-banner:hover {
    border-style: inset !important;
}

/* Blackout Transition */
#slop-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease-in-out;
}
#slop-transition.active {
    opacity: 1;
    pointer-events: all;
}

/* Containers */
.container {
    max-width: 800px !important;
    margin: 0 auto !important;
    background-color: #c0c0c0 !important;
    border: 4px outset #fff !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: row-reverse !important; /* Put sidebar on left in old days? Wait, footer/header might break. */
}

/* Revert to block layout to emulate tables */
.container {
    display: block !important;
}

header, footer, section, .main-content, .widget, .about-section, .about-section.reverse {
    display: block !important;
    width: auto !important;
    float: none !important;
    text-align: left !important;
    margin: 5px 0 !important;
}

.footer-content {
    display: block !important;
    text-align: center !important;
}

/* Make aside act like a left sidebar table column */
.main-content {
    display: table !important;
    width: 100% !important;
}

/* Disable click-to-zoom logic */
.gallery-image-card, .gallery-grid img, .image-grid img, #lightbox, .featured-item img {
    pointer-events: none !important;
}
#lightbox {
    display: none !important;
}

/* Style the hello cycler */
#hello-cycler {
    background-color: #ff00ff !important;
    color: #fff !important;
    font-family: "Comic Sans MS", cursive !important;
    font-weight: bold !important;
    text-decoration: blink !important;
    animation: blinker 0.5s linear infinite !important;
    padding: 2px 10px !important;
    border: 3px dashed #ffff00 !important;
    display: inline-block !important;
}

main {
    display: table-cell !important;
    vertical-align: top !important;
    padding: 10px !important;
    background-color: #ffffff !important;
    border: 2px inset #fff !important;
}

aside {
    display: table-cell !important;
    vertical-align: top !important;
    width: 200px !important;
    padding: 5px !important;
    background-color: #008080 !important;
    border: 2px inset #fff !important;
}

aside .widget {
    background-color: #c0c0c0 !important;
    border: 2px outset #fff !important;
    margin-bottom: 10px !important;
    padding: 5px !important;
}
aside h4 {
    background-color: #000080 !important;
    color: #fff !important;
    margin: -5px -5px 5px -5px !important;
    padding: 2px !important;
    font-size: 12px !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #ff0000 !important;
    text-decoration: underline !important;
    font-weight: bold !important;
    margin: 5px 0 !important;
    font-family: "Comic Sans MS", "Times New Roman" !important;
}

p, div, span, li {
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-family: "Verdana", sans-serif !important;
}

a {
    color: #0000ee !important;
    text-decoration: underline !important;
}
a:visited {
    color: #551a8b !important;
}
a:hover {
    color: #ff0000 !important;
    background-color: #ffff00 !important;
}

img {
    border: 2px solid #000 !important;
    max-width: 100% !important;
    display: inline-block !important;
}

/* Override existing grid/flex stuff */
.games-grid {
    display: block !important;
}

.game-item {
    display: inline-block !important;
    margin: 5px !important;
    width: 45% !important;
    border: 3px outset #aaa !important;
    background: #c0c0c0 !important;
    vertical-align: top !important;
}
.game-stats-bar {
    background: #000080 !important;
    color: #fff !important;
    font-size: 11px !important;
    padding: 2px !important;
}
.ribbon-icon {
    display: none !important; /* Hide modern SVG ribbon */
}

nav {
    display: block !important;
    background-color: #c0c0c0 !important;
    border: 2px outset #fff !important;
    padding: 5px !important;
    margin-bottom: 10px !important;
}

nav a {
    display: inline-block !important;
    padding: 2px 5px !important;
    background: #c0c0c0 !important;
    color: #000 !important;
    margin: 2px !important;
    text-decoration: none !important;
    border: 2px outset #fff !important;
    font-size: 12px !important;
}
nav a:hover {
    border-style: inset !important;
    background-color: #ccc !important;
    color: #000 !important;
}

.signature {
    filter: invert(1) !important;
    display: block !important;
    margin: 20px auto !important;
    border: none !important;
    width: 350px !important;
}

footer {
    border-top: 2px ridge #fff !important;
    margin-top: 20px !important;
    padding-top: 10px !important;
    text-align: center !important;
}

/* Revert button hidden in slop theme */
#revert-slop-btn {
    display: none !important;
}

.showcase-footer {
    display: block !important;
    background: #ffff00 !important;
    border: 2px solid #f00 !important;
    color: #000 !important;
    padding: 5px !important;
    margin-top: 10px !important;
}
.footer-stat {
    display: inline-block !important;
    margin: 0 10px !important;
}
.footer-stat-value {
    font-weight: bold !important;
    color: #f00 !important;
}
.footer-stat-label {
    font-size: 10px !important;
}

ul {
    list-style-type: square !important;
    padding-left: 20px !important;
}

/* Gallery Grid Side-by-Side */
#gallery-dynamic-grid {
    display: block !important;
    text-align: center !important;
}

.gallery-image-card {
    display: inline-block !important;
    width: 45% !important;
    margin: 5px !important;
    vertical-align: top !important;
    border: 4px ridge #c0c0c0 !important;
    background-color: #ffffff !important;
    padding: 5px !important;
    box-sizing: border-box !important;
}

.gallery-image-card img {
    width: 100% !important;
    height: auto !important;
    border: 2px inset #fff !important;
}
.click-metadata {
    font-size: 11px !important;
    font-family: "MS Sans Serif", sans-serif !important;
    color: #000 !important;
    margin-top: 5px !important;
}