/* =============================================================================
   /guides, /guides/pricing, /guides/pricing/consoles and
   /guides/pricing/consoles/<console> — mobile price-guide family.
   Shares the card/back-link language of /browse and /browse/<console>
   (the bc- and browse- prefixes) but stays self-contained under gd-.
   ========================================================================== */

/* Page wrapper. Side padding is the whole page's gutter; the console cards
   and price list sit inside it. NOTE: do NOT write a bare star-slash token
   inside these comments — it closes the comment early and the CSS parser
   then silently drops the very next rule (this one). */
.gd-page {
    /* 14px side gutter matches the /browse hub (.browse-section padding). */
    padding: 16px 14px 88px;
}

/* ── Back link + header ───────────────────────────────────────────────────── */
.gd-back {
    font-family: 'Electrolize', sans-serif;
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--v2-cyan);
    text-decoration: none;
    margin-bottom: 14px;
}

/* Framework-button back link (console guide): the btn/bg-highlight classes
   carry the look; this centers it and spaces it off the header below. */
.gd-back-btn {
    display: table;
    margin: 0 auto 14px;
}

.gd-header {
    text-align: center;
    padding: 0 2px 18px;
}

.gd-heading {
    font-family: 'Electrolize', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--v2-text);
    margin: 0 0 5px;
}

.gd-sub {
    font-family: 'Electrolize', sans-serif;
    font-size: 0.76rem;
    letter-spacing: 0.5px;
    color: var(--v2-text-dim);
    margin: 0;
}

.gd-section-heading {
    font-family: 'Electrolize', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--v2-text);
    margin: 26px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--v2-cyan-25);
}

.gd-section-heading-center {
    text-align: center;
}

.gd-note {
    font-family: 'Electrolize', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.5px;
    text-align: center;
    color: var(--v2-text-dim);
    margin: 16px 0 0;
}

/* ── Feature card (guides hub + pricing landing CTA) ──────────────────────── */
.gd-feature-card {
    font-family: 'Electrolize', sans-serif;
    display: block;
    padding: 16px 18px;
    border: 1px solid var(--v2-cyan-25);
    border-radius: 10px;
    background: var(--v2-panel);
    text-decoration: none;
    margin-bottom: 8px;
}

.gd-feature-title {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--v2-text);
    margin-bottom: 6px;
}

.gd-feature-desc {
    display: block;
    font-size: 0.76rem;
    line-height: 1.6;
    letter-spacing: 0.3px;
    color: var(--v2-text-dim);
    margin-bottom: 10px;
}

.gd-feature-cta {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--v2-cyan);
}

/* Centered gradient button inside the feature card (same framework recipe as
   the back buttons). The card's .gd-feature-desc already spaces it above. */
.gd-feature-btn {
    display: table;
    margin: 2px auto 0;
}

/* ── Console chips ────────────────────────────────────────────────────────── */
.gd-chip-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.gd-chip {
    font-family: 'Electrolize', sans-serif;
    padding: 7px 12px;
    border: 1px solid var(--v2-cyan-25);
    border-radius: 6px;
    background: var(--v2-panel);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--v2-text-dim);
    text-decoration: none;
    white-space: nowrap;
}

/* ── Explainer panels (pricing landing) ───────────────────────────────────── */
.gd-explainer {
    font-family: 'Electrolize', sans-serif;
    padding: 14px 16px;
    border: 1px solid var(--v2-cyan-25);
    border-radius: 10px;
    background: var(--v2-panel);
    margin-bottom: 12px;
}

.gd-explainer h3 {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--v2-cyan);
    margin: 0 0 8px;
}

.gd-explainer p {
    font-size: 0.76rem;
    line-height: 1.65;
    letter-spacing: 0.3px;
    color: var(--v2-text-dim);
    margin: 0 0 8px;
}

.gd-explainer p:last-child {
    margin-bottom: 0;
}

/* ── Consoles hub: brand sections + teaser cards ──────────────────────────── */
.gd-brand {
    font-family: 'Electrolize', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--v2-text-dim);
    margin: 22px 0 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--v2-cyan-25);
}

/* Card width + gutter match the /browse hub: with .gd-page's 14px side
   padding, the same 11px gap and the same 2-col / 3-col (>=480px) breakpoint,
   each console card renders at the identical width as a /browse card. */
