/*
 * BroPro brand lockup: crest + "BroPro" wordmark + product name.
 * One style for every BroPro Games page header.
 * Narrow phones keep only the crest and the product name.
 */
.bp-lockup {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.bp-lockup:focus-visible { outline: 2px solid #E2B347; outline-offset: 4px; border-radius: 8px; }
.bp-crest {
    width: 34px;
    height: 34px;
    flex: none;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(226, 179, 71, 0.28));
    transition: transform 0.25s ease;
}
.bp-lockup:hover .bp-crest { transform: translateY(-1px) rotate(-3deg); }
.bp-word {
    font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 25px;
    line-height: 1;
    letter-spacing: 0.2px;
    white-space: nowrap;
    background: linear-gradient(180deg, #FFF3C4 0%, #E2B347 60%, #B07D18 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.bp-sep {
    width: 1px;
    height: 20px;
    flex: none;
    background: rgba(255, 255, 255, 0.2);
}
.bp-game {
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
@media (max-width: 520px) {
    .bp-lockup:not(.bp-always) .bp-word,
    .bp-lockup:not(.bp-always) .bp-sep { display: none; }
    .bp-crest { width: 30px; height: 30px; }
    .bp-lockup { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .bp-crest { transition: none; } }

/* "About this game" + FAQ: plain HTML Google can read, shown only on a game's home screen. */
.bp-about { display: none; max-width: 980px; margin: 10px auto 0; padding: 0 16px 130px; color: #cfc9bd; font-size: 15px; line-height: 1.65; }
body:has(#scrHome:not(.cx-hidden):not(.lx-hidden):not(.ms-hidden):not(.mm-hidden):not(.cb-hidden)) .bp-about { display: block; }
.bp-about-card { border: 1px solid rgba(226, 179, 71, .22); border-radius: 22px; padding: 22px 20px; background: linear-gradient(160deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)); }
.bp-about h2 { margin: 0 0 8px; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; font-size: 28px; line-height: 1.2; color: #f5ecd6; }
.bp-about h3 { margin: 22px 0 8px; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: #e2b347; }
.bp-about p { margin: 0 0 10px; }
.bp-about ul.bp-feats { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 18px; }
.bp-about ul.bp-feats li { position: relative; padding-left: 20px; }
.bp-about ul.bp-feats li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: linear-gradient(135deg, #fff3c4, #e2b347); }
.bp-about details { border-top: 1px solid rgba(255, 255, 255, .08); padding: 10px 0; }
.bp-about details:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.bp-about summary { cursor: pointer; font-weight: 700; color: #f5f1e8; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.bp-about summary::-webkit-details-marker { display: none; }
.bp-about summary::after { content: '+'; color: #e2b347; font-weight: 800; }
.bp-about details[open] summary::after { content: '−'; }
.bp-about details p { margin: 8px 0 0; }
/* One language at a time: the game sets <html lang>, and only the matching card shows. */
html:not([lang="hi"]) .bp-about [data-lang="hi"], html[lang="hi"] .bp-about [data-lang="en"] { display: none; }
.bp-about [lang="hi"] { font-family: 'Noto Sans Devanagari', system-ui, sans-serif; }
.bp-about [lang="hi"] h2 { font-family: 'Noto Sans Devanagari', system-ui, sans-serif; font-size: 25px; line-height: 1.4; }
.bp-about [lang="hi"] h3 { letter-spacing: 0; text-transform: none; font-size: 15px; }
.bp-about [lang="hi"] p, .bp-about [lang="hi"] li { line-height: 1.8; }
.bp-about nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bp-about nav a { color: #f5f1e8; text-decoration: none; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 14px; }
.bp-about nav a:hover, .bp-about nav a:focus-visible { border-color: #e2b347; color: #fff3c4; }