/* ==========================================================================
   RETRO ARCADE PORTAL DESIGN SYSTEM
   Clean Legible Typography, Comments at Bottom, Zero CLS Lock
   ========================================================================== */

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

html, body {
    background-color: #000000 !important;
    color: #ffffff;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
    font-size: 13px;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
    width: 100% !important;
    -webkit-font-smoothing: antialiased;
}

/* Hide GeneratePress Default Nav & Footer Wrappers */
.site-header, 
.site-footer, 
.site-info, 
.main-navigation {
    display: none !important;
}

/* Override Theme Container & Grid Constraints */
html body #page,
html body .grid-container,
html body .site,
html body #content,
html body .content-area,
html body .site-main,
html body .site-content,
html body #primary,
html body #main {
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.inside-article {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* --- Global page width ---------------------------------------------------
   Every wrapper below (container, header, nav, footer) is capped at
   --ra-shell-max rather than a hard 1360px, because on the single-game layout
   the page width is what decides the size of the game.

   That column is the container minus 32px of padding, the 400px sidebar and
   the 16px grid gap - 448px - and the player box is 4:3, so the widest page
   whose game still fits above the fold is

       (100vh - 132px) * 1.3334 + 448px          (132px = --ra-player-chrome)

   which is folded into a single multiplication here: LiteSpeed's CSS minifier
   strips the spaces around "+" inside calc(), and calc() requires them, so any
   declaration containing one is silently discarded by the browser. 1.57 is the
   largest factor that stays at or below the exact figure across the range that
   matters - exact at 100vh = 816px, where the 1360px cap takes over, and a few
   dozen px narrow on shorter viewports. Erring narrow is the safe direction:
   narrow means the game still fills the column, wide means black margin down
   both sides of it. Recompute as (1.3334 * (816 - 132) + 448) / 816 if the
   sidebar, the padding or --ra-player-chrome change.

   Below 1081px .ra-single-layout drops the sidebar and goes single column, so
   the 448px term is wrong there and the page keeps the flat cap - at those
   widths the window is narrower than the cap anyway, so it never binds. */
/* The palette tokens this file's var() calls resolve against live in their
   own sheet, assets/css/tokens.css, and deliberately not here - see the
   header of that file for why the path has to be one nobody has cached. */
:root {
    --ra-shell-max: 1360px;
}

@media (min-width: 1081px) {
    :root {
        --ra-shell-max: min(1360px, max(880px, calc(100vh * 1.66)));
    }
}

/* --- Clean Self-Contained Page Wrappers --- */
.ra-page-wrapper {
    background-color: #000000 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0 auto !important;
}

.ra-body-container {
    max-width: var(--ra-shell-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 16px 16px 40px 16px !important;
    width: 100% !important;
    flex: 1;
}

.rg-site-main,
.ra-main-col {
    width: 100% !important;
}

/* --- Authentic Retro Site Header & Navbar --- */
.ra-site-header {
    background: #111111;
    border-bottom: 2px solid #ffffff;
    width: 100%;
    /* The dropdowns hang down over the page, and .rg-player-body below carries
       z-index:10. The stacking context used to come from .ra-primary-nav's own
       z-index:100; now that the nav is an inline part of the row - and
       container-type on .ra-header-inner makes that a stacking context of its
       own - the whole header has to be lifted instead. */
    position: relative;
    z-index: 200;
}

/* One row: logo | consoles menu | random | search. The brand row and the
   38px nav bar used to be stacked, which cost ~48px of vertical space - and
   vertical space here is game height, see --ra-player-chrome below.

   The logo takes the leftover space with margin-right:auto so the menu and the
   actions stay grouped on the right. Everything is nowrap and shrink-proof
   except the search box, which is the only element allowed to give. */
.ra-header-inner {
    container-type: inline-size;
    max-width: var(--ra-shell-max);
    margin: 0 auto;
    padding: 8px 16px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
}

/* The header is capped at --ra-shell-max, which is derived from the viewport
   *height*, so a wide-but-short window gets a narrow header and a width media
   query would never fire - these have to be container queries. Each step drops
   the least useful pixels first: the tagline, then the nav padding, then the
   search field, so the row survives down to the 880px floor. */
@container (max-width: 1220px) {
    .ra-logo-sub {
        display: none;
    }
}

@container (max-width: 1120px) {
    .ra-nav-menu li a,
    .ra-nav-menu li button.ra-btn-more-toggle {
        padding: 8px 8px;
        font-size: 11px;
    }
    .ra-header-search {
        flex-basis: 150px;
    }
}

@container (max-width: 1000px) {
    .ra-logo-title {
        font-size: 13px !important;
    }
    .ra-header-search {
        flex-basis: 120px;
    }
}

/* Below the single-game layout breakpoint there is no game to keep above the
   fold, so the row is allowed to become two: brand + actions, menu underneath.
   The menu wraps rather than scrolling - an overflow container would clip the
   dropdowns. */
@media (max-width: 860px) {
    .ra-header-inner {
        flex-wrap: wrap;
    }
    .ra-primary-nav {
        order: 3;
        width: 100%;
        margin: 0 !important;
    }
    .ra-nav-menu {
        flex-wrap: wrap !important;
        height: auto;
    }
    .ra-nav-menu li {
        height: auto;
    }
}

@media (max-width: 640px) {
    .ra-header-actions {
        flex: 1 1 100%;
        order: 2;
    }
    .ra-header-search {
        flex: 1 1 auto;
    }
}

.ra-brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    height: 38px;
    flex-shrink: 0;
    margin-right: auto;
}

.ra-logo-img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 4px;
    border: 1px solid #ffff00;
    object-fit: cover;
    display: block !important;
}

.ra-footer-brand-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.ra-footer-logo-img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 4px;
    border: 1px solid #ffff00;
    object-fit: cover;
    display: block !important;
}

.ra-logo-icon {
    font-size: 28px;
    line-height: 28px;
}

.ra-brand-text {
    display: flex;
    flex-direction: column;
}

.ra-logo-title {
    color: #ffff00;
    font-family: 'Press Start 2P', 'Press Start 2P Fallback', monospace !important;
    font-size: 15px !important;
    letter-spacing: 1px;
    margin: 0 !important;
    line-height: 1 !important;
}

.ra-logo-sub {
    color: #c0c0c0;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    font-weight: bold;
    letter-spacing: 1.5px;
    margin-top: 2px !important;
    line-height: 1 !important;
}

.ra-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 1;
    min-width: 0;
}

.ra-btn-random {
    background: #333333;
    color: #ffff00;
    border: 1px solid #ffffff;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
}

.ra-btn-random:hover {
    background: #444444;
}

.ra-header-search {
    display: flex;
    height: 30px;
    flex: 0 1 190px;
    min-width: 0;
}

.ra-hsearch-input {
    width: 100% !important;
    min-width: 0 !important;
    background: #1e1e28 !important;
    border: 1px solid #555577 !important;
    color: #ffffff !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    outline: none !important;
    border-radius: 3px !important;
}

.ra-hsearch-input::placeholder {
    color: #bbbbbb !important;
    opacity: 1 !important;
}

.ra-hsearch-input:focus {
    border-color: #ffff00 !important;
    background: #252538 !important;
    box-shadow: 0 0 6px rgba(255, 255, 0, 0.4) !important;
}

.ra-hsearch-btn {
    background: #333333;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-left: none;
    padding: 0 10px;
    cursor: pointer;
}

/* --- Primary Navigation (inline in the header row) --- */
/* align-self:stretch plus the negative margin makes the nav items span the
   header edge to edge including its 8px padding, so .ra-dropdown-menu's
   top:100% lands exactly on the header's bottom border with no dead gap for
   the pointer to cross on its way into the menu. */
.ra-primary-nav {
    background: transparent;
    border: 0;
    align-self: stretch;
    margin: -8px 0;
    flex-shrink: 0;
    position: relative !important;
    z-index: 100 !important;
    box-sizing: border-box !important;
}

.ra-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap !important;
    align-items: center;
    position: relative !important;
    height: 100%;
    overflow: visible !important;
}

.ra-nav-menu li {
    flex-shrink: 0 !important;
    height: 100%;
    display: flex;
    align-items: center;
}

/* The nav carried no font-family of its own, so it inherited the Arial
   fallback from body while every other chrome element (logo, footer brand,
   A-Z bar) ran on the design fonts. Outfit matches the game titles and,
   unlike Press Start 2P, keeps the 38px bar from overflowing into MORE. */
.ra-nav-menu li a,
.ra-nav-menu li button.ra-btn-more-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    color: #ffff00;
    font-family: 'Outfit', 'Outfit Fallback', sans-serif !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    border-right: 1px solid #333333;
    white-space: nowrap !important;
}

/* MORE DROPDOWN STYLING */
.ra-nav-more-item {
    position: relative !important;
}

/* The dropdown triggers are <button> so they are not crawled as links; these
   declarations restore the font and metrics they inherited as <a>. */
.ra-btn-more-toggle {
    color: #ffff00 !important;
    background: transparent !important;
    cursor: pointer !important;
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    line-height: inherit;
    border: 0;
    border-right: 1px solid #333333;
    border-radius: 0;
    padding: 8px 10px;
    height: 100%;
}

.ra-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #181824;
    border: 2px solid #ffff00;
    box-shadow: 0 8px 24px rgba(0,0,0,0.9);
    list-style: none;
    padding: 4px 0;
    margin: 0;
    min-width: 220px;
    z-index: 999999 !important;
}

