/* Классический квиз. */

#timer-rail {
    position: fixed;
    top: env(safe-area-inset-top, 0px); left: 0; right: 0;
    height: 8px;
    background: rgba(255, 255, 255, .06);
    z-index: 40;
    opacity: 0;
    transition: opacity .2s ease;
}

#timer-rail.on { opacity: 1; }

/* Секунды закреплены поверх страницы: длинный вопрос уводит карточку вверх, и
   на телефоне от таймера оставалась одна полоска без единой цифры. */
#secs-badge {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: 12px;
    z-index: 41;
    font-family: var(--mono);
    font-weight: 800;
    font-size: 30px;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    text-shadow: 0 2px 16px rgba(0, 0, 0, .85);
    opacity: 0;
    transition: opacity .2s ease;
    pointer-events: none;
}

#secs-badge.on { opacity: 1; }
#secs-badge.danger { color: var(--red); }

#timer-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--lime), var(--cyan));
    transition: width .25s linear, background .3s ease;
}

#timer-fill.warn { background: linear-gradient(90deg, var(--amber), var(--pink)); }
#timer-fill.danger { background: var(--red); animation: blink .6s infinite; }

/* --- прогресс квиза --- */

.hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.hud-score {
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 800;
    color: var(--lime);
}

/* Карточка раунда подсвечивается цветом самого раунда — см. ROUND_COLORS в js. */
#qcard { border-top: 3px solid var(--accent, var(--line)); }
.round-splash { border-top: 3px solid var(--accent, var(--line)); }
.opt.picked { border-color: var(--accent, var(--violet)); }

.dots {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .13);
}

.dot.right { background: var(--lime); }
.dot.wrong { background: var(--pink); }
.dot.timeout { background: var(--amber); }
.dot.now { background: var(--cyan); box-shadow: 0 0 0 4px rgba(53, 232, 255, .18); }

/* --- заставка раунда --- */

.round-splash {
    text-align: center;
    padding: 46px 22px;
    background:
        radial-gradient(70% 100% at 50% 0%, rgba(167, 107, 255, .28), transparent 70%),
        linear-gradient(180deg, var(--panel), var(--panel-2));
}

.round-splash .round-no {
    font-family: var(--mono);
    font-size: 74px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--cyan), var(--violet), var(--pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 6px;
}

.round-splash h2 { margin-bottom: 10px; }

.mult-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 800;
    color: #150a02;
    background: linear-gradient(135deg, var(--amber), var(--pink));
}

/* --- вопрос --- */

.q-text {
    font-size: clamp(20px, 3.6vw, 27px);
    font-weight: 750;
    line-height: 1.28;
    margin: 4px 0 18px;
}

.opts { display: grid; gap: 10px; }

.opt {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    width: 100%;
    text-align: left;
    padding: 15px 17px;
    min-height: 56px;
    font-weight: 600;
    line-height: 1.35;
    background: #0d1120;
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    animation: fade-up .34s cubic-bezier(.2, 1.3, .4, 1) both;
    animation-delay: calc(var(--i, 0) * 55ms);
}

.opt > span:not(.letter):not(.order-no) {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Ховер не должен перебивать выбранный/разобранный вариант: у :hover
   специфичность выше, чем у .picked, и на мультивыборе выбор «пропадал». */
@media (hover: hover) and (pointer: fine) {
    .opt:hover:not(:disabled):not(.picked):not(.right):not(.wrong) {
        border-color: var(--cyan);
        background: #172041;
    }
}

.opt .letter {
    flex: 0 0 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-family: var(--mono);
    font-weight: 800;
    background: rgba(255, 255, 255, .07);
    color: var(--ink-dim);
}

/* border-color берётся из --accent раунда, он объявлен выше. */
.opt.picked { background: #221a44; }
.opt.picked .letter { background: var(--accent, var(--violet)); color: #0a0616; }

.opt.right {
    border-color: var(--lime);
    background: rgba(200, 255, 61, .13);
    animation: pop .3s ease both;
}
.opt.right .letter { background: var(--lime); color: #0d1400; }

.opt.wrong {
    border-color: var(--pink);
    background: rgba(255, 61, 139, .12);
}
.opt.wrong .letter { background: var(--pink); color: #1a0410; }

.opt .order-no {
    margin-left: auto;
    font-family: var(--mono);
    font-weight: 800;
    color: var(--cyan);
}

/* Разбор ответа и .gain живут в base.css — их использует и симулятор. */

/* --- финал --- */

.final-score {
    font-family: var(--mono);
    font-size: clamp(56px, 14vw, 108px);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--lime), var(--cyan), var(--violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.rank-title {
    font-size: clamp(22px, 5vw, 34px);
    font-weight: 800;
    margin: 8px 0;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin: 20px 0;
}

.stat-box {
    background: #10142a;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px;
    text-align: center;
}

.stat-box b {
    display: block;
    font-family: var(--mono);
    font-size: 26px;
    color: var(--cyan);
}

.stat-box span { font-size: 13px; color: var(--ink-mute); }

.text-answer { margin-top: 4px; }