/* =============================================================
   seo-article.css – Mirage Classic: reusable SEO editorial styles
   Used on all "best of / guide" landing pages.
   ============================================================= */

/* ─── Page wrapper ───────────────────────────────────────────── */
.mc-seo-article {
    padding-top: var(--header-h);
    color: var(--text);
}

.mc-seo-article .mc-container {
    max-width: 860px;
}

/* ─── Breadcrumb ─────────────────────────────────────────────── */
.mc-bread {
    padding: 1rem 0 .5rem;
    font-size: .75rem;
    color: var(--text2);
    font-family: sans-serif;
}
.mc-bread a          { color: var(--text2); text-decoration: none; }
.mc-bread a:hover    { color: var(--teal-l); }
.mc-bread__sep       { margin: 0 .45rem; color: var(--border2); }

/* ─── Article hero ───────────────────────────────────────────── */
.mc-art-hero {
    padding: 2rem 0 2rem;
    border-bottom: 1px solid var(--border);
}

.mc-art-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 1rem;
}
.mc-art-hero__eyebrow span {
    background: rgba(24,200,144,.1);
    border: 1px solid rgba(24,200,144,.25);
    border-radius: 99px;
    padding: .25em .85em;
}

.mc-art-hero h1 {
    font-size: clamp(1.55rem, 3.8vw, 2.3rem);
    line-height: 1.22;
    margin: 0 0 1rem;
    color: var(--text);
}
.mc-art-hero h1 em {
    font-style: normal;
    background: linear-gradient(135deg, var(--gold), var(--gold-h));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mc-art-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1.25rem;
    font-size: .78rem;
    color: var(--text2);
    font-family: sans-serif;
    margin-bottom: 1.4rem;
}
.mc-art-meta__item { display: flex; align-items: center; gap: .35rem; }

.mc-art-hero__intro {
    font-size: 1rem;
    color: var(--text2);
    line-height: 1.8;
    max-width: 740px;
    font-family: sans-serif;
    margin: 0;
}

/* ─── Quick picks box ────────────────────────────────────────── */
.mc-quick-picks {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: var(--r);
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
}
.mc-quick-picks__label {
    font-size: .67rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 .75rem;
    font-family: sans-serif;
}
.mc-quick-picks__list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.mc-quick-picks__list li {
    font-size: .87rem;
    color: var(--text2);
    font-family: sans-serif;
    display: flex;
    align-items: baseline;
    gap: .5rem;
}
.mc-quick-picks__list a          { color: var(--text); text-decoration: none; font-weight: 600; }
.mc-quick-picks__list a:hover    { color: var(--gold); }
.mc-qp-num {
    font-family: monospace;
    font-size: .68rem;
    color: var(--border2);
    flex-shrink: 0;
    width: 1.3rem;
}

/* ─── Article body ───────────────────────────────────────────── */
.mc-art-body {
    padding: 2rem 0 3.5rem;
}

.mc-art-body h2 {
    font-size: clamp(1.15rem, 2.8vw, 1.55rem);
    margin: 2.75rem 0 .85rem;
    color: var(--text);
    scroll-margin-top: calc(var(--header-h) + 1rem);
}
.mc-art-body h2:first-child { margin-top: 0; }

.mc-art-body p {
    font-size: .95rem;
    color: var(--text2);
    line-height: 1.82;
    margin: 0 0 1.1rem;
    font-family: sans-serif;
}
.mc-art-body strong { color: var(--text); }

/* ─── Game entry ─────────────────────────────────────────────── */
.mc-game-entry {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
    scroll-margin-top: calc(var(--header-h) + 1rem);
}
.mc-game-entry--featured {
    border-color: rgba(232,184,75,.35);
    background: linear-gradient(135deg, rgba(232,184,75,.05), var(--card) 60%);
    box-shadow: 0 0 0 1px rgba(232,184,75,.1), 0 8px 32px rgba(0,0,0,.28);
}

.mc-game-entry__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
}
.mc-game-entry__title-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
}
.mc-game-entry__num {
    font-family: 'Press Start 2P', monospace;
    font-size: .58rem;
    color: var(--border2);
    line-height: 1;
    padding-top: .2rem;
    flex-shrink: 0;
}
.mc-game-entry--featured .mc-game-entry__num { color: var(--gold); }

.mc-game-entry h3 {
    font-size: 1.1rem;
    color: var(--text);
    margin: 0;
    line-height: 1.2;
}
.mc-game-entry--featured h3 { color: var(--gold); }

