/* Linked public pages use the same blue/pink brand as the two landing pages.
   Selectors are scoped so game state, filters and policy tabs retain their behavior. */
.bb-page, .zy-page, .policy-page, .ct-page, .download-landing, .public-download, .brand-demo, .brand-film-page {
  --brand-ink: #102d4f; --brand-muted: #60778f; --brand-blue: #238ee7; --brand-pink: #d63864; --brand-line: #dde8f2;
  background: #f4faff; color: var(--brand-ink);
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.bb-page .page { max-width: 1080px; padding: 0 32px 64px; }
.bb-hero { padding: 48px; margin: 32px 0; border-radius: 24px; background: linear-gradient(115deg, #edf7ff, #fff0f6); border-color: var(--brand-line); box-shadow: 0 15px 40px #19416c08; }
.bb-hero-title { font-size: 44px; font-weight: 800; letter-spacing: -.035em; color: var(--brand-ink); }
.bb-hero-title .accent { color: var(--brand-blue); }
.bb-hero-eyebrow { color: var(--brand-pink); }
.bb-hero-sub, .bb-card-desc, .bb-coming-sub, .bb-app-cta-desc { color: var(--brand-muted); }
.bb-card { padding: 32px; border-radius: 20px; border-color: var(--brand-line); box-shadow: 0 12px 35px #17374e08; color: var(--brand-ink); }
.bb-card-head { margin-bottom: 22px; }
.bb-card-name { font-size: 21px; }
.bb-card-emoji { background: #e5f2ff; }
.bb-card-talk { background: linear-gradient(145deg, #fff, #f0f7ff); }
.bb-card-zhiyuan { background: linear-gradient(145deg, #fff, #fff4f8); }
.bb-card-zhiyuan .bb-card-emoji { background: #fce9f0; }
.bb-card-cta { font-weight: 600; color: var(--brand-blue); }
.bb-tag { background: #eaf3fc; color: #52718d; border-radius: 6px; }
.bb-app-cta { padding: 25px 28px; background: #e8f4ff; border: 1px solid #d5e8fa; border-radius: 18px; }
.bb-app-cta-btn { background: var(--brand-blue); border-radius: 10px; }
.policy-page .container { max-width: 900px; margin: 36px auto 52px; padding: 40px 46px; background: #fff; border: 1px solid var(--brand-line); border-radius: 24px; box-shadow: 0 15px 45px #19416c08; min-height: 0; }
.policy-page .container > header { text-align: left; padding: 0 0 30px; margin: 0 0 26px; border-color: var(--brand-line); }
.policy-page h1 { font-size: 34px; color: var(--brand-ink); font-weight: 750; margin-bottom: 12px; line-height: 1.5; }
.policy-page .policy-eyebrow { color: var(--brand-pink); }
.policy-page .policy-intro { color: var(--brand-muted); }
.policy-page .tabs { border: 1px solid var(--brand-line); border-radius: 12px; box-shadow: none; }
.policy-page .tab { color: var(--brand-muted); padding: 15px 8px; }
.policy-page .tab.active { color: var(--brand-blue); background: #edf6ff; border-bottom-color: var(--brand-blue); }
.policy-page .content-text { line-height: 2; color: #344b65; font-size: 14px; }
.policy-page .container > footer { color: var(--brand-muted); border-color: var(--brand-line); }
.zy-page { --zy-ink: #102d4f; --zy-ink-soft: #60778f; --zy-gold: #238ee7; --zy-gold-soft: #60778f; --zy-gold-line: #dde8f2; --zy-parch-top: #f4faff; --zy-parch-mid: #edf6ff; --zy-parch-low: #fff2f7; --zy-card-border: #dde8f2; }
.zy-page .page-zy { background: #f4faff; }
.zy-page .zy-hero { background: linear-gradient(115deg, #e7f3ff, #fff0f6); border-radius: 24px; padding: 34px; border-color: var(--brand-line); }
.zy-page .zy-hero-title { font-size: 32px; font-weight: 750; letter-spacing: -.025em; }
.zy-page .zy-hero-eyebrow { color: var(--brand-pink); }
.zy-page .zy-search-wrap { top: 88px; background: #f4faff; }
.zy-page .zy-filter-btn.active { background: var(--brand-blue); }
.zy-page .zy-app-cta { background: #e8f4ff; border-color: var(--brand-line); border-radius: 16px; }
.ct-page { --ct-bg: #f4faff; --ct-bg-soft: #edf6ff; --ct-neon: #d63864; --ct-neon-deep: #b42952; --ct-violet: #238ee7; --ct-gold: #256dab; --ct-gold-deep: #18578e; --ct-white: #102d4f; --ct-dim: #60778f; --ct-glass: #ffffffdd; --ct-glass-line: #dde8f2; }
.ct-page .page-ct { background: linear-gradient(155deg, #f4faff, #fff3f8); }
.ct-page .ct-glow { opacity: .12; }
.ct-page .ct-intro-title { color: var(--brand-ink); font-size: 36px; font-weight: 750; }
.ct-page .ct-title-accent { color: var(--brand-blue); }
.ct-page .ct-intro-sub, .ct-page .ct-stat-desc, .ct-page .ct-badge { color: var(--brand-muted); }
.ct-page .ct-chat-bubble { background: #fff; border-color: var(--brand-line); box-shadow: 0 8px 20px #17374e08; }
.ct-page .ct-chat-text { color: #366b98; }
.ct-page .ct-intro-card, .ct-page .ct-qcard, .ct-page .ct-feedback { background: #fff; border-color: var(--brand-line); box-shadow: 0 12px 35px #17374e10; }
.ct-page .ct-badge, .ct-page .ct-badge-hot { background: #edf6ff; border-color: var(--brand-line); }
.ct-page .ct-start-btn { background: var(--brand-blue); border-radius: 10px; }
.ct-page .ct-start-text, .ct-page .ct-start-arrow { color: white; }
.ct-page .ct-opt-text, .ct-page .ct-option.picked .ct-opt-text, .ct-page .ct-quote-inner .ct-quote-text, .ct-page .ct-fb-jury { color: var(--brand-ink); }
.ct-page .ct-question { color: var(--brand-pink); background: none; }
.ct-page .ct-option { background: #f5f9fe; border-color: #dae7f3; }
.ct-page .ct-option.picked { background: #fff0f6; box-shadow: 0 0 0 1px #d6386433; }
.ct-page .ct-opt-key { color: #246ea9; background: #e6f3ff; border-color: #c6e0f5; }
.ct-page .ct-quote-scene .ct-quote-label, .ct-page .ct-quote-inner .ct-quote-label { color: #246ea9; }
.ct-page .ct-fb-verdict.ok .ct-fb-verdict-text { color: #087c52; }
.ct-page .ct-fb-verdict.no .ct-fb-verdict-text, .ct-page .ct-fb-verdict.no .ct-fb-verdict-delta, .ct-page .ct-quote-react.door-slam .ct-quote-label, .ct-page .ct-quote-react.door-slam .ct-quote-text { color: #b42c4b; }
.ct-page .ct-fb-next { background: var(--brand-blue); color: white; border-radius: 10px; box-shadow: none; }
.download-landing { display: block; overflow: auto; background: linear-gradient(115deg, #f4faff, #fff0f6); }
.download-landing .bg-layer { background: radial-gradient(circle at 60% 30%, #d4eaff, #fff0f6); position: fixed; animation: none; }
.download-landing .container { width: min(420px, calc(100% - 40px)); max-width: none; margin: 55px auto; border-radius: 24px; background: #ffffffed; border-color: var(--brand-line); box-shadow: 0 20px 55px #19416c15; }
.download-landing .download-btn { background: var(--brand-blue); border-radius: 10px; box-shadow: 0 8px 20px #238ee720; }
.download-landing .qr-code-box { border-color: var(--brand-line); box-shadow: none; }
.download-landing .gx-nav, .download-landing .gx-footer { position: relative; z-index: 10; }
.public-download .page { max-width: 580px; padding: 40px 30px 60px; }
.public-download .hero { background: #fff; border-color: var(--brand-line); border-radius: 22px; }
.public-download .brand-logo { box-shadow: 0 10px 25px #238ee719; }
.public-download .brand-name, .public-download .tip a { color: var(--brand-blue); }
.public-download .btn { border-radius: 10px; }
.public-download .btn-primary { background: var(--brand-blue); }
.public-download .btn-secondary { border-color: #acd2f2; color: #246ea9; background: #fff; }
.public-download .footer a { color: var(--brand-muted) !important; }
.brand-demo { background: linear-gradient(115deg, #f4faff, #fff0f6); display: block; overflow: auto; }
.brand-demo .bg-layer { background: radial-gradient(circle at 60% 30%, #d4eaff, #fff0f6); position: fixed; }
.brand-demo .phone-container { margin: 32px auto; }
.brand-film-page { background: linear-gradient(115deg, #f4faff, #fff0f6); }
.brand-film-page .controls button { color: #246ea9; background: #fff; border-color: var(--brand-line); border-radius: 10px; }
@media (max-width: 760px) {
  .bb-page .page { padding: 0 20px 40px; }
  .bb-hero { padding: 30px 24px; margin: 24px 0; }
  .bb-hero-title { font-size: 32px; }
  .bb-card { padding: 24px; }
  .bb-app-cta { padding: 20px; }
  .policy-page .container { width: calc(100% - 32px); margin: 24px auto 36px; padding: 26px 22px; border-radius: 18px; }
  .policy-page h1 { font-size: 27px; }
  .policy-page .content-text { font-size: 14px; line-height: 1.95; }
  .policy-page .tab { font-size: 13px; padding-inline: 4px; }
  .zy-page .zy-search-wrap { top: 73px; }
  .zy-page .zy-hero { padding: 28px 22px; }
  .zy-page .zy-hero-title { font-size: 27px; }
  .ct-page .ct-intro-title { font-size: 31px; }
  .public-download .page { padding: 30px 22px 45px; }
  .download-landing .container { margin-block: 28px; }
}

@media (max-width: 400px) { .brand-demo .phone-container { width: calc(100% - 28px); } }
.ct-page .ct-hud { box-shadow: 0 10px 25px #17374e10; }
@media (max-width: 760px) {
  .zy-page .zy-hero-title b { display: block; }
  .zy-page .zy-hero-tier-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .zy-page .zy-tier-chip { min-width: 0; padding: 8px 3px; }
  .zy-page .zy-tier-chip-en { font-size: 10px; }
}
.policy-page .policy-eyebrow { font-size: 12px; letter-spacing: .08em; margin-bottom: 16px; }
.policy-page .policy-intro { font-size: 14px; line-height: 1.8; }
/* Result and toast surfaces must remain readable after moving the game to light backgrounds. */
.ct-page .ctr-title-eyebrow, .ct-page .ctr-title-tagline { color: var(--brand-muted); }
.ct-page .ctr-summary-body, .ct-page .ctr-insight-body, .ct-page .ctr-reveal-heart { color: var(--brand-ink); }
.ct-page .ctr-insight-label { color: #246ea9; }
.ct-page .ctr-header-label.ctr-gameover, .ct-page .ctr-wrong-mark, .ct-page .ctr-wrong-picked-text { color: #b42c4b; }
.ct-page .ctr-wrong-mark.ctr-mark-ok, .ct-page .ctr-wrong-answer-text { color: #087c52; }
.ct-page .ctr-title-line { color: var(--brand-pink); }
.ct-page .ctr-title-card--hero .ctr-title-name, .ct-page .ctr-title-card--hero .ctr-title-rarity { color: #cbe7ff; }
.ct-page .ctr-title-card--hero .ctr-title-eyebrow, .ct-page .ctr-title-card--hero .ctr-title-tagline { color: #e2effb; }
.ct-page .ctr-btn-primary { background: var(--brand-blue); border-radius: 10px; box-shadow: 0 8px 20px #238ee71a; }
.ct-page .ctr-btn-secondary { border-radius: 10px; }
.ct-page .ctr-app-btn { background: var(--brand-blue); color: white; border-radius: 10px; }
.ct-page .ct-toast { background: #102d4f; color: white; border-color: #ffffff44; }
.ct-page .ctr-title-card--hero .ctr-title-line { color: #fff0f6; }