/* 2009-era public site theme */

/* Content overflow safeguards */
.box-content,
.news-post,
.blog-post,
.md-content {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.md-content pre,
.md-content code {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
    max-width: 100%;
}

.md-content img {
    max-width: 100%;
    height: auto;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    background-color: #eef5e6;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZWVmNWU2Ii8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IiNkZmVjZDQiLz4KPC9zdmc+');
    font-family: Verdana, Tahoma, Arial, sans-serif;
    font-size: 11px;
    color: #333;
    transition: background 0.3s, color 0.3s;
}

a { color: #2b7c05; text-decoration: none; }
a:hover { text-decoration: underline; }

.page-wrapper {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-left: 1px solid #dcdcdc;
    border-right: 1px solid #dcdcdc;
    transition: background 0.3s, border 0.3s;
}

.header {
    height: 110px;
    background: linear-gradient(to bottom, #f9fcf7 0%, #e6f2d9 100%);
    border-bottom: 1px solid #bcd8a5;
    padding: 15px 20px;
}

.logo-container { float: left; width: 300px; }
.logo-container img { max-height: 80px; width: auto; }

.top-tools { float: right; text-align: right; margin-top: 10px; }

.settings-panel { margin-bottom: 10px; color: #666; font-size: 10px; }
.settings-panel a { cursor: pointer; color: #666; margin-left: 10px; }
.settings-panel a.active { font-weight: bold; color: #2b7c05; text-decoration: underline; }

.search-box { display: inline-block; background: #fff; border: 1px solid #aebc9e; padding: 3px; border-radius: 3px; }
.search-input { border: none; font-size: 11px; width: 150px; outline: none; background: transparent; }
.search-btn,
.action-btn {
    background: #7cbd00;
    border: 1px solid #6aa300;
    color: white;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 2px;
}

.styled-input {
    width: 100%;
    border: 1px solid #ccc;
    padding: 2px;
    background: #fff;
    color: #333;
    font-size: 11px;
    outline: none;
    border-radius: 2px;
}

.nav-bar {
    height: 38px;
    background: linear-gradient(to bottom, #8fd600 0%, #7cbd00 50%, #6aa300 51%, #7cbd00 100%);
    border-top: 1px solid #aaff44;
    border-bottom: 1px solid #558800;
    padding: 0 10px;
}

.nav-list { list-style: none; margin: 0; padding: 0; height: 38px; }
.nav-list li { float: left; height: 38px; border-right: 1px solid #6aa300; border-left: 1px solid #9ce010; }
.nav-list li:first-child { border-left: none; }
.nav-list li a {
    display: block;
    height: 38px;
    line-height: 38px;
    padding: 0 20px;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.nav-list li a:hover { background: linear-gradient(to bottom, #9ce010 0%, #8fd600 50%, #7cbd00 51%, #8fd600 100%); }

.main-container { display: table; width: 100%; table-layout: fixed; border-collapse: collapse; }
.sidebar-left { display: table-cell; width: 180px; vertical-align: top; padding: 10px; background: #f4fcf0; border-right: 1px solid #e0e0e0; transition: background 0.3s; }
.content-center { display: table-cell; vertical-align: top; padding: 15px; }
.sidebar-right { display: table-cell; width: 220px; vertical-align: top; padding: 10px; background: #f9f9f9; border-left: 1px solid #e0e0e0; transition: background 0.3s; }

.box { margin-bottom: 15px; border: 1px solid #ccc; background: #fff; border-radius: 4px; }
.box-header {
    background: linear-gradient(to bottom, #f2f2f2 0%, #e0e0e0 100%);
    border-bottom: 1px solid #ccc;
    padding: 6px 10px;
    font-weight: bold;
    color: #444;
    font-size: 11px;
    text-transform: uppercase;
}
.box-header.green-theme {
    background: linear-gradient(to bottom, #e6f5d0 0%, #cce5a6 100%);
    border-bottom: 1px solid #aebc9e;
    color: #3b5e1a;
}
.box-content { padding: 10px; }

/* Glossy video player controls */
.custom-player-wrapper {
    position: relative;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    overflow: hidden;
    border: 1px solid #333;
}

.custom-player-wrapper:fullscreen,
.custom-player-wrapper:-webkit-full-screen {
    border-radius: 0;
    border: none;
    background: #000;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.custom-player-wrapper:fullscreen video,
.custom-player-wrapper:-webkit-full-screen video { max-height: none !important; height: calc(100vh - 35px); object-fit: contain; }

.glossy-bar {
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, #777 0%, #444 50%, #222 51%, #111 100%);
    border-top: 1px solid #888;
    padding: 5px;
    gap: 8px;
}

.player-btn {
    background: linear-gradient(to bottom, #f9f9f9 0%, #d4d4d4 50%, #c4c4c4 51%, #e6e6e6 100%);
    border: 1px solid #666;
    border-radius: 3px;
    color: #333;
    cursor: pointer;
    padding: 4px 10px;
    font-size: 11px;
    text-shadow: 0 1px 0 #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.player-btn:hover { background: linear-gradient(to bottom, #fff 0%, #e6e6e6 50%, #d4d4d4 51%, #f9f9f9 100%); }
.player-btn:active { background: linear-gradient(to bottom, #c4c4c4 0%, #a4a4a4 100%); box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); }

.player-slider {
    flex: 1;
    -webkit-appearance: none;
    background: linear-gradient(to bottom, #111 0%, #333 100%);
    height: 10px;
    border-radius: 5px;
    border: 1px solid #555;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
    cursor: pointer;
    margin: 0;
    padding: 0;
}
.player-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: linear-gradient(to bottom, #f9f9f9 0%, #c4c4c4 100%);
    border: 1px solid #666;
    border-radius: 50%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 1px 2px rgba(0,0,0,0.5);
}

/* Product page */
.product-container { display: flex; gap: 15px; }
.product-art-wrapper { width: 200px; flex-shrink: 0; }
.product-art-img { width: 100%; height: auto; border: 1px solid #ccc; border-radius: 4px; }
.product-art-placeholder { width: 100%; height: 280px; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; color: #555; }
.product-info-wrapper { flex: 1; min-width: 0; }
.product-title { margin-top: 0; color: #d66a00; font-size: 16px; border-bottom: 1px dotted #ccc; padding-bottom: 5px; }
.product-meta { margin-bottom: 15px; }
.product-meta-item { font-size: 11px; margin-bottom: 5px; }
.product-meta-item.product-status .status-value { color: green; font-weight: bold; }
.product-description { font-size: 13px; line-height: 1.6; margin-bottom: 15px; }

.hero-banner { width: 100%; height: 200px; background: #000; margin-bottom: 20px; border: 1px solid #333; position: relative; overflow: hidden; border-radius: 4px; }
.hero-text { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.7); color: #fff; padding: 10px; }

.news-item { border-bottom: 1px dotted #ccc; padding: 8px 0; }
.news-item:last-child { border-bottom: none; }
.news-date { color: #7cbd00; font-weight: bold; margin-right: 5px; font-size: 10px; }
.new-badge { background: #ff3300; color: white; font-size: 9px; padding: 1px 3px; border-radius: 2px; margin-left: 5px; }

.game-spotlight { background: #fffde8; border: 1px solid #e6dbb5; padding: 10px; margin-bottom: 20px; }
.game-title { font-size: 14px; font-weight: bold; color: #d66a00; margin-bottom: 5px; border-bottom: 1px solid #e6dbb5; padding-bottom: 3px; }
.game-grid-item { float: left; width: 30%; margin-right: 2%; margin-bottom: 15px; border: 1px solid #ddd; padding: 5px; background: #fff; }
.game-grid-item:nth-child(3n) { margin-right: 0; }
.game-grid-img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

.blog-post { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 20px; }
.friend-placeholder { width: 100%; height: 120px; background: #eee; color: #aaa; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; margin-bottom: 10px; font-size: 10px; }

.product-actions-panel { background: #f9f9f9; padding: 10px; border: 1px solid #eee; display: flex; flex-direction: column; gap: 10px; }
.cart-btn { width: 100%; box-sizing: border-box; background: #ff9900; border: 1px solid #cc7a00; color: white; cursor: pointer; font-size: 14px; font-weight: bold; padding: 8px 15px; border-radius: 3px; text-align: center; }
.cart-btn:hover { background: #e68a00; }
.steam-btn { width: 100%; box-sizing: border-box; display: block; text-align: center; background: #2a475e; border: 1px solid #1b2838; color: white; cursor: pointer; font-size: 14px; font-weight: bold; padding: 8px 15px; border-radius: 3px; text-decoration: none; }
.steam-btn:hover { background: #1b2838; }

.footer { background: #eef5e6; border-top: 1px solid #dcdcdc; padding: 15px; text-align: center; color: #777; font-size: 10px; transition: background 0.3s; }
.footer a { color: #555; margin: 0 5px; }

.side-menu ul { list-style: none; padding: 0; margin: 0; }
.side-menu li { border-bottom: 1px solid #e8e8e8; }
.side-menu li a { display: block; padding: 6px 5px; color: #555; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjEwIj48cGF0aCBkPSJNMCAwIEw1IDUgTDAgMTAiIGZpbGw9IiM3Y2JkMDAiLz48L3N2Zz4=') no-repeat 95% center; }
.side-menu li a:hover { background-color: #fff; color: #7cbd00; }

/* Dark mode */
body.dark-mode { background-color: #1a1a1a; background-image: none; color: #ccc; }
body.dark-mode .page-wrapper { background-color: #222; border-color: #333; box-shadow: 0 0 15px rgba(0,0,0,0.5); }
body.dark-mode .header { background: linear-gradient(to bottom, #2a3326 0%, #1a2216 100%); border-bottom: 1px solid #333; }
body.dark-mode .settings-panel,
body.dark-mode .settings-panel a { color: #888; }
body.dark-mode .settings-panel a.active { color: #9ce010; }
body.dark-mode .nav-bar { background: linear-gradient(to bottom, #4a6600 0%, #3d5500 50%, #304400 51%, #3d5500 100%); border-top: 1px solid #5a7710; border-bottom: 1px solid #222; }
body.dark-mode .nav-list li { border-right: 1px solid #304400; border-left: 1px solid #5a7710; }
body.dark-mode .sidebar-left,
body.dark-mode .sidebar-right { background: #252525; border-color: #333; }
body.dark-mode .box { background: #2a2a2a; border-color: #444; }
body.dark-mode .box-header { background: linear-gradient(to bottom, #333 0%, #222 100%); border-bottom: 1px solid #444; color: #aaa; }
body.dark-mode .box-header.green-theme { background: linear-gradient(to bottom, #2c3a20 0%, #1f2b15 100%); border-bottom: 1px solid #445533; color: #8fa070; }
body.dark-mode .side-menu li { border-bottom: 1px solid #333; }
body.dark-mode .side-menu li a { color: #aaa; }
body.dark-mode .side-menu li a:hover { background-color: #333; color: #9ce010; }
body.dark-mode .search-box { background: #333; border-color: #555; }
body.dark-mode .search-input { color: #fff; }
body.dark-mode .game-spotlight { background: #2d2a20; border-color: #443a20; color: #ccc; }
body.dark-mode .game-title { color: #ffaa55; border-bottom-color: #443a20; }
body.dark-mode .news-item { border-bottom: 1px dotted #444; }
body.dark-mode .friend-placeholder { background: #333; border-color: #444; color: #666; }
body.dark-mode .footer { background: #1a1a1a; border-top: 1px solid #333; color: #555; }
body.dark-mode a { color: #7cbd00; }
body.dark-mode .nav-list li a:hover { background: linear-gradient(to bottom, #5a7710 0%, #4a6600 50%, #3d5500 51%, #4a6600 100%); color: #f0f0f0; }
body.dark-mode .game-grid-item { background: #2a2a2a; border-color: #444; }
body.dark-mode .action-btn { background: #4a6600; border-color: #304400; color: #e0e0e0; }
body.dark-mode .styled-input { background: #333; border-color: #555; color: #fff; }
body.dark-mode .product-actions-panel { background: #2a2a2a; border-color: #444; }

.clearfix::after { content: ""; clear: both; display: table; }

/* Shared page components */
.section-title { font-size: 14px; color: #d66a00; border-bottom: 1px dotted #ccc; padding-bottom: 5px; }
.body-copy { line-height: 1.5; }
.body-copy-spaced { margin-bottom: 10px; }
.history-list { line-height: 1.6; padding-left: 20px; }
.page-intro { margin-bottom: 15px; }

.game-card-art { height: 120px; margin-bottom: 5px; display: flex; align-items: center; justify-content: center; color: #555; overflow: hidden; }
.game-card-link { display: block; width: 100%; height: 100%; }
.game-card-placeholder-link { display: flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; }
.game-card-placeholder-title { font-size: 16px; font-weight: bold; margin-bottom: 5px; }
.game-card-placeholder-copy { font-size: 10px; }
.game-card-genre { font-size: 10px; color: #777; }
.game-card-status { font-size: 10px; color: green; font-weight: bold; }

.hero-gradient { width: 100%; height: 100%; background: linear-gradient(45deg, #1a2a6c, #b21f1f, #fdbb2d); }
.spotlight-layout { display: flex; gap: 10px; margin-top: 10px; }
.spotlight-art { width: 140px; text-align: center; }
.spotlight-art-image { width: 100%; height: auto; border: 1px solid #999; border-radius: 3px; }
.spotlight-copy { flex: 1; }
.spotlight-meta { margin-top: 0; }
.spotlight-description { font-size: 11px; line-height: 1.4; }
.more-info-button { background: #ff9900; border: 1px solid #cc7a00; color: white; cursor: pointer; font-size: 10px; padding: 3px 8px; display: inline-block; text-decoration: none; }
.news-footer-link { text-align: right; margin-top: 5px; font-size: 10px; }

.blog-post-single,
.news-post-single { border-bottom: none; }
.post-title { margin: 0 0 5px; font-size: 14px; }
.post-title-blog { color: #d66a00; }
.post-title-news { color: #3b5e1a; }
.post-list-title { margin: 0 0 5px; font-size: 12px; }
.blog-title-link { color: #d66a00; text-decoration: none; }
.post-date { font-size: 10px; color: #7cbd00; display: block; margin-bottom: 5px; }
.post-date-single { margin-bottom: 15px; }
.post-content { font-size: 12px; line-height: 1.6; }
.post-excerpt { margin: 0; font-size: 11px; line-height: 1.5; }
.read-more-link { font-size: 10px; display: inline-block; margin-top: 5px; }
.back-link-row { margin-top: 20px; }
.back-link { font-size: 11px; }
.news-list-item { padding: 10px 0; }
.news-list-heading { margin-bottom: 5px; }
.news-title-link { font-size: 12px; font-weight: bold; }

.success-notice { background: #dff0d8; border: 1px solid #d6e9c6; color: #3c763d; padding: 10px; margin-bottom: 10px; }
.form-field { margin-bottom: 10px; }
.form-label { display: block; font-weight: bold; margin-bottom: 3px; }
.form-control { width: 100%; padding: 4px; border: 1px solid #ccc; }
.form-textarea { font-family: sans-serif; }
.submit-button { background: #7cbd00; color: white; border: 1px solid #6aa300; padding: 5px 15px; cursor: pointer; font-weight: bold; }

.friend-links { text-align: center; }
.friend-card { margin-bottom: 5px; }
.friend-image { max-width: 100%; height: auto; border: 1px solid #ddd; }
.newsletter-description { margin: 0 0 5px; font-size: 10px; }
.newsletter-button { margin-top: 5px; width: 100%; }
.web-link-row { margin-bottom: 5px; }
.web-icon { width: 16px; text-align: center; }
.bird-app { color: #1da1f2; display: inline-block; } .bird-app::before { content: "\f099"; font-family: "Font Awesome 6 Brands"; font-style: normal; font-weight: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; }
.globe-app { color: #0285ff; }
.discord-header { background: linear-gradient(to bottom, #7289da 0%, #5b6eae 100%); color: white; border-bottom: 1px solid #4e5d94; text-shadow: 0 1px 1px rgba(0,0,0,0.3); }
.discord-content { text-align: center; }
.discord-description { margin: 0 0 10px; font-size: 10px; }
.discord-button { display: inline-block; background: #7289da; color: white; border: 1px solid #4e5d94; padding: 5px 15px; text-decoration: none; font-weight: bold; border-radius: 3px; font-size: 11px; }
.discord-icon { margin-right: 5px; }
.footer-copyright { font-size: 9px; color: #aaa; }

.product-gallery { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.product-gallery-image { width: 100%; height: auto; object-fit: cover; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; }
.gallery-nav,
.gallery-counter { display: none; }
.product-trailer { margin-bottom: 15px; }
.product-trailer-frame { border: 1px solid #ccc; border-radius: 4px; }
.product-trailer-video { aspect-ratio: 16 / 9; background: #000; display: block; }
.product-cart-form { margin: 0; }
.lightbox { display: none; position: fixed; inset: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; align-items: center; justify-content: center; cursor: pointer; }
.lightbox.is-open { display: flex; }
.lightbox-image { max-width: 90%; max-height: 90%; border: 5px solid #fff; border-radius: 4px; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
.embedded-video { max-width: 100%; height: auto; display: block; margin: 10px 0; border-radius: 4px; }

/* Responsive shell and collapsible sidebars */
.mobile-sidebar-controls { display: none; }

.sidebar-toggle {
    width: 100%;
    min-height: 42px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #aebc9e;
    border-radius: 3px;
    background: linear-gradient(to bottom, #f9fcf7 0%, #e6f2d9 100%);
    color: #3b5e1a;
    font: inherit;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
    border-color: #7cbd00;
    outline: 2px solid rgba(124, 189, 0, 0.25);
    outline-offset: 1px;
}

.mobile-menu-chevron { transition: transform 0.2s ease; }
.sidebar-toggle[aria-expanded="true"] .mobile-menu-chevron { transform: rotate(180deg); }

img,
video,
iframe { max-width: 100%; }

.md-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}

body.dark-mode .sidebar-toggle {
    background: linear-gradient(to bottom, #333 0%, #222 100%);
    border-color: #555;
    color: #ccc;
}

body.dark-mode .sidebar-toggle:hover,
body.dark-mode .sidebar-toggle:focus-visible {
    border-color: #7cbd00;
}

@media (max-width: 900px) {
    .page-wrapper {
        max-width: none;
        border-left: 0;
        border-right: 0;
    }

    .header {
        height: auto;
        min-height: 96px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 12px 15px;
    }

    .logo-container {
        float: none;
        width: auto;
        max-width: 52%;
        flex: 1 1 300px;
    }

    .logo-container img {
        display: block;
        max-width: 100%;
        height: auto;
    }

    .top-tools {
        float: none;
        flex: 0 1 330px;
        margin-top: 0;
    }

    .search-box {
        display: flex;
        align-items: center;
    }

    .search-input {
        width: auto;
        min-width: 0;
        flex: 1;
    }

    .nav-bar,
    .nav-list { height: auto; min-height: 38px; }

    .nav-list {
        display: flex;
        width: 100%;
    }

    .nav-list li {
        float: none;
        height: auto;
        min-width: 0;
        flex: 1;
    }

    .nav-list li a {
        height: 38px;
        padding: 0 6px;
        text-align: center;
        white-space: nowrap;
    }

    .js .mobile-sidebar-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 8px 10px;
        background: #f7faf4;
        border-bottom: 1px solid #dfe9d8;
    }

    .main-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .sidebar-left,
    .sidebar-right,
    .content-center {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .sidebar-left {
        order: 1;
        padding: 10px 10px 0;
        border-right: 0;
        border-bottom: 1px solid #e0e0e0;
    }

    .content-center {
        order: 2;
        padding: 12px 10px;
    }

    .sidebar-right {
        order: 1;
        padding: 10px 10px 0;
        border-left: 0;
        border-top: 1px solid #e0e0e0;
    }

    .js .sidebar-left,
    .js .sidebar-right { display: none; }

    .js .sidebar-left.is-mobile-open,
    .js .sidebar-right.is-mobile-open { display: block; }

    .game-grid-item {
        width: 49%;
        margin-right: 2%;
    }

    .game-grid-item:nth-child(3n) { margin-right: 2%; }
    .game-grid-item:nth-child(2n) { margin-right: 0; }

    .product-container { min-width: 0; }
    .product-info-wrapper { width: 100%; }

    body.dark-mode .js .mobile-sidebar-controls {
        background: #202020;
        border-bottom-color: #333;
    }
}

@media (max-width: 700px) {
    .product-container {
        flex-direction: column;
        gap: 18px;
    }

    .product-art-wrapper { width: 100%; }

    .product-art-img,
    .product-art-placeholder {
        display: flex;
        max-width: 260px;
        margin-right: auto;
        margin-left: auto;
    }

    .js .product-gallery {
        position: relative;
        display: block;
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border: 1px solid #333;
        border-radius: 5px;
        background: #111;
        box-shadow: 0 2px 7px rgba(0,0,0,0.25);
        outline: none;
        touch-action: pan-y;
    }

    .js .product-gallery:focus-visible {
        border-color: #7cbd00;
        box-shadow: 0 0 0 3px rgba(124, 189, 0, 0.3);
    }

    .js .product-gallery-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.38s ease, visibility 0s linear 0.38s;
    }

    .js .product-gallery-image.is-active {
        z-index: 1;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .js .gallery-nav {
        position: absolute;
        top: 50%;
        z-index: 3;
        width: 42px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid rgba(255,255,255,0.65);
        background: rgba(0,0,0,0.58);
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        transform: translateY(-50%);
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .js .gallery-prev { left: 7px; border-radius: 4px 2px 2px 4px; }
    .js .gallery-next { right: 7px; border-radius: 2px 4px 4px 2px; }

    .js .gallery-nav:hover,
    .js .gallery-nav:focus-visible {
        background: rgba(124,189,0,0.9);
        outline: 2px solid #fff;
        outline-offset: 1px;
    }

    .js .gallery-nav:active { transform: translateY(-50%) scale(0.94); }

    .js .gallery-counter {
        position: absolute;
        right: 8px;
        bottom: 8px;
        z-index: 3;
        display: block;
        min-width: 44px;
        padding: 3px 7px;
        border: 1px solid rgba(255,255,255,0.45);
        border-radius: 10px;
        background: rgba(0,0,0,0.66);
        color: #fff;
        font-size: 10px;
        font-weight: bold;
        text-align: center;
        text-shadow: 0 1px 1px #000;
    }

    .js .product-gallery.is-single .gallery-nav,
    .js .product-gallery.is-single .gallery-counter { display: none; }

    .product-trailer-frame {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 600px) {
    body { font-size: 12px; }

    .header {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .logo-container {
        width: 100%;
        max-width: none;
        flex-basis: auto;
        text-align: center;
    }

    .logo-container img {
        max-height: 70px;
        margin: 0 auto;
    }

    .top-tools {
        width: 100%;
        flex-basis: auto;
        text-align: center;
    }

    .settings-panel { line-height: 1.8; }

    .search-box { width: 100%; }

    .search-input,
    .search-btn,
    .styled-input,
    .form-control,
    .submit-button,
    .cart-btn,
    .steam-btn { min-height: 38px; }

    .search-input,
    .styled-input,
    .form-control { padding: 7px; }

    .box { margin-bottom: 12px; }
    .box-content { padding: 10px; }
    .hero-banner { height: 160px; }
    .hero-text { line-height: 1.4; }

    .glossy-bar { gap: 5px; }
    .player-btn { padding: 6px 9px; }
    .player-slider { min-width: 0; }

    .footer {
        padding: 15px 10px;
        line-height: 1.7;
    }
}

@media (max-width: 520px) {
    .nav-bar { padding: 0; }
    .nav-list li a { padding: 0 3px; font-size: 10px; }

    .spotlight-layout {
        flex-direction: column;
        align-items: center;
    }

    .spotlight-art {
        width: min(180px, 100%);
    }

    .spotlight-copy { width: 100%; }

    .game-grid-item,
    .game-grid-item:nth-child(2n),
    .game-grid-item:nth-child(3n) {
        float: none;
        width: 100%;
        margin-right: 0;
    }

    .lightbox { padding: 10px; }
    .lightbox-image { max-width: 100%; max-height: 100%; border-width: 3px; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Branded not-found page */
.error-page-content {
    padding: 48px 28px 52px;
    text-align: center;
}

.error-page-code {
    display: inline-block;
    color: #7cbd00;
    font-size: clamp(68px, 11vw, 112px);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.07em;
    text-shadow: 0 1px 0 #fff, 0 4px 0 #5f9200, 0 8px 18px rgba(55, 95, 0, 0.24);
}

.error-page-title {
    margin: 25px 0 9px;
    color: #333;
    font-size: 22px;
    line-height: 1.3;
}

.error-page-copy {
    max-width: 560px;
    margin: 0 auto 25px;
    color: #666;
    font-size: 12px;
    line-height: 1.7;
}

.error-page-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.error-page-actions .action-btn {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.15);
}

.error-page-actions .secondary-action {
    border-color: #9ca58f;
    background: linear-gradient(to bottom, #fafcf7 0%, #e4ebdc 100%);
    color: #41612c;
}

body.dark-mode .error-page-title { color: #eee; }
body.dark-mode .error-page-copy { color: #bbb; }
body.dark-mode .error-page-code {
    color: #91d50b;
    text-shadow: 0 1px 0 #111, 0 4px 0 #507c00, 0 8px 18px rgba(0,0,0,0.5);
}
body.dark-mode .error-page-actions .secondary-action {
    border-color: #555;
    background: linear-gradient(to bottom, #424242 0%, #2f2f2f 100%);
    color: #eee;
}

@media (max-width: 600px) {
    .error-page-content { padding: 38px 16px 42px; }
    .error-page-title { font-size: 19px; }
    .error-page-actions { flex-direction: column; }
    .error-page-actions .action-btn { width: 100%; }
}