.cbs-popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); display: flex; align-items: center; justify-content: center;
    z-index: 999999; font-family: system-ui, -apple-system, Arial, sans-serif;
}

.cbs-popup-content {
    background: #f8fafc;
    border-radius: 24px; 
    padding: 30px 20px; 
    max-width: 420px; 
    width: 92%;
    box-shadow: 0 25px 60px -15px rgba(0,0,0,0.6); 
    text-align: center;
}

.cbs-header .logo { font-size: 48px; margin-bottom: 10px; }
.brand { color: #1e40af; font-weight: 800; letter-spacing: 0.5px; font-size: 1.45rem; }

.question { 
    font-size: 19px; 
    margin: 22px 0 18px; 
    color: #1e3a8a; 
    font-weight: 600; 
    line-height: 1.4;
}

.options {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 14px;
}

.opt-btn {
    padding: 17px 10px; 
    border: none; 
    border-radius: 14px; 
    background: #ffffff; 
    color: #1f2937;               /* Dark text for visibility */
    font-size: 15.5px; 
    cursor: pointer; 
    transition: all 0.3s; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    font-weight: 500;
    word-break: break-all;        /* Fix long domain overflow */
    hyphens: auto;
    line-height: 1.35;
}

.opt-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}

.correct { 
    background: #22c55e !important; 
    color: white !important; 
    box-shadow: 0 0 0 8px rgba(34,197,94,0.4); 
}

.wrong { 
    background: #ef4444 !important; 
    color: white !important; 
    animation: shake 0.5s; 
}

@keyframes shake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.word { 
    font-size: 26px; 
    font-weight: bold; 
    color: #1e40af; 
    margin: 12px 0 25px; 
    letter-spacing: 3px;
}

.drag-letters {
    display: flex; 
    gap: 16px; 
    justify-content: center; 
    flex-wrap: wrap; 
    margin: 25px 0;
}

.letter {
    padding: 16px 26px; 
    background: #bae6fd; 
    border-radius: 14px; 
    font-size: 26px; 
    cursor: grab; 
    box-shadow: 0 6px 15px rgba(0,0,0,0.1); 
    user-select: none;
    min-width: 52px;
}

.drop-zone {
    border: 4px dashed #64748b; 
    padding: 28px 20px; 
    border-radius: 18px; 
    background: white; 
    font-size: 17px; 
    min-height: 78px; 
    margin: 20px auto; 
    max-width: 300px; 
    transition: all 0.3s;
}

.close-btn {
    margin-top: 20px; 
    padding: 16px 40px; 
    background: #1e40af; 
    color: white; 
    border: none; 
    border-radius: 14px; 
    font-size: 17px; 
    cursor: pointer; 
    font-weight: 600;
}

/* Mobile Fixes */
@media (max-width: 480px) {
    .cbs-popup-content { 
        padding: 25px 18px; 
        border-radius: 20px; 
    }
    .options { 
        grid-template-columns: 1fr;     /* Stack buttons vertically on very small screens */
    }
    .opt-btn {
        font-size: 15px;
        padding: 16px 12px;
    }
    .word { font-size: 23px; }
    .letter { 
        padding: 14px 22px; 
        font-size: 24px; 
        min-width: 48px; 
    }
}