body { background-color: #fffbeb; margin: 0; font-family: 'Inter', sans-serif; }
.bt-container { max-width: 1000px; margin: 20px auto; padding: 10px 20px; }
.bt-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.bt-back-btn { text-decoration: none; color: #fff; background: #d97706; padding: 8px 16px; border-radius: 8px; font-weight: 600; display: flex; align-items: center; gap: 8px; transition: background 0.3s; }
.bt-back-btn:hover { background: #b45309; }
.bt-stats { display: flex; gap: 20px; font-weight: 700; color: #92400e; font-size: 1.1rem; }
.bt-progress-bar { width: 100%; height: 8px; background: #fef3c7; border-radius: 4px; overflow: hidden; margin-bottom: 25px; }
.bt-progress { height: 100%; background: linear-gradient(90deg, #f59e0b, #d97706); width: 0%; transition: width 0.3s; }

.bt-game-area { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: stretch; }

.bt-left-panel { background: #1e293b; border-radius: 16px; padding: 40px 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.bt-timeline { position: relative; width: 100%; height: 250px; display: flex; justify-content: center; align-items: center; }
.bt-timeline-line { position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0; width: 4px; background: rgba(245, 158, 11, 0.2); }
.bt-timeline-point { position: absolute; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: rgba(245, 158, 11, 0.4); }
#point-1 { top: 10%; } #point-2 { top: 90%; } #point-3 { top: 50%; background: #f59e0b; width: 20px; height: 20px; z-index: 2; box-shadow: 0 0 15px #f59e0b; }

.bt-event-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 12px; padding: 20px; text-align: center; max-width: 80%; position: relative; z-index: 3; backdrop-filter: blur(5px); }
.bt-event-icon { font-size: 2.5rem; color: #f59e0b; margin-bottom: 15px; }
.bt-event-title { color: #f8fafc; font-size: 1.2rem; font-weight: 600; line-height: 1.5; }

.bt-right-panel { display: flex; flex-direction: column; justify-content: center; }
.bt-question-title { color: #92400e; font-size: 1.3rem; margin-bottom: 20px; }
.bt-choices { display: flex; flex-direction: column; gap: 12px; }
.bt-choice-btn { background: white; border: 2px solid #fef3c7; color: #b45309; padding: 16px; border-radius: 12px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.2s; text-align: left; }
.bt-choice-btn:hover { background: #fffbeb; border-color: #f59e0b; transform: translateX(5px); }
.bt-choice-btn.correct { background: #10b981; border-color: #10b981; color: white; transform: none; }
.bt-choice-btn.wrong { background: #ef4444; border-color: #ef4444; color: white; transform: none; }

.bt-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 1000; backdrop-filter: blur(5px); }
.bt-modal.show { opacity: 1; pointer-events: auto; }
.bt-modal-content { background: white; padding: 40px; border-radius: 20px; text-align: center; max-width: 400px; transform: translateY(20px); transition: transform 0.3s; }
.bt-modal.show .bt-modal-content { transform: translateY(0); }
.bt-modal-icon { font-size: 4rem; color: #f59e0b; margin-bottom: 15px; }
.bt-modal-title { font-size: 2rem; color: #1f2937; margin: 0 0 10px 0; }
.bt-modal-score { font-size: 1.5rem; font-weight: 700; color: #d97706; margin-bottom: 5px; }
.bt-modal-rank { font-size: 1.2rem; color: #64748b; margin-bottom: 25px; }
.bt-modal-btn { display: inline-block; background: #f59e0b; color: white; border: none; padding: 12px 24px; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; text-decoration: none; margin: 5px; transition: background 0.3s; }
.bt-modal-btn:hover { background: #d97706; }

@media (max-width: 768px) {
    .bt-game-area { grid-template-columns: 1fr; }
}