/* ===========================================================================
   game-dropdown.css — shared expand-a-game dropdown (Recent Sales + Shopping
   Links + Population Report + per-variant collect "+").  Lifted verbatim from
   index.html so the homepage and the market-cap page render an IDENTICAL
   dropdown.  The ONLY change vs the homepage copy: the handful of rules that
   were scoped under `table.dataTable tbody` (because the homepage dropdown
   lives inside a DataTables child row) are re-scoped to `.child-table` so they
   also apply on pages that are NOT built on DataTables (e.g. market cap).
   Those rules keep the same property values, so on the homepage they are a
   no-op overlap.
   =========================================================================== */

/* ---- Population Report table ------------------------------------------------ */
table.child-table { border-collapse: collapse; margin: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
table.child-table .region-hidden-row td { text-align: center; color: #888;
    padding: 7px 6px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.72rem; }
table.child-table tr { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
table.child-table th, table.child-table td { box-sizing: border-box; }
table.child-table th { padding: 4px 6px; text-align: left; color: var(--neon-cyan); white-space: nowrap; }
table.child-table th .sort-arrow { color: #ff66aa; }
table.child-table td { padding: 4px 6px; text-align: left; color: #999; font-size: 14px; }   /* 14px population text (desktop); ~32px rows */
table.child-table th:nth-child(1), table.child-table td:nth-child(1) { padding-left: 6px !important; }
.child-table .number { text-align: center; font-family: 'Lato', sans-serif; }
.child-table .total { color: var(--neon-orange); }
/* RATING sits immediately left of POP; padding (not width) keeps them apart. */
table.child-table th.rating-col, table.child-table td.rating-col { padding-right: 14px; }
table.child-table td.rating-col { white-space: normal; word-break: break-word; }

/* ---- Variant rows (re-scoped off table.dataTable so they work anywhere) ----- */
.child-table tbody tr.variant-row {
    background: rgba(0, 0, 0, 0.6);
    font-size: 0.9em;
    cursor: pointer;
    transition: background 0.15s;
}
.child-table tbody tr.variant-row:hover { background: rgba(0, 255, 136, 0.15) !important; }
.child-table tbody tr.variant-row td:first-child { padding-left: 30px; }
/* 1px rule between grader blocks in the default (grouped) view */
tr.variant-row.grader-edge > td { border-top: 1px solid rgba(var(--ui-accent-rgb, 74,222,128), .35); }

/* ---- VGA's own 100-point scale row (under the unified decimal header) -------- */
.child-table thead tr.vga-scale-row th {
    padding: 0 6px 6px; font-size: .62rem; font-weight: 400; line-height: 1;
    letter-spacing: .5px; color: var(--text-faint, #666); border-top: 0;
    text-align: center; white-space: nowrap;
}
.child-table thead tr.has-vga-scale th { padding-bottom: 1px !important; }

/* ---- Section headers / shopping-links gate --------------------------------- */
.section-hd { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
    text-align: center; color: var(--neon-orange); padding: 5px 8px 4px; background: rgba(0,0,0,0.6);
    border-top: 1px solid rgba(255,159,67,0.18); border-bottom: 1px solid rgba(255,159,67,0.18); margin-bottom: 6px; }
.section-hd:has(+ .game-links) { margin-bottom: 0; }
.shop-section { display: none; }
body.show-shoplinks .shop-section { display: block; }
body.work-mode .section-hd { background: var(--header-bg); color: var(--accent); border-top-color: #dbe0e6; border-bottom-color: #dbe0e6; }

/* ---- Recent Sales table ----------------------------------------------------- */
.game-sales { background: rgba(0,0,0,0.55); border-bottom: 1px solid rgba(255,159,67,0.25); padding: 6px 8px 8px; }
.game-sales .section-hd { margin: -6px -8px 6px -8px; }
/* Sales table matches the Population Report at 14px (desktop) so the two read as one size. */
.game-sales table { width: 100%; border-collapse: collapse; font-size: 14px; }
.game-sales th { color: #888; font-weight: normal; text-align: left; font-size: 0.6rem; letter-spacing: 0.5px;
    padding: 2px 6px; border-bottom: 1px solid rgba(255,255,255,0.08); white-space: nowrap; }
.game-sales td { padding: 3px 6px; color: #999; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: top; }   /* match Population Report: same color */
/* Uniform 26px rows for BOTH sales + population (desktop). Fixed height + middle-align so the
   collect "+" icon (left untouched) sits inside the row instead of making population rows taller. */
@media (min-width: 769px) {
    table.child-table td, .game-sales td { height: 26px; box-sizing: border-box; vertical-align: middle; padding-top: 0 !important; padding-bottom: 0 !important; }
    table.child-table tbody td.collect-plus-cell { padding-top: 0 !important; padding-bottom: 0 !important; }   /* out-specify the base 3px rule regardless of source order */
}
.game-sales td.gs-price { color: var(--neon-green); text-align: right; white-space: nowrap; }
.game-sales .gs-locked { padding: 4px 0; cursor: pointer; text-align: center; }
.game-sales .gs-loading { padding: 10px 12px; color: #888; font-size: 0.82rem; }
.game-sales .gs-locked-1 { color: #aaa; font-size: 0.72rem; }
.game-sales .gs-locked a { color: var(--neon-orange); text-decoration: none; font-weight: 700; }
.game-sales .gs-locked a:hover { text-decoration: underline; }
body.work-mode .game-sales .gs-locked-1 { color: #777; }
.game-sales .gs-pg-info b { color: var(--accent); font-weight: 800; }
.game-sales .gs-pg-info a { color: var(--accent); text-decoration: none; font-weight: 800; }
.game-sales .gs-pg-info a:hover { text-decoration: underline; }
.game-sales .gs-struck { position: relative; display: inline-block; }
/* Accepted-offer price: thicker, slightly-angled orange strike (a real up-slash — CSS
   line-through cannot tilt). The line hugs the number via a span, ~7deg = ~10% slope.
   Was a flat 1px currentColor line here while index.html carried this version, so the
   market-cap dropdown struck prices with a plain grey rule. */
.game-sales .gs-struck::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%;
    height: 2.5px; background: var(--neon-orange); border-radius: 2px; pointer-events: none;
    transform: translateY(-50%) rotate(-7deg); }
.game-sales .gs-price i { font-size: 0.85rem; vertical-align: middle; margin-left: 3px; display: inline-block; width: 0.9em; text-align: center; }
.game-sales .gs-price i.gs-auc { color: var(--neon-cyan); }
.game-sales .gs-price i.gs-bin { color: var(--neon-orange); }
.game-sales td.gs-date, .game-sales td.gs-g, .game-sales td.gs-box, .game-sales td.gs-seal { white-space: nowrap; }
.game-sales td.gs-src { text-transform: uppercase; white-space: nowrap; }
.game-sales td.gs-src a { color: inherit; text-decoration: underline; text-decoration-color: rgba(150,160,175,0.65); text-underline-offset: 2px; }
.game-sales td.gs-src a:hover { color: var(--neon-orange); text-decoration-color: var(--neon-orange); }
body.work-mode .game-sales td.gs-src a:hover { color: var(--accent); }
.game-sales .gs-dash { color: #555; }
body.work-mode .game-sales { background: #fff; border-bottom-color: var(--border); }
body.work-mode .game-sales td { color: #555; }   /* match Population Report text color */
body.work-mode .game-sales td.gs-price { color: var(--green); }

/* Sales table: filter row + pager */
.gs-nav { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 4px 2px; }
.gs-pg { background: transparent; border: 1px solid rgba(255,159,67,0.4); color: var(--neon-orange); font-family: inherit; font-size: 0.7rem; padding: 3px 10px; border-radius: 4px; cursor: pointer; }
.gs-pg:disabled { opacity: 0.35; cursor: default; }
.gs-pg:not(:disabled):hover { background: rgba(255,159,67,0.14); }
.gs-pg-info { font-size: 0.66rem; color: #aaa; letter-spacing: 0.05em; white-space: nowrap; }
body.work-mode .gs-pg { border-color: var(--accent-border); color: var(--accent); }
body.work-mode .gs-pg-info { color: #666; }
.gs-frow th { padding: 2px 1px; vertical-align: bottom; }
.gs-f { width: 100%; min-width: 0; box-sizing: border-box; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,159,67,0.35); color: #ddd; font-family: inherit; font-size: 0.6rem; padding: 2px 3px; border-radius: 3px; }
.gs-f:focus { outline: none; border-color: var(--neon-orange); }
.gs-empty { text-align: center; color: #888; padding: 12px; }
body.work-mode .gs-f { background: #fff; border-color: var(--border-strong); color: #333; }

/* ---- Shopping Links bar ----------------------------------------------------- */
.game-links { display: flex; align-items: center; gap: 8px; padding: 6px 6px; background: rgba(0,0,0,0.6); border-bottom: 1px solid rgba(255,159,67,0.25); font-size: 0.82rem; }
.game-links a { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; color: var(--neon-orange); text-decoration: none; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap; }
.game-links a:hover { color: #ffd9a0; text-decoration: underline; }
.game-links a picture { display: block; width: 100%; }
.game-links a img.olink { display: block; width: 100%; height: auto; max-width: 240px; margin: 0 auto; border-radius: 5px; transition: transform 0.12s, filter 0.12s; }
.game-links a:hover img.olink { transform: scale(1.07); filter: brightness(1.12); }
body.work-mode .game-links { background: #fff; border-bottom-color: var(--border); }
body.work-mode .game-links a { color: var(--accent); }

/* ---- Cover-style panel wrapper (both modes render through this) -------------- */
/* Lato (Google webfont, uniform on every device) across the WHOLE dropdown (every render path
   wraps in .cg-panel-inner), both themes. Overrides inherited page font (Oxanium / Open Sans). */
.cg-panel-inner { background: var(--surface-raise, rgba(0,0,0,0.6)); border: 1px solid var(--neon-orange); border-radius: 6px; margin: 2px 0 8px; overflow: hidden;
    font-family: 'Lato', sans-serif; }
.cg-panel-hd { padding: 6px 10px; font-weight: 400; color: var(--text-strong, #fff); background: var(--header-bg, rgba(0,0,0,0.6)); border-bottom: 1px solid var(--neon-orange); }

/* ---- Per-variant collect "+" control (right of POP) ------------------------- */
table.child-table td.collect-plus-cell { text-align: center; padding: 3px 4px !important; white-space: nowrap; }
.collect-plus {
    display: inline-flex; align-items: center; justify-content: center; gap: 2px;
    background: none; border: none; padding: 0; margin: 0;
    color: var(--neon-green); font-family: 'Share Tech Mono', monospace;
    font-size: 1.35rem; font-weight: 700; line-height: 1;
    cursor: pointer; transition: color 0.15s, transform 0.1s;
}
.collect-plus:hover:not(:disabled) { color: #fff; transform: scale(1.12); }
.collect-plus.in { color: var(--neon-orange); }
.collect-plus.in:hover { color: #fff; }
.collect-num { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.collect-num > b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 0.5em; font-weight: 700; line-height: 1; }
.collect-plus.in.flash { animation: collectPlusPop 0.35s ease; }
@keyframes collectPlusPop { 0% { transform: scale(1.6); } 100% { transform: scale(1); } }
.collect-plus:disabled { color: #555; cursor: not-allowed; }
body.work-mode .collect-plus { color: var(--green); }
body.work-mode .collect-plus:hover:not(:disabled) { color: #111; }
body.work-mode .collect-plus.in { color: #ea580c; }

/* ---- Full-width green collect button (used by collectBtnInner; harmless if
        the dropdown never renders one) ------------------------------------- */
.collect-btn {
    display: block; width: 100%; padding: 9px 12px; margin: 0;
    background: transparent; border: 1px solid var(--neon-green); color: var(--neon-green);
    font-family: 'Share Tech Mono', monospace; font-size: 0.9rem; letter-spacing: 1px;
    cursor: pointer; transition: all 0.15s;
}
.collect-btn:hover:not(:disabled) { background: var(--neon-green); color: #000; }
.collect-btn.signin-cta { white-space: normal; line-height: 1.35; letter-spacing: 0.5px; }
.collect-btn.in { border-color: var(--neon-orange); color: var(--neon-orange); }
.collect-btn.in:hover { background: var(--neon-orange); color: #000; }
.collect-btn.in.flash { animation: collectFlash 0.4s ease; }
@keyframes collectFlash { 0% { background: var(--neon-orange); color: #000; } 100% { background: transparent; } }
.collect-btn.full { border-color: #555; color: #777; cursor: not-allowed; }
body.work-mode .collect-btn { border-color: var(--green); color: var(--green); }
body.work-mode .collect-btn:hover:not(:disabled) { background: var(--green); color: #fff; }
body.work-mode .collect-btn.in { border-color: #ea580c; color: #ea580c; }
body.work-mode .collect-btn.full { border-color: #d1d5db; color: #9ca3af; }

/* ---- Work-mode (light) repaint of the Population Report. The child-table carries a
        hardcoded dark inline background (rgba(0,0,0,.6)); these !important rules flip it
        light in work-mode exactly like the homepage does — without them the table renders
        as a grey block on the light page. ------------------------------------------------ */
body.work-mode table.child-table { background: #fafbfc !important; }
body.work-mode table.child-table td { color: #555; }
body.work-mode table.child-table tbody tr:hover td { background: var(--header-bg) !important; }
body.work-mode table.child-table th { color: #111; font-family: 'Lato', sans-serif; }
body.work-mode table.child-table th .sort-arrow { color: var(--accent); }
body.work-mode .child-table tbody tr.variant-row { background: #fafbfc; }
body.work-mode .child-table tbody tr.variant-row:hover { background: var(--header-bg) !important; }

/* ---- Inline variant grade-grid dropdown ------------------------------------- */
.variant-detail > td { padding: 0 !important; background: rgba(0,0,0,0.55); }
.variant-detail .collect-slot { padding: 12px 15px 14px; }
.variant-detail .child-table { margin: 0; }
body.work-mode .variant-detail > td { background: #f3f4f6; }

/* ---- Mobile ----------------------------------------------------------------- */
@media (max-width: 768px) {
    .game-sales table { font-size: 0.62rem; }
    .game-sales th, .game-sales td { padding: 2px 1px !important; }   /* match homepage: desktop 32px rule must not leak into mobile */
    .game-sales td.gs-price, .game-sales th:last-child { padding-right: 2px; }
    .game-sales .gs-price i { font-size: 0.64rem; }
    .game-sales .gs-locked-1 { font-size: 0.56rem; line-height: 1.25; }

    table.child-table { width: 100% !important; table-layout: auto !important; }
    table.child-table td { font-size: 0.62rem; padding: 2px 1px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    table.child-table th { font-size: 0.52rem; padding: 2px 1px !important; }
    table.child-table tr.variant-row td { font-size: 0.62rem; white-space: normal; overflow: visible; word-break: break-word; }
    .collect-plus-cell { padding: 1px 2px !important; }
    .collect-plus { font-size: 1.05rem; }

    .variant-detail table.child-table { table-layout: auto !important; width: 100% !important; }
    .variant-detail table.child-table td { font-size: 0.62rem !important; font-family: 'Lato', sans-serif !important; padding: 2px 1px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .variant-detail table.child-table th { font-size: 0.52rem !important; padding: 2px 1px !important; }
}