.gd-console-grid {
    display: grid;
    /* minmax(0, 1fr), not bare 1fr: a 1fr track refuses to shrink below its
       content's min width, so one long game title would push the whole grid
       wider than the phone screen and put the page into sideways scroll. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

@media (min-width: 480px) {
    .gd-console-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.gd-console-card {
    font-family: 'Electrolize', sans-serif;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--v2-cyan-25);
    border-radius: 10px;
    background: var(--v2-panel);
    overflow: hidden;
    text-decoration: none;
}

.gd-console-art {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    padding: 8px;
    background: var(--v2-bg-0);
}

.gd-console-art img {
    max-width: 100%;
    max-height: 42px;
    object-fit: contain;
}

.gd-console-fallback {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    color: var(--v2-text);
}

.gd-console-name {
    padding: 6px 8px 1px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    color: var(--v2-text);
}

.gd-console-count {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-align: center;
    color: var(--v2-text-dim);
    padding-bottom: 5px;
}

.gd-console-top {
    list-style: none;
    margin: 0 8px 7px;
    padding: 5px 0 0;
    border-top: 1px solid var(--v2-cyan-25);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gd-console-top li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    font-size: 0.6rem;
    color: var(--v2-text-dim);
}

/* min-width: 0 so the flex item is allowed to shrink — without it the
   nowrap name clips at the card edge instead of ellipsizing. */
.gd-console-top .gd-top-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gd-console-top .gd-top-price {
    color: var(--v2-green);
    white-space: nowrap;
}

/* ── Console guide: "most valuable" strip ─────────────────────────────────── */
/* .gd-top-grid: the /guides/pricing landing's 3-across grid. The console
   guide instead uses .gd-top-strip, a single scrollable row mirroring the
   Similar Games strip on /games (swipe on touch, arrows on overflow). */
.gd-top-grid {
    display: grid;
    /* minmax(0, 1fr) for the same reason as .gd-console-grid: never let a
       card's content dictate the track width. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.gd-top-scroller {
    position: relative;
}

.gd-top-strip {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 4px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gd-top-strip::-webkit-scrollbar {
    display: none;
}

.gd-top-strip .gd-top-card {
    flex: 0 0 116px;
}

/* Overlay arrows, hidden until there's overflow in that direction — same
   look as the /games media/similar-strip arrows. */
.gd-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(0, 217, 255, 0.3);
    background: rgba(10, 10, 20, 0.35);
    color: var(--v2-cyan);
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.gd-arrow.visible {
    opacity: 0.85;
    pointer-events: auto;
}

.gd-arrow-left  { left: 4px; }
.gd-arrow-right { right: 4px; }

.gd-top-card {
    font-family: 'Electrolize', sans-serif;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--v2-cyan-25);
    border-radius: 10px;
    background: var(--v2-panel);
    overflow: hidden;
    text-decoration: none;
}

.gd-top-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    background: var(--v2-bg-0);
}

.gd-top-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gd-top-rank {
    position: absolute;
    top: 5px;
    left: 5px;
    min-width: 20px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(10, 14, 39, 0.85);
    border: 1px solid var(--v2-cyan);
    font-size: 0.64rem;
    font-weight: 700;
    text-align: center;
    color: var(--v2-cyan);
}

.gd-top-noart {
    padding: 8px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    color: var(--v2-text);
}

.gd-top-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 9px 10px;
}

.gd-top-title {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--v2-text);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.gd-top-console {
    font-size: 0.6rem;
    letter-spacing: 0.5px;
    color: var(--v2-text-dim);
}

.gd-top-value {
    font-size: 0.68rem;
    color: var(--v2-green);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Pricing landing: "most valuable" ranked list ─────────────────────────── */
/* One row per game (rank, cover thumb, title/console, loose value), so all
   12 read straight down the page. */
.gd-toplist {
    border: 1px solid var(--v2-cyan-25);
    border-radius: 10px;
    background: var(--v2-panel);
    overflow: hidden;
}

.gd-toplist-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0, 217, 255, 0.08);
    text-decoration: none;
}

.gd-toplist-row:last-child {
    border-bottom: none;
}

.gd-toplist-row:nth-child(even) {
    background: rgba(0, 217, 255, 0.045);
}

.gd-toplist-rank {
    flex-shrink: 0;
    width: 20px;
    font-family: 'Electrolize', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    color: var(--v2-cyan);
}

.gd-toplist-art {
    flex-shrink: 0;
    width: 34px;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--v2-bg-0);
    border-radius: 4px;
    overflow: hidden;
}

.gd-toplist-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gd-toplist-noart {
    font-size: 0.7rem;
    color: var(--v2-text-dim);
}

.gd-toplist-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.gd-toplist-title {
    font-family: 'Electrolize', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--v2-text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gd-toplist-console {
    font-family: 'Electrolize', sans-serif;
    font-size: 0.62rem;
    letter-spacing: 0.4px;
    color: var(--v2-text-dim);
}

.gd-toplist-value {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    font-family: 'Electrolize', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--v2-green);
    white-space: nowrap;
}

.gd-toplist-value-tag {
    font-size: 0.54rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--v2-text-dim);
}

/* ── Console guide: the price list ────────────────────────────────────────── */
/* Stacked two-line rows instead of a five-column table, so every game fits
   the viewport width with no sideways scroll:
       <title>                 <rarity>
       <loose>   <cib>   <new>            */
