/* Mechanic page: stats row, "Found in" pills, "Show more" button.
   Typography for the explainer and FAQ comes from category-content.css, which the page reuses
   via .category-body / .category-faq. */

.mechanic-header-container {
    text-align: center;
}

/* ---------- Stats ---------- */

.mechanic-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    margin: 0 auto 0.75rem;
    padding: 0 1rem;
}

.mechanic-stat {
    color: var(--text-color);
    opacity: 0.75;
    font-size: 0.95rem;
}

.mechanic-stat strong {
    color: var(--highlight-color);
    opacity: 1;
    font-weight: 600;
}

/* ---------- Found in ---------- */

.mechanic-found-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 auto 1.25rem;
    padding: 0 1rem;
    max-width: 900px;
}

.mechanic-found-in-label {
    color: var(--text-color);
    opacity: 0.6;
    font-size: 0.9rem;
    margin-right: 0.25rem;
}

.mechanic-found-in-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    background-color: var(--color);
    border: 1px solid var(--color-light);
    color: var(--text-color);
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mechanic-found-in-pill:hover,
.mechanic-found-in-pill:focus-visible {
    background-color: var(--color-light);
    border-color: var(--highlight-color);
    color: var(--text-color);
    text-decoration: none;
}

.mechanic-found-in-count {
    color: var(--highlight-color);
    font-weight: 600;
    font-size: 0.85rem;
}

/* Overflow pills stay in the document and are only hidden visually, so they are still crawled
   and still pass link equity. Never swap this for JS that injects them on click. */
.mechanic-found-in-pill.is-overflow {
    display: none;
}

.mechanic-found-in.is-expanded .mechanic-found-in-pill.is-overflow {
    display: inline-flex;
}

.mechanic-found-in-more {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    background-color: transparent;
    border: 1px dashed var(--color-light);
    color: var(--text-color);
    opacity: 0.8;
    font-size: 0.9rem;
    cursor: pointer;
}

.mechanic-found-in-more:hover,
.mechanic-found-in-more:focus-visible {
    border-color: var(--highlight-color);
    opacity: 1;
}

/* ---------- Explainer ---------- */
/* Border/padding come from .category-body in category-content.css; the background is turned
   back off below so the section reads as plain text on the panel rather than a boxed card. */

/* .category-body centers itself as a narrower, max-width column - here it spans the full
   width of the panel instead, edge to edge like the games grid below it. Longhand overrides
   rather than redeclaring the whole margin shorthand, so the top/bottom spacing .category-body
   already sets is untouched, and scoped to this page rather than every .category-body consumer
   (category pillar pages keep the narrower, more readable column). */
.mechanic-explainer {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    background-color: transparent;
}

.mechanic-explainer-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* flex: 1 lets the heading take the row's full width (there is nothing else in it for public
   visitors), so text-align: center centers it on the page rather than just within its own
   text box; the edit/save buttons, which do not grow, end up pinned after it. Font to match
   every other section heading on the site (.game-description h2 in game.css). */
.mechanic-explainer-heading h2 {
    flex: 1;
    margin: 0;
    text-align: center;
    font-size: 1.8rem;
    font-family: 'Oxanium', sans-serif;
    font-weight: 700;
}

/* The rendered/fallback text sits one div deeper than .category-body's own > :last-child reset
   reaches, so its last paragraph still needs its own trailing margin cleared. */
#mechanic-content-display > :last-child {
    margin-bottom: 0;
}

.mechanic-explainer-empty {
    opacity: 0.6;
}

/* Cover-image card a [[game:url-name]] token expands into - see GuideHelper.ExpandGameCards.
   Sized to sit inline mid-sentence (the natural way an editor references a game they just
   named) rather than as a standalone block: icon close to text-line height and vertical-align
   set, so it does not force the whole line's height open the way the old 48px thumbnail did. It
   still reads fine if placed alone in its own paragraph for a bigger, more deliberate mention. */
.mechanic-game-card {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: 0.35rem;
    padding: 0.15rem 0.6rem 0.15rem 0.15rem;
    margin: 0 0.1rem;
    border-radius: 999px;
    border: 1px solid var(--color-light);
    background-color: var(--color);
    color: var(--highlight-color);
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.mechanic-game-card:hover,
.mechanic-game-card:focus-visible {
    border-color: var(--highlight-color);
    background-color: var(--color-light);
}

.mechanic-game-card img {
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    object-fit: cover;
}

/* ---------- FAQ ---------- */
/* .category-faq (category-content.css) only styles the details/summary rows - the "Frequently
   asked questions" heading above them was never styled at all anywhere, so it rendered as a
   plain, unstyled browser default h2. Matched to the explainer heading above it. */
.mechanic-faq h2 {
    text-align: center;
    font-size: 1.8rem;
    font-family: 'Oxanium', sans-serif;
    font-weight: 700;
    color: var(--highlight-color);
    margin: 0 0 1rem;
}

/* ---------- Show more ---------- */

.mechanic-show-more-wrap {
    display: flex;
    justify-content: center;
    margin: 1.5rem 0 2.5rem;
}

.mechanic-show-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    border-radius: 8px;
    background-color: var(--color);
    border: 1px solid var(--color-light);
    color: var(--text-color);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mechanic-show-more:hover:not(:disabled),
.mechanic-show-more:focus-visible {
    background-color: var(--color-light);
    border-color: var(--highlight-color);
}

.mechanic-show-more:disabled {
    cursor: default;
    opacity: 0.6;
}

.mechanic-show-more-count {
    color: var(--highlight-color);
    font-weight: 600;
}

.mechanic-show-more.is-loading .mechanic-show-more-count {
    opacity: 0.5;
}


@media (max-width: 480px) {
    .mechanic-found-in {
        gap: 0.4rem;
    }

    .mechanic-found-in-pill,
    .mechanic-found-in-more {
        font-size: 0.85rem;
        padding: 0.3rem 0.6rem;
    }
}

/* ---------- /mechanics hub ---------- */

.mechanic-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    max-width: 80ch;
    margin: 1.5rem auto 2.5rem;
    padding: 1.5rem 1rem;
    text-align: left;
}

.mechanic-hub-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem;
    border-radius: 8px;
    background-color: var(--color);
    border: 1px solid var(--color-light);
    color: var(--text-color);
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.mechanic-hub-card:hover,
.mechanic-hub-card:focus-visible {
    background-color: var(--color-light);
    border-color: var(--highlight-color);
    color: var(--text-color);
    text-decoration: none;
}

.mechanic-hub-card-title {
    color: var(--highlight-color);
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'Oxanium', sans-serif;
}

.mechanic-hub-card-text {
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.85;
}

.mechanic-hub-card-count {
    font-size: 0.85rem;
    opacity: 0.6;
}