/* Badges */
.mc-game-badges { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.mc-game-badge {
    font-family: monospace;
    font-size: .6rem;
    letter-spacing: .08em;
    padding: .2em .6em;
    border-radius: 4px;
    border: 1px solid;
    white-space: nowrap;
}
.mc-game-badge--free     { color: #22c55e; border-color: rgba(34,197,94,.3);   background: rgba(34,197,94,.07); }
.mc-game-badge--freemium { color: #f59e0b; border-color: rgba(245,158,11,.3); background: rgba(245,158,11,.07); }
.mc-game-badge--mmo      { color: #00e5ff; border-color: rgba(0,229,255,.3);  background: rgba(0,229,255,.07); }
.mc-game-badge--browser  { color: #a78bfa; border-color: rgba(167,139,250,.3); background: rgba(167,139,250,.07); }
.mc-game-badge--featured { color: var(--gold); border-color: rgba(232,184,75,.3); background: rgba(232,184,75,.07); }
.mc-game-badge--fps      { color: #f87171; border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.07); }
.mc-game-badge--strategy { color: #60a5fa; border-color: rgba(96,165,250,.3); background: rgba(96,165,250,.07); }
.mc-game-badge--casual   { color: #34d399; border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.07); }
.mc-game-badge--party    { color: #f472b6; border-color: rgba(244,114,182,.3); background: rgba(244,114,182,.07); }
.mc-game-badge--platform { color: #60a5fa; border-color: rgba(96,165,250,.3); background: rgba(96,165,250,.07); }
.mc-game-badge--geo      { color: #34d399; border-color: rgba(52,211,153,.3); background: rgba(52,211,153,.07); }

.mc-game-entry__body {
    font-size: .9rem;
    color: var(--text2);
    line-height: 1.8;
    margin: 0 0 1.1rem;
    font-family: sans-serif;
}
.mc-game-entry__body strong { color: var(--text); }

.mc-game-entry__pros {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.mc-game-entry__pros li {
    font-size: .85rem;
    color: var(--text2);
    font-family: sans-serif;
    padding-left: 1.35em;
    position: relative;
    line-height: 1.5;
}
.mc-game-entry__pros li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--teal);
    font-weight: 700;
    font-size: .78rem;
    top: .05em;
}

.mc-game-entry__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.mc-game-entry__caveat {
    font-size: .77rem;
    color: #4a5470;
    font-family: sans-serif;
    font-style: italic;
    flex: 1;
    min-width: 180px;
}

/* ─── Comparison table ───────────────────────────────────────── */
.mc-compare-wrap {
    overflow-x: auto;
    border-radius: var(--r);
    border: 1px solid var(--border);
    margin: 1.5rem 0 2.5rem;
}
.mc-compare {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
    font-family: sans-serif;
}
.mc-compare thead th {
    background: var(--bg3);
    color: var(--text2);
    font-size: .67rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.mc-compare tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background .15s;
}
.mc-compare tbody tr:last-child { border-bottom: none; }
.mc-compare tbody tr:hover { background: rgba(255,255,255,.025); }
.mc-compare tbody tr.mc-compare__featured { background: rgba(232,184,75,.04); }
.mc-compare td { padding: .68rem 1rem; color: var(--text2); vertical-align: middle; }

.mc-compare__name                        { font-weight: 600; color: var(--text) !important; white-space: nowrap; }
.mc-compare__featured .mc-compare__name { color: var(--gold) !important; }
.mc-compare__yes  { color: #22c55e !important; }
.mc-compare__no   { color: #4a5470 !important; }
.mc-compare__star { color: var(--gold) !important; }

/* ─── FAQ accordion ──────────────────────────────────────────── */
.mc-faq-list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin: 1.5rem 0 0;
}
.mc-faq-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r);
    overflow: hidden;
}
.mc-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.25rem;
    font-size: .9rem;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: sans-serif;
    user-select: none;
    transition: background .15s;
}
.mc-faq-item summary:hover { background: rgba(255,255,255,.03); }
.mc-faq-item summary::-webkit-details-marker { display: none; }
.mc-faq-item summary::after {
    content: '+';
    font-size: 1.25rem;
    color: var(--teal);
    flex-shrink: 0;
    transition: transform .2s;
    font-weight: 300;
    line-height: 1;
}
.mc-faq-item[open] summary::after { transform: rotate(45deg); }
.mc-faq-item__body {
    padding: .85rem 1.25rem 1.1rem;
    font-size: .875rem;
    color: var(--text2);
    line-height: 1.8;
    font-family: sans-serif;
    border-top: 1px solid var(--border);
}
.mc-faq-item__body a { color: var(--teal-l); text-decoration: none; }
.mc-faq-item__body a:hover { text-decoration: underline; }

/* ─── CTA band ───────────────────────────────────────────────── */
.mc-seo-cta {
    background: linear-gradient(135deg, rgba(122,69,216,.14), rgba(24,200,144,.07));
    border: 1px solid var(--border2);
    border-radius: var(--r);
    padding: 2.5rem 2rem;
    text-align: center;
    margin: 2.5rem 0;
}
.mc-seo-cta h2 {
    font-size: clamp(1.1rem, 2.5vw, 1.45rem);
    margin: 0 0 .65rem;
    color: var(--text);
}
.mc-seo-cta p {
    font-size: .9rem;
    color: var(--text2);
    line-height: 1.75;
    margin: 0 0 1.5rem;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    font-family: sans-serif;
}
.mc-seo-cta__btns {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .mc-game-entry          { padding: 1.25rem 1.1rem; }
    .mc-art-hero h1         { font-size: 1.45rem; }
    .mc-seo-cta             { padding: 1.75rem 1rem; }
    .mc-game-entry__footer  { flex-direction: column; align-items: flex-start; }
}