.ra-nav-more-item:hover .ra-dropdown-menu,
.ra-nav-more-item:focus-within .ra-dropdown-menu {
    display: block !important;
}

.ra-dropdown-menu li a {
    display: block !important;
    padding: 8px 14px !important;
    color: #ffffff !important;
    font-size: 12px !important;
    text-decoration: none !important;
    border-bottom: 1px solid #2a2a38 !important;
    border-right: none !important;
    white-space: nowrap !important;
}

.ra-dropdown-menu li a:hover {
    background: #ffff00 !important;
    color: #000000 !important;
    font-weight: bold !important;
}

.ra-nav-menu li a:hover,
.ra-nav-menu li a.active,
.ra-btn-more-toggle:hover,
.ra-btn-more-toggle.active {
    background: #333333 !important;
    color: #ffffff !important;
}

.ra-nav-badge {
    color: #888888;
    font-size: 10px;
}

/* --- Featured Game Spotlight (Homepage Hero Box) --- */
.ra-spotlight-box {
    margin-bottom: 16px;
    width: 100%;
}

.ra-spotlight-body {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

@media (max-width: 640px) {
    .ra-spotlight-body {
        flex-direction: column;
    }
}

.ra-spotlight-cover img {
    border: 1px solid #ffffff;
    width: 130px;
    height: 170px;
    object-fit: cover;
    display: block;
}

.ra-spotlight-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ra-spotlight-badge {
    display: inline-block;
    background: #ffff00;
    color: #000000;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 6px;
    align-self: flex-start;
}

.ra-spotlight-title {
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    margin: 0;
}

.ra-spotlight-meta {
    color: #c0c0c0;
    font-size: 12px;
    margin: 0;
}

.ra-spotlight-excerpt {
    color: #dddddd;
    font-size: 13px;
    line-height: 1.5;
    margin: 4px 0 10px 0;
}

.ra-btn-play-now {
    display: inline-block;
    background: #00aa00;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.2s;
}

.ra-btn-play-now:hover {
    background: #008800;
}

/* --- System Statistics Counter Bar --- */
.ra-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
    background: #111111;
    border: 1px solid #ffffff;
    padding: 10px;
    text-align: center;
    width: 100%;
}

@media (max-width: 600px) {
    .ra-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

.ra-stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ra-stat-val {
    color: #ffff00;
    font-family: Arial, "Arial Black", sans-serif;
    font-size: 18px;
    font-weight: bold;
}

.ra-stat-lbl {
    color: #c0c0c0;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* --- Authentic Past Play Section Box (`rg-box`) --- */
.rg-box {
    border: 1px solid #ffffff;
    background: #000000;
    margin-bottom: 16px;
    width: 100%;
    contain: style layout;
}

.rg-box-header {
    background: #333333;
    color: #ffff00;
    font-family: Arial, "Helvetica Neue", sans-serif !important;
    font-weight: bold !important;
    font-size: 14px !important;
    padding: 4px 10px;
    border-bottom: 1px solid #ffffff;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    line-height: 20px;
    contain: strict;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rg-header-stats {
    font-size: 11px !important;
    color: #ffff00 !important;
    font-weight: normal !important;
    height: 20px !important;
    line-height: 20px !important;
    contain: strict !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.rg-header-actions {
    font-size: 11px !important;
    height: 20px !important;
    line-height: 20px !important;
    contain: strict !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.ra-action-link {
    color: #ffff00;
    text-decoration: none;
    font-weight: bold;
}

/* Authentic Retro 8-Bit Interactive 5-Star Rating Widget (Zero CLS) */
.ra-interactive-stars {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    cursor: pointer;
    user-select: none;
    height: 32px;
    line-height: 32px;
    contain: layout size;
    overflow: hidden;
}

.ra-star-item {
    font-size: 26px;
    color: #444455;
    transition: color 0.12s ease;
    cursor: pointer;
    line-height: 1;
    display: inline-block;
    width: 28px;
    height: 28px;
    text-align: center;
}

/* The lit star was #ffcc00 while .ra-star-label-text right below it was
   #ffff00, so the widget disagreed with itself. Both are the accent now. */
.ra-star-item:hover,
.ra-star-item.hovered,
.ra-star-item.active {
    color: var(--ra-accent);
    text-shadow: 0 0 8px rgba(255, 255, 0, 0.8);
}

.ra-star-label-text {
    font-size: 11px;
    color: #ffff00;
    font-weight: bold;
    margin-left: 6px;
    white-space: nowrap;
    display: inline-block;
    min-width: 140px;
    height: 24px;
    line-height: 24px;
    overflow: hidden;
}

.ra-action-link:hover {
    text-decoration: underline;
}

/* Social Media Sharing Bar */
.ra-social-share-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #111116;
    border: 1px solid #222233;
    padding: 8px 12px;
    margin-top: 10px;
    border-radius: 4px;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
}

.ra-share-label {
    font-size: 11px;
    color: #ffff00;
    font-weight: bold;
}

.ra-social-share-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ra-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    border-radius: 3px;
    transition: filter 0.15s ease, transform 0.15s ease;
    cursor: pointer;
    border: none;
    line-height: 1;
}

.ra-share-btn:hover {
    filter: brightness(1.2);
    transform: translateY(-1px);
}

.share-fb { background: #0b5ed7; }   /* darkened for 4.5:1 with white text */
.share-tw { background: #000000; border: 1px solid #444455; }
.share-tg { background: #0069a3; }   /* darkened for 4.5:1 with white text */
.share-wa { background: #0f7a4e; }   /* brand green is 1.98:1 with white */
.share-pin { background: #e60023; }
.share-copy { background: #1b5e20; border: 1px solid #4caf50; color: #a5d6a7; }

/* Authentic Classic 8-Bit A-Z Directory Dropdown Grid */
.ra-az-classic-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.ra-az-pixel-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    padding: 0 !important;
    background: #111116 !important;
    color: #ffffff !important;
    border: 1px solid #444455 !important;
    font-family: 'Press Start 2P', 'Press Start 2P Fallback', monospace, sans-serif !important;
    font-size: 10px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: all 0.1s ease !important;
    border-radius: 0 !important;
}

.ra-az-pixel-btn:hover {
    background: #00ff00 !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 8px #00ff00 !important;
    transform: scale(1.08) !important;
}

.ra-az-pixel-btn.active {
    background: #ffff00 !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    font-weight: bold !important;
    box-shadow: 0 0 8px #ffff00 !important;
}

.rg-box-body {
    padding: 10px;
    background: #000000;
    color: #ffffff;
}

/* --- Responsive Player Toolbar (Zero Cutoff & Zero Scrollbar) --- */
.ra-player-toolbar {
    background: #111111;
    border-top: 1px solid #333333;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 11px;
    color: #c0c0c0;
    width: 100%;
    box-sizing: border-box;
}

.ra-toolbar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
}

.ra-toolbar-top-row {
    padding-bottom: 6px;
    border-bottom: 1px solid #222233;
}

.ra-save-manager-row {
    padding-top: 2px;
}

.ra-toolbar-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.ra-player-toolbar kbd {
    background: #222222;
    border: 1px solid #666666;
    color: #ffff00;
    padding: 1px 4px;
    font-size: 11px;
}

.ra-btn-fullscreen {
    background: #333333;
    color: #ffff00;
    border: 1px solid #ffffff;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.ra-btn-fullscreen:hover {
    background: #444444;
    color: #ffffff;
}

/* --- Retro Lightbox Modal --- */
.ra-lightbox-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
}

.ra-lightbox-modal.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ra-lightbox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(4px);
}

.ra-lightbox-content {
    position: relative;
    z-index: 2;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    gap: 16px;
}

.ra-lb-image-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid #ffffff;
    background: #000000;
    padding: 8px;
}

.ra-lb-img {
    max-width: 80vw;
    max-height: 75vh;
    object-fit: contain;
}

.ra-lb-caption {
    color: #ffff00;
    font-size: 13px;
    margin-top: 6px;
}

.ra-lb-close, .ra-lb-prev, .ra-lb-next {
    background: #222222;
    color: #ffff00;
    border: 1px solid #ffffff;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    z-index: 3;
}

.ra-lb-close {
    position: absolute;
    top: -36px;
    right: 0;
    color: #ff3333;
}

.ra-lb-close:hover, .ra-lb-prev:hover, .ra-lb-next:hover {
    background: #444444;
}

/* --- Game Guide Grid --- */
.ra-guide-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 640px) {
    .ra-guide-grid {
        grid-template-columns: 1fr;
    }
}

.ra-guide-col {
    background: #111111;
    border: 1px solid #333333;
    padding: 12px;
}

.ra-guide-heading {
    color: #ffff00;
    font-size: 13px;
    font-weight: bold;
    margin: 0 0 8px 0;
}

.ra-guide-list {
    margin: 0;
    padding-left: 18px;
    color: #dddddd;
    font-size: 13px;
    line-height: 1.6;
}

/* --- Game Rating Widget --- */
.ra-rating-widget {
    display: flex;
    gap: 30px;
    align-items: center;
    padding: 10px 0;
}

@media (max-width: 600px) {
    .ra-rating-widget {
        flex-direction: column;
        align-items: flex-start;
    }
}

.ra-rating-score-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #111111;
    border: 1px solid #444444;
    padding: 12px 24px;
    min-width: 140px;
}

.ra-score-number {
    color: #ffff00;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
}

.ra-score-stars {
    margin: 6px 0;
    font-size: 14px;
}

.ra-score-count {
    color: #888888;
    font-size: 11px;
}

.ra-rating-vote-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ra-vote-title {
    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
}

.ra-vote-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ra-btn-star {
    background: #222222;
    color: #ffff00;
    border: 1px solid #ffffff;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.ra-btn-star:hover {
    background: #444444;
    color: #ffffff;
}

/* --- Retro Comments Form & List --- */
.ra-comment-form-wrap {
    background: #111111;
    border: 1px solid #333333;
    padding: 12px;
    margin-bottom: 16px;
}

.ra-comment-title {
    color: #ffff00;
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 10px 0;
}

.ra-retro-comment-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ra-form-row {
    display: flex;
    gap: 10px;
}

@media (max-width: 600px) {
    .ra-form-row {
        flex-direction: column;
    }
}

.ra-input-text,
.ra-textarea,
.ra-retro-comment-form input[type="text"],
.ra-retro-comment-form input[type="email"],
.ra-retro-comment-form textarea {
    background: #1e1e28 !important;
    border: 1px solid #555577 !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    width: 100% !important;
    border-radius: 4px !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.ra-input-text::placeholder,
.ra-textarea::placeholder,
.ra-retro-comment-form input::placeholder,
.ra-retro-comment-form textarea::placeholder {
    color: #bbbbbb !important;
    opacity: 1 !important;
}

.ra-input-text:focus,
.ra-textarea:focus,
.ra-retro-comment-form input:focus,
.ra-retro-comment-form textarea:focus {
    border-color: #ffff00 !important;
    background: #252538 !important;
    box-shadow: 0 0 6px rgba(255, 255, 0, 0.4) !important;
}

.ra-btn-submit-comment {
    background: #0a6b0a;   /* was #00aa00, 3.11:1 with white text */
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    align-self: flex-start;
}

.ra-btn-submit-comment:hover {
    background: #0d8210;
}

.ra-comments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ra-comment-item {
    background: #111111;
    border: 1px solid #333333;
    padding: 10px;
}

.ra-comment-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 12px;
    color: #ffff00;
}

.ra-comment-body {
    color: #dddddd;
    font-size: 13px;
    line-height: 1.5;
}

.ra-no-comments {
    color: #888888;
    font-size: 13px;
    font-style: italic;
}

/* --- Game Info Table --- */
.rg-info-table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
}

.rg-boxart-cell {
    vertical-align: top;
    width: 135px !important;
    min-width: 135px !important;
    max-width: 135px !important;
    text-align: center;
    padding-right: 10px;
}

.rg-boxart-img {
    border: 1px solid #ffffff;
    width: 120px !important;
    height: 155px !important;
    object-fit: cover !important;
    display: block;
    margin: 0 auto;
    contain: strict !important;
}

.rg-boxart-placeholder {
    border: 1px solid #ffffff;
    width: 120px !important;
    height: 155px !important;
    background: #222222;
    color: #ffff00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    margin: 0 auto;
}

.rg-boxart-caption {
    color: #c0c0c0;
    font-size: 11px;
    margin-top: 4px;
    text-align: center;
}

.rg-fields-cell {
    vertical-align: top;
}

.rg-inner-meta-table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
}

