/* ============================================================
   assets/frame.css
   HonestGamers' page frame (open.php and close.php): Gameroni's header,
   two-column layout, sidebar and footer (from Gameroni's site.css), set
   over HG's background photo. Old page content inside the main column
   keeps its own look from css.css. Only class-named elements are styled
   here, never bare tags, so older pages aren't disturbed.
   ============================================================ */

:root {
    
    --color-brand: #2390FF;
    --color-brand-dark: #1672D1;   
    --color-brand-darker: #0F4D8C; 
    --color-brand-tint: #EAF4FF;    

    
    --color-ink: #16181D;          
    --color-ink-muted: #5B6470;    
    --color-ink-faint: #8993A1;    
    --color-bg: #FFFFFF;
    --color-bg-subtle: #F5F7FA;    
    --color-border: #E2E5EA;
    --color-border-strong: #C9CFD8;

    
    --color-danger: #D64545;
    --color-success: #1E9E5A;

    
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: var(--font-body); 

    --text-xs: 0.8125rem;   
    --text-sm: 0.9375rem;   
    --text-base: 1rem;      
    --text-lg: 1.125rem;    
    --text-xl: 1.375rem;    
    --text-2xl: 1.75rem;    
    --text-3xl: 2.25rem;    

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.7; 

    
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    
    --content-max-width: 1200px;
    --content-narrow-width: 760px; 
    --radius: 6px;
    --shadow-sm: 0 1px 2px rgba(22, 24, 29, 0.06), 0 1px 1px rgba(22, 24, 29, 0.04);
    --shadow-md: 0 4px 12px rgba(22, 24, 29, 0.08);
}
.site-container { max-width: var(--content-max-width); margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 768px) {
    .site-container { padding: 0 var(--space-6); }
}
.btn { display: inline-block; padding: var(--space-2) var(--space-4); border-radius: var(--radius); border: 1px solid transparent; background: var(--color-brand); color: #fff; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--color-brand-dark); color: #fff; text-decoration: none; }
.btn-outline { background: transparent; border-color: var(--color-border-strong); color: var(--color-ink); }
.btn-outline:hover { border-color: var(--color-brand); color: var(--color-brand); background: transparent; }
.site-header { border-bottom: 1px solid var(--color-border); background: var(--color-bg); }
.site-header-inner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-3); padding-bottom: var(--space-3); min-height: calc(40px + 2 * var(--space-3)); }
.site-logo { font-size: var(--text-xl); font-weight: 800; color: var(--color-brand); margin-right: auto; }
.site-logo:hover { color: var(--color-brand-dark); text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: var(--space-4); font-weight: 600; }
.site-nav > a { color: var(--color-ink); }
.site-nav > a:hover { color: var(--color-brand); text-decoration: none; }
.site-nav-dropdown { position: relative; }
.site-nav-dropdown > summary { list-style: none; cursor: pointer; color: var(--color-ink); padding: var(--space-1) 0; }
.site-nav-dropdown > summary::-webkit-details-marker { display: none; }
.site-nav-dropdown > summary:hover { color: var(--color-brand); }
.site-nav-dropdown[open] > summary { color: var(--color-brand); }
.site-nav-dropdown-menu { position: absolute; top: 100%; left: 0; margin-top: var(--space-2); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-md); min-width: 180px; padding: var(--space-2) 0; z-index: 20; }
.site-nav-dropdown-menu a { display: block; padding: var(--space-2) var(--space-4); color: var(--color-ink); font-weight: 500; }
.site-nav-dropdown-menu a:hover { background: var(--color-bg-subtle); color: var(--color-brand); text-decoration: none; }
.site-search { display: flex; align-items: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius); overflow: hidden; }
.site-search input { border: none; padding: var(--space-2) var(--space-3); width: 180px; font-size: var(--text-sm); }
.site-search input:focus { outline: none; }
.site-search button { border: none; background: var(--color-bg-subtle); padding: var(--space-2) var(--space-3); cursor: pointer; font-size: var(--text-sm); }
.site-search button:hover { background: var(--color-border); }
.site-account-nav { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; }
.site-account-nav > a:not(.btn) { color: var(--color-ink); }
.site-account-nav > a:not(.btn):hover { color: var(--color-brand); text-decoration: none; }
.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
@media (max-width: 767px) {
    .site-header-inner { gap: var(--space-3); }
    .site-search input { width: 120px; }
}
@media (max-width: 430px) {
    .site-nav { gap: 10px; font-size: 0.95rem; }
    .site-logo img { width: 118px; height: auto; }
}
.site-footer { border-top: 1px solid var(--color-border); background: var(--color-bg-subtle); margin-top: var(--space-12); }
.site-footer-inner { padding-top: var(--space-6); padding-bottom: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; justify-content: space-between; color: var(--color-ink-muted); font-size: var(--text-sm); }
.site-footer-inner p { margin: 0; }
.site-footer-inner a { color: var(--color-ink-muted); }
.site-footer-inner a:hover { color: var(--color-brand); }
.page-columns { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-8); align-items: start; margin-top: var(--space-8); }
.page-main-col { min-width: 0; }
@media (max-width: 899px) {
    .page-columns { grid-template-columns: 1fr; }
    .page-side-col { margin-top: var(--space-8); }
}
.side-widget { margin-bottom: var(--space-8); }
.side-widget-heading { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-ink-muted); margin: 0 0 var(--space-4); padding-bottom: var(--space-2); border-bottom: 2px solid var(--color-border); }
.avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; object-fit: cover; background: var(--color-brand-tint); color: var(--color-brand-dark); font-weight: 700; }
.avatar-lg { width: 88px; height: 88px; font-size: var(--text-2xl); }
.btn-block { display: block; width: 100%; text-align: center; }
.btn-danger { background: var(--color-danger); }
.btn-danger:hover { background: #B33636; }
.btn-success { background: var(--color-success); }
.btn-success:hover { background: #177A45; }
.avatar-upload { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.avatar-upload .btn { cursor: pointer; }
.avatar-upload input:focus-visible + .btn { border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-tint); }
.btn[hidden] { display: none; }
.avatar-xl { width: 120px; height: 120px; font-size: var(--text-3xl); }
@media (max-width: 600px) {
    .avatar-xl { width: 96px; height: 96px; }
}
.avatar-nav { width: 40px; height: 40px; font-size: var(--text-base); }
.site-account-menu { position: relative; }
.site-account-avatar { display: block; list-style: none; cursor: pointer; border-radius: 50%; line-height: 0; }
.site-account-avatar::-webkit-details-marker { display: none; }
.site-account-avatar .avatar { transition: box-shadow 0.15s ease; }
.site-account-avatar:hover .avatar,
.site-account-avatar:focus-visible .avatar,
.site-account-menu[open] .site-account-avatar .avatar { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-brand); }
.site-account-avatar:focus-visible { outline: none; }
.site-account-menu-panel { position: absolute; top: 100%; right: 0; margin-top: var(--space-2); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-md); min-width: 220px; padding: var(--space-2) 0; z-index: 20; font-weight: 500; }
.site-account-menu-who { padding: var(--space-2) var(--space-4) var(--space-3); margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); line-height: var(--leading-tight); }
.site-account-menu-who strong { display: block; color: var(--color-ink); }
.site-account-menu-who span { font-size: var(--text-sm); color: var(--color-ink-muted); }
.site-account-menu-panel a { display: block; padding: var(--space-2) var(--space-4); color: var(--color-ink); }
.site-account-menu-panel a:hover { background: var(--color-bg-subtle); color: var(--color-brand); text-decoration: none; }
.site-account-menu-panel .site-account-menu-logout { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.site-search button { display: flex; align-items: center; align-self: stretch; color: var(--color-ink-muted); }
.site-search button:hover { color: var(--color-brand); }
.site-search button svg { display: block; }
.site-account-menu-panel.is-left { right: auto; left: 0; }
.site-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.site-logo { display: flex; align-items: center; line-height: 0; }
.site-logo img { display: block; height: 34px; width: auto; }
@media (max-width: 600px) {
    .site-logo img { height: 28px; }
}
.avatar-sm { width: 36px; height: 36px; font-size: var(--text-sm); }
.side-widget-more { display: inline-block; margin-top: var(--space-3); font-size: var(--text-sm); font-weight: 600; }
.btn-danger-outline { color: var(--color-danger); border-color: var(--color-danger); }
.btn-danger-outline:hover { color: #fff; background: var(--color-danger); border-color: var(--color-danger); }
.site-account-avatar { position: relative; }
.site-account-dot { position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--color-danger); box-shadow: 0 0 0 2px var(--color-bg); }
.menu-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--color-danger); color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 20px; text-align: center; margin-left: var(--space-1); }
.site-account-count { position: absolute; top: -5px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--color-danger); color: #fff; box-shadow: 0 0 0 2px var(--color-bg); font-size: 0.6875rem; font-weight: 700; line-height: 18px; text-align: center; }
.site-account-menu-panel .site-account-menu-notifications { border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-2); padding-bottom: var(--space-3); }
.avatar-xs { width: 20px; height: 20px; font-size: 11px; flex: none; }
.site-account-menu-head { padding: var(--space-2) var(--space-4) 4px; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-ink-muted); }
.site-account-menu-group + .site-account-menu-group { border-top: 1px solid var(--color-border); margin-top: var(--space-1); padding-top: var(--space-1); }
.site-account-menu-panel:has(.site-account-menu-cols) { min-width: 440px; }
.site-account-menu-cols { display: grid; grid-template-columns: 1fr 1fr; }
.site-account-menu-cols .site-account-menu-group { padding-bottom: var(--space-1); }
.site-account-menu-cols .site-account-menu-group + .site-account-menu-group { border-top: 0; margin-top: 0; padding-top: 0; border-left: 1px solid var(--color-border); }
@media (max-width: 600px) {
    .site-account-menu-panel:has(.site-account-menu-cols) { min-width: 0; }
    .site-account-menu-cols { display: block; }
    .site-account-menu-cols .site-account-menu-group + .site-account-menu-group { border-left: 0; border-top: 1px solid var(--color-border); margin-top: var(--space-1); padding-top: var(--space-1); }
}
.site-nav-dropdown-divider { display: block; height: 1px; margin: var(--space-2) 0; background: var(--color-border); }
.popular-list { list-style: none; counter-reset: popular; margin: 0; padding: 0; }
.popular-list li { counter-increment: popular; border-bottom: 1px solid var(--color-border); }
.popular-list li:last-child { border-bottom: 0; }
.popular-list a { display: grid; grid-template-columns: 2rem 1fr; column-gap: var(--space-2); padding: var(--space-3) 0; color: inherit; text-decoration: none; }
.popular-list a::before { content: counter(popular); grid-row: span 2; font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--color-brand); }
.popular-title { font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-tight); color: var(--color-ink); }
.popular-list a:hover .popular-title { color: var(--color-brand-dark); }
.popular-meta { font-size: var(--text-xs); color: var(--color-ink-muted); margin-top: 2px; }
.site-footer-social { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); flex-basis: 100%; }
.site-footer-social span { color: var(--color-ink-muted); font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- HonestGamers additions ---- */

/* The frame's own text: Gameroni's type, not css.css's 13px Arial. */
.site-header, .hg-strip, .site-footer, .page-side-col {
    font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal);
    color: var(--color-ink); text-align: left;
}
.site-header *, .hg-strip *, .site-footer *, .page-side-col * { box-sizing: border-box; }
/* css.css sets every link to 13px blue with an orange hover; inside the frame, Gameroni's rules apply. */
.site-header a, .site-footer a, .page-side-col a, .hg-strip a, .hg-acct a { font-size: inherit; }
.site-header a:hover, .site-footer a:hover, .page-side-col a:hover, .hg-strip a:hover { text-decoration: none; }
.site-nav > a:link, .site-nav > a:visited, .site-nav-dropdown > summary { color: var(--color-ink); }
.site-nav > a:hover, .site-nav-dropdown > summary:hover { color: var(--color-brand); }
.site-nav-dropdown-menu a:link, .site-nav-dropdown-menu a:visited,
.site-account-menu-panel a:link, .site-account-menu-panel a:visited { color: var(--color-ink); }
.site-nav-dropdown-menu a:hover, .site-account-menu-panel a:hover { color: var(--color-brand); }
.site-account-nav > a:not(.btn):link, .site-account-nav > a:not(.btn):visited { color: var(--color-ink); font-weight: 600; }
.site-header .btn:link, .site-header .btn:visited { color: var(--color-brand); }
.site-header .btn-outline:hover { color: var(--color-brand); }

