#bbk-quiz { max-width: 860px; margin: 0 auto; font-family: 'Dosis', sans-serif; color: #444; scroll-margin-top: 110px; }
#bbk-quiz .bq-card { position: relative; overflow: hidden; background: #fff; border: 2px solid #EFE6F4; border-radius: 26px; padding: 34px 34px 32px; box-shadow: 0 22px 50px rgba(111,74,146,.12); animation: bq-in .45s cubic-bezier(.2,.8,.2,1); }
@keyframes bq-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
#bbk-quiz .bq-step { font-size: 15px; font-weight: 800; letter-spacing: 1.5px; color: #DA5192; margin: 0 0 8px; }
#bbk-quiz .bq-h { font-family: 'Dosis', sans-serif; font-weight: 800; font-size: 34px; line-height: 1.2; color: #6F4A92; margin: 0 0 22px; text-transform: none; letter-spacing: 0; }
#bbk-quiz .bq-subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 14px; }
#bbk-quiz .bq-sub { font-family: 'Dosis', sans-serif; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 12px; border-radius: 20px; border: 2px solid #EFE6F4; background: #fff !important; color: #333 !important; font-size: 20px; font-weight: 800; cursor: pointer; transition: transform .2s, border-color .2s, box-shadow .2s; line-height: 1.2; }
#bbk-quiz .bq-sub:hover { transform: translateY(-5px) rotate(-1deg); border-color: var(--c); box-shadow: 0 14px 28px rgba(0,0,0,.08); }
#bbk-quiz .bq-sub-ic { font-size: 40px; line-height: 1; }
#bbk-quiz .bq-sub-age { font-size: 14px; font-weight: 700; color: #999; }
#bbk-quiz .bq-ages { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
#bbk-quiz .bq-age, #bbk-quiz .bq-next, #bbk-quiz .bq-retry, #bbk-quiz .bq-other, #bbk-quiz .bq-back { font-family: 'Dosis', sans-serif; cursor: pointer; font-weight: 800; border-radius: 999px; transition: transform .2s, filter .2s; line-height: 1.2; }
#bbk-quiz .bq-age { flex: 1 1 160px; padding: 18px 20px; font-size: 22px; border: 2px solid #E2D4EE; background: #F9F4FB !important; color: #6F4A92 !important; }
#bbk-quiz .bq-age:hover { transform: translateY(-3px); background: #6F4A92 !important; color: #fff !important; }
#bbk-quiz .bq-back { background: none !important; border: 0; color: #888 !important; font-size: 17px; padding: 6px 0; }
#bbk-quiz .bq-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 16px; font-weight: 700; color: #888; margin-bottom: 10px; }
#bbk-quiz .bq-lv { padding: 3px 12px; border-radius: 999px; color: #fff; }
#bbk-quiz .bq-lv0 { background: #2EAD6B; } #bbk-quiz .bq-lv1 { background: #E5A81C; } #bbk-quiz .bq-lv2 { background: #DA5192; } #bbk-quiz .bq-lv3 { background: #6F4A92; }
#bbk-quiz .bq-bar { height: 12px; background: #EFE6F4; border-radius: 999px; overflow: hidden; margin-bottom: 24px; }
#bbk-quiz .bq-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3ABDD6, #6F4A92, #DA5192); border-radius: 999px; transition: width .5s ease; }
#bbk-quiz .bq-q { white-space: pre-line; font-family: 'Dosis', sans-serif; font-weight: 800; font-size: 28px; line-height: 1.3; color: #333; margin: 0 0 20px; text-transform: none; letter-spacing: 0; }
#bbk-quiz .bq-opts { display: grid; gap: 12px; }
#bbk-quiz .bq-opt { font-family: 'Dosis', sans-serif; text-align: left; padding: 16px 20px; border-radius: 16px; border: 2px solid #E2D4EE; background: #fff !important; color: #333 !important; font-size: 20px; font-weight: 600; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; line-height: 1.35; }
#bbk-quiz .bq-opt:hover:not(:disabled) { transform: translateX(6px); border-color: #6F4A92; background: #F9F4FB !important; }
#bbk-quiz .bq-opt:disabled { cursor: default; opacity: .75; }
#bbk-quiz .bq-opt.is-right { border-color: #2EAD6B; background: #E7F7EE !important; opacity: 1; animation: bq-pop .4s ease; }
#bbk-quiz .bq-opt.is-wrong { border-color: #DA5192; background: #FCEAF2 !important; opacity: 1; animation: bq-shake .4s ease; }
@keyframes bq-pop { 50% { transform: scale(1.03); } }
@keyframes bq-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
#bbk-quiz .bq-fb { margin-top: 18px; }
#bbk-quiz .bq-fb:empty { display: none; }
#bbk-quiz .bq-fb-h { font-size: 26px; font-weight: 800; margin: 0 0 6px; }
#bbk-quiz .bq-fb-h.ok { color: #2EAD6B; } #bbk-quiz .bq-fb-h.no { color: #DA5192; }
#bbk-quiz .bq-fb-t { font-size: 19px; line-height: 1.6; margin: 0 0 12px; }
#bbk-quiz .bq-up { display: inline-block; background: #FEF6E3; color: #B07A0B; font-weight: 800; font-size: 17px; padding: 6px 14px; border-radius: 999px; margin: 0 0 14px; animation: bq-pop .6s ease 2; }
#bbk-quiz .bq-next { display: block; padding: 15px 30px; font-size: 20px; border: 0; background: #6F4A92 !important; color: #fff !important; }
#bbk-quiz .bq-next:hover { transform: translateY(-3px); filter: brightness(1.1); }
#bbk-quiz .bq-result { text-align: center; }
#bbk-quiz .bq-badge { font-size: 84px; line-height: 1; margin: 6px 0 10px; animation: bq-bounce 1s cubic-bezier(.2,.8,.2,1); }
@keyframes bq-bounce { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.2) rotate(8deg); } 100% { transform: scale(1); } }
#bbk-quiz .bq-stars { font-size: 40px; letter-spacing: 6px; margin: -10px 0 10px; }
#bbk-quiz .bq-star { color: #E2D4EE; } #bbk-quiz .bq-star.on { color: #F5B831; }
#bbk-quiz .bq-sum { font-size: 21px; margin: 0 0 6px; }
#bbk-quiz .bq-next-box { background: #F6F0FB; border-radius: 20px; padding: 22px; margin: 22px 0; text-align: left; border-left: 6px solid #6F4A92; }
#bbk-quiz .bq-next-box h3 { font-family: 'Dosis', sans-serif; font-weight: 800; font-size: 26px; color: #333; margin: 0 0 6px; text-transform: none; }
#bbk-quiz .bq-next-box p { margin: 0 0 6px; font-size: 18px; }
#bbk-quiz .bq-mode { color: #6F4A92; font-weight: 700; }
#bbk-quiz .bq-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 18px; }
#bbk-quiz .bq-btn { display: inline-block; background: #F5B831; color: #fff !important; font-weight: 800; font-size: 20px; padding: 15px 30px; border-radius: 999px; text-decoration: none !important; transition: transform .2s, filter .2s; }
#bbk-quiz .bq-btn:hover { transform: translateY(-3px); filter: brightness(1.06); }
#bbk-quiz .bq-btn.ghost { background: #fff; color: #6F4A92 !important; border: 2px solid #6F4A92; }
#bbk-quiz .bq-again { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#bbk-quiz .bq-retry, #bbk-quiz .bq-other { padding: 11px 22px; font-size: 18px; border: 2px solid #E2D4EE; background: #fff !important; color: #6F4A92 !important; }
#bbk-quiz .bq-retry:hover, #bbk-quiz .bq-other:hover { transform: translateY(-2px); border-color: #6F4A92; }
#bbk-quiz .bq-confetti { position: absolute; inset: 0; pointer-events: none; }
#bbk-quiz .bq-confetti i { position: absolute; top: -12px; width: 10px; height: 16px; border-radius: 3px; opacity: 0; animation: bq-fall 2.6s ease-in forwards; }
#bbk-quiz .bq-confetti i:nth-child(4n+1) { background: #DA5192; } #bbk-quiz .bq-confetti i:nth-child(4n+2) { background: #F5B831; } #bbk-quiz .bq-confetti i:nth-child(4n+3) { background: #3ABDD6; } #bbk-quiz .bq-confetti i:nth-child(4n) { background: #6F4A92; }
#bbk-quiz .bq-confetti i:nth-child(1) { left: 4%; animation-delay: .0s; } #bbk-quiz .bq-confetti i:nth-child(2) { left: 12%; animation-delay: .3s; } #bbk-quiz .bq-confetti i:nth-child(3) { left: 20%; animation-delay: .1s; }
#bbk-quiz .bq-confetti i:nth-child(4) { left: 28%; animation-delay: .5s; } #bbk-quiz .bq-confetti i:nth-child(5) { left: 36%; animation-delay: .2s; } #bbk-quiz .bq-confetti i:nth-child(6) { left: 44%; animation-delay: .6s; }
#bbk-quiz .bq-confetti i:nth-child(7) { left: 52%; animation-delay: .15s; } #bbk-quiz .bq-confetti i:nth-child(8) { left: 60%; animation-delay: .45s; } #bbk-quiz .bq-confetti i:nth-child(9) { left: 68%; animation-delay: .05s; }
#bbk-quiz .bq-confetti i:nth-child(10) { left: 76%; animation-delay: .35s; } #bbk-quiz .bq-confetti i:nth-child(11) { left: 84%; animation-delay: .25s; } #bbk-quiz .bq-confetti i:nth-child(12) { left: 92%; animation-delay: .55s; }
#bbk-quiz .bq-confetti i:nth-child(13) { left: 8%; animation-delay: .7s; } #bbk-quiz .bq-confetti i:nth-child(14) { left: 16%; animation-delay: .9s; } #bbk-quiz .bq-confetti i:nth-child(15) { left: 24%; animation-delay: .75s; }
#bbk-quiz .bq-confetti i:nth-child(16) { left: 32%; animation-delay: 1s; } #bbk-quiz .bq-confetti i:nth-child(17) { left: 40%; animation-delay: .8s; } #bbk-quiz .bq-confetti i:nth-child(18) { left: 48%; animation-delay: 1.1s; }
#bbk-quiz .bq-confetti i:nth-child(19) { left: 56%; animation-delay: .85s; } #bbk-quiz .bq-confetti i:nth-child(20) { left: 64%; animation-delay: 1.05s; } #bbk-quiz .bq-confetti i:nth-child(21) { left: 72%; animation-delay: .95s; }
#bbk-quiz .bq-confetti i:nth-child(22) { left: 80%; animation-delay: .72s; } #bbk-quiz .bq-confetti i:nth-child(23) { left: 88%; animation-delay: 1.15s; }
@keyframes bq-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(520px) rotate(540deg); } }
@media (max-width: 600px) {
	#bbk-quiz .bq-card { padding: 24px 18px; border-radius: 20px; }
	#bbk-quiz .bq-h { font-size: 28px; } #bbk-quiz .bq-q { font-size: 23px; } #bbk-quiz .bq-opt { font-size: 18px; }
	#bbk-quiz .bq-subs { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { #bbk-quiz *, #bbk-quiz *::before { animation: none !important; transition: none !important; } #bbk-quiz .bq-confetti { display: none; } }

#bbk-quiz .bq-timer { font-variant-numeric: tabular-nums; background: #E8F7FA; color: #2A9DB5; padding: 3px 12px; border-radius: 999px; font-weight: 800; }
#bbk-quiz .bq-timer.is-amber { background: #FEF6E3; color: #B07A0B; }
#bbk-quiz .bq-timer.is-red { background: #FCEAF2; color: #DA5192; animation: bq-pulse 1s ease-in-out infinite; }
@keyframes bq-pulse { 50% { transform: scale(1.12); } }
#bbk-quiz .bq-time { font-size: 18px; font-weight: 700; color: #6F4A92; margin: 4px 0 6px; }

/* ---- fun subject picker ---- */
#bbk-quiz .bq-pick .bq-h { margin-bottom: 10px; }
#bbk-quiz .bq-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
#bbk-quiz .bq-pills span { background: #F6F0FB; color: #6F4A92; font-weight: 700; font-size: 16px; padding: 6px 14px; border-radius: 999px; }
#bbk-quiz .bq-sub { position: relative; overflow: hidden; background: var(--t) !important; border: 2px solid transparent; border-bottom: 5px solid var(--c); padding: 22px 12px 18px; gap: 4px; animation: bq-pop-in .5s cubic-bezier(.2,.8,.2,1.3) backwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes bq-pop-in { from { opacity: 0; transform: translateY(24px) scale(.85); } to { opacity: 1; transform: none; } }
#bbk-quiz .bq-sub .bq-sub-ic { font-size: 46px; animation: bq-bob 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.35s); }
@keyframes bq-bob { 50% { transform: translateY(-6px) rotate(-4deg); } }
#bbk-quiz .bq-sub-name { font-size: 21px; font-weight: 800; color: #333; }
#bbk-quiz .bq-sub-tag { font-size: 15px; font-weight: 600; color: #666; line-height: 1.3; min-height: 2.6em; }
#bbk-quiz .bq-sub-age { font-size: 13px; font-weight: 800; color: var(--c); background: #fff; padding: 2px 10px; border-radius: 999px; }
#bbk-quiz .bq-sub-go { position: absolute; left: 0; right: 0; bottom: 0; background: var(--c); color: #fff; font-weight: 800; font-size: 15px; padding: 6px; transform: translateY(100%); transition: transform .25s ease; }
#bbk-quiz .bq-sub:hover { transform: translateY(-8px) rotate(-1.5deg); border-color: var(--c); box-shadow: 0 16px 30px rgba(0,0,0,.1); }
#bbk-quiz .bq-sub:nth-child(even):hover { transform: translateY(-8px) rotate(1.5deg); }
#bbk-quiz .bq-sub:hover .bq-sub-go { transform: translateY(0); }
#bbk-quiz .bq-sub:hover .bq-sub-ic { animation: bq-wiggle .5s ease; }
@keyframes bq-wiggle { 25% { transform: rotate(-14deg) scale(1.15); } 50% { transform: rotate(12deg) scale(1.15); } 75% { transform: rotate(-6deg); } }
#bbk-quiz .bq-sub.is-lit { transform: translateY(-8px) scale(1.06); border-color: var(--c); box-shadow: 0 0 0 4px var(--c), 0 16px 30px rgba(0,0,0,.12); }
#bbk-quiz .bq-sub.is-picked { animation: bq-squish .38s ease forwards; }
@keyframes bq-squish { 30% { transform: scale(.9, 1.08); } 60% { transform: scale(1.08, .94); } 100% { transform: scale(1); } }
#bbk-quiz .bq-surprise { border-bottom-style: dashed; }
#bbk-quiz .bq-surprise .bq-sub-ic { animation: bq-dice 3s ease-in-out infinite; }
@keyframes bq-dice { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(180deg) scale(1.15); } 90% { transform: rotate(360deg); } }
#bbk-quiz .bq-age { display: flex; flex-direction: column; align-items: center; gap: 6px; border-radius: 26px; padding: 22px 18px; animation: bq-pop-in .5s cubic-bezier(.2,.8,.2,1.3) backwards; animation-delay: calc(var(--i) * 90ms); }
#bbk-quiz .bq-age-em { font-size: 40px; line-height: 1; transition: transform .25s; }
#bbk-quiz .bq-age:hover .bq-age-em { transform: scale(1.25) rotate(-8deg); }
@media (prefers-reduced-motion: reduce) { #bbk-quiz .bq-sub, #bbk-quiz .bq-sub .bq-sub-ic, #bbk-quiz .bq-age { animation: none !important; } }
@media (max-width: 600px) { #bbk-quiz .bq-sub-tag { font-size: 14px; } #bbk-quiz .bq-sub .bq-sub-ic { font-size: 38px; } }

/* bonus round + sales scorecard */
#bbk-quiz .bq-bonus { display: inline-block; background: linear-gradient(90deg, #FDEFE9, #FEF6E3); color: #C2410C; font-weight: 800; font-size: 17px; padding: 8px 16px; border-radius: 999px; margin: 6px 0 4px; animation: bq-pop .6s ease 2; }
#bbk-quiz .bq-pitch { text-align: left; margin: 22px 0 6px; display: grid; gap: 16px; }
#bbk-quiz .bq-box { background: #fff; border: 2px solid #EFE7F7; border-radius: 20px; padding: 18px 20px; }
#bbk-quiz .bq-box p { margin: 0 0 8px; font-size: 17px; }
#bbk-quiz .bq-map, #bbk-quiz .bq-help { list-style: none; margin: 0; padding: 0; }
#bbk-quiz .bq-map li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; margin-bottom: 6px; font-weight: 700; font-size: 17px; }
#bbk-quiz .bq-map li.ok { background: #E7F7EE; }
#bbk-quiz .bq-map li.fix { background: #FEF6E3; }
#bbk-quiz .bq-map em { font-style: normal; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; color: #2EAD6B; }
#bbk-quiz .bq-map li.fix em { color: #B07A0B; }
#bbk-quiz .bq-polish { background: #FFFBF0; border-color: #F5B831; }
#bbk-quiz .bq-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
#bbk-quiz .bq-chips span { background: #F5B831; color: #333; font-weight: 800; font-size: 16px; padding: 6px 14px; border-radius: 999px; }
#bbk-quiz .bq-help li { position: relative; padding: 5px 0 5px 30px; font-size: 17px; }
#bbk-quiz .bq-help li::before { content: '✔'; position: absolute; left: 4px; top: 5px; color: #2EAD6B; font-weight: 900; }
#bbk-quiz .bq-pitch .bq-next-box { margin: 0; }
#bbk-quiz .bq-pitch .bq-ctas { justify-content: flex-start; margin: 14px 0 8px; }
#bbk-quiz .bq-proof { font-size: 15px !important; color: #6F4A92; font-weight: 700; margin: 0 !important; }
@media (max-width: 600px) {
	#bbk-quiz .bq-box { padding: 14px; }
	#bbk-quiz .bq-pitch .bq-ctas { flex-direction: column; }
	#bbk-quiz .bq-pitch .bq-btn { text-align: center; }
}

/* scorecard reveal animations */
#bbk-quiz .bq-rv { opacity: 0; translate: 0 40px; transition: opacity .6s ease, translate .6s cubic-bezier(.2, 1.4, .4, 1); }
#bbk-quiz .bq-rv.is-in { opacity: 1; translate: 0 0; }
#bbk-quiz .bq-rv.is-in .bq-map li { animation: bq-slide-in .5s cubic-bezier(.2, 1.4, .4, 1) backwards; animation-delay: calc(.25s + var(--i) * .15s); }
#bbk-quiz .bq-rv.is-in .bq-map li.fix em { animation: bq-wiggle-tag .6s ease calc(.8s + var(--i) * .15s) 2; display: inline-block; }
#bbk-quiz .bq-rv.is-in .bq-chips span { animation: bq-chip-pop .5s cubic-bezier(.2, 1.6, .4, 1) backwards; animation-delay: calc(.3s + var(--i) * .15s); }
#bbk-quiz .bq-rv.is-in .bq-help li { animation: bq-slide-in .5s ease backwards; animation-delay: calc(.2s + var(--i) * .12s); }
#bbk-quiz .bq-rv.is-in .bq-help li::before { animation: bq-chip-pop .45s cubic-bezier(.2, 1.8, .4, 1) backwards; animation-delay: calc(.35s + var(--i) * .12s); }
#bbk-quiz .bq-rv.is-in .bq-ctas .bq-btn:first-child { animation: bq-cta-pulse 1.8s ease-in-out 1s infinite; }
@keyframes bq-slide-in { from { opacity: 0; transform: translateX(-30px); } }
@keyframes bq-chip-pop { from { opacity: 0; transform: scale(.3); } }
@keyframes bq-wiggle-tag { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes bq-cta-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 184, 49, .6); } 50% { box-shadow: 0 0 0 12px rgba(245, 184, 49, 0); } }
@media (prefers-reduced-motion: reduce) {
	#bbk-quiz .bq-rv { opacity: 1; translate: none; transition: none; }
	#bbk-quiz .bq-rv * { animation: none !important; }
}