.rg-inner-meta-table td {
    padding: 4px 6px;
    font-size: 13px;
    vertical-align: top;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

.rg-lbl {
    color: #aaaaaa !important;
    text-align: left !important;
    white-space: nowrap !important;
    width: 130px !important;
}

.rg-val {
    color: #ffffff !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

.rg-yellow {
    color: #ffff00 !important;
    font-size: 15px !important;
}

/* --- Emulator Player Box --- */
.rg-player-body,
#player,
#game,
#game canvas,
#game iframe {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
}

/* The player used to be a hard 640px tall with no media query anywhere. Stacked
   above it are the site header (~60), the nav bar (38), the container padding
   (16), the layout margin (12) and .rg-box-header (29) - about 155px - so on a
   768px-tall laptop the bottom of the game fell below the fold, and it could not
   be scrolled into view while the emulator held keyboard focus.

   --ra-player-chrome is that stack plus a little breathing room; raise it here if
   the header ever grows rather than re-deriving the height below. It dropped
   from 180 to 132 when the brand row and the nav bar were merged into one
   54px line - keep it in step with --ra-shell-max's factor above.

   The box is deliberately NOT width-capped. It sits at the top of
   .ra-single-main-col with the rating box, the gamepad diagram, the info table
   and the rest stacked under it, so any cap narrower than the column leaves the
   player visibly inset from everything below it. Width therefore tracks the
   column exactly and the height is derived from it with aspect-ratio (4:3, the
   ratio every core except GBA/Game Gear uses).

   max-height is the only thing that trims that: on a short viewport a full 4:3
   box would push the bottom of the game below the fold, and the emulator holds
   keyboard focus so it cannot be scrolled back into view. When that cap bites
   the canvas is object-fit:contain and centred, so what is left over is
   symmetric black margin - the price of keeping the player flush with the page.
   On a tall enough screen the cap never applies and the game fills the box edge
   to edge. */
:root {
    --ra-player-chrome: 132px;
    --ra-player-ratio: 1.3334;      /* 4:3, as a plain number for aspect-ratio */
    --ra-player-max-h: max(320px, calc(100vh - var(--ra-player-chrome)));
}

@supports (height: 100dvh) {
    /* dvh so a mobile browser's collapsing URL bar does not resize the game. */
    :root {
        --ra-player-max-h: max(320px, calc(100dvh - var(--ra-player-chrome)));
    }
}

/* Full column width, like every other .rg-box on the page. */
.rg-box--player {
    width: 100%;
}

.rg-player-body {
    padding: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: var(--ra-player-ratio);
    height: auto !important;
    max-height: var(--ra-player-max-h);
    min-height: 320px !important;
    background: #000000;
}
/* --- Native EmulatorJS Layout (Untouched Native Emulator Controls & Menu) --- */

/* --- Clean Responsive 100% Fit Layout for Available Emulators Selector Table (Zero Scrollbar) --- */
.rg-controls-master-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin-top: 8px;
    margin-bottom: 8px;
    box-sizing: border-box !important;
}

.ra-emu-selector-table {
    table-layout: auto !important;
    width: 100% !important;
    border-collapse: collapse !important;
}

.ra-emu-selector-table th,
.ra-emu-selector-table td {
    font-size: 11px !important;
    padding: 5px 6px !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: normal !important;
}

.ra-emu-selector-table th:first-child,
.ra-emu-selector-table td:first-child {
    text-align: left !important;
    white-space: normal !important;
    word-break: normal !important;
}
/* ==========================================================================
   HORIZONTAL WIDE RETRO PLAY BUTTON OVERLAY
   ========================================================================== */
.ra-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Opaque: EmulatorJS boots behind this curtain and its control menu was
       showing through the old 85% black. */
    background: #000;
    z-index: 9999999 !important;
    pointer-events: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

.ra-loading-overlay:hover {
    cursor: pointer !important;
}

.ra-start-game-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 220px;
    padding: 14px 28px !important;
    /* Beveled cabinet button: light top-left, dark bottom-right, no radius. */
    background: #b81c26 !important;
    color: #ffe9a8 !important;
    border: 3px solid !important;
    border-color: #ff6b6b #6d0f16 #6d0f16 #ff6b6b !important;
    border-radius: 0 !important;
    font-family: 'Press Start 2P', 'Press Start 2P Fallback', monospace, sans-serif !important;
    font-size: 13px !important;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 #4a0a0e;
    box-shadow: 0 4px 0 #6d0f16, 0 0 0 3px #1a1d26;
    cursor: pointer !important;
    transition: none !important;
}

.ra-start-game-btn .ra-icon {
    width: 1.4em;
    height: 1.4em;
    color: #ffe9a8;
}

.ra-start-game-btn:hover,
.ra-start-game-btn:focus {
    background: #d4242f !important;
    outline: none !important;
}

.ra-start-game-btn:active {
    border-color: #6d0f16 #ff6b6b #ff6b6b #6d0f16 !important;
    box-shadow: 0 0 0 3px #1a1d26 !important;
    transform: translateY(4px);
}

.ra-loading-progress {
    width: 100%;
    height: 8px;
    background: #222222;
    border: 1px solid #ffffff;
    overflow: hidden;
}

.ra-loading-bar {
    width: 50%;
    height: 100%;
    background: #00aa00;
    animation: ra-progress 1.2s infinite ease-in-out;
}

@keyframes ra-progress {
    0% { width: 0%; margin-left: 0%; }
    50% { width: 60%; margin-left: 20%; }
    100% { width: 100%; margin-left: 100%; }
}

.ra-loading-sub {
    color: #888888;
    font-size: 11px;
}

.rg-player-inner,
#emulator,
#dosbox,
#game,
.dosbox-container {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: #000000 !important;
}

#dosbox canvas,
#game canvas,
.dosbox-container canvas,
.rg-player-body canvas,
.rg-player-body iframe {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* --- Controls Table (Player 1 & Player 2 Master Table) --- */
.rg-controls-full-grid {
    width: 100%;
}

.rg-controls-master-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border: 1px solid #ffffff;
    background: #000000;
}