/* The header sits on white across the full width; the logo is HG's own. */
.site-header { position: relative; z-index: 30; }
.site-logo { gap: var(--space-2); }
.site-logo img { height: 46px; }
.site-logo .hg-logo-years { height: 22px; opacity: 0.85; }
.site-search input { width: 220px; background: #fff; color: var(--color-ink); }

/* The platform strip under the header. */
.hg-strip { background: var(--color-ink); border-bottom: 3px solid var(--color-brand); }
.hg-strip-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-6);
    padding-top: var(--space-2); padding-bottom: var(--space-2); }
.hg-strip a:link, .hg-strip a:visited { color: #fff; font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.04em; }
.hg-strip a:hover { color: var(--color-brand); }
/* Each platform carries its full name and its abbreviation; phones and narrow windows get the abbreviation. */
.hg-strip-short { display: none; }
@media (max-width: 899px) {
    .hg-strip-full { display: none; }
    .hg-strip-short { display: inline; }
}

/* The page fills at least the window, so on short pages the footer stays at
   the bottom and more of the background photo shows above it. */
body { min-height: 100vh; display: flex; flex-direction: column; }
/* Phones get cssmobile.css, which pins the page to 750px and drops the photo.
   The frame handles widths itself, so undo that and keep the photo. */
body { position: static; max-width: none; background: #2a2a2a url('/images/sitedesign/background_image_04.jpg') no-repeat center center fixed;
    background-size: cover; }
body > * { flex-shrink: 0; }

/* The white sheet the page sits on, over the background photo. */
.hg-sheet { box-sizing: border-box; width: calc(100% - 2 * var(--space-4)); max-width: var(--content-max-width);
    margin: var(--space-6) auto; background: #fff;
    border-radius: var(--radius); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35); padding: var(--space-6); }
