:root {
    --rq-bg: #fff;
    --rq-surface: #fff;
    --rq-text: #3c3c3c;
    --rq-text-soft: #777;
    --rq-green: #58cc02;
    --rq-green-dark: #58a700;
    --rq-green-bg: #d7ffb8;
    --rq-green-text: #2d6a00;
    --rq-blue: #1cb0f6;
    --rq-blue-dark: #1899d6;
    --rq-blue-soft: #ddf4ff;
    --rq-border: #e5e5e5;
    --rq-border-deep: #d4d4d4;
    --rq-red: #ff4b4b;
    --rq-red-bg: #ffdfe0;
    --rq-red-text: #9f0e18;
    --rq-radius-btn: 16px;
    --font-heading: "Nunito", "Helvetica Neue", Arial, sans-serif;
}

.rr-course-page { background: var(--rq-bg); }

.rq-shell {
    max-width: 680px;
    margin: 0 auto 3rem;
    padding: 0 1rem 2rem;
}

.rq-app { min-height: 420px; }
.rq-app[x-cloak] { display: none !important; }

.rq-hero-card {
    background: linear-gradient(180deg, #f3ffe8 0%, #fff 100%);
    border: 2px solid #d7ffb8;
    border-radius: 20px;
    padding: 1.15rem 1.25rem 1.2rem;
    margin-bottom: 1.25rem;
}

.rq-hero-card__top {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
}

.rq-hero-card__level {
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--rq-green-dark);
}

.rq-hero-card__title {
    margin: 0.15rem 0 0;
    font-family: var(--font-heading);
    font-size: 1.55rem;
}

.rq-hero-card__xp {
    font-weight: 800;
    background: #fff;
    border: 2px solid var(--rq-border);
    border-bottom-width: 4px;
    border-radius: 12px;
    padding: 0.4rem 0.7rem;
    color: var(--rq-green-dark);
    white-space: nowrap;
}

.rq-hero-card__sub, .rq-journey, .rq-save-note {
    color: var(--rq-text-soft);
    font-size: 0.92rem;
}

.rq-rank-bar, .rq-progress {
    height: 16px;
    background: var(--rq-border);
    border-radius: 999px;
    overflow: hidden;
}

.rq-rank-bar__fill, .rq-progress__bar {
    height: 100%;
    background: var(--rq-green);
    border-radius: 999px;
}

.rq-path { display: flex; flex-direction: column; gap: 0.75rem; }

.rq-module-card, .rq-answer, .rq-panel {
    width: 100%;
    text-align: left;
    background: #fff;
    border: 2px solid var(--rq-border);
    border-bottom-width: 4px;
    border-bottom-color: var(--rq-border-deep);
    border-radius: var(--rq-radius-btn);
    color: var(--rq-text);
    font: inherit;
}

.rq-module-card {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1rem;
    cursor: pointer;
}

.rq-module-card:disabled, .rq-module-card--locked { opacity: 0.55; cursor: not-allowed; }
.rq-module-card:not(:disabled):hover { border-color: var(--rq-blue); }
.rq-module-card--done {
    border-color: var(--rq-green);
    border-bottom-color: var(--rq-green-dark);
    background: #f7fff0;
}

.rq-module-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--rq-green);
    color: #fff;
    flex: 0 0 auto;
    font-size: 1.25rem;
}

.rq-module-card__body h3 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.rq-module-card__body p { margin: 0; color: var(--rq-text-soft); font-size: 0.9rem; }
.rq-module-card__meta { margin-top: 0.35rem; font-size: 0.78rem; font-weight: 800; color: var(--rq-blue-dark); }
.rq-module-card__badge { margin-left: auto; color: var(--rq-green); font-size: 1.3rem; }

.rq-play__top {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem 0.75rem;
    align-items: center;
    padding-bottom: 1rem;
}

.rq-icon-btn {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--rq-text-soft);
    font-size: 1.3rem;
    grid-row: span 2;
    cursor: pointer;
    border-radius: 12px;
}

.rq-play__meta { display: flex; justify-content: flex-end; gap: 0.6rem; align-items: center; }
.rq-progress-wrap { position: relative; }
.rq-streak, .rq-streak-banner { font-weight: 800; color: #c47d00; }
.rq-streak-banner {
    position: absolute;
    left: 50%;
    top: -1.3rem;
    transform: translateX(-50%);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.rq-lives { letter-spacing: 0.15em; color: var(--rq-red); }

.rq-play__main { padding-bottom: 6.5rem; }
.rq-question-meta { font-size: 0.78rem; font-weight: 800; color: var(--rq-blue-dark); margin: 0 0 0.7rem; }

.rq-mascot-row { display: flex; gap: 0.8rem; align-items: flex-start; margin-bottom: 1rem; }
.rq-mascot-img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #f3ffe8;
    border: 3px solid #fff;
    box-shadow: 0 4px 0 var(--rq-border-deep);
}
.rq-speech {
    position: relative;
    flex: 1;
    background: #fff;
    border: 2px solid var(--rq-border);
    border-radius: 18px;
    border-bottom-left-radius: 6px;
    padding: 0.85rem 1rem;
}
.rq-speech::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 22px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 10px solid var(--rq-border);
}
.rq-instruction {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--rq-text-soft);
}
.rq-question { margin: 0; font-size: 1.15rem; font-weight: 800; }
.rq-question-img { display: block; max-height: 180px; margin: 0 auto 1rem; border-radius: 12px; }

.rq-answers { display: flex; flex-direction: column; gap: 0.7rem; }
.rq-answer {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 58px;
    padding: 0.75rem 0.9rem;
    font-weight: 800;
    cursor: pointer;
}
.rq-answer:disabled { cursor: default; }
.rq-answer__num {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 2px solid var(--rq-border);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}
.rq-answer__text { display: flex; flex-direction: column; gap: 0.35rem; }
.rq-answer__img { max-height: 72px; border-radius: 8px; }
.rq-answer--selected { border-color: var(--rq-blue); background: var(--rq-blue-soft); }
.rq-answer--selected .rq-answer__num { background: var(--rq-blue); border-color: var(--rq-blue-dark); color: #fff; }
.rq-answer--correct { border-color: var(--rq-green); border-bottom-color: var(--rq-green-dark); background: var(--rq-green-bg); color: var(--rq-green-text); }
.rq-answer--correct .rq-answer__num { background: var(--rq-green); color: #fff; border-color: var(--rq-green-dark); }
.rq-answer--wrong { border-color: var(--rq-red); background: var(--rq-red-bg); color: var(--rq-red-text); }
.rq-answer--wrong .rq-answer__num { background: var(--rq-red); color: #fff; border-color: var(--rq-red); }

.rq-play__dock, .rq-feedback {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.8rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
}

.rq-play__dock { z-index: 30; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 28%); }
.rq-feedback { z-index: 40; transform: translateY(110%); transition: transform 0.28s ease; }
.rq-feedback--visible { transform: translateY(0); }
.rq-feedback--ok { background: var(--rq-green-bg); color: var(--rq-green-text); }
.rq-feedback--bad { background: var(--rq-red-bg); color: var(--rq-red-text); }
.rq-feedback h4 { margin: 0 0 0.35rem; font-size: 1.3rem; }
.rq-feedback p { margin: 0 0 0.8rem; }

.rq-btn {
    display: block;
    width: 100%;
    min-height: 52px;
    border-radius: 14px;
    border: 2px solid var(--rq-border);
    border-bottom-width: 4px;
    background: #fff;
    color: var(--rq-text);
    font: inherit;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}
.rq-btn--primary {
    background: var(--rq-green);
    border-color: var(--rq-green);
    border-bottom-color: var(--rq-green-dark);
    color: #fff;
}
.rq-btn--primary:disabled {
    background: var(--rq-border);
    border-color: var(--rq-border);
    border-bottom-color: var(--rq-border-deep);
    color: #afafaf;
    cursor: not-allowed;
}
.rq-btn--ghost { margin-top: 0.55rem; text-transform: none; }
.rq-feedback--bad .rq-btn--primary { background: var(--rq-red); border-color: var(--rq-red); }

.rq-xp-pop {
    position: fixed;
    top: 28%;
    left: 50%;
    z-index: 50;
    transform: translateX(-50%);
    background: #ffc800;
    color: #3c3c3c;
    font-weight: 800;
    font-size: 1.3rem;
    padding: 0.45rem 0.9rem;
    border-radius: 14px;
    border-bottom: 4px solid #e0a800;
}

.rq-panel, .rq-complete { text-align: center; }
.rq-panel { padding: 1.5rem 1rem; }
.rq-panel h2 { margin-top: 0; }
.rq-complete__hero { width: min(100%, 280px); margin: 0 auto 0.4rem; }
.rq-complete__title { color: var(--rq-green-dark); font-size: 2rem; margin-bottom: 0.2rem; }
.rq-complete__module { color: var(--rq-text-soft); margin-top: 0; }
.rq-stat-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    max-width: 420px;
    margin: 0 auto 1rem;
}
.rq-stat-card { border: 2px solid transparent; border-radius: 14px; overflow: hidden; text-align: left; }
.rq-stat-card__head { color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.4rem 0.65rem; }
.rq-stat-card__body { display: flex; gap: 0.45rem; align-items: center; background: #fff; font-size: 1.6rem; font-weight: 800; padding: 0.8rem 0.7rem; }
.rq-stat-card--xp { border-color: #e0a800; }
.rq-stat-card--xp .rq-stat-card__head { background: #ffc800; color: #3c3c3c; }
.rq-stat-card--perfect, .rq-stat-card--great { border-color: var(--rq-green-dark); }
.rq-stat-card--perfect .rq-stat-card__head, .rq-stat-card--great .rq-stat-card__head { background: var(--rq-green); }
.rq-stat-card--ok { border-color: var(--rq-blue-dark); }
.rq-stat-card--ok .rq-stat-card__head { background: var(--rq-blue); }
.rq-complete__extras { list-style: none; padding: 0; color: var(--rq-text-soft); font-weight: 800; }
.rq-complete__cta, .rq-complete .rq-cert-cta { max-width: 420px; margin-left: auto; margin-right: auto; }
.rq-cert-cta {
    margin-top: 1rem;
    padding: 0.9rem;
    border: 2px dashed var(--rq-green);
    border-radius: 16px;
    background: #f7fff0;
}
.rq-cert-cta a { font-weight: 800; }
.rq-stat, .rq-empty { text-align: center; color: var(--rq-text-soft); font-weight: 800; }
.rq-save-note a { font-weight: 800; }

@media (min-width: 768px) {
    .rq-play__dock, .rq-feedback {
        padding-left: max(1rem, calc((100vw - 680px) / 2));
        padding-right: max(1rem, calc((100vw - 680px) / 2));
    }
}