.rg-controls-master-table th {
    background: #222222;
    color: #ffff00;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid #555555;
    padding: 6px 8px;
    text-align: left;
}

.rg-controls-master-table td {
    border: 1px solid #444444;
    padding: 6px 8px;
    color: #ffffff;
    font-size: 12px;
    vertical-align: middle;
}

.rg-player-label {
    background: #111111;
    color: #ffff00 !important;
    white-space: nowrap;
}

.rg-controls-notes {
    color: #cccccc;
    font-size: 12px;
    line-height: 1.4;
}

.rg-controls-table-wrap table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    border: 1px solid #ffffff;
}

.rg-controls-table-wrap td,
.rg-controls-table-wrap th {
    border: 1px solid #555555;
    padding: 5px 8px;
    color: #ffffff;
    font-size: 12px;
}

.rg-controls-master-table kbd,
.rg-controls-table-wrap kbd {
    background: #222222;
    border: 1px solid #666666;
    color: #ffff00;
    padding: 2px 5px;
    font-family: monospace;
    font-size: 11px;
}

/* --- Screenshots Gallery --- */
.rg-screenshots-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rg-screenshot-item {
    border: 1px solid #ffffff;
    width: 160px !important;
    height: 120px !important;
    aspect-ratio: 4 / 3 !important;
    contain: strict !important;
    overflow: hidden !important;
    transition: transform 0.2s;
}

.rg-screenshot-item:hover {
    transform: scale(1.03);
    border-color: #ffff00;
}

.rg-screenshot-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    contain: strict !important;
}

/* --- Game Description Content --- */
.rg-description-content,
.rg-description-content p,
.rg-description-content li {
    color: #dddddd !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

/* --- Catalog Grid Layout --- */
.ra-single-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 16px;
    align-items: start;
    margin-top: 12px;
}

@media (max-width: 1080px) {
    .ra-single-layout {
        grid-template-columns: 1fr;
    }
}

.ra-single-main-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.ra-single-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.ra-archive-layout {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 16px;
    width: 100%;
}

@media (max-width: 768px) {
    .ra-archive-layout {
        grid-template-columns: 1fr;
    }
}

.ra-catalog-grid {
    display: grid;
    /* 7 across on the 1360px shell leaves a 179px slot, which is still wider than
       the 140px cover the card ships, so the denser row costs nothing in sharpness
       and fits two full rows of a console showcase above the fold. */
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    width: 100%;
}

@media (max-width: 900px) {
    .ra-catalog-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .ra-catalog-grid { grid-template-columns: repeat(2, 1fr); }
}

.rg-game-card {
    border: 1px solid #444444;
    background: #111111;
    overflow: hidden;
    transition: border-color 0.2s;
    height: 100%;
}

.rg-game-card:hover {
    border-color: #ffff00;
}

.rg-card-anchor {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rg-card-cover-wrap {
    position: relative;
    aspect-ratio: 3 / 4;
    width: 100%;
    background: #000000;
    contain: strict;
    overflow: hidden;
    border-bottom: 1px solid #333333;
}

.rg-card-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rg-card-platform-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #000000;
    color: #ffff00;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 5px;
    border: 1px solid #ffff00;
}

.rg-card-info-box {
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rg-card-title {
    color: #ffffff;
    font-weight: bold;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rg-game-card:hover .rg-card-title {
    color: #ffff00;
}

.rg-card-meta-line {
    display: flex;
    gap: 5px;
    font-size: 11px;
    color: #888888;
    white-space: nowrap;
    overflow: hidden;
}

/* Now holds the spelled-out console name, so it has to be able to shrink and
   clip on the 2-column mobile grid instead of pushing the card wider. */
.rg-card-core {
    color: #ffff00;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rg-card-year {
    flex-shrink: 0;
}

/* Sidebar Menu */
.ra-platform-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ra-platform-menu a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: #111111;
    border: 1px solid #333333;
    color: #cccccc;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
}

.ra-platform-menu a:hover,
.ra-platform-menu a.active {
    background: #222222;
    color: #ffff00;
    border-color: #ffff00;
}

.ra-badge {
    color: #888888;
    font-size: 11px;
}

/* Pagination */
.ra-pagination {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    gap: 4px;
}

.ra-pagination .page-numbers {
    padding: 4px 10px;
    background: #222222;
    border: 1px solid #444444;
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
}

.ra-pagination .page-numbers:hover,
.ra-pagination .page-numbers.current {
    background: #333333;
    color: #ffff00;
    border-color: #ffff00;
}

/* --- Authentic Multi-column Retro Footer --- */
.ra-site-footer {
    background: #111111;
    border-top: 2px solid #ffffff;
    padding: 24px 0 16px 0;
    margin-top: auto;
    width: 100%;
}

.ra-footer-container {
    max-width: var(--ra-shell-max);
    margin: 0 auto;
    padding: 0 16px;
}

.ra-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #333333;
}

@media (max-width: 768px) {
    .ra-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .ra-footer-grid {
        grid-template-columns: 1fr;
    }
}

.ra-footer-brand {
    color: #ffff00;
    font-family: 'Press Start 2P', 'Press Start 2P Fallback', monospace !important;
    font-size: 13px;
}

.ra-footer-heading {
    color: #ffff00;
    font-size: 12px;
    font-weight: bold;
    margin: 0 0 10px 0;
    letter-spacing: 0.5px;
}

.ra-footer-desc {
    color: #c0c0c0;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

.ra-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ra-footer-links a {
    color: #c0c0c0;
    font-size: 12px;
    text-decoration: none;
}

.ra-footer-links a:hover {
    color: #ffff00;
    text-decoration: underline;
}

.ra-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    color: #888888;
    font-size: 11px;
    font-weight: bold;
}

.ra-footer-badge {
    color: #ffff00;
    border: 1px solid #ffff00;
    padding: 2px 6px;
}

/* ==========================================================================
   GAMEPAD API & VISUAL CONTROLLER GUIDE STYLES
   ========================================================================== */
.rg-gamepad-guide-wrap {
    margin-top: 14px;
    background: #121216;
    border: 1px solid #333344;
    border-radius: 6px;
    padding: 12px;
}

.rg-gamepad-guide-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #222233;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.rg-gp-title {
    font-size: 11px;
    font-weight: bold;
    color: #ffff00;
    font-family: 'Press Start 2P', 'Press Start 2P Fallback', monospace, sans-serif;
    letter-spacing: 0.5px;
}

.rg-gp-badge {
    font-size: 11px;
    color: #aaaaaa;
    background: #22222c;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #444455;
}

.rg-gp-badge.connected {
    color: #00ff66;
    border-color: #00ff66;
    background: rgba(0, 255, 102, 0.1);
}

.rg-gamepad-layout-container {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 16px;
    align-items: center;
}

@media (max-width: 820px) {
    .rg-gamepad-layout-container {
        grid-template-columns: 1fr;
    }
}

.rg-gamepad-svg-box {
    width: 100%;
    text-align: center;
}

