.bt-game { width:100%; max-width:700px; margin:0 auto 60px auto }
.bt-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.bt-progress { color:#667085; font-size:14px; font-weight:600; }
.bt-timer { --bt-progress:100%; width:58px; height:58px; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; background:conic-gradient(#f2a93b var(--bt-progress), #e9edf2 0); border-radius:50%; color:#24375e; font-size:20px; font-weight:700; }
.bt-timer::after { content:""; width:46px; height:46px; position:absolute; background:#fff; border-radius:50%; }
.bt-timer span { position:relative; z-index:1; }
.bt-card { padding:34px 28px; background:#fff; border:1px solid #e3e7ed; border-radius:16px; text-align:center; box-sizing:border-box; }
.bt-question { min-height:100px; display:flex; align-items:center; justify-content:center; margin-bottom:26px; color:#24375e; font-size:27px; font-weight:600; line-height:1.4; }
.bt-show-answer { padding:12px 24px; background:#2ea8df; border:0; border-radius:8px; color:#fff; cursor:pointer; font-size:15px; font-weight:600; }
.bt-show-answer:hover { background:#2595c7; }
.bt-show-answer:focus-visible { outline:2px solid #24375e; outline-offset:2px; }
.bt-answer-holder { display:none; margin:4px 0 22px 0; padding:20px; background:#f4faf5; border:1px solid #d9eddd; border-radius:12px; }
.bt-answer-holder.bt-visible { display:block; animation:btAnswerIn .25s ease-out; }
.bt-answer-label { margin-bottom:7px; color:#63a96d; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1px; }
.bt-answer { color:#315c39; font-size:24px; font-weight:700; line-height:1.4; }
.bt-reference-holder { margin-top:12px; color:#667085; font-size:14px; }
.bt-reference { color:#2ea8df; font-weight:600; text-decoration:none; }
.bt-reference:hover { text-decoration:underline; }
.bt-reference:focus-visible { outline:2px solid #2ea8df; outline-offset:2px; }
.bt-next { display:none; padding:12px 24px; background:#63c174; border:0; border-radius:8px; color:#fff; cursor:pointer; font-size:15px; font-weight:600; }
.bt-next:hover { background:#55ae65; }
.bt-next:focus-visible { outline:2px solid #315c39; outline-offset:2px; }
.bt-complete { display:none; padding:45px 25px; background:#fff; border:1px solid #e3e7ed; border-radius:16px; text-align:center; box-sizing:border-box; }
.bt-complete-title { margin-bottom:10px; color:#24375e; font-size:28px; font-weight:700; }
.bt-complete-text { margin-bottom:24px; color:#667085; font-size:16px; }
.bt-play-again { padding:12px 24px; background:#2ea8df; border:0; border-radius:8px; color:#fff; cursor:pointer; font-size:15px; font-weight:600; }
.bt-play-again:hover { background:#2595c7; }
.bt-play-again:focus-visible { outline:2px solid #24375e; outline-offset:2px; }

@keyframes btAnswerIn {
    from { opacity:0; transform:translateY(6px); }
    to { opacity:1; transform:translateY(0); }
}

@media (max-width:600px) {
    .bt-card { padding:26px 16px; }
    .bt-question { min-height:90px; font-size:22px; }
    .bt-answer { font-size:21px; }
    .bt-timer { width:52px; height:52px; font-size:18px; }
    .bt-timer::after { width:41px; height:41px; }
}