.gd-list {
    border: 1px solid var(--v2-cyan-25);
    border-radius: 10px;
    background: var(--v2-panel);
    overflow: hidden;
}

/* Two columns per row: .gd-row-main (title + price pairs) expands,
   .gd-row-side (the rarity badge) hugs the right edge. */
.gd-row {
    font-family: 'Electrolize', sans-serif;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 217, 255, 0.08);
    text-decoration: none;
}

.gd-row:last-child {
    border-bottom: none;
}

/* Zebra striping: a faint cyan wash on every other row so the two-line rows
   read as separate entries when scanning the list. */
.gd-row:nth-child(even) {
    background: rgba(0, 217, 255, 0.045);
}

.gd-row-main {
    flex: 1;
    min-width: 0;
}

.gd-row-side {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 4px;
}

.gd-row-title {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.25;
    color: var(--v2-text);
    margin-bottom: 1px;
}

.gd-row-prices {
    display: flex;
    gap: 18px;
}

/* Label above value, per column, set snug. */
.gd-row-price {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    font-size: 0.72rem;
    line-height: 1.3;
}

.gd-row-price-label {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--v2-text-dim);
}

.gd-price-loose,
.gd-price-cib,
.gd-price-new {
    color: var(--v2-green);
}

/* ── Rarity badges (colors mirror the /pricing result cards) ──────────────── */
.gd-rarity {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
}
.gd-rarity-common     { background: rgba(34,197,94,0.38);   color: #86efac; border: 1px solid rgba(74,222,128,0.7);  box-shadow: 0 0 6px rgba(34,197,94,0.35); }
.gd-rarity-uncommon   { background: rgba(59,130,246,0.38);  color: #93c5fd; border: 1px solid rgba(96,165,250,0.7);  box-shadow: 0 0 6px rgba(59,130,246,0.35); }
.gd-rarity-rare       { background: rgba(168,85,247,0.38);  color: #d8b4fe; border: 1px solid rgba(192,132,252,0.7); box-shadow: 0 0 6px rgba(168,85,247,0.35); }
.gd-rarity-in-ranking { background: rgba(148,148,170,0.32); color: #c4c8d4; border: 1px solid rgba(156,163,175,0.6); box-shadow: 0 0 6px rgba(120,120,140,0.3); }

/* ── Pagination (mirrors bc-pagination on /browse/<console>) ──────────────── */
.gd-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 22px 0 4px;
}

/* The copy above the list sits snug under the section heading rather than
   carrying the bottom pager's tall top padding. */
.gd-pagination-top {
    padding: 0 0 14px;
}

.gd-page-btn {
    font-family: 'Electrolize', sans-serif;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--v2-cyan);
    background: var(--v2-bg-2);
    color: var(--v2-cyan);
    font-size: 1.1rem;
    text-decoration: none;
}

.gd-page-btn.disabled {
    opacity: 0.35;
    pointer-events: none;
}

.gd-page-number {
    font-family: 'Electrolize', sans-serif;
    color: var(--v2-text);
    font-size: 0.78rem;
    font-weight: 600;
}

/* ── theme-dark span override ─────────────────────────────────────────────── */
/* style.css (framework base) carries ".theme-dark span:not(.badge) { color:
   #FFF !important }", which forces every span on the page white — crushing
   the class colors above. These re-assert the intended colors at higher
   specificity (.theme-dark .gd-page .x beats .theme-dark span:not(.badge))
   with !important so the cascade tie-break lands here. */

.theme-dark .gd-page .gd-price-loose,
.theme-dark .gd-page .gd-price-cib,
.theme-dark .gd-page .gd-price-new,
.theme-dark .gd-page .gd-top-value,
.theme-dark .gd-page .gd-top-price,
.theme-dark .gd-page .gd-toplist-value {
    color: var(--v2-green) !important;
}

.theme-dark .gd-page .gd-row-price-label,
.theme-dark .gd-page .gd-top-console,
.theme-dark .gd-page .gd-top-name,
.theme-dark .gd-page .gd-console-count,
.theme-dark .gd-page .gd-feature-desc,
.theme-dark .gd-page .gd-sub,
.theme-dark .gd-page .gd-toplist-console,
.theme-dark .gd-page .gd-toplist-value-tag {
    color: var(--v2-text-dim) !important;
}

.theme-dark .gd-page .gd-toplist-rank {
    color: var(--v2-cyan) !important;
}

.theme-dark .gd-page .gd-feature-cta {
    color: var(--v2-cyan) !important;
}

.theme-dark .gd-page .gd-rarity-common     { color: #86efac !important; }
.theme-dark .gd-page .gd-rarity-uncommon   { color: #93c5fd !important; }
.theme-dark .gd-page .gd-rarity-rare       { color: #d8b4fe !important; }
.theme-dark .gd-page .gd-rarity-in-ranking { color: #c4c8d4 !important; }