.hg-sheet .page-columns { margin-top: 0; }
.page-columns.hg-no-side { grid-template-columns: minmax(0, 1fr); }
.page-main-col { text-align: left; min-width: 0; overflow-x: auto; }
@media (max-width: 767px) {
    .hg-sheet { width: calc(100% - 2 * var(--space-2)); margin: var(--space-3) auto; padding: var(--space-4) var(--space-3); }
}

/* The sidebar's other lists: same look as "Most read", with the game's
   square cover where the number would be. */
.hg-side-list a { grid-template-columns: 48px 1fr; column-gap: var(--space-3); align-items: center; align-content: center; }
.hg-side-list a::before { content: none; }
.hg-side-cover { grid-row: span 2; align-self: center; width: 48px; height: 48px; object-fit: cover; border-radius: 4px; background: var(--color-border); display: block; }
.hg-side-list .popular-title { align-self: end; }
.hg-side-list .popular-meta { align-self: start; }
.side-widget-more:link, .side-widget-more:visited { color: var(--color-brand); font-size: var(--text-sm); }

/* The footer: white over the photo, like the sheet. */
.site-footer { background: #fff; margin-top: auto; border-top: 3px solid var(--color-brand); }
.site-footer-inner { flex-direction: column; align-items: flex-start; }
.hg-footer-social { display: flex; gap: var(--space-2); }
.hg-footer-social img { width: 28px; height: 28px; display: block; }
.hg-footer-legal { font-size: var(--text-xs); line-height: var(--leading-normal); max-width: 980px; }
.hg-footer-tracker { line-height: 0; }

/* Counts in the account menu, and the red dot on the avatar. */
.site-account-menu-panel .menu-count { font-size: var(--text-xs); }

/* Cookie notice and cookie settings (close.php; ported from Gameroni). */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; padding: 0 var(--space-4) var(--space-4); pointer-events: none; }
.cookie-card { pointer-events: auto; max-width: 960px; margin: 0 auto; background: #fff; color: #16181D; border-radius: 12px;
    border-top: 4px solid #2390FF; box-shadow: 0 12px 40px rgba(16, 20, 28, 0.25); padding: var(--space-4) var(--space-6); }
.cookie-banner-card { display: flex; align-items: center; gap: var(--space-6); }
.cookie-banner-text { flex: 1; min-width: 0; }
.cookie-title { font-size: var(--text-base); font-weight: 700; margin: 0 0 var(--space-1); }
.cookie-copy { font-size: var(--text-sm); color: #5B6470; margin: 0; line-height: var(--leading-normal); }
.cookie-copy a { color: #2390FF; }
.cookie-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.cookie-actions .btn { color: #fff; }
.cookie-actions .btn-outline { color: #16181D; border-color: #C9CFD8; }
.cookie-actions .btn-outline:hover { color: #2390FF; border-color: #2390FF; }
.cookie-link-btn { background: none; border: 0; padding: var(--space-1) var(--space-2); font: inherit; font-size: var(--text-sm);
    font-weight: 600; color: #5B6470; text-decoration: underline; cursor: pointer; }
.cookie-link-btn:hover { color: #2390FF; }
.cookie-panel-card { max-width: 560px; padding: var(--space-6); }
.cookie-options { margin: var(--space-4) 0; border-top: 1px solid #E2E5EA; }
.cookie-option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding: var(--space-3) 0; border-bottom: 1px solid #E2E5EA; cursor: pointer; }
.cookie-option:first-child { cursor: default; }
.cookie-option-name { font-size: var(--text-sm); font-weight: 700; margin: 0; }
.cookie-option-desc { font-size: var(--text-xs); color: #5B6470; margin: 2px 0 0; line-height: var(--leading-normal); }
.cookie-switch { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 42px; height: 24px; margin: 0; border-radius: 12px;
    background: #C9CFD8; position: relative; cursor: pointer; transition: background 0.15s; }
.cookie-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.15s; }
.cookie-switch:checked { background: #2390FF; }
.cookie-switch:checked::after { transform: translateX(18px); }
.cookie-switch:disabled { opacity: 0.55; cursor: default; }
.cookie-switch:focus-visible { outline: 3px solid #BFDFFF; outline-offset: 2px; }
.cookie-panel-card .cookie-actions { justify-content: flex-end; }
@media (max-width: 720px) {
    .cookie-banner { padding: 0 var(--space-2) var(--space-2); }
    .cookie-card { padding: var(--space-4); }
    .cookie-banner-card { flex-direction: column; align-items: stretch; gap: var(--space-3); }
    .cookie-actions { flex-wrap: wrap; }
    .cookie-banner-card .cookie-actions .btn { flex: 1; text-align: center; }
    .cookie-banner-card .cookie-link-btn { width: 100%; text-align: center; }
}

.cookie-settings-page { max-width: 640px; }
.cookie-settings-page .form-check { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0 0 var(--space-3); }
.cookie-card { text-align: left; }   /* the old pages center their body text */

/* ===== Ads (includes/ads.php), ported from Gameroni ===== */
.ad-unit { margin: 0 0 var(--space-8); }
.ad-label {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-sans, inherit);
    font-size: 10px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-faint);
    text-align: left;
}
.ad-creative { overflow: hidden; }
.ad-creative img { display: block; width: 100%; height: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.page-side-col .ad-unit { max-width: 300px; margin-left: auto; margin-right: auto; }
.ad-unit-banner { max-width: 728px; margin: var(--space-8) auto; }
/* The banner that stands in for the box and skyscraper when the right column
   drops below the main one (see render_ad_slot). */
.page-side-col .ad-unit-stacked { display: none; max-width: 728px; margin: 0 auto var(--space-8); }
@media (max-width: 899px) {
    .page-side-col .ad-unit-box,
    .page-side-col .ad-unit-skyscraper { display: none; }
    .page-side-col .ad-unit-stacked { display: block; }
}
.cookie-google-note .link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--color-brand); text-decoration: underline; cursor: pointer; }

/* The header on in-between widths (laptops, half-screen windows): a narrower
   search box and tighter links, then no "25 years" badge, so logo, links,
   search and account still fit on one row. */
@media (max-width: 1100px) {
    .site-header-inner { gap: var(--space-3); }
    .site-nav { gap: 12px; }
    .site-search input { width: 130px; }
}
@media (max-width: 960px) {
    .site-logo .hg-logo-years { display: none; }
}