/* Brain Puzzle Guide v6 — production UI system */
:root {
    --bp-bg: #FFF8F4;
    --bp-surface: #FFFFFF;
    --bp-ink: #2F2932;
    --bp-muted: #6D6570;
    --bp-border: #E7D8D5;
    --bp-border-strong: #CDB9B6;
    --bp-pink: #C64278;
    --bp-pink-soft: #F8E3EB;
    --bp-teal: #197F91;
    --bp-teal-soft: #DCF0F2;
    --bp-coral: #E98672;
    --bp-coral-soft: #FBE7E2;
    --bp-yellow: #E6A94D;
    --bp-yellow-soft: #FAEFD8;
    --bp-radius: 10px;
    --bp-radius-sm: 7px;
    --bp-shadow: 0 5px 18px rgba(47, 41, 50, .07);
    --bp-font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.bp-theme { margin: 0; background: var(--bp-bg); color: var(--bp-ink); font-family: var(--bp-font); -webkit-font-smoothing: antialiased; }
.bp-theme a { color: inherit; }
.bp-theme img { max-width: 100%; }
.bp-theme button, .bp-theme input, .bp-theme textarea { font: inherit; }
.bp-theme :focus-visible { outline: 3px solid rgba(25, 127, 145, .38); outline-offset: 3px; }
.bp-main { min-height: 60vh; }
.bp-skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; transform: translateY(-150%); border-radius: var(--bp-radius-sm); padding: .65rem .85rem; background: var(--bp-ink); color: #fff !important; font-weight: 800; }
.bp-skip-link:focus { transform: translateY(0); }

/* Shared type and controls */
.bp-eyebrow { display: inline-flex; align-items: center; gap: .48rem; margin: 0 0 .72rem; color: var(--bp-teal); font-size: .76rem; font-weight: 850; letter-spacing: .08em; line-height: 1.25; text-transform: uppercase; }
.bp-eyebrow i { width: 1rem; text-align: center; }
.bp-section { padding: clamp(3rem, 5vw, 5rem) 0; }
.bp-section-heading { max-width: 760px; margin-bottom: 1.6rem; }
.bp-section-heading-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .7fr); gap: 2rem; align-items: end; max-width: none; }
.bp-section-heading h2, .bp-faq-header h2 { margin: 0; color: var(--bp-ink); font-size: clamp(1.65rem, 2.7vw, 2.35rem); font-weight: 850; letter-spacing: -.035em; line-height: 1.12; }
.bp-section-heading > p, .bp-section-heading div + p { margin: 0; color: var(--bp-muted); font-size: .97rem; line-height: 1.68; }
.bp-section-label { margin: 0 0 .65rem !important; color: var(--bp-teal) !important; font-size: .72rem !important; font-weight: 850 !important; letter-spacing: .085em; text-transform: uppercase; }
.bp-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: .48rem; border: 1px solid transparent; border-radius: var(--bp-radius-sm); padding: .72rem .96rem; font-size: .88rem; font-weight: 820; line-height: 1; text-decoration: none; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.bp-button:hover { transform: translateY(-1px); }
.bp-button-primary { border-color: var(--bp-ink); background: var(--bp-ink); color: #fff !important; }
.bp-button-primary:hover { border-color: #18141b; background: #18141b; }
.bp-button-secondary { border-color: var(--bp-border-strong); background: var(--bp-surface); color: var(--bp-ink) !important; }
.bp-button-secondary:hover { border-color: var(--bp-teal); background: var(--bp-teal-soft); color: #125e6a !important; }
.bp-text-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--bp-teal) !important; font-size: .9rem; font-weight: 820; text-decoration: none; }
.bp-text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Header */
.bp-utility-bar { background: var(--bp-ink); color: #fff; font-size: .76rem; }
.bp-utility-bar .container { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 1rem; }
.bp-utility-bar span { display: inline-flex; align-items: center; gap: .45rem; color: #f7eef2; }
.bp-utility-bar span i { color: #F1C66E; }
.bp-utility-bar a { color: #fff; font-weight: 750; text-decoration: none; }
.bp-utility-bar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bp-header { border-bottom: 1px solid var(--bp-border); background: rgba(255, 255, 255, .97); box-shadow: 0 2px 10px rgba(47, 41, 50, .045); }
.bp-nav-row { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 1rem; }
.bp-brand { display: inline-flex; align-items: center; gap: .68rem; color: var(--bp-ink) !important; text-decoration: none; }
.bp-brand-logo { display: block; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 9px; object-fit: contain; }
.bp-brand-text { display: grid; gap: .03rem; line-height: 1; }
.bp-brand-text strong { font-size: .96rem; font-weight: 900; letter-spacing: -.025em; }
.bp-brand-text span { color: var(--bp-teal); font-size: .73rem; font-weight: 820; letter-spacing: .085em; text-transform: uppercase; }
.bp-desktop-nav { align-items: center; gap: .15rem; }
.bp-desktop-nav > a { display: inline-flex; min-height: 40px; align-items: center; gap: .42rem; border: 1px solid transparent; border-radius: var(--bp-radius-sm); padding: .55rem .68rem; color: var(--bp-muted); font-size: .85rem; font-weight: 760; text-decoration: none; }
.bp-desktop-nav > a:hover { border-color: var(--bp-border); background: var(--bp-bg); color: var(--bp-ink); }
.bp-desktop-nav > a i { font-size: .78rem; }
.bp-desktop-nav .bp-nav-primary { margin-left: .25rem; border-color: var(--bp-ink); background: var(--bp-ink); color: #fff; }
.bp-desktop-nav .bp-nav-primary:hover { border-color: #18141b; background: #18141b; color: #fff; }
.bp-menu-button { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--bp-border-strong); border-radius: var(--bp-radius-sm); background: var(--bp-surface); color: var(--bp-ink); cursor: pointer; }
.bp-mobile-menu { margin: 0 0 .75rem; border: 1px solid var(--bp-border); border-radius: var(--bp-radius); background: var(--bp-surface); box-shadow: var(--bp-shadow); overflow: hidden; }
.bp-mobile-menu a { display: flex; min-height: 46px; align-items: center; gap: .65rem; border-bottom: 1px solid var(--bp-border); padding: .65rem .8rem; color: var(--bp-ink); font-size: .88rem; font-weight: 750; text-decoration: none; }
.bp-mobile-menu a:last-child { border-bottom: 0; }
.bp-mobile-menu a i { width: 1rem; color: var(--bp-teal); text-align: center; }
.bp-mobile-menu a:hover { background: var(--bp-bg); }

/* Footer */
.bp-footer { margin-top: 4rem; border-top: 4px solid var(--bp-pink); background: var(--bp-ink); color: #fff; }
.bp-footer-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(180px, .65fr) minmax(220px, .8fr); gap: 3rem; padding: 3.2rem 0 2.5rem; }
.bp-brand-footer { color: #fff !important; }
.bp-brand-footer .bp-brand-text span { color: #8FD4DF; }
.bp-footer-about > p { max-width: 540px; margin: 1rem 0 0; color: #D9D1DB; font-size: .88rem; line-height: 1.7; }
.bp-footer-about .bp-independent-note { color: #F1C66E; font-size: .76rem; font-weight: 800; letter-spacing: .04em; }
.bp-footer h2 { margin: .3rem 0 .8rem; color: #fff; font-size: .77rem; font-weight: 850; letter-spacing: .085em; text-transform: uppercase; }
.bp-footer ul { display: grid; gap: .52rem; margin: 0; padding: 0; list-style: none; }
.bp-footer li, .bp-footer li a { color: #D9D1DB; font-size: .84rem; line-height: 1.45; text-decoration: none; }
.bp-footer li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.bp-footer-bottom { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2rem; align-items: start; border-top: 1px solid rgba(255, 255, 255, .13); padding: 1.25rem 0 1.5rem; }
.bp-footer-bottom p { margin: 0; color: #BDB5C0; font-size: .72rem; line-height: 1.55; }
.bp-footer-bottom p:first-child { white-space: nowrap; }

/* Homepage hero */
.bp-hero { border-bottom: 1px solid var(--bp-border); background: var(--bp-bg); padding: clamp(2.8rem, 5vw, 5.2rem) 0; }
.bp-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(390px, .78fr); gap: clamp(2rem, 5vw, 5.2rem); align-items: center; }
.bp-hero-copy { max-width: 750px; }
.bp-hero h1, .bp-page-hero h1 { margin: 0; color: var(--bp-ink); font-size: clamp(2.25rem, 4.6vw, 4.25rem); font-weight: 880; letter-spacing: -.055em; line-height: 1.01; }
.bp-hero-text { max-width: 680px; margin: 1.2rem 0 0; color: var(--bp-muted); font-size: 1.04rem; line-height: 1.72; }
.bp-level-search { max-width: 620px; margin-top: 1.55rem; }
.bp-level-search > label { display: block; margin-bottom: .45rem; color: var(--bp-ink); font-size: .78rem; font-weight: 820; }
.bp-search-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; border: 1px solid var(--bp-border-strong); border-radius: var(--bp-radius); background: var(--bp-surface); box-shadow: var(--bp-shadow); overflow: hidden; }
.bp-search-control input { min-width: 0; border: 0; padding: .84rem .95rem; background: transparent; color: var(--bp-ink); outline: 0; }
.bp-search-control input::placeholder { color: #9B929D; }
.bp-search-control input:focus { box-shadow: inset 0 0 0 3px rgba(25, 127, 145, .22); }
.bp-search-control input.bp-input-invalid { box-shadow: inset 0 0 0 2px var(--bp-pink); }
.bp-search-control button { min-height: 48px; border: 0; border-left: 1px solid var(--bp-ink); padding: .72rem 1rem; background: var(--bp-ink); color: #fff; font-size: .84rem; font-weight: 820; cursor: pointer; }
.bp-search-control button:hover { background: #18141b; }
.bp-search-control input:disabled, .bp-search-control button:disabled { opacity: .55; cursor: not-allowed; }
.bp-search-control button:disabled:hover { background: var(--bp-ink); }
.bp-hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.bp-store-links { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .8rem; margin-top: 1.25rem; color: var(--bp-muted); font-size: .75rem; }
.bp-store-links > span { font-weight: 720; }
.bp-store-links a { display: inline-flex; align-items: center; gap: .32rem; color: var(--bp-teal); font-weight: 820; text-decoration: none; }
.bp-store-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bp-video-showcase { display: none; min-width: 0; border: 1px solid var(--bp-border-strong); border-radius: var(--bp-radius); background: var(--bp-surface); box-shadow: 0 8px 24px rgba(47, 41, 50, .08); overflow: hidden; outline: 0; }
.bp-video-showcase:focus-visible { box-shadow: 0 0 0 3px rgba(25, 127, 145, .25), 0 8px 24px rgba(47, 41, 50, .08); }
.bp-video-showcase-header { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--bp-border); padding: .9rem 1rem; background: #FFFCFA; }
.bp-video-showcase-header p { display: inline-flex; align-items: center; gap: .38rem; margin: 0 0 .2rem; color: var(--bp-pink); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.bp-video-showcase-header h2 { margin: 0; color: var(--bp-ink); font-size: 1.04rem; font-weight: 860; letter-spacing: -.015em; line-height: 1.3; }
.bp-video-sound-note { display: inline-flex; align-items: center; gap: .32rem; border: 1px solid var(--bp-border); border-radius: 999px; padding: .35rem .52rem; background: var(--bp-bg); color: var(--bp-muted); font-size: .64rem; font-weight: 820; white-space: nowrap; }
.bp-video-stage { position: relative; height: 404px; background: #FFF1EE; overflow: hidden; isolation: isolate; }
.bp-video-stage::before, .bp-video-stage::after { position: absolute; z-index: -1; border-radius: 50%; content: ""; pointer-events: none; }
.bp-video-stage::before { top: 35px; left: 24px; width: 82px; height: 82px; border: 14px solid rgba(25, 127, 145, .14); }
.bp-video-stage::after { right: 22px; bottom: 34px; width: 94px; height: 94px; background: rgba(230, 169, 77, .2); }
.bp-video-slide { position: absolute; top: 18px; left: 50%; width: 216px; aspect-ratio: 9 / 16; opacity: 0; transform: translateX(-50%) scale(.72); transform-origin: 50% 85%; transition: transform .68s cubic-bezier(.22, .78, .22, 1), opacity .45s ease, filter .45s ease; pointer-events: none; }
.bp-video-slide.is-active { z-index: 3; opacity: 1; filter: none; transform: translateX(-50%) scale(1) rotate(0); }
.bp-video-slide.is-prev { z-index: 1; opacity: .58; filter: saturate(.74); transform: translateX(calc(-50% - 92px)) translateY(24px) scale(.83) rotate(-5deg); }
.bp-video-slide.is-next { z-index: 2; opacity: .72; filter: saturate(.82); transform: translateX(calc(-50% + 92px)) translateY(20px) scale(.86) rotate(5deg); }
.bp-phone-frame { position: relative; width: 100%; height: 100%; border: 5px solid var(--bp-ink); border-radius: 24px; background: var(--bp-ink); box-shadow: 0 12px 20px rgba(47, 41, 50, .18); overflow: hidden; }
.bp-phone-speaker { position: absolute; top: 7px; left: 50%; z-index: 3; width: 38px; height: 5px; border-radius: 999px; background: rgba(47, 41, 50, .9); transform: translateX(-50%); }
.bp-gameplay-video { display: block; width: 100%; height: 100%; background: #F4E4E1; object-fit: cover; }
.bp-video-scene-label { position: absolute; right: 9px; bottom: 9px; z-index: 3; border: 1px solid rgba(255, 255, 255, .55); border-radius: 6px; padding: .25rem .4rem; background: rgba(47, 41, 50, .88); color: #fff; font-size: .58rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.bp-video-clue { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: .32rem; border: 1px solid var(--bp-border-strong); border-radius: 999px; padding: .42rem .58rem; background: var(--bp-surface); box-shadow: 0 6px 16px rgba(47, 41, 50, .1); font-size: .64rem; font-weight: 850; pointer-events: none; }
.bp-video-clue-tap { top: 56px; left: 13px; color: var(--bp-pink); animation: bp-video-clue-bob 3.2s ease-in-out infinite; }
.bp-video-clue-think { right: 13px; bottom: 62px; color: #805817; animation: bp-video-clue-bob 3.2s .7s ease-in-out infinite; }
.bp-video-arrow { position: absolute; top: 50%; z-index: 6; display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--bp-border-strong); border-radius: 50%; background: var(--bp-surface); color: var(--bp-ink); box-shadow: 0 5px 14px rgba(47, 41, 50, .12); cursor: pointer; transform: translateY(-50%); transition: background .18s ease, color .18s ease, transform .18s ease; }
.bp-video-arrow:hover { background: var(--bp-ink); color: #fff; transform: translateY(-50%) scale(1.06); }
.bp-video-arrow:focus-visible, .bp-video-controls button:focus-visible, .bp-video-dots button:focus-visible { outline: 3px solid rgba(25, 127, 145, .3); outline-offset: 2px; }
.bp-video-arrow-prev { left: 12px; }
.bp-video-arrow-next { right: 12px; }
.bp-video-showcase-footer { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: center; min-height: 105px; padding: .82rem 1rem 1.05rem; background: var(--bp-surface); }
.bp-video-caption span { display: block; margin-bottom: .2rem; color: var(--bp-pink); font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.bp-video-caption strong { display: block; color: var(--bp-ink); font-size: .86rem; font-weight: 860; }
.bp-video-caption p { margin: .18rem 0 0; color: var(--bp-muted); font-size: .69rem; line-height: 1.4; }
.bp-video-controls { display: flex; align-items: center; gap: .55rem; }
.bp-video-controls > button { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--bp-border-strong); border-radius: 50%; background: var(--bp-bg); color: var(--bp-ink); font-size: .66rem; cursor: pointer; }
.bp-video-controls > button:hover { border-color: var(--bp-teal); color: var(--bp-teal); }
.bp-video-dots { display: flex; align-items: center; gap: .3rem; }
.bp-video-dots button { width: 7px; height: 7px; border: 0; border-radius: 50%; padding: 0; background: #CFC1C6; cursor: pointer; transition: width .25s ease, border-radius .25s ease, background .25s ease; }
.bp-video-dots button.is-active { width: 20px; border-radius: 999px; background: var(--bp-pink); }
.bp-video-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: #F0E5E2; overflow: hidden; }
.bp-video-progress span { display: block; width: 100%; height: 100%; background: var(--bp-teal); transform: scaleX(0); transform-origin: left center; }
.bp-video-showcase.is-running .bp-video-progress span { animation: bp-video-progress 7s linear forwards; }
.bp-video-showcase.is-hovered .bp-video-progress span, .bp-video-showcase.is-focused .bp-video-progress span { animation-play-state: paused; }
.bp-mini-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: var(--bp-radius-sm); font-size: .9rem; }
.bp-icon-pink { background: var(--bp-pink-soft); color: var(--bp-pink); }
.bp-icon-teal { background: var(--bp-teal-soft); color: var(--bp-teal); }
.bp-icon-coral { background: var(--bp-coral-soft); color: #B64C38; }
.bp-icon-yellow { background: var(--bp-yellow-soft); color: #8A611D; }

@keyframes bp-video-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes bp-video-clue-bob {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-7px) rotate(1deg); }
}

@media (min-width: 1024px) {
    .bp-video-showcase { display: block; }
}

/* Level library */
.bp-levels-section, .bp-library-page { background: var(--bp-surface); }
.level-tabs-collapse { --level-tabs-collapsed-height: 104px; }
.level-tabs-panel { overflow: hidden; transition: max-height .24s ease; }
.level-tabs-grid { display: flex; flex-wrap: wrap; gap: .45rem; }
.level-range-tab, .level-tabs-toggle { display: inline-flex; min-height: 38px; align-items: center; gap: .35rem; border: 1px solid var(--bp-border-strong); border-radius: var(--bp-radius-sm); padding: .48rem .7rem; background: var(--bp-surface); color: var(--bp-muted); font-size: .78rem; font-weight: 800; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.level-range-tab:hover { border-color: var(--bp-teal); color: var(--bp-teal); }
.level-range-tab.active { border-color: var(--bp-ink); background: var(--bp-ink); color: #fff; }
.level-tabs-toggle { margin-top: .72rem; color: var(--bp-teal); }
.level-tabs-collapse:not(.has-overflow) .level-tabs-toggle { display: none; }
.level-tabs-collapse.has-overflow .level-tabs-toggle.hidden { display: inline-flex !important; }
.level-tabs-collapse.is-expanded .level-tabs-toggle i { transform: rotate(180deg); }
.bp-level-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: .82rem; margin-top: 1.2rem; }
.bp-level-card { min-width: 0; border: 1px solid var(--bp-border); border-radius: var(--bp-radius); background: var(--bp-surface); overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.bp-level-card:hover { border-color: var(--bp-border-strong); box-shadow: var(--bp-shadow); transform: translateY(-2px); }
.bp-level-card-link { display: block; height: 100%; color: inherit; text-decoration: none; }
.bp-level-thumb { position: relative; display: grid; min-height: 126px; place-items: center; border-bottom: 1px solid var(--bp-border); background: #FBF7F5; }
.bp-level-thumb img { display: block; width: 100%; height: 142px; object-fit: contain; }
.bp-level-thumb-missing::before { content: "\f12e"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--bp-pink); font-size: 1.6rem; }
.bp-level-thumb-missing img { display: none; }
.bp-level-number { position: absolute; top: .48rem; left: .48rem; border: 1px solid rgba(47, 41, 50, .22); border-radius: 999px; padding: .27rem .46rem; background: rgba(255, 255, 255, .94); color: var(--bp-ink); font-size: .68rem; font-weight: 850; line-height: 1; }
.bp-level-card-body { display: grid; gap: .33rem; padding: .72rem .76rem .78rem; }
.bp-level-card-body h3 { margin: 0; color: var(--bp-ink); font-size: .88rem; font-weight: 850; }
.bp-level-guide-types { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.bp-level-guide-types span { display: inline-flex; align-items: center; gap: .25rem; color: var(--bp-muted); font-size: .68rem; font-weight: 720; }
.bp-level-guide-types i { color: var(--bp-teal); }
.bp-section-action { margin-top: 1.3rem; text-align: right; }
.bp-game-type-switcher { border-bottom: 1px solid var(--bp-border); background: var(--bp-surface); padding: .85rem 0; }
.bp-game-type-tabs { display: flex; max-width: 780px; gap: .55rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--bp-border-strong) transparent; }
.bp-game-type-tab { position: relative; display: flex; min-width: 0; flex: 1 1 0; appearance: none; align-items: center; gap: .68rem; border: 1px solid var(--bp-border); border-radius: var(--bp-radius-sm); padding: .5rem .65rem; background: var(--bp-surface); color: var(--bp-muted) !important; font-size: .8rem; font-weight: 820; line-height: 1.25; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.bp-game-type-tab::after { position: absolute; right: .6rem; bottom: -1px; left: .6rem; height: 3px; border-radius: 3px 3px 0 0; background: transparent; content: ""; }
.bp-game-type-tab:hover { border-color: var(--bp-border-strong); background: var(--bp-bg); color: var(--bp-ink) !important; transform: translateY(-1px); }
.bp-game-type-tab.is-active { border-color: var(--bp-ink); background: var(--bp-bg); color: var(--bp-ink) !important; }
.bp-game-type-tab.is-active::after { background: var(--bp-pink); }
.bp-game-type-tab img { display: block; width: 46px; height: 46px; flex: 0 0 46px; border: 1px solid var(--bp-border); border-radius: 7px; background: #F7EFEC; object-fit: cover; }
.bp-game-type-tab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-game-type-switcher-home { margin-bottom: 1rem; border: 1px solid var(--bp-border); border-radius: var(--bp-radius); padding: .68rem; background: #FFFCFA; }
.bp-game-type-switcher-home.is-loading { opacity: .72; pointer-events: none; }
.bp-level-game-type-switcher { border-top: 1px solid var(--bp-border); }
.bp-level-game-type-switcher.is-loading { opacity: .72; pointer-events: none; }
.bp-level-switch-status { min-height: 1.15rem; margin: .35rem 0 -.35rem; color: var(--bp-muted); font-size: .76rem; line-height: 1.15rem; }
.bp-level-switch-status:empty { min-height: 0; margin: 0; }
.bp-level-switch-status.is-error { color: #A43737; }
.bp-level-nav-target { appearance: none; color: inherit; font: inherit; text-align: inherit; cursor: pointer; }
.bp-level-nav-target:disabled, .quick-level-item-btn:disabled { cursor: wait; }
#level-detail[aria-busy="true"] #video-container,
#level-detail[aria-busy="true"] #level-navigation-desktop,
#level-detail[aria-busy="true"] + #bottom-nav { opacity: .76; }
.bp-level-filter { border-bottom: 1px solid var(--bp-border); background: #FFF0F0; padding: 1.1rem 0; }
.bp-library-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.bp-library-toolbar > div { display: flex; align-items: baseline; gap: .38rem; }
.bp-library-toolbar strong { color: var(--bp-ink); font-size: 1.2rem; font-weight: 900; }
.bp-library-toolbar span { color: var(--bp-muted); font-size: .78rem; }
.bp-library-toolbar p { display: inline-flex; align-items: center; gap: .4rem; margin: 0; color: var(--bp-muted); font-size: .75rem; }
.bp-library-toolbar p i { color: var(--bp-teal); }
.bp-empty-state { padding: 3rem 1rem; border: 1px dashed var(--bp-border-strong); border-radius: var(--bp-radius); background: var(--bp-bg); color: var(--bp-muted); text-align: center; }
.bp-empty-state i { color: var(--bp-teal); font-size: 1.8rem; }
.bp-empty-state h2 { margin: .65rem 0 .25rem; color: var(--bp-ink); font-size: 1.25rem; }
.bp-empty-state p { margin: 0; }
.bp-pagination { margin-top: 1.5rem; }
.bp-pagination ul { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.bp-pagination li { min-width: 36px; min-height: 36px; border: 1px solid var(--bp-border); border-radius: var(--bp-radius-sm); background: var(--bp-surface); color: var(--bp-muted); text-align: center; line-height: 34px; }
.bp-pagination li a, .bp-pagination li span { display: block; padding: 0 .45rem; text-decoration: none; }
.bp-pagination li.active { border-color: var(--bp-ink); background: var(--bp-ink); color: #fff; }

/* Feature matrix */
.bp-features-section { border-top: 1px solid var(--bp-border); border-bottom: 1px solid var(--bp-border); background: #FFF0F0; }
.bp-feature-matrix { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); border: 1px solid var(--bp-border-strong); border-radius: var(--bp-radius); background: var(--bp-surface); overflow: hidden; }
.bp-feature-primary { position: relative; display: grid; min-height: 380px; align-content: space-between; border-right: 1px solid var(--bp-border); padding: 1.35rem; background: var(--bp-ink); color: #fff; overflow: hidden; }
.bp-feature-primary::after { content: ""; position: absolute; right: -55px; bottom: -60px; width: 180px; height: 180px; border: 28px solid rgba(233, 134, 114, .22); border-radius: 50%; }
.bp-feature-kicker { color: #F1C66E; font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.bp-feature-primary-copy { position: relative; z-index: 1; max-width: 520px; }
.bp-feature-primary-copy > i { display: grid; width: 42px; height: 42px; place-items: center; border-radius: var(--bp-radius-sm); background: var(--bp-pink); color: #fff; }
.bp-feature-primary h3 { max-width: 470px; margin: 1rem 0 .65rem; color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.15rem); font-weight: 850; letter-spacing: -.04em; line-height: 1.1; }
.bp-feature-primary p { max-width: 500px; margin: 0; color: #D9D1DB; font-size: .9rem; line-height: 1.65; }
.bp-feature-primary a { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; color: #fff; font-size: .8rem; font-weight: 820; text-decoration: none; }
.bp-feature-primary a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bp-feature-search-example { position: relative; z-index: 1; display: flex; max-width: 370px; align-items: center; gap: .65rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--bp-radius-sm); padding: .65rem .75rem; background: rgba(255, 255, 255, .07); color: #D9D1DB; font-size: .72rem; }
.bp-feature-search-example strong { color: #fff; font-size: 1rem; }
.bp-feature-search-example i { color: #F1C66E; }
.bp-feature-list { display: grid; }
.bp-feature-list article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .85rem; align-items: center; border-bottom: 1px solid var(--bp-border); padding: 1.05rem 1.15rem; }
.bp-feature-list article:last-child { border-bottom: 0; }
.bp-mini-icon { width: 40px; height: 40px; }
.bp-feature-list h3 { margin: 0; color: var(--bp-ink); font-size: .92rem; font-weight: 850; }
.bp-feature-list p { margin: .2rem 0 0; color: var(--bp-muted); font-size: .78rem; line-height: 1.5; }
.bp-feature-list article > span:last-child { color: #AAA0AC; font-size: .68rem; font-weight: 850; }

/* FAQ */
.bp-faq-section { background: var(--bp-bg); }
.bp-faq-header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.8rem; }
.bp-faq-header > div { max-width: 760px; }
.bp-faq-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; }
.bp-faq-group { border-top: 2px solid var(--bp-ink); }
.bp-faq-group-title { display: flex; align-items: center; gap: .65rem; border-bottom: 1px solid var(--bp-border); padding: .82rem .1rem; }
.bp-faq-group-title span { color: var(--bp-pink); font-size: .68rem; font-weight: 900; }
.bp-faq-group-title h3 { margin: 0; color: var(--bp-ink); font-size: .92rem; font-weight: 850; letter-spacing: .02em; text-transform: uppercase; }
.bp-faq-group details { border-bottom: 1px solid var(--bp-border); background: transparent; }
.bp-faq-group summary { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem .1rem; color: var(--bp-ink); font-size: .9rem; font-weight: 800; cursor: pointer; list-style: none; }
.bp-faq-group summary::-webkit-details-marker { display: none; }
.bp-faq-group summary i { color: var(--bp-teal); transition: transform .18s ease; }
.bp-faq-group details[open] summary i { transform: rotate(45deg); }
.bp-faq-group details p { margin: -.15rem 0 0; padding: 0 2rem 1rem 0; color: var(--bp-muted); font-size: .86rem; line-height: 1.65; }

/* Page heroes and content */
.bp-page-hero { border-bottom: 1px solid var(--bp-border); background: #FFF0F0; padding: clamp(2.8rem, 5vw, 5rem) 0; }
.bp-page-hero-inner { max-width: 940px; }
.bp-page-hero h1 { max-width: 900px; font-size: clamp(2.2rem, 4vw, 3.75rem); }
.bp-page-hero-inner > p:not(.bp-eyebrow):not(.bp-updated) { max-width: 760px; margin: 1rem 0 0; color: var(--bp-muted); font-size: 1rem; line-height: 1.7; }
.bp-updated { display: inline-flex; margin: 1rem 0 0; border: 1px solid #E1C384; border-radius: 999px; padding: .35rem .55rem; background: var(--bp-yellow-soft); color: #6C5124; font-size: .72rem; font-weight: 800; }
.bp-library-hero { padding-bottom: 2.8rem; }
.bp-about-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 1.5rem; align-items: stretch; }
.bp-about-lead { border-top: 3px solid var(--bp-pink); padding: 1.45rem 1.5rem; background: var(--bp-surface); }
.bp-about-lead h2, .bp-independent-panel h2 { margin: 0; color: var(--bp-ink); font-size: clamp(1.55rem, 2.7vw, 2.15rem); font-weight: 850; letter-spacing: -.035em; line-height: 1.15; }
.bp-about-lead p:not(.bp-section-label) { margin: .85rem 0 0; color: var(--bp-muted); font-size: .92rem; line-height: 1.72; }
.bp-about-facts { border: 1px solid var(--bp-border); border-radius: var(--bp-radius); background: var(--bp-surface); }
.bp-about-facts > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .65rem; border-bottom: 1px solid var(--bp-border); padding: 1rem; }
.bp-about-facts > div:last-child { border-bottom: 0; }
.bp-about-facts span { grid-row: 1 / 3; color: var(--bp-pink); font-size: .68rem; font-weight: 900; }
.bp-about-facts strong { color: var(--bp-ink); font-size: .88rem; }
.bp-about-facts p { margin: .2rem 0 0; color: var(--bp-muted); font-size: .76rem; line-height: 1.45; }
.bp-principles-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1.5rem; border: 1px solid var(--bp-border); border-radius: var(--bp-radius); background: var(--bp-surface); overflow: hidden; }
.bp-principles-grid article { border-right: 1px solid var(--bp-border); padding: 1.15rem; }
.bp-principles-grid article:last-child { border-right: 0; }
.bp-principles-grid i { color: var(--bp-teal); font-size: 1.05rem; }
.bp-principles-grid h2 { margin: .65rem 0 .38rem; color: var(--bp-ink); font-size: .92rem; font-weight: 850; }
.bp-principles-grid p { margin: 0; color: var(--bp-muted); font-size: .78rem; line-height: 1.55; }
.bp-independent-panel { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(0, 1.3fr); gap: 2rem; margin-top: 1.5rem; border-left: 4px solid var(--bp-coral); padding: 1.4rem 1.5rem; background: var(--bp-coral-soft); }
.bp-independent-panel p:not(.bp-section-label) { margin: 0 0 .7rem; color: #684941; font-size: .84rem; line-height: 1.65; }
.bp-independent-panel p:last-child { margin-bottom: 0; }
.bp-independent-panel a { color: #8E3426; font-weight: 850; text-decoration: underline; text-underline-offset: 3px; }

/* Contact */
.bp-contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1.1rem; }
.bp-contact-primary, .bp-contact-checklist { border: 1px solid var(--bp-border); border-radius: var(--bp-radius); background: var(--bp-surface); padding: 1.35rem; }
.bp-contact-primary { border-top: 3px solid var(--bp-pink); }
.bp-contact-primary h2, .bp-contact-checklist h2 { margin: 0; color: var(--bp-ink); font-size: 1.28rem; font-weight: 850; letter-spacing: -.025em; }
.bp-contact-email { display: block; margin: .75rem 0; color: var(--bp-teal) !important; font-size: clamp(1.12rem, 2.4vw, 1.55rem); font-weight: 850; text-decoration: none; overflow-wrap: anywhere; }
.bp-contact-primary > p:not(.bp-section-label) { margin: 0 0 1rem; color: var(--bp-muted); font-size: .86rem; line-height: 1.65; }
.bp-contact-checklist ul { display: grid; gap: .75rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.bp-contact-checklist li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .58rem; color: var(--bp-muted); font-size: .82rem; line-height: 1.55; }
.bp-contact-checklist li i { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; background: var(--bp-teal-soft); color: var(--bp-teal); font-size: .62rem; }
.bp-contact-checklist li strong { color: var(--bp-ink); }
.bp-reason-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.1rem; border: 1px solid var(--bp-border); border-radius: var(--bp-radius); background: var(--bp-surface); overflow: hidden; }
.bp-reason-list article { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: .68rem; align-items: start; border-right: 1px solid var(--bp-border); border-bottom: 1px solid var(--bp-border); padding: 1rem; }
.bp-reason-list article:nth-child(2n) { border-right: 0; }
.bp-reason-list article:nth-last-child(-n+2) { border-bottom: 0; }
.bp-reason-list article > span { color: #A69BA8; font-size: .63rem; font-weight: 850; }
.bp-reason-list article > i { color: var(--bp-pink); font-size: .9rem; }
.bp-reason-list h2 { margin: 0; color: var(--bp-ink); font-size: .88rem; font-weight: 850; }
.bp-reason-list p { margin: .25rem 0 0; color: var(--bp-muted); font-size: .76rem; line-height: 1.5; }
.bp-contact-note { display: flex; gap: .55rem; margin: 1rem 0 0; border: 1px solid #E1C384; border-radius: var(--bp-radius-sm); padding: .75rem .85rem; background: var(--bp-yellow-soft); color: #6C5124; font-size: .76rem; line-height: 1.5; }
.bp-contact-note i { margin-top: .12rem; }

/* Legal */
.bp-legal-hero { padding-bottom: 3.2rem; }
.bp-legal-section { background: var(--bp-surface); }
.bp-legal-layout { display: grid; grid-template-columns: 220px minmax(0, 850px); gap: 2.5rem; align-items: start; }
.bp-legal-nav { position: sticky; top: 105px; border-top: 2px solid var(--bp-ink); }
.bp-legal-nav p { margin: 0; border-bottom: 1px solid var(--bp-border); padding: .8rem 0; color: var(--bp-ink); font-size: .75rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.bp-legal-nav a { display: block; border-bottom: 1px solid var(--bp-border); padding: .58rem 0; color: var(--bp-muted); font-size: .74rem; line-height: 1.35; text-decoration: none; }
.bp-legal-nav a:hover { color: var(--bp-teal); }
.bp-legal-content { display: grid; gap: 0; }
.bp-legal-content article { position: relative; scroll-margin-top: 110px; border-bottom: 1px solid var(--bp-border); padding: 0 0 1.45rem 2.3rem; margin-bottom: 1.45rem; }
.bp-legal-content article > span { position: absolute; top: .2rem; left: 0; color: var(--bp-pink); font-size: .67rem; font-weight: 900; }
.bp-legal-content h2 { margin: 0 0 .7rem; color: var(--bp-ink); font-size: 1.18rem; font-weight: 850; letter-spacing: -.02em; }
.bp-legal-content h3 { margin: 1rem 0 .35rem; color: var(--bp-ink); font-size: .88rem; font-weight: 850; }
.bp-legal-content p, .bp-legal-content li { color: var(--bp-muted); font-size: .86rem; line-height: 1.72; }
.bp-legal-content p { margin: .55rem 0 0; }
.bp-legal-content ul { display: grid; gap: .35rem; margin: .65rem 0 0; padding-left: 1.15rem; }
.bp-legal-content a { color: var(--bp-teal); font-weight: 850; text-decoration: underline; text-underline-offset: 3px; }
.bp-legal-notice { border-left: 3px solid var(--bp-coral); padding: .72rem .8rem; background: var(--bp-coral-soft); color: #684941 !important; font-weight: 720; }

/* Play page */
.bp-game-page { padding: 2.2rem 1rem 0; background: var(--bp-bg); }
.bp-game-shell { max-width: 1240px; margin: 0 auto; }
.bp-game-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; border: 1px solid var(--bp-border); border-radius: var(--bp-radius); padding: 1.15rem 1.25rem; background: var(--bp-surface); }
.bp-game-header h1 { margin: 0; color: var(--bp-ink); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 850; letter-spacing: -.04em; line-height: 1.1; }
.bp-game-header p:not(.bp-eyebrow) { max-width: 720px; margin: .5rem 0 0; color: var(--bp-muted); font-size: .86rem; line-height: 1.55; }
.bp-game-actions { display: flex; gap: .5rem; flex: 0 0 auto; }
.bp-game-actions a, .bp-game-actions button { display: inline-flex; min-height: 42px; align-items: center; gap: .42rem; border: 1px solid var(--bp-border-strong); border-radius: var(--bp-radius-sm); padding: .58rem .7rem; background: var(--bp-surface); color: var(--bp-ink); font-size: .8rem; font-weight: 800; text-decoration: none; cursor: pointer; }
.bp-game-actions a:hover, .bp-game-actions button:hover { border-color: var(--bp-teal); background: var(--bp-teal-soft); color: var(--bp-teal); }
.bp-game-notice { display: flex; gap: .55rem; margin-bottom: .85rem; border: 1px solid #E1C384; border-radius: var(--bp-radius-sm); padding: .72rem .8rem; background: var(--bp-yellow-soft); color: #6C5124; }
.bp-game-notice i { margin-top: .14rem; }
.bp-game-notice p { margin: 0; font-size: .74rem; line-height: 1.5; }
.bp-game-frame-wrap { position: relative; min-height: 520px; overflow: hidden; border: 1px solid var(--bp-border-strong); border-radius: var(--bp-radius); background: var(--bp-ink); box-shadow: var(--bp-shadow); }
.bp-game-frame { position: relative; z-index: 1; display: block; width: 100%; min-height: 78vh; border: 0; background: var(--bp-surface); }
.bp-game-frame-loading { position: absolute; inset: 0; display: grid; place-content: center; gap: .6rem; color: #fff; font-size: .9rem; font-weight: 800; text-align: center; }
.bp-game-frame-loading i { color: #F1C66E; font-size: 1.7rem; }

/* Legacy level, guide, and comment views: keep behavior while removing old AI-template styling. */
.bp-theme [class*="bg-gradient"] { background-color: var(--bp-surface) !important; background-image: none !important; }
.bp-theme [class*="rounded-3xl"], .bp-theme [class*="rounded-2xl"] { border-radius: var(--bp-radius) !important; }
.bp-theme [class*="rounded-xl"] { border-radius: var(--bp-radius-sm) !important; }
.bp-theme [class*="shadow-"] { box-shadow: none !important; }
.bp-theme .text-purple-600, .bp-theme .text-purple-500, .bp-theme .hover\:text-purple-600:hover, .bp-theme .hover\:text-purple-700:hover { color: var(--bp-teal) !important; }
.bp-theme .text-orange-500, .bp-theme .text-orange-600, .bp-theme .hover\:text-orange-700:hover { color: var(--bp-pink) !important; }
.bp-theme .border-purple-100, .bp-theme .border-purple-200, .bp-theme .border-purple-300, .bp-theme .border-pink-200, .bp-theme .border-orange-100 { border-color: var(--bp-border) !important; }
.bp-theme .bg-purple-50, .bp-theme .bg-orange-50, .bp-theme .bg-pink-50, .bp-theme .bg-amber-50, .bp-theme .bg-blue-50, .bp-theme .bg-indigo-50 { background-color: var(--bp-bg) !important; }
.bp-theme .bg-purple-600, .bp-theme .bg-green-600, .bp-theme .bg-green-500, .bp-theme .bg-accent, .bp-theme .appv2-video-tab-active, .bp-theme .appv2-quick-level-active { background-color: var(--bp-ink) !important; color: #fff !important; }
.bp-theme .from-purple-600, .bp-theme .from-purple-500, .bp-theme .from-green-600, .bp-theme .from-green-500 { --tw-gradient-from: transparent !important; }
.bp-theme .appv2-level-hero, .bp-theme .appv2-level-detail, .bp-theme .appv2-levels-section { background: var(--bp-bg) !important; }
.bp-theme .bp-level-detail-hero { border-bottom: 1px solid var(--bp-border); padding-top: 1.8rem !important; padding-bottom: 1.45rem !important; background: #FFF0F0 !important; }
.bp-theme .appv2-level-hero h1 span { color: var(--bp-ink) !important; -webkit-text-fill-color: currentColor !important; }
.bp-theme #video-container, .bp-theme .comment-module, .bp-theme .version-guide-panel > div, .bp-theme .video-container { border: 1px solid var(--bp-border) !important; border-radius: var(--bp-radius) !important; background: var(--bp-surface) !important; box-shadow: var(--bp-shadow) !important; }
.bp-theme .guide-mode-tabs, .bp-theme .video-tabs { border-color: var(--bp-border) !important; }
.bp-theme .video-tab, .bp-theme .guide-mode-tab, .bp-theme .quick-level-item-btn { border-radius: var(--bp-radius-sm) !important; }
.bp-theme .submit-comment-btn, .bp-theme [class*="from-green"] { border: 1px solid var(--bp-ink) !important; background-color: var(--bp-ink) !important; background-image: none !important; color: #fff !important; transform: none !important; }
.bp-theme .comment-module { padding: 1rem !important; }
.bp-theme .comment-module input, .bp-theme .comment-module textarea { border-color: var(--bp-border-strong) !important; border-radius: var(--bp-radius-sm) !important; }
.bp-theme .comment-module input:focus, .bp-theme .comment-module textarea:focus { --tw-ring-color: rgba(25, 127, 145, .3) !important; border-color: var(--bp-teal) !important; }
.bp-theme .all-levels-btn, .bp-theme .btn-primary { background: var(--bp-ink) !important; color: #fff !important; }
.bp-theme .text-accent { color: var(--bp-teal) !important; }
.bp-theme .multiple-levels-notice { border-color: var(--bp-coral) !important; background: var(--bp-coral-soft) !important; }
.bp-theme .level-card { animation: none !important; }

/* Comment image lightbox */
.image-lightbox { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(47, 41, 50, .86); }
.image-lightbox.active { display: flex; }
.image-lightbox-content { position: relative; display: flex; width: min(100%, 1040px); max-height: calc(100vh - 2rem); align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .24); border-radius: var(--bp-radius); padding: 3rem 1rem 1rem; background: #211D23; box-shadow: 0 18px 52px rgba(0, 0, 0, .28); }
.image-lightbox-content img { display: block; max-width: 100%; max-height: calc(100vh - 6rem); border-radius: var(--bp-radius-sm); object-fit: contain; }
.image-lightbox-close { position: absolute; top: .55rem; right: .65rem; display: inline-grid; width: 36px; height: 36px; appearance: none; place-items: center; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--bp-radius-sm); background: transparent; color: #fff; font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.image-lightbox-close:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.image-lightbox-close:focus-visible { outline: 3px solid var(--bp-yellow); outline-offset: 2px; }

/* ThinkPHP jump page compatibility */
.bp-theme .jump-page { min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; background: var(--bp-bg); color: var(--bp-ink); font-family: var(--bp-font); }
.bp-theme .jump-card, .bp-theme .jump-container, .bp-theme .jump-content { width: min(100%, 560px); border: 1px solid var(--bp-border); border-radius: var(--bp-radius); background: var(--bp-surface); box-shadow: var(--bp-shadow); }
.bp-theme .jump-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--bp-ink); font-weight: 850; text-decoration: none; }

@media (max-width: 1023px) {
    .bp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .bp-desktop-nav > a { padding-inline: .5rem; }
    .bp-principles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bp-principles-grid article:nth-child(2) { border-right: 0; }
    .bp-principles-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--bp-border); }
    .bp-legal-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 1.7rem; }
}

@media (max-width: 767px) {
    .bp-utility-bar { display: none; }
    .bp-nav-row { min-height: 62px; }
    .bp-brand-logo { width: 39px; height: 39px; flex-basis: 39px; }
    .bp-video-showcase { display: none !important; }
    .bp-section { padding: 2.5rem 0; }
    .bp-section-heading-row, .bp-hero-grid, .bp-feature-matrix, .bp-faq-columns, .bp-about-layout, .bp-independent-panel, .bp-contact-grid, .bp-legal-layout { grid-template-columns: 1fr; }
    .bp-section-heading-row { gap: .65rem; }
    .bp-section-heading { margin-bottom: 1.25rem; }
    .bp-hero { padding: 2.5rem 0; }
    .bp-hero h1, .bp-page-hero h1 { font-size: 2.15rem; }
    .bp-hero-text { font-size: .94rem; }
    .bp-level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
    .bp-level-thumb { min-height: 105px; }
    .bp-game-type-switcher { padding: .7rem 0; }
    .bp-game-type-tabs { margin-right: -1rem; padding-right: 1rem; scroll-padding-inline: 1rem; scroll-snap-type: x proximity; }
    .bp-game-type-tab { min-width: 154px; flex: 0 0 154px; scroll-snap-align: start; }
    .bp-game-type-tab img { width: 40px; height: 40px; flex-basis: 40px; }
    .bp-game-type-switcher-home .bp-game-type-tabs { margin-right: 0; padding-right: 0; }
    .bp-level-thumb img { height: 118px; }
    .bp-level-card-body { padding: .6rem; }
    .bp-feature-primary { min-height: 340px; border-right: 0; border-bottom: 1px solid var(--bp-border); }
    .bp-faq-header { display: grid; gap: 1rem; align-items: start; }
    .bp-faq-header .bp-button { justify-self: start; }
    .bp-page-hero { padding: 2.6rem 0; }
    .bp-principles-grid { grid-template-columns: 1fr; }
    .bp-principles-grid article { border-right: 0; border-bottom: 1px solid var(--bp-border); }
    .bp-principles-grid article:last-child { border-bottom: 0; }
    .bp-independent-panel { gap: 1rem; }
    .bp-reason-list { grid-template-columns: 1fr; }
    .bp-reason-list article, .bp-reason-list article:nth-child(2n), .bp-reason-list article:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--bp-border); }
    .bp-reason-list article:last-child { border-bottom: 0; }
    .bp-legal-nav { position: static; display: none; }
    .bp-legal-content article { padding-left: 1.9rem; }
    .bp-game-page { padding: 1rem .7rem 0; }
    .bp-game-header { display: block; padding: 1rem; }
    .bp-game-actions { margin-top: .9rem; }
    .bp-game-frame-wrap { min-height: 420px; }
    .bp-game-frame { min-height: 70vh; }
    .bp-library-toolbar { align-items: start; }
    .bp-library-toolbar p { max-width: 240px; text-align: right; }
    .bp-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; padding: 2.5rem 0 2rem; }
    .bp-footer-about { grid-column: 1 / -1; }
    .bp-footer-bottom { grid-template-columns: 1fr; gap: .6rem; }
}

@media (max-width: 430px) {
    .bp-search-control { grid-template-columns: 1fr; }
    .bp-search-control button { border-top: 1px solid var(--bp-ink); border-left: 0; }
    .bp-hero-actions .bp-button { width: 100%; }
    .bp-store-links > span { width: 100%; }
    .bp-level-grid { gap: .55rem; }
    .bp-level-thumb img { height: 106px; }
    .bp-level-number { font-size: .62rem; }
    .bp-feature-list article { padding: .9rem; }
    .bp-library-toolbar { display: grid; }
    .bp-library-toolbar p { max-width: none; text-align: left; }
    .bp-game-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bp-game-actions a, .bp-game-actions button { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}