/* Trivia — Sidebar Zone (~9:16 vertical, also Triple Horizontal) */

.tq-sidebar-wrap {
    width: 80cqw;
    height: 80cqh;
    position: relative;
    container-type: size;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3cqmin;
    overflow: hidden;
}

/* Timer — top, centered */
.tq-sidebar-wrap .tq-sidebar-timer {
    width: 20cqmin;
    height: 20cqmin;
    flex-shrink: 0;
    margin-top: 3cqmin;
}

.tq-sidebar-wrap .tq-sidebar-timer svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

/* Question — 40% height */
.tq-sidebar-wrap .tq-sidebar-question {
    height: 40%;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    font-size: 5cqmin;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--text, #fff);
    -webkit-text-stroke: 1.2cqmin var(--bg, #fff) !important;
    paint-order: stroke fill !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    text-shadow: none !important;
}

/* Answers — 35% height */
.tq-sidebar-wrap .tq-sidebar-answers {
    width: 90%;
    height: 35%;
    display: flex;
    flex-direction: column;
    gap: 0.5cqmin;
    flex-shrink: 0;
}

.tq-sidebar-wrap .tq-letter {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 8cqmin;
    width: 10cqmin;
    padding: 1cqmin 0;
    border-radius: 1.5cqmin;
    text-align: center;
}

.tq-sidebar-wrap .tq-ans {
    font-family: 'Roboto', sans-serif;
    font-size: 7cqmin;
    padding: 1cqmin 3cqmin;
    border-radius: 1.5cqmin;
    -webkit-text-stroke: 0 !important;
    text-shadow: none !important;
}