.rg-gamepad-svg {
    width: 100%;
    max-width: 340px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.ra-gp-element {
    transition: transform 0.1s ease, filter 0.1s ease;
    cursor: pointer;
}

.ra-gp-element.is-pressed circle,
.ra-gp-element.is-pressed rect {
    fill: #00ff66 !important;
    stroke: #ffffff !important;
    filter: drop-shadow(0px 0px 8px #00ff66);
}

.ra-gp-element.is-pressed text {
    fill: #000000 !important;
    font-weight: bold;
}

.rg-gp-legend-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.rg-gp-legend-table th,
.rg-gp-legend-table td {
    padding: 6px 10px;
    border-bottom: 1px solid #222233;
    text-align: left;
}

.rg-gp-legend-table th {
    color: #ffff00;
    font-weight: bold;
    background: #1a1a22;
}

.rg-gp-pill {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    background: #2a2a38;
}

.pill-btn-a { background: #1a6259; }   /* was #2a9d8f, 3.32:1 */
.pill-btn-b { background: #e9c46a; color: #111111; }
.pill-btn-x { background: #a4121c; }   /* was #e63946, 4.17:1 */
.pill-dpad { background: #1b4fa8; }   /* was #3a86ff, 3.48:1 */
.pill-select, .pill-start { background: #444455; }

/* ==========================================================================
   SAVE STATE MANAGER TOOLBAR & SLOTS STYLES
   ========================================================================== */
.ra-player-toolbar {
    background: #111116;
    border-top: 1px solid #333344;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ra-toolbar-row {
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.ra-toolbar-top-row {
    font-size: 12px;
    border-bottom: 1px dashed #222233;
    padding-bottom: 8px;
}

.ra-save-manager-row {
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    white-space: nowrap !important;
    overflow-x: auto !important;
}

@media (max-width: 768px) {
    .ra-save-manager-row {
        flex-direction: column;
        align-items: stretch;
    }
}

.ra-slot-selector {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ra-slot-label {
    font-weight: bold;
    color: #ffff00;
    font-size: 11px;
}

.ra-slot-btn {
    background: #22222c;
    color: #cccccc;
    border: 1px solid #444455;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease;
}

.ra-slot-btn:hover,
.ra-slot-btn.active {
    background: #a4121c;   /* 4.16:1 before; white label now clears AA */
    color: #ffffff;
    border-color: #ffffff;
    font-weight: bold;
}

.ra-slot-badge {
    font-size: 10px;
    /* opacity dropped the effective contrast below AA; the muted look now
       comes from a real colour so the ratio is measurable. */
    color: #e8e8e8;
}

.ra-save-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ra-save-btn {
    background: #2a2a38;
    color: #ffffff;
    border: 1px solid #555566;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ra-save-btn:hover {
    background: #ffff00;
    color: #000000;
    border-color: #ffff00;
}

.ra-save-btn.btn-save { background: #2a9d8f; border-color: #2a9d8f; }
.ra-save-btn.btn-save:hover { background: #218378; color: #fff; }

.ra-save-btn.btn-load { background: #3a86ff; border-color: #3a86ff; }
.ra-save-btn.btn-load:hover { background: #2b6cb0; color: #fff; }

.ra-save-btn.btn-clear { background: #444455; border-color: #555566; }
.ra-save-btn.btn-clear:hover { background: #e63946; border-color: #e63946; color: #fff; }

.ra-save-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    z-index: 999999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.ra-save-toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   ADVANCED CATALOG FILTER BAR STYLES
   ========================================================================== */
.ra-filter-box {
    margin-bottom: 16px;
}

.ra-filter-body {
    padding: 12px 14px;
}

.ra-filter-form {
    width: 100%;
}

.ra-filter-grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr) auto;
    gap: 10px;
    align-items: flex-end;
}

@media (max-width: 1100px) {
    .ra-filter-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 640px) {
    .ra-filter-grid {
        grid-template-columns: 1fr;
    }
}

.ra-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ra-filter-group label {
    font-size: 11px;
    font-weight: bold;
    color: #ffff00;
}

.ra-filter-group input,
.ra-filter-group select {
    background: #1a1a22;
    color: #ffffff;
    border: 1px solid #444455;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    outline: none;
    transition: border-color 0.15s ease;
}

.ra-filter-group input:focus,
.ra-filter-group select:focus {
    border-color: #ffff00;
}

/* --- A-Z Alphabet Index Bar Styling --- */
.ra-az-bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.ra-az-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    background: #1e1e28;
    color: #ffffff;
    border: 1px solid #444466;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.ra-az-item:hover,
.ra-az-item.active {
    background: #ffff00 !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 6px rgba(255, 255, 0, 0.4);
}

.ra-btn-reset-filters {
    background: #e63946;
    color: #ffffff;
    border: 1px solid #e63946;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
}

.ra-btn-reset-filters:hover {
    background: #c72b38;
}

/* --- Refined Proportional Heading Typography --- */
.ra-body-container h1,
.ra-section-content h1,
.ra-game-description h1,
.entry-content h1 {
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 12px 0 8px 0 !important;
    line-height: 1.4 !important;
    color: #ffff00 !important;
}

.ra-body-container h2,
.ra-section-content h2,
.ra-game-description h2,
.entry-content h2 {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 10px 0 6px 0 !important;
    line-height: 1.4 !important;
    color: #ffffff !important;
}

.ra-body-container h3,
.ra-section-content h3,
.ra-game-description h3,
.entry-content h3 {
    font-size: 13px !important;
    font-weight: 700 !important;
    margin: 8px 0 4px 0 !important;
    line-height: 1.4 !important;
    color: #dddddd !important;
}

.ra-body-container h4,
.ra-section-content h4,
.ra-game-description h4,
.entry-content h4 {
    font-size: 13px !important;
    font-weight: bold !important;
    margin: 6px 0 4px 0 !important;
    color: #bbbbbb !important;
}

/* --- Classic American Retro Game Manual Typography --- */
.ra-game-description p,
.ra-section-content p,
.entry-content p {
    text-indent: 1.8em !important;
    text-align: left !important;
    line-height: 1.65 !important;
    margin-bottom: 12px !important;
    color: #e0e0e0 !important;
    font-size: 13px !important;
}

.ra-game-description h1 + p,
.ra-game-description h2 + p,
.ra-game-description h3 + p,
.ra-section-content h1 + p,
.ra-section-content h2 + p,
.ra-section-content h3 + p,
.entry-content h1 + p,
.entry-content h2 + p,
.entry-content h3 + p {
    text-indent: 0 !important;
}

.ra-game-description ul,
.ra-section-content ul,
.entry-content ul {
    list-style-type: none !important;
    padding-left: 1.2em !important;
    margin: 10px 0 !important;
}

.ra-game-description ul li,
.ra-section-content ul li,
.entry-content ul li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 6px;
    line-height: 1.5;
}

.ra-game-description ul li::before,
.ra-section-content ul li::before,
.entry-content ul li::before {
    content: "►";
    position: absolute;
    left: 0;
    color: #ffff00;
    font-size: 10px;
}

.ra-game-description ol,
.ra-section-content ol,
.entry-content ol {
    padding-left: 1.8em !important;
    margin: 10px 0 !important;
}

.ra-game-description ol li,
.ra-section-content ol li,
.entry-content ol li {
    margin-bottom: 6px;
    line-height: 1.5;
}

.ra-game-description hr,
.ra-section-content hr,
.entry-content hr {
    border: none;
    border-top: 1px dashed #444455;
    margin: 16px 0;
}

/* ==========================================================================
   EMULATORJS NATIVE CONTEXT MENU Z-INDEX & OVERFLOW UNBLOCKING
   ========================================================================== */
ul.ejs_context_menu {
    z-index: 99999999 !important;
    position: absolute !important;
    background: rgba(16, 16, 16, 0.95) !important;
    border: 1px solid rgba(255, 215, 0, 0.6) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.95) !important;
    border-radius: 6px !important;
    padding: 6px 0 !important;
    max-width: 220px !important;
    white-space: nowrap !important;
}

ul.ejs_context_menu li a {
    color: #e2e8f0 !important;
    font-size: 13px !important;
    font-family: Arial, sans-serif !important;
    padding: 6px 14px !important;
    text-decoration: none !important;
}

ul.ejs_context_menu li:hover {
    background: #e63946 !important;
}

.ra-player-wrapper,
.ra-player-cabinet,
#game,
.ejs_parent,
.ejs_canvas_parent {
    overflow: visible !important;
}


/* ==========================================================================
   PLAYER SHELL
   Replaces the per-engine inline styles that used to be printed by
   class-emulator.php. The overlay/button rules above were already an exact
   duplicate of those inline styles, so the markup now carries classes only.
   ========================================================================== */
.ra-player-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ra-player-wrapper--dos,
.ra-player-wrapper--javatari {
    background: #000;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ra-player-wrapper--javatari {
    flex-direction: column;
    padding: 20px 10px;
}

/* #game / #dosbox already size themselves to the wrapper further up this file. */
.ra-player-screen {
    width: 100%;
    height: 100%;
}

.ra-player-wrapper--javatari #javatari-console-panel {
    margin: 0 auto;
    box-shadow: 2px 2px 10px rgb(60, 60, 60);
}

.ra-player-wrapper--javatari #javatari {
    text-align: center;
    margin: 20px auto 0;
    padding: 0 10px;
}

.ra-player-wrapper--javatari #javatari-screen {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .7);
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

/* --- Shown in place of the player when a ROM cannot be served --- */
.ra-player-wrapper--unavailable {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: 24px;
}

.ra-unavailable {
    max-width: 560px;
    text-align: center;
    color: #e6e6e6;
}

.ra-unavailable__title {
    font-family: 'Press Start 2P', 'Press Start 2P Fallback', monospace, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #ffd700;
    margin: 0 0 14px;
}

.ra-unavailable__body {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 18px;
}

.ra-unavailable__btn {
    display: inline-block;
    padding: 10px 18px;
    background: #2b3245;
    color: #ffd700;
    border: 1px solid #4a5573;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
}

.ra-unavailable__btn:hover,
.ra-unavailable__btn:focus {
    background: #3a4358;
    color: #fff;
}

/* EmulatorJS paints its context menu at z-index 99999999, one digit above the
   start curtain, so its entries showed through before the player had started.
   The overlay is a sibling of #game and is removed on first click, so this rule
   stops applying the moment the game begins. */
#ra-loading-overlay ~ #game ul.ejs_context_menu,
#ra-loading-overlay ~ #game .ejs_context_menu {
    display: none !important;
}

/* The play curtain is absolutely positioned against .ra-player-wrapper, so the
   wrapper needs a real height. .rg-player-body defines one (640px) but the two
   elements in between had no sizing, so height:100% resolved to auto and the
   wrapper collapsed to the 300x150 default canvas box -- leaving the curtain
   covering a corner of the player instead of the whole thing. */
.ra-player-section,
.ra-player-cabinet {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ==========================================================================
   PLAYER TOOLBAR, MODALS AND MEDIA
   Moved out of style="" attributes in single-game.php / game-controls.php.
   Values are carried over verbatim so rendering is unchanged; only the
   duplication per element is gone.
   ========================================================================== */

/* --- Game title in the player header ---
   Tag-qualified: the theme styles bare h1 (margin + size) and would otherwise
   win over a plain class selector, which is what the old inline style was
   silently protecting against. */
h1.ra-game-h1-title {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    font-family: 'Outfit', 'Outfit Fallback', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* --- Action button row above the player --- */
.ra-toolbar-actions-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #161a23;
    border-bottom: 1px solid #2a2f3d;
}

.ra-action-group-left,
.ra-action-group-right {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

/* Every toolbar button shares this shape; only the colours differ.
   Tag-qualified for the same reason as the title above: the theme sets
   display on bare button elements. */
button.ra-action-btn {
    padding: 7px 12px;
    font-weight: bold;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ra-action-btn.btn-controls   { background: #2b3245; color: #ffd700; border-color: #4a5573; }
.ra-action-btn.btn-save       { background: #1e3a29; color: #4eff9e; border-color: #2e6643; }
.ra-action-btn.btn-load       { background: #1c3344; color: #4ed4ff; border-color: #2b5777; }
.ra-action-btn.btn-gamepad    { background: #332444; color: #d09eff; border-color: #583c75; }
.ra-action-btn.btn-restart    { background: #3d2f1d; color: #ffb84d; border-color: #6e522e; }
.ra-action-btn.btn-fullscreen { background: #252b3b; color: #ffffff; border-color: #3d4760; }
.ra-action-btn.btn-report     { background: #3a1515; color: #ff6666; border-color: #ff4444; }
.ra-action-btn.btn-suggest    { background: #16261a; color: #7fdc8c; border-color: #3f9e52; }

/* --- Save-slot row --- */
.ra-save-manager-row {
    padding: 8px 14px;
    background: #11141c;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.ra-slot-selector {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ra-slot-label {
    font-size: 11px;
    color: #8a94a6;
    font-weight: bold;
}

.ra-save-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ra-save-actions .ra-save-btn {
    padding: 4px 8px;
    font-size: 11px;
}

.ra-file-input-hidden { display: none; }

/* --- Modals (controls + report). JS toggles inline display, which wins. --- */
.ra-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .85);
    z-index: 99999999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.ra-modal__panel {
    background: #1a1d26;
    border: 2px solid #ffd700;
    border-radius: 8px;
    width: 100%;
    max-width: 480px;
    padding: 20px;
    box-shadow: 0 0 30px rgba(255, 215, 0, .3);
    color: #ffffff;
    font-family: 'Outfit', 'Outfit Fallback', sans-serif;
    box-sizing: border-box;
}

.ra-modal__panel--report {
    background: #181824;
    border-color: #ff4444;
    max-width: 440px;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .9);
}

.ra-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333a4d;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.ra-modal__panel--report .ra-modal__head {
    border-bottom-color: #333344;
    padding-bottom: 8px;
    margin-bottom: 14px;
}

.ra-modal__title {
    margin: 0;
    font-size: 16px;
    color: #ffd700;
    font-family: 'Press Start 2P', 'Press Start 2P Fallback', monospace;
}

.ra-modal__title--report {
    font-family: 'Outfit', 'Outfit Fallback', sans-serif;
    font-size: 15px;
    color: #ff4444;
}

.ra-modal__close {
    background: none;
    border: none;
    color: #ff6666;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

.ra-modal__close--report {
    color: #ffffff;
    font-size: 18px;
    font-weight: normal;
}

.ra-modal__note {
    font-size: 11px;
    color: #8a94a6;
    margin: 0;
    text-align: center;
}

/* --- Keyboard mapping table inside the controls modal --- */
.ra-controls-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 15px;
}

.ra-controls-table thead tr {
    background: #252b3b;
    color: #ffd700;
    text-align: left;
}

.ra-controls-table th {
    padding: 8px;
    border: 1px solid #333a4d;
}

.ra-controls-table td {
    padding: 8px;
    border: 1px solid #2a3040;
}

.ra-controls-table kbd,
kbd.ra-key {
    background: #333;
    padding: 2px 6px;
    border-radius: 3px;
}

/* --- Report form --- */
.ra-form-row { margin-bottom: 12px; }
.ra-form-row--last { margin-bottom: 14px; }

.ra-form-label {
    display: block;
    font-size: 12px;
    color: #ffff00;
    font-weight: bold;
    margin-bottom: 4px;
}

.ra-form-select,
.ra-form-textarea {
    width: 100%;
    padding: 8px;
    background: #1e1e28;
    color: #ffffff;
    border: 1px solid #555577;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
}

.ra-form-msg {
    display: none;
    color: #00ff00;
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 10px;
}

.ra-form-submit {
    background: #e63946;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 10px 16px;
    font-weight: bold;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
    width: 100%;
}

/* --- Rating feedback line --- */
.ra-rating-msg {
    display: none;
    color: #00ff00;
    font-weight: bold;
    margin-top: 4px;
    height: 18px;
    line-height: 18px;
    overflow: hidden;
}

.ra-rating-msg.is-voted {
    display: block;
    color: #ffff00;
}

/* --- Gameplay video --- */
.ra-video-body {
    padding: 10px;
    text-align: center;
}

.ra-video-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    border: 1px solid #333344;
}

.ra-video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ra-video-file {
    max-width: 100%;
    height: auto;
    border: 1px solid #333344;
}

/* --- Per-game FAQ (mirrors the FAQPage structured data) --- */
.ra-faq__item {
    border-bottom: 1px solid #2a2f3d;
    padding: 10px 0;
}

.ra-faq__item:last-child { border-bottom: none; }

.ra-faq__q {
    cursor: pointer;
    font-weight: bold;
    color: #ffd700;
    font-size: 14px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ra-faq__q::before {
    content: '▸';
    transition: transform .15s ease;
}

.ra-faq__item[open] .ra-faq__q::before { transform: rotate(90deg); }

.ra-faq__q::-webkit-details-marker { display: none; }

.ra-faq__a {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.7;
    color: #d6dae3;
}

/* ==========================================================================
   PIXEL ICON SET + MID-NINETIES FORM CHROME
   The sprite is inlined once per page; icons inherit colour from their text.
   ========================================================================== */
.ra-icon-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.ra-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    shape-rendering: crispEdges;   /* keeps the pixel grid hard-edged */
    vertical-align: -0.125em;
    flex: none;
}

/* Comment list entries keep the site's dark styling; only the icons changed. */
.ra-comment-meta .ra-icon { color: #ffd700; }

/* --- Comment submit feedback --- */
.ra-comment-msg {
    display: none;
    margin-left: 10px;
    font-weight: bold;
    color: #4eff9e;
}

.ra-comment-msg.is-visible { display: inline; }
.ra-comment-msg.is-error { color: #ff6666; }

/* Pixel icons sit inline with the surrounding label text. */
.ra-comment-title .ra-icon,
.ra-btn-submit-comment .ra-icon { margin-right: 4px; }

/* --- Active emulator badge (was an inline style at 3.11:1) --- */
.ra-active-emu-badge {
    background: #0a6b0a;
    color: #ffffff;
    padding: 2px 6px;
    font-weight: bold;
    font-size: 10px;
    border: 1px solid #ffffff;
    white-space: nowrap;
}

/* --- Footer fine print (was #777 on #111, 4.22:1) --- */
.ra-footer-note {
    margin: 4px 0 0 0;
    color: #8f8f8f;
}

/* --- Links inside game descriptions on the dark ground ---
   The theme's link blue (#1e73be) is 4.25:1 against this background, just under
   AA. Scoped to prose containers so navigation and buttons keep their own colour. */
.rg-description-content a,
.ra-game-description a,
.ra-section-content a,
.ra-faq__a a {
    color: #4da3f0;
}

.rg-description-content a:hover,
.ra-game-description a:hover,
.ra-section-content a:hover {
    color: #8cc6f7;
}

/* ==========================================================================
   SIDEBAR CONTROLS TABLE
   Moved out of style="" in game-controls.php; the elements already carried
   these classes, so every attribute there was a duplicate of a rule that
   should have lived here.
   ========================================================================== */
.rg-box-body--controls { padding: 10px; }

.rg-controls-player-title {
    font-weight: bold;
    margin-bottom: 6px;
    font-size: 13px;
    color: #ffff00;
}

.rg-controls-player-title--p2 { color: #00e5ff; }

.rg-controls-player-block + .rg-controls-player-block {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #333344;
}

.rg-controls-compact-table {
    width: 100%;
    border-collapse: collapse;
}

.rg-controls-compact-table .rg-ctrl-lbl {
    color: #aaaaaa;
    padding: 4px 0;
    font-size: 12px;
    white-space: nowrap;
}

.rg-controls-compact-table tr:first-child .rg-ctrl-lbl { width: 110px; }

.rg-controls-compact-table .rg-ctrl-val {
    padding: 4px 0;
    font-size: 12px;
    color: #ffffff;
    white-space: nowrap;
}

.rg-controls-notes {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #333;
    font-size: 11px;
    color: #9a9a9a;   /* #888 fell below AA on this ground */
}

/* ==========================================================================
   REMAINING TEMPLATE CHROME
   Final pass moving style="" attributes out of the template parts. Values are
   carried over unchanged except where a colour fell below AA contrast.
   ========================================================================== */

/* --- game-info.php --- */
.ra-info-table col.ra-col-label { width: 140px; }
.ra-info-table col.ra-col-value { width: auto; }
.ra-info-table col.ra-col-label--narrow { width: 130px; }

.ra-btn-manual-dl {
    color: #33ffff;
    font-weight: bold;
    font-size: 11px;
}

.ra-btn-copy-url {
    background: #222233;
    color: #ffff00;
    border: 1px solid #ffff00;
    padding: 2px 8px;
    font-size: 10px;
    cursor: pointer;
    font-weight: bold;
}

/* --- header-retro.php --- */
.ra-dropdown-sep {
    border-top: 1px solid #333;
    margin: 4px 0;
}

.ra-az-classic-dropdown {
    min-width: 320px;
    display: none;
    padding: 10px;
    background: #000000;
    border: 2px solid #ffffff;
    box-shadow: 0 0 15px rgba(0, 255, 0, .4);
}

.ra-az-grid-title,
.ra-az-bar-title {
    font-family: 'Press Start 2P', 'Press Start 2P Fallback', monospace, sans-serif;
    font-size: 10px;
    color: #ffff00;
    margin-bottom: 8px;
}

.ra-az-grid-title {
    text-align: center;
    border-bottom: 1px solid #333333;
    padding-bottom: 6px;
}

/* --- filter-bar.php --- */
.ra-az-bar-wrap {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #222233;
}

.ra-az-bar-title { margin-bottom: 6px; }

.ra-az-classic-grid {
    grid-template-columns: repeat(auto-fit, minmax(28px, 1fr));
    gap: 4px;
}

/* --- alphabet-bar.php --- */
.ra-az-bar-box { margin-bottom: 14px; }
.ra-az-bar-body { padding: 10px 14px; }

/* --- emulator-selector.php --- */
.ra-guide-intro {
    color: #cccccc;
    font-size: 13px;
    margin-top: 0;
    line-height: 1.4;
}

.ra-emu-row.is-active { background: #1e261e; }
.ra-emu-name { color: #ffffff; }
.ra-emu-row.is-active .ra-emu-name { color: #4dff4d; }

.ra-emu-yes { color: #4dff4d; font-weight: bold; }
.ra-emu-no  { color: #ff7b7b; font-weight: bold; }

/* --- page.php (static pages) --- */
.ra-game-layout--single {
    grid-template-columns: 1fr;
    max-width: 800px;
    margin: 0 auto;
}

.ra-page-title {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--ra-line);
    font-family: 'Copernicus', 'Tiempos Headline', 'Cormorant Garamond', 'Times New Roman', serif;
    font-weight: 400;
}

.ra-description-content--page {
    font-size: 1.1rem;
    line-height: 1.7;
}

.ra-legal-links {
    margin-top: 15px;
    display: flex;
    gap: 15px;
    justify-content: center;
}

/* --ra-muted was never defined anywhere, so this declaration was invalid and
   the links inherited plain white. --ra-text-dim is the token that was meant. */
.ra-legal-links a {
    color: var(--ra-text-dim);
    text-decoration: none;
}

/* --- archive-game.php --- */
.rg-header-actions--gold {
    color: #ffff00;
    font-weight: bold;
    text-decoration: none;
}

.ra-showcase-box { margin-bottom: 16px; }

.rg-box-header--split {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ra-showcase-more {
    text-align: center;
    margin-top: 12px;
    border-top: 1px solid #2a2a38;
    padding-top: 10px;
}

.ra-btn-play-now--inline {
    display: inline-block;
    padding: 8px 20px;
    font-size: 12px;
    text-decoration: none;
}

.rg-box-body--tight { padding: 6px; }

/* --- emulator-selector.php switch link --- */
.ra-btn-switch-emu {
    display: inline-block;
    background: #333333;
    color: #ffff00;
    border: 1px solid #ffffff;
    padding: 2px 6px;
    text-decoration: none;
    font-weight: bold;
    font-size: 10px;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   Per-game questions and answers (Retro_Arcade_QA)
   No calc() with a "+" anywhere below: the LiteSpeed minifier strips the
   spaces around it and silently voids the declaration.
   ------------------------------------------------------------------ */

.ra-qa-list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
}

.ra-qa-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	padding: 0 0 14px;
	margin: 0 0 14px;
}

.ra-qa-item:last-child {
	border-bottom: 0;
}

.ra-qa-q-text {
	font-size: 15px;
	line-height: 1.35;
	margin: 0 0 4px;
	font-weight: 600;
}

.ra-qa-meta {
	font-size: 11px;
	opacity: 0.62;
	margin: 0;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.ra-qa-badge {
	background: #ffcc00;
	color: #141414;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.4px;
	padding: 1px 5px;
	border-radius: 3px;
	text-transform: uppercase;
}

.ra-qa-answers {
	list-style: none;
	margin: 10px 0 8px;
	padding: 0 0 0 14px;
	border-left: 2px solid rgba(255, 255, 255, 0.14);
}

.ra-qa-a {
	margin: 0 0 10px;
}

.ra-qa-a:last-child {
	margin-bottom: 0;
}

.ra-qa-a-text {
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 3px;
	white-space: pre-line;
}

.ra-qa-reply summary,
.ra-qa-ask summary {
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	opacity: 0.8;
	padding: 4px 0;
	user-select: none;
}

.ra-qa-reply summary:hover,
.ra-qa-ask summary:hover {
	opacity: 1;
	color: #ffcc00;
}

.ra-qa-ask {
	margin-top: 4px;
}

.ra-qa-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 8px 0 4px;
	max-width: 560px;
}

.ra-qa-form input[type="text"],
.ra-qa-form textarea {
	width: 100%;
	background: rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 6px;
	color: inherit;
	font: inherit;
	font-size: 13px;
	padding: 8px 10px;
}

.ra-qa-form input[type="text"]:focus,
.ra-qa-form textarea:focus {
	outline: 2px solid #ffcc00;
	outline-offset: 1px;
}

.ra-qa-form textarea {
	resize: vertical;
	min-height: 66px;
}

.ra-qa-submit {
	align-self: flex-start;
	background: #ffcc00;
	color: #141414;
	border: 0;
	border-radius: 6px;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.3px;
	padding: 8px 16px;
	cursor: pointer;
}

.ra-qa-submit:disabled {
	opacity: 0.55;
	cursor: default;
}

.ra-qa-status {
	font-size: 12px;
	min-height: 16px;
	opacity: 0.85;
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.ra-qa-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ra-qa-note {
	font-size: 11px;
	opacity: 0.55;
	margin: 10px 0 0;
}

/* ------------------------------------------------------------------
   Editorial retro-gaming Q&A ([retro_qa], Retro_Arcade_Guide)
   ------------------------------------------------------------------ */

.ra-guide-intro {
	font-size: 13px;
	line-height: 1.6;
	opacity: 0.8;
	margin: 0 0 20px;
	padding: 0 0 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ra-guide-item {
	margin: 0 0 22px;
	padding: 0 0 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ra-guide-item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.ra-guide-q {
	font-size: 16px;
	line-height: 1.3;
	font-weight: 700;
	margin: 0 0 8px;
}

.ra-guide-a p {
	font-size: 14px;
	line-height: 1.65;
	margin: 0 0 10px;
}

.ra-guide-a p:last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.ra-guide-q { font-size: 15px; }
	.ra-guide-a p { font-size: 13px; }
}

/* ------------------------------------------------------------------
   Community questions (Retro_Arcade_Questions)
   ------------------------------------------------------------------ */

.ra-q-crumbs { font-size: 12px; opacity: 0.7; margin: 0 0 12px; display: flex; gap: 7px; flex-wrap: wrap; }
.ra-q-crumbs a { color: inherit; text-decoration: none; }
.ra-q-crumbs a:hover { color: #ffcc00; }

.ra-q-title { font-size: 22px; line-height: 1.28; margin: 0 0 6px; font-weight: 700; }
.ra-q-body { font-size: 14px; line-height: 1.65; margin: 12px 0 0; }
.ra-q-about { font-size: 12px; opacity: 0.75; margin: 14px 0 0; }
.ra-q-about a { color: #ffcc00; }
.ra-q-intro { font-size: 13px; line-height: 1.6; opacity: 0.8; margin: 0 0 16px; }

.ra-q-meta { font-size: 11px; opacity: 0.62; margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ra-q-badge { background: #ffcc00; color: #141414; font-size: 9px; font-weight: 800; letter-spacing: 0.4px; padding: 1px 5px; border-radius: 3px; text-transform: uppercase; }

/* Topic lists, on the archive and on a game page */
.ra-q-topics { list-style: none; margin: 0 0 16px; padding: 0; }
.ra-q-topic { padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ra-q-topic:last-child { border-bottom: 0; }
.ra-q-topic-title { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; text-decoration: none; color: inherit; }
.ra-q-topic-title:hover { color: #ffcc00; }
.ra-q-topic-meta { display: block; font-size: 11px; opacity: 0.55; margin-top: 2px; }

/* Answers */
.ra-q-answers { list-style: none; margin: 0 0 22px; padding: 0; }
.ra-q-answer { padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.ra-q-answer:last-child { border-bottom: 0; }
.ra-q-answer-main { display: flex; gap: 12px; align-items: flex-start; }
.ra-q-answer-body { flex: 1; min-width: 0; }
.ra-q-answer-text { font-size: 14px; line-height: 1.6; margin: 0 0 4px; white-space: pre-line; }

.ra-q-vote {
	flex: 0 0 auto;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 6px;
	color: inherit;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	padding: 6px 8px;
	cursor: pointer;
	min-width: 42px;
	text-align: center;
}
.ra-q-vote:hover { border-color: #ffcc00; color: #ffcc00; }
.ra-q-vote.is-voted { background: #ffcc00; color: #141414; border-color: #ffcc00; }
.ra-q-vote:disabled { cursor: default; }
.ra-q-vote-n { display: block; font-size: 13px; }

.ra-q-replies { list-style: none; margin: 10px 0 6px; padding: 0 0 0 14px; border-left: 2px solid rgba(255, 255, 255, 0.14); }
.ra-q-replies li { margin: 0 0 10px; }
.ra-q-replies li:last-child { margin-bottom: 0; }

.ra-q-replybox summary, .ra-q-ask summary {
	cursor: pointer; font-size: 12px; font-weight: 600; opacity: 0.8; padding: 4px 0; user-select: none;
}
.ra-q-replybox summary:hover, .ra-q-ask summary:hover { opacity: 1; color: #ffcc00; }

.ra-q-answer-new { margin-top: 6px; }
.ra-q-answer-new h2 { font-size: 15px; margin: 0 0 8px; font-weight: 700; }

/* Forms */
.ra-q-form { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; max-width: 620px; }
.ra-q-form input[type="text"], .ra-q-form textarea {
	width: 100%;
	background: rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 6px;
	color: inherit; font: inherit; font-size: 13px; padding: 8px 10px;
}
.ra-q-form input[type="text"]:focus, .ra-q-form textarea:focus { outline: 2px solid #ffcc00; outline-offset: 1px; }
.ra-q-form textarea { resize: vertical; min-height: 66px; }
.ra-q-submit {
	align-self: flex-start; background: #ffcc00; color: #141414; border: 0; border-radius: 6px;
	font-weight: 800; font-size: 12px; letter-spacing: 0.3px; padding: 8px 16px; cursor: pointer;
}
.ra-q-submit:disabled { opacity: 0.55; cursor: default; }
.ra-q-status { font-size: 12px; min-height: 16px; opacity: 0.85; }
.ra-q-note { font-size: 11px; opacity: 0.55; margin: 10px 0 0; }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.ra-q-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ra-q-pagination { margin-top: 14px; font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; }
.ra-q-pagination a, .ra-q-pagination span { padding: 4px 9px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 5px; text-decoration: none; color: inherit; }
.ra-q-pagination .current { background: #ffcc00; color: #141414; border-color: #ffcc00; }

@media (max-width: 600px) {
	.ra-q-title { font-size: 18px; }
	.ra-q-answer-main { gap: 8px; }
}

/* ------------------------------------------------------------------ *
 * Ambient cover background (single game pages) + Q&A hub link box
 * Added 2026-08-01. The game's own cover art, blurred behind the page;
 * the solid-black content panels sit on top so copy stays readable.
 * ------------------------------------------------------------------ */
.ra-has-cover-bg {
	/* let the fixed cover layer below show through the wrapper */
	background-color: transparent !important;
	position: relative;
}
.ra-cover-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(30px) saturate(1.35) brightness(1.25);
	transform: scale(1.2); /* hides the blur's soft edges */
	opacity: 0.9;
	pointer-events: none;
}
.ra-cover-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	/* darken for contrast: lighter at the top where the player sits, near-black lower down */
	background: linear-gradient(180deg, rgba(6,6,12,0.45) 0%, rgba(6,6,12,0.62) 50%, rgba(6,6,12,0.82) 100%);
}
/* keep the actual page content above the fixed background */
.ra-has-cover-bg > *:not(.ra-cover-bg) {
	position: relative;
	z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
	.ra-cover-bg { transition: opacity .4s ease; }
}

.ra-qa-link-box .ra-qa-link-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
.ra-qa-link-text { font-family: 'VT323', 'VT323 Fallback', monospace; font-size: 19px; letter-spacing: .5px; color: #f0d060; }
.ra-qa-link-btn {
	display: inline-block;
	font-family: 'Press Start 2P', 'Press Start 2P Fallback', monospace, sans-serif;
	font-size: 11px;
	letter-spacing: 1px;
	background: #1c7d34;
	color: #eafff0;
	text-decoration: none;
	padding: 11px 18px;
	border: 3px solid;
	border-color: #4fe06f #0c3d19 #0c3d19 #4fe06f;
	border-radius: 0;
	white-space: nowrap;
	text-shadow: 2px 2px 0 #08300f;
	box-shadow: 0 4px 0 #0c3d19;
}
.ra-qa-link-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #0c3d19; }

/* ---- Cover art as the play-curtain backdrop (behind PLAY NOW) -------------- *
 * The loading overlay stays visually opaque (it hides EmulatorJS booting), but
 * instead of flat black it shows this game's cover, blurred and dimmed. The
 * button sits above it. --ra-pcover is set inline on .rg-player-body.          */
.ra-player-has-cover .ra-loading-overlay {
	background: #06060c !important; /* opaque base under the blurred layers */
	overflow: hidden;
}
.ra-player-has-cover .ra-loading-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--ra-pcover);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: blur(12px) brightness(0.6) saturate(1.2);
	transform: scale(1.12); /* hide the blur's soft edges */
	z-index: 0;
}
.ra-player-has-cover .ra-loading-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 130% at 50% 40%, rgba(6,6,12,0.30), rgba(6,6,12,0.72));
	z-index: 1;
}
/* keep the PLAY NOW button above the cover layers */
.ra-player-has-cover .ra-loading-overlay > * {
	position: relative;
	z-index: 2;
}

/* ---- Player tips bar — arcade cabinet panel, CRT-terminal type -------------- */
.ra-tips-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	margin-bottom: 16px;
	background: #0a0a12;
	/* beveled cabinet panel: light top-left, dark bottom-right, hard shadow */
	border: 3px solid;
	border-color: #3a3f52 #14161f #14161f #3a3f52;
	box-shadow: 0 4px 0 #14161f;
	padding: 0;
	width: 100%;
	box-sizing: border-box;
}
.ra-tip-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	min-width: 0;
	border-right: 1px solid #1c1f2b;
}
.ra-tip-item:last-child { border-right: 0; }
.ra-tip-ico { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.ra-tip-txt {
	font-family: 'VT323', 'VT323 Fallback', monospace;
	font-size: 18px;
	line-height: 1.1;
	letter-spacing: 0.5px;
	color: #f0d060; /* amber phosphor */
	text-shadow: 0 0 6px rgba(240,208,96,0.28);
}
.ra-tip-txt strong { color: #ffff00; font-weight: 400; }
/* arcade keycap */
.ra-tip-txt kbd {
	display: inline-block;
	font-family: 'Press Start 2P', 'Press Start 2P Fallback', monospace;
	font-size: 9px;
	background: #e8e8e8;
	color: #111;
	border: 2px solid;
	border-color: #ffffff #6f6f6f #6f6f6f #ffffff;
	border-radius: 0;
	padding: 3px 5px;
	box-shadow: 0 2px 0 #555;
	text-shadow: none;
	vertical-align: 1px;
}
@media (max-width: 720px) {
	.ra-tips-bar { grid-template-columns: repeat(2, 1fr); }
	.ra-tip-item:nth-child(2) { border-right: 0; }
}
@media (max-width: 430px) {
	.ra-tips-bar { grid-template-columns: 1fr; }
	.ra-tip-item { border-right: 0; border-bottom: 1px solid #1c1f2b; }
	.ra-tip-item:last-child { border-bottom: 0; }
}

/* ---- Q&A ask/answer form (/questions hub + single question) ---------------- *
 * These were unstyled: inputs fell back to browser defaults and the spam
 * honeypot "Website" field was visible. Style the form to match, hide the trap.*/
.ra-q-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 640px;
}
.ra-q-form input[type="text"],
.ra-q-form textarea {
	width: 100%;
	box-sizing: border-box;
	background: #0a0a12;
	/* inset bevel, sharp corners — like a terminal field */
	border: 2px solid;
	border-color: #14161f #3a3f52 #3a3f52 #14161f;
	border-radius: 0;
	color: #f0d060;
	font-family: 'VT323', 'VT323 Fallback', monospace;
	font-size: 19px;
	line-height: 1.3;
	letter-spacing: 0.5px;
	padding: 8px 11px;
}
.ra-q-form input[type="text"]::placeholder,
.ra-q-form textarea::placeholder { color: #6d6d55; }
.ra-q-form input[type="text"]:focus,
.ra-q-form textarea:focus {
	outline: none;
	border-color: #ffcc00 #b8931a #b8931a #ffcc00;
	box-shadow: 0 0 0 2px rgba(255,204,0,0.20);
}
.ra-q-form textarea { resize: vertical; min-height: 84px; }
/* the honeypot: must never be seen or focusable by a human */
.ra-q-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}
/* cabinet button, matching .ra-start-game-btn */
.ra-q-submit {
	align-self: flex-start;
	font-family: 'Press Start 2P', 'Press Start 2P Fallback', monospace, sans-serif;
	font-size: 11px;
	letter-spacing: 1px;
	background: #b81c26;
	color: #ffe9a8;
	border: 3px solid;
	border-color: #ff6b6b #6d0f16 #6d0f16 #ff6b6b;
	border-radius: 0;
	padding: 11px 18px;
	text-shadow: 2px 2px 0 #4a0a0e;
	box-shadow: 0 4px 0 #6d0f16;
	cursor: pointer;
}
.ra-q-submit:active { transform: translateY(2px); box-shadow: 0 2px 0 #6d0f16; }
.ra-q-submit:disabled { opacity: .6; cursor: default; }
.ra-q-status { font-family: 'VT323', 'VT323 Fallback', monospace; font-size: 17px; color: #7dff7d; }
.ra-q-note { font-family: 'VT323', 'VT323 Fallback', monospace; font-size: 16px; color: #8a8a70; margin-top: 10px; }