/* ── Google Fonts ────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

/* ── Root Container ──────────────────────────────────────────── */
.hts-root {
    position: relative !important;
    min-height: 560px !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    margin: 24px 0 !important;
    font-family: 'Crimson Text', Georgia, serif !important;
    color: #f0e6d3 !important;
    -webkit-text-fill-color: #f0e6d3 !important;
}

/* ── Background Image ────────────────────────────────────────── */
.hts-bg {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    filter: brightness(0.45) sepia(0.3) !important;
    z-index: 0 !important;
}

/* ── Dark Overlay ────────────────────────────────────────────── */
.hts-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, rgba(5,0,0,0.62) 100%) !important;
    z-index: 1 !important;
}

/* ── Content Layer ───────────────────────────────────────────── */
.hts-content {
    position: relative !important;
    z-index: 2 !important;
    padding: 36px 28px !important;
    min-height: 560px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ── Title Screen ────────────────────────────────────────────── */
.hts-title h2 {
    font-family: 'Cinzel Decorative', 'Times New Roman', serif !important;
    font-size: 30px !important;
    color: #c8973a !important;
    -webkit-text-fill-color: #c8973a !important;
    text-align: center !important;
    text-shadow: 0 0 30px rgba(200,151,58,0.5), 2px 2px 6px rgba(0,0,0,0.9) !important;
    line-height: 1.4 !important;
    margin: 0 0 10px 0 !important;
}

.hts-title .hts-subtitle {
    font-size: 20px !important;
    -webkit-text-fill-color: #b0967e !important;
    text-align: center !important;
    font-style: italic !important;
    margin-bottom: 28px !important;
    line-height: 1.6 !important;
}

.hts-pool-hint {
    font-size: 14px !important;
    color: #6a4a2a !important;
    -webkit-text-fill-color: #6a4a2a !important;
    text-align: center !important;
    font-style: italic !important;
    margin-bottom: 20px !important;
    letter-spacing: 0.5px !important;
}

.hts-divider {
    width: 220px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, #c8973a, transparent) !important;
    margin: 14px auto 28px !important;
    border: none !important;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.hts-btn-start {
    background: linear-gradient(135deg, #7a1515 0%, #b02020 100%) !important;
    color: #f0e6d3 !important;
    -webkit-text-fill-color: #f0e6d3 !important;
    border: 1px solid #c8973a !important;
    padding: 15px 40px !important;
    font-family: 'Cinzel Decorative', serif !important;
    font-size: 13px !important;
    cursor: pointer !important;
    letter-spacing: 2px !important;
    transition: all 0.3s !important;
    box-shadow: 0 4px 20px rgba(139,26,26,0.7) !important;
    border-radius: 3px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    margin-top: 8px !important;
}

.hts-btn-start:hover {
    background: linear-gradient(135deg, #9a1f1f 0%, #cc2a2a 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 7px 28px rgba(180,30,30,0.85) !important;
}

/* ── Progress Dots ───────────────────────────────────────────── */
.hts-progress {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    margin-bottom: 22px !important;
}

.hts-dot {
    width: 11px !important;
    height: 11px !important;
    border-radius: 50% !important;
    background: rgba(200,151,58,0.15) !important;
    border: 1px solid rgba(200,151,58,0.35) !important;
    transition: background 0.4s !important;
}
.hts-dot.hts-done   { background: #c8973a !important; }
.hts-dot.hts-active { background: #c0392b !important; border-color: #c0392b !important; }

/* ── Question Box ────────────────────────────────────────────── */
.hts-question-box {
    background: rgba(8,3,0,0.88) !important;
    border: 1px solid rgba(200,151,58,0.35) !important;
    border-radius: 6px !important;
    padding: 30px 28px !important;
    max-width: 580px !important;
    width: 100% !important;
}

.hts-q-num {
    font-size: 13px !important;
    color: #7a5a3a !important;
    -webkit-text-fill-color: #7a5a3a !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    text-align: center !important;
    margin-bottom: 14px !important;
}

.hts-q-text {
    font-size: 23px !important;
    line-height: 1.55 !important;
    margin-bottom: 28px !important;
    font-style: italic !important;
}

/* ── Answer Choices ──────────────────────────────────────────── */
.hts-choices {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.hts-choice {
    background: rgba(35,15,5,0.72) !important;
    border: 1px solid rgba(200,151,58,0.2) !important;
    color: #d4c4a8 !important;
    -webkit-text-fill-color: #d4c4a8 !important;
    padding: 14px 18px !important;
    text-align: left !important;
    font-family: 'Crimson Text', Georgia, serif !important;
    font-size: 19px !important;
    transition: all 0.25s !important;
    line-height: 1.45 !important;
    border-radius: 3px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 100% !important;
    margin: 0 !important;
}

.hts-choice:hover {
    background: rgba(120,20,20,0.55) !important;
    border-color: rgba(200,151,58,0.55) !important;
    color: #f0e6d3 !important;
    -webkit-text-fill-color: #f0e6d3 !important;
    transform: translateX(5px) !important;
}

.hts-choice-letter {
    color: #c8973a !important;
    -webkit-text-fill-color: #c8973a !important;
    font-weight: 600 !important;
    margin-right: 10px !important;
}

/* ── Result Box ──────────────────────────────────────────────── */
.hts-result-box {
    background: rgba(8,3,0,0.92) !important;
    border: 1px solid rgba(200,151,58,0.5) !important;
    border-radius: 6px !important;
    padding: 36px 30px !important;
    max-width: 560px !important;
    width: 100% !important;
    text-align: center !important;
}

.hts-sin-icon {
    font-size: 64px !important;
    display: block !important;
    margin-bottom: 14px !important;
}

.hts-sin-name {
    font-family: 'Cinzel Decorative', serif !important;
    font-size: 27px !important;
    color: #c8973a !important;
    -webkit-text-fill-color: #c8973a !important;
    text-shadow: 0 0 22px rgba(200,151,58,0.45) !important;
    margin-bottom: 4px !important;
}

.hts-sin-latin {
    font-size: 15px !important;
    font-style: italic !important;
    margin-bottom: 20px !important;
    display: block !important;
}

.hts-sin-desc {
    font-size: 20px !important;
    line-height: 1.75 !important;
    color: #c4aa8a !important;
    -webkit-text-fill-color: #c4aa8a !important;
    margin-bottom: 26px !important;
    font-style: italic !important;
}

/* ── Scoreboard pills ────────────────────────────────────────── */
.hts-score-pills {
    display: flex !important;
    gap: 7px !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    margin-bottom: 28px !important;
}

.hts-pill {
    background: rgba(35,15,5,0.8) !important;
    border: 1px solid rgba(200,151,58,0.18) !important;
    border-radius: 20px !important;
    padding: 4px 14px !important;
    font-size: 15px !important;
    -webkit-text-fill-color: #8a6a4a !important;
    font-family: 'Crimson Text', serif !important;
}

.hts-pill.hts-winner {
    background: rgba(120,20,20,0.65) !important;
    border-color: #c8973a !important;
    color: #f0e6d3 !important;
    -webkit-text-fill-color: #f0e6d3 !important;
    font-weight: 600 !important;
}

/* ── Restart Button ──────────────────────────────────────────── */
.hts-btn-restart {
    background: transparent !important;
    color: #c8973a !important;
    -webkit-text-fill-color: #c8973a !important;
    border: 1px solid rgba(200,151,58,0.45) !important;
    padding: 11px 30px !important;
    font-family: 'Crimson Text', serif !important;
    font-size: 18px !important;
    transition: all 0.25s !important;
    border-radius: 3px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.hts-btn-restart:hover {
    background: rgba(200,151,58,0.12) !important;
    border-color: #c8973a !important;
}

/* ── Fade Animation ──────────────────────────────────────────── */
.hts-fade-in {
    animation: htsFadeIn 0.55s ease forwards !important;
}

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

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .hts-content    { padding: 24px 16px !important; }
    .hts-title h2   { font-size: 22px !important; }
    .hts-question-box, .hts-result-box { padding: 22px 16px !important; }
    .hts-q-text     { font-size: 19px !important; }
    .hts-choice     { font-size: 17px !important; padding: 12px 14px !important; }
    .hts-sin-name   { font-size: 22px !important; }
    .hts-sin-desc   { font-size: 18px !important; }
}