/**

 * @author      Mike Fairbrother <mike@fairbrother.me>

 * @copyright   2024-2026 Mike Fairbrother. All rights reserved.

 * @license     PROPRIETARY - No rights to copy, modify, distribute, or reuse

 *              any part of this code without explicit written permission from the author.

 */

/* ============================================



   Reading Quest - Styles



   Prefix: rq-



   ============================================ */







/* ---- Logo ---- */



.rq-logo {



    font-size: 64px;



    line-height: 1;



    margin-bottom: 8px;



    filter: drop-shadow(0 4px 12px rgba(255, 217, 61, 0.3));



    animation: rq-float 3s ease-in-out infinite;



}







@keyframes rq-float {



    0%, 100% { transform: translateY(0); }



    50% { transform: translateY(-6px); }



}







/* ---- Title & Subtitle ---- */



.rq-title {



    font-size: 32px;



    font-weight: 800;



    background: linear-gradient(135deg, #ffd93d, #ff9f43);



    -webkit-background-clip: text;



    -webkit-text-fill-color: transparent;



    background-clip: text;



    margin-bottom: 4px;



}







.rq-subtitle {



    color: var(--gp-text-secondary);



    font-size: 15px;



    margin-bottom: 16px;



}







/* ---- Menu Best Score ---- */



.rq-menu-best {



    font-size: 14px;



    color: var(--gp-text-secondary);



    margin-bottom: 20px;



    font-weight: 600;



}



.rq-menu-best span {



    color: var(--gp-accent);



}







/* ---- Difficulty Picker ---- */



.rq-difficulty {



    margin-bottom: 24px;



    width: 100%;



    max-width: 340px;



}



.rq-diff-label {



    font-size: 11px;



    text-transform: uppercase;



    letter-spacing: 1.5px;



    color: var(--gp-text-secondary);



    font-weight: 600;



    margin-bottom: 10px;



}



.rq-diff-pills {



    display: flex;



    gap: 6px;



    flex-wrap: wrap;



    justify-content: center;



}



.rq-pill {



    padding: 8px 14px;



    border: 1px solid rgba(255, 255, 255, 0.12);



    border-radius: 20px;



    background: rgba(255, 255, 255, 0.05);



    color: var(--gp-text-secondary);



    font-size: 13px;



    font-weight: 600;



    cursor: pointer;



    transition: all 0.2s ease;



    font-family: var(--gp-font-stack);



}



.rq-pill:hover {



    background: rgba(255, 255, 255, 0.08);



}



.rq-pill.active {



    background: linear-gradient(135deg, rgba(255, 217, 61, 0.2), rgba(255, 159, 67, 0.2));



    border-color: var(--gp-accent);



    color: var(--gp-accent);



}







/* ---- Game Area ---- */



.rq-game-area {



    flex: 1;



    display: flex;



    flex-direction: column;



    padding: 8px 16px 16px;



    overflow-y: auto;



    gap: 12px;



}







/* ---- Progress Bar ---- */



.rq-progress-bar {



    width: 100%;



    height: 6px;



    background: rgba(255, 255, 255, 0.08);



    border-radius: 3px;



    overflow: hidden;



    flex-shrink: 0;



}



.rq-progress-fill {



    height: 100%;



    background: linear-gradient(90deg, var(--gp-accent), #ff9f43);



    border-radius: 3px;



    transition: width 0.4s ease;



    width: 0%;



}







/* ---- Passage Card ---- */



.rq-passage-card {



    background: rgba(255, 255, 255, 0.06);



    border: 1px solid rgba(255, 255, 255, 0.08);



    border-radius: var(--gp-radius-md);



    padding: 20px;



    position: relative;



    flex-shrink: 0;



}



.rq-passage-card::before {



    content: '\201C';



    position: absolute;



    top: 8px;



    left: 14px;



    font-size: 40px;



    color: rgba(255, 217, 61, 0.15);



    font-family: Georgia, serif;



    line-height: 1;



}



.rq-passage-text {



    font-size: 16px;



    line-height: 1.7;



    color: rgba(255, 255, 255, 0.9);



    text-align: left;



    user-select: text;



    -webkit-user-select: text;



    position: relative;



    z-index: 1;



}







/* ---- Question ---- */



.rq-question {



    font-size: 17px;



    font-weight: 700;



    color: var(--gp-accent);



    text-align: center;



    padding: 4px 8px;



    flex-shrink: 0;



}







/* ---- Answer Options ---- */



.rq-options {



    display: flex;



    flex-direction: column;



    gap: 10px;



    flex-shrink: 0;



    padding-bottom: 8px;



}



.rq-option-btn {



    width: 100%;



    padding: 14px 18px;



    border: 2px solid rgba(255, 255, 255, 0.1);



    border-radius: var(--gp-radius-md);



    background: rgba(255, 255, 255, 0.04);



    color: var(--gp-text-primary);



    font-size: 15px;



    font-weight: 600;



    cursor: pointer;



    transition: all 0.2s ease;



    text-align: left;



    font-family: var(--gp-font-stack);



    line-height: 1.4;



}



.rq-option-btn:hover {



    background: rgba(255, 255, 255, 0.08);



    border-color: rgba(255, 255, 255, 0.2);



}



.rq-option-btn:active {



    transform: scale(0.98);



}



.rq-option-btn.rq-correct {



    background: rgba(46, 213, 115, 0.2);



    border-color: var(--gp-success);



    color: var(--gp-success);



    animation: rq-pulse-correct 0.4s ease;



}



.rq-option-btn.rq-wrong {



    background: rgba(255, 71, 87, 0.2);



    border-color: var(--gp-danger);



    color: var(--gp-danger);



    animation: rq-shake 0.4s ease;



}



.rq-option-btn.rq-disabled {



    pointer-events: none;



    opacity: 0.5;



}



.rq-option-btn.rq-reveal {



    border-color: rgba(46, 213, 115, 0.4);



    color: rgba(46, 213, 115, 0.7);



}







@keyframes rq-pulse-correct {



    0% { transform: scale(1); }



    50% { transform: scale(1.02); }



    100% { transform: scale(1); }



}







@keyframes rq-shake {



    0%, 100% { transform: translateX(0); }



    20% { transform: translateX(-6px); }



    40% { transform: translateX(6px); }



    60% { transform: translateX(-4px); }



    80% { transform: translateX(4px); }



}







/* ---- Game Over Stats ---- */



.rq-stats-grid {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 12px;



    width: 100%;



    max-width: 300px;



    margin: 20px auto;



}



.rq-stat-box {



    background: rgba(255, 255, 255, 0.06);



    border: 1px solid rgba(255, 255, 255, 0.08);



    border-radius: var(--gp-radius-sm);



    padding: 14px 10px;



    display: flex;



    flex-direction: column;



    align-items: center;



}



.rq-stat-num {



    font-size: 28px;



    font-weight: 800;



    color: var(--gp-accent);



    line-height: 1.1;



}



.rq-stat-lbl {



    font-size: 11px;



    color: var(--gp-text-secondary);



    text-transform: uppercase;



    letter-spacing: 1px;



    font-weight: 600;



    margin-top: 4px;



}







/* ---- Help Modal Sections ---- */



.rq-help-section {



    margin-bottom: 16px;



}



.rq-help-section h4 {



    font-size: 15px;



    font-weight: 700;



    color: var(--gp-accent);



    margin-bottom: 4px;



}



.rq-help-section p {



    font-size: 13px;



    color: var(--gp-text-secondary);



    line-height: 1.5;



}







/* ---- Lives Hearts ---- */



#hud-lives {



    color: var(--gp-danger);



    font-size: 20px;



    letter-spacing: 2px;



}







/* ---- Passage transition ---- */



.rq-passage-card.rq-fade-in {



    animation: rq-card-enter 0.4s ease;



}







@keyframes rq-card-enter {



    0% { opacity: 0; transform: translateY(10px); }



    100% { opacity: 1; transform: translateY(0); }



}







/* ---- Responsive tweaks ---- */



@media (max-height: 640px) {



    .rq-passage-card {



        padding: 14px;



    }



    .rq-passage-text {



        font-size: 14px;



        line-height: 1.6;



    }



    .rq-question {



        font-size: 15px;



    }



    .rq-option-btn {



        padding: 10px 14px;



        font-size: 